@cjlapao/ui-kit-vue 0.2.0 → 0.2.3

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

@@ -1,23 +1,159 @@
-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<{}>, {
+import { type LaidOutNode } from "../../connectionFlow";
+import { CONNECTION_FLOW_EDGE_STYLES, CONNECTION_FLOW_PROGRESS_TYPES, CONNECTION_FLOW_ITEM_PROGRESS, CONNECTION_FLOW_RING_SIZES, CONNECTION_STATES, type ConnectionFlowEdgeStyle, type ConnectionFlowItemProgress, type ConnectionFlowLoader, type ConnectionFlowNode, type ConnectionFlowProgressType, type ConnectionFlowRingSize, type ConnectionState } from "../../connectionFlow";
+import type { ControlSize, PlainSurfaceVariant, SurfaceCorner, TrueColor } from "../../theme/Theme";
+import type { PillVariant } from "../Pill.vue";
+export { CONNECTION_FLOW_EDGE_STYLES, CONNECTION_FLOW_ITEM_PROGRESS, CONNECTION_FLOW_PROGRESS_TYPES, CONNECTION_FLOW_RING_SIZES, CONNECTION_STATES, };
+export interface ConnectionFlowProps {
+    /** The graph. */
+    nodes: ConnectionFlowNode[];
+    /** Surface treatment of the frame. @default "outlined" */
+    variant?: PlainSurfaceVariant;
+    /** @default "neutral" */
+    tone?: TrueColor;
+    /** Node box scale, on the shared control scale. @default "md" */
+    size?: ControlSize;
+    /** Node corner radius, on the shared container scale. */
+    corner?: SurfaceCorner;
+    /** Shape of the edges. @default "orthogonal" */
+    edgeStyle?: ConnectionFlowEdgeStyle;
+    /**
+     * Surface treatment for the node cards, on the same container scale `Panel`
+     * takes. A node's own `variant` overrides it. @default "subtle"
+     */
+    /**
+     * Rows a card shows before the rest collapse behind a "show more" row.
+     * A node's own `maxItems` overrides it. @default 2
+     */
+    maxVisibleItems?: number;
+    /**
+     * Where an item draws its progress: a bar under its text, or a spinner in
+     * place of its glyph. A node's `itemProgress`, then an item's
+     * `progressType`, override it. @default "bar"
+     */
+    itemProgress?: ConnectionFlowItemProgress;
+    /**
+     * Size of the ring drawn where an edge meets a node. `fit` collapses the
+     * ring onto its core dot. @default "md"
+     */
+    ringSize?: ConnectionFlowRingSize;
+    /** Fallback state for edges that do not declare one. @default "flowing" */
+    flowState?: ConnectionState;
+    /** Derive edge state and bypasses from each node's tone. @default false */
+    autoState?: boolean;
+    /** @default true */
+    animated?: boolean;
+    /** Target px between travelling dots. @default 40 */
+    /**
+     * How fast a travelling dot moves, in px per second. One speed for the whole
+     * graph: a dot's flight time comes from its route's own length, so a short
+     * hop and a long bypass arc move at the same pace. @default 120
+     */
+    dotSpeed?: number;
+    /**
+     * Milliseconds between one dot leaving a source and the next. A source
+     * releases one dot at a time, taking its outgoing edges in turn, so a fan
+     * reads as one source feeding its targets rather than as a swarm.
+     * @default 700
+     */
+    dotInterval?: number;
+    /** Which in-progress indicator nodes draw. Only one is ever shown. @default "bar" */
+    progressType?: ConnectionFlowProgressType;
+    /** Dim everything that is not on the path to the hovered node. @default true */
+    highlightPath?: boolean;
+    /** Show the zoom / fit toolbar. @default true */
+    showControls?: boolean;
+    /** Scale the graph to fit on mount and on resize. @default true */
+    fitOnLoad?: boolean;
+    /**
+     * Scale the graph to fit on first paint instead of opening at 100%.
+     *
+     * The viewport scrolls, so a graph larger than its frame is reachable
+     * without shrinking it to illegibility — which is what fitting a tall flow
+     * into a short frame does. @default false
+     */
+    /** Allow scroll-wheel and drag panning. @default true */
+    interactive?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    /** Fixed height of the viewport. @default 320 */
+    height?: number | string;
+    /** Header title. Rendered by the flow, not by the wrapping Panel. */
+    title?: string;
+    subtitle?: string;
+    /** Small uppercase line above the title. */
+    eyebrow?: string;
+    /** Registry icon name for the chip beside the title. */
+    icon?: string;
+    /** Corner of that chip, on the shared container scale. */
+    iconCorner?: SurfaceCorner;
+    /** Pill at the right of the header. */
+    tag?: string;
+    tagTone?: TrueColor;
+    tagVariant?: PillVariant;
+    /** Draw the header at all. @default true */
+    showHeader?: boolean;
+    /**
+     * The flow's completion, 0–1. Defaults to the mean of whatever the nodes
+     * report — which a pipeline usually knows better than the average of its
+     * cards does.
+     */
+    progress?: number;
+    /**
+     * How `loading` is shown. `skeleton` is the default because it is the only
+     * one that holds the card's shape. @default "skeleton"
+     */
+    loaderType?: ConnectionFlowLoader;
+    loading?: boolean;
+    /** Message shown when `nodes` is empty. */
+    emptyMessage?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ConnectionFlowProps, {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    fit: () => void;
+    setZoom: (value: number, anchor?: {
+        x: number;
+        y: number;
+    }) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    nodeClick: (node: ConnectionFlowNode) => any;
+    nodeHover: (node: ConnectionFlowNode | null) => any;
+    zoomChange: (scale: number) => any;
+}, string, import("vue").PublicProps, Readonly<ConnectionFlowProps> & Readonly<{
+    onNodeClick?: ((node: ConnectionFlowNode) => any) | undefined;
+    onNodeHover?: ((node: ConnectionFlowNode | null) => any) | undefined;
+    onZoomChange?: ((scale: number) => any) | undefined;
+}>, {
+    interactive: boolean;
+    height: number | string;
+    size: ControlSize;
+    loading: boolean;
+    tone: TrueColor;
+    variant: PlainSurfaceVariant;
+    corner: SurfaceCorner;
     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;
+    loaderType: ConnectionFlowLoader;
+    showHeader: boolean;
+    edgeStyle: ConnectionFlowEdgeStyle;
+    ringSize: ConnectionFlowRingSize;
+    maxVisibleItems: number;
+    itemProgress: ConnectionFlowItemProgress;
+    dotSpeed: number;
+    dotInterval: number;
+    iconCorner: SurfaceCorner;
+    tagVariant: PillVariant;
+    progressType: ConnectionFlowProgressType;
     flowState: ConnectionState;
-    connectorWidth: number;
-    allowScroll: boolean;
-    autoScale: boolean;
-    minScale: number;
-    fullWidthConnectors: boolean;
-    autoConnectorState: boolean;
+    autoState: boolean;
+    highlightPath: boolean;
+    showControls: boolean;
+    fitOnLoad: boolean;
+    minZoom: number;
+    maxZoom: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    rightAction?: (props: {}) => any;
+    node?: (props: {
+        node: LaidOutNode;
+    }) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -0,0 +1,28 @@
+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/ConnectionFlowHeader.vue.d.ts

@@ -0,0 +1,33 @@
+import type { ConnectionFlowProgressType } from "../../connectionFlow";
+import { type SurfaceCorner, type SurfaceVariant, type TrueColor } from "../../theme/Theme";
+import type { PillVariant } from "../Pill.vue";
+/**
+ * The frame's header: eyebrow, icon, title, tag, and the flow's own progress
+ * directly beneath them.
+ *
+ * Built here rather than handed to `Panel` for two reasons: Panel's header
+ * carries no icon chip and no progress, and `variant="plain"` renders no Panel
+ * at all — so the header has to belong to the flow either way.
+ */
+type __VLS_Props = {
+    variant: SurfaceVariant;
+    tone: TrueColor;
+    eyebrow?: string;
+    title?: string;
+    subtitle?: string;
+    /** A registry icon name. */
+    icon?: string;
+    iconCorner: SurfaceCorner;
+    tag?: string;
+    tagTone?: TrueColor;
+    tagVariant: PillVariant;
+    /** 0–1, or undefined when nothing reports progress. */
+    progress?: number;
+    progressType: ConnectionFlowProgressType;
+    animated: boolean;
+    loading?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,32 @@
+import type { ConnectionFlowLayoutOptions, LaidOutNode, NodeMetrics } from "../../connectionFlow";
+/**
+ * The default contents of a node card.
+ *
+ * Rendered at its natural size and scaled by one transform on the wrapper, so
+ * type, padding, gaps and the progress bar all zoom together — and, more
+ * importantly, the height the DOM produces here is the same number
+ * `measureNode` computed, at any zoom. Scaling each property individually left
+ * the bar and the glyph at a fixed size while the box shrank.
+ *
+ * Every dimension comes from `metrics`. The previous version hardcoded
+ * `text-[13px]`, `text-[11px]` and a 10px inset, so `size` changed the box and
+ * nothing inside it.
+ */
+type __VLS_Props = {
+    node: LaidOutNode;
+    metrics: NodeMetrics;
+    /** Whether a node's own progress bar is drawn. */
+    showProgress: boolean;
+    /** The resolved layout options, for the item cap. */
+    options: ConnectionFlowLayoutOptions;
+    /** Whether the card's body scrolls, which changes how it fills the box. */
+    scrollable?: boolean;
+    /** Nodes whose item list is expanded. */
+    expanded: ReadonlySet<string>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggleExpanded: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggleExpanded?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,18 @@
+import type { NodeMetrics } from "../../connectionFlow";
+import type { SurfaceVariant } from "../../theme/Theme";
+/**
+ * Placeholder cards in a plain chain, at the real card size.
+ *
+ * Shaped from `NodeMetrics` rather than guessed, so the frame holds the height
+ * a real graph would need and nothing jumps when the data lands.
+ */
+type __VLS_Props = {
+    variant: SurfaceVariant;
+    metrics: NodeMetrics;
+    /** Placeholder cards to draw. @default 4 */
+    count?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    count: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,52 @@
+import type { ConnectionFlowLayout, ConnectionFlowLayoutOptions, LaidOutNode, NodeMetrics } from "../../connectionFlow";
+import type { SurfaceVariant } from "../../theme/Theme";
+type __VLS_Props = {
+    layout: ConnectionFlowLayout;
+    /** Px per second every dot travels at. */
+    dotSpeed: number;
+    /** Milliseconds between one dot leaving a source and the next. */
+    dotInterval: number;
+    /** Every number the card body is built from. */
+    metrics: NodeMetrics;
+    /** The resolved layout options, for the item cap. */
+    options: ConnectionFlowLayoutOptions;
+    /** Nodes whose item list is expanded. */
+    expanded: ReadonlySet<string>;
+    /**
+     * The surface the cards take. Resolved from the flow's own `variant` — a
+     * card sitting inside a panel is part of that panel, not a second surface
+     * language layered on top of it.
+     */
+    variant: SurfaceVariant;
+    showProgress: boolean;
+    animated: boolean;
+    highlightNodes: Set<string>;
+    highlightEdges: Set<string>;
+    hoveredId: string | null;
+    selectedId: string | null;
+    scale: number;
+    offsetX: number;
+    offsetY: number;
+};
+declare var __VLS_1: {
+    node: LaidOutNode;
+};
+type __VLS_Slots = {} & {
+    node?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (node: LaidOutNode) => any;
+    hover: (node: LaidOutNode | null) => any;
+    toggleExpanded: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((node: LaidOutNode) => any) | undefined;
+    onHover?: ((node: LaidOutNode | null) => any) | undefined;
+    onToggleExpanded?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -1,5 +1,12 @@
 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";
+export { default as ConnectionFlowSvg } from "./ConnectionFlowSvg.vue";
+export { default as ConnectionFlowNodeBody } from "./ConnectionFlowNodeBody.vue";
+export { default as ConnectionFlowHeader } from "./ConnectionFlowHeader.vue";
+export { default as ConnectionFlowSkeleton } from "./ConnectionFlowSkeleton.vue";
+export type { ConnectionFlowProps } from "./ConnectionFlow.vue";
+/**
+ * The model, the layout engine and the painter are framework-agnostic and live
+ * in `common/connectionFlow`, so the React kit consumes exactly the same
+ * geometry rather than a second implementation of it.
+ */
+export { CONNECTION_FLOW_EDGE_STYLES, CONNECTION_FLOW_NODE_KINDS, CONNECTION_FLOW_PROGRESS_TYPES, CONNECTION_FLOW_ITEM_PROGRESS, CONNECTION_FLOW_LOADERS, CONNECTION_FLOW_RING_SIZES, CONNECTION_FLOW_STATUSES, CONNECTION_STATES, CONNECTOR_RING_RADIUS, STATUS_ICON, STATUS_TONE, DEFAULT_LAYOUT_OPTIONS, NODE_CORNER_RADIUS, NODE_METRICS, itemGlyph, itemHasBar, itemTone, itemsReserveGlyph, measureBranch, measureHeader, measureItem, measureItems, measureNode, visibleItems, buildColumns, connectorDotRadius, connectorVisual, fitToViewport, flowProgress, getHeaderSurface, getNodeSurface, headerGlyph, headerReservesGlyph, nodeProgress, getToneClasses, hitTestNode, layoutConnectionFlow, labelAnchor, layoutIsAnimated, nodeIcon, nodeIsActive, nodeIsSkipped, nodeTone, tracePathTo, type ConnectionFlowEdgeStyle, type ConnectionFlowLayout, type ConnectionFlowNode, type ConnectionFlowNodeKind, type ConnectionFlowProgressType, type ConnectionFlowStatus, type ConnectionFlowRingSize, type ConnectionFlowConnectorConfig, type ConnectionState, type ConnectorVisual, type LaidOutConnector, type NodeSurface, type LaidOutEdge, type LaidOutNode, type ConnectionFlowItemProgress, type ConnectionFlowLoader, type ConnectionFlowNodeItem, type ItemGlyph, type HeaderGlyph, type HeaderSurface, type NodeMetrics, } from "../../connectionFlow";

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

@@ -1,24 +1,48 @@
-import { type IconName } from "../icons/registry";
+import type { IconName } from "../icons/registry";
 import type { IconSize } from "../types/Icon";
+import type { TrueColor } from "../theme/Theme";
 export interface CustomIconProps {
-    /** Name of the icon to display */
+    /** Name of the icon to display. */
     icon: IconName;
-    /** Alternative text for accessibility */
+    /**
+     * Accessible name. Omit it and the icon is treated as decoration and hidden
+     * from assistive technology — which is right for an icon sitting beside a
+     * label, and wrong for one standing on its own.
+     */
     alt?: string;
-    /** Size of the icon in pixels */
+    /** Explicit size in pixels or any CSS length, overriding `size`. */
     customSize?: number | string;
-    /** Size of the icon: xs, sm, md, lg, xl */
+    /** Size on the shared control scale. @default "md" */
     size?: IconSize;
-    /** Whether the icon should use color or be monochrome */
-    colored?: boolean;
-    /** Primary color to use for the icon */
+    /** Theme colour. Ignored when `colored` is set. */
+    tone?: TrueColor;
+    /**
+     * Raw CSS colour, for a value outside the palette. Wins over `tone`.
+     * Ignored when `colored` is set.
+     */
     color?: string;
-    /** Hover color for the icon */
+    /** Raw CSS colour on hover. Ignored when `colored` is set. */
     hoverColor?: string;
+    /** Keep the icon's own colours instead of tinting it. */
+    colored?: boolean;
+    /** Spins the icon. Respects `prefers-reduced-motion`. */
+    spin?: boolean;
+    /**
+     * Makes the icon activatable. It renders as a real `<button>` so it is
+     * reachable by keyboard.
+     */
+    clickable?: boolean;
+    disabled?: boolean;
 }
-declare const _default: import("vue").DefineComponent<CustomIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CustomIconProps> & Readonly<{}>, {
+declare const _default: import("vue").DefineComponent<CustomIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (payload: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CustomIconProps> & Readonly<{
+    onClick?: ((payload: MouseEvent) => any) | undefined;
+}>, {
     size: IconSize;
-    alt: string;
     colored: boolean;
+    spin: boolean;
+    clickable: boolean;
+    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,19 +1,51 @@
+import type { PanelCorner, PanelPadding, PanelSpecularMode } from "./Panel.vue";
+import type { GlassOpacity, GlassVibrancy } from "../theme/glass";
+import type { PlainSurfaceVariant, TrueColor } from "../theme/Theme";
+/** Every container surface, plus `plain` for a bare row inside a list. */
+export type DetailItemCardVariant = PlainSurfaceVariant;
+export type DetailItemCardBadgesAlignment = "right" | "bottom" | "bottom-end";
 export interface DetailItemCardProps {
     title: string;
     subtitle?: string;
     description?: string;
+    /** Icon shown before the title. */
+    icon?: string;
+    /** @default "right" */
+    badgesAlignment?: DetailItemCardBadgesAlignment;
     defaultExpanded?: boolean;
-    badgesAlignment?: "bottom" | "right" | "bottom-end";
+    /** Controlled expansion. Pair with the `toggle` event. */
+    expanded?: boolean;
+    /** Makes the whole row activatable, keyboard included. */
+    clickable?: boolean;
+    disabled?: boolean;
+    /** @default "plain" — this is normally a row inside a list. */
+    variant?: DetailItemCardVariant;
+    tone?: TrueColor;
+    corner?: PanelCorner;
+    padding?: PanelPadding;
+    glassOpacity?: GlassOpacity;
+    vibrancy?: GlassVibrancy;
+    specularMode?: PanelSpecularMode;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DetailItemCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DetailItemCardProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DetailItemCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: (expanded: boolean) => any;
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<DetailItemCardProps> & Readonly<{
+    onToggle?: ((expanded: boolean) => any) | undefined;
+    onSelect?: (() => any) | undefined;
+}>, {
+    tone: TrueColor;
+    clickable: boolean;
+    disabled: boolean;
+    variant: DetailItemCardVariant;
+    corner: PanelCorner;
+    padding: PanelPadding;
     defaultExpanded: boolean;
-    badgesAlignment: "bottom" | "right" | "bottom-end";
+    badgesAlignment: DetailItemCardBadgesAlignment;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     badges?: (props: {}) => any;
 } & {
     badges?: (props: {}) => any;
-} & {
-    badges?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;
 }>;

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

@@ -24,10 +24,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DropdownBu
     onPrimaryClick?: ((event: MouseEvent) => any) | undefined;
     onOptionSelect?: ((option: DropdownButtonOption) => any) | undefined;
 }>, {
-    color: import("..").TrueColor;
-    variant: import("./Button.vue").ButtonVariant;
-    split: boolean;
     size: ButtonSize;
+    color: import("./Gantt").TrueColor;
+    split: boolean;
+    variant: import("./Button.vue").ButtonVariant;
     fullWidth: boolean;
     dropdownIcon: string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;

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

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

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

@@ -26,8 +26,8 @@ declare const _default: import("vue").DefineComponent<DropdownMenuProps, {}, {},
     onClose?: (() => any) | undefined;
 }>, {
     width: number | "trigger";
-    align: "start" | "end";
     side: "auto" | "top" | "bottom";
+    align: "start" | "end";
     maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

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

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

@@ -1,16 +1,72 @@
-import type { CapsuleBlueprintParameter } from "../types/CapsuleBlueprint";
-type DynamicValue = string | boolean;
+import { type ControlSize, type InputVariant, type SurfaceCorner, type SurfacePadding, type TrueColor } from "../theme/Theme";
+import type { KeyValuePair } from "./KeyValueArrayField.vue";
+import type { CapsuleBlueprintParameter } from "../../../common/types/CapsuleBlueprint";
+/**
+ * Every container surface, plus `plain` for a field dropped into a form the
+ * app already frames. A form of these used to force one bordered card per
+ * parameter, with no way to turn it off.
+ */
+export declare const DYNAMIC_FORM_FIELD_VARIANTS: readonly ["elevated", "outlined", "subtle", "tonal", "default", "glass", "simple", "liquid-glass", "plain"];
+export type DynamicFormFieldVariant = (typeof DYNAMIC_FORM_FIELD_VARIANTS)[number];
+/**
+ * Everything a blueprint parameter can hold.
+ *
+ * `string | boolean` before this, which is why `List` and `Map` could not be
+ * rendered at all — the two value types that fell through to an empty card.
+ */
+export type DynamicFormFieldValue = string | number | boolean | string[] | KeyValuePair[];
+export interface DynamicFormFieldOption {
+    id: string;
+    label: string;
+    value: string;
+}
 export interface DynamicFormFieldProps {
     parameter: CapsuleBlueprintParameter;
-    value: DynamicValue;
+    value?: DynamicFormFieldValue;
     error?: string;
     isVisible?: boolean;
+    /** Scale of the control, its label and its notes. @default "md" */
+    size?: ControlSize;
+    /** Surface of the card around the field. @default "outlined" */
+    variant?: DynamicFormFieldVariant;
+    tone?: TrueColor;
+    corner?: SurfaceCorner;
+    /** @default "md" */
+    padding?: SurfacePadding;
+    /** Entry style of the control itself. @default "flat" */
+    inputVariant?: InputVariant;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Heading of the expanding help block. @default "What is this?" */
+    helpTitle?: string;
+    /** Tone of that block. Defaults to the field's own tone. */
+    helpTone?: TrueColor;
+    /** Rows shown by a free-form `List` before it scrolls. @default 4 */
+    listRows?: number;
 }
+/**
+ * Options come off a blueprint in three shapes, all typed `any`.
+ *
+ * `{ label }` is accepted alongside `{ value }` because that is what most
+ * callers write; the original mapping — label from `value`, value from `key` —
+ * is kept so existing blueprints keep resolving the same way.
+ */
+export declare const normalizeOptions: (options: CapsuleBlueprintParameter["options"]) => DynamicFormFieldOption[];
 declare const _default: import("vue").DefineComponent<DynamicFormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (serviceName: string, key: string, value: DynamicValue, triggerDependencyEvaluation?: boolean | undefined) => any;
+    change: (serviceName: string, key: string, value: DynamicFormFieldValue, triggerDependencyEvaluation: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<DynamicFormFieldProps> & Readonly<{
-    onChange?: ((serviceName: string, key: string, value: DynamicValue, triggerDependencyEvaluation?: boolean | undefined) => any) | undefined;
+    onChange?: ((serviceName: string, key: string, value: DynamicFormFieldValue, triggerDependencyEvaluation: boolean) => any) | undefined;
 }>, {
+    size: ControlSize;
+    tone: TrueColor;
+    disabled: boolean;
+    variant: DynamicFormFieldVariant;
+    corner: SurfaceCorner;
+    padding: SurfacePadding;
+    readOnly: boolean;
     isVisible: boolean;
+    inputVariant: InputVariant;
+    helpTitle: string;
+    listRows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,11 +1,36 @@
+import type { ControlSize, TrueColor } from "../theme/Theme";
+export type DynamicImgSize = ControlSize;
 export interface DynamicImgProps {
-    base64: string;
+    /**
+     * A data URL (`data:image/svg+xml;base64,…`, PNG, JPEG, GIF, WebP, AVIF) or
+     * raw `<svg>` markup.
+     */
+    src?: string;
+    /** @deprecated Use `src`. Accepts the same values. */
+    base64?: string;
+    /**
+     * Accessible name. Omit it and the image is treated as decoration and hidden
+     * from assistive technology — the old `alt="Dynamic Image"` was neither a
+     * useful name nor a way to opt out.
+     */
+    alt?: string;
+    /** Icon shown when there is nothing to render, or the SVG is rejected. */
+    fallbackIcon?: string;
+    /** @default "md" */
+    size?: DynamicImgSize;
+    /** Theme colour for a recoloured SVG. */
+    tone?: TrueColor;
+    /** Raw fill colour for an SVG. Defaults to `currentColor`. */
     fill?: string;
+    /** Raw stroke colour for an SVG. Defaults to `currentColor`. */
     stroke?: string;
+    /** Keep the SVG's own colours instead of recolouring it. */
+    colored?: boolean;
     title?: string;
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
 declare const _default: import("vue").DefineComponent<DynamicImgProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DynamicImgProps> & Readonly<{}>, {
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size: DynamicImgSize;
+    colored: boolean;
+    fallbackIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

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