@lupinum/vue-board 0.1.0

package/dist/minimap.d.ts

@@ -0,0 +1,82 @@
+import { type ComputedRef, type MaybeRefOrGetter, type PropType, type SlotsType, type VNode } from 'vue';
+import { type Bounds, type BoardEngine, type BoardNode, type Point } from '@lupinum/board-core';
+/** Sizing options for the minimap composable and component. */
+export interface MinimapOptions {
+    width?: MaybeRefOrGetter<number>;
+    height?: MaybeRefOrGetter<number>;
+    padding?: MaybeRefOrGetter<number>;
+}
+export interface MinimapSlotProps {
+    nodes: Array<{
+        node: BoardNode;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+    viewport: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Project board content and the active viewport into minimap coordinates.
+ *
+ * Returns derived node rectangles, the current viewport rectangle, and a
+ * helper that pans the main board camera from minimap pointer input.
+ */
+export declare function useBoardMinimap(engine: BoardEngine, options?: MinimapOptions): {
+    bounds: ComputedRef<Bounds>;
+    viewportRect: ComputedRef<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+    minimapNodes: ComputedRef<Array<{
+        node: BoardNode;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>>;
+    panToMinimapPoint: (point: Point) => Promise<void>;
+};
+/** Render a clickable, draggable minimap for the current board engine. */
+export declare const BoardMinimap: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    engine: {
+        type: PropType<BoardEngine | null>;
+        default: null;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    engine: {
+        type: PropType<BoardEngine | null>;
+        default: null;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    engine: BoardEngine<import("@lupinum/board-core").BoardPluginApis, {}> | null;
+    width: number;
+    height: number;
+}, SlotsType<{
+    default?: (props: MinimapSlotProps) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/minimap.js

@@ -0,0 +1,192 @@
+import { defineComponent as P, onScopeDispose as Y, h as g, shallowRef as M, getCurrentInstance as k, onMounted as B, computed as c, toValue as X } from "vue";
+import { getVisibleBounds as C } from "@lupinum/board-core";
+import { b as R } from "./useBoardEngine-GWeHBmOy.js";
+function L(a, v = {}) {
+  const d = M(a.$camera.get()), r = M(a.$nodes.get()), u = M(a.getViewportSize()), m = [];
+  function w() {
+    m.push(
+      a.$camera.subscribe((e) => {
+        d.value = e;
+      }),
+      a.$nodes.subscribe((e) => {
+        r.value = e;
+      }),
+      a.on("viewport:change", (e) => {
+        u.value = e;
+      })
+    ), d.value = a.$camera.get(), r.value = a.$nodes.get(), u.value = a.getViewportSize();
+  }
+  k() ? B(w) : w(), Y(() => {
+    for (const e of m)
+      e();
+  });
+  const x = c(() => X(v.width ?? 200)), y = c(() => X(v.height ?? 140)), t = c(() => X(v.padding ?? 24)), o = c(() => {
+    let e = !1, l = 1 / 0, n = 1 / 0, f = -1 / 0, b = -1 / 0;
+    for (const p of r.value.values())
+      e = !0, l = Math.min(l, p.x), n = Math.min(n, p.y), f = Math.max(f, p.x + p.width), b = Math.max(b, p.y + p.height);
+    return e ? {
+      minX: l - t.value,
+      minY: n - t.value,
+      maxX: f + t.value,
+      maxY: b + t.value
+    } : { minX: -500, minY: -500, maxX: 500, maxY: 500 };
+  }), i = c(() => {
+    const e = o.value;
+    return Math.min(
+      x.value / Math.max(1, e.maxX - e.minX),
+      y.value / Math.max(1, e.maxY - e.minY)
+    );
+  }), s = c(() => {
+    const e = o.value, l = (e.maxX - e.minX) * i.value, n = (e.maxY - e.minY) * i.value;
+    return {
+      x: (x.value - l) / 2,
+      y: (y.value - n) / 2
+    };
+  }), h = c(() => {
+    const e = o.value, l = s.value;
+    return Array.from(r.value.values()).map((n) => ({
+      node: n,
+      x: (n.x - e.minX) * i.value + l.x,
+      y: (n.y - e.minY) * i.value + l.y,
+      width: Math.max(2, n.width * i.value),
+      height: Math.max(2, n.height * i.value)
+    }));
+  }), $ = c(() => {
+    const e = o.value, l = s.value, n = C(
+      u.value.x,
+      u.value.y,
+      d.value
+    );
+    return {
+      x: (n.minX - e.minX) * i.value + l.x,
+      y: (n.minY - e.minY) * i.value + l.y,
+      width: Math.max(6, (n.maxX - n.minX) * i.value),
+      height: Math.max(6, (n.maxY - n.minY) * i.value)
+    };
+  });
+  async function I(e) {
+    const l = d.value, n = s.value, f = {
+      x: o.value.minX + (e.x - n.x) / i.value - u.value.x / (2 * l.z),
+      y: o.value.minY + (e.y - n.y) / i.value - u.value.y / (2 * l.z)
+    };
+    await a.panTo(f, !1);
+  }
+  return {
+    bounds: o,
+    viewportRect: $,
+    minimapNodes: h,
+    panToMinimapPoint: I
+  };
+}
+const T = P({
+  name: "BoardMinimap",
+  slots: Object,
+  props: {
+    engine: {
+      type: Object,
+      default: null
+    },
+    width: {
+      type: Number,
+      default: 200
+    },
+    height: {
+      type: Number,
+      default: 140
+    }
+  },
+  setup(a, { slots: v }) {
+    const d = a.engine ?? R().engine, r = L(d, {
+      width: () => a.width,
+      height: () => a.height
+    });
+    let u = null, m = () => {
+    };
+    Y(() => {
+      m();
+    });
+    function w(t, o) {
+      const i = t.getBoundingClientRect();
+      return {
+        x: o.clientX - i.left,
+        y: o.clientY - i.top
+      };
+    }
+    function x(t) {
+      t.stopPropagation();
+      const o = t.currentTarget;
+      o.setPointerCapture?.(t.pointerId), u = t.pointerId, r.panToMinimapPoint(w(o, t));
+      const i = (h) => {
+        h.pointerId === u && r.panToMinimapPoint(w(o, h));
+      }, s = (h) => {
+        h.pointerId === u && (o.releasePointerCapture?.(h.pointerId), u = null, m());
+      };
+      m(), window.addEventListener("pointermove", i), window.addEventListener("pointerup", s), window.addEventListener("pointercancel", s), m = () => {
+        window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", s), window.removeEventListener("pointercancel", s);
+      };
+    }
+    function y(t) {
+      const o = t.shiftKey ? 100 : 24, i = t.key === "ArrowLeft" ? { x: -o, y: 0 } : t.key === "ArrowRight" ? { x: o, y: 0 } : t.key === "ArrowUp" ? { x: 0, y: -o } : t.key === "ArrowDown" ? { x: 0, y: o } : null;
+      i && (t.preventDefault(), t.stopPropagation(), d.panBy(i.x, i.y));
+    }
+    return () => g(
+      "div",
+      {
+        class: "board-minimap",
+        "data-board-interactive": "true",
+        tabindex: 0,
+        role: "region",
+        "aria-label": "Board minimap. Use arrow keys to pan.",
+        style: {
+          position: "relative",
+          width: `${a.width}px`,
+          height: `${a.height}px`,
+          overflow: "hidden"
+        },
+        onPointerdown: x,
+        onKeydown: y
+      },
+      [
+        v.default ? v.default({
+          nodes: r.minimapNodes.value,
+          viewport: r.viewportRect.value
+        }) : [
+          g(
+            "svg",
+            {
+              width: a.width,
+              height: a.height,
+              viewBox: `0 0 ${a.width} ${a.height}`,
+              style: { display: "block" },
+              "aria-hidden": "true"
+            },
+            [
+              g("path", {
+                d: r.minimapNodes.value.map(
+                  (t) => `M${t.x},${t.y}h${t.width}v${t.height}h-${t.width}Z`
+                ).join(""),
+                fill: "currentColor",
+                opacity: 0.22,
+                stroke: "currentColor",
+                "stroke-width": 0.75
+              }),
+              g("rect", {
+                x: r.viewportRect.value.x,
+                y: r.viewportRect.value.y,
+                width: r.viewportRect.value.width,
+                height: r.viewportRect.value.height,
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": 1
+              })
+            ]
+          )
+        ]
+      ]
+    );
+  }
+});
+export {
+  T as BoardMinimap,
+  L as useBoardMinimap
+};

package/dist/nodeColors.d.ts

@@ -0,0 +1,10 @@
+import { BOARD_COLOR_PRESETS, colorForPreset, type BoardColorPreset, type CanvasColor } from '@lupinum/board-core';
+export { BOARD_COLOR_PRESETS, colorForPreset };
+export type { BoardColorPreset };
+/**
+ * Emits CSS custom properties for a node's color preset. The primary color
+ * resolves through `--board-preset-${preset}` so theme.css can swap light/dark
+ * values without touching node inline styles. The hex from board-core is the
+ * SSR fallback for consumers that haven't loaded theme.css yet.
+ */
+export declare function resolveNodeColorStyle(color: CanvasColor | undefined): Record<string, string>;

package/dist/useBoardEngine-GWeHBmOy.js

@@ -0,0 +1,128 @@
+import { inject as $, computed as n, toValue as b } from "vue";
+import { getBoundsFromPoints as y, getVisibleBounds as x } from "@lupinum/board-core";
+import { getBoardInteractionAdapter as B } from "@lupinum/board-core/internal";
+const h = /* @__PURE__ */ Symbol("board-engine");
+function d() {
+  const e = $(h);
+  if (!e)
+    throw new Error("Board composables must be used under <BoardRoot>.");
+  return e;
+}
+function w() {
+  const { $camera: e } = d();
+  return n(() => e.value);
+}
+function E() {
+  const { $nodes: e } = d();
+  return n(() => e.value);
+}
+function I() {
+  const { $selection: e } = d();
+  return n(() => [...e.value]);
+}
+function N() {
+  const { $interaction: e } = d();
+  return n(() => e.value);
+}
+function X() {
+  const { $camera: e, viewportSize: t } = d();
+  return n(
+    () => x(t.value.x, t.value.y, e.value)
+  );
+}
+function Y(e = 200) {
+  const { $nodes: t, viewportSize: i, $camera: u } = d();
+  return n(() => {
+    const c = i.value.x > 0 && i.value.y > 0 ? x(
+      i.value.x,
+      i.value.y,
+      u.value
+    ) : null;
+    return Array.from(t.value.values()).filter((r) => r.visible ? c ? r.x + r.width > c.minX - e && r.x < c.maxX + e && r.y + r.height > c.minY - e && r.y < c.maxY + e : !0 : !1);
+  });
+}
+function k() {
+  const { $camera: e, resolvedGrid: t } = d();
+  function i(u, l) {
+    return (u % l + l) % l;
+  }
+  return n(() => {
+    const u = e.value.z, l = t.value.size, c = t.value.size * t.value.majorEvery, r = l * u, o = c * u, a = e.value.x * u, m = e.value.y * u, v = r < 6 ? 0 : r < 12 ? t.value.minorOpacity * 0.57 : t.value.minorOpacity, p = o < 8 ? t.value.majorOpacity * 0.44 : t.value.majorOpacity;
+    return {
+      "--grid-minor-size": `${r}px`,
+      "--grid-major-size": `${o}px`,
+      "--grid-minor-x": `${i(a, r)}px`,
+      "--grid-minor-y": `${i(m, r)}px`,
+      "--grid-major-x": `${i(a, o)}px`,
+      "--grid-major-y": `${i(m, o)}px`,
+      "--grid-minor-color": `rgba(var(--board-grid-minor-rgb, 148 163 184) / ${v})`,
+      "--grid-major-color": `rgba(var(--board-grid-major-rgb, 71 85 105) / ${p})`,
+      "--grid-mask-image": t.value.fadeEdges ? "radial-gradient(circle at center, black 68%, transparent 100%)" : "none"
+    };
+  });
+}
+function A(e) {
+  const { engine: t, $nodes: i, $selection: u, $interaction: l, toLocalPoint: c } = d(), r = B(t), o = n(() => b(e)), a = n(() => {
+    const s = i.value.get(o.value);
+    if (!s)
+      throw new Error(
+        `Node "${o.value}" is not present in the current snapshot.`
+      );
+    return s;
+  }), m = n(() => u.value.has(o.value)), v = n(
+    () => l.value.mode === "editing-text" && l.value.nodeId === o.value
+  ), p = n(() => a.value.locked), f = n(() => ({
+    left: `${a.value.x}px`,
+    top: `${a.value.y}px`,
+    width: `${a.value.width}px`,
+    height: `${a.value.height}px`,
+    zIndex: String(a.value.zIndex)
+  }));
+  return {
+    node: a,
+    selected: m,
+    editing: v,
+    locked: p,
+    style: f,
+    beginEdit: () => {
+      a.value.type === "text" && t.beginTextEdit(o.value);
+    },
+    commitText: (s) => {
+      a.value.type === "text" && t.commitTextEdit(o.value, s);
+    },
+    startDrag: (s) => r.beginNodeDrag(
+      o.value,
+      s.pointerId,
+      c(s.clientX, s.clientY)
+    ),
+    startResize: (s, g) => r.beginResize(
+      o.value,
+      s,
+      g.pointerId,
+      c(g.clientX, g.clientY)
+    )
+  };
+}
+function O() {
+  const { $interaction: e } = d();
+  return n(() => {
+    const t = e.value;
+    return t.mode !== "box-select" ? null : y(
+      t.startScreenPoint,
+      t.currentScreenPoint
+    );
+  });
+}
+export {
+  N as a,
+  d as b,
+  k as c,
+  w as d,
+  h as e,
+  A as f,
+  E as g,
+  I as h,
+  X as i,
+  Y as j,
+  O as u
+};

package/dist/useBoardEngine.d.ts

@@ -0,0 +1,52 @@
+import { type MaybeRefOrGetter } from 'vue';
+import { type BoardNode, type NodeId, type ResizeHandle } from '@lupinum/board-core';
+/** Access the board context provided by `BoardRoot`. */
+export declare function useBoardEngine(): import("./context.js").BoardEngineContext;
+/** Reactive camera state for the current board. */
+export declare function useBoardCamera(): import("vue").ComputedRef<import("@lupinum/board-core").Camera>;
+/** Reactive node map for the current board. */
+export declare function useBoardNodes(): import("vue").ComputedRef<ReadonlyMap<NodeId, BoardNode>>;
+/** Reactive selection ids as an ordered array. */
+export declare function useBoardSelection(): import("vue").ComputedRef<readonly NodeId[]>;
+/** Reactive interaction state for the current board gesture. */
+export declare function useBoardInteraction(): import("vue").ComputedRef<import("@lupinum/board-core").InteractionState>;
+/** Compute the currently visible world bounds from camera and viewport size. */
+export declare function useBoardVisibleBounds(): import("vue").ComputedRef<import("@lupinum/board-core").Bounds>;
+/** Filter visible nodes to the viewport with an optional culling margin. */
+export declare function useBoardVisibleNodes(margin?: number): import("vue").ComputedRef<readonly BoardNode[]>;
+/** CSS custom properties used by `BoardGrid` to render the active grid pattern. */
+export declare function useBoardGridStyle(): import("vue").ComputedRef<{
+    '--grid-minor-size': string;
+    '--grid-major-size': string;
+    '--grid-minor-x': string;
+    '--grid-minor-y': string;
+    '--grid-major-x': string;
+    '--grid-major-y': string;
+    '--grid-minor-color': string;
+    '--grid-major-color': string;
+    '--grid-mask-image': string;
+}>;
+/**
+ * Access a single node plus common node-level actions used by renderers.
+ *
+ * The returned helpers intentionally stay thin over the engine command API.
+ */
+export declare function useBoardNode(id: MaybeRefOrGetter<NodeId>): {
+    node: import("vue").ComputedRef<BoardNode>;
+    selected: import("vue").ComputedRef<boolean>;
+    editing: import("vue").ComputedRef<boolean>;
+    locked: import("vue").ComputedRef<boolean>;
+    style: import("vue").ComputedRef<{
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        zIndex: string;
+    }>;
+    beginEdit: () => void;
+    commitText: (text: string) => void;
+    startDrag: (event: PointerEvent) => void;
+    startResize: (handle: ResizeHandle, event: PointerEvent) => void;
+};
+/** Screen-space rectangle for the active box-selection gesture, or `null` when idle. */
+export declare function useBoardBoxSelectBounds(): import("vue").ComputedRef<import("@lupinum/board-core").Bounds | null>;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@lupinum/vue-board",
+  "version": "0.1.0",
+  "description": "Vue 3 board components and composables built on top of @lupinum/board-core.",
+  "license": "MIT",
+  "author": "Lupinum OG <info@lupinum.com> (https://lupinum.com)",
+  "type": "module",
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./minimap": {
+      "types": "./dist/minimap.d.ts",
+      "import": "./dist/minimap.js",
+      "default": "./dist/minimap.js"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lupinum-dev/nuxt-board.git",
+    "directory": "packages/vue-board"
+  },
+  "homepage": "https://nuxt-board.lupinum.com",
+  "bugs": {
+    "url": "https://github.com/lupinum-dev/nuxt-board/issues"
+  },
+  "keywords": [
+    "board",
+    "vue",
+    "diagram",
+    "whiteboard",
+    "nodes"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@lupinum/board-core": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json && node ../../scripts/normalize-vue-declarations.mjs dist"
+  }
+}