'use strict';

// src/design/design-inspector-native.ts
function toCssValue(value) {
  if (value == null) return "";
  if (typeof value === "number") return `${value}px`;
  return String(value);
}
function transformToCss(transform) {
  if (!Array.isArray(transform) || transform.length === 0) return "";
  return transform.map((t) => {
    const key = Object.keys(t)[0];
    if (!key) return "";
    const val = t[key];
    if (typeof val === "string") return `${key}(${val})`;
    if (typeof val === "number") {
      const needsPx = key.startsWith("translate") || key === "perspective";
      return `${key}(${val}${needsPx ? "px" : ""})`;
    }
    return "";
  }).filter(Boolean).join(" ");
}
function shadowToCss(style) {
  const parts = [];
  const shadowColor = style.shadowColor;
  const shadowOffset = style.shadowOffset;
  const shadowOpacity = style.shadowOpacity;
  const shadowRadius = style.shadowRadius;
  if (shadowColor && shadowOffset && shadowOpacity != null && shadowOpacity > 0) {
    const { width, height } = shadowOffset;
    parts.push(
      `${width}px ${height}px ${shadowRadius ?? 0}px ${shadowColor}` + (shadowOpacity < 1 ? ` /* opacity: ${shadowOpacity} */` : "")
    );
  }
  const elevation = style.elevation;
  if (elevation != null && elevation > 0) {
    parts.push(`elevation(${elevation})`);
  }
  return parts.join(", ");
}
function borderToCss(style) {
  const width = style.borderWidth;
  const color = style.borderColor;
  if (width == null && color == null) return "";
  return `${width ?? 0}px solid ${color ?? "transparent"}`;
}
function borderRadiusToCss(style) {
  const uniform = style.borderRadius;
  if (uniform != null) return `${uniform}px`;
  const tl = style.borderTopLeftRadius;
  const tr = style.borderTopRightRadius;
  const bl = style.borderBottomLeftRadius;
  const br = style.borderBottomRightRadius;
  if (tl == null && tr == null && bl == null && br == null) return "";
  return `${tl ?? 0}px ${tr ?? 0}px ${br ?? 0}px ${bl ?? 0}px`;
}
function resolveSpacing(style, prefix) {
  const all = style[prefix];
  const top = style[`${prefix}Top`] ?? style[`${prefix}Vertical`] ?? all;
  const bottom = style[`${prefix}Bottom`] ?? style[`${prefix}Vertical`] ?? all;
  const right = style[`${prefix}Right`] ?? style[`${prefix}Horizontal`] ?? all;
  const left = style[`${prefix}Left`] ?? style[`${prefix}Horizontal`] ?? all;
  const t = toCssValue(top);
  const r = toCssValue(right);
  const b = toCssValue(bottom);
  const l = toCssValue(left);
  let shorthand = "";
  if (t || r || b || l) {
    if (t === r && r === b && b === l) {
      shorthand = t || "0px";
    } else if (t === b && r === l) {
      shorthand = `${t || "0px"} ${r || "0px"}`;
    } else {
      shorthand = `${t || "0px"} ${r || "0px"} ${b || "0px"} ${l || "0px"}`;
    }
  }
  return {
    top: t,
    right: r,
    bottom: b,
    left: l,
    shorthand
  };
}
function resolveGap(style) {
  const gap = style.gap;
  const rowGap = style.rowGap;
  const columnGap = style.columnGap;
  if (gap != null) return `${gap}px`;
  if (rowGap != null && columnGap != null) return `${rowGap}px ${columnGap}px`;
  if (rowGap != null) return `${rowGap}px`;
  if (columnGap != null) return `${columnGap}px`;
  return "";
}
function mapNativeStyleToExtended(rnStyle) {
  const s = rnStyle ?? {};
  const margin = resolveSpacing(s, "margin");
  const padding = resolveSpacing(s, "padding");
  return {
    // Layout
    display: s.display ?? "flex",
    position: s.position ?? "relative",
    boxSizing: "",
    // CSS-only
    width: toCssValue(s.width),
    height: toCssValue(s.height),
    minWidth: toCssValue(s.minWidth),
    maxWidth: toCssValue(s.maxWidth),
    minHeight: toCssValue(s.minHeight),
    maxHeight: toCssValue(s.maxHeight),
    margin: margin.shorthand,
    marginTop: margin.top,
    marginRight: margin.right,
    marginBottom: margin.bottom,
    marginLeft: margin.left,
    padding: padding.shorthand,
    paddingTop: padding.top,
    paddingRight: padding.right,
    paddingBottom: padding.bottom,
    paddingLeft: padding.left,
    overflow: s.overflow ?? "",
    overflowX: "",
    // CSS-only
    overflowY: "",
    // CSS-only
    // Flex/Grid — RN defaults to column, not row
    flexDirection: s.flexDirection ?? "",
    flexWrap: s.flexWrap ?? "",
    justifyContent: s.justifyContent ?? "",
    alignItems: s.alignItems ?? "",
    alignSelf: s.alignSelf ?? "",
    gap: resolveGap(s),
    gridTemplateColumns: "",
    // CSS-only
    gridTemplateRows: "",
    // CSS-only
    // Typography
    fontFamily: s.fontFamily ?? "",
    fontSize: toCssValue(s.fontSize),
    fontWeight: s.fontWeight ?? "",
    lineHeight: toCssValue(s.lineHeight),
    letterSpacing: toCssValue(s.letterSpacing),
    textAlign: s.textAlign ?? "",
    textTransform: s.textTransform ?? "",
    textDecoration: s.textDecorationLine ?? "",
    // RN name → CSS name
    color: s.color ?? "",
    // Visual
    backgroundColor: s.backgroundColor ?? "",
    backgroundImage: "",
    // CSS-only
    border: borderToCss(s),
    borderRadius: borderRadiusToCss(s),
    boxShadow: shadowToCss(s),
    opacity: s.opacity != null ? String(s.opacity) : "",
    outline: "",
    // CSS-only
    // Effects
    transform: transformToCss(s.transform),
    transition: "",
    // CSS-only
    cursor: "",
    // CSS-only
    zIndex: s.zIndex != null ? String(s.zIndex) : "",
    visibility: "",
    // CSS-only
    pointerEvents: s.pointerEvents ?? ""
  };
}
function getNativeElementDesignData(id, label, type, rnStyle, layout) {
  return {
    elementId: id,
    label,
    type,
    styles: mapNativeStyleToExtended(rnStyle),
    pseudoElements: [],
    // RN has no pseudo-elements
    rect: layout ? {
      x: layout.pageX,
      y: layout.pageY,
      width: layout.width,
      height: layout.height
    } : { x: 0, y: 0, width: 0, height: 0 }
  };
}
function computeStyleDiff(defaultStyles, stateStyles) {
  const diffs = [];
  for (const key of Object.keys(defaultStyles)) {
    if (defaultStyles[key] !== stateStyles[key]) {
      diffs.push({
        property: key,
        defaultValue: defaultStyles[key],
        stateValue: stateStyles[key]
      });
    }
  }
  return diffs;
}
function mergeStyles(base, override) {
  if (!override) return base;
  return { ...base, ...override };
}
function captureNativeStateVariations(baseStyle, stateStyles) {
  const base = baseStyle ?? {};
  const defaultExtended = mapNativeStyleToExtended(base);
  const results = [
    {
      state: "default",
      styles: defaultExtended,
      diffFromDefault: []
    }
  ];
  if (!stateStyles) return results;
  const states = [
    { name: "pressed", override: stateStyles.pressed },
    { name: "focused", override: stateStyles.focused },
    { name: "disabled", override: stateStyles.disabled }
  ];
  for (const { name, override } of states) {
    if (!override) continue;
    const merged = mergeStyles(base, override);
    const extended = mapNativeStyleToExtended(merged);
    const diff = computeStyleDiff(defaultExtended, extended);
    if (diff.length > 0) {
      results.push({ state: name, styles: extended, diffFromDefault: diff });
    }
  }
  return results;
}
function captureNativeResponsiveSnapshot(elements, screenDimensions) {
  const elementData = elements.map(
    (el) => getNativeElementDesignData(el.id, el.label, el.type, el.flatStyle, el.layout)
  );
  return [
    {
      viewportWidth: screenDimensions.width,
      viewportLabel: "current",
      elements: elementData,
      timestamp: Date.now()
    }
  ];
}

exports.captureNativeResponsiveSnapshot = captureNativeResponsiveSnapshot;
exports.captureNativeStateVariations = captureNativeStateVariations;
exports.getNativeElementDesignData = getNativeElementDesignData;
exports.mapNativeStyleToExtended = mapNativeStyleToExtended;
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map