rift-ds 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rob Ritacca
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+<a href="https://rift-ds.com"><img src=".github/readme-banner.jpg" alt="Rift DS, the AI-ready React design system" width="100%"></a>
+
+# Rift DS
+
+<!-- npm-badge:start -->
+[![npm](https://img.shields.io/npm/v/rift-ds?logo=npm&color=CB3837)](https://www.npmjs.com/package/rift-ds)
+<!-- npm-badge:end -->
+[![license: MIT](https://img.shields.io/badge/license-MIT-4c1)](LICENSE)
+
+An open source React design system built for AI products and coding agents: components on a three-tier token architecture, complete theme presets that restyle everything with one attribute, and machine surfaces (an MCP endpoint, per-component contracts, an installable agent skill) so your coding agent knows the library as well as you do.
+
+## Why Rift DS
+
+- **One package, zero dependencies.** React is the only required peer dependency; recharts is optional and only for the charts entry. No configuration API, no providers, no build-tool integration: theming is plain CSS custom properties, so it works in any bundler, in any stack, beside anything you already use.
+- **Free, open source, consumed your way.** MIT end to end, no pro tier, no paywalled components. Install the npm package, pull single components as source through the shadcn CLI, or clone the repo and own every line; all three are first-class paths.
+- **A few primitives re-theme everything.** Every semantic token chains to a primitive, so a handful of overrides cascade through every component, the charts, and the ambient background, in both colour modes. Your brand is a short CSS block, not a fork.
+- **The shipped themes prove it.** Each one is the same system under different primitives, saved as a complete look: colour modes, a type pairing with self-hosted fonts, radius, density, motion, elevation, the chart palette. Setting `data-brand` on the root element applies all of it with zero runtime JavaScript, the build holds every theme's action colours to WCAG AA in both modes, and the playground builds yours the same way.
+- **The AI product set is in the box.** Composer, streaming chat thread, tool calls, reasoning, thread panel and tabs: the components an assistant UI needs, the same set this repo's own site chat is built from.
+- **Legible to coding agents.** One command installs the agent skill and prints the MCP connect line, and the MCP tools and per-component markdown are generated from the same JSDoc that builds the shipped `.d.ts`: an agent reads the exact contract npm ships, no key, no account.
+- **Docs that cannot lie.** Every count, list, and prop table is generated from source registries and build-validated; CI fails on drift, and every component story ships through an accessibility audit. What the docs say is what ships.
+
+## Documentation
+
+Everything deep lives on the docs site: **[rift-ds.com](https://rift-ds.com/)**, with live examples, foundations, templates, the playground, and the **[get-started guide](https://rift-ds.com/docs/get-started)**. **[Storybook](https://storybook.rift-ds.com/?path=/docs/rift-ds--docs)** is the interactive component explorer.
+
+## Install
+
+```bash
+npm install rift-ds
+```
+
+Import the token stylesheet once, then use components:
+
+```tsx
+import 'rift-ds/tokens/tokens.css';
+import { Button, Card, Badge } from 'rift-ds';
+```
+
+React 19+ is a peer dependency. The package is ESM-only and resolved via `exports` subpaths: use a bundler that handles CSS and font imports from `node_modules` (Vite, Next.js, webpack) and set TypeScript's `moduleResolution` to `"bundler"` or `"nodenext"`. The Recharts-backed charts live behind `rift-ds/charts`, so the optional `recharts` peer dependency is only needed if you use them. Prefer owning the source? Pull single components through the shadcn CLI (`npx shadcn@latest add https://rift-ds.com/r/button.json`, with details in the [get-started guide](https://rift-ds.com/docs/get-started)), or clone this repo and build on it directly; all of it is MIT.
+
+## Set up your agent
+
+One command teaches a coding agent the system: it installs the generated agent skill into your project and prints the MCP connect line.
+
+```bash
+npx rift-ds init
+```
+
+The MCP endpoint serves the component catalogue, per-component prop APIs, the token registry, install setup, and docs search to any client. No key, no account, no model calls: every tool reads only published, generated data, built from the same JSDoc that produces the shipped `.d.ts`, so an agent reads the exact contract npm ships.
+
+```bash
+claude mcp add --transport http rift-ds https://rift-ds.com/api/mcp
+```
+
+Every component's prop contract is also plain markdown (append `.md` to its docs URL), and [llms.txt](https://rift-ds.com/llms.txt) indexes every machine surface. Then just ask: "Build a settings page with Rift components."
+
+## Theming
+
+Theming is CSS custom properties; there is no configuration API and no provider (one exception: wrap your tree in `ToastProvider` if, and only if, you use the toast queue via `useToast`). Complete looks ship as generated stylesheets: import the aggregate once and one attribute rethemes everything, light and dark, typefaces included (each preset self-hosts its faces).
+
+```tsx
+import 'rift-ds/tokens/presets/presets.css';
+
+<html data-brand="terminal">
+```
+
+- **Dark mode**: `data-theme="dark"` on the root element; light is the default.
+- **Your own brand**: every semantic token chains to a primitive, so overriding one primitive re-themes everything built on it. The [playground](https://rift-ds.com/playground) restyles the system live and copies out a complete, paste-ready override.
+- **Fonts**: the base theme bundles no text face, and the whole scale chains to `--font-family-primary` (split heading and body faces via `--font-family-heading` and `--font-family-body`); point them at any font you load. Only the preset stylesheets carry faces, each self-hosting its own, and only the presets you import pull them in.
+- **Icons**: a Material Symbols Rounded variable font is bundled and components import it themselves, with every Google axis exposed as a custom property. Every icon prop also takes your own element, so any icon set drops in.
+
+## Components
+
+<!-- component-count -->133<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
+
+<details>
+<summary>The full list</summary>
+
+<!-- component-list:start -->
+Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Avatar · Avatar group · Badge · Banner · Bar chart · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Tree view · Treemap · Usage card · Waveform · World map
+<!-- component-list:end -->
+
+</details>
+
+## Tech
+
+- **React 19 + TypeScript**: component library
+- **Vite 7**: dev server and library build
+- **Next.js 16**: the documentation site
+- **Storybook 10**: component explorer
+- **Vitest + Playwright + axe**: every Storybook story runs as a render test in headless Chromium, with an accessibility audit on each
+- **CSS custom properties**: all theming via semantic tokens, no CSS-in-JS
+
+The [overview](https://rift-ds.com/overview) shows the generate-and-validate pipeline behind the docs.
+
+## Running locally
+
+```bash
+npm install                         # once, at the root (the website is an npm workspace)
+npm run storybook                   # component explorer at http://localhost:6006
+npm run dev --workspace website     # docs site at http://localhost:3000
+npm run verify                      # the full local quality gate, mirroring CI
+```
+
+## License
+
+MIT, the whole repository: components, tokens, scripts, the website, and the docs. Use it in anything. See [`LICENSE`](LICENSE) for the full terms.

package/behaviors/focusable.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared focusability queries for the overlay behavior layer.
+ *
+ * One home for the selector the modal components previously each carried a
+ * copy of. Plain DOM utilities — no React, safe to import anywhere.
+ */
+/** Everything a focus trap must cycle through. */
+export declare const FOCUSABLE = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/**
+ * The subset worth landing initial focus on: real controls, not arbitrary
+ * tabindex carriers (a scrollable body region is tabbable but focusing it on
+ * open would strand a keyboard user on a non-control).
+ */
+export declare const INITIAL_FOCUS = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])";
+/**
+ * The focusable elements inside a container, in DOM order, excluding
+ * invisible ones — a control hidden by `display: none` must not count as the
+ * trap's first or last stop.
+ */
+export declare function getFocusable(container: HTMLElement): HTMLElement[];
+/**
+ * Where initial focus should land when a scope activates: the first visible
+ * real control, then the first visible focusable of any kind, else null (the
+ * caller falls back to the container itself).
+ */
+export declare function getInitialFocus(container: HTMLElement): HTMLElement | null;

package/behaviors/focusable.js

@@ -0,0 +1,18 @@
+const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const INITIAL_FOCUS = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])";
+const isVisible = (el) => typeof el.checkVisibility === "function" ? el.checkVisibility() : el.offsetParent !== null;
+function getFocusable(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE)).filter(isVisible);
+}
+function getInitialFocus(container) {
+  const preferred = Array.from(container.querySelectorAll(INITIAL_FOCUS)).find(
+    isVisible
+  );
+  return preferred ?? getFocusable(container)[0] ?? null;
+}
+export {
+  FOCUSABLE,
+  INITIAL_FOCUS,
+  getFocusable,
+  getInitialFocus
+};

package/behaviors/useFocusScope.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Focus containment for modal overlays: initial focus, Tab wrapping, focus
+ * restore, and background isolation.
+ *
+ * Restore is guarded by `document.contains` — the element that opened a
+ * dialog can be gone by the time it closes (a row the dialog itself deleted),
+ * and restoring into a detached node silently drops focus to `<body>`. It
+ * also runs when the component unmounts while open, which the per-component
+ * implementations this replaces never handled.
+ *
+ * Background isolation uses `inert`, not `aria-hidden`: a JS focus trap only
+ * fences the Tab key, while a screen reader's virtual cursor walks the page
+ * behind the dialog freely. `inert` closes all three doors at once —
+ * assistive-tech traversal, focusability, and pointer events. Scopes stack:
+ * only the topmost active scope's overlay is interactive, and closing it
+ * hands the page back to the scope below, not to the whole document. The
+ * inert set is recomputed only when a scope activates or deactivates, so a
+ * portal that mounts *while* a modal is open (a toast, say) is not inerted
+ * until the stack next changes — under `aria-modal` that content is outside
+ * the dialog's world anyway.
+ */
+type FocusScopeOptions = {
+    /** Whether the scope is active — the overlay's open state. */
+    active: boolean;
+    /** Wrap Tab / Shift+Tab within the scope. Default true. */
+    trap?: boolean;
+    /** Restore focus to the previously focused element on deactivate. Default true. */
+    restoreFocus?: boolean;
+    /**
+     * Where initial focus lands. Defaults to the first visible real control,
+     * then the first focusable of any kind, then the container itself.
+     */
+    initialFocus?: () => HTMLElement | null;
+    /** Make everything outside the scope inert while active. Default true. */
+    inertOutside?: boolean;
+};
+export declare function useFocusScope(ref: React.RefObject<HTMLElement | null>, options: FocusScopeOptions): void;
+export {};

package/behaviors/useFocusScope.js

@@ -0,0 +1,82 @@
+"use client";
+import { useRef, useEffect } from "react";
+import { getInitialFocus, getFocusable } from "./focusable.js";
+const inertScopes = [];
+const inerted = /* @__PURE__ */ new Set();
+const applyInert = () => {
+  const top = inertScopes[inertScopes.length - 1];
+  for (const child of Array.from(document.body.children)) {
+    if (!(child instanceof HTMLElement)) continue;
+    if (child.tagName === "SCRIPT" || child.tagName === "STYLE") continue;
+    const shouldBeInert = top !== void 0 && !child.contains(top.panel);
+    if (shouldBeInert && !child.inert) {
+      child.inert = true;
+      inerted.add(child);
+    } else if (!shouldBeInert && inerted.has(child)) {
+      child.inert = false;
+      inerted.delete(child);
+    }
+  }
+  if (top === void 0 && inerted.size > 0) {
+    for (const el of inerted) el.inert = false;
+    inerted.clear();
+  }
+};
+function useFocusScope(ref, options) {
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+  const { active } = options;
+  useEffect(() => {
+    if (!active) return;
+    const panel = ref.current;
+    if (!panel) return;
+    const previousFocus = document.activeElement;
+    let focusRaf = 0;
+    let focusAttempts = 0;
+    const tryInitialFocus = () => {
+      const initial = optionsRef.current.initialFocus?.() ?? getInitialFocus(panel) ?? panel;
+      initial.focus();
+      if (document.activeElement === initial) return;
+      focusAttempts += 1;
+      if (focusAttempts < 5) focusRaf = requestAnimationFrame(tryInitialFocus);
+    };
+    tryInitialFocus();
+    const scope = { panel };
+    if (optionsRef.current.inertOutside !== false) {
+      inertScopes.push(scope);
+      applyInert();
+    }
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab" || optionsRef.current.trap === false) return;
+      const focusable = getFocusable(panel);
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      cancelAnimationFrame(focusRaf);
+      document.removeEventListener("keydown", handleKeyDown);
+      const index = inertScopes.indexOf(scope);
+      if (index !== -1) {
+        inertScopes.splice(index, 1);
+        applyInert();
+      }
+      if (optionsRef.current.restoreFocus !== false && previousFocus && document.contains(previousFocus)) {
+        previousFocus.focus();
+      }
+    };
+  }, [active, ref]);
+}
+export {
+  useFocusScope
+};

