@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/components/handmark/composables/useHandMark.d.ts

@@ -0,0 +1,99 @@
+/**
+ * useHandMark.ts — the headless reactive core (L2/L3/L4; SPEC §9).
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Sits between the props and the SFC template so a future React/web-component skin
+ * reuses L1–L4. It orchestrates: resolve brush → shapeGeom → ink → animation. It
+ * owns NO DOM (the SFC anchors/measures/mounts the filter); it owns the reactive
+ * pipeline + the draw-on / boil state machine.
+ *
+ * Two draw-on mechanisms, picked by a FIELD (never an instrument `if`):
+ *   - clean ink (no grain): `stroke-dashoffset` on `pathLength="1"` — the slides
+ *     recipe, geometry-agnostic, compositor-cheap, no filter to re-raster.
+ *   - grained ink (crayon): a `clip-path: inset()` WIPE — the filter rasters ONCE
+ *     and the reveal mutates only the clip (`ds-crayon-handmark §5.1`). NEVER
+ *     dashoffset under a filter (it would re-raster the graph per frame — the Δ4
+ *     gate).
+ *
+ * PRM: every draw-on collapses to instant (finished static state); boil no-ops
+ * (`useLineBoil.start()` early-returns under reduced motion).
+ */
+import { type Ref } from "vue";
+import { type Brush, type BrushName } from "../brush";
+/**
+ * The boil clock surface the SFC binds — the `useLineBoil` return shape, declared
+ * structurally over glass-ui's OWN `Ref` (pencil-boil ships a nested `@vue`, so its
+ * `Ref` symbol differs; the no-op stub is built with this `ref`, hence the surface
+ * is named here rather than `ReturnType<typeof useLineBoil>`).
+ */
+export interface BoilClock {
+    currentFrame: Ref<number>;
+    start: () => void;
+    stop: () => void;
+}
+import { type ShapeGeom } from "../geometry";
+import { type SVGFragment } from "../ink";
+import type { HandAnimation, HandMarkProps, HandShape, MarkBox } from "../types";
+export interface UseHandMarkInput {
+    brush: BrushName | Partial<Brush>;
+    shape: HandShape;
+    color: string;
+    seed: number;
+    overrides?: Partial<Brush>;
+    animation: HandAnimation;
+    boilFps: number;
+    boilFrames: number;
+    roughness: number | null;
+    segments: number | null;
+    jagged: boolean;
+    /** NATURAL underline morphology (C-2) — procedural off the house-seeded engine. */
+    natural: boolean;
+    /** NATURAL-underline excursion knob (BG.W-HANDMARK-PERFECT (c)); `null` ⇒ derive from brush wobble. */
+    amplitude: number | null;
+    box: MarkBox | null;
+    path: string | null;
+    filterId: string;
+    /**
+     * The MEASURED text baseline as a fraction of the `.hm` box height (text-mode
+     * underline anchor). `null` until the SFC measures it (ResizeObserver +
+     * `document.fonts.ready`) — geometry falls back to the legacy constant for that
+     * one pre-measure frame. Ignored in positioned (`box`) mode.
+     */
+    baselineFrac: number | null;
+    /**
+     * The aspect-correct marking-space HEIGHT (BG.W-HANDMARK-PERFECT (a)) — `VB_W /
+     * boxAspect` from the SFC-measured `.hm` box px-aspect, so `preserveAspectRatio="none"`
+     * scales the text-mode wobble SHAPE uniformly (the humps stop crushing flat on a short
+     * word). Defaults to `VB_H`; used ONLY for the measured text-mode marks (the positioned/
+     * box path keeps `VB_H` byte-for-byte).
+     */
+    vbH: number;
+}
+/**
+ * Normalise raw HandMarkProps (with their defaults applied) into the core input.
+ * `baselineFrac` is the SFC's MEASURED text baseline (text-mode underline anchor) —
+ * passed in (not a prop) because it is a runtime measurement, `null` until measured.
+ */
+export declare function normalizeProps(props: HandMarkProps, filterId: string, baselineFrac?: number | null, vbH?: number): UseHandMarkInput;
+export interface HandMarkCore {
+    /** the resolved effective brush vector. */
+    brush: Ref<Brush>;
+    /** the static base geometry (boil re-perturbs THIS). */
+    baseGeom: Ref<ShapeGeom>;
+    /** the live SVG fragment (paths + filter defs). */
+    fragment: Ref<SVGFragment>;
+    /** the live `d` (escape-hatch path > boiled geometry > static base). */
+    pathD: Ref<string>;
+    /** does the brush emit a grain filter? (drives the draw-on mechanism). */
+    grained: Ref<boolean>;
+    /** the draw-on mechanism for this mark: dashoffset (pen) | clip (crayon). */
+    drawKind: Ref<"dashoffset" | "clip">;
+    /** does this animation draw on at all? */
+    draws: Ref<boolean>;
+    /** does this animation boil? */
+    boils: Ref<boolean>;
+    /** the boil clock (a real `useLineBoil` only when the mark boils; else a no-op stub). */
+    boil: BoilClock;
+    /** arm/disarm boil (draw-then-boil holds it until the draw finishes). */
+    boilArmed: Ref<boolean>;
+}
+export declare function useHandMark(input: Ref<UseHandMarkInput>): HandMarkCore;

