@mkbabb/glass-ui 8.0.0 → 10.0.0

package/dist/components/fourier-field/shaders/render.wgsl.d.ts

@@ -0,0 +1 @@
+export declare const FOURIER_FIELD_RENDER_WGSL = "\n// 0 chain \u00B7 1 trail \u00B7 2 head \u2014 a pipeline-overridable constant, three pipelines, one module.\noverride LAYER: i32 = 0;\n\n// THE SPLICE CONTRACT, honoured. OKLCH_MATRICES_WGSL states it at color.wgsl.ts:52-53 \u2014\n// \"PI must be in scope (the consumer defines it first, as the GLSL chunk requires)\" \u2014 and\n// spends it at :105 folding the OKLCh hue to [0, 2pi). This module splices that chunk\n// below and defined PI nowhere, so every CreateShaderModule on this source failed\n// validation with \"unresolved value 'PI'\" and the stage painted NOTHING. The two other\n// WGSL primaries carry the same line for the same reason (aurora.wgsl.ts:49,\n// metaball.wgsl.ts:53); this is that house idiom, not a local patch. The CLASS is gated\n// by tests/components/fourier-field/wgsl-splice-contract.test.ts, which resolves every\n// assembled module against the chunks it splices.\nconst PI: f32 = 3.141592653589793;\n\nconst TANGENT_EPS: f32 = 1e-4;\nconst SPEED_REF_HALFWIDTHS: f32 = 6.0;\n// The trail's taper: the mark keeps this fraction of its width at the oldest tail.\nconst TAIL_TAPER: f32 = 0.55;\n\nstruct RenderUniforms {\n  // r0: (centerX, centerY, scale, aspect)\n  r0: vec4<f32>,\n  // r1: (markHalf, inkOffsetStrokes, scaffoldFrac, edgeMargin)\n  r1: vec4<f32>,\n  // r2: (peakAlpha, glow, squash, trailFadeExp)\n  r2: vec4<f32>,\n  // r3: (trailFloor, hueSweep, ringStrokeModel, showMachine)\n  r3: vec4<f32>,\n  // ink: (linear rgb, rainbowChain)\n  ink: vec4<f32>,\n  // head: (linear rgb, _pad)\n  head: vec4<f32>,\n  // ints: (sampleCount, lutSize, chainCount, _pad)\n  ints: vec4<i32>,\n  // the CPU-resolved linear-sRGB ramp \u2014 the length is the TS constant, not a second copy\n  lut: array<vec4<f32>, 16>,\n};\n\n@group(0) @binding(0) var<uniform> u: RenderUniforms;\n@group(0) @binding(1) var<storage, read> curveSamples: array<vec4<f32>>;\n@group(0) @binding(2) var<storage, read> chainTips: array<vec4<f32>>;\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// value.js LINEAR_SRGB_TO_LMS, row-major \u2192 WGSL columns (= the transpose).\nconst LINEAR_SRGB_TO_LMS: mat3x3<f32> = mat3x3<f32>(\n  0.4122214708, 0.2119034982, 0.0883024619,\n  0.5363325363, 0.6806995451, 0.2817188376,\n  0.0514459929, 0.1073969566, 0.6299787005\n);\n\n// value.js srgbToOKLab's INLINE LMS\u2192OKLab coefficients, row-major \u2192 WGSL columns.\nconst LMS_TO_OKLAB: mat3x3<f32> = mat3x3<f32>(\n  0.2104542553, 1.9779984951, 0.0259040371,\n  0.7936177850, -2.4285922050, 0.7827717662,\n  -0.0040720468, 0.4505937099, -0.8086757660\n);\n\n// value.js OKLAB_TO_LMS_COEFF, row-major \u2192 WGSL columns.\nconst OKLAB_TO_LMS: mat3x3<f32> = mat3x3<f32>(\n  1.0, 1.0, 1.0,\n  0.3963377774, -0.1055613458, -0.0894841775,\n  0.2158037573, -0.0638541728, -1.2914855480\n);\n\n// value.js LMS_TO_LINEAR_SRGB, row-major \u2192 WGSL columns.\nconst LMS_TO_LINEAR_SRGB: mat3x3<f32> = mat3x3<f32>(\n  4.0767416621, -1.2684380046, -0.0041960863,\n  -3.3077115913, 2.6097574011, -0.7034186147,\n  0.2309699292, -0.3413193965, 1.7076147010\n);\n\nfn cbrt3(v: vec3<f32>) -> vec3<f32> {\n  return sign(v) * pow(abs(v), vec3<f32>(1.0 / 3.0));\n}\n\n// Gamma sRGB \u2192 raw OKLab (L, a, b). Mirrors value.js srgbToOKLab.\nfn srgbToOklab(c: vec3<f32>) -> vec3<f32> {\n  let lin = srgbToLinear(c);\n  let lms = LINEAR_SRGB_TO_LMS * lin;\n  return LMS_TO_OKLAB * cbrt3(lms);\n}\n\n// Raw OKLab (L, a, b) \u2192 linear sRGB. Mirrors value.js oklabToLinearSRGB.\nfn oklabToLinearSrgb(lab: vec3<f32>) -> vec3<f32> {\n  let lms_ = OKLAB_TO_LMS * lab;\n  let lms = lms_ * lms_ * lms_;\n  return LMS_TO_LINEAR_SRGB * lms;\n}\n\n// OKLab \u2192 OKLCh: H in RADIANS, folded to [0, 2pi). Mirrors value.js rawOklabToOklch.\nfn oklabToOklch(lab: vec3<f32>) -> vec3<f32> {\n  let C = length(lab.yz);\n  var H = atan2(lab.z, lab.y);\n  if (H < 0.0) { H = H + 2.0 * PI; }\n  return vec3<f32>(lab.x, C, H);\n}\n\n// OKLCh (H radians) \u2192 OKLab. Mirrors value.js rawOklchToOklab.\nfn oklchToOklab(lch: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));\n}\n\n// Read the CPU-resolved ramp. No colour-space conversion happens here \u2014 the LUT already\n// carries the chroma floor and the gamut map.\nfn sampleRamp(t: f32) -> vec3<f32> {\n  let n = u.ints.y;\n  let ft = clamp(t, 0.0, 1.0) * f32(n - 1);\n  let i0 = i32(floor(ft));\n  let i1 = min(i0 + 1, n - 1);\n  return mix(u.lut[i0].rgb, u.lut[i1].rgb, ft - f32(i0));\n}\n\n// The chain's hue sweep, taken ONCE PER INSTANCE in the vertex stage: the ramp entry for\n// this arm, rotated about the palette anchor by \u00B1hueSweep. Anchored warm, the sweep is\n// bounded by its own arithmetic \u2014 it cannot arrive anywhere the palette is not.\nfn chainTint(seg: f32) -> vec3<f32> {\n  let base = sampleRamp(seg * 0.6);\n  if (u.ink.w < 0.5) { return base; }\n  let lab = LMS_TO_OKLAB * cbrt3(LINEAR_SRGB_TO_LMS * base);\n  let lch = oklabToOklch(lab);\n  let swept = vec3<f32>(lch.x, lch.y, lch.z + mix(-u.r3.y, u.r3.y, clamp(seg, 0.0, 1.0)));\n  return oklabToLinearSrgb(oklchToOklab(swept));\n}\n\nfn segDist(p: vec2<f32>, a: vec2<f32>, b: vec2<f32>) -> f32 {\n  let pa = p - a;\n  let ba = b - a;\n  let h = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-8), 0.0, 1.0);\n  return length(pa - ba * h);\n}\n\n// The head's travel frame + its volume-preserving anisotropic metric.\nstruct HeadFrame { T: vec2<f32>, sHat: f32, };\nfn headFrame(head: vec2<f32>, back: vec2<f32>, halfW: f32) -> HeadFrame {\n  let d = head - back;\n  let s = length(d);\n  var out: HeadFrame;\n  if (s <= TANGENT_EPS) {\n    out.T = vec2<f32>(1.0, 0.0);\n    out.sHat = 0.0;\n    return out;\n  }\n  out.T = d / s;\n  out.sHat = clamp(s / max(halfW * SPEED_REF_HALFWIDTHS, 1e-6), 0.0, 1.0);\n  return out;\n}\n\nfn headAniso(p: vec2<f32>, head: vec2<f32>, fr: HeadFrame, k: f32) -> f32 {\n  let g = 1.0 + k * fr.sHat;\n  let n = vec2<f32>(-fr.T.y, fr.T.x);\n  let rel = p - head;\n  return length(vec2<f32>(dot(rel, fr.T) / g, dot(rel, n) * g));\n}\n\nfn quadCorner(vi: u32) -> vec2<f32> {\n  var c = array<vec2<f32>, 6>(\n    vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0),\n    vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0), vec2<f32>(1.0, 1.0),\n  );\n  return c[vi];\n}\n\nstruct VSOut {\n  @builtin(position) pos: vec4<f32>,\n  @location(0) p: vec2<f32>,\n  @location(1) a: vec2<f32>,\n  @location(2) b: vec2<f32>,\n  // (age, strokeHalf, drawRing)\n  @location(3) seg: vec3<f32>,\n  @location(4) @interpolate(flat) tint: vec3<f32>,\n};\n\n@vertex\nfn vs_main(@builtin(vertex_index) vi: u32, @builtin(instance_index) inst: u32) -> VSOut {\n  let corner = quadCorner(vi);\n  let center = u.r0.xy;\n  let scale = max(u.r0.z, 1e-6);\n  let aspect = max(u.r0.w, 1e-4);\n  let markHalf = u.r1.x;\n  let margin = u.r1.w;\n\n  var a = vec2<f32>(0.0);\n  var b = vec2<f32>(0.0);\n  var strokeHalf = markHalf;\n  var age = 0.0;\n  var drawRing = 0.0;\n  var tint = vec3<f32>(0.0);\n  var isCapsule = true;\n  var ext = markHalf;\n\n  if (LAYER == 0) {\n    // CHAIN \u2014 the AABB around this arm's own orbit (radius = |b \u2212 a| = |c_k|).\n    a = chainTips[inst].xy;\n    b = chainTips[inst + 1u].xy;\n    let radius = length(b - a);\n    // THE RING LAW, asked of the live stage: a circle narrower than its own line is a blob.\n    if (2.0 * radius >= u.r3.z) { drawRing = 1.0; }\n    strokeHalf = markHalf * u.r1.z;\n    tint = chainTint(f32(inst) / max(f32(u.ints.z) - 1.0, 1.0));\n    ext = radius + strokeHalf * 2.0;\n    isCapsule = false;\n  } else if (LAYER == 1) {\n    // TRAIL \u2014 the curve capsule, padded for the ink's own offset.\n    a = curveSamples[inst].xy;\n    b = curveSamples[inst + 1u].xy;\n    age = max(curveSamples[inst].z, curveSamples[inst + 1u].z);\n    tint = sampleRamp(1.0 - age);\n    ext = markHalf * (1.0 + 2.0 * max(u.r1.y, 0.0));\n    isCapsule = true;\n  } else {\n    // HEAD \u2014 centred on the newest curve sample; the AABB is the halo.\n    a = curveSamples[0].xy;\n    b = curveSamples[1].xy;\n    tint = u.head.rgb;\n    ext = markHalf * 5.0;\n    isCapsule = false;\n  }\n  ext = ext + margin;\n\n  var pos: vec2<f32>;\n  if (isCapsule) {\n    let d = b - a;\n    let len = length(d);\n    var dir = vec2<f32>(1.0, 0.0);\n    if (len > 1e-6) { dir = d / len; }\n    let perp = vec2<f32>(-dir.y, dir.x);\n    pos = mix(a - dir * ext, b + dir * ext, corner.x) + perp * (corner.y * 2.0 - 1.0) * ext;\n  } else {\n    pos = a + (corner * 2.0 - vec2<f32>(1.0)) * ext;\n  }\n\n  var out: VSOut;\n  out.pos = vec4<f32>((pos.x - center.x) * scale / aspect, (pos.y - center.y) * scale, 0.0, 1.0);\n  out.p = pos;\n  out.a = a;\n  out.b = b;\n  out.seg = vec3<f32>(age, strokeHalf, drawRing);\n  out.tint = tint;\n  return out;\n}\n\n@fragment\nfn fs_main(in: VSOut) -> @location(0) vec4<f32> {\n  let p = in.p;\n  let aa = max(fwidth(p.x) + fwidth(p.y), 1e-5) * 0.75;\n  let peak = u.r2.x;\n  let glow = u.r2.y;\n  let squash = u.r2.z;\n  let fadeExp = u.r2.w;\n  let trailFloor = u.r3.x;\n  let markHalf = u.r1.x;\n  let strokeHalf = in.seg.y;\n  let age = in.seg.x;\n  let a = in.a;\n  let b = in.b;\n\n  if (LAYER == 0) {\n    // \u2500\u2500 THE MACHINE \u2014 ring (conditionally), arm, joint dot; one scaffold rung \u2500\u2500\n    let radius = length(b - a);\n    var m = 0.0;\n    if (in.seg.z > 0.5) {\n      let dRing = abs(length(p - a) - radius);\n      m = max(m, 1.0 - smoothstep(strokeHalf, strokeHalf + aa, dRing));\n    }\n    m = max(m, 1.0 - smoothstep(strokeHalf, strokeHalf + aa, segDist(p, a, b)));\n    // The joint dot is the mark's own diameter \u2014 the machine's one solid rung.\n    m = max(m, 1.0 - smoothstep(markHalf, markHalf + aa, length(p - a)));\n    let alpha = clamp(m, 0.0, 1.0) * peak;\n    let rgb = clamp(linearToSrgb(in.tint), vec3<f32>(0.0), vec3<f32>(1.0));\n    return vec4<f32>(rgb * alpha, alpha);\n  } else if (LAYER == 1) {\n    // \u2500\u2500 THE CURVE \u2014 ink under mark, composited at \u03B11, then ONE envelope \u2500\u2500\n    let taper = TAIL_TAPER + (1.0 - TAIL_TAPER) * age;\n    let half = markHalf * taper;\n    // The ink rides THIS segment's own tangent, opposite the travel: the head runs from\n    // b toward a, so the ink lands behind at (b \u2212 a).\n    var dir = vec2<f32>(1.0, 0.0);\n    let d = b - a;\n    let len = length(d);\n    if (len > 1e-6) { dir = d / len; }\n    let off = dir * (markHalf * 2.0 * u.r1.y);\n\n    let aMark = 1.0 - smoothstep(half, half + aa, segDist(p, a, b));\n    let aInk = 1.0 - smoothstep(half, half + aa, segDist(p, a + off, b + off));\n\n    let markRgb = clamp(linearToSrgb(in.tint), vec3<f32>(0.0), vec3<f32>(1.0));\n    let inkRgb = clamp(linearToSrgb(u.ink.rgb), vec3<f32>(0.0), vec3<f32>(1.0));\n\n    // Mark OVER ink, both fully opaque where they cover \u2014 the pair, then the envelope.\n    let aPair = aMark + aInk * (1.0 - aMark);\n    let rgbPair = markRgb * aMark + inkRgb * aInk * (1.0 - aMark);\n    let env = peak * max(pow(max(age, 0.0), fadeExp), trailFloor);\n    return vec4<f32>(rgbPair * env, aPair * env);\n  } else {\n    // \u2500\u2500 THE HEAD \u2014 palette-lifted core over its own halo. Light-led, never white. \u2500\u2500\n    let fr = headFrame(a, b, markHalf);\n    let dHead = headAniso(p, a, fr, squash);\n    let coreR = markHalf * 1.5;\n    let haloR = coreR * 3.0;\n    let rgb = clamp(linearToSrgb(in.tint), vec3<f32>(0.0), vec3<f32>(1.0));\n    let halo = (1.0 - smoothstep(0.0, haloR, dHead)) * glow;\n    let core = (1.0 - smoothstep(coreR, coreR + aa, dHead)) * peak;\n    let alpha = clamp(max(core, halo), 0.0, 1.0);\n    return vec4<f32>(rgb * alpha, alpha);\n  }\n}\n";

