@camp.dev/bones 0.4.0 → 0.5.0

package/dist/element/overlay.mjs

@@ -1,184 +0,0 @@
-import { measureBones } from "./measure.mjs";
-//#region src/element/overlay.ts
-const OVERLAY_CSS = `
-:host([precision="measured"]) {
-  display: block;
-  position: relative;
-}
-/* Hidden content still lays out, so re-measurement stays valid. Deliberately
-   not !important: outer-tree rules beat ::slotted, which is what lets the
-   auto.css opt-out rule re-show exempt subtrees (and lets an author
-   visibility rule on a direct child win — a documented edge). */
-:host([data-bones-measured]) ::slotted(*) {
-  visibility: hidden;
-}
-[part~="overlay"] {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-[part~="bone"] {
-  position: absolute;
-  background: var(--bone-base, color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent));
-  border-radius: var(--bone-radius, 4px);
-}
-@keyframes bone-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-@keyframes bone-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-[part~="overlay"]:not([data-bone-animate]) [part~="bone"],
-[part~="overlay"][data-bone-animate="shimmer"] [part~="bone"] {
-  animation: bone-shimmer var(--bone-duration, 1.5s) ease-in-out infinite;
-  background: linear-gradient(
-    90deg,
-    var(--bone-base, color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent)) 25%,
-    var(--bone-highlight, color-mix(in srgb, rgb(from currentcolor r g b / 1) 6%, transparent)) 50%,
-    var(--bone-base, color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent)) 75%
-  );
-  background-size: 200% 100%;
-}
-[part~="overlay"][data-bone-animate="pulse"] [part~="bone"] {
-  animation: bone-pulse var(--bone-duration, 1.5s) ease-in-out infinite;
-}
-[part~="overlay"][data-bone-animate="none"] [part~="bone"] {
-  animation: none;
-}
-/* Matches the shimmer/pulse selectors above at equal (0,3,0) specificity so
-   this override always wins the cascade instead of losing to source order.
-   data-bone-animate="none" is deliberately excluded: none still means none. */
-@media (prefers-reduced-motion: reduce) {
-  [part~="overlay"]:not([data-bone-animate]) [part~="bone"],
-  [part~="overlay"][data-bone-animate="shimmer"] [part~="bone"],
-  [part~="overlay"][data-bone-animate="pulse"] [part~="bone"] {
-    animation: bone-pulse 2s ease-in-out infinite;
-    background: var(--bone-base, color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent));
-    background-size: auto;
-  }
-}
-`;
-let sharedSheet;
-function applyStyles(root) {
-	if ("adoptedStyleSheets" in root && typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
-		if (sharedSheet === void 0) {
-			sharedSheet = new CSSStyleSheet();
-			sharedSheet.replaceSync(OVERLAY_CSS);
-		}
-		root.adoptedStyleSheets = [...root.adoptedStyleSheets, sharedSheet];
-		return;
-	}
-	const style = root.ownerDocument.createElement("style");
-	style.textContent = OVERLAY_CSS;
-	root.append(style);
-}
-var MeasuredOverlay = class {
-	#host;
-	#container;
-	#observer;
-	#mutations;
-	#active = false;
-	#ownsAutoOff = false;
-	constructor(host) {
-		this.#host = host;
-	}
-	get active() {
-		return this.#active;
-	}
-	prepare() {
-		if (this.#host.shadowRoot) return;
-		const root = this.#host.attachShadow({ mode: "open" });
-		root.append(this.#host.ownerDocument.createElement("slot"));
-		applyStyles(root);
-	}
-	activate() {
-		this.prepare();
-		if (!this.#active) {
-			this.#active = true;
-			if (!this.#host.hasAttribute("data-bones-auto")) {
-				this.#host.setAttribute("data-bones-auto", "off");
-				this.#ownsAutoOff = true;
-			}
-			this.#host.setAttribute("data-bones-measured", "");
-		}
-		if (!this.#renderBars()) {
-			this.deactivate();
-			return;
-		}
-		this.#observe();
-	}
-	deactivate() {
-		this.#unobserve();
-		this.#container?.remove();
-		this.#container = void 0;
-		if (!this.#active) return;
-		this.#active = false;
-		this.#host.removeAttribute("data-bones-measured");
-		if (this.#ownsAutoOff) {
-			this.#host.removeAttribute("data-bones-auto");
-			this.#ownsAutoOff = false;
-		}
-	}
-	pause() {
-		this.#unobserve();
-	}
-	#observe() {
-		if (typeof ResizeObserver !== "undefined" && !this.#observer) {
-			this.#observer = new ResizeObserver(() => this.#invalidate());
-			this.#observer.observe(this.#host);
-		}
-		if (typeof MutationObserver !== "undefined" && !this.#mutations) {
-			this.#mutations = new MutationObserver(() => this.#invalidate());
-			this.#mutations.observe(this.#host, {
-				childList: true,
-				subtree: true,
-				characterData: true
-			});
-		}
-	}
-	#unobserve() {
-		this.#observer?.disconnect();
-		this.#observer = void 0;
-		this.#mutations?.disconnect();
-		this.#mutations = void 0;
-	}
-	#invalidate() {
-		if (this.#active && !this.#renderBars()) this.deactivate();
-	}
-	#renderBars() {
-		const root = this.#host.shadowRoot;
-		if (!root) return false;
-		const bones = measureBones(this.#host);
-		if (bones.length === 0) return false;
-		const doc = this.#host.ownerDocument;
-		if (!this.#container) {
-			this.#container = doc.createElement("div");
-			this.#container.setAttribute("part", "overlay");
-			this.#container.setAttribute("aria-hidden", "true");
-			root.append(this.#container);
-		}
-		const animate = this.#host.closest("[data-bone-animate]")?.getAttribute("data-bone-animate");
-		if (animate) this.#container.setAttribute("data-bone-animate", animate);
-		else this.#container.removeAttribute("data-bone-animate");
-		const origin = this.#container.getBoundingClientRect();
-		const style = getComputedStyle(this.#container);
-		const layoutWidth = Number.parseFloat(style.width);
-		const layoutHeight = Number.parseFloat(style.height);
-		const scaleX = layoutWidth > 0 ? origin.width / layoutWidth : 1;
-		const scaleY = layoutHeight > 0 ? origin.height / layoutHeight : 1;
-		this.#container.replaceChildren(...bones.map((bone) => {
-			const bar = doc.createElement("div");
-			bar.setAttribute("part", `bone bone-${bone.kind}`);
-			bar.style.left = `${(bone.left - origin.left) / scaleX}px`;
-			bar.style.top = `${(bone.top - origin.top) / scaleY}px`;
-			bar.style.width = `${bone.width / scaleX}px`;
-			bar.style.height = `${bone.height / scaleY}px`;
-			return bar;
-		}));
-		return true;
-	}
-};
-//#endregion
-export { MeasuredOverlay };