package/dist/components/handmark/constants.d.ts

@@ -0,0 +1,69 @@
+/**
+ * constants.ts — the marking-space geometry constants (the colocation home).
+ * ─────────────────────────────────────────────────────────────────────────────
+ * The hand-mark family's named geometry constants live here (the AY.W-COLOCATE
+ * convention's `constants.ts` home). geometry.ts + the SFC re-read them by name.
+ */
+/** Marking-space width (the 0..100 × 0..40 viewBox; `preserveAspectRatio="none"`). */
+export declare const VB_W = 100;
+/** Marking-space height. */
+export declare const VB_H = 40;
+/**
+ * The hairline gap, as a fraction of the `.hm` box, between the MEASURED text
+ * baseline and the underline centerline. The underline rides just under the real
+ * glyph bottoms — a hand mark sits a few % of cap-height below the baseline, never
+ * through it (the E1 occlusion root: a constant `y=32` strikethroughs tight-leading
+ * display type because 80% of a `line-height:1.02` box IS the baseline).
+ */
+export declare const UNDERLINE_GAP = 0.06;
+/**
+ * The highlighter LOW-SEAT band (BA.W-HANDMARK C-1(a)). A real highlighter rides
+ * the low two-thirds of the line — the ink sits on the baseline and rises to
+ * ~x-height — NOT the box vertical center the fork shipped. The band centerline
+ * seats at `baselineFrac − HIGHLIGHT_RISE` (raised off the baseline by ~half a
+ * lowercase x-height) so the wide slab (weight 26) covers x-height down to the
+ * baseline. Expressed as a fraction of the `.hm` box, parallel to UNDERLINE_GAP.
+ */
+export declare const HIGHLIGHT_RISE = 0.22;
+/** Pre-measure fallback for the highlight band's low seat (null baselineFrac). */
+export declare const HIGHLIGHT_FALLBACK_FRAC = 0.66;
+/**
+ * The boil voice — φ-incommensurate fractal value-noise (the masthead morphology).
+ * ─────────────────────────────────────────────────────────────────────────────
+ * The boil centerline is a 1-D fractal value-noise displacement off the HOUSE
+ * `mulberry32`, NOT a seeded sinusoid. A sinusoid (the prior body) self-correlates
+ * into a near-period — it reads as a spell-check squiggle and a clean sine fails any
+ * honest non-periodicity discriminator (a sine's extrema are near-uniformly spaced).
+ * The value-noise sums octaves at φ-stepped frequencies (mutually irrational → the
+ * sum NEVER closes into a period); each octave's amplitude decays by 1/φ. The result
+ * is a hump-to-hump-IRREGULAR hand line whose inter-extremum spacing-CV is the honest
+ * teeth (measured: ~0.41 at the paint's segment count, ~0.71 resampled at RES=64,
+ * over 400 seeds — vs the prior sinusoid's ~0.14; a clean separation either side of a
+ * 0.30 floor). The amplitude is SCALE-RELATIVE (a fraction of the rendered span), so
+ * a long word and a short word wobble in proportion. FILTER-FREE — the wander lives
+ * in the control points + the hull width, never a feTurbulence.
+ *
+ * Constants pinned against a 400-seed spacing-CV spike (NOT the seed-overfit autocorr
+ * peak the prior gate keyed — autocorr cannot separate smooth low-frequency value-
+ * noise from a sinusoid at any resolution).
+ */
+/** φ — the per-octave frequency step (mutually irrational → never periodic). */
+export declare const NOISE_PHI = 1.618033988749895;
+/** octave count of the fractal value-noise sum. */
+export declare const NOISE_OCTAVES = 4;
+/** base octave frequency (humps across the unit span); octave k rides F0·φ^k. */
+export declare const NOISE_F0 = 2.5;
+/** displacement amplitude as a fraction of the rendered span (scale-relative). */
+export declare const NOISE_AMP_FRAC = 0.05;
+/** endpoint-only cosine taper width (the ends settle to baseline; the BODY stays irregular). */
+export declare const NOISE_EDGE = 0.12;
+/**
+ * The AMPLITUDE-KNOB reference wobble (BG.W-HANDMARK-PERFECT (c)). The natural-underline
+ * excursion is `span × NOISE_AMP_FRAC × f(wobble)` where `f(wobble) = wobble / NOISE_WOBBLE_REF`
+ * — repurposing the existing Brush `wobble` scalar to drive the centerline amplitude,
+ * decoupling excursion from stroke `weight` (the atlas's published `amplitude` ask, no 13th
+ * scalar). Pinned to the shipped `boil` brush's wobble (1.4) so `f(1.4) = 1` ⇒ the default
+ * boil render is BYTE-IDENTICAL; a consumer lifts excursion by raising `wobble` (or the
+ * explicit `amplitude` prop, which wins). A lower-wobble brush wobbles proportionally less.
+ */
+export declare const NOISE_WOBBLE_REF = 1.4;

