@cjlapao/ui-kit-vue 0.2.0 → 0.2.3

package/dist/types/vue/src/components/Gantt/useGanttDrag.d.ts

@@ -0,0 +1,105 @@
+/**
+ * useGanttDrag — pointer interaction state machine for the Gantt (Vue port).
+ *
+ * Kinds:
+ *  - `move`         drag the bar body → change start & end (duration kept).
+ *  - `resize-start` / `resize-end` drag the bar edge handles.
+ *  - `progress`     drag the progress knob → set `task.progress`.
+ *  - `link`         drag from an edge handle → rubber-band, drop on a bar to
+ *                   create a dependency (FS from the right edge, SF from the
+ *                   left).
+ *  - `reorder`      drag the row grip → vertical reorder within the lane.
+ *
+ * All geometry resolves against the overlay ref's rect, which sits at the
+ * timeline's origin (left panel excluded, header excluded).
+ *
+ * The options are passed as refs/computeds so the window listeners always read
+ * the latest values (the Vue equivalent of React's "optsRef reassigned every
+ * render").
+ */
+import { type ComputedRef, type Ref } from "vue";
+import type { GanttLink, GanttLinkPoint, GanttRow, GanttSnap, GanttTask, TrueColor } from "../../../../common/gantt";
+export interface GanttDragState {
+    kind: "move" | "resize-start" | "resize-end" | "link" | "reorder" | "progress";
+    taskId: string;
+    startX: number;
+    startY: number;
+    originStart: number;
+    originEnd: number;
+    x: number;
+    y: number;
+    /** Link kind only: which edge the rubber band departs from. */
+    side?: 1 | -1;
+    /** Link kind only: vertical slot (from the handle's `fanHandleOffset`) the
+     *  rubber band departs from on the source edge, so the preview starts in
+     *  the largest free gap instead of on an existing port. */
+    fromOffset?: number;
+    /** Link kind only: anchor point (timeline coords). */
+    anchor?: {
+        x: number;
+        y: number;
+    };
+    /** Reorder kind only: resolved drop target. `undefined` until the pointer
+     *  commits to a target (25% hysteresis — see `resolveDropBeforeId`), so a
+     *  fresh press previews nothing; `null` = end of the lane. */
+    beforeId?: string | null;
+    /** Reorder kind only: live pointer position in *client* coordinates —
+     *  the floating row clone follows it (pointer-event drags have no browser
+     *  drag image). */
+    clientX?: number;
+    clientY?: number;
+    /** Reorder kind only: grab point within the row (client offset), so the
+     *  floating clone holds the grip under the pointer. */
+    grabOffset?: {
+        x: number;
+        y: number;
+    };
+    /** Progress kind only: live percent complete (0..1) as the knob drags, so
+     *  the bar's progress fill and the % readout follow the pointer in real
+     *  time (committed only on drop). */
+    liveProgress?: number;
+    /** Accent colour for the rubber band (link kind). */
+    color?: TrueColor;
+}
+export interface GanttRubber {
+    d: string;
+    color: TrueColor;
+    /** Arrowhead polygon when the pointer is over a target bar. */
+    arrow?: string;
+    /** Port anchors (source right edge, and the target left edge / pointer). */
+    from: GanttLinkPoint;
+    to: GanttLinkPoint;
+}
+interface UseGanttDragOptions {
+    scrollRef: Ref<HTMLElement | null>;
+    overlayRef: Ref<HTMLElement | null>;
+    rows: ComputedRef<GanttRow[]>;
+    tasksById: ComputedRef<Map<string, GanttTask>>;
+    zoom: ComputedRef<number>;
+    snap: Ref<GanttSnap>;
+    rangeStart: ComputedRef<number>;
+    rowHeight: ComputedRef<number>;
+    leftWidth: ComputedRef<number>;
+    interactive: ComputedRef<boolean>;
+    tasks: ComputedRef<GanttTask[]>;
+    links: ComputedRef<GanttLink[]>;
+    rowOrder: ComputedRef<string[] | undefined>;
+    accentColor: ComputedRef<TrueColor>;
+    onTasksChange?: (tasks: GanttTask[]) => void;
+    onLinksChange?: (links: GanttLink[]) => void;
+    onReorder?: (order: string[]) => void;
+    setSelected: (id: string | null) => void;
+}
+export interface UseGanttDragApi {
+    drag: Ref<GanttDragState | null>;
+    rubber: ComputedRef<GanttRubber | null>;
+    linkSelected: Ref<GanttLink | null>;
+    setLinkSelected: (link: GanttLink | null) => void;
+    onBarPointerDown: (task: GanttTask, e: PointerEvent) => void;
+    onResizePointerDown: (task: GanttTask, edge: "start" | "end", e: PointerEvent) => void;
+    onGripPointerDown: (rowKey: string, task: GanttTask, e: PointerEvent) => void;
+    onLinkHandlePointerDown: (task: GanttTask, side: 1 | -1, e: PointerEvent, fromOffset?: number) => void;
+    onProgressPointerDown: (task: GanttTask, e: PointerEvent) => void;
+}
+export declare function useGanttDrag(opts: UseGanttDragOptions): UseGanttDragApi;
+export {};

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