package/behaviors/useLayer.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The dismissal layer stack — the single owner of the document-level Escape
+ * and outside-press listeners for every overlay in the library.
+ *
+ * Before this existed, each open overlay registered its own document keydown,
+ * so Escape over a stacked Dialog-in-Drawer closed both at once. The stack
+ * routes each interaction to the **topmost** open layer only: Escape
+ * dismisses it (or is swallowed when it is not Escape-dismissible — a lower
+ * layer must never close through a blocking one), and an outside press
+ * dismisses it only when the press lands outside every element the layer
+ * claims. Layers below are untouched; one press, one layer.
+ *
+ * Exactly two document listeners exist while any layer is open, and none
+ * while the stack is empty. Registration order is stack order — overlays
+ * portal into `document.body` in the order they open, so stack order and
+ * paint order agree without reading z-index.
+ */
+type LayerOptions = {
+    /** The overlay's open state — the layer registers while true. */
+    open: boolean;
+    /** Called when the stack decides this layer should dismiss. */
+    onDismiss?: () => void;
+    /** Whether Escape dismisses this layer. Default true. */
+    dismissOnEscape?: boolean;
+    /**
+     * Whether a pointerdown outside `getElements()` dismisses this layer.
+     * Default false — modal components keep their own backdrop click handler,
+     * which is part of their DOM and needs no document listener.
+     */
+    dismissOnOutsidePress?: boolean;
+    /**
+     * The elements that count as "inside" for outside-press checks — typically
+     * the panel and its trigger. Only read when `dismissOnOutsidePress` is on.
+     */
+    getElements?: () => (HTMLElement | null | undefined)[];
+};
+/**
+ * Register an overlay on the dismissal stack while `open` is true. Options
+ * are read at event time, so a `dismissOnEscape` toggle takes effect without
+ * re-registering (which would wrongly move the layer to the top).
+ */
+export declare function useLayer(options: LayerOptions): void;
+export {};