package/dist/components/handmark/geometry.d.ts

@@ -0,0 +1,65 @@
+/**
+ * geometry.ts — SEMANTIC shape → pencil-boil centerlines (L1, pure; SPEC §3).
+ * ─────────────────────────────────────────────────────────────────────────────
+ * A shape is a pure mapper: (semantic target) → L1 geometry. The renderer never
+ * knows what it drew — it sees only `Point[]`. Adding a shape = adding one switch
+ * arm; nothing downstream changes (texture + animation are shape-blind). This is
+ * the generality lever (Brush ⟂ Path).
+ *
+ * The marking coordinate space is 0..100 × 0..40, with `preserveAspectRatio="none"`
+ * so the <svg> stretches to the slotted word box (the SPEC §6.2 width-invariance
+ * contract). Two usage modes:
+ *   - text mode (box == null): use the full viewBox (single-line underline/strike)
+ *   - positioned mode (box = {x,y,w,h}): map an explicit rect (circle a datum)
+ *
+ * The circle arm rides pencil-boil's `ellipsePoints` (the hand-circle
+ * overshoot ring — the sole upstream geometry delta this component required).
+ *
+ * THE SEED RECONCILE (BA.W-HANDMARK [S2]): the wobble centerlines are seeded from
+ * the HOUSE prng leaf (`src/composables/glass/procedural/prng.ts` mulberry32 + hashString — the AV.W14
+ * single-source). The family FEEDS pencil-boil a house-derived integer seed; glass-
+ * ui code imports ZERO `mulberry32` from pencil-boil (its internal mulberry32 stays
+ * inside its OWN perturb math). ONE seed leaf, the house identity.
+ */
+import { type WobbleOptions } from "@mkbabb/pencil-boil";
+import { UNDERLINE_GAP, VB_H, VB_W } from "./constants";
+import type { HandShape, MarkBox } from "./types";
+export { naturalUnderlinePoints } from "./noise";
+export { VB_W, VB_H, UNDERLINE_GAP };
+/** A shape maps to one or more centerlines (open polylines) or one closed ring. */
+export interface ShapeGeom {
+    lines: [number, number][][];
+    closed: boolean;
+}
+/**
+ * Semantic shape → { lines, closed } in the marking space (or a positioned box).
+ *
+ * The text-mode underline anchors to a MEASURED baseline: `baselineFrac` is the
+ * slotted word's alphabetic baseline as a fraction of the `.hm` box height (the SFC
+ * measures it via ResizeObserver + `document.fonts.ready`). The underline y is then
+ * `H × (baselineFrac + UNDERLINE_GAP)` — never the old hardcoded `32` (80% of the
+ * box), which struck through tight-leading headings. `null` ⇒ not yet measured: fall
+ * back to the legacy `H − 8` constant so first paint (and jsdom/SSR) still renders a
+ * line, replaced the instant the measure lands.
+ *
+ * `natural` routes the underline through the φ-incommensurate value-noise
+ * `naturalUnderlinePoints` morphology instead of pencil-boil's `wobbleLinePoints`
+ * (the masthead `boil` voice); the default underline keeps the pencil-boil line.
+ *
+ * BG.W-HANDMARK-PERFECT (a) THE ASPECT-CORRECT viewBox — `vbH` is the SFC-measured
+ * marking-space HEIGHT (`VB_W / boxAspect`) for the TEXT-MODE underline/strikethrough/
+ * highlight, so `preserveAspectRatio="none"` scales the wobble SHAPE uniformly (the x
+ * and y scales EQUAL → the humps stop being x-stretched flat). It defaults to `VB_H`,
+ * and is used ONLY for the measured text-mode y — the positioned/box/circle/bracket
+ * path keeps `VB_H` byte-for-byte (it DEPENDS on the none-stretch to fill the datum
+ * rect; the text-mode fix must not touch it).
+ *
+ * BG.W-HANDMARK-PERFECT (c) THE AMPLITUDE KNOB — `ampScale` multiplies the natural-
+ * underline excursion (default 1 ⇒ byte-identical; the SFC derives it from the brush
+ * `wobble` scalar, decoupling excursion from stroke `weight`).
+ */
+export declare function shapeGeom(shape: HandShape, opts: WobbleOptions, box?: MarkBox | null, baselineFrac?: number | null, natural?: boolean, vbH?: number, ampScale?: number): ShapeGeom;
+/** Boil one geometry: re-perturb the CACHED centerlines (anchored → no draw-on pop). */
+export declare function boilLines({ lines, closed }: ShapeGeom, amount: number, seed: number): [number, number][][];
+/** Serialize centerlines → one SVG `d` (multi-line shapes concat with a space). */
+export declare function serialize(lines: [number, number][][], jagged?: boolean): string;

