orcasvn-react-diagrams 0.2.4 → 0.2.6

package/src/displaybox/demos/AutoLayoutDemoTab.tsx

@@ -1,131 +1,175 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import type { ElementLayout, ElementLayoutLabelReservedSpaceMode, ElementLayoutMode } from '../../api';
-import { createId } from '../../utils/ids';
-import DisplayBoxControls from '../DisplayBoxControls';
-import DisplayBoxStage from '../DisplayBoxStage';
-import useDemoControls from '../useDemoControls';
-import useDemoEditor from '../useDemoEditor';
-import useOffsetSequence from '../useOffsetSequence';
-import type { DemoActionHelpers } from '../types';
-import { autoLayoutDemoConfig } from './autoLayoutDemo';
-import { gridStageStyle } from './shared';
-
+import React, { useEffect, useMemo, useState } from 'react';
+import type {
+  ElementLayout,
+  ElementLayoutAutoResizeMode,
+  ElementLayoutGridRowTemplate,
+  ElementLayoutLabelReservedSpaceMode,
+  ElementLayoutMode,
+} from '../../api';
+import { createId } from '../../utils/ids';
+import DisplayBoxControls from '../DisplayBoxControls';
+import DisplayBoxStage from '../DisplayBoxStage';
+import useDemoControls from '../useDemoControls';
+import useDemoEditor from '../useDemoEditor';
+import useOffsetSequence from '../useOffsetSequence';
+import type { DemoActionHelpers } from '../types';
+import { autoLayoutDemoConfig } from './autoLayoutDemo';
+import { gridStageStyle } from './shared';
+
 const parentOptions = [
   { id: 'layout-row', label: 'Horizontal layout' },
   { id: 'layout-column', label: 'Vertical layout' },
+  { id: 'layout-grid', label: 'Grid layout' },
   { id: 'layout-nested', label: 'Nested layout' },
   { id: 'layout-manual', label: 'Manual (compare)' },
 ];
 const shortLabel = 'Parent label lane demo';
 const longLabel =
   'Parent label lane demo with longer content to increase flexible reserved space and push children downward.';
-
-const AutoLayoutDemo = () => {
-  const demo = autoLayoutDemoConfig;
-  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
-    createState: demo.createState,
-    elementShapes: demo.elementShapes,
-    portShapes: demo.portShapes,
-  });
-
-  const nextOffset = useOffsetSequence();
-  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
-
-  const controls = useDemoControls({
-    demo,
-    editorRef,
-    diagramState,
-    selection,
-    snapEnabled,
-    setSnapEnabled,
-    actionHelpers,
-  });
-
-  const [targetId, setTargetId] = useState<string>(parentOptions[0].id);
-  const [mode, setMode] = useState<ElementLayoutMode>('horizontal');
+const defaultGridTemplateText = '[12,4,8]';
+
+const serializeGridTemplate = (template?: ElementLayoutGridRowTemplate[]): string =>
+  Array.isArray(template) && template.length > 0 ? JSON.stringify(template) : defaultGridTemplateText;
+
+const parseGridTemplate = (value: string): ElementLayoutGridRowTemplate[] | undefined | null => {
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(trimmed);
+  } catch {
+    return null;
+  }
+  if (!Array.isArray(parsed)) return null;
+  const normalized: ElementLayoutGridRowTemplate[] = [];
+  for (let i = 0; i < parsed.length; i += 1) {
+    const entry = parsed[i];
+    if (typeof entry === 'number') {
+      if (!Number.isFinite(entry) || entry <= 0) return null;
+      normalized.push(Math.floor(entry));
+      continue;
+    }
+    if (!Array.isArray(entry) || entry.length === 0) return null;
+    for (let j = 0; j < entry.length; j += 1) {
+      const cell = entry[j];
+      if (typeof cell !== 'number' || !Number.isFinite(cell) || cell <= 0) return null;
+      normalized.push(Math.floor(cell));
+    }
+  }
+  return normalized;
+};
+
+const AutoLayoutDemo = () => {
+  const demo = autoLayoutDemoConfig;
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+  });
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  const [targetId, setTargetId] = useState<string>(parentOptions[0].id);
+  const [mode, setMode] = useState<ElementLayoutMode>('horizontal');
   const [align, setAlign] = useState<ElementLayout['align']>('center');
+  const [autoResize, setAutoResize] = useState<ElementLayoutAutoResizeMode>('grow');
   const [padding, setPadding] = useState<number>(12);
   const [gap, setGap] = useState<number>(12);
   const [childFitMainAxis, setChildFitMainAxis] = useState<ElementLayout['childFitMainAxis']>('none');
   const [childFitCrossAxis, setChildFitCrossAxis] = useState<ElementLayout['childFitCrossAxis']>('none');
