@vvedantb/ui 0.7.2 → 0.9.0

package/README.md

@@ -4,12 +4,13 @@ Shared React 19 web UI. Source-exported: no build step.
 
 | Import | What it is |
 | --- | --- |
-| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
 | `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `animations`, `compat-shadcn-rgb`. CSS. |
 | `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | Same file as `tokens/css/compat-shadcn-rgb.css`. CSS. |
 | `@vvedantb/ui/tokens/tailwind-preset` | Tailwind preset (`.mjs`) for `@config "@vvedantb/ui/tokens/tailwind-preset"`. Kept as a build-tool entry: Tailwind needs a resolvable package path, and it is not a React API. |
+| `@vvedantb/ui/landing.css` | Landing page classes (`landing-atmosphere`, `landing-grain`, `landing-pulse-dot`, ambient graph and preview animations, smooth `#top` scrolling). CSS. |
 | `@vvedantb/ui/package.json` | Package metadata. |
 
 Removed in 0.4.0-rc.1: the `/cn`, `/sonner`, `/audio`, `/shell`, `/app`, `/composer` and `/tokens/native` subpaths. Import from `@vvedantb/ui`. See [`MIGRATION.md`](MIGRATION.md).
@@ -792,6 +793,93 @@ Rows (hover, active, selected, drop target) use `bg-sidebar-accent` instead of `
 
 Rail tiles keep `surface-tertiary`, so in dark mode the active rail tile is a step lighter than the active row. An app that imports `tokens.css` and defines its own `--sidebar-accent` overrides the fill; it must be a full colour value there (use `compat-shadcn-rgb.css` for `R G B` channels).
 
+## Landing kit, site footer and pricing dialog (0.9.0)
+
+Marketing pieces the apps copied between each other. Each one renders the same
+DOM and class strings as the app copies it replaces. Copy, links, logos, prices
+and auth buttons come from the app; the package imports no router, no Clerk and
+no Motion.
+
+Import the stylesheet once (from CSS or TypeScript):
+
+```css
+@import "@vvedantb/ui/landing.css";
+```
+
+The components live under `src/`, which the usual `@source` line already scans.
+
+### Landing kit
+
+`createLandingKit({ motion })` takes `motion` from `motion/react` and returns
+the animated parts. Call it once at module scope.
+
+```tsx
+import { motion } from "motion/react";
+import { createLandingKit } from "@vvedantb/ui";
+
+export const { LandingReveal, LandingRevealItem, LandingHero, LandingNav, LandingCta } =
+  createLandingKit({ motion });
+```
+
+| Part | Props |
+| --- | --- |
+| `LandingReveal` | `className`, `delay` (seconds, default `0`). Staggers its children in once, when 20% is in view. |
+| `LandingRevealItem` | `className`. One revealed child (`landingItemVariants`). |
+| `LandingHero` | `eyebrow`, `title`, `description` (nodes), `actions` (the button row; it renders even when empty), `capabilities` (strings). |
+| `LandingNav` | `brand`, `homeLabel` (home link `aria-label`), `links`, `github` (`href`, `label`, `icon`), `actions`, `menu`. |
+| `LandingCta` | `title`, `description`, `action`. |
+
+Plain parts, no Motion:
+
+| Part | Props |
+| --- | --- |
+| `LandingPageLayout` | `nav`, `heroBackdrop` (before the hero, inside the atmosphere block), `hero`, `children` (sections), `footer`. Root is `#top`. |
+| `LandingSection` | `id`, `className`. |
+| `LandingSectionHeading` | `eyebrow`, `heading`, `intro`, `className`. |
+| `LandingLattice` | `className` (grid columns). Cells share 1px borders. |
+| `LandingFeatureCard` | `icon` (a component, rendered `size={18} stroke={1.5}`), `title`, `description`. |
+| `LandingNavMenu` | `links`, `github` (`href`, `icon`). Overflow menu below `md`. |
+| `LandingFooter` | `brand`, `tagline`, `links`, `actions` (after the links), `github` (`href`, `label`, `icon`). |
+
+Constants: `landingShellClass`, `landingPanelClass`, `landingItemVariants`, and
+for the footer's `actions` slot `landingFooterLinkClass` (a text link) and
+`landingFooterButtonClass` (a `Button variant="link"`).
+
+### `SiteFooter`
+
+Brand, tagline and social icon buttons; link columns; then copyright and legal
+links under a separator.
+
+| Prop | |
+| --- | --- |
+| `brand`, `tagline` | Nodes. |
+| `socials` | `{ href, icon, label? }[]`. `icon` is a component that takes `className`. Links open in a new tab. |
+| `columns` | `{ heading, links }[]`. A link is `{ href, label, external?, image?: { src, alt } }`. |
+| `name`, `year` | "Copyright © {year} {name}". `year` defaults to the current year. |
+| `legalLinks` | `{ href, label }[]`, open in a new tab. |
+| `variant` | `"muted"` (default, `text-muted`), `"muted-foreground"`, or `"touch"` (`text-muted-foreground`, `max-sm:hit-target` links, safe-area bottom padding). |
+
+### `PricingModal`
+
+One-plan upgrade dialog. Props: `open`, `onClose`, `title` (accessible, hidden),
+`description` (hidden; when set the title is an `sr-only` `DialogTitle`,
+otherwise it sits in `VisuallyHidden`), `logo` (`dark` and `light` image URLs,
+shown in that colour mode), `wordmark`, `price`, `tagline`,
+`taglineFontClassName`, `features`, `ctaLabel` (default "Get Pro"),
+`renderCheckout(button)` (wrap the button in the billing provider's checkout),
+`closeButton` (an extra compact close button, default `false`) and `tone`
+(`"muted"` default or `"muted-foreground"`).
+
+### Account menu items and rail collapse tile
+
+`SidebarAccountMenu` takes three optional props. Without them it renders as before.
+
+- `themeToggle={{ isDark, onToggle }}`: a "Light mode" / "Dark mode" item after `children`.
+- `signOut={{ onSignOut, description? }}`: a separator and a danger "Sign out" item, last. It opens `SignOutDialog`; Alt-click skips the dialog and `ConfirmSkipHint` shows while Alt is held. The menu owns the dialog state. If `onSignOut` rejects, the dialog buttons enable again.
+- `itemIconSize`: `size` of those two items' icons. Default: the icon's own size.
+
+`RailCollapseTile({ collapsed, onToggle })`: the rail tile that shows or hides the sidebar panel ("Show sidebar" with the expand icon, or "Hide sidebar").
+
 ## Toaster
 
 ```tsx

package/app/README.md

@@ -98,3 +98,96 @@ pnpm --filter @vvedantb/ui test
 ```
 
 Source is in `app/src` and tests in `app/tests`. Publish steps are in the root `README.md`.
+
+## Theme
+
+```tsx
+import { createThemeProvider } from "@vvedantb/ui";
+
+// One kit per app, at module level.
+export const { ThemeProvider, useTheme } = createThemeProvider();
+
+<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+  <App />
+</ThemeProvider>;
+
+const { theme, resolvedTheme, setTheme, isDark, toggleTheme, mounted } = useTheme();
+```
+
+`createThemeProvider` is a port of next-themes 0.4.6. An app that uses next-themes can switch without a change in behaviour: the same localStorage writes, `<html>` classes and attributes, `style.colorScheme`, `prefers-color-scheme` listener, cross-tab `storage` sync and transition blocking. Parity tests run both side by side.
+
+- Props, as in next-themes: `storageKey` (`"theme"`), `defaultTheme` (`"system"` with `enableSystem`, else `"light"`), `enableSystem` (`true`), `enableColorScheme` (`true`), `attribute` (`"data-theme"`; `"class"`, any `data-*`, or an array), `themes` (`["light", "dark"]`), `value` (theme name to written value), `forcedTheme`, `disableTransitionOnChange` (`false`) and `nonce`.
+- State: `theme`, `setTheme` (a value or a function of the current theme), `resolvedTheme`, `systemTheme`, `forcedTheme` and `themes`, as in next-themes. Added: `mounted` (after the provider's first effect), `isDark` (`mounted && resolvedTheme === "dark"`) and `toggleTheme` (from `resolvedTheme`).
+- `setTheme` is a new function each time `theme` changes and stable otherwise, as in next-themes, so effects that list it re-run at the same times.
+- next-themes reads the DOM options (`attribute`, `themes`, `value`, `enableSystem`, `enableColorScheme`, `defaultTheme`, `disableTransitionOnChange`, `nonce`) once, on the first render, and so does this port. If `enableSystem` starts `false` and later turns `true`, a stored `"system"` is written as the class `system`. `forcedTheme` follows props.
+- A nested `ThemeProvider` from the same kit renders only its children.
+- `createThemeProvider({ missingProviderMessage })`: `useTheme()` outside the provider throws that message. Without it, `useTheme()` returns an empty state with no-op setters, as next-themes does.
+- No inline script is rendered. next-themes renders one for server rendering; React does not run it in a client-rendered app. Keep a pre-paint script in `index.html` if the app has one.
+
+For an app with its own theme state (for example a theme synced from the server), two helpers:
+
+- `getSystemTheme()`: `"dark"` or `"light"` from `prefers-color-scheme`; `"light"` without `window`.
+- `applyThemeClass(theme)`: removes `light` and `dark` from `<html>`, then adds `theme`. No-op without `document`.
+
+## Page title
+
+```tsx
+import { createPageTitleContext } from "@vvedantb/ui";
+
+export const { PageTitleProvider, usePageTitle, usePageTitleSync } = createPageTitleContext({
+  missingProviderMessage: "usePageTitle must be used within a PageTitleProvider",
+});
+
+// The shell reads it:
+const { pageTitle } = usePageTitle();
+// A page publishes it while mounted:
+usePageTitleSync(title);
+```
+
+- `usePageTitle()` returns `{ pageTitle, setPageTitle, mobileActionsSlot, setMobileActionsSlot }`. `mobileActionsSlot` is an element a mobile top bar registers (pass `setMobileActionsSlot` as its `ref`) so pages can portal actions into it.
+- `usePageTitleSync(title)` sets the title while the caller is mounted and clears it on unmount. Titles that are not strings publish `""`.
+- `missingProviderMessage`: `usePageTitle()` outside the provider throws it. Without it, `usePageTitle()` returns an empty title and no-op setters.
+- `documentTitle` (off by default; without it `document.title` is never touched): `{ suffix?, separator? = " · ", fallback? }`. While a page title is set, `document.title` is `` `${pageTitle}${separator}${suffix}` `` (just the page title without a suffix). While it is empty, `fallback`, else the title at mount. The mount-time title comes back on unmount.
+
+## Page motion
+
+```tsx
+import { MotionConfig } from "motion/react";
+import { PageMotionProvider, useDisablePageMotion } from "@vvedantb/ui";
+
+<PageMotionProvider disabled={flags?.disablePageMotion === true} motionConfig={MotionConfig}>
+  <App />
+</PageMotionProvider>;
+```
+
+- Sets `html[data-page-motion]` to `"off"` or `"on"` in a layout effect (CSS can skip page and route transitions on `"off"`). The attribute stays after unmount.
+- Renders `motionConfig` with `reducedMotion` `"always"` when disabled, else `"never"`.
+- `useDisablePageMotion()`: the `disabled` value, `false` outside the provider.
+- This module does not import `motion`. Pass `MotionConfig`, or an app component that wraps it, defined at module level, for example with `LazyMotion`:
+
+```tsx
+function LazyMotionConfig({ reducedMotion, children }: PageMotionConfigProps) {
+  return (
+    <LazyMotion features={domAnimation}>
+      <MotionConfig reducedMotion={reducedMotion}>{children}</MotionConfig>
+    </LazyMotion>
+  );
+}
+```
+
+## Compact relative time
+
+```ts
+import { formatCompactRelativeTime } from "@vvedantb/ui";
+
+formatCompactRelativeTime(createdAt, { justNow: "now" }); // "now", "5m", "3h", "2d", "4mo", "1y"
+formatCompactRelativeTime(updatedAt, { calendar: true }); // "42s", ..., calendar months and years
+```
+
+Pure TypeScript, no dependencies. Options:
+
+- `now`: clock in ms, default `Date.now()`.
+- `justNow`: returned for anything under a minute old, future times included. Without it the result is whole seconds (`"42s"`), and a future time gives `"0s"` or a negative count.
+- `calendar`: `false` (default) counts elapsed time: a day is 24 hours, a month 30 days, a year 12 such months. `true` counts as `dayjs().diff(date, unit)` does: days by the local calendar across DST changes, and calendar months and years.
+
+Strings are parsed with `new Date(string)`. dayjs parses a date-only string such as `"2026-03-01"` as local midnight, `new Date` as UTC midnight; numbers, `Date` objects and ISO strings with a time give the same result either way. An invalid date gives `"NaNy"` (`"0mo"` with `calendar`).

package/app/src/index.ts

@@ -41,3 +41,34 @@ export {
   type ClerkAuthSlice,
   type StableAuthOptions,
 } from "./auth/useStableAuth.js";
+
+export {
+  applyThemeClass,
+  createThemeProvider,
+  getSystemTheme,
+  type ThemeAttribute,
+  type ThemeProviderKit,
+  type ThemeProviderOptions,
+  type ThemeProviderProps,
+  type ThemeState,
+} from "./theme/createThemeProvider.js";
+
+export {
+  createPageTitleContext,
+  type DocumentTitleOptions,
+  type PageTitleContextKit,
+  type PageTitleContextOptions,
+  type PageTitleValue,
+} from "./page-title/createPageTitleContext.js";
+
+export {
+  PageMotionProvider,
+  useDisablePageMotion,
+  type PageMotionConfigProps,
+  type PageMotionProviderProps,
+} from "./page-motion/PageMotionProvider.js";
+
+export {
+  formatCompactRelativeTime,
+  type CompactRelativeTimeOptions,
+} from "./time/compactRelativeTime.js";

package/app/src/page-motion/PageMotionProvider.tsx

@@ -0,0 +1,44 @@
+import { createContext, use, useLayoutEffect, type ComponentType, type ReactNode } from "react";
+
+/** The props `MotionConfig` from `motion/react` takes here. */
+export type PageMotionConfigProps = {
+  reducedMotion: "always" | "never";
+  children: ReactNode;
+};
+
+export type PageMotionProviderProps = {
+  /** Page motion is off, for example from a user setting. */
+  disabled: boolean;
+  /**
+   * Pass `MotionConfig` from `motion/react`, or a component of the app that
+   * wraps it (for example in `LazyMotion`). Injected so this package does not
+   * import `motion`. Define it at module level, not inline.
+   */
+  motionConfig: ComponentType<PageMotionConfigProps>;
+  children: ReactNode;
+};
+
+const PageMotionContext = createContext(false);
+
+/** Whether page motion is off (`false` outside `PageMotionProvider`). */
+export function useDisablePageMotion(): boolean {
+  return use(PageMotionContext);
+}
+
+/**
+ * Stamps `html[data-page-motion]` (`"off"` or `"on"`) in a layout effect so CSS
+ * page and route transitions can skip, and sets Motion's `reducedMotion` to
+ * `"always"` when disabled and `"never"` otherwise. The attribute stays after
+ * unmount.
+ */
+export function PageMotionProvider({ disabled, motionConfig: MotionConfig, children }: PageMotionProviderProps) {
+  useLayoutEffect(() => {
+    document.documentElement.dataset.pageMotion = disabled ? "off" : "on";
+  }, [disabled]);
+
+  return (
+    <PageMotionContext value={disabled}>
+      <MotionConfig reducedMotion={disabled ? "always" : "never"}>{children}</MotionConfig>
+    </PageMotionContext>
+  );
+}

package/app/src/page-title/createPageTitleContext.tsx

@@ -0,0 +1,99 @@
+import { createContext, use, useEffect, useState, type ReactNode } from "react";
+
+export type PageTitleValue = {
+  pageTitle: string;
+  setPageTitle: (title: string) => void;
+  /** Element a mobile top bar registers (as a ref) so pages can portal actions into it. */
+  mobileActionsSlot: HTMLElement | null;
+  setMobileActionsSlot: (slot: HTMLElement | null) => void;
+};
+
+export type DocumentTitleOptions = {
+  /** Appended after the page title, for example the app name. */
+  suffix?: string;
+  /** Between page title and suffix. Default `" · "`. */
+  separator?: string;
+  /** Title while no page title is set. Default: `document.title` when the provider mounted. */
+  fallback?: string;
+};
+
+export type PageTitleContextOptions = {
+  /**
+   * `usePageTitle()` outside the provider throws this message. When unset it
+   * returns an empty title and no-op setters instead.
+   */
+  missingProviderMessage?: string;
+  /**
+   * Also write `document.title` as `pageTitle + separator + suffix`, or
+   * `fallback` while the page title is empty. Off by default: the provider
+   * does not touch `document.title`. The mount-time title comes back on unmount.
+   */
+  documentTitle?: DocumentTitleOptions;
+};
+
+export type PageTitleContextKit = {
+  PageTitleProvider: (props: { children: ReactNode }) => ReactNode;
+  usePageTitle: () => PageTitleValue;
+  /** Publishes `title` while the caller is mounted; non-string titles publish `""`. Clears on unmount. */
+  usePageTitleSync: (title: ReactNode) => void;
+};
+
+const noop = () => {};
+
+function formatDocumentTitle(pageTitle: string, suffix: string | undefined, separator: string): string {
+  return suffix ? `${pageTitle}${separator}${suffix}` : pageTitle;
+}
+
+/** One page title context per app: the shell reads `pageTitle`, pages publish theirs. */
+export function createPageTitleContext(options: PageTitleContextOptions = {}): PageTitleContextKit {
+  const { missingProviderMessage, documentTitle } = options;
+  const Context = createContext<PageTitleValue | null>(null);
+  const fallbackValue: PageTitleValue = {
+    pageTitle: "",
+    setPageTitle: noop,
+    mobileActionsSlot: null,
+    setMobileActionsSlot: noop,
+  };
+
+  function useDocumentTitle(pageTitle: string): void {
+    const [mountTitle] = useState(() => (documentTitle && typeof document !== "undefined" ? document.title : ""));
+    useEffect(() => {
+      if (!documentTitle) return;
+      const { suffix, separator = " · ", fallback = mountTitle } = documentTitle;
+      document.title = pageTitle ? formatDocumentTitle(pageTitle, suffix, separator) : fallback;
+    }, [pageTitle, mountTitle]);
+    useEffect(() => {
+      if (!documentTitle) return;
+      return () => {
+        document.title = mountTitle;
+      };
+    }, [mountTitle]);
+  }
+
+  function PageTitleProvider({ children }: { children: ReactNode }) {
+    const [pageTitle, setPageTitle] = useState("");
+    const [mobileActionsSlot, setMobileActionsSlot] = useState<HTMLElement | null>(null);
+    useDocumentTitle(pageTitle);
+    return (
+      <Context value={{ pageTitle, setPageTitle, mobileActionsSlot, setMobileActionsSlot }}>{children}</Context>
+    );
+  }
+
+  function usePageTitle(): PageTitleValue {
+    const value = use(Context);
+    if (value !== null) return value;
+    if (missingProviderMessage !== undefined) throw new Error(missingProviderMessage);
+    return fallbackValue;
+  }
+
+  function usePageTitleSync(title: ReactNode): void {
+    const { setPageTitle } = usePageTitle();
+    const isStringTitle = typeof title === "string";
+    useEffect(() => {
+      setPageTitle(isStringTitle ? title : "");
+      return () => setPageTitle("");
+    }, [title, isStringTitle, setPageTitle]);
+  }
+
+  return { PageTitleProvider, usePageTitle, usePageTitleSync };
+}

package/app/src/theme/createThemeProvider.tsx

@@ -0,0 +1,275 @@
+import { createContext, use, useEffect, useState, type ReactNode } from "react";
+
+/** `"class"` or a `data-*` attribute on `<html>`. */
+export type ThemeAttribute = "class" | `data-${string}`;
+
+export type ThemeProviderProps = {
+  children?: ReactNode;
+  /** localStorage key. Default `"theme"`. */
+  storageKey?: string;
+  /** Used when nothing is stored. Default `"system"` with `enableSystem`, else `"light"`. */
+  defaultTheme?: string;
+  /** Resolve `"system"` from `prefers-color-scheme`. Default `true`. */
+  enableSystem?: boolean;
+  /** Set `style.colorScheme` on `<html>` for light and dark. Default `true`. */
+  enableColorScheme?: boolean;
+  /** Where the theme goes on `<html>`. Default `"data-theme"`. */
+  attribute?: ThemeAttribute | ThemeAttribute[];
+  /** Theme names. Default `["light", "dark"]`. */
+  themes?: string[];
+  /** Theme name to the class or attribute value written. */
+  value?: Record<string, string>;
+  /** Shown on `<html>` instead of the stored theme, which is left unchanged. */
+  forcedTheme?: string;
+  /** Turn CSS transitions off for one frame while the theme changes. Default `false`. */
+  disableTransitionOnChange?: boolean;
+  /** Nonce for the style element `disableTransitionOnChange` adds. */
+  nonce?: string;
+};
+
+export type ThemeState = {
+  /** Stored theme, `"system"` included. `undefined` only without `window`. */
+  theme: string | undefined;
+  /** Stores the theme. A function gets the theme of the render it came from. */
+  setTheme: (theme: string | ((theme: string | undefined) => string)) => void;
+  forcedTheme: string | undefined;
+  /** `theme`, with `"system"` resolved to `systemTheme`. */
+  resolvedTheme: string | undefined;
+  /** `themes` plus `"system"` with `enableSystem`. */
+  themes: string[];
+  /** `prefers-color-scheme` with `enableSystem`. Until the first effect runs it is `theme` unless that is `"system"` (as in next-themes). */
+  systemTheme: string | undefined;
+  /** `false` until the provider's first effect has run. */
+  mounted: boolean;
+  /** `mounted && resolvedTheme === "dark"`. */
+  isDark: boolean;
+  /** `setTheme(resolvedTheme === "dark" ? "light" : "dark")`. */
+  toggleTheme: () => void;
+};
+
+export type ThemeProviderOptions = {
+  /** `useTheme()` outside the provider throws this message. When unset it returns an empty state with no-op setters. */
+  missingProviderMessage?: string;
+};
+
+export type ThemeProviderKit = {
+  ThemeProvider: (props: ThemeProviderProps) => ReactNode;
+  useTheme: () => ThemeState;
+};
+
+const COLOR_SCHEMES = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const DISABLE_TRANSITIONS_CSS =
+  "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
+
+const noop = () => {};
+
+const emptyState: ThemeState = {
+  theme: undefined,
+  setTheme: noop,
+  forcedTheme: undefined,
+  resolvedTheme: undefined,
+  themes: [],
+  systemTheme: undefined,
+  mounted: false,
+  isDark: false,
+  toggleTheme: noop,
+};
+
+/** `prefers-color-scheme`, or `"light"` without `window`. */
+export function getSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia(MEDIA).matches ? "dark" : "light";
+}
+
+/** Replaces the `light` / `dark` class on `<html>` with `theme`. No-op without `document`. */
+export function applyThemeClass(theme: string): void {
+  if (typeof document === "undefined") return;
+  document.documentElement.classList.remove("light", "dark");
+  document.documentElement.classList.add(theme);
+}
+
+function systemThemeOf(media: { matches: boolean }): "light" | "dark" {
+  return media.matches ? "dark" : "light";
+}
+
+function readTheme(storageKey: string, fallback: string): string | undefined {
+  if (typeof window === "undefined") return undefined;
+  let stored: string | undefined;
+  try {
+    stored = localStorage.getItem(storageKey) || undefined;
+  } catch {
+    // Storage can be unavailable (privacy modes); fall back.
+  }
+  return stored || fallback;
+}
+
+function disableTransitions(nonce: string | undefined): () => void {
+  const style = document.createElement("style");
+  if (nonce) style.setAttribute("nonce", nonce);
+  style.appendChild(document.createTextNode(DISABLE_TRANSITIONS_CSS));
+  document.head.appendChild(style);
+  return () => {
+    // Force a style recalculation before the transitions come back.
+    window.getComputedStyle(document.body);
+    setTimeout(() => {
+      document.head.removeChild(style);
+    }, 1);
+  };
+}
+
+type DomOptions = Required<
+  Pick<ThemeProviderProps, "attribute" | "themes" | "enableSystem" | "enableColorScheme" | "defaultTheme" | "disableTransitionOnChange">
+> &
+  Pick<ThemeProviderProps, "value" | "nonce">;
+
+function applyTheme(theme: string | undefined, options: DomOptions): void {
+  if (!theme) return;
+  const resolved = theme === "system" && options.enableSystem ? systemThemeOf(window.matchMedia(MEDIA)) : theme;
+  const written = options.value ? options.value[resolved] : resolved;
+  const restoreTransitions = options.disableTransitionOnChange ? disableTransitions(options.nonce) : null;
+  const root = document.documentElement;
+  const removable = options.value ? Object.values(options.value) : options.themes;
+  for (const attribute of Array.isArray(options.attribute) ? options.attribute : [options.attribute]) {
+    if (attribute === "class") {
+      root.classList.remove(...removable);
+      if (written) root.classList.add(written);
+    } else if (attribute.startsWith("data-")) {
+      if (written) root.setAttribute(attribute, written);
+      else root.removeAttribute(attribute);
+    }
+  }
+  if (options.enableColorScheme) {
+    const fallback = COLOR_SCHEMES.includes(options.defaultTheme) ? options.defaultTheme : null;
+    // `null` clears the property in browsers; assigned as-is, as next-themes does.
+    Reflect.set(root.style, "colorScheme", COLOR_SCHEMES.includes(resolved) ? resolved : fallback);
+  }
+  restoreTransitions?.();
+}
+
+/**
+ * A theme provider with next-themes 0.4.6 semantics, plus `mounted`, `isDark`
+ * and `toggleTheme`. Each call makes its own context, so an app keeps one kit.
+ *
+ * Parity notes: the options that shape DOM writes (`attribute`, `themes`,
+ * `value`, `enableSystem`, `enableColorScheme`, `defaultTheme`,
+ * `disableTransitionOnChange`, `nonce`) are read once, on the first render, as
+ * in next-themes; `forcedTheme`, and `enableSystem` for the system listener and
+ * the returned state, follow props. A provider nested in another one from the
+ * same kit renders only its children. No inline script is rendered: in a
+ * client-rendered app React never runs it.
+ */
+export function createThemeProvider(options: ThemeProviderOptions = {}): ThemeProviderKit {
+  const { missingProviderMessage } = options;
+  const Context = createContext<ThemeState | undefined>(undefined);
+
+  /** next-themes hands out a new `setTheme` exactly when `theme` changes; apps list it in effect deps. */
+  function useSetTheme(
+    theme: string | undefined,
+    storageKey: string,
+    setThemeState: (theme: string) => void,
+  ): ThemeState["setTheme"] {
+    const make = (): ThemeState["setTheme"] => (next) => {
+      const resolved = typeof next === "function" ? next(theme) : next;
+      setThemeState(resolved);
+      try {
+        localStorage.setItem(storageKey, resolved);
+      } catch {
+        // Storage can be unavailable (privacy modes).
+      }
+    };
+    const [entry, setEntry] = useState(() => ({ theme, setTheme: make() }));
+    if (entry.theme === theme) return entry.setTheme;
+    const next = { theme, setTheme: make() };
+    setEntry(next);
+    return next.setTheme;
+  }
+
+  function Provider({
+    forcedTheme,
+    disableTransitionOnChange = false,
+    enableSystem = true,
+    enableColorScheme = true,
+    storageKey = "theme",
+    themes = COLOR_SCHEMES,
+    defaultTheme = enableSystem ? "system" : "light",
+    attribute = "data-theme",
+    value,
+    nonce,
+    children,
+  }: ThemeProviderProps) {
+    const [theme, setThemeState] = useState(() => readTheme(storageKey, defaultTheme));
+    const [systemTheme, setSystemTheme] = useState<string | undefined>(() =>
+      theme === "system" ? systemThemeOf(window.matchMedia(MEDIA)) : theme,
+    );
+    const [mounted, setMounted] = useState(false);
+    const [domOptions] = useState<DomOptions>(() => ({
+      attribute,
+      themes,
+      value,
+      enableSystem,
+      enableColorScheme,
+      defaultTheme,
+      disableTransitionOnChange,
+      nonce,
+    }));
+    const setTheme = useSetTheme(theme, storageKey, setThemeState);
+
+    useEffect(() => setMounted(true), []);
+
+    // Listener and handler are rebuilt whenever `theme` or `forcedTheme` changes.
+    useEffect(() => {
+      const handleMedia = (media: { matches: boolean }) => {
+        setSystemTheme(systemThemeOf(media));
+        if (theme === "system" && enableSystem && !forcedTheme) applyTheme("system", domOptions);
+      };
+      const media = window.matchMedia(MEDIA);
+      media.addListener(handleMedia);
+      handleMedia(media);
+      return () => media.removeListener(handleMedia);
+    }, [theme, forcedTheme]);
+
+    // Other tabs: follow a new value, or store the default when the key is removed.
+    useEffect(() => {
+      const handleStorage = (event: StorageEvent) => {
+        if (event.key !== storageKey) return;
+        if (event.newValue) setThemeState(event.newValue);
+        else setTheme(defaultTheme);
+      };
+      window.addEventListener("storage", handleStorage);
+      return () => window.removeEventListener("storage", handleStorage);
+    }, [setTheme]);
+
+    useEffect(() => {
+      applyTheme(forcedTheme ?? theme, domOptions);
+    }, [forcedTheme, theme]);
+
+    const resolvedTheme = theme === "system" ? systemTheme : theme;
+    const state: ThemeState = {
+      theme,
+      setTheme,
+      forcedTheme,
+      resolvedTheme,
+      themes: enableSystem ? [...themes, "system"] : themes,
+      systemTheme: enableSystem ? systemTheme : undefined,
+      mounted,
+      isDark: mounted && resolvedTheme === "dark",
+      toggleTheme: () => setTheme(resolvedTheme === "dark" ? "light" : "dark"),
+    };
+    return <Context value={state}>{children}</Context>;
+  }
+
+  function ThemeProvider(props: ThemeProviderProps) {
+    if (use(Context)) return <>{props.children}</>;
+    return <Provider {...props} />;
+  }
+
+  function useTheme(): ThemeState {
+    const state = use(Context);
+    if (state) return state;
+    if (missingProviderMessage !== undefined) throw new Error(missingProviderMessage);
+    return emptyState;
+  }
+
+  return { ThemeProvider, useTheme };
+}