@mkbabb/glass-ui 5.0.0 → 6.0.0

package/dist/useLiquidPress-BXNHydZh.js

@@ -1,40 +0,0 @@
-import { t as e } from "./useSpringPress-BypV_KO-.js";
-import { t } from "./useLiquidFlex-Ch4exNvN.js";
-import { n } from "./writeVelocityWeight-D1rvdxJu.js";
-import { computed as r, watch as i } from "vue";
-//#region src/composables/motion/useLiquidPress.ts
-function a(a = {}) {
-	let o = a.shrinkDepth ?? .03, s = a.maxStretch ?? 1.04, c = a.pressVar ?? "--press-t", l = a.engageThreshold ?? .001, u = a.squish !== !1, d = e({
-		response: a.response,
-		dampingFraction: a.dampingFraction,
-		initial: a.initial,
-		initialVelocity: a.initialVelocity,
-		settleThreshold: a.settleThreshold,
-		velocitySettleThreshold: a.velocitySettleThreshold,
-		respectReducedMotion: a.respectReducedMotion,
-		onValue: a.onValue
-	}), f = u ? t({
-		from: 0,
-		to: 1,
-		axis: "width",
-		maxStretch: () => n(a.el?.value ?? null, s),
-		squishLaw: "linear"
-	}) : null;
-	f && i(() => d.value.value, (e) => f.squish(e), {
-		immediate: !0,
-		flush: "sync"
-	});
-	let p = r(() => {
-		let e = d.value.value, t = f ? f.stretch.value : 1, n = 1 - e * o, r = (n * t).toFixed(4), i = (n / t).toFixed(4), a = { [c]: e.toFixed(4) };
-		return f && (a["--flex-vel"] = f.flexVel.value.toFixed(4)), e > l && (a.scale = `${r} ${i}`), a;
-	});
-	return {
-		value: d.value,
-		press: d.press,
-		release: d.release,
-		handlers: d.handlers,
-		pressStyle: p
-	};
-}
-//#endregion
-export { a as t };

package/dist/useTextHighlight-C46Le9u_.js

@@ -1,72 +0,0 @@
-import { getCurrentScope as e, onScopeDispose as t } from "vue";
-//#region src/composables/motion/useTextHighlight.ts
-var n = /* @__PURE__ */ new Map();
-function r() {
-	return typeof CSS < "u" && "highlights" in CSS && typeof globalThis.Highlight == "function";
-}
-function i(e) {
-	let t = n.get(e);
-	if (!t || t.size === 0) {
-		CSS.highlights.delete(e);
-		return;
-	}
-	let r = new Highlight();
-	for (let e of t) for (let t of e.ranges) r.add(t);
-	CSS.highlights.set(e, r);
-}
-function a(e, t) {
-	let n = t.trim().toLowerCase();
-	if (!n) return [];
-	let r = e.toLowerCase(), i = [], a = 0;
-	for (;;) {
-		let e = r.indexOf(n, a);
-		if (e === -1) break;
-		i.push({
-			start: e,
-			end: e + n.length
-		}), a = e + n.length;
-	}
-	return i;
-}
-function o(o) {
-	let s = r(), c = null;
-	function l() {
-		if (c) return c;
-		c = { ranges: [] };
-		let e = n.get(o);
-		return e || (e = /* @__PURE__ */ new Set(), n.set(o, e)), e.add(c), c;
-	}
-	function u(e) {
-		s && (l().ranges = e.slice(), i(o));
-	}
-	function d(e, t, n = a) {
-		if (!s) return;
-		let r = [], i = document.createTreeWalker(e, NodeFilter.SHOW_TEXT);
-		for (let e = i.nextNode(); e; e = i.nextNode()) {
-			let i = e.textContent ?? "";
-			if (i) for (let a of n(i, t)) {
-				if (a.start >= a.end) continue;
-				let t = document.createRange();
-				t.setStart(e, a.start), t.setEnd(e, a.end), r.push(t);
-			}
-		}
-		u(r);
-	}
-	function f() {
-		!s || !c || (c.ranges = [], i(o));
-	}
-	function p() {
-		if (!s || !c) return;
-		n.get(o)?.delete(c), i(o);
-		let e = n.get(o);
-		e && e.size === 0 && n.delete(o), c = null;
-	}
-	return e() && t(p), {
-		set: u,
-		setFromMatches: d,
-		clear: f,
-		supported: s
-	};
-}
-//#endregion
-export { o as t };