package/dist/index.d.mts

@@ -1,2 +0,0 @@
-import { BoneAttributes, BoneOptions, BoneType, MinMax, TRANSPARENT_PIXEL, boneAttributes, isMinMax, minMax, resolveLength } from "./core/attributes.mjs";
-export { type BoneAttributes, type BoneOptions, type BoneType, type MinMax, TRANSPARENT_PIXEL, boneAttributes, isMinMax, minMax, resolveLength };

package/dist/index.mjs

@@ -1,2 +0,0 @@
-import { TRANSPARENT_PIXEL, boneAttributes, isMinMax, minMax, resolveLength } from "./core/attributes.mjs";
-export { TRANSPARENT_PIXEL, boneAttributes, isMinMax, minMax, resolveLength };

package/dist/react/boundary.d.mts

@@ -1,40 +0,0 @@
-import { BonesBoundary as BonesBoundary$1 } from "../element/boundary.mjs";
-import { HTMLAttributes, ReactNode, Ref } from "react";
-
-//#region src/react/boundary.d.ts
-interface ElementAttributes extends HTMLAttributes<HTMLElement> {
-  busy?: boolean;
-  force?: boolean;
-  delay?: number;
-  "min-duration"?: number;
-  transition?: "auto" | "none";
-  precision?: "css" | "measured";
-  class?: string;
-  ref?: Ref<BonesBoundary$1>;
-  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
-}
-declare module "react" {
-  namespace JSX {
-    interface IntrinsicElements {
-      "bones-boundary": ElementAttributes;
-    }
-  }
-}
-interface BonesBoundaryProps extends Omit<ElementAttributes, "min-duration" | "inert" | "aria-busy" | "class"> {
-  minDuration?: number;
-  onShow?: (event: CustomEvent) => void;
-  onHide?: (event: CustomEvent) => void;
-}
-declare function BonesBoundary({
-  busy,
-  force,
-  delay,
-  minDuration,
-  transition,
-  onShow,
-  onHide,
-  children,
-  ...rest
-}: BonesBoundaryProps): ReactNode;
-//#endregion
-export { BonesBoundary, BonesBoundaryProps };

