@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/virtual.js

@@ -1,225 +0,0 @@
-import { t as e } from "./useResizeObserver-DdEn3v2f.js";
-import { computed as t, onMounted as n, onUnmounted as r, ref as i, shallowRef as a, toValue as o, watch as s } from "vue";
-//#region src/composables/virtual/virtualSectionLayout.ts
-function c(e, t) {
-	let n = 0, r = e.map((e) => {
-		let r = Math.max(1, Math.round(t(e))), i = n;
-		return n += r, {
-			item: e,
-			height: r,
-			top: i,
-			bottom: n
-		};
-	}), i = r.slice().sort((e, t) => e.item.id < t.item.id ? -1 : +(e.item.id > t.item.id));
-	return {
-		entries: r,
-		totalHeight: n,
-		byId: i
-	};
-}
-function l(e, t) {
-	if (e.length === 0) return 0;
-	let n = 0, r = e.length - 1;
-	for (; n < r;) {
-		let i = Math.floor((n + r) / 2);
-		e[i].bottom <= t ? n = i + 1 : r = i;
-	}
-	return n;
-}
-function u(e, t) {
-	if (e.length === 0) return 0;
-	let n = 0, r = e.length - 1;
-	for (; n < r;) {
-		let i = Math.ceil((n + r) / 2);
-		e[i].top < t ? n = i : r = i - 1;
-	}
-	return n;
-}
-function d(e, t, n, r, i, a) {
-	if (e.entries.length === 0) return {
-		startIndex: 0,
-		endIndex: -1,
-		topSpacerPx: 0,
-		bottomSpacerPx: 0
-	};
-	let o = Math.max(0, t - r), s = Math.max(0, t + n + i), c = l(e.entries, o), d = u(e.entries, s);
-	return a && (c = Math.min(c, a.startIndex), d = Math.max(d, a.endIndex)), c = Math.max(0, Math.min(c, e.entries.length - 1)), d = Math.max(c, Math.min(d, e.entries.length - 1)), {
-		startIndex: c,
-		endIndex: d,
-		topSpacerPx: e.entries[c]?.top ?? 0,
-		bottomSpacerPx: Math.max(0, e.totalHeight - (e.entries[d]?.bottom ?? 0))
-	};
-}
-function f(e, t) {
-	if (e.entries.length === 0) return null;
-	let n = 0, r = e.entries.length - 1;
-	for (; n < r;) {
-		let i = Math.ceil((n + r) / 2);
-		e.entries[i].top <= t ? n = i : r = i - 1;
-	}
-	return e.entries[n]?.item ?? null;
-}
-function p(e, t) {
-	let n = e.byId, r = 0, i = n.length - 1;
-	for (; r <= i;) {
-		let e = r + i >> 1, a = n[e].item.id;
-		if (a === t) return n[e].top;
-		a < t ? r = e + 1 : i = e - 1;
-	}
-	return null;
-}
-//#endregion
-//#region src/composables/virtual/useVirtualSectionWindow.ts
-var m = /* @__PURE__ */ new Map();
-function h() {
-	m.clear();
-}
-function g(l) {
-	let u = t(() => Array.from(o(l.items))), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), _ = a({
-		entries: [],
-		totalHeight: 0,
-		byId: []
-	}), v = i({
-		startIndex: 0,
-		endIndex: -1,
-		topSpacerPx: 0,
-		bottomSpacerPx: 0
-	}), y = i(null), b = i(null), x = /* @__PURE__ */ new Map(), S = 0, C = 0, w = 0;
-	function T() {
-		return Math.max(1, l.scrollContainer.value?.clientHeight ?? window.innerHeight ?? 900);
-	}
-	function E() {
-		let e = l.contentEl?.value;
-		if (e) return Math.max(0, -e.getBoundingClientRect().top);
-		let t = l.scrollContainer.value;
-		return t ? t.scrollTop : document.documentElement.scrollTop || document.body.scrollTop || 0;
-	}
-	function D(e) {
-		return h.get(e.id) ?? m.get(e.id) ?? e.estimatedHeight;
-	}
-	function O() {
-		_.value = c(u.value, D);
-	}
-	function k() {
-		let e = T(), t = l.overscanBeforePx ?? e, n = l.overscanAfterPx ?? e * 2, r = E();
-		v.value = d(_.value, r, e, t, n, b.value), y.value = f(_.value, r + e * .2);
-	}
-	function A() {
-		O(), k();
-	}
-	function j() {
-		C ||= requestAnimationFrame(() => {
-			C = 0, A();
-		});
-	}
-	function M() {
-		w && window.clearTimeout(w), w = window.setTimeout(() => {
-			b.value = null, j();
-		}, 320);
-	}
-	function N(e, t) {
-		let n = Math.max(1, Math.round(t));
-		h.get(e) !== n && (h.set(e, n), m.set(e, n), j());
-	}
-	function P(e) {
-		x.delete(e);
-	}
-	function F(e, t) {
-		if (!t) {
-			P(e);
-			return;
-		}
-		if (x.get(e) === t) {
-			N(e, t.offsetHeight);
-			return;
-		}
-		P(e), x.set(e, t), requestAnimationFrame(() => {
-			let t = x.get(e);
-			t && N(e, t.offsetHeight);
-		});
-	}
-	function I(e) {
-		let t = g.get(e);
-		if (t == null) return;
-		let n = l.warmTargetBefore ?? 2, r = l.warmTargetAfter ?? 3;
-		b.value = {
-			startIndex: Math.max(0, t - n),
-			endIndex: Math.min(u.value.length - 1, t + r)
-		}, M(), A();
-	}
-	function L(e) {
-		return p(_.value, e);
-	}
-	function R() {
-		S ||= requestAnimationFrame(() => {
-			S = 0, k();
-		});
-	}
-	let z = null;
-	function B(e) {
-		let t = e ?? window;
-		z !== t && (z && z.removeEventListener("scroll", R), z = t, z.addEventListener("scroll", R, { passive: !0 }), j());
-	}
-	s(u, (e) => {
-		g.clear();
-		for (let t of e) {
-			g.set(t.id, t.index);
-			let e = m.get(t.id);
-			e != null && h.set(t.id, e);
-		}
-		for (let e of [...h.keys()]) g.has(e) || h.delete(e);
-		A();
-	}, { immediate: !0 }), s(l.scrollContainer, (e) => B(e), { immediate: !0 }), e(l.scrollContainer, () => j()), l.contentEl && e(l.contentEl, () => j()), n(() => {
-		j();
-	}), r(() => {
-		S && cancelAnimationFrame(S), C && cancelAnimationFrame(C), w && window.clearTimeout(w), z && z.removeEventListener("scroll", R), x.clear();
-	});
-	let V = t(() => v.value.endIndex < v.value.startIndex ? [] : u.value.slice(v.value.startIndex, v.value.endIndex + 1)), H = t(() => y.value?.id ?? null), U = t(() => y.value?.rootId ?? null);
-	return {
-		visibleItems: V,
-		topSpacerPx: t(() => v.value.topSpacerPx),
-		bottomSpacerPx: t(() => v.value.bottomSpacerPx),
-		measureSection: F,
-		ensureTargetWindow: I,
-		getOffsetFor: L,
-		activeId: H,
-		activeRootId: U,
-		recalculate: A
-	};
-}
-//#endregion
-//#region src/composables/virtual/useWindowedStore.ts
-function _(e) {
-	let t = e?.maxResident ?? 200, n = a([]), r = i(0), o = i(0);
-	function s(e, i = !0) {
-		if (i) n.value = [...e], r.value = 0, o.value++;
-		else {
-			let i = [...n.value, ...e];
-			if (i.length > t) {
-				let e = i.length - t;
-				n.value = i.slice(e), r.value += e;
-			} else n.value = i;
-		}
-	}
-	function c(e, t) {
-		return o.value === t ? (s(e, !1), !0) : !1;
-	}
-	function l(e, i) {
-		let a = [...e, ...n.value];
-		r.value = i, o.value++, a.length > t ? n.value = a.slice(0, t) : n.value = a;
-	}
-	function u() {
-		n.value = [], r.value = 0, o.value++;
-	}
-	return {
-		items: n,
-		windowStart: r,
-		generation: o,
-		set: s,
-		prepend: l,
-		appendIfCurrent: c,
-		clear: u
-	};
-}
-//#endregion
-export { c as buildSectionLayout, h as clearSessionHeightCache, p as findSectionOffset, f as resolveActiveSection, d as resolveSectionWindow, g as useVirtualSectionWindow, _ as useWindowedStore };

