@cjlapao/ui-kit-vue 0.2.0

package/dist/types/vue/src/components/Alert.vue.d.ts

@@ -0,0 +1,31 @@
+import type { VNode } from "vue";
+import type { TrueColor } from "../theme/Theme";
+export type AlertVariant = "subtle" | "solid" | "outline";
+export interface AlertProps {
+    tone?: TrueColor;
+    color?: TrueColor;
+    variant?: AlertVariant;
+    title?: string;
+    description?: string;
+    icon?: string | VNode | false;
+    actions?: string;
+    dismissible?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {
+    el: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    dismiss: () => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+}>, {
+    variant: AlertVariant;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    actions?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/ApiErrorState.vue.d.ts

@@ -0,0 +1,27 @@
+import type { EmptyStateProps } from "./EmptyState.vue";
+export interface ApiErrorStateProps extends Omit<EmptyStateProps, "title" | "tone" | "icon" | "onAction" | "buttonText"> {
+    onRetry?: () => void;
+    title?: string;
+    isError?: boolean;
+    buttonText?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ApiErrorStateProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ApiErrorStateProps> & Readonly<{}>, {
+    title: string;
+    fullWidth: boolean;
+    subtitle: string;
+    showIcon: boolean;
+    disableBorder: boolean;
+    transparentBackground: boolean;
+    fullHeight: boolean;
+    actionLeadingIcon: string | import("vue").VNode;
+    buttonText: string;
+    isError: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/AppDivider.vue.d.ts

@@ -0,0 +1,10 @@
+export interface AppDividerProps {
+    /** Height of the divider in pixels or as CSS value */
+    height?: number | string;
+    /** Width of the divider in pixels */
+    width?: number;
+    /** Margin around the divider */
+    margin?: number | string;
+}
+declare const _default: import("vue").DefineComponent<AppDividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppDividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/vue/src/components/Badge.vue.d.ts

@@ -0,0 +1,27 @@
+import type { TrueColor } from "../theme/Theme";
+export interface BadgeProps {
+    /**
+     * Content to display inside the badge
+     */
+    count?: number | string;
+    /**
+     * Show only a dot indicator (no count)
+     */
+    dot?: boolean;
+    /**
+     * Max count to display before showing "+"
+     * @default 99
+     */
+    maxCount?: number;
+    /**
+     * Badge color variant
+     * @default "neutral"
+     */
+    tone?: TrueColor;
+}
+declare const _default: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    tone: TrueColor;
+    dot: boolean;
+    maxCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/vue/src/components/BadgeIcon.vue.d.ts

@@ -0,0 +1,52 @@
+import type { VNode } from "vue";
+import type { BadgeProps } from "./Badge.vue";
+import type { IconButtonProps } from "./IconButton.vue";
+type BadgePosition = "top-start" | "top-end" | "bottom-start" | "bottom-end";
+export interface BadgeIconProps extends IconButtonProps {
+    /**
+     * Optional custom badge node. When provided, overrides count/dot rendering.
+     */
+    badgeContent?: string | VNode;
+    /**
+     * Numeric badge count. Ignored when `badgeContent` is supplied.
+     */
+    badgeCount?: number;
+    /**
+     * Show a small dot indicator instead of a number. Ignored when `badgeContent` is supplied.
+     */
+    badgeDot?: boolean;
+    /**
+     * Tailwind position for the badge relative to the button.
+     */
+    badgePosition?: BadgePosition;
+    /**
+     * Additional props forwarded to the underlying `Badge`.
+     */
+    badgeProps?: Omit<BadgeProps, "count" | "dot">;
+    /**
+     * Extra class applied to the outer wrapper span.
+     */
+    wrapperClassName?: string;
+    /**
+     * Expands the control to fill the available width.
+     */
+    fullWidth?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeIconProps, {
+    el: import("vue").ComputedRef<HTMLButtonElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeIconProps> & Readonly<{}>, {
+    disabled: boolean;
+    fullWidth: boolean;
+    loading: boolean;
+    accent: boolean;
+    badgeDot: boolean;
+    badgePosition: BadgePosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    badgeContent?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/vue/src/components/Button.vue.d.ts

@@ -0,0 +1,65 @@
+import type { VNode } from "vue";
+import type { TrueColor, ButtonVariant } from "../theme/Theme";
+import type { TooltipPosition } from "./Tooltip.vue";
+import type { GlassVibrancy, GlassOpacity, SpecularMode } from "../../../common/theme/glass";
+export type ButtonColor = TrueColor;
+export type { ButtonVariant };
+export type { GlassVibrancy, GlassOpacity, SpecularMode };
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type ButtonWeight = "normal" | "medium" | "semibold" | "bold";
+export interface ButtonProps {
+    variant?: ButtonVariant;
+    color?: TrueColor;
+    size?: ButtonSize;
+    weight?: ButtonWeight;
+    fullWidth?: boolean;
+    leadingIcon?: string | VNode;
+    trailingIcon?: string | VNode;
+    loading?: boolean;
+    iconOnly?: boolean;
+    accent?: boolean;
+    accentColor?: TrueColor;
+    /** When true, renders in a persistent lighter "on" state with hover suppressed. accentColor overrides the active color. */
+    active?: boolean;
+    /** When true, applies glass styling (fill + vibrancy + optional specular overlay). */
+    glass?: boolean;
+    /** Backdrop vibrancy level for glass surfaces. */
+    vibrancy?: GlassVibrancy;
+    /** Glass fill transparency level for glass surfaces. */
+    glassOpacity?: GlassOpacity;
+    /** Specular highlight mode for glass surfaces. */
+    specularMode?: SpecularMode;
+    disabled?: boolean;
+    /** When set, a styled tooltip is shown on hover. */
+    tooltip?: string;
+    /** Position of the tooltip relative to the button. Defaults to 'top'. */
+    tooltipPosition?: TooltipPosition;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {
+    el: import("vue").Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+    glass: boolean;
+    color: TrueColor;
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    weight: ButtonWeight;
+    fullWidth: boolean;
+    loading: boolean;
+    iconOnly: boolean;
+    accent: boolean;
+    active: boolean;
+    vibrancy: GlassVibrancy;
+    glassOpacity: GlassOpacity;
+    specularMode: SpecularMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/ButtonSelector.vue.d.ts

@@ -0,0 +1,44 @@
+import type { VNode } from "vue";
+import type { TrueColor } from "../theme/Theme";
+import type { IconSize } from "../types/Icon";
+export type ButtonSelectorMode = "single" | "multi";
+export interface ButtonSelectorOption<T extends string = string> {
+    value: T;
+    label: string;
+    description?: string;
+    /** Icon name (string from icon registry) or a VNode */
+    icon?: string | VNode;
+    disabled?: boolean;
+}
+export interface ButtonSelectorProps<T extends string = string> {
+    options: ButtonSelectorOption<T>[];
+    /** In single mode: a single value. In multi mode: an array of values. */
+    modelValue: T | T[];
+    /** "single" enforces radio-like behaviour; "multi" allows multiple selections (default). */
+    mode?: ButtonSelectorMode;
+    color?: TrueColor;
+    /** Number of grid columns (default: 2) */
+    cols?: 1 | 2 | 3 | 4;
+    /** Tailwind gap class applied to the grid (default: "gap-2") */
+    gap?: string;
+    /** Optional label rendered above the grid */
+    label?: string;
+    /** Icon size passed to the icon renderer (default: "sm") */
+    iconSize?: IconSize;
+    disabled?: boolean;
+}
+declare const _default: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: T | T[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & ButtonSelectorProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: T | T[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/types/vue/src/components/Checkbox.vue.d.ts

@@ -0,0 +1,71 @@
+import type { TrueColor, Size } from "../theme/Theme";
+type CheckboxDescriptionPlacement = "bottom" | "inline";
+type CheckboxAlign = "left" | "right";
+export interface CheckboxProps {
+    /** Controlled checked state (v-model). */
+    modelValue?: boolean;
+    id?: string;
+    /**
+     * Optional label rendered next to the checkbox control.
+     */
+    label?: string;
+    /**
+     * Optional description displayed under the label.
+     */
+    description?: string;
+    /**
+     * Controls if the description is stacked under the label (default) or inline beside it.
+     */
+    descriptionPlacement?: CheckboxDescriptionPlacement;
+    /**
+     * Adjusts checkbox dimensions and typography.
+     */
+    size?: Size;
+    /**
+     * Accent color applied to the checkbox.
+     */
+    color?: TrueColor;
+    /**
+     * Enables the native indeterminate visual state.
+     */
+    indeterminate?: boolean;
+    /**
+     * When true the container will stretch to the available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Renders the checkbox control on the left (default) or right side of the label block.
+     */
+    controlAlign?: CheckboxAlign;
+    disabled?: boolean;
+    /**
+     * Additional classes applied directly to the input element.
+     */
+    inputClassName?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps, {
+    el: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (event: Event) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    color: TrueColor;
+    size: Size;
+    disabled: boolean;
+    fullWidth: boolean;
+    descriptionPlacement: CheckboxDescriptionPlacement;
+    indeterminate: boolean;
+    controlAlign: CheckboxAlign;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: () => unknown;
+    description?: () => unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/CollapsibleHelpText.vue.d.ts

@@ -0,0 +1,29 @@
+import type { TrueColor } from "../theme/Theme";
+export interface CollapsibleHelpTextProps {
+    title?: string;
+    text: string;
+    maxLength?: number;
+    showIcon?: boolean;
+    icon?: string;
+    tone?: TrueColor;
+    variant?: "card" | "plain";
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleHelpTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CollapsibleHelpTextProps> & Readonly<{}>, {
+    icon: string;
+    tone: TrueColor;
+    variant: "card" | "plain";
+    showIcon: boolean;
+    maxLength: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    renderMarkdown?: (props: {
+        text: string;
+    }) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/CollapsiblePanel.vue.d.ts

@@ -0,0 +1,50 @@
+import type { PanelProps } from "./Panel.vue";
+export interface CollapsiblePanelProps extends Omit<PanelProps, "title" | "subtitle" | "actions"> {
+    title?: string;
+    subtitle?: string;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    minExpandedHeight?: number | string;
+    contentClassName?: string;
+    contentMaxHeight?: number;
+    /** When true, the expanded content grows to fill available space instead of scrolling. */
+    fillHeight?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsiblePanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: (expanded: boolean) => any;
+    "update:expanded": (expanded: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CollapsiblePanelProps> & Readonly<{
+    onToggle?: ((expanded: boolean) => any) | undefined;
+    "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+}>, {
+    tone: import("../index.js").TrueColor;
+    variant: import("./Panel.vue").PanelVariant;
+    disabled: boolean;
+    fullWidth: boolean;
+    loading: boolean;
+    expanded: boolean;
+    padding: import("./Panel.vue").PanelPadding;
+    corner: import("./Panel.vue").PanelCorner;
+    flexBody: boolean;
+    hoverShadow: boolean;
+    hoverable: boolean;
+    scrollable: boolean;
+    specularHighlight: boolean;
+    defaultExpanded: boolean;
+    contentMaxHeight: number;
+    fillHeight: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/Combobox.vue.d.ts

@@ -0,0 +1,23 @@
+import type { TrueColor } from "../theme/Theme";
+export interface ComboboxProps {
+    modelValue?: string;
+    options?: string[];
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    emptyMessage?: string;
+    color?: TrueColor;
+}
+declare const _default: import("vue").DefineComponent<ComboboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ComboboxProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    color: TrueColor;
+    disabled: boolean;
+    error: boolean;
+    options: string[];
+    modelValue: string;
+    emptyMessage: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/vue/src/components/ConnectionFlow/ConnectionFlow.vue.d.ts

@@ -0,0 +1,27 @@
+import type { ConnectionFlowProps, ConnectionState } from "./types";
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ConnectionFlowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ConnectionFlowProps> & Readonly<{}>, {
+    animated: boolean;
+    hoverable: boolean;
+    showLine: boolean;
+    dotSpacing: number;
+    animateCompleted: boolean;
+    connectorHalf: boolean;
+    connectorBorderSize: "fit" | "xs" | "sm" | "md" | "lg";
+    childIndent: "xs" | "sm" | "md" | "lg";
+    childRowGap: number;
+    flowState: ConnectionState;
+    connectorWidth: number;
+    allowScroll: boolean;
+    autoScale: boolean;
+    minScale: number;
+    fullWidthConnectors: boolean;
+    autoConnectorState: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    rightAction?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/ConnectionFlow/ConnectionFlowColumn.vue.d.ts

@@ -0,0 +1,45 @@
+import type { TreeTone } from "../TreeView/types";
+import type { ConnectionFlowItem } from "./types";
+export interface ColumnGeometry {
+    /** Total rendered height of the whole column (parent + gap + all children). */
+    totalHeight: number;
+    /**
+     * Y offsets (from the TOP of the column) to the centre of each source card.
+     * anchors[0] = parent card, anchors[1..] = child cards (or parallel items).
+     */
+    anchors: number[];
+    /** True when this geometry represents a parallel group (not a single-item column). */
+    isParallelGroup?: boolean;
+}
+export interface ConnectionFlowColumnProps {
+    item: ConnectionFlowItem;
+    globalTone?: TreeTone;
+    childIndent?: "xs" | "sm" | "md" | "lg";
+    childRowGap?: number;
+    animated?: boolean;
+    showLine?: boolean;
+    connectorHalf?: boolean;
+    connectorBorderSize?: "fit" | "xs" | "sm" | "md" | "lg";
+    dotSpacing?: number;
+    itemWidth?: number | string;
+    /** When true, forces all child branches to animate (mirrors parent connection state). */
+    flowActive?: boolean;
+    /** When true, cards show a hover lift effect. */
+    hoverable?: boolean;
+}
+declare const _default: import("vue").DefineComponent<ConnectionFlowColumnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    geometryChange: (geo: ColumnGeometry) => any;
+}, string, import("vue").PublicProps, Readonly<ConnectionFlowColumnProps> & Readonly<{
+    onGeometryChange?: ((geo: ColumnGeometry) => any) | undefined;
+}>, {
+    animated: boolean;
+    hoverable: boolean;
+    showLine: boolean;
+    dotSpacing: number;
+    connectorHalf: boolean;
+    connectorBorderSize: "fit" | "xs" | "sm" | "md" | "lg";
+    childIndent: "xs" | "sm" | "md" | "lg";
+    childRowGap: number;
+    flowActive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/vue/src/components/ConnectionFlow/ConnectionFlowConnector.vue.d.ts

@@ -0,0 +1,103 @@
+import { type VNodeChild } from "vue";
+import type { TreeTone } from "../TreeView/types";
+import type { ConnectionState } from "./types";
+export interface ConnectionFlowConnectorProps {
+    state?: ConnectionState;
+    sourceTone?: TreeTone;
+    targetTone?: TreeTone;
+    middleIcon?: VNodeChild;
+    width?: number;
+    halfRing?: boolean;
+    showLine?: boolean;
+    animated?: boolean;
+    dotSpacing?: number;
+    borderSize?: "fit" | "xs" | "sm" | "md" | "lg";
+    sourceFill?: string;
+    sourceBorder?: string;
+    sourceDot?: string;
+    targetFill?: string;
+    targetBorder?: string;
+    targetDot?: string;
+    dotColor?: string;
+    /**
+     * Multi-source mode: Y offsets from the TOP of the connector space for each
+     * source card's centre (parent first, then children).
+     * When provided and length > 1, a vertical trunk is drawn on the left side
+     * connecting all source rings, and each source gets its own dotted line to
+     * the RIGHT entry ring.
+     */
+    leftAnchors?: number[];
+    /**
+     * Total height the connector should occupy.
+     * Defaults to the source column height; pass max(source, target) when heights differ.
+     */
+    connectorHeight?: number;
+    /**
+     * Y offset of the TARGET card's centre from the top of the connector space.
+     * When different from the source anchor, a bezier curve is drawn between the
+     * two ring positions instead of a straight horizontal line.
+     * Defaults to the source anchor (straight line).
+     */
+    rightAnchorY?: number;
+    /**
+     * Tones for extra source rings (index 0 = parent, already set via sourceTone).
+     * Used to colour child source rings independently.
+     */
+    extraSourceTones?: TreeTone[];
+    /**
+     * Fan-out mode: Y offsets from the TOP of the connector space for each TARGET card's centre.
+     * When provided and length > 1, a vertical trunk is drawn on the RIGHT side
+     * connecting all target rings, and each target gets its own dotted line from the LEFT entry ring.
+     */
+    rightAnchors?: number[];
+    /**
+     * Tones for each right-side ring in fan-out mode.
+     * Index i corresponds to rightAnchors[i]. Falls back to targetTone.
+     */
+    rightAnchorTones?: TreeTone[];
+    /**
+     * Per-lane active state for fan-out mode.
+     * Index i corresponds to rightAnchors[i]. When provided, each lane's animation is
+     * controlled independently. Falls back to the overall `state`.
+     */
+    rightAnchorStates?: ConnectionState[];
+    /**
+     * When true, flowing dots are shown even when `state` is `'stopped'`
+     * (already-traversed / completed connectors also animate).
+     * Default: false
+     */
+    animateCompleted?: boolean;
+    /**
+     * When true, the connector stretches to fill available flex space instead of using a
+     * fixed pixel width. The SVG geometry is recalculated from the measured container width
+     * so rings stay at correct positions and the middle icon stays at the exact midpoint.
+     * Default: false
+     */
+    fullWidth?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ConnectionFlowConnectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ConnectionFlowConnectorProps> & Readonly<{}>, {
+    width: number;
+    fullWidth: boolean;
+    animated: boolean;
+    state: ConnectionState;
+    sourceTone: TreeTone;
+    targetTone: TreeTone;
+    halfRing: boolean;
+    showLine: boolean;
+    dotSpacing: number;
+    borderSize: "fit" | "xs" | "sm" | "md" | "lg";
+    extraSourceTones: TreeTone[];
+    rightAnchorTones: TreeTone[];
+    rightAnchorStates: ConnectionState[];
+    animateCompleted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    middleIcon?: (props: {}) => any;
+} & {
+    middleIcon?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/ConnectionFlow/ConnectionFlowParallelGroup.vue.d.ts

@@ -0,0 +1,17 @@
+import type { TreeTone } from "../TreeView/types";
+import type { ConnectionFlowItem } from "./types";
+import type { ColumnGeometry } from "./ConnectionFlowColumn.vue";
+export interface ConnectionFlowParallelGroupProps {
+    items: ConnectionFlowItem[];
+    globalTone?: TreeTone;
+    itemWidth?: number | string;
+    hoverable?: boolean;
+}
+declare const _default: import("vue").DefineComponent<ConnectionFlowParallelGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    geometryChange: (geo: ColumnGeometry) => any;
+}, string, import("vue").PublicProps, Readonly<ConnectionFlowParallelGroupProps> & Readonly<{
+    onGeometryChange?: ((geo: ColumnGeometry) => any) | undefined;
+}>, {
+    hoverable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/vue/src/components/ConnectionFlow/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ConnectionFlow } from "./ConnectionFlow.vue";
+export { default as ConnectionFlowConnector } from "./ConnectionFlowConnector.vue";
+export { default as ConnectionFlowColumn } from "./ConnectionFlowColumn.vue";
+export { default as ConnectionFlowParallelGroup } from "./ConnectionFlowParallelGroup.vue";
+export type { ConnectionFlowProps, ConnectionFlowItem, ConnectionFlowConnectorConfig, ConnectionState, } from "./types";