@mkbabb/glass-ui 4.1.0 → 4.2.0

package/dist/springPresets-DfoQ6XRY.js

@@ -0,0 +1,64 @@
+//#region src/composables/motion/springPresets.ts
+var e = [
+	{
+		name: "smooth",
+		response: .58,
+		dampingFraction: .8,
+		comment: "SETTLE register — the inertial settle (entrances/fades/scale-ins): weighty, a whisper of life (+1.5%), never a dead stop. BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "snappy",
+		response: .48,
+		dampingFraction: .74,
+		comment: "CONTROL register — the quick-but-WEIGHTY position morph (tab indicator, progress fill, .glass-reveal SPATIAL bloom, page-build); arrives at half-clock (audacious) with a small gooey overshoot (+3.2%). BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "bouncy",
+		response: .6,
+		dampingFraction: .6,
+		comment: "PLAYFUL register — the emphatic one-shot (dialog/success entrance, VT default, completion-seal): FLOWING not flicking — overshoot softened 12.6%→9.5%, slower for inertia. BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "gentle",
+		response: .82,
+		dampingFraction: 1,
+		comment: "GENTLE register — the patient critically-damped settle (--ease-convergence alias); slow inertial arrival, ζ=1.0 (NO overshoot by definition — the convergence-reveal depends on it). BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "dock",
+		response: .68,
+		dampingFraction: .64,
+		comment: "DOCK register — THE WEIGHTY GOOEY MORPH (collapse/expand + V↔H + fission + in-situ shell): slow inertial mass, the settle a graceful +7.3% (un-pointed liquid), the 'MORPH MORE on move' reference. BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "press",
+		response: .2,
+		dampingFraction: .8,
+		comment: "PRESS register — the iOS interactive tap (useSpringPress + --glass-btn-press-t): a hair of inertial carry (sub-200ms iOS window) + a tiny alive rebound (+1.5%); the interruptible re-seat keeps the gesture continuous. BD.W-ANIM-IOS27-TUNE"
+	},
+	{
+		name: "timeline-head",
+		response: .34,
+		dampingFraction: .74,
+		comment: "TIMELINE-HEAD register — the ScrubberTimeline warm-glass lozenge travel (LEG-2): the head LAGS the pointer a hair then settles with a whisper of fling-overshoot (+3.2%). The fast head clock the fill trails. BD.W-TIMELINE-RAIL-UNIFY"
+	},
+	{
+		name: "timeline-fill",
+		response: .46,
+		dampingFraction: .82,
+		comment: "TIMELINE-FILL register — the ScrubberTimeline lane fill (LEG-2): a slower clock than the head so the fill TRAILS the bead (the lane reads as liquid trailing), settling with a hint of carry (+1.1%). BD.W-TIMELINE-RAIL-UNIFY"
+	},
+	{
+		name: "timeline-press",
+		response: .22,
+		dampingFraction: .7,
+		comment: "TIMELINE-PRESS register — the ScrubberTimeline grab-anticipation (LEG-2): the head's pointerdown squash on the cartoon-punch clock, a crisp short-response press settle (+4.6%) feeding the --scale-press dip. BD.W-TIMELINE-RAIL-UNIFY"
+	}
+];
+function t(t) {
+	let n = e.find((e) => e.name === t);
+	if (!n) throw Error(`Unknown spring preset: ${t}`);
+	return n;
+}
+//#endregion
+export { t as n, e as t };

package/dist/stacked-icons.js

@@ -1,9 +1,9 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, withCtx as m } from "vue";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, withCtx as h } from "vue";
 //#region src/components/custom/stacked-icons/StackedIconGroup.vue?vue&type=script&setup=true&lang.ts