package/dist/components/fourier-field/useFourierField.d.ts

@@ -0,0 +1,49 @@
+import { type Ref } from "vue";
+import { type GpuBackend, type RendererStatus } from "../../composables/glass/webgpu/useGpuSubstrate.js";
+import type { OklchStop } from "../../composables/color/index.js";
+import { type FourierFieldConfig } from "./constants.js";
+import type { MintedSpectrum } from "./renderer/mint.js";
+export interface UseFourierFieldOptions {
+    config: FourierFieldConfig;
+    /** The minted spectrum (identity-stable until the source or seed changes). */
+    getSpectrum: () => MintedSpectrum;
+    /** The resolved palette stops as OKLCh. */
+    getPalette: () => OklchStop[];
+    /**
+     * Whether the pointer drives the clock. ONE authority — the component's own
+     * `interactive` prop — read live rather than copied into the config.
+     */
+    interactive: () => boolean;
+    /** Hold the clock at its current parameter and never advance. */
+    freeze?: () => boolean;
+    /** `"capture"` → renderAt-only (the deterministic capture path). Default `"live"`. */
+    mode?: "live" | "capture";
+}
+/** The handle a consumer wires its lifecycle and its transport against. */
+export interface FourierFieldHandle {
+    /** The resolved backend. Always `"webgpu"` where the field paints at all. */
+    readonly backend: GpuBackend;
+    /** Park the loop (the pause seam). */
+    pause: () => void;
+    /** Re-arm the loop. */
+    resume: () => void;
+    /** Re-arm a parked loop on demand. */
+    wake: () => void;
+    /** The live `prefers-reduced-motion: reduce` state. */
+    readonly reducedMotion: boolean;
+    /** The current loop parameter `head_t ∈ [0,1)`. */
+    readonly headT: number;
+    /**
+     * The same parameter as a REACTIVE read, refreshed off the one clock at a rate a
+     * reader (or a screen reader) can follow. It is a sample of the frame loop, never a
+     * second one.
+     */
+    readonly headTLive: Readonly<Ref<number>>;
+    readonly rendererStatus: Readonly<Ref<RendererStatus>>;
+    /** Scrub the clock directly. Takes no spring — a hand's position is not a physics event. */
+    setHeadT: (t: number) => void;
+    /** Inject one flick impulse, in turns per second. Capped and floored like any other. */
+    flick: (turnsPerSec: number) => void;
+    dispose: () => void;
+}
+export declare function useFourierField(canvasRef: Ref<HTMLCanvasElement | null>, options: UseFourierFieldOptions): FourierFieldHandle;

package/dist/components/handmark/HandMark.vue.d.ts

@@ -1,23 +1,27 @@
-import type { HandMarkProps } from "./types.js";
+import { type HandShape } from "./stroke.js";
+type __VLS_Props = {
+    shape?: HandShape;
+    color?: string;
+    weight?: number;
+    seed?: number;
+    draw?: boolean;
+};
 declare function play(): void;
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<HandMarkProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     play: typeof play;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HandMarkProps> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     color: string;
-    seed: number;
-    shape: import("./types.js").HandShape;
-    animation: import("./types.js").HandAnimation;
-    brush: import("./brush.js").BrushName | Partial<import("./brush.js").Brush>;
-    drawMs: number;
-    drawDelayMs: number;
-    appear: "mount" | "visible" | "manual";
-    boilFps: number;
-    boilFrames: number;
-    jagged: boolean;
+    shape: HandShape;
+    weight: number;
+    draw: 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/handmark/index.d.ts

