@cjlapao/ui-kit-vue 0.2.0 → 0.2.3

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

@@ -1,6 +1,9 @@
 import type { VNodeChild } from "vue";
 import type { TrueColor } from "../theme";
+import { type SurfaceCorner, type SurfaceVariant, type TableDensity } from "../theme";
 import type { PanelTone } from "./Panel.vue";
+import { type TableStorageAdapter } from "../utils/tableStorage";
+import type { TableSettings } from "../types/TableSettings";
 type SortDirection = "asc" | "desc";
 export interface TableSortState {
     columnId: string;
@@ -13,15 +16,6 @@ export interface TablePaginationState {
     onPageChange: (page: number) => void;
     onPageSizeChange: (pageSize: number) => void;
 }
-/** Unified snapshot of all user-configurable table preferences. */
-export interface TableSettings {
-    columnVisibility?: Record<string, boolean>;
-    columnWidths?: Record<string, number>;
-    activeView?: "table" | "panel";
-    groupBy?: string | null;
-    showGroupHeader?: boolean;
-    stickyColumns?: Record<string, "left" | "right">;
-}
 type AccessorFn<T> = (row: T, index: number) => VNodeChild;
 export interface TableColumn<T> {
     id: string;
@@ -68,15 +62,51 @@ export interface TableColumn<T> {
     stickyBackgroundFn?: (row: T, index: number) => string | undefined;
 }
 export type Column<T> = TableColumn<T>;
-export type TableVariant = "default" | "compact" | "minimal" | "bordered" | "flat";
+/**
+ * The container surface, on the shared panel family — the same eight
+ * treatments as `Panel`, so a table reads identically to the card beside it.
+ * The former density members (`compact`, `minimal`) moved to the `density`
+ * prop and `bordered` to a boolean prop, so those old values are now type
+ * errors by design.
+ */
+export type TableVariant = SurfaceVariant;
 export interface TableProps<T> {
     columns?: TableColumn<T>[];
     data: T[];
     selectedItems?: T[];
     rowKey?: (row: T, index: number) => string | number;
+    /**
+     * The container surface — the shared panel family (`elevated`,
+     * `outlined`, `subtle`, `tonal`, `default`, `glass`, `simple`,
+     * `liquid-glass`). Rendered by `Panel`, so the table sits on the exact
+     * surface a `Panel` beside it would. Defaults to `outlined`.
+     */
     variant?: TableVariant;
+    /**
+     * How tight the cells sit — `default`, `compact` or `minimal`
+     * (`TABLE_DENSITIES`). Orthogonal to `variant`: a compact table on glass
+     * reads the same as a compact table on an outlined card.
+     */
+    density?: TableDensity;
+    /**
+     * Draws grid lines between cells (vertical rules per column plus a
+     * stronger header rule). `noBorders` still wins when both are set.
+     */
+    bordered?: boolean;
+    /** Corner radius of the container, on the shared surface corner scale. */
+    corner?: SurfaceCorner;
+    /**
+     * Palette tone of the table: the header band, tone accents, and — unless
+     * overridden by `color` — the controls inside the table (action buttons,
+     * sort indicators, group dots, badges, pagination, selected/highlight rows,
+     * focus rings).
+     */
     tone?: PanelTone;
-    /** Theme color applied to action buttons, sort indicators, group dot, badges, and pagination. */
+    /**
+     * Control-only tone override: tints the interior controls (buttons, sort
+     * indicators, group dots, badges, pagination, selected/highlight rows,
+     * focus rings) independently of `tone`. Defaults to `tone`.
+     */
     color?: TrueColor;
     striped?: boolean;
     noBorders?: boolean;
@@ -93,7 +123,12 @@ export interface TableProps<T> {
     loaderType?: "spinner" | "progress";
     loaderProgress?: number;
     emptyState?: VNodeChild;
-    sortState?: TableSortState;
+    /**
+     * Controlled sort state. Pass `null` to clear the sort — like every other
+     * prop, `undefined` means "uncontrolled" (the table keeps its own state),
+     * so the two must not be conflated.
+     */
+    sortState?: TableSortState | null;
     defaultSort?: TableSortState;
     headerActions?: VNodeChild;
     footer?: VNodeChild;
@@ -106,8 +141,6 @@ export interface TableProps<T> {
     bodyClassName?: string;
     fullHeight?: boolean;
     manualSorting?: boolean;
-    /** When true, wraps the table in a rounded border regardless of the variant. */
-    rounded?: boolean;
     /** Title shown in the header bar alongside headerActions / view toggle. Defaults to empty. */
     headerTitle?: string;
     /**
@@ -199,6 +232,26 @@ export interface TableProps<T> {
      * Pass a previously persisted value to restore all settings on mount.
      */
     tableSettings?: TableSettings;
+    /**
+     * Enables built-in settings persistence. When set, the table restores its
+     * settings from storage on mount and saves the full `TableSettings`
+     * snapshot after every change, under
+     * `{storagePrefix}:{storageKey}` (default prefix `ui-kit:table`).
+     *
+     * An explicitly passed `tableSettings` (or the individual initial props)
+     * still wins over the stored value on mount; afterwards every change
+     * emits `tableSettingsChange` AND writes to storage. Omit to keep the
+     * current fully-manual behaviour.
+     */
+    storageKey?: string;
+    /** Prefix for the composed storage key. Defaults to `ui-kit:table`. */
+    storagePrefix?: string;
+    /**
+     * Storage backend override — anything with `getItem`/`setItem`/
+     * `removeItem` (sessionStorage, a test mock, an IndexedDB adapter).
+     * Defaults to a best-effort localStorage wrapper that never throws.
+     */
+    storage?: TableStorageAdapter;
 }
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{

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

@@ -1,9 +1,11 @@
 import type { VNode } from "vue";
 import { type TrueColor } from "../theme/Theme";
-export type TabsVariant = "underline" | "soft" | "pill" | "segmented" | "minimal";
+import { type GlassVibrancy, type GlassOpacity, type SpecularMode } from "../theme/glass";
+export type TabsVariant = "underline" | "soft" | "pill" | "segmented" | "minimal" | "glass" | "liquid-glass";
 export type TabsSize = "sm" | "md" | "lg";
 export type TabsOrientation = "horizontal" | "vertical";
 export type TabsJustify = "start" | "center" | "end" | "between";
+export type TabsRadius = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
 export interface TabItemAction {
     id?: string;
     label?: string | VNode;
@@ -50,6 +52,17 @@ export interface TabsProps {
      */
     scrollFade?: boolean;
     scrollFadeFrom?: string;
+    /** Backdrop vibrancy level for the `glass` / `liquid-glass` variants. */
+    vibrancy?: GlassVibrancy;
+    /** Glass fill transparency level for the `glass` / `liquid-glass` variants. */
+    glassOpacity?: GlassOpacity;
+    /** Specular highlight mode for the `glass` / `liquid-glass` variants. */
+    specularMode?: SpecularMode;
+    /**
+     * Corner radius for the `glass` / `liquid-glass` tab pills. Default: `"md"`
+     * (`rounded-md`). Pass `"full"` to restore the pill shape.
+     */
+    radius?: TabsRadius;
 }
 declare const _default: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     change: (id: string, item: TabItem) => any;
@@ -58,12 +71,16 @@ declare const _default: import("vue").DefineComponent<TabsProps, {}, {}, {}, {},
     onChange?: ((id: string, item: TabItem) => any) | undefined;
     "onUpdate:modelValue"?: ((id: string) => any) | undefined;
 }>, {
+    radius: TabsRadius;
+    size: TabsSize;
     color: TrueColor;
     variant: TabsVariant;
-    size: TabsSize;
+    glassOpacity: GlassOpacity;
+    vibrancy: GlassVibrancy;
+    specularMode: SpecularMode;
+    orientation: TabsOrientation;
     fullWidth: boolean;
     justify: TabsJustify;
-    orientation: TabsOrientation;
     allowReselect: boolean;
     panelIdPrefix: string;
     showDividers: boolean;

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

@@ -76,18 +76,18 @@ declare const _default: import("vue").DefineComponent<TagPickerProps, {}, {}, {}
 }, string, import("vue").PublicProps, Readonly<TagPickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((values: string[]) => any) | undefined;
 }>, {
+    loading: boolean;
     color: TrueColor;
     disabled: boolean;
     placeholder: string;
-    loading: boolean;
+    readOnly: boolean;
+    loadingMessage: string;
     emptyMessage: string;
     searchPlaceholder: string;
-    loadingMessage: string;
     escapeBoundary: boolean;
     multi: boolean;
     allowCreate: boolean;
     tagLimit: number;
     highlightNew: boolean;
-    readOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,6 +1,9 @@
-import type { TrueColor } from "../theme/Theme";
-type TextareaSize = "sm" | "md" | "lg";
-type TextareaValidationStatus = "none" | "error" | "success";
+import type { ControlSize, TrueColor, ValidationStatus } from "../theme/Theme";
+/** The shared control scale. Was a bespoke `"sm" | "md" | "lg"` here while the
+ *  React twin already used `ControlSize`, so the same component took different
+ *  sizes in the two kits. */
+type TextareaSize = ControlSize;
+type TextareaValidationStatus = ValidationStatus;
 type TextareaResize = "none" | "vertical" | "horizontal" | "both";
 export interface TextareaProps {
     /** Current value of the textarea (v-model). */
@@ -18,9 +21,9 @@ declare const _default: import("vue").DefineComponent<TextareaProps, {
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    tone: TrueColor;
-    size: TextareaSize;
     resize: TextareaResize;
+    size: TextareaSize;
+    tone: TrueColor;
     validationStatus: TextareaValidationStatus;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,12 +1,12 @@
 import type { PanelPadding } from "../Panel.vue";
 import type { TimelinePanelProps } from "./types";
-import type { PanelVariant, PanelCorner } from "../Panel.vue";
+import type { PanelVariant } from "../Panel.vue";
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TimelinePanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimelinePanelProps> & Readonly<{}>, {
-    tone: import("../../index.js").TrueColor;
-    variant: PanelVariant;
     loading: boolean;
+    tone: import("../index.js").TrueColor;
+    variant: PanelVariant;
+    corner: import("./types").TimelinePanelCorner;
     padding: PanelPadding;
-    corner: PanelCorner;
     showTrunkDots: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     title?: (props: {}) => any;

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

@@ -45,17 +45,17 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToggleProp
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     glass: boolean;
-    color: TrueColor;
     size: ToggleSize;
+    color: TrueColor;
     disabled: boolean;
-    fullWidth: boolean;
-    vibrancy: GlassVibrancy;
     glassOpacity: GlassOpacity;
+    vibrancy: GlassVibrancy;
     specularMode: SpecularMode;
+    fullWidth: boolean;
     padding: TogglePadding;
+    readonly: boolean;
     descriptionPlacement: ToggleDescriptionPlacement;
     alignLabel: ToggleAlign;
-    readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     label?: () => unknown;
     description?: () => unknown;

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

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

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

@@ -0,0 +1,62 @@
+import { type SurfaceCorner, type SurfacePadding, type SurfaceVariant, type TrueColor } from "../theme/Theme";
+import { type GlassOpacity, type GlassVibrancy } from "../theme/glass";
+/**
+ * A bar that groups the actions for the content beside it — PrimeVue's
+ * Toolbar: `start` / `center` / `end` slots, one row, `role="toolbar"` —
+ * wearing the kit's shared Panel surface.
+ *
+ * The bar names itself PrimeVue's way: nothing. A `role="toolbar"` without a
+ * name announces fine, but on a page with several toolbars the name is the
+ * only thing that tells "Formatting" from "Filters" — pass `aria-label` or
+ * `aria-labelledby` (they arrive as attrs) to say which.
+ *
+ * (These notes live here rather than in the template because a template
+ * comment is a real node, and a comment beside the root makes the component
+ * multi-root — which silently breaks attribute inheritance.)
+ */
+interface ToolbarProps {
+    /**
+     * Surface treatment — Panel's shared variant set, from an invisible
+     * `simple` bar to `liquid-glass`. @default "outlined"
+     */
+    variant?: SurfaceVariant;
+    /** Accent for the tinted and translucent variants. @default "neutral" */
+    tone?: TrueColor;
+    /**
+     * Inset around the regions, on the shared container scale. A bar wants it
+     * small; `none` lets a toolbar bleed flush into the content it serves.
+     * @default "xs"
+     */
+    padding?: SurfacePadding;
+    /** Corner rounding, the shared container scale. @default "rounded-md" */
+    corner?: SurfaceCorner;
+    /** Backdrop vibrancy for the `liquid-glass` variant. @default "medium" */
+    vibrancy?: GlassVibrancy;
+    /** Glass fill opacity for the `liquid-glass` variant. @default "frosted" */
+    glassOpacity?: GlassOpacity;
+}
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    center?: (props: typeof __VLS_3) => any;
+} & {
+    end?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ToolbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToolbarProps> & Readonly<{}>, {
+    tone: TrueColor;
+    variant: SurfaceVariant;
+    corner: SurfaceCorner;
+    glassOpacity: GlassOpacity;
+    vibrancy: GlassVibrancy;
+    padding: SurfacePadding;
+}, {}, {}, {}, 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/Tooltip.test.d.ts

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

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

@@ -1,15 +1,32 @@
-export type TooltipPosition = "top" | "bottom";
+import type { TooltipPosition } from "../../../common/tooltip/placement";
+import type { TooltipVariant } from "../../../common/tooltip/tokens";
+export type { TooltipPosition, TooltipVariant };
 export interface TooltipProps {
     /** Text shown in the tooltip. When omitted the component renders children as-is. */
     text?: string;
-    /** How long to wait (ms) before showing the tooltip. Defaults to 500. */
+    /** How long to wait (ms) before showing the tooltip. @default 500 */
     delay?: number;
-    /** Where to place the tooltip relative to the trigger. Defaults to 'top'. */
+    /**
+     * Preferred side. The tooltip flips when there is no room, so this is a
+     * preference rather than a guarantee. @default "top"
+     */
     position?: TooltipPosition;
+    /** How the tooltip is painted. @default "surface" */
+    variant?: TooltipVariant;
+    /** Gap between trigger and tooltip, in px. @default 8 */
+    offset?: number;
+    /** Minimum distance kept from every viewport edge, in px. @default 8 */
+    margin?: number;
+    /**
+     * Keep the tooltip inside this element instead of the whole viewport — a
+     * scroll container, a panel, a modal.
+     */
+    boundary?: HTMLElement | null;
     /** Extra classes applied to the outer wrapper element. */
     wrapperClassName?: string;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
+    variant: TooltipVariant;
     delay: number;
     position: TooltipPosition;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -1,13 +1,34 @@
-import type { TooltipPosition } from "./Tooltip.vue";
+import type { TooltipPosition } from "../../../common/tooltip/placement";
+import type { TooltipVariant } from "../../../common/tooltip/tokens";
+export type { TooltipPosition, TooltipVariant };
 export interface TooltipWrapperProps {
     /** Tooltip text. When omitted no tooltip is shown but the child is rendered unchanged. */
     text?: string;
-    /** Delay in ms before the tooltip appears. Defaults to 500. */
+    /** Delay in ms before the tooltip appears. @default 500 */
     delay?: number;
-    /** Where to place the tooltip relative to the child. Defaults to 'top'. */
+    /**
+     * Preferred side. The tooltip flips to the opposite side, then to a
+     * perpendicular one, when there is not enough room — so this is a
+     * preference, not a guarantee. @default "top"
+     */
     position?: TooltipPosition;
+    /** How the tooltip is painted. @default "surface" */
+    variant?: TooltipVariant;
+    /** Gap between trigger and tooltip, in px. @default 8 */
+    offset?: number;
+    /** Minimum distance kept from every viewport edge, in px. @default 8 */
+    margin?: number;
+    /**
+     * Keep the tooltip inside this element instead of the whole viewport — a
+     * scroll container, a panel, a modal. It flips and clamps against *that*
+     * edge, intersected with the viewport so it still never leaves the screen.
+     */
+    boundary?: HTMLElement | null;
 }
 declare const _default: import("vue").DefineComponent<TooltipWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipWrapperProps> & Readonly<{}>, {
+    offset: number;
+    variant: TooltipVariant;
+    margin: number;
     delay: number;
     position: TooltipPosition;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/types/vue/src/components/TreeView/TreeFlowSvg.vue.d.ts

@@ -3,15 +3,14 @@ export declare const INDENT_PX: Record<"xs" | "sm" | "md" | "lg", number>;
 declare const _default: import("vue").DefineComponent<TreeFlowSvgProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeFlowSvgProps> & Readonly<{}>, {
     mode: "tree" | "bracket";
     animated: boolean;
-    showLine: boolean;
-    dotSpacing: number;
-    parentAnchorY: number;
+    depth: number;
+    stubHeight: number;
     parentOffset: number;
+    parentAnchorY: number;
     rootActive: boolean;
-    stubHeight: number;
-    depth: number;
     rootChildIndentExtra: number;
     indent: "xs" | "sm" | "md" | "lg";
+    showLine: boolean;
     showConnectors: boolean;
     connectorStyle: "rings" | "dots";
     branchColorMode: "item" | "parent";
@@ -19,5 +18,6 @@ declare const _default: import("vue").DefineComponent<TreeFlowSvgProps, {}, {},
     showCenterDot: boolean;
     connectorHalf: boolean;
     connectorBorderSize: "fit" | "xs" | "sm" | "md" | "lg";
+    dotSpacing: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/vue/src/components/TreeView/TreeItemRow.vue.d.ts

@@ -13,13 +13,13 @@ declare const _default: import("vue").DefineComponent<TreeItemRowProps, {}, {},
     rowElement: (el: HTMLDivElement | null) => any;
     heightChange: (height: number) => any;
     anchorChange: (anchor: number) => any;
-    toneChange: (tone: import("../../index.js").TrueColor) => any;
+    toneChange: (tone: "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone") => any;
     activeChange: (active: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<TreeItemRowProps> & Readonly<{
     onRowElement?: ((el: HTMLDivElement | null) => any) | undefined;
     onHeightChange?: ((height: number) => any) | undefined;
     onAnchorChange?: ((anchor: number) => any) | undefined;
-    onToneChange?: ((tone: import("../../index.js").TrueColor) => any) | undefined;
+    onToneChange?: ((tone: "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone") => any) | undefined;
     onActiveChange?: ((active: boolean) => any) | undefined;
 }>, {
     dropIndicator: DropPosition | null;

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

@@ -10,12 +10,12 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TreeViewPr
     loading: boolean;
     animated: boolean;
     rowGap: number;
-    showLine: boolean;
-    dotSpacing: number;
-    rootActive: boolean;
+    reorderable: boolean;
     stubHeight: number;
+    rootActive: boolean;
     rootChildIndentExtra: number;
     indent: "xs" | "sm" | "md" | "lg";
+    showLine: boolean;
     showConnectors: boolean;
     connectorStyle: "rings" | "dots";
     branchColorMode: "item" | "parent";
@@ -23,7 +23,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TreeViewPr
     showCenterDot: boolean;
     connectorHalf: boolean;
     connectorBorderSize: "fit" | "xs" | "sm" | "md" | "lg";
-    reorderable: boolean;
+    dotSpacing: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     loadingState?: (props: {}) => any;
 } & {

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

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

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

@@ -1,3 +1,16 @@
+import type { VNode } from "vue";
+import type { IconName } from "../icons/registry";
+import type { ControlSize, TrueColor } from "../theme/Theme";
+export declare const USER_AVATAR_SHAPES: readonly ["circle", "rounded", "square"];
+export type UserAvatarShape = (typeof USER_AVATAR_SHAPES)[number];
+/**
+ * PrimeVue Avatar's size names, accepted alongside the shared control ladder
+ * so a `size="large"` avatar drops straight in from a PrimeVue codebase.
+ */
+export declare const USER_AVATAR_PRESET_SIZES: readonly ["normal", "large", "xlarge"];
+export type UserAvatarPresetSize = (typeof USER_AVATAR_PRESET_SIZES)[number];
+/** Control ladder rung, PrimeVue preset name, or an exact pixel box. */
+export type UserAvatarSize = ControlSize | UserAvatarPresetSize | number;
 export interface UserAvatarUser {
     name?: string;
     username?: string;
@@ -6,11 +19,48 @@ export interface UserAvatarUser {
 }
 export interface UserAvatarProps {
     user?: UserAvatarUser | null;
-    size?: number;
-    variant?: "circle" | "rounded" | "square";
+    /**
+     * Scale on the shared control ladder. Was a bare pixel number, so an avatar
+     * could not be told to match the `sm` Button beside it. A number still
+     * works and wins, for the call sites that need an exact box; PrimeVue's
+     * `normal` / `large` / `xlarge` are mapped onto `md` / `lg` / `xl`.
+     * @default "md"
+     */
+    size?: UserAvatarSize;
+    /** Accent for the fallback chip. @default "neutral" */
+    tone?: TrueColor;
+    /** @default "circle" */
+    shape?: UserAvatarShape;
+    /** @deprecated Use `shape`. */
+    variant?: UserAvatarShape;
+    /**
+     * Text content, the PrimeVue `label` parity prop. Wins over `icon` and the
+     * image, exactly as it does there, and gives the avatar its accessible name
+     * when there is no user behind it.
+     */
+    label?: string;
+    /** Registry icon name or node, the PrimeVue `icon` parity prop. */
+    icon?: IconName | VNode;
+    /**
+     * Direct image URL, the PrimeVue `image` parity prop. `user.avatarUrl`
+     * still resolves when this is absent; either way a broken URL falls back
+     * to the label, initial or glyph instead of breaking the layout.
+     */
+    image?: string;
 }
-declare const _default: import("vue").DefineComponent<UserAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserAvatarProps> & Readonly<{}>, {
-    variant: "circle" | "rounded" | "square";
-    size: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<UserAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    error: (payload: Event) => any;
+}, string, import("vue").PublicProps, Readonly<UserAvatarProps> & Readonly<{
+    onError?: ((payload: Event) => any) | undefined;
+}>, {
+    size: UserAvatarSize;
+    tone: TrueColor;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,14 +1,31 @@
-import { type SmartVariable } from "../types/Variables";
-import type { CapsuleBlueprintParameter } from "../types/CapsuleBlueprint";
+import type { SmartVariable, SmartVariableGroup, SmartVariableResolver } from "../types/Variables";
+import type { TrueColor } from "../theme/Theme";
 export interface VariablePickerProps {
-    globalParameters: CapsuleBlueprintParameter[];
-    serviceNames: string[];
+    /** The groups to offer, one tab each. */
+    groups: SmartVariableGroup[];
+    /** Shows each variable's resolved value beside it. */
+    resolve?: SmartVariableResolver;
+    /** Accent colour. @default "blue" */
+    tone?: TrueColor;
+    /**
+     * Scale of the search field, matched to the control that opened the picker
+     * so the two do not look like different widgets stacked on each other.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Pre-fills the search box — used when the picker is opened by typing. */
+    initialSearch?: string;
+    title?: string;
 }
-declare const _default: import("vue").DefineComponent<VariablePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<VariablePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (variable: SmartVariable) => any;
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<VariablePickerProps> & Readonly<{
     onSelect?: ((variable: SmartVariable) => any) | undefined;
     onClose?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    size: "sm" | "md" | "lg";
+    tone: TrueColor;
+    initialSearch: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

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