@camp.dev/bones 0.4.0 → 0.5.0

package/dist/css/bones.css

@@ -1,197 +0,0 @@
-:root {
-  /* Bones derive their color from the text color in effect at the bone, so
-     they inherit the page's own contrast guarantee on any background in any
-     scheme (BON-13). currentColor resolves where var() is used, not here.
-     The alpha reset matters: bones hide their content by zeroing the alpha
-     of the color property (never with the transparent keyword, which would
-     discard the channels), and the mix restores it. */
-  --bone-base: color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent);
-  --bone-highlight: color-mix(in srgb, rgb(from currentcolor r g b / 1) 6%, transparent);
-  --bone-radius: 4px;
-  --bone-duration: 1.5s;
-}
-
-[data-bone="text"] {
-  color: rgb(from currentcolor r g b / 0);
-  position: relative;
-  min-width: 4ch;
-  min-height: 1lh;
-}
-
-[data-bone-line] {
-  display: block;
-}
-
-[data-bone-line]:last-child {
-  width: 69%;
-}
-
-[data-bone="text"]::before {
-  content: "\200b";
-}
-
-[data-bone="text"]::after {
-  content: "";
-  position: absolute;
-  inset-inline: 0;
-  top: calc((1lh + 1cap) / 2 - 1ex);
-  height: 1ex;
-  background-color: var(--bone-base);
-  border-radius: var(--bone-radius);
-  pointer-events: none;
-}
-
-[data-bone="text"][style*="--bone-length"] {
-  width: calc(var(--bone-length) * 1ch);
-}
-
-[data-bone="text"][style*="--bone-contained"] {
-  min-width: unset;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: content-box;
-}
-
-[data-bone="text"][style*="--bone-contained"]::after {
-  flex: 1;
-  position: static;
-  inset-inline: unset;
-  top: unset;
-  transform: none;
-}
-
-[data-bone="text"][style*="--bone-contained"][style*="--bone-length"] {
-  min-width: calc(var(--bone-length) * 1ch);
-}
-
-[data-bone="block"] {
-  display: inline-block;
-  background-color: var(--bone-base);
-}
-
-img[data-bone="block"],
-video[data-bone="block"] {
-  color: rgb(from currentcolor r g b / 0);
-}
-
-[data-bone="container"] {
-  position: relative;
-  overflow: hidden;
-}
-
-[data-bone="container"]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-color: var(--bone-base);
-  z-index: 1;
-}
-
-[data-bone="container"] > * {
-  visibility: hidden;
-}
-
-@keyframes bone-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@keyframes bone-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* Marked bones shimmer by default, the same as auto bones and the measured
-   overlay (BON-16). data-bone-animate="none" is the opt-out; the @scope
-   blocks below override this at higher specificity, so their order relative
-   to this rule does not matter. */
-[data-bone="text"]::after,
-[data-bone="block"],
-[data-bone="container"]::before {
-  animation: bone-shimmer var(--bone-duration) ease-in-out infinite;
-  background: linear-gradient(
-    90deg,
-    var(--bone-base) 25%,
-    var(--bone-highlight) 50%,
-    var(--bone-base) 75%
-  );
-  background-size: 200% 100%;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-bone="text"]::after,
-  [data-bone="block"],
-  [data-bone="container"]::before {
-    animation: bone-pulse 2s ease-in-out infinite;
-    background: var(--bone-base);
-    background-size: auto;
-  }
-}
-
-/* :is(:scope, :scope *) lets the attribute work from the bone itself, not
-   only from a wrapper: a scoped selector's implicit :scope prefix matches
-   strict descendants only, so a plain compound never matches the scope root
-   (BON-17). The reduced-motion override sits inside each animated scope so it
-   matches at the scope's own specificity; "none" has no override because none
-   still means none. */
-@scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
-  [data-bone="text"]:is(:scope, :scope *)::after,
-  [data-bone="block"]:is(:scope, :scope *),
-  [data-bone="container"]:is(:scope, :scope *)::before {
-    animation: bone-shimmer var(--bone-duration) ease-in-out infinite;
-    background: linear-gradient(
-      90deg,
-      var(--bone-base) 25%,
-      var(--bone-highlight) 50%,
-      var(--bone-base) 75%
-    );
-    background-size: 200% 100%;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-bone="text"]:is(:scope, :scope *)::after,
-    [data-bone="block"]:is(:scope, :scope *),
-    [data-bone="container"]:is(:scope, :scope *)::before {
-      animation: bone-pulse 2s ease-in-out infinite;
-      background: var(--bone-base);
-      background-size: auto;
-    }
-  }
-}
-
-@scope ([data-bone-animate="pulse"]) to ([data-bone-animate]:not([data-bone-animate="pulse"])) {
-  [data-bone="text"]:is(:scope, :scope *)::after,
-  [data-bone="block"]:is(:scope, :scope *),
-  [data-bone="container"]:is(:scope, :scope *)::before {
-    animation: bone-pulse var(--bone-duration) ease-in-out infinite;
-    background: var(--bone-base);
-    background-size: auto;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-bone="text"]:is(:scope, :scope *)::after,
-    [data-bone="block"]:is(:scope, :scope *),
-    [data-bone="container"]:is(:scope, :scope *)::before {
-      animation: bone-pulse 2s ease-in-out infinite;
-    }
-  }
-}
-
-@scope ([data-bone-animate="none"]) to ([data-bone-animate]:not([data-bone-animate="none"])) {
-  [data-bone="text"]:is(:scope, :scope *)::after,
-  [data-bone="block"]:is(:scope, :scope *),
-  [data-bone="container"]:is(:scope, :scope *)::before {
-    animation: none;
-    background: var(--bone-base);
-    background-size: auto;
-  }
-}