-  const [childFitMinWidth, setChildFitMinWidth] = useState<number | ''>('');
-  const [childFitMinHeight, setChildFitMinHeight] = useState<number | ''>('');
-  const [childFitMaxWidth, setChildFitMaxWidth] = useState<number | ''>('');
-  const [childFitMaxHeight, setChildFitMaxHeight] = useState<number | ''>('');
+  const [childMinWidth, setChildMinWidth] = useState<number | ''>('');
+  const [childMinHeight, setChildMinHeight] = useState<number | ''>('');
+  const [childMaxWidth, setChildMaxWidth] = useState<number | ''>('');
+  const [childMaxHeight, setChildMaxHeight] = useState<number | ''>('');
+  const [gridTemplateText, setGridTemplateText] = useState<string>(defaultGridTemplateText);
+  const [gridChildWidthResizeEnabled, setGridChildWidthResizeEnabled] = useState<boolean>(false);
   const [labelReservedMode, setLabelReservedMode] = useState<ElementLayoutLabelReservedSpaceMode>('none');
   const [labelReservedFixedSize, setLabelReservedFixedSize] = useState<number>(32);
   const [labelReservedMinSize, setLabelReservedMinSize] = useState<number | ''>('');
   const [labelReservedMaxSize, setLabelReservedMaxSize] = useState<number | ''>('');
   const [lastTrigger, setLastTrigger] = useState<string>('None yet');