package/dist/react/boundary.mjs

@@ -1,21 +0,0 @@
-import { createElement } from "react";
-//#region src/react/boundary.ts
-function BonesBoundary({ busy, force, delay, minDuration, transition, onShow, onHide, children, ...rest }) {
-	return createElement("bones-boundary", {
-		...rest,
-		busy: busy ? true : void 0,
-		force: force ? true : void 0,
-		delay,
-		"min-duration": minDuration,
-		transition,
-		...force ? {
-			"aria-busy": "true",
-			inert: true
-		} : {},
-		suppressHydrationWarning: true,
-		"onbones:show": onShow,
-		"onbones:hide": onHide
-	}, children);
-}
-//#endregion
-export { BonesBoundary };

package/dist/react/create-bones.d.mts

@@ -1,23 +0,0 @@
-import { BoneOptions, BoneType, MinMax, isMinMax, minMax } from "../core/attributes.mjs";
-import { ReactNode } from "react";
-
-//#region src/react/create-bones.d.ts
-declare function readPromise<T>(promise: Promise<T>): T;
-type BoneProps = Record<string, unknown>;
-declare const forceBones: Promise<never>;
-interface CreateBonesOptions {
-  loading?: boolean;
-}
-interface CreateBonesReturn<T> {
-  bone: {
-    (type: "text", options?: BoneOptions): BoneProps;
-    (type: "block" | "container"): BoneProps;
-  };
-  data: T | null | undefined;
-  repeat: <U>(arr: U[] | undefined | null, count: number, render: (item: U | undefined, index: number) => ReactNode) => ReactNode[];
-  lines: <V>(value: V | null | undefined, count: number, render: (item: V | ReactNode) => ReactNode) => ReactNode[];
-}
-declare function createBones(options: CreateBonesOptions): CreateBonesReturn<never>;
-declare function createBones<T>(data: T | Promise<T> | undefined | null, options?: CreateBonesOptions): CreateBonesReturn<T>;
-//#endregion
-export { CreateBonesOptions, CreateBonesReturn, createBones, forceBones, readPromise };

package/dist/react/create-bones.mjs

