harebear-ui 0.0.0-stage → 0.2.2

package/AGENTS.md

@@ -0,0 +1,66 @@
+# harebear-ui: agent guide
+
+This repo is the `harebear-ui` npm package: shadcn/ui primitives restyled to one design system, plus admin, data, and AI chat composites. React 19, Tailwind CSS v4, Radix (`radix-ui`), TanStack Table v9, Recharts 3, TypeScript 7, pnpm.
+
+Consumers get compiled ESM + types from `dist/` and a Tailwind stylesheet (`harebear-ui/styles.css`). The source of truth for the look is `src/styles.css` (tokens) and the class strings in components.
+
+## Commands
+
+| Command                  | What it does                                                                                      |
+| ------------------------ | ------------------------------------------------------------------------------------------------- |
+| `pnpm dev`               | Playground at http://localhost:5199 with the reference screens.                                   |
+| `pnpm check`             | Everything CI runs: lint, typecheck, tests, build, publint, attw. Run before you say you're done. |
+| `pnpm test`              | Vitest. `pnpm test -u` updates the export snapshot after an intended API change.                  |
+| `pnpm gen`               | Regenerate `src/index.ts` from component export lists. Run after adding or renaming exports.      |
+| `pnpm format`            | Biome format + safe fixes.                                                                        |
+| `pnpm shadcn add <name>` | Pull a new shadcn component into `src/components/ui/`.                                            |
+
+## Layout
+
+```
+src/
+  styles.css            Theme: tokens on :root/.dark, @theme mapping, @source for consumers. Shipped as harebear-ui/styles.css.
+  shadcn-base.css       Vendored copy of shadcn/tailwind.css (variants, keyframes). Re-copy on shadcn upgrades.
+  index.ts              Generated barrel. Do not edit by hand.
+  components/ui/        shadcn primitives (radix-nova style), restyled. Keep upstream structure.
+  components/theme/     ThemeProvider, ThemeToggle, ThemeScript.
+  components/admin/     Layout and dashboard composites (AppShell, StatCard, PageHeader...).
+  components/data/      DataTable, TrendChart, Sparkline, BarList, StatusBars.
+  components/ai/        Chat composites (ChatThread, ChatMessage, PromptInput, ModelPicker, CodeSnippet...).
+  components/auth/      AuthLayout, LoginForm, SignupForm (parameterized shadcn login/signup blocks).
+  hooks/, lib/utils.ts  Shared hooks and cn().
+playground/screens/     Reference screens that use only public exports (#admin, #chat, #records, #home, #auth, #catalog). Visual spec and usage examples.
+docs/COMPONENTS.md      Consumer-facing catalog. Shipped. Test-enforced to mention every export.
+llms.txt, skills/       Consumer-facing agent docs. Shipped.
+bin/harebear-ui.mjs     `npx harebear-ui init|docs` for consuming apps.
+test/                   Vitest: API snapshot, docs coverage, token integrity, behavior.
+```
+
+## Adding a component
+
+1. Pick the folder by purpose (`admin`, `data`, `ai`, `auth`; `ui` only for shadcn primitives).
+2. Follow the existing files: `"use client"` first line, named function component, props interface exported as `<Name>Props`, `data-slot="<kebab-name>"` on the root, `className` merged last with `cn()`, rest props spread on the root.
+3. Style only with tokens (`bg-card`, `text-muted-foreground`, `bg-primary-soft`, `shadow-card`, `rounded-xl`). No hex, no palette colors. Status takes a `tone` (`success | warning | danger | info | neutral`).
+4. `pnpm gen`, then add the component to `docs/COMPONENTS.md` (the docs test fails otherwise) and to the index in `llms.txt`.
+5. Use it in a playground screen if it is visual, and look at it in light and dark mode and at 375px width.
+6. Add a behavior test in `test/components.test.tsx` if it has logic. `pnpm test -u` to accept the new export in the snapshot.
+7. `pnpm check`.
+
+## Changing shadcn primitives
+
+- Keep upstream file structure so `pnpm shadcn add <name> -o` diffs stay readable. Change class strings, add variants; avoid restructuring.
+- shadcn sometimes rewrites the utils import to `from "cn"`. It must be `from "@/lib/utils"`. Remove any `cn` dependency it adds. Same for `next-themes` (sonner uses our `useTheme`).
+- New shadcn files need `"use client"` as the first line.
+- Restyle new primitives to harebear's look: form controls are 40px `rounded-md bg-muted border-transparent` with `focus-visible:border-primary focus-visible:bg-card focus-visible:ring-4 focus-visible:ring-primary/15`; replace `border-input` / `dark:bg-input/30` patterns; selected states use `bg-primary-soft`.
+- The package includes every `registry:ui` item. Check for gaps with `pnpm shadcn list @shadcn --json` and compare names against `src/components/ui/`.
+
+## Gotchas
+
+- `@/` is a source alias. tsdown rewrites it to relative paths in `dist`. Do not import from `harebear-ui` inside `src`.
+- TanStack Table v9 needs features registered in `tableFeatures()` with row-model slots; see `dataTableFeatures` in `src/components/data/data-table.tsx` and the skills shipped in `node_modules/@tanstack/react-table/skills/`.
+- `src/styles.css` has `@source "./"` so a consumer's Tailwind scans `dist/`. Classes must be complete literal strings (no string concatenation) or consumers will not get the CSS.
+- Biome formats with no semicolons and double quotes. Rules for `src/components/ui/**` are relaxed in `biome.json` to keep upstream code as is.
+
+## Releasing
+
+Bump `version` in package.json, commit, tag `vX.Y.Z`, push the tag. The `release` workflow publishes to npm with provenance (trusted publishing, no token in the repo). Ask the maintainer before tagging.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Harrison Milbradt
+
+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,3 +1,93 @@
-# Temporary Holding Version
+# harebear-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Pre-themed React components for admin tools, data apps, and AI chat. shadcn/ui primitives restyled to one opinionated design system, plus the composites you end up building every time: app shell, KPI cards, data table, trend charts, chat thread, prompt composer, model picker.
+
+React 19 · Tailwind CSS v4 · Radix · TanStack Table v9 · Recharts 3 · TypeScript
+
+## Install
+
+```bash
+npm i harebear-ui
+```
+
+```bash
+npx harebear-ui init
+```
+
+`init` adds the stylesheet import to your Tailwind entry CSS, writes a harebear-ui section into `AGENTS.md` (or `CLAUDE.md`), and installs a Claude Code skill in `.claude/skills/`. Flags: `--css <file>`, `--no-agents`, `--no-skill`.
+
+Manual setup, if you prefer:
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "harebear-ui/styles.css";
+```
+
+```tsx
+import { ThemeProvider, Toaster, TooltipProvider } from "harebear-ui"
+
+export function Root() {
+  return (
+    <ThemeProvider accent="#2F5BD3" radius={14}>
+      <TooltipProvider>
+        <App />
+        <Toaster />
+      </TooltipProvider>
+    </ThemeProvider>
+  )
+}
+```
+
+Requires Tailwind CSS v4 in the app. Geist and Geist Mono are bundled.
+
+## Use
+
+```tsx
+import { AppShell, PageHeader, StatCard, Button, DataTable } from "harebear-ui"
+```
+
+Everything imports from the package root. Primitives keep shadcn/ui names and props.
+
+- **Component catalog:** [docs/COMPONENTS.md](docs/COMPONENTS.md), also at `node_modules/harebear-ui/docs/COMPONENTS.md` or `npx harebear-ui docs`.
+- **Reference screens:** [playground/screens](playground/screens) has an admin dashboard, an AI chat, a data table with detail panel, and a status home page built only from public exports.
+
+## Theming
+
+Light and dark mode, accent, radius, and font are runtime props on `ThemeProvider` (`useTheme()` changes them live). Every component reads shadcn-named tokens, so you can override any of them in CSS:
+
+```css
+:root {
+  --brand: #0f8a7e;
+  --radius: 0.625rem;
+}
+.dark {
+  --background: #0b0b0d;
+}
+```
+
+For SSR apps, render `<ThemeScript />` in `<head>` to avoid a flash of the wrong mode.
+
+## For AI agents
+
+The package ships its own agent docs:
+
+| File                          | For                                                    |
+| ----------------------------- | ------------------------------------------------------ |
+| `llms.txt`                    | Short index: setup, rules, component list.             |
+| `docs/COMPONENTS.md`          | Every export with props and examples.                  |
+| `skills/harebear-ui/SKILL.md` | Claude Code skill; `npx harebear-ui init` installs it. |
+
+Working on this repo with an agent: see [AGENTS.md](AGENTS.md).
+
+## Develop
+
+```bash
+pnpm install
+pnpm dev     # playground on :5199
+pnpm check   # lint, typecheck, test, build, package lint
+```
+
+## License
+
+MIT

package/bin/harebear-ui.mjs

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+// harebear-ui CLI. Zero dependencies.
+//   npx harebear-ui init   wire the stylesheet and install agent docs into this project
+//   npx harebear-ui docs   print the component catalog
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "node:fs"
+import { dirname, join, relative } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const pkgRoot = join(dirname(fileURLToPath(import.meta.url)), "..")
+const cwd = process.cwd()
+const [cmd = "help", ...args] = process.argv.slice(2)
+const flag = (name) => args.includes(`--${name}`)
+const option = (name) => {
+  const i = args.indexOf(`--${name}`)
+  return i >= 0 ? args[i + 1] : undefined
+}
+
+const IMPORT_LINE = '@import "harebear-ui/styles.css";'
+const START = "<!-- harebear-ui:start -->"
+const END = "<!-- harebear-ui:end -->"
+const AGENT_BLOCK = `${START}
+## UI: harebear-ui
+
+All UI in this project uses the \`harebear-ui\` component library (pre-themed shadcn/ui on Tailwind v4, plus admin, data table, chart, and AI chat components).
+
+- Read \`node_modules/harebear-ui/docs/COMPONENTS.md\` before building UI. It lists every component with props and examples.
+- Import from the package root: \`import { Button, Card, DataTable } from "harebear-ui"\`.
+- Style only with theme tokens (\`bg-card\`, \`bg-muted\`, \`text-muted-foreground\`, \`bg-primary-soft\`, \`text-success\`, \`shadow-card\`, \`rounded-xl\`). No hex or Tailwind palette colors.
+- Check new screens in light and dark mode and at phone width.
+${END}`
+
+function findCss(dir, depth = 0, out = []) {
+  if (depth > 4) return out
+  for (const name of readdirSync(dir)) {
+    if (name.startsWith(".") || ["node_modules", "dist", "build", ".next", "out", "coverage"].includes(name)) continue
+    const p = join(dir, name)
+    const st = statSync(p)
+    if (st.isDirectory()) findCss(p, depth + 1, out)
+    else if (/\.css$/.test(name) && /@import\s+["']tailwindcss["']/.test(readFileSync(p, "utf8"))) out.push(p)
+  }
+  return out
+}
+
+function wireCss() {
+  const explicit = option("css")
+  const files = explicit ? [join(cwd, explicit)] : findCss(cwd)
+  if (files.length === 0) {
+    console.log(
+      `! No CSS file with @import "tailwindcss" found. Add this after your Tailwind import:\n    ${IMPORT_LINE}`,
+    )
+    return
+  }
+  if (files.length > 1 && !explicit) {
+    console.log(
+      `! Several Tailwind entry files found; pass one with --css:\n${files.map((f) => `    ${relative(cwd, f)}`).join("\n")}`,
+    )
+    return
+  }
+  const file = files[0]
+  const css = readFileSync(file, "utf8")
+  if (css.includes("harebear-ui/styles.css")) {
+    console.log(`✓ ${relative(cwd, file)} already imports harebear-ui/styles.css`)
+    return
+  }
+  const next = css.replace(/(@import\s+["']tailwindcss["'][^;]*;)/, `$1\n${IMPORT_LINE}`)
+  writeFileSync(file, next)
+  console.log(`✓ Added ${IMPORT_LINE} to ${relative(cwd, file)}`)
+}
+
+function writeAgentInstructions() {
+  const target = ["AGENTS.md", "CLAUDE.md"].map((f) => join(cwd, f)).find(existsSync) ?? join(cwd, "AGENTS.md")
+  const current = existsSync(target) ? readFileSync(target, "utf8") : ""
+  const block = new RegExp(`${START}[\\s\\S]*?${END}`)
+  const next = block.test(current)
+    ? current.replace(block, AGENT_BLOCK)
+    : `${current}${current && !current.endsWith("\n") ? "\n" : ""}${current ? "\n" : ""}${AGENT_BLOCK}\n`
+  writeFileSync(target, next)
+  console.log(`✓ Wrote harebear-ui section to ${relative(cwd, target)}`)
+}
+
+function installSkill() {
+  const src = join(pkgRoot, "skills/harebear-ui/SKILL.md")
+  const destDir = join(cwd, ".claude/skills/harebear-ui")
+  mkdirSync(destDir, { recursive: true })
+  writeFileSync(join(destDir, "SKILL.md"), readFileSync(src, "utf8"))
+  console.log(`✓ Installed Claude Code skill to ${relative(cwd, destDir)}/SKILL.md`)
+}
+
+switch (cmd) {
+  case "init": {
+    if (!existsSync(join(cwd, "package.json"))) {
+      console.error("Run this from your app's root (no package.json here).")
+      process.exit(1)
+    }
+    wireCss()
+    if (!flag("no-agents")) writeAgentInstructions()
+    if (!flag("no-skill")) installSkill()
+    console.log(`
+Next: wrap your app root.
+
+  import { ThemeProvider, Toaster, TooltipProvider } from "harebear-ui"
+
+  <ThemeProvider>
+    <TooltipProvider>
+      <App />
+      <Toaster />
+    </TooltipProvider>
+  </ThemeProvider>
+`)
+    break
+  }
+  case "docs":
+    process.stdout.write(readFileSync(join(pkgRoot, "docs/COMPONENTS.md"), "utf8"))
+    break
+  default:
+    console.log(`harebear-ui
+
+  npx harebear-ui init [--css <file>] [--no-agents] [--no-skill]
+      Add the stylesheet import after @import "tailwindcss", add a harebear-ui
+      section to AGENTS.md (or CLAUDE.md), and install the Claude Code skill.
+
+  npx harebear-ui docs
+      Print the component catalog (props and examples for every export).
+`)
+}

package/dist/components/admin/activity-feed.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface ActivityItem {
+  id?: string;
+  actor: string;
+  avatarUrl?: string;
+  /** Verb phrase, e.g. "commented on". Rendered muted. */
+  action: React.ReactNode;
+  target?: React.ReactNode;
+  time: React.ReactNode;
+}
+/** "Maya published Pricing page v2 · 12 min ago" list. */
+declare function ActivityFeed({ items, className, ...props }: Omit<React.ComponentProps<"ul">, "children"> & {
+  items: ActivityItem[];
+}): React.JSX.Element;
+export { ActivityFeed };

package/dist/components/admin/activity-feed.js

@@ -0,0 +1,50 @@
+"use client";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { cn } from "../../lib/utils.js";
+import { initials } from "./user-chip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/activity-feed.tsx
+/** "Maya published Pricing page v2 · 12 min ago" list. */
+function ActivityFeed({ items, className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "activity-feed",
+		className: cn("flex flex-col gap-4.5", className),
+		...props,
+		children: items.map((a, i) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsxs(Avatar, {
+				size: "sm",
+				className: "size-8",
+				children: [a.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
+					src: a.avatarUrl,
+					alt: ""
+				}), /* @__PURE__ */ jsx(AvatarFallback, {
+					className: "text-xs",
+					children: initials(a.actor)
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5 text-[13px]",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: a.actor
+					}),
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: a.action
+					}),
+					" ",
+					a.target && /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: a.target
+					})
+				] }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: a.time
+				})]
+			})]
+		}, a.id ?? i))
+	});
+}
+export { ActivityFeed };

