@cjlapao/ui-kit-vue 0.2.3 → 0.2.6

package/dist/types/common/connectionFlow/types.d.ts

@@ -9,6 +9,12 @@ export type ConnectionState = (typeof CONNECTION_STATES)[number];
 /** Shape of the edge drawn between two nodes. */
 export declare const CONNECTION_FLOW_EDGE_STYLES: readonly ["orthogonal", "curved", "straight"];
 export type ConnectionFlowEdgeStyle = (typeof CONNECTION_FLOW_EDGE_STYLES)[number];
+/**
+ * How a card's children attach — the elbow fan, or the walked grid.
+ * @see ConnectionFlowNode.childLayout
+ */
+export declare const CONNECTION_FLOW_CHILD_LAYOUTS: readonly ["fan", "chain"];
+export type ConnectionFlowChildLayout = (typeof CONNECTION_FLOW_CHILD_LAYOUTS)[number];
 /**
  * How the whole component reports that it is loading.
  *
@@ -67,6 +73,19 @@ export interface ConnectionFlowConnectorConfig {
     /** Caption rendered along the edge. */
     label?: string;
 }
+/**
+ * One of a card's two outcomes, as an edge. `success` without a `to` is the
+ * implicit next step and draws nothing extra — it only restyles the walk
+ * edge. `failure` always names its target: there is no implicit failure.
+ */
+export interface ConnectionFlowBranch {
+    /** Target node id. */
+    to?: string;
+    /** @default emerald for success, rose for failure (`STATUS_TONE`). */
+    tone?: TrueColor;
+    /** Caption along the edge (no default text — the kit ships no strings). */
+    label?: string;
+}
 /**
  * What happened to a step, as opposed to what colour it is.
  *
@@ -166,6 +185,39 @@ export interface ConnectionFlowNode {
     maxItems?: number;
     /** Nodes hanging vertically below this one. */
     children?: ConnectionFlowNode[];
+    /**
+     * How `children` attach.
+     *
+     * - `"fan"` (default) is today: every child gets its own elbow from the
+     *   parent, hanging below it, indented.
+     * - `"chain"` reads `rows` (or `children`, one card per row) as a grid:
+     *   the flow enters the first card, walks each row left→right, and drops
+     *   from the last card of a row into the first card of the next. The
+     *   parent becomes a pure container — it emits no edge onward; the grid's
+     *   last card carries the connection to the parent's next sibling.
+     *
+     * @default "fan"
+     */
+    childLayout?: ConnectionFlowChildLayout;
+    /**
+     * Rows for `childLayout: "chain"` — each row walks left→right, rows are
+     * walked top→bottom. Cards keep the standard size; a longer row widens
+     * the grid (longer connectors), never the cards.
+     */
+    rows?: ConnectionFlowNode[][];
+    /**
+     * Where this card goes when it succeeds. Without `to` it follows the
+     * implicit next step (the track, or the chain walk); with `to` the
+     * successor points there instead. Emerald unless `tone` says otherwise.
+     */
+    success?: ConnectionFlowBranch;
+    /**
+     * Where this card goes when it fails — usually upstream (a loop-back
+     * that re-enters the target from the top, so the flow can run the chain
+     * down again). Rose unless `tone` says otherwise. Always drawn: topology
+     * stays visible while the flow runs; only its liveliness follows status.
+     */
+    failure?: ConnectionFlowBranch;
     /** Config for the edge leading *into* this node. */
     connector?: ConnectionFlowConnectorConfig;
     /**
@@ -266,6 +318,14 @@ export interface LaidOutEdge {
     emitSpan: number;
     animated: boolean;
     label?: string;
+    /**
+     * What kind of connection this is. Optional for backward compatibility —
+     * renderers treat everything as the track edge it always drew; the tests
+     * and the chain/branch passes are explicit.
+     */
+    kind?: "track" | "chain" | "branch";
+    /** Set when `kind` is `"branch"`. */
+    branchKind?: "success" | "failure";
 }
 /**
  * A terminal where one or more edges meet a node.
@@ -363,6 +423,10 @@ export interface ConnectionFlowLayoutOptions {
     childGap: number;
     /** Horizontal indent for child nodes. */
     childIndent: number;