package/behaviors/useLayer.js

@@ -0,0 +1,55 @@
+"use client";
+import { useRef, useEffect } from "react";
+const layers = [];
+let listenersInstalled = false;
+const handleKeyDown = (event) => {
+  if (event.key !== "Escape") return;
+  const top = layers[layers.length - 1];
+  if (!top) return;
+  const options = top.optionsRef.current;
+  if (options.dismissOnEscape === false) return;
+  event.preventDefault();
+  options.onDismiss?.();
+};
+const handlePointerDown = (event) => {
+  const top = layers[layers.length - 1];
+  if (!top) return;
+  const options = top.optionsRef.current;
+  if (!options.dismissOnOutsidePress) return;
+  const target = event.target instanceof Node ? event.target : null;
+  if (!target) return;
+  const inside = (options.getElements?.() ?? []).some((el) => el?.contains(target));
+  if (!inside) options.onDismiss?.();
+};
+const syncListeners = () => {
+  if (layers.length > 0 && !listenersInstalled) {
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("pointerdown", handlePointerDown);
+    listenersInstalled = true;
+  } else if (layers.length === 0 && listenersInstalled) {
+    document.removeEventListener("keydown", handleKeyDown);
+    document.removeEventListener("pointerdown", handlePointerDown);
+    listenersInstalled = false;
+  }
+};
+function useLayer(options) {
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+  const { open } = options;
+  useEffect(() => {
+    if (!open) return;
+    const layer = { optionsRef };
+    layers.push(layer);
+    syncListeners();
+    return () => {
+      const index = layers.indexOf(layer);
+      if (index !== -1) layers.splice(index, 1);
+      syncListeners();
+    };
+  }, [open]);
+}
+export {
+  useLayer
+};