package/dist/components/admin/app-shell.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+export interface AppNavItem {
+  label: string;
+  /** Icon element, e.g. <LayoutDashboardIcon />. */
+  icon?: React.ReactNode;
+  href?: string;
+  onSelect?: () => void;
+  active?: boolean;
+  /** Count or short label shown at the right. */
+  badge?: React.ReactNode;
+}
+export interface AppNavSection {
+  label?: string;
+  items: AppNavItem[];
+}
+export interface AppBrandProps extends React.ComponentProps<"div"> {
+  name: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** Icon element shown in the primary-colored tile. */
+  icon?: React.ReactNode;
+  /** Optional trailing control, e.g. a workspace switcher button. */
+  action?: React.ReactNode;
+}
+/** Logo tile + product name. Used in the sidebar header or a top bar. */
+declare function AppBrand({ name, subtitle, icon, action, className, ...props }: AppBrandProps): React.JSX.Element;
+export interface AppShellProps {
+  /** Sidebar header content, usually <AppBrand />. */
+  brand?: React.ReactNode;
+  nav?: AppNavSection[];
+  /** Extra sidebar content under the nav (e.g. a usage card). */
+  sidebarExtra?: React.ReactNode;
+  /** Sidebar bottom content, usually <UserChip />. */
+  sidebarFooter?: React.ReactNode;
+  /** Top bar content inside the main area (search, actions). */
+  header?: React.ReactNode;
+  /** Component used for nav links. Default "a". Pass Next.js Link or React Router Link. */
+  linkComponent?: React.ElementType;
+  defaultOpen?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+/**
+ * Full admin layout: collapsible sidebar (sheet on mobile) + main column.
+ * Built on the Sidebar primitives; drop to those for anything custom.
+ */
+declare function AppShell({ brand, nav, sidebarExtra, sidebarFooter, header, linkComponent: Link, defaultOpen, className, children }: AppShellProps): React.JSX.Element;
+export { AppBrand, AppShell };

package/dist/components/admin/app-shell.js

@@ -0,0 +1,108 @@
+"use client";
+import { Badge } from "../ui/badge.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from "../ui/sidebar.js";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/app-shell.tsx
+/** Logo tile + product name. Used in the sidebar header or a top bar. */
+function AppBrand({ name, subtitle, icon, action, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "app-brand",
+		className: cn("flex items-center gap-3", className),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "grid size-9 shrink-0 place-items-center rounded-md bg-primary text-primary-foreground [&_svg]:size-[18px]",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "truncate text-[15px] font-semibold",
+					children: name
+				}), subtitle && /* @__PURE__ */ jsx("div", {
+					className: "truncate text-xs font-medium text-muted-foreground",
+					children: subtitle
+				})]
+			}),
+			action
+		]
+	});
+}
+/**
+* Full admin layout: collapsible sidebar (sheet on mobile) + main column.
+* Built on the Sidebar primitives; drop to those for anything custom.
+*/
+function AppShell({ brand, nav = [], sidebarExtra, sidebarFooter, header, linkComponent: Link = "a", defaultOpen = true, className, children }) {
+	return /* @__PURE__ */ jsxs(SidebarProvider, {
+		defaultOpen,
+		style: { "--sidebar-width": "15.75rem" },
+		children: [/* @__PURE__ */ jsxs(Sidebar, {
+			className: "border-r-0",
+			children: [
+				brand && /* @__PURE__ */ jsx(SidebarHeader, {
+					className: "px-4 pt-6 pb-2",
+					children: brand
+				}),
+				/* @__PURE__ */ jsxs(SidebarContent, {
+					className: "gap-5 px-2",
+					children: [nav.map((section, i) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [section.label && /* @__PURE__ */ jsx(SidebarGroupLabel, {
+						className: "text-xs font-medium",
+						children: section.label
+					}), /* @__PURE__ */ jsx(SidebarMenu, {
+						className: "gap-1",
+						children: section.items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+							asChild: !!item.href,
+							isActive: item.active,
+							onClick: item.onSelect,
+							children: item.href ? /* @__PURE__ */ jsxs(Link, {
+								href: item.href,
+								children: [
+									item.icon,
+									/* @__PURE__ */ jsx("span", {
+										className: "flex-1",
+										children: item.label
+									}),
+									item.badge !== void 0 && /* @__PURE__ */ jsx(NavBadge, { children: item.badge })
+								]
+							}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+								item.icon,
+								/* @__PURE__ */ jsx("span", {
+									className: "flex-1",
+									children: item.label
+								}),
+								item.badge !== void 0 && /* @__PURE__ */ jsx(NavBadge, { children: item.badge })
+							] })
+						}) }, item.label))
+					})] }, section.label ?? i)), sidebarExtra && /* @__PURE__ */ jsx("div", {
+						className: "mt-auto px-2",
+						children: sidebarExtra
+					})]
+				}),
+				sidebarFooter && /* @__PURE__ */ jsx(SidebarFooter, {
+					className: "px-4 pb-6",
+					children: sidebarFooter
+				})
+			]
+		}), /* @__PURE__ */ jsxs(SidebarInset, {
+			className: cn("min-w-0", className),
+			children: [header !== void 0 && /* @__PURE__ */ jsxs("header", {
+				"data-slot": "app-header",
+				className: "flex flex-wrap items-center gap-3 px-4 pt-5 md:px-8",
+				children: [/* @__PURE__ */ jsx(SidebarTrigger, { className: "md:hidden" }), header]
+			}), /* @__PURE__ */ jsx("div", {
+				"data-slot": "app-content",
+				className: "flex min-w-0 flex-col gap-7 px-4 pt-7 pb-12 md:px-8",
+				children
+			})]
+		})]
+	});
+}
+function NavBadge({ children }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "soft",
+		className: "h-5 px-2",
+		children
+	});
+}
+export { AppBrand, AppShell };

