@cjlapao/ui-kit-vue 0.2.6 → 0.2.8

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

@@ -0,0 +1,4 @@
+import type { ConnectionFlowLayoutOptions, LaidOutConnector, LaidOutEdge, LaidOutNode } from "./types";
+/** Allocate one terminal per edge endpoint. Overflow uses the nearest free side;
+ * each route reserves its own lane, including fan-in and fan-out connections. */
+export declare function separateAnchors(nodes: LaidOutNode[], edges: LaidOutEdge[], connectors: Map<string, LaidOutConnector>, options: ConnectionFlowLayoutOptions): void;

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

@@ -0,0 +1,21 @@
+import { type ConnectionFlowLayoutOptions, type LaidOutConnector, type LaidOutEdge, type LaidOutNode } from "./types";
+/** Conservative glyph advances at the renderer's fixed 10px font size. */
+export declare const captionTextWidth: (text: string) => number;
+export declare function wrapCaption(text: string, width: number): string[];
+/** Captions own real corridor area, not a rectangle painted over the board.
+ * Place labelled routes in order, reserve their bounds, then route unlabelled
+ * paths around them. Previously placed captions never move under a later edge.
+ */
+export declare function layoutCaptions(nodes: LaidOutNode[], edges: LaidOutEdge[], connectors: Map<string, LaidOutConnector>, options: ConnectionFlowLayoutOptions): void;
+/** Per-node seam budgets. A retry reserves the seam on the side of its
+ * target; a normal connector reserves the seam before its destination. */
+export declare function captionSpacing(nodes: readonly import("./types").ConnectionFlowNode[], options: ConnectionFlowLayoutOptions): {
+    before: Map<string, {
+        horizontal: number;
+        vertical: number;
+    }>;
+    after: Map<string, {
+        horizontal: number;
+        vertical: number;
+    }>;
+};

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

@@ -1,4 +1,4 @@
-import { type ConnectionFlowLayout, type ConnectionFlowLayoutOptions, type ConnectionFlowNode, type ConnectionState, type LaidOutNode } from "./types";
+import { type ConnectionFlowConnection, type ConnectionFlowLayout, type ConnectionFlowLayoutOptions, type ConnectionFlowNode, type ConnectionState, type LaidOutNode } from "./types";
 /**
  * A column on the main track: one `step`/`branch` node, or a stack of
  * consecutive `parallel` ones.
@@ -26,6 +26,8 @@ export declare const buildColumns: (nodes: ConnectionFlowNode[]) => Column[];
 export declare const resolveSkipped: (columns: Column[], autoSkip: boolean) => Set<number>;
 export interface LayoutInput {
     nodes: ConnectionFlowNode[];
+    /** When supplied, draw only these connections, including an empty array. */
+    connections?: readonly ConnectionFlowConnection[];
     options?: Partial<ConnectionFlowLayoutOptions>;
     /** Fallback state for edges that do not declare one. */
     flowState?: ConnectionState;

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

@@ -88,6 +88,11 @@ export interface Route {
     d: string;
 }
 export declare const routePorts: (fromPort: Port, toPort: Port, options: RouteOptions) => Route;