+    /** Vertical gap between the rows of a chained child grid. @default childGap */
+    rowGap: number;
+    /** Left inset of a chained child grid under its parent. @default childIndent */
+    gridIndent: number;
     edgeStyle: ConnectionFlowEdgeStyle;
     /** Corner radius on an orthogonal edge. */
     cornerRadius: number;
@@ -386,6 +450,14 @@ export declare const nodeTone: (node: ConnectionFlowNode | undefined) => TrueCol
 export declare const nodeIcon: (node: ConnectionFlowNode | undefined) => string | undefined;
 /** Whether the node is executing. `status: "running"` implies it. */
 export declare const nodeIsActive: (node: ConnectionFlowNode | undefined) => boolean;
+/** Whether the node failed — what makes its failure edge the live one. */
+export declare const nodeHasFailed: (node: ConnectionFlowNode | undefined) => boolean;
+/**
+ * The chain grid's rows, however they were written: `rows` verbatim, or a
+ * flat `children` array promoted to one card per row. Fan callers never
+ * call this.
+ */
+export declare const toRows: (node: ConnectionFlowNode) => ConnectionFlowNode[][];
 /**
  * Whether the node is bypassed. Tri-state on purpose: `undefined` means "no
  * opinion", which is what lets `autoState` infer it, while an explicit

package/dist/types/common/theme/Theme.d.ts

@@ -387,6 +387,21 @@ export declare const DEFAULT_SURFACE_PADDING: SurfacePadding;
 export declare const getSurfacePaddingClass: (padding: SurfacePadding) => string;
 /** Every padding token but `none`, for the callers that require a real inset. */
 export declare const getSurfacePaddingClasses: () => Record<SurfacePadding, string>;
+/**
+ * The gutter a detached card leaves OUTSIDE itself — the margin between the
+ * card and the edges of its container, controllable on every axis on its
+ * own. Spelled once here, in the same language as {@link surfacePaddingClasses}
+ * but one step smaller per token (`xs` is the `m-2` the floating `SideMenu`
+ * carries, and what a paired `PageHeader` leaves above and to its right),
+ * and deliberately without the `sm:` steps of the padding scale: a gutter
+ * must be one predictable number all the way down, or the menu and header
+ * cards stop aligning on the breakpoint.
+ */
+export declare const SURFACE_GUTTER_AXES: readonly ["top", "right", "bottom", "left"];
+export type SurfaceGutterAxis = (typeof SURFACE_GUTTER_AXES)[number];
+/** The gutter a detached card leaves when the caller does not pick one. */
+export declare const DEFAULT_SURFACE_GUTTER: SurfacePadding;
+export declare const getSurfaceGutterClass: (axis: SurfaceGutterAxis, gutter: SurfacePadding) => string;
 /**
  * The tones that read as "no tint". Consumers that tint chrome per tone
  * (Table's header band, for instance) route these through the neutral

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

@@ -260,7 +260,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         readonly onColumnVisibilityChange?: ((visibility: Record<string, boolean>) => any) | undefined;
         readonly onColumnWidthChange?: ((widths: Record<string, number>) => any) | undefined;
         readonly onGroupByChange?: ((columnId: string | null) => any) | undefined;
-        readonly onStickyColumnsChange?: ((config: Record<string, "left" | "right">) => any) | undefined;
+        readonly onStickyColumnsChange?: ((config: Record<string, "right" | "left">) => any) | undefined;
         readonly onTableSettingsChange?: ((settings: TableSettings) => any) | undefined;
         readonly onRowClick?: ((row: T, index: number) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSortChange" | "onViewChange" | "onColumnVisibilityChange" | "onColumnWidthChange" | "onGroupByChange" | "onStickyColumnsChange" | "onTableSettingsChange" | "onRowClick"> & TableProps<T> & Partial<{}>> & import("vue").PublicProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cjlapao/ui-kit-vue",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cjlapao/ui-kit.git",

package/dist/types/common/connectionFlow/icons.d.ts

@@ -1,15 +0,0 @@
-/**
- * Canvas cannot mount an `<svg>`. A registry icon is markup, so to draw one
- * into a 2D context its path data has to be lifted out and turned into a
- * `Path2D`. The result is cached — building a `Path2D` per frame would be a
- * parse per icon per frame.
- */
-/**
- * Extracts every `d` attribute from SVG markup and merges them into one path.
- *
- * Returns `null` for markup with no paths — a circle-only or rect-only icon —
- * rather than an empty `Path2D`, so the caller can fall back to drawing
- * nothing instead of silently painting an invisible glyph.
- */
-export declare const pathFromSvgMarkup: (key: string, markup: string) => Path2D | null;
-export declare const clearIconPathCache: () => void;

