orcasvn-react-diagrams 0.2.6 → 0.2.7

package/dist/esm/types/api/types.d.ts

@@ -29,6 +29,9 @@ export type TextInteractionPolicy = {
     movable?: boolean;
     editable?: boolean;
 };
+export type ElementChildInteractionPolicy = {
+    movable?: boolean;
+};
 export type BorderSide = 'left' | 'right' | 'top' | 'bottom';
 export type HostAnchorPreset = 'vertices' | 'cardinal';
 export type PortLinkAttachMode = 'external' | 'internal';
@@ -270,6 +273,7 @@ export type ElementData = {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     layout?: ElementLayout;
+    childElementInteraction?: ElementChildInteractionPolicy;
     portMovement?: ElementPortMovementPolicy;
 };
 export type PortData = {

package/dist/esm/types/displaybox/demos/autoLayoutDemo.d.ts

@@ -1,2 +1,4 @@
+import type { DiagramState } from '../../api';
 import type { DemoConfig } from '../types';
+export declare const createAutoLayoutState: (lockComparisonChildren?: boolean) => DiagramState;
 export declare const autoLayoutDemoConfig: DemoConfig;

package/dist/esm/types/engine/DiagramEngine.d.ts

@@ -94,6 +94,8 @@ export default class DiagramEngine {
     private shouldRestrictAutoLayoutChildRightGrowth;
     private resolveSnappedGridChildWidth;
     private resolveGridChildWidthResizeTopologyChange;
+    private isLeafGridChildResizeCandidate;
+    private isEnabledGridChildWidthResizeCandidate;
     getPortWorldPosition(id: string): Point | null;
     getPortLinkWorldPosition(id: string, options?: {
         oppositePortId?: string;

package/dist/esm/types/models/ElementModel.d.ts

@@ -11,6 +11,7 @@ export default class ElementModel {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     layout?: ElementData['layout'];
+    childElementInteraction?: ElementData['childElementInteraction'];
     portMovement?: ElementData['portMovement'];
     constructor(data: ElementData);
     setPosition(position: Point): void;

package/dist/esm/types/renderer/konva/KonvaInteraction.d.ts

@@ -74,7 +74,6 @@ export default class KonvaInteraction {
     private readonly occupiedVertexTolerance;
     private readonly nestedHoverElementPadding;
     private emittingElementLinkEnded;
-    private panKey;
     constructor(engine: DiagramEngine, config?: InteractionConfig);
     setShapeHoverControls(controls?: ElementShapeHoverControls): void;
     startLinkFromPort(sourcePortId: string, pointer?: Point): void;
@@ -147,6 +146,7 @@ export default class KonvaInteraction {
     private getPortById;
     private getTextById;
     private isTextMovable;
+    private isElementMovable;
     private isTextEditable;
     private getLinkById;
     private resolveTextScreenPosition;
@@ -154,5 +154,4 @@ export default class KonvaInteraction {
     private applyStageTransform;
     private cancelLinkDrag;
     private isEditableTarget;
-    private isPanKeyPressed;
 }

package/dist/examples.d.ts

@@ -31,6 +31,9 @@ type TextInteractionPolicy = {
     movable?: boolean;
     editable?: boolean;
 };
+type ElementChildInteractionPolicy = {
+    movable?: boolean;
+};
 type BorderSide = 'left' | 'right' | 'top' | 'bottom';
 type HostAnchorPreset = 'vertices' | 'cardinal';
 type PortLinkAttachMode = 'external' | 'internal';
@@ -243,6 +246,7 @@ type ElementData = {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     layout?: ElementLayout;
+    childElementInteraction?: ElementChildInteractionPolicy;
     portMovement?: ElementPortMovementPolicy;
 };
 type PortData = {

package/dist/index.d.ts

@@ -29,6 +29,9 @@ type TextInteractionPolicy = {
     movable?: boolean;
     editable?: boolean;
 };
+type ElementChildInteractionPolicy = {
+    movable?: boolean;
+};
 type BorderSide$1 = 'left' | 'right' | 'top' | 'bottom';
 type HostAnchorPreset = 'vertices' | 'cardinal';
 type PortLinkAttachMode = 'external' | 'internal';
@@ -270,6 +273,7 @@ type ElementData = {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     layout?: ElementLayout;
+    childElementInteraction?: ElementChildInteractionPolicy;
     portMovement?: ElementPortMovementPolicy;
 };
 type PortData = {
@@ -543,6 +547,7 @@ declare class ElementModel {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     layout?: ElementData['layout'];
+    childElementInteraction?: ElementData['childElementInteraction'];
     portMovement?: ElementData['portMovement'];
     constructor(data: ElementData);
     setPosition(position: Point): void;
@@ -834,4 +839,4 @@ type DiagramEditorHandle = DiagramEngineHandle & {
 };
 declare const createDiagramEditor: (config: DiagramEditorConfig) => DiagramEditorHandle;
 
-export { type AnchorReference, type BorderSide$1 as BorderSide, type ClientRectLike, type DiagramContainer, type DiagramEditorConfig, type DiagramEditorHandle, type DiagramEngineHandle, type DiagramImageExportOptions, type DiagramPatch, type DiagramState, type EdgeHoverControl, type ElementData, type ElementDeletedEvent, type ElementDropEvent, type ElementLayout, type ElementLayoutAlign, type ElementLayoutAutoResizeMode, type ElementLayoutChildFitCrossAxis, type ElementLayoutChildFitMainAxis, type ElementLayoutGridRowTemplate, type ElementLayoutLabelReservedSpace, type ElementLayoutLabelReservedSpaceMode, type ElementLayoutLabelReservedSpacePlacement, type ElementLayoutMode, type ElementLinkConnectingEvent, type ElementLinkEndedEvent, type ElementLinkStartedEvent, type ElementMovedEvent, type ElementPointerEvent, type ElementPortMovementPolicy, type ElementResizedEvent, type ElementSelectedEvent, type ElementShapeControlDragEvent, type ElementShapeControlEventType, type ElementShapeHoverControlActivationEvent, type ElementShapeHoverControlInteractionEvent, type ElementShapeHoverControls, EllipseMidPoint, type EngineChangeEvent, type EngineConfigEvent, type EngineEventMap, type EnginePointerInfo, type EngineSelectionEvent, type GridLayoutChangedEvent, type GridLayoutChangedReason, type GridRowSnapshot, type HostAnchorPreset, type HoverControlIcon, type LinkColorPoolPolicy, type LinkData, type LinkDeletedEvent, type LinkRouteRefreshMode, type LinkRouteRefreshPolicy, type LinkRoutingMode, type MoveConstraint, type OverlayShapeConfig, type OverlayShapeHandle, type PaperClickEvent, type Point, type PortAnchor, type PortAnchorConstraint, type PortBorderTransformContext, type PortBorderTransformResult, type PortData, type PortDeletedEvent, type PortLinkAttachMode, type PortMouseEvent, type PortMovedEvent, type PortPositionLimits, type PortSelectedEvent, type PositionAxisLimit, type Rect, type RerouteLinksOptions, type ResolvePortAnchorsOptions, type ShapeControlDefinition, type ShapeControlTargetKind, type ShapeControlVisibilityTrigger, type ShapeDrawContext, type ShapeEdgeTarget, type ShapeEllipseMidPointTarget, type ShapeHoverGeometry, type ShapeVertexTarget, type SimpleShape, type Size, type TextData, type TextDeletedEvent, type TextInteractionPolicy, type TextLayout, type TextLayoutBoundsMode, type TextLayoutOverflowMode, type TextLayoutWrapMode, type TextSelectedEvent, type TextUpdatedEvent, type VertexHoverControl, type ViewportFitOptions, createDiagramEditor, createDiagramEngine };
+export { type AnchorReference, type BorderSide$1 as BorderSide, type ClientRectLike, type DiagramContainer, type DiagramEditorConfig, type DiagramEditorHandle, type DiagramEngineHandle, type DiagramImageExportOptions, type DiagramPatch, type DiagramState, type EdgeHoverControl, type ElementChildInteractionPolicy, type ElementData, type ElementDeletedEvent, type ElementDropEvent, type ElementLayout, type ElementLayoutAlign, type ElementLayoutAutoResizeMode, type ElementLayoutChildFitCrossAxis, type ElementLayoutChildFitMainAxis, type ElementLayoutGridRowTemplate, type ElementLayoutLabelReservedSpace, type ElementLayoutLabelReservedSpaceMode, type ElementLayoutLabelReservedSpacePlacement, type ElementLayoutMode, type ElementLinkConnectingEvent, type ElementLinkEndedEvent, type ElementLinkStartedEvent, type ElementMovedEvent, type ElementPointerEvent, type ElementPortMovementPolicy, type ElementResizedEvent, type ElementSelectedEvent, type ElementShapeControlDragEvent, type ElementShapeControlEventType, type ElementShapeHoverControlActivationEvent, type ElementShapeHoverControlInteractionEvent, type ElementShapeHoverControls, EllipseMidPoint, type EngineChangeEvent, type EngineConfigEvent, type EngineEventMap, type EnginePointerInfo, type EngineSelectionEvent, type GridLayoutChangedEvent, type GridLayoutChangedReason, type GridRowSnapshot, type HostAnchorPreset, type HoverControlIcon, type LinkColorPoolPolicy, type LinkData, type LinkDeletedEvent, type LinkRouteRefreshMode, type LinkRouteRefreshPolicy, type LinkRoutingMode, type MoveConstraint, type OverlayShapeConfig, type OverlayShapeHandle, type PaperClickEvent, type Point, type PortAnchor, type PortAnchorConstraint, type PortBorderTransformContext, type PortBorderTransformResult, type PortData, type PortDeletedEvent, type PortLinkAttachMode, type PortMouseEvent, type PortMovedEvent, type PortPositionLimits, type PortSelectedEvent, type PositionAxisLimit, type Rect, type RerouteLinksOptions, type ResolvePortAnchorsOptions, type ShapeControlDefinition, type ShapeControlTargetKind, type ShapeControlVisibilityTrigger, type ShapeDrawContext, type ShapeEdgeTarget, type ShapeEllipseMidPointTarget, type ShapeHoverGeometry, type ShapeVertexTarget, type SimpleShape, type Size, type TextData, type TextDeletedEvent, type TextInteractionPolicy, type TextLayout, type TextLayoutBoundsMode, type TextLayoutOverflowMode, type TextLayoutWrapMode, type TextSelectedEvent, type TextUpdatedEvent, type VertexHoverControl, type ViewportFitOptions, createDiagramEditor, createDiagramEngine };

package/docs/API_CONTRACT.md

@@ -22,7 +22,7 @@ Primary definitions:
 - `initialState?: DiagramState`
 - `elementShapes?: SimpleShape[]`
 - `portShapes?: SimpleShape[]`
-- `panKey?: 'Control' | 'Shift' | 'Alt' | 'Meta'` (default: `'Control'`)
+- `panKey?: 'Control' | 'Shift' | 'Alt' | 'Meta'` (default: `'Control'`; accepted for compatibility, but built-in empty-paper panning no longer depends on it)
 - `elementShapeHoverControls?: ElementShapeHoverControls`
 - `onElementShapeHoverControlInteraction?: (event: ElementShapeHoverControlInteractionEvent) => void`
 - `onElementShapeHoverControlActivated?: (event: ElementShapeHoverControlActivationEvent) => void` (deprecated callback contract)
@@ -62,7 +62,7 @@ Defaults:
 
 ### `ElementData`
 - Required: `id`, `position`, `size`, `shapeId`
-- Optional: `style`, `portIds`, `textIds`, `parentId`, `moveMode`, `anchorCenter`, `layout`, `portMovement`
+- Optional: `style`, `portIds`, `textIds`, `parentId`, `moveMode`, `anchorCenter`, `layout`, `childElementInteraction`, `portMovement`
 - Defaults at runtime/model:
   - `portIds`: `[]`
   - `textIds`: `[]`
@@ -74,6 +74,7 @@ Defaults:
 - Optional: `autoResize?: 'grow' | 'grow-shrink'` (default: `'grow'`)
 - Optional grid controls: `gridTemplate?: number[]`
 - Optional grid interaction policy: `gridChildWidthResizeEnabled?: boolean` (default: `false`)
+- Enabled grid-child width topology semantics apply to all direct children of the grid parent, including nested layout-container children.
 - Optional fit controls: `childFitMainAxis?: 'none' | 'distribute'`, `childFitCrossAxis?: 'none' | 'stretch'`, `childFitMinSize?: Partial<Size>`, `childFitMaxSize?: Partial<Size>`
 - Optional child size aliases: `childMinWidth?: number`, `childMaxWidth?: number`, `childMinHeight?: number`, `childMaxHeight?: number`
 - Optional label reservation: `labelReservedSpace?: ElementLayoutLabelReservedSpace`
@@ -100,6 +101,14 @@ Defaults:
   - omitted fields preserve existing built-in behavior
   - programmatic `moveTextTo(...)` and `updateText(...)` remain allowed
 
+### `ElementChildInteractionPolicy`
+- Optional `movable?: boolean` (default behavior: `true`)
+- Semantics:
+  - configured on a parent element through `ElementData.childElementInteraction`
+  - applies to direct child elements only
+  - `movable: false` suppresses built-in pointer drag for those direct child elements
+  - selection, linking, resize, and programmatic/layout-driven movement remain available
+
 ### `ElementPortMovementPolicy`
 - `moveMode: 'free' | 'inside' | 'border' | 'anchors'`
 - Optional `anchorConstraint?: PortAnchorConstraint`
@@ -253,12 +262,14 @@ Defaults:
 - `setViewport` emits a `change` patch with `entity: 'viewport'` and skips immediate render scheduling.
 - `zoomToFitElements` computes bounds from `elements[]` only, ignores ports/links/texts for fit expansion, and no-ops when no elements exist.
 - `zoomToFitElements` applies its result through `setViewport`, so hosts observe the standard viewport patch/change path.
+- Built-in empty-paper panning now starts from plain primary-button drag and no longer requires `panKey`; marquee selection uses `Shift + primary drag`.
 - `clientToWorld` uses: `world = (client - containerRect - pan) / zoom`, with zoom fallback to `1` when zoom is `0`.
 - `rerouteLinks(ids)` skips manual links unless `options.includeManual === true`.
 - `linkRouteRefreshPolicy.mode` defaults to `'mutation-only'`; `'redraw-two-endpoint-change'` enables redraw-cycle reroute checks for links whose two endpoints changed.
 - `updateLinkPoints` always marks the link as manual routing.
 - `linkColorPoolPolicy` is opt-in and applies only to newly created links; explicitly provided non-empty `style.stroke` values are preserved.
 - `gridLayoutChanged` is additive and does not replace standard `change` / `elementResized` flows.
+- `ElementData.childElementInteraction.movable = false` suppresses built-in drag only for direct child elements; programmatic `moveElementTo(...)` and layout/ancestor-driven repositioning remain allowed.
 - `TextData.interaction.movable = false` blocks built-in drag only; selection still works and programmatic movement remains allowed.
 - `TextData.interaction.editable = false` blocks built-in textarea editing only; selection still works and programmatic text updates remain allowed.
 - Text layout/overflow resolution updates `displayContent` and emits `textUpdated` when `updateText` is called.

package/docs/CAPABILITIES.md

@@ -16,6 +16,7 @@
 - Auto-layout modes: `manual`, `horizontal`, `vertical`, and `grid` with template rows/columns.
 - Auto-layout parent resize policy (`grow` / `grow-shrink`) and child size constraints.
 - Optional grid-child width topology editing with `gridLayoutChanged` host events.
+- Parent-owned direct-child drag suppression through `ElementData.childElementInteraction`.
 - Element shape hover controls with edge/vertex/midpoint targets and interaction callbacks.
 - Optional random link color assignment from configurable pools during link creation.
 - Per-text interaction policy for suppressing built-in text drag and/or built-in text editing.

package/docs/COMMANDS_EVENTS.md

@@ -64,6 +64,7 @@
 ## Failure Modes
 - Unknown IDs do not emit entity-specific movement/selection events.
 - Canceled link creation emits `elementLinkEnded` with `cancelled=true` and no link creation.
+- Built-in drag on a direct child element emits no move/drop mutation when its parent sets `childElementInteraction.movable = false`.
 - `textUpdated` emits only when target text exists; missing IDs remain no-op.
 
 ## Verification References

package/docs/DOCUMENTATION_WORKFLOW.md

@@ -59,7 +59,7 @@ When resuming later:
 5. Re-run packaging verification.
 
 ## 6. Current Status
-- Last updated: 2026-05-14
+- Last updated: 2026-05-18
 - Last completed step: 10
 - Next step: 7 (optional additional fixture coverage for deeper nested/manual-route scenarios)
 - Owner: Codex (with repository maintainers)
@@ -85,3 +85,4 @@ When resuming later:
 - 2026-05-10: Completed release-doc pass for `v0.2.5`; refreshed release highlights, API contract updates (`linkRouteRefreshPolicy`, `linkColorPoolPolicy`, grid auto-layout fields), and machine-readable contract metadata.
 - 2026-05-10: Ran release validations: `npm run typecheck`, `npm test -- --watchAll=false`, `npm run build`, `npm run rollup-build-lib`, and `npm pack --dry-run`.
 - 2026-05-14: Completed release-doc pass for `v0.2.6`; refreshed release highlights, API contract updates (`zoomToFitElements`, `ViewportFitOptions`, `gridChildWidthResizeEnabled`, `gridLayoutChanged`, `TextInteractionPolicy`), and machine-readable contract metadata.
+- 2026-05-18: Completed release-doc pass for `v0.2.7`; refreshed release highlights, API contract updates (`ElementChildInteractionPolicy`, `childElementInteraction`, and built-in pan gesture behavior), and machine-readable contract metadata.

package/docs/INTEGRATION_PLAYBOOK.md

@@ -18,6 +18,7 @@ Embed this library into another diagram host while preserving deterministic stat
 5. For shape controls, pass `elementShapeHoverControls` and handle `onElementShapeHoverControlInteraction`.
 6. Use `zoomToFitElements(options?)` when the host needs library-owned fit-to-elements navigation instead of recomputing viewport math externally.
 7. Set `TextData.interaction` when some labels must remain read-only or fixed in place while still using library selection behavior.
+8. Set `ElementData.childElementInteraction` on parent elements when direct child nodes should stay selectable but not be draggable through built-in interaction.
 
 ## Path B: Engine-Only Adapter
 1. Implement `Renderer`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcasvn-react-diagrams",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "dependencies": {
     "eventemitter3": "^5.0.1",
     "flatten-js": "^0.6.9",

package/src/displaybox/demos/AutoLayoutDemoTab.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type {
   ElementLayout,
   ElementLayoutAutoResizeMode,
@@ -13,7 +13,7 @@ import useDemoControls from '../useDemoControls';
 import useDemoEditor from '../useDemoEditor';
 import useOffsetSequence from '../useOffsetSequence';
 import type { DemoActionHelpers } from '../types';
-import { autoLayoutDemoConfig } from './autoLayoutDemo';
+import { autoLayoutDemoConfig, createAutoLayoutState } from './autoLayoutDemo';
 import { gridStageStyle } from './shared';
 
 const parentOptions = [
@@ -21,12 +21,17 @@ const parentOptions = [
   { id: 'layout-column', label: 'Vertical layout' },
   { id: 'layout-grid', label: 'Grid layout' },
   { id: 'layout-nested', label: 'Nested layout' },
+  { id: 'layout-grid-deep', label: 'Nested grid' },
+  { id: 'layout-lock-compare', label: 'Child lock compare' },
   { 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 defaultGridTemplateText = '[12,4,8]';
+const lockComparisonContainerId = 'layout-lock-compare';
+const lockParentId = 'deep-lock-parent';
+const lockTargetId = 'deep-lock-child-a';
 
 const serializeGridTemplate = (template?: ElementLayoutGridRowTemplate[]): string =>
   Array.isArray(template) && template.length > 0 ? JSON.stringify(template) : defaultGridTemplateText;
@@ -61,8 +66,13 @@ const parseGridTemplate = (value: string): ElementLayoutGridRowTemplate[] | unde
 
 const AutoLayoutDemo = () => {
   const demo = autoLayoutDemoConfig;
+  const [lockComparisonChildren, setLockComparisonChildren] = useState<boolean>(true);
+  const createState = useCallback(
+    () => createAutoLayoutState(lockComparisonChildren),
+    [lockComparisonChildren],
+  );
   const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
-    createState: demo.createState,
+    createState,
     elementShapes: demo.elementShapes,
     portShapes: demo.portShapes,
   });
@@ -136,6 +146,34 @@ const AutoLayoutDemo = () => {
     () => diagramState?.elements.find((el) => el.id === targetId),
     [diagramState, targetId],
   );
+  const resolveElementWorldPosition = useCallback(
+    (elementId: string) => {
+      if (!diagramState) return null;
+      const byId = new Map(diagramState.elements.map((element) => [element.id, element]));
+      let current = byId.get(elementId);
+      if (!current) return null;
+      let x = 0;
+      let y = 0;
+      while (current) {
+        x += current.position.x;
+        y += current.position.y;
+        current = current.parentId ? byId.get(current.parentId) : undefined;
+      }
+      return { x, y };
+    },
+    [diagramState],
+  );
+  const lockDemoContext = useMemo(() => {
+    if (!diagramState) return null;
+    const outer = diagramState.elements.find((el) => el.id === lockComparisonContainerId);
+    const parent = diagramState.elements.find((el) => el.id === lockParentId);
+    if (!outer || !parent) return null;
+    return {
+      outer,
+      parent,
+      isLocked: parent.childElementInteraction?.movable === false,
+    };
+  }, [diagramState]);
 
   const targetOptions = useMemo(() => {
     const seen = new Set<string>();
@@ -304,20 +342,28 @@ const AutoLayoutDemo = () => {
     }
   };
 
-  const handleFocusResizeLockChild = () => {
+  const handleFocusLockTarget = () => {
     const editor = editorRef.current;
     if (!editor) return;
-    setTargetId('layout-grid');
-    editor.setSelection(['grid-b']);
-    setLastTrigger('focus resize-lock child');
+    setTargetId(lockParentId);
+    editor.setSelection([lockTargetId]);
+    setLastTrigger(lockComparisonChildren ? 'focus locked child' : 'focus unlocked comparison child');
   };
 
-  const handleFocusResizeLockParent = () => {
+  const handleFocusLockParent = () => {
     const editor = editorRef.current;
     if (!editor) return;
-    setTargetId('layout-grid');
-    editor.setSelection(['layout-grid']);
-    setLastTrigger('focus resize-lock parent');
+    setTargetId(lockParentId);
+    editor.setSelection([lockParentId]);
+    setLastTrigger('focus lock parent');
+  };
+
+  const handleMoveLockTargetViaApi = () => {
+    const editor = editorRef.current;
+    const parentWorld = resolveElementWorldPosition(lockParentId);
+    if (!editor || !lockDemoContext || !parentWorld) return;
+    editor.moveElementTo(lockTargetId, parentWorld.x + 56, parentWorld.y + 18);
+    setLastTrigger(lockDemoContext.isLocked ? 'locked child moved by api' : 'comparison child moved by api');
   };
 
   const alignmentLabel =
@@ -337,10 +383,19 @@ const AutoLayoutDemo = () => {
           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, fontSize: 13, color: '#333' }}>
+          Grid child width resize starts enabled for the seeded grid parents in this demo. With the capability on, horizontal
+          drag can wrap rows automatically from a flat 12-unit slot array, resize direct grid children in 1/12 steps, and
+          reorder peers by drag position. That now includes nested layout parents as well as leaf children. Turn the checkbox
+          off on a selected grid parent to compare the older locked-width behavior where a mostly downward drag keeps width
+          stable while height changes.
+        </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.
+          The <code>layout-grid-deep</code> scenario now keeps the outer container focused on grid behavior with three direct
+          grid children, including one nested grid parent that also follows the enabled 12-unit resize path. The child drag
+          lock comparison lives beside it in <code> layout-lock-compare</code>; toggle the lock, try dragging
+          <code> deep-lock-child-a</code> versus <code> deep-free-child-a</code>, then use the API move shortcut to confirm
+          the policy suppresses built-in drag without freezing geometry.
         </p>
       </div>
       <DisplayBoxControls
@@ -554,6 +609,23 @@ const AutoLayoutDemo = () => {
             Enable 12-unit resize on child width drag
           </label>
 
+          <label htmlFor="lock-comparison-child-drag" style={{ fontWeight: 600 }}>
+            Lock comparison child drag
+          </label>
+          <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+            <input
+              id="lock-comparison-child-drag"
+              type="checkbox"
+              checked={lockComparisonChildren}
+              onChange={(event) => {
+                setLockComparisonChildren(event.target.checked);
+                setTargetId(lockComparisonContainerId);
+                setLastTrigger(event.target.checked ? 'comparison child drag locked' : 'comparison child drag unlocked');
+              }}
+            />
+            Reload parent-owned lock demo
+          </label>
+
           <label htmlFor="label-reserved-mode-select" style={{ fontWeight: 600 }}>
             Label lane
           </label>
@@ -643,12 +715,15 @@ const AutoLayoutDemo = () => {
           >
             Label long
           </button>
-          <button type="button" onClick={handleFocusResizeLockChild} style={{ padding: '6px 10px' }}>
-            Focus lock child
+          <button type="button" onClick={handleFocusLockTarget} style={{ padding: '6px 10px' }}>
+            Focus lock target
           </button>
-          <button type="button" onClick={handleFocusResizeLockParent} style={{ padding: '6px 10px' }}>
+          <button type="button" onClick={handleFocusLockParent} style={{ padding: '6px 10px' }}>
             Focus lock parent
           </button>
+          <button type="button" onClick={handleMoveLockTargetViaApi} style={{ padding: '6px 10px' }}>
+            Move lock target via API
+          </button>
         </div>
 
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
@@ -670,6 +745,10 @@ const AutoLayoutDemo = () => {
           <div>
             <div style={{ fontWeight: 600, marginBottom: 6 }}>Scenario tips</div>
             <ul style={{ marginTop: 0, paddingLeft: 18, fontSize: 13 }}>
+              <li>Nested grid: target layout-grid-deep to inspect an outer grid where all three direct children, including the nested grid parent, use enabled 12-unit resize.</li>
+              <li>Select deep-grid-nested-parent and drag a horizontal resize handle; it should snap in grid units and then reflow inner children inside the resized container.</li>
+              <li>Lock comparison: target layout-lock-compare, toggle Lock comparison child drag, then compare deep-lock-child-a and deep-free-child-a.</li>
+              <li>Use Move lock target via API after locking; the child should still reposition because the policy only suppresses built-in drag.</li>
               <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>
@@ -734,4 +813,3 @@ const AutoLayoutDemo = () => {
 };
 
 export default AutoLayoutDemo;
-

package/src/displaybox/demos/autoLayoutDemo.ts

@@ -1,9 +1,9 @@
-import type { DiagramState } from '../../api';
-import type { DemoConfig } from '../types';
-import { baseElementShapes, basePortShapes } from './shared';
-
-const createAutoLayoutState = (): DiagramState => ({
-  elements: [
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const createAutoLayoutState = (lockComparisonChildren = true): DiagramState => ({
+  elements: [
     {
       id: 'layout-row',
       position: { x: 60, y: 80 },
@@ -44,14 +44,14 @@ const createAutoLayoutState = (): DiagramState => ({
       layout: {
         mode: 'grid',
         padding: { x: 10, y: 10 },
-        gap: 10,
-        align: 'center',
-        autoResize: 'grow-shrink',
-        gridTemplate: [12, 4, 8],
-        gridChildWidthResizeEnabled: false,
-        childMinWidth: 24,
-        childMinHeight: 18,
-      },
+        gap: 10,
+        align: 'center',
+        autoResize: 'grow-shrink',
+        gridTemplate: [12, 4, 8],
+        gridChildWidthResizeEnabled: true,
+        childMinWidth: 24,
+        childMinHeight: 18,
+      },
     },
     { id: 'grid-a', position: { x: 0, y: 0 }, size: { width: 36, height: 26 }, shapeId: 'default', parentId: 'layout-grid' },
     { id: 'grid-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'layout-grid' },
@@ -82,14 +82,95 @@ const createAutoLayoutState = (): DiagramState => ({
       size: { width: 110, height: 26 },
       shapeId: 'default',
       parentId: 'nested-stack',
-    },
-    { id: 'nested-peer', position: { x: 0, y: 0 }, size: { width: 50, height: 90 }, shapeId: 'default', parentId: 'layout-nested' },
-
-    {
-      id: 'layout-manual',
-      position: { x: 420, y: 260 },
-      size: { width: 190, height: 120 },
-      shapeId: 'panel',
+    },
+    { id: 'nested-peer', position: { x: 0, y: 0 }, size: { width: 50, height: 90 }, shapeId: 'default', parentId: 'layout-nested' },
+
+    {
+      id: 'layout-grid-deep',
+      position: { x: 640, y: 250 },
+      size: { width: 250, height: 180 },
+      shapeId: 'panel',
+      layout: {
+        mode: 'grid',
+        padding: { x: 12, y: 12 },
+        gap: 12,
+        align: 'center',
+        autoResize: 'grow-shrink',
+        gridTemplate: [4, 4, 4],
+        gridChildWidthResizeEnabled: true,
+        childMinWidth: 48,
+        childMinHeight: 60,
+      },
+    },
+    {
+      id: 'deep-grid-leaf-left',
+      position: { x: 0, y: 0 },
+      size: { width: 58, height: 72 },
+      shapeId: 'default',
+      parentId: 'layout-grid-deep',
+    },
+    {
+      id: 'deep-grid-nested-parent',
+      position: { x: 0, y: 0 },
+      size: { width: 108, height: 90 },
+      shapeId: 'default',
+      parentId: 'layout-grid-deep',
+      layout: {
+        mode: 'grid',
+        padding: { x: 8, y: 8 },
+        gap: 8,
+        align: 'center',
+        autoResize: 'grow-shrink',
+        gridTemplate: [6, 6],
+        gridChildWidthResizeEnabled: true,
+        childMinWidth: 18,
+        childMinHeight: 18,
+      },
+    },
+    {
+      id: 'deep-grid-leaf-right',
+      position: { x: 0, y: 0 },
+      size: { width: 52, height: 78 },
+      shapeId: 'default',
+      parentId: 'layout-grid-deep',
+    },
+    { id: 'deep-grid-a', position: { x: 0, y: 0 }, size: { width: 34, height: 24 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+    { id: 'deep-grid-b', position: { x: 0, y: 0 }, size: { width: 40, height: 28 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+    { id: 'deep-grid-c', position: { x: 0, y: 0 }, size: { width: 52, height: 24 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+    { id: 'deep-grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+
+    {
+      id: 'layout-lock-compare',
+      position: { x: 420, y: 410 },
+      size: { width: 240, height: 160 },
+      shapeId: 'panel',
+      layout: { mode: 'horizontal', padding: { x: 12, y: 12 }, gap: 12, align: 'start' },
+    },
+    {
+      id: 'deep-lock-parent',
+      position: { x: 0, y: 0 },
+      size: { width: 110, height: 92 },
+      shapeId: 'default',
+      parentId: 'layout-lock-compare',
+      childElementInteraction: lockComparisonChildren ? { movable: false } : undefined,
+    },
+    { id: 'deep-lock-child-a', position: { x: 12, y: 24 }, size: { width: 38, height: 24 }, shapeId: 'default', parentId: 'deep-lock-parent' },
+    { id: 'deep-lock-child-b', position: { x: 56, y: 54 }, size: { width: 42, height: 24 }, shapeId: 'default', parentId: 'deep-lock-parent' },
+    {
+      id: 'deep-free-parent',
+      position: { x: 0, y: 0 },
+      size: { width: 110, height: 92 },
+      shapeId: 'default',
+      parentId: 'layout-lock-compare',
+    },
+    { id: 'deep-free-child-a', position: { x: 12, y: 24 }, size: { width: 38, height: 24 }, shapeId: 'default', parentId: 'deep-free-parent' },
+    { id: 'deep-free-child-b', position: { x: 56, y: 54 }, size: { width: 42, height: 24 }, shapeId: 'default', parentId: 'deep-free-parent' },
+
+    {
+      id: 'layout-manual',
+      position: { x: 420, y: 260 },
+      size: { width: 190, height: 120 },
+      shapeId: 'panel',
     },
     { id: 'manual-a', position: { x: 12, y: 18 }, size: { width: 60, height: 30 }, shapeId: 'default', parentId: 'layout-manual' },
     { id: 'manual-b', position: { x: 90, y: 60 }, size: { width: 68, height: 32 }, shapeId: 'default', parentId: 'layout-manual' },
@@ -142,15 +223,53 @@ const createAutoLayoutState = (): DiagramState => ({
     },
     { id: 'label-nested-stack', content: 'nested stack', position: { x: 6, y: -16 }, ownerId: 'nested-stack' },
     { id: 'label-stack-a', content: 'stack-a', position: { x: 6, y: -14 }, ownerId: 'stack-a' },
-    { id: 'label-stack-b', content: 'stack-b', position: { x: 6, y: -14 }, ownerId: 'stack-b' },
-    { id: 'label-stack-overflow', content: 'stack-overflow', position: { x: 6, y: -14 }, ownerId: 'stack-overflow' },
-    { id: 'label-nested-peer', content: 'nested-peer', position: { x: 6, y: -14 }, ownerId: 'nested-peer' },
-
-    { id: 'label-layout-manual', content: 'Manual (no layout)', position: { x: 6, y: -18 }, ownerId: 'layout-manual' },
-    { id: 'label-manual-a', content: 'manual-a', position: { x: 6, y: -14 }, ownerId: 'manual-a' },
-    { id: 'label-manual-b', content: 'manual-b', position: { x: 6, y: -14 }, ownerId: 'manual-b' },
-  ],
-});
+    { id: 'label-stack-b', content: 'stack-b', position: { x: 6, y: -14 }, ownerId: 'stack-b' },
+    { id: 'label-stack-overflow', content: 'stack-overflow', position: { x: 6, y: -14 }, ownerId: 'stack-overflow' },
+    { id: 'label-nested-peer', content: 'nested-peer', position: { x: 6, y: -14 }, ownerId: 'nested-peer' },
+
+    {
+      id: 'label-layout-grid-deep',
+      content: 'Outer grid: all direct children snap',
+      position: { x: 8, y: 6 },
+      ownerId: 'layout-grid-deep',
+      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+    },
+    { id: 'label-deep-grid-leaf-left', content: 'leaf resize/reorder', position: { x: 6, y: -16 }, ownerId: 'deep-grid-leaf-left' },
+    { id: 'label-deep-grid-nested-parent', content: 'nested grid 12-unit child', position: { x: 6, y: -16 }, ownerId: 'deep-grid-nested-parent' },
+    { id: 'label-deep-grid-leaf-right', content: 'leaf resize/reorder', position: { x: 6, y: -16 }, ownerId: 'deep-grid-leaf-right' },
+    { id: 'label-deep-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'deep-grid-a' },
+    { id: 'label-deep-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'deep-grid-b' },
+    { id: 'label-deep-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'deep-grid-c' },
+    { id: 'label-deep-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'deep-grid-d' },
+    {
+      id: 'label-layout-lock-compare',
+      content: 'Child drag lock comparison',
+      position: { x: 8, y: 6 },
+      ownerId: 'layout-lock-compare',
+      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+    },
+    {
+      id: 'label-deep-lock-parent',
+      content: lockComparisonChildren ? 'parent lock: on' : 'parent lock: off',
+      position: { x: 6, y: -16 },
+      ownerId: 'deep-lock-parent',
+    },
+    {
+      id: 'label-deep-lock-child-a',
+      content: lockComparisonChildren ? 'drag target (locked)' : 'drag target (unlocked)',
+      position: { x: 4, y: -14 },
+      ownerId: 'deep-lock-child-a',
+    },
+    { id: 'label-deep-lock-child-b', content: 'api move still works', position: { x: 4, y: -14 }, ownerId: 'deep-lock-child-b' },
+    { id: 'label-deep-free-parent', content: 'movable reference', position: { x: 6, y: -16 }, ownerId: 'deep-free-parent' },
+    { id: 'label-deep-free-child-a', content: 'drag target', position: { x: 4, y: -14 }, ownerId: 'deep-free-child-a' },
+    { id: 'label-deep-free-child-b', content: 'free sibling', position: { x: 4, y: -14 }, ownerId: 'deep-free-child-b' },
+
+    { id: 'label-layout-manual', content: 'Manual (no layout)', position: { x: 6, y: -18 }, ownerId: 'layout-manual' },
+    { id: 'label-manual-a', content: 'manual-a', position: { x: 6, y: -14 }, ownerId: 'manual-a' },
+    { id: 'label-manual-b', content: 'manual-b', position: { x: 6, y: -14 }, ownerId: 'manual-b' },
+  ],
+});
 
 export const autoLayoutDemoConfig: DemoConfig = ({
   id: 'auto-layout',