+/** Rebuild an existing corridor after moving a terminal along its side. */
+export declare const routePolyline: (points: {
+    x: number;
+    y: number;
+}[], style: ConnectionFlowEdgeStyle, radius: number) => Route;
 /** Total length of a waypoint list. */
 export declare const routeLength: (points: {
     x: number;
@@ -129,3 +134,113 @@ 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[];
+    /** Optional hard constraint for already allocated terminal sides. */
+    sides?: 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 {
+    /** Require all obstacle interiors to remain clear (caption corridor routing). */
+    strictObstacles?: boolean;
+    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;
+    /** Minimum distance between parallel independent lanes. */
+    laneSpacing?: number;
+    /** Existing routes: charge crowding and expose adjacent lanes. */
+    occupied?: readonly (readonly {
+        x: number;
+        y: number;
+    }[])[];
+}
+/** Minimum centre-to-centre lane distance, including room for a 6px hop. */
+export declare const routingLaneSpacing: (clearance: number, cornerRadius: number) => number;
+/** Length of parallel overlap within a lane; perpendicular crossings use bridges. */
+export declare const parallelOverlap: (a: readonly {
+    x: number;
+    y: number;
+}[], b: readonly {
+    x: number;
+    y: number;
+}[], spacing?: number) => number;
+/** 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 or needed a tighter corner to preserve a crossing.
+ */
+export declare const routeCrossings: (edges: RoutableEdge[], options?: {
+    cornerRadius?: number;
+    jumpRadius?: number;
+}) => Map<string, string>;

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

@@ -73,6 +73,14 @@ export interface ConnectionFlowConnectorConfig {
     /** Caption rendered along the edge. */
     label?: string;
 }
+/** Explicit topology. Supplying a connections array disables inferred edges. */
+export interface ConnectionFlowConnection extends ConnectionFlowConnectorConfig {
+    id: string;
+    fromId: string;
+    toId: string;
+    fromSide?: PortSide;
+    toSide?: PortSide;
+}
 /**
  * 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
@@ -134,6 +142,13 @@ export interface ConnectionFlowNodeItem {
 }
 export interface ConnectionFlowNode {
     id: string;
+    /** Optional logical cell for top-level editor nodes. Supply on every top-level
+     * node to align rows across columns. Signed integer indices allow adding to
+     * any side. Placement does not create connections; use explicit connections. */
+    gridPosition?: {
+        column: number;
+        row: number;
+    };
     title?: string;
     subtitle?: string;
     description?: string;
@@ -278,6 +293,7 @@ export interface LaidOutNode {
 }
 export interface LaidOutEdge {
     id: string;
+    ringSize?: ConnectionFlowRingSize;
     fromId: string | null;
     toId: string;
     state: ConnectionState;
@@ -291,10 +307,26 @@ export interface LaidOutEdge {
      * and the line they sit on can never disagree about the route.
      */
     d: string;
+    /** Measured, collision-free caption bounds in layout coordinates. */
+    caption?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        lines: string[];
+        lineHeight: number;
+    };
     sourceTone: TrueColor;
     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.
@@ -327,14 +359,8 @@ export interface LaidOutEdge {
     /** Set when `kind` is `"branch"`. */
     branchKind?: "success" | "failure";
 }
-/**
- * A terminal where one or more edges meet a node.
- *
- * These are layout output rather than something each edge draws for itself.
- * When three edges fan out of one card they share a single port, and an edge
- * that painted its own endpoints stamped three identical rings on that one
- * spot — which the highlight then dimmed three times over, so a "dimmed"
- * connector came out darker than a lit one.
+/** A distinct terminal for one edge endpoint, allocated on a node border.
+ * Fan-in and fan-out edges retain independent anchors and highlight states.
  */
 export interface LaidOutConnector {
     id: string;
@@ -345,11 +371,11 @@ export interface LaidOutConnector {
     /** Which border of the node it sits on. */
     side: PortSide;
     tone: TrueColor;
-    /** The liveliest state among the edges meeting here. */
+    /** State of the edge attached to this terminal. */
     state: ConnectionState;
     /** Something is flowing through this terminal. */
     active: boolean;
-    /** Edges meeting here, so the path highlight dims a connector with them. */
+    /** The single edge attached here; retained as an array for API compatibility. */
     edgeIds: string[];
     /** Radius of the border's bulge, in px. */
     radius: number;
@@ -423,7 +449,12 @@ export interface ConnectionFlowLayoutOptions {
     childGap: number;
     /** Horizontal indent for child nodes. */
     childIndent: number;
-    /** Vertical gap between the rows of a chained child grid. @default childGap */
+    /**
+     * 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;
@@ -432,6 +463,12 @@ export interface ConnectionFlowLayoutOptions {
     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". */

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/Gantt/Gantt.vue.d.ts

@@ -140,11 +140,11 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<GanttProps
     color: TrueColor;
     variant: GanttVariant;
     corner: GanttCorner;
+    links: GanttLink[];
     padding: GanttPadding;
     resizableColumns: boolean;
     minZoom: number;
     maxZoom: number;
-    links: GanttLink[];
     initialZoom: number;
     snap: GanttSnap;
     showToday: boolean;

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.6",
+  "version": "0.2.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cjlapao/ui-kit.git",