@lupinum/vue-board 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-present Lupinum OG and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+<p align="center"><img src="https://raw.githubusercontent.com/lupinum-dev/nuxt-board/main/docs/public/app-icon.svg" width="128" alt="Nuxt Board icon"></p>
+
+<h1 align="center">@lupinum/vue-board</h1>
+
+<p align="center">Render a board engine with native Vue components and composables.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@lupinum/vue-board"><img src="https://img.shields.io/npm/v/@lupinum/vue-board?label=npm" alt="npm version"></a>
+  <a href="https://github.com/lupinum-dev/nuxt-board/actions/workflows/ci.yml"><img src="https://github.com/lupinum-dev/nuxt-board/actions/workflows/ci.yml/badge.svg" alt="CI status"></a>
+  <a href="https://github.com/lupinum-dev/nuxt-board/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT license"></a>
+</p>
+
+> [!WARNING]
+> This package has not reached a stable release. Review the changelog before each upgrade.
+
+## Purpose
+
+Use this package to render `@lupinum/board-core` state and handle pointer, keyboard, selection, camera, and node interactions in Vue.
+
+## Requirements
+
+This package requires Vue 3.5 or newer. Install the matching `@lupinum/board-core` version.
+
+## Installation
+
+```bash
+pnpm add @lupinum/board-core @lupinum/vue-board
+```
+
+## Quick start
+
+```vue
+<script setup lang="ts">
+import { createBoardEngine } from '@lupinum/board-core'
+import { BoardRoot } from '@lupinum/vue-board'
+import '@lupinum/vue-board/style.css'
+
+const engine = createBoardEngine()
+engine.createNode({ type: 'text', x: 80, y: 80, text: 'Node' })
+</script>
+
+<template>
+  <BoardRoot :engine="engine" style="height: 100vh" />
+</template>
+```
+
+## Exports
+
+The package exports the board components and composables. Keep the engine instance stable after mount. Use an engine command such as `loadDocument` to replace board content.
+
+## Documentation
+
+Read the [Vue package reference](https://nuxt-board.lupinum.com/docs/reference/vue-board).
+
+## Support and security
+
+Open a [GitHub issue](https://github.com/lupinum-dev/nuxt-board/issues) for support. Report vulnerabilities through the [private security process](https://github.com/lupinum-dev/nuxt-board/security/policy).
+
+## License
+
+This package uses the [MIT License](https://github.com/lupinum-dev/nuxt-board/blob/main/LICENSE).

package/dist/components/BoardBoxSelect.d.vue.ts

@@ -0,0 +1,16 @@
+declare var __VLS_1: {
+    bounds: import("@lupinum/board-core").Bounds;
+    mode: import("@lupinum/board-core").BoxSelectMode;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BoardGrid.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BoardNode.d.vue.ts

@@ -0,0 +1,35 @@
+import type { BoardNode, ResizeHandle } from '@lupinum/board-core';
+type __VLS_Props = {
+    node: BoardNode;
+    selected: boolean;
+    editing: boolean;
+    /** Pass true when a real custom renderer or slot is provided by the parent. */
+    customRenderer?: boolean;
+};
+declare function beginTextEdit(): void;
+declare function commitTextEdit(text: string): void;
+declare var __VLS_1: {
+    node: BoardNode;
+    selected: boolean;
+    editing: boolean;
+    beginEdit: typeof beginTextEdit;
+    commitText: typeof commitTextEdit;
+}, __VLS_3: {
+    key: ResizeHandle;
+    node: BoardNode;
+    handle: ResizeHandle;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    handle?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BoardNodeHandle.d.vue.ts

@@ -0,0 +1,8 @@
+import type { NodeId, ResizeHandle } from '@lupinum/board-core';
+type __VLS_Props = {
+    handle: ResizeHandle;
+    nodeId?: NodeId;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BoardRoot.d.vue.ts

@@ -0,0 +1,139 @@
+import { type Component, type PropType } from 'vue';
+import { type BoardState, type Camera, type BoardEngine, type GridSettings, type BoardNode as BoardNodeState, type InteractionState, type NodeId } from '@lupinum/board-core';
+import { type BoardGridOptions, type BoardRendererRegistry } from '../grid.js';
+declare var __VLS_12: {
+    engine: BoardEngine<import("@lupinum/board-core").BoardPluginApis, {}>;
+    state: BoardState;
+}, __VLS_22: "node:text" | "node:file" | "node:link" | "node:group", __VLS_23: {
+    node: BoardNodeState;
+    selected: boolean;
+    editing: boolean;
+    beginEdit: () => void;
+    commitText: (text: string) => void;
+}, __VLS_25: {
+    node: BoardNodeState;
+    selected: boolean;
+    editing: boolean;
+    beginEdit: () => void;
+    commitText: (text: string) => void;
+}, __VLS_33: {
+    key: import("@lupinum/board-core").ResizeHandle;
+    node: BoardNodeState;
+    handle: import("@lupinum/board-core").ResizeHandle;
+}, __VLS_52: {
+    bounds: import("@lupinum/board-core").Bounds;
+    mode: import("@lupinum/board-core").BoxSelectMode;
+}, __VLS_54: {
+    engine: BoardEngine<import("@lupinum/board-core").BoardPluginApis, {}>;
+    state: BoardState;
+    debugState: {
+        state: BoardState;
+        camera: Camera;
+        grid: GridSettings;
+        selection: NodeId[];
+        interaction: InteractionState;
+        visibleNodeCount: number;
+        trace: import("@lupinum/board-core").TraceEntry[];
+    };
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_22>]?: (props: typeof __VLS_23) => any;
+} & {
+    viewport?: (props: typeof __VLS_12) => any;
+} & {
+    node?: (props: typeof __VLS_25) => any;
+} & {
+    handle?: (props: typeof __VLS_33) => any;
+} & {
+    'box-select'?: (props: typeof __VLS_52) => any;
+} & {
+    default?: (props: typeof __VLS_54) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    engine: {
+        type: PropType<BoardEngine | undefined>;
+        default: undefined;
+    };
+    cullMargin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    grid: {
+        type: PropType<boolean | BoardGridOptions>;
+        default: boolean;
+    };
+    selectionToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    snapGuides: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    boxSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    renderers: {
+        type: PropType<BoardRendererRegistry>;
+        default: () => {};
+    };
+    fallbackRenderer: {
+        type: PropType<Component | null>;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (engine: BoardEngine<import("@lupinum/board-core").BoardPluginApis, {}>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    engine: {
+        type: PropType<BoardEngine | undefined>;
+        default: undefined;
+    };
+    cullMargin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    grid: {
+        type: PropType<boolean | BoardGridOptions>;
+        default: boolean;
+    };
+    selectionToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    snapGuides: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    boxSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    renderers: {
+        type: PropType<BoardRendererRegistry>;
+        default: () => {};
+    };
+    fallbackRenderer: {
+        type: PropType<Component | null>;
+        default: null;
+    };
+}>> & Readonly<{
+    onReady?: ((engine: BoardEngine<import("@lupinum/board-core").BoardPluginApis, {}>) => any) | undefined;
+}>, {
+    engine: BoardEngine<import("@lupinum/board-core").BoardPluginApis, {}> | undefined;
+    grid: boolean | BoardGridOptions;
+    cullMargin: number;
+    selectionToolbar: boolean;
+    snapGuides: boolean;
+    boxSelect: boolean;
+    renderers: Partial<Readonly<Record<import("@lupinum/board-core").JsonCanvasNodeType, Component>>>;
+    fallbackRenderer: Component | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BoardSelectionToolbar.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BoardSnapGuides.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BoardViewport.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables/runBoardCommand.d.ts

@@ -0,0 +1,3 @@
+/** Run a bundled UI command while treating policy blocks as handled input. */
+export declare function runBoardCommand<T>(fn: () => T): T | undefined;
+export declare function tryBoardCommand(fn: () => void): boolean;

package/dist/composables/useKeyboardShortcuts.d.ts

@@ -0,0 +1,20 @@
+import { type Ref } from 'vue';
+import type { BoardEngine, GridSettings } from '@lupinum/board-core';
+/** Options for wiring keyboard shortcuts to a board engine instance. */
+interface UseKeyboardShortcutsOptions {
+    engine: BoardEngine;
+    grid: Ref<GridSettings>;
+    rootElement: Ref<HTMLElement | null>;
+    spacePressed: Ref<boolean>;
+}
+/**
+ * Provide the keyboard handlers used by `BoardRoot`.
+ *
+ * Shortcuts cover selection, clipboard commands, history, zoom presets, and
+ * keyboard nudging while intentionally ignoring editable targets.
+ */
+export declare function useKeyboardShortcuts(options: UseKeyboardShortcutsOptions): {
+    onKeyDown: (event: KeyboardEvent) => void;
+    onKeyUp: (event: KeyboardEvent) => void;
+};
+export {};

package/dist/composables/useLodCulling.d.ts

@@ -0,0 +1,20 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { BoardEngine, BoardNode as BoardNodeState, Camera, NodeId, Point } from '@lupinum/board-core';
+/** Level-of-detail mode used by `BoardRoot` node renderers. */
+export type NodeLod = 'full' | 'simple' | 'hidden';
+/** Node record annotated with the level-of-detail chosen for the current viewport. */
+export type LodNode = BoardNodeState & {
+    lod: NodeLod;
+};
+/** Inputs required to compute viewport culling and node LOD. */
+interface UseLodCullingOptions {
+    engine: BoardEngine;
+    nodes: Ref<ReadonlyMap<NodeId, BoardNodeState>>;
+    camera: Ref<Camera>;
+    selectionSet: Ref<ReadonlySet<NodeId>>;
+    viewportSize: Ref<Point>;
+    cullMargin: Ref<number>;
+}
+/** Compute the nodes that should render along with the LOD chosen for each one. */
+export declare function useLodCulling(options: UseLodCullingOptions): ComputedRef<LodNode[]>;
+export {};

package/dist/composables/usePointerInteraction.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from 'vue';
+import { type BoardEngine, type Point } from '@lupinum/board-core';
+/** Options for translating DOM pointer events into board-engine commands. */
+interface UsePointerInteractionOptions {
+    engine: BoardEngine;
+    rootElement: Ref<HTMLElement | null>;
+    spacePressed: Ref<boolean>;
+    toLocalPoint: (clientX: number, clientY: number) => Point;
+}
+/**
+ * Translate pointer input from `BoardRoot` into engine commands.
+ *
+ * This composable owns drag thresholds, pinch zoom, deferred interactions,
+ * and the mapping from DOM targets to node drag / resize / selection flows.
+ */
+export declare function usePointerInteraction(options: UsePointerInteractionOptions): {
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onPointerCancel: (event: PointerEvent) => void;
+    onWheel: (event: WheelEvent) => void;
+    onDoubleClick: (event: MouseEvent) => void;
+};
+export {};

package/dist/composables/useResolvedGrid.d.ts

@@ -0,0 +1,14 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { GridSettings } from '@lupinum/board-core';
+import { type BoardGridOptions, type ResolvedBoardGridOptions } from '../grid.js';
+/** Inputs used to merge the `BoardRoot` grid prop with engine grid state. */
+interface UseResolvedGridOptions {
+    grid: Ref<GridSettings>;
+    gridProp: Ref<boolean | BoardGridOptions>;
+}
+/**
+ * Resolve the effective grid configuration for rendering and keep the engine
+ * grid state in sync with explicit prop overrides.
+ */
+export declare function useResolvedGrid(options: UseResolvedGridOptions): ComputedRef<ResolvedBoardGridOptions>;
+export {};

package/dist/composables/useViewportSize.d.ts

@@ -0,0 +1,19 @@
+import { type Ref } from 'vue';
+import type { BoardEngine, Point } from '@lupinum/board-core';
+/** Inputs for tracking the rendered board viewport size. */
+interface UseViewportSizeOptions {
+    rootElement: Ref<HTMLElement | null>;
+    engine: BoardEngine;
+}
+/** Observe the root element size and mirror it into the engine viewport state. */
+export declare function useViewportSize(options: UseViewportSizeOptions): {
+    viewportSize: Ref<{
+        x: number;
+        y: number;
+    }, Point | {
+        x: number;
+        y: number;
+    }>;
+    updateViewportSize: () => void;
+};
+export {};

package/dist/context.d.ts

@@ -0,0 +1,18 @@
+import type { Camera, BoardEngine, BoardNode, GridSettings, InteractionState, NodeId, Point, SnapGuide } from '@lupinum/board-core';
+import type { ComputedRef, InjectionKey, Ref, ShallowRef } from 'vue';
+import type { BoardRendererRegistry, ResolvedBoardGridOptions } from './grid.js';
+export interface BoardEngineContext {
+    engine: BoardEngine;
+    rootElement: Readonly<Ref<HTMLElement | null>>;
+    viewportSize: Readonly<Ref<Point>>;
+    renderers: Readonly<ShallowRef<Readonly<BoardRendererRegistry>>>;
+    resolvedGrid: ComputedRef<ResolvedBoardGridOptions>;
+    toLocalPoint: (clientX: number, clientY: number) => Point;
+    $camera: Readonly<ShallowRef<Camera>>;
+    $grid: Readonly<ShallowRef<GridSettings>>;
+    $nodes: Readonly<ShallowRef<ReadonlyMap<NodeId, BoardNode>>>;
+    $selection: Readonly<ShallowRef<ReadonlySet<NodeId>>>;
+    $interaction: Readonly<ShallowRef<InteractionState>>;
+    $snapGuides: Readonly<ShallowRef<readonly SnapGuide[]>>;
+}
+export declare const boardEngineKey: InjectionKey<BoardEngineContext>;

package/dist/eventTargets.d.ts

@@ -0,0 +1,4 @@
+/** Whether a bubbled DOM event belongs to this board rather than a nested root. */
+export declare function isEventOwnedByBoardRoot(target: EventTarget | null, root: HTMLElement | null): boolean;
+/** Whether an embedded editor or screen-space control owns the event. */
+export declare function isBoardInteractiveEventTarget(target: EventTarget | null): boolean;

package/dist/grid.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from 'vue';
+import type { GridPattern, JsonCanvasNodeType } from '@lupinum/board-core';
+export interface BoardGridOptions {
+    visible?: boolean;
+    minorOpacity?: number;
+    majorOpacity?: number;
+    fadeEdges?: boolean;
+}
+export interface ResolvedBoardGridOptions {
+    visible: boolean;
+    size: number;
+    majorEvery: number;
+    snap: boolean;
+    edgeSnap: boolean;
+    edgeSnapThreshold: number;
+    pattern: GridPattern;
+    minorOpacity: number;
+    majorOpacity: number;
+    fadeEdges: boolean;
+}
+export type BoardRendererRegistry = Partial<Readonly<Record<JsonCanvasNodeType, Component>>>;
+export declare const DEFAULT_BOARD_GRID_OPTIONS: Pick<ResolvedBoardGridOptions, 'visible' | 'minorOpacity' | 'majorOpacity' | 'fadeEdges'>;

package/dist/index.css

@@ -0,0 +1 @@
+:root{--board-bg: #fbfbfd;--board-bg-elevated: #ffffff;--board-bg-subtle: #f3f4f9;--board-canvas-bg: #f5f6fa;--board-fg: #14161f;--board-muted-fg: #5b6075;--board-dim-fg: #8b90a7;--board-border: #e4e5ee;--board-border-strong: #c9cbdb;--board-divider: rgba(20, 22, 31, .08);--board-grid-minor-rgb: 131 134 160;--board-grid-major-rgb: 91 96 117;--board-grid-dot: rgba(131, 134, 160, .32);--board-grid-dot-major: rgba(131, 134, 160, .55);--board-accent: #6366e8;--board-accent-fg: #ffffff;--board-accent-ring: rgba(99, 102, 232, .35);--board-accent-soft: rgba(99, 102, 232, .12);--board-node-bg: #ffffff;--board-node-border: #e4e5ee;--board-node-border-hover: #c9cbdb;--board-node-radius: 10px;--board-node-shadow: 0 .5px 1px .5px rgba(9, 14, 28, .08);--board-node-shadow-hover: 0 .5px 1px .5px rgba(9, 14, 28, .08), 0 2px 8px -2px rgba(9, 14, 28, .12);--board-node-shadow-selected: 0 .5px 1px .5px rgba(9, 14, 28, .08);--board-node-shadow-drag: 0 10px 30px -8px rgba(9, 14, 28, .22);--board-group-bg: rgba(99, 102, 232, .05);--board-group-border: rgba(99, 102, 232, .26);--board-group-label-fg: #ffffff;--board-group-radius: 16px;--board-node-ring: rgba(99, 102, 232, .42);--board-node-selection: #6366e8;--board-edge-color: rgba(91, 96, 117, .72);--board-edge-active-color: #6366e8;--board-snap-guide-color: rgba(99, 102, 232, .95);--board-box-select-fill: rgba(99, 102, 232, .1);--board-box-select-stroke: rgba(99, 102, 232, .6);--board-node-handle-bg: #ffffff;--board-node-handle-dot: rgba(131, 134, 160, .72);--board-handle-shadow: rgba(9, 14, 28, .1);--board-radius-xs: 4px;--board-radius-sm: 8px;--board-radius-md: 10px;--board-radius-lg: 16px;--board-preset-1: #e5476a;--board-preset-2: #d97a1c;--board-preset-3: #b89a14;--board-preset-4: #2fa560;--board-preset-5: #3b7de0;--board-preset-6: #7e5ae4}:root[data-theme=dark]{--board-bg: #151922;--board-bg-elevated: #202633;--board-bg-subtle: #1a1f2a;--board-canvas-bg: #171b24;--board-fg: #ecedf3;--board-muted-fg: #adb3c7;--board-dim-fg: #7f879f;--board-border: #303646;--board-border-strong: #454d61;--board-divider: rgba(236, 237, 243, .08);--board-grid-minor-rgb: 108 116 138;--board-grid-major-rgb: 142 151 176;--board-grid-dot: rgba(142, 151, 176, .16);--board-grid-dot-major: rgba(166, 174, 198, .24);--board-accent: #8487f2;--board-accent-fg: #0a0c12;--board-accent-ring: rgba(132, 135, 242, .35);--board-accent-soft: rgba(132, 135, 242, .16);--board-node-bg: #202633;--board-node-border: #343b4c;--board-node-border-hover: #4b5469;--board-node-shadow: 0 .5px 1px .5px rgba(0, 0, 0, .28);--board-node-shadow-hover: 0 .5px 1px .5px rgba(0, 0, 0, .28), 0 4px 14px -2px rgba(0, 0, 0, .38);--board-node-shadow-selected: 0 .5px 1px .5px rgba(0, 0, 0, .28);--board-node-shadow-drag: 0 12px 34px -8px rgba(0, 0, 0, .56);--board-group-bg: rgba(132, 135, 242, .07);--board-group-border: rgba(132, 135, 242, .34);--board-node-ring: rgba(132, 135, 242, .45);--board-node-selection: #8487f2;--board-edge-color: rgba(173, 179, 199, .66);--board-edge-active-color: #8487f2;--board-snap-guide-color: rgba(132, 135, 242, .95);--board-box-select-fill: rgba(132, 135, 242, .12);--board-box-select-stroke: rgba(132, 135, 242, .7);--board-node-handle-bg: #202633;--board-node-handle-dot: rgba(173, 179, 199, .72);--board-handle-shadow: rgba(0, 0, 0, .38);--board-preset-1: #f06783;--board-preset-2: #e8933b;--board-preset-3: #d8bc2e;--board-preset-4: #4dc27e;--board-preset-5: #6b9dec;--board-preset-6: #9d7df0}:root{--board-ease-out: cubic-bezier(.22, 1, .36, 1);--board-ease-spring: cubic-bezier(.34, 1.3, .64, 1);--board-ease-in-out: cubic-bezier(.65, 0, .35, 1);--board-dur-instant: 80ms;--board-dur-fast: .12s;--board-dur-base: .18s;--board-dur-slow: .26s}.board-box-select[data-v-fb31d12b]{position:absolute;border-radius:6px;box-shadow:inset 0 0 0 1px #ffffff2e;pointer-events:none}.board-box-select--window[data-v-fb31d12b]{border:1.5px solid var(--board-box-select-window-stroke, rgba(37, 99, 235, .72));background:var(--board-box-select-window-fill, rgba(37, 99, 235, .1))}.board-box-select--crossing[data-v-fb31d12b]{border:1.5px dashed var(--board-box-select-crossing-stroke, rgba(15, 118, 110, .8));background:var(--board-box-select-crossing-fill, rgba(15, 118, 110, .12))}.board-grid[data-v-f3663c53]{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:var(--grid-mask-image);mask-image:var(--grid-mask-image)}.board-node-handle[data-v-004da51c]{--_hit: calc(18px / var(--board-zoom, 1));--_dot: calc(7px / var(--board-zoom, 1));--_half: calc(var(--_hit) / 2);position:absolute;width:var(--_hit);height:var(--_hit);box-sizing:border-box;border:0;background:transparent;cursor:nwse-resize;transition:transform var(--board-dur-fast, .12s) var(--board-ease-out, ease)}.board-node-handle[data-v-004da51c]:before{content:"";position:absolute;top:50%;left:50%;width:var(--_dot);height:var(--_dot);box-sizing:border-box;border:calc(1px / var(--board-zoom, 1)) solid var(--board-node-selection, var(--board-accent, #6366e8));border-radius:calc(1.5px / var(--board-zoom, 1));background:var(--board-node-handle-bg, var(--board-node-bg, #fff));transform:translate(-50%,-50%);transition:background-color var(--board-dur-fast, .12s) var(--board-ease-out, ease),transform var(--board-dur-fast, .12s) var(--board-ease-out, ease)}.is-n[data-v-004da51c],.is-s[data-v-004da51c]{left:calc(50% - var(--_half))}.is-e[data-v-004da51c],.is-w[data-v-004da51c]{top:calc(50% - var(--_half))}.is-n[data-v-004da51c],.is-ne[data-v-004da51c],.is-nw[data-v-004da51c]{top:calc(-1 * var(--_half))}.is-s[data-v-004da51c],.is-se[data-v-004da51c],.is-sw[data-v-004da51c]{bottom:calc(-1 * var(--_half))}.is-e[data-v-004da51c],.is-ne[data-v-004da51c],.is-se[data-v-004da51c]{right:calc(-1 * var(--_half))}.is-w[data-v-004da51c],.is-nw[data-v-004da51c],.is-sw[data-v-004da51c]{left:calc(-1 * var(--_half))}.is-n[data-v-004da51c],.is-s[data-v-004da51c]{cursor:ns-resize}.is-e[data-v-004da51c],.is-w[data-v-004da51c]{cursor:ew-resize}.is-ne[data-v-004da51c],.is-sw[data-v-004da51c]{cursor:nesw-resize}.is-nw[data-v-004da51c],.is-se[data-v-004da51c]{cursor:nwse-resize}.board-node-handle[data-v-004da51c]:hover:before{background:var(--board-node-selection, var(--board-accent, #6366e8));transform:translate(-50%,-50%) scale(1.15)}@media(pointer:coarse){.board-node-handle[data-v-004da51c]{--_hit: calc(36px / var(--board-zoom, 1));--_dot: calc(9px / var(--board-zoom, 1))}}@media(prefers-reduced-motion:reduce){.board-node-handle[data-v-004da51c]{transition:none}}.board-node[data-v-9aa9b6cd]{position:absolute;box-sizing:border-box;overflow:visible;border:calc(1px / var(--board-zoom, 1)) solid var(--board-node-border, rgba(148, 163, 184, .28));border-radius:calc(var(--board-node-radius, 10px) / var(--board-zoom, 1));box-shadow:var(--board-node-shadow, 0 .5px 1px .5px rgba(9, 14, 28, .08));background:var(--board-node-bg, #fff);color:inherit;contain:layout style;transform:translateZ(0);transition:border-color var(--board-dur-fast, .12s) var(--board-ease-out, ease),box-shadow var(--board-dur-fast, .12s) var(--board-ease-out, ease),background-color var(--board-dur-fast, .12s) var(--board-ease-out, ease),outline-color var(--board-dur-fast, .12s) var(--board-ease-out, ease),transform var(--board-dur-fast, .12s) var(--board-ease-out, ease)}.board-node[data-v-9aa9b6cd]:hover:not(.is-group):not(.is-editing){border-color:var(--board-node-border-hover, rgba(100, 116, 139, .42));box-shadow:var( --board-node-shadow-hover, 0 2px 8px -2px rgba(9, 14, 28, .12) )}.board-node[data-v-9aa9b6cd]:focus-visible{outline:calc(2px / var(--board-zoom, 1)) solid var(--board-node-ring, rgba(99, 102, 232, .42));outline-offset:calc(2px / var(--board-zoom, 1))}.board-node.is-selected[data-v-9aa9b6cd],.board-node.is-editing[data-v-9aa9b6cd]{border-color:var( --board-node-color-ring, var(--board-node-selection, var(--board-accent, #6366e8)) );box-shadow:0 0 0 calc(1px / var(--board-zoom, 1)) var( --board-node-color-ring, var(--board-node-selection, var(--board-accent, #6366e8)) ),var(--board-node-shadow-selected, var(--board-node-shadow, none))}.board-node.is-locked[data-v-9aa9b6cd]{opacity:.8;filter:saturate(.82)}.board-node.is-group[data-v-9aa9b6cd]{background:var(--board-group-bg, rgba(99, 102, 232, .05));border-style:dashed;border-color:var(--board-group-border, rgba(99, 102, 232, .26));border-radius:calc(var(--board-group-radius, 16px) / var(--board-zoom, 1));outline:none;box-shadow:none}.board-node.is-colored[data-v-9aa9b6cd]:not(.is-group){background:var(--board-node-tint);border-color:var(--board-node-color)}.board-node.is-colored[data-v-9aa9b6cd]:not(.is-group):hover:not(.is-editing){background:var(--board-node-tint-strong);border-color:var(--board-node-color)}.board-node.is-group.is-colored[data-v-9aa9b6cd]{background:var(--board-node-tint);border-color:var(--board-node-color)}.board-node__content[data-v-9aa9b6cd],.board-node__editor[data-v-9aa9b6cd]{width:100%;height:100%;padding:16px 18px;border:0;background:transparent;color:inherit;font:inherit;resize:none;outline:none;overflow:auto;white-space:pre-wrap}.board-node__content[data-v-9aa9b6cd]{display:flex;align-items:flex-start;line-height:1.45;letter-spacing:-.01em}.board-node__editor[data-v-9aa9b6cd]{display:block;-webkit-user-select:text;user-select:text;cursor:text;line-height:1.45;letter-spacing:-.01em;caret-color:var(--board-node-selection, var(--board-accent, #0f766e))}.board-node__editor[data-v-9aa9b6cd]::selection{background:color-mix(in srgb,var(--board-node-selection, var(--board-accent, #0f766e)) 22%,transparent)}.board-node__editor-help[data-v-9aa9b6cd]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.board-node[data-v-9aa9b6cd]{transition:none}}.board-snap-guides[data-v-2c604885]{position:absolute;inset:0;pointer-events:none;z-index:999999;color:var(--board-snap-guide-color, var(--board-accent, #6366e8))}.board-snap-guide[data-v-2c604885]{position:absolute;background:currentColor;opacity:.95;animation:board-snap-guide-in-2c604885 .12s var(--board-ease-out, ease)}.board-snap-guide--vertical[data-v-2c604885]{width:1px;transform:translate(-.5px)}.board-snap-guide--horizontal[data-v-2c604885]{height:1px;transform:translateY(-.5px)}.board-snap-guide[data-v-2c604885]:before,.board-snap-guide[data-v-2c604885]:after{content:"";position:absolute;background:currentColor}.board-snap-guide--vertical[data-v-2c604885]:before,.board-snap-guide--vertical[data-v-2c604885]:after{left:-3px;width:7px;height:1px}.board-snap-guide--vertical[data-v-2c604885]:before{top:-.5px}.board-snap-guide--vertical[data-v-2c604885]:after{bottom:-.5px}.board-snap-guide--horizontal[data-v-2c604885]:before,.board-snap-guide--horizontal[data-v-2c604885]:after{top:-3px;width:1px;height:7px}.board-snap-guide--horizontal[data-v-2c604885]:before{left:-.5px}.board-snap-guide--horizontal[data-v-2c604885]:after{right:-.5px}@keyframes board-snap-guide-in-2c604885{0%{opacity:0}to{opacity:.95}}@media(prefers-reduced-motion:reduce){.board-snap-guide[data-v-2c604885]{animation:none}}.board-viewport[data-v-9eeb9aab]{position:absolute;inset:0;transform-origin:0 0;will-change:transform}.board-selection-toolbar[data-v-c1436955]{position:absolute;z-index:12;display:inline-flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--board-border, rgba(15, 23, 42, .1));border-radius:10px;background:var(--board-bg-elevated, #ffffff);box-shadow:0 8px 24px -6px #090e1c2e,0 1px 2px #090e1c14;transform:translate(-50%,calc(-100% - 14px));pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:saturate(1.2);backdrop-filter:saturate(1.2)}.board-selection-toolbar__button[data-v-c1436955]{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;padding:0;border:none;border-radius:8px;background:transparent;color:var(--board-muted-fg, #5b6075);cursor:pointer;transition:background-color var(--board-dur-fast, .12s) var(--board-ease-out, ease),color var(--board-dur-fast, .12s) var(--board-ease-out, ease)}.board-selection-toolbar__button[data-v-c1436955]:hover:not(:disabled){background:color-mix(in srgb,var(--board-fg, #14161f) 6%,transparent);color:var(--board-fg, #14161f)}.board-selection-toolbar__button[data-v-c1436955]:disabled{cursor:default;opacity:.38}.board-selection-toolbar__button.is-danger[data-v-c1436955]{color:var(--board-preset-1, #e5476a)}.board-selection-toolbar__button.is-danger[data-v-c1436955]:hover:not(:disabled){background:color-mix(in srgb,var(--board-preset-1, #e5476a) 10%,transparent);color:var(--board-preset-1, #e5476a)}.board-selection-toolbar__button svg[data-v-c1436955]{width:17px;height:17px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.board-selection-toolbar__popover-anchor[data-v-c1436955]{position:relative;display:inline-flex}.board-selection-toolbar__palette[data-v-c1436955]{position:absolute;top:calc(100% + 8px);left:50%;z-index:1;display:inline-flex;gap:8px;padding:10px;border:1px solid var(--board-border, rgba(15, 23, 42, .1));border-radius:10px;background:var(--board-bg-elevated, #ffffff);box-shadow:0 12px 32px -8px #090e1c38,0 1px 2px #090e1c14;transform:translate(-50%);animation:board-palette-in-c1436955 var(--board-dur-fast, .14s) var(--board-ease-out, ease)}@keyframes board-palette-in-c1436955{0%{opacity:0;transform:translate(-50%) scale(.96)}to{opacity:1;transform:translate(-50%) scale(1)}}.board-selection-toolbar__swatch[data-v-c1436955]{width:20px;height:20px;padding:0;border:1px solid rgba(15,23,42,.14);border-radius:999px;background:var(--swatch-color);cursor:pointer;transition:transform var(--board-dur-fast, .12s) var(--board-ease-spring, ease)}.board-selection-toolbar__swatch[data-v-c1436955]:hover{transform:scale(1.12)}.board-selection-toolbar__swatch.is-default[data-v-c1436955]{--swatch-color: var(--board-border-strong, #c9cbdb)}.board-selection-toolbar__swatch.is-active[data-v-c1436955]{box-shadow:0 0 0 2px var(--board-bg-elevated, #ffffff),0 0 0 4px var(--swatch-color)}@media(prefers-reduced-motion:reduce){.board-selection-toolbar[data-v-c1436955],.board-selection-toolbar__button[data-v-c1436955],.board-selection-toolbar__swatch[data-v-c1436955],.board-selection-toolbar__palette[data-v-c1436955]{animation:none;transition:none}}.board-root[data-v-931e1ec3]{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;background:var(--board-canvas-bg, var(--board-bg, #f5f6fa));color:var(--board-fg, #14161f);isolation:isolate;transition:background-color var(--board-dur-slow, .26s) var(--board-ease-out, ease),color var(--board-dur-slow, .26s) var(--board-ease-out, ease)}.board-node-simple[data-v-931e1ec3]{position:absolute;box-sizing:border-box;border:calc(1px / var(--board-zoom, 1)) solid var(--board-node-border, rgba(148, 163, 184, .28));background:var(--board-node-bg, #fff);border-radius:calc(var(--board-node-radius, 10px) / var(--board-zoom, 1));box-shadow:var(--board-node-shadow, 0 .5px 1px .5px rgba(9, 14, 28, .08));overflow:hidden;contain:layout style paint}.board-node-simple.is-colored[data-v-931e1ec3]{border-color:var(--board-node-color);background:var(--board-node-tint)}.board-node-simple.is-group[data-v-931e1ec3]{border-style:dashed;border-radius:calc(var(--board-group-radius, 16px) / var(--board-zoom, 1))}.board-node-simple[data-v-931e1ec3]:after{content:"";position:absolute;top:25%;left:20%;right:20%;height:50%;background:repeating-linear-gradient(to bottom,var(--board-divider, rgba(15, 23, 42, .06)) 0px,var(--board-divider, rgba(15, 23, 42, .06)) 2px,transparent 2px,transparent 6px)}@media(prefers-reduced-motion:reduce){.board-root[data-v-931e1ec3]{transition:none}}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/** Main board root component that wires a board engine to the DOM scene graph. */
+export { default as BoardRoot } from './components/BoardRoot.vue';
+/** Camera transform layer used inside `BoardRoot` render trees. */
+export { default as BoardViewport } from './components/BoardViewport.vue';
+/** Default node wrapper component used to position node renderers. */
+export { default as BoardNode } from './components/BoardNode.vue';
+/** Resize handle component for interactive node resizing. */
+export { default as BoardNodeHandle } from './components/BoardNodeHandle.vue';
+/** Floating toolbar for selected nodes with remove, color, zoom, and edit actions. */
+export { default as BoardSelectionToolbar } from './components/BoardSelectionToolbar.vue';
+/** Node color presets and CSS variable resolver used by default and custom renderers. */
+export { BOARD_COLOR_PRESETS, colorForPreset, resolveNodeColorStyle, type BoardColorPreset, } from './nodeColors.js';
+/** Decorative grid overlay component. */
+export { default as BoardGrid } from './components/BoardGrid.vue';
+/** Screen-space box selection overlay. */
+export { default as BoardBoxSelect } from './components/BoardBoxSelect.vue';
+/** Snap guide overlay rendered during drag and resize interactions. */
+export { default as BoardSnapGuides } from './components/BoardSnapGuides.vue';
+/** Types for configuring the board grid renderer. */
+export type { BoardGridOptions, BoardRendererRegistry, ResolvedBoardGridOptions, } from './grid.js';
+/** Injection context returned by `useBoardEngine`. */
+export type { BoardEngineContext } from './context.js';
+/** Core board context composables for camera, nodes, selection, and node actions. */
+export { useBoardEngine, useBoardCamera, useBoardNodes, useBoardSelection, useBoardInteraction, useBoardVisibleBounds, useBoardVisibleNodes, useBoardGridStyle, useBoardNode, useBoardBoxSelectBounds, } from './useBoardEngine.js';