@cjlapao/ui-kit-vue 0.2.5 → 0.2.7

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

@@ -129,3 +129,92 @@ export declare const labelAnchor: (points: {
     x: number;
     y: number;
 };
+/** One end of a route, with the card it must connect to. */
+export interface PathEndpoint {
+    box: Box;
+    /**
+     * The connection line, as a fraction along the side. Callers pass the
+     * card's own `anchorY / height`; a side change simply slides the same
+     * fraction along the new side.
+     */
+    t: number;
+    /**
+     * The visual idiom, as a preference: these sides get a bonus, never a
+     * straitjacket — a card in the way always outranks the idiom.
+     */
+    preferSides?: PortSide[];
+}
+/**
+ * Shared lane accounting. Every route the engine returns charges its grid
+ * segments here, and later routes pay for reusing them — so two retry loops
+ * into the same card stack stack themselves side by side on adjacent
+ * clearance lines instead of drawing one line twice.
+ */
+export type LaneUse = Map<string, number>;
+export declare const createLaneUse: () => LaneUse;
+export interface PathOptions {
+    style: ConnectionFlowEdgeStyle;
+    /** How far a line must run out of a port before it may turn. */
+    stub?: number;
+    radius?: number;
+    trim?: number;
+    /**
+     * Obstacle inflation. A clean route passes at least this far outside every
+     * card — sized for the terminal rings, so a route that clears the inflated
+     * box also clears the bulges sticking out of the real one.
+     */
+    clearance?: number;
+    /** Extra cost per change of direction. */
+    bendPenalty?: number;
+    /** Cost per px travelled inside an inflated card. Finite on purpose. */
+    obstaclePenalty?: number;
+    /** Cost per prior use of the same grid segment. */
+    lanePenalty?: number;
+    /** Score taken off for connecting on a preferred side. */
+    preferBonus?: number;
+    /** Shared across one layout run — see `createLaneUse`. */
+    laneUse?: LaneUse;
+}
+/** Does any segment of this waypoint list pass through the interior of a box? */
+export declare const segmentsCrossBoxes: (points: {
+    x: number;
+    y: number;
+}[], boxes: Box[]) => boolean;
+export interface RoutedPath extends Route {
+    /** The ports the engine actually connected — the layout draws its
+     *  connectors here, wherever that turns out to be. */
+    fromPort: Port;
+    toPort: Port;
+}
+/**
+ * A* over the grid the cards define.
+ *
+ * Candidate lines come from the cards themselves — each inflated edge is a
+ * lane that provably clears the cards (a Hanan grid), plus ring roads beyond
+ * them all. Cost is length, plus a penalty per bend, plus a *large but
+ * finite* penalty per px inside an inflated card, plus a small one per reuse
+ * of an already-used lane. Finite obstacles are the important part: an edge
+ * boxed in by cards still draws its fewest-crossings route rather than
+ * vanishing, and a clean route always outranks any number of crossings.
+ *
+ * Returns `null` only when the grid would be too large to search — the
+ * caller then keeps its naive route. The engine never hangs and never blanks.
+ */
+export declare const routeBetween: (from: PathEndpoint, to: PathEndpoint, obstacles: Box[], options: PathOptions) => RoutedPath | null;
+export interface RoutableEdge {
+    id: string;
+    points: {
+        x: number;
+        y: number;
+    }[];
+    style: ConnectionFlowEdgeStyle;
+}
+/**
+ * The crossing pass: compare every pair of routed edges and give the
+ * horizontal one of each crossing a hop. Returns the new `d` for the edges
+ * that gained hops — every other edge keeps its path byte-identical.
+ */
+export declare const routeCrossings: (edges: RoutableEdge[], options?: {
+    cornerRadius?: number;
+    jumpRadius?: number;
+}) => Map<string, string>;

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;
     /**
@@ -243,6 +295,13 @@ export interface LaidOutEdge {
     targetTone: TrueColor;
     /** A bypass arc travels *over* skipped nodes rather than between neighbours. */
     bypass: boolean;
+    /**
+     * The style this edge's corners are drawn in. The crossing-hop pass
+     * rebuilds a crossing edge's path exactly as the router would have drawn
+     * it, which needs the style the edge was routed with — `edgeStyle`
+     * governs corners only, so hops are round on every style.
+     */
+    style?: ConnectionFlowEdgeStyle;
     /**
      * Position in its source's emission round-robin, and how many edges share
      * that round-robin.
@@ -266,6 +325,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,11 +430,26 @@ export interface ConnectionFlowLayoutOptions {
     childGap: number;
     /** Horizontal indent for child nodes. */
     childIndent: number;
+    /**
+     * Vertical gap between the rows of a chained child grid. Wider than the
+     * child gap on purpose: the ladder has to read as a ladder, and the
+     * engine's crossing hops need air in the corridors the rows define.
+     * @default 20
+     */
+    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;
     /** How far above everything in the way a bypass arc travels. */
     bypassLift: number;
+    /**
+     * How far outside a card the path engine will route. An edge whose naive
+     * route crosses a card is re-routed through lanes at least this far from
+     * every card face, so it clears the terminal bulges too. @default 12
+     */
+    pathClearance: number;
     /** Default size of the border bulge where an edge meets a node. */
     ringSize: ConnectionFlowRingSize;
     /** Rows a card shows before the rest collapse behind "show more". */
@@ -386,6 +468,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

@@ -117,6 +117,23 @@ export type InputVariantTokens = {
     /** True when the surface is see-through and sits over unknown content. */
     translucent: boolean;
 };
+/**
+ * Extras for `getInputVariantTokens`.
+ */
+export type InputVariantOptions = {
+    /**
+     * The tone the caller *chose*, as opposed to the one the component resolved.
+     *
+     * `glass` tints its fill from this alone. Every field resolves a missing
+     * tone to `blue` (`tone ?? color ?? "blue"`), so tinting from the resolved
+     * value would repaint every bare `<Input variant="glass">` in the product
+     * pale blue — which is what `ghost` does, and why the distinction has to be
+     * carried from the call site rather than inferred here. A field nobody ever
+     * tinted keeps the white wash it has always had; a field whose caller asked
+     * for violet gets violet glass.
+     */
+    explicitTone?: TrueColor;
+};
 /**
  * The variant's surface with its border colour removed, keeping the width and
  * sides.
@@ -129,6 +146,16 @@ export type InputVariantTokens = {
  * successful one stayed grey. Strip the colour so only one class can apply.
  */
 export declare const stripBorderColor: (surface: string) => string;
+/**
+ * A surface with its background colour removed, keeping the rest.
+ *
+ * Used where a component paints a *second* fill over the variant's own. The
+ * alternative — replacing the expected literal, `surface.replace("bg-white/45",
+ * …)` — goes silently stale the moment anyone edits the token table: the
+ * replace finds nothing, the old fill survives underneath, and the field is
+ * untinted again with nothing said about it. Stripping cannot fail that way.
+ */
+export declare const stripFillClass: (surface: string) => string;
 /** True when a caller-supplied class string sets a text colour of its own. */
 export declare const hasTextColor: (className?: string) => boolean;
 /**
@@ -148,7 +175,7 @@ export declare const stripTextColor: (className: string) => string;
  * replaces it. (`underline` paints no box, so a corner there has nowhere
  * to land — honestly no-op.)
  */
-export declare const getInputVariantTokens: (variant: InputVariant, tone?: TrueColor, corner?: SurfaceCorner) => InputVariantTokens;
+export declare const getInputVariantTokens: (variant: InputVariant, tone?: TrueColor, corner?: SurfaceCorner, options?: InputVariantOptions) => InputVariantTokens;
 export type FieldToneTokens = {
     /** Border colour while anything inside the field has focus. */
     focusBorder: string;

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

@@ -25,6 +25,13 @@ interface ScrollAreaProps {
     variant?: ScrollAreaVariant;
     /** Fade the content at the edges it can scroll toward. @default false */
     mask?: boolean;
+    /**
+     * Whether the region can scroll sideways. A one-axis region — a nav list,
+     * a text column — should say so: `scrollWidth` reports content clipped by
+     * `overflow-x: hidden` as loudly as content that actually scrolls, so the
+     * bar would be drawn for an axis with nothing to scroll. @default true
+     */
+    horizontal?: boolean;
     /**
      * Tab order entry for the viewport while overflowing; the viewport leaves
      * the tab order when the content fits. @default 0
@@ -38,6 +45,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ScrollAreaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScrollAreaProps> & Readonly<{}>, {
+    horizontal: boolean;
     mask: boolean;
     variant: ScrollAreaVariant;
     tabIndex: number;

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

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

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

@@ -43,7 +43,6 @@ declare const _default: import("vue").DefineComponent<SmartInputProps, {}, {}, {
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     size: SmartInputSize;
-    tone: TrueColor;
     disabled: boolean;
     value: string;
     variant: InputVariant;

package/package.json

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