@ekkolyth/ui 0.1.16 → 0.1.18

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ekkolyth
+
+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

@@ -1,111 +1,164 @@
-# Ekko UI
+# @ekkolyth/ui
 
-Shared UI component library.
+Shared UI component library, published as `@ekkolyth/ui`.
 
 ## Installation
 
-```bash
-npm install @ekkolyth/ui
+```sh
+bun add @ekkolyth/ui
 ```
 
 ## Peer Dependencies
 
-- `react` ^19.2.3
-- `react-dom` ^19.2.3
-- `next-themes` ^0.4.6 (optional, for Next.js theme support)
-- `@tanstack/react-router` ^1.150.0 (optional, for TanStack Router theme support)
+- `react` ^19.2.0
+- `react-dom` ^19.2.0
+
+`next` is only reachable through the `/widget` compatibility entry
+(`Widget`). It ships as an ordinary workspace dependency here; the
+published package declares it as an **optional** peer so an app that never
+imports `/widget` never installs it.
 
 ## Exports
 
-### Main Export (`@ekkolyth/ui`)
+| Subpath | What it is |
+|---|---|
+| `.` | All UI components, hooks, and utilities. Theme runtime is not here — see `/themes/provider`. |
+| `./text` | `RichText` — renders Tiptap `JSONContent` through a node registry. |
+| `./layout` | `Container`. |
+| `./blocks` | `ColorPicker`, `Field`, `IconPicker`, `LoadingScreen`, `Widget`. |
+| `./hooks` | `useIsMobile`. |
+| `./themes/provider` | The framework-neutral theme runtime — see below. |
+| `./themes` | Stylesheet: all seven palettes, `@import`ed. |
+| `./themes/catpuccin/latte`, `./themes/catpuccin/frappe`, `./themes/catpuccin/macchiato`, `./themes/catpuccin/mocha`, `./themes/tokyo-night`, `./themes/ekko-os`, `./themes/ekkolyth` | Individual palette stylesheets — seven subpaths, one per palette. |
+| `./base.css` | The base theme layer — see "Base CSS" below. |
+
+`./widget` and `./convex` are **compatibility entries, not documented API.**
+They exist because specific `apps/web` call sites import from them and sit
+outside this package's edit surface; don't build new code against them.
 
-All UI components, hooks, and utilities.
+**Components:**
+Built on top of shadcn@latest.
 
 ```tsx
 import { Button, Card, Dialog, useIsMobile, cn } from '@ekkolyth/ui'
 ```
 
-**Components:**
-Built on top of shadcn@latest.
-
-### Next.js Theme Provider (`@ekkolyth/ui/next`)
+## Theme Provider
 
-Theme provider for Next.js applications using `next-themes`.
+One framework-neutral provider, at `@ekkolyth/ui/themes/provider`. No
+`next-themes` — a vitest guard (`src/index.test.ts`) fails the build if
+anything reachable from the root barrel imports it. The subpath exports:
 
 ```tsx
