diff --git a/.changeset/camp-dev-rename.md b/.changeset/camp-dev-rename.md
new file mode 100644
index 0000000..71eb6d2
--- /dev/null
+++ b/.changeset/camp-dev-rename.md
@@ -0,0 +1,5 @@
+---
+"@camp-dev/bones": minor
+---
+
+Rename `@lovo/bones` to `@camp-dev/bones` and split it into subpath exports: the framework-agnostic core at the package root (`boneAttributes`, `minMax`, `resolveLength`), the React API at `@camp-dev/bones/react`, and the stylesheet at `@camp-dev/bones/css`. Update imports: `@lovo/bones` → `@camp-dev/bones/react`, `@lovo/bones/css` → `@camp-dev/bones/css`. `react` and `react-dom` are now optional peer dependencies.
diff --git a/.changeset/config.json b/.changeset/config.json
index ba89546..4d6a1a2 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "lovo-hq/bones" }],
+  "changelog": ["@changesets/changelog-github", { "repo": "campdotdev/bones" }],
   "commit": false,
   "fixed": [],
   "linked": [],
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b6c7559..cb51e0b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -6,6 +6,9 @@ on:
     branches:
       - main
 
+permissions:
+  contents: read
+
 jobs:
   # ── Bones library ──────────────────────────────────────────
   bones-check:
@@ -21,7 +24,7 @@ jobs:
           cache: true
 
       - name: Run lint, format, and type checks
-        run: vp run --filter @lovo/bones check
+        run: vp run --filter @camp-dev/bones check
 
   bones-build:
     name: "Bones: Build"
@@ -36,7 +39,7 @@ jobs:
           cache: true
 
       - name: Build library
-        run: vp run --filter @lovo/bones build
+        run: vp run --filter @camp-dev/bones build
 
   bones-test:
     name: "Bones: Test"
@@ -51,7 +54,7 @@ jobs:
           cache: true
 
       - name: Run tests
-        run: vp run --filter @lovo/bones test -- --run
+        run: vp run --filter @camp-dev/bones test -- --run
 
   # ── Demo app ───────────────────────────────────────────────
   demo-check:
@@ -67,7 +70,7 @@ jobs:
           cache: true
 
       - name: Build bones library
-        run: vp run --filter @lovo/bones build
+        run: vp run --filter @camp-dev/bones build
 
       - name: Run type check
         run: vp run --filter bones-demo check
@@ -85,7 +88,7 @@ jobs:
           cache: true
 
       - name: Build bones library
-        run: vp run --filter @lovo/bones build
+        run: vp run --filter @camp-dev/bones build
 
       - name: Build demo app
         run: vp run --filter bones-demo build
@@ -103,7 +106,7 @@ jobs:
           cache: true
 
       - name: Build bones library
-        run: vp run --filter @lovo/bones build
+        run: vp run --filter @camp-dev/bones build
 
       - name: Run tests
         run: vp run --filter bones-demo test -- --run
@@ -122,7 +125,7 @@ jobs:
           cache: true
 
       - name: Build bones library
-        run: vp run --filter @lovo/bones build
+        run: vp run --filter @camp-dev/bones build
 
       - name: Run type check
         run: vp run --filter bones-docs check
@@ -140,7 +143,7 @@ jobs:
           cache: true
 
       - name: Build bones library
-        run: vp run --filter @lovo/bones build
+        run: vp run --filter @camp-dev/bones build
 
       - name: Build docs site
         run: vp run --filter bones-docs build
diff --git a/README.md b/README.md
index 6bc195e..e66250d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Bones
 
