nuxt-ui-elements-pro 0.1.5 → 0.1.7

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

@@ -1,24 +1,35 @@
 import type { CalendarDate, DateValue } from "@internationalized/date";
 import type { AppConfig } from "@nuxt/schema";
-import theme from "#build/ui-elements-pro/event-calendar";
 import type { ComponentConfig } from "nuxt-ui-elements";
-import type { CalendarEvent, CalendarDay, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload } from "../types/event-calendar.js";
+import type { CalendarEvent, CalendarView, CalendarDay, MonthViewOptions, WeekViewOptions, DayViewOptions, EventDropPayload, EventResizePayload, SelectPayload, EventCalendarContext } from "../types/event-calendar.js";
+import { type Component } from "vue";
+import theme from "#build/ui-elements-pro/event-calendar";
 type EventCalendar = ComponentConfig<typeof theme, AppConfig, "eventCalendar">;
 export interface EventCalendarProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
     /** Array of events to display */
     events?: CalendarEvent[];
     /** Currently displayed date. Controls which month/week/day is shown. Supports v-model. */
     modelValue?: Date | string | DateValue;
     /** Calendar view mode @defaultValue 'month' */
-    view?: "month" | "week" | "day";
+    view?: CalendarView;
+    /** Which views are available and shown in the view switcher @defaultValue ['month', 'week', 'day', 'list'] */
+    views?: CalendarView[];
     /** Locale for day/month names @defaultValue 'en-US' */
     locale?: string;
-    /** Day the week starts on @defaultValue 0 */
-    weekStartsOn?: 0 | 1;
+    /** Day the week starts on (0=Sun, 1=Mon, … 6=Sat) @defaultValue 0 */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /** Enable drag-and-drop globally @defaultValue true */
     editable?: boolean;
+    /** Show loading overlay @defaultValue false */
+    loading?: boolean;
+    /** Enable click/drag date range selection @defaultValue true */
+    selectable?: boolean;
     /** Theme color for calendar chrome @defaultValue 'primary' */
     color?: EventCalendar["variants"]["color"];
+    /** Override header title. Pass a string for static text, or a function for dynamic formatting. */
+    headerTitle?: string | ((date: CalendarDate, view: CalendarView) => string);
     /** Month view options */
     monthOptions?: MonthViewOptions;
     /** Week view options */
