@camp.dev/bones 0.2.0

package/dist/css/bones.css

@@ -0,0 +1,156 @@
+:root {
+  --bone-base: rgba(0, 0, 0, 0.12);
+  --bone-highlight: rgba(0, 0, 0, 0.06);
+  --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;
+  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: transparent;
+}
+
+[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;
+  }
+}
+
+@scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
+  [data-bone="text"]::after,
+  [data-bone="text"]::before,
+  [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%;
+  }
+}
+
+@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 {
+    animation: bone-pulse var(--bone-duration) ease-in-out infinite;
+    background: var(--bone-base);
+    background-size: auto;
+  }
+}
+
+@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 {
+    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/index.d.mts

@@ -0,0 +1,2 @@
+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

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

package/dist/react/bones.d.mts

@@ -0,0 +1,15 @@
+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

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

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,73 @@
+import { boneAttributes } from "../core/attributes.mjs";
+import { cache, cloneElement, createElement, isValidElement } from "react";
+//#region src/react/create-bones.ts
+const getBonesContext = cache(() => ({ loading: false }));
+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 (getBonesContext().loading) {
+		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, getBonesContext, readPromise };

package/dist/react/index.d.mts

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

package/dist/react/index.mjs

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

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@camp.dev/bones",
+  "version": "0.2.0",
+  "description": "Skeleton loaders designed for React Server Components and streaming.",
+  "homepage": "https://github.com/campdotdev/bones#readme",
+  "bugs": {
+    "url": "https://github.com/campdotdev/bones/issues"
+  },
+  "license": "MIT",
+  "author": "hunterbecton",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/campdotdev/bones.git"
+  },
+  "files": [
+    "dist",
+    "src/css"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./react": "./dist/react/index.mjs",
+    "./package.json": "./package.json",
+    "./css": {
+      "style": "./src/css/bones.css",
+      "default": "./src/css/bones.css"
+    },
+    "./auto.css": {
+      "style": "./src/css/auto.css",
+      "default": "./src/css/auto.css"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript/native-preview": "7.0.0-dev.20260328.1",
+    "@vitest/coverage-v8": "^4.1.5",
+    "jsdom": "^29.0.2",
+    "react": "^19.2.5",
+    "typescript": "^6.0.2",
+    "vite-plus": "^0.1.14"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vp pack",
+    "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"
+  }
+}