@@ -1,26 +1,7 @@
 /**
- * HandMark public barrel.
- * ─────────────────────────────────────────────────────────────────────────────
- * `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 is an OPTIONAL PEER. The perfect-freehand body
- * is vendored; only `ribbon:'hull'` (the highlighter) touches that core
- * (treeshaken otherwise).
- *
- * The editorial draw-on underline is
- * `<HandMark shape="underline" animation="draw-on">`; the natural pencil-boil
- * morphology is the `boil` brush.
+ * HandMark public barrel. The component is the surface; the pure functions ship with
+ * it so a caller who owns its own path can ink it with the same pen — `strokeRibbon`
+ * takes any polyline.
  */
 export { default as HandMark } from "./HandMark.vue.js";
-export { BRUSHES, resolveBrush, lerpBrush, type Brush, type BrushName, type BlendMode, type TaperSpec, type StampFn, type InkPath, } from "./brush.js";
-export { shapeGeom, serialize, boilLines, type ShapeGeom } from "./geometry.js";
-export { naturalUnderlinePoints } from "./noise.js";
-export { VB_W, VB_H, UNDERLINE_GAP } from "./constants.js";
-export { ink, type SVGFragment } from "./ink.js";
-export { grainFilter, hasGrain } from "./texture.js";
-export { getStroke, getStrokePoints, getSvgPathFromStroke, type StrokeOptions, type InputPoint, } from "./freehand.js";
-export { useHandMark, normalizeProps, type UseHandMarkInput, type HandMarkCore, type BoilClock, } from "./composables/useHandMark.js";
-export type { HandMarkProps, HandShape, HandAnimation, MarkBox, } from "./types.js";
+export { SHAPES, handBand, handLine, handRing, markDuration, minJerk, serialize, strokeRibbon, type Frame, type HandShape, type Point, } from "./stroke.js";

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

@@ -0,0 +1,92 @@
+/**
+ * The hand voice — one pen, five laws, no framework.
+ *
+ * Every function here is pure and framework-free: a caller with a rect and a font
+ * size gets the same geometry the component draws, in 1:1 CSS pixels. `strokeRibbon`
+ * takes ANY polyline, so a consumer that owns its own path (a chart leader, a route)
+ * inks it with this pen rather than re-deriving one.
+ */
+/** The four gestures, enumerated at runtime so a member change breaks compile-visibly. */
+export declare const SHAPES: readonly ["underline", "strike", "circle", "highlight"];
+export type HandShape = (typeof SHAPES)[number];
+export interface Point {
+    x: number;
+    y: number;
+}
+/** A measured text rect, in CSS px, already expressed in the frame that draws it. */
+export interface Frame {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare const CAP_HEIGHT = 0.7515;
+/** L4 — x-height plus a 0.04em bleed at each end. */
+export declare const BAND_HEIGHT: number;
+/**
+ * The hand's outer envelope for the ring, in em: the declared vertical run 2b carried
+ * out by the largest radial creep and the largest wobble crest it admits.
+ */
+export declare const RING_ENVELOPE: number;
+/** L1 — the clampless allometric nib. `weight` is a dimensionless multiple. */
+export declare function nib(weight: number, fs: number): number;
+/** L3 — floorless, ceilingless pace over the path length of ONE line rect. */
+export declare function markDuration(length: number): number;
+/**
+ * The minimum-jerk draw profile as a CSS `linear()` easing.
+ *
+ * Every stop is emitted the same way — the PROFILE'S OWN VALUE at its own input — so
+ * `easing(0) = 0` and `easing(1) = 1` hold by construction: `10t³ − 15t⁴ + 6t⁵` is
+ * exactly 0 and exactly 1 at those ends. There is no endpoint special case, because an
+ * endpoint special case is a second expression for a quantity the loop already has,
+ * and the two can disagree. (They did: the branch it replaces emitted the loop INDEX,
+ * so `easing(1)` was `samples` and a draw animating `stroke-dashoffset` to 0 with
+ * `fill: both` came to rest at −23 dash periods — a mark inside its own gap.)
+ */
+export declare function minJerk(samples?: number): string;
+export interface LineOpts {
+    fs: number;
+    seed: number;
+    kind: "underline" | "strike";
+}
+/**
+ * L2 — the centreline. `d(u) = S·[4u(1−u) + B·4u(1−u)(1−2u)]` with |B| ≤ 0.4: both
+ * modes vanish at the endpoints and `d′` is a quadratic, so the commit carries at most
+ * two extrema in closed form for every seed. The lift-off hook is monotone in t over
+ * the last 6% and belongs to the release, never to the calm reading. Tilt is a shear,
+ * not a rotation, so the per-end reach stays exactly what the run-out declares.
+ */
+export declare function handLine(rect: Frame, o: LineOpts): Point[];
+/** The ring's semi-axes: the exact curve through the padded box corner on BOTH axes. */
+export declare function ringAxes(rect: Frame, fs: number): {
+    a: number;
+    b: number;
+};
+/** The horizontal overshoot a ring reserves with `padding-inline` on its wrapper. */
+export declare function ringReserve(rect: Frame, fs: number): number;
+/** L2-RING — an n=3 superellipse, overswept so the tail closes outside the head. */
+export declare function handRing(rect: Frame, o: {
+    fs: number;
+    seed: number;
+}): Point[];
+/**
+ * L4 — the band: one chisel per line rect, raked at both ends, sagging like a swipe,
+ * overrunning its word by 1–2% a side. Opaque, and it carries no ink colour: the page's
+ * own foreground reads on it in both themes.
+ */
+export declare function handBand(rect: Frame, o: {
+    fs: number;
+    seed: number;
+}): Point[];
+/** `M x y L x y …` over an open polyline. */
+export declare function serialize(points: Point[]): string;
+/**
+ * The pen, over an arbitrary polyline: the ribbon is the outline of a stroke of
+ * maximum width `w`, emitted left side forward then right side back, so the minor axis
+ * at any sample is the nib the eye reads there.
+ */
+export declare function strokeRibbon(points: Point[], w: number): string;
+/** A closed polygon — the band's own emission, which is a fill and not a stroke. */
+export declare function fillPolygon(points: Point[]): string;
+/** The default seed: the marked text, salted by the mark's position among its siblings. */
+export declare function markSeed(text: string, instanceIndex: number): number;

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

@@ -7,7 +7,9 @@ declare const __VLS_base: import("vue").DefineComponent<LabeledSwitchProps, {},
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<LabeledSwitchProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    modelValue: 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;

package/dist/components/labeled-field/types.d.ts

@@ -37,5 +37,5 @@ export type LabeledSliderProps = Omit<SliderProps, "class" | "modelValue"> & Lab
     modelValue: number;
 };
 export type LabeledSwitchProps = Omit<SwitchProps, "class" | "modelValue"> & LabeledFieldCommonProps & {
-    modelValue: boolean;
+    modelValue?: boolean;
 };

package/dist/components/menu/DropdownMenu.vue.d.ts

@@ -37,9 +37,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Dropdo
 }, string, import("vue").PublicProps, Readonly<DropdownMenuComponentProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    modal: boolean;
     open: boolean;
     defaultOpen: boolean;
-    modal: boolean;
     trigger: MenuTrigger;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: () => unknown;

package/dist/components/metric/coalesce-metric.d.ts