@@ -1,69 +0,0 @@
-import { boneAttributes } from "../core/attributes.mjs";
-import { cloneElement, createElement, isValidElement } from "react";
-//#region src/react/create-bones.ts
-function withKey(node, key) {
-	return isValidElement(node) ? cloneElement(node, { key }) : node;
-}
-function readPromise(promise) {
-	const tracked = promise;
-	if (tracked._status === void 0) {
-		tracked._status = "pending";
-		promise.then((result) => {
-			tracked._status = "fulfilled";
-			tracked._result = result;
-		}, (error) => {
-			tracked._status = "rejected";
-			tracked._error = error;
-		});
-	}
-	if (tracked._status === "fulfilled") return tracked._result;
-	if (tracked._status === "rejected") throw tracked._error;
-	throw promise;
-}
-const forceBones = Object.freeze({});
-function createBones(dataOrOptions, maybeOptions) {
-	let data;
-	let options;
-	if (maybeOptions === void 0 && dataOrOptions !== null && dataOrOptions !== void 0 && typeof dataOrOptions === "object" && !(dataOrOptions instanceof Promise) && "loading" in dataOrOptions) {
-		data = void 0;
-		options = dataOrOptions;
-	} else {
-		data = dataOrOptions;
-		options = maybeOptions;
-	}
-	let resolved;
-	let isLoading = false;
-	if (options?.loading) {
-		isLoading = true;
-		resolved = void 0;
-	} else if (data != null && data === forceBones) {
-		isLoading = true;
-		resolved = void 0;
-	} else if (data != null && data instanceof Promise) resolved = readPromise(data);
-	else resolved = data;
-	let boneCallIndex = 0;
-	const bone = (type, options) => {
-		if (!isLoading) return {};
-		return { ...boneAttributes(type, options, boneCallIndex++) };
-	};
-	function repeat(arr, count, render) {
-		return (isLoading ? Array.from({ length: count }) : arr ?? []).map(render);
-	}
-	function lines(value, count, render) {
-		if (isLoading) return [withKey(render(Array.from({ length: count }, (_, i) => createElement("span", {
-			key: i,
-			"data-bone-line": true,
-			...bone("text")
-		}))), 0)];
-		if (value == null) return [];
-		return [withKey(render(value), 0)];
-	}
-	return {
-		bone,
-		data: isLoading ? void 0 : resolved,
-		repeat,
-		lines
-	};
-}
-//#endregion
-export { createBones, forceBones, readPromise };

package/dist/react/index.d.mts

@@ -1,4 +0,0 @@
-import { BoneOptions, BoneType, MinMax, isMinMax, minMax } from "../core/attributes.mjs";
-import { CreateBonesOptions, CreateBonesReturn, createBones, forceBones, readPromise } from "./create-bones.mjs";
-import { BonesBoundary, BonesBoundaryProps } from "./boundary.mjs";
-export { type BoneOptions, type BoneType, BonesBoundary, type BonesBoundaryProps, type CreateBonesOptions, type CreateBonesReturn, type MinMax, createBones, forceBones, isMinMax, minMax, readPromise };

package/dist/react/index.mjs

@@ -1,4 +0,0 @@
-import { isMinMax, minMax } from "../core/attributes.mjs";
-import { createBones, forceBones, readPromise } from "./create-bones.mjs";
-import { BonesBoundary } from "./boundary.mjs";
-export { BonesBoundary, createBones, forceBones, isMinMax, minMax, readPromise };

package/dist/server/bootstrap.d.mts

@@ -1,4 +0,0 @@
-//#region src/server/bootstrap.d.ts
-declare const BOOTSTRAP_SCRIPT = "<script>function __bonesSwap(e,r){var t=document.querySelector('template[data-bones-chunk=\"'+e+'\"]'),n=document.querySelector('[data-bones-slot=\"'+e+'\"]');n?(t&&(n.replaceChildren(t.content),t.remove()),r&&n.setAttribute(\"data-bones-error\",\"\"),\"boolean\"==typeof n.busy?n.busy=!1:(n.removeAttribute(\"busy\"),n.removeAttribute(\"aria-busy\"),n.removeAttribute(\"inert\"))):t&&t.remove()}</script>";
-//#endregion
-export { BOOTSTRAP_SCRIPT };

package/dist/server/bootstrap.mjs