package/dist/useViewportReady-c0isoKL8.js

@@ -1,191 +0,0 @@
-import { getCurrentScope as e, onMounted as t, onScopeDispose as n, readonly as r, ref as i, toValue as a, watch as o } from "vue";
-//#region src/composables/dom/useTokenColor.ts
-function s(r, s = {}) {
-	let c = s.fallback ?? "", l = i(c), u = s.resolver ?? ((e, t) => getComputedStyle(t ?? document.documentElement).getPropertyValue(e));
-	function d() {
-		let e = a(r);
-		return !e || !s.resolver && typeof document > "u" ? c : u(e, (s.element ? a(s.element) : null) ?? (typeof document < "u" ? document.documentElement : void 0) ?? void 0 ?? void 0).trim() || c;
-	}
-	function f() {
-		l.value = d();
-	}
-	if (f(), t(f), typeof document < "u") {
-		let t = new MutationObserver(f);
-		t.observe(document.documentElement, {
-			attributes: !0,
-			attributeFilter: ["class"]
-		});
-		let r = typeof window < "u" && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
-		r?.addEventListener?.("change", f), e() && n(() => {
-			t.disconnect(), r?.removeEventListener?.("change", f);
-		});
-	}
-	return o(() => a(r), f), s.element !== void 0 && o(() => a(s.element), f), {
-		value: l,
-		refresh: f
-	};
-}
-//#endregion
-//#region src/composables/dom/useClipboard.ts
-async function c(e) {
-	if (typeof navigator > "u" || !navigator.clipboard?.writeText) return {
-		ok: !1,
-		reason: "no-api"
-	};
-	try {
-		return await navigator.clipboard.writeText(e), { ok: !0 };
-	} catch {
-		return {
-			ok: !1,
-			reason: "clipboard-api"
-		};
-	}
-}
-function l(e) {
-	if (typeof document > "u") return {
-		ok: !1,
-		reason: "no-api"
-	};
-	let t = document.createElement("textarea");
-	t.value = e, t.setAttribute("readonly", ""), t.style.position = "fixed", t.style.top = "-9999px", document.body.appendChild(t), t.select();
-	let n = !1;
-	try {
-		n = document.execCommand("copy");
-	} catch {
-		n = !1;
-	}
-	return document.body.removeChild(t), n ? { ok: !0 } : {
-		ok: !1,
-		reason: "exec-command"
-	};
-}
-async function u(e, t) {
-	let n = await c(e);
-	if (n.ok) return n;
-	let r = l(e);
-	if (r.ok) return r;
-	let i = r.reason ?? n.reason ?? "no-api";
-	return t?.(i), {
-		ok: !1,
-		reason: i
-	};
-}
-async function d(e, t = {}) {
-	let { ok: n } = await u(e, t.onCopyError);
-	return n;
-}
-function f(e = {}) {
-	let t = e.resetMs ?? 1500, r = i(!1), a = null;
-	function o() {
-		a != null && (clearTimeout(a), a = null);
-	}
-	async function s(n) {
-		let i = await u(n, e.onCopyError);
-		return i.ok && (r.value = !0, o(), a = setTimeout(() => {
-			r.value = !1, a = null;
-		}, t)), i;
-	}
-	return n(o), {
-		copied: r,
-		copy: s
-	};
-}
-//#endregion
-//#region src/composables/dom/useBreakpoint.ts
-function p(t) {
-	let a = i(!1), o = null;
-	function s(e) {
-		a.value = e.matches;
-	}
-	function c() {
-		typeof window > "u" || !window.matchMedia || (o = window.matchMedia(t), a.value = o.matches, o.addEventListener("change", s));
-	}
-	function l() {
-		o?.removeEventListener("change", s), o = null;
-	}
-	return e() && n(l), c(), {
-		matches: r(a),
-		stop: l
-	};
-}
-//#endregion
-//#region src/composables/dom/useIdleReady.ts
-function m(t = {}) {
-	let r = t.timeout ?? 2e3, a = i(!1), o = null, s = null, c = !1;
-	function l() {
-		c || a.value || (a.value = !0, t.onReady?.(), u());
-	}
-	function u() {
-		o !== null && typeof window < "u" && "cancelIdleCallback" in window && (window.cancelIdleCallback(o), o = null), s !== null && (clearTimeout(s), s = null);
-	}
-	function d() {
-		if (!c) {
-			if (typeof window > "u") {
-				l();
-				return;
-			}
-			"requestIdleCallback" in window ? o = window.requestIdleCallback(l, { timeout: r }) : s = setTimeout(l, 0);
-		}
-	}
-	d();
-	function f() {
-		c || (c = !0, u());
-	}
-	return e() && n(f), {
-		ready: a,
-		stop: f
-	};
-}
-//#endregion
-//#region src/composables/dom/useViewportReady.ts
-function h(t, r = {}) {
-	let a = r.rootMargin ?? "200px", s = r.idleTimeout ?? 1e4, c = r.threshold ?? .01, l = i(!1), u = null, d, f = null, p = null, m = !1;
-	function h() {
-		m || l.value || (l.value = !0, _());
-	}
-	function g() {
-		if (!m) {
-			if (typeof window > "u") {
-				h();
-				return;
-			}
-			"requestIdleCallback" in window ? f = window.requestIdleCallback(h, { timeout: s }) : p = setTimeout(h, 16);
-		}
-	}
-	function _() {
-		u &&= (u.disconnect(), null), f !== null && typeof window < "u" && "cancelIdleCallback" in window && (window.cancelIdleCallback(f), f = null), p !== null && (clearTimeout(p), p = null);
-	}
-	function v(e) {
-		if (typeof window > "u" || !("IntersectionObserver" in window)) {
-			g();
-			return;
-		}
-		u = new IntersectionObserver((e) => {
-			if (!m) {
-				for (let t of e) if (t.isIntersecting) {
-					g(), u?.disconnect(), u = null;
-					break;
-				}
-			}
-		}, {
-			rootMargin: a,
-			threshold: c
-		}), u.observe(e);
-	}
-	function y(e) {
-		m || l.value || d !== void 0 && d === e || (_(), d = e, e ? v(e) : g());
-	}
-	y(t.value);
-	let b = o(t, (e) => {
-		y(e);
-	}, { flush: "post" });
-	function x() {
-		m || (m = !0, b(), _());
-	}
-	return e() && n(x), {
-		ready: l,
-		stop: x
-	};
-}
-//#endregion
-export { f as a, d as i, m as n, s as o, p as r, h as t };

