@camp.dev/bones 0.2.0 → 0.4.0

package/dist/server/index.mjs

@@ -0,0 +1,57 @@
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camp.dev/bones",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Skeleton loaders designed for React Server Components and streaming.",
   "homepage": "https://github.com/campdotdev/bones#readme",
   "bugs": {
@@ -18,11 +18,14 @@
   ],
   "type": "module",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./dist/element/index.mjs"
   ],
   "exports": {
     ".": "./dist/index.mjs",
+    "./element": "./dist/element/index.mjs",
     "./react": "./dist/react/index.mjs",
+    "./server": "./dist/server/index.mjs",
     "./package.json": "./package.json",
     "./css": {
       "style": "./src/css/bones.css",
@@ -45,6 +48,7 @@
     "@typescript/native-preview": "7.0.0-dev.20260328.1",
     "@vitest/coverage-v8": "^4.1.5",
     "jsdom": "^29.0.2",
+    "playwright": "^1.62.1",
     "react": "^19.2.5",
     "typescript": "^6.0.2",
     "vite-plus": "^0.1.14"
@@ -66,6 +70,6 @@
     "dev": "vp pack --watch",
     "test": "vp test",
     "check": "vp check",
-    "health": "vp test --coverage && fallow health --root . --coverage coverage/coverage-final.json --format json --quiet"
+    "health": "vp test --project unit --coverage && fallow health --root . --coverage coverage/coverage-final.json --format json --quiet"
   }
 }

package/src/css/auto.css

@@ -44,7 +44,7 @@
       select *,
       object *
     ) {
-    color: transparent;
+    color: rgb(from currentcolor r g b / 0);
     position: relative;
     min-width: 4ch;
     min-height: 1lh;
@@ -144,7 +144,7 @@
       progress,
       meter
     ):not([data-bone], [data-bone] *, [data-bones-auto="off"], [data-bones-auto="off"] *) {
-    color: transparent;
+    color: rgb(from currentcolor r g b / 0);
     background-color: var(--bone-base);
     border-radius: var(--bone-radius);
     border-color: transparent;
@@ -283,10 +283,13 @@
 }
 
 @layer bones-auto {
-  /* Auto bones default to shimmer. bones.css only animates inside a
-     [data-bone-animate] scope; a zero-markup page has no such attribute, so
-     the default lives here and the scopes below mirror bones.css for pages
-     that do set it. */
+  /* Auto bones default to shimmer. bones.css has its own default, but its
+     rules match [data-bone] elements only and never the unmarked leaves
+     targeted here, so the default is restated for them, and the scopes below
+     mirror bones.css for pages that set the attribute (BON-16). In those
+     scopes, :is(:scope, :scope *) lets the attribute
+     sit on the aria-busy element itself: a scoped selector's implicit :scope
+     prefix matches strict descendants only (BON-17). */
   [aria-busy="true"]
     :not(:has(*)):not(
       [data-bone],
@@ -374,7 +377,7 @@
   }
 
   @scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -403,7 +406,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -432,7 +435,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -461,7 +464,7 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -490,7 +493,7 @@
           select *,
           object *
         )::before,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -519,7 +522,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -544,7 +547,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -573,7 +576,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -598,7 +601,7 @@
   }
 
   @scope ([data-bone-animate="pulse"]) to ([data-bone-animate]:not([data-bone-animate="pulse"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -627,7 +630,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -656,7 +659,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -680,7 +683,7 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -709,7 +712,7 @@
           select *,
           object *
         )::before,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -738,7 +741,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -763,7 +766,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -792,7 +795,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -817,7 +820,7 @@
   }
 
   @scope ([data-bone-animate="none"]) to ([data-bone-animate]:not([data-bone-animate="none"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -846,7 +849,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -875,7 +878,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -899,7 +902,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -928,7 +931,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -1090,3 +1093,13 @@
     }
   }
 }
+
+@layer bones-auto {
+  /* precision="measured" hides a boundary's content with inherited
+     visibility from the shadow side. Visibility, unlike display, can be
+     switched back on by a descendant, so the opt-out contract survives
+     measured mode: exempt subtrees stay visible under the overlay. */
+  bones-boundary[data-bones-measured] [data-bones-auto="off"] {
+    visibility: visible;
+  }
+}

package/src/css/bones.css

@@ -1,19 +1,18 @@
 :root {
-  --bone-base: rgba(0, 0, 0, 0.12);
-  --bone-highlight: rgba(0, 0, 0, 0.06);
+  /* 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;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bone-base: rgba(255, 255, 255, 0.12);
-    --bone-highlight: rgba(255, 255, 255, 0.06);
-  }
-}
-
 [data-bone="text"] {
-  color: transparent;
+  color: rgb(from currentcolor r g b / 0);
   position: relative;
   min-width: 4ch;
   min-height: 1lh;
@@ -72,7 +71,7 @@
 
 img[data-bone="block"],
 video[data-bone="block"] {
-  color: transparent;
+  color: rgb(from currentcolor r g b / 0);
 }
 
 [data-bone="container"] {
@@ -111,11 +110,43 @@ video[data-bone="block"] {
   }
 }
 
-@scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
+/* 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="text"]::before,
   [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,
@@ -125,32 +156,42 @@ video[data-bone="block"] {
     );
     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"]::after,
-  [data-bone="text"]::before,
-  [data-bone="block"],
-  [data-bone="container"]::before {
+  [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"]::after,
-  [data-bone="text"]::before,
-  [data-bone="block"],
-  [data-bone="container"]::before {
+  [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;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  [aria-busy="true"] {
-    animation: bone-pulse 2s ease-in-out infinite;
-  }
-}

package/dist/react/bones.d.mts

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-
-//#region src/react/bones.d.ts
-declare function BonesForce({
-  children
-}: {
-  children: ReactNode;
-}): ReactNode;
-declare function Bones({
-  children
-}: {
-  children: ReactNode;
-}): ReactNode;
-//#endregion
-export { Bones, BonesForce };

package/dist/react/bones.mjs

@@ -1,27 +0,0 @@
-import { forceBones, getBonesContext } from "./create-bones.mjs";
-import { Children, Fragment, Suspense, cloneElement, createElement, isValidElement } from "react";
-//#region src/react/bones.ts
-function BonesStart() {
-	getBonesContext().loading = true;
-	return null;
-}
-function BonesEnd() {
-	getBonesContext().loading = false;
-	return null;
-}
-function swapPromises(children) {
-	return Children.map(children, (child) => {
-		if (!isValidElement(child)) return child;
-		const props = {};
-		for (const [key, value] of Object.entries(child.props)) props[key] = value instanceof Promise ? forceBones : value;
-		return cloneElement(child, props);
-	});
-}
-function BonesForce({ children }) {
-	return createElement(Fragment, null, createElement(BonesStart), children, createElement(BonesEnd));
-}
-function Bones({ children }) {
-	return createElement(Suspense, { fallback: createElement(Fragment, null, createElement(BonesStart), swapPromises(children), createElement(BonesEnd)) }, children);
-}
-//#endregion
-export { Bones, BonesForce };