@agent-native/core 0.79.27 → 0.80.1

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

@@ -0,0 +1,87 @@
+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,
+  SizingField,
+  type SizingFieldProps,
+} 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,
+  type FigmaPaintType,
+} from "./FigmaColorPicker";
+export {
+  GradientEditor,
+  defaultGradient,
+  gradientToCss,
+  parseGradientCss,
+  type GradientEditorProps,
+  type GradientKind,
+  type GradientStopValue,
+  type GradientValue,
+} from "./GradientEditor";
+export {
+  ImageFillControls,
+  imageFillToCss,
+  parseImageFillCss,
+  type ImageFillControlsProps,
+  type ImageFillValue,
+  type ImageFitMode,
+} from "./ImageFillControls";
+export {
+  ShaderFillsPanel,
+  descriptorFromPreset,
+  shaderDescriptorToCss,
+  type ShaderFillsPanelProps,
+} from "./ShaderFillsPanel";
+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";

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -99,7 +99,9 @@ export function Layout({ children }: LayoutProps) {
 
   return (
     <HeaderActionsProvider>
-      <MobileSidebarContext.Provider value={openMobileSidebar}>
+      <MobileSidebarContext.Provider
+        value={isDesignEditor ? null : openMobileSidebar}
+      >
         <AgentSidebar
           position="right"
           emptyStateText={t("chat.emptyState")}
@@ -112,22 +114,24 @@ export function Layout({ children }: LayoutProps) {
           browserTabId={getBrowserTabId()}
         >
           <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
-            {mobileSidebarOpen && (
+            {!isDesignEditor && mobileSidebarOpen && (
               <div
                 className="fixed inset-0 z-40 bg-black/50 md:hidden"
                 onClick={() => setMobileSidebarOpen(false)}
               />
             )}
-            <div
-              className={cn(
-                "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none",
-                mobileSidebarOpen
-                  ? "translate-x-0"
-                  : "-translate-x-full rtl:translate-x-full md:translate-x-0 md:rtl:translate-x-0",
-              )}
-            >
-              <Sidebar />
-            </div>
+            {!isDesignEditor && (
+              <div
+                className={cn(
+                  "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none",
+                  mobileSidebarOpen
+                    ? "translate-x-0"
+                    : "-translate-x-full rtl:translate-x-full md:translate-x-0 md:rtl:translate-x-0",
+                )}
+              >
+                <Sidebar />
+              </div>
+            )}
             <div className="agent-layout-main-surface flex h-full flex-1 flex-col overflow-hidden">
               {/* Mobile-only top bar with hamburger */}
               {showMobileTopBar && (
@@ -145,7 +149,14 @@ export function Layout({ children }: LayoutProps) {
                 </div>
               )}
               {!hideHeader && <Header />}
-              <main className="flex-1 overflow-y-auto">{children}</main>
+              <main
+                className={cn(
+                  "flex-1",
+                  isDesignEditor ? "overflow-hidden" : "overflow-y-auto",
+                )}
+              >
+                {children}
+              </main>
             </div>
           </div>
         </AgentSidebar>

package/corpus/templates/design/app/components/layout/Sidebar.tsx

@@ -62,7 +62,7 @@ export function Sidebar() {
   return (
     <aside
       className={cn(
-        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground",
+        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out",
         collapsed ? "w-14" : "w-56",
       )}
     >
@@ -158,15 +158,15 @@ export function Sidebar() {
 
         {!collapsed && (
           <div className="mt-auto shrink-0">
-            <div className="border-t border-border px-2 py-1">
+            <div className="px-2 py-1">
               <ExtensionsSidebarSection />
             </div>
 
-            <div className="border-t border-border px-3 py-2">
+            <div className="px-3 py-2">
               <OrgSwitcher />
             </div>
 
-            <div className="border-t border-border px-3 py-2">
+            <div className="px-3 py-2">
               <DevDatabaseLink />
               <div className="flex items-center gap-1">
                 <FeedbackButton className="min-w-0 flex-1" />