package/src/styles/card-scroll.css

@@ -1,189 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────────
- * card-scroll.css — the EXTERNALIZED <CardHeader shrink> scroll-choreography
- * (BG.W-SCROLL-SHRINK-UNIFY — the card scroll-shrink lifted out of the
- * CardHeader.vue <style scoped> block into ONE global, un-hashed home).
- *
- * WHY EXTERNAL (the encapsulation restore): the choreography WAS a scoped SFC
- * block whose @keyframes names were Vue-scope-HASHED and whose slotted-content
- * lanes needed the :slotted() escape. Externalized here it is un-hashed AND
- * reaches the light-DOM slotted <CardTitle>/<CardDescription> via a PLAIN
- * descendant selector (a GLOBAL file carries no data-v-… scope hash, so the
- * plain `.card-header--shrink > [data-slot=…]` is the CORRECT form — it matches
- * the slotted child with no hash to require).
- *
- * THE DRY FOLD (the UNIFY): the lane-2 title SCALE leg is shared with the
- * page/hero large-title collapse (demo/stories/story-hero.css) via ONE
- * @keyframes title-collapse — the card supplies --title-collapse-scale: 0.695
- * (= --card-title-shrink-ratio), the page/hero supply 0.82. Only the SCALE leg
- * is shared (a byte-identical scale-only keyframe); the hero keeps its OWN
- * translate leg (story-hero-shrink-lift). NOT "one keyframe family" — one shared
- * scale keyframe + per-surface translate.
- *
- * COMPOSITOR-ONLY (BB.W-CARD-COMPOSITE — the proof:no-layout-animation floor):
- * every lane animates scale / transform / opacity ONLY — ZERO reflow per scroll
- * frame (the A'-3 CLS 1.03 defect made structurally impossible). The scrub ease
- * is the NO-OVERSHOOT --card-shrink-ease (re-pointed OFF the retired
- * --ease-cartoon-punch — a scroll SCRUB must be monotonic; an anticipation-pop /
- * overshoot on a scrub is the §12-LAWS proportion fence: cartoon-punch belongs
- * on STATE-CHANGE beats, never a scroll scrub, and a non-monotonic curve breaks
- * the monotonic-scrub bar).
- *
- * PRM is the OUTER gate (§Scope 4): the whole
- * @supports (animation-timeline: scroll()) block sits under
- * prefers-reduced-motion: no-preference, so under reduce NO scroll animation
- * binds AT ALL and the header renders in its terminal rest state (full top
- * space, full title size, full description visibility). No JS fallback + no
- * `animation-duration: 0.01ms` stub is needed — the outer gate is the primary
- * AND complete contract.
- *
- * REQUIRED ANCESTOR: `.card-scroll-host` on the scroll-overflow ancestor (the
- * <ScrollCard> owns it) emits the --card-scroll named scroll-timeline. Without
- * that host the named timeline never emits and the choreography sits idle.
- * ───────────────────────────────────────────────────────────────────────────── */
-
-.card-header--shrink {
-    /* --card-title-shrink-ratio is the lane-2 scale ratio pinned from the resolved
-       type tokens at the default scale: --type-prose floor (18px) ÷ --type-heading
-       (25.9px) ≈ 0.695. A STATIC scalar (NEVER a per-frame font-size re-measure);
-       --type-prose is a clamp() so the ratio cannot be CSS-divided live — it is the
-       pinned reference knob. It feeds the shared @keyframes title-collapse via
-       --title-collapse-scale (a consumer whose --ui-scale moves the tokens off this
-       ratio overrides --card-title-shrink-ratio, a NAMED knob — never a fallback to a
-       font-size animation). */
-    --card-title-shrink-ratio: 0.695;
-    --title-collapse-scale: var(--card-title-shrink-ratio);
-    /* the scrub ease is NO-OVERSHOOT: a scroll scrub maps scroll → animation-progress
-       monotonically, so the timing function must be strictly monotone (the retired
-       --ease-cartoon-punch anticipation/overshoot made the title scale up-then-down
-       past a scroll point — the non-monotonic-scrub defect). */
-    --card-shrink-ease: var(--ease-out, linear);
-    /* the stuck-header backplate reads a KEYED warm-glass floating plate (the same
-       --glass-tint-* warm-admit seam the card body reads — the W55 tinted floating
-       rung). Card-LOCAL re-point of --card-header-bg (the shared shadow.css token is
-       READ-ONLY); a consumer override on the host still wins (higher specificity /
-       inline). */
-    --card-header-bg: color-mix(
-        in oklab,
-        var(--glass-bg-floating),
-        var(--glass-tint-source) var(--glass-tint-strength)
-    );
-    position: relative;
-    transform-origin: top;
-}
-
-/* lane 4 base — the stuck-header background is a scroll-driven LIFT, not a static
-   tint. A ::before BACKPLATE carries the --card-header-bg tint and fades
-   opacity: 0 → 1 on the --card-scroll timeline, so a stuck header reads transparent
-   over the body at scroll-top and lifts to the painted tint as it sticks. The
-   opacity channel is compositor-safe; the backplate sits BEHIND the slotted content
-   (z-index 0), so it never occludes the title/description. */
-.card-header--shrink::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    background: var(--card-header-bg);
-    opacity: 0;
-    border-radius: inherit;
-    pointer-events: none;
-}
-
-/* the slotted content sits ABOVE the scroll-driven backplate. */
-.card-header--shrink > * {
-    position: relative;
-    z-index: 1;
-}
-
-/* lane-3 base: the description is a transform-collapsible block. transform-origin:
-   top so the scaleY collapse retires it UPWARD (toward the title), not toward its
-   own center. */
-.card-header--shrink > [data-slot="card-description"] {
-    transform-origin: top;
-    will-change: transform, opacity;
-}
-
-/* ── The keyframes (un-hashed, global) — every step animates a compositor-safe
-   channel ONLY (scale / transform / opacity), the proof:no-layout-animation floor. ── */
-
-/* THE SHARED scale keyframe (BG.W-SCROLL-SHRINK-UNIFY) — the card title lane AND the
-   page/hero large-title collapse both ride this ONE keyframe, each supplying its own
-   --title-collapse-scale (card 0.695 / page-hero 0.82). The `scale:` LONGHAND (not the
-   `transform` shorthand) so it stacks independently of any per-surface `translate`
-   leg — the scroll-choreography.css `.scroll-pin` longhand idiom. transform-origin is
-   set per-consumer on the animated element (left top on the card title). */
-@keyframes title-collapse {
-    to {
-        scale: var(--title-collapse-scale, 0.82);
-    }
-}
-
-/* lane 1 — header content compress: the header content slides up via translateY so
-   the top breathing room visually compresses; the header BOX keeps its layout size
-   (no padding reflow). */
-@keyframes card-header-shrink {
-    from {
-        transform: translateY(0);
-    }
-    to {
-        transform: translateY(-0.5rem);
-    }
-}
-
-/* lane 4 — the scroll-driven header background LIFT (opacity on the backplate). */
-@keyframes card-header-bg-lift {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-/* lane 3 — description retire: opacity fade + scaleY collapse (origin top), the
-   real-estate reclaim COMPOSITED (never a grid-template-rows relayout). */
-@keyframes card-desc-shrink {
-    from {
-        opacity: 1;
-        transform: scaleY(1);
-    }
-    to {
-        opacity: 0;
-        transform: scaleY(0);
-    }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-        /* lane 1 — header content compress. */
-        .card-header--shrink {
-            animation: card-header-shrink var(--card-shrink-ease) both;
-            animation-timeline: --card-scroll;
-            animation-range: 0px 120px;
-        }
-
-        /* lane 4 — the scroll-driven header background LIFT. */
-        .card-header--shrink::before {
-            animation: card-header-bg-lift var(--card-shrink-ease) both;
-            animation-timeline: --card-scroll;
-            animation-range: 0px 120px;
-        }
-
-        /* lane 2 — title shrink-in-place via the SHARED title-collapse SCALE keyframe;
-           the text run lays out ONCE at --type-heading, the scroll-timeline only
-           composites the scale (transform-origin left top anchors the leading edge). */
-        .card-header--shrink > [data-slot="card-title"] {
-            animation: title-collapse var(--card-shrink-ease) both;
-            animation-timeline: --card-scroll;
-            animation-range: 0px 120px;
-            transform-origin: left top;
-        }
-
-        /* lane 3 — description retire (opacity fade + scaleY collapse), the faster
-           0..80px cliff (description retires before the header fully settles). */
-        .card-header--shrink > [data-slot="card-description"] {
-            animation: card-desc-shrink var(--card-shrink-ease) both;
-            animation-timeline: --card-scroll;
-            animation-range: 0px 80px;
-        }
-    }
-}