@@ -1,3 +0,0 @@
-const BOOTSTRAP_SCRIPT = `<script>function __bonesSwap(e,r){var t=document.querySelector('template[data-bones-chunk="'+e+'"]'),n=document.querySelector('[data-bones-slot="'+e+'"]');n?(t&&(n.replaceChildren(t.content),t.remove()),r&&n.setAttribute("data-bones-error",""),"boolean"==typeof n.busy?n.busy=!1:(n.removeAttribute("busy"),n.removeAttribute("aria-busy"),n.removeAttribute("inert"))):t&&t.remove()}<\/script>`;
-//#endregion
-export { BOOTSTRAP_SCRIPT };

package/dist/server/index.d.mts

@@ -1,17 +0,0 @@
-import { BOOTSTRAP_SCRIPT } from "./bootstrap.mjs";
-
-//#region src/server/index.d.ts
-declare function renderBoundary(id: string, fallbackHtml: string, attrs?: string): string;
-declare function renderChunk(id: string, html: string): string;
-declare function renderErrorChunk(id: string, html?: string): string;
-interface StreamBonesOptions {
-  /**
-   * Renders the error HTML for a rejected slot. Returning undefined (and
-   * throwing) falls back to the bare error chunk, which keeps the boundary's
-   * fallback children.
-   */
-  onError?: (id: string, error: unknown) => string | undefined;
-}
-declare function streamBones(shell: string, slots: Record<string, Promise<string>>, options?: StreamBonesOptions): ReadableStream<Uint8Array>;
-//#endregion
-export { BOOTSTRAP_SCRIPT, StreamBonesOptions, renderBoundary, renderChunk, renderErrorChunk, streamBones };

package/dist/server/index.mjs

@@ -1,57 +0,0 @@
-import { BOOTSTRAP_SCRIPT } from "./bootstrap.mjs";
-//#region src/server/index.ts
-const ID_PATTERN = /^[A-Za-z0-9_-]+$/;
-function assertId(id) {
-	if (!ID_PATTERN.test(id)) throw new Error(`bones slot id ${JSON.stringify(id)} must match [A-Za-z0-9_-]+`);
-}
-function renderBoundary(id, fallbackHtml, attrs) {
-	assertId(id);
-	return `<bones-boundary busy aria-busy="true" inert data-bones-slot="${id}"${attrs === void 0 || attrs === "" ? "" : ` ${attrs}`}>${fallbackHtml}</bones-boundary>`;
-}
-function renderChunk(id, html) {
-	assertId(id);
-	return `<template data-bones-chunk="${id}">${html}</template><script>__bonesSwap("${id}")<\/script>`;
-}
-function renderErrorChunk(id, html) {
-	assertId(id);
-	if (html === void 0) return `<script>__bonesSwap("${id}",1)<\/script>`;
-	return `<template data-bones-chunk="${id}">${html}</template><script>__bonesSwap("${id}",1)<\/script>`;
-}
-function streamBones(shell, slots, options = {}) {
-	const ids = Object.keys(slots);
-	for (const id of ids) assertId(id);
-	const encoder = new TextEncoder();
-	let cancelled = false;
-	return new ReadableStream({
-		start(controller) {
-			const send = (html) => {
-				if (!cancelled) controller.enqueue(encoder.encode(html));
-			};
-			send(shell + BOOTSTRAP_SCRIPT);
-			if (ids.length === 0) {
-				controller.close();
-				return;
-			}
-			let pending = ids.length;
-			const settle = (chunk) => {
-				send(chunk);
-				pending -= 1;
-				if (pending === 0 && !cancelled) controller.close();
-			};
-			for (const id of ids) slots[id].then((html) => settle(renderChunk(id, html)), (error) => {
-				let html;
-				try {
-					html = options.onError?.(id, error);
-				} catch {
-					html = void 0;
-				}
-				settle(renderErrorChunk(id, html));
-			});
-		},
-		cancel() {
-			cancelled = true;
-		}
-	});
-}
-//#endregion
-export { BOOTSTRAP_SCRIPT, renderBoundary, renderChunk, renderErrorChunk, streamBones };