nuxt-ui-elements 0.1.40 → 0.1.41

package/README.md

@@ -21,6 +21,7 @@ This module extends Nuxt UI with additional components and utilities designed to
 - 🔄 **Auto-import** - Components and composables are automatically available
 - 🎯 **TypeScript** - Full type safety out of the box
 - 🌙 **Dark Mode** - Automatic theme switching compatible with Nuxt UI
+- 🔀 **Vue Flow Integration** - Themed wrapper components for interactive flowcharts and diagrams
 
 ## Requirements
 
@@ -154,6 +155,225 @@ async function handleDelete() {
 
 **Async Support**: When `onConfirm` returns a Promise, the dialog automatically shows loading state and displays success/error feedback before closing.
 
+### Flow Components
+
+Themed wrapper components for [Vue Flow](https://vueflow.dev/), providing interactive flowcharts and node-based diagrams with Nuxt UI theming integration.
+
+#### Prerequisites
+
+Flow components require the `@vue-flow` packages. Install them alongside `nuxt-ui-elements`:
+
+```bash
+pnpm add @vue-flow/core @vue-flow/background @vue-flow/controls @vue-flow/minimap
+```
+
+#### Flow
+
+The main container component that wraps Vue Flow with Nuxt UI theming and SSR safety via `<ClientOnly>`.
+
+```vue
+<script setup>
+const nodes = ref([
+  { id: '1', type: 'custom', position: { x: 0, y: 0 }, data: { label: 'Start' } },
+  { id: '2', type: 'custom', position: { x: 250, y: 100 }, data: { label: 'Process' } },
+])
+
+const edges = ref([
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+])
+</script>
+
+<template>
+  <UEFlow :nodes="nodes" :edges="edges" @connect="onConnect">
+    <template #node-custom="{ data }">
+      <UEFlowNode :label="data.label" color="primary" variant="outline">
+        <UEFlowHandle type="target" position="left" />
+        <UEFlowHandle type="source" position="right" />
+      </UEFlowNode>
+    </template>
+
+    <UEFlowBackground />
+    <UEFlowControls />
+    <UEFlowMiniMap />
+  </UEFlow>
+</template>
+```
+
+**Flow API:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `nodes` | `Node[]` | `[]` | Array of node objects |
+| `edges` | `Edge[]` | `[]` | Array of edge objects |
+| `nodeTypes` | `Record<string, any>` | `undefined` | Map of custom node type components |
+| `edgeTypes` | `Record<string, any>` | `undefined` | Map of custom edge type components |
+| `fitViewOnInit` | `boolean` | `true` | Fit view on initialization |
+| `minZoom` | `number` | `0.2` | Minimum zoom level |
+| `maxZoom` | `number` | `4` | Maximum zoom level |
+| `nodesDraggable` | `boolean` | `true` | Whether nodes are draggable |
+| `nodesConnectable` | `boolean` | `true` | Whether nodes are connectable |
+| `elementsSelectable` | `boolean` | `true` | Whether elements are selectable |
+| `connectionMode` | `ConnectionMode` | `undefined` | Connection mode |
+| `defaultEdgeOptions` | `Record<string, any>` | `undefined` | Default options for edges |
+| `ui` | `object` | `{}` | Custom UI classes override |
+
+**Events:**
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:nodes` | `Node[]` | Emitted when nodes change |
+| `update:edges` | `Edge[]` | Emitted when edges change |
+| `nodeClick` | `event` | Emitted on node click |
+| `edgeClick` | `event` | Emitted on edge click |
+| `paneClick` | `event` | Emitted on pane click |
+| `connect` | `params` | Emitted when a connection is made |
+
+**Slots:** All Vue Flow slots are forwarded, including custom node/edge type slots (e.g., `#node-custom`).
+
+#### FlowNode
+
+A styled node component with color and variant theming. Use inside custom node type slots.
+
+```vue
+<template #node-custom="{ data, selected }">
+  <UEFlowNode :label="data.label" color="success" variant="soft" :selected="selected">
+    <UEFlowHandle type="target" position="top" />
+    <template #default>
+      <p>Custom content here</p>
+    </template>
+    <UEFlowHandle type="source" position="bottom" />
+  </UEFlowNode>
+</template>
+```
+
+**FlowNode API:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `label` | `string` | `undefined` | Node label text |
+| `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'neutral'` | `'primary'` | Theme color |
+| `variant` | `'solid' \| 'outline' \| 'soft' \| 'subtle'` | `'outline'` | Visual variant |
+| `selected` | `boolean` | `false` | Whether the node is selected (adds ring indicator) |
+| `ui` | `object` | `{}` | Custom UI classes override |
+
+**Slots:**
+
+| Slot | Description |
+|------|-------------|
+| `default` | Custom content rendered below the label |
+
+#### FlowHandle
+
+A themed connection handle for nodes. Place inside `FlowNode` to define source/target connection points.
+
+```vue
+<UEFlowNode label="My Node" color="primary">
+  <UEFlowHandle type="target" position="top" color="primary" />
+  <UEFlowHandle type="source" position="bottom" color="primary" :connected="true" />
+</UEFlowNode>
+```
+
+**FlowHandle API:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `type` | `'source' \| 'target'` | **(required)** | Handle type |
+| `position` | `Position \| 'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Handle position on the node |
+| `id` | `string` | `undefined` | Handle ID (required when a node has multiple handles of the same type) |
+| `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'neutral'` | `'primary'` | Theme color |
+| `connected` | `boolean` | `false` | Whether a connection is active (fills the handle with color) |
+| `ui` | `object` | `{}` | Custom UI classes override |
+
+#### FlowBackground
+
+A themed background pattern for the flow canvas.
+
+```vue
+<UEFlow :nodes="nodes" :edges="edges">
+  <!-- Dot pattern (default) -->
+  <UEFlowBackground />
+
+  <!-- Line pattern with custom settings -->
+  <UEFlowBackground pattern="lines" :gap="30" :size="2" color="#ccc" />
+</UEFlow>
+```
+
+**FlowBackground API:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `pattern` | `'dots' \| 'lines'` | `'dots'` | Background pattern |
+| `gap` | `number \| number[]` | `20` | Pattern gap spacing |
+| `size` | `number` | `1` | Pattern element size |
+| `color` | `string` | `undefined` | Pattern color |
+| `lineWidth` | `number` | `undefined` | Line width (only for `lines` pattern) |
+| `ui` | `object` | `{}` | Custom UI classes override |
+
+#### FlowControls
+
+A themed control panel for zoom, fit view, and interactivity toggles.
+
+```vue
+<UEFlow :nodes="nodes" :edges="edges">
+  <!-- Default controls (all visible) -->
+  <UEFlowControls />
+
+  <!-- Only zoom and fit view -->
+  <UEFlowControls :show-interactive="false" position="top-left" />
+</UEFlow>
+```
+
+**FlowControls API:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `showZoom` | `boolean` | `true` | Show zoom in/out buttons |
+| `showFitView` | `boolean` | `true` | Show fit-view button |
+| `showInteractive` | `boolean` | `true` | Show interactive toggle |
+| `fitViewParams` | `FitViewParams` | `undefined` | Parameters for fit view action |
+| `position` | `PanelPositionType` | `'bottom-left'` | Panel position on the canvas |
+| `ui` | `object` | `{}` | Custom UI classes override |
+
+**Slots:**
+
+| Slot | Description |
+|------|-------------|
+| `default` | Additional custom controls |
+
+#### FlowMiniMap
+
+A themed minimap for navigating large flow diagrams.
+
+```vue
+<UEFlow :nodes="nodes" :edges="edges">
+  <!-- Default minimap -->
+  <UEFlowMiniMap />
+
+  <!-- Customized minimap -->
+  <UEFlowMiniMap
+    :pannable="true"
+    :zoomable="true"
+    position="top-right"
+    :node-border-radius="8"
+  />
+</UEFlow>
+```
+
+**FlowMiniMap API:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `pannable` | `boolean` | `true` | Enable drag to pan the viewport |
+| `zoomable` | `boolean` | `true` | Enable scroll to zoom the viewport |
+| `position` | `PanelPositionType` | `'bottom-right'` | Panel position on the canvas |
+| `nodeColor` | `string` | `undefined` | Node fill color in the minimap |
+| `nodeStrokeColor` | `string` | `undefined` | Node stroke color in the minimap |
+| `nodeBorderRadius` | `number` | `4` | Node border radius in the minimap |
+| `maskColor` | `string` | `undefined` | Viewport mask overlay color |
+| `width` | `number` | `undefined` | Minimap width |
+| `height` | `number` | `undefined` | Minimap height |
+| `ui` | `object` | `{}` | Custom UI classes override |
+
 ## Standard Utilities (`#std`)
 
 The module provides tree-shakeable utility functions via the `#std` alias. These are **not** auto-imported and must be explicitly imported.

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-ui-elements",
   "configKey": "uiElements",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -166,10 +166,222 @@ const toggleGroup = (_options) => ({
   }
 });
 
+const flow = (_options) => ({
+  slots: {
+    root: "w-full h-[500px] relative",
+    wrapper: ""
+  },
+  variants: {},
+  defaultVariants: {}
+});
+
+const flowNode = (options) => ({
+  slots: {
+    root: [
+      "rounded-lg border px-4 py-3 shadow-sm",
+      "transition-all duration-200",
+      "min-w-[150px]"
+    ],
+    label: "text-sm font-medium",
+    content: "text-xs mt-1 opacity-80"
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    variant: {
+      solid: "",
+      outline: "",
+      soft: "",
+      subtle: ""
+    },
+    selected: {
+      true: {
+        root: "ring-2 ring-offset-2 ring-offset-default"
+      },
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // Solid variants
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "solid",
+      class: {
+        root: `bg-${color} text-inverted border-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "solid",
+      class: {
+        root: "bg-inverted text-inverted border-inverted"
+      }
+    },
+    // Outline variants
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "outline",
+      class: {
+        root: `bg-default border-${color} text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "outline",
+      class: {
+        root: "bg-default border-accented text-highlighted"
+      }
+    },
+    // Soft variants
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "soft",
+      class: {
+        root: `bg-${color}/10 border-${color}/20 text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "soft",
+      class: {
+        root: "bg-elevated border-accented text-highlighted"
+      }
+    },
+    // Subtle variants
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      variant: "subtle",
+      class: {
+        root: `bg-${color}/5 border-transparent text-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      variant: "subtle",
+      class: {
+        root: "bg-elevated/50 border-transparent text-highlighted"
+      }
+    },
+    // Selected + color ring
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      selected: true,
+      class: {
+        root: `ring-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      selected: true,
+      class: {
+        root: "ring-accented"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "outline",
+    selected: false
+  }
+});
+
+const flowHandle = (options) => ({
+  slots: {
+    root: [
+      "!size-3 !rounded-full !border-2 !bg-default",
+      "transition-colors duration-150"
+    ]
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    connected: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // Default state: colored border, fill on hover
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      class: {
+        root: `!border-${color} hover:!bg-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      class: {
+        root: "!border-accented hover:!bg-inverted"
+      }
+    },
+    // Connected state: filled with color
+    ...(options.theme.colors || []).map((color) => ({
+      color,
+      connected: true,
+      class: {
+        root: `!bg-${color}`
+      }
+    })),
+    {
+      color: "neutral",
+      connected: true,
+      class: {
+        root: "!bg-inverted"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    connected: false
+  }
+});
+
+const flowBackground = (_options) => ({
+  slots: {
+    root: ""
+  },
+  variants: {
+    pattern: {
+      dots: "",
+      lines: ""
+    }
+  },
+  defaultVariants: {
+    pattern: "dots"
+  }
+});
+
+const flowControls = (_options) => ({
+  slots: {
+    root: "bg-default border border-accented rounded-lg shadow-sm overflow-hidden",
+    button: "p-2 hover:bg-elevated transition-colors border-b border-accented last:border-b-0"
+  },
+  variants: {},
+  defaultVariants: {}
+});
+
+const flowMiniMap = (_options) => ({
+  slots: {
+    root: "border border-accented rounded-lg shadow-sm overflow-hidden"
+  },
+  variants: {},
+  defaultVariants: {}
+});
+
 const theme = {
   __proto__: null,
   dialogAlert: dialogAlert,
   dialogConfirm: dialogConfirm,
+  flow: flow,
+  flowBackground: flowBackground,
+  flowControls: flowControls,
+  flowHandle: flowHandle,
+  flowMiniMap: flowMiniMap,
+  flowNode: flowNode,
   toggleGroup: toggleGroup
 };
 
@@ -288,6 +500,38 @@ const module$1 = defineNuxtModule({
       path: resolver.resolve("./runtime/components"),
       prefix: options.prefix
     });
+    try {
+      const vueFlowCorePath = resolver.resolve("@vue-flow/core");
+      if (vueFlowCorePath) {
+        nuxt.options.css.push("@vue-flow/core/dist/style.css");
+        nuxt.options.css.push("@vue-flow/core/dist/theme-default.css");
+        nuxt.options.build.transpile.push("@vue-flow/core");
+      }
+    } catch {
+    }
+    try {
+      const bgPath = resolver.resolve("@vue-flow/background");
+      if (bgPath) {
+        nuxt.options.build.transpile.push("@vue-flow/background");
+      }
+    } catch {
+    }
+    try {
+      const controlsPath = resolver.resolve("@vue-flow/controls");
+      if (controlsPath) {
+        nuxt.options.css.push("@vue-flow/controls/dist/style.css");
+        nuxt.options.build.transpile.push("@vue-flow/controls");
+      }
+    } catch {
+    }
+    try {
+      const minimapPath = resolver.resolve("@vue-flow/minimap");
+      if (minimapPath) {
+        nuxt.options.css.push("@vue-flow/minimap/dist/style.css");
+        nuxt.options.build.transpile.push("@vue-flow/minimap");
+      }
+    } catch {
+    }
   }
 });
 

package/dist/runtime/components/Flow.d.vue.ts

@@ -0,0 +1,65 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow";
+import type { ComponentConfig } from "../types/index.js";
+import type { Node, Edge, ConnectionMode } from "@vue-flow/core";
+type Flow = ComponentConfig<typeof theme, AppConfig, "flow">;
+export interface FlowProps {
+    /** Array of node objects */
+    nodes?: Node[];
+    /** Array of edge objects */
+    edges?: Edge[];
+    /** Map of custom node type components */
+    nodeTypes?: Record<string, any>;
+    /** Map of custom edge type components */
+    edgeTypes?: Record<string, any>;
+    /** Fit view on initialization */
+    fitViewOnInit?: boolean;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Whether nodes are draggable */
+    nodesDraggable?: boolean;
+    /** Whether nodes are connectable */
+    nodesConnectable?: boolean;
+    /** Whether elements are selectable */
+    elementsSelectable?: boolean;
+    /** Connection mode */
+    connectionMode?: ConnectionMode;
+    /** Default edge options */
+    defaultEdgeOptions?: Record<string, any>;
+    /** Theme slot overrides */
+    ui?: Flow["slots"];
+}
+export interface FlowEmits {
+    "update:nodes": [nodes: Node[]];
+    "update:edges": [edges: Edge[]];
+    nodeClick: [event: any];
+    edgeClick: [event: any];
+    paneClick: [event: any];
+    connect: [params: any];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:nodes": (nodes: Node<any, any, string>[]) => any;
+    "update:edges": (edges: Edge[]) => any;
+    nodeClick: (event: any) => any;
+    edgeClick: (event: any) => any;
+    paneClick: (event: any) => any;
+    connect: (params: any) => any;
+}, string, import("vue").PublicProps, Readonly<FlowProps> & Readonly<{
+    "onUpdate:nodes"?: ((nodes: Node<any, any, string>[]) => any) | undefined;
+    "onUpdate:edges"?: ((edges: Edge[]) => any) | undefined;
+    onNodeClick?: ((event: any) => any) | undefined;
+    onEdgeClick?: ((event: any) => any) | undefined;
+    onPaneClick?: ((event: any) => any) | undefined;
+    onConnect?: ((params: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: any) => any) | undefined;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Flow.vue

@@ -0,0 +1,71 @@
+<script>
+import theme from "#build/ui-elements/flow";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { VueFlow } from "@vue-flow/core";
+import { tv } from "../utils/tv";
+const {
+  nodes = [],
+  edges = [],
+  fitViewOnInit = true,
+  minZoom = 0.2,
+  maxZoom = 4,
+  nodesDraggable = true,
+  nodesConnectable = true,
+  elementsSelectable = true,
+  ui: uiProps = {}
+} = defineProps({
+  nodes: { type: Array, required: false },
+  edges: { type: Array, required: false },
+  nodeTypes: { type: Object, required: false },
+  edgeTypes: { type: Object, required: false },
+  fitViewOnInit: { type: Boolean, required: false },
+  minZoom: { type: Number, required: false },
+  maxZoom: { type: Number, required: false },
+  nodesDraggable: { type: Boolean, required: false },
+  nodesConnectable: { type: Boolean, required: false },
+  elementsSelectable: { type: Boolean, required: false },
+  connectionMode: { type: String, required: false },
+  defaultEdgeOptions: { type: Object, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:nodes", "update:edges", "nodeClick", "edgeClick", "paneClick", "connect"]);
+const ui = computed(() => tv({ extend: tv(theme) })({}));
+</script>
+
+<template>
+  <ClientOnly>
+    <div :class="ui.root({ class: uiProps?.root })">
+      <VueFlow
+        :nodes="nodes"
+        :edges="edges"
+        :node-types="nodeTypes"
+        :edge-types="edgeTypes"
+        :fit-view-on-init="fitViewOnInit"
+        :min-zoom="minZoom"
+        :max-zoom="maxZoom"
+        :nodes-draggable="nodesDraggable"
+        :nodes-connectable="nodesConnectable"
+        :elements-selectable="elementsSelectable"
+        :connection-mode="connectionMode"
+        :default-edge-options="defaultEdgeOptions"
+        :class="ui.wrapper({ class: uiProps?.wrapper })"
+        @update:nodes="emit('update:nodes', $event)"
+        @update:edges="emit('update:edges', $event)"
+        @node-click="emit('nodeClick', $event)"
+        @edge-click="emit('edgeClick', $event)"
+        @pane-click="emit('paneClick', $event)"
+        @connect="emit('connect', $event)">
+        <template v-for="(_, name) in $slots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData ?? {}" />
+        </template>
+      </VueFlow>
+    </div>
+
+    <template #fallback>
+      <div :class="ui.root({ class: uiProps?.root })" />
+    </template>
+  </ClientOnly>
+</template>

package/dist/runtime/components/Flow.vue.d.ts

@@ -0,0 +1,65 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow";
+import type { ComponentConfig } from "../types/index.js";
+import type { Node, Edge, ConnectionMode } from "@vue-flow/core";
+type Flow = ComponentConfig<typeof theme, AppConfig, "flow">;
+export interface FlowProps {
+    /** Array of node objects */
+    nodes?: Node[];
+    /** Array of edge objects */
+    edges?: Edge[];
+    /** Map of custom node type components */
+    nodeTypes?: Record<string, any>;
+    /** Map of custom edge type components */
+    edgeTypes?: Record<string, any>;
+    /** Fit view on initialization */
+    fitViewOnInit?: boolean;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Whether nodes are draggable */
+    nodesDraggable?: boolean;
+    /** Whether nodes are connectable */
+    nodesConnectable?: boolean;
+    /** Whether elements are selectable */
+    elementsSelectable?: boolean;
+    /** Connection mode */
+    connectionMode?: ConnectionMode;
+    /** Default edge options */
+    defaultEdgeOptions?: Record<string, any>;
+    /** Theme slot overrides */
+    ui?: Flow["slots"];
+}
+export interface FlowEmits {
+    "update:nodes": [nodes: Node[]];
+    "update:edges": [edges: Edge[]];
+    nodeClick: [event: any];
+    edgeClick: [event: any];
+    paneClick: [event: any];
+    connect: [params: any];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:nodes": (nodes: Node<any, any, string>[]) => any;
+    "update:edges": (edges: Edge[]) => any;
+    nodeClick: (event: any) => any;
+    edgeClick: (event: any) => any;
+    paneClick: (event: any) => any;
+    connect: (params: any) => any;
+}, string, import("vue").PublicProps, Readonly<FlowProps> & Readonly<{
+    "onUpdate:nodes"?: ((nodes: Node<any, any, string>[]) => any) | undefined;
+    "onUpdate:edges"?: ((edges: Edge[]) => any) | undefined;
+    onNodeClick?: ((event: any) => any) | undefined;
+    onEdgeClick?: ((event: any) => any) | undefined;
+    onPaneClick?: ((event: any) => any) | undefined;
+    onConnect?: ((params: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: any) => any) | undefined;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FlowBackground.d.vue.ts

@@ -0,0 +1,21 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-background";
+import type { ComponentConfig } from "../types/index.js";
+type FlowBackground = ComponentConfig<typeof theme, AppConfig, "flowBackground">;
+export interface FlowBackgroundProps {
+    /** Background pattern variant */
+    pattern?: "dots" | "lines";
+    /** Background pattern gap */
+    gap?: number | number[];
+    /** Background pattern size */
+    size?: number;
+    /** Background pattern color */
+    color?: string;
+    /** Background line width (for lines pattern) */
+    lineWidth?: number;
+    /** Theme slot overrides */
+    ui?: FlowBackground["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<FlowBackgroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowBackgroundProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/FlowBackground.vue

@@ -0,0 +1,39 @@
+<script>
+import theme from "#build/ui-elements/flow-background";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Background } from "@vue-flow/background";
+import { tv } from "../utils/tv";
+const {
+  pattern = "dots",
+  gap = 20,
+  size = 1,
+  color,
+  lineWidth,
+  ui: uiProps = {}
+} = defineProps({
+  pattern: { type: String, required: false },
+  gap: { type: [Number, Array], required: false },
+  size: { type: Number, required: false },
+  color: { type: String, required: false },
+  lineWidth: { type: Number, required: false },
+  ui: { type: Object, required: false }
+});
+const ui = computed(
+  () => tv({ extend: tv(theme) })({
+    pattern
+  })
+);
+</script>
+
+<template>
+  <Background
+    :variant="pattern"
+    :gap="gap"
+    :size="size"
+    :color="color"
+    :line-width="lineWidth"
+    :class="ui.root({ class: uiProps?.root })" />
+</template>

package/dist/runtime/components/FlowBackground.vue.d.ts

@@ -0,0 +1,21 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-background";
+import type { ComponentConfig } from "../types/index.js";
+type FlowBackground = ComponentConfig<typeof theme, AppConfig, "flowBackground">;
+export interface FlowBackgroundProps {
+    /** Background pattern variant */
+    pattern?: "dots" | "lines";
+    /** Background pattern gap */
+    gap?: number | number[];
+    /** Background pattern size */
+    size?: number;
+    /** Background pattern color */
+    color?: string;
+    /** Background line width (for lines pattern) */
+    lineWidth?: number;
+    /** Theme slot overrides */
+    ui?: FlowBackground["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<FlowBackgroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowBackgroundProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/FlowControls.d.vue.ts

@@ -0,0 +1,29 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-controls";
+import type { ComponentConfig } from "../types/index.js";
+import type { PanelPositionType, FitViewParams } from "@vue-flow/core";
+type FlowControls = ComponentConfig<typeof theme, AppConfig, "flowControls">;
+export interface FlowControlsProps {
+    /** Show zoom controls */
+    showZoom?: boolean;
+    /** Show fit-view button */
+    showFitView?: boolean;
+    /** Show interactive toggle */
+    showInteractive?: boolean;
+    /** Fit view params */
+    fitViewParams?: FitViewParams;
+    /** Panel position */
+    position?: PanelPositionType;
+    /** Theme slot overrides */
+    ui?: FlowControls["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FlowControls.vue

@@ -0,0 +1,37 @@
+<script>
+import theme from "#build/ui-elements/flow-controls";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Controls } from "@vue-flow/controls";
+import { tv } from "../utils/tv";
+const {
+  showZoom = true,
+  showFitView = true,
+  showInteractive = true,
+  fitViewParams,
+  position = "bottom-left",
+  ui: uiProps = {}
+} = defineProps({
+  showZoom: { type: Boolean, required: false },
+  showFitView: { type: Boolean, required: false },
+  showInteractive: { type: Boolean, required: false },
+  fitViewParams: { type: Object, required: false },
+  position: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const ui = computed(() => tv({ extend: tv(theme) })({}));
+</script>
+
+<template>
+  <Controls
+    :show-zoom="showZoom"
+    :show-fit-view="showFitView"
+    :show-interactive="showInteractive"
+    :fit-view-params="fitViewParams"
+    :position="position"
+    :class="ui.root({ class: uiProps?.root })">
+    <slot />
+  </Controls>
+</template>

package/dist/runtime/components/FlowControls.vue.d.ts

@@ -0,0 +1,29 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-controls";
+import type { ComponentConfig } from "../types/index.js";
+import type { PanelPositionType, FitViewParams } from "@vue-flow/core";
+type FlowControls = ComponentConfig<typeof theme, AppConfig, "flowControls">;
+export interface FlowControlsProps {
+    /** Show zoom controls */
+    showZoom?: boolean;
+    /** Show fit-view button */
+    showFitView?: boolean;
+    /** Show interactive toggle */
+    showInteractive?: boolean;
+    /** Fit view params */
+    fitViewParams?: FitViewParams;
+    /** Panel position */
+    position?: PanelPositionType;
+    /** Theme slot overrides */
+    ui?: FlowControls["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FlowHandle.d.vue.ts

@@ -0,0 +1,22 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-handle";
+import type { ComponentConfig } from "../types/index.js";
+import type { Position } from "@vue-flow/core";
+type FlowHandle = ComponentConfig<typeof theme, AppConfig, "flowHandle">;
+export interface FlowHandleProps {
+    /** Handle type: source or target */
+    type: "source" | "target";
+    /** Handle position */
+    position?: Position | "top" | "bottom" | "left" | "right";
+    /** Handle ID (for multiple handles per node) */
+    id?: string;
+    /** Theme color */
+    color?: FlowHandle["variants"]["color"];
+    /** Whether a connection is active on this handle */
+    connected?: boolean;
+    /** Theme slot overrides */
+    ui?: FlowHandle["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<FlowHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/FlowHandle.vue

@@ -0,0 +1,33 @@
+<script>
+import theme from "#build/ui-elements/flow-handle";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Handle, Position as VFPosition } from "@vue-flow/core";
+import { tv } from "../utils/tv";
+const {
+  type,
+  position = VFPosition.Bottom,
+  color = "primary",
+  connected = false,
+  ui: uiProps = {}
+} = defineProps({
+  type: { type: String, required: true },
+  position: { type: String, required: false },
+  id: { type: String, required: false },
+  color: { type: null, required: false },
+  connected: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const ui = computed(
+  () => tv({ extend: tv(theme) })({
+    color,
+    connected
+  })
+);
+</script>
+
+<template>
+  <Handle :id="id" :type="type" :position="position" :class="ui.root({ class: uiProps?.root })" />
+</template>

package/dist/runtime/components/FlowHandle.vue.d.ts

@@ -0,0 +1,22 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-handle";
+import type { ComponentConfig } from "../types/index.js";
+import type { Position } from "@vue-flow/core";
+type FlowHandle = ComponentConfig<typeof theme, AppConfig, "flowHandle">;
+export interface FlowHandleProps {
+    /** Handle type: source or target */
+    type: "source" | "target";
+    /** Handle position */
+    position?: Position | "top" | "bottom" | "left" | "right";
+    /** Handle ID (for multiple handles per node) */
+    id?: string;
+    /** Theme color */
+    color?: FlowHandle["variants"]["color"];
+    /** Whether a connection is active on this handle */
+    connected?: boolean;
+    /** Theme slot overrides */
+    ui?: FlowHandle["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<FlowHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/FlowMiniMap.d.vue.ts

@@ -0,0 +1,37 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-mini-map";
+import type { ComponentConfig } from "../types/index.js";
+import type { PanelPositionType } from "@vue-flow/core";
+type FlowMiniMap = ComponentConfig<typeof theme, AppConfig, "flowMiniMap">;
+export interface FlowMiniMapProps {
+    /** Enable drag to pan viewport */
+    pannable?: boolean;
+    /** Enable zoom to zoom viewport */
+    zoomable?: boolean;
+    /** Panel position */
+    position?: PanelPositionType;
+    /** Node color */
+    nodeColor?: string;
+    /** Node stroke color */
+    nodeStrokeColor?: string;
+    /** Node border radius */
+    nodeBorderRadius?: number;
+    /** Mask color */
+    maskColor?: string;
+    /** Width */
+    width?: number;
+    /** Height */
+    height?: number;
+    /** Theme slot overrides */
+    ui?: FlowMiniMap["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowMiniMapProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowMiniMapProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: any) => any) | undefined;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FlowMiniMap.vue

@@ -0,0 +1,51 @@
+<script>
+import theme from "#build/ui-elements/flow-mini-map";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { MiniMap } from "@vue-flow/minimap";
+import { tv } from "../utils/tv";
+const {
+  pannable = true,
+  zoomable = true,
+  position = "bottom-right",
+  nodeColor,
+  nodeStrokeColor,
+  nodeBorderRadius = 4,
+  maskColor,
+  width,
+  height,
+  ui: uiProps = {}
+} = defineProps({
+  pannable: { type: Boolean, required: false },
+  zoomable: { type: Boolean, required: false },
+  position: { type: String, required: false },
+  nodeColor: { type: String, required: false },
+  nodeStrokeColor: { type: String, required: false },
+  nodeBorderRadius: { type: Number, required: false },
+  maskColor: { type: String, required: false },
+  width: { type: Number, required: false },
+  height: { type: Number, required: false },
+  ui: { type: Object, required: false }
+});
+const ui = computed(() => tv({ extend: tv(theme) })({}));
+</script>
+
+<template>
+  <MiniMap
+    :pannable="pannable"
+    :zoomable="zoomable"
+    :position="position"
+    :node-color="nodeColor"
+    :node-stroke-color="nodeStrokeColor"
+    :node-border-radius="nodeBorderRadius"
+    :mask-color="maskColor"
+    :width="width"
+    :height="height"
+    :class="ui.root({ class: uiProps?.root })">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData ?? {}" />
+    </template>
+  </MiniMap>
+</template>

package/dist/runtime/components/FlowMiniMap.vue.d.ts

@@ -0,0 +1,37 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-mini-map";
+import type { ComponentConfig } from "../types/index.js";
+import type { PanelPositionType } from "@vue-flow/core";
+type FlowMiniMap = ComponentConfig<typeof theme, AppConfig, "flowMiniMap">;
+export interface FlowMiniMapProps {
+    /** Enable drag to pan viewport */
+    pannable?: boolean;
+    /** Enable zoom to zoom viewport */
+    zoomable?: boolean;
+    /** Panel position */
+    position?: PanelPositionType;
+    /** Node color */
+    nodeColor?: string;
+    /** Node stroke color */
+    nodeStrokeColor?: string;
+    /** Node border radius */
+    nodeBorderRadius?: number;
+    /** Mask color */
+    maskColor?: string;
+    /** Width */
+    width?: number;
+    /** Height */
+    height?: number;
+    /** Theme slot overrides */
+    ui?: FlowMiniMap["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowMiniMapProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowMiniMapProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: any) => any) | undefined;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FlowNode.d.vue.ts

@@ -0,0 +1,26 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-node";
+import type { ComponentConfig } from "../types/index.js";
+type FlowNode = ComponentConfig<typeof theme, AppConfig, "flowNode">;
+export interface FlowNodeProps {
+    /** Label text */
+    label?: string;
+    /** Theme color */
+    color?: FlowNode["variants"]["color"];
+    /** Visual variant */
+    variant?: FlowNode["variants"]["variant"];
+    /** Whether the node is currently selected */
+    selected?: boolean;
+    /** Theme slot overrides */
+    ui?: FlowNode["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FlowNode.vue

@@ -0,0 +1,39 @@
+<script>
+import theme from "#build/ui-elements/flow-node";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { tv } from "../utils/tv";
+const {
+  label,
+  color = "primary",
+  variant = "outline",
+  selected = false,
+  ui: uiProps = {}
+} = defineProps({
+  label: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  selected: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const ui = computed(
+  () => tv({ extend: tv(theme) })({
+    color,
+    variant,
+    selected
+  })
+);
+</script>
+
+<template>
+  <div :class="ui.root({ class: uiProps?.root })">
+    <div v-if="label" :class="ui.label({ class: uiProps?.label })">
+      {{ label }}
+    </div>
+    <div v-if="$slots.default" :class="ui.content({ class: uiProps?.content })">
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/FlowNode.vue.d.ts

@@ -0,0 +1,26 @@
+import type { AppConfig } from "@nuxt/schema";
+import theme from "#build/ui-elements/flow-node";
+import type { ComponentConfig } from "../types/index.js";
+type FlowNode = ComponentConfig<typeof theme, AppConfig, "flowNode">;
+export interface FlowNodeProps {
+    /** Label text */
+    label?: string;
+    /** Theme color */
+    color?: FlowNode["variants"]["color"];
+    /** Visual variant */
+    variant?: FlowNode["variants"]["variant"];
+    /** Whether the node is currently selected */
+    selected?: boolean;
+    /** Theme slot overrides */
+    ui?: FlowNode["slots"];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FlowNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlowNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/types/index.d.ts

@@ -1,5 +1,11 @@
 export * from "../components/DialogConfirm.vue.js";
 export * from "../components/DialogAlert.vue.js";
 export * from "../components/ToggleGroup.vue.js";
+export * from "../components/Flow.vue.js";
+export * from "../components/FlowNode.vue.js";
+export * from "../components/FlowHandle.vue.js";
+export * from "../components/FlowBackground.vue.js";
+export * from "../components/FlowControls.vue.js";
+export * from "../components/FlowMiniMap.vue.js";
 export * from "./tv.js";
 export * from "./utils.js";

package/dist/runtime/types/index.js

@@ -1,5 +1,11 @@
 export * from "../components/DialogConfirm.vue";
 export * from "../components/DialogAlert.vue";
 export * from "../components/ToggleGroup.vue";
+export * from "../components/Flow.vue";
+export * from "../components/FlowNode.vue";
+export * from "../components/FlowHandle.vue";
+export * from "../components/FlowBackground.vue";
+export * from "../components/FlowControls.vue";
+export * from "../components/FlowMiniMap.vue";
 export * from "./tv.js";
 export * from "./utils.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-elements",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "A collection of beautiful, animated UI components for Nuxt applications",
   "license": "MIT",
   "repository": "https://github.com/genu/nuxt-ui-elements.git",
@@ -51,8 +51,8 @@
     "tailwind-variants": "3.2.2"
   },
   "devDependencies": {
-    "@nuxt/devtools": "3.2.1",
-    "@nuxt/eslint-config": "1.15.1",
+    "@nuxt/devtools": "3.2.2",
+    "@nuxt/eslint-config": "1.15.2",
     "@nuxt/module-builder": "1.0.2",
     "@nuxt/schema": "4.3.1",
     "@nuxt/test-utils": "4.0.0",
@@ -60,19 +60,37 @@
     "@types/node": "latest",
     "@vitest/coverage-v8": "4.0.18",
     "better-sqlite3": "12.6.2",
-    "eslint": "10.0.0",
+    "eslint": "10.0.2",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.5",
     "nuxt": "4.3.1",
     "prettier": "3.8.1",
     "typescript": "5.9.3",
     "vitest": "4.0.18",
-    "vue-tsc": "3.2.4"
+    "vue-tsc": "3.2.5"
   },
   "peerDependencies": {
-    "@nuxt/ui": "^4.0.0"
+    "@nuxt/ui": "^4.0.0",
+    "@vue-flow/core": "^1.48.0",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/controls": "^1.1.0",
+    "@vue-flow/minimap": "^1.5.0"
   },
-  "packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8",
+  "peerDependenciesMeta": {
+    "@vue-flow/core": {
+      "optional": true
+    },
+    "@vue-flow/background": {
+      "optional": true
+    },
+    "@vue-flow/controls": {
+      "optional": true
+    },
+    "@vue-flow/minimap": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017",
   "pnpm": {
     "onlyBuiltDependencies": [
       "better-sqlite3"