package/src/styles/border-progress.css

@@ -1,109 +0,0 @@
-/* BB.W-BORDER-PROGRESS — progress IS the element's border.
- *
- * The masked-conic ring consumption (the registration lives in
- * tokens/property-regs.css §18, mirroring the specular split: the @property reg
- * there, the consumption here). The ring paints a `conic-gradient` MASK-COMPOSITED
- * into the border band so ONLY the band paints AND it FOLLOWS the host
- * `border-radius` — a `border-image` SQUARES the corners (measured inferior,
- * forbidden), a floating-bar child re-introduces allocation (forbidden). The host
- * INTERIOR is untouched: a glass card still transmits the backdrop THROUGH its
- * content box (the AX.W54 glass-first identity — the ring is a border-band cut-out,
- * not an opaque overlay).
- *
- * Compositor-only: the sweep rides the registered `--border-progress-fill`
- * <percentage>; no layout property animates (`proof:no-layout-animation`). The
- * unregistered fallback is safe (the `initial-value` paints the resting ring; the
- * cross-fade collapses to it on a non-supporting engine — Chromium 85+/Safari
- * 16.4+, within the deployment floor). */
-
-.border-progress {
-    position: relative;
-    display: block;
-    border-radius: var(--border-progress-radius, 16px);
-    /* The host reserves the border band the ring paints into (allocation-free —
-       the content box is untouched, no reflow). */
-    padding: 0;
-}
-
-/* The ring layer — inset over the host, the border band the conic paints into.
-   The `border` width IS the band thickness; the conic is mask-composited so the
-   padding-box (interior) is EXCLUDED from the border-box (the radius-following
-   cut-out). */
-.border-progress__ring {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    border: var(--border-progress-width, 12px) solid transparent;
-    pointer-events: none;
-    /* The spectrum conic, swept to --border-progress-fill. The colored arc runs
-       from the top (12 o'clock) clockwise to the fill fraction; past it is
-       transparent so the resting band shows ONLY the filled spectrum. */
-    background:
-        conic-gradient(
-            from 0deg,
-            var(--border-progress-spectrum, var(--section-color-7)),
-            transparent var(--border-progress-fill, 0%),
-            transparent 100%
-        );
-    /* THE RADIUS-FOLLOWING CUT-OUT — the house border-ring idiom: paint a
-       border-box fill, EXCLUDE a padding-box fill, leaving only the border band,
-       which follows `border-radius` exactly (a border-image cannot). */
-    -webkit-mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0) border-box;
-    -webkit-mask-composite: xor;
-    mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0) border-box;
-    mask-composite: exclude;
-}
-
-/* THE COVERAGE AXIS — ONE conic-mask mechanism, two coverage masks (NOT a second
-   recipe). `bottom-edge` adds a SECOND mask layer scoping the painted band to the
-   bottom edge only; it composes WITH the border-band cut-out above (the mask
-   stack intersects), so the bottom register reuses the exact conic + radius
-   cut-out — the dock-orientation `dim`-idiom discipline (no parallel fork). */
-.border-progress[data-coverage="bottom-edge"] .border-progress__ring {
-    -webkit-mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0) border-box,
-        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
-    -webkit-mask-composite: xor, source-in;
-    mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0) border-box,
-        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
-    mask-composite: exclude, intersect;
-}
-
-/* The content box — the host's own surface (a glass card, a chassis). It is
-   untouched by the ring (backdrop-intact); the ring sits over the border band
-   only. */
-.border-progress__content {
-    position: relative;
-    z-index: 1;
-    border-radius: inherit;
-    height: 100%;
-}
-
-/* THE MILESTONE PULSE — a brief brightness bloom on a crossed phase edge. The
-   pulse is PRM-gated (no edge-pulse under reduced motion — the ring snaps to the
-   new value). Compositor-only (filter brightness, never a layout property). */
-@media (prefers-reduced-motion: no-preference) {
-    .border-progress[data-milestone] .border-progress__ring {
-        animation: border-progress-milestone-pulse
-            var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out);
-    }
-}
-
-@keyframes border-progress-milestone-pulse {
-    0% {
-        filter: brightness(1);
-    }
-    40% {
-        filter: brightness(1.35);
-    }
-    100% {
-        filter: brightness(1);
-    }
-}