@@ -10,11 +10,16 @@ export interface CoalesceMetricOptions {
     /** `12400` → `12.4K`. `Intl.NumberFormat` compact notation, never a hand ladder. */
     compact?: boolean;
     locale?: string;
+    /** A positive number takes a leading `+`—the delta, whose number and sign carry
+        its polarity (O-32 §2.1). A negative already carries its sign; zero takes none. */
+    signed?: boolean;
 }
 /**
  * The family's ONE data-shaping seam. Every readout in the family — the atom's
  * value, its unit-bearing reading, its delta — passes through this and nothing
- * else, which is why "what counts as empty" has exactly one answer.
+ * else, which is why "what counts as empty" has exactly one answer. [2026-09-22 ·
+ * O-32 §2.1: the delta's `+` is part of its reading, so `signed` is shaped here on
+ * both the compact and the plain path—never a prefix at the call site.]
  *
  * Finite numbers (including `0` and `-0`) and nonblank strings are readings.
  * Blank strings, non-finite numbers, `null` and `undefined` take the placeholder.

package/dist/components/metric/styles.css

@@ -1 +1 @@
-@layer components{.metric{display: inline-grid;grid-template-columns: minmax(0,auto) minmax(0,1fr);min-inline-size: 0;align-items: baseline;color: var(--foreground);gap: 0.125rem 0.5rem;}.metric[data-posture="stacked"],.metric[data-posture="cell"]{grid-template-columns: minmax(0,1fr);}.metric__label,.metric__context{min-inline-size: 0;overflow-wrap: anywhere;color: var(--muted-foreground);}.metric__label{font-size: var(--control-label);font-weight: 550;letter-spacing: var(--type-tracking-wide);text-transform: uppercase;}.metric__context{grid-column: 1 / -1;font-size: var(--type-caption);line-height: 1.35;}.metric__reading{display: inline-flex;min-inline-size: 0;align-items: baseline;gap: 0.3em;}.metric__value{min-inline-size: 3ch;overflow-wrap: anywhere;font-family: var(--font-mono);font-size: var(--type-prose);font-weight: 650;font-variant-numeric: tabular-nums lining-nums;letter-spacing: var(--type-tracking-tight);line-height: 1;}.metric__unit{flex: none;color: var(--muted-foreground);font-family: var(--font-mono);font-size: var(--type-caption);line-height: 1;}.metric__delta{flex: none;color: var(--muted-foreground);font-family: var(--font-mono);font-size: var(--type-caption);font-variant-numeric: tabular-nums lining-nums;line-height: 1;}.metric__delta[data-polarity="up"]{color: var(--success);}.metric__delta[data-polarity="down"]{color: var(--destructive);}.metric[data-size="sm"] .metric__value{font-size: var(--type-small);}.metric[data-size="lg"] .metric__value,.metric[data-posture="cell"] .metric__value{font-size: var(--type-title);}.metric[data-size="xl"] .metric__value{font-size: var(--type-display-3);}.metric[data-empty] .metric__value{color: var(--muted-foreground);}.metric[data-loading] .metric__value{color: transparent;border-radius: var(--radius-sm);background: color-mix( in oklab,var(--foreground) calc(var(--ink-seam) * 100%),transparent );}.metric[data-loading] .metric__unit,.metric[data-loading] .metric__delta{visibility: hidden;}.metric[data-posture="cell"]{display: grid;align-content: start;padding: clamp(0.75rem,2cqi,1rem);border: 1px solid oklch(from var(--foreground) l c h / var(--ink-edge));border-radius: var(--radius-card);background: var(--glass-plate-wash);gap: 0.375rem;}.metric-stack{container: metric-stack / inline-size;display: grid;grid-template-columns: minmax(7rem,1fr) minmax(0,auto);inline-size: 100%;gap: 0.75rem 1.25rem;}.metric-stack[data-density="compact"]{gap: 0.5rem 1rem;}.metric-row{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;align-items: baseline;padding-block: 0.25rem;}.metric-row > .metric[data-posture="row"]{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;}.metric[data-posture="row"] > .metric__reading{justify-self: end;}.metric[data-posture="row"] > .metric__context{grid-column: 1;}@container metric-stack (max-width: 24rem){.metric-row,.metric-row > .metric[data-posture="row"]{grid-template-columns: minmax(0,1fr);gap: 0.25rem;}.metric[data-posture="row"] > .metric__reading{justify-self: start;}}}
+@layer components{.metric{display: inline-grid;grid-template-columns: minmax(0,auto) minmax(0,1fr);min-inline-size: 0;align-items: baseline;color: var(--foreground);gap: 0.125rem 0.5rem;}.metric[data-posture="stacked"],.metric[data-posture="cell"]{grid-template-columns: minmax(0,1fr);}.metric__label,.metric__context{min-inline-size: 0;overflow-wrap: anywhere;color: var(--muted-foreground);}.metric__label{font-size: var(--control-label);font-weight: 550;letter-spacing: var(--type-tracking-wide);text-transform: uppercase;}.metric__context{grid-column: 1 / -1;font-size: var(--type-caption);line-height: 1.35;}.metric__reading{display: inline-flex;min-inline-size: 0;align-items: baseline;gap: 0.3em;}.metric__value{min-inline-size: 3ch;overflow-wrap: anywhere;font-family: var(--font-mono);font-size: var(--type-prose);font-weight: 650;font-variant-numeric: tabular-nums lining-nums;letter-spacing: var(--type-tracking-tight);line-height: 1;}.metric__unit{flex: none;color: var(--muted-foreground);font-family: var(--font-mono);font-size: var(--type-caption);line-height: 1;}.metric__delta{flex: none;color: var(--foreground);font-family: var(--font-mono);font-size: var(--type-caption);font-variant-numeric: tabular-nums lining-nums;line-height: 1;}.metric[data-size="sm"] .metric__value{font-size: var(--type-small);}.metric[data-size="lg"] .metric__value,.metric[data-posture="cell"] .metric__value{font-size: var(--type-title);}.metric[data-size="xl"] .metric__value{font-size: var(--type-display-3);}.metric[data-empty] .metric__value{color: var(--muted-foreground);}.metric[data-loading] .metric__value{color: transparent;border-radius: var(--radius-sm);background: color-mix( in oklab,var(--foreground) calc(var(--ink-seam) * 100%),transparent );}.metric[data-loading] .metric__unit,.metric[data-loading] .metric__delta{visibility: hidden;}.metric[data-posture="cell"]{display: grid;align-content: start;padding: clamp(0.75rem,2cqi,1rem);border: 1px solid oklch(from var(--foreground) l c h / var(--ink-edge));border-radius: var(--radius-card);background: var(--glass-plate-wash);gap: 0.375rem;}.metric-stack{container: metric-stack / inline-size;display: grid;grid-template-columns: minmax(7rem,1fr) minmax(0,auto);inline-size: 100%;gap: 0.75rem 1.25rem;}.metric-stack[data-density="compact"]{gap: 0.5rem 1rem;}.metric-row{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;align-items: baseline;padding-block: 0.25rem;}.metric-row > .metric[data-posture="row"]{display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;}.metric[data-posture="row"] > .metric__reading{justify-self: end;}.metric[data-posture="row"] > .metric__context{grid-column: 1;}@container metric-stack (max-width: 24rem){.metric-row,.metric-row > .metric[data-posture="row"]{grid-template-columns: minmax(0,1fr);gap: 0.25rem;}.metric[data-posture="row"] > .metric__reading{justify-self: start;}}}

package/dist/components/popover/Popover.vue.d.ts

@@ -46,9 +46,9 @@ declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {}, {}, {}
 }, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    modal: boolean;
     open: boolean;
     defaultOpen: boolean;
-    modal: boolean;
     trigger: PopoverTriggerMode;
     openDelay: number;
     closeDelay: number;

package/dist/components/scroll-progress-rim/styles.css

@@ -1 +1 @@
-.scroll-progress-rim{--scroll-progress-rim-width: 3px;--scroll-progress-rim-inset: 2px;--scroll-progress-rim-margin: 8px;position: absolute;inset: 0;z-index: 2;isolation: isolate;pointer-events: none;}.scroll-progress-rim__track{position: absolute;border-radius: var(--radius-pill);background: var(--track-well-recess);}.scroll-progress-rim[data-orientation="horizontal"] .scroll-progress-rim__track{inset-inline: var(--scroll-progress-rim-margin);inset-block-end: var(--scroll-progress-rim-inset);block-size: var(--scroll-progress-rim-width);}.scroll-progress-rim[data-orientation="vertical"] .scroll-progress-rim__track{inset-block: var(--scroll-progress-rim-margin);inset-inline-end: var(--scroll-progress-rim-inset);inline-size: var(--scroll-progress-rim-width);}.scroll-progress-rim__fill{position: absolute;inset: 0;border-radius: inherit;background: var(--scroll-progress-rim-spectrum,var(--rainbow-violet));clip-path: inset(0 100% 0 0 round var(--radius-pill));transition: clip-path var(--spring-dock-duration) var(--spring-dock);}.scroll-progress-rim[data-orientation="horizontal"] .scroll-progress-rim__fill{clip-path: inset( 0 calc(100% - var(--scroll-progress-rim-fill,0%)) 0 0 round var(--radius-pill) );}.scroll-progress-rim[data-orientation="horizontal"]:dir(rtl) .scroll-progress-rim__fill{clip-path: inset( 0 0 0 calc(100% - var(--scroll-progress-rim-fill,0%)) round var(--radius-pill) );}.scroll-progress-rim[data-orientation="vertical"] .scroll-progress-rim__fill{clip-path: inset( calc(100% - var(--scroll-progress-rim-fill,0%)) 0 0 0 round var(--radius-pill) );}@media (prefers-reduced-motion: reduce){.scroll-progress-rim__fill{transition: none;}}
+@layer components{.scroll-progress-rim{--scroll-progress-rim-width: 3px;--scroll-progress-rim-inset: 2px;--scroll-progress-rim-margin: 8px;position: absolute;inset: 0;z-index: 2;isolation: isolate;pointer-events: none;}.scroll-progress-rim__track{position: absolute;border-radius: var(--radius-pill);background: var(--track-well-recess);}.scroll-progress-rim[data-orientation="horizontal"] .scroll-progress-rim__track{inset-inline: var(--scroll-progress-rim-margin);inset-block-end: var(--scroll-progress-rim-inset);block-size: var(--scroll-progress-rim-width);}.scroll-progress-rim[data-orientation="vertical"] .scroll-progress-rim__track{inset-block: var(--scroll-progress-rim-margin);inset-inline-end: var(--scroll-progress-rim-inset);inline-size: var(--scroll-progress-rim-width);}.scroll-progress-rim__fill{position: absolute;inset: 0;border-radius: inherit;background: var(--scroll-progress-rim-spectrum,var(--rainbow-violet));clip-path: inset(0 100% 0 0 round var(--radius-pill));transition: clip-path var(--spring-dock-duration) var(--spring-dock);}.scroll-progress-rim[data-orientation="horizontal"] .scroll-progress-rim__fill{clip-path: inset( 0 calc(100% - var(--scroll-progress-rim-fill,0%)) 0 0 round var(--radius-pill) );}.scroll-progress-rim[data-orientation="horizontal"]:dir(rtl) .scroll-progress-rim__fill{clip-path: inset( 0 0 0 calc(100% - var(--scroll-progress-rim-fill,0%)) round var(--radius-pill) );}.scroll-progress-rim[data-orientation="vertical"] .scroll-progress-rim__fill{clip-path: inset( calc(100% - var(--scroll-progress-rim-fill,0%)) 0 0 0 round var(--radius-pill) );}@media (prefers-reduced-motion: reduce){.scroll-progress-rim__fill{transition: none;}}}

package/dist/components/sheet/styles.css

@@ -1 +1 @@
-:where([data-slot="sheet-content"]){position: fixed;z-index: var(--z-modal);}@property --detent-t{syntax: "<number>";inherits: false;initial-value: 0;}:where([data-slot="sheet-content"][data-detents]){--sheet-seam-width: 1px;contain: layout paint;display: grid;grid-template-rows: auto minmax(0,1fr);}:where([data-slot="sheet-content"][data-modal="false"]){z-index: calc(var(--z-dock) - 1);}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-detent-handle"],[data-slot="sheet-content"][data-detents] [data-slot="dialog-header"] ){touch-action: none;}:where([data-slot="sheet-content"][data-dragging]){cursor: grabbing;user-select: none;}:where([data-slot="sheet-content"] > [data-slot="sheet-content-region"]){display: grid;align-content: start;gap: var(--space-body);}:where([data-slot="sheet-content"][data-scroll] > [data-slot="sheet-content-region"]){min-block-size: 0;max-block-size: calc(100dvh - 2 * var(--space-family));overflow-y: auto;}:where( [data-slot="sheet-content"][data-side="left"]:not([data-detents]) > [data-slot="sheet-content-region"],[data-slot="sheet-content"][data-side="right"]:not([data-detents]) > [data-slot="sheet-content-region"] ){display: flex;flex-direction: column;block-size: 100%;min-block-size: 0;}:where( [data-slot="sheet-content"][data-side="left"] > [data-slot="sheet-content-region"] > :only-child,[data-slot="sheet-content"][data-side="right"] > [data-slot="sheet-content-region"] > :only-child ){min-block-size: 0;}:where([data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"]){display: grid;grid-template-rows: minmax(0,auto) minmax(1lh,1fr) auto;align-content: end;min-block-size: 0;gap: var(--space-body);}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > :not([data-slot="dialog-header"]):not([data-slot="dialog-footer"]) ){min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > [data-slot="dialog-header"] ){overflow: hidden;padding-block-end: var(--space-body);border-block-end: var(--sheet-seam-width) solid oklch(from var(--glass-veil-ink) l c h / calc(var(--glass-veil-step) * 2));}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > [data-slot="dialog-footer"] ){padding-block-start: var(--space-body);border-block-start: var(--sheet-seam-width) solid oklch(from var(--glass-veil-ink) l c h / calc(var(--glass-veil-step) * 2));}:where([data-slot="sheet-content"]:not([data-detents]):has([data-slot="dialog-close"])) :where([data-slot="dialog-header"]){padding-inline-end: calc(var(--touch-target) + var(--space-atom));}:where([data-slot="sheet-content"][data-detents] > [data-slot="sheet-detent-handle"]){display: flex;align-items: center;justify-content: center;min-block-size: var(--touch-target);cursor: grab;}:where([data-slot="sheet-detent-handle"] > [data-slot="sheet-detent-grip"]){display: block;inline-size: calc( var(--space-section) + var(--space-family) * clamp(0,var(--detent-t),1) );block-size: calc(var(--space-atom) / 2);border-radius: var(--radius-pill);background-color: currentcolor;opacity: calc(0.45 + ((0.85 - 0.45) / 2) * clamp(0,var(--detent-t),1));transition: opacity var(--spring-dock-duration) var(--spring-dock),inline-size var(--spring-dock-duration) var(--spring-dock);}@media (hover: hover){:where([data-slot="sheet-detent-handle"]:hover > [data-slot="sheet-detent-grip"]){opacity: 0.85;}}:where([data-slot="sheet-detent-handle"]:focus-visible){outline: none;}:where( [data-slot="sheet-detent-handle"]:focus-visible > [data-slot="sheet-detent-grip"],[data-slot="sheet-content"][data-dragging] [data-slot="sheet-detent-grip"] ){opacity: 0.85;}:where( [data-slot="sheet-detent-handle"]:focus-visible > [data-slot="sheet-detent-grip"] ){box-shadow: 0 0 0 3px var(--focus-ring-color);}@media (prefers-reduced-motion: reduce){:where([data-slot="sheet-detent-grip"]){transition: none;}}:where([data-slot="sheet-content"]){anchor-name: --glass-sheet-edge;}:where([data-slot="sheet-content"][data-surface="glass"]){-webkit-backdrop-filter: none;backdrop-filter: none;}:where([data-slot="glass-graded-halo"]){position: fixed;position-anchor: --glass-sheet-edge;top: anchor(top);right: anchor(right);bottom: anchor(bottom);left: anchor(left);z-index: calc(var(--z-modal) - 1);pointer-events: none;background: linear-gradient( var(--sheet-edge-direction),color-mix(in oklab,var(--glass-plate-overlay) 10%,transparent) 0,color-mix(in oklab,var(--glass-plate-overlay) 16%,transparent) 40px,color-mix(in oklab,var(--glass-plate-overlay) 34%,transparent) 120px,color-mix(in oklab,var(--glass-plate-overlay) 34%,transparent) 100% );-webkit-backdrop-filter: blur(calc(34px * var(--glass-level))) saturate(var(--glass-saturate));backdrop-filter: blur(calc(34px * var(--glass-level))) saturate(var(--glass-saturate));mask-image: linear-gradient( var(--sheet-edge-direction),rgb(0 0 0 / 0.325) 0,rgb(0 0 0 / 0.45) 40px,black 120px,black 100% );}:where([data-slot="glass-graded-halo"][data-modal="false"]){z-index: calc(var(--z-dock) - 2);}:where([data-slot="glass-graded-halo"][data-side="top"]){--sheet-edge-direction: to top;border-end-start-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="bottom"]){--sheet-edge-direction: to bottom;border-start-start-radius: var(--radius-3xl);border-start-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="left"]){--sheet-edge-direction: to left;border-start-end-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="right"]){--sheet-edge-direction: to right;border-start-start-radius: var(--radius-3xl);border-end-start-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-detents][data-side="bottom"]){height: 100dvh;bottom: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="top"]){height: 100dvh;top: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="left"]){width: 100dvw;left: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="right"]){width: 100dvw;right: auto;}@media (prefers-reduced-transparency: reduce),(forced-colors: active){:where([data-slot="glass-graded-halo"]){display: none;}}:where([data-slot="sheet-content"][data-side="top"]){left: 0;right: 0;top: 0;}:where([data-slot="sheet-content"][data-side="bottom"]){left: 0;right: 0;bottom: 0;}:where([data-slot="sheet-content"][data-side="left"]){top: 0;bottom: 0;left: 0;height: 100%;width: 75%;}:where([data-slot="sheet-content"][data-side="right"]){top: 0;bottom: 0;right: 0;height: 100%;width: 75%;}@media (min-width: 40rem){:where([data-slot="sheet-content"][data-side="left"]),:where([data-slot="sheet-content"][data-side="right"]){max-width: 24rem;}}:where( [data-slot="sheet-content"][data-detents][data-side="bottom"],[data-slot="sheet-content"][data-detents][data-side="top"] ){block-size: calc(clamp(0,var(--detent-t),1) * 100dvh);min-block-size: calc( 2 * var(--space-family) + var(--sheet-seam-width) + var(--touch-target) + 2 * var(--space-body) + var(--space-body) + var(--sheet-seam-width) + 1lh + var(--space-body) + var(--sheet-seam-width) + var(--touch-target) );max-block-size: 100dvh;}:where( [data-slot="sheet-content"][data-detents][data-side="left"],[data-slot="sheet-content"][data-detents][data-side="right"] ){width: calc(clamp(0,var(--detent-t),1) * 100dvw);max-width: 100dvw;height: 100%;}:where([data-slot="sheet-content"]){padding-inline: var(--space-family);padding-block: var(--space-family);}:where([data-slot="sheet-content"][data-side="top"]){border-end-start-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="bottom"]){border-start-start-radius: var(--radius-3xl);border-start-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="left"]){border-start-end-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="right"]){border-start-start-radius: var(--radius-3xl);border-end-start-radius: var(--radius-3xl);}
+@layer components{:where([data-slot="sheet-content"]){position: fixed;z-index: var(--z-modal);}}@property --detent-t{syntax: "<number>";inherits: false;initial-value: 0;}@layer components{:where([data-slot="sheet-content"][data-detents]){--sheet-seam-width: 1px;contain: layout paint;display: grid;grid-template-rows: auto minmax(0,1fr);}:where([data-slot="sheet-content"][data-modal="false"]){z-index: calc(var(--z-dock) - 1);}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-detent-handle"],[data-slot="sheet-content"][data-detents] [data-slot="dialog-header"] ){touch-action: none;}:where([data-slot="sheet-content"][data-dragging]){cursor: grabbing;user-select: none;}:where([data-slot="sheet-content"] > [data-slot="sheet-content-region"]){display: grid;align-content: start;gap: var(--space-body);}:where([data-slot="sheet-content"][data-scroll] > [data-slot="sheet-content-region"]){min-block-size: 0;max-block-size: calc(100dvh - 2 * var(--space-family));overflow-y: auto;}:where( [data-slot="sheet-content"][data-side="left"]:not([data-detents]) > [data-slot="sheet-content-region"],[data-slot="sheet-content"][data-side="right"]:not([data-detents]) > [data-slot="sheet-content-region"] ){display: flex;flex-direction: column;block-size: 100%;min-block-size: 0;}:where( [data-slot="sheet-content"][data-side="left"] > [data-slot="sheet-content-region"] > :only-child,[data-slot="sheet-content"][data-side="right"] > [data-slot="sheet-content-region"] > :only-child ){min-block-size: 0;}:where([data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"]){display: grid;grid-template-rows: minmax(0,auto) minmax(1lh,1fr) auto;align-content: end;min-block-size: 0;gap: var(--space-body);}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > :not([data-slot="dialog-header"]):not([data-slot="dialog-footer"]) ){min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > [data-slot="dialog-header"] ){overflow: hidden;padding-block-end: var(--space-body);border-block-end: var(--sheet-seam-width) solid oklch(from var(--glass-veil-ink) l c h / calc(var(--glass-veil-step) * 2));}:where( [data-slot="sheet-content"][data-detents] > [data-slot="sheet-content-region"] > [data-slot="dialog-footer"] ){padding-block-start: var(--space-body);border-block-start: var(--sheet-seam-width) solid oklch(from var(--glass-veil-ink) l c h / calc(var(--glass-veil-step) * 2));}:where([data-slot="sheet-content"]:not([data-detents]):has([data-slot="dialog-close"])) :where([data-slot="dialog-header"]){padding-inline-end: calc(var(--touch-target) + var(--space-atom));}:where([data-slot="sheet-content"][data-detents] > [data-slot="sheet-detent-handle"]){display: flex;align-items: center;justify-content: center;min-block-size: var(--touch-target);cursor: grab;}:where([data-slot="sheet-detent-handle"] > [data-slot="sheet-detent-grip"]){display: block;inline-size: calc( var(--space-section) + var(--space-family) * clamp(0,var(--detent-t),1) );block-size: calc(var(--space-atom) / 2);border-radius: var(--radius-pill);background-color: currentcolor;opacity: calc(0.45 + ((0.85 - 0.45) / 2) * clamp(0,var(--detent-t),1));transition: opacity var(--spring-dock-duration) var(--spring-dock),inline-size var(--spring-dock-duration) var(--spring-dock);}@media (hover: hover){:where([data-slot="sheet-detent-handle"]:hover > [data-slot="sheet-detent-grip"]){opacity: 0.85;}}:where([data-slot="sheet-detent-handle"]:focus-visible){outline: none;}:where( [data-slot="sheet-detent-handle"]:focus-visible > [data-slot="sheet-detent-grip"],[data-slot="sheet-content"][data-dragging] [data-slot="sheet-detent-grip"] ){opacity: 0.85;}:where( [data-slot="sheet-detent-handle"]:focus-visible > [data-slot="sheet-detent-grip"] ){box-shadow: 0 0 0 3px var(--focus-ring-color);}@media (prefers-reduced-motion: reduce){:where([data-slot="sheet-detent-grip"]){transition: none;}}:where([data-slot="sheet-content"]){anchor-name: --glass-sheet-edge;}:where([data-slot="sheet-content"][data-surface="glass"]){-webkit-backdrop-filter: none;backdrop-filter: none;}:where([data-slot="glass-graded-halo"]){position: fixed;position-anchor: --glass-sheet-edge;top: anchor(top);right: anchor(right);bottom: anchor(bottom);left: anchor(left);z-index: calc(var(--z-modal) - 1);pointer-events: none;background: linear-gradient( var(--sheet-edge-direction),color-mix(in oklab,var(--glass-plate-overlay) 10%,transparent) 0,color-mix(in oklab,var(--glass-plate-overlay) 16%,transparent) 40px,color-mix(in oklab,var(--glass-plate-overlay) 34%,transparent) 120px,color-mix(in oklab,var(--glass-plate-overlay) 34%,transparent) 100% );-webkit-backdrop-filter: blur(calc(34px * var(--glass-level))) saturate(var(--glass-saturate));backdrop-filter: blur(calc(34px * var(--glass-level))) saturate(var(--glass-saturate));mask-image: linear-gradient( var(--sheet-edge-direction),rgb(0 0 0 / 0.325) 0,rgb(0 0 0 / 0.45) 40px,black 120px,black 100% );}:where([data-slot="glass-graded-halo"][data-modal="false"]){z-index: calc(var(--z-dock) - 2);}:where([data-slot="glass-graded-halo"][data-side="top"]){--sheet-edge-direction: to top;border-end-start-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="bottom"]){--sheet-edge-direction: to bottom;border-start-start-radius: var(--radius-3xl);border-start-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="left"]){--sheet-edge-direction: to left;border-start-end-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-side="right"]){--sheet-edge-direction: to right;border-start-start-radius: var(--radius-3xl);border-end-start-radius: var(--radius-3xl);}:where([data-slot="glass-graded-halo"][data-detents][data-side="bottom"]){height: 100dvh;bottom: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="top"]){height: 100dvh;top: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="left"]){width: 100dvw;left: auto;}:where([data-slot="glass-graded-halo"][data-detents][data-side="right"]){width: 100dvw;right: auto;}@media (prefers-reduced-transparency: reduce),(forced-colors: active){:where([data-slot="glass-graded-halo"]){display: none;}}:where([data-slot="sheet-content"][data-side="top"]){left: 0;right: 0;top: 0;}:where([data-slot="sheet-content"][data-side="bottom"]){left: 0;right: 0;bottom: 0;}:where([data-slot="sheet-content"][data-side="left"]){top: 0;bottom: 0;left: 0;height: 100%;width: 75%;}:where([data-slot="sheet-content"][data-side="right"]){top: 0;bottom: 0;right: 0;height: 100%;width: 75%;}@media (min-width: 40rem){:where([data-slot="sheet-content"][data-side="left"]),:where([data-slot="sheet-content"][data-side="right"]){max-width: 24rem;}}:where( [data-slot="sheet-content"][data-detents][data-side="bottom"],[data-slot="sheet-content"][data-detents][data-side="top"] ){block-size: calc(clamp(0,var(--detent-t),1) * 100dvh);min-block-size: calc( 2 * var(--space-family) + var(--sheet-seam-width) + var(--touch-target) + 2 * var(--space-body) + var(--space-body) + var(--sheet-seam-width) + 1lh + var(--space-body) + var(--sheet-seam-width) + var(--touch-target) );max-block-size: 100dvh;}:where( [data-slot="sheet-content"][data-detents][data-side="left"],[data-slot="sheet-content"][data-detents][data-side="right"] ){width: calc(clamp(0,var(--detent-t),1) * 100dvw);max-width: 100dvw;height: 100%;}:where([data-slot="sheet-content"]){padding-inline: var(--space-family);padding-block: var(--space-family);}:where([data-slot="sheet-content"][data-side="top"]){border-end-start-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="bottom"]){border-start-start-radius: var(--radius-3xl);border-start-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="left"]){border-start-end-radius: var(--radius-3xl);border-end-end-radius: var(--radius-3xl);}:where([data-slot="sheet-content"][data-side="right"]){border-start-start-radius: var(--radius-3xl);border-end-start-radius: var(--radius-3xl);}}

package/dist/components/slider/styles.css

@@ -1 +1 @@
-@property --glass-slider-track-background{syntax: "*";inherits: true;}.glass-slider{--slider-range-origin: left center;position: relative;display: flex;inline-size: 100%;align-items: center;touch-action: none;user-select: none;transition: color var(--duration-fast) var(--ease-standard);}.glass-slider[data-inverted],.glass-slider:dir(rtl){--slider-range-origin: right center;}.glass-slider:dir(rtl)[data-inverted]{--slider-range-origin: left center;}.glass-slider[data-size="sm"]{--slider-track-height: 0.75rem;--slider-thumb-size: 0.5rem;}.glass-slider[data-size="md"]{--slider-track-height: 1.25rem;--slider-thumb-size: 1rem;}.glass-slider[data-size="lg"]{--slider-track-height: 1.75rem;--slider-thumb-size: 1.5rem;}.glass-slider[data-variant="spectrum"]{--slider-track-height: calc(var(--slider-thumb-size,1rem) * 1.5);}@media (pointer: coarse){.glass-slider{--slider-target-floor: max( var(--slider-track-height,0.375rem),var(--slider-touch-target,1.5rem) );min-block-size: var(--slider-target-floor);min-inline-size: var(--slider-target-floor);}}.slider-track{width: 100%;flex-grow: 1;height: var(--slider-track-height,0.375rem);background: var(--glass-slider-track-background,var(--muted-medium));transition: background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}.slider-range{position: absolute;height: 100%;--liquid-fill-tint: var(--slider-range-bg,var(--glass-capsule-warm));}.slider-thumb{display: block;width: 0;height: var(--slider-track-height,0.375rem);opacity: 0;background: transparent;border: none;box-shadow: none;transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not([data-variant="spectrum"]):hover .slider-range{--liquid-fill-strength: 100%;}.glass-slider:not([data-variant="spectrum"]):has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow);}.glass-slider[data-held] .slider-range,.glass-slider:active .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(1.02 + 0.16 * var(--smear)),calc(0.94 - 0.06 * var(--smear)) );transform-origin: var(--slider-range-origin);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not(:active):not([data-held]) .slider-range{transition: transform var(--duration-normal) var(--ease-cartoon-punch),--glass-veil-rung var(--spring-dock-duration) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}@media (prefers-reduced-motion: reduce){.glass-slider:active .slider-range,.glass-slider[data-held] .slider-range{--motion-weight: 0;transform: scale(1,0.97);}}.glass-slider[data-disabled] .slider-range{opacity: var(--opacity-disabled);}.glass-slider[data-invalid] .slider-track{box-shadow: inset 0 0 0 1px var(--destructive);}.glass-slider[data-invalid]:has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow),inset 0 0 0 1px var(--destructive);}.glass-slider[data-variant="spectrum"][data-held] .slider-thumb{box-shadow: 0 0 0 6px var(--surface-tint-15),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-track{background: var(--glass-slider-track-background,var(--secondary));}.glass-slider[data-variant="spectrum"] .slider-thumb{width: calc(var(--slider-thumb-size,1rem) * 0.75);height: var(--slider-track-height,0.375rem);opacity: 1;background: transparent;border: 2px solid var(--background);border-radius: calc(var(--slider-thumb-size,1rem) * 0.4);box-shadow: var(--shadow-sm);}@supports (corner-shape: superellipse(2)){.glass-slider[data-variant="spectrum"] .slider-thumb{corner-shape: var(--corner-shape-thumb);}}.glass-slider[data-variant="spectrum"]:hover .slider-thumb{box-shadow: 0 0 0 4px var(--surface-tint-8),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-thumb:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow),var(--shadow-sm);}.glass-slider[data-orientation="vertical"]{flex-direction: column;width: var(--slider-track-height,0.375rem);height: 12rem;}.glass-slider[data-orientation="vertical"] .slider-track{width: var(--slider-track-height,0.375rem);height: 100%;}.glass-slider[data-orientation="vertical"] .slider-range{width: 100%;height: auto;}.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(0.94 - 0.06 * var(--smear)),calc(1.02 + 0.16 * var(--smear)) );transform-origin: center bottom;}.glass-slider[data-orientation="vertical"][data-inverted] .slider-range{transform-origin: center top;}.glass-slider[data-orientation="vertical"][data-variant="spectrum"] .slider-thumb{width: var(--slider-track-height,0.375rem);height: calc(var(--slider-thumb-size,1rem) * 0.75);}@media (prefers-reduced-motion: reduce){.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{transform: scale(0.97,1);}}@media (forced-colors: active){.slider-track{background: Canvas;border: 1px solid CanvasText;}.slider-range{background: Highlight;}.glass-slider[data-variant="spectrum"] .slider-thumb{border-color: CanvasText;forced-color-adjust: none;background: Highlight;}.glass-loupe{background: Canvas;border: 1px solid CanvasText;}}.glass-loupe{--loupe-k-max: 2.6;--loupe-k-min: 1.15;--loupe-k: calc( var(--loupe-k-max) - (var(--loupe-k-max) - var(--loupe-k-min)) * var(--flex-vel,0) );--loupe-vel: var(--flex-vel,0);--loupe-span: calc(var(--slider-track-height,1.25rem) * 6);position: fixed;z-index: calc(var(--z-overlay) - 1);inline-size: var(--loupe-span);block-size: calc(var(--slider-track-height,1.25rem) * var(--loupe-k-max));inset-block-start: var(--loupe-top,0);inset-inline-start: var(--loupe-left,0);translate: -50% -100%;scale: 0.13;transform-origin: 50% 100%;transition: scale var(--spring-present-duration) var(--spring-present),opacity var(--spring-present-duration) var(--ease-standard);opacity: 0;overflow: hidden;border-radius: var(--radius-pill);pointer-events: none;box-shadow: var(--glass-material-rim),var(--glass-under-shadow-quiet);}.glass-loupe[data-engaged]{scale: 1;opacity: 1;}.glass-loupe:not([data-engaged]){transition: scale var(--spring-present-exit-duration) var(--ease-standard),opacity var(--spring-present-exit-duration) var(--ease-standard);}.glass-loupe-clone{--s: 3;position: absolute;inset-block-start: 50%;inset-inline-start: 0;inline-size: calc(var(--loupe-track-w,0px) * var(--s));block-size: calc(var(--slider-track-height,1.25rem) * var(--s));border-radius: calc(var(--radius-pill) * var(--s));overflow: hidden;background: var(--glass-slider-track-background,var(--muted-medium));transform: translate( calc(var(--loupe-span) / 2 - var(--loupe-k) * var(--loupe-x,0px)),-50% ) scale(calc(var(--loupe-k) / var(--s)));transform-origin: 0 50%;filter: blur(calc(var(--loupe-vel,0) * 0.75px));transition: filter var(--duration-normal) var(--ease-standard);}.glass-loupe-fill{position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: var(--loupe-fill-w,0px);background: var(--slider-range-bg,var(--glass-capsule-warm));}.glass-loupe-mark{position: absolute;inset-block: 0;inset-inline-start: 50%;inline-size: 2px;translate: -50% 0;background: var(--foreground);opacity: 0.24;}@media (prefers-reduced-motion: reduce){.glass-loupe{transition-duration: 0.01ms;}.glass-loupe-clone{filter: none;}}
+@property --glass-slider-track-background{syntax: "*";inherits: true;}.glass-slider{--slider-range-origin: left center;position: relative;display: flex;inline-size: 100%;align-items: center;touch-action: none;user-select: none;transition: color var(--duration-fast) var(--ease-standard);}.glass-slider{cursor: grab;}.glass-slider[data-held],.glass-slider:active{cursor: grabbing;}.glass-slider[data-disabled]{cursor: not-allowed;}.glass-slider[data-inverted],.glass-slider:dir(rtl){--slider-range-origin: right center;}.glass-slider:dir(rtl)[data-inverted]{--slider-range-origin: left center;}.glass-slider[data-size="sm"]{--slider-track-height: var(--slider-track-height-sm);--slider-thumb-size: min(var(--slider-thumb-size-sm),var(--slider-track-height-sm));}.glass-slider[data-size="md"]{--slider-track-height: var(--slider-track-height-md);--slider-thumb-size: min(var(--slider-thumb-size-md),var(--slider-track-height-md));}.glass-slider[data-size="lg"]{--slider-track-height: var(--slider-track-height-lg);--slider-thumb-size: min(var(--slider-thumb-size-lg),var(--slider-track-height-lg));}.glass-slider[data-variant="spectrum"]{--slider-track-height: calc(var(--slider-thumb-size,1rem) * 1.5);}@media (pointer: coarse){.glass-slider{--slider-target-floor: max( var(--slider-track-height,0.375rem),var(--slider-touch-target,1.5rem) );min-block-size: var(--slider-target-floor);min-inline-size: var(--slider-target-floor);}}.slider-track{width: 100%;flex-grow: 1;height: var(--slider-track-height,0.375rem);background: var(--glass-slider-track-background,var(--muted-medium));transition: background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}.slider-range{position: absolute;height: 100%;--liquid-fill-tint: var(--slider-range-bg,var(--glass-capsule-warm));}.slider-thumb{display: block;width: 0;height: var(--slider-track-height,0.375rem);opacity: 0;background: transparent;border: none;box-shadow: none;transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not([data-variant="spectrum"]):hover .slider-range{--liquid-fill-strength: 100%;}.glass-slider:not([data-variant="spectrum"]):has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow);}.glass-slider[data-held] .slider-range,.glass-slider:active .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(1.02 + 0.16 * var(--smear)),calc(0.94 - 0.06 * var(--smear)) );transform-origin: var(--slider-range-origin);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not(:active):not([data-held]) .slider-range{transition: transform var(--duration-normal) var(--ease-cartoon-punch),--glass-veil-rung var(--spring-dock-duration) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}@media (prefers-reduced-motion: reduce){.glass-slider:active .slider-range,.glass-slider[data-held] .slider-range{--motion-weight: 0;transform: scale(1,0.97);}}.glass-slider[data-disabled] .slider-range{opacity: var(--opacity-disabled);}.glass-slider[data-invalid] .slider-track{box-shadow: inset 0 0 0 1px var(--destructive);}.glass-slider[data-invalid]:has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow),inset 0 0 0 1px var(--destructive);}.glass-slider[data-variant="spectrum"][data-held] .slider-thumb{box-shadow: 0 0 0 6px var(--surface-tint-15),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-track{background: var(--glass-slider-track-background,var(--secondary));}.glass-slider[data-variant="spectrum"] .slider-thumb{width: calc(var(--slider-thumb-size,1rem) * 0.75);height: var(--slider-track-height,0.375rem);opacity: 1;background: transparent;border: 2px solid var(--background);border-radius: calc(var(--slider-thumb-size,1rem) * 0.4);box-shadow: var(--shadow-sm);}@supports (corner-shape: superellipse(2)){.glass-slider[data-variant="spectrum"] .slider-thumb{corner-shape: var(--corner-shape-thumb);}}.glass-slider[data-variant="spectrum"]:hover .slider-thumb{box-shadow: 0 0 0 4px var(--surface-tint-8),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-thumb:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow),var(--shadow-sm);}.glass-slider[data-orientation="vertical"]{flex-direction: column;width: var(--slider-track-height,0.375rem);height: 12rem;}.glass-slider[data-orientation="vertical"] .slider-track{width: var(--slider-track-height,0.375rem);height: 100%;}.glass-slider[data-orientation="vertical"] .slider-range{width: 100%;height: auto;}.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(0.94 - 0.06 * var(--smear)),calc(1.02 + 0.16 * var(--smear)) );transform-origin: center bottom;}.glass-slider[data-orientation="vertical"][data-inverted] .slider-range{transform-origin: center top;}.glass-slider[data-orientation="vertical"][data-variant="spectrum"] .slider-thumb{width: var(--slider-track-height,0.375rem);height: calc(var(--slider-thumb-size,1rem) * 0.75);}@media (prefers-reduced-motion: reduce){.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{transform: scale(0.97,1);}}@media (forced-colors: active){.slider-track{background: Canvas;border: 1px solid CanvasText;}.slider-range{background: Highlight;}.glass-slider[data-variant="spectrum"] .slider-thumb{border-color: CanvasText;forced-color-adjust: none;background: Highlight;}.glass-loupe{background: Canvas;border: 1px solid CanvasText;}}.glass-loupe{--loupe-k-max: 2.6;--loupe-k-min: 1.15;--loupe-k: calc( var(--loupe-k-max) - (var(--loupe-k-max) - var(--loupe-k-min)) * var(--flex-vel,0) );--loupe-vel: var(--flex-vel,0);--loupe-span: calc(var(--slider-track-height,1.25rem) * 6);position: fixed;z-index: calc(var(--z-overlay) - 1);inline-size: var(--loupe-span);block-size: calc(var(--slider-track-height,1.25rem) * var(--loupe-k-max));inset-block-start: var(--loupe-top,0);inset-inline-start: var(--loupe-left,0);translate: -50% -100%;scale: 0.13;transform-origin: 50% 100%;transition: scale var(--spring-present-duration) var(--spring-present),opacity var(--spring-present-duration) var(--ease-standard);opacity: 0;overflow: hidden;border-radius: var(--radius-pill);pointer-events: none;box-shadow: var(--glass-material-rim),var(--glass-under-shadow-quiet);}.glass-loupe[data-engaged]{scale: 1;opacity: 1;}.glass-loupe:not([data-engaged]){transition: scale var(--spring-present-exit-duration) var(--ease-standard),opacity var(--spring-present-exit-duration) var(--ease-standard);}.glass-loupe-clone{--s: 3;position: absolute;inset-block-start: 50%;inset-inline-start: 0;inline-size: calc(var(--loupe-track-w,0px) * var(--s));block-size: calc(var(--slider-track-height,1.25rem) * var(--s));border-radius: calc(var(--radius-pill) * var(--s));overflow: hidden;background: var(--glass-slider-track-background,var(--muted-medium));transform: translate( calc(var(--loupe-span) / 2 - var(--loupe-k) * var(--loupe-x,0px)),-50% ) scale(calc(var(--loupe-k) / var(--s)));transform-origin: 0 50%;filter: blur(calc(var(--loupe-vel,0) * 0.75px));transition: filter var(--duration-normal) var(--ease-standard);}.glass-loupe-fill{position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: var(--loupe-fill-w,0px);background: var(--slider-range-bg,var(--glass-capsule-warm));}.glass-loupe-mark{position: absolute;inset-block: 0;inset-inline-start: 50%;inline-size: 2px;translate: -50% 0;background: var(--foreground);opacity: 0.24;}@media (prefers-reduced-motion: reduce){.glass-loupe{transition-duration: 0.01ms;}.glass-loupe-clone{filter: none;}}

package/dist/components/tabs/SegmentedTabs.vue.d.ts

@@ -1,115 +1,28 @@
-import { type HTMLAttributes } from "vue";
-import type { TabActivation } from "./composables/useTabRovingFocus.js";
-import type { Motion } from "../_shared/axes.js";
-/** The canonical tab/option shape — one descriptor across both materials. */
-export interface SegmentedTabOption {
-    label: string;
-    value: string;
-    icon?: string;
-    disabled?: boolean;
-    /**
-     * The `id` of the tabpanel this option reveals. When set and semantics resolve to
-     * `tabs`, it is emitted as the tab's `aria-controls`, completing the APG
-     * tablist↔tabpanel linkage for consumers that own a panel. Ignored in `toggle`
-     * semantics (a toggle group mutates a shared surface, not a distinct panel).
-     */
-    controls?: string;
-}
-/** The two materials: `pill` is the default glass eyeglass; `underline` is the paper ink hairline. */
-export type SegmentedTabsVariant = "pill" | "underline";
-/** The interaction semantic, independent of material. `toggle` exposes a
- *  group of pressed buttons; `tabs` exposes a tablist with selected tabs. */
-export type SegmentedTabsSemantics = "toggle" | "tabs";
-/** Whether focus movement also selects. Manual activation waits for Enter/Space. */
-export type SegmentedTabsActivation = TabActivation;
-/** The orientation axis — `horizontal` (default) lays children in a row + tracks
- *  the indicator on the inline axis; `vertical` stacks a column + tracks the
- *  block axis (the vertical underline is the leading-edge ink rail). */
-export type SegmentedTabsOrientation = "horizontal" | "vertical";
-export interface SegmentedTabsResponsive {
-    /**
-     * CSS length consumed inside `(min-width: <breakpoint>)`. BELOW it the
-     * strip collapses to a `<Select>`; at/above it renders the tab strip.
-     * Defaults to `"640px"` (Tailwind `sm:`).
-     */
-    breakpoint?: string;
-    /**
-     * Optional subset shown in the desktop strip (the mobile Select keeps the
-     * full option list). Falls back to `options`.
-     */
-    desktopOptions?: SegmentedTabOption[] | null;
-    /** Accessible name for the mobile `<SelectTrigger>`. */
-    ariaLabel?: string;
-    /** Class merged onto the mobile `<SelectTrigger>` only. */
-    triggerClass?: HTMLAttributes["class"];
-}
-export interface SegmentedTabsProps {
-    options: SegmentedTabOption[];
-    /** Accessible name shared by the desktop strip and responsive Select. */
-    ariaLabel?: string;
-    /**
-     * The material — `pill` (DEFAULT, the glass eyeglass) or `underline` (the paper
-     * ink-hairline rule). TWO, and the eyeglass is not a third: it is what `pill`
-     * IS. A "million variants that are essentially the same thing" is the failure
-     * mode this axis exists to refuse.
-     */
-    variant?: SegmentedTabsVariant;
-    /**
-     * Interaction semantics, independent of `variant`. When omitted, preserves the
-     * historical mapping: `pill` → `toggle`, `underline` → `tabs`.
-     */
-    semantics?: SegmentedTabsSemantics;
-    /** Selection follows focus by default; manual mode activates with Enter/Space. */
-    activation?: SegmentedTabsActivation;
-    /**
-     * Orientation — `horizontal` (default) or `vertical`. Axis-derived on the
-     * one indicator engine.
-     */
-    orientation?: SegmentedTabsOrientation;
-    /**
-     * Responsive collapse — below the breakpoint the strip becomes a `<Select>`.
-     * `true` uses defaults; an object tunes the breakpoint, desktop subset, and
-     * accessible name.
-     */
-    responsive?: boolean | SegmentedTabsResponsive;
-    /**
-     * Motion weight. `full` (default) lets the pill indicator follow a pointer,
-     * squash with drag velocity, and settle to the nearest tab. Drag supplements the
-     * fully operable click and keyboard path; it is never the sole selection method.
-     * `reduced` and `off` use the click-only strip while preserving roving focus.
-     * Underline has no deformable indicator. Reduced-motion preference forces
-     * `full → reduced`.
-     */
-    motion?: Motion;
-    class?: HTMLAttributes["class"];
-}
-type __VLS_Props = SegmentedTabsProps;
-type __VLS_ModelProps = {
-    modelValue: string;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_32: {
-    option: SegmentedTabOption;
-    active: boolean;
-};
-type __VLS_Slots = {} & {
-    option?: (props: typeof __VLS_32) => any;
+import type { SegmentedTabOption, SegmentedTabsProps } from "./types.js";
+declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(SegmentedTabsProps<T> & {
+        modelValue: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        option?: (props: {
+            option: SegmentedTabOption<T>;
+            active: boolean;
+        }) => any;
+    };
+    emit: (event: "update:modelValue", value: T) => void;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-    orientation: SegmentedTabsOrientation;
-    variant: SegmentedTabsVariant;
-    responsive: boolean | SegmentedTabsResponsive;
-    activation: SegmentedTabsActivation;
-}, {}, {}, {}, 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;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/tabs/composables/useTabDragMorph.d.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from "vue";
 import { type UseDragMorphReturn } from "../../../composables/motion/morph/useDragMorph.js";
-import type { SegmentedTabOption } from "../SegmentedTabs.vue.js";
+import type { SegmentedTabOption } from "../types.js";
 /**
  * Package-private composable for `SegmentedTabs.vue` — the LIQUID
  * TAB (the `:draggable` axis). A composable held under the

package/dist/components/tabs/composables/useTabResponsive.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from "vue";
-import type { SegmentedTabOption, SegmentedTabsResponsive } from "../SegmentedTabs.vue.js";
+import type { SegmentedTabOption, SegmentedTabsResponsive } from "../types.js";
 /**
  * Package-private composable for `SegmentedTabs.vue` (the
  * roving-focus/responsive carve). The responsive-collapse concern
@@ -13,30 +13,30 @@ import type { SegmentedTabOption, SegmentedTabsResponsive } from "../SegmentedTa
  * lifecycle-hook owner), so the SFC never re-declares the `mql` listener. It owns the SSR/desktop-first
  * default, the mobile-only model fall-back, and the accessible name resolution.
  */
-export interface UseTabResponsiveParams {
+export interface UseTabResponsiveParams<V extends string = string> {
     /** The `:responsive` prop — `false` | `true` | a tuning object. */
-    responsive: () => boolean | SegmentedTabsResponsive;
+    responsive: () => boolean | SegmentedTabsResponsive<V>;
     /** The full option list (the mobile `<Select>` keeps ALL options). */
-    options: ComputedRef<SegmentedTabOption[]>;
+    options: ComputedRef<SegmentedTabOption<V>[]>;
     /** The single-select model (the strip value the collapse falls back off). */
-    model: Ref<string | undefined>;
+    model: Ref<V | undefined>;
 }
-export interface UseTabResponsiveReturn {
+export interface UseTabResponsiveReturn<V extends string = string> {
     /** The resolved responsive config, or `null` when `:responsive` is off. */
-    responsiveCfg: ComputedRef<SegmentedTabsResponsive | null>;
+    responsiveCfg: ComputedRef<SegmentedTabsResponsive<V> | null>;
     /** The collapse breakpoint CSS length (default `"640px"`). */
     breakpoint: ComputedRef<string>;
     /** The desktop-strip option subset (falls back to the full list). */
-    desktopOptions: ComputedRef<SegmentedTabOption[]>;
+    desktopOptions: ComputedRef<SegmentedTabOption<V>[]>;
     /** `true` at/above the breakpoint (the matchMedia state; SSR-default `true`). */
     isDesktop: Ref<boolean>;
     /** The value the STRIP renders (falls back off a mobile-only model). */
-    stripValue: ComputedRef<string | undefined>;
+    stripValue: ComputedRef<V | undefined>;
     /** The options the STRIP renders (desktop subset when responsive, else full). */
-    stripOptions: ComputedRef<SegmentedTabOption[]>;
+    stripOptions: ComputedRef<SegmentedTabOption<V>[]>;
     /** The accessible name for the mobile `<SelectTrigger>`. */
     mobileAriaLabel: ComputedRef<string>;
     /** `true` when the mobile `<Select>` should render (responsive + below breakpoint). */
     showMobileSelect: ComputedRef<boolean>;
 }
-export declare function useTabResponsive(params: UseTabResponsiveParams): UseTabResponsiveReturn;
+export declare function useTabResponsive<V extends string = string>(params: UseTabResponsiveParams<V>): UseTabResponsiveReturn<V>;