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

package/dist/agent/pages/docs/solutions/mind-map.md

@@ -13,8 +13,454 @@ source: "ginko-content"
 
 > Spatial topic hierarchy with connections, custom renderers, and branch-from-selection.
 
-> Component omitted: `mind-map-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/MindMapDemo.vue
+
+````vue
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { asNodeId, createBoardEngine, type NodeId } from '@lupinum/board-core'
+import { createDemoDocument } from '../../utils/demoDocument'
+import { connectionsPlugin } from '@lupinum/board-connections'
+import { BoardConnectionLayer } from '@lupinum/board-connections/vue'
+import { historyPlugin } from '@lupinum/board-history'
+import MindMapTopicNode from './MindMapTopicNode.vue'
+
+const engine = createBoardEngine({
+  grid: { size: 20, majorEvery: 5, snap: true, pattern: 'dot' },
+  plugins: [historyPlugin(), connectionsPlugin({ routing: 'bezier' })],
+})
+
+const selection = ref<NodeId[]>([])
+const edgesVersion = ref(0)
+const historyState = ref(engine.plugins.history.getState())
+const ROOT_ID = asNodeId('root')
+const ENG_ID = asNodeId('eng')
+const DESIGN_ID = asNodeId('design')
+const GROWTH_ID = asNodeId('growth')
+const API_ID = asNodeId('api')
+
+function syncHistoryState() {
+  historyState.value = engine.plugins.history.getState()
+}
+
+function refreshEdges() {
+  edgesVersion.value++
+}
+
+const unsubscribeEngine = [
+  engine.on('selection:change', (next) => {
+    selection.value = next
+  }),
+  engine.on('edge:created', refreshEdges),
+  engine.on('edge:updated', refreshEdges),
+  engine.on('edge:deleted', refreshEdges),
+  engine.on('history:push', syncHistoryState),
+  engine.on('history:undo', syncHistoryState),
+  engine.on('history:redo', syncHistoryState),
+  engine.on('history:clear', syncHistoryState),
+]
+
+const topicDepthsById = computed(() => {
+  void edgesVersion.value
+  const depths = new Map<NodeId, number>([[ROOT_ID, 0]])
+  const queue = [ROOT_ID]
+
+  while (queue.length > 0) {
+    const current = queue.shift()!
+    const depth = depths.get(current) ?? 0
+    for (const edge of engine.plugins.connections.getEdgesFrom(current)) {
+      if (depths.has(edge.to)) {
+        continue
+      }
+      depths.set(edge.to, depth + 1)
+      queue.push(edge.to)
+    }
+  }
+
+  return depths
+})
+
+function seed() {
+  engine.loadDocument(
+    createDemoDocument({
+      camera: { x: -60, y: -40, z: 1 },
+      grid: engine.getGridSettings(),
+      selection: [],
+      nextZIndex: 6,
+      nodes: [
+        {
+          id: ROOT_ID,
+          type: 'text',
+          x: 300,
+          y: 160,
+          width: 220,
+          height: 110,
+          text: 'Product roadmap\nQ3 priorities',
+          zIndex: 1,
+          locked: false,
+          visible: true,
+        },
+        {
+          id: ENG_ID,
+          type: 'text',
+          x: 40,
+          y: 40,
+          width: 200,
+          height: 100,
+          text: 'Engineering\nAPI, canvas, exports',
+          zIndex: 2,
+          locked: false,
+          visible: true,
+        },
+        {
+          id: DESIGN_ID,
+          type: 'text',
+          x: 40,
+          y: 290,
+          width: 200,
+          height: 100,
+          text: 'Design\nInteraction polish',
+          zIndex: 3,
+          locked: false,
+          visible: true,
+        },
+        {
+          id: GROWTH_ID,
+          type: 'text',
+          x: 610,
+          y: 40,
+          width: 200,
+          height: 100,
+          text: 'Growth\nActivation paths',
+          zIndex: 4,
+          locked: false,
+          visible: true,
+        },
+        {
+          id: API_ID,
+          type: 'text',
+          x: 610,
+          y: 290,
+          width: 200,
+          height: 90,
+          text: 'Public API\nKeep it boring',
+          zIndex: 5,
+          locked: false,
+          visible: true,
+        },
+      ],
+    }),
+    { mode: 'replace' },
+  )
+
+  const conn = engine.plugins.connections
+  for (const edge of conn.getEdges()) conn.deleteEdge(edge.id)
+  conn.createEdge({ from: ROOT_ID, to: ENG_ID, data: {} })
+  conn.createEdge({ from: ROOT_ID, to: DESIGN_ID, data: {} })
+  conn.createEdge({ from: ROOT_ID, to: GROWTH_ID, data: {} })
+  conn.createEdge({ from: ENG_ID, to: API_ID, data: {} })
+  engine.plugins.history.clear()
+  refreshEdges()
+  syncHistoryState()
+}
+
+let branchCount = 0
+function addBranch() {
+  branchCount++
+  const selected = selection.value[0]
+  const parent = selected ?? ROOT_ID
+  const parentNode = engine.getNode(parent)
+  if (!parentNode) return
+
+  const newNode = engine.createNode({
+    type: 'text',
+    x: parentNode.x + 260 + (branchCount % 2) * 32,
+    y: parentNode.y + ((branchCount % 3) - 1) * 60,
+    width: 200,
+    height: 90,
+    text: `New topic ${branchCount}`,
+    select: true,
+  })
+  engine.plugins.connections.createEdge({
+    from: parent,
+    to: newNode.id,
+    data: {},
+  })
+}
+
+onMounted(async () => {
+  seed()
+  await engine.zoomToFit(72, false)
+})
+
+onBeforeUnmount(() => {
+  for (const unsubscribe of unsubscribeEngine) {
+    unsubscribe()
+  }
+})
+</script>
+
+<template>
+  <div class="demo-frame">
+    <div class="demo-toolbar">
+      <button class="demo-danger" @click="seed">Reset</button>
+      <button class="demo-primary" @click="addBranch">Add branch</button>
+      <button @click="engine.zoomToFit(72, false)">Zoom to fit</button>
+      <button
+        :disabled="historyState.undoDepth === 0"
+        @click="engine.plugins.history.undo()"
+      >
+        Undo
+      </button>
+      <button
+        :disabled="historyState.redoDepth === 0"
+        @click="engine.plugins.history.redo()"
+      >
+        Redo
+      </button>
+      <span class="demo-toolbar-note ml-auto"
+        >Select a topic, then add a branch from it.</span
+      >
+    </div>
+
+    <BoardRoot :engine="engine" style="height: 420px">
+      <template #node:text="{ node, selected }">
+        <MindMapTopicNode
+          :node="node"
+          :selected="selected"
+          :depth="topicDepthsById.get(node.id) ?? 2"
+        />
+      </template>
+      <BoardConnectionLayer routing="bezier" />
+    </BoardRoot>
+  </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)]),
+      ),
+    },
+  }
+}
+````
+
+### app/components/demos/MindMapTopicNode.vue
+
+````vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { BoardNode } from '@lupinum/board-core'
+
+const props = defineProps<{
+  node: BoardNode
+  selected: boolean
+  depth: number
+}>()
+
+const data = computed(() => {
+  const [title = 'Topic', detail = ''] = props.node.text?.split('\n') ?? []
+  return { title, detail }
+})
+const depth = computed(() => props.depth)
+
+const style = computed(() => {
+  if (depth.value === 0) {
+    return {
+      surface: `linear-gradient(135deg,
+        color-mix(in srgb, #14b8a6 16%, white),
+        color-mix(in srgb, #14b8a6 4%, white) 55%,
+        color-mix(in srgb, #14b8a6 12%, white))`,
+      glow: 'inset 0 1px 0 0 rgba(20,184,166,0.20), 0 14px 48px rgba(15,23,42,0.08), 0 1px 3px rgba(20,184,166,0.08)',
+      border: '#14b8a6',
+      text: 'text-teal-950',
+      label: 'ROOT',
+      labelColor: 'text-teal-600',
+    }
+  }
+  if (depth.value === 1) {
+    return {
+      surface: `linear-gradient(135deg,
+        color-mix(in srgb, #0ea5e9 14%, white),
+        color-mix(in srgb, #0ea5e9 3%, white) 55%,
+        color-mix(in srgb, #0ea5e9 10%, white))`,
+      glow: 'inset 0 1px 0 0 rgba(14,165,233,0.18), 0 14px 48px rgba(15,23,42,0.07), 0 1px 3px rgba(14,165,233,0.08)',
+      border: '#0ea5e9',
+      text: 'text-sky-950',
+      label: 'BRANCH',
+      labelColor: 'text-sky-500',
+    }
+  }
+  return {
+    surface: `linear-gradient(135deg,
+      color-mix(in srgb, #94a3b8 10%, white),
+      white 55%,
+      color-mix(in srgb, #94a3b8 6%, white))`,
+    glow: 'inset 0 1px 0 0 rgba(148,163,184,0.14), 0 10px 36px rgba(15,23,42,0.05)',
+    border: '#94a3b8',
+    text: 'text-default',
+    label: 'LEAF',
+    labelColor: 'text-dimmed',
+  }
+})
+</script>
+
+<template>
+  <div
+    class="h-full rounded-md border p-4"
+    :class="[selected ? 'ring-2 ring-primary' : 'border-default']"
+    :style="{
+      borderLeft: `4px solid ${style.border}`,
+      background: style.surface,
+      boxShadow: style.glow,
+    }"
+  >
+    <div class="flex h-full flex-col justify-between gap-2">
+      <span
+        class="flex items-center gap-1.5 text-[0.6rem] font-semibold uppercase tracking-[0.28em]"
+        :class="style.labelColor"
+      >
+        <span
+          class="inline-block size-1.5 rounded-full"
+          :style="{ background: style.border }"
+        ></span>
+        {{ style.label }}
+      </span>
+      <div>
+        <h3 class="text-base font-semibold tracking-tight" :class="style.text">
+          {{ data.title }}
+        </h3>
+        <p v-if="data.detail" class="mt-1.5 text-sm leading-5 text-dimmed">
+          {{ data.detail }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+````
 
 ## What happens
 

package/dist/agent/pages/docs/solutions/nuxt-application.md

@@ -13,8 +13,220 @@ source: "ginko-content"
 
 > Use board components and composables without manual imports via the Nuxt module.
 
-> Component omitted: `nuxt-auto-imports-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/NuxtAutoImportsDemo.vue
+
+````vue
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { createBoardEngine, createDemoDocument } from '#imports'
+
+// The generated #imports entry verifies the helpers are registered by @lupinum/nuxt-board.
+const engine = createBoardEngine({
+  grid: { size: 20, majorEvery: 5, snap: true, pattern: 'dot' },
+})
+
+function seed() {
+  engine.loadDocument(
+    createDemoDocument({
+      camera: { x: 0, y: 0, z: 1 },
+      grid: engine.getGridSettings(),
+      nodes: [
+        {
+          id: 'nuxt',
+          type: 'text',
+          x: 100,
+          y: 100,
+          width: 240,
+          height: 100,
+          text: 'Node',
+          zIndex: 1,
+          locked: false,
+          visible: true,
+        },
+        {
+          id: 'board',
+          type: 'text',
+          x: 420,
+          y: 180,
+          width: 240,
+          height: 100,
+          text: 'Node',
+          zIndex: 2,
+          locked: false,
+          visible: true,
+        },
+      ],
+      selection: [],
+      nextZIndex: 3,
+    }),
+    { mode: 'replace' },
+  )
+}
+
+seed()
+
+onMounted(async () => {
+  await engine.zoomToFit(84, false)
+})
+</script>
+
+<template>
+  <div class="demo-frame">
+    <div class="demo-toolbar">
+      <button class="demo-danger" @click="seed">Reset</button>
+      <button
+        class="demo-primary"
+        @click="
+          engine.createNode({
+            type: 'text',
+            x: 260,
+            y: 80,
+            width: 220,
+            height: 100,
+            text: 'Node',
+          })
+        "
+      >
+        Add node
+      </button>
+      <button @click="engine.zoomToFit(84, false)">Zoom to fit</button>
+    </div>
+
+    <BoardRoot :engine="engine" style="height: 320px" />
+  </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)]),
+      ),
+    },
+  }
+}
+````
 
 ## What happens