@sntlr/registry-shell 1.0.0

package/src/next-app/app/globals.css

@@ -0,0 +1,329 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+
+/* Tailwind content scan for the user's registry files. Generated by the CLI
+ * from the `paths` declared in sntlr.ui-shell.config.ts — regenerated every
+ * `ui-shell dev` / `build` boot. Do not edit _user-sources.css by hand. */
+@import "./_user-sources.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --default-font-family: var(--font-sans);
+  --default-mono-font-family: var(--font-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+: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.426 0.094 161.619);
+  --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.525 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.714);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.426 0.094 161.619);
+  --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.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.796 0.125 168.082);
+  --primary-foreground: oklch(0.145 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.577 0.245 27.325);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.796 0.125 168.082);
+  --sidebar-primary-foreground: oklch(0.145 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.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html, body {
+    scrollbar-gutter: stable;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+  /* Prevent Radix scroll-lock from causing layout shift */
+  body[data-scroll-locked] {
+    margin-right: 0 !important;
+    scrollbar-gutter: stable;
+  }
+}
+
+/* Minimal scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+}
+
+.prose pre {
+  @apply bg-muted text-foreground rounded-lg;
+}
+
+.prose code::before,
+.prose code::after {
+  content: none;
+}
+
+.prose :not(pre) > code {
+  @apply bg-muted px-1.5 py-0.5 rounded text-xs font-medium;
+}
+
+.prose a {
+  @apply underline underline-offset-2 decoration-border hover:decoration-foreground transition-colors;
+}
+
+.prose table {
+  @apply w-full text-sm;
+}
+
+.prose th {
+  @apply text-left font-medium px-3 py-2 border-b border-border;
+}
+
+.prose td {
+  @apply px-3 py-2 border-b border-border;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Chart line draw-in animation */
+@keyframes chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
+/* Pair with `pathLength="1"` on the path so the animation is length-agnostic. */
+.chart-line { stroke-dasharray: 1; animation: chart-draw 1.5s ease-out forwards; }
+
+/* Bento chart entry animations — line draws, area fades in, dots pop sequentially */
+@keyframes chart-area-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes chart-dot-pop {
+  0%   { opacity: 0; transform: scale(0); }
+  60%  { opacity: 1; transform: scale(1.4); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.chart-area-fade { animation: chart-area-fade 1.4s ease-out 0.4s both; }
+.chart-dot-pop { transform-box: fill-box; transform-origin: center; animation: chart-dot-pop 0.5s ease-out both; }
+
+/* Typing cursor blink */
+@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+.typing-cursor { animation: cursor-blink 0.8s step-end infinite; }
+
+/* Marquee */
+@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
+.marquee-track { animation: marquee-left 30s linear infinite; }
+.marquee-track-reverse { animation: marquee-right 30s linear infinite; }
+.marquee-container:hover .marquee-track,
+.marquee-container:hover .marquee-track-reverse { animation-play-state: paused; }
+
+/* Bounce chevron */
+@keyframes bounce-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
+.bounce-gentle { animation: bounce-gentle 2s ease-in-out infinite; }
+
+/* Hero bento card entrance — pre-animation hidden state.
+ * The actual animation is driven by the Web Animations API in HeroSection
+ * (with a module-level guard) so it's guaranteed to fire exactly once per
+ * page load — even under React strict-mode double-mounts or hydration
+ * recovery. Cells are kept invisible via this class until the JS effect
+ * runs and replaces it with the WAAPI-driven keyframes. */
+.bento-cell-pending { opacity: 0; }
+
+/* Prototyping section — file flying along the conveyor */
+@keyframes proto-fly {
+  0%   { left: 0%;   opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
+  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
+}
+.proto-fly { animation: proto-fly 2.2s ease-in-out forwards; }
+
+/* Prototyping section — checkmark pop-in for the test list */
+@keyframes proto-check-pop {
+  0%   { opacity: 0; transform: scale(0.4); }
+  60%  { opacity: 1; transform: scale(1.25); }
+  100% { opacity: 1; transform: scale(1); }
+}
+.proto-check-pop { animation: proto-check-pop 0.45s ease-out both; }
+
+/* Prototyping section — neural network node pulse */
+@keyframes proto-node-pulse {
+  0%, 100% { opacity: 0.55; r: 3.5; }
+  50%      { opacity: 1;    r: 5; }
+}
+.proto-node-pulse { animation: proto-node-pulse 1.6s ease-in-out infinite; }
+
+/* Prototyping section — synapse trail (used by stroke-dasharray fired links) */
+@keyframes proto-synapse {
+  0%   { stroke-dashoffset: 1; opacity: 0; }
+  20%  { opacity: 0.9; }
+  100% { stroke-dashoffset: 0; opacity: 0; }
+}
+.proto-synapse { stroke-dasharray: 1; animation: proto-synapse 1.4s ease-out forwards; }
+
+/* Data-table row flash highlights — appear (primary), update (orange), delete (red→fade out) */
+@keyframes row-flash-appear {
+  0%   { background-color: color-mix(in oklch, var(--color-primary) 28%, transparent); }
+  100% { background-color: transparent; }
+}
+@keyframes row-flash-update {
+  0%   { background-color: oklch(0.75 0.18 65 / 0.32); }
+  100% { background-color: transparent; }
+}
+@keyframes row-flash-delete {
+  0%   { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 1; }
+  70%  { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 1; }
+  100% { background-color: oklch(0.6 0.22 25 / 0.45); opacity: 0; }
+}
+.row-flash-appear { animation: row-flash-appear 3s ease-out forwards; }
+.row-flash-update { animation: row-flash-update 3s ease-out forwards; }
+.row-flash-delete { animation: row-flash-delete 1.4s ease-out forwards; pointer-events: none; }
+
+/* Row presence avatar — fades+scales in (and stays visible until removed by JS) */
+@keyframes row-presence-pop {
+  0%   { opacity: 0; transform: translateY(-50%) scale(0.6); }
+  60%  { opacity: 1; transform: translateY(-50%) scale(1.1); }
+  100% { opacity: 1; transform: translateY(-50%) scale(1); }
+}
+.row-presence-pop { animation: row-presence-pop 0.35s ease-out forwards; }
+
+/* Gradient text */
+.text-gradient-primary {
+  color: transparent;
+  background-image: linear-gradient(135deg, var(--color-primary), oklch(0.6 0.15 180));
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+/* Skip navigation link */
+.skip-nav {
+  @apply sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:rounded-md focus:bg-background focus:text-foreground focus:border focus:border-border focus:shadow-lg;
+}
+
+/* High contrast mode */
+@media (forced-colors: active) {
+  * { border-color: CanvasText !important; }
+  button, [role="button"] { border: 1px solid ButtonText !important; }
+}
+
+/* Text scaling safety */
+html { font-size: clamp(14px, 1rem, 20px); }
+
+@media print {
+  header, aside, .no-print { display: none !important; }
+  main { width: 100% !important; margin: 0 !important; }
+  pre { white-space: pre-wrap !important; word-break: break-word !important; }
+  * { box-shadow: none !important; }
+}
+
+/* User's optional global CSS — `paths.globalCss` in their config.
+ * Generated by the CLI. Imported LAST so user `:root`/`.dark` token
+ * overrides cascade-win over the shell's defaults above. Always exists
+ * (no-op when unconfigured) so this import never 404s. */
+@import "./_user-global.css";

package/src/next-app/app/layout.tsx

@@ -0,0 +1,102 @@
+import type { Metadata } from "next"
+import { Space_Grotesk, JetBrains_Mono } from "next/font/google"
+import { ThemeProvider } from "@shell/components/theme-provider"
+import { I18nProvider } from "@shell/lib/i18n"
+import { SidebarProvider } from "@shell/components/sidebar-provider"
+import { Header } from "@shell/components/header"
+import { A11yProvider } from "@shell/components/a11y-provider"
+import { NavigationProgress } from "@shell/components/navigation-progress"
+import { NavDataProvider } from "@shell/components/nav-data-provider"
+import { GlobalMobileSidebar } from "@shell/components/global-mobile-sidebar"
+import { getAllDocs } from "@shell/lib/docs"
+import { getAllComponents } from "@shell/lib/components-nav"
+import { getGithubStars } from "@shell/lib/github"
+import { branding } from "@shell/lib/branding"
+import { registry } from "@shell/registry.config"
+import { getShellDefaultLocale, getShellLocales } from "@shell/lib/locales"
+import "./globals.css"
+
+const shellLocales = getShellLocales()
+const shellDefaultLocale = getShellDefaultLocale() || "en"
+
+const spaceGrotesk = Space_Grotesk({
+  variable: "--font-sans",
+  subsets: ["latin"],
+})
+
+const spaceMono = JetBrains_Mono({
+  variable: "--font-mono",
+  weight: ["400", "700"],
+  subsets: ["latin"],
+})
+
+const description = branding.description || `${branding.siteName} component registry.`
+
+export const metadata: Metadata = {
+  title: branding.siteName,
+  description,
+  metadataBase: branding.siteUrl ? new URL(branding.siteUrl) : undefined,
+  openGraph: {
+    title: branding.siteName,
+    description,
+    siteName: branding.siteName,
+    url: branding.siteUrl || undefined,
+    images: branding.ogImage ? [{ url: branding.ogImage }] : undefined,
+    type: "website",
+  },
+  twitter: {
+    card: branding.ogImage ? "summary_large_image" : "summary",
+    title: branding.siteName,
+    description,
+    site: branding.twitterHandle ? `@${branding.twitterHandle}` : undefined,
+    images: branding.ogImage ? [branding.ogImage] : undefined,
+  },
+  icons: {
+    icon: [
+      { url: branding.faviconDark, type: "image/svg+xml", media: "(prefers-color-scheme: light)" },
+      { url: branding.faviconLight, type: "image/svg+xml", media: "(prefers-color-scheme: dark)" },
+      { url: branding.faviconIco, sizes: "48x48" },
+    ],
+  },
+}
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const docs = getAllDocs()
+  const components = getAllComponents()
+  // Server-side, revalidates hourly. Returns null on failure → header shows
+  // the GitHub icon without a count.
+  const githubStars = await getGithubStars()
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${spaceGrotesk.variable} ${spaceMono.variable} antialiased`}
+      >
+        <ThemeProvider>
+          <I18nProvider
+            extraTranslations={registry?.extraTranslations}
+            defaultLocale={shellDefaultLocale}
+            availableLocales={shellLocales}
+          >
+            <NavDataProvider docs={docs} components={components}>
+              <SidebarProvider>
+                <NavigationProgress />
+                <A11yProvider />
+                <Header githubStars={githubStars} />
+                {/* Mobile-only sidebar mounted here so the hamburger menu works
+                    on every page (including the homepage). Per-section layouts
+                    still mount their own desktop-only Sidebar via SidebarLayout. */}
+                <GlobalMobileSidebar docs={docs} components={components} />
+                {children}
+              </SidebarProvider>
+            </NavDataProvider>
+          </I18nProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}

package/src/next-app/app/page.tsx

@@ -0,0 +1,9 @@
+import { getAllDocs } from "@shell/lib/docs"
+import HomePage from "@user/homepage"
+
+export default function Home() {
+  const docs = getAllDocs()
+  const firstDocSlug = docs[0]?.slug
+
+  return <HomePage firstDocSlug={firstDocSlug} />
+}

package/src/next-app/app/preview-snapshot/[name]/page.tsx

@@ -0,0 +1,20 @@
+import { notFound } from "next/navigation"
+import { getAllComponents } from "@shell/lib/components-nav"
+import { SnapshotPreview } from "@shell/components/snapshot-preview"
+
+export function generateStaticParams() {
+  return getAllComponents().map((comp) => ({ name: comp.name }))
+}
+
+export default async function SnapshotPage({
+  params,
+}: {
+  params: Promise<{ name: string }>
+}) {
+  const { name } = await params
+  const comp = getAllComponents().find((c) => c.name === name)
+
+  if (!comp) notFound()
+
+  return <SnapshotPreview name={name} />
+}

package/src/next-app/app/preview-snapshot/layout.tsx

@@ -0,0 +1,17 @@
+import "@shell/app/globals.css"
+
+/**
+ * Minimal layout for Playwright visual snapshots.
+ * No header, sidebar, or chrome — just the component.
+ */
+export default function SnapshotLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="p-4 bg-background text-foreground font-sans">
+      {children}
+    </div>
+  )
+}

package/src/next-app/app/props/[name]/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server"
+import { registry } from "@shell/registry.config"
+
+/**
+ * Serves the user registry's `public/props/{name}.json` files via the
+ * adapter, so the props table inside the Docs tab can fetch them through a
+ * stable URL even though the files live in the user's project.
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ name: string }> },
+) {
+  const { name } = await params
+  const data = registry?.getPropsData ? await registry.getPropsData(name) : null
+  if (!data) {
+    return NextResponse.json({ error: "Props data not found" }, { status: 404 })
+  }
+  return NextResponse.json(data)
+}

package/src/next-app/app/r/[name]/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from "next/server"
+import { registry } from "@shell/registry.config"
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ name: string }> },
+) {
+  const { name } = await params
+  const data = registry ? await registry.getRegistryItem(name) : null
+  if (!data) {
+    return NextResponse.json({ error: "Registry item not found" }, { status: 404 })
+  }
+  return NextResponse.json(data)
+}

package/src/next-app/app/tests/[name]/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server"
+import { registry } from "@shell/registry.config"
+
+/**
+ * Serves the user registry's `public/tests/{name}.json` files via the
+ * adapter, so the Tests tab can fetch them through standard URLs even though
+ * the files live in the user's project rather than the shell's `public/`.
+ */
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ name: string }> },
+) {
+  const { name } = await params
+  const data = registry?.getTestData ? await registry.getTestData(name) : null
+  if (!data) {
+    return NextResponse.json({ error: "Test data not found" }, { status: 404 })
+  }
+  return NextResponse.json(data)
+}