-
-  useEffect(() => {
-    const editor = editorRef.current;
-    if (!editor) return undefined;
-    const disposers = [
-      editor.on('elementMoved', () => setLastTrigger('child moved')),
-      editor.on('elementResized', () => setLastTrigger('child resized')),
-      editor.on('elementDeleted', () => setLastTrigger('child removed')),
-      editor.on('change', () => setLastTrigger((prev) => prev)),
-    ];
-    return () => disposers.forEach((off) => off && off());
-  }, [editorRef]);
-
-  useEffect(() => {
-    if (!diagramState) return;
-    if (selection.length === 1) {
-      const selectedId = selection[0];
-      const exists = diagramState.elements.some((el) => el.id === selectedId);
-      if (exists && selectedId !== targetId) {
-        setTargetId(selectedId);
-      }
-    }
-  }, [selection, diagramState, targetId]);
-
-  useEffect(() => {
-    if (!diagramState) return;
-    const exists = diagramState.elements.some((el) => el.id === targetId);
-    if (!exists) {
-      setTargetId(parentOptions[0].id);
-    }
-  }, [diagramState, targetId]);
-
-  const targetElement = useMemo(
-    () => diagramState?.elements.find((el) => el.id === targetId),
-    [diagramState, targetId],
-  );
-
-  const targetOptions = useMemo(() => {
-    const seen = new Set<string>();
-    const options: Array<{ id: string; label: string }> = [];
-    parentOptions.forEach((option) => {
-      if (!seen.has(option.id)) {
-        options.push(option);
-        seen.add(option.id);
-      }
-    });
-    if (diagramState) {
-      diagramState.elements
-        .filter((el) => (el.layout && el.layout.mode !== 'manual') || el.parentId)
-        .forEach((el) => {
-          if (!seen.has(el.id)) {
-            const modeLabel = el.layout?.mode ?? 'manual';
-            options.push({ id: el.id, label: `${el.id} (${modeLabel})` });
-            seen.add(el.id);
-          }
-        });
-    }
-    if (targetElement && !seen.has(targetElement.id)) {
-      options.push({ id: targetElement.id, label: `${targetElement.id} (selected)` });
-    }
-    return options;
-  }, [diagramState, targetElement]);
-
-  useEffect(() => {
-    const parent = diagramState?.elements.find((el) => el.id === targetId);
-    if (!parent) return;
-    const layout = parent.layout;
-    setMode(layout?.mode ?? 'manual');
-    setAlign(layout?.align ?? 'center');
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    const disposers = [
+      editor.on('elementMoved', () => setLastTrigger('child moved')),
+      editor.on('elementResized', () => setLastTrigger('child resized')),
+      editor.on('gridLayoutChanged', (event) => setLastTrigger(`grid layout changed (${event.reason})`)),
+      editor.on('elementDeleted', () => setLastTrigger('child removed')),
+      editor.on('change', () => setLastTrigger((prev) => prev)),
+    ];
+    return () => disposers.forEach((off) => off && off());
+  }, [editorRef]);
+
+  useEffect(() => {
+    if (!diagramState) return;
+    if (selection.length === 1) {
+      const selectedId = selection[0];
+      const exists = diagramState.elements.some((el) => el.id === selectedId);
+      if (exists && selectedId !== targetId) {
+        setTargetId(selectedId);
+      }
+    }
+  }, [selection, diagramState, targetId]);
+
+  useEffect(() => {
+    if (!diagramState) return;
+    const exists = diagramState.elements.some((el) => el.id === targetId);
+    if (!exists) {
+      setTargetId(parentOptions[0].id);
+    }
+  }, [diagramState, targetId]);
+
+  const targetElement = useMemo(
+    () => diagramState?.elements.find((el) => el.id === targetId),
+    [diagramState, targetId],
+  );
+
+  const targetOptions = useMemo(() => {
+    const seen = new Set<string>();
+    const options: Array<{ id: string; label: string }> = [];
+    parentOptions.forEach((option) => {
+      if (!seen.has(option.id)) {
+        options.push(option);
+        seen.add(option.id);
+      }
+    });
+    if (diagramState) {
+      diagramState.elements
+        .filter((el) => (el.layout && el.layout.mode !== 'manual') || el.parentId)
+        .forEach((el) => {
+          if (!seen.has(el.id)) {
+            const modeLabel = el.layout?.mode ?? 'manual';
+            options.push({ id: el.id, label: `${el.id} (${modeLabel})` });
+            seen.add(el.id);
+          }
+        });
+    }
+    if (targetElement && !seen.has(targetElement.id)) {
+      options.push({ id: targetElement.id, label: `${targetElement.id} (selected)` });
+    }
+    return options;
+  }, [diagramState, targetElement]);
+
+  useEffect(() => {
+    const parent = diagramState?.elements.find((el) => el.id === targetId);
+    if (!parent) return;
+    const layout = parent.layout;
+    setMode(layout?.mode ?? 'manual');
+    setAlign(layout?.align ?? 'center');
+    setAutoResize(layout?.autoResize ?? 'grow');
     const paddingValue =
       typeof layout?.padding === 'number'
         ? layout.padding
@@ -136,60 +180,61 @@ const AutoLayoutDemo = () => {
     setGap(layout?.gap ?? 12);
     setChildFitMainAxis(layout?.childFitMainAxis ?? 'none');
     setChildFitCrossAxis(layout?.childFitCrossAxis ?? 'none');
-    setChildFitMinWidth(layout?.childFitMinSize?.width ?? '');
-    setChildFitMinHeight(layout?.childFitMinSize?.height ?? '');
-    setChildFitMaxWidth(layout?.childFitMaxSize?.width ?? '');
-    setChildFitMaxHeight(layout?.childFitMaxSize?.height ?? '');
+    setChildMinWidth(layout?.childMinWidth ?? layout?.childFitMinSize?.width ?? '');
+    setChildMinHeight(layout?.childMinHeight ?? layout?.childFitMinSize?.height ?? '');
+    setChildMaxWidth(layout?.childMaxWidth ?? layout?.childFitMaxSize?.width ?? '');
+    setChildMaxHeight(layout?.childMaxHeight ?? layout?.childFitMaxSize?.height ?? '');
+    setGridTemplateText(serializeGridTemplate(layout?.gridTemplate));
+    setGridChildWidthResizeEnabled(Boolean(layout?.gridChildWidthResizeEnabled));
     setLabelReservedMode(layout?.labelReservedSpace?.mode ?? 'none');
     setLabelReservedFixedSize(layout?.labelReservedSpace?.size ?? 32);
     setLabelReservedMinSize(layout?.labelReservedSpace?.minSize ?? '');
     setLabelReservedMaxSize(layout?.labelReservedSpace?.maxSize ?? '');
   }, [diagramState, targetId]);
-
-  const childOrder = useMemo(() => {
-    if (!diagramState) return [];
-    const children = diagramState.elements.filter((el) => el.parentId === targetId);
-    const parent = diagramState.elements.find((el) => el.id === targetId);
-    const axis = parent?.layout?.mode === 'vertical' ? 'y' : 'x';
-    return [...children].sort((a, b) => {
-      const aPos = axis === 'y' ? a.position.y : a.position.x;
-      const bPos = axis === 'y' ? b.position.y : b.position.x;
-      if (aPos === bPos) return a.id.localeCompare(b.id);
-      return aPos - bPos;
-    });
-  }, [diagramState, targetId]);
-
-  const parentSummaries = useMemo(() => {
-    return parentOptions.map((option) => {
-      const parent = diagramState?.elements.find((el) => el.id === option.id);
-      const childCount = diagramState?.elements.filter((el) => el.parentId === option.id).length ?? 0;
-      return {
-        ...option,
-        layoutMode: parent?.layout?.mode ?? 'manual',
-        size: parent?.size ?? { width: 0, height: 0 },
-        childCount,
-      };
-    });
-  }, [diagramState]);
-
+
+  const childOrder = useMemo(() => {
+    if (!diagramState) return [];
+    const children = diagramState.elements.filter((el) => el.parentId === targetId);
+    const parent = diagramState.elements.find((el) => el.id === targetId);
+    const layoutMode = parent?.layout?.mode;
+    return [...children].sort((a, b) => {
+      if (layoutMode === 'vertical' || layoutMode === 'grid') {
+        if (a.position.y === b.position.y) {
+          if (a.position.x === b.position.x) return a.id.localeCompare(b.id);
+          return a.position.x - b.position.x;
+        }
+        return a.position.y - b.position.y;
+      }
+      if (a.position.x === b.position.x) {
+        if (a.position.y === b.position.y) return a.id.localeCompare(b.id);
+        return a.position.y - b.position.y;
+      }
+      return a.position.x - b.position.x;
+    });
+  }, [diagramState, targetId]);
+
+  const parentSummaries = useMemo(() => {
+    return parentOptions.map((option) => {
+      const parent = diagramState?.elements.find((el) => el.id === option.id);
+      const childCount = diagramState?.elements.filter((el) => el.parentId === option.id).length ?? 0;
+      return {
+        ...option,
+        layoutMode: parent?.layout?.mode ?? 'manual',
+        size: parent?.size ?? { width: 0, height: 0 },
+        childCount,
+      };
+    });
+  }, [diagramState]);
+
   const handleApplyLayout = () => {
-    const editor = editorRef.current;
+    const editor = editorRef.current;
     if (!editor) return;
     if (!targetElement) return;
-    const childFitMinSize =
-      childFitMinWidth === '' && childFitMinHeight === ''
-        ? undefined
-        : {
-            ...(childFitMinWidth === '' ? {} : { width: childFitMinWidth }),
-            ...(childFitMinHeight === '' ? {} : { height: childFitMinHeight }),
-          };
-    const childFitMaxSize =
-      childFitMaxWidth === '' && childFitMaxHeight === ''
-        ? undefined
-        : {
-            ...(childFitMaxWidth === '' ? {} : { width: childFitMaxWidth }),
-            ...(childFitMaxHeight === '' ? {} : { height: childFitMaxHeight }),
-          };
+    const parsedGridTemplate = mode === 'grid' ? parseGridTemplate(gridTemplateText) : undefined;
+    if (mode === 'grid' && parsedGridTemplate === null) {
+      setLastTrigger('invalid grid template JSON');
+      return;
+    }
     const labelReservedSpace =
       mode === 'manual'
         ? undefined
@@ -205,13 +250,18 @@ const AutoLayoutDemo = () => {
         ? { mode: 'manual' as const }
         : {
             mode,
+            autoResize,
             padding,
             gap,
             align: align ?? 'center',
             childFitMainAxis,
             childFitCrossAxis,
-            childFitMinSize,
-            childFitMaxSize,
+            ...(childMinWidth === '' ? {} : { childMinWidth }),
+            ...(childMinHeight === '' ? {} : { childMinHeight }),
+            ...(childMaxWidth === '' ? {} : { childMaxWidth }),
+            ...(childMaxHeight === '' ? {} : { childMaxHeight }),
+            ...(mode === 'grid' && parsedGridTemplate ? { gridTemplate: parsedGridTemplate } : {}),
+            ...(mode === 'grid' ? { gridChildWidthResizeEnabled } : {}),
             labelReservedSpace,
           };
     editor.setElementLayout(targetElement.id, layout);
@@ -226,139 +276,179 @@ const AutoLayoutDemo = () => {
     editor.updateText(label.id, content);
     setLastTrigger('label updated');
   };
-
-  const handleAddChild = () => {
-    const editor = editorRef.current;
-    if (!editor) return;
-    if (!targetElement) return;
-    const offset = nextOffset();
-    const sizeBump = (offset % 3) * 8;
-    editor.addElement({
-      id: `auto-child-${createId()}`,
-      position: { x: 16 + offset, y: 16 + offset },
-      size: { width: 50 + sizeBump, height: 30 + (offset % 2) * 6 },
-      shapeId: demo.defaultElementShapeId ?? 'default',
-      parentId: targetElement.id,
-    });
-    setLastTrigger('child added');
-  };
-
-  const handleRemoveChild = () => {
-    const editor = editorRef.current;
-    if (!editor) return;
-    const children = childOrder;
-    const target = children[children.length - 1];
-    if (target) {
-      editor.removeElement(target.id);
-      setLastTrigger('child removed');
-    }
-  };
-
-  const alignmentLabel =
-    mode === 'horizontal' ? 'Vertical align (top/center/bottom)' : 'Horizontal align (left/center/right)';
-
-  return (
-    <section>
-      <div style={{ marginBottom: 12 }}>
-        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+
+  const handleAddChild = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (!targetElement) return;
+    const offset = nextOffset();
+    const sizeBump = (offset % 3) * 8;
+    editor.addElement({
+      id: `auto-child-${createId()}`,
+      position: { x: 16 + offset, y: 16 + offset },
+      size: { width: 50 + sizeBump, height: 30 + (offset % 2) * 6 },
+      shapeId: demo.defaultElementShapeId ?? 'default',
+      parentId: targetElement.id,
+    });
+    setLastTrigger('child added');
+  };
+
+  const handleRemoveChild = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const children = childOrder;
+    const target = children[children.length - 1];
+    if (target) {
+      editor.removeElement(target.id);
+      setLastTrigger('child removed');
+    }
+  };
+
+  const handleFocusResizeLockChild = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    setTargetId('layout-grid');
+    editor.setSelection(['grid-b']);
+    setLastTrigger('focus resize-lock child');
+  };
+
+  const handleFocusResizeLockParent = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    setTargetId('layout-grid');
+    editor.setSelection(['layout-grid']);
+    setLastTrigger('focus resize-lock parent');
+  };
+
+  const alignmentLabel =
+    mode === 'horizontal'
+      ? 'Vertical align (top/center/bottom)'
+      : mode === 'vertical'
+      ? 'Horizontal align (left/center/right)'
+      : 'Cell align (start/center/end)';
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
         <p style={{ marginTop: 0 }}>