-var h = {
+var g = {
 	key: 1,
 	style: { zIndex: 0 }
-}, g = /* @__PURE__ */ o({
+}, _ = /* @__PURE__ */ s({
 	__name: "StackedIconGroup",
 	props: {
 		items: {},
@@ -21,63 +21,78 @@ var h = {
 		as: { default: "div" },
 		keyFn: {}
 	},
-	setup(o) {
-		let g = o, _ = t(() => {
-			switch (g.size) {
+	setup(s) {
+		let _ = s, v = t(() => {
+			switch (_.size) {
 				case "sm": return "h-6 w-6";
 				case "md": return "h-8 w-8";
 				case "lg": return "h-10 w-10";
 			}
-		}), v = t(() => {
-			if (g.direction === "vertical") switch (g.size) {
+		}), y = t(() => {
+			if (_.direction === "vertical") switch (_.size) {
 				case "sm": return "-mt-(--stack-overlap-sm)";
 				case "md": return "-mt-(--stack-overlap-md)";
 				case "lg": return "-mt-(--stack-overlap-lg)";
 			}
-			switch (g.size) {
+			switch (_.size) {
 				case "sm": return "-ml-(--stack-overlap-sm)";
 				case "md": return "-ml-(--stack-overlap-md)";
 				case "lg": return "-ml-(--stack-overlap-lg)";
 			}
-		}), y = t(() => g.items.slice(0, g.maxVisible)), b = t(() => Math.max(0, g.items.length - g.maxVisible));
-		return (t, g) => (l(), n(f(o.as), { class: s([
-			"group/stack relative isolate flex",
-			o.direction === "vertical" ? "flex-col" : "items-center",
-			o.reversed ? o.direction === "vertical" ? "flex-col-reverse" : "flex-row-reverse" : ""
-		]) }, {
-			default: m(() => [
-				(l(!0), i(e, null, u(y.value, (e, n) => (l(), i("div", {
-					key: o.keyFn?.(e, n) ?? n,
-					class: s([
-						_.value,
-						"relative flex items-center justify-center rounded-pill transform-gpu",
-						"transition-[transform,box-shadow,opacity] duration-fast ease-spring-snappy",
-						n > 0 ? v.value : "",
-						o.expandOnHover && n > 0 ? o.direction === "vertical" ? "group-hover/stack:translate-y-1.5 group-hover/stack:scale-105" : "group-hover/stack:translate-x-1.5 group-hover/stack:scale-105" : ""
+		}), b = t(() => _.items.slice(0, _.maxVisible)), x = t(() => Math.max(0, _.items.length - _.maxVisible)), S = t(() => {
+			let e = b.value.length + +(x.value > 0);
+			return Math.max(1, e - 1);
+		});
+		return (t, _) => (u(), n(p(s.as), {
+			class: c(["stacked-icon-group group/stack relative isolate flex", [s.direction === "vertical" ? "flex-col" : "items-center", s.reversed ? s.direction === "vertical" ? "flex-col-reverse" : "flex-row-reverse" : ""]]),
+			"data-direction": s.direction,
+			style: l({ "--n": S.value })
+		}, {
+			default: h(() => [
+				(u(!0), i(e, null, d(b.value, (e, n) => (u(), i("div", {
+					key: s.keyFn?.(e, n) ?? n,
+					class: c([
+						v.value,
+						"stacked-icon-puck relative flex items-center justify-center rounded-pill transform-gpu",
+						n > 0 ? y.value : "",
+						s.expandOnHover && n > 0 ? "stacked-icon-puck--fan" : ""
 					]),
-					style: c({ zIndex: y.value.length + 1 - n })
-				}, [d(t.$slots, "icon", {
+					style: l({
+						zIndex: b.value.length + 1 - n,
+						"--i": n
+					})
+				}, [f(t.$slots, "icon", {
 					item: e,
 					index: n
 				})], 6))), 128)),
-				b.value > 0 ? (l(), i("div", {
+				x.value > 0 ? (u(), i("div", {
 					key: 0,
-					class: s([
-						_.value,
-						"relative flex items-center justify-center rounded-pill",
-						"border-2 border-background bg-[color-mix(in_srgb,var(--background)_96%,transparent)] text-xs font-semibold text-muted-foreground/60 shadow-cartoon-sm",
-						"transform-gpu transition-[background-color,color,transform,box-shadow] duration-fast ease-spring-snappy",
-						"hover:bg-background hover:text-muted-foreground hover:shadow-cartoon-md",
+					class: c([
 						v.value,
-						o.expandOnHover ? o.direction === "vertical" ? "group-hover/stack:translate-y-1.5 group-hover/stack:scale-105" : "group-hover/stack:translate-x-1.5 group-hover/stack:scale-105" : ""
+						"stacked-icon-puck stacked-icon-overflow glass-capsule glass-atom",
+						"relative flex items-center justify-center rounded-pill text-xs font-semibold text-muted-foreground",
+						"transform-gpu",
+						y.value,
+						s.expandOnHover ? "stacked-icon-puck--fan" : ""
 					]),
-					style: { zIndex: 1 }
-				}, [d(t.$slots, "overflow", { count: b.value }, () => [a(" +" + p(b.value), 1)])], 2)) : r("", !0),
-				b.value === 0 && t.$slots.info ? (l(), i("div", h, [d(t.$slots, "info")])) : r("", !0)
+					style: l({
+						zIndex: 1,
+						"--i": b.value.length
+					}),
+					"data-cast": ""
+				}, [_[0] ||= a("span", {
+					class: "cartoon-cast",
+					"aria-hidden": "true"
+				}, null, -1), f(t.$slots, "overflow", { count: x.value }, () => [o(" +" + m(x.value), 1)])], 6)) : r("", !0),
+				x.value === 0 && t.$slots.info ? (u(), i("div", g, [f(t.$slots, "info")])) : r("", !0)
 			]),
 			_: 3
-		}, 8, ["class"]));
+		}, 8, [
+			"class",
+			"data-direction",
+			"style"
+		]));
 	}
 });
 //#endregion
-export { g as StackedIconGroup };
+export { _ as StackedIconGroup };

package/dist/styles/cards.css

@@ -6,6 +6,122 @@
  * only the 5-rung glass ladder. */
 
 @layer components {
+    /* ── BD.W-CARD-MATERIAL-FLOOR — the card-surface warm tint-seam enrollment ──
+       The §4 leg-(a) material floor, reconciled to the SHIPPED `--glass-tint-*`
+       seam (NOT a fork, NOT a global re-tint). The card's glass/cartoon surfaces
+       ride the `.glass-${tier}` ladder rung, whose fill is already
+       `color-mix(in oklab, --glass-bg-${tier}, --glass-tint-source --glass-tint-
+       strength)` (ladder.css) — so the card reaches the warm floor by setting a
+       CARD-LOCAL non-zero `--glass-tint-strength` (the global default at
+       surface-axis.css:83 stays `0%`, so the 6 other seam-readers — drawer / menu /
+       veil / jubilance / .btn-glass / .segmented-indicator — are byte-unchanged:
+       the blast-radius bite). `--glass-tint-source` defaults to `var(--card)` (a
+       warm cream, glass-fx.css:158), so the floor is warm by construction in BOTH
+       modes. The card clears the warm-chroma floor (C ≥ 0.02 warm) in the MATERIAL
+       itself — before the field even lands, and on a dead ground (print / reduced-
+       transparency), the "far too gray" verdict closes at the material layer.
+
+       SCOPE — `[data-surface]` is `glass` or `cartoon` (NOT `veil`: veil owns its
+       own `--veil-bg` tint seam below; NOT `opaque`: the solid `--card` plate is
+       already warm-cream). The strength is set on the host so it inherits into the
+       rung's `color-mix`. This is a card-local re-point of the SHIPPED seam — DRY,
+       no second compositing axis, the ladder rung does the mix. */
+    [data-slot="card"]:where(
+        [data-surface="glass"],
+        [data-surface="cartoon"]
+    ) {
+        --glass-tint-strength: 8%;
+        /* BD.W-CARD-CEL-MOTION (§3.1) — the defined-edge border-ink floor. The
+           ladder rung's `--glass-border-resting`/`-quiet` ink is 4% warm
+           (glass.css:331-332) — it vanishes cream-on-cream (K3 RED). Floor the
+           card's own border-ink UP to ≥8% warm-ink so the cel reads as a defined
+           SHAPE (WCAG 1.4.11 non-text). `--glass-border-rung` is the per-rung ink
+           the accent-composed `--glass-border-accent` reads (ladder.css /
+           surfaces.css); re-pointing it card-locally floors the border WITHOUT
+           forking the rim (the keyed two-stop rim from `--glass-material-rim` is
+           CONSUMED unchanged — the card does NOT re-mint a rim). Warm (the
+           `--foreground` mix is warm-cream in both modes); the `.dark` ink lifts
+           off the near-black field through the same `--foreground` flip. */
+        --glass-border-rung: color-mix(in srgb, var(--foreground) 9%, transparent);
+    }
+
+    /* BD.W-CARD-CEL-MOTION (§3.2) — the inner catch-light over the field. A faint
+       `screen`-blended warm catch sits where the upper-right `--glass-key` sun
+       hits, lifting the cel off the field (the §3 layer-4 catch, coherent with the
+       rim + cast — ONE key). It rides the host `background-image` stack ALONGSIDE
+       the field underlayer (both are static gradients in the same longhand; the
+       catch is the FIRST layer so it sits over the warm underlayer), so it adds NO
+       pseudo (`::before` = moving specular, `::after` = grain — both occupied).
+       `screen` lifts only where there is light, never darkening — and it is below
+       content + clipped to the host radius, so it never washes the text column
+       (the K-AA carve). Under `prefers-contrast: more` the screen blend is dropped
+       (the catch is decoration, the edge is the legibility asset). */
+    [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        background-blend-mode: screen, normal;
+    }
+    @media (prefers-contrast: more) {
+        [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+            background-blend-mode: normal;
+        }
+    }
+
+    /* ── BD.W-CARD-FIELD-FLOOR — the orphan-card static warm field underlayer ──
+       The §2 leg-(b) structural contract, card-local fallback. The COMMON case is
+       ancestor-supplied: the page mounts ONE global `[data-paper-field]` plane
+       (AppShell) behind every route, and the card composites over it. The ORPHAN
+       case is a card in an OCCLUDING context an ancestor field cannot reach (a
+       dialog / drawer / portal that paints its own opaque ground over the page
+       field) — there the card mounts its OWN cheap static warm underlayer so it is
+       NEVER gray-over-nothing wherever it is dropped.
+
+       MECHANISM — ONE static `radial-gradient` on the host `background-image`
+       longhand (the proven `.paper-grid` coexistence seam: a later
+       `background-image` COEXISTS with the glass tier's `background:` shorthand
+       fill — paints OVER the translucent color, UNDER content + UNDER both
+       pseudos, clipped to the host `border-radius` by construction). Zero JS, one
+       compositor-cached paint, PRM-static. The warm 0-alpha stops are explicit
+       `oklch(L C H / 0)` (NEVER bare `transparent` — the WebKit black-premultiply
+       hole, build-trap-(d)).
+
+       THE NO-DOUBLE-PAINT GATE (the presence-BEHIND check, NOT `closest()`): the
+       fallback paints ONLY when NO `[data-paper-field]` ancestor is present — `:where(
+       [data-paper-field]) &` switches it OFF under the global field, so a card over
+       the page field reads the page field (no local underlayer), and a 50-card grid
+       under ONE ancestor field is ONE field paint, not N. A `cartoon`/`opaque`
+       card already carries a defined edge + warm fill, so the orphan field is the
+       glass-surface case; `surface="glass"` only (the orphan glass card is the one
+       that reads gray-over-nothing). The `.paper-grid` document register is EXCLUDED
+       by selector (it sets its own grid `background-image` underlayer — a grid card
+       opts out of the warm-field fallback, not a `background-image: none` race). */
+    [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        /* TWO static layers in ONE longhand (blended by the `background-blend-mode`
+           above — `screen, normal`): (1) the upper-right KEYED catch-light (warm,
+           `screen`-blended so it only LIFTS — the §3 catch), then (2) the warm cel
+           UNDERLAYER (one radial, amber-key toward the upper-right `--glass-key`,
+           the field fallback). Both fade to a warm 0-alpha — NEVER bare
+           `transparent` (the WebKit black-premultiply hole, build-trap-(d)). */
+        background-image:
+            radial-gradient(
+                60% 55% at 80% 16%,
+                oklch(0.96 0.04 78 / 0.5),
+                oklch(0.96 0.04 78 / 0) 72%
+            ),
+            radial-gradient(
+                120% 110% at 78% 22%,
+                oklch(0.9 0.075 72 / 0.5),
+                oklch(0.9 0.075 72 / 0) 70%
+            );
+    }
+
+    /* The presence-behind gate — under an ancestor field, the card reads the REAL
+       field (the page plane transmits through the translucent fill), so the local
+       fallback is switched OFF (no double paint). A 50-card grid under ONE ancestor
+       field is ONE field paint, not N local underlayers. */
+    :where([data-paper-field])
+        [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
+        background-image: none;
+    }
+
     /* Paper texture overlay */
     .paper-texture {
         background-image: var(--paper-clean-texture);
@@ -182,13 +298,97 @@
        a card surface that often hosts portaled content; `translate: 0` at rest
        mints the stacking context once. Longhand maps `translate(x, y)` 1:1. */
     translate: 0;
+    position: relative;
+    /* BD.W-CARTOON-CASTER — the LOUD register carries `--motion-weight: 1` in the
+       SAME recipe (the loud-register coupling: so the punch is never accidentally
+       muted to ~+13.6% by inheriting the rest 0.618 — the BD.W-CARTOON-PUNCH
+       loud-register guard's concrete pass-subject). The press ramp ALIASES the
+       existing `--card-press-t` (the host's `useLiquidPress` already drives it for
+       every `pressable` card) — NO second press var, NO Card press-driver rewrite. */
+    --motion-weight: 1;
+    --cartoon-press-t: var(--card-press-t, 0);
     transition:
-        translate var(--duration-normal) var(--spring-smooth),
+        translate var(--duration-normal) var(--ease-cartoon-punch),
+        scale var(--duration-normal) var(--ease-cartoon-punch),
         box-shadow var(--duration-normal) var(--ease-standard);
 
-    &:hover:not(:disabled) {
+    /* BD.W-CARTOON-CASTER — the hover RE-POINTS the existing rule onto the punch
+       curve (was --spring-smooth) and guards `:not(:active)` so the press squash wins;
+       the object lifts a hair UP-RIGHT (toward the upper-right `--glass-key`) and the
+       cast deepens to the lg rung (the gap opens). ONE hover rule, no double-declare. */
+    &:hover:not(:active):not(:disabled) {
         translate: var(--lift-sm) var(--lift-sm);
+        /* BD.W-CARD-CEL-MOTION (§5) — the cel lifts toward the light with a
+           sub-perceptual VOL-PRESERVING scale (X·Y ≈ 1: 1.015 × 0.985 ≈ 1.0): the
+           cel rising toward its sun reads as PEELING off the field, not a flat
+           sticker slide. Composes the existing `scale` transition (declared above)
+           on the punch curve. The press squash (`scale: 1.04 0.94`) wins via
+           `:not(:active)`. */
+        scale: 1.015 0.985;
         box-shadow: var(--shadow-cartoon-lg);
+        & .cartoon-cast {
+            box-shadow: var(--shadow-cartoon-lg);
+        }
+    }
+
+    /* BD.W-CARTOON-CASTER — the press is a NON-uniform SQUASH (H5): widen X, compress
+       Y — real squash & stretch, NOT a uniform shrink. The CSS `:active` is the no-JS
+       floor; `useLiquidPress` drives `--card-press-t` 0→1 for the continuous
+       interruptible press the inert caster rides. */
+    &:active:not(:disabled) {
+        scale: 1.04 0.94;
+    }
+}
+
+/* ── BD.W-CARTOON-CASTER — the inert-child moving cel cast ───────────────────────
+   The cast rides an INERT `<span class="cartoon-cast" aria-hidden>` child the Card
+   emits when `surface="cartoon"` — NOT a `::before`/`::after` pseudo (both are
+   OCCUPIED on the real glass carrier: `::before` is the moving-specular catch-light,
+   `::after` is the grain overlay; the H2 hardening). The child is a self-contained
+   ink-plate the body floats above: it carries the SAME shipped `--shadow-cartoon-md`
+   box-shadow (set ONCE per state-flip — NEVER animated, the §L7 paint-fence) and
+   MOVES on the compositor via `translate`/`scale` only.
+
+   The cast travels DOWN-LEFT (opposite the upper-right `--glass-key`, coherent with
+   the shadow.css cel-ink geometry) as the body lifts, and SPREADS as the gap opens.
+   ONE scalar drive: `--cartoon-press-t × --motion-weight` (the `:root` PRM carve
+   zeroes `--motion-weight` → travel/spread collapse to rest). It LAGS the body
+   (~1.15× slower transition) → the ink recoils LATE on release (follow-through /
+   overlapping action). The `--cartoon-cast-dx/dy` drag-track deltas are 0 at rest
+   (the opt-in `useCartoonCast` DOM bridge is future — labeled honestly). */
+.cartoon-cast {
+    position: absolute;
+    inset: 0;
+    z-index: -1; /* behind the cel face, in front of the page */
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: var(--shadow-cartoon-md);
+    /* the derived offset + spread — read `--motion-weight × --cartoon-press-t`. The
+       sign is DOWN-LEFT (negative X, positive Y) to match the upper-right key. */
+    --cast-travel: calc(6px * var(--motion-weight) * var(--cartoon-press-t));
+    --cast-spread: calc(1 + 0.18 * var(--motion-weight) * var(--cartoon-press-t));
+    translate:
+        calc(-1 * var(--cast-travel) + var(--cartoon-cast-dx))
+        calc(var(--cast-travel) + var(--cartoon-cast-dy));
+    scale: var(--cast-spread);
+    /* the caster LAGS the body (~1.15×) → the late ink recoil on release. */
+    transition:
+        translate calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch),
+        scale calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch),
+        --cartoon-cast-dx var(--duration-normal) var(--ease-cartoon-punch),
+        --cartoon-cast-dy var(--duration-normal) var(--ease-cartoon-punch);
+    will-change: translate, scale;
+}
+
+/* BD.W-CARTOON-CASTER — PRM/PRT carve. Under reduced-motion `--motion-weight: 0`
+   zeroes travel/spread/squash/lag in ONE assignment (every `calc(… * --motion-weight)`
+   collapses to rest); the transition is killed. The static bold cel STAMP persists
+   (identity/legibility — only the TRAVEL/PUNCH is removed). */
+@media (prefers-reduced-motion: reduce) {
+    .cartoon-surface,
+    .cartoon-cast {
+        --motion-weight: 0;
+        transition: none;
     }
 }