@mkbabb/glass-ui 0.2.0 → 2.0.0

package/dist/components/custom/infinite-scroll/InfiniteScroll.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    /** Whether more data is available */
+    hasMore: boolean;
+    /** Whether data is currently loading */
+    isLoading: boolean;
+    /** Distance from bottom to trigger (px) */
+    threshold?: number;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    loading?: (props: typeof __VLS_3) => any;
+} & {
+    end?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    sentinelRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "load-more": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onLoad-more"?: (() => any) | undefined;
+}>, {
+    threshold: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/custom/infinite-scroll/composables/types.d.ts

@@ -0,0 +1,21 @@
+import type { Ref, MaybeRefOrGetter } from "vue";
+export interface InfiniteScrollOptions {
+    /** The scrollable container element. Defaults to window if not provided. */
+    scrollContainer?: Ref<HTMLElement | null>;
+    /** Distance in pixels from the bottom to trigger loading (default: 200) */
+    threshold?: number;
+    /** Whether more data is available */
+    hasMore: MaybeRefOrGetter<boolean>;
+    /** Whether data is currently loading */
+    isLoading: MaybeRefOrGetter<boolean>;
+    /** Callback invoked when the sentinel enters the viewport */
+    onLoadMore: () => void;
+}
+export interface InfiniteScrollReturn {
+    /** Ref to bind to the sentinel element */
+    sentinelRef: Ref<HTMLElement | null>;
+    /** Manually trigger a check (e.g., after DOM updates) */
+    check: () => void;
+    /** Stop observing */
+    stop: () => void;
+}

package/dist/components/custom/infinite-scroll/composables/useInfiniteScroll.d.ts

@@ -0,0 +1,9 @@
+import type { InfiniteScrollOptions, InfiniteScrollReturn } from "./types";
+/**
+ * Composable for infinite scroll with IntersectionObserver.
+ *
+ * Watches a sentinel element at the bottom of the scrollable area.
+ * When it enters the viewport and `hasMore` is true / `isLoading` is false,
+ * the `onLoadMore` callback fires.
+ */
+export declare function useInfiniteScroll(options: InfiniteScrollOptions): InfiniteScrollReturn;

package/dist/components/custom/instrument-chassis/ChassisDivider.vue.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from "vue";
+/**
+ * <ChassisDivider> — twin-line hairline groove, the chassis signature detail.
+ *
+ * Two 1px lines stacked: top reads as a sub-pixel catch-light, bottom as a
+ * sub-pixel under-shadow. Together they describe a hairline groove between
+ * stacked instrument panels — the Braun T-1000 / Bang & Olufsen at-rest
+ * vocabulary the chassis carries throughout.
+ *
+ * Orientation flips the geometry from a horizontal divider (default — the
+ * dividers between strip / dial / control regions) to a vertical groove
+ * (the desktop divider between the dial canvas and the readout column).
+ * Mobile inverts the dial-region divider via the chassis stylesheet's
+ * `@media (max-width: 720px)` rule; the orientation prop carries no
+ * runtime cost there.
+ *
+ * AI.W1-γ host-prefix alignment: renamed from `RegionDivider` →
+ * `ChassisDivider` so the instrument-chassis family's signature detail
+ * carries the family-root prefix (matching `InstrumentChassis`,
+ * `instrument-chassis.css`).
+ */
+type __VLS_Props = {
+    orientation?: "horizontal" | "vertical";
+    class?: HTMLAttributes["class"];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/instrument-chassis/InstrumentChassis.vue.d.ts

@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from "vue";
+export type InstrumentChassisPhase = "ready" | "ping" | "download" | "upload" | "jitter" | "complete";
+/**
+ * The chassis register discriminator.
+ *
+ * - `"glass"` (default) — the canonical chassis surface. Reads the resting
+ *   glass tier plus the `--glass-curvature-overlay`, the engraved-bezel
+ *   inner stroke, and the phase-color tint cascade. Every speedtest /
+ *   survey / thank-you consumer at HEAD lands here.
+ *
+ * - `"spine"` (AL-W1-α augmented; per AL-X5 §4.1) — the HOUSING register.
+ *   Polished SLEEVE, not glass: NO `backdrop-filter`, NO plate opacity,
+ *   hairline outer stroke at `--glass-spine-border`, interior radial
+ *   vignette that subtly carries the phase-color cascade. Inset from the
+ *   viewport by `clamp(0.5rem, 2vw, 1.25rem)` so the chassis edge sits
+ *   beyond an inner card's outer edge. Closes the AK W2 chassis-spine
+ *   architectural underclaim. Consumed at quiet-content App-level
+ *   mounts (the inner card paints its own glass tier — the spine is
+ *   the housing that frames it).
+ */
+export type InstrumentChassisVariant = "glass" | "spine";
+/**
+ * <InstrumentChassis> — single glass surface composing strip / dial / control
+ * regions, glued together by twin-line hairline grooves.
+ *
+ * The default `dial` slot always renders (the chassis's primary content).
+ * The optional `strip` (header) and `control` (footer) slots — together with
+ * the `<ChassisDivider>` adjacent to each — emit markup only when bound.
+ * I gate `<header>`, `<footer>`, and the two dividers on `$slots.strip` /
+ * `$slots.control` presence, so empty-slot consumers don't have to suppress
+ * the markup with `display: none` overrides. Mirrors the `v-if="$slots.status"`
+ * idiom InstrumentRail established.
+ *
+ * The chassis owns the `--phase-color` cascade via `data-phase`; phase label,
+ * hero number, and phase progress fill all read it through one CSS custom
+ * property, no per-element listener wiring.
+ *
+ * The chassis carries the engraved-bezel `::before` stroke and the
+ * radial-gradient curvature overlay — both are chassis character, persistent
+ * at all phases. Disco accents (specular swap, sparkle, phase-glow,
+ * disco-grain) are reserved for interactive moments; see `instrument-chassis.css`
+ * for the reservation rules.
+ *
+ * The `variant` prop discriminates the surface register (see
+ * `InstrumentChassisVariant` above). The phase cascade (`data-phase`) is
+ * orthogonal to the variant — both registers retint identically; only the
+ * surface recipe forks.
+ *
+ * Consumers slot their own region content. Speedtest, survey, and thank-you
+ * all consume this same component; the slots vary per route.
+ */
+type __VLS_Props = {
+    /** Active phase. Drives the `--phase-color` cascade across the chassis. */
+    phase?: InstrumentChassisPhase;
+    /**
+     * Surface register. Defaults to `"glass"` (the canonical chassis
+     * plate). Pass `"spine"` at App-level mount paths to get the
+     * housing register (polished sleeve, no backdrop-filter, interior
+     * vignette + hairline outer stroke).
+     */
+    variant?: InstrumentChassisVariant;
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    strip?: (props: typeof __VLS_1) => any;
+} & {
+    dial?: (props: typeof __VLS_8) => any;
+} & {
+    control?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: InstrumentChassisVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/custom/instrument-chassis/index.d.ts

@@ -0,0 +1,3 @@
+export { default as InstrumentChassis } from "./InstrumentChassis.vue";
+export { default as ChassisDivider } from "./ChassisDivider.vue";
+export type { InstrumentChassisPhase, InstrumentChassisVariant, } from "./InstrumentChassis.vue";

package/dist/components/custom/instrument-rail/InstrumentRail.vue.d.ts

@@ -0,0 +1,91 @@
+import type { HTMLAttributes } from "vue";
+/**
+ * <InstrumentRail> — flex-basis cockpit-ratio rail with bezel hairlines
+ * and an internal twin-line divider rule between children.
+ *
+ * Resolves A3 D-4 (cockpit ratio 0.222 → 0.382, the 1/φ² golden gestalt)
+ * by carrying the ratio as a typed flex-basis term with min/max clamp
+ * safety. Composes inside <InstrumentChassis> alongside a primary panel,
+ * or stands alone as the sidekick column of any cockpit composition.
+ *
+ * Geometry:
+ *   - `variant="vertical"` (default) — rail is a column; flex-basis binds
+ *     against the parent's main-axis width. min-width 15rem, max-width 28rem.
+ *   - `variant="horizontal"` — rail is a row; flex-basis binds against the
+ *     parent's main-axis height. min-height 15rem, max-height 28rem.
+ *
+ * Bezel character:
+ *   - `bezelHairlines="true"` (default) draws the engraved-bezel ::before
+ *     inner stroke, the same twin-pixel signature that <InstrumentChassis>
+ *     carries (catch-light + under-shadow). Resolves FD1 TRANSPOSITION 3's
+ *     internal-divider concern by giving the rail its own bezel edge so
+ *     it reads as a chassis-internal module, not an unbordered slot.
+ *   - `dividerRule="true"` (default) renders a twin-line hairline groove
+ *     above every child after the first via the bezel-line idiom (same
+ *     `rgb(255 255 255 / α)` + `rgb(0 0 0 / α)` pair the chassis-divider
+ *     primitive uses). Sibling-CSS — no slotted dividers needed.
+ *
+ * Slots:
+ *   - default — rail children, stacked along the variant axis.
+ *   - `status` — bezel-edge status-light region; pinned to the rail's
+ *     opening edge (top for vertical, leading for horizontal). Optional;
+ *     omitted slots emit no markup.
+ *
+ * a11y: layout primitive; emits no ARIA role by default. Consumers compose
+ * semantic landmarks (<aside>, <nav>) by wrapping or by passing `as`.
+ *
+ * PRM: no animation — the primitive is purely geometric. PRM cascades
+ * through children (they own their own animation contracts).
+ *
+ * AK-W2-α — see A3 §8.T-1 + FD1 TRANSPOSITION 6 + G-AK-D9.
+ */
+export interface InstrumentRailProps {
+    /**
+     * Rail axis. `"vertical"` (default) stacks children top-to-bottom and
+     * binds flex-basis on the inline axis (column rail of a row cockpit).
+     * `"horizontal"` stacks left-to-right and binds flex-basis on the
+     * block axis (row rail of a column cockpit).
+     */
+    variant?: "vertical" | "horizontal";
+    /**
+     * Cockpit ratio — flex-basis fraction of the parent flex container.
+     * Defaults to 0.382 (1/φ², the golden-gestalt cockpit ratio per A3
+     * §8.T-1). Consumers may pass any ratio in (0, 1); the rail clamps
+     * the realised width via `min-width`/`max-width` so a degenerate
+     * value still hits a readable register.
+     */
+    ratio?: number;
+    /**
+     * Toggle the engraved-bezel ::before inner stroke. Default `true`.
+     * Disable when the rail is composed inside another bezel-bearing
+     * surface that already carries the stroke (avoid double bezels).
+     */
+    bezelHairlines?: boolean;
+    /**
+     * Toggle the internal twin-line divider rule between sibling
+     * children. Default `true`. Disable when children carry their own
+     * dividers or when a flush composition is desired.
+     */
+    dividerRule?: boolean;
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    status?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InstrumentRailProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InstrumentRailProps> & Readonly<{}>, {
+    variant: "vertical" | "horizontal";
+    ratio: number;
+    bezelHairlines: boolean;
+    dividerRule: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/custom/instrument-rail/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InstrumentRail } from "./InstrumentRail.vue";
+export type { InstrumentRailProps } from "./InstrumentRail.vue";

package/dist/components/custom/labeled-field/LabeledField.vue.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from "vue";
+/**
+ * LabeledField — parent SFC for the labeled-field family (V.W3.T5 / A5 §5.5).
+ *
+ * Owns the IconTooltip + label layer that the four sibling primitives
+ * (LabeledInput, LabeledSelect, LabeledSlider, LabeledSwitch) used to repeat
+ * across their templates. The form control composes via `<slot />`.
+ *
+ * The four wrappers stay intact for API ergonomics (per the B5 §5.5 keep-wrappers
+ * path) but now compose `<LabeledField>` internally — the canonical recipe
+ * lives in one place. Consumers may also import `<LabeledField>` directly
+ * if they want full control of the slot.
+ *
+ * The `.labeled-field-label` utility class lives at `utilities.css` and
+ * paints the canonical typography (font-display + body-size + muted-fg +
+ * cursor-help). The previous mixed `text-base` / `text-lg` literals
+ * harmonise on a single body-size token.
+ */
+type __VLS_Props = {
+    label: string;
+    tooltip?: string;
+    labelClass?: HTMLAttributes["class"];
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/custom/labeled-field/LabeledInput.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    modelValue: string | number;
+    label: string;
+    tooltip: string;
+    labelClass?: string;
+    inputClass?: string;
+    type?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/labeled-field/LabeledSelect.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    modelValue: string;
+    isOpen: boolean;
+    items: readonly string[];
+    descriptions?: Record<string, string>;
+    label: string;
+    tooltip: string;
+    labelClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/labeled-field/LabeledSlider.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    modelValue: number;
+    label: string;
+    tooltip: string;
+    labelClass?: string;
+    min: number;
+    max: number;
+    step: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/labeled-field/LabeledSwitch.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    checked: boolean;
+    label: string;
+    tooltip: string;
+    labelClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:checked": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:checked"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/labeled-field/index.d.ts

@@ -0,0 +1,5 @@
+export { default as LabeledField } from "./LabeledField.vue";
+export { default as LabeledInput } from "./LabeledInput.vue";
+export { default as LabeledSelect } from "./LabeledSelect.vue";
+export { default as LabeledSlider } from "./LabeledSlider.vue";
+export { default as LabeledSwitch } from "./LabeledSwitch.vue";

package/dist/components/custom/metric-badge/MetricBadge.vue.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'vue';
+type MetricBadgeSize = 'sm' | 'md' | 'lg' | 'xl';
+type MetricBadgeLabelPosition = 'inline' | 'stacked';
+type __VLS_Props = {
+    amount: string | number | null | undefined;
+    unit?: string;
+    /** Full annotation slot, rendered as a sibling `<span>` with classnames
+     *  `metric-badge__label metric-badge__label--full`. Tracked uppercase,
+     *  muted. */
+    label?: string;
+    /** Compact form of `label`, rendered as a SIBLING `<span>` with
+     *  classnames `metric-badge__label metric-badge__label--abbr`. When both
+     *  `label` and `abbreviation` are set the library renders BOTH siblings;
+     *  consumer container-query CSS toggles which is visible (default:
+     *  `--full` shown, `--abbr` hidden — see utilities.css). The library
+     *  itself never branches on viewport. R2-spec. */
+    abbreviation?: string;
+    /** When set, renders the label slot in `inline` (single row, baseline-
+     *  aligned) or `stacked` (column, items flex-start) mode. When unset,
+     *  the label slot does not render even if `label`/`abbreviation` carry
+     *  values. */
+    labelPosition?: MetricBadgeLabelPosition;
+    /** Color applied to the amount when it's truthy. */
+    color?: string;
+    /** Substitute glyph when amount is empty. */
+    placeholder?: string;
+    /** Typographic scale. Defaults to `md`. The ladder reads
+     *  sm 11px / md 12px / lg 14px / xl 18px; `xl` is the audacious-poster
+     *  rung (`text-mono-prose` amount, `text-prose` unit) for hero
+     *  placements that need to read at chassis distance. */
+    size?: MetricBadgeSize;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: MetricBadgeSize;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/metric-badge/index.d.ts

@@ -0,0 +1 @@
+export { default as MetricBadge } from "./MetricBadge.vue";

package/dist/components/custom/metric-cell/MetricCell.vue.d.ts

@@ -0,0 +1,97 @@
+import type { Component, FunctionalComponent, HTMLAttributes } from "vue";
+/**
+ * Permissive icon type — Vue's `Component` type ships across multiple
+ * package boundaries (vue / @vue/runtime-core duplication when consumers
+ * symlink-resolve through workspace links). Accept the structural shape
+ * a Vue render expression handles: any `Component`, `FunctionalComponent`,
+ * or a generic object/function. The `<component :is>` binding receives
+ * the value transparently.
+ */
+type IconLike = Component | FunctionalComponent | object | null;
+/**
+ * MetricCell — compact metric card (icon-on-label, stacked value + unit) on
+ * a wash-tier glass surface.
+ *
+ * AC.W8e (glass-ui v1.7.0) — promoted from speedtest's
+ * `<ResultDetailSheet>` 4-card grid (download / upload / ping / jitter).
+ * The original consumer had the same 11-class string repeated four times:
+ *
+ *     <div class="glass-wash rounded-lg p-3">
+ *         <div class="text-micro text-muted-foreground flex items-center gap-1.5">
+ *             <component :is="icon" :size="14" :stroke-width="2" />
+ *             <span>Download</span>
+ *         </div>
+ *         <div class="text-mono-prose font-semibold tabular-nums">
+ *             {{ fmt(row.download, "Mbps") }}
+ *         </div>
+ *     </div>
+ *
+ * The shape is generic enough that any dashboard / detail-sheet / summary
+ * surface composing icon + label + value + unit on a tile hits the same
+ * gestalt; the primitive collapses the 4-site duplication onto one consume.
+ *
+ * Owns:
+ *  - the wash-tier surface (`.glass-wash rounded-lg p-3`) by default; the
+ *    `appearance="bare"` variant drops the surface for consumers that host
+ *    the cell inside a larger panel.
+ *  - the label row (`.text-micro .text-muted-foreground flex items-center
+ *    gap-1.5`) with icon prefix + label text.
+ *  - the value row (`.text-mono-prose .font-semibold .tabular-nums`) with
+ *    optional unit suffix.
+ *  - tabular-numeric digit metrics + lining figures via `tabular-nums`.
+ *
+ * The `compact` appearance trades `text-mono-prose` for `text-mono-caption`
+ * + smaller padding so the cell composes inside dense grids.
+ */
+export type MetricCellAppearance = "dashboard" | "compact" | "bare";
+export interface MetricCellProps {
+    /**
+     * Optional lucide icon component. Renders at 14px stroke-2 inside
+     * the label row. Pass `null` to omit; the `icon` slot overrides.
+     */
+    icon?: IconLike;
+    /** Stroke width for the lucide icon. Defaults to 2. */
+    iconStrokeWidth?: number;
+    /** Icon pixel size — defaults to 14 (matches `text-micro` cap height). */
+    iconSize?: number;
+    /** Label text — reads through the `label` slot when set. */
+    label?: string;
+    /** Value — primary metric. Reads through the `value` slot when set. */
+    value?: string | number | null | undefined;
+    /** Unit suffix appended after the value (e.g. "Mbps", "ms"). */
+    unit?: string;
+    /** Placeholder glyph when value is empty/null. Defaults to em-dash. */
+    placeholder?: string;
+    /**
+     * Visual register.
+     * - `dashboard` (default) — wash-tier surface, `text-mono-prose`
+     *   value, `p-3`.
+     * - `compact` — wash-tier surface, `text-mono-small` value, `p-2`.
+     * - `bare` — no surface, no padding; the cell composes inside a
+     *   pre-styled host.
+     */
+    appearance?: MetricCellAppearance;
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    label?: (props: typeof __VLS_8) => any;
+} & {
+    value?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MetricCellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MetricCellProps> & Readonly<{}>, {
+    placeholder: string;
+    iconStrokeWidth: number;
+    iconSize: number;
+    appearance: MetricCellAppearance;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/custom/metric-cell/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MetricCell } from "./MetricCell.vue";
+export type { MetricCellAppearance, MetricCellProps } from "./MetricCell.vue";

package/dist/components/custom/metric-stack/MetricRow.vue.d.ts

@@ -0,0 +1,103 @@
+import type { HTMLAttributes, Component } from "vue";
+/**
+ * MetricRow — a single row inside <MetricStack>.
+ *
+ * Reads three subgrid tracks from the parent stack: icon | label | value.
+ * The value track carries a baseline-aligned inline group of value + unit
+ * so the row reads "240 Mbps" as one typographic lockup, not two grid
+ * cells. The optional description slot promotes to a full-row block at
+ * `@container metric-stack (min-width: 32rem)`.
+ *
+ * Owns:
+ *  - the audacious-poster value clamp (`clamp(4.5rem, 34cqi × 3/max(3,
+ *    --digit-count), --type-display-hero)`) — consumers pass digitCount so
+ *    4-digit values shrink proportionally and stay inside the column.
+ *  - the tabular-nums + ss01 + lnum font-feature register on the value
+ *    cell so digits sit on tabular metrics regardless of consumer typography.
+ *  - the optional `aura` slot host: the slot sits at `position: absolute;
+ *    inset: 0` inside `.metric-row__value`, with the host marked
+ *    `position: relative`. Consumers compose <Pulse variant="aura"> there
+ *    when the row is the active metric.
+ *  - per-row tint via `--phase-color` (inline style on `.metric-row` — set
+ *    by the consumer per metric) cascading to value + unit when
+ *    `data-color-tinted="true"`.
+ *
+ * AC.W6d — promoted from speedtest/ResultStack.vue's `.result-row` block.
+ * Consumers stop hand-rolling the subgrid + clamp + aura host CSS and
+ * instead pass props.
+ */
+export interface MetricRowProps {
+    /**
+     * Optional lucide icon component (e.g. `MoveDown`). Renders inside
+     * the icon track at 16×16 by default. Pass `null` to omit; the
+     * slot named `icon` overrides.
+     */
+    icon?: Component | null;
+    /** Stroke width for the lucide icon. */
+    iconStrokeWidth?: number;
+    /** Icon pixel size — defaults to 16. */
+    iconSize?: number;
+    /** Label text — reads through the label slot when set. */
+    label?: string;
+    /** Value text (the audacious-poster hero number). */
+    value?: string | number | null | undefined;
+    /** Unit suffix — reads through the unit slot when set. */
+    unit?: string;
+    /** Placeholder glyph when value is empty/null. Defaults to "—". */
+    placeholder?: string;
+    /**
+     * Per-row phase colour. Sets `--phase-color` inline so descendant
+     * tints (value, unit, aura) consume the colour through the cascade.
+     * Consumers that wire tints through Tailwind tokens may pass
+     * `var(--chart-download)` etc.
+     */
+    phaseColor?: string;
+    /**
+     * Digit-count knob for the value clamp. The value cell shrinks as
+     * `3 / max(3, digitCount)` so 4-digit values still fit the cell.
+     * Pass the rendered string length; defaults to 3.
+     */
+    digitCount?: number;
+    /**
+     * When `true`, descendant value + unit promote from the neutral
+     * `--foreground` colour to `var(--phase-color)`. Drives the
+     * post-complete colour-tint cascade.
+     */
+    colorTinted?: boolean;
+    /**
+     * When `true`, the `aura` slot becomes visible. Consumers wire
+     * this to their active-row gating (e.g. the metric being sampled).
+     */
+    active?: boolean;
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    label?: (props: typeof __VLS_8) => any;
+} & {
+    aura?: (props: typeof __VLS_10) => any;
+} & {
+    value?: (props: typeof __VLS_12) => any;
+} & {
+    unit?: (props: typeof __VLS_14) => any;
+} & {
+    description?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MetricRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MetricRowProps> & Readonly<{}>, {
+    placeholder: string;
+    digitCount: number;
+    active: boolean;
+    iconStrokeWidth: number;
+    iconSize: number;
+    colorTinted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};