-          Try horizontal, vertical, nested, and manual layout containers. Select a layout parent directly on the canvas
-          or pick it from the list; the controls below always act on the current selection. Drag, resize, add, or remove
-          children to see automatic reflow. Use fit controls to distribute/stretch child sizes with optional min/max
-          guards. Nested column shows fit propagation boundaries to its parent row.
+          Try horizontal, vertical, grid, nested, and manual layout containers. Select a layout parent directly on the
+          canvas or pick it from the list; the controls below always act on the current selection. Drag, resize, add, or
+          remove children to see automatic reflow. Use fit controls, explicit child min/max constraints, auto-resize
+          policy, 12-unit grid templates, and the optional grid child width-resize capability to validate current behavior.
+        </p>
+        <p style={{ marginTop: 0, marginBottom: 0, fontSize: 13, color: '#333' }}>
+          Grid child width resize is disabled by default. With the capability off, select <code>grid-b</code> and drag a
+          corner mostly downward: width stays stable while height changes. Turn the capability on to let horizontal drag
+          wrap rows automatically from a flat 12-unit slot array, then resize children in 1/12 steps. Any corner can drive width changes, width always grows or shrinks on the right, siblings keep their own widths, and dragging can swap grid item order.
         </p>
       </div>
-      <DisplayBoxControls
-        actions={demo.actions}
-        snapEnabled={controls.snapEnabled}
-        selectedLinkRouting={controls.selectedLinkRouting}
-        canToggleLinkRouting={controls.canToggleLinkRouting}
-        onReload={controls.handleReload}
-        onZoomIn={controls.handleZoomIn}
-        onZoomOut={controls.handleZoomOut}
-        onResetViewport={controls.handleResetViewport}
-        onToggleSnap={controls.handleToggleSnap}
-        onManualRender={controls.handleManualRender}
-        onToggleLinkRouting={controls.handleToggleLinkRouting}
-        onAction={controls.handleAction}
-        onExportImage={controls.handleExportImage}
-        onClearExportPreview={controls.handleClearExportPreview}
-        exportPreviewDataUrl={controls.exportPreviewDataUrl}
-        exportError={controls.exportError}
-      />
-
-      <div style={{ display: 'grid', gap: 12, marginBottom: 12 }}>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
-          <label htmlFor="parent-select" style={{ fontWeight: 600 }}>
-            Target element (follows selection)
-          </label>
-          <select
-            id="parent-select"
-            value={targetId}
-            onChange={(event) => {
-              const nextId = event.target.value;
-              setTargetId(nextId);
-              if (editorRef.current) {
-                editorRef.current.setSelection([nextId]);
-              }
-            }}
-            style={{ padding: '6px 10px', minWidth: 180 }}
-          >
-            {targetOptions.map((option) => (
-              <option key={option.id} value={option.id}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-
-          <label htmlFor="mode-select" style={{ fontWeight: 600 }}>
-            Layout
-          </label>
-          <select
-            id="mode-select"
-            value={mode}
-            onChange={(event) => setMode(event.target.value as ElementLayoutMode)}
-            style={{ padding: '6px 10px', minWidth: 140 }}
-          >
-            <option value="manual">Manual</option>
-            <option value="horizontal">Horizontal</option>
-            <option value="vertical">Vertical</option>
-          </select>
-
-          <label htmlFor="align-select" style={{ fontWeight: 600 }}>
-            {alignmentLabel}
-          </label>
-          <select
-            id="align-select"
-            value={align ?? 'center'}
-            onChange={(event) => setAlign(event.target.value as ElementLayout['align'])}
-            style={{ padding: '6px 10px', minWidth: 140 }}
-          >
-            <option value="start">{mode === 'horizontal' ? 'Top' : 'Left'}</option>
-            <option value="center">Center</option>
-            <option value="end">{mode === 'horizontal' ? 'Bottom' : 'Right'}</option>
-          </select>
-
-          <label htmlFor="padding-input" style={{ fontWeight: 600 }}>
-            Padding
-          </label>
-          <input
-            id="padding-input"
-            type="number"
-            value={padding}
-            onChange={(event) => setPadding(Number(event.target.value) || 0)}
-            style={{ width: 72, padding: '6px 8px' }}
-            min={0}
-          />
-
+      <DisplayBoxControls
+        actions={demo.actions}
+        snapEnabled={controls.snapEnabled}
+        selectedLinkRouting={controls.selectedLinkRouting}
+        canToggleLinkRouting={controls.canToggleLinkRouting}
+        onReload={controls.handleReload}
+        onZoomIn={controls.handleZoomIn}
+        onZoomOut={controls.handleZoomOut}
+        onResetViewport={controls.handleResetViewport}
+        onToggleSnap={controls.handleToggleSnap}
+        onManualRender={controls.handleManualRender}
+        onToggleLinkRouting={controls.handleToggleLinkRouting}
+        onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
+      />
+
+      <div style={{ display: 'grid', gap: 12, marginBottom: 12 }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
+          <label htmlFor="parent-select" style={{ fontWeight: 600 }}>
+            Target element (follows selection)
+          </label>
+          <select
+            id="parent-select"
+            value={targetId}
+            onChange={(event) => {
+              const nextId = event.target.value;
+              setTargetId(nextId);
+              if (editorRef.current) {
+                editorRef.current.setSelection([nextId]);
+              }
+            }}
+            style={{ padding: '6px 10px', minWidth: 180 }}
+          >
+            {targetOptions.map((option) => (
+              <option key={option.id} value={option.id}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+
+          <label htmlFor="mode-select" style={{ fontWeight: 600 }}>
+            Layout
+          </label>
+          <select
+            id="mode-select"
+            value={mode}
+            onChange={(event) => setMode(event.target.value as ElementLayoutMode)}
+            style={{ padding: '6px 10px', minWidth: 140 }}
+          >
+            <option value="manual">Manual</option>
+            <option value="horizontal">Horizontal</option>
+            <option value="vertical">Vertical</option>
+            <option value="grid">Grid</option>
+          </select>
+
+          <label htmlFor="align-select" style={{ fontWeight: 600 }}>
+            {alignmentLabel}
+          </label>
+          <select
+            id="align-select"
+            value={align ?? 'center'}
+            onChange={(event) => setAlign(event.target.value as ElementLayout['align'])}
+            style={{ padding: '6px 10px', minWidth: 140 }}
+          >
+            <option value="start">{mode === 'horizontal' ? 'Top' : mode === 'vertical' ? 'Left' : 'Start'}</option>
+            <option value="center">Center</option>
+            <option value="end">{mode === 'horizontal' ? 'Bottom' : mode === 'vertical' ? 'Right' : 'End'}</option>
+          </select>
+
+          <label htmlFor="auto-resize-select" style={{ fontWeight: 600 }}>
+            Auto resize
+          </label>
+          <select
+            id="auto-resize-select"
+            value={autoResize}
+            onChange={(event) => setAutoResize(event.target.value as ElementLayoutAutoResizeMode)}
+            style={{ padding: '6px 10px', minWidth: 130 }}
+            disabled={mode === 'manual'}
+          >
+            <option value="grow">Grow only</option>
+            <option value="grow-shrink">Grow + shrink</option>
+          </select>
+
+          <label htmlFor="padding-input" style={{ fontWeight: 600 }}>
+            Padding
+          </label>
+          <input
+            id="padding-input"
+            type="number"
+            value={padding}
+            onChange={(event) => setPadding(Number(event.target.value) || 0)}
+            style={{ width: 72, padding: '6px 8px' }}
+            min={0}
+          />
+
           <label htmlFor="gap-input" style={{ fontWeight: 600 }}>
             Gap
           </label>
           <input
             id="gap-input"
-            type="number"
-            value={gap}
-            onChange={(event) => setGap(Number(event.target.value) || 0)}
+            type="number"
+            value={gap}
+            onChange={(event) => setGap(Number(event.target.value) || 0)}
             style={{ width: 72, padding: '6px 8px' }}
             min={0}
           />
@@ -371,6 +461,7 @@ const AutoLayoutDemo = () => {
             value={childFitMainAxis ?? 'none'}
             onChange={(event) => setChildFitMainAxis(event.target.value as ElementLayout['childFitMainAxis'])}
             style={{ padding: '6px 10px', minWidth: 130 }}
+            disabled={mode === 'manual' || mode === 'grid'}
           >
             <option value="none">Off</option>
             <option value="distribute">Distribute</option>
@@ -384,28 +475,29 @@ const AutoLayoutDemo = () => {
             value={childFitCrossAxis ?? 'none'}
             onChange={(event) => setChildFitCrossAxis(event.target.value as ElementLayout['childFitCrossAxis'])}
             style={{ padding: '6px 10px', minWidth: 130 }}
+            disabled={mode === 'manual'}
           >
             <option value="none">Off</option>
             <option value="stretch">Stretch</option>
           </select>
 
           <label htmlFor="fit-min-width-input" style={{ fontWeight: 600 }}>
-            Min W/H
+            Child min W/H
           </label>
           <div style={{ display: 'inline-flex', gap: 6 }}>
             <input
               id="fit-min-width-input"
               type="number"
-              value={childFitMinWidth}
-              onChange={(event) => setChildFitMinWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              value={childMinWidth}
+              onChange={(event) => setChildMinWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
               style={{ width: 64, padding: '6px 8px' }}
               min={0}
               placeholder="w"
             />
             <input
               type="number"
-              value={childFitMinHeight}
-              onChange={(event) => setChildFitMinHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              value={childMinHeight}
+              onChange={(event) => setChildMinHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
               style={{ width: 64, padding: '6px 8px' }}
               min={0}
               placeholder="h"
@@ -413,28 +505,55 @@ const AutoLayoutDemo = () => {
           </div>
 
           <label htmlFor="fit-max-width-input" style={{ fontWeight: 600 }}>
-            Max W/H
+            Child max W/H
           </label>
           <div style={{ display: 'inline-flex', gap: 6 }}>
             <input
               id="fit-max-width-input"
               type="number"
-              value={childFitMaxWidth}
-              onChange={(event) => setChildFitMaxWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              value={childMaxWidth}
+              onChange={(event) => setChildMaxWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
               style={{ width: 64, padding: '6px 8px' }}
               min={0}
               placeholder="w"
             />
             <input
               type="number"
-              value={childFitMaxHeight}
-              onChange={(event) => setChildFitMaxHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              value={childMaxHeight}
+              onChange={(event) => setChildMaxHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
               style={{ width: 64, padding: '6px 8px' }}
               min={0}
               placeholder="h"
             />
           </div>
 
+          <label htmlFor="grid-template-input" style={{ fontWeight: 600 }}>
+            Grid template
+          </label>
+          <input
+            id="grid-template-input"
+            type="text"
+            value={gridTemplateText}
+            onChange={(event) => setGridTemplateText(event.target.value)}
+            style={{ minWidth: 220, padding: '6px 8px' }}
+            placeholder="[12,4,8] or [3,3,6,9]"
+            disabled={mode !== 'grid'}
+          />
+
+          <label htmlFor="grid-child-width-resize-enabled" style={{ fontWeight: 600 }}>
+            Grid child width resize
+          </label>
+          <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+            <input
+              id="grid-child-width-resize-enabled"
+              type="checkbox"
+              checked={gridChildWidthResizeEnabled}
+              onChange={(event) => setGridChildWidthResizeEnabled(event.target.checked)}
+              disabled={mode !== 'grid'}
+            />
+            Enable 12-unit resize on child width drag
+          </label>
+
           <label htmlFor="label-reserved-mode-select" style={{ fontWeight: 600 }}>
             Label lane
           </label>
@@ -487,26 +606,26 @@ const AutoLayoutDemo = () => {
           <button type="button" onClick={handleApplyLayout} style={{ padding: '6px 12px', fontWeight: 600 }}>
             Apply layout
           </button>
-          <button type="button" onClick={handleAddChild} style={{ padding: '6px 10px' }} disabled={!targetElement}>
-            Add child
-          </button>
-          <button type="button" onClick={handleRemoveChild} style={{ padding: '6px 10px' }} disabled={!targetElement}>
-            Remove last child
-          </button>
-          <span
-            style={{
-              padding: '6px 10px',
-              borderRadius: 8,
-              background: '#f7f7f8',
-              border: '1px solid #e0e0e0',
-              display: 'inline-flex',
-              gap: 6,
-              alignItems: 'center',
-            }}
-          >
+          <button type="button" onClick={handleAddChild} style={{ padding: '6px 10px' }} disabled={!targetElement}>
+            Add child
+          </button>
+          <button type="button" onClick={handleRemoveChild} style={{ padding: '6px 10px' }} disabled={!targetElement}>
+            Remove last child
+          </button>
+          <span
+            style={{
+              padding: '6px 10px',
+              borderRadius: 8,
+              background: '#f7f7f8',
+              border: '1px solid #e0e0e0',
+              display: 'inline-flex',
+              gap: 6,
+              alignItems: 'center',
+            }}
+          >
             <span style={{ fontWeight: 600 }}>Target:</span> {targetElement ? targetElement.id : '—'}
-            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1f4d99', display: 'inline-block' }} />
-            Last trigger: <strong>{lastTrigger}</strong>
+            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1f4d99', display: 'inline-block' }} />
+            Last trigger: <strong>{lastTrigger}</strong>
           </span>
           <button
             type="button"
@@ -524,80 +643,95 @@ const AutoLayoutDemo = () => {
           >
             Label long
           </button>
+          <button type="button" onClick={handleFocusResizeLockChild} style={{ padding: '6px 10px' }}>
+            Focus lock child
+          </button>
+          <button type="button" onClick={handleFocusResizeLockParent} style={{ padding: '6px 10px' }}>
+            Focus lock parent
+          </button>
         </div>
-
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
-          <div>
-            <div style={{ fontWeight: 600, marginBottom: 6 }}>Child order (based on layout axis)</div>
-            <ol style={{ marginTop: 0, paddingLeft: 18 }}>
-              {childOrder.map((child) => (
-                <li key={child.id} style={{ marginBottom: 4, fontSize: 13 }}>
-                  {child.id} — position ({Math.round(child.position.x)}, {Math.round(child.position.y)}) size (
-                  {child.size.width}×{child.size.height})
-                </li>
-              ))}
-              {childOrder.length === 0 && <li style={{ color: '#555' }}>No children.</li>}
-            </ol>
-            <p style={{ fontSize: 12, color: '#555', marginTop: 4 }}>
-              Drag a child before/after its sibling or resize it. The order above reflects the reflow sequence.
-            </p>
-          </div>
-          <div>
-            <div style={{ fontWeight: 600, marginBottom: 6 }}>Scenario tips</div>
-            <ul style={{ marginTop: 0, paddingLeft: 18, fontSize: 13 }}>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+          <div>
+            <div style={{ fontWeight: 600, marginBottom: 6 }}>Child order (axis or grid row-major)</div>
+            <ol style={{ marginTop: 0, paddingLeft: 18 }}>
+              {childOrder.map((child) => (
+                <li key={child.id} style={{ marginBottom: 4, fontSize: 13 }}>
+                  {child.id} — position ({Math.round(child.position.x)}, {Math.round(child.position.y)}) size (
+                  {child.size.width}×{child.size.height})
+                </li>
+              ))}
+              {childOrder.length === 0 && <li style={{ color: '#555' }}>No children.</li>}
+            </ol>
+            <p style={{ fontSize: 12, color: '#555', marginTop: 4 }}>
+              Drag a child before/after its sibling or resize it. The order above reflects the reflow sequence.
+            </p>
+          </div>
+          <div>
+            <div style={{ fontWeight: 600, marginBottom: 6 }}>Scenario tips</div>
+            <ul style={{ marginTop: 0, paddingLeft: 18, fontSize: 13 }}>
+              <li>Resize lock: with grid child width resize off, select grid-b and drag diagonally; width should stay fixed.</li>
+              <li>Enable grid child width resize, then shrink a full-width grid child; it should snap smaller without flashing, and later siblings should keep their own widths.</li>
+              <li>Enable grid child width resize, then grow a child; siblings on the right should keep their own widths and only move down when they no longer fit.</li>
+              <li>Try dragging a left resize handle on the first child in a row; the child should still grow, but only to the right.</li>
+              <li>Try dragging a grid child across a sibling; the row-major order should swap to match the drag position.</li>
+              <li>Whenever enabled child width resize changes row allocation, the last-trigger badge should report grid layout changed.</li>
+              <li>Parent resize: select layout-grid, drag corner; parent width and height should both track drag.</li>
               <li>Horizontal: try center vs bottom alignment and larger padding.</li>
               <li>Vertical: see parent grow taller as children stack.</li>
+              <li>Grid: apply templates like [12,4,8] and [3,3,6,9]. Rows wrap automatically when the next item cannot fit.</li>
+              <li>Auto resize: compare grow-only vs grow-shrink while adding/removing children.</li>
               <li>Label lane: compare none/fixed/flexible and observe children start below the reserved lane.</li>
               <li>Fit main-axis distribute fills inner layout space across siblings.</li>
               <li>Fit cross-axis stretch extends children across inner cross axis.</li>
-              <li>Min/max fit guards cap distributed or stretched child sizes.</li>
+              <li>Child min/max guards cap distributed, stretched, and grid cell sizes.</li>
               <li>Nested: the left column owns its own children and expands the row.</li>
-              <li>Deep bounds: stack-overflow widens the nested column and the outer row.</li>
-              <li>Re-order: drag along the layout axis then apply layout to keep the new order.</li>
-              <li>Select any container on the canvas to target it instantly—controls follow your selection.</li>
-              <li>Manual: switch to manual to compare with auto layout.</li>
-            </ul>
-          </div>
-        </div>
-
-        <div>
-          <div style={{ fontWeight: 600, marginBottom: 6 }}>Parent bounds snapshot</div>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 8 }}>
-            {parentSummaries.map((parent) => (
-              <div
-                key={parent.id}
-                style={{
-                  padding: 10,
-                  borderRadius: 8,
-                  border: '1px solid #e0e0e0',
-                  background: '#fafafa',
-                  boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
-                }}
-              >
-                <div style={{ fontWeight: 700 }}>{parent.label}</div>
-                <div style={{ fontSize: 12, color: '#444', marginTop: 2 }}>
-                  Layout: <code>{parent.layoutMode}</code> · {parent.childCount} children
-                </div>
-                <div
-                  style={{
-                    marginTop: 4,
-                    fontFamily:
-                      'ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',
-                    fontSize: 12,
-                  }}
-                >
-                  {Math.round(parent.size.width)} × {Math.round(parent.size.height)} px
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <DisplayBoxStage containerRef={containerRef} stageStyle={gridStageStyle} />
-    </section>
-  );
-};
-
-export default AutoLayoutDemo;
-
+              <li>Deep bounds: stack-overflow widens the nested column and the outer row.</li>
+              <li>Re-order: drag along the layout axis then apply layout to keep the new order.</li>
+              <li>Select any container on the canvas to target it instantly—controls follow your selection.</li>
+              <li>Manual: switch to manual to compare with auto layout.</li>
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <div style={{ fontWeight: 600, marginBottom: 6 }}>Parent bounds snapshot</div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 8 }}>
+            {parentSummaries.map((parent) => (
+              <div
+                key={parent.id}
+                style={{
+                  padding: 10,
+                  borderRadius: 8,
+                  border: '1px solid #e0e0e0',
+                  background: '#fafafa',
+                  boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
+                }}
+              >
+                <div style={{ fontWeight: 700 }}>{parent.label}</div>
+                <div style={{ fontSize: 12, color: '#444', marginTop: 2 }}>
+                  Layout: <code>{parent.layoutMode}</code> · {parent.childCount} children
+                </div>
+                <div
+                  style={{
+                    marginTop: 4,
+                    fontFamily:
+                      'ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',
+                    fontSize: 12,
+                  }}
+                >
+                  {Math.round(parent.size.width)} × {Math.round(parent.size.height)} px
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <DisplayBoxStage containerRef={containerRef} stageStyle={gridStageStyle} />
+    </section>
+  );
+};
+
+export default AutoLayoutDemo;
+