@lupinum/board-core 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/agent/AGENTS.md

@@ -1,6 +1,6 @@
 # @lupinum/board-core
 
-Documentation for installed version 1.0.0-beta.4.
+Documentation for installed version 1.0.0-beta.5.
 
 Read the relevant local pages before changing this package’s integration.
 Project instructions govern architecture, style and permissions.

package/dist/agent/manifest.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 1,
   "name": "@lupinum/board-core",
-  "version": "1.0.0-beta.4",
-  "entrySha256": "8bb3494aaab14b693dbbb72cd0a9c82627c17e0a4a54d51a359b75942aed8991",
+  "version": "1.0.0-beta.5",
+  "entrySha256": "5185db47994ec97fb0513b0deaf03500d6718650b29fd1fdec62828a5041ffaf",
   "startRoutes": [
     "/docs/start-building/installation",
     "/docs/reference/board-core"
@@ -20,14 +20,14 @@
       "route": "/docs/build-features/connections",
       "url": "https://nuxt-board.lupinum.com/docs/build-features/connections",
       "file": "pages/docs/build-features/connections.md",
-      "sha256": "f28b76bb85f27a3424f2e17cfa0a94382f8f42c37a3f8d4fc88888a2c515b0f7"
+      "sha256": "48dd614db7ff89a12b77229a3a2cc99105ea93dc22d51ec1f0afe4091f56915c"
     },
     {
       "title": "Custom renderers",
       "route": "/docs/build-features/custom-node-renderers",
       "url": "https://nuxt-board.lupinum.com/docs/build-features/custom-node-renderers",
       "file": "pages/docs/build-features/custom-node-renderers.md",
-      "sha256": "5dcf0f3aeabbd8c2e2336ec56b8242d8241aac670674b12eb773cade0a0292f1"
+      "sha256": "1f230989f310cfb34f81c3e70fbf9f791088a39ebd9d64a662fca5765c6bbfbd"
     },
     {
       "title": "Group nodes",
@@ -48,21 +48,21 @@
       "route": "/docs/build-features/read-only-and-command-guards",
       "url": "https://nuxt-board.lupinum.com/docs/build-features/read-only-and-command-guards",
       "file": "pages/docs/build-features/read-only-and-command-guards.md",
-      "sha256": "38c06b1175089a47425ad4cc5e2f31785e934d00cf2dc02e4ef818781074ddbf"
+      "sha256": "31f7cbeeab4d9834a038fe5772f77bdb78f09ba61df24509adb0340543b7f32e"
     },
     {
       "title": "Serialization",
       "route": "/docs/build-features/save-and-load",
       "url": "https://nuxt-board.lupinum.com/docs/build-features/save-and-load",
       "file": "pages/docs/build-features/save-and-load.md",
-      "sha256": "e0a558f4827b1dfa28014a7301f91c9194bf8579d0b24b8409c0670c4bffbc79"
+      "sha256": "bebe29b5302c26dafd4222feff870253104ec5bb646bcfb35507a30776e3d23b"
     },
     {
       "title": "Selection and interaction",
       "route": "/docs/build-features/selection-and-keyboard",
       "url": "https://nuxt-board.lupinum.com/docs/build-features/selection-and-keyboard",
       "file": "pages/docs/build-features/selection-and-keyboard.md",
-      "sha256": "b6e7cc4b87910ab2e955f4159a9a9d2a938bb576282e5142c9bc6f2a9fcd425c"
+      "sha256": "6febe652e964ac50418c48d87f8756ebc6a79e24bf7047278799c97593678700"
     },
     {
       "title": "SSR deterministic scene",
@@ -76,7 +76,7 @@
       "route": "/docs/build-features/theming",
       "url": "https://nuxt-board.lupinum.com/docs/build-features/theming",
       "file": "pages/docs/build-features/theming.md",
-      "sha256": "1809f4e51693340e777b13a24d17be7adeb50e14f1cfbdbba35150bfbbb85a67"
+      "sha256": "3d3dc7021358becae705b668a6ac4b077686de0c14497815337c2827d576f41d"
     },
     {
       "title": "History",
@@ -97,7 +97,7 @@
       "route": "/docs/evaluate/how-nuxt-board-works",
       "url": "https://nuxt-board.lupinum.com/docs/evaluate/how-nuxt-board-works",
       "file": "pages/docs/evaluate/how-nuxt-board-works.md",
-      "sha256": "b7094845c580b764661bf7a12c22e29826e8632f095b76f08b16e5ee244d9a56"
+      "sha256": "ec28824f2269725d759580836fb8c55f090f0a703a6c7e99145b9cb38519dbb2"
     },
     {
       "title": "Why Nuxt Board",
@@ -146,7 +146,7 @@
       "route": "/docs/reference/events-and-errors",
       "url": "https://nuxt-board.lupinum.com/docs/reference/events-and-errors",
       "file": "pages/docs/reference/events-and-errors.md",
-      "sha256": "45be4331a1aba94e1766b07655bcfd315522d7814e70957585bc9646adb119e3"
+      "sha256": "8531df0f5cba6b886be4f66c5eafd6905026e8946ad7725c917084d39a210bec"
     },
     {
       "title": "Glossary",
@@ -202,35 +202,35 @@
       "route": "/docs/solutions/mind-map",
       "url": "https://nuxt-board.lupinum.com/docs/solutions/mind-map",
       "file": "pages/docs/solutions/mind-map.md",
-      "sha256": "5a9eba776aab3fc4492ce181a295e6f45c37eba7dc58fe198398a152f58c2f1a"
+      "sha256": "88e352aac5be758307ec846519ec015b39d7208e5c6bdd91fee552e8e37585f3"
     },
     {
       "title": "Nuxt auto-imports",
       "route": "/docs/solutions/nuxt-application",
       "url": "https://nuxt-board.lupinum.com/docs/solutions/nuxt-application",
       "file": "pages/docs/solutions/nuxt-application.md",
-      "sha256": "0f855165d85ce0da750cb434916a9a0a9114dc8460e632f8afd799edbdb58b38"
+      "sha256": "526f7b4dfb7091d4974648e27b2690dee4d8ee88be4361e9d0ad6c5985e0a396"
     },
     {
       "title": "Planning board",
       "route": "/docs/solutions/planning-board",
       "url": "https://nuxt-board.lupinum.com/docs/solutions/planning-board",
       "file": "pages/docs/solutions/planning-board.md",
-      "sha256": "9033d0a52106920e3a08695ed2b9de53d718ee876bca29d28c7a7463ecfc6a2c"
+      "sha256": "7902e573b4172a5ea80a06ef4cfc9c4a9dac4e0dedaf7de2e761d258c23e770d"
     },
     {
       "title": "Read-only viewer",
       "route": "/docs/solutions/read-only-viewer",
       "url": "https://nuxt-board.lupinum.com/docs/solutions/read-only-viewer",
       "file": "pages/docs/solutions/read-only-viewer.md",
-      "sha256": "a8a8a5a62a420c734ab3e0ead6a0648304d6ddb99ecc73d5cc9a39bcbe88e014"
+      "sha256": "570130be6620eeae29b4ee1ae1cbae0f8928dac86cd125704f27c0d87a98be5d"
     },
     {
       "title": "Workflow renderer demo",
       "route": "/docs/solutions/workflow-builder",
       "url": "https://nuxt-board.lupinum.com/docs/solutions/workflow-builder",
       "file": "pages/docs/solutions/workflow-builder.md",
-      "sha256": "9a16bc300abf99c28514b99119f30c79dec010cedf9e4b8b3b4cf0fac8dac382"
+      "sha256": "ef87574808dbf8b3b1b48b0b17aaa31f6ef1e5017661c9c467980d9faf6f2267"
     },
     {
       "title": "Add connections and history",
@@ -244,7 +244,7 @@
       "route": "/docs/start-building/customize-your-first-node",
       "url": "https://nuxt-board.lupinum.com/docs/start-building/customize-your-first-node",
       "file": "pages/docs/start-building/customize-your-first-node.md",
-      "sha256": "e63461480fc5d41ad4944e17b90484a5d7656fad30211cc745e4de4d229642a2"
+      "sha256": "3afc862f1ed6062906e19b259c2b13e6ee1590ea4358315b60660387fbb48749"
     },
     {
       "title": "Installation",
@@ -272,14 +272,14 @@
       "route": "/docs/understand-the-system/commands-and-transactions",
       "url": "https://nuxt-board.lupinum.com/docs/understand-the-system/commands-and-transactions",
       "file": "pages/docs/understand-the-system/commands-and-transactions.md",
-      "sha256": "c79e309fbeb811bab40eb69fa1703335f42ccf2894c5325e2e54e61a32184da2"
+      "sha256": "941a852cbb3e978e953b7b82287e77f71e3ea5ae85be87a5b9abce65b92bcef8"
     },
     {
       "title": "Document and session state",
       "route": "/docs/understand-the-system/document-and-session-state",
       "url": "https://nuxt-board.lupinum.com/docs/understand-the-system/document-and-session-state",
       "file": "pages/docs/understand-the-system/document-and-session-state.md",
-      "sha256": "0b0c222cd2a5eb47028bbca8071fd199c794716617e3edbb3f15d85d343881f7"
+      "sha256": "990c17cf7c2b02921f23f55575a715c160028e57190ac1895dfd18407f1d7a44"
     },
     {
       "title": "Nodes and hierarchy",
@@ -300,7 +300,7 @@
       "route": "/docs/understand-the-system/persistence-and-json-canvas",
       "url": "https://nuxt-board.lupinum.com/docs/understand-the-system/persistence-and-json-canvas",
       "file": "pages/docs/understand-the-system/persistence-and-json-canvas.md",
-      "sha256": "ca23f4626f0bbe533f3f1299e33e304ba261a9659648006d1473a168ac38eca6"
+      "sha256": "968534fdf9672ee920a6006f3ac3d2b1ca05907f54e3ec9ce47fd59d6f8d628f"
     },
     {
       "title": "Rendering and interaction",

package/dist/agent/pages/docs/build-features/connections.md

@@ -15,8 +15,339 @@ source: "ginko-content"
 
 Connections draw edges between nodes. Install the plugin, create edges, and the connection layer renders them as SVG paths with five routing styles.
 
-> Component omitted: `connections-board-demo`.
-> This page contains an interactive or site-specific block that has no agent markdown serializer yet.
+## Live example source
+
+Use the installation guide to register @lupinum/nuxt-board. These are the actual documentation demo files. Keep their paths under app/. The module auto-imports Board components; install the optional packages named in imports. For the local content components, use components: [{ path: "~/components/content", pathPrefix: false }, "~/components"] in nuxt.config.ts, as this site does, or import them explicitly. createDemoDocument is a local helper, not a package export. DocsLab and the inspector components provide presentation only.
+
+### app/components/demos/ConnectionsBoardDemo.vue
+
+````vue
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { asNodeId, createBoardEngine } from '@lupinum/board-core'
+import { createDemoDocument } from '../../utils/demoDocument'
+import {
+  connectionsPlugin,
+  type ConnectionRouting,
+} from '@lupinum/board-connections'
+import { BoardConnectionLayer } from '@lupinum/board-connections/vue'
+import { historyPlugin } from '@lupinum/board-history'
+import { BoardMinimap } from '@lupinum/vue-board/minimap'
+
+const engine = createBoardEngine({
+  grid: { size: 20, majorEvery: 5, snap: true, pattern: 'dot' },
+  plugins: [historyPlugin(), connectionsPlugin()],
+})
+
+const historyState = computed(() => engine.plugins.history.getState())
+const routing = ref<ConnectionRouting>('bezier')
+const INPUT_ID = asNodeId('input')
+const PARSE_ID = asNodeId('parse')
+const SCORE_ID = asNodeId('score')
+const OUTPUT_ID = asNodeId('output')
+let shuffleStep = 0
+
+function seed() {
+  engine.loadDocument(
+    createDemoDocument({
+      camera: { x: -80, y: -40, z: 1 },
+      grid: engine.getGridSettings(),
+      nodes: [
+        {
+          id: 'input',
+          type: 'text',
+          x: 80,
+          y: 150,
+          width: 180,
+          height: 96,
+          text: 'Collect input',
+          zIndex: 1,
+          locked: false,
+          visible: true,
+        },
+        {
+          id: 'parse',
+          type: 'text',
+          x: 340,
+          y: 80,
+          width: 200,
+          height: 96,
+          text: 'Normalize data',
+          zIndex: 2,
+          locked: false,
+          visible: true,
+        },
+        {
+          id: 'score',
+          type: 'text',
+          x: 340,
+          y: 240,
+          width: 200,
+          height: 96,
+          text: 'Score result',
+          zIndex: 3,
+          locked: false,
+          visible: true,
+        },
+        {
+          id: 'output',
+          type: 'text',
+          x: 650,
+          y: 150,
+          width: 180,
+          height: 96,
+          text: 'Publish output',
+          zIndex: 4,
+          locked: false,
+          visible: true,
+        },
+      ],
+      selection: [],
+      nextZIndex: 5,
+    }),
+    { mode: 'replace' },
+  )
+  const connections = engine.plugins.connections
+  for (const edge of connections.getEdges()) {
+    connections.deleteEdge(edge.id)
+  }
+  connections.createEdge({
+    from: INPUT_ID,
+    to: PARSE_ID,
+    label: 'clean',
+    data: {},
+  })
+  connections.createEdge({
+    from: INPUT_ID,
+    to: SCORE_ID,
+    label: 'rank',
+    data: {},
+  })
+  connections.createEdge({
+    from: PARSE_ID,
+    to: OUTPUT_ID,
+    label: 'emit',
+    data: {},
+  })
+  connections.createEdge({
+    from: SCORE_ID,
+    to: OUTPUT_ID,
+    label: 'merge',
+    data: {},
+  })
+}
+
+function shuffle() {
+  shuffleStep = (shuffleStep + 1) % 3
+  engine.updateNode(PARSE_ID, {
+    x: 320 + shuffleStep * 28,
+    y: 60 + shuffleStep * 22,
+  })
+  engine.updateNode(SCORE_ID, {
+    x: 360 - shuffleStep * 20,
+    y: 220 + shuffleStep * 18,
+  })
+  engine.updateNode(OUTPUT_ID, {
+    x: 620 + shuffleStep * 26,
+    y: 120 + shuffleStep * 24,
+  })
+}
+
+onMounted(async () => {
+  seed()
+  await engine.zoomToFit(84, false)
+})
+</script>
+
+<template>
+  <div class="demo-frame">
+    <div class="demo-toolbar">
+      <button class="demo-danger" @click="seed">Reset</button>
+      <button @click="shuffle">Shuffle</button>
+      <span class="demo-toggle-group">
+        <button
+          :class="{ active: routing === 'bezier' }"
+          @click="routing = 'bezier'"
+        >
+          Bezier
+        </button>
+        <button
+          :class="{ active: routing === 'smooth-step' }"
+          @click="routing = 'smooth-step'"
+        >
+          Smooth
+        </button>
+        <button
+          :class="{ active: routing === 'step' }"
+          @click="routing = 'step'"
+        >
+          Step
+        </button>
+        <button
+          :class="{ active: routing === 'straight' }"
+          @click="routing = 'straight'"
+        >
+          Straight
+        </button>
+      </span>
+      <button
+        :disabled="!engine.plugins.history.canUndo()"
+        @click="engine.plugins.history.undo()"
+      >
+        Undo
+      </button>
+      <button
+        :disabled="!engine.plugins.history.canRedo()"
+        @click="engine.plugins.history.redo()"
+      >
+        Redo
+      </button>
+      <span class="demo-history-badge ml-auto"
+        >{{ historyState.undoDepth }} undo /
+        {{ historyState.redoDepth }} redo</span
+      >
+    </div>
+
+    <div class="relative">
+      <BoardRoot :engine="engine" style="height: 360px">
+        <BoardConnectionLayer :routing="routing" />
+      </BoardRoot>
+      <div
+        class="absolute right-4 bottom-4 rounded-md border border-default bg-elevated/90 p-2 shadow-lg backdrop-blur"
+      >
+        <BoardMinimap :engine="engine" :width="180" :height="110" />
+      </div>
+    </div>
+  </div>
+</template>
+````
+
+### app/utils/demoDocument.ts
+
+````ts
+import type {
+  BoardNode,
+  BoardNodeMetadata,
+  Camera,
+  GridSettings,
+  JsonCanvasDocument,
+  JsonCanvasNode,
+  NodeId,
+} from '@lupinum/board-core'
+
+type DemoNode = Omit<
+  Pick<
+    BoardNode,
+    | 'id'
+    | 'type'
+    | 'x'
+    | 'y'
+    | 'width'
+    | 'height'
+    | 'color'
+    | 'text'
+    | 'file'
+    | 'subpath'
+    | 'url'
+    | 'label'
+    | 'background'
+    | 'backgroundStyle'
+    | 'zIndex'
+    | 'locked'
+    | 'visible'
+    | 'parentId'
+  >,
+  'id' | 'parentId'
+> & {
+  id: NodeId | string
+  parentId?: NodeId | string
+}
+
+export interface DemoDocumentInput {
+  nodes: readonly DemoNode[]
+  camera?: Camera
+  grid?: GridSettings
+  selection?: readonly (NodeId | string)[]
+  nextZIndex?: number
+}
+
+function toJsonCanvasNode(node: DemoNode): JsonCanvasNode {
+  const base = {
+    id: node.id as NodeId,
+    type: node.type,
+    x: node.x,
+    y: node.y,
+    width: node.width,
+    height: node.height,
+    ...(node.color ? { color: node.color } : {}),
+  }
+
+  switch (node.type) {
+    case 'file':
+      return {
+        ...base,
+        type: 'file',
+        file: node.file ?? '',
+        ...(node.subpath ? { subpath: node.subpath } : {}),
+      }
+    case 'link':
+      return {
+        ...base,
+        type: 'link',
+        url: node.url ?? '',
+      }
+    case 'group':
+      return {
+        ...base,
+        type: 'group',
+        ...((node.label ?? node.text)
+          ? { label: node.label ?? node.text }
+          : {}),
+        ...(node.background ? { background: node.background } : {}),
+        ...(node.backgroundStyle
+          ? { backgroundStyle: node.backgroundStyle }
+          : {}),
+      }
+    case 'text':
+    default:
+      return {
+        ...base,
+        type: 'text',
+        text: node.text ?? '',
+      }
+  }
+}
+
+function toNodeMetadata(node: DemoNode): BoardNodeMetadata {
+  return {
+    zIndex: node.zIndex,
+    locked: node.locked,
+    visible: node.visible,
+    ...(node.parentId ? { parentId: node.parentId as NodeId } : {}),
+  }
+}
+
+export function createDemoDocument(
+  input: DemoDocumentInput,
+): JsonCanvasDocument {
+  return {
+    nodes: input.nodes.map(toJsonCanvasNode),
+    'x-lupinum-board': {
+      ...(input.camera ? { camera: input.camera } : {}),
+      ...(input.grid ? { grid: input.grid } : {}),
+      ...(input.selection
+        ? { selection: input.selection.map((id) => id as NodeId) }
+        : {}),
+      nextZIndex:
+        input.nextZIndex ??
+        input.nodes.reduce((max, node) => Math.max(max, node.zIndex), 0) + 1,
+      nodes: Object.fromEntries(
+        input.nodes.map((node) => [node.id, toNodeMetadata(node)]),
+      ),
+    },
+  }
+}
+````
 
 ## Setup