package/dist/components/admin/callout.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/** Quiet inline note with an icon, e.g. an insight or tip. Defaults to a sparkle icon. */
+declare function Callout({ icon, tone, className, children, ...props }: React.ComponentProps<"div"> & {
+  icon?: React.ReactNode;
+  tone?: "muted" | "soft";
+}): React.JSX.Element;
+export { Callout };

package/dist/components/admin/callout.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SparklesIcon } from "lucide-react";
+// src/components/admin/callout.tsx
+/** Quiet inline note with an icon, e.g. an insight or tip. Defaults to a sparkle icon. */
+function Callout({ icon = /* @__PURE__ */ jsx(SparklesIcon, {}), tone = "muted", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "callout",
+		className: cn("flex items-center gap-3 rounded-lg px-4 py-3.5 text-[13px] [&>svg]:size-[18px] [&>svg]:shrink-0 [&>svg]:text-primary", tone === "muted" ? "bg-muted" : "bg-primary-soft", className),
+		...props,
+		children: [icon, /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children
+		})]
+	});
+}
+export { Callout };

package/dist/components/admin/key-value-grid.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface KeyValueItem {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}
+/** Label-over-value pairs in a responsive grid. Renders a <dl>. */
+declare function KeyValueGrid({ items, columns, className, ...props }: Omit<React.ComponentProps<"dl">, "children"> & {
+  items: KeyValueItem[];
+  columns?: 1 | 2 | 3;
+}): React.JSX.Element;
+export { KeyValueGrid };