package/dist/element/boundary.d.mts

@@ -1,26 +0,0 @@
-//#region src/element/boundary.d.ts
-declare const DEFAULT_DELAY = 200;
-declare const DEFAULT_MIN_DURATION = 400;
-declare const Base: typeof HTMLElement;
-declare class BonesBoundary extends Base {
-  #private;
-  static readonly observedAttributes: string[];
-  get busy(): boolean;
-  set busy(value: boolean);
-  get force(): boolean;
-  set force(value: boolean);
-  get delay(): number;
-  set delay(value: number);
-  get minDuration(): number;
-  set minDuration(value: number);
-  get transition(): "auto" | "none";
-  set transition(value: "auto" | "none");
-  get precision(): "css" | "measured";
-  set precision(value: "css" | "measured");
-  get showing(): boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  attributeChangedCallback(name: string): void;
-}
-//#endregion
-export { BonesBoundary, DEFAULT_DELAY, DEFAULT_MIN_DURATION };

package/dist/element/boundary.mjs

@@ -1,220 +0,0 @@
-import { MeasuredOverlay } from "./overlay.mjs";
-//#region src/element/boundary.ts
-const DEFAULT_DELAY = 200;
-const DEFAULT_MIN_DURATION = 400;
-const UPGRADE_PROPERTIES = [
-	"busy",
-	"force",
-	"delay",
-	"minDuration",
-	"transition",
-	"precision"
-];
-const swallow = () => {};
-function parseMs(value, fallback) {
-	if (value === null || value.trim() === "") return fallback;
-	const ms = Number(value);
-	return Number.isFinite(ms) && ms >= 0 ? ms : fallback;
-}
-const Base = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
-var BonesBoundary = class extends Base {
-	static observedAttributes = [
-		"busy",
-		"force",
-		"aria-busy",
-		"inert",
-		"precision"
-	];
-	#state = "idle";
-	#timer;
-	#connected = false;
-	#shownAt = 0;
-	#hideToken = 0;
-	#writingOutput = false;
-	#overlay = new MeasuredOverlay(this);
-	get busy() {
-		return this.hasAttribute("busy");
-	}
-	set busy(value) {
-		this.toggleAttribute("busy", Boolean(value));
-	}
-	get force() {
-		return this.hasAttribute("force");
-	}
-	set force(value) {
-		this.toggleAttribute("force", Boolean(value));
-	}
-	get delay() {
-		return parseMs(this.getAttribute("delay"), 200);
-	}
-	set delay(value) {
-		if (value === null || value === void 0) this.removeAttribute("delay");
-		else this.setAttribute("delay", String(value));
-	}
-	get minDuration() {
-		return parseMs(this.getAttribute("min-duration"), 400);
-	}
-	set minDuration(value) {
-		if (value === null || value === void 0) this.removeAttribute("min-duration");
-		else this.setAttribute("min-duration", String(value));
-	}
-	get transition() {
-		return this.getAttribute("transition") === "none" ? "none" : "auto";
-	}
-	set transition(value) {
-		if (value === "none") this.setAttribute("transition", "none");
-		else this.removeAttribute("transition");
-	}
-	get precision() {
-		return this.getAttribute("precision") === "measured" ? "measured" : "css";
-	}
-	set precision(value) {
-		if (value === "measured") this.setAttribute("precision", "measured");
-		else this.removeAttribute("precision");
-	}
-	get showing() {
-		return this.#state === "showing" || this.#state === "draining" || this.#state === "hiding";
-	}
-	connectedCallback() {
-		for (const name of UPGRADE_PROPERTIES) this.#upgradeProperty(name);
-		this.#connected = true;
-		this.#syncPrecision();
-		if (this.getAttribute("aria-busy") === "true" && !this.showing) {
-			this.#show();
-			if (!this.busy && !this.force) this.#evaluate();
-			return;
-		}
-		this.#evaluate();
-	}
-	disconnectedCallback() {
-		this.#overlay.pause();
-		this.#connected = false;
-		this.#clearTimer();
-		if (this.#state === "pending") this.#state = "idle";
-		else if (this.#state === "hiding") this.#state = "showing";
-	}
-	attributeChangedCallback(name) {
-		if (!this.#connected) return;
-		if (name === "aria-busy" || name === "inert") {
-			this.#defendOutput();
-			return;
-		}
-		if (name === "precision") {
-			this.#syncPrecision();
-			return;
-		}
-		this.#evaluate();
-	}
-	#defendOutput() {
-		if (this.#writingOutput) return;
-		if (this.#state !== "showing" && this.#state !== "draining") return;
-		if (this.getAttribute("aria-busy") === "true" && this.hasAttribute("inert")) return;
-		this.#writeOutput(true);
-	}
-	#syncPrecision() {
-		if (this.precision === "measured") {
-			this.#overlay.prepare();
-			if (this.showing) this.#overlay.activate();
-		} else this.#overlay.deactivate();
-	}
-	#upgradeProperty(name) {
-		if (!Object.prototype.hasOwnProperty.call(this, name)) return;
-		const self = this;
-		const value = self[name];
-		delete self[name];
-		self[name] = value;
-	}
-	#clearTimer() {
-		if (this.#timer !== void 0) clearTimeout(this.#timer);
-		this.#timer = void 0;
-	}
-	#evaluate() {
-		if (this.force) {
-			if (this.#state === "draining" || this.#state === "hiding") this.#resume();
-			else if (this.#state !== "showing") this.#show();
-			return;
-		}
-		if (this.busy) {
-			if (this.#state === "idle") {
-				const delay = this.delay;
-				if (delay === 0) this.#show();
-				else {
-					this.#state = "pending";
-					this.#timer = setTimeout(() => this.#show(), delay);
-				}
-			} else if (this.#state === "draining" || this.#state === "hiding") this.#resume();
-			return;
-		}
-		if (this.#state === "pending") {
-			this.#clearTimer();
-			this.#state = "idle";
-		} else if (this.#state === "showing" || this.#state === "draining") {
-			this.#clearTimer();
-			const remaining = this.#shownAt + this.minDuration - Date.now();
-			if (remaining <= 0) this.#hide();
-			else {
-				this.#state = "draining";
-				this.#timer = setTimeout(() => this.#hide(), remaining);
-			}
-		}
-	}
-	#resume() {
-		this.#clearTimer();
-		this.#state = "showing";
-		this.#writeOutput(true);
-	}
-	#show() {
-		this.#clearTimer();
-		this.#state = "showing";
-		this.#shownAt = Date.now();
-		this.#writeOutput(true);
-		if (this.precision === "measured") this.#overlay.activate();
-		this.dispatchEvent(new CustomEvent("bones:show", {
-			bubbles: true,
-			composed: true
-		}));
-	}
-	#hide() {
-		this.#clearTimer();
-		this.#state = "hiding";
-		const token = ++this.#hideToken;
-		const update = () => {
-			if (this.#state !== "hiding" || token !== this.#hideToken) return;
-			this.#state = "idle";
-			this.#writeOutput(false);
-			this.#overlay.deactivate();
-			this.dispatchEvent(new CustomEvent("bones:hide", {
-				bubbles: true,
-				composed: true
-			}));
-		};
-		if (this.#canTransition()) {
-			const transition = document.startViewTransition(update);
-			transition?.ready?.catch(swallow);
-			transition?.updateCallbackDone?.catch(swallow);
-			transition?.finished?.catch(swallow);
-		} else update();
-	}
-	#writeOutput(shown) {
-		this.#writingOutput = true;
-		try {
-			if (shown) {
-				this.setAttribute("aria-busy", "true");
-				this.toggleAttribute("inert", true);
-			} else {
-				this.removeAttribute("aria-busy");
-				this.removeAttribute("inert");
-			}
-		} finally {
-			this.#writingOutput = false;
-		}
-	}
-	#canTransition() {
-		if (this.transition === "none") return false;
-		if (typeof document.startViewTransition !== "function") return false;
-		if (typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
-		return true;
-	}
-};
-//#endregion
-export { BonesBoundary, DEFAULT_DELAY, DEFAULT_MIN_DURATION };

package/dist/element/index.d.mts

@@ -1,14 +0,0 @@
-import { BonesBoundary, DEFAULT_DELAY, DEFAULT_MIN_DURATION } from "./boundary.mjs";
-
-//#region src/element/index.d.ts
-declare global {
-  interface HTMLElementTagNameMap {
-    "bones-boundary": BonesBoundary;
-  }
-  interface HTMLElementEventMap {
-    "bones:show": CustomEvent;
-    "bones:hide": CustomEvent;
-  }
-}
-//#endregion
-export { BonesBoundary, DEFAULT_DELAY, DEFAULT_MIN_DURATION };

package/dist/element/index.mjs

@@ -1,6 +0,0 @@
-import { BonesBoundary, DEFAULT_DELAY, DEFAULT_MIN_DURATION } from "./boundary.mjs";
-//#region src/element/index.ts
-if (typeof customElements !== "undefined") if (customElements.get("bones-boundary")) console.warn("bones-boundary is already defined; @camp.dev/bones/element did not register");
-else customElements.define("bones-boundary", BonesBoundary);
-//#endregion
-export { BonesBoundary, DEFAULT_DELAY, DEFAULT_MIN_DURATION };

package/dist/element/measure.mjs

@@ -1,99 +0,0 @@
-//#region src/element/measure.ts
-const BLOCK_TAGS = new Set([
-	"img",
-	"svg",
-	"video",
-	"canvas",
-	"picture",
-	"iframe",
-	"embed",
-	"object",
-	"audio",
-	"button",
-	"input",
-	"select",
-	"textarea",
-	"progress",
-	"meter"
-]);
-const TEXT_BAR_SCALE = .55;
-function verticalOverlap(a, b) {
-	return Math.min(a.top + a.height, b.top + b.height) - Math.max(a.top, b.top);
-}
-function mergeLineRects(rects) {
-	const sorted = [...rects].sort((a, b) => a.top - b.top || a.left - b.left);
-	const merged = [];
-	for (const rect of sorted) {
-		const line = merged.findLast((candidate) => {
-			if (verticalOverlap(candidate, rect) < Math.min(candidate.height, rect.height) / 2) return false;
-			return rect.left - (candidate.left + candidate.width) <= Math.max(candidate.height, rect.height) / 2;
-		});
-		if (line === void 0) {
-			merged.push({ ...rect });
-			continue;
-		}
-		const right = Math.max(line.left + line.width, rect.left + rect.width);
-		const bottom = Math.max(line.top + line.height, rect.top + rect.height);
-		line.left = Math.min(line.left, rect.left);
-		line.top = Math.min(line.top, rect.top);
-		line.width = right - line.left;
-		line.height = bottom - line.top;
-	}
-	return merged;
-}
-function isVisible(rect) {
-	return rect.width > 0 && rect.height > 0;
-}
-function toRect(rect) {
-	return {
-		left: rect.left,
-		top: rect.top,
-		width: rect.width,
-		height: rect.height
-	};
-}
-function measureBones(root) {
-	const doc = root.ownerDocument;
-	const blocks = [];
-	const textRects = [];
-	const visit = (node) => {
-		if (node.nodeType === Node.TEXT_NODE) {
-			if (node.data.trim() === "") return;
-			const range = doc.createRange();
-			range.selectNodeContents(node);
-			if (typeof range.getClientRects !== "function") return;
-			for (const rect of Array.from(range.getClientRects())) {
-				const converted = toRect(rect);
-				if (isVisible(converted)) textRects.push(converted);
-			}
-			return;
-		}
-		if (node.nodeType !== Node.ELEMENT_NODE) return;
-		const el = node;
-		if (el.getAttribute("data-bones-auto") === "off") return;
-		if (BLOCK_TAGS.has(el.localName)) {
-			const rect = toRect(el.getBoundingClientRect());
-			if (isVisible(rect)) blocks.push({
-				kind: "block",
-				...rect
-			});
-			return;
-		}
-		for (const child of node.childNodes) visit(child);
-	};
-	for (const child of root.childNodes) visit(child);
-	const bones = [...blocks];
-	for (const line of mergeLineRects(textRects)) {
-		const height = line.height * TEXT_BAR_SCALE;
-		bones.push({
-			kind: "text",
-			left: line.left,
-			top: line.top + (line.height - height) / 2,
-			width: line.width,
-			height
-		});
-	}
-	return bones;
-}
-//#endregion
-export { measureBones };