@agent-native/core 0.79.27 → 0.80.0

package/corpus/templates/design/app/components/design/inspector/figma-icons.tsx

@@ -0,0 +1,361 @@
+import { cn } from "@/lib/utils";
+
+interface IconProps {
+  className?: string;
+}
+
+export function IconGap({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Left bracket ]  */}
+      <line x1="8" y1="6" x2="4" y2="6" />
+      <line x1="4" y1="6" x2="4" y2="18" />
+      <line x1="4" y1="18" x2="8" y2="18" />
+      {/* Center dot */}
+      <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" />
+      {/* Right bracket [ */}
+      <line x1="16" y1="6" x2="20" y2="6" />
+      <line x1="20" y1="6" x2="20" y2="18" />
+      <line x1="20" y1="18" x2="16" y2="18" />
+    </svg>
+  );
+}
+
+export function IconPaddingHorizontal({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Outer frame */}
+      <rect x="3" y="3" width="18" height="18" rx="2" strokeWidth="1.5" />
+      {/* Thick left side */}
+      <line
+        x1="3"
+        y1="3"
+        x2="3"
+        y2="21"
+        strokeWidth="4"
+        strokeLinecap="square"
+      />
+      {/* Thick right side */}
+      <line
+        x1="21"
+        y1="3"
+        x2="21"
+        y2="21"
+        strokeWidth="4"
+        strokeLinecap="square"
+      />
+    </svg>
+  );
+}
+
+export function IconPaddingVertical({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Outer frame */}
+      <rect x="3" y="3" width="18" height="18" rx="2" strokeWidth="1.5" />
+      {/* Thick top side */}
+      <line
+        x1="3"
+        y1="3"
+        x2="21"
+        y2="3"
+        strokeWidth="4"
+        strokeLinecap="square"
+      />
+      {/* Thick bottom side */}
+      <line
+        x1="3"
+        y1="21"
+        x2="21"
+        y2="21"
+        strokeWidth="4"
+        strokeLinecap="square"
+      />
+    </svg>
+  );
+}
+
+export function IconFlowHorizontal({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Container frame */}
+      <rect x="2" y="7" width="20" height="10" rx="2" strokeWidth="1.5" />
+      {/* Left item */}
+      <rect
+        x="5"
+        y="10"
+        width="5"
+        height="4"
+        rx="1"
+        fill="currentColor"
+        stroke="none"
+      />
+      {/* Right item */}
+      <rect
+        x="14"
+        y="10"
+        width="5"
+        height="4"
+        rx="1"
+        fill="currentColor"
+        stroke="none"
+      />
+    </svg>
+  );
+}
+
+export function IconFlowVertical({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Container frame */}
+      <rect x="7" y="2" width="10" height="20" rx="2" strokeWidth="1.5" />
+      {/* Top item */}
+      <rect
+        x="10"
+        y="5"
+        width="4"
+        height="5"
+        rx="1"
+        fill="currentColor"
+        stroke="none"
+      />
+      {/* Bottom item */}
+      <rect
+        x="10"
+        y="14"
+        width="4"
+        height="5"
+        rx="1"
+        fill="currentColor"
+        stroke="none"
+      />
+    </svg>
+  );
+}
+
+export function IconFlowWrap({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* First row: two items */}
+      <rect x="2" y="4" width="8" height="7" rx="1.5" strokeWidth="1.5" />
+      <rect x="12" y="4" width="8" height="7" rx="1.5" strokeWidth="1.5" />
+      {/* Second row: one item (wrap) */}
+      <rect x="2" y="13" width="8" height="7" rx="1.5" strokeWidth="1.5" />
+      {/* Wrap arrow */}
+      <polyline points="20,16 20,19 17,19" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function IconFlowGrid({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Top-left */}
+      <rect x="2" y="2" width="9" height="9" rx="1.5" strokeWidth="1.5" />
+      {/* Top-right */}
+      <rect x="13" y="2" width="9" height="9" rx="1.5" strokeWidth="1.5" />
+      {/* Bottom-left */}
+      <rect x="2" y="13" width="9" height="9" rx="1.5" strokeWidth="1.5" />
+      {/* Bottom-right */}
+      <rect x="13" y="13" width="9" height="9" rx="1.5" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function IconDistributeHorizontal({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Left rail */}
+      <line x1="3" y1="5" x2="3" y2="19" />
+      {/* Right rail */}
+      <line x1="21" y1="5" x2="21" y2="19" />
+      {/* Center item */}
+      <rect
+        x="9"
+        y="9"
+        width="6"
+        height="6"
+        rx="1"
+        fill="currentColor"
+        stroke="none"
+      />
+      {/* Spacing tick marks */}
+      <line x1="6" y1="10" x2="6" y2="14" strokeWidth="1.5" />
+      <line x1="18" y1="10" x2="18" y2="14" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function IconDistributeVertical({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Top rail */}
+      <line x1="5" y1="3" x2="19" y2="3" />
+      {/* Bottom rail */}
+      <line x1="5" y1="21" x2="19" y2="21" />
+      {/* Center item */}
+      <rect
+        x="9"
+        y="9"
+        width="6"
+        height="6"
+        rx="1"
+        fill="currentColor"
+        stroke="none"
+      />
+      {/* Spacing tick marks */}
+      <line x1="10" y1="6" x2="14" y2="6" strokeWidth="1.5" />
+      <line x1="10" y1="18" x2="14" y2="18" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function IconLayoutSettings({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Line 1 with handle at x=8 */}
+      <line x1="3" y1="7" x2="21" y2="7" />
+      <circle
+        cx="8"
+        cy="7"
+        r="2"
+        fill="var(--background, white)"
+        strokeWidth="2"
+      />
+      {/* Line 2 with handle at x=15 */}
+      <line x1="3" y1="12" x2="21" y2="12" />
+      <circle
+        cx="15"
+        cy="12"
+        r="2"
+        fill="var(--background, white)"
+        strokeWidth="2"
+      />
+      {/* Line 3 with handle at x=10 */}
+      <line x1="3" y1="17" x2="21" y2="17" />
+      <circle
+        cx="10"
+        cy="17"
+        r="2"
+        fill="var(--background, white)"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
+export function IconResizeToFit({ className }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("size-4", className)}
+      aria-hidden="true"
+    >
+      {/* Inner content box */}
+      <rect x="8" y="8" width="8" height="8" rx="1" strokeWidth="1.5" />
+      {/* Top-left corner arrows */}
+      <polyline points="4,8 4,4 8,4" />
+      {/* Top-right corner arrows */}
+      <polyline points="16,4 20,4 20,8" />
+      {/* Bottom-left corner arrows */}
+      <polyline points="8,20 4,20 4,16" />
+      {/* Bottom-right corner arrows */}
+      <polyline points="20,16 20,20 16,20" />
+    </svg>
+  );
+}

package/corpus/templates/design/app/components/design/inspector/index.ts

@@ -0,0 +1,60 @@
+export {
+  AlignmentMatrix,
+  type AlignmentHorizontal,
+  type AlignmentMatrixLabels,
+  type AlignmentMatrixProps,
+  type AlignmentMatrixValue,
+  type AlignmentVertical,
+  type DistributionAxis,
+} from "./AlignmentMatrix";
+export {
+  AutoLayoutMatrix,
+  type AutoLayoutDirection,
+  type AutoLayoutMatrixLabels,
+  type AutoLayoutMatrixProps,
+  type AutoLayoutMatrixValue,
+  type AutoLayoutPadding,
+  type AutoLayoutSizing,
+  type AutoLayoutSizingAxis,
+  type AutoLayoutWrap,
+} from "./AutoLayoutMatrix";
+export {
+  ConstraintsWidget,
+  type ConstraintsValue,
+  type ConstraintsWidgetLabels,
+  type ConstraintsWidgetProps,
+  type HorizontalConstraint,
+  type VerticalConstraint,
+} from "./ConstraintsWidget";
+export {
+  ExportSettingsPanel,
+  type ExportFormat,
+  type ExportSettingsPanelLabels,
+  type ExportSettingsPanelProps,
+  type ExportSettingsValue,
+} from "./ExportSettingsPanel";
+export {
+  FigmaColorPicker,
+  type FigmaColorMode,
+  type FigmaColorPickerLabels,
+  type FigmaColorPickerProps,
+  type FigmaFillRow,
+  type FigmaFillRowPatch,
+  type FigmaFillType,
+  type FigmaGradientStop,
+  type FigmaGradientStopPatch,
+  type FigmaGradientType,
+} from "./FigmaColorPicker";
+export {
+  ScrubInput,
+  type ScrubInputChangeMeta,
+  type ScrubInputProps,
+} from "./ScrubInput";
+export {
+  formatScrubValue,
+  getScrubStepFromEvent,
+  normalizeScrubNumber,
+  parseScrubExpression,
+  type ParsedScrubExpression,
+  type ScrubExpressionOptions,
+} from "./scrub-input-utils";

package/corpus/templates/design/app/components/design/inspector/scrub-input-utils.ts

@@ -0,0 +1,201 @@
+export interface ScrubExpressionOptions {
+  unit?: string;
+  min?: number;
+  max?: number;
+  precision?: number;
+}
+
+export interface ParsedScrubExpression {
+  value: number;
+  normalized: string;
+}
+
+type MathOperator = "+" | "-" | "*" | "/";
+
+type Token =
+  | { type: "number"; value: number }
+  | { type: "operator"; value: MathOperator };
+
+const NUMBER_CHAR_PATTERN = /[0-9.]/;
+
+export function parseScrubExpression(
+  input: string,
+  currentValue: number,
+  options: ScrubExpressionOptions = {},
+): ParsedScrubExpression | null {
+  const raw = input.trim();
+  if (!raw) return null;
+
+  const expression = toNumericExpression(raw, currentValue, options.unit);
+  const value = evaluateNumericExpression(expression);
+  if (value === null) return null;
+
+  const normalizedValue = normalizeScrubNumber(value, options);
+  return {
+    value: normalizedValue,
+    normalized: formatScrubValue(normalizedValue, options),
+  };
+}
+
+export function normalizeScrubNumber(
+  value: number,
+  options: ScrubExpressionOptions = {},
+): number {
+  if (!Number.isFinite(value)) return 0;
+
+  let next = value;
+  if (Number.isFinite(options.min)) next = Math.max(options.min!, next);
+  if (Number.isFinite(options.max)) next = Math.min(options.max!, next);
+  if (Number.isFinite(options.precision)) {
+    const scale = 10 ** Math.max(0, options.precision!);
+    next = Math.round(next * scale) / scale;
+  }
+  return Object.is(next, -0) ? 0 : next;
+}
+
+export function formatScrubValue(
+  value: number,
+  options: Pick<ScrubExpressionOptions, "precision" | "unit"> = {},
+): string {
+  const normalized = normalizeScrubNumber(value, options);
+  const numeric =
+    Number.isFinite(options.precision) && options.precision! >= 0
+      ? normalized.toFixed(options.precision).replace(/\.?0+$/, "")
+      : String(normalized);
+  return `${numeric}${options.unit ?? ""}`;
+}
+
+export function getScrubStepFromEvent(
+  event: Pick<KeyboardEvent | PointerEvent, "altKey" | "shiftKey">,
+  step: number,
+): number {
+  let multiplier = 1;
+  if (event.shiftKey) multiplier *= 10;
+  if (event.altKey) multiplier *= 0.1;
+  return step * multiplier;
+}
+
+function toNumericExpression(
+  raw: string,
+  currentValue: number,
+  unit?: string,
+): string {
+  let expression = raw.trim();
+
+  if (unit) {
+    expression = expression.replace(new RegExp(escapeRegExp(unit), "gi"), "");
+  }
+
+  if (expression.startsWith("=")) return expression.slice(1).trim();
+  if (/^[+\-*/]/.test(expression)) return `${currentValue}${expression}`;
+  return expression;
+}
+
+function evaluateNumericExpression(expression: string): number | null {
+  const tokens = tokenizeExpression(expression);
+  if (!tokens.length) return null;
+
+  const values: number[] = [];
+  const operators: MathOperator[] = [];
+
+  for (const token of tokens) {
+    if (token.type === "number") {
+      values.push(token.value);
+      continue;
+    }
+
+    while (
+      operators.length &&
+      precedence(operators[operators.length - 1]) >= precedence(token.value)
+    ) {
+      if (!applyTopOperator(values, operators)) return null;
+    }
+    operators.push(token.value);
+  }
+
+  while (operators.length) {
+    if (!applyTopOperator(values, operators)) return null;
+  }
+
+  if (values.length !== 1 || !Number.isFinite(values[0])) return null;
+  return values[0];
+}
+
+function tokenizeExpression(expression: string): Token[] {
+  const tokens: Token[] = [];
+  let index = 0;
+  let previousWasOperator = true;
+
+  while (index < expression.length) {
+    const char = expression[index];
+    if (/\s/.test(char)) {
+      index += 1;
+      continue;
+    }
+
+    const signedNumber =
+      (char === "+" || char === "-") &&
+      previousWasOperator &&
+      NUMBER_CHAR_PATTERN.test(expression[index + 1] ?? "");
+
+    if (NUMBER_CHAR_PATTERN.test(char) || signedNumber) {
+      const start = index;
+      index += 1;
+      while (NUMBER_CHAR_PATTERN.test(expression[index] ?? "")) index += 1;
+      const value = Number(expression.slice(start, index));
+      if (!Number.isFinite(value)) return [];
+      tokens.push({ type: "number", value });
+      previousWasOperator = false;
+      continue;
+    }
+
+    if (isOperator(char)) {
+      tokens.push({ type: "operator", value: char });
+      previousWasOperator = true;
+      index += 1;
+      continue;
+    }
+
+    return [];
+  }
+
+  return tokens;
+}
+
+function applyTopOperator(
+  values: number[],
+  operators: MathOperator[],
+): boolean {
+  const operator = operators.pop();
+  const right = values.pop();
+  const left = values.pop();
+  if (!operator || right === undefined || left === undefined) return false;
+
+  switch (operator) {
+    case "+":
+      values.push(left + right);
+      return true;
+    case "-":
+      values.push(left - right);
+      return true;
+    case "*":
+      values.push(left * right);
+      return true;
+    case "/":
+      if (right === 0) return false;
+      values.push(left / right);
+      return true;
+  }
+}
+
+function precedence(operator: MathOperator): number {
+  return operator === "*" || operator === "/" ? 2 : 1;
+}
+
+function isOperator(char: string): char is MathOperator {
+  return char === "+" || char === "-" || char === "*" || char === "/";
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/corpus/templates/design/app/components/design/types.ts

@@ -1,14 +1,37 @@
 export interface ElementInfo {
   tagName: string;
   id?: string;
+  sourceId?: string;
   selector?: string;
   classes: string[];
   computedStyles: Record<string, string>;
   boundingRect: { x: number; y: number; width: number; height: number };
   textContent?: string;
+  htmlContent?: string;
   isFlexChild: boolean;
   isFlexContainer: boolean;
   parentDisplay?: string;
+  parentLayout?: {
+    display?: string;
+    flexDirection?: string;
+    alignItems?: string;
+    justifyContent?: string;
+    gap?: string;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    position?: string;
+  };
+  editCapabilities?: Array<{
+    kind:
+      | "deterministic-style-edit"
+      | "deterministic-class-edit"
+      | "agent-structural-edit"
+      | "unsupported";
+    label: string;
+    confidence: number;
+    reason?: string;
+  }>;
+  confidence?: number;
 }
 
 export type DeviceFrameType = "none" | "desktop" | "tablet" | "mobile";