package/dist/types/common/connectionFlow/paint.d.ts

@@ -1,36 +0,0 @@
-import { type ColorScheme } from "./tones";
-import type { ConnectionFlowLayout } from "./types";
-export interface PaintOptions {
-    scheme: ColorScheme;
-    /** Corner radius of a node box, in px. */
-    radius: number;
-    /** Font sizes, from the node metrics for the current control size. */
-    titleSize: number;
-    bodySize: number;
-    padding: number;
-    /** Milliseconds since the animation started — drives dot travel and pulse. */
-    time: number;
-    /** Target px between travelling dots. */
-    dotSpacing: number;
-    /** Node ids to keep lit. Empty means "no highlight, draw everything lit". */
-    highlightNodes: Set<string>;
-    /** Edge ids to keep lit. */
-    highlightEdges: Set<string>;
-    hoveredId: string | null;
-    selectedId: string | null;
-    /** Draws each node's progress indicator. */
-    showProgress: boolean;
-    /** Device pixel ratio the context was scaled by. */
-    dpr: number;
-    /** Resolved icon glyphs, keyed by registry name. */
-    icons?: Map<string, Path2D>;
-    fontFamily: string;
-}
-/**
- * Paints one frame. The context is expected to be already scaled for the
- * device pixel ratio and translated/scaled for pan and zoom — the painter
- * works purely in layout coordinates.
- */
-export declare const paintConnectionFlow: (ctx: CanvasRenderingContext2D, layout: ConnectionFlowLayout, options: PaintOptions) => void;
-/** True when the layout contains anything that needs a new frame. */
-export declare const layoutIsAnimated: (layout: ConnectionFlowLayout) => boolean;

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

