@gxp-dev/mod-ui 2.0.10 → 2.0.14

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.test.ts

@@ -44,9 +44,13 @@ function stubGridRect(
 
 function dispatchPointer(
   target: EventTarget,
-  type: "pointermove" | "pointerup",
-  init: { clientX?: number; clientY?: number } = {},
+  type: "pointerdown" | "pointermove" | "pointerup",
+  init: { clientX?: number; clientY?: number; button?: number } = {},
 ): void {
+  // Construct the event via its constructor with all properties set in
+  // init — jsdom 27+ enforces that clientX/Y are read-only after
+  // construction, so assigning them later (as @vue/test-utils' .trigger()
+  // does internally) throws.
   const Ctor =
     (window as unknown as { PointerEvent?: typeof MouseEvent }).PointerEvent ??
     MouseEvent
@@ -55,6 +59,7 @@ function dispatchPointer(
     cancelable: true,
     clientX: init.clientX ?? 0,
     clientY: init.clientY ?? 0,
+    button: init.button ?? 0,
   })
   target.dispatchEvent(event)
 }
@@ -230,9 +235,11 @@ describe("GridBuilder", () => {
       const store = useGridBuilderStore()
       const cellId = store.getSchema(BUILDER_ID).items[0]!.id
 
-      await wrapper
-        .find(`[data-testid='grid-builder-cell-${cellId}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='grid-builder-cell-${cellId}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: 100, clientY: 60 })
       dispatchPointer(window, "pointerup", { clientX: 100, clientY: 60 })
 
@@ -253,9 +260,11 @@ describe("GridBuilder", () => {
       const store = useGridBuilderStore()
       const cellId = store.getSchema(BUILDER_ID).items[0]!.id
 
-      await wrapper
-        .find(`[data-testid='grid-builder-resize-${cellId}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='grid-builder-resize-${cellId}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       // +200px x -> +2 cols. +120px y / 60px rowHeight -> +2 rows.
       dispatchPointer(window, "pointermove", { clientX: 200, clientY: 120 })
       dispatchPointer(window, "pointerup", { clientX: 200, clientY: 120 })
@@ -277,9 +286,11 @@ describe("GridBuilder", () => {
       const store = useGridBuilderStore()
       const cellId = store.getSchema(BUILDER_ID).items[0]!.id
 
-      await wrapper
-        .find(`[data-testid='grid-builder-resize-${cellId}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='grid-builder-resize-${cellId}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       // Drag massively to the left/up to try to shrink past zero.
       dispatchPointer(window, "pointermove", {
         clientX: -2000,
@@ -312,9 +323,11 @@ describe("GridBuilder", () => {
       stubGridRect(wrapper, 600, 6)
       const store = useGridBuilderStore()
 
-      await wrapper
-        .find("[data-testid='grid-builder-cell-only']")
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find("[data-testid='grid-builder-cell-only']").element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: 200, clientY: 100 })
       dispatchPointer(window, "pointerup", { clientX: 200, clientY: 100 })
 
@@ -342,9 +355,11 @@ describe("GridBuilder", () => {
       expect(first && second).toBeTruthy()
 
       // Drag the first cell, then release.
-      await wrapper
-        .find(`[data-testid='grid-builder-cell-${first!.id}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='grid-builder-cell-${first!.id}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: 100, clientY: 0 })
       dispatchPointer(window, "pointerup", { clientX: 100, clientY: 0 })
       const firstAfter = store
@@ -361,9 +376,11 @@ describe("GridBuilder", () => {
       expect(firstStill.x).toBe(firstX)
 
       // Drag the second cell — its update should land independently.
-      await wrapper
-        .find(`[data-testid='grid-builder-cell-${second!.id}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='grid-builder-cell-${second!.id}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: 300, clientY: 60 })
       dispatchPointer(window, "pointerup", { clientX: 300, clientY: 60 })
       const secondAfter = store
@@ -386,9 +403,11 @@ describe("GridBuilder", () => {
       const cellId = store.getSchema(BUILDER_ID).items[0]!.id
 
       // Drag the cell two cols right.
-      await wrapper
-        .find(`[data-testid='grid-builder-cell-${cellId}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='grid-builder-cell-${cellId}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: 200, clientY: 0 })
       dispatchPointer(window, "pointerup", { clientX: 200, clientY: 0 })
 

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"
 

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

@@ -20,7 +20,7 @@
  * through `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 { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { PresetBuilderSchema } from "@/stores/presetBuilderStore"
 import PresetBuilder from "./PresetBuilder.vue"
 

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

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

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

@@ -20,7 +20,7 @@
  * schema on every mutation.
  */
 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/ReactiveCanvasBuilder.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import type { ReactiveCanvasBuilderSchema } from "@/stores/reactiveCanvasBuilderStore"
 import ReactiveCanvasBuilder from "./ReactiveCanvasBuilder.vue"
 

package/src/components/compositions/elements/builder/ReactiveCanvasBuilder.test.ts

@@ -13,9 +13,13 @@ const BUILDER_ID = "rcb-test"
 
 function dispatchPointer(
   target: EventTarget,
-  type: "pointermove" | "pointerup",
-  init: { clientX?: number; clientY?: number } = {},
+  type: "pointerdown" | "pointermove" | "pointerup",
+  init: { clientX?: number; clientY?: number; button?: number } = {},
 ): void {
+  // Construct the event via its constructor with all properties set in
+  // init — jsdom 27+ enforces that clientX/Y are read-only after
+  // construction, so assigning them later (as @vue/test-utils' .trigger()
+  // does internally) throws.
   const Ctor =
     (window as unknown as { PointerEvent?: typeof MouseEvent }).PointerEvent ??
     MouseEvent
@@ -24,6 +28,7 @@ function dispatchPointer(
     cancelable: true,
     clientX: init.clientX ?? 0,
     clientY: init.clientY ?? 0,
+    button: init.button ?? 0,
   })
   target.dispatchEvent(event)
 }
@@ -246,9 +251,11 @@ describe("ReactiveCanvasBuilder", () => {
       const startX = block.x
       const startY = block.y
 
-      await wrapper
-        .find(`[data-testid='reactive-canvas-builder-block-${block.id}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='reactive-canvas-builder-block-${block.id}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: 42, clientY: 30 })
       dispatchPointer(window, "pointerup", { clientX: 42, clientY: 30 })
 
@@ -270,11 +277,11 @@ describe("ReactiveCanvasBuilder", () => {
       const startW = block.width
       const startH = block.height
 
-      await wrapper
-        .find(
-          `[data-testid='reactive-canvas-builder-block-${block.id}-resize-br']`,
-        )
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='reactive-canvas-builder-block-${block.id}-resize-br']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: 50, clientY: 30 })
       dispatchPointer(window, "pointerup", { clientX: 50, clientY: 30 })
 
@@ -301,11 +308,11 @@ describe("ReactiveCanvasBuilder", () => {
       const startW = block.width
       const startH = block.height
 
-      await wrapper
-        .find(
-          `[data-testid='reactive-canvas-builder-block-${block.id}-resize-tl']`,
-        )
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='reactive-canvas-builder-block-${block.id}-resize-tl']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: -10, clientY: -20 })
       dispatchPointer(window, "pointerup", { clientX: -10, clientY: -20 })
 
@@ -327,11 +334,11 @@ describe("ReactiveCanvasBuilder", () => {
       const store = useReactiveCanvasBuilderStore()
       const block = store.getSchema(BUILDER_ID).blocks[0]!
 
-      await wrapper
-        .find(
-          `[data-testid='reactive-canvas-builder-block-${block.id}-resize-br']`,
-        )
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='reactive-canvas-builder-block-${block.id}-resize-br']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", {
         clientX: -10000,
         clientY: -10000,
@@ -358,9 +365,11 @@ describe("ReactiveCanvasBuilder", () => {
       const schema = store.getSchema(BUILDER_ID)
       const block = schema.blocks[0]!
 
-      await wrapper
-        .find(`[data-testid='reactive-canvas-builder-block-${block.id}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='reactive-canvas-builder-block-${block.id}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       // Try to drag well past the right edge.
       dispatchPointer(window, "pointermove", {
         clientX: 10000,
@@ -396,9 +405,11 @@ describe("ReactiveCanvasBuilder", () => {
       store.select(BUILDER_ID, null)
       expect(store.getSelection(BUILDER_ID).id).toBeNull()
 
-      await wrapper
-        .find(`[data-testid='reactive-canvas-builder-block-${first!.id}']`)
-        .trigger("pointerdown", { clientX: 0, clientY: 0, button: 0 })
+      dispatchPointer(
+        wrapper.find(`[data-testid='reactive-canvas-builder-block-${first!.id}']`).element,
+        "pointerdown",
+        { clientX: 0, clientY: 0, button: 0 },
+      )
       dispatchPointer(window, "pointermove", { clientX: 5, clientY: 5 })
       dispatchPointer(window, "pointerup", { clientX: 5, clientY: 5 })
 

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

@@ -21,7 +21,7 @@
  * full `ReactiveCanvasBuilderSchema` via `defineModel`.
  */
 import { computed, onBeforeUnmount, 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/code/BuildStatus.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import { onBeforeUnmount, ref, type Ref } from "vue"
 import BuildStatus from "./BuildStatus.vue"
 import type { BuildStatusEvent } from "./BuildStatus.vue"

package/src/components/compositions/elements/code/BuildStatus.test.ts

@@ -1,11 +1,14 @@
 import { describe, expect, it, vi } from "vitest"
+import type { Mock } from "vitest"
 import { flushPromises, mount } from "@vue/test-utils"
 import BuildStatus from "./BuildStatus.vue"
 import type { BuildStatusEvent } from "./BuildStatus.vue"
 
+type StreamListener = (type: string, listener: (e: { data: unknown }) => void) => void
+
 interface FakeStream {
-  addEventListener: ReturnType<typeof vi.fn>
-  removeEventListener: ReturnType<typeof vi.fn>
+  addEventListener: Mock<StreamListener>
+  removeEventListener: Mock<StreamListener>
   emit: (data: unknown) => void
 }
 

package/src/components/compositions/elements/code/BuildStatus.vue

@@ -24,7 +24,7 @@ import {
   Clock,
   Loader2,
   XCircle,
-} from "lucide-vue-next"
+} from "@lucide/vue"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {

package/src/components/compositions/elements/code/ChatMessage.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { Meta, StoryObj } from "@storybook/vue3-vite"
 import ChatMessage from "./ChatMessage.vue"
 
 const meta = {

package/src/components/compositions/elements/code/ChatMessage.vue

@@ -185,7 +185,7 @@ async function loadActionIcons(actions: ChatMessageAction[]): Promise<void> {
   if (needed.length === 0) {
     return
   }
-  const mod = await import("lucide-vue-next")
+  const mod = await import("@lucide/vue")
   const registry = mod as unknown as Record<string, Component | undefined>
   const next: Record<string, Component | null> = { ...ActionIcons.value }
   for (const raw of needed) {

package/src/components/compositions/elements/code/FileTree.stories.ts

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

package/src/components/compositions/elements/code/FileTree.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it, vi } from "vitest"
+import type { Mock } from "vitest"
 import { flushPromises, mount } from "@vue/test-utils"
 import FileTree from "./FileTree.vue"
 import type { TreeNode } from "./FileTree.vue"
@@ -15,10 +16,10 @@ const SRC_CHILDREN: TreeNode[] = [
   { path: "src/lib", name: "lib", kind: "directory" },
 ]
 
-function makeLoader(): {
-  fn: ReturnType<typeof vi.fn>
-} {
-  const fn = vi.fn(async (path: string) => {
+type LoadTree = (path: string) => Promise<TreeNode[]>
+
+function makeLoader(): { fn: Mock<LoadTree> } {
+  const fn = vi.fn<LoadTree>(async (path: string) => {
     if (path === "" || path === "/") {
       return ROOT_NODES
     }

package/src/components/compositions/elements/code/FileTree.vue

@@ -18,7 +18,7 @@ import {
   File as FileIcon,
   Folder,
   FolderOpen,
-} from "lucide-vue-next"
+} from "@lucide/vue"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { cn } from "@/lib/utils"

package/src/components/compositions/elements/code/GitCodeEditor.stories.ts

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

package/src/components/compositions/elements/code/GitCodeEditor.vue

@@ -17,7 +17,7 @@
  *   />
  */
 import { computed, onMounted, ref, watch } from "vue"
-import { GitBranch, Loader2, Save } from "lucide-vue-next"
+import { GitBranch, Loader2, Save } from "@lucide/vue"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { FieldFrame } from "@/components/ui/field-frame"

package/src/components/compositions/elements/code/PullRequestsList.stories.ts

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

package/src/components/compositions/elements/code/PullRequestsList.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it, vi } from "vitest"
+import type { Mock } from "vitest"
 import { flushPromises, mount } from "@vue/test-utils"
 import PullRequestsList from "./PullRequestsList.vue"
 import type {
@@ -6,6 +7,8 @@ import type {
   PullRequestsListFilter,
 } from "./PullRequestsList.vue"
 
+type LoadPRs = (filter?: PullRequestsListFilter) => Promise<PullRequest[]>
+
 const SAMPLE: PullRequest[] = [
   {
     id: "1",
@@ -35,8 +38,8 @@ const SAMPLE: PullRequest[] = [
   },
 ]
 
-function loader(): ReturnType<typeof vi.fn> {
-  return vi.fn(
+function loader(): Mock<LoadPRs> {
+  return vi.fn<LoadPRs>(
     async (_filter?: PullRequestsListFilter) => SAMPLE,
   )
 }

package/src/components/compositions/elements/code/PullRequestsList.vue

@@ -21,7 +21,7 @@ import {
   Loader2,
   Search,
   XCircle,
-} from "lucide-vue-next"
+} from "@lucide/vue"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

package/src/components/compositions/elements/configuration-block/DialogBlock.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 DialogBlock from "./DialogBlock.vue"
 

package/src/components/compositions/elements/configuration-block/DialogBlock.vue

@@ -6,7 +6,7 @@
  * trigger Button. Full FormBuilder integration arrives in task #7.
  */
 import { computed } from "vue"
-import { Construction } from "lucide-vue-next"
+import { Construction } from "@lucide/vue"
 import type { CardElement } from "@/definitions/elements"
 import {
   Dialog,