@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/stores/reactiveCanvasBuilderStore.js

@@ -1,138 +1,128 @@
-import { defineStore as A } from "pinia";
-import { ref as k, computed as f } from "vue";
-const U = [
-  "text-block",
-  "image-block",
-  "button-block",
-  "spacer-block",
-  "container-block"
-], T = 800, x = 600, w = 160, E = 80;
-let r = 0;
-function b(t) {
-  return r += 1, `${t}-${Date.now()}-${r}`;
+import { computed as e, ref as t } from "vue";
+import { defineStore as n } from "pinia";
+//#region src/stores/reactiveCanvasBuilderStore.ts
+var r = [
+	"text-block",
+	"image-block",
+	"button-block",
+	"spacer-block",
+	"container-block"
+], i = 800, a = 600, o = 160, s = 80, c = 0;
+function l(e) {
+	return c += 1, `${e}-${Date.now()}-${c}`;
 }
-function V() {
-  r = 0;
+function u() {
+	c = 0;
 }
-function D() {
-  return {
-    width: T,
-    height: x,
-    blocks: []
-  };
+function d() {
+	return {
+		width: i,
+		height: a,
+		blocks: []
+	};
 }
-function L(t) {
-  switch (t) {
-    case "text-block":
-      return { text: "Sample text" };
-    case "image-block":
-      return { src: "", alt: "" };
-    case "button-block":
-      return { label: "Click me", action: "" };
-    case "spacer-block":
-      return {};
-    case "container-block":
-      return { padding: 8 };
-    default:
-      return {};
-  }
+function f(e) {
+	switch (e) {
+		case "text-block": return { text: "Sample text" };
+		case "image-block": return {
+			src: "",
+			alt: ""
+		};
+		case "button-block": return {
+			label: "Click me",
+			action: ""
+		};
+		case "spacer-block": return {};
+		case "container-block": return { padding: 8 };
+		default: return {};
+	}
 }
-const H = A(
-  "gx-modui/reactiveCanvasBuilder",
-  () => {
-    const t = k({}), o = k({});
-    function c(e) {
-      return t.value[e] || (t.value[e] = D(), o.value[e] = { id: null }), t.value[e];
-    }
-    function l(e, n) {
-      t.value[e] = {
-        width: n.width,
-        height: n.height,
-        blocks: n.blocks.map((s) => ({ ...s, props: { ...s.props } }))
-      }, o.value[e] = { id: null };
-    }
-    function h(e) {
-      delete t.value[e], delete o.value[e];
-    }
-    function v(e, n) {
-      const s = c(e), a = b(`block-${n}`);
-      return s.blocks = [
-        ...s.blocks,
-        {
-          id: a,
-          type: n,
-          x: 16,
-          y: 16,
-          width: w,
-          height: E,
-          props: L(n)
-        }
-      ], a;
-    }
-    function m(e, n) {
-      const s = c(e);
-      s.blocks = s.blocks.filter((i) => i.id !== n);
-      const a = o.value[e];
-      (a == null ? void 0 : a.id) === n && (o.value[e] = { id: null });
-    }
-    function d(e, n, s) {
-      const a = c(e), i = a.blocks.findIndex((_) => _.id === n);
-      if (i < 0)
-        return;
-      const g = a.blocks[i], u = [...a.blocks];
-      u[i] = { ...g, ...s }, a.blocks = u;
-    }
-    function B(e, n) {
-      const s = c(e);
-      n.width !== void 0 && (s.width = n.width), n.height !== void 0 && (s.height = n.height);
-    }
-    function S(e, n) {
-      o.value[e] = { id: n };
-    }
-    function C(e) {
-      return o.value[e] ?? { id: null };
-    }
-    function p(e) {
-      return c(e);
-    }
-    return {
-      builders: t,
-      selections: o,
-      ensureBuilder: c,
-      loadSchema: l,
-      resetBuilder: h,
-      addBlock: v,
-      removeBlock: m,
-      updateBlock: d,
-      setCanvasSize: B,
-      select: S,
-      getSelection: C,
-      getSchema: p
-    };
-  }
-);
-function $(t) {
-  const o = H();
-  return o.ensureBuilder(t), {
-    schema: f(
-      () => o.getSchema(t)
-    ),
-    selection: f(
-      () => o.getSelection(t)
-    ),
-    addBlock: (c) => o.addBlock(t, c),
-    removeBlock: (c) => o.removeBlock(t, c),
-    updateBlock: (c, l) => o.updateBlock(t, c, l),
-    setCanvasSize: (c) => o.setCanvasSize(t, c),
-    select: (c) => o.select(t, c),
-    loadSchema: (c) => o.loadSchema(t, c),
-    reset: () => o.resetBuilder(t)
-  };
+var p = n("gx-modui/reactiveCanvasBuilder", () => {
+	let e = t({}), n = t({});
+	function r(t) {
+		return e.value[t] || (e.value[t] = d(), n.value[t] = { id: null }), e.value[t];
+	}
+	function i(t, r) {
+		e.value[t] = {
+			width: r.width,
+			height: r.height,
+			blocks: r.blocks.map((e) => ({
+				...e,
+				props: { ...e.props }
+			}))
+		}, n.value[t] = { id: null };
+	}
+	function a(t) {
+		delete e.value[t], delete n.value[t];
+	}
+	function c(e, t) {
+		let n = r(e), i = l(`block-${t}`);
+		return n.blocks = [...n.blocks, {
+			id: i,
+			type: t,
+			x: 16,
+			y: 16,
+			width: o,
+			height: s,
+			props: f(t)
+		}], i;
+	}
+	function u(e, t) {
+		let i = r(e);
+		i.blocks = i.blocks.filter((e) => e.id !== t), n.value[e]?.id === t && (n.value[e] = { id: null });
+	}
+	function p(e, t, n) {
+		let i = r(e), a = i.blocks.findIndex((e) => e.id === t);
+		if (a < 0) return;
+		let o = i.blocks[a], s = [...i.blocks];
+		s[a] = {
+			...o,
+			...n
+		}, i.blocks = s;
+	}
+	function m(e, t) {
+		let n = r(e);
+		t.width !== void 0 && (n.width = t.width), t.height !== void 0 && (n.height = t.height);
+	}
+	function h(e, t) {
+		n.value[e] = { id: t };
+	}
+	function g(e) {
+		return n.value[e] ?? { id: null };
+	}
+	function _(e) {
+		return r(e);
+	}
+	return {
+		builders: e,
+		selections: n,
+		ensureBuilder: r,
+		loadSchema: i,
+		resetBuilder: a,
+		addBlock: c,
+		removeBlock: u,
+		updateBlock: p,
+		setCanvasSize: m,
+		select: h,
+		getSelection: g,
+		getSchema: _
+	};
+});
+function m(t) {
+	let n = p();
+	return n.ensureBuilder(t), {
+		schema: e(() => n.getSchema(t)),
+		selection: e(() => n.getSelection(t)),
+		addBlock: (e) => n.addBlock(t, e),
+		removeBlock: (e) => n.removeBlock(t, e),
+		updateBlock: (e, r) => n.updateBlock(t, e, r),
+		setCanvasSize: (e) => n.setCanvasSize(t, e),
+		select: (e) => n.select(t, e),
+		loadSchema: (e) => n.loadSchema(t, e),
+		reset: () => n.resetBuilder(t)
+	};
 }
-export {
-  U as REACTIVE_CANVAS_BLOCK_TYPES,
-  V as __resetReactiveCanvasBuilderIdCounter,
-  $ as useReactiveCanvasBuilder,
-  H as useReactiveCanvasBuilderStore
-};
-//# sourceMappingURL=reactiveCanvasBuilderStore.js.map
+//#endregion
+export { r as REACTIVE_CANVAS_BLOCK_TYPES, u as __resetReactiveCanvasBuilderIdCounter, m as useReactiveCanvasBuilder, p as useReactiveCanvasBuilderStore };
+
+//# sourceMappingURL=reactiveCanvasBuilderStore.js.map

package/dist/stores/reactiveCanvasBuilderStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactiveCanvasBuilderStore.js","sources":["../../src/stores/reactiveCanvasBuilderStore.ts"],"sourcesContent":["import { defineStore } from \"pinia\"\nimport { computed, ref } from \"vue\"\n\n/**\n * State for a single ReactiveCanvasBuilder instance. Multiple builders\n * can coexist on a page; each is keyed by `builderId`.\n *\n * A canvas is a fixed-size positioning surface. Blocks are absolutely\n * positioned by their `x` / `y` / `width` / `height`. Block `type`\n * resolves to a Vue component at runtime via a registry the consumer\n * supplies; for the MVP we treat `type` as an opaque string and let\n * the inspector edit it.\n */\n\nexport interface ReactiveCanvasBlock {\n  id: string\n  type: string\n  x: number\n  y: number\n  width: number\n  height: number\n  props: Record<string, unknown>\n}\n\nexport interface ReactiveCanvasBuilderSchema {\n  width: number\n  height: number\n  blocks: ReactiveCanvasBlock[]\n}\n\n/** Identifies which block is currently selected. */\nexport interface ReactiveCanvasBuilderSelection {\n  id: string | null\n}\n\n/** Built-in block types exposed by the palette in the MVP. */\nexport const REACTIVE_CANVAS_BLOCK_TYPES = [\n  \"text-block\",\n  \"image-block\",\n  \"button-block\",\n  \"spacer-block\",\n  \"container-block\",\n] as const\n\nexport type ReactiveCanvasBlockType =\n  (typeof REACTIVE_CANVAS_BLOCK_TYPES)[number]\n\nconst DEFAULT_CANVAS_WIDTH = 800\nconst DEFAULT_CANVAS_HEIGHT = 600\nconst DEFAULT_BLOCK_WIDTH = 160\nconst DEFAULT_BLOCK_HEIGHT = 80\n\nlet idCounter = 0\nfunction nextId(prefix: string): string {\n  idCounter += 1\n  return `${prefix}-${Date.now()}-${idCounter}`\n}\n\n/** Test helper to make ids deterministic. */\nexport function __resetReactiveCanvasBuilderIdCounter(): void {\n  idCounter = 0\n}\n\nfunction emptySchema(): ReactiveCanvasBuilderSchema {\n  return {\n    width: DEFAULT_CANVAS_WIDTH,\n    height: DEFAULT_CANVAS_HEIGHT,\n    blocks: [],\n  }\n}\n\nfunction defaultPropsForType(type: string): Record<string, unknown> {\n  switch (type) {\n    case \"text-block\":\n      return { text: \"Sample text\" }\n    case \"image-block\":\n      return { src: \"\", alt: \"\" }\n    case \"button-block\":\n      return { label: \"Click me\", action: \"\" }\n    case \"spacer-block\":\n      return {}\n    case \"container-block\":\n      return { padding: 8 }\n    default:\n      return {}\n  }\n}\n\nexport const useReactiveCanvasBuilderStore = defineStore(\n  \"gx-modui/reactiveCanvasBuilder\",\n  () => {\n    const builders = ref<Record<string, ReactiveCanvasBuilderSchema>>({})\n    const selections = ref<\n      Record<string, ReactiveCanvasBuilderSelection>\n    >({})\n\n    function ensureBuilder(builderId: string): ReactiveCanvasBuilderSchema {\n      if (!builders.value[builderId]) {\n        builders.value[builderId] = emptySchema()\n        selections.value[builderId] = { id: null }\n      }\n      return builders.value[builderId]!\n    }\n\n    function loadSchema(\n      builderId: string,\n      schema: ReactiveCanvasBuilderSchema,\n    ): void {\n      builders.value[builderId] = {\n        width: schema.width,\n        height: schema.height,\n        blocks: schema.blocks.map((b) => ({ ...b, props: { ...b.props } })),\n      }\n      selections.value[builderId] = { id: null }\n    }\n\n    function resetBuilder(builderId: string): void {\n      delete builders.value[builderId]\n      delete selections.value[builderId]\n    }\n\n    /** Append a new block of `type` and return its id. */\n    function addBlock(builderId: string, type: string): string {\n      const schema = ensureBuilder(builderId)\n      const id = nextId(`block-${type}`)\n      schema.blocks = [\n        ...schema.blocks,\n        {\n          id,\n          type,\n          x: 16,\n          y: 16,\n          width: DEFAULT_BLOCK_WIDTH,\n          height: DEFAULT_BLOCK_HEIGHT,\n          props: defaultPropsForType(type),\n        },\n      ]\n      return id\n    }\n\n    function removeBlock(builderId: string, blockId: string): void {\n      const schema = ensureBuilder(builderId)\n      schema.blocks = schema.blocks.filter((b) => b.id !== blockId)\n      const sel = selections.value[builderId]\n      if (sel?.id === blockId) {\n        selections.value[builderId] = { id: null }\n      }\n    }\n\n    function updateBlock(\n      builderId: string,\n      blockId: string,\n      patch: Partial<Omit<ReactiveCanvasBlock, \"id\">>,\n    ): void {\n      const schema = ensureBuilder(builderId)\n      const idx = schema.blocks.findIndex((b) => b.id === blockId)\n      if (idx < 0) {\n        return\n      }\n      const current = schema.blocks[idx]!\n      const list = [...schema.blocks]\n      list[idx] = { ...current, ...patch }\n      schema.blocks = list\n    }\n\n    function setCanvasSize(\n      builderId: string,\n      patch: { width?: number; height?: number },\n    ): void {\n      const schema = ensureBuilder(builderId)\n      if (patch.width !== undefined) {\n        schema.width = patch.width\n      }\n      if (patch.height !== undefined) {\n        schema.height = patch.height\n      }\n    }\n\n    function select(builderId: string, id: string | null): void {\n      selections.value[builderId] = { id }\n    }\n\n    function getSelection(\n      builderId: string,\n    ): ReactiveCanvasBuilderSelection {\n      return selections.value[builderId] ?? { id: null }\n    }\n\n    function getSchema(builderId: string): ReactiveCanvasBuilderSchema {\n      return ensureBuilder(builderId)\n    }\n\n    return {\n      builders,\n      selections,\n      ensureBuilder,\n      loadSchema,\n      resetBuilder,\n      addBlock,\n      removeBlock,\n      updateBlock,\n      setCanvasSize,\n      select,\n      getSelection,\n      getSchema,\n    }\n  },\n)\n\n/** Composable wrapper around `useReactiveCanvasBuilderStore`. */\nexport function useReactiveCanvasBuilder(builderId: string) {\n  const store = useReactiveCanvasBuilderStore()\n  store.ensureBuilder(builderId)\n  return {\n    schema: computed<ReactiveCanvasBuilderSchema>(() =>\n      store.getSchema(builderId),\n    ),\n    selection: computed<ReactiveCanvasBuilderSelection>(() =>\n      store.getSelection(builderId),\n    ),\n    addBlock: (type: string) => store.addBlock(builderId, type),\n    removeBlock: (id: string) => store.removeBlock(builderId, id),\n    updateBlock: (\n      id: string,\n      patch: Partial<Omit<ReactiveCanvasBlock, \"id\">>,\n    ) => store.updateBlock(builderId, id, patch),\n    setCanvasSize: (patch: { width?: number; height?: number }) =>\n      store.setCanvasSize(builderId, patch),\n    select: (id: string | null) => store.select(builderId, id),\n    loadSchema: (schema: ReactiveCanvasBuilderSchema) =>\n      store.loadSchema(builderId, schema),\n    reset: () => store.resetBuilder(builderId),\n  }\n}\n"],"names":["REACTIVE_CANVAS_BLOCK_TYPES","DEFAULT_CANVAS_WIDTH","DEFAULT_CANVAS_HEIGHT","DEFAULT_BLOCK_WIDTH","DEFAULT_BLOCK_HEIGHT","idCounter","nextId","prefix","__resetReactiveCanvasBuilderIdCounter","emptySchema","defaultPropsForType","type","useReactiveCanvasBuilderStore","defineStore","builders","ref","selections","ensureBuilder","builderId","loadSchema","schema","b","resetBuilder","addBlock","id","removeBlock","blockId","sel","updateBlock","patch","idx","current","list","setCanvasSize","select","getSelection","getSchema","useReactiveCanvasBuilder","store","computed"],"mappings":"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"}
+{"version":3,"file":"reactiveCanvasBuilderStore.js","names":[],"sources":["../../src/stores/reactiveCanvasBuilderStore.ts"],"sourcesContent":["import { defineStore } from \"pinia\"\nimport { computed, ref } from \"vue\"\n\n/**\n * State for a single ReactiveCanvasBuilder instance. Multiple builders\n * can coexist on a page; each is keyed by `builderId`.\n *\n * A canvas is a fixed-size positioning surface. Blocks are absolutely\n * positioned by their `x` / `y` / `width` / `height`. Block `type`\n * resolves to a Vue component at runtime via a registry the consumer\n * supplies; for the MVP we treat `type` as an opaque string and let\n * the inspector edit it.\n */\n\nexport interface ReactiveCanvasBlock {\n  id: string\n  type: string\n  x: number\n  y: number\n  width: number\n  height: number\n  props: Record<string, unknown>\n}\n\nexport interface ReactiveCanvasBuilderSchema {\n  width: number\n  height: number\n  blocks: ReactiveCanvasBlock[]\n}\n\n/** Identifies which block is currently selected. */\nexport interface ReactiveCanvasBuilderSelection {\n  id: string | null\n}\n\n/** Built-in block types exposed by the palette in the MVP. */\nexport const REACTIVE_CANVAS_BLOCK_TYPES = [\n  \"text-block\",\n  \"image-block\",\n  \"button-block\",\n  \"spacer-block\",\n  \"container-block\",\n] as const\n\nexport type ReactiveCanvasBlockType =\n  (typeof REACTIVE_CANVAS_BLOCK_TYPES)[number]\n\nconst DEFAULT_CANVAS_WIDTH = 800\nconst DEFAULT_CANVAS_HEIGHT = 600\nconst DEFAULT_BLOCK_WIDTH = 160\nconst DEFAULT_BLOCK_HEIGHT = 80\n\nlet idCounter = 0\nfunction nextId(prefix: string): string {\n  idCounter += 1\n  return `${prefix}-${Date.now()}-${idCounter}`\n}\n\n/** Test helper to make ids deterministic. */\nexport function __resetReactiveCanvasBuilderIdCounter(): void {\n  idCounter = 0\n}\n\nfunction emptySchema(): ReactiveCanvasBuilderSchema {\n  return {\n    width: DEFAULT_CANVAS_WIDTH,\n    height: DEFAULT_CANVAS_HEIGHT,\n    blocks: [],\n  }\n}\n\nfunction defaultPropsForType(type: string): Record<string, unknown> {\n  switch (type) {\n    case \"text-block\":\n      return { text: \"Sample text\" }\n    case \"image-block\":\n      return { src: \"\", alt: \"\" }\n    case \"button-block\":\n      return { label: \"Click me\", action: \"\" }\n    case \"spacer-block\":\n      return {}\n    case \"container-block\":\n      return { padding: 8 }\n    default:\n      return {}\n  }\n}\n\nexport const useReactiveCanvasBuilderStore = defineStore(\n  \"gx-modui/reactiveCanvasBuilder\",\n  () => {\n    const builders = ref<Record<string, ReactiveCanvasBuilderSchema>>({})\n    const selections = ref<\n      Record<string, ReactiveCanvasBuilderSelection>\n    >({})\n\n    function ensureBuilder(builderId: string): ReactiveCanvasBuilderSchema {\n      if (!builders.value[builderId]) {\n        builders.value[builderId] = emptySchema()\n        selections.value[builderId] = { id: null }\n      }\n      return builders.value[builderId]!\n    }\n\n    function loadSchema(\n      builderId: string,\n      schema: ReactiveCanvasBuilderSchema,\n    ): void {\n      builders.value[builderId] = {\n        width: schema.width,\n        height: schema.height,\n        blocks: schema.blocks.map((b) => ({ ...b, props: { ...b.props } })),\n      }\n      selections.value[builderId] = { id: null }\n    }\n\n    function resetBuilder(builderId: string): void {\n      delete builders.value[builderId]\n      delete selections.value[builderId]\n    }\n\n    /** Append a new block of `type` and return its id. */\n    function addBlock(builderId: string, type: string): string {\n      const schema = ensureBuilder(builderId)\n      const id = nextId(`block-${type}`)\n      schema.blocks = [\n        ...schema.blocks,\n        {\n          id,\n          type,\n          x: 16,\n          y: 16,\n          width: DEFAULT_BLOCK_WIDTH,\n          height: DEFAULT_BLOCK_HEIGHT,\n          props: defaultPropsForType(type),\n        },\n      ]\n      return id\n    }\n\n    function removeBlock(builderId: string, blockId: string): void {\n      const schema = ensureBuilder(builderId)\n      schema.blocks = schema.blocks.filter((b) => b.id !== blockId)\n      const sel = selections.value[builderId]\n      if (sel?.id === blockId) {\n        selections.value[builderId] = { id: null }\n      }\n    }\n\n    function updateBlock(\n      builderId: string,\n      blockId: string,\n      patch: Partial<Omit<ReactiveCanvasBlock, \"id\">>,\n    ): void {\n      const schema = ensureBuilder(builderId)\n      const idx = schema.blocks.findIndex((b) => b.id === blockId)\n      if (idx < 0) {\n        return\n      }\n      const current = schema.blocks[idx]!\n      const list = [...schema.blocks]\n      list[idx] = { ...current, ...patch }\n      schema.blocks = list\n    }\n\n    function setCanvasSize(\n      builderId: string,\n      patch: { width?: number; height?: number },\n    ): void {\n      const schema = ensureBuilder(builderId)\n      if (patch.width !== undefined) {\n        schema.width = patch.width\n      }\n      if (patch.height !== undefined) {\n        schema.height = patch.height\n      }\n    }\n\n    function select(builderId: string, id: string | null): void {\n      selections.value[builderId] = { id }\n    }\n\n    function getSelection(\n      builderId: string,\n    ): ReactiveCanvasBuilderSelection {\n      return selections.value[builderId] ?? { id: null }\n    }\n\n    function getSchema(builderId: string): ReactiveCanvasBuilderSchema {\n      return ensureBuilder(builderId)\n    }\n\n    return {\n      builders,\n      selections,\n      ensureBuilder,\n      loadSchema,\n      resetBuilder,\n      addBlock,\n      removeBlock,\n      updateBlock,\n      setCanvasSize,\n      select,\n      getSelection,\n      getSchema,\n    }\n  },\n)\n\n/** Composable wrapper around `useReactiveCanvasBuilderStore`. */\nexport function useReactiveCanvasBuilder(builderId: string) {\n  const store = useReactiveCanvasBuilderStore()\n  store.ensureBuilder(builderId)\n  return {\n    schema: computed<ReactiveCanvasBuilderSchema>(() =>\n      store.getSchema(builderId),\n    ),\n    selection: computed<ReactiveCanvasBuilderSelection>(() =>\n      store.getSelection(builderId),\n    ),\n    addBlock: (type: string) => store.addBlock(builderId, type),\n    removeBlock: (id: string) => store.removeBlock(builderId, id),\n    updateBlock: (\n      id: string,\n      patch: Partial<Omit<ReactiveCanvasBlock, \"id\">>,\n    ) => store.updateBlock(builderId, id, patch),\n    setCanvasSize: (patch: { width?: number; height?: number }) =>\n      store.setCanvasSize(builderId, patch),\n    select: (id: string | null) => store.select(builderId, id),\n    loadSchema: (schema: ReactiveCanvasBuilderSchema) =>\n      store.loadSchema(builderId, schema),\n    reset: () => store.resetBuilder(builderId),\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxp-dev/mod-ui",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "JSON-driven Vue 3 module UI component library for the GxP platform. Provides shadcn-vue primitives, a templating engine (IndexPage / ShowPage), card/element renderers, and a FormBuilder.",
   "type": "module",
   "files": [
@@ -81,6 +81,7 @@
     "@ericblade/quagga2": "^1.12.1",
     "@fix-webm-duration/fix": "^1.0.1",
     "@internationalized/date": "^3.12.1",
+    "@lucide/vue": "^1.0.0",
     "@tiptap/extension-color": ">=2.0.0",
     "@tiptap/extension-font-family": ">=2.0.0",
     "@tiptap/extension-image": ">=2.0.0",
@@ -101,7 +102,6 @@
     "embla-carousel-vue": "^8.6.0",
     "jsbarcode": "^3.12.1",
     "leaflet": "^1.9.4",
-    "lucide-vue-next": "^0.344.0",
     "pinia": "^2.2.0 || ^3.0.0",
     "qrcode": "^1.5.4",
     "reka-ui": "^2.8.0",
@@ -218,33 +218,33 @@
     "@types/leaflet": "1.9.21"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^9.1.20",
-    "@storybook/addon-docs": "^9.1.20",
-    "@storybook/addon-themes": "^9.1.20",
-    "@storybook/addon-vitest": "^9.1.20",
-    "@storybook/vue3": "^9.1.20",
-    "@storybook/vue3-vite": "^9.1.20",
+    "@lucide/vue": "^1.16.0",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/addon-themes": "^10.4.1",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/vue3-vite": "^10.4.1",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.0",
-    "@types/node": "^22.0.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/node": "^22.19.19",
     "@types/qrcode": "^1.5.6",
-    "@vitejs/plugin-vue": "^5.2.0",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.0.0",
-    "eslint-plugin-storybook": "^10.1.4",
-    "jsdom": "^26.0.0",
-    "pinia": "^3.0.0",
-    "storybook": "^9.1.20",
-    "tailwindcss": "^4.1.0",
-    "typescript": "^5.6.0",
-    "vite": "^6.0.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/coverage-v8": "^4.1.7",
+    "@vitest/ui": "^4.1.7",
+    "@vue/test-utils": "^2.4.10",
+    "eslint": "^9.39.4",
+    "eslint-plugin-storybook": "^10.4.1",
+    "jsdom": "^26.1.0",
+    "pinia": "^3.0.4",
+    "storybook": "^10.4.1",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.14",
     "vite-plugin-css-injected-by-js": "^5.0.1",
-    "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.2.4",
-    "vue": "^3.5.0",
-    "vue-tsc": "^2.2.0"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.7",
+    "vue": "^3.5.34",
+    "vue-tsc": "^2.2.12"
   },
   "keywords": [
     "vue",

package/src/components/compositions/cards/CardListCard.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { DisplayCard } from "@/definitions/cards"
 import CardListCard from "./CardListCard.vue"
 import { componentDoc } from "@/lib/storybook"

package/src/components/compositions/cards/DataTableCard.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import DataTableCard from "./DataTableCard.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/cards/ElementDisplayCard.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { InputElement } from "@/definitions/elements/InputElement"
 import ElementDisplayCard from "./ElementDisplayCard.vue"
 import { componentDoc } from "@/lib/storybook"

package/src/components/compositions/cards/ElementListCard.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { CardElement } from "@/definitions/elements"
 import type { InputElement } from "@/definitions/elements/InputElement"
 import ElementListCard from "./ElementListCard.vue"

package/src/components/compositions/cards/GridViewCard.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { DisplayCard } from "@/definitions/cards"
 import GridViewCard from "./GridViewCard.vue"
 import { componentDoc } from "@/lib/storybook"

package/src/components/compositions/cards/InfoCard.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import InfoCard from "./InfoCard.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/cards/TabListCard.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { DisplayCard } from "@/definitions/cards"
 import TabListCard from "./TabListCard.vue"
 import { componentDoc } from "@/lib/storybook"

package/src/components/compositions/elements/action/ButtonAction.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import ButtonAction from "./ButtonAction.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/elements/action/ButtonAction.vue

@@ -13,7 +13,7 @@
  * don't need label/help/error chrome.
  */
 import { computed, ref } from "vue"
-import * as LucideIcons from "lucide-vue-next"
+import * as LucideIcons from "@lucide/vue"
 import type { FunctionalComponent } from "vue"
 
 type LucideIcon = FunctionalComponent

package/src/components/compositions/elements/action/ButtonGroupAction.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import ButtonGroupAction from "./ButtonGroupAction.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/elements/action/ButtonGroupAction.vue

@@ -13,7 +13,7 @@
  *   />
  */
 import { computed } from "vue"
-import * as LucideIcons from "lucide-vue-next"
+import * as LucideIcons from "@lucide/vue"
 import type { FunctionalComponent } from "vue"
 
 type LucideIcon = FunctionalComponent

package/src/components/compositions/elements/action/LinkAction.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import LinkAction from "./LinkAction.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/elements/action/LinkAction.vue

@@ -8,7 +8,7 @@
  *   <LinkAction label="Refresh" emit="refresh" @action="onAction" />
  */
 import { computed } from "vue"
-import * as LucideIcons from "lucide-vue-next"
+import * as LucideIcons from "@lucide/vue"
 import type { FunctionalComponent } from "vue"
 
 type LucideIcon = FunctionalComponent

package/src/components/compositions/elements/boolean/CheckboxBoolean.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import CheckboxBoolean from "./CheckboxBoolean.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/elements/boolean/IconToggleBoolean.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import IconToggleBoolean from "./IconToggleBoolean.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/elements/boolean/IconToggleBoolean.vue

@@ -2,7 +2,7 @@
 /**
  * Props-driven icon-toggle composition. Renders a Toggle primitive that
  * shows `trueIcon` when pressed and `falseIcon` when not. Icons are
- * looked up from `lucide-vue-next` by name; missing icons fall back to
+ * looked up from `@lucide/vue` by name; missing icons fall back to
  * `ToggleRight` / `ToggleLeft`.
  *
  *   <IconToggleBoolean
@@ -13,8 +13,8 @@
  *   />
  */
 import { computed } from "vue"
-import { ToggleLeft, ToggleRight } from "lucide-vue-next"
-import * as LucideIcons from "lucide-vue-next"
+import { ToggleLeft, ToggleRight } from "@lucide/vue"
+import * as LucideIcons from "@lucide/vue"
 import type { FunctionalComponent } from "vue"
 
 type LucideIcon = FunctionalComponent

package/src/components/compositions/elements/boolean/RadioBoolean.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import RadioBoolean from "./RadioBoolean.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/elements/boolean/SwitchBoolean.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import SwitchBoolean from "./SwitchBoolean.vue"
 import { componentDoc } from "@/lib/storybook"
 

package/src/components/compositions/elements/builder/DependencyListBuilder.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { DependencyListBuilderSchema } from "@/stores/dependencyListBuilderStore"
 import DependencyListBuilder from "./DependencyListBuilder.vue"
 

package/src/components/compositions/elements/builder/DependencyListBuilder.vue

@@ -14,7 +14,7 @@
  * full `DependencyListBuilderSchema` via `defineModel`.
  */
 import { computed, onMounted, ref, watch } from "vue"
-import { Plus, Trash2, X } from "lucide-vue-next"
+import { Plus, Trash2, X } from "@lucide/vue"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {

package/src/components/compositions/elements/builder/ElementListBuilder.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { ElementListBuilderSchema } from "@/stores/elementListBuilderStore"
 import ElementListBuilder from "./ElementListBuilder.vue"
 

package/src/components/compositions/elements/builder/ElementListBuilder.vue

@@ -19,7 +19,7 @@
  * `update:modelValue` on every mutation.
  */
 import { computed, onMounted, ref, watch } from "vue"
-import { ArrowDown, ArrowUp, Plus, Trash2, X } from "lucide-vue-next"
+import { ArrowDown, ArrowUp, Plus, Trash2, X } from "@lucide/vue"
 import type { CardElement } from "@/definitions/elements"
 import { CardElementMetadataMap } from "@/definitions/elements"
 import { Badge } from "@/components/ui/badge"

package/src/components/compositions/elements/builder/FormBuilder.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { BuilderSchema } from "@/stores/formBuilderStore"
 import FormBuilder from "./FormBuilder.vue"
 import { componentDoc } from "@/lib/storybook"

package/src/components/compositions/elements/builder/FormBuilder.vue

@@ -39,7 +39,7 @@ import {
   Plus,
   Trash2,
   X,
-} from "lucide-vue-next"
+} from "@lucide/vue"
 import type { CardElement } from "@/definitions/elements"
 import { CardElementMetadataMap, CardElementStylesMap, getElementEditConfig } from "@/definitions/elements"
 import type { EditConfigField } from "@/definitions/shared/base"

package/src/components/compositions/elements/builder/GridBuilder.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { GridBuilderSchema } from "@/stores/gridBuilderStore"
 import GridBuilder from "./GridBuilder.vue"
 import { componentDoc } from "@/lib/storybook"

package/src/components/compositions/elements/builder/GridBuilder.vue

@@ -23,7 +23,7 @@
  * schema on every mutation so the host page can persist it.
  */
 import { computed, onMounted, onBeforeUnmount, ref, watch } from "vue"
-import { Plus, Trash2, X } from "lucide-vue-next"
+import { Plus, Trash2, X } from "@lucide/vue"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {

package/src/components/compositions/elements/builder/ObjectBuilder.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { ObjectBuilderSchema } from "@/stores/objectBuilderStore"
 import ObjectBuilder from "./ObjectBuilder.vue"