package/dist/components/handmark/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * handmark — the ./handmark barrel (SPEC §11).
+ * ─────────────────────────────────────────────────────────────────────────────
+ * `HandMark` is the sole public component name. The pure L1–L3 functions ship
+ * too — they are framework-free, directly usable in slides decks, D3 charts
+ * (call `shapeGeom`/`ellipsePoints` to ink a path), even canvas.
+ *
+ * The DEFAULT is `pen` (clean ink, grain:0 ⇒ no filter, zero extra dep). The
+ * `@mkbabb/pencil-boil` geometry + `perfect-freehand` body are OPTIONAL PEERS;
+ * only `ribbon:'hull'` (the highlighter) touches the vendored pf core (treeshaken
+ * otherwise).
+ *
+ * BA.W-HANDMARK: `GlassUnderline`/the `/underline` subpath RETIRED onto
+ * `HandMark shape="underline"` (DEC-8 outcome 1; clean break, no alias). The
+ * editorial draw-on underline is `<HandMark shape="underline" animation="draw-on">`;
+ * the natural pencil-boil morphology is the `boil` brush.
+ */
+export { default as HandMark } from "./HandMark.vue";
+export { BRUSHES, resolveBrush, lerpBrush, type Brush, type BrushName, type BlendMode, type TaperSpec, type StampFn, type InkPath, } from "./brush";
+export { shapeGeom, serialize, boilLines, naturalUnderlinePoints, VB_W, VB_H, UNDERLINE_GAP, type ShapeGeom, } from "./geometry";
+export { ink, type SVGFragment } from "./ink";
+export { grainFilter, hasGrain } from "./texture";
+export { getStroke, getStrokePoints, getSvgPathFromStroke, type StrokeOptions, type InputPoint, } from "./freehand";
+export { useHandMark, normalizeProps, type UseHandMarkInput, type HandMarkCore, type BoilClock, } from "./composables/useHandMark";
+export type { HandMarkProps, HandShape, HandAnimation, MarkBox, } from "./types";

package/dist/components/handmark/noise.d.ts

@@ -0,0 +1,30 @@
+/** smootherstep (6t⁵−15t⁴+10t³) — the C² fairing for the value-noise lerp. */
+export declare function smootherstep(t: number): number;
+/**
+ * The boil voice — φ-incommensurate fractal value-noise (the masthead morphology):
+ *
+ *   disp(t) = Σ_{k=0..OCT-1} aₖ · vnoiseₖ(t·fₖ + φₖ)   normalised by Σaₖ
+ *     fₖ = NOISE_F0 · φ^k   (φ mutually-irrational steps → the sum NEVER closes
+ *                            into a period — the non-periodicity mechanism)
+ *     aₖ = (1/φ)^k          (per-octave decay)
+ *     φₖ = seeded per-octave phase (house mulberry32)
+ *     vnoiseₖ = seeded lattice value-noise, smootherstep-faired
+ *
+ * The four atlas axes:
+ *   - amplitude SCALES with the rendered span (`(x2−x1) × NOISE_AMP_FRAC × ampScale`),
+ *     not a viewBox-stretched constant (a long word and a short word wobble in
+ *     proportion); `ampScale` is the BG.W-HANDMARK-PERFECT excursion knob (default 1
+ *     ⇒ byte-identical; the SFC derives it from the brush `wobble` scalar, decoupling
+ *     excursion from stroke `weight`);
+ *   - the hump-to-hump spacing is IRREGULAR (the φ-incommensurate octave sum — the
+ *     honest non-periodicity teeth, spacing-CV ~0.41 at the paint count vs the prior
+ *     sinusoid's ~0.14, over 400 seeds);
+ *   - the non-uniform body gives the pf hull a pressure-taper-friendly point stream;
+ *   - the seed is the HOUSE mulberry32.
+ *
+ * ENDPOINT anchor (NOT a body-wide envelope): a narrow cosine taper at the very ends
+ * only (`NOISE_EDGE`), so the ends settle to baseline (no draw-on pop) while the BODY
+ * amplitude stays irregular hump-to-hump. FILTER-FREE: the wander is in the control
+ * points + the hull width, never a feTurbulence.
+ */
+export declare function naturalUnderlinePoints(x1: number, y: number, x2: number, seed: number, segments: number, ampScale?: number): [number, number][];

package/dist/components/handmark/types.d.ts