package/dist/components/admin/key-value-grid.js

@@ -0,0 +1,23 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/key-value-grid.tsx
+/** Label-over-value pairs in a responsive grid. Renders a <dl>. */
+function KeyValueGrid({ items, columns = 2, className, ...props }) {
+	return /* @__PURE__ */ jsx("dl", {
+		"data-slot": "key-value-grid",
+		className: cn("grid gap-x-5 gap-y-4.5", columns === 1 && "grid-cols-1", columns === 2 && "grid-cols-2", columns === 3 && "grid-cols-2 sm:grid-cols-3", className),
+		...props,
+		children: items.map((item, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: item.label
+			}), /* @__PURE__ */ jsx("dd", {
+				className: "truncate",
+				children: item.value
+			})]
+		}, i))
+	});
+}
+export { KeyValueGrid };

package/dist/components/admin/link-tile.d.ts

@@ -0,0 +1,17 @@
+import { StatusTone } from "./status.js";
+import * as React from "react";
+export interface LinkTileProps extends Omit<React.ComponentProps<"a">, "title"> {
+  title: React.ReactNode;
+  /** Mono secondary line, e.g. a host:port. */
+  subtitle?: React.ReactNode;
+  icon?: React.ReactNode;
+  status?: {
+    tone: StatusTone;
+    label: React.ReactNode;
+  };
+  /** Pass your router's <Link href> as the only child; the tile content renders inside it. */
+  asChild?: boolean;
+}
+/** Muted tile that lifts on hover. For service launchers and quick links. */
+declare function LinkTile({ title, subtitle, icon, status, asChild, className, children, ...props }: LinkTileProps): React.JSX.Element;
+export { LinkTile };