package/behaviors/useMounted.d.ts

@@ -0,0 +1,7 @@
+/**
+ * False during SSR and the hydration render, true afterwards — the guard a
+ * portal component needs before touching `document.body`. Uses
+ * `useSyncExternalStore` rather than a mount effect so the client's first
+ * render matches the server HTML without an extra render pass.
+ */
+export declare function useMounted(): boolean;

package/behaviors/useMounted.js

@@ -0,0 +1,14 @@
+"use client";
+import { useSyncExternalStore } from "react";
+const emptySubscribe = () => () => {
+};
+function useMounted() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+}
+export {
+  useMounted
+};

package/behaviors/useScrollLock.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Page scroll locking for modal overlays, with two strategies and one owner.
+ *
+ * `pin` (the default) fixes the body in place rather than hiding its
+ * overflow. iOS Safari ignores `overflow: hidden` on the body: a touch still
+ * scrolls the document, and focusing a field scrolls it programmatically to
+ * bring the field above the keyboard — which slides the page out from under
+ * the overlay. A fixed body has no scrollable overflow at all, so neither can
+ * move it. The body is pinned at its current scroll offset so the page behind
+ * the overlay does not visibly jump, and the offset is restored when the last
+ * holder releases. `overflow: hidden` rides along so the pinned body cannot
+ * grow scrollbars of its own.
+ *
+ * The pin is **counted**, and the counter is the whole point: closing a
+ * Dialog opened over a Drawer must not unlock the Drawer's scroll. The
+ * imperative pair (`acquireScrollLock` / `releaseScrollLock`) exposes the
+ * same counter to host chrome — a site's nav drawer, a bespoke chat panel —
+ * because two locks that cannot see each other each believe they own
+ * `document.body`, and whichever releases first unlocks the page under the
+ * overlay the other still holds (or restores styles the other already
+ * changed). One counter means the first acquire captures and pins, only the
+ * last release restores, whichever module it belongs to. The captured inline
+ * styles are restored verbatim, never blanked, so a host's own body styling
+ * survives a lock cycle.
+ *
+ * `cancel-events` keeps the document scrollbar rendered and cancels scroll
+ * *input* instead — wheel and touch gestures work only inside `allowWithin`.
+ * This is CommandPalette's documented design decision (unscrollable-body
+ * treatments blink the scrollbar rail out, which reads as a layout jump on
+ * classic-scrollbar platforms); it is deliberately not the default because
+ * swapping the modals onto it would change their scrollbar rendering.
+ * Instances are independent — overlapping cancel-events locks stack
+ * harmlessly.
+ */
+type ScrollLockOptions = {
+    /** Which locking strategy to use. Default `'pin'`. */
+    strategy?: 'pin' | 'cancel-events';
+    /** For `cancel-events`: the scrollable region that keeps receiving input. */
+    allowWithin?: React.RefObject<HTMLElement | null>;
+};
+/**
+ * Take one hold on the shared page scroll lock — the counter behind the
+ * hook's `pin` strategy. For overlays outside this library (host chrome)
+ * that must not fight the modal components over `document.body`. Every
+ * acquire needs exactly one matching release.
+ */
+export declare function acquireScrollLock(): void;
+/**
+ * Release one hold on the shared page scroll lock. The body styles and the
+ * scroll offset are restored only when the last hold anywhere releases; an
+ * unbalanced release never touches the page.
+ */
+export declare function releaseScrollLock(): void;
+export declare function useScrollLock(active: boolean, options?: ScrollLockOptions): void;
+export {};