@@ -4,9 +4,10 @@ export type GradientDirection = "t" | "tr" | "r" | "br" | "b" | "bl" | "l" | "tl
 export type GlassBackgroundPosition = "fixed" | "absolute";
 export interface GlassBackgroundProps {
     /** Positioning mode.
-     *  `"fixed"` (default) — covers the full viewport, always visible.
-     *  `"absolute"` — fills a `position: relative` parent (e.g. a PlaygroundSection preview).
-     *  Parent must be `relative` when `"absolute"`.
+     *  `"absolute"` (default) — fills the nearest positioned ancestor, which must
+     *  be `relative`. Safe to drop anywhere.
+     *  `"fixed"` — covers the whole viewport. Only for a page-level backdrop:
+     *  inside a scrolled container it escapes its parent and covers the page.
      */
     position?: GlassBackgroundPosition;
     /** Primary theme color driving the gradient (default: "purple"). */

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

@@ -4,15 +4,15 @@ type __VLS_WithSlots<T, S> = T & (new () => {
     $slots: S;
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
-    vibrancy: number;
     radius: number;
+    vibrancy: number;
     tint: string;
     tintStrength: number;
     frost: number;
     borderGlow: number;
     $props: {
-        readonly vibrancy?: number | undefined;
         readonly radius?: number | undefined;
+        readonly vibrancy?: number | undefined;
         readonly tint?: string | undefined;
         readonly tintStrength?: number | undefined;
         readonly frost?: number | undefined;

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

@@ -1,6 +1,24 @@
+import type { ControlSize, TrueColor } from "../theme/Theme";
 export interface HeaderGroupProps {
+    /** Space between this group and the one before it. @default "sm" */
+    gap?: ControlSize;
+    /** Space between the items inside this group. @default "xs" */
+    itemGap?: ControlSize;
+    /** Draw a separator when this group follows another. @default true */
+    divider?: boolean;
+    /**
+     * Colour of that separator. Omit it and the rule is a fraction of the
+     * surrounding text colour, which adapts to the surface.
+     */
+    tone?: TrueColor;
+    /** Accessible name for the group. */
+    label?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<HeaderGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<HeaderGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderGroupProps> & Readonly<{}>, {
+    divider: boolean;
+    gap: ControlSize;
+    itemGap: ControlSize;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 export default _default;

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

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

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

@@ -1,6 +1,6 @@
-import type { IconName } from "../icons/registry";
 import { type VNode } from "vue";
-import type { TrueColor } from "../theme/Theme";
+import { type ControlSize, type SurfaceCorner, type SurfaceVariant, type TrueColor } from "../theme/Theme";
+import type { IconName } from "../icons/registry";
 export type HelpButtonPlacement = "top" | "bottom" | "left" | "right" | "auto";
 export interface HelpButtonProps {
     /**
@@ -16,19 +16,28 @@ export interface HelpButtonProps {
      * "auto" (default) picks the side with the most available space.
      */
     placement?: HelpButtonPlacement;
-    /** Accent color for the trigger button and the panel header stripe. */
+    /** Accent color for the trigger button and the panel header band. @default "blue" */
     color?: TrueColor;
-    /** Size of the trigger icon button. */
-    size?: "xs" | "sm" | "md" | "lg";
+    /** Surface treatment of the panel — the shared container family. @default "elevated" */
+    variant?: SurfaceVariant;
+    /** Corner radius of the panel, on the shared container scale. @default "rounded-md" */
+    corner?: SurfaceCorner;
+    /** Size of the trigger icon button, on the shared control scale. @default "xs" */
+    size?: ControlSize;
     /** Icon for the trigger button. Defaults to "Help". */
     icon?: IconName;
     /** Maximum width of the floating panel in px. Defaults to 360. */
     maxWidth?: number;
+    /** When true the panel body is a pulsing skeleton shaped like the help copy. @default false */
+    loading?: boolean;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<HelpButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HelpButtonProps> & Readonly<{}>, {
     icon: IconName;
+    size: ControlSize;
+    loading: boolean;
     color: TrueColor;
-    size: "xs" | "sm" | "md" | "lg";
+    variant: SurfaceVariant;
+    corner: SurfaceCorner;
     maxWidth: number;
     placement: HelpButtonPlacement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

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

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

@@ -1,51 +1,72 @@
 import type { VNode } from "vue";
-import type { IconName } from "../icons/registry";
-import type { TrueColor } from "../theme";
+import { type ControlSize, type GlowIntensity, type SurfaceCorner, type SurfacePadding, type TrueColor } from "../theme/Theme";
 import type { PanelDecoration } from "./Panel.vue";
-export type HeroTitleSize = "xs" | "sm" | "md" | "lg" | "xl";
-export type HeroSubtitleSize = "xs" | "sm" | "md";
-export type HeroPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+import type { IconName } from "../icons/registry";
+/**
+ * Every container surface, plus the saturated `gradient` band that is the
+ * component's own reason to exist — the same shape `EmptyState` uses for its
+ * extra `plain`.
+ */
+export declare const HERO_VARIANTS: readonly ["elevated", "outlined", "subtle", "tonal", "default", "glass", "simple", "liquid-glass", "gradient"];
+export type HeroVariant = (typeof HERO_VARIANTS)[number];
+/** The shared control scale. Both were bespoke unions, and the subtitle's was
+ *  truncated to three members, so a hero could not be sized past `md`. */
+export type HeroTitleSize = ControlSize;
+export type HeroSubtitleSize = ControlSize;
+/** The shared container padding scale. */
+export type HeroPadding = SurfacePadding;
+/** Elements a hero's title may be rendered as. */
+export declare const HERO_TITLE_ELEMENTS: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
+export type HeroTitleElement = (typeof HERO_TITLE_ELEMENTS)[number];
 export interface HeroProps {
-    /** Main heading text. */
-    title?: string;
-    /** Supporting text rendered below the title at lower opacity. */
+    /** Main heading. */
+    title: string;
+    /** Supporting line under the title. */
     subtitle?: string;
-    /** Icon name from the registry, or a pre-built element. When omitted the icon slot is not rendered. */
+    /**
+     * What the title is rendered as. It was always a `<p>`, so a banner that
+     * reads as the top of a page announced nothing to a screen reader.
+     * @default "p"
+     */
+    titleAs?: HeroTitleElement;
+    /** Registry icon name, or a node. Omit it and the slot is not drawn. */
     icon?: IconName | VNode;
-    /** Colour tone — drives the gradient background. Defaults to `"blue"`. */
+    /** @default "blue" */
     tone?: TrueColor;
-    /** Size of the title text. Colour is always white. Defaults to `"sm"`. */
+    /** Alias for `tone`, matching the rest of the kit. */
+    color?: TrueColor;
+    /** @default "gradient" */
+    variant?: HeroVariant;
+    /** @default "sm" */
     titleSize?: HeroTitleSize;
-    /** Size of the subtitle text. Colour is always white/75. Defaults to `"xs"`. */
+    /** @default "xs" */
     subtitleSize?: HeroSubtitleSize;
-    /** Internal padding. Defaults to `"none"`. */
+    /** @default "sm" */
     padding?: HeroPadding;
-    /** Whether to apply `rounded-xl` corner rounding. Defaults to `true`. */
+    /** Corner radius on the shared container scale. */
+    corner?: SurfaceCorner;
+    /** @deprecated Use `corner`. Ignored when `corner` is set. */
     rounded?: boolean;
     /**
-     * Decorative layer inside the banner:
-     * - `"shapes"`   — three floating circles at low white opacity
-     * - `"gradient"` — a diagonal white-to-transparent light wash
-     * - `"both"`     — circles + wash (default)
-     * - `"none"`     — no decoration
+     * Decorative layer inside the banner: floating circles, a diagonal wash,
+     * both, or neither. @default "both"
      */
     decoration?: PanelDecoration;
+    /** Start colour of the gradient. Defaults to the tone's 700 shade. */
+    gradientFrom?: string;
+    /** End colour of the gradient. Defaults to the tone's 800 shade. */
+    gradientTo?: string;
+    /** Halo behind the banner. @default "soft" */
+    glowIntensity?: GlowIntensity;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<HeroProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeroProps> & Readonly<{}>, {
-    tone: TrueColor;
+declare const _default: import("vue").DefineComponent<HeroProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeroProps> & Readonly<{}>, {
     rounded: boolean;
+    variant: HeroVariant;
     padding: HeroPadding;
     decoration: PanelDecoration;
+    titleAs: HeroTitleElement;
     titleSize: HeroTitleSize;
     subtitleSize: HeroSubtitleSize;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    title?: (props: {}) => any;
-} & {
-    subtitle?: (props: {}) => any;
-}>;
+    glowIntensity: GlowIntensity;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -18,6 +18,12 @@ export interface IconButtonProps {
     srLabel?: string;
     accent?: boolean;
     accentColor?: ButtonColor;
+    /**
+     * Raw CSS colour to tint the icon. Omit it and the icon inherits the
+     * button's text colour (icons paint with `currentColor`), so the glyph
+     * always matches; set it to override just the icon.
+     */
+    iconColor?: string;
     disabled?: boolean;
     /** When set, a styled tooltip is shown on hover (replaces the native title attribute). */
     tooltip?: string;
@@ -36,16 +42,16 @@ declare const _default: import("vue").DefineComponent<IconButtonProps, {
     el: import("vue").Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconButtonProps> & Readonly<{}>, {
     glass: boolean;
-    color: ButtonColor;
-    variant: ButtonVariant;
+    rounded: IconButtonRounded;
     size: ButtonSize;
-    disabled: boolean;
     loading: boolean;
-    accent: boolean;
-    vibrancy: GlassVibrancy;
+    color: ButtonColor;
+    disabled: boolean;
+    variant: ButtonVariant;
     glassOpacity: GlassOpacity;
+    vibrancy: GlassVibrancy;
     specularMode: SpecularMode;
-    rounded: IconButtonRounded;
+    accent: boolean;
     spinnerVariant: "solid" | "segments";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,37 +1,84 @@
+import type { PanelCorner, PanelPadding, PanelSpecularMode } from "./Panel.vue";
+import type { GlassOpacity, GlassVibrancy } from "../theme/glass";
+import type { ControlSize, PlainSurfaceVariant, TrueColor } from "../theme/Theme";
+/** Every container surface, plus `plain` for use inside a card that exists. */
+export type InfiniteScrollPanelVariant = PlainSurfaceVariant;
+/**
+ * How the items are arranged.
+ *
+ * - `list`    — one column, reading order preserved
+ * - `grid`    — responsive columns, reading order preserved (left to right)
+ * - `masonry` — responsive columns, rows spanned to the item's height
+ * - `columns` — balanced columns filled top-to-bottom, so reading order runs
+ *               *down* each column rather than across
+ *
+ * Replaces the `masonry` / `useFixedColumns` boolean pair, which could express
+ * four states of which only three meant anything and hid the reading-order
+ * trade-off behind a name that did not mention it.
+ */
+export type InfiniteScrollLayout = "list" | "grid" | "masonry" | "columns";
 export interface InfiniteScrollPanelProps<T> {
     items: T[];
-    isLoading: boolean;
+    /** True while the *first* page is loading. */
+    isLoading?: boolean;
     hasMore: boolean;
     /**
-     * Awaited when more items must be fetched — kept as a function prop (not an
-     * emit) because the component awaits its promise to manage the internal
-     * "loading more" state.
+     * Awaited when more items are needed — kept as a function prop, not an emit,
+     * because the component awaits its promise. Rejections surface as a retry
+     * state rather than being swallowed into the console.
      */
     onLoadMore: () => Promise<void>;
-    threshold?: number;
-    debounceMs?: number;
-    useFixedColumns?: boolean;
-    minColumnWidthPx?: number;
+    /** Stable key per item. Defaults to the index. */
+    getItemKey?: (item: T, index: number) => string | number;
+    /** @default "masonry" */
+    layout?: InfiniteScrollLayout;
+    /** Narrowest a column may get before the count drops. @default 300 */
+    minColumnWidth?: number;
     maxColumns?: number;
+    /** Explicit `grid-template-columns`, overriding the computed one. */
     columnTemplate?: string;
-    masonry?: boolean;
+    /** Space between items. @default "md" */
+    gap?: ControlSize;
+    /**
+     * How far below the viewport the sentinel is observed, in pixels. Used to be
+     * `threshold`, which was multiplied by a magic 50 *and* reused as an item
+     * count — two different meanings for one prop.
+     * @default 320
+     */
+    rootMargin?: number;
+    /** Keep fetching until at least this many items are loaded. @default 0 */
+    minItems?: number;
+    /** Copy for the built-in end marker. */
+    endMessage?: string;
+    /** Copy for the built-in empty state. */
+    emptyMessage?: string;
+    /** @default "plain" — this is usually dropped into a card the app owns. */
+    variant?: InfiniteScrollPanelVariant;
+    tone?: TrueColor;
+    corner?: PanelCorner;
+    padding?: PanelPadding;
+    glassOpacity?: GlassOpacity;
+    vibrancy?: GlassVibrancy;
+    specularMode?: PanelSpecularMode;
+    /** Fixed height for the scroll area. Otherwise it fills its parent. */
+    height?: number | string;
 }
 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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & InfiniteScrollPanelProps<T> & Partial<{}>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onError?: ((error: unknown) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError"> & InfiniteScrollPanelProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        /** Renders each item — replaces the React `renderItem` render prop. */
         renderItem?: (props: {
             item: T;
             index: number;
         }) => unknown;
-        /** Replaces the React `loadingComponent` node prop. */
         loadingComponent?: () => unknown;
-        /** Replaces the React `emptyComponent` node prop. */
         emptyComponent?: () => unknown;
+        endComponent?: () => unknown;
     };
-    emit: {};
+    emit: (event: "error", error: unknown) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

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

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

@@ -1,5 +1,19 @@
-export type InfoRowSize = "xs" | "sm" | "md" | "lg";
-export type InfoRowPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+import { type ControlSize, type PlainSurfaceVariant, type SurfaceCorner, type SurfacePadding, type TrueColor } from "../theme/Theme";
+import type { GlassOpacity, GlassVibrancy } from "../theme/glass";
+/**
+ * Every container surface, plus `plain` for a row dropped straight into a card
+ * the app already owns — which is where an `InfoRow` normally lives, so it is
+ * the default.
+ */
+export declare const INFO_ROW_VARIANTS: readonly ["elevated", "outlined", "subtle", "tonal", "default", "glass", "simple", "liquid-glass", "plain"];
+export type InfoRowVariant = PlainSurfaceVariant;
+/** The shared control scale. Was a component-local `xs | sm | md | lg`. */
+export type InfoRowSize = ControlSize;
+/** The shared container padding scale. Was a component-local eight-member list. */
+export type InfoRowPadding = SurfacePadding;
+/** How a row reports that it is still waiting for its value. */
+export declare const INFO_ROW_LOADERS: readonly ["skeleton", "spinner"];
+export type InfoRowLoader = (typeof INFO_ROW_LOADERS)[number];
 export interface InfoRowProps {
     /** Row label (left side). Use the `label` slot for composed/styled labels. */
     label?: string;
@@ -9,13 +23,13 @@ export interface InfoRowProps {
      */
     labelSize?: InfoRowSize;
     /**
-     * Extra classes for the label span — use for custom colour, weight, etc.
-     * e.g. `labelClassName="text-emerald-600 font-semibold"`
+     * Extra classes for the label span. A text colour here replaces the row's
+     * own rather than racing it — see `hasTextColor`.
      */
     labelClassName?: string;
     /**
      * Fixed width class for the label column (e.g. `"w-32"`).
-     * Defaults to a size-appropriate width (`w-16` / `w-20` / `w-24` / `w-28`).
+     * Defaults to a size-appropriate width (`w-16` … `w-32`).
      * Pass `""` to let the label size naturally.
      */
     labelWidth?: string;
@@ -33,66 +47,78 @@ export interface InfoRowProps {
      */
     valueSize?: InfoRowSize;
     /**
-     * Extra classes for the value span — use for custom colour, weight, etc.
-     * e.g. `valueClassName="text-sky-500"`
+     * Extra classes for the value span. A text colour here replaces the row's
+     * own rather than racing it.
      */
     valueClassName?: string;
-    /** Controls both label and value text size when individual overrides are absent. Defaults to `'md'`. */
+    /** Controls both label and value text size when individual overrides are absent. @default "md" */
     size?: InfoRowSize;
     /**
-     * Vertical padding override. Accepts the full size scale including `'none'`.
-     * When omitted, padding is derived from `size` (xs→py-1, sm→py-1.5, md→py-2, lg→py-2.5).
+     * The surface the row draws for itself. `plain` draws none — just the
+     * hairline — which is right for a row inside an existing card. @default "plain"
      */
+    variant?: InfoRowVariant;
+    /** Accent for the hover wash, the focus ring and the glass tint. @default "blue" */
+    tone?: TrueColor;
+    /** Corner radius when `variant` is not `plain`. */
+    corner?: SurfaceCorner;
+    /** Vertical padding override. When omitted, padding is derived from `size`. */
     padding?: InfoRowPadding;
     /**
      * Show a copy-to-clipboard button.
-     * Defaults to `true` — shown automatically when the resolved value is a string or number.
-     * Pass `false` to suppress the button entirely.
+     * Shown automatically when the resolved value is a string or number. @default true
      */
     copyable?: boolean;
-    /**
-     * Render the value in a monospace font.
-     * Shorthand for `valueClassName="font-mono"`.
-     */
+    /** Render the value in a monospace font. */
     mono?: boolean;
     /**
      * Hide the row entirely when `value` is `null`, `undefined`, or `''`.
-     * Defaults to `true`. Set to `false` to show the `emptyText` placeholder instead.
+     * Set to `false` to show the `emptyText` placeholder instead. @default true
      */
     hideIfEmpty?: boolean;
-    /**
-     * Placeholder text shown when `hideIfEmpty` is `false` and the value is empty.
-     * Defaults to `'—'`.
-     */
+    /** Placeholder shown when `hideIfEmpty` is `false` and the value is empty. @default "—" */
     emptyText?: string;
-    /**
-     * Allow the value to wrap to multiple lines instead of truncating.
-     * Defaults to `false`.
-     */
+    /** Allow the value to wrap to multiple lines instead of truncating. */
     wrap?: boolean;
     /**
      * Show a tooltip with the full value when the text is truncated.
-     * Only active when `wrap` is `false` and the value is a string or number.
-     * Defaults to `true`.
+     * Only active when `wrap` is `false` and the value is a string or number. @default true
      */
     tooltipOnTruncate?: boolean;
-    /** Remove the bottom border (e.g. for the last row when handled externally). */
-    noBorder?: boolean;
+    /** The value is still being fetched: render a placeholder in its place. */
+    loading?: boolean;
+    /** How `loading` is drawn. @default "skeleton" */
+    loaderType?: InfoRowLoader;
     /**
-     * Remove the default horizontal padding (`px-3`/`px-4`).
-     * Useful when the parent already provides horizontal spacing.
+     * Something went wrong fetching this value. Replaces the value, and is
+     * announced — a row that silently shows "—" for a failed lookup is
+     * indistinguishable from one that is genuinely empty.
      */
+    error?: string;
+    /** Remove the bottom hairline (e.g. for a last row handled externally). */
+    noBorder?: boolean;
+    /** Remove the default horizontal padding. */
     noPadding?: boolean;
-    /**
-     * Add a subtle hover background and rounded corners (matches classic detail-panel row style).
-     * Defaults to `false`.
-     */
+    /** Add a hover wash and rounded corners, in the row's own `tone`. */
     hoverable?: boolean;
+    /** Glass fill transparency, when `variant` is a glass one. */
+    glassOpacity?: GlassOpacity;
+    /** Backdrop vibrancy, when `variant` is a glass one. */
+    vibrancy?: GlassVibrancy;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InfoRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InfoRowProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InfoRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    copy: (text: string) => any;
+}, string, import("vue").PublicProps, Readonly<InfoRowProps> & Readonly<{
+    onCopy?: ((text: string) => any) | undefined;
+}>, {
     size: InfoRowSize;
-    wrap: boolean;
+    loading: boolean;
+    tone: TrueColor;
+    variant: InfoRowVariant;
+    corner: SurfaceCorner;
+    loaderType: InfoRowLoader;
     hoverable: boolean;
+    wrap: boolean;
     noPadding: boolean;
     copyable: boolean;
     mono: boolean;
@@ -104,6 +130,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InfoRowPro
     label?: (props: {}) => any;
 } & {
     value?: (props: {}) => any;
+} & {
+    label?: (props: {}) => any;
+} & {
+    value?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {