orcasvn-react-diagrams 0.2.1 → 0.2.2

package/docs/fixtures/nested-layout.json

@@ -1,54 +1,54 @@
-{
-  "name": "nested-layout",
-  "description": "Parent with horizontal auto layout and child-level linking.",
-  "state": {
-    "elements": [
-      {
-        "id": "parent",
-        "position": { "x": 60, "y": 40 },
-        "size": { "width": 240, "height": 140 },
-        "shapeId": "panel",
-        "layout": { "mode": "horizontal", "padding": 12, "gap": 10, "align": "center" }
-      },
-      {
-        "id": "child-a",
-        "position": { "x": 0, "y": 0 },
-        "size": { "width": 80, "height": 50 },
-        "shapeId": "default",
-        "parentId": "parent"
-      },
-      {
-        "id": "child-b",
-        "position": { "x": 0, "y": 0 },
-        "size": { "width": 80, "height": 50 },
-        "shapeId": "default",
-        "parentId": "parent"
-      }
-    ],
-    "ports": [
-      {
-        "id": "pa",
-        "elementId": "child-a",
-        "position": { "x": 80, "y": 25 },
-        "shapeId": "port"
-      },
-      {
-        "id": "pb",
-        "elementId": "child-b",
-        "position": { "x": 0, "y": 25 },
-        "shapeId": "port"
-      }
-    ],
-    "links": [
-      {
-        "id": "l-parent",
-        "sourcePortId": "pa",
-        "targetPortId": "pb",
-        "points": [],
-        "routing": "auto"
-      }
-    ],
-    "texts": []
-  }
-}
-
+{
+  "name": "nested-layout",
+  "description": "Parent with horizontal auto layout and child-level linking.",
+  "state": {
+    "elements": [
+      {
+        "id": "parent",
+        "position": { "x": 60, "y": 40 },
+        "size": { "width": 240, "height": 140 },
+        "shapeId": "panel",
+        "layout": { "mode": "horizontal", "padding": 12, "gap": 10, "align": "center" }
+      },
+      {
+        "id": "child-a",
+        "position": { "x": 0, "y": 0 },
+        "size": { "width": 80, "height": 50 },
+        "shapeId": "default",
+        "parentId": "parent"
+      },
+      {
+        "id": "child-b",
+        "position": { "x": 0, "y": 0 },
+        "size": { "width": 80, "height": 50 },
+        "shapeId": "default",
+        "parentId": "parent"
+      }
+    ],
+    "ports": [
+      {
+        "id": "pa",
+        "elementId": "child-a",
+        "position": { "x": 80, "y": 25 },
+        "shapeId": "port"
+      },
+      {
+        "id": "pb",
+        "elementId": "child-b",
+        "position": { "x": 0, "y": 25 },
+        "shapeId": "port"
+      }
+    ],
+    "links": [
+      {
+        "id": "l-parent",
+        "sourcePortId": "pa",
+        "targetPortId": "pb",
+        "points": [],
+        "routing": "auto"
+      }
+    ],
+    "texts": []
+  }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcasvn-react-diagrams",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "dependencies": {
     "eventemitter3": "^5.0.1",
     "flatten-js": "^0.6.9",
@@ -10,7 +10,7 @@
     "web-vitals": "^2.1.4"
   },
   "engines": {
-    "node": ">=18.17.0 <19.0.0"
+    "node": ">=20.17.0 <21.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -47,32 +47,27 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     },
-    "./displaybox": {
-      "types": "./dist/displaybox.d.ts",
-      "import": "./dist/esm/displaybox.js",
-      "require": "./dist/cjs/displaybox.js"
+    "./examples": {
+      "types": "./dist/examples.d.ts",
+      "import": "./dist/esm/examples.js",
+      "require": "./dist/cjs/examples.js"
     },
+    "./examples-source": "./src/displaybox/demos/index.tsx",
+    "./examples-source/*": "./src/displaybox/demos/*",
     "./ai-manifest": "./ai/manifest.json",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
-    "displaybox",
+    "src/examples",
+    "src/displaybox/demos",
+    "src/displaybox/types.ts",
     "README.md",
     "docs",
     "ai"
   ],
-  "typesVersions": {
-    "*": {
-      "displaybox": [
-        "dist/displaybox.d.ts"
-      ]
-    }
-  },
   "types": "dist/index.d.ts",
   "devDependencies": {
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.101",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
@@ -80,6 +75,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.101",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",

package/src/displaybox/demos/AutoLayoutDemoTab.tsx

@@ -0,0 +1,501 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import type { ElementLayout, 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-nested', label: 'Nested layout' },
+  { id: 'layout-manual', label: 'Manual (compare)' },
+];
+
+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 [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 [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');
+    const paddingValue =
+      typeof layout?.padding === 'number'
+        ? layout.padding
+        : layout?.padding
+          ? Math.max(layout.padding.x ?? 0, layout.padding.y ?? 0)
+          : 12;
+    setPadding(paddingValue ?? 12);
+    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 ?? '');
+  }, [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 handleApplyLayout = () => {
+    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 layout =
+      mode === 'manual'
+        ? { mode: 'manual' as const }
+        : {
+            mode,
+            padding,
+            gap,
+            align: align ?? 'center',
+            childFitMainAxis,
+            childFitCrossAxis,
+            childFitMinSize,
+            childFitMaxSize,
+          };
+    editor.setElementLayout(targetElement.id, layout);
+    setLastTrigger(`layout applied (${mode})`);
+  };
+
+  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>
+        <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.
+        </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}
+      />
+
+      <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}
+          />
+
+          <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)}
+            style={{ width: 72, padding: '6px 8px' }}
+            min={0}
+          />
+
+          <label htmlFor="fit-main-select" style={{ fontWeight: 600 }}>
+            Main-axis fit
+          </label>
+          <select
+            id="fit-main-select"
+            value={childFitMainAxis ?? 'none'}
+            onChange={(event) => setChildFitMainAxis(event.target.value as ElementLayout['childFitMainAxis'])}
+            style={{ padding: '6px 10px', minWidth: 130 }}
+          >
+            <option value="none">Off</option>
+            <option value="distribute">Distribute</option>
+          </select>
+
+          <label htmlFor="fit-cross-select" style={{ fontWeight: 600 }}>
+            Cross-axis fit
+          </label>
+          <select
+            id="fit-cross-select"
+            value={childFitCrossAxis ?? 'none'}
+            onChange={(event) => setChildFitCrossAxis(event.target.value as ElementLayout['childFitCrossAxis'])}
+            style={{ padding: '6px 10px', minWidth: 130 }}
+          >
+            <option value="none">Off</option>
+            <option value="stretch">Stretch</option>
+          </select>
+
+          <label htmlFor="fit-min-width-input" style={{ fontWeight: 600 }}>
+            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))}
+              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))}
+              style={{ width: 64, padding: '6px 8px' }}
+              min={0}
+              placeholder="h"
+            />
+          </div>
+
+          <label htmlFor="fit-max-width-input" style={{ fontWeight: 600 }}>
+            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))}
+              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))}
+              style={{ width: 64, padding: '6px 8px' }}
+              min={0}
+              placeholder="h"
+            />
+          </div>
+
+          <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',
+            }}
+          >
+            <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>
+        </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 }}>
+              <li>Horizontal: try center vs bottom alignment and larger padding.</li>
+              <li>Vertical: see parent grow taller as children stack.</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>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;