package/behaviors/useScrollLock.js

@@ -0,0 +1,59 @@
+"use client";
+import { useRef, useEffect } from "react";
+const PINNED_PROPS = ["position", "top", "left", "right", "overflow"];
+let pinCount = 0;
+let pinnedScrollY = 0;
+let previousBodyStyle = {};
+function acquireScrollLock() {
+  if (pinCount === 0) {
+    const { style } = document.body;
+    pinnedScrollY = window.scrollY;
+    previousBodyStyle = {};
+    for (const prop of PINNED_PROPS) previousBodyStyle[prop] = style[prop];
+    style.position = "fixed";
+    style.top = `-${pinnedScrollY}px`;
+    style.left = "0";
+    style.right = "0";
+    style.overflow = "hidden";
+  }
+  pinCount += 1;
+}
+function releaseScrollLock() {
+  if (pinCount === 0) return;
+  pinCount -= 1;
+  if (pinCount > 0) return;
+  const { style } = document.body;
+  for (const prop of PINNED_PROPS) style[prop] = previousBodyStyle[prop] ?? "";
+  window.scrollTo({ top: pinnedScrollY, behavior: "instant" });
+}
+function useScrollLock(active, options) {
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+  const strategy = options?.strategy ?? "pin";
+  useEffect(() => {
+    if (!active) return;
+    if (strategy === "pin") {
+      acquireScrollLock();
+      return releaseScrollLock;
+    }
+    const block = (event) => {
+      const allow = optionsRef.current?.allowWithin?.current;
+      const target = event.target instanceof Node ? event.target : null;
+      if (allow && target && allow.contains(target)) return;
+      event.preventDefault();
+    };
+    document.addEventListener("wheel", block, { passive: false });
+    document.addEventListener("touchmove", block, { passive: false });
+    return () => {
+      document.removeEventListener("wheel", block);
+      document.removeEventListener("touchmove", block);
+    };
+  }, [active, strategy]);
+}
+export {
+  acquireScrollLock,
+  releaseScrollLock,
+  useScrollLock
+};