package/dist/components/admin/link-tile.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { StatusDot } from "./status.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
+// src/components/admin/link-tile.tsx
+/** Muted tile that lifts on hover. For service launchers and quick links. */
+function LinkTile({ title, subtitle, icon, status, asChild, className, children, ...props }) {
+	const Comp = asChild ? Slot.Root : "a";
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "grid size-9.5 place-items-center rounded-md bg-card text-primary shadow-card [&_svg]:size-[18px]",
+			children: icon
+		}), status && /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground tabular-nums",
+			children: [/* @__PURE__ */ jsx(StatusDot, { tone: status.tone }), status.label]
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-px",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-semibold",
+			children: title
+		}), subtitle && /* @__PURE__ */ jsx("span", {
+			className: "truncate font-mono text-xs text-muted-foreground",
+			children: subtitle
+		})]
+	})] });
+	return /* @__PURE__ */ jsxs(Comp, {
+		"data-slot": "link-tile",
+		className: cn("flex flex-col gap-3.5 rounded-lg bg-muted p-4 text-foreground no-underline transition-[background-color,transform,box-shadow] outline-none hover:-translate-y-px hover:bg-card hover:shadow-card focus-visible:ring-4 focus-visible:ring-ring/20", className),
+		...props,
+		children: [asChild && /* @__PURE__ */ jsx(Slot.Slottable, { children }), body]
+	});
+}
+export { LinkTile };