@cjlapao/ui-kit-vue 0.2.5 → 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/package.json

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