Restructure to @camp-dev/bones with subpath exports

.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.

.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": [],

.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

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,15 +91,15 @@ 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} />;
 ```
 
 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 />

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";

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";

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";

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";

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";

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";

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 {

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";
 

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> = {

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";
 

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";

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");
   });
 });

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"

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 {

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";
 

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";

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";
 

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";

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";

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";

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";

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";

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 };

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";

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.
         </>
       }
     >

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";

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",

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,
               },
             ]}

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 {

apps/docs/content/docs/api/bones-component.mdx

@@ -4,15 +4,15 @@ 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.
 
 ## Usage
 
 ```tsx
-import { Bones } from "@lovo/bones";
+import { Bones } from "@camp-dev/bones/react";
 
 export default function Page() {
   return (