-import { ThemeProvider, useTheme, Toaster } from '@ekkolyth/ui/next'
-import type { ThemeProviderProps, SystemTheme, ThemeName } from '@ekkolyth/ui/next'
+import {
+    ThemeProvider,
+    ThemeScript,
+    ThemeSelect,
+    ThemeToggle,
+    Toaster,
+    useTheme,
+} from '@ekkolyth/ui/themes/provider'
+import type {
+    Appearance,
+    DarkThemes,
+    LightThemes,
+    ThemeContextState,
+    ThemeName,
+    ThemeProviderProps,
+    ThemeScriptProps,
+} from '@ekkolyth/ui/themes/provider'
 ```
 
-**ThemeProvider Props:**
-- `defaultTheme?: SystemTheme` - Default system theme (`"light" | "dark" | "system" | "normal"`)
-- `lightTheme?: ThemeName | ThemeName[]` - Light theme(s) to make available.
-- `darkTheme?: ThemeName | ThemeName[]` - Dark theme(s) to make available.
-- `storageKey?: string` - localStorage key prefix (default: `"ekko-ui"`) - most people won't need this, but if you're running something like "Micro-Frontends", it might be useful to customize per-frontend, despite running on the same domain. 
-
-**useTheme Hook:**
-Returns:
-- `systemTheme: SystemTheme` - Current system theme mode
-- `resolvedTheme: ThemeName` - Currently applied theme name
-- `availableThemes: { light: ThemeName[], dark: ThemeName[] }` - Available themes
-- `setSystemTheme: (theme: SystemTheme) => void` - Set system theme mode
-- `setSpecificTheme: (mode: "light" | "dark", theme: ThemeName) => void` - Set specific theme
+**`ThemeProviderProps`:**
+- `defaultAppearance?: Appearance` — `"light" | "dark" | "system" | "normal"`, default `"system"`. `"normal"` is a legacy alias for `"light"`.
+- `lightTheme?: LightThemes | LightThemes[]` — light palette(s) to make available, default `"ekkolyth-light"`.
+- `darkTheme?: DarkThemes | DarkThemes[]` — dark palette(s) to make available, default `"ekkolyth-dark"`.
+- `storageKey?: string` — localStorage key prefix, default `"ekko-ui"`. Most apps won't need this; it matters if several frontends share a domain and need independent theme state.
+
+**`useTheme()` returns `ThemeContextState`:**
+- `appearance: Appearance` — the mode the user picked, before resolving `"system"`.
+- `resolvedMode: 'light' | 'dark'` — `appearance` resolved against `matchMedia` when it's `"system"`.
+- `resolvedTheme: ThemeName` — the palette currently applied for `resolvedMode`.
+- `availableThemes: { light: LightThemes[], dark: DarkThemes[] }`
+- `setAppearance: (appearance: Appearance) => void`
+- `setSpecificTheme: (mode: 'light' | 'dark', theme: LightThemes | DarkThemes) => void`
+
+`ThemeName` is the union of every palette (`LightThemes | DarkThemes`) —
+which palette is showing. `Appearance` is a separate concept — light/dark/system
+preference — deliberately a different word so the two don't get conflated at a
+call site.
+
+**`ThemeName` values:**
+- `"latte" | "ekkoos-light" | "ekkolyth-light"` — light palettes
+- `"mocha" | "frappe" | "macchiato" | "tokyo-night" | "ekkoos-dark" | "ekkolyth-dark"` — dark palettes
+
+### `ThemeScript`
+
+Renders a `<script>` that reads the stored appearance/palette from
+`localStorage` and sets `data-theme` + the `.dark` class on `<html>` before
+React hydrates. Put it in `<head>` — `app/layout.tsx` on Next.js,
+`__root.tsx` on TanStack Start — with the same `defaultAppearance`,
+`lightTheme`, `darkTheme`, and `storageKey` as the `<ThemeProvider>` it pairs
+with. Skipping it doesn't break anything, it just costs one painted frame of
+the wrong palette before the provider's own mount effect catches up.
 
-**ThemeName Types:**
-- `"mocha" | "frappe" | "macchiato" | "latte"` - Catppuccin themes
-- `"tokyo-night"` - Tokyo Night theme
-- `"ekkoos-light" | "ekkoos-dark"` - Ekko OS themes
-- `"ekkolyth-light" | "ekkolyth-dark"` - Ekkolyth themes
-- `"ekko-playlist-light" | "ekko-playlist-dark"` - Ekko Playlist themes
+```tsx
+import { ThemeScript } from '@ekkolyth/ui/themes/provider'
 
-### TanStack Router Theme Provider (`@ekkolyth/ui/tanstack`)
+<head>
+  <ThemeScript defaultAppearance='system' />
+</head>
+```
 
-Theme provider for TanStack Router applications.
+### Theme Toggle / Theme Select
 
 ```tsx
-import { ThemeProvider, useTheme, Toaster } from '@ekkolyth/ui/tanstack'
-import type { SystemTheme, ThemeName } from '@ekkolyth/ui/tanstack'
+import { ThemeToggle, ThemeSelect } from '@ekkolyth/ui/themes/provider'
 ```
 
-API matches Next.js provider 1:1
-
-**Note:** The `Toaster` component is exported from the theme provider entries (`/next` and `/tanstack`) and is automatically theme-aware. If you import `Toaster` from the main entry point (`@ekkolyth/ui`), it will be theme-agnostic and you'll need to pass a `theme` prop manually.
+## Base CSS
 
-### Theme Components
+`@ekkolyth/ui/base.css` is the base theme layer — 34 color tokens with
+colourless (grayscale) defaults, the `@theme inline` mapping from those
+tokens into Tailwind utilities, `@custom-variant dark`, and an `@layer base`
+reset (`* { border-border outline-ring/50 }`, `body { bg-background
+text-foreground }`). Import it after the consuming app's own
+`@import 'tailwindcss'` and before its palette overrides:
 
-**Theme Toggle** (`@ekkolyth/ui/themes/theme-toggle`)
-
-```tsx
-import { ThemeToggle } from '@ekkolyth/ui/themes/theme-toggle'
-import type { ThemeToggleProps } from '@ekkolyth/ui/themes/theme-toggle'
+```css
+@import 'tailwindcss';
+@import '@ekkolyth/ui/base.css';
+/* app-specific palette overrides go here */
 ```
 