-[![Bundle Size](https://deno.bundlejs.com/badge?q=@lovo/bones)](https://bundlejs.com/?q=%40lovo%2Fbones)
+[![Bundle Size](https://deno.bundlejs.com/badge?q=@camp-dev/bones)](https://bundlejs.com/?q=%40camp-dev%2Fbones)
 
 Skeleton loaders designed for React Server Components and streaming.
 
@@ -21,21 +21,31 @@ Bones skips the duplication. You write your markup once and it handles both stat
 ## Installation
 
 ```bash
-npm install @lovo/bones
+npm install @camp-dev/bones
 ```
 
 Import the CSS once in your root layout or entry point:
 
 ```tsx
-import "@lovo/bones/css";
+import "@camp-dev/bones/css";
 ```
 
+## Entry points
+
+| Import                  | Contents                                                                                                            |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `@camp-dev/bones/react` | `createBones`, `readPromise`, `forceBones`, `minMax`, `<Bones>`, `<BonesForce>`                                     |
+| `@camp-dev/bones/css`   | The skeleton stylesheet. Import once in your root layout.                                                           |
+| `@camp-dev/bones`       | The framework-agnostic core (`boneAttributes`, `minMax`). You only need this to build your own renderer or adapter. |
+
+React is an optional peer dependency: installing the package without React is supported and only the `/react` entry requires it.
+
 ## Basic usage
 
 Pass data (or a promise of data) to `createBones`. Spread the `bone` function's return value onto elements that should show skeletons while loading.
 
 ```tsx
-import { createBones } from "@lovo/bones";
+import { createBones } from "@camp-dev/bones/react";
 
 function ProfileCard({ user }: { user: Promise<User> | User }) {
   const { bone, data, lines } = createBones(user);
@@ -55,7 +65,7 @@ function ProfileCard({ user }: { user: Promise<User> | User }) {
 Wrap components that receive promises in `<Bones>`. It creates a Suspense boundary and generates the skeleton fallback for you:
 
 ```tsx
-import { Bones } from "@lovo/bones";
+import { Bones } from "@camp-dev/bones/react";
 
 export default function Page() {
   return (
@@ -81,7 +91,7 @@ While the promise is pending, `<Bones>` renders the same `<ProfileCard>` tree wi
 Use `forceBones` to see a component's skeleton state without setting up real data:
 
 ```tsx
-import { createBones, forceBones } from "@lovo/bones";
+import { createBones, forceBones } from "@camp-dev/bones/react";
 
 <ProfileCard user={forceBones} />;
 ```
@@ -89,7 +99,7 @@ import { createBones, forceBones } from "@lovo/bones";
 To force an entire subtree into skeleton mode at once, wrap it with `<BonesForce>`:
 
 ```tsx
-import { BonesForce } from "@lovo/bones";
+import { BonesForce } from "@camp-dev/bones/react";
 
 <BonesForce>
   <ProfileCard />
diff --git a/apps/demo/app/compare/page.tsx b/apps/demo/app/compare/page.tsx
index a1ca2b4..2f1e166 100644
--- a/apps/demo/app/compare/page.tsx
+++ b/apps/demo/app/compare/page.tsx
@@ -1,4 +1,4 @@
-import { BonesForce } from "bones";
+import { BonesForce } from "bones/react";
 import { HeroSection } from "@/components/hero-section/hero-section";
 import { DemoSection } from "@/components/demo-section/demo-section";
 import { PokemonGrid } from "@/components/pokemon-grid/pokemon-grid";
diff --git a/apps/demo/app/compare/pokemon/[id]/page.tsx b/apps/demo/app/compare/pokemon/[id]/page.tsx
index bc66454..33b64d8 100644
--- a/apps/demo/app/compare/pokemon/[id]/page.tsx
+++ b/apps/demo/app/compare/pokemon/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { BonesForce, forceBones } from "bones";
+import { BonesForce, forceBones } from "bones/react";
 import Link from "next/link";
 import { PokemonHero } from "@/components/pokemon-hero/pokemon-hero";
 import { BaseStatsCard } from "@/components/base-stats-card/base-stats-card";
diff --git a/apps/demo/app/layout.tsx b/apps/demo/app/layout.tsx
index 7afc538..a69f1a0 100644
--- a/apps/demo/app/layout.tsx
+++ b/apps/demo/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { cookies, headers } from "next/headers";
-import { BonesForce } from "bones";
+import { BonesForce } from "bones/react";
 import { BonesDevTool } from "@/components/bones-devtool/bones-devtool";
 import "bones/css";
 import "./globals.css";
diff --git a/apps/demo/app/pokemon/[id]/page.tsx b/apps/demo/app/pokemon/[id]/page.tsx
index 22ac8db..1b09f3e 100644
--- a/apps/demo/app/pokemon/[id]/page.tsx
+++ b/apps/demo/app/pokemon/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { Bones } from "bones";
+import { Bones } from "bones/react";
 import Link from "next/link";
 import { cookies } from "next/headers";
 import { delay } from "@/lib/delay";
diff --git a/apps/demo/app/pokemon/[id]/tabs-section.tsx b/apps/demo/app/pokemon/[id]/tabs-section.tsx
index 518d4a4..47c7cdd 100644
--- a/apps/demo/app/pokemon/[id]/tabs-section.tsx
+++ b/apps/demo/app/pokemon/[id]/tabs-section.tsx
@@ -1,4 +1,4 @@
-import { Bones } from "bones";
+import { Bones } from "bones/react";
 import type { PokemonMoveEntry, MoveDetail, EncounterLocation } from "@/lib/pokeapi";
 import { DetailTabs } from "@/components/detail-tabs/detail-tabs";
 import { MovesPanel } from "@/components/moves-panel/moves-panel";
diff --git a/apps/demo/components/animations-demo/animations-demo.tsx b/apps/demo/components/animations-demo/animations-demo.tsx
index 9296d93..dd9ac0c 100644
--- a/apps/demo/components/animations-demo/animations-demo.tsx
+++ b/apps/demo/components/animations-demo/animations-demo.tsx
@@ -1,4 +1,4 @@
-import { BonesForce } from "bones";
+import { BonesForce } from "bones/react";
 import { DemoSection } from "@/components/demo-section/demo-section";
 import { PokemonCard } from "@/components/pokemon-card/pokemon-card";
 import styles from "./styles.module.css";
diff --git a/apps/demo/components/article-preview/article-preview.tsx b/apps/demo/components/article-preview/article-preview.tsx
index 792f3e1..7ef9afc 100644
--- a/apps/demo/components/article-preview/article-preview.tsx
+++ b/apps/demo/components/article-preview/article-preview.tsx
@@ -1,4 +1,4 @@
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import styles from "./styles.module.css";
 
 interface Article {
diff --git a/apps/demo/components/base-stats-card/base-stats-card.tsx b/apps/demo/components/base-stats-card/base-stats-card.tsx
index bbd2180..c8c79eb 100644
--- a/apps/demo/components/base-stats-card/base-stats-card.tsx
+++ b/apps/demo/components/base-stats-card/base-stats-card.tsx
@@ -1,4 +1,4 @@
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import type { PokemonData } from "@/lib/pokeapi";
 import styles from "./styles.module.css";
 
diff --git a/apps/demo/components/dex-entries-panel/dex-entries-panel.tsx b/apps/demo/components/dex-entries-panel/dex-entries-panel.tsx
index cb4dae7..a3e1c4b 100644
--- a/apps/demo/components/dex-entries-panel/dex-entries-panel.tsx
+++ b/apps/demo/components/dex-entries-panel/dex-entries-panel.tsx
@@ -1,4 +1,4 @@
-import { createBones, minMax } from "bones";
+import { createBones, minMax } from "bones/react";
 import styles from "./styles.module.css";
 
 const VERSION_TO_GENERATION: Record<string, string> = {
diff --git a/apps/demo/components/evolution-chain-card/evolution-chain-card.tsx b/apps/demo/components/evolution-chain-card/evolution-chain-card.tsx
index 1c190ed..8617d2c 100644
--- a/apps/demo/components/evolution-chain-card/evolution-chain-card.tsx
+++ b/apps/demo/components/evolution-chain-card/evolution-chain-card.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import type { EvolutionChain } from "@/lib/pokeapi";
 import styles from "./styles.module.css";
 
diff --git a/apps/demo/components/forced-skeletons-demo/forced-skeletons-demo.tsx b/apps/demo/components/forced-skeletons-demo/forced-skeletons-demo.tsx
index affc26d..6bc1ef5 100644
--- a/apps/demo/components/forced-skeletons-demo/forced-skeletons-demo.tsx
+++ b/apps/demo/components/forced-skeletons-demo/forced-skeletons-demo.tsx
@@ -1,4 +1,4 @@
-import { BonesForce } from "bones";
+import { BonesForce } from "bones/react";
 import { fetchPokemonList } from "@/lib/pokeapi";
 import { DemoSection } from "@/components/demo-section/demo-section";
 import { PokemonGrid } from "@/components/pokemon-grid/pokemon-grid";
diff --git a/apps/demo/components/hero-section/hero-section.test.tsx b/apps/demo/components/hero-section/hero-section.test.tsx
index 9a79a76..75498be 100644
--- a/apps/demo/components/hero-section/hero-section.test.tsx
+++ b/apps/demo/components/hero-section/hero-section.test.tsx
@@ -20,6 +20,6 @@ describe("HeroSection", () => {
     const docsLink = screen.getByRole("link", { name: "Docs" });
     const githubLink = screen.getByRole("link", { name: "GitHub" });
     expect(docsLink.getAttribute("href")).toBe("https://bones.lovo.sh");
-    expect(githubLink.getAttribute("href")).toBe("https://github.com/lovo-hq/bones");
+    expect(githubLink.getAttribute("href")).toBe("https://github.com/campdotdev/bones");
   });
 });
diff --git a/apps/demo/components/hero-section/hero-section.tsx b/apps/demo/components/hero-section/hero-section.tsx
index b91518c..2cedb33 100644
--- a/apps/demo/components/hero-section/hero-section.tsx
+++ b/apps/demo/components/hero-section/hero-section.tsx
@@ -13,7 +13,7 @@ export function HeroSection() {
         </a>
         <span className={styles.heroDot} aria-hidden="true" />
         <a
-          href="https://github.com/lovo-hq/bones"
+          href="https://github.com/campdotdev/bones"
           className={styles.heroLink}
           target="_blank"
           rel="noopener noreferrer"
diff --git a/apps/demo/components/info-card/info-card.tsx b/apps/demo/components/info-card/info-card.tsx
index 3ea12a1..5f76032 100644
--- a/apps/demo/components/info-card/info-card.tsx
+++ b/apps/demo/components/info-card/info-card.tsx
@@ -1,4 +1,4 @@
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import styles from "./styles.module.css";
 
 interface InfoRow {
diff --git a/apps/demo/components/locations-panel/locations-panel.tsx b/apps/demo/components/locations-panel/locations-panel.tsx
index cc7f5b6..c0f5f1e 100644
--- a/apps/demo/components/locations-panel/locations-panel.tsx
+++ b/apps/demo/components/locations-panel/locations-panel.tsx
@@ -1,4 +1,4 @@
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import type { EncounterLocation } from "@/lib/pokeapi";
 import styles from "./styles.module.css";
 
diff --git a/apps/demo/components/moves-panel/moves-interactive.tsx b/apps/demo/components/moves-panel/moves-interactive.tsx
index a80f893..374534d 100644
--- a/apps/demo/components/moves-panel/moves-interactive.tsx
+++ b/apps/demo/components/moves-panel/moves-interactive.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import { createBones, minMax } from "bones";
+import { createBones, minMax } from "bones/react";
 import type { PokemonMoveEntry, MoveDetail } from "@/lib/pokeapi";
 import { TypeBadge } from "@/components/type-badge/type-badge";
 import styles from "./styles.module.css";
diff --git a/apps/demo/components/moves-panel/moves-panel.tsx b/apps/demo/components/moves-panel/moves-panel.tsx
index 38da583..3fe1563 100644
--- a/apps/demo/components/moves-panel/moves-panel.tsx
+++ b/apps/demo/components/moves-panel/moves-panel.tsx
@@ -1,4 +1,4 @@
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import type { PokemonMoveEntry, MoveDetail } from "@/lib/pokeapi";
 import { MovesInteractive } from "./moves-interactive";
 
diff --git a/apps/demo/components/multi-line-text-demo/multi-line-text-demo.tsx b/apps/demo/components/multi-line-text-demo/multi-line-text-demo.tsx
index 29fa6c0..5849d6c 100644
--- a/apps/demo/components/multi-line-text-demo/multi-line-text-demo.tsx
+++ b/apps/demo/components/multi-line-text-demo/multi-line-text-demo.tsx
@@ -1,4 +1,4 @@
-import { BonesForce } from "bones";
+import { BonesForce } from "bones/react";
 import { ArticlePreview } from "@/components/article-preview/article-preview";
 import { DemoSection } from "@/components/demo-section/demo-section";
 import styles from "./styles.module.css";
diff --git a/apps/demo/components/pokemon-card/pokemon-card.tsx b/apps/demo/components/pokemon-card/pokemon-card.tsx
index 50c8238..e017f4f 100644
--- a/apps/demo/components/pokemon-card/pokemon-card.tsx
+++ b/apps/demo/components/pokemon-card/pokemon-card.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import Link from "next/link";
 import type { PokemonListItem } from "@/lib/pokeapi";
 import { TypeBadge } from "@/components/type-badge/type-badge";
diff --git a/apps/demo/components/pokemon-detail-view/pokemon-detail-view.tsx b/apps/demo/components/pokemon-detail-view/pokemon-detail-view.tsx
index f3cee29..37ee438 100644
--- a/apps/demo/components/pokemon-detail-view/pokemon-detail-view.tsx
+++ b/apps/demo/components/pokemon-detail-view/pokemon-detail-view.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import type { PokemonDetail } from "@/lib/pokeapi";
 import { StatBar } from "@/components/stat-bar/stat-bar";
 import { TypeBadge } from "@/components/type-badge/type-badge";
diff --git a/apps/demo/components/pokemon-grid/pokemon-grid.tsx b/apps/demo/components/pokemon-grid/pokemon-grid.tsx
index 9bea204..c82ce23 100644
--- a/apps/demo/components/pokemon-grid/pokemon-grid.tsx
+++ b/apps/demo/components/pokemon-grid/pokemon-grid.tsx
@@ -1,4 +1,4 @@
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import { PokemonCard } from "@/components/pokemon-card/pokemon-card";
 import type { PokemonListItem } from "@/lib/pokeapi";
 import styles from "./styles.module.css";
diff --git a/apps/demo/components/pokemon-hero/pokemon-hero.tsx b/apps/demo/components/pokemon-hero/pokemon-hero.tsx
index 5f9a65b..7c978d4 100644
--- a/apps/demo/components/pokemon-hero/pokemon-hero.tsx
+++ b/apps/demo/components/pokemon-hero/pokemon-hero.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import type { PokemonData, SpeciesData } from "@/lib/pokeapi";
 import { TypeBadge } from "@/components/type-badge/type-badge";
 import styles from "./styles.module.css";
diff --git a/apps/demo/components/stat-bar/stat-bar.tsx b/apps/demo/components/stat-bar/stat-bar.tsx
index 482e592..32af657 100644
--- a/apps/demo/components/stat-bar/stat-bar.tsx
+++ b/apps/demo/components/stat-bar/stat-bar.tsx
@@ -1,4 +1,4 @@
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import styles from "./styles.module.css";
 
 type Stat = { name: string; value: number };
diff --git a/apps/demo/components/suspense-demo/suspense-demo.tsx b/apps/demo/components/suspense-demo/suspense-demo.tsx
index f37ea7e..9b65762 100644
--- a/apps/demo/components/suspense-demo/suspense-demo.tsx
+++ b/apps/demo/components/suspense-demo/suspense-demo.tsx
@@ -1,4 +1,4 @@
-import { Bones } from "bones";
+import { Bones } from "bones/react";
 import { delay } from "@/lib/delay";
 import { fetchPokemonList } from "@/lib/pokeapi";
 import { DemoSection } from "@/components/demo-section/demo-section";
diff --git a/apps/demo/components/theming-demo/theming-demo.tsx b/apps/demo/components/theming-demo/theming-demo.tsx
index a696221..a66937e 100644
--- a/apps/demo/components/theming-demo/theming-demo.tsx
+++ b/apps/demo/components/theming-demo/theming-demo.tsx
@@ -1,4 +1,4 @@
-import { BonesForce } from "bones";
+import { BonesForce } from "bones/react";
 import { DemoSection } from "@/components/demo-section/demo-section";
 import { PokemonCard } from "@/components/pokemon-card/pokemon-card";
 import styles from "./styles.module.css";
@@ -9,8 +9,8 @@ export function ThemingDemo() {
       title="Theming"
       description={
         <>
-          Customize skeleton colors with CSS custom properties. Override{" "}
-          <code>--bone-base</code> and <code>--bone-highlight</code> on any container.
+          Customize skeleton colors with CSS custom properties. Override <code>--bone-base</code>{" "}
+          and <code>--bone-highlight</code> on any container.
         </>
       }
     >
diff --git a/apps/demo/components/type-defense-card/type-defense-card.tsx b/apps/demo/components/type-defense-card/type-defense-card.tsx
index 320d1e4..4fea70b 100644
--- a/apps/demo/components/type-defense-card/type-defense-card.tsx
+++ b/apps/demo/components/type-defense-card/type-defense-card.tsx
@@ -1,4 +1,4 @@
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import type { TypeDefenseMap } from "@/lib/pokeapi";
 import { TypeBadge } from "@/components/type-badge/type-badge";
 import styles from "./styles.module.css";
diff --git a/apps/demo/package.json b/apps/demo/package.json
index 217a154..2d29360 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -4,13 +4,13 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "pnpm --filter @lovo/bones build && next build",
+    "build": "pnpm --filter @camp-dev/bones build && next build",
     "start": "next start",
     "check": "tsc --noEmit",
     "test": "vp test"
   },
   "dependencies": {
-    "bones": "workspace:@lovo/bones@*",
+    "bones": "workspace:@camp-dev/bones@*",
     "lucide-react": "^1.11.0",
     "next": "^15.3.1",
     "react": "^19.1.0",
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 4b596ee..eebe4c9 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -36,7 +36,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
                   </svg>
                 ),
                 text: "GitHub",
-                url: "https://github.com/lovo-hq/bones",
+                url: "https://github.com/campdotdev/bones",
                 external: true,
               },
             ]}
diff --git a/apps/docs/components/demo/pokemon-card.tsx b/apps/docs/components/demo/pokemon-card.tsx
index 64d6528..85a3c2d 100644
--- a/apps/docs/components/demo/pokemon-card.tsx
+++ b/apps/docs/components/demo/pokemon-card.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Image from "next/image";
-import { createBones } from "bones";
+import { createBones } from "bones/react";
 import styles from "./pokemon-card.module.css";
 
 interface Pokemon {
diff --git a/apps/docs/content/docs/api/bones-component.mdx b/apps/docs/content/docs/api/bones-component.mdx
index 975af16..468793a 100644
--- a/apps/docs/content/docs/api/bones-component.mdx
+++ b/apps/docs/content/docs/api/bones-component.mdx
@@ -4,7 +4,7 @@ description: Suspense wrapper that automatically renders skeletons as the fallba
 ---
 
 ```tsx
-import { Bones } from "@lovo/bones";
+import { Bones } from "@camp-dev/bones/react";
 ```
 
 `<Bones>` wraps its children in a `<Suspense>` boundary. The fallback is the same component tree, but with all `Promise` props replaced by `forceBones` and a loading flag set so nested `createBones` calls return skeleton attributes.
@@ -12,7 +12,7 @@ import { Bones } from "@lovo/bones";
 ## Usage
 
 ```tsx
-import { Bones } from "@lovo/bones";
+import { Bones } from "@camp-dev/bones/react";
 
 export default function Page() {
   return (
diff --git a/apps/docs/content/docs/api/bones-force.mdx b/apps/docs/content/docs/api/bones-force.mdx
index d5da33a..5316b60 100644
--- a/apps/docs/content/docs/api/bones-force.mdx
+++ b/apps/docs/content/docs/api/bones-force.mdx
@@ -4,7 +4,7 @@ description: Force skeleton mode for an entire subtree without Suspense.
 ---
 
 ```tsx
-import { BonesForce } from "@lovo/bones";
+import { BonesForce } from "@camp-dev/bones/react";
 ```
 
 `<BonesForce>` sets the loading flag for its entire subtree so all nested `createBones` calls return skeleton attributes. Unlike `<Bones>`, it does not create a Suspense boundary.
@@ -12,7 +12,7 @@ import { BonesForce } from "@lovo/bones";
 ## Usage
 
 ```tsx
-import { BonesForce } from "@lovo/bones";
+import { BonesForce } from "@camp-dev/bones/react";
 
 function SkeletonPreview() {
   return (
diff --git a/apps/docs/content/docs/api/create-bones.mdx b/apps/docs/content/docs/api/create-bones.mdx
index c3a66f1..2b1553f 100644
--- a/apps/docs/content/docs/api/create-bones.mdx
+++ b/apps/docs/content/docs/api/create-bones.mdx
@@ -4,7 +4,7 @@ description: Accepts data (or a promise) and returns skeleton helpers.
 ---
 
 ```ts
-import { createBones, minMax } from "@lovo/bones";
+import { createBones, minMax } from "@camp-dev/bones/react";
 
 const { bone, data, repeat, lines } = createBones(dataOrPromise, options?);
 ```
@@ -61,7 +61,7 @@ These options only apply to `"text"` bones. They are ignored for `"block"` and `
 Creates a variable-length descriptor for the `length` option. Each `bone()` call within a `createBones` instance gets a different deterministic width between `min` and `max` (inclusive). Useful inside `repeat()` so skeleton lists don't all look the same.
 
 ```tsx
-import { createBones, minMax } from "@lovo/bones";
+import { createBones, minMax } from "@camp-dev/bones/react";
 
 const { bone, data, repeat } = createBones(pokemon);
 
diff --git a/apps/docs/content/docs/api/force-bones.mdx b/apps/docs/content/docs/api/force-bones.mdx
index 699ed79..f7a04e2 100644
--- a/apps/docs/content/docs/api/force-bones.mdx
+++ b/apps/docs/content/docs/api/force-bones.mdx
@@ -4,7 +4,7 @@ description: Sentinel value for forcing skeleton mode on individual components.
 ---
 
 ```tsx
-import { forceBones } from "@lovo/bones";
+import { forceBones } from "@camp-dev/bones/react";
 ```
 
 `forceBones` is a frozen empty object typed as `Promise<never>`. Pass it as data to `createBones` to trigger skeleton mode for a single component without a Suspense boundary or `<BonesForce>` wrapper.
@@ -12,7 +12,7 @@ import { forceBones } from "@lovo/bones";
 ## Usage
 
 ```tsx
-import { createBones, forceBones } from "@lovo/bones";
+import { createBones, forceBones } from "@camp-dev/bones/react";
 
 function UserCard({ user }: { user: Promise<User> }) {
   const { bone, data } = createBones(user);
diff --git a/apps/docs/content/docs/examples.mdx b/apps/docs/content/docs/examples.mdx
index 8c899f6..04cd77a 100644
--- a/apps/docs/content/docs/examples.mdx
+++ b/apps/docs/content/docs/examples.mdx
@@ -8,7 +8,7 @@ description: Common patterns for using bones.
 Pass a promise to a component wrapped in `<Bones>`.
 
 ```tsx
-import { Bones } from "@lovo/bones";
+import { Bones, createBones } from "@camp-dev/bones/react";
 
 async function fetchUser(): Promise<User> {
   const res = await fetch("/api/user");
@@ -43,7 +43,7 @@ function UserCard({ user }: { user: Promise<User> }) {
 `<BonesForce>` shows skeleton states without real data:
 
 ```tsx
-import { BonesForce } from "@lovo/bones";
+import { BonesForce } from "@camp-dev/bones/react";
 
 function SkeletonDemo() {
   return (
@@ -65,7 +65,7 @@ function SkeletonDemo() {
 With hooks like React Query or SWR, pass the `loading` option to control skeleton state:
 
 ```tsx
-import { createBones } from "@lovo/bones";
+import { createBones } from "@camp-dev/bones/react";
 import useSWR from "swr";
 
 function UserCard() {
@@ -97,7 +97,7 @@ const { bone, repeat } = createBones({ loading: !moveDetails });
 `lines` generates skeleton `<span>` elements inside your wrapper. Full-width lines with a shorter last line, each with its own animation:
 
 ```tsx
-import { createBones } from "@lovo/bones";
+import { createBones } from "@camp-dev/bones/react";
 
 function ArticleCard({ article }: { article: Promise<Article> }) {
   const { bone, data, lines } = createBones(article);
@@ -121,7 +121,7 @@ During loading, `item` is an array of skeleton spans that render inside the `<p>
 `repeat` renders a fixed number of placeholder items while data loads. The callback receives each item (or `undefined` during loading) and its index:
 
 ```tsx
-import { createBones, minMax } from "@lovo/bones";
+import { createBones, minMax } from "@camp-dev/bones/react";
 
 function TagList({ pokemon }: { pokemon: Promise<Pokemon> }) {
   const { bone, data, repeat } = createBones(pokemon);
diff --git a/apps/docs/content/docs/getting-started.mdx b/apps/docs/content/docs/getting-started.mdx
index 946ae38..e2732ad 100644
--- a/apps/docs/content/docs/getting-started.mdx
+++ b/apps/docs/content/docs/getting-started.mdx
@@ -6,7 +6,7 @@ description: Install bones and render your first skeleton.
 ## Installation
 
 ```bash
-npm install @lovo/bones
+npm install @camp-dev/bones
 ```
 
 ## Import the CSS
@@ -14,7 +14,7 @@ npm install @lovo/bones
 Bones needs a small CSS file for skeleton visuals. Import it once in your root layout or entry point:
 
 ```tsx
-import "@lovo/bones/css";
+import "@camp-dev/bones/css";
 ```
 
 ## Basic usage
@@ -22,7 +22,7 @@ import "@lovo/bones/css";
 Pass data (or a promise of data) to `createBones`. Spread the `bone` function's return value onto elements that should show skeletons while loading.
 
 ```tsx
-import { createBones } from "@lovo/bones";
+import { createBones } from "@camp-dev/bones/react";
 
 function ProfileCard({ user }: { user: Promise<User> | User }) {
   const { bone, data, lines } = createBones(user);
@@ -44,7 +44,7 @@ function ProfileCard({ user }: { user: Promise<User> | User }) {
 Wrap components that receive promises in `<Bones>`. It creates a Suspense boundary and generates the skeleton fallback for you:
 
 ```tsx
-import { Bones } from "@lovo/bones";
+import { Bones } from "@camp-dev/bones/react";
 
 export default function Page() {
   return (
@@ -59,10 +59,10 @@ While the promise is pending, `<Bones>` renders the same `<ProfileCard>` tree wi
 
 ## Bone types
 
-| Type          | Use for                       | Example                              |
-| ------------- | ----------------------------- | ------------------------------------ |
-| `"text"`      | Headings, paragraphs, labels  | `<h2 {...bone("text")}>`             |
-| `"block"`     | Images, avatars, thumbnails   | `<img src={…} {...bone("block")} />` |
+| Type          | Use for                        | Example                              |
+| ------------- | ------------------------------ | ------------------------------------ |
+| `"text"`      | Headings, paragraphs, labels   | `<h2 {...bone("text")}>`             |
+| `"block"`     | Images, avatars, thumbnails    | `<img src={…} {...bone("block")} />` |
 | `"container"` | Wrappers with complex children | `<div {...bone("container")}>`       |
 
 ## Previewing skeletons
@@ -70,7 +70,7 @@ While the promise is pending, `<Bones>` renders the same `<ProfileCard>` tree wi
 Use `forceBones` to see a component's skeleton state without setting up real data:
 
 ```tsx
-import { createBones, forceBones } from "@lovo/bones";
+import { createBones, forceBones } from "@camp-dev/bones/react";
 
 // Pass forceBones in place of any promise prop:
 <ProfileCard user={forceBones} />;
@@ -79,7 +79,7 @@ import { createBones, forceBones } from "@lovo/bones";
 To force an entire subtree into skeleton mode at once, wrap it with `<BonesForce>`:
 
 ```tsx
-import { BonesForce } from "@lovo/bones";
+import { BonesForce } from "@camp-dev/bones/react";
 
 <BonesForce>
   <ProfileCard />
diff --git a/apps/docs/content/docs/index.mdx b/apps/docs/content/docs/index.mdx
index a48aa8a..26b7bf7 100644
--- a/apps/docs/content/docs/index.mdx
+++ b/apps/docs/content/docs/index.mdx
@@ -119,7 +119,7 @@ Why `React.cache()` instead of React Context? A context provider is a client com
 <div>
 
 ```tsx title="PokemonCard.tsx"
-import { createBones } from "@lovo/bones";
+import { createBones } from "@camp-dev/bones/react";
 
 function PokemonCard() {
   const { bone, data, repeat } = createBones(fetchPokemon());
diff --git a/apps/docs/package.json b/apps/docs/package.json
index ccffb3a..a523402 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -4,12 +4,12 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "pnpm --filter @lovo/bones build && next build",
+    "build": "pnpm --filter @camp-dev/bones build && next build",
     "start": "next start",
     "check": "fumadocs-mdx && tsc --noEmit"
   },
   "dependencies": {
-    "bones": "workspace:@lovo/bones@*",
+    "bones": "workspace:@camp-dev/bones@*",
     "fumadocs-core": "latest",
     "fumadocs-mdx": "latest",
     "fumadocs-ui": "latest",
diff --git a/package.json b/package.json
index b7ad222..d84b17d 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,11 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vp run --filter @lovo/bones dev",
-    "build": "vp run --filter @lovo/bones build",
+    "dev": "vp run --filter @camp-dev/bones dev",
+    "build": "vp run --filter @camp-dev/bones build",
     "demo": "vp run --filter bones-demo dev",
-    "test": "vp run --filter @lovo/bones test",
-    "health": "vp run --filter @lovo/bones health",
+    "test": "vp run --filter @camp-dev/bones test",
+    "health": "vp run --filter @camp-dev/bones health",
     "docs": "vp run --filter bones-docs dev",
     "prepare": "vp config"
   },
diff --git a/packages/bones/README.md b/packages/bones/README.md
index 998b3d1..65d7c63 100644
--- a/packages/bones/README.md
+++ b/packages/bones/README.md
@@ -1,6 +1,6 @@
 # Bones
 
-[![Bundle Size](https://deno.bundlejs.com/badge?q=@lovo/bones)](https://bundlejs.com/?q=%40lovo%2Fbones)
+[![Bundle Size](https://deno.bundlejs.com/badge?q=@camp-dev/bones)](https://bundlejs.com/?q=%40camp-dev%2Fbones)
 
 Skeleton loaders designed for React Server Components and streaming. ~2.7 kB gzipped, 0 dependencies.
 
@@ -21,21 +21,31 @@ Bones skips the duplication. You write your markup once and it handles both stat
 ## Installation
 
 ```bash
-npm install @lovo/bones
+npm install @camp-dev/bones
 ```
 
 Import the CSS once in your root layout or entry point:
 
 ```tsx
-import "@lovo/bones/css";
+import "@camp-dev/bones/css";
 ```
 
+## Entry points
+
+| Import                  | Contents                                                                                                            |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `@camp-dev/bones/react` | `createBones`, `readPromise`, `forceBones`, `minMax`, `<Bones>`, `<BonesForce>`                                     |
+| `@camp-dev/bones/css`   | The skeleton stylesheet. Import once in your root layout.                                                           |
+| `@camp-dev/bones`       | The framework-agnostic core (`boneAttributes`, `minMax`). You only need this to build your own renderer or adapter. |
+
+React is an optional peer dependency: installing the package without React is supported and only the `/react` entry requires it.
+
 ## Basic usage
 
 Pass data (or a promise of data) to `createBones`. Spread the `bone` function's return value onto elements that should show skeletons while loading.
 
 ```tsx
-import { createBones } from "@lovo/bones";
+import { createBones } from "@camp-dev/bones/react";
 
 function ProfileCard({ user }: { user: Promise<User> | User }) {
   const { bone, data, lines } = createBones(user);
@@ -55,7 +65,7 @@ function ProfileCard({ user }: { user: Promise<User> | User }) {
 Wrap components that receive promises in `<Bones>`. It creates a Suspense boundary and generates the skeleton fallback for you:
 
 ```tsx
-import { Bones } from "@lovo/bones";
+import { Bones } from "@camp-dev/bones/react";
 
 export default function Page() {
   return (
@@ -81,7 +91,7 @@ While the promise is pending, `<Bones>` renders the same `<ProfileCard>` tree wi
 Use `forceBones` to see a component's skeleton state without setting up real data:
 
 ```tsx
-import { createBones, forceBones } from "@lovo/bones";
+import { createBones, forceBones } from "@camp-dev/bones/react";
 
 <ProfileCard user={forceBones} />;
 ```
@@ -89,7 +99,7 @@ import { createBones, forceBones } from "@lovo/bones";
 To force an entire subtree into skeleton mode at once, wrap it with `<BonesForce>`:
 
 ```tsx
-import { BonesForce } from "@lovo/bones";
+import { BonesForce } from "@camp-dev/bones/react";
 
 <BonesForce>
   <ProfileCard />
diff --git a/packages/bones/package.json b/packages/bones/package.json
index a68b107..6705491 100644
--- a/packages/bones/package.json
+++ b/packages/bones/package.json
@@ -1,16 +1,16 @@
 {
-  "name": "@lovo/bones",
+  "name": "@camp-dev/bones",
   "version": "0.1.2",
   "description": "Skeleton loaders designed for React Server Components and streaming.",
-  "homepage": "https://github.com/lovo-hq/bones#readme",
+  "homepage": "https://github.com/campdotdev/bones#readme",
   "bugs": {
-    "url": "https://github.com/lovo-hq/bones/issues"
+    "url": "https://github.com/campdotdev/bones/issues"
   },
   "license": "MIT",
   "author": "hunterbecton",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/lovo-hq/bones.git"
+    "url": "git+https://github.com/campdotdev/bones.git"
   },
   "files": [
     "dist",
@@ -22,6 +22,7 @@
   ],
   "exports": {
     ".": "./dist/index.mjs",
+    "./react": "./dist/react/index.mjs",
     "./package.json": "./package.json",
     "./css": {
       "style": "./src/css/bones.css",
@@ -55,5 +56,13 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }
diff --git a/packages/bones/src/core/attributes.ts b/packages/bones/src/core/attributes.ts
new file mode 100644
index 0000000..9f1d63c
--- /dev/null
+++ b/packages/bones/src/core/attributes.ts
@@ -0,0 +1,86 @@
+export type BoneType = "text" | "block" | "container";
+
+// ---------------------------------------------------------------------------
+// minMax — variable-length skeleton helper
+//
+// Returns a descriptor that `boneAttributes("text", { length: minMax(4, 12) })`
+// uses to produce a different deterministic width per call index. Ideal inside
+// repeat() loops for natural-looking skeleton lists.
+// ---------------------------------------------------------------------------
+
+const MIN_MAX_BRAND = Symbol("minMax");
+
+export interface MinMax {
+  readonly [MIN_MAX_BRAND]: true;
+  readonly min: number;
+  readonly max: number;
+}
+
+export function minMax(min: number, max: number): MinMax {
+  return { [MIN_MAX_BRAND]: true, min, max };
+}
+
+export function isMinMax(value: unknown): value is MinMax {
+  return typeof value === "object" && value !== null && MIN_MAX_BRAND in value;
+}
+
+export interface BoneOptions {
+  length?: number | MinMax;
+  contained?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// boneAttributes — the framework-agnostic attribute contract
+//
+// Returns the HTML attributes that mark an element as a skeleton for the CSS
+// engine: `data-bone` marks shape, `aria-busy` marks state. Renderers (the
+// React adapter in src/react, future custom elements) spread or set these
+// on elements.
+// ---------------------------------------------------------------------------
+
+export interface BoneAttributes {
+  "data-bone": BoneType;
+  "aria-busy": true;
+  src?: string;
+  style?: Record<string, number>;
+}
+
+export const TRANSPARENT_PIXEL =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
+export function resolveLength(
+  length: number | MinMax | undefined,
+  callIndex: number,
+): number | undefined {
+  if (length == null) return undefined;
+  if (typeof length === "number") return length;
+  // MinMax: deterministic variation based on call index
+  const range = length.max - length.min + 1;
+  return length.min + ((callIndex * 7 + 3) % range);
+}
+
+export function boneAttributes(
+  type: BoneType,
+  options?: BoneOptions,
+  callIndex = 0,
+): BoneAttributes {
+  const attrs: BoneAttributes = { "data-bone": type, "aria-busy": true };
+
+  if (type === "text") {
+    const style: Record<string, number> = {};
+    if (options?.contained) {
+      style["--bone-contained"] = 1;
+    }
+    const length = resolveLength(options?.length, callIndex);
+    if (length) {
+      style["--bone-length"] = length;
+    }
+    if (Object.keys(style).length > 0) attrs.style = style;
+  }
+
+  if (type === "block") {
+    attrs.src = TRANSPARENT_PIXEL;
+  }
+
+  return attrs;
+}
diff --git a/packages/bones/src/index.ts b/packages/bones/src/index.ts
index 69026b6..1b37797 100644
--- a/packages/bones/src/index.ts
+++ b/packages/bones/src/index.ts
@@ -1,9 +1,8 @@
-export { createBones, readPromise, forceBones, minMax, isMinMax } from "./create-bones.ts";
-export { Bones, BonesForce } from "./bones.ts";
-export type {
-  BoneType,
-  BoneOptions,
-  MinMax,
-  CreateBonesOptions,
-  CreateBonesReturn,
-} from "./create-bones.ts";
+export {
+  boneAttributes,
+  isMinMax,
+  minMax,
+  resolveLength,
+  TRANSPARENT_PIXEL,
+} from "./core/attributes.ts";
+export type { BoneAttributes, BoneOptions, BoneType, MinMax } from "./core/attributes.ts";
diff --git a/packages/bones/src/bones.ts b/packages/bones/src/react/bones.ts
similarity index 100%
rename from packages/bones/src/bones.ts
rename to packages/bones/src/react/bones.ts
diff --git a/packages/bones/src/create-bones.ts b/packages/bones/src/react/create-bones.ts
similarity index 72%
rename from packages/bones/src/create-bones.ts
rename to packages/bones/src/react/create-bones.ts
index 5c1a7c7..f3ad701 100644
--- a/packages/bones/src/create-bones.ts
+++ b/packages/bones/src/react/create-bones.ts
@@ -1,4 +1,11 @@
 import { cache, cloneElement, createElement, isValidElement, type ReactNode } from "react";
+import { boneAttributes } from "../core/attributes.ts";
+import type { BoneOptions, BoneType, MinMax } from "../core/attributes.ts";
+
+// Re-export the framework-agnostic pieces so the React entry's public API is
+// unchanged by the core extraction.
+export { minMax, isMinMax } from "../core/attributes.ts";
+export type { BoneOptions, BoneType, MinMax };
 
 // ---------------------------------------------------------------------------
 // Server-safe loading context via React.cache
@@ -9,41 +16,10 @@ import { cache, cloneElement, createElement, isValidElement, type ReactNode } fr
 
 export const getBonesContext = cache(() => ({ loading: false }));
 
-export type BoneType = "text" | "block" | "container";
-
-// ---------------------------------------------------------------------------
-// minMax — variable-length skeleton helper
-//
-// Returns a descriptor that `bone("text", { length: minMax(4, 12) })` uses to
-// produce a different deterministic width on each call within a createBones
-// instance. Ideal inside repeat() loops for natural-looking skeleton lists.
-// ---------------------------------------------------------------------------
-
-const MIN_MAX_BRAND = Symbol("minMax");
-
-export interface MinMax {
-  readonly [MIN_MAX_BRAND]: true;
-  readonly min: number;
-  readonly max: number;
-}
-
-export function minMax(min: number, max: number): MinMax {
-  return { [MIN_MAX_BRAND]: true, min, max };
-}
-
-export function isMinMax(value: unknown): value is MinMax {
-  return typeof value === "object" && value !== null && MIN_MAX_BRAND in value;
-}
-
 function withKey(node: ReactNode, key: string | number): ReactNode {
   return isValidElement(node) ? cloneElement(node, { key }) : node;
 }
 
-export interface BoneOptions {
-  length?: number | MinMax;
-  contained?: boolean;
-}
-
 // ---------------------------------------------------------------------------
 // readPromise — throw-promise pattern for Suspense integration
 //
@@ -87,35 +63,8 @@ export function readPromise<T>(promise: Promise<T>): T {
 // When `data` is a Promise it delegates to `readPromise` for Suspense support.
 // ---------------------------------------------------------------------------
 
-const TRANSPARENT_PIXEL =
-  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
-
 type BoneProps = Record<string, unknown>;
 
-function resolveLength(length: number | MinMax | undefined, callIndex: number): number | undefined {
-  if (length == null) return undefined;
-  if (typeof length === "number") return length;
-  // MinMax: deterministic variation based on call index
-  const range = length.max - length.min + 1;
-  return length.min + ((callIndex * 7 + 3) % range);
-}
-
-function buildTextStyle(
-  options: BoneOptions | undefined,
-  resolvedLength: number | undefined,
-): Record<string, unknown> | undefined {
-  const style: Record<string, unknown> = {};
-
-  if (options?.contained) {
-    style["--bone-contained"] = 1;
-  }
-  if (resolvedLength) {
-    style["--bone-length"] = resolvedLength;
-  }
-
-  return Object.keys(style).length > 0 ? style : undefined;
-}
-
 // ---------------------------------------------------------------------------
 // forceBones — sentinel for forced skeleton mode
 //
@@ -202,24 +151,7 @@ export function createBones<T>(
 
   const bone = (type: BoneType, options?: BoneOptions): BoneProps => {
     if (!isLoading) return {};
-
-    const callIndex = boneCallIndex++;
-    const props: BoneProps = {
-      "data-bone": type,
-      "aria-busy": true,
-    };
-
-    if (type === "text") {
-      const length = resolveLength(options?.length, callIndex);
-      const style = buildTextStyle(options, length);
-      if (style) props.style = style;
-    }
-
-    if (type === "block") {
-      props.src = TRANSPARENT_PIXEL;
-    }
-
-    return props;
+    return { ...boneAttributes(type, options, boneCallIndex++) };
   };
 
   function repeat<U>(
diff --git a/packages/bones/src/react/index.ts b/packages/bones/src/react/index.ts
new file mode 100644
index 0000000..69026b6
--- /dev/null
+++ b/packages/bones/src/react/index.ts
@@ -0,0 +1,9 @@
+export { createBones, readPromise, forceBones, minMax, isMinMax } from "./create-bones.ts";
+export { Bones, BonesForce } from "./bones.ts";
+export type {
+  BoneType,
+  BoneOptions,
+  MinMax,
+  CreateBonesOptions,
+  CreateBonesReturn,
+} from "./create-bones.ts";
diff --git a/packages/bones/tests/attributes.test.ts b/packages/bones/tests/attributes.test.ts
new file mode 100644
index 0000000..3b1a3e8
--- /dev/null
+++ b/packages/bones/tests/attributes.test.ts
@@ -0,0 +1,85 @@
+import { describe, expect, test } from "vite-plus/test";
+import {
+  boneAttributes,
+  isMinMax,
+  minMax,
+  resolveLength,
+  TRANSPARENT_PIXEL,
+} from "../src/core/attributes.ts";
+
+describe("boneAttributes", () => {
+  test("text bone has data-bone and aria-busy only", () => {
+    expect(boneAttributes("text")).toEqual({ "data-bone": "text", "aria-busy": true });
+  });
+
+  test("text bone with length sets --bone-length", () => {
+    expect(boneAttributes("text", { length: 12 })).toEqual({
+      "data-bone": "text",
+      "aria-busy": true,
+      style: { "--bone-length": 12 },
+    });
+  });
+
+  test("contained text bone sets --bone-contained", () => {
+    expect(boneAttributes("text", { contained: true, length: 7 })).toEqual({
+      "data-bone": "text",
+      "aria-busy": true,
+      style: { "--bone-contained": 1, "--bone-length": 7 },
+    });
+  });
+
+  test("block bone carries the transparent pixel src", () => {
+    expect(boneAttributes("block")).toEqual({
+      "data-bone": "block",
+      "aria-busy": true,
+      src: TRANSPARENT_PIXEL,
+    });
+  });
+
+  test("container bone has no style or src", () => {
+    expect(boneAttributes("container")).toEqual({
+      "data-bone": "container",
+      "aria-busy": true,
+    });
+  });
+
+  test("options are ignored for non-text bones", () => {
+    expect(boneAttributes("block", { length: 5 }).style).toBeUndefined();
+  });
+});
+
+describe("resolveLength", () => {
+  test("passes plain numbers through", () => {
+    expect(resolveLength(9, 0)).toBe(9);
+    expect(resolveLength(9, 3)).toBe(9);
+  });
+
+  test("returns undefined for undefined", () => {
+    expect(resolveLength(undefined, 3)).toBeUndefined();
+  });
+
+  test("minMax varies deterministically with call index", () => {
+    const range = minMax(4, 12);
+    const widths = [0, 1, 2, 3].map((i) => resolveLength(range, i));
+    // min + ((i * 7 + 3) % 9)
+    expect(widths).toEqual([7, 5, 12, 10]);
+  });
+
+  test("minMax stays within bounds", () => {
+    const range = minMax(4, 12);
+    for (let i = 0; i < 50; i++) {
+      const width = resolveLength(range, i);
+      expect(width).toBeGreaterThanOrEqual(4);
+      expect(width).toBeLessThanOrEqual(12);
+    }
+  });
+});
+
+describe("minMax", () => {
+  test("isMinMax accepts minMax descriptors and rejects lookalikes", () => {
+    expect(isMinMax(minMax(1, 2))).toBe(true);
+    expect(isMinMax({ min: 1, max: 2 })).toBe(false);
+    expect(isMinMax(null)).toBe(false);
+    expect(isMinMax(7)).toBe(false);
+  });
+});
diff --git a/packages/bones/tests/create-bones.test.tsx b/packages/bones/tests/create-bones.test.tsx
index e52d49d..2b0a7d1 100644
--- a/packages/bones/tests/create-bones.test.tsx
+++ b/packages/bones/tests/create-bones.test.tsx
@@ -1,7 +1,7 @@
 import { cleanup, render, screen, act } from "@testing-library/react";
 import { Suspense } from "react";
 import { afterEach, describe, expect, test } from "vite-plus/test";
-import { createBones, forceBones } from "../src/create-bones.ts";
+import { createBones, forceBones } from "../src/react/create-bones.ts";
 
 const mockData = { name: "Pikachu" };
 
diff --git a/packages/bones/tests/css-skeleton.test.tsx b/packages/bones/tests/css-skeleton.test.tsx
index 4dfd368..bc02f84 100644
--- a/packages/bones/tests/css-skeleton.test.tsx
+++ b/packages/bones/tests/css-skeleton.test.tsx
@@ -1,6 +1,6 @@
 import { cleanup, render } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vite-plus/test";
-import { createBones, forceBones } from "../src/create-bones.ts";
+import { createBones, forceBones } from "../src/react/create-bones.ts";
 
 const mockData = { text: "Hello World" };
 
diff --git a/packages/bones/tests/read-promise.test.tsx b/packages/bones/tests/read-promise.test.tsx
index 494cd8c..604049d 100644
--- a/packages/bones/tests/read-promise.test.tsx
+++ b/packages/bones/tests/read-promise.test.tsx
@@ -3,7 +3,7 @@ import { Suspense } from "react";
 import { afterEach, describe, expect, test } from "vite-plus/test";
 
 // readPromise is internal — import directly from source
-import { readPromise } from "../src/create-bones.ts";
+import { readPromise } from "../src/react/create-bones.ts";
 
 function ReadPromiseTest({ promise }: { promise: Promise<string> }) {
   const result = readPromise(promise);
diff --git a/packages/bones/vite.config.ts b/packages/bones/vite.config.ts
index cd9c3e9..bf8ab09 100644
--- a/packages/bones/vite.config.ts
+++ b/packages/bones/vite.config.ts
@@ -5,7 +5,7 @@ export default defineConfig({
     "*": "vp check --fix",
   },
   pack: {
-    entry: ["src/index.ts"],
+    entry: ["src/index.ts", "src/react/index.ts"],
     unbundle: true,
     copy: "src/css",
     dts: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84da115..0f0ffb5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,7 +25,7 @@ importers:
   apps/demo:
     dependencies:
       bones:
-        specifier: workspace:@lovo/bones@*
+        specifier: workspace:@camp-dev/bones@*
         version: link:../../packages/bones
       lucide-react:
         specifier: ^1.11.0
@@ -62,7 +62,7 @@ importers:
   apps/docs:
     dependencies:
       bones:
-        specifier: workspace:@lovo/bones@*
+        specifier: workspace:@camp-dev/bones@*
         version: link:../../packages/bones
       fumadocs-core:
         specifier: latest