package/bin/rift-ds.mjs

@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+/**
+ * The package's one command: `npx rift-ds init`.
+ *
+ * Fetches the generated agent skill (SKILL.md + references/components.md)
+ * from the live site into the project's .claude/skills/ folder, then prints
+ * the MCP connect line. The files are fetched rather than bundled because
+ * they regenerate with every site deploy, while the package moves only on a
+ * release — a bundled copy would always be the staler one. Re-running the
+ * command overwrites the pair; that is the refresh story.
+ *
+ * Zero dependencies by design: global fetch plus node:fs, so npx never
+ * installs anything beyond the package itself. SITE_ORIGIN, SKILL_NAME
+ * and MCP_SERVER_NAME are stamped by build-package.mjs from
+ * scripts/brand.mjs (the one home for brand facts); running this file
+ * straight from source fails fast rather than guessing a domain.
+ */
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+
+const SITE_ORIGIN = 'https://rift-ds.com';
+const SKILL_NAME = 'rift-design-system';
+const MCP_SERVER_NAME = 'rift-ds';
+const SKILL_FILES = ['SKILL.md', 'references/components.md'];
+const DEFAULT_OUT = join('.claude', 'skills', SKILL_NAME);
+
+const USAGE = `Usage: npx rift-ds init [--out <dir>]
+
+Fetches the agent skill for this package from ${SITE_ORIGIN} into
+${DEFAULT_OUT}/ so a skill-capable coding agent carries the
+library's install, theming and catalogue rules into every session.
+Re-run any time to refresh; the files regenerate with every site deploy.
+
+Options:
+  --out <dir>   Write the skill somewhere else (default: ${DEFAULT_OUT})
+  --help        Show this message`;
+
+function fail(message) {
+  console.error(`✗ ${message}`);
+  process.exit(1);
+}
+
+async function init(outDir) {
+  if (SITE_ORIGIN.startsWith('__')) {
+    fail('this copy was not built: run the published bin (npx rift-ds init).');
+  }
+  for (const file of SKILL_FILES) {
+    const url = `${SITE_ORIGIN}/skill/${SKILL_NAME}/${file}`;
+    let response;
+    try {
+      response = await fetch(url);
+    } catch (error) {
+      fail(`could not reach ${url} (${error?.message ?? error}). Check your network and retry.`);
+    }
+    if (!response.ok) {
+      fail(`${url} answered ${response.status}. The site may be mid-deploy; retry in a minute.`);
+    }
+    const target = join(outDir, file);
+    mkdirSync(dirname(target), { recursive: true });
+    writeFileSync(target, await response.text());
+    console.log(`▸ ${target}`);
+  }
+  console.log(`✓ Agent skill installed. Skill-capable agents load it automatically.`);
+  console.log(`\nFor on-demand lookups too, connect the MCP endpoint:`);
+  console.log(`  claude mcp add --transport http ${MCP_SERVER_NAME} ${SITE_ORIGIN}/api/mcp`);
+}
+
+const args = process.argv.slice(2);
+if (args.includes('--help') || args.includes('-h') || args.length === 0) {
+  console.log(USAGE);
+  process.exit(args.length === 0 ? 1 : 0);
+}
+if (args[0] !== 'init') {
+  fail(`unknown command "${args[0]}"\n\n${USAGE}`);
+}
+const outFlag = args.indexOf('--out');
+let outDir = DEFAULT_OUT;
+if (outFlag !== -1) {
+  if (!args[outFlag + 1]) fail('--out needs a directory');
+  outDir = resolve(args[outFlag + 1]);
+}
+await init(outDir);