@@ -1,28 +0,0 @@
-import { type ConnectionFlowLayout, type LaidOutNode } from "../../connectionFlow";
-import type { ColorScheme } from "../../connectionFlow";
-type __VLS_Props = {
-    layout: ConnectionFlowLayout;
-    scheme: ColorScheme;
-    radius: number;
-    titleSize: number;
-    bodySize: number;
-    padding: number;
-    dotSpacing: number;
-    showProgress: boolean;
-    animated: boolean;
-    highlightNodes: Set<string>;
-    highlightEdges: Set<string>;
-    hoveredId: string | null;
-    selectedId: string | null;
-    scale: number;
-    offsetX: number;
-    offsetY: number;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (node: LaidOutNode) => any;
-    hover: (node: LaidOutNode | null) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((node: LaidOutNode) => any) | undefined;
-    onHover?: ((node: LaidOutNode | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,45 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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/types.d.ts

@@ -1,220 +0,0 @@
-import type { VNodeChild } from "vue";
-import type { TreeTone } from "../TreeView/types";
-export type ConnectionState = "flowing" | "stopped" | "disabled";
-export interface ConnectionFlowConnectorConfig {
-    /** Active flow state for this connector */
-    state?: ConnectionState;
-    /** Optional React element to render in the middle (e.g. an icon) */
-    icon?: VNodeChild;
-    /** Width of the connector band in px (default: 56) */
-    width?: number;
-    /** Whether to animate the flowing dots (default: true) */
-    animated?: boolean;
-    /** target px per dot cycle (default: 60) */
-    dotSpacing?: number;
-    /** Connector ring border width (default: 'xs') */
-    borderSize?: "fit" | "xs" | "sm" | "md" | "lg";
-    /** Whether to draw half-rings (default: true) */
-    halfRing?: boolean;
-    /** Show the horizontal line between rings (default: true) */
-    showLine?: boolean;
-    /** Override — force the source-side ring tone instead of inheriting from source item */
-    sourceTone?: TreeTone;
-    /** Override — force the target-side ring tone instead of inheriting from this item */
-    targetTone?: TreeTone;
-    /** Source ring background fill color (CSS string, e.g. '#22c55e' or 'rgba(...)') */
-    sourceFill?: string;
-    /** Source ring stroke/border color */
-    sourceBorder?: string;
-    /** Source ring center dot color */
-    sourceDot?: string;
-    /** Target ring background fill color */
-    targetFill?: string;
-    /** Target ring stroke/border color */
-    targetBorder?: string;
-    /** Target ring center dot color */
-    targetDot?: string;
-    /** Animated dot color (overrides what is derived from targetTone) */
-    dotColor?: string;
-    /**
-     * When true, flowing dots are shown even when this connector's state is `'stopped'`
-     * (i.e. already-traversed / completed edges also animate).
-     * Default: false
-     */
-    animateCompleted?: boolean;
-}
-export interface ConnectionFlowItem {
-    id: string;
-    icon?: VNodeChild;
-    iconClassName?: string;
-    title?: VNodeChild;
-    titleClassName?: string;
-    /** When true, the card title wraps on word boundaries up to 10 lines instead of truncating. Default: false */
-    titleWrap?: boolean;
-    /** When true, the card title stays on one line and scrolls horizontally. Default: false */
-    titleScroll?: boolean;
-    subtitle?: VNodeChild;
-    subtitleClassName?: string;
-    description?: VNodeChild;
-    descriptionClassName?: string;
-    /** Optional badge/status slot rendered below description, without tone-derived text styling. */
-    badge?: VNodeChild;
-    tone?: TreeTone;
-    body?: VNodeChild;
-    defaultExpanded?: boolean;
-    actions?: VNodeChild;
-    hoverActions?: VNodeChild;
-    /**
-     * Connector config for the edge leading INTO this item.
-     * If not provided, inherits from the ConnectionFlow's default state.
-     * Ignored for the first item (it has no predecessor).
-     */
-    connector?: ConnectionFlowConnectorConfig;
-    /**
-     * Children render vertically below this item's card using TreeView-style
-     * SVG connectors. The connector between this item and the next sibling
-     * spans the full column height (parent + children).
-     */
-    children?: ConnectionFlowItem[];
-    /**
-     * When true, this item has NO right-side connector to the next sibling
-     * (it terminates the horizontal flow after itself).
-     * Default: false
-     */
-    terminal?: boolean;
-    /**
-     * Active state — drives the vertical sub-tree dot animation color.
-     * Default: false
-     */
-    active?: boolean;
-    /**
-     * When true, this item is part of a parallel group. Consecutive items with
-     * parallel=true are rendered as a single vertical column instead of separate
-     * horizontal nodes. Fan-out (1→N) and fan-in (N→1) connectors are added automatically.
-     * Default: false
-     */
-    parallel?: boolean;
-    /**
-     * When true, the card shows a subtle hover lift effect (shadow + translate-y).
-     * Default: false
-     */
-    hoverable?: boolean;
-    /**
-     * When true, overlays a pulsing background animation on the card (uses the item's tone).
-     * Typically combined with `active: true` to indicate in-progress steps.
-     * Default: false
-     */
-    activePulse?: boolean;
-    /**
-     * When true, this step was skipped — the execution flow bypassed it.
-     * A visual bypass arc is drawn from the last non-skipped predecessor to the
-     * first non-skipped successor, arching over all consecutive skipped items.
-     * Default: false
-     */
-    skipped?: boolean;
-}
-export interface ConnectionFlowProps {
-    /** The nodes to render horizontally */
-    items: ConnectionFlowItem[];
-    /**
-     * Fallback state applied to any connector that doesn't have its own `state`.
-     * Default: 'flowing'
-     */
-    flowState?: ConnectionState;
-    /**
-     * Fallback icon shown in the middle of connectors (overridden per-item).
-     */
-    flowIcon?: VNodeChild;
-    /**
-     * Fallback connector width in px.
-     * Default: 56
-     */
-    connectorWidth?: number;
-    /**
-     * Whether flowing-dot animation is enabled globally.
-     * Default: true
-     */
-    animated?: boolean;
-    /**
-     * Target px between dots globally.
-     * Default: 60
-     */
-    dotSpacing?: number;
-    /**
-     * Ring border size globally.
-     * Default: 'xs'
-     */
-    connectorBorderSize?: "fit" | "xs" | "sm" | "md" | "lg";
-    /**
-     * Draw half-rings (matching TreeView half-connector style).
-     * Default: true
-     */
-    connectorHalf?: boolean;
-    /**
-     * Show the horizontal line between connectors.
-     * Default: true
-     */
-    showLine?: boolean;
-    /** Indent size for children sub-trees. Default: 'xs' */
-    childIndent?: "xs" | "sm" | "md" | "lg";
-    /** Row gap in px between children. Default: 8 */
-    childRowGap?: number;
-    /**
-     * If true, allows the flow to scroll horizontally/vertically if the container is smaller than the flow.
-     * Default: false
-     */
-    allowScroll?: boolean;
-    /**
-     * Set a fixed width for all items in the flow (e.g. 250, '300px').
-     * Primarily useful when `allowScroll` is enabled.
-     */
-    itemWidth?: number | string;
-    /**
-     * When true, automatically scales the entire flow down to fit the container width.
-     * Once the scale would go below `minScale`, the flow is clamped and allowed to scroll.
-     * Default: false
-     */
-    autoScale?: boolean;
-    /**
-     * Minimum CSS scale factor applied when `autoScale` is true.
-     * Below this value the flow falls back to horizontal scroll instead of shrinking further.
-     * Default: 0.55
-     */
-    minScale?: number;
-    /** Extra content to render to the right of the entire flow (e.g. an expand toggle) */
-    rightAction?: VNodeChild;
-    /**
-     * When true, connectors stretch to fill all remaining width instead of using a fixed
-     * pixel size. Card columns collapse to their natural content width. The connector icon
-     * is always positioned at the exact midpoint of the expanded connector.
-     * Default: false
-     */
-    fullWidthConnectors?: boolean;
-    /**
-     * When true, all cards in the flow show a hover lift effect.
-     * Default: false
-     */
-    hoverable?: boolean;
-    /**
-     * When true, flowing dots are rendered on `'stopped'` (completed / already-traversed)
-     * connectors in addition to `'flowing'` ones. Bypass arcs over skipped steps always
-     * animate when `animated` is true, regardless of this flag.
-     * Default: false
-     */
-    animateCompleted?: boolean;
-    /**
-     * When true, the engine automatically manages connector states and skipped detection
-     * based purely on each item's `tone`:
-     *
-     * - **Connector state** (when no explicit `connector.state` is set):
-     *   - Non-neutral source tone → `'stopped'` (solid toned line — step was traversed)
-     *   - Neutral source tone     → `'disabled'` (dashed gray  — step not yet reached)
-     *
-     * - **Skipped detection**: a neutral-tone item that has at least one non-neutral
-     *   successor is automatically treated as skipped — a bypass arc is drawn over it.
-     *
-     * Explicit per-item `connector.state` or `item.skipped` values always take precedence.
-     * Default: false
-     */
-    autoConnectorState?: boolean;
-}