@agent-native/core 0.187.0 → 0.187.1-nightly-20260925003003

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -2369,15 +2369,19 @@ export function DesignCanvas({
   // srcdoc is rebuilt per document, so unlike the keyed live-edit bundle above
   // it can carry the real first-paint value: forwarding that arrives only by
   // postMessage stays dead until the handshake, and is stranded by a swap.
+  const initialInteractModeRef = useRef(interactMode);
   const embeddedGestureBridgeForSrcdoc = useMemo(
     () =>
       EMBEDDED_WHEEL_BRIDGE_SCRIPT.replace(
         "__EMBEDDED_WHEEL_FORWARDING_ENABLED__",
-        isEmbeddedFrame && !interactMode ? "true" : "false",
+        isEmbeddedFrame && !initialInteractModeRef.current ? "true" : "false",
       )
         .replace("__EMBEDDED_SPACE_KEY_FORWARDING_ENABLED__", "false")
-        .replace("__EDITING_SAFETY_ENABLED__", interactMode ? "false" : "true"),
-    [interactMode, isEmbeddedFrame],
+        .replace(
+          "__EDITING_SAFETY_ENABLED__",
+          initialInteractModeRef.current ? "false" : "true",
+        ),
+    [isEmbeddedFrame],
   );
   const includeLiveEditEditorChrome = !readOnly;
   const liveEditBridgeScript = useMemo(() => {
@@ -3571,15 +3575,13 @@ export function DesignCanvas({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [centerInteractPreview, deviceFrame, contentKey, previewWidthPx]);
 
-  // Build the srcdoc. The tweak bridge ALWAYS goes in so the panel works
-  // outside Edit mode. The editor chrome bridge is omitted for Interact mode
-  // so preview/app users can interact with the app normally.
+  // Build the srcdoc. Both mode bridges stay installed; live postMessages
+  // switch pointer ownership without replacing the iframe document.
   //
-  // readOnly and editMode are intentionally NOT deps here: the bridge is
-  // injected whenever !interactMode and the initial __READ_ONLY__ /
-  // __TEXT_EDITING_ENABLED__ placeholders are baked from the *first* render
-  // only (so first paint never flashes the wrong mode). After that, live
-  // readOnly / editMode changes flow through the set-read-only and
+  // readOnly and editMode are intentionally NOT deps here: the initial
+  // __READ_ONLY__ / __TEXT_EDITING_ENABLED__ placeholders are baked from the
+  // first render only (so first paint never flashes the wrong mode). After
+  // that, live readOnly / editMode changes flow through set-read-only and
   // set-text-editing-enabled postMessages (see the useEffects below) so
   // switching the active surface (board ↔ screen) or toggling Edit ⇄ Preview
   // never rebuilds srcdoc / reloads every screen iframe.
@@ -3589,50 +3591,49 @@ export function DesignCanvas({
     // mounting an iframe, then mounts the real `src` exactly once.
     if (rawExternalPreviewUrl) return undefined;
     const localizedContent = withLocalRuntimes(iframeRenderContent);
-    const editorChromeBridge = interactMode
-      ? ""
-      : createEditorBridgeThemeScript(readEditorBridgeThemeVars()) +
-        EDITOR_CHROME_BRIDGE_SCRIPT.replace(
-          "__READ_ONLY__",
-          readOnly ? "true" : "false",
+    const editorChromeBridge =
+      createEditorBridgeThemeScript(readEditorBridgeThemeVars()) +
+      EDITOR_CHROME_BRIDGE_SCRIPT.replace(
+        "__READ_ONLY__",
+        readOnly ? "true" : "false",
+      )
+        .replace("__TEXT_EDITING_ENABLED__", editMode ? "true" : "false")
+        .replace(
+          "__EDITOR_CHROME_SCALE_X__",
+          String(effectiveEditorChromeScaleX),
         )
-          .replace("__TEXT_EDITING_ENABLED__", editMode ? "true" : "false")
-          .replace(
-            "__EDITOR_CHROME_SCALE_X__",
-            String(effectiveEditorChromeScaleX),
-          )
-          .replace(
-            "__EDITOR_CHROME_SCALE_Y__",
-            String(effectiveEditorChromeScaleY),
-          )
-          .replace(
-            "__DESIGN_CANVAS_SCREEN_ID__",
-            JSON.stringify(screenId ?? contentKey ?? ""),
-          )
-          .replace(
-            "__DESIGN_CANVAS_BOARD_SURFACE__",
-            boardSurface ? "true" : "false",
-          )
-          .replace(
-            "__DESIGN_CANVAS_CONTENT_OFFSET_X__",
-            String(Math.round(embeddedFrame?.contentOffsetX ?? 0)),
-          )
-          .replace(
-            "__DESIGN_CANVAS_CONTENT_OFFSET_Y__",
-            String(Math.round(embeddedFrame?.contentOffsetY ?? 0)),
-          )
-          .replace("__RUNTIME_LAYER_SNAPSHOT_ENABLED__", "false")
-          .replace(
-            "__LIVE_REFLOW_ENABLED__",
-            LIVE_REFLOW_ENABLED ? "true" : "false",
-          )
-          .replace(
-            "__SELECTED_LAYER_DRAG_PRIORITY__",
-            SELECTED_LAYER_DRAG_PRIORITY_ENABLED ? "true" : "false",
-          )
-          .replace(/__INITIAL_SOURCE_HEAD__/g, () =>
-            inlineScriptJson(sourceHeadInnerHtml(localizedContent)),
-          );
+        .replace(
+          "__EDITOR_CHROME_SCALE_Y__",
+          String(effectiveEditorChromeScaleY),
+        )
+        .replace(
+          "__DESIGN_CANVAS_SCREEN_ID__",
+          JSON.stringify(screenId ?? contentKey ?? ""),
+        )
+        .replace(
+          "__DESIGN_CANVAS_BOARD_SURFACE__",
+          boardSurface ? "true" : "false",
+        )
+        .replace(
+          "__DESIGN_CANVAS_CONTENT_OFFSET_X__",
+          String(Math.round(embeddedFrame?.contentOffsetX ?? 0)),
+        )
+        .replace(
+          "__DESIGN_CANVAS_CONTENT_OFFSET_Y__",
+          String(Math.round(embeddedFrame?.contentOffsetY ?? 0)),
+        )
+        .replace("__RUNTIME_LAYER_SNAPSHOT_ENABLED__", "false")
+        .replace(
+          "__LIVE_REFLOW_ENABLED__",
+          LIVE_REFLOW_ENABLED ? "true" : "false",
+        )
+        .replace(
+          "__SELECTED_LAYER_DRAG_PRIORITY__",
+          SELECTED_LAYER_DRAG_PRIORITY_ENABLED ? "true" : "false",
+        )
+        .replace(/__INITIAL_SOURCE_HEAD__/g, () =>
+          inlineScriptJson(sourceHeadInnerHtml(localizedContent)),
+        );
     // ALWAYS injected (like the other always-on bridges above) so
     // MultiScreenCanvas's cross-screen drag hit-testing
     // (agent-native:hit-test / agent-native:hit-test-result) resolves an
@@ -3696,7 +3697,6 @@ export function DesignCanvas({
     boardSurface,
     fitRootBodyToFrame,
     rawExternalPreviewUrl,
-    interactMode,
     isEmbeddedFrame,
     embeddedFrameBackground,
     embeddedGestureBridgeForSrcdoc,
@@ -4102,6 +4102,7 @@ export function DesignCanvas({
         return;
       }
       if (e.data.type === "clear-selection") {
+        iframeClearedSelectorRef.current = selectedSelectorRef.current ?? null;
         onClearSelection?.();
         return;
       }
@@ -5188,6 +5189,9 @@ export function DesignCanvas({
   // Selectors from the iframe's own click; skip mirroring them back once to
   // avoid the fast-click bounce.
   const suppressMirrorSelectorsRef = useRef<string[] | null>(null);
+  // The iframe cleared this selection itself. A ready handshake can land
+  // before the parent renders the clear, and replaying then re-selects it.
+  const iframeClearedSelectorRef = useRef<string | null>(null);
   // Latest replayIframeEditorState, synced during render (below) so the message
   // handler can force a corrective resync without a stale closure.
   const replayIframeEditorStateRef = useRef<(() => void) | null>(null);
@@ -5256,7 +5260,13 @@ export function DesignCanvas({
       !forceSelectionMirrorResyncRef.current &&
       !!selectedSelector &&
       (suppressMirrorSelectorsRef.current?.includes(selectedSelector) ?? false);
-    if (isIframeOriginatedEcho) {
+    const staleIframeClear =
+      !!selectedSelector &&
+      iframeClearedSelectorRef.current === selectedSelector;
+    if (!staleIframeClear) iframeClearedSelectorRef.current = null;
+    if (staleIframeClear) {
+      // Wait for the parent's clear to render; it mirrors down on its own.
+    } else if (isIframeOriginatedEcho) {
       lastSelectionMirrorSignatureRef.current = selectionMirrorSignature;
       suppressMirrorSelectorsRef.current = null;
     } else if (

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -162,6 +162,10 @@ import {
   textStrokeIsVisible,
 } from "./edit-panel/position-helpers";
 import { PositionLayoutProperties } from "./edit-panel/position-layout-properties";
+import {
+  ScaleProperties,
+  type ScaleToolControls,
+} from "./edit-panel/scale-properties";
 import { mixedElementFromSelection } from "./edit-panel/selection-helpers";
 import { StrokeProperties } from "./edit-panel/stroke-properties";
 import {
@@ -538,6 +542,8 @@ interface EditPanelProps {
    * type without EditPanel importing it.
    */
   activeTool?: string;
+  /** Shows Figma's Scale section while `activeTool === "scale"`. */
+  scaleToolControls?: ScaleToolControls;
   /**
    * Creates a new screen sized to the clicked preset. Only takes effect while
    * `activeTool === "frame"`; when omitted the frame tool falls back to the
@@ -1913,6 +1919,7 @@ function PageProperties({
           <ColorInput
             label={t("editPanel.labels.background")}
             value={canvasBackground ?? canvasBackgroundFallback ?? ""}
+            supportedPaintTypes={["solid", "none"]}
             // meta carries phase: "preview" while dragging vs "commit" on
             // release. Dropping it persists every tick and the picker jumps.
             onChange={(value, meta) => onCanvasBackgroundChange(value, meta)}
@@ -2568,6 +2575,7 @@ export const EditPanel = memo(function EditPanel({
   inspectCode,
   aiActions,
   activeTool,
+  scaleToolControls,
   onCreateScreenFromPreset,
   onAlignSelection,
   alignSelectionDisabled = false,
@@ -3371,6 +3379,17 @@ export const EditPanel = memo(function EditPanel({
                     motionKeyframeContext={motionKeyframeFieldContext}
                     breakpointOverrideContext={breakpointOverrideFieldContext}
                   />
+                  {activeTool === "scale" &&
+                  scaleToolControls &&
+                  effectiveSelectedElements.length === 1 ? (
+                    <ScaleProperties
+                      key={`scale:${inspectorElementSectionKey}`}
+                      element={
+                        stateResolvedInspectorElement ?? inspectorElement
+                      }
+                      controls={scaleToolControls}
+                    />
+                  ) : null}
                   <LayoutContextProperties
                     key={`layout-context:${inspectorElementSectionKey}`}
                     element={stateResolvedInspectorElement ?? inspectorElement}

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -616,6 +616,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   onReviewPendingScreen,
   interactMode = false,
   interactScreenId = null,
+  focusedInteractViewport = null,
   readOnly = false,
   editableScreenIds,
   activeScreenHasHoveredChild = false,
@@ -8936,6 +8937,11 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           if (pressTarget) {
             dispatchAt(pressTarget, "mousedown", point, ev, 1);
             dispatchAt(pressTarget, "mouseup", point, ev, 0);
+            // This surface covers the selected object, so the native dblclick
+            // that starts text editing never reaches the board bridge.
+            if (ev.detail >= 2) {
+              dispatchAt(pressTarget, "dblclick", point, ev, 0);
+            }
           }
           finishDrag();
           return;
@@ -10840,7 +10846,16 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         !autoHeight || autoHeight === rawGeometry.height
           ? rawGeometry
           : { ...rawGeometry, height: autoHeight };
-      const geometry = clampScreenFrameSize(sizedGeometry, sizeConstraints);
+      const baseGeometry = clampScreenFrameSize(sizedGeometry, sizeConstraints);
+      const geometry =
+        screen.id === interactScreenId && focusedInteractViewport
+          ? {
+              ...baseGeometry,
+              width: Math.max(1, Math.round(focusedInteractViewport.width)),
+              height: Math.max(1, Math.round(focusedInteractViewport.height)),
+              rotation: undefined,
+            }
+          : baseGeometry;
       const prior = cache.get(screen.id);
       if (
         prior &&
@@ -10866,15 +10881,23 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     return next;
   }, [
     frameGeometry,
+    focusedInteractViewport?.height,
+    focusedInteractViewport?.width,
     geometryById,
     geometryOverridesById,
     getResolvedMetadata,
+    interactScreenId,
     measuredIframeHeights,
     measuredIframeNaturalHeights,
     renderedScreens,
     screenIndexById,
     screenRootComputedStylesById,
   ]);
+  const focusedInteractFrame =
+    focusedInteractViewport && interactScreenId
+      ? canvasFrames.find(({ screen }) => screen.id === interactScreenId)
+      : undefined;
+  const focusedInteract = Boolean(focusedInteractFrame);
   useLayoutEffect(() => {
     renderedFrameGeometryRef.current = Object.fromEntries(
       canvasFrames.map(({ screen, geometry }) => [screen.id, geometry]),
@@ -11448,6 +11471,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       : null;
   const boardSelectionBoxVisible =
     !boardTextEditing &&
+    !vectorEdit &&
     (boardFileId
       ? (selectedLayerSelectorGroupsByScreen[boardFileId]?.length ?? 0)
       : 0) <= 1 &&
@@ -11491,9 +11515,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         isolation: "isolate",
         overscrollBehavior: "none",
         touchAction: "none",
+        visibility: focusedInteract ? "hidden" : undefined,
       }}
     >
-      {showPixelGrid ? (
+      {showPixelGrid && !focusedInteract ? (
         <div
           ref={pixelGridRef}
           className="pointer-events-none absolute inset-0 opacity-60"
@@ -11506,7 +11531,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         />
       ) : null}
 
-      {showBoardStaticPreview &&
+      {!focusedInteract &&
+      showBoardStaticPreview &&
       boardFrameGeometry &&
       boardStaticPreviewViewport &&
       boardStaticPreviewContent ? (
@@ -11570,8 +11596,13 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           {
             left: 0,
             top: 0,
-            transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale})`,
+            right: focusedInteract ? 0 : undefined,
+            bottom: focusedInteract ? 0 : undefined,
+            transform: focusedInteractFrame
+              ? `translate(${surfaceSize.width / 2 - (SURFACE_PADDING + focusedInteractFrame.geometry.x + focusedInteractFrame.geometry.width / 2) * scale}px, ${surfaceSize.height / 2 - (SURFACE_PADDING + focusedInteractFrame.geometry.y + focusedInteractFrame.geometry.height / 2) * scale}px) scale(${scale})`
+              : `translate(${pan.x}px, ${pan.y}px) scale(${scale})`,
             transformOrigin: "top left",
+            visibility: focusedInteract ? "hidden" : undefined,
             // Controlled zoom also renders the world transform, so it must
             // replace any counter-scale left by an imperative camera tick.
             [CHROME_SCALE_CSS_VAR]: chromeScale,
@@ -11842,6 +11873,9 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
               }
               geometry={geometry}
               measuredIframeHeights={measuredIframeHeights}
+              focusedInteract={
+                screen.id === interactScreenId && focusedInteract
+              }
               locked={lockedScreenIdSet.has(screen.id)}
               screenContent={screenContentById.get(screen.id)}
               bootDeferred={bootDeferredScreenIds.has(screen.id)}
@@ -12002,7 +12036,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             geometry={singleSelectedFrame.geometry}
             chromeScale={chromeScale}
             chromeSettling={chromeSettling}
-            handlesEnabled={!readOnly}
+            handlesEnabled={!readOnly && !focusedInteract}
             showRotate
             onStartResize={(handle, event) =>
               beginResize(singleSelectedFrame.id, handle, event)
@@ -13389,6 +13423,7 @@ interface ScreenProps {
   locked: boolean;
   isActive: boolean;
   interactMode: boolean;
+  focusedInteract: boolean;
   isSelected: boolean;
   /** True while the current selection is an element INSIDE this screen (not
    *  the screen/frame itself) — see selectedElementScreenId. The screen's own
@@ -13490,6 +13525,7 @@ const Screen = memo(function Screen({
   locked,
   isActive,
   interactMode,
+  focusedInteract,
   isSelected,
   elementSelectedInScreen,
   isTopScreen,
@@ -13538,7 +13574,10 @@ const Screen = memo(function Screen({
   const display = screenDisplayName(screen, metadata);
   const previewUrl = metadata.previewUrl ?? getPreviewUrl(screen.content);
   const externalPreviewPendingOrigin = Boolean(previewUrl && !browserOrigin);
-  const previewViewport = getScreenPreviewViewport(metadata, geometry);
+  const previewViewport = getScreenPreviewViewport(
+    focusedInteract ? geometry : metadata,
+    geometry,
+  );
   const suppressNextClick = useRef(false);
   // Overview viewport culling (PF22): mounting only. Unmounting a culled screen
   // would lose its iframe's scroll/form/Alpine state, so it stays mounted and
@@ -13669,7 +13708,9 @@ const Screen = memo(function Screen({
   useEffect(() => {
     onHoverIntent?.(screen.id, hoverWantsLiveEditor);
   }, [hoverWantsLiveEditor, onHoverIntent, screen.id]);
-  const frameLabelHeight = FRAME_LABEL_HEIGHT * chromeScale;
+  const frameLabelHeight = focusedInteract
+    ? 0
+    : FRAME_LABEL_HEIGHT * chromeScale;
   const frameScreenWidth = geometry.width / Math.max(chromeScale, 0.001);
   // Keep frame actions inside their own frame so closely spaced screens cannot
   // cover one another. Narrow frames collapse the action to its familiar icon;
@@ -13710,6 +13751,7 @@ const Screen = memo(function Screen({
         transform: geometry.rotation
           ? `rotate(${geometry.rotation}deg)`
           : undefined,
+        visibility: focusedInteract ? "visible" : undefined,
         transformOrigin: `${geometry.width / 2}px ${frameLabelHeight + geometry.height / 2}px`,
         zIndex: isTopScreen
           ? (geometry.z ?? 0) + TOP_SCREEN_Z_BOOST
@@ -13718,7 +13760,10 @@ const Screen = memo(function Screen({
     >
       <div
         className="relative w-full cursor-default"
-        style={{ height: frameLabelHeight }}
+        style={{
+          height: frameLabelHeight,
+          display: focusedInteract ? "none" : undefined,
+        }}
         onClick={(e) => {
           e.stopPropagation();
           if (suppressNextClick.current) {
@@ -13839,6 +13884,7 @@ const Screen = memo(function Screen({
             fullViewVisible && "opacity-100",
           )}
           style={{
+            display: focusedInteract ? "none" : undefined,
             maxWidth: fullViewMaxWidth,
             transform: `translate(-50%, -50%) scale(var(${CHROME_SCALE_CSS_VAR}, ${chromeScale}))`,
             transformOrigin: "center center",
@@ -14097,6 +14143,7 @@ const Screen = memo(function Screen({
         <ResizeHandles
           active={false}
           enabled={
+            !focusedInteract &&
             !selectionOutlined &&
             !elementSelectedInScreen &&
             !penActive &&
@@ -14120,7 +14167,9 @@ const Screen = memo(function Screen({
           the screen has breakpointWidths set. Each frame shares the same
           srcdoc content at a different viewport width. The active breakpoint
           is highlighted and clicking a frame header sets the edit scope. */}
-      {screen.breakpointWidths && screen.breakpointWidths.length > 0 ? (
+      {!focusedInteract &&
+      screen.breakpointWidths &&
+      screen.breakpointWidths.length > 0 ? (
         <BreakpointPreviewRow
           screen={screen}
           primaryGeometry={geometry}
@@ -14227,6 +14276,7 @@ function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
     sameResolvedMetadata(prev.metadata, next.metadata) &&
     sameFrameGeometry(prev.geometry, next.geometry) &&
     prev.isActive === next.isActive &&
+    prev.focusedInteract === next.focusedInteract &&
     prev.isSelected === next.isSelected &&
     prev.elementSelectedInScreen === next.elementSelectedInScreen &&
     prev.isTopScreen === next.isTopScreen &&

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

@@ -26,6 +26,10 @@ export const AUTHORED_INLINE_STYLE_PROPERTIES = [
   "paddingRight",
   "paddingBottom",
   "paddingLeft",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
   "alignItems",
   "alignContent",
   "justifyItems",

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

@@ -23,11 +23,16 @@ import { cn } from "@/lib/utils";
 
 import {
   AutoLayoutMatrix,
+  MarginProperties,
   SizingField,
   type AutoLayoutFlow,
   type AutoLayoutGridTrackSizing,
   type AutoLayoutGridValue,
+  type AutoLayoutMargin,
+  type AutoLayoutMarginTextValues,
+  type AutoLayoutMatrixLabels,
   type AutoLayoutMatrixValue,
+  type AutoLayoutSidesMixed,
   type ScrubInputChangeMeta,
 } from "../inspector";
 import { IconLayoutSettings } from "../inspector/design-icons";
@@ -367,6 +372,71 @@ export function gridValueForElement(element: ElementInfo): AutoLayoutGridValue {
   };
 }
 
+function marginValuesForStyles(
+  styles: Record<string, string>,
+  inlineStyles?: Record<string, string>,
+) {
+  const marginValue = (property: string) => {
+    const authored = inlineStyles?.[property];
+    return (
+      (isMixedValue(authored) || authored?.trim().toLowerCase() === "auto"
+        ? authored
+        : styles[property]) || "0"
+    );
+  };
+  const raw = {
+    top: marginValue("marginTop"),
+    right: marginValue("marginRight"),
+    bottom: marginValue("marginBottom"),
+    left: marginValue("marginLeft"),
+  };
+  const value: AutoLayoutMargin = {
+    top: parseNumericValue(raw.top),
+    right: parseNumericValue(raw.right),
+    bottom: parseNumericValue(raw.bottom),
+    left: parseNumericValue(raw.left),
+  };
+  const mixed: AutoLayoutSidesMixed = {
+    top: isMixedValue(raw.top),
+    right: isMixedValue(raw.right),
+    bottom: isMixedValue(raw.bottom),
+    left: isMixedValue(raw.left),
+  };
+  const textValues: AutoLayoutMarginTextValues = {
+    top: !mixed.top && raw.top.trim() === "auto" ? "auto" : undefined,
+    right: !mixed.right && raw.right.trim() === "auto" ? "auto" : undefined,
+    bottom: !mixed.bottom && raw.bottom.trim() === "auto" ? "auto" : undefined,
+    left: !mixed.left && raw.left.trim() === "auto" ? "auto" : undefined,
+  };
+  return { value, mixed, textValues };
+}
+
+function marginStylesForSides(
+  margin: AutoLayoutMargin,
+  sides: Array<keyof AutoLayoutMargin>,
+): Record<string, string> {
+  const styles: Record<string, string> = {};
+  for (const side of sides) {
+    const property = `margin${side[0].toUpperCase()}${side.slice(1)}`;
+    styles[property] = `${margin[side]}px`;
+  }
+  return styles;
+}
+
+function marginInspectorLabels(
+  t: ReturnType<typeof useT>,
+): Partial<AutoLayoutMatrixLabels> {
+  return {
+    margin: t("editPanel.labels.margin"),
+    linkMargin: t("editPanel.labels.linkMarginSides"),
+    unlinkMargin: t("editPanel.labels.unlinkMarginSides"),
+    marginTop: t("editPanel.labels.marginTop"),
+    marginRight: t("editPanel.labels.marginRight"),
+    marginBottom: t("editPanel.labels.marginBottom"),
+    marginLeft: t("editPanel.labels.marginLeft"),
+  };
+}
+
 /**
  * Style patch for a Grid-control change: template writes plus gap, with
  * `gridAutoFlow: "row"` included only when converting a non-grid element
@@ -405,7 +475,10 @@ function FlexContainerControls({
   onApplyLayoutFlow?: ApplyLayoutFlowHandler;
   showSizingControls: boolean;
 }) {
+  const t = useT();
   const styles = element.computedStyles;
+  const marginLabels = marginInspectorLabels(t);
+  const marginProperties = marginValuesForStyles(styles, element.inlineStyles);
   // The element's CURRENT layout flow as authored in code, read from its own
   // computed `display`: block/flow-root/grid/etc. = "normal flow",
   // flex/inline-flex = auto layout. We forward it so the AutoLayoutMatrix Flow
@@ -542,6 +615,9 @@ function FlexContainerControls({
       left: isMixedValue(styles.paddingLeft),
     },
     paddingLinked,
+    margin: marginProperties.value,
+    marginMixed: marginProperties.mixed,
+    marginTextValues: marginProperties.textValues,
     childSizing: {
       horizontal: inferElementSizing(element, "horizontal"),
       vertical: inferElementSizing(element, "vertical"),
@@ -570,6 +646,7 @@ function FlexContainerControls({
     <div className="space-y-2">
       <AutoLayoutMatrix
         value={autoLayoutValue}
+        labels={marginLabels}
         onFlowChange={(flow) => {
           const nodeId = element.sourceId ?? element.pendingNodeId;
           // A raw display:block leaves the children in flow, so they re-stack
@@ -694,6 +771,21 @@ function FlexContainerControls({
           // each linked axis's representative value and applies both sides on
           // the next real field edit, so no style write belongs here.
         }}
+        onMarginChange={(nextMargin, meta, changedSides) => {
+          const patch = marginStylesForSides(nextMargin, changedSides);
+          const changeMeta =
+            meta &&
+            (meta.relativeDelta !== undefined || meta.relativeExpression)
+              ? { ...meta, relativeDeltaProperties: Object.keys(patch) }
+              : meta;
+          if (onStylesChange) {
+            onStylesChange(patch, changeMeta);
+            return;
+          }
+          Object.entries(patch).forEach(([property, value]) =>
+            onStyleChange(property, value, changeMeta),
+          );
+        }}
         onClipContentChange={(clipContent) =>
           onStyleChange("overflow", clipContent ? "hidden" : "visible")
         }
@@ -934,6 +1026,11 @@ export function LayoutContextProperties({
   const availableSizing = availableSizingForElement(element);
   const isContainer = isContainerElement(element);
   const aspectLock = useAspectRatioLock(element);
+  const marginLabels = marginInspectorLabels(t);
+  const marginProperties = marginValuesForStyles(
+    element.computedStyles,
+    element.inlineStyles,
+  );
 
   const childActions =
     flexChild || gridChild ? (
@@ -1170,6 +1267,28 @@ export function LayoutContextProperties({
             </Tooltip>
           </InspectorGridCell>
         </InspectorGrid>
+        <MarginProperties
+          key={elementStableKey(element)}
+          value={marginProperties.value}
+          mixed={marginProperties.mixed}
+          textValues={marginProperties.textValues}
+          labels={marginLabels}
+          onChange={(margin, meta, changedSides) => {
+            const patch = marginStylesForSides(margin, changedSides);
+            const changeMeta =
+              meta &&
+              (meta.relativeDelta !== undefined || meta.relativeExpression)
+                ? { ...meta, relativeDeltaProperties: Object.keys(patch) }
+                : meta;
+            if (onStylesChange) {
+              onStylesChange(patch, changeMeta);
+              return;
+            }
+            Object.entries(patch).forEach(([property, value]) =>
+              onStyleChange(property, value, changeMeta),
+            );
+          }}
+        />
       </PanelSection>
     );
   }