@@ -32,64 +43,140 @@ export interface EventCalendarEmits {
     /** Fires when the displayed date changes */
     "update:modelValue": [value: CalendarDate];
     /** Fires when the view changes */
-    "update:view": [value: "month" | "week" | "day"];
+    "update:view": [value: CalendarView];
     /** Fires when a date cell is clicked */
     dateClick: [date: CalendarDate];
     /** Fires when an event is clicked */
     eventClick: [event: CalendarEvent];
     /** Fires after drag-and-drop */
     eventDrop: [payload: EventDropPayload];
+    /** Fires after resize */
+    eventResize: [payload: EventResizePayload];
+    /** Fires when resize starts */
+    eventResizeStart: [payload: {
+        event: CalendarEvent;
+    }];
+    /** Fires when resize ends */
+    eventResizeEnd: [payload: {
+        event: CalendarEvent;
+    }];
+    /** Fires after a click or drag date range selection */
+    select: [payload: SelectPayload];
 }
 export interface EventCalendarSlots {
-    header: (props: {
+    default?: (props: EventCalendarContext) => any;
+    /** Replace the entire header */
+    header?: (props: {
         title: string;
         prev: () => void;
         next: () => void;
         today: () => void;
         currentDate: CalendarDate;
-        view: "month" | "week" | "day";
-        setView: (v: "month" | "week" | "day") => void;
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
+    }) => any;
+    /** Replace just the header title element */
+    "header-title"?: (props: {
+        title: string;
+        date: CalendarDate;
+        view: CalendarView;
+    }) => any;
+    /** Replace just the header nav buttons */
+    "header-nav"?: (props: {
+        prev: () => void;
+        next: () => void;
+        today: () => void;
+    }) => any;
+    /** Replace just the header view switcher */
+    "header-view-switcher"?: (props: {
+        view: CalendarView;
+        setView: (v: CalendarView) => void;
+        views: CalendarView[];
     }) => any;
-    "day-header": (props: {
+    /** Customize event rendering across all views */
+    event?: (props: {
+        event: CalendarEvent;
+        view: CalendarView;
+    }) => any;
+    /** Customize weekday header labels (month view) */
+    "day-header"?: (props: {
         day: string;
         index: number;
     }) => any;
-    day: (props: {
+    /** Customize day cell content (month view) */
+    day?: (props: {
         day: CalendarDay;
     }) => any;
-    event: (props: {
-        event: CalendarEvent;
-        view: "month" | "week" | "day";
-    }) => any;
-    "more-events": (props: {
+    /** Customize "+N more" indicator (month view) */
+    "more-events"?: (props: {
         events: CalendarEvent[];
         count: number;
         day: CalendarDay;
     }) => any;
-    "time-label": (props: {
+    /** Customize time labels (week/day view) */
+    "time-label"?: (props: {
         hour: number;
         label: string;
     }) => any;
-    "all-day": (props: {
+    /** Customize all-day event area (week/day view) */
+    "all-day"?: (props: {
         events: CalendarEvent[];
         date: CalendarDate;
     }) => any;
+    /** Customize date group headers (list view) */
+    "date-header"?: (props: {
+        day: CalendarDay;
+        weekday: string;
+        dateLabel: string;
+    }) => any;
+    /** Customize loading overlay */
+    loading?: () => any;
+    /** Customize empty state */
+    empty?: () => any;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EventCalendarProps, {
+    next: () => void;
+    prev: () => void;
+    today: () => void;
+    setView: (v: CalendarView) => void;
+    setDate: (date: Date | string | DateValue) => void;
+    view: import("vue").ComputedRef<CalendarView>;
+    date: import("vue").ComputedRef<CalendarDate>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (payload: SelectPayload) => any;
     "update:modelValue": (value: CalendarDate) => any;
-    "update:view": (value: "day" | "month" | "week") => any;
+    "update:view": (value: CalendarView) => any;
     dateClick: (date: CalendarDate) => any;
     eventClick: (event: CalendarEvent) => any;
     eventDrop: (payload: EventDropPayload) => any;
+    eventResize: (payload: EventResizePayload) => any;
+    eventResizeStart: (payload: {
+        event: CalendarEvent;
+    }) => any;
+    eventResizeEnd: (payload: {
+        event: CalendarEvent;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<EventCalendarProps> & Readonly<{
+    onSelect?: ((payload: SelectPayload) => any) | undefined;
     "onUpdate:modelValue"?: ((value: CalendarDate) => any) | undefined;
-    "onUpdate:view"?: ((value: "day" | "month" | "week") => any) | undefined;
+    "onUpdate:view"?: ((value: CalendarView) => any) | undefined;
     onDateClick?: ((date: CalendarDate) => any) | undefined;
     onEventClick?: ((event: CalendarEvent) => any) | undefined;
     onEventDrop?: ((payload: EventDropPayload) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarSlots>;
+    onEventResize?: ((payload: EventResizePayload) => any) | undefined;
+    onEventResizeStart?: ((payload: {
+        event: CalendarEvent;
+    }) => any) | undefined;
+    onEventResizeEnd?: ((payload: {
+        event: CalendarEvent;
+    }) => any) | undefined;
+}>, {
+    editable: boolean;
+    selectable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EventCalendarSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,191 @@
+import type { AppConfig } from "@nuxt/schema";
+import type { ComponentConfig } from "nuxt-ui-elements";
+import type { OrgChartNode, OrgChartTreeNode, OrgChartConnection, OrgChartConnectionPath, OrgChartDirection, OrgChartConnectorStyle, OrgChartSelectionMode, OrgChartLayoutConfig, OrgChartZoomConfig, OrgChartConnector, OrgChartContext } from "../types/org-chart.js";
+import { type Component } from "vue";
+import theme from "#build/ui-elements-pro/org-chart";
+type OrgChartTheme = ComponentConfig<typeof theme, AppConfig, "orgChart">;
+export interface OrgChartProps {
+    /** Rendered element type @defaultValue 'div' */
+    as?: string | Component;
+    /** Flat array of org chart nodes */
+    nodes?: OrgChartNode[];
+    /** Non-hierarchical connections between nodes */
+    connections?: OrgChartConnection[];
+    /** Layout direction @defaultValue 'vertical' */
+    direction?: OrgChartDirection;
+    /** Connector style @defaultValue 'right-angle' */
+    connectorStyle?: OrgChartConnectorStyle;
+    /** Selection mode @defaultValue 'none' */
+    selectionMode?: OrgChartSelectionMode;
+    /** Compact mode with reduced spacing @defaultValue false */
+    compact?: boolean;
+    /** Theme color @defaultValue 'primary' */
+    color?: OrgChartTheme["variants"]["color"];
+    /** Two-way binding for expanded node IDs */
+    expanded?: (string | number)[];
+    /** Two-way binding for selected node IDs */
+    selected?: (string | number)[];
+    /** Search query to filter and highlight nodes */
+    searchQuery?: string;
+    /** Enable drag-and-drop rearrangement @defaultValue false */
+    draggable?: boolean;
+    /** Enable animations @defaultValue true */
+    animated?: boolean;
+    /** Layout configuration overrides */
+    layoutConfig?: OrgChartLayoutConfig;
+    /** Zoom/pan configuration */
+    zoomConfig?: OrgChartZoomConfig;
+    /** Slot class overrides */
+    ui?: OrgChartTheme["slots"];
+}
+export interface OrgChartEmits {
+    /** Fires when expanded node IDs change */
+    "update:expanded": [value: (string | number)[]];
+    /** Fires when selected node IDs change */
+    "update:selected": [value: (string | number)[]];
+    /** Fires when any node is clicked */
+    "node-click": [node: OrgChartNode];
+    /** Fires when a node is expanded or collapsed */
+    "node-expand": [payload: {
+        node: OrgChartNode;
+        expanded: boolean;
+    }];
+    /** Fires when a node is selected or deselected */
+    "node-select": [payload: {
+        node: OrgChartNode;
+        selected: boolean;
+    }];
+    /** Fires when a node is dropped onto a new parent via drag-and-drop */
+    "node-drop": [payload: {
+        node: OrgChartNode;
+        oldParentId: string | number | null;
+        newParentId: string | number;
+    }];
+    /** Fires when a non-hierarchical connection is clicked */
+    "connection-click": [connection: OrgChartConnection];
+}
+export interface OrgChartSlots {
+    /** Compound mode: full rendering control */
+    default?: (props: OrgChartContext) => any;
+    /** Custom node rendering (replaces entire node card content) */
+    node?: (props: {
+        node: OrgChartNode;
+        treeNode: OrgChartTreeNode;
+        selected: boolean;
+        expanded: boolean;
+        focused: boolean;
+        matched: boolean;
+        dimmed: boolean;
+    }) => any;
+    /** Custom avatar area */
+    avatar?: (props: {
+        node: OrgChartNode;
+    }) => any;
+    /** Custom label */
+    label?: (props: {
+        node: OrgChartNode;
+        highlight?: string;
+    }) => any;
+    /** Custom description / title */
+    description?: (props: {
+        node: OrgChartNode;
+        highlight?: string;
+    }) => any;
+    /** Custom connector rendering */
+    connector?: (props: {
+        connectors: OrgChartConnector[];
+    }) => any;
+    /** Custom non-hierarchical connection rendering */
+    connection?: (props: {
+        connections: OrgChartConnectionPath[];
+    }) => any;
+    /** Custom connection label */
+    "connection-label"?: (props: {
+        connection: OrgChartConnection;
+        x: number;
+        y: number;
+    }) => any;
+    /** Custom collapse toggle */
+    "collapse-toggle"?: (props: {
+        expanded: boolean;
+        count: number;
+        node: OrgChartNode;
+    }) => any;
+    /** Custom zoom controls */
+    "zoom-controls"?: (props: {
+        zoomIn: () => void;
+        zoomOut: () => void;
+        zoomReset: () => void;
+        fitToView: () => void;
+        scale: number;
+    }) => any;
+    /** Custom drop indicator */
+    "drop-indicator"?: (props: {
+        targetNode: OrgChartNode;
+    }) => any;
+    /** Empty state (no nodes) */
+    empty?: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<OrgChartProps, {
+    expandAll: () => void;
+    collapseAll: () => void;
+    toggleNode: (id: string | number) => void;
+    selectNode: (id: string | number) => void;
+    deselectNode: (id: string | number) => void;
+    scrollToNode: (id: string | number) => void;
+    fitToView: () => void;
+    getChildren: (id: string | number) => OrgChartTreeNode[];
+    getAncestors: (id: string | number) => OrgChartTreeNode[];
+    tree: import("vue").ComputedRef<OrgChartTreeNode | null>;
+    layout: import("vue").ComputedRef<import("../types/org-chart.js").OrgChartLayout>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: (string | number)[]) => any;
+    "update:selected": (value: (string | number)[]) => any;
+    "node-click": (node: OrgChartNode) => any;
+    "node-expand": (payload: {
+        node: OrgChartNode;
+        expanded: boolean;
+    }) => any;
+    "node-select": (payload: {
+        node: OrgChartNode;
+        selected: boolean;
+    }) => any;
+    "node-drop": (payload: {
+        node: OrgChartNode;
+        oldParentId: string | number | null;
+        newParentId: string | number;
+    }) => any;
+    "connection-click": (connection: OrgChartConnection) => any;
+}, string, import("vue").PublicProps, Readonly<OrgChartProps> & Readonly<{
+    "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: (string | number)[]) => any) | undefined;
+    "onNode-click"?: ((node: OrgChartNode) => any) | undefined;
+    "onNode-expand"?: ((payload: {
+        node: OrgChartNode;
+        expanded: boolean;
+    }) => any) | undefined;
+    "onNode-select"?: ((payload: {
+        node: OrgChartNode;
+        selected: boolean;
+    }) => any) | undefined;
+    "onNode-drop"?: ((payload: {
+        node: OrgChartNode;
+        oldParentId: string | number | null;
+        newParentId: string | number;
+    }) => any) | undefined;
+    "onConnection-click"?: ((connection: OrgChartConnection) => any) | undefined;
+}>, {
+    draggable: boolean;
+    compact: boolean;
+    direction: OrgChartDirection;
+    connectorStyle: OrgChartConnectorStyle;
+    selectionMode: OrgChartSelectionMode;
+    animated: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, OrgChartSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/OrgChart.vue

@@ -0,0 +1,290 @@
+<script>
+import { Primitive } from "reka-ui";
+import { computed, provide, ref, useSlots, watch } from "vue";
+import { tv } from "../utils/tv";
+import { useOrgChart } from "../composables/useOrgChart";
+import { useOrgChartKeyboard } from "../composables/useOrgChartKeyboard";
+import { useOrgChartZoom } from "../composables/useOrgChartZoom";
+import { useOrgChartSearch } from "../composables/useOrgChartSearch";
+import { useOrgChartDragDrop } from "../composables/useOrgChartDragDrop";
+import { orgChartContextKey } from "../composables/useOrgChartContext";
+import { DEFAULT_LAYOUT_CONFIG, DEFAULT_ZOOM_CONFIG } from "../utils/org-chart";
+import OrgChartNodeVue from "./org-chart/OrgChartNode.vue";
+import OrgChartConnectors from "./org-chart/OrgChartConnectors.vue";
+import OrgChartControls from "./org-chart/OrgChartControls.vue";
+import theme from "#build/ui-elements-pro/org-chart";
+</script>
+
+<script setup>
+const props = defineProps({
+  as: { type: null, required: false },
+  nodes: { type: Array, required: false },
+  connections: { type: Array, required: false },
+  direction: { type: String, required: false, default: "vertical" },
+  connectorStyle: { type: String, required: false, default: "right-angle" },
+  selectionMode: { type: String, required: false, default: "none" },
+  compact: { type: Boolean, required: false, default: false },
+  color: { type: null, required: false },
+  expanded: { type: Array, required: false },
+  selected: { type: Array, required: false },
+  searchQuery: { type: String, required: false },
+  draggable: { type: Boolean, required: false, default: false },
+  animated: { type: Boolean, required: false, default: true },
+  layoutConfig: { type: Object, required: false },
+  zoomConfig: { type: Object, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:expanded", "update:selected", "node-click", "node-expand", "node-select", "node-drop", "connection-click"]);
+defineSlots();
+const slots = useSlots();
+const ui = computed(
+  () => tv({
+    extend: tv(theme)
+  })({
+    color: props.color ?? "primary",
+    compact: props.compact
+  })
+);
+const resolvedLayoutConfig = computed(() => ({
+  ...DEFAULT_LAYOUT_CONFIG,
+  ...props.compact ? { nodeWidth: 160, nodeHeight: 48, siblingGap: 24, levelGap: 40 } : {},
+  ...props.layoutConfig
+}));
+const resolvedZoomConfig = computed(() => ({
+  ...DEFAULT_ZOOM_CONFIG,
+  ...props.zoomConfig
+}));
+const orgChart = useOrgChart({
+  nodes: () => props.nodes ?? [],
+  connections: () => props.connections ?? [],
+  direction: () => props.direction,
+  connectorStyle: () => props.connectorStyle,
+  selectionMode: () => props.selectionMode,
+  layoutConfig: () => resolvedLayoutConfig.value,
+  expanded: () => props.expanded,
+  selected: () => props.selected,
+  onUpdateExpanded: (ids) => emit("update:expanded", ids),
+  onUpdateSelected: (ids) => emit("update:selected", ids),
+  onNodeClick: (node) => emit("node-click", node),
+  onNodeExpand: (payload) => emit("node-expand", payload),
+  onNodeSelect: (payload) => emit("node-select", payload)
+});
+const search = useOrgChartSearch({
+  searchQuery: () => props.searchQuery ?? "",
+  nodes: () => props.nodes ?? [],
+  nodeMap: orgChart.nodeMap,
+  expandedIds: orgChart.expandedIds,
+  onUpdateExpanded: (ids) => emit("update:expanded", ids)
+});
+watch(() => props.searchQuery, () => {
+  search.checkAndExpand();
+});
+const dragDrop = useOrgChartDragDrop({
+  draggable: () => props.draggable,
+  nodeMap: orgChart.nodeMap,
+  onNodeDrop: (payload) => emit("node-drop", payload)
+});
+const viewportRef = ref(null);
+const zoom = useOrgChartZoom({
+  config: () => resolvedZoomConfig.value,
+  containerRef: viewportRef,
+  layoutWidth: computed(() => orgChart.layout.value.width),
+  layoutHeight: computed(() => orgChart.layout.value.height),
+  nodeMap: orgChart.nodeMap,
+  layoutConfig: () => resolvedLayoutConfig.value
+});
+const keyboard = useOrgChartKeyboard({
+  flatVisibleNodes: orgChart.flatVisibleNodes,
+  nodeMap: orgChart.nodeMap,
+  expandedIds: orgChart.expandedIds,
+  selectionMode: () => props.selectionMode,
+  toggleExpand: orgChart.toggleExpand,
+  selectNode: orgChart.selectNode,
+  scrollToNode: zoom.scrollToNode
+});
+function handleConnectionClick(connection, _e) {
+  emit("connection-click", connection);
+}
+const connectionPaths = computed(() => orgChart.layout.value.connectionPaths);
+const ctx = {
+  tree: orgChart.tree,
+  layout: orgChart.layout,
+  flatVisibleNodes: orgChart.flatVisibleNodes,
+  nodeMap: orgChart.nodeMap,
+  direction: computed(() => props.direction),
+  connectorStyle: computed(() => props.connectorStyle),
+  selectionMode: computed(() => props.selectionMode),
+  compact: computed(() => props.compact),
+  animated: computed(() => props.animated),
+  draggable: computed(() => props.draggable),
+  layoutConfig: resolvedLayoutConfig,
+  zoomConfig: resolvedZoomConfig,
+  expandedIds: orgChart.expandedIds,
+  selectedIds: orgChart.selectedIds,
+  focusedId: keyboard.focusedId,
+  // Search
+  searchQuery: computed(() => props.searchQuery ?? ""),
+  matchedIds: search.matchedIds,
+  isMatched: search.isMatched,
+  isDimmed: search.isDimmed,
+  isExpanded: orgChart.isExpanded,
+  isSelected: orgChart.isSelected,
+  isFocused: keyboard.isFocused,
+  getDescendantCount: orgChart.getDescendantCount,
+  getNode: orgChart.getNode,
+  getChildren: orgChart.getChildren,
+  getAncestors: orgChart.getAncestors,
+  toggleExpand: orgChart.toggleExpand,
+  expandAll: orgChart.expandAll,
+  collapseAll: orgChart.collapseAll,
+  selectNode: orgChart.selectNode,
+  deselectNode: orgChart.deselectNode,
+  scrollToNode: zoom.scrollToNode,
+  fitToView: zoom.fitToView,
+  handleNodeClick: orgChart.handleNodeClick,
+  onKeydown: keyboard.onKeydown,
+  // Drag-and-drop
+  draggedNodeId: dragDrop.draggedNodeId,
+  dropTargetId: dragDrop.dropTargetId,
+  onDragStart: dragDrop.onDragStart,
+  onDragOver: dragDrop.onDragOver,
+  onDragLeave: dragDrop.onDragLeave,
+  onDrop: dragDrop.onDrop,
+  onDragEnd: dragDrop.onDragEnd,
+  // Non-hierarchical connections
+  connectionPaths,
+  handleConnectionClick,
+  ui,
+  propUi: computed(() => props.ui),
+  scale: zoom.scale,
+  translateX: zoom.translateX,
+  translateY: zoom.translateY,
+  transformStyle: zoom.transformStyle,
+  zoomIn: zoom.zoomIn,
+  zoomOut: zoom.zoomOut,
+  zoomReset: zoom.zoomReset,
+  onWheel: zoom.onWheel,
+  onPointerDown: zoom.onPointerDown
+};
+provide(orgChartContextKey, ctx);
+defineExpose({
+  expandAll: orgChart.expandAll,
+  collapseAll: orgChart.collapseAll,
+  toggleNode: orgChart.toggleExpand,
+  selectNode: orgChart.selectNode,
+  deselectNode: orgChart.deselectNode,
+  scrollToNode: zoom.scrollToNode,
+  fitToView: zoom.fitToView,
+  getChildren: orgChart.getChildren,
+  getAncestors: orgChart.getAncestors,
+  tree: orgChart.tree,
+  layout: orgChart.layout
+});
+</script>
+
+<template>
+  <Primitive :as="props.as ?? 'div'" data-slot="root" :class="ui.root({ class: props.ui?.root })" role="tree" aria-label="Organization chart">
+    <!-- Compound mode: user provides #default and owns rendering -->
+    <slot v-if="slots.default" v-bind="ctx" />
+
+    <!-- Auto mode: render everything with slot forwarding -->
+    <template v-else>
+      <OrgChartControls v-if="resolvedZoomConfig.enabled && resolvedZoomConfig.controls">
+        <template v-if="slots['zoom-controls']" #default="controlProps">
+          <slot name="zoom-controls" v-bind="controlProps" />
+        </template>
+      </OrgChartControls>
+
+      <div
+        v-if="orgChart.layout.value.nodes.length > 0"
+        ref="viewportRef"
+        data-slot="viewport"
+        :class="ui.viewport({ class: props.ui?.viewport })"
+        :style="[
+  resolvedZoomConfig.enabled ? zoom.transformStyle.value : void 0,
+  { width: `${orgChart.layout.value.width}px`, height: `${orgChart.layout.value.height}px` }
+]"
+        @wheel="zoom.onWheel"
+        @pointerdown="zoom.onPointerDown"
+      >
+        <OrgChartConnectors>
+          <template v-if="slots.connector" #default="connProps">
+            <slot name="connector" v-bind="connProps" />
+          </template>
+        </OrgChartConnectors>
+
+        <template v-for="treeNode in orgChart.flatVisibleNodes.value" :key="treeNode.data.id">
+          <slot
+            v-if="slots.node"
+            name="node"
+            :node="treeNode.data"
+            :tree-node="treeNode"
+            :selected="orgChart.isSelected(treeNode.data.id)"
+            :expanded="orgChart.isExpanded(treeNode.data.id)"
+            :focused="keyboard.isFocused(treeNode.data.id)"
+            :matched="search.isMatched(treeNode.data.id)"
+            :dimmed="search.isDimmed(treeNode.data.id)"
+          />
+          <OrgChartNodeVue v-else :node="treeNode">
+            <template v-if="slots.avatar" #avatar="avatarProps">
+              <slot name="avatar" v-bind="avatarProps" />
+            </template>
+            <template v-if="slots.label" #label="labelProps">
+              <slot name="label" v-bind="{ ...labelProps, highlight: props.searchQuery }" />
+            </template>
+            <template v-if="slots.description" #description="descProps">
+              <slot name="description" v-bind="{ ...descProps, highlight: props.searchQuery }" />
+            </template>
+            <template v-if="slots['collapse-toggle']" #collapse-toggle="toggleProps">
+              <slot name="collapse-toggle" v-bind="toggleProps" />
+            </template>
+          </OrgChartNodeVue>
+        </template>
+
+        <!-- Non-hierarchical connections (rendered after nodes so they appear on top) -->
+        <svg
+          v-if="connectionPaths.length > 0"
+          :class="ui.connectorLayer({ class: props.ui?.connectorLayer })"
+          :width="orgChart.layout.value.width"
+          :height="orgChart.layout.value.height"
+          :viewBox="`0 0 ${orgChart.layout.value.width} ${orgChart.layout.value.height}`"
+          aria-hidden="true"
+        >
+          <path
+            v-for="cp in connectionPaths"
+            :key="`conn-${cp.connection.id}`"
+            data-slot="connection"
+            :d="cp.path"
+            :class="ui.connection({ class: props.ui?.connection })"
+            :stroke="cp.connection.color ? cp.connection.color === 'neutral' ? 'var(--ui-bg-inverted)' : `var(--ui-${cp.connection.color})` : void 0"
+            :stroke-dasharray="cp.connection.style === 'dotted' ? '2 4' : cp.connection.style === 'solid' ? void 0 : '6 4'"
+            @click.stop="handleConnectionClick(cp.connection, $event)"
+          />
+        </svg>
+
+        <!-- Connection labels -->
+        <div
+          v-for="cp in connectionPaths"
+          :key="`conn-label-${cp.connection.id}`"
+          :data-slot="'connectionLabel'"
+          :class="ui.connectionLabel({ class: props.ui?.connectionLabel })"
+          :style="{
+  left: `${cp.labelX}px`,
+  top: `${cp.labelY}px`,
+  display: cp.connection.label ? void 0 : 'none'
+}"
+          @click.stop="handleConnectionClick(cp.connection, $event)"
+        >
+          {{ cp.connection.label }}
+        </div>
+      </div>
+
+      <slot v-else name="empty">
+        <div data-slot="emptyState" :class="ui.emptyState({ class: props.ui?.emptyState })">
+          <UIcon name="i-lucide-network" :class="ui.emptyStateIcon({ class: props.ui?.emptyStateIcon })" />
+          <p :class="ui.emptyStateText({ class: props.ui?.emptyStateText })">No data to display</p>
+        </div>
+      </slot>
+    </template>
+  </Primitive>
+</template>