@@ -0,0 +1,70 @@
+/**
+ * types.ts — the public API surface (SPEC §6). Pure types, 0 runtime.
+ * ─────────────────────────────────────────────────────────────────────────────
+ * The L5 surface steals rough-notation's *vocabulary* (annotate-style props +
+ * ordered groups), not its code. Every prop has a per-brush default, so the
+ * common call is one tag: <HandMark>who pays in</HandMark>.
+ */
+import type { Brush, BrushName } from "./brush";
+/** A target rect in the 0..100 × 0..40 marking space (positioned mode). */
+export interface MarkBox {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export type HandShape = "underline" | "strikethrough" | "highlight" | "circle" | "box" | "bracket" | "path";
+export type HandAnimation = "none" | "draw-on" | "boil" | "draw-then-boil";
+export interface HandMarkProps {
+    /** 'pen'(default) | preset name | full/partial Brush object. */
+    brush?: BrushName | Partial<Brush>;
+    /** default 'underline'. */
+    shape?: HandShape;
+    /** ANY CSS color. default 'currentColor'. */
+    color?: string;
+    /** procedural variant — deterministic. default 1. */
+    seed?: number;
+    /** spread over the resolved brush (3rd resolution level). */
+    overrides?: Partial<Brush>;
+    /** default 'none' (the static-masthead default). */
+    animation?: HandAnimation;
+    /** draw-on duration. default 800. */
+    drawMs?: number;
+    /** draw-on start delay. default 0. */
+    drawDelayMs?: number;
+    /** draw-on trigger. default 'visible' (IntersectionObserver). */
+    appear?: "mount" | "visible" | "manual";
+    /** boil frame rate. default 8 (≈125ms). */
+    boilFps?: number;
+    /** distinct boil frames. default 3. */
+    boilFrames?: number;
+    /** override brush.roughness. */
+    roughness?: number;
+    /** wobble resolution. default per-brush. */
+    segments?: number;
+    /** angular kinks vs smooth bezier. default false. */
+    jagged?: boolean;
+    /**
+     * NATURAL-underline excursion knob (BG.W-HANDMARK-PERFECT (c)). Multiplies the
+     * scale-relative wobble amplitude (`span × NOISE_AMP_FRAC × amplitude`). Default is
+     * unset ⇒ the amplitude is derived from the brush `wobble` scalar (byte-identical at
+     * the shipped default); an explicit value WINS (e.g. `1.4` for a bolder hand line,
+     * font-proportional). Only the natural/boil underline reads it.
+     */
+    amplitude?: number;
+    /**
+     * NATURAL underline morphology (BA.W-HANDMARK C-2). When true (the masthead
+     * `boil` voice), the underline geometry goes PROCEDURAL — scale-relative
+     * amplitude, an IRREGULAR seeded period count, off the house prng leaf feeding
+     * pencil-boil — instead of pencil-boil's single `wobbleLinePoints` line. The
+     * `boil` brush auto-engages it; the default underline keeps the pencil-boil line.
+     * Ignored on non-underline shapes.
+     */
+    natural?: boolean;
+    /** POSITIONED mode (circle a datum): explicit target rect. */
+    box?: MarkBox;
+    /** shape:'path' escape hatch — arbitrary SVG `d` (wins over shape). */
+    path?: string;
+    /** arbitrary point stream → brush ink. */
+    points?: [number, number][];
+}

package/dist/components/header-ribbon/HeaderRibbon.vue.d.ts

@@ -0,0 +1,31 @@
+import type { HeaderRibbonProps } from "./types";
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {
+    pinned: boolean;
+    toggled: boolean;
+}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    left?: (props: typeof __VLS_1) => any;
+} & {
+    items?: (props: typeof __VLS_3) => any;
+} & {
+    anchor?: (props: typeof __VLS_5) => any;
+} & {
+    items?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HeaderRibbonProps, {
+    isPinned: import("vue").Ref<boolean, boolean>;
+    isExpanded: import("vue").Ref<boolean, boolean>;
+    isVisible: import("vue").ComputedRef<boolean>;
+    isToggled: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderRibbonProps> & Readonly<{}>, {
+    placement: import("./types").HeaderRibbonPlacement;
+    hideTimeoutMs: 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/header-ribbon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HeaderRibbon } from "./HeaderRibbon.vue";
+export type { HeaderRibbonPlacement, HeaderRibbonProps } from "./types";

package/dist/components/header-ribbon/types.d.ts

@@ -0,0 +1,7 @@
+export type HeaderRibbonPlacement = "left" | "right";
+export interface HeaderRibbonProps {
+    /** Side of the viewport the ribbon anchors against. Defaults to `"left"`. */
+    placement?: HeaderRibbonPlacement;
+    /** Milliseconds after the pointer leaves the ribbon before items collapse. Defaults to `2000`. */
+    hideTimeoutMs?: number;
+}

package/dist/components/icon-chip/styles.css

@@ -0,0 +1 @@
+@import "../../styles/glass/glass-atom.css"; @import "../../styles/glass/glass-chip.css"; :root { --icon-chip-glyph-ratio: 2.18; --icon-chip-duotone-fill: 18%; --icon-chip-plate-strength: 25%; --icon-chip-bloom-mix: 35%; --icon-chip-bloom-glow: 28%; --icon-chip-reveal-step: 60ms; } .icon-chip { --_icon-chip-floor: calc( var(--icon-chip-glyph-size, 22px) * var(--icon-chip-glyph-ratio) ); inline-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor)); block-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor)); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill, 9999px); background-color: color-mix( in srgb, var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-plate-strength), transparent ); color: var(--icon-chip-event-color, var(--muted-foreground)); transition: background-color var(--duration-fast, 150ms) var(--ease-standard), box-shadow var(--duration-fast, 150ms) var(--ease-standard), transform var(--duration-fast, 150ms) var(--ease-out); } .icon-chip__glyph { display: block; flex-shrink: 0; } .icon-chip--bare { inline-size: auto; block-size: auto; background-color: transparent; border-radius: 0; } .icon-chip--saturated { --icon-chip-plate-strength: 40%; } .icon-chip--glass { background-color: transparent; } @media (hover: hover) { .icon-chip--glass.icon-chip--bloom:hover { background-color: transparent; } } .icon-chip--duotone[data-duotone] svg, .icon-chip[data-duotone] .icon-chip__glyph { fill: color-mix( in srgb, var(--icon-chip-event-color, var(--muted-foreground)) var(--icon-chip-duotone-fill), transparent ); } @media (hover: hover) { .icon-chip--bloom:hover { background-color: color-mix( in srgb, var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-bloom-mix), transparent ); box-shadow: 0 0 0 0.25rem color-mix( in srgb, var(--icon-chip-event-color, var(--muted-foreground)) var(--icon-chip-bloom-glow), transparent ); transform: scale(var(--icon-chip-bloom-scale, 1.06)); transition: background-color var(--duration-fast, 150ms) var(--ease-standard), box-shadow var(--duration-fast, 150ms) var(--ease-standard), transform var(--spring-smooth-duration) var(--spring-smooth); } .icon-chip--bloom:hover .icon-chip__glyph { stroke-width: 2; } } @media (prefers-reduced-motion: no-preference) { .icon-chip--reveal[data-reveal] { animation: icon-chip-reveal var(--spring-snappy-duration) var(--spring-snappy) both; animation-delay: calc(var(--d, 0) * var(--icon-chip-reveal-step)); } } @keyframes icon-chip-reveal { from { opacity: 0; transform: scale(0.85) translateY(0.25rem); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .icon-chip--bloom:hover { transform: none; } .icon-chip--bloom:hover .icon-chip__glyph { stroke-width: inherit; } .icon-chip--reveal[data-reveal] { animation: none; } }

package/dist/components/index.d.ts

@@ -0,0 +1,35 @@
+export * from "./accordion";
+export * from "./alert";
+export * from "./avatar";
+export * from "./badge";
+export * from "./button";
+export * from "./card";
+export * from "./carousel";
+export * from "./checkbox";
+export * from "./collapsible";
+export * from "./combobox";
+export * from "./command";
+export * from "./data-table";
+export * from "./dialog";
+export * from "./drawer";
+export * from "./dropdown-menu";
+export * from "./focus-scope";
+export * from "./input";
+export * from "./label";
+export * from "./notification";
+export * from "./number-field";
+export * from "./popover";
+export * from "./progress";
+export * from "./radio-group";
+export * from "./select";
+export * from "./separator";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./switch";
+export * from "./table";
+export * from "./tags-input";
+export * from "./textarea";
+export * from "./toast";
+export * from "./toggle";
+export * from "./toggle-group";
+export * from "./tooltip";

package/dist/components/infinite-scroll/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InfiniteScroll } from "./InfiniteScroll.vue";
+export * from "./composables";

