@mkbabb/glass-ui 4.0.0 → 4.1.0

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

@@ -67,16 +67,35 @@ type __VLS_Props = {
      * (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: {};
+}, __VLS_9: {
+    controlId: string;
+}, __VLS_11: {
+    errorId: string;
+    controlId: string;
+    labelledBy: string;
+}, __VLS_13: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 } & {
-    error?: (props: typeof __VLS_9) => 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -72,6 +72,20 @@ export interface MetricRowProps {
      * this to their active-row gating (e.g. the metric being sampled).
      */
     active?: boolean;
+    /**
+     * BC.W-CONTROL-CUSTOM (CP1, the speedtest-AX `data-protagonist` fold) —
+     * marks this row as the ONE focal/protagonist metric per surface. When
+     * `true`, the value lifts to the emphasis register (the heavier
+     * `--metric-row-value-weight-emphasis` rung) and a `data-protagonist`
+     * attribute lands on the row so a consumer can re-tint the focal metric.
+     *
+     * This is the ONE focal emphasis event per surface (the W-SUFFUSE
+     * one-color-event proportion) — exactly one row per <MetricStack> should
+     * be the protagonist. The magnitude stays a `--metric-row-*` token read
+     * with a fallback, so a `:root`/per-row override of the emphasis weight
+     * cascades. A bare (`protagonist`-unset) row is byte-identical.
+     */
+    protagonist?: boolean;
     class?: HTMLAttributes["class"];
 }
 declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
@@ -94,6 +108,7 @@ declare const __VLS_base: import("vue").DefineComponent<MetricRowProps, {}, {},
     iconSize: number;
     digitCount: number;
     colorTinted: boolean;
+    protagonist: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -77,8 +77,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MetricStackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MetricStackProps> & Readonly<{}>, {
-    as: string | Component;
     containerName: string;
+    as: string | Component;
     rows: number;
     register: "audacious" | "result";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/custom/pager-dots/PagerDots.vue.d.ts

@@ -12,6 +12,14 @@ export interface PagerDotsProps {
     windowFit?: number;
     /** Encapsulate the rail in the glass pager pill chassis. Default true. */
     ring?: boolean;
+    /**
+     * The ARIA register. `"tabs"` (default, byte-identical) is the carousel
+     * panel-nav register (`role="tablist"`/`role="tab"` + `aria-selected`);
+     * `"group"` is the full-viewport deck PRESENTATION register
+     * (`role="group"`/`aria-current`) the `<DeckPager>` selects. ONE windowing
+     * oracle, two aria registers — the `pagerWindow` math is NEVER re-forked.
+     */
+    pattern?: "tabs" | "group";
     /** Accessible name for the rail group. */
     ariaLabel?: string;
     /** Additional classes for the rail root. */
@@ -32,6 +40,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:active"?: ((value: number) => any) | undefined;
 }>, {
     orientation: "horizontal" | "vertical";
+    pattern: "tabs" | "group";
     ariaLabel: string;
     ring: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/custom/pager-dots/index.d.ts

@@ -1,2 +1,4 @@
 export { default as PagerDots } from "./PagerDots.vue";
 export type { PagerDotsProps } from "./PagerDots.vue";
+export { pagerWindow } from "./pagerWindow";
+export type { PagerWindow } from "./pagerWindow";

package/dist/components/custom/pager-dots/pagerWindow.d.ts

@@ -0,0 +1,9 @@
+export interface PagerWindow {
+    /** The 0-based slide indices to render as dots. */
+    shown: number[];
+    /** The window is clipped at the start (a dimmed leading edge dot). */
+    clippedStart: boolean;
+    /** The window is clipped at the end (a dimmed trailing edge dot). */
+    clippedEnd: boolean;
+}
+export declare function pagerWindow(total: number, activeIndex: number, fit: number): PagerWindow;

package/dist/components/custom/paper-grid/PaperGrid.vue.d.ts

@@ -0,0 +1,42 @@
+import type { PaperGridConfig } from "./constants";
+/**
+ * PaperGrid — a liquid AA-grid: evenly-spaced LARGER lines on a slowly breathing
+ * curl-flow sheet.
+ *
+ * A calm engineering-graph-paper grid (evenly-spaced, LARGE cells, a crisp fine rule with
+ * a bolder major rule every 5 cells) drawn on a slowly breathing liquid sheet — adjacent
+ * lines bow and flow TOGETHER as if the grid is ruled on a gently rippling pond, never a
+ * per-line jitter. WebGPU-FIRST: a pure fullscreen fragment pass (the aurora/concentric
+ * shape-class) computes the grid at a curl-warped coordinate per pixel via the Ben Golus
+ * derivative-AA distance function (constant device-pixel-crisp lines, the CSS-blur kill),
+ * the Iñigo Quílez domain warp (the "liquid"), and the Bridson divergence-free curl flow
+ * (WHY it's liquid not noise). It composes `usePaperGrid` → the `createGpuSubstrate` picker
+ * over the ONE canvas lifecycle leaf (offscreen-pause, live-PRM freeze, consumer-owned DPR)
+ * — it never bootstraps its own context.
+ *
+ * The DEFAULT line ink is the warm-cream `--foreground` library identity (resolved live at
+ * mount); the demo themes it through a PRESET (presets-in-consumers — never a library
+ * token). The grid suffuses over the page (transparent ground) — teal-on-navy is gone.
+ */
+type __VLS_Props = {
+    /** The full author schema (the studio's `useConfiguratorState` model). */
+    config?: PaperGridConfig;
+    /**
+     * The declarative WCAG-2.2.2 pause seam. `v-model:paused` parks the render loop
+     * (the substrate's `manual` suspend) when `true`. Wire `<DockBackgroundToggle>`'s
+     * `@update:paused` to this `v-model`.
+     */
+    paused?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    pause: () => void;
+    resume: () => void;
+    wake: () => void;
+    renderAt: (timeSec: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:paused": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:paused"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/paper-grid/composables/paperGrid.d.ts

@@ -0,0 +1,90 @@
+/** A 2-vector. */
+export interface Vec2 {
+    x: number;
+    y: number;
+}
+/** The curl central-difference epsilon (matches `flow.glsl.ts` / `flow.wgsl.ts`). */
+export declare const CURL_EPS = 0.012;
+/** A 3-octave scalar fbm potential (the host noise basis the curl operator wraps). */
+export declare function potentialFBM(p: Vec2): number;
+/** The 2D curl of the scalar fbm potential (the JS twin of `curlFBM`). */
+export declare function curlFBM(p: Vec2): Vec2;
+/**
+ * The IQ domain warp displacement at `g` (in grid space) at time `t`. TWO counter-flowing
+ * curl terms at different scales/speeds (Alex Harri counter-flow — never visibly loops):
+ *
+ *   g += curlFBM(g·warpScale  + t·warpSpeed ) · amplitude
+ *   g += curlFBM(g·warpScale2 − t·warpSpeed2) · (amplitude·0.5)
+ *
+ * Returns the warp DISPLACEMENT (the caller adds it onto `g`). A SHALLOW warp (one level,
+ * LOW amplitude, LOW spatial frequency) keeps the lines a clearly-readable grid — the
+ * inverse-coherence target (LARGE structures from LOW spatial frequency).
+ */
+export declare function curlWarp(g: Vec2, t: number, warpScale: number, warpSpeed: number, warpScale2: number, warpSpeed2: number, amplitude: number): Vec2;
+/**
+ * The LOCAL cursor-bulge displacement at `g` (grid space). A Gaussian falloff about
+ * `cursor` presses the grid AWAY from (repel, strength > 0) or TOWARD (attract, strength
+ * < 0) the cursor inside `radius`, coherent everywhere else (the iOS-control-centre feel):
+ *
+ *   bulge = strength · exp(−d²/(2·radius²)); g += normalize(g−cursor) · bulge
+ *
+ * Returns the bulge DISPLACEMENT (the caller adds it onto `g`). The sign of `strength`
+ * picks repel (+) vs attract (−).
+ */
+export declare function cursorBulge(g: Vec2, cursor: Vec2, strength: number, radius: number): Vec2;
+/**
+ * The Ben Golus derivative-AA grid line coverage at `g` (grid space). `targetWidth` is the
+ * desired line half-width in GRID UNITS (the caller passes `lineWidthPx / minorPitchPx` so
+ * the line is N device-pixels wide); `uvDeriv` is the per-axis screen-space derivative of
+ * `g` (in the shaders `length(vec2(dFdx(g), dFdy(g)))`; in JS the caller passes it
+ * analytically so the path is reproducible). Returns line coverage [0..1].
+ *
+ * The Golus pipeline (transcribed by the WGSL/GLSL EXACTLY):
+ *   gridUV   = 1 − |fract(g)·2 − 1|                 (triangle wave: 0 at line, 1 at center)
+ *   drawW    = clamp(targetWidth, uvDeriv, 0.5)
+ *   lineAA   = uvDeriv·1.5
+ *   grid2    = smoothstep(drawW+lineAA, drawW−lineAA, gridUV)
+ *   grid2   *= clamp(targetWidth/drawW, 0, 1)        (preserve thin-line intensity)
+ *   grid2    = mix(grid2, targetWidth, clamp(uvDeriv·2−1, 0, 1))   (Moiré suppression)
+ *   line     = max(grid2.x, grid2.y)
+ */
+export declare function gridCoverage(g: Vec2, targetWidth: number, uvDeriv: Vec2): number;
+/**
+ * The complete paper-grid sample at a domain `uv` (the round-trip anchor). Composes the
+ * warp + the bulge + the two-tier Golus coverage EXACTLY as the WGSL/GLSL `fs_main` does,
+ * returning the premultiplied-alpha (the page reads through the troughs). `uvDeriv` is the
+ * FIXED analytic per-axis derivative (JS has no fragment derivatives); the shaders compute
+ * it from `dpdx`/`dpdy`. Returns `{ line, alpha }` — the line coverage + the global alpha.
+ */
+export interface PaperGridSampleParams {
+    /** The grid scale (view / minorPitch → LARGER cells = smaller scale). */
+    gridScale: number;
+    warpScale: number;
+    warpSpeed: number;
+    warpScale2: number;
+    warpSpeed2: number;
+    amplitude: number;
+    /** The cursor in GRID space. */
+    cursor: Vec2;
+    bulgeStrength: number;
+    bulgeRadius: number;
+    /** +1 repel, −1 attract. */
+    bulgeMode: number;
+    /** Golus target half-widths in grid units (minor + major). */
+    targetWidth: number;
+    targetWidthMajor: number;
+    /** How many minor cells per major rule. */
+    majorEvery: number;
+    minorAlpha: number;
+    majorAlpha: number;
+    /** The GLOBAL subtlety knob (suffusion → tiny). */
+    fieldAlpha: number;
+    /** The FIXED per-axis derivative (the JS round-trip; shaders use dpdx/dpdy). */
+    uvDeriv: Vec2;
+}
+export declare function samplePaperGrid(uv: Vec2, t: number, p: PaperGridSampleParams): {
+    line: number;
+    alpha: number;
+};
+/** The grid scale from the view + minor pitch (LARGER cells = smaller scale). */
+export declare function gridScaleFor(viewExtentPx: number, minorPitchPx: number): number;

package/dist/components/custom/paper-grid/composables/paperGridGLSetup.d.ts

@@ -0,0 +1,16 @@
+import type { WebGLCanvasFrame } from "../../../../composables/glass/webgl/useWebGLCanvas";
+import type { PaperGridConfig } from "../constants";
+import { type Vec2 } from "./paperGrid";
+export interface PaperGridGLSetupDeps {
+    canvas: HTMLCanvasElement;
+    config: PaperGridConfig;
+    getCursor: () => Vec2;
+    shouldContinue: () => boolean;
+    /**
+     * The per-frame pointer hook — usePaperGrid advances the shared pointer field + derives
+     * the transient cursor here (the no-own-rAF discipline). ZERO own rAF.
+     */
+    onFrame?: (timeSec: number) => void;
+}
+/** Build the `setupGL(gl)` callback the `createGpuSubstrate` WebGL2 path invokes. */
+export declare function createPaperGridGLSetup(deps: PaperGridGLSetupDeps): (gl: WebGL2RenderingContext) => WebGLCanvasFrame;

package/dist/components/custom/paper-grid/composables/paperGridWGPUSetup.d.ts

@@ -0,0 +1,19 @@
+import type { WebGPUCanvasFrame } from "../../../../composables/glass/webgpu/useWebGPUCanvas";
+import type { PaperGridConfig } from "../constants";
+import type { Vec2 } from "./paperGrid";
+export interface PaperGridWGPUSetupDeps {
+    canvas: HTMLCanvasElement;
+    config: PaperGridConfig;
+    /** The transient pointer cursor in GRID space — re-read each frame (the pointer bulge). */
+    getCursor: () => Vec2;
+    /** Demand-gate (the renderer's quiescence layer — substrate-agnostic). */
+    shouldContinue: () => boolean;
+    /**
+     * The per-frame pointer hook — usePaperGrid advances the shared `usePointerVelocityField`
+     * here (the no-own-rAF discipline: the renderer's frame loop FEEDS `tick(delta)`) and
+     * derives the transient cursor. ZERO own rAF.
+     */
+    onFrame?: (timeSec: number) => void;
+}
+/** Build the paper-grid `setupWGPU(device, context, format)` callback. */
+export declare function createPaperGridWGPUSetup(deps: PaperGridWGPUSetupDeps): (device: GPUDevice, context: GPUCanvasContext, format: GPUTextureFormat) => WebGPUCanvasFrame;

package/dist/components/custom/paper-grid/composables/uniformBridgeWGPU.d.ts

@@ -0,0 +1,16 @@
+import type { PaperGridConfig } from "../constants";
+import type { Vec2 } from "./paperGrid";
+export declare const PAPER_GRID_UNIFORM_BYTES = 144;
+export interface PaperGridUniformScratch {
+    buffer: ArrayBuffer;
+    f32: Float32Array;
+}
+export declare function createPaperGridScratch(): PaperGridUniformScratch;
+/**
+ * Pack the paper-grid uniforms in place. `viewExtentPx` is the canvas backing-store extent
+ * the grid scale derives from (so the cell pitch is honest in device px); `cursor` is the
+ * transient pointer in GRID space (the renderer derives it from `usePointerVelocityField`);
+ * `aspect` corrects the domain x. The line ink resolves the warm `--foreground` identity
+ * (the demo themes it via a preset, never a token edit).
+ */
+export declare function packPaperGridUniforms(scratch: PaperGridUniformScratch, config: PaperGridConfig, timeSec: number, aspect: number, viewExtentPx: number, cursor: Vec2): PaperGridUniformScratch;

package/dist/components/custom/paper-grid/composables/usePaperGrid.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from "vue";
+import { type GpuBackend } from "../../../../composables/glass/webgpu/useGpuSubstrate";
+import type { PaperGridConfig } from "../constants";
+export interface UsePaperGridOptions {
+    config: PaperGridConfig;
+    /** `"capture"` → renderAt-only (the deterministic π capture path). Default `"live"`. */
+    mode?: "live" | "capture";
+}
+/** The uniform handle a consumer wires its lifecycle against (backend-agnostic). */
+export interface PaperGridHandle {
+    /** The resolved backend (`"webgpu"` where supported, else the WebGL2 GLSL fallback). */
+    readonly backend: GpuBackend;
+    /** Park the loop (the WCAG-2.2.2 pause seam — `DockBackgroundToggle` wires this). */
+    pause: () => void;
+    /** Re-arm the loop. */
+    resume: () => void;
+    /** Re-arm a parked loop on demand (a pointer that re-introduced motion). */
+    wake: () => void;
+    /** Draw one frame out-of-loop (capture / thumbnail). */
+    renderAt: (timeSec: number) => void;
+    /** The live `prefers-reduced-motion: reduce` state. */
+    readonly reducedMotion: boolean;
+    /** Tear down the renderer + release GPU/GL resources. */
+    dispose: () => void;
+}
+/**
+ * Mount the paper-grid renderer on `canvasRef`. The WebGPU primary + the WebGL2 fallback are
+ * BOTH pure fullscreen fragment passes evaluating the SAME liquid grid (the ONE math source
+ * `paperGrid.ts`), so the picker is the only seam. Returns the uniform lifecycle handle.
+ */
+export declare function usePaperGrid(canvasRef: Ref<HTMLCanvasElement | null>, options: UsePaperGridOptions): PaperGridHandle;

package/dist/components/custom/paper-grid/constants.d.ts

@@ -0,0 +1,57 @@
+import type { OklchStop } from "../../../composables/color";
+/** The WGSL `#define` cap mirror (the grid is a fullscreen fragment — no array caps needed). */
+export declare const PAPER_GRID_MAX_MAJOR_EVERY = 16;
+/**
+ * The full author schema — the studio's `useConfiguratorState` model (commit-on-write — a
+ * single surface). Every field is a tunable the demo configurator drives; the SFC resolves
+ * it into the uniform table.
+ */
+export interface PaperGridConfig {
+    /** The grid cell pitch in CSS px — LARGER = bigger cells (the user's "LARGER"). */
+    cellSize: number;
+    /** How many minor cells per major rule (the kf `--graph-major` 5rem/1rem ratio). */
+    majorEvery: number;
+    /** Minor line alpha — the calm hairline (≈ kf 3%). */
+    minorAlpha: number;
+    /** Major rule alpha — the bolder tier (kf 11%, above the 10% floor). */
+    majorAlpha: number;
+    /** Line width in device-px — one crisp pixel via Golus AA. */
+    lineWidth: number;
+    /** Wave amplitude in CELL units — how far the lines bow (the liquid; subtle = "felt, not loud"). */
+    waveAmplitude: number;
+    /** Wave spatial frequency (λ multiple) — LOW = the whole sheet bows together (coherent, not noise). */
+    waveScale: number;
+    /** The slow warp drift (ω-scale). */
+    waveSpeed: number;
+    /** The GLOBAL subtlety knob — 1 demo, ~0.12 suffusion (the site-wide background). */
+    fieldAlpha: number;
+    /** How far the cursor pushes the grid (the local bulge). */
+    bulgeStrength: number;
+    /** The Gaussian falloff radius in CELL units. */
+    bulgeRadius: number;
+    /** Push grid away (repel) or toward (attract) the cursor. */
+    bulgeMode: "repel" | "attract";
+    /** The line ink (the warm `--foreground` identity by default — NEVER teal-on-navy). */
+    lineColor: OklchStop;
+    /** The ground (default transparent so it suffuses over the page). */
+    background: OklchStop | "transparent";
+    /** Pointer bulge (§4/§8) — on (demo) / off (suffusion). */
+    interactive: boolean;
+    /** ONE static frame then park under `prefers-reduced-motion: reduce`. */
+    respectReducedMotion: boolean;
+}
+/**
+ * The warm-cream identity line ink (the library default — NOT a themed hue). A warm-amber
+ * ink in the `--foreground` family (OKLab hue ~62, the BA.W-NO-GRAY warm identity) so the
+ * grid reads as warm ink over the page; the SFC resolves the live `--foreground` token at
+ * mount, this stop is the SSR/no-token fallback identity. A consumer (the demo) themes it
+ * through a PRESET, never a token edit. NEVER teal/navy (h in [180,280] reds P5).
+ */
+export declare const WARM_IDENTITY_INK: OklchStop;
+/**
+ * The shipped warm-identity default config — evenly-spaced, LARGE 64px cells, a crisp fine
+ * rule with a bolder major rule every 5 cells, on a slowly breathing liquid curl-flow sheet
+ * (research/viz/paper-grid.md §6). SUBTLE + LARGE + evenly-spaced — the user's binding
+ * aesthetic. `fieldAlpha: 1` is the demo lead; the suffusion preset drops it to ~0.12.
+ */
+export declare const DEFAULT_PAPER_GRID_CONFIG: PaperGridConfig;

package/dist/components/custom/paper-grid/index.d.ts

@@ -0,0 +1,5 @@
+export { default as PaperGrid } from "./PaperGrid.vue";
+export { usePaperGrid, type PaperGridHandle, type UsePaperGridOptions, } from "./composables/usePaperGrid";
+export { type PaperGridConfig, DEFAULT_PAPER_GRID_CONFIG, WARM_IDENTITY_INK, PAPER_GRID_MAX_MAJOR_EVERY, } from "./constants";
+export { type Vec2, type PaperGridSampleParams, potentialFBM, curlFBM, curlWarp, cursorBulge, gridCoverage, samplePaperGrid, gridScaleFor, CURL_EPS, } from "./composables/paperGrid";
+export type { OklchStop } from "../../../composables/color";

package/dist/components/custom/paper-grid/shaders/paper-grid.glsl.d.ts

@@ -0,0 +1,4 @@
+/** The full-screen-triangle vertex shader (the substrate's standard fullscreen pass). */
+export declare const PAPER_GRID_VERT_GLSL = "#version 300 es\nprecision highp float;\nin vec2 aPosition;\nout vec2 vUv;\nvoid main() {\n  vUv = aPosition;            // [-1,1]\u00B2 domain\n  gl_Position = vec4(aPosition, 0.0, 1.0);\n}";
+/** The paper-grid fragment source — the liquid AA-grid (the same field as the WGSL primary). */
+export declare const PAPER_GRID_FRAG_GLSL = "#version 300 es\nprecision highp float;\n\n#define TAU 6.283185307179586\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform float uTime;\nuniform float uGridScale;\nuniform float uMajorEvery;\nuniform float uAspect;\nuniform vec4  uWarp;          // (warpScale, warpSpeed, warpScale2, warpSpeed2)\nuniform float uAmplitude;\nuniform vec4  uGrid;          // (targetWidth, targetWidthMajor, minorAlpha, majorAlpha)\nuniform float uFieldAlpha;\nuniform float uHasBackground;\nuniform vec4  uCursor;        // (cursorX, cursorY, bulgeStrength, bulgeRadius)\nuniform float uBulgeMode;     // +1 repel / \u22121 attract\nuniform vec3  uLineColor;     // linear-sRGB ink\nuniform vec3  uBg;            // linear-sRGB themed bg\n\n\nfloat srgbToLinearCh(float c) {\n    return c <= 0.04045 ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4);\n}\nvec3 srgbToLinear(vec3 c) {\n    return vec3(srgbToLinearCh(c.r), srgbToLinearCh(c.g), srgbToLinearCh(c.b));\n}\n\nfloat linearToSrgbCh(float c) {\n    return c <= 0.0031308 ? c * 12.92 : 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\nvec3 linearToSrgb(vec3 c) {\n    return vec3(linearToSrgbCh(c.r), linearToSrgbCh(c.g), linearToSrgbCh(c.b));\n}\n\n// The shared divergence-free 2D-curl operator (flow.glsl.ts) \u2014 the prototype declares\n// potentialFBM; the host defines its BODY below the splice (GLSL forward-declaration).\n\nconst float CURL_EPS = 0.012;\n\n// Scalar fbm potential psi \u2014 the host's noise basis, wrapped so the curl operator is\n// basis-agnostic. A host carrying its own fbm defines this as: return fbm(p);\nfloat potentialFBM(vec2 p);\n\n// \u2207\u00D7\u03C8 in 2D \u2014 the divergence-free flow direction. Central finite differences of the\n// scalar potential give the partials; the cross-pairing (\u2202y, \u2212\u2202x) is the 2D curl.\nvec2 curlFBM(vec2 p) {\n  float dx = potentialFBM(p + vec2(CURL_EPS, 0.0)) - potentialFBM(p - vec2(CURL_EPS, 0.0));\n  float dy = potentialFBM(p + vec2(0.0, CURL_EPS)) - potentialFBM(p - vec2(0.0, CURL_EPS));\n  // \u03C8-gradient is (dx, dy)/(2\u00B7eps); the curl rotates it 90\u00B0: (\u2202\u03C8/\u2202y, \u2212\u2202\u03C8/\u2202x).\n  vec2 g = vec2(dx, dy) / (2.0 * CURL_EPS);\n  return vec2(g.y, -g.x);\n}\n\n\n// \u2500\u2500 The host noise basis (transcribes paperGrid.ts hash21/valueNoise/potentialFBM) \u2500\u2500\nfloat hash21(float x, float y) {\n  float px = fract(x * 0.1031);\n  float py = fract(y * 0.1031);\n  float pz = fract(x * 0.1031);\n  float d = px * (py + 33.33) + py * (pz + 33.33) + pz * (px + 33.33);\n  px += d;\n  py += d;\n  pz += d;\n  return fract((px + py) * pz);\n}\n\nfloat valueNoise(float x, float y) {\n  float ix = floor(x);\n  float iy = floor(y);\n  float fx = x - ix;\n  float fy = y - iy;\n  float ux = fx * fx * fx * (fx * (fx * 6.0 - 15.0) + 10.0);\n  float uy = fy * fy * fy * (fy * (fy * 6.0 - 15.0) + 10.0);\n  float a = hash21(ix, iy);\n  float b = hash21(ix + 1.0, iy);\n  float c = hash21(ix, iy + 1.0);\n  float d2 = hash21(ix + 1.0, iy + 1.0);\n  return mix(mix(a, b, ux), mix(c, d2, ux), uy);\n}\n\n// The 3-octave scalar fbm potential \u2014 the curl chunk's forward-declared potentialFBM body.\nfloat potentialFBM(vec2 p) {\n  float v = 0.0;\n  float amp = 0.5;\n  float freq = 1.0;\n  float px = p.x;\n  float py = p.y;\n  for (int i = 0; i < 3; i++) {\n    v += amp * valueNoise(px * freq, py * freq);\n    // FBM_ROT mat2(0.8, 0.6, -0.6, 0.8) \u2014 same rotation as the shared chunk.\n    float rx = 0.8 * px - 0.6 * py;\n    float ry = 0.6 * px + 0.8 * py;\n    px = rx;\n    py = ry;\n    freq *= 2.0;\n    amp *= 0.5;\n  }\n  return v;\n}\n\n// \u2500\u2500 \u00A73 The global curl-flow domain warp (transcribes paperGrid.ts curlWarp) \u2500\u2500\nvec2 curlWarp(vec2 g, float t) {\n  float warpScale = uWarp.x;\n  float warpSpeed = uWarp.y;\n  float warpScale2 = uWarp.z;\n  float warpSpeed2 = uWarp.w;\n  vec2 a = curlFBM(vec2(g.x * warpScale + t * warpSpeed, g.y * warpScale + t * warpSpeed));\n  vec2 b = curlFBM(vec2(g.x * warpScale2 - t * warpSpeed2, g.y * warpScale2 - t * warpSpeed2));\n  return vec2(a.x * uAmplitude + b.x * uAmplitude * 0.5, a.y * uAmplitude + b.y * uAmplitude * 0.5);\n}\n\n// \u2500\u2500 \u00A74 The local pointer bulge (transcribes paperGrid.ts cursorBulge) \u2500\u2500\nvec2 cursorBulge(vec2 g) {\n  vec2 cursor = uCursor.xy;\n  float strength = uCursor.z * uBulgeMode;  // bulgeStrength \u00D7 bulgeMode (+repel / \u2212attract)\n  float radius = max(uCursor.w, 1e-4);\n  vec2 toC = g - cursor;\n  float d = length(toC);\n  float bulge = strength * exp(-(d * d) / (2.0 * radius * radius));\n  if (d < 1e-5) return vec2(0.0);\n  return (toC / d) * bulge;\n}\n\n// \u2500\u2500 \u00A71 The Ben Golus derivative-AA grid coverage (transcribes paperGrid.ts gridCoverage) \u2500\u2500\nfloat gridCoverage(vec2 g, float targetWidth, vec2 uvDeriv) {\n  vec2 gridUV = 1.0 - abs(fract(g) * 2.0 - 1.0);\n  vec2 drawWidth = clamp(vec2(targetWidth), uvDeriv, vec2(0.5));\n  vec2 lineAA = uvDeriv * 1.5;\n  vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);\n  grid2 *= clamp(vec2(targetWidth) / max(drawWidth, vec2(1e-6)), vec2(0.0), vec2(1.0));\n  grid2 = mix(grid2, vec2(targetWidth), clamp(uvDeriv * 2.0 - 1.0, vec2(0.0), vec2(1.0)));\n  return max(grid2.x, grid2.y);\n}\n\nvoid main() {\n  float aspect = max(uAspect, 1e-4);\n  vec2 uv = vec2(vUv.x * aspect, vUv.y);\n\n  // \u00A75 the per-pixel kernel: warp + bulge the grid coordinate, then two-tier Golus.\n  vec2 g = uv * uGridScale;\n  g += curlWarp(g, uTime);\n  g += cursorBulge(g);\n\n  // The screen-space derivative of g (Golus): length(vec2(dFdx, dFdy)) per axis (the actual\n  // backing-store pixel \u2014 NOT a CSS sub-pixel, the blur-kill).\n  vec2 dv = vec2(\n    length(vec2(dFdx(g.x), dFdy(g.x))),\n    length(vec2(dFdx(g.y), dFdy(g.y)))\n  );\n\n  float minor = gridCoverage(g, uGrid.x, dv);\n  float me = max(uMajorEvery, 1.0);\n  float major = gridCoverage(g / me, uGrid.y, dv / me);\n  float line = max(minor * uGrid.z, major * uGrid.w);\n\n  vec3 col = clamp(linearToSrgb(uLineColor), vec3(0.0), vec3(1.0));\n  if (uHasBackground > 0.5) {\n    vec3 bg = clamp(linearToSrgb(uBg), vec3(0.0), vec3(1.0));\n    float a = line * uFieldAlpha;\n    fragColor = vec4(mix(bg, col, a), 1.0);\n    return;\n  }\n  float a = line * uFieldAlpha;\n  fragColor = vec4(col * a, a);  // premultiplied over transparent\n}";

package/dist/components/custom/paper-grid/shaders/paper-grid.wgsl.d.ts

@@ -0,0 +1 @@
+export declare const PAPER_GRID_WGSL = "\nconst TAU: f32 = 6.283185307179586;\n\n// \u2500\u2500 Paper-grid uniforms (the typed-struct source-of-truth \u2014 see uniformBridgeWGPU.ts) \u2500\u2500\nstruct PaperGridUniforms {\n  // u0: (uTime, uGridScale, uMinorPitch, uMajorEvery)\n  u0: vec4<f32>,\n  // warp: (uWarpScale, uWarpSpeed, uWarpScale2, uWarpSpeed2)\n  warp: vec4<f32>,\n  // warp2: (uAmplitude, uAspect, _pad, _pad)\n  warp2: vec4<f32>,\n  // grid: (uTargetWidth, uTargetWidthMajor, uMinorAlpha, uMajorAlpha)\n  grid: vec4<f32>,\n  // field: (uFieldAlpha, uHasBackground, _pad, _pad)\n  field: vec4<f32>,\n  // cursor: (uCursorX, uCursorY, uBulgeStrength, uBulgeRadius)\n  cursor: vec4<f32>,\n  // cursor2: (uBulgeMode, uInteractive, _pad, _pad)\n  cursor2: vec4<f32>,\n  // line: (uLineColor.rgb (linear), _pad)\n  line: vec4<f32>,\n  // bg: (uBg.rgb (linear), _pad)\n  bg: vec4<f32>,\n};\n\n@group(0) @binding(0) var<uniform> u: PaperGridUniforms;\n\n\nfn srgbToLinearCh(c: f32) -> f32 {\n  if (c <= 0.04045) { return c / 12.92; }\n  return pow((c + 0.055) / 1.055, 2.4);\n}\nfn srgbToLinear(c: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(srgbToLinearCh(c.r), srgbToLinearCh(c.g), srgbToLinearCh(c.b));\n}\n\nfn linearToSrgbCh(c: f32) -> f32 {\n  if (c <= 0.0031308) { return c * 12.92; }\n  return 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\nfn linearToSrgb(c: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(linearToSrgbCh(c.r), linearToSrgbCh(c.g), linearToSrgbCh(c.b));\n}\n\n// \u2500\u2500 The host noise basis (transcribes paperGrid.ts hash21/valueNoise/potentialFBM) \u2500\u2500\n// A quintic-faded 2D value-noise fbm potential \u2014 the SAME basis the dot-flow-field carries\n// (so the suite speaks ONE noise basis). DECLARED ABOVE the curl splice (WGSL has no forward\n// declaration \u2014 a function may only call one declared earlier).\nfn hash21(x: f32, y: f32) -> f32 {\n  var px = fract(x * 0.1031);\n  var py = fract(y * 0.1031);\n  var pz = fract(x * 0.1031);\n  let d = px * (py + 33.33) + py * (pz + 33.33) + pz * (px + 33.33);\n  px = px + d;\n  py = py + d;\n  pz = pz + d;\n  return fract((px + py) * pz);\n}\n\nfn valueNoise(x: f32, y: f32) -> f32 {\n  let ix = floor(x);\n  let iy = floor(y);\n  let fx = x - ix;\n  let fy = y - iy;\n  let ux = fx * fx * fx * (fx * (fx * 6.0 - 15.0) + 10.0);\n  let uy = fy * fy * fy * (fy * (fy * 6.0 - 15.0) + 10.0);\n  let a = hash21(ix, iy);\n  let b = hash21(ix + 1.0, iy);\n  let c = hash21(ix, iy + 1.0);\n  let d2 = hash21(ix + 1.0, iy + 1.0);\n  return mix(mix(a, b, ux), mix(c, d2, ux), uy);\n}\n\n// The 3-octave scalar fbm potential \u2014 the host noise basis the curl operator wraps.\nfn potentialFBM(p: vec2f) -> f32 {\n  var v = 0.0;\n  var amp = 0.5;\n  var freq = 1.0;\n  var px = p.x;\n  var py = p.y;\n  for (var i = 0; i < 3; i = i + 1) {\n    v = v + amp * valueNoise(px * freq, py * freq);\n    // FBM_ROT mat2(0.8, 0.6, -0.6, 0.8) \u2014 same rotation as the shared chunk.\n    let rx = 0.8 * px - 0.6 * py;\n    let ry = 0.6 * px + 0.8 * py;\n    px = rx;\n    py = ry;\n    freq = freq * 2.0;\n    amp = amp * 0.5;\n  }\n  return v;\n}\n\n// The shared divergence-free 2D-curl operator (flow.wgsl.ts \u2014 the FIRST WGSL curl consumer).\n\nconst CURL_EPS: f32 = 0.012;\n\n// \u2207\u00D7\u03C8 in 2D \u2014 the divergence-free flow direction. Central finite differences of the\n// scalar potential give the partials; the cross-pairing (\u2202y, \u2212\u2202x) is the 2D curl.\nfn curlFBM(p: vec2f) -> vec2f {\n  let dx = potentialFBM(p + vec2f(CURL_EPS, 0.0)) - potentialFBM(p - vec2f(CURL_EPS, 0.0));\n  let dy = potentialFBM(p + vec2f(0.0, CURL_EPS)) - potentialFBM(p - vec2f(0.0, CURL_EPS));\n  // \u03C8-gradient is (dx, dy)/(2\u00B7eps); the curl rotates it 90\u00B0: (\u2202\u03C8/\u2202y, \u2212\u2202\u03C8/\u2202x).\n  let g = vec2f(dx, dy) / (2.0 * CURL_EPS);\n  return vec2f(g.y, -g.x);\n}\n\n\n// \u2500\u2500 \u00A73 The \"liquid\": the global curl-flow domain warp (transcribes paperGrid.ts curlWarp) \u2500\u2500\n// TWO counter-flowing curl terms at different scales/speeds (Alex Harri counter-flow \u2014 never\n// visibly loops). A SHALLOW, LOW-frequency warp keeps the lines a clearly-readable grid.\nfn curlWarp(g: vec2f, t: f32) -> vec2f {\n  let warpScale = u.warp.x;\n  let warpSpeed = u.warp.y;\n  let warpScale2 = u.warp.z;\n  let warpSpeed2 = u.warp.w;\n  let amp = u.warp2.x;\n  let a = curlFBM(vec2f(g.x * warpScale + t * warpSpeed, g.y * warpScale + t * warpSpeed));\n  let b = curlFBM(vec2f(g.x * warpScale2 - t * warpSpeed2, g.y * warpScale2 - t * warpSpeed2));\n  return vec2f(a.x * amp + b.x * amp * 0.5, a.y * amp + b.y * amp * 0.5);\n}\n\n// \u2500\u2500 \u00A74 The pointer bulge: a LOCAL Gaussian warp (transcribes paperGrid.ts cursorBulge) \u2500\u2500\nfn cursorBulge(g: vec2f) -> vec2f {\n  let cursor = u.cursor.xy;\n  let strength = u.cursor.z * u.cursor2.x;  // bulgeStrength \u00D7 bulgeMode (+repel / \u2212attract)\n  let radius = max(u.cursor.w, 1e-4);\n  let toC = g - cursor;\n  let d = length(toC);\n  let bulge = strength * exp(-(d * d) / (2.0 * radius * radius));\n  if (d < 1e-5) { return vec2f(0.0); }\n  return (toC / d) * bulge;\n}\n\n// \u2500\u2500 \u00A71 The crisp line: Ben Golus derivative-AA grid coverage (transcribes gridCoverage) \u2500\u2500\n// targetWidth is the line half-width in GRID UNITS (lineWidthPx / minorPitchPx); uvDeriv is\n// the per-axis screen-space derivative of g (length(vec2(dpdx, dpdy)) per axis). Returns\n// line coverage [0..1] \u2014 exactly N device-pixels wide at ANY DPR/zoom (the blur-kill).\nfn gridCoverage(g: vec2f, targetWidth: f32, uvDeriv: vec2f) -> f32 {\n  // triangle wave per axis: 0 at a line, 1 at the cell center.\n  let gridUV = 1.0 - abs(fract(g) * 2.0 - 1.0);\n  let drawWidth = clamp(vec2f(targetWidth), uvDeriv, vec2f(0.5));\n  let lineAA = uvDeriv * 1.5;\n  // smoothstep with edge0 > edge1 (Golus) \u2192 a falling edge.\n  var grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);\n  // preserve thin-line intensity where the line is sub-drawWidth.\n  grid2 = grid2 * clamp(vec2f(targetWidth) / max(drawWidth, vec2f(1e-6)), vec2f(0.0), vec2f(1.0));\n  // Moir\u00E9 suppression: fade toward the average where the cell packs tighter than a pixel.\n  grid2 = mix(grid2, vec2f(targetWidth), clamp(uvDeriv * 2.0 - 1.0, vec2f(0.0), vec2f(1.0)));\n  return max(grid2.x, grid2.y);\n}\n\n// Full-screen-triangle (the pilot idiom): NDC corners (-1,-1),(3,-1),(-1,3) cover the\n// viewport from a single 3-vertex draw \u2014 no vertex buffer.\nstruct VSOut {\n  @builtin(position) pos: vec4f,\n  @location(0) uv: vec2f,  // domain [-1,1]\u00B2, aspect-corrected x\n};\n\n@vertex\nfn vs_main(@builtin(vertex_index) vi: u32) -> VSOut {\n  var corners = array<vec2f, 3>(\n    vec2f(-1.0, -1.0), vec2f(3.0, -1.0), vec2f(-1.0, 3.0),\n  );\n  let c = corners[vi];\n  var out: VSOut;\n  out.pos = vec4f(c, 0.0, 1.0);\n  out.uv = vec2f(c.x, c.y);\n  return out;\n}\n\n@fragment\nfn fs_main(in: VSOut) -> @location(0) vec4f {\n  let aspect = max(u.warp2.y, 1e-4);\n  // aspect-correct the domain x so the cells read square.\n  let uv = vec2f(in.uv.x * aspect, in.uv.y);\n  let t = u.u0.x;\n  let gridScale = u.u0.y;\n\n  // \u00A75 the per-pixel kernel: warp + bulge the grid coordinate, then two-tier Golus.\n  var g = uv * gridScale;\n  g = g + curlWarp(g, t);\n  g = g + cursorBulge(g);\n\n  // The screen-space derivative of g (Golus): length(vec2(dpdx, dpdy)) per axis. fwidth-class\n  // derivative reads the ACTUAL backing-store pixel (NOT fwidthFine \u2014 Compatibility-Mode safe).\n  let dv = vec2f(\n    length(vec2f(dpdx(g.x), dpdy(g.x))),\n    length(vec2f(dpdx(g.y), dpdy(g.y))),\n  );\n\n  let minor = gridCoverage(g, u.grid.x, dv);\n  // The major tier evals at g / majorEvery with its own derivative scaling.\n  let me = max(u.u0.w, 1.0);\n  let major = gridCoverage(g / me, u.grid.y, dv / me);\n  let line = max(minor * u.grid.z, major * u.grid.w);\n\n  let col = clamp(linearToSrgb(u.line.rgb), vec3f(0.0), vec3f(1.0));\n  let hasBg = u.field.y;\n  if (hasBg > 0.5) {\n    // opaque ground: composite the ink over the themed bg.\n    let bg = clamp(linearToSrgb(u.bg.rgb), vec3f(0.0), vec3f(1.0));\n    let a = line * u.field.x;\n    let outRgb = mix(bg, col, a);\n    return vec4f(outRgb, 1.0);\n  }\n  // transparent ground: the LINE carries the alpha \u2014 the page reads through the cells.\n  let a = line * u.field.x;\n  return vec4f(col * a, a);  // premultiplied over transparent\n}\n";

package/dist/components/custom/search/FuzzySearch.vue.d.ts

@@ -1,7 +1,11 @@
+import type { Surface } from "../../ui/_shared/useSurfaceAxis";
+import { type ControlSize, type SearchVariant } from "./searchVariants";
 import type { FuzzySearchState, SearchableItem } from "./composables/types";
 type __VLS_Props = {
     state: FuzzySearchState;
-    variant?: "sidebar" | "floating";
+    variant?: SearchVariant;
+    size?: ControlSize;
+    surface?: Surface;
     placeholder?: string;
     typeLabel?: (item: SearchableItem) => string;
 };
@@ -9,7 +13,9 @@ declare function focus(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     focus: typeof focus;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "sidebar" | "floating";
+    size: ControlSize;
+    variant: SearchVariant;
+    surface: Surface;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/custom/search/SearchBar.vue.d.ts

@@ -1,9 +1,14 @@
 import { type Component } from "vue";
+import type { Surface } from "../../ui/_shared/useSurfaceAxis";
+import { type ControlSize, type SearchVariant } from "./searchVariants";
 type __VLS_Props = {
     modelValue?: string;
     placeholder?: string;
     icon?: Component;
     tag?: string;
+    size?: ControlSize;
+    surface?: Surface;
+    variant?: SearchVariant;
 };
 declare var __VLS_13: {};
 type __VLS_Slots = {} & {
@@ -16,6 +21,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    size: ControlSize;
+    variant: SearchVariant;
+    surface: Surface;
     modelValue: string;
     placeholder: string;
     tag: string;

package/dist/components/custom/search/index.d.ts

@@ -1,5 +1,7 @@
 export { default as FuzzySearch } from "./FuzzySearch.vue";
 export { default as SearchBar } from "./SearchBar.vue";
+export { searchFieldVariants } from "./searchVariants";
+export type { SearchVariant, SearchVariants } from "./searchVariants";
 export { useFuzzySearch } from "./composables/useFuzzySearch";
 export type { UseFuzzySearchOptions } from "./composables/useFuzzySearch";
 export { buildIndex, searchIndex, fuzzyMatch, clearSearchCache } from "./composables/fuzzySearchIndex";

package/dist/components/custom/search/searchVariants.d.ts

@@ -0,0 +1,19 @@
+import { type VariantProps } from "class-variance-authority";
+import { type ControlSize, controlSizeClass } from "../../ui/_shared/useControlSize";
+/**
+ * The search field-CHROME variant. `inline` is the boxed glass pill (identity over
+ * the `.input-bar` recipe); `bare`/`floating` strip the box to a chromeless field —
+ * the real CVA rung the `!important` cluster was fighting (clean break, no `!`).
+ *
+ *   searchFieldVariants()                    → ""                                          (the boxed pill)
+ *   searchFieldVariants({ variant: "bare" }) → "border-none bg-transparent p-0 rounded-none"
+ */
+export declare const searchFieldVariants: (props?: ({
+    variant?: "floating" | "inline" | "bare" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SearchVariant = NonNullable<VariantProps<typeof searchFieldVariants>["variant"]>;
+/** The CVA's variant-prop shape — the `/api` discovery surface (the SFCs cannot
+ *  re-export a type, so this CVA home is the type source). */
+export type SearchVariants = VariantProps<typeof searchFieldVariants>;
+export { controlSizeClass };
+export type { ControlSize };

package/dist/components/custom/selectable-chip/SelectableChip.vue.d.ts

@@ -0,0 +1,50 @@
+/**
+ * SelectableChip — the public face of the BC.W-ACCENT-TONE tonal-accent register.
+ * A reka-`Toggle` selectable chip whose COLOUR identity comes from ONE `:tone` (a
+ * complete `<color>`): the chip reads the `.accent-tone` register — a faint idle
+ * FILL floored ≥3:1 (legible at rest, the load-bearing fourier ask), a bolder active
+ * BAND + EDGE rim, and a contrast-safe INK label (auto-darkened/lightened by value.js
+ * `safeAccentColor` so the text never drops below AA over the resolved band).
+ *
+ * Usage:
+ *   <SelectableChip v-model="on" :tone="'var(--section-color-7)'">React</SelectableChip>
+ *
+ * The toggle state is the reka-ui Toggle `modelValue` contract — bind via `v-model`
+ * (or `:model-value` / `@update:model-value`). For an exclusive picker, wire the chips
+ * via direct refs (deliberately unopinionated about ToggleGroup — the ToggleChip
+ * precedent).
+ *
+ * VALUE.JS-BEARING: this SFC STATICALLY imports `useAccentTone` (the contrast-safe-ink
+ * composable, which reaches value.js `safeAccentColor`/`computeSafeAccent`), so the
+ * chip chunk transitively reaches value.js — it ships on `/selectable-chip` ONLY, OFF
+ * the value.js-free root barrel (the BorderProgress/EasingPicker SCC-trap precedent).
+ */
+import type { HTMLAttributes } from "vue";
+import { type ToggleProps } from "reka-ui";
+import { type SelectableChipVariants } from "./selectableChipVariants";
+type __VLS_Props = ToggleProps & {
+    /** The accent COLOUR identity — a complete `<color>` (e.g. `var(--section-color-7)`
+     *  or a concrete `oklch(…)`). Defaults to `var(--primary)` via the register. The
+     *  SEMANTIC choice is a prop; the strength MAGNITUDES are tokens (no over-prop). */
+    tone?: string;
+    /** The structural size rung. Default `md`. */
+    size?: SelectableChipVariants["size"];
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => 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;
+    };
+};

package/dist/components/custom/selectable-chip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectableChip } from "./SelectableChip.vue";
+export { selectableChipVariants, type SelectableChipVariants, } from "./selectableChipVariants";

package/dist/components/custom/selectable-chip/selectableChipVariants.d.ts

@@ -0,0 +1,23 @@
+import { type VariantProps } from "class-variance-authority";
+/**
+ * SelectableChip — the public face of the BC.W-ACCENT-TONE tonal register: a
+ * reka-`Toggle` selectable chip that READS `.accent-tone` (idle `--accent-fill`
+ * floored ≥3:1, active `--accent-band` + `--accent-edge` rim + the contrast-safe
+ * `--accent-ink` label). A tag/filter/tool picker is ONE element, golden-by-
+ * construction — the tonal channels are owned by the register, not hand-rolled
+ * per-state `color-mix(…)`.
+ *
+ * The recipe is STRUCTURE + the register hook: it applies `.accent-tone` (the
+ * channel mint), the idle/active PAINT (off the register channels), and the size
+ * axis (the padding/radius/text-size). The tonal COLOUR is the register; this CVA
+ * carries no `color-mix(…--primary…)` literal (the N-paste the register collapses).
+ *
+ * The motion register matches the §6 interactive family (the ToggleChip precedent):
+ * the SURFACE legs (bg/border/color) ride `--duration-fast`/`--ease-standard`; the
+ * `scale` TRANSFORM leg rides `--spring-smooth`, so the chip lifts on hover + settles
+ * on press like every sibling control.
+ */
+export declare const selectableChipVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SelectableChipVariants = VariantProps<typeof selectableChipVariants>;