-**Theme Select** (`@ekkolyth/ui/themes/theme-select`)
+The export resolves to `./src/base.css`, not `./dist/base.css`, deliberately:
+`dist/` is gitignored, so a `dist` path would leave fresh clones and git
+worktrees unstyled until someone ran the UI package's build.
 
-```tsx
-import { ThemeSelect } from '@ekkolyth/ui/themes/theme-select'
-import type { ThemeSelectProps } from '@ekkolyth/ui/themes/theme-select'
-```
+## Theme Styles
 
-### Theme Styles
+`@ekkolyth/ui/themes` is a **stylesheet entry** (a CSS `@import`, not a JS
+module) that pulls in all seven palettes. It stands in for the app's own
+Tailwind preamble, not the other way around — a theme picker that lets the
+user switch palettes needs every palette present, so import it alongside the
+three lines every consumer already writes:
 
-Import theme CSS files:
+```css
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import '@ekkolyth/ui/base.css';
+@import '@ekkolyth/ui/themes';
+```
 
-```tsx
-// All themes
-import '@ekkolyth/ui/themes'
+Each palette is scoped to `html[data-theme='<name>']`; the provider and
+`ThemeScript` switch palettes by setting that attribute, so nothing here is a
+runtime import. Pull a single palette instead of the aggregate when an app
+only ever shows one:
 
-// Catppuccin themes
-import '@ekkolyth/ui/catpuccin/latte'
-import '@ekkolyth/ui/catpuccin/frappe'
-import '@ekkolyth/ui/catpuccin/macchiato'
-import '@ekkolyth/ui/catpuccin/mocha'
-
-// Other themes
-import '@ekkolyth/ui/tokyo-night'
-import '@ekkolyth/ui/ekko-os'
-import '@ekkolyth/ui/ekkolyth'
-import '@ekkolyth/ui/ekko-playlist'
+```css
+@import '@ekkolyth/ui/themes/catpuccin/latte';
+@import '@ekkolyth/ui/themes/tokyo-night';
+@import '@ekkolyth/ui/themes/ekkolyth';
 ```
 
 ## Usage Example
@@ -114,17 +167,20 @@ import '@ekkolyth/ui/ekko-playlist'
 
 ```tsx
 // app/layout.tsx