package/charts.d.ts

@@ -0,0 +1,16 @@
+/**
+ * GENERATED FILE — do not edit.
+ * Built from src/components/registry.json by scripts/generate-library-barrel.mjs
+ * (validate-registry chain). The recharts-backed components; requires the optional recharts peer dependency.
+ */
+export * from './components/Chart/AreaChart';
+export * from './components/Chart/BarChart';
+export * from './components/Chart/ComboChart';
+export * from './components/Chart/LineChart';
+export * from './components/Chart/PieChart';
+export * from './components/Chart/RadarChart';
+export * from './components/Chart/RadialChart';
+export * from './components/Chart/ScatterChart';
+export * from './components/Chart/StackedBarChart';
+export * from './components/Chart/Treemap';
+export * from './components/FunnelChart/FunnelChart';

package/charts.js

@@ -0,0 +1,24 @@
+import { AreaChart } from "./components/Chart/AreaChart.js";
+import { BarChart } from "./components/Chart/BarChart.js";
+import { ComboChart } from "./components/Chart/ComboChart.js";
+import { LineChart } from "./components/Chart/LineChart.js";
+import { PieChart } from "./components/Chart/PieChart.js";
+import { RadarChart } from "./components/Chart/RadarChart.js";
+import { RadialChart } from "./components/Chart/RadialChart.js";
+import { ScatterChart } from "./components/Chart/ScatterChart.js";
+import { StackedBarChart } from "./components/Chart/StackedBarChart.js";
+import { Treemap } from "./components/Chart/Treemap.js";
+import { FunnelChart } from "./components/FunnelChart/FunnelChart.js";
+export {
+  AreaChart,
+  BarChart,
+  ComboChart,
+  FunnelChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  RadialChart,
+  ScatterChart,
+  StackedBarChart,
+  Treemap
+};