package/dist/components/instrument-chassis/styles.css

@@ -0,0 +1 @@
+@layer components { .instrument-chassis { position: relative; display: flex; flex-direction: column; background: var(--glass-curvature-overlay, none), color-mix( in oklab, var(--glass-bg-chassis), var(--phase-color, var(--muted-foreground)) var(--phase-tint-amount, 0%) ); transition: --phase-tint-amount var(--motion-duration-phase-handoff, 600ms) var(--motion-ease-standard); -webkit-backdrop-filter: var(--glass-blur-quiet); backdrop-filter: var(--glass-blur-quiet); border: 1px solid var(--glass-border-wash); border-radius: var(--radius-card); box-shadow: var(--glass-shadow-quiet), inset 0 -0.5px 0 0 rgb(0 0 0 / 0.06); overflow: hidden; --phase-color: var(--muted-foreground); --phase-color-label: var(--muted-foreground); --phase-complete-color: var(--color-gold); --phase-complete-color-label: var(--color-gold-dark, var(--color-gold)); container: chassis / inline-size; } .dark .instrument-chassis { background: var(--glass-curvature-overlay-dark, var(--glass-curvature-overlay, none)), color-mix( in oklab, var(--glass-bg-chassis), var(--phase-color, var(--muted-foreground)) var(--phase-tint-amount, 0%) ); } .instrument-chassis::before { content: ""; position: absolute; inset: 0.5px; border-radius: calc(var(--radius-card) - 0.5px); border: 1px solid var(--surface-tint-4); pointer-events: none; z-index: 1; } .dark .instrument-chassis::before { border-color: var(--surface-tint-6); } .instrument-chassis[data-variant="spine"] { background: var(--glass-spine-vignette); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--glass-spine-border); box-shadow: var(--glass-under-shadow-spine); margin: clamp(0.5rem, 2vw, 1.25rem); } .instrument-chassis[data-variant="spine"]::before { display: none; } .instrument-chassis[data-variant="structure"] { border-color: color-mix(in oklab, var(--color-silver-dark) 55%, transparent); } .instrument-chassis[data-variant="structure"]::before { border-color: color-mix(in oklab, var(--color-silver-light) 60%, transparent); } .dark .instrument-chassis[data-variant="structure"]::before { border-color: color-mix(in oklab, var(--color-silver) 40%, transparent); } .instrument-chassis[data-variant="structure"] { --twin-line-catch: color-mix( in oklab, var(--color-silver-light) 50%, transparent ); --twin-line-shadow: color-mix( in oklab, var(--color-silver-dark) 40%, transparent ); } .instrument-chassis[data-phase="ping"] { --phase-color: var(--chart-ping, var(--viz-chebyshev)); --phase-color-label: var( --chart-ping-label, var(--chart-ping, var(--viz-chebyshev)) ); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="download"] { --phase-color: var(--chart-download, var(--viz-fourier)); --phase-color-label: var( --chart-download-label, var(--chart-download, var(--viz-fourier)) ); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="upload"] { --phase-color: var(--chart-upload, var(--viz-amber)); --phase-color-label: var( --chart-upload-label, var(--chart-upload, var(--viz-amber)) ); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="jitter"] { --phase-color: var(--chart-jitter, var(--viz-legendre)); --phase-color-label: var( --chart-jitter-label, var(--chart-jitter, var(--viz-legendre)) ); --phase-tint-amount: var(--phase-tint-peak); } .instrument-chassis[data-phase="complete"] { --phase-color: var(--phase-complete-color); --phase-color-label: var(--phase-complete-color-label); --phase-tint-amount: var(--phase-tint-peak); } @media (prefers-reduced-motion: reduce) { .instrument-chassis { transition: none; } } .instrument-strip { position: relative; display: flex; align-items: center; gap: var(--instrument-strip-gap, 0.75rem); padding: var(--instrument-strip-padding-block, 0.875rem) var(--instrument-strip-padding-inline, 1.25rem); z-index: 2; } .instrument-dial { position: relative; display: grid; grid-template-columns: var( --instrument-dial-columns, minmax(0, 1.2fr) 1px minmax(0, 1fr) ); align-items: center; gap: var(--instrument-dial-gap, 1.5rem); padding: var(--instrument-dial-padding-block, 1.5rem) var(--instrument-dial-padding-inline, 1.5rem); z-index: 2; } .instrument-control { position: relative; display: flex; align-items: center; gap: var(--instrument-control-gap, 0.5rem); padding: var(--instrument-control-padding-block, 0.875rem) var(--instrument-control-padding-inline, 1.25rem); z-index: 2; } .chassis-divider { @apply twin-line-divider; flex-shrink: 0; position: relative; background: transparent; z-index: 2; pointer-events: none; } .chassis-divider--horizontal { display: flex; flex-direction: column; height: 2px; width: 100%; } .chassis-divider--vertical { display: flex; flex-direction: row; width: 2px; height: var(--chassis-divider-vertical-height, 70%); align-self: center; justify-self: center; } .bezel-line { display: block; flex-shrink: 0; } .chassis-divider--horizontal .bezel-line { height: 1px; width: 100%; } .chassis-divider--vertical .bezel-line { width: 1px; height: 100%; } .bezel-line.top { background: var(--twin-line-catch); } .bezel-line.bottom { background: var(--twin-line-shadow); } .instrument-chassis .dial-divider { align-self: stretch; } @container chassis (max-width: 44.9375rem) { .instrument-chassis .instrument-dial { grid-template-columns: 1fr; grid-template-rows: var(--instrument-dial-meter-reserve-mobile, minmax(0, 1fr)) auto auto; min-height: var(--instrument-dial-min-height-mobile, 24rem); gap: var(--instrument-dial-gap-mobile, 1.5rem); } .instrument-chassis .instrument-dial .dial-divider, .instrument-chassis .instrument-dial .chassis-divider--vertical { flex-direction: column; width: 70%; height: 2px; margin-inline: auto; } .instrument-chassis .instrument-dial .dial-divider .bezel-line, .instrument-chassis .instrument-dial .chassis-divider--vertical .bezel-line { width: 100%; height: 1px; } } @container chassis (min-width: 45rem) { .instrument-chassis .instrument-dial { min-block-size: var( --instrument-dial-min-block-size-desktop, var(--chassis-max-block-size) ); } } }

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