-import { ThemeProvider, Toaster } from '@ekkolyth/ui/next'
+import { ThemeProvider, ThemeScript, Toaster } from '@ekkolyth/ui/themes/provider'
 import '@ekkolyth/ui/themes'
 
 export default function RootLayout({ children }) {
   return (
     <html>
+      <head>
+        <ThemeScript defaultAppearance='system' />
+      </head>
       <body>
         <ThemeProvider
-          defaultTheme="system"
-          lightTheme={["latte", "ekkolyth-light"]}
-          darkTheme={["mocha", "ekkolyth-dark"]}
+          defaultAppearance='system'
+          lightTheme={['latte', 'ekkolyth-light']}
+          darkTheme={['mocha', 'ekkolyth-dark']}
         >
           {children}
           <Toaster />
@@ -137,16 +193,15 @@ export default function RootLayout({ children }) {
 // app/page.tsx
 'use client'
 import { Button } from '@ekkolyth/ui'
-import { ThemeToggle } from '@ekkolyth/ui/themes/theme-toggle'
-import { useTheme } from '@ekkolyth/ui/next'
+import { ThemeToggle, useTheme } from '@ekkolyth/ui/themes/provider'
 
 export default function Page() {
-  const { systemTheme, setSystemTheme } = useTheme()
-  
+  const { appearance, setAppearance } = useTheme()
+
   return (
     <div>
       <ThemeToggle />
-      <Button onClick={() => setSystemTheme('dark')}>
+      <Button onClick={() => setAppearance('dark')}>
         Set Dark Mode
       </Button>
     </div>
@@ -154,23 +209,24 @@ export default function Page() {
 }
 ```
 
-### TanStack Router Setup
+## Release
 
-```tsx
-// __root.tsx
-import { ThemeProvider, Toaster } from '@ekkolyth/ui/tanstack'
-import '@ekkolyth/ui/themes'
+1. On the feature branch, describe the change: `bun run changeset`.
+2. Merge to `main`. `.github/workflows/release-packages.yml` consumes the
+   Changesets plan, bumps the manifest and changelog, builds the package, and
+   runs `scripts/stage-public.ts` to produce the `@ekkolyth/ui` artifact with its
+   curated `dist/` exports.
+3. `scripts/validate-package.ts` checks the staged tarball before anything
+   ships.
+4. The workflow publishes the validated tarball, commits the release state,
+   and tags the release `ui-v<version>`.
 
-function App() {
-  return (
-    <ThemeProvider
-      defaultTheme="system"
-      lightTheme={["latte"]}
-      darkTheme={["mocha"]}
-    >
-        <Outlet />
-      <Toaster />
-    </ThemeProvider>
-  )
-}
-```
+A push to `main` with no pending changeset is a no-op — `changeset version`
+has nothing to consume, and the commit/publish steps detect the unchanged
+manifest and stop.
+
+### Storybook + vitest
+
+The package's storybook (`.storybook/main.ts`) and vitest (`vitest.config.ts`)
+configs include `@ekkolyth/ui` in their alias maps so stories and unit tests resolve
+internal imports the same way the dev/prod bundler does.

package/dist/base.css

@@ -0,0 +1,263 @@
+/* Base theme layer for every app consuming this package.
+ *
+ * Deliberately colourless: an app that forgets to override a token renders
+ * unthemed rather than plausibly designed. An undefined CSS variable resolves
+ * to nothing silently, which is the failure this file exists to remove.
+ *
+ * Does not import tailwindcss — the consuming app owns that import and must
+ * place it before this one, so the @apply rules below resolve. */
+
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+    --radius: 0.625rem;
+
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.45 0 0);
+    --destructive-foreground: oklch(0.985 0 0);
+    --success: oklch(0.55 0 0);
+    --warning: oklch(0.65 0 0);
+    --info: oklch(0.6 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.35 0 0);
+    --chart-2: oklch(0.45 0 0);
+    --chart-3: oklch(0.55 0 0);
+    --chart-4: oklch(0.65 0 0);
+    --chart-5: oklch(0.75 0 0);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.6 0 0);
+    --destructive-foreground: oklch(0.985 0 0);
+    --success: oklch(0.65 0 0);
+    --warning: oklch(0.75 0 0);
+    --info: oklch(0.7 0 0);
+    --border: oklch(0.269 0 0);
+    --input: oklch(0.269 0 0);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.45 0 0);
+    --chart-2: oklch(0.55 0 0);
+    --chart-3: oklch(0.65 0 0);
+    --chart-4: oklch(0.75 0 0);
+    --chart-5: oklch(0.85 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.922 0 0);
+    --sidebar-primary-foreground: oklch(0.205 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(0.269 0 0);
+    --sidebar-ring: oklch(0.556 0 0);
+    color-scheme: dark;
+}
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-success: var(--success);
+    --color-warning: var(--warning);
+    --color-info: var(--info);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+    --radius-3xl: calc(var(--radius) + 12px);
+    --radius-4xl: calc(var(--radius) + 16px);
+}
+
+/* Plain @theme, not @theme inline: `inline` bakes the value straight into
+ * .font-sans, which makes a per-palette override impossible. Emitting the
+ * variable to :root is what lets html[data-theme='…'] swap the face.
+ *
+ * Atkinson Hyperlegible Next and its Mono sibling are the package's default
+ * pair — designed together, and picked for legibility. The chain degrades to
+ * a real system font for a consumer who hasn't loaded the webfont. */
+@theme {
+    --font-sans:
+        'Atkinson Hyperlegible Next Variable', ui-sans-serif, system-ui,
+        sans-serif;
+    --font-mono:
+        'Atkinson Hyperlegible Mono Variable', ui-monospace, SFMono-Regular,
+        Menlo, monospace;
+}
+
+/* The sidebar is a dark panel inside a light theme, so a child reading the
+ * page-level tokens disappears: --muted-foreground is a mid grey tuned for
+ * white, --border a pale hairline that reads as a white outline. Rebinding
+ * them here means an ordinary component — and text-muted-foreground in
+ * particular — works in a sidebar without knowing it is in one. */
+[data-slot='sidebar'][data-slot],
+[data-slot='sidebar-container'][data-slot] {
+    --foreground: var(--sidebar-foreground);
+    --muted-foreground: color-mix(
+        in oklab,
+        var(--sidebar-foreground) 65%,
+        var(--sidebar)
+    );
+    --border: var(--sidebar-border);
+    --accent: var(--sidebar-accent);
+    --accent-foreground: var(--sidebar-accent-foreground);
+    --ring: var(--sidebar-ring);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+.prose h1,
+.prose h2,
+.prose h3 {
+    margin-top: 2.5rem;
+    margin-bottom: 0.5rem;
+}
+.prose h1 {
+    font-size: 1.5em;
+    font-weight: 600;
+}
+.prose h2 {
+    font-size: 1.25em;
+    font-weight: 600;
+}
+.prose h3 {
+    font-size: 1.125em;
+    font-weight: 600;
+}
+.prose h1:first-child,
+.prose h2:first-child,
+.prose h3:first-child {
+    margin-top: 0;
+}
+.prose h1 + * {
+    margin-top: 1.5rem;
+}
+.prose h2 + * {
+    margin-top: 1rem;
+}
+.prose h3 + * {
+    margin-top: 0.75rem;
+}
+/* @tailwindcss/typography wraps inline <code> in literal backticks via
+ * ::before/::after pseudo-content and leaves it otherwise unstyled. Strip
+ * the backticks and render inline code as a rounded muted pill. */
+.prose :not(pre) > code::before,
+.prose :not(pre) > code::after {
+    content: none;
+}
+.prose :not(pre) > code {
+    padding: 0.125rem 0.375rem;
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    font-weight: 500;
+    color: var(--foreground);
+    background-color: var(--muted);
+    border: 1px solid var(--border);
+    border-radius: 0.25rem;
+}
+.prose thead th,
+.prose tbody td,
+.prose tfoot td {
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important;
+    border-right: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
+}
+.prose thead th:last-child,
+.prose tbody td:last-child,
+.prose tfoot td:last-child {
+    border-right: 0;
+}
+
+/* Shiki renders with `defaultColor: false`, so every token carries its colours
+   as --shiki-light / --shiki-dark variables and nothing else. These rules pick
+   the pair for the active theme. Without them the block has no colour at all,
+   and with shiki's default the light theme wins in dark mode — the variables
+   would be inert either way, because inline styles can only be beaten by
+   !important, which the biome config rejects. */
+.shiki {
+    background-color: var(--shiki-light-bg);
+}
+.shiki,
+.shiki span {
+    color: var(--shiki-light);
+}
+.dark .shiki {
+    background-color: var(--shiki-dark-bg);
+}
+.dark .shiki,
+.dark .shiki span {
+    color: var(--shiki-dark);
+}

package/dist/blocks.d.ts

@@ -0,0 +1,4 @@
+import { i as ColorPicker, n as Field, r as validate, t as IconPicker } from "./index-DHF8OR1R.js";
+import { n as LoadingScreenProps, t as LoadingScreen } from "./index-DsLGf2HX.js";
+import { n as WidgetLinkProps, r as WidgetProps, t as Widget } from "./index-qji4ohJZ.js";
+export { ColorPicker, Field, IconPicker, LoadingScreen, type LoadingScreenProps, Widget, type WidgetLinkProps, type WidgetProps, validate };

package/dist/blocks.js

@@ -0,0 +1,4 @@
+import { R as validate, d as Field, t as IconPicker, z as ColorPicker } from "./icon-picker-ByfHyJ7i.js";
+import { t as LoadingScreen } from "./loading-screen-DB3youyT.js";
+import { t as Widget } from "./widget-C2vjxQms.js";
+export { ColorPicker, Field, IconPicker, LoadingScreen, Widget, validate };

package/dist/container-BBg21poC.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/container/index.tsx
+function Container({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["mx-auto flex w-full max-w-7xl flex-1 flex-col p-3 md:p-6", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+//#endregion
+export { Container as t };

package/dist/convex.d.ts

@@ -0,0 +1,2 @@
+import { n as LoadingScreenProps, t as LoadingScreen } from "./index-DsLGf2HX.js";
+export { LoadingScreen, type LoadingScreenProps };

package/dist/convex.js

@@ -0,0 +1,2 @@
+import { t as LoadingScreen } from "./loading-screen-DB3youyT.js";
+export { LoadingScreen };

package/dist/hooks.d.ts

@@ -0,0 +1,2 @@
+import { t as useIsMobile } from "./use-mobile-BVGje-2e.js";
+export { useIsMobile };

package/dist/hooks.js

@@ -0,0 +1,2 @@
+import { t as useIsMobile } from "./use-mobile-CqHXB_Nc.js";
+export { useIsMobile };