@agent-native/core 0.176.1 → 0.176.2-nightly-20260831185956

package/corpus/templates/design/app/components/design/edit-panel/component-section.tsx

@@ -3,6 +3,10 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  BuilderConnectPopover,
+  useBuilderConnectFlow,
+} from "@agent-native/core/client/settings";
 import { withBuilderUtmTrackingParams } from "@agent-native/core/shared";
 import { propNameToDataAttribute } from "@shared/component-model";
 import {
@@ -110,10 +114,25 @@ function MakeItRealCard({
   featureLabel: string;
 }) {
   const t = useT();
+  const queryClient = useQueryClient();
   const { data, isLoading } = useActionQuery<ConnectBuilderAppResult>(
     "connect-builder-app",
     { designId },
   );
+  const builderConnect = useBuilderConnectFlow({
+    popupUrl:
+      data?.cta?.kind === "connect-builder" ? data.cta.connectUrl : undefined,
+    provisionAccount: true,
+    trackingSource: "design_editor_make_real",
+    trackingFlow: "design_migration",
+    onConnected: () => {
+      if (data?.cta?.kind === "connect-builder") {
+        void queryClient.invalidateQueries({
+          queryKey: ["action", "connect-builder-app", { designId }],
+        });
+      }
+    },
+  });
 
   const migrateMutation = useActionMutation("migrate-inline-design-to-app");
 
@@ -139,12 +158,6 @@ function MakeItRealCard({
 
   // "Make it real" primary action: open the connect URL or migrate.
   const handlePrimary = () => {
-    if (cta.kind === "connect-builder") {
-      // Open the Builder OAuth connect flow in a new tab.  The user completes
-      // it there and comes back; the card will re-query on next render.
-      window.open(cta.connectUrl, "_blank", "noopener,noreferrer");
-      return;
-    }
     if (cta.kind === "configure-project") {
       window.open(cta.connectUrl, "_blank", "noopener,noreferrer");
       return;
@@ -211,16 +224,30 @@ function MakeItRealCard({
         >
           {summary}
         </p>
-        <Button
-          type="button"
-          size="sm"
-          onClick={handlePrimary}
-          title={cta.primaryAction}
-          className="h-6 shrink-0 gap-1 rounded-md bg-[var(--design-editor-accent-color)] px-1.5 text-[10px] font-semibold text-white hover:bg-[var(--design-editor-accent-hover-color)]"
-        >
-          {primaryLabel}
-          <IconArrowRight className="size-2.5" />
-        </Button>
+        {cta.kind === "connect-builder" ? (
+          <BuilderConnectPopover flow={builderConnect}>
+            <Button
+              type="button"
+              size="sm"
+              title={cta.primaryAction}
+              className="h-6 shrink-0 gap-1 rounded-md bg-[var(--design-editor-accent-color)] px-1.5 text-[10px] font-semibold text-primary-foreground hover:bg-[var(--design-editor-accent-hover-color)]"
+            >
+              {primaryLabel}
+              <IconArrowRight className="size-2.5" />
+            </Button>
+          </BuilderConnectPopover>
+        ) : (
+          <Button
+            type="button"
+            size="sm"
+            onClick={handlePrimary}
+            title={cta.primaryAction}
+            className="h-6 shrink-0 gap-1 rounded-md bg-[var(--design-editor-accent-color)] px-1.5 text-[10px] font-semibold text-primary-foreground hover:bg-[var(--design-editor-accent-hover-color)]"
+          >
+            {primaryLabel}
+            <IconArrowRight className="size-2.5" />
+          </Button>
+        )}
 
         {/* When Builder is fully connected, also offer direct migration */}
         {data.connected && data.builderEnabled && (
@@ -762,10 +789,10 @@ export function ComponentSection({
   if (isLoading) {
     return (
       <section className="shrink-0 border-t border-[var(--design-editor-control-border)] first:border-t-0">
-        <div className="flex min-h-8 items-center gap-2 px-2">
+        <div className="flex min-h-[var(--design-section-height)] items-center gap-2 px-2">
           <div className="h-3 w-24 animate-pulse rounded bg-muted/50" />
         </div>
-        <div className="space-y-2 px-2 pb-2 pt-0.5">
+        <div className="design-sidebar-section-content pt-0">
           <div className="h-5 w-full animate-pulse rounded bg-muted/40" />
           <div className="h-5 w-3/4 animate-pulse rounded bg-muted/40" />
         </div>
@@ -889,7 +916,10 @@ export function ComponentSection({
     >
       {/* ── Section header ── */}
       <div className="px-2">
-        <InspectorGrid className="min-h-8 items-center" layout="header-actions">
+        <InspectorGrid
+          className="min-h-[var(--design-section-height)] items-center"
+          layout="header-actions"
+        >
           <InspectorGridCell span={20}>
             <div className="flex min-w-0 items-center gap-2">
               {/* Accent diamond matching the workbench artboard component rows */}
@@ -1063,7 +1093,7 @@ export function ComponentSection({
       </div>
 
       {/* ── Body ── */}
-      <div className="space-y-2 px-2 pb-2 pt-0.5 !text-[11px]">
+      <div className="design-sidebar-section-content !text-[11px]">
         {/* Source path chip */}
         {sourceChip && (
           <div
@@ -1081,7 +1111,7 @@ export function ComponentSection({
             through apply-component-prop-edit; real-app sources are read-only
             until the deeper source-prop controls land. */}
         {hasRows && (
-          <div className="space-y-1">
+          <div className="design-sidebar-control-stack">
             <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
               {t("designEditor.componentProps.label")}
             </p>

package/corpus/templates/design/app/components/design/edit-panel/effects-properties.tsx

@@ -446,7 +446,7 @@ function ShadowNumberControl({
   const clamp = (value: number) =>
     min === undefined ? value : Math.max(min, value);
   return (
-    <div className="grid h-6 min-w-0 grid-cols-[32px_minmax(0,1fr)] overflow-hidden rounded-md bg-[var(--design-editor-control-bg)]">
+    <div className="design-inspector-popover-number grid h-6 min-w-0 overflow-hidden rounded-md bg-[var(--design-editor-control-bg)]">
       <span className="flex items-center justify-center !text-[11px] text-muted-foreground">
         {label}
       </span>
@@ -559,22 +559,23 @@ function ShadowEffectRow({
         ) : undefined
       }
     >
-      <div className="grid grid-cols-[72px_minmax(0,1fr)] items-start gap-x-2 gap-y-2">
-        <span className="row-span-2 flex h-6 items-center !text-[11px] text-muted-foreground">
-          {t("editPanel.labels.position")}
-        </span>
-        <ShadowNumberControl
-          label="X"
-          ariaLabel="X"
-          value={layer.x}
-          onChange={(value, meta) => onChange({ x: value }, meta)}
-        />
-        <ShadowNumberControl
-          label="Y"
-          ariaLabel="Y"
-          value={layer.y}
-          onChange={(value, meta) => onChange({ y: value }, meta)}
-        />
+      <div className="design-sidebar-control-stack">
+        <InspectorControlField label={t("editPanel.labels.position")}>
+          <div className="design-sidebar-control-stack">
+            <ShadowNumberControl
+              label="X"
+              ariaLabel="X"
+              value={layer.x}
+              onChange={(value, meta) => onChange({ x: value }, meta)}
+            />
+            <ShadowNumberControl
+              label="Y"
+              ariaLabel="Y"
+              value={layer.y}
+              onChange={(value, meta) => onChange({ y: value }, meta)}
+            />
+          </div>
+        </InspectorControlField>
       </div>
       <InspectorControlField label={t("editPanel.labels.blur")}>
         <ShadowNumberControl

package/corpus/templates/design/app/components/design/edit-panel/field-primitives.tsx

@@ -295,6 +295,7 @@ export function ScrubStyleInput({
   hideIcon = true,
   icon,
   disabled = false,
+  precision = 1,
 }: {
   label: string;
   value: string;
@@ -304,6 +305,10 @@ export function ScrubStyleInput({
   min?: number;
   max?: number;
   step?: number;
+  /** Decimals this field shows and accepts. Position fields pass 0: an X or Y
+   *  is a whole pixel, and a `.1` there is a subpixel layout artefact rather
+   *  than a number anyone chose. */
+  precision?: number;
   labelClassName?: string;
   inputClassName?: string;
   hideIcon?: boolean;
@@ -326,7 +331,7 @@ export function ScrubStyleInput({
       min={min}
       max={max}
       step={step}
-      precision={1}
+      precision={precision}
       disabled={disabled}
       className="gap-0"
       labelClassName={cn(

package/corpus/templates/design/app/components/design/edit-panel/frame-presets-panel.tsx

@@ -31,7 +31,7 @@ function FramePresetCategoryGroup({
     <section className="shrink-0 border-t border-[var(--design-editor-control-border)] first:border-t-0">
       <button
         type="button"
-        className="flex h-9 w-full min-w-0 cursor-pointer items-center gap-1.5 px-3 text-left"
+        className="flex min-h-[var(--design-section-height)] w-full min-w-0 cursor-pointer items-center gap-1.5 px-2 text-left"
         onClick={() => setOpen((current) => !current)}
         aria-expanded={open}
       >
@@ -45,12 +45,12 @@ function FramePresetCategoryGroup({
         </h3>
       </button>
       {open ? (
-        <div className="pb-1.5">
+        <div className="design-sidebar-control-stack pb-2">
           {presets.map((preset) => (
             <button
               key={preset.name}
               type="button"
-              className="flex h-8 w-full min-w-0 cursor-pointer items-center gap-2 px-3 pl-8 text-left hover:bg-[var(--design-editor-control-hover-bg)]"
+              className="flex min-h-[var(--design-row-height)] w-full min-w-0 cursor-pointer items-center gap-2 px-2 ps-8 text-left hover:bg-[var(--design-editor-control-hover-bg)]"
               onClick={() => onPick(preset)}
             >
               <span className="min-w-0 flex-1 truncate !text-[11px] text-foreground">

package/corpus/templates/design/app/components/design/edit-panel/layout-grid-properties.tsx

@@ -0,0 +1,88 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  DEFAULT_LAYOUT_GRID,
+  MAX_LAYOUT_GRID_SIZE,
+  MIN_LAYOUT_GRID_SIZE,
+  type LayoutGrid,
+} from "@shared/layout-grid";
+import {
+  IconEye,
+  IconEyeOff,
+  IconGrid4x4,
+  IconPlus,
+  IconX,
+} from "@tabler/icons-react";
+
+import { ScrubStyleInput } from "./field-primitives";
+import { SectionIconButton, SectionIconToggle } from "./inspector-controls";
+import { PanelSection } from "./panel-primitives";
+
+export function LayoutGridProperties({
+  grid,
+  onChange,
+  readOnly = false,
+}: {
+  grid: LayoutGrid | null;
+  onChange: (next: Partial<LayoutGrid> | null) => void;
+  readOnly?: boolean;
+}) {
+  const t = useT();
+
+  return (
+    <PanelSection
+      title={t("editPanel.sections.layoutGrid")}
+      actions={
+        readOnly ? null : grid ? (
+          <>
+            <SectionIconToggle
+              label={
+                grid.visible
+                  ? t("editPanel.labels.hideGrid")
+                  : t("editPanel.labels.showGrid")
+              }
+              active={!grid.visible}
+              onClick={() => onChange({ ...grid, visible: !grid.visible })}
+            >
+              {grid.visible ? (
+                <IconEye className="size-3.5" />
+              ) : (
+                <IconEyeOff className="size-3.5" />
+              )}
+            </SectionIconToggle>
+            <SectionIconButton
+              label={t("editPanel.labels.removeGrid")}
+              onClick={() => onChange(null)}
+            >
+              <IconX className="size-3.5" />
+            </SectionIconButton>
+          </>
+        ) : (
+          <SectionIconButton
+            label={t("editPanel.labels.addGrid")}
+            onClick={() => onChange(DEFAULT_LAYOUT_GRID)}
+          >
+            <IconPlus className="size-3.5" />
+          </SectionIconButton>
+        )
+      }
+    >
+      {grid ? (
+        <div className="design-sidebar-property-group">
+          <ScrubStyleInput
+            label={t("editPanel.labels.size")}
+            ariaLabel={t("editPanel.sections.layoutGrid")}
+            icon={IconGrid4x4}
+            hideIcon={false}
+            value={`${grid.size}px`}
+            onChange={(size) => onChange({ ...grid, size })}
+            min={MIN_LAYOUT_GRID_SIZE}
+            max={MAX_LAYOUT_GRID_SIZE}
+            precision={0}
+            disabled={readOnly}
+            inputClassName="h-6"
+          />
+        </div>
+      ) : null}
+    </PanelSection>
+  );
+}

package/corpus/templates/design/app/components/design/edit-panel/panel-primitives.tsx

@@ -228,6 +228,7 @@ export function ColorInput({
   blendMode,
   onBlendModeChange,
   supportsLayeredFills = false,
+  allowDesignHistoryHotkeys = false,
   documentColors,
   supportedPaintTypes,
   pickerKey,
@@ -272,6 +273,7 @@ export function ColorInput({
   blendMode?: string;
   onBlendModeChange?: (value: string) => void;
   supportsLayeredFills?: boolean;
+  allowDesignHistoryHotkeys?: boolean;
   /** Hex strings already in use on the page — forwarded to the color picker swatch grid. */
   documentColors?: string[];
   /**
@@ -580,6 +582,7 @@ export function ColorInput({
       documentColors={documentColors}
       supportedPaintTypes={supportedPaintTypes}
       glslShaderContext={glslShaderContext}
+      allowDesignHistoryHotkeys={allowDesignHistoryHotkeys}
     />
   );
 }
@@ -710,7 +713,7 @@ export function PanelSection({
     <section className="design-sidebar-section shrink-0">
       <div className="px-2">
         <InspectorGrid
-          className="min-h-8 items-center"
+          className="min-h-[var(--design-section-height)] items-center"
           layout={actions ? "header-actions" : "columns"}
         >
           <InspectorGridCell span={actions ? 20 : 28}>
@@ -745,7 +748,7 @@ export function PanelSection({
           style={{ gridTemplateRows: collapsed ? "0fr" : "1fr" }}
         >
           <div className="overflow-hidden">
-            <div className="design-sidebar-control-text flex flex-col gap-2 px-2 pb-2 pt-0">
+            <div className="design-sidebar-control-text design-sidebar-section-content">
               {children}
             </div>
           </div>

package/corpus/templates/design/app/components/design/edit-panel/position-layout-properties.tsx

@@ -3,6 +3,7 @@ import {
   composeTransform3D,
   isTransform3DActive,
   parseTransform3DParts,
+  quantizeToStep,
   type Transform3DParts,
 } from "@shared/canvas-math";
 import {
@@ -65,7 +66,6 @@ import {
   PanelSection,
   SubsectionLabel,
 } from "./panel-primitives";
-import { roundToOneDecimal } from "./position-helpers";
 import { isMixedValue, MIXED_VALUE } from "./selection-helpers";
 import type {
   BreakpointOverrideFieldContext,
@@ -113,8 +113,10 @@ function geometryPercent(value: number, total: number): string {
   return `${Number(((value / total) * 100).toFixed(6))}%`;
 }
 
+/** Whole px: every value through here is a coordinate or box edge derived from
+ *  a bounding rect, and its subpixel is never something anyone chose. */
 function geometryPx(value: number): string {
-  return `${Number(value.toFixed(3))}px`;
+  return `${quantizeToStep(value)}px`;
 }
 
 /** Once the bridge supplies an inline-style snapshot, absence is meaningful:
@@ -500,6 +502,7 @@ export function PositionLayoutProperties({
               label="X"
               ariaLabel="X-position"
               tooltipLabel="X-position"
+              precision={0}
               value={
                 isMixedValue(authoredLeft)
                   ? MIXED_VALUE
@@ -518,7 +521,7 @@ export function PositionLayoutProperties({
                     ...(!constrainedPosition
                       ? { position: "absolute" }
                       : undefined),
-                    left: `${roundToOneDecimal(v)}px`,
+                    left: geometryPx(v),
                   },
                   onStyleChange,
                   onStylesChange,
@@ -548,6 +551,7 @@ export function PositionLayoutProperties({
               label="Y"
               ariaLabel="Y-position"
               tooltipLabel="Y-position"
+              precision={0}
               value={
                 isMixedValue(authoredTop)
                   ? MIXED_VALUE
@@ -561,7 +565,7 @@ export function PositionLayoutProperties({
                     ...(!constrainedPosition
                       ? { position: "absolute" }
                       : undefined),
-                    top: `${roundToOneDecimal(v)}px`,
+                    top: geometryPx(v),
                   },
                   onStyleChange,
                   onStylesChange,

package/corpus/templates/design/app/components/design/edit-panel/typography-helpers.ts

@@ -1,15 +1,13 @@
+import { resolveFontFamilySelectValue } from "@agent-native/toolkit/design-tweaks";
+
 import { isMixedValue, MIXED_VALUE } from "./selection-helpers";
 
-export const FONT_FAMILY_OPTIONS = [
-  { value: "inherit", key: "inherit" },
-  { value: "sans-serif", key: "sansSerif" },
-  { value: "serif", key: "serif" },
-  { value: "monospace", key: "monospace" },
-  { value: "'Inter', sans-serif", key: "inter" },
-  { value: "'Poppins', sans-serif", key: "poppins" },
-  { value: "'Playfair Display', serif", key: "playfairDisplay" },
-  { value: "'JetBrains Mono', monospace", key: "jetBrainsMono" },
-] as const;
+export {
+  displayFontFamilyName,
+  FONT_FAMILY_OPTIONS,
+  resolveFontFamilySelectValue,
+  splitFontFamilyList,
+} from "@agent-native/toolkit/design-tweaks";
 
 export const FONT_WEIGHT_OPTIONS = [
   { value: "100", key: "thin" },
@@ -55,99 +53,6 @@ export function resolveFixedResizeDimension(
   return `${Math.max(1, size)}px`;
 }
 
-function cleanFontFamilyName(value: string): string {
-  const trimmed = value.trim();
-  if (
-    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
-    (trimmed.startsWith("'") && trimmed.endsWith("'"))
-  ) {
-    return trimmed.slice(1, -1).trim();
-  }
-  return trimmed;
-}
-
-export function splitFontFamilyList(value: string | undefined): string[] {
-  const raw = value?.trim();
-  if (!raw) return [];
-
-  const families: string[] = [];
-  let token = "";
-  let quote: '"' | "'" | null = null;
-
-  for (let i = 0; i < raw.length; i += 1) {
-    const char = raw[i];
-    if ((char === '"' || char === "'") && raw[i - 1] !== "\\") {
-      if (quote === char) quote = null;
-      else if (!quote) quote = char;
-      token += char;
-      continue;
-    }
-    if (char === "," && !quote) {
-      const cleaned = cleanFontFamilyName(token);
-      if (cleaned) families.push(cleaned);
-      token = "";
-      continue;
-    }
-    token += char;
-  }
-
-  const cleaned = cleanFontFamilyName(token);
-  if (cleaned) families.push(cleaned);
-  return families;
-}
-
-function normalizeFontFamilyName(value: string): string {
-  return cleanFontFamilyName(value).replace(/\s+/g, " ").toLowerCase();
-}
-
-function normalizeFontFamilyStack(value: string): string {
-  return splitFontFamilyList(value).map(normalizeFontFamilyName).join(",");
-}
-
-export function displayFontFamilyName(value: string | undefined): string {
-  const first = splitFontFamilyList(value)[0];
-  if (!first) return "Sans Serif"; // i18n-ignore design generic font label
-
-  const normalized = normalizeFontFamilyName(first);
-  if (normalized === "sans-serif") {
-    return "Sans Serif"; // i18n-ignore design generic font label
-  }
-  if (normalized === "serif") return "Serif"; // i18n-ignore design generic font label
-  if (normalized === "monospace") {
-    return "Monospace"; // i18n-ignore design generic font label
-  }
-  if (normalized === "system-ui" || normalized === "-apple-system") {
-    return "System UI"; // i18n-ignore design generic font label
-  }
-  if (normalized === "blinkmacsystemfont") {
-    return "Apple System"; // i18n-ignore design generic font label
-  }
-  return first;
-}
-
-export function resolveFontFamilySelectValue(
-  value: string | undefined,
-): string {
-  const raw = value?.trim();
-  if (!raw) return "sans-serif";
-
-  const normalizedStack = normalizeFontFamilyStack(raw);
-  const exactOption = FONT_FAMILY_OPTIONS.find(
-    (option) => normalizeFontFamilyStack(option.value) === normalizedStack,
-  );
-  if (exactOption) return exactOption.value;
-
-  const firstFamily = normalizeFontFamilyName(
-    splitFontFamilyList(raw)[0] ?? "",
-  );
-  const firstFamilyOption = FONT_FAMILY_OPTIONS.find(
-    (option) =>
-      normalizeFontFamilyName(splitFontFamilyList(option.value)[0] ?? "") ===
-      firstFamily,
-  );
-  return firstFamilyOption?.value ?? raw;
-}
-
 /**
  * Mixed-selection-safe wrapper around resolveFontFamilySelectValue.
  *