@@ -0,0 +1,118 @@
+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.
+ *
+ * AZ.W-BLOB-REDRESS — `hideLabel` VISUALLY hides the field's own label (it
+ * renders `sr-only` instead of `.labeled-field-label`) while KEEPING it in the
+ * DOM, so the `for`/`id`/`aria-labelledby` control↔label association — the
+ * Slider thumb's `aria-labelledby`, the Select trigger's `for` — stays intact
+ * and the control is still accessibly named. The visible human label is then
+ * supplied by an enclosing chrome row (a `<ConfiguratorRow label>`). This is
+ * the canonical fix for the double-label leak: a `<ConfiguratorRow label="X">`
+ * wrapping a `<LabeledSlider label="x">` rendered BOTH labels (the human one +
+ * the raw config key); the inner control passes `hide-label` so ONE visible
+ * human label remains, the raw key demotes to the row's mono `name` token, and
+ * a11y is preserved. The tooltip is suppressed when hidden (the row owns the
+ * affordance). NO effect on `LabeledField` used standalone (default `false`).
+ *
+ * AQ.W4 §W4.5 — `required` threads a `aria-hidden` asterisk onto the label
+ * (the `required` attr on the slotted control is the semantic carrier). The
+ * `error` slot renders an error-message region that the W3.1c
+ * `:has(:user-invalid)` group rule reveals; it carries `aria-live="polite"`
+ * so the message is announced when shown. The region's id is exposed as the
+ * default slot's `errorId` slot-prop so the slotted control can bind
+ * `aria-errormessage="errorId"` (the four wrappers auto-wire it; a raw
+ * `<LabeledField>` slot binds it manually). It is polite by default; a form
+ * with one summary live region can set `errorLive="off"` to avoid duplicate
+ * submit announcements.
+ *
+ * # LabeledField vs ConfiguratorRow — recorded divergence (AZ.W-METRIC-UNIFY §B)
+ *
+ * Both are "label (+ meta) above/beside a slotted control", but they are NOT
+ * interchangeable — they emphasize DIFFERENT features:
+ *  - LabeledField (this) — for FORM fields. Carries the `for`/`id` label↔control
+ *    a11y wiring (`controlId`/`labelId`/`errorId`), the `tooltip`, the `required`
+ *    asterisk, and the `aria-live` `error` region.
+ *  - ConfiguratorRow — for TOKEN / PRESET controls. Carries the token-`name`
+ *    reference, the opt-in `reset` affordance (`canReset`), and the four-rung
+ *    `density` axis. No a11y for/id wiring.
+ *
+ * Reach for LabeledField for accessible form inputs; reach for ConfiguratorRow
+ * inside a `<Configurator>` for token sliders/selects. The divergence is recorded
+ * (NOT a forced merge — no ≥2-consumer shared-chassis need surfaced) in
+ * `docs/precepts/design-idioms.md §9`, alongside the `cn`/`focus-ring` keeps.
+ */
+type __VLS_Props = {
+    label: string;
+    tooltip?: string;
+    labelClass?: HTMLAttributes["class"];
+    required?: boolean;
+    /**
+     * Controls whether this field's error announces itself. A form-level
+     * summary can set this to `off` so one submit does not create competing
+     * live-region announcements.
+     */
+    errorLive?: "off" | "polite" | "assertive";
+    /**
+     * AZ.W-BLOB-REDRESS — render the field's own label `sr-only` (kept in the
+     * DOM for the control↔label a11y association) instead of visibly. Use when
+     * an enclosing chrome row already supplies the visible human label (a
+     * `<ConfiguratorRow label>`), so the inner control does not leak a second
+     * (often raw-config-key) label. Default `false` (standalone behavior).
+     */
+    hideLabel?: boolean;
+    /**
+     * BC.W-CONTROL-SMOOTH move C (kf-G3) — lay the field on the HORIZONTAL axis
+     * (label beside control, not above) for dense inline forms. ADDITIVE +
+     * default `false`: a bare `<LabeledField>` is byte-identical to HEAD (the
+     * stacked label-over-control layout). Pairs with the `#action` slot — a
+     * horizontal labeled control carrying a trailing action affordance is the
+     * REQ-sec20 horizontal-action case the kf-G3 row booked.
+     */
+    horizontal?: boolean;
+};
+declare var __VLS_7: {
+    errorId: string;
+    controlId: string;
+    labelledBy: string;
+}, __VLS_9: {
+    controlId: string;
+}, __VLS_11: {
+    errorId: string;
+    controlId: string;
+    labelledBy: string;
+}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    action?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    error?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    errorLive: "off" | "polite" | "assertive";
+}, {}, {}, {}, 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/labeled-field/LabeledInput.vue.d.ts

@@ -0,0 +1,38 @@
+import { type InputHTMLAttributes } from "vue";
+type __VLS_Props = {
+    modelValue: string | number;
+    label: string;
+    tooltip?: string;
+    labelClass?: string;
+    inputClass?: string;
+    type?: string;
+    autocomplete?: InputHTMLAttributes["autocomplete"];
+    inputmode?: InputHTMLAttributes["inputmode"];
+    enterkeyhint?: InputHTMLAttributes["enterkeyhint"];
+    pattern?: InputHTMLAttributes["pattern"];
+    placeholder?: InputHTMLAttributes["placeholder"];
+    /**
+     * AQ.W4 §W4.5 — mark the field required. Threads the `aria-hidden`
+     * asterisk onto the label AND sets the native `required` attribute on the
+     * inner `<Input>` (the semantic carrier that drives `:user-invalid`).
+     */
+    required?: boolean;
+    errorLive?: "off" | "polite" | "assertive";
+};
+declare var __VLS_17: {};
+type __VLS_Slots = {} & {
+    error?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};