orcasvn-react-diagrams 0.2.4 → 0.2.6

package/src/displaybox/demos/linkColorPoolDemo.ts

@@ -0,0 +1,122 @@
+import type { DiagramState } from '../../api';
+import { createId } from '../../utils/ids';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createLinkColorPoolState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'lc-off-source',
+      position: { x: 80, y: 170 },
+      size: { width: 190, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: 'lc-off-target',
+      position: { x: 350, y: 170 },
+      size: { width: 190, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: 'lc-default-source',
+      position: { x: 80, y: 360 },
+      size: { width: 190, height: 120 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'lc-default-target',
+      position: { x: 350, y: 360 },
+      size: { width: 190, height: 120 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'lc-custom-source',
+      position: { x: 620, y: 170 },
+      size: { width: 190, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: 'lc-custom-target',
+      position: { x: 620, y: 360 },
+      size: { width: 190, height: 120 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [
+    { id: 'lc-off-source-port', elementId: 'lc-off-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
+    { id: 'lc-off-target-port', elementId: 'lc-off-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
+    { id: 'lc-default-source-port', elementId: 'lc-default-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
+    { id: 'lc-default-target-port', elementId: 'lc-default-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
+    { id: 'lc-custom-source-port', elementId: 'lc-custom-source', position: { x: 95, y: 110 }, shapeId: 'port-circle' },
+    { id: 'lc-custom-target-port', elementId: 'lc-custom-target', position: { x: 95, y: 10 }, shapeId: 'port-circle' },
+  ],
+  links: [
+    {
+      id: 'lc-reference-link',
+      sourcePortId: 'lc-off-source-port',
+      targetPortId: 'lc-off-target-port',
+      points: [],
+      style: { stroke: '#374151', strokeWidth: 2 },
+    },
+  ],
+  texts: [
+    {
+      id: 'lc-intro',
+      content:
+        'Use Color Mode above: Off keeps baseline link color behavior. Default Pool enables random colors from the built-in 20-color pool. Custom Pool restricts random colors to #0b7285, #e8590c, #5f3dc4.',
+      position: { x: 80, y: 86 },
+    },
+    { id: 'lc-off-label', content: 'Off scenario pair', ownerId: 'lc-off-source', position: { x: 10, y: -16 } },
+    { id: 'lc-default-label', content: 'Default-pool scenario pair', ownerId: 'lc-default-source', position: { x: 10, y: -16 } },
+    { id: 'lc-custom-label', content: 'Custom-pool scenario pair', ownerId: 'lc-custom-source', position: { x: 10, y: -16 } },
+  ],
+});
+
+export const linkColorPoolDemoConfig: DemoConfig = {
+  id: 'link-color-pool',
+  title: 'Link Color Pool',
+  description: 'Verify disabled/default/custom random link-color assignment on new links.',
+  createState: createLinkColorPoolState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'add-link-off-pair',
+      label: 'Add link (off pair)',
+      run: (editor) => {
+        editor.addLink({
+          id: `link-color-off-${createId()}`,
+          sourcePortId: 'lc-off-source-port',
+          targetPortId: 'lc-off-target-port',
+          points: [],
+        });
+      },
+    },
+    {
+      id: 'add-link-default-pair',
+      label: 'Add link (default pair)',
+      run: (editor) => {
+        editor.addLink({
+          id: `link-color-default-${createId()}`,
+          sourcePortId: 'lc-default-source-port',
+          targetPortId: 'lc-default-target-port',
+          points: [],
+        });
+      },
+    },
+    {
+      id: 'add-link-custom-pair',
+      label: 'Add link (custom pair)',
+      run: (editor) => {
+        editor.addLink({
+          id: `link-color-custom-${createId()}`,
+          sourcePortId: 'lc-custom-source-port',
+          targetPortId: 'lc-custom-target-port',
+          points: [],
+        });
+      },
+    },
+  ],
+};

package/src/displaybox/demos/obstacleRoutingDemo.ts

@@ -31,6 +31,17 @@ const obstacleRoutingLinks: LinkData[] = [
     points: [],
     routing: 'auto',
   },
+  {
+    id: 'cross-branch-corridor-link',
+    sourcePortId: 'corridor-left-port',
+    targetPortId: 'corridor-right-port',
+    routing: 'auto',
+    points: [
+      { x: 310, y: 560 },
+      { x: 470, y: 500 },
+      { x: 630, y: 560 },
+    ],
+  },
 ];
 
 const obstacleRoutingShapes: SimpleShape[] = [
@@ -94,6 +105,45 @@ const createObstacleRoutingState = (): DiagramState => ({
       parentId: 'attach-parent',
       portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
     },
+    {
+      id: 'corridor-root',
+      position: { x: 40, y: 390 },
+      size: { width: 940, height: 260 },
+      shapeId: 'panel',
+      style: { fill: '#f5f9ff' },
+    },
+    {
+      id: 'corridor-left-branch',
+      position: { x: 80, y: 40 },
+      size: { width: 260, height: 170 },
+      shapeId: 'routing-ellipse',
+      parentId: 'corridor-root',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'corridor-right-branch',
+      position: { x: 560, y: 50 },
+      size: { width: 280, height: 170 },
+      shapeId: 'routing-ellipse',
+      parentId: 'corridor-root',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'corridor-left-leaf',
+      position: { x: 120, y: 60 },
+      size: { width: 120, height: 70 },
+      shapeId: 'default',
+      parentId: 'corridor-left-branch',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'corridor-right-leaf',
+      position: { x: 50, y: 70 },
+      size: { width: 120, height: 70 },
+      shapeId: 'default',
+      parentId: 'corridor-right-branch',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
   ],
   ports: [
     {
@@ -142,6 +192,22 @@ const createObstacleRoutingState = (): DiagramState => ({
       externalLinkAttachPoint: { x: 12, y: 0 },
       internalLinkAttachPoint: { x: -12, y: 0 },
     },
+    {
+      id: 'corridor-left-port',
+      elementId: 'corridor-left-leaf',
+      position: { x: 120, y: 35 },
+      shapeId: 'port-dark',
+      anchorCenter: true,
+      currentAnchorId: 'right',
+    },
+    {
+      id: 'corridor-right-port',
+      elementId: 'corridor-right-leaf',
+      position: { x: 0, y: 35 },
+      shapeId: 'port-dark',
+      anchorCenter: true,
+      currentAnchorId: 'left',
+    },
   ],
   links: obstacleRoutingLinks,
   texts: [
@@ -176,6 +242,16 @@ const createObstacleRoutingState = (): DiagramState => ({
       content: 'child-A->child-B: sibling endpoints EXTERNAL on both ends',
       position: { x: 620, y: 394 },
     },
+    {
+      id: 'corridor-group-label',
+      content: 'Scenario C: Cross-branch route should leave source branch early, travel at ancestor corridor, and descend near target.',
+      position: { x: 52, y: 360 },
+    },
+    {
+      id: 'corridor-redraw-label',
+      content: 'The cross-branch link starts with stale points. Toggle redraw refresh and click Manual Render to compare behavior.',
+      position: { x: 52, y: 676 },
+    },
   ],
 });
 
@@ -202,7 +278,7 @@ const rerouteAllAction: DemoAction = {
 export const obstacleRoutingDemoConfig: DemoConfig = {
   id: 'obstacle-routing',
   title: 'Obstacle Routing',
-  description: 'Nested multi-anchor checks: sibling interior-avoidance + directional internal/external parent-child attach semantics.',
+  description: 'Nested routing checks: sibling interior-avoidance, directional parent-child attach semantics, and cross-parent common-ancestor corridor preference.',
   createState: createObstacleRoutingState,
   elementShapes: obstacleRoutingShapes,
   portShapes: basePortShapes,

package/src/displaybox/demos/offsetAnchorAvoidanceDemo.ts

@@ -0,0 +1,211 @@
+import type { DiagramState, SimpleShape } from '../../api';
+import type { DemoAction, DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const offsetAnchorShapes: SimpleShape[] = [
+  ...baseElementShapes,
+  {
+    id: 'offset-anchor-ellipse',
+    kind: 'ellipse',
+    style: {
+      fill: '#eef8ff',
+      stroke: '#2563eb',
+      strokeWidth: 2,
+    },
+  },
+];
+
+export const createOffsetAnchorAvoidanceState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'offset-sibling-parent',
+      position: { x: 40, y: 110 },
+      size: { width: 520, height: 250 },
+      shapeId: 'panel',
+      style: { fill: '#faf7ef' },
+    },
+    {
+      id: 'offset-sibling-a',
+      position: { x: 60, y: 78 },
+      size: { width: 130, height: 96 },
+      shapeId: 'offset-anchor-ellipse',
+      parentId: 'offset-sibling-parent',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'offset-sibling-b',
+      position: { x: 320, y: 78 },
+      size: { width: 130, height: 96 },
+      shapeId: 'offset-anchor-ellipse',
+      parentId: 'offset-sibling-parent',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'offset-direction-parent',
+      position: { x: 620, y: 110 },
+      size: { width: 330, height: 250 },
+      shapeId: 'offset-anchor-ellipse',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'offset-direction-child',
+      position: { x: 48, y: 74 },
+      size: { width: 128, height: 92 },
+      shapeId: 'default',
+      parentId: 'offset-direction-parent',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'offset-direction-sibling',
+      position: { x: 190, y: 126 },
+      size: { width: 96, height: 70 },
+      shapeId: 'default',
+      parentId: 'offset-direction-parent',
+      style: { fill: '#fff6e8', stroke: '#b45309', strokeWidth: 2 },
+    },
+  ],
+  ports: [
+    {
+      id: 'offset-sibling-a-port',
+      elementId: 'offset-sibling-a',
+      position: { x: 0, y: 48 },
+      shapeId: 'port-dark',
+      anchorCenter: true,
+      currentAnchorId: 'left',
+      moveMode: 'border',
+      externalLinkAttachPoint: { x: 0, y: 24 },
+    },
+    {
+      id: 'offset-sibling-b-port',
+      elementId: 'offset-sibling-b',
+      position: { x: 130, y: 48 },
+      shapeId: 'port-dark',
+      anchorCenter: true,
+      currentAnchorId: 'right',
+      moveMode: 'border',
+      externalLinkAttachPoint: { x: 0, y: 24 },
+    },
+    {
+      id: 'offset-parent-port',
+      elementId: 'offset-direction-parent',
+      position: { x: 18, y: 125 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      currentAnchorId: 'left',
+      moveMode: 'border',
+      externalLinkAttachPoint: { x: 0, y: 18 },
+      internalLinkAttachPoint: { x: 0, y: -18 },
+    },
+    {
+      id: 'offset-child-port',
+      elementId: 'offset-direction-child',
+      position: { x: 128, y: 46 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      currentAnchorId: 'right',
+      moveMode: 'border',
+      externalLinkAttachPoint: { x: 0, y: 18 },
+      internalLinkAttachPoint: { x: 0, y: -18 },
+    },
+  ],
+  links: [
+    {
+      id: 'offset-sibling-link',
+      sourcePortId: 'offset-sibling-a-port',
+      targetPortId: 'offset-sibling-b-port',
+      points: [],
+      routing: 'auto',
+    },
+    {
+      id: 'offset-parent-child-link',
+      sourcePortId: 'offset-parent-port',
+      targetPortId: 'offset-child-port',
+      points: [],
+      routing: 'auto',
+    },
+    {
+      id: 'offset-child-parent-link',
+      sourcePortId: 'offset-child-port',
+      targetPortId: 'offset-parent-port',
+      points: [],
+      routing: 'auto',
+    },
+  ],
+  texts: [
+    {
+      id: 'offset-anchor-intro',
+      content:
+        'Offset attach anchors now keep endpoint hosts forbidden during auto routing. Inspect that routes exit from projected border sides instead of cutting through the source or target host interior.',
+      position: { x: 40, y: 28 },
+    },
+    {
+      id: 'offset-sibling-label',
+      content: 'Scenario A: sibling children use external attach points offset beyond left/right edges.',
+      position: { x: 52, y: 82 },
+    },
+    {
+      id: 'offset-direction-label',
+      content: 'Scenario B: parent/child links reuse the same offset anchors but resolve internal vs external semantics by direction.',
+      position: { x: 620, y: 82 },
+    },
+    {
+      id: 'offset-sibling-a-text',
+      content: 'Child A\nexternal offset 24',
+      ownerId: 'offset-sibling-a',
+      position: { x: 14, y: -20 },
+    },
+    {
+      id: 'offset-sibling-b-text',
+      content: 'Child B\nexternal offset 24',
+      ownerId: 'offset-sibling-b',
+      position: { x: 14, y: -20 },
+    },
+    {
+      id: 'offset-direction-parent-text',
+      content: 'Parent port\ninternal 18 / external 18',
+      ownerId: 'offset-direction-parent',
+      position: { x: 48, y: -20 },
+    },
+    {
+      id: 'offset-direction-child-text',
+      content: 'Child port\nexternal 18 / internal 18',
+      ownerId: 'offset-direction-child',
+      position: { x: 6, y: -18 },
+    },
+    {
+      id: 'offset-direction-links-text',
+      content: 'Blue links: parent→child and child→parent should keep the host border side semantics even with offset attach coordinates.',
+      position: { x: 620, y: 378 },
+    },
+  ],
+});
+
+const rerouteAllAction: DemoAction = {
+  id: 'offset-reroute-links',
+  label: 'Reroute All Links',
+  run: (editor) => {
+    editor.rerouteAllLinks();
+  },
+};
+
+const shiftTargetsAction: DemoAction = {
+  id: 'offset-shift-targets',
+  label: 'Shift targets + reroute',
+  run: (editor) => {
+    editor.moveElementTo('offset-sibling-b', 320, 96);
+    editor.moveElementTo('offset-direction-child', 74, 96);
+    editor.rerouteAllLinks();
+  },
+};
+
+export const offsetAnchorAvoidanceDemoConfig: DemoConfig = {
+  id: 'offset-anchor-avoidance',
+  title: 'Offset Anchor Avoidance',
+  description: 'Visual QA for projected-boundary-equivalent offset attach anchors that must still keep endpoint host interiors forbidden.',
+  createState: createOffsetAnchorAvoidanceState,
+  elementShapes: offsetAnchorShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [rerouteAllAction, shiftTargetsAction],
+};

package/src/displaybox/demos/routingDemo.ts

@@ -43,11 +43,11 @@ const createRoutingDemoState = (): DiagramState => ({
   ],
 });
 
-export const routingDemoConfig: DemoConfig = ({
-  id: 'routing-demo',
-  title: 'Routing Demo',
-  description: 'Auto routing uses an orthogonal router. Toggle routing to compare.',
-  createState: createRoutingDemoState,
+export const routingDemoConfig: DemoConfig = ({
+  id: 'routing-demo',
+  title: 'Routing Demo',
+  description: 'Auto routing is obstacle-aware. Toggle routing to compare manual vs auto reroute.',
+  createState: createRoutingDemoState,
   elementShapes: baseElementShapes,
   portShapes: basePortShapes,
   defaultElementShapeId: 'default',

package/src/displaybox/demos/shared.ts

@@ -1,7 +1,8 @@
-import type { CSSProperties } from 'react';
-import type { SimpleShape } from '../../api';
-import type { ToolboxItem } from '../types';
-import type { RouterStrategy } from '../../strategies/RouterStrategy';
+import type { CSSProperties } from 'react';
+import type { SimpleShape } from '../../api';
+import type { ToolboxItem } from '../types';
+import type { RouterStrategy } from '../../strategies/RouterStrategy';
+import ObstacleRouter from '../../strategies/ObstacleRouter';
 
 export const baseElementShapes: SimpleShape[] = [
   {
@@ -135,14 +136,18 @@ export const externalToolboxItems: ToolboxItem[] = [
 
 export const defaultGhostSize = { width: 180, height: 120 };
 
-export const defaultSvgPath = 'M10 10 H110 V90 H10 Z';
-export const defaultSvgPathSize = { width: 180, height: 120 };
-
-export const orthogonalRouter: RouterStrategy = {
-  route: (source, target) => {
-    if (Math.abs(source.x - target.x) < 1 || Math.abs(source.y - target.y) < 1) {
-      return [{ ...source }, { ...target }];
-    }
+export const defaultSvgPath = 'M10 10 H110 V90 H10 Z';
+export const defaultSvgPathSize = { width: 180, height: 120 };
+const obstacleAwareRouter = new ObstacleRouter();
+
+export const orthogonalRouter: RouterStrategy = {
+  route: (source, target, context) => {
+    if ((context?.obstacles?.length ?? 0) > 0) {
+      return obstacleAwareRouter.route(source, target, context);
+    }
+    if (Math.abs(source.x - target.x) < 1 || Math.abs(source.y - target.y) < 1) {
+      return [{ ...source }, { ...target }];
+    }
     const midX = Math.round((source.x + target.x) / 2);
     return [
       { ...source },

package/src/displaybox/demos/textDemo.ts

@@ -1,4 +1,4 @@
-import type { DiagramState } from '../../api';
+import type { DiagramState, TextInteractionPolicy } from '../../api';
 import type { DemoConfig } from '../types';
 import { baseElementShapes, basePortShapes } from './shared';
 
@@ -7,6 +7,8 @@ export const textDemoOwnedTextId = 'text-owned-overflow';
 export const textDemoFloatingTextId = 'text-floating-overflow';
 export const textDemoLongSample =
   'Long diagram label: middle ellipsis should keep the beginning and end visible while preserving the full canonical content in model state.';
+export const textDemoOwnedInteraction: TextInteractionPolicy = { movable: false, editable: false };
+export const textDemoFloatingInteraction: TextInteractionPolicy = { movable: true, editable: true };
 
 const createTextOwnershipState = (): DiagramState => ({
   elements: [
@@ -25,6 +27,7 @@ const createTextOwnershipState = (): DiagramState => ({
       content: textDemoLongSample,
       position: { x: 12, y: 12 },
       ownerId: textDemoOwnerId,
+      interaction: textDemoOwnedInteraction,
       layout: {
         boundsMode: 'owner-width',
         wrap: 'none',
@@ -36,6 +39,7 @@ const createTextOwnershipState = (): DiagramState => ({
       id: textDemoFloatingTextId,
       content: textDemoLongSample,
       position: { x: 470, y: 120 },
+      interaction: textDemoFloatingInteraction,
       layout: {
         boundsMode: 'fixed',
         fixedSize: { width: 240, height: 90 },
@@ -52,7 +56,7 @@ export const textDemoConfig: DemoConfig = ({
   id: 'text',
   title: 'Text Layout + Overflow',
   description:
-    'Owner-constrained and fixed-bounds text with wrap and ellipsis behavior. Full content is preserved in model state; truncation is visual-only.',
+    'Owner-constrained and fixed-bounds text with wrap, ellipsis, and per-text interaction behavior. Full content is preserved in model state; truncation is visual-only.',
   createState: createTextOwnershipState,
   elementShapes: baseElementShapes,
   portShapes: basePortShapes,

package/src/displaybox/demos/zoomToFitElementsDemo.ts

@@ -0,0 +1,83 @@
+import type { DiagramState } from '../../api';
+import type { DemoAction, DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const createZoomToFitElementsState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'fit-node-a',
+      position: { x: 40, y: 60 },
+      size: { width: 140, height: 90 },
+      shapeId: 'default',
+      style: { fill: '#eef6ff', stroke: '#1d4ed8', strokeWidth: 2 },
+    },
+    {
+      id: 'fit-node-b',
+      position: { x: 760, y: 120 },
+      size: { width: 170, height: 110 },
+      shapeId: 'panel',
+      style: { fill: '#fef3c7', stroke: '#b45309', strokeWidth: 2 },
+    },
+    {
+      id: 'fit-node-c',
+      position: { x: 140, y: 420 },
+      size: { width: 220, height: 120 },
+      shapeId: 'default',
+      style: { fill: '#ecfdf5', stroke: '#047857', strokeWidth: 2 },
+    },
+    {
+      id: 'fit-node-d',
+      position: { x: 860, y: 430 },
+      size: { width: 150, height: 90 },
+      shapeId: 'default',
+      style: { fill: '#f5f3ff', stroke: '#6d28d9', strokeWidth: 2 },
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'fit-text-intro',
+      content: 'Use actions to spread nodes and run the zoom-to-fit viewport command.',
+      position: { x: 40, y: 24 },
+    },
+  ],
+});
+
+const zoomFitAction: DemoAction = {
+  id: 'fit-zoom-default',
+  label: 'Run Zoom-To-Fit',
+  run: (editor) => {
+    editor.zoomToFitElements();
+  },
+};
+
+const zoomFitPaddingAction: DemoAction = {
+  id: 'fit-zoom-padding',
+  label: 'Run Zoom-To-Fit (Padding 48)',
+  run: (editor) => {
+    editor.zoomToFitElements({ padding: 48 });
+  },
+};
+
+const spreadSceneAction: DemoAction = {
+  id: 'fit-spread-scene',
+  label: 'Spread Scene',
+  run: (editor) => {
+    editor.moveElementTo('fit-node-b', 880, 80);
+    editor.moveElementTo('fit-node-d', 980, 500);
+    editor.moveElementTo('fit-node-c', 80, 520);
+  },
+};
+
+export const zoomToFitElementsDemoConfig: DemoConfig = {
+  id: 'zoom-to-fit-elements',
+  title: 'Zoom To Fit Elements',
+  description: 'Calls a viewport command that zooms and centers so all elements are visible.',
+  createState: createZoomToFitElementsState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [zoomFitAction, zoomFitPaddingAction, spreadSceneAction],
+};

package/src/displaybox/types.ts

@@ -1,6 +1,6 @@
-import type { CSSProperties } from 'react';
-import type { DiagramEditorHandle, DiagramState, SimpleShape } from '../api';
-import type { RouterStrategy } from '../strategies/RouterStrategy';
+import type { CSSProperties } from 'react';
+import type { DiagramEditorHandle, DiagramState, LinkColorPoolPolicy, LinkRouteRefreshPolicy, SimpleShape } from '../api';
+import type { RouterStrategy } from '../strategies/RouterStrategy';
 
 export type DemoActionHelpers = {
   nextOffset: () => number;
@@ -26,11 +26,13 @@ export type DemoConfig = {
   portShapes?: SimpleShape[];
   defaultElementShapeId?: string;
   defaultPortShapeId?: string;
-  router?: RouterStrategy;
-  snapDefault?: boolean;
-  stageStyle?: CSSProperties;
-  actions: DemoAction[];
-};
+  router?: RouterStrategy;
+  snapDefault?: boolean;
+  linkRouteRefreshPolicy?: LinkRouteRefreshPolicy;
+  linkColorPoolPolicy?: LinkColorPoolPolicy;
+  stageStyle?: CSSProperties;
+  actions: DemoAction[];
+};
 
 export type DemoDefinition = {
   id: string;