@sntlr/registry-shell 1.0.0

package/src/next-app/components/homepage-demo.tsx

@@ -0,0 +1,180 @@
+"use client"
+
+import { Button } from "@shell/components/shell-ui/button"
+import { Badge } from "@shell/components/shell-ui/badge"
+import { Input } from "@shell/components/shell-ui/input"
+import { Checkbox } from "@shell/components/shell-ui/checkbox"
+import { Label } from "@shell/components/shell-ui/label"
+import { Skeleton } from "@shell/components/shell-ui/skeleton"
+import { Separator } from "@shell/components/shell-ui/separator"
+import { Toggle } from "@shell/components/shell-ui/toggle"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@shell/components/shell-ui/card"
+import {
+  Bold,
+  Italic,
+  Underline,
+  Star,
+  Heart,
+  Zap,
+  Check,
+} from "lucide-react"
+
+function DemoCard({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-4 shadow-sm w-56 shrink-0">
+      {children}
+    </div>
+  )
+}
+
+const leftColumn = [
+  <DemoCard key="buttons">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Buttons</p>
+    <div className="flex flex-wrap gap-2">
+      <Button size="sm">Primary</Button>
+      <Button size="sm" variant="outline">Outline</Button>
+      <Button size="sm" variant="ghost">Ghost</Button>
+    </div>
+  </DemoCard>,
+
+  <DemoCard key="badges">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Badges</p>
+    <div className="flex flex-wrap gap-2">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Error</Badge>
+      <Badge variant="outline">Outline</Badge>
+    </div>
+  </DemoCard>,
+
+  <DemoCard key="input">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Input</p>
+    <Input placeholder="Type something..." className="h-8 text-xs" />
+  </DemoCard>,
+
+  <DemoCard key="skeleton">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Skeleton</p>
+    <div className="flex items-center gap-3">
+      <Skeleton className="h-8 w-8 rounded-full" />
+      <div className="space-y-1.5 flex-1">
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-3/4" />
+      </div>
+    </div>
+  </DemoCard>,
+
+  <DemoCard key="card">
+    <Card className="border-0 shadow-none p-0 gap-2">
+      <CardHeader className="p-0">
+        <CardTitle className="text-sm">Card Title</CardTitle>
+        <CardDescription className="text-xs">A sample card</CardDescription>
+      </CardHeader>
+      <CardContent className="p-0">
+        <p className="text-xs text-muted-foreground">Card content goes here.</p>
+      </CardContent>
+    </Card>
+  </DemoCard>,
+]
+
+const rightColumn = [
+  <DemoCard key="checkbox">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Checkbox</p>
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Checkbox id="h-1" defaultChecked />
+        <Label htmlFor="h-1" className="text-xs">Completed</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="h-2" />
+        <Label htmlFor="h-2" className="text-xs">In progress</Label>
+      </div>
+    </div>
+  </DemoCard>,
+
+  <DemoCard key="toggle">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Toggle</p>
+    <div className="flex gap-1">
+      <Toggle size="sm" aria-label="Bold"><Bold className="size-3.5" /></Toggle>
+      <Toggle size="sm" aria-label="Italic"><Italic className="size-3.5" /></Toggle>
+      <Toggle size="sm" aria-label="Underline"><Underline className="size-3.5" /></Toggle>
+    </div>
+  </DemoCard>,
+
+  <DemoCard key="separator">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Separator</p>
+    <div className="space-y-2">
+      <p className="text-xs">Above</p>
+      <Separator />
+      <p className="text-xs">Below</p>
+    </div>
+  </DemoCard>,
+
+  <DemoCard key="icons">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Icons</p>
+    <div className="flex gap-3">
+      <Star className="size-5 text-amber-500" />
+      <Heart className="size-5 text-red-500" />
+      <Zap className="size-5 text-blue-500" />
+      <Check className="size-5 text-green-500" />
+    </div>
+  </DemoCard>,
+
+  <DemoCard key="buttons2">
+    <p className="text-xs font-medium text-muted-foreground mb-2">Sizes</p>
+    <div className="flex items-center gap-2">
+      <Button size="xs">XS</Button>
+      <Button size="sm">SM</Button>
+      <Button size="default">MD</Button>
+    </div>
+  </DemoCard>,
+]
+
+export function HomepageDemo() {
+  // Duplicate items for seamless infinite scroll
+  const left = [...leftColumn, ...leftColumn]
+  const right = [...rightColumn, ...rightColumn]
+
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-30 hidden md:flex">
+      {/* Left column — scrolling up */}
+      <div
+        className="scroll-up absolute left-[8%] top-0 flex flex-col gap-4 -rotate-12"
+        style={{ animation: "scroll-up 30s linear infinite" }}
+      >
+        {left.map((item, i) => (
+          <div key={i}>{item}</div>
+        ))}
+      </div>
+
+      {/* Right column — scrolling down */}
+      <div
+        className="scroll-down absolute right-[8%] top-0 flex flex-col gap-4 rotate-12"
+        style={{ animation: "scroll-down 25s linear infinite" }}
+      >
+        {right.map((item, i) => (
+          <div key={i}>{item}</div>
+        ))}
+      </div>
+
+      <style jsx>{`
+        @keyframes scroll-up {
+          0% { transform: rotate(-12deg) translateY(0); }
+          100% { transform: rotate(-12deg) translateY(-50%); }
+        }
+        @keyframes scroll-down {
+          0% { transform: rotate(12deg) translateY(-50%); }
+          100% { transform: rotate(12deg) translateY(0); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .scroll-up, .scroll-down { animation: none !important; }
+        }
+      `}</style>
+    </div>
+  )
+}

package/src/next-app/components/locale-toggle.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useLocale } from "@shell/lib/i18n"
+import { Button } from "@shell/components/shell-ui/button"
+import { getShellLocales } from "@shell/lib/locales"
+
+const LOCALES = getShellLocales()
+
+/**
+ * Cycles the UI locale through the configured set. Hidden entirely when the
+ * shell is in single-locale mode (the toggle would be a no-op).
+ */
+export function LocaleToggle() {
+  const { locale, setLocale } = useLocale()
+
+  if (LOCALES.length < 2) return null
+
+  const next = () => {
+    const i = LOCALES.indexOf(locale)
+    const nextIdx = (i + 1) % LOCALES.length
+    setLocale(LOCALES[nextIdx])
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={next}
+      aria-label="Cycle language"
+      className="text-xs font-semibold"
+    >
+      {locale.toUpperCase()}
+    </Button>
+  )
+}

package/src/next-app/components/localized-mdx-client.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { useLocale } from "@shell/lib/i18n"
+
+/**
+ * Client wrapper that picks one of the pre-rendered locale trees produced by
+ * the server-side `LocalizedMdx`. The trees are React nodes, not strings, so
+ * locale switching is a tree swap with no MDX recompilation.
+ */
+export function LocalizedMdxClient({ rendered }: { rendered: Record<string, ReactNode> }) {
+  const { locale } = useLocale()
+  return <>{rendered[locale] ?? rendered.en ?? Object.values(rendered)[0] ?? null}</>
+}

package/src/next-app/components/localized-mdx.tsx

@@ -0,0 +1,27 @@
+/**
+ * Server component: pre-renders each locale's MDX into a React tree using
+ * `next-mdx-remote/rsc`, then hands the keyed map to a client wrapper that
+ * picks the active locale. Lets us keep client-side locale switching without
+ * the "MDXRemote is an async Client Component" error that fires when /rsc
+ * runs inside a "use client" boundary.
+ */
+import { MDXRemote } from "next-mdx-remote/rsc"
+import remarkGfm from "remark-gfm"
+import { mdxHeadings } from "@shell/components/heading-anchor"
+import { LocalizedMdxClient } from "@shell/components/localized-mdx-client"
+
+const mdxOptions = {
+  mdxOptions: {
+    remarkPlugins: [remarkGfm],
+  },
+}
+
+export function LocalizedMdx({ locales }: { locales: Record<string, string> }) {
+  const rendered: Record<string, React.ReactNode> = {}
+  for (const [loc, source] of Object.entries(locales)) {
+    rendered[loc] = (
+      <MDXRemote source={source} options={mdxOptions} components={mdxHeadings} />
+    )
+  }
+  return <LocalizedMdxClient rendered={rendered} />
+}

package/src/next-app/components/mobile-sidebar.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { Sidebar } from "@shell/components/sidebar"
+import { useMobileSidebar } from "@shell/components/sidebar-provider"
+import type { DocMeta } from "@shell/lib/docs"
+import type { ComponentMeta } from "@shell/lib/components-nav"
+
+export function MobileSidebar({
+  docs,
+  components,
+}: {
+  docs: DocMeta[]
+  components: ComponentMeta[]
+}) {
+  const { open, close } = useMobileSidebar()
+
+  return (
+    <div className="md:hidden">
+      <Sidebar docs={docs} components={components} open={open} onClose={close} />
+    </div>
+  )
+}

package/src/next-app/components/nav-data-provider.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { createContext, useContext, type ReactNode } from "react"
+import type { DocMeta } from "@shell/lib/docs"
+import type { ComponentMeta } from "@shell/lib/components-nav"
+
+interface NavData {
+  docs: DocMeta[]
+  components: ComponentMeta[]
+}
+
+const NavDataContext = createContext<NavData | null>(null)
+
+/**
+ * Provides the full navigation data (docs + components + blocks) to any
+ * descendant client component. Used by the Header to render section tabs
+ * without having to load the data itself.
+ */
+export function NavDataProvider({
+  docs,
+  components,
+  children,
+}: {
+  docs: DocMeta[]
+  components: ComponentMeta[]
+  children: ReactNode
+}) {
+  return (
+    <NavDataContext.Provider value={{ docs, components }}>
+      {children}
+    </NavDataContext.Provider>
+  )
+}
+
+export function useNavData(): NavData | null {
+  return useContext(NavDataContext)
+}

package/src/next-app/components/navigation-progress.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useEffect, useRef, useSyncExternalStore } from "react"
+import { usePathname } from "next/navigation"
+
+// Simple external store for navigation state
+let listeners: Array<() => void> = []
+let navProgress = { loading: false, progress: 0 }
+
+function setNav(updates: Partial<typeof navProgress>) {
+  navProgress = { ...navProgress, ...updates }
+  listeners.forEach((l) => l())
+}
+
+function subscribe(listener: () => void) {
+  listeners.push(listener)
+  return () => { listeners = listeners.filter((l) => l !== listener) }
+}
+
+function getSnapshot() { return navProgress }
+
+export function NavigationProgress() {
+  const pathname = usePathname()
+  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+  const prevPathname = useRef(pathname)
+
+  useEffect(() => {
+    if (prevPathname.current !== pathname) {
+      prevPathname.current = pathname
+      setNav({ progress: 100 })
+      const timer = setTimeout(() => setNav({ loading: false, progress: 0 }), 200)
+      return () => clearTimeout(timer)
+    }
+  }, [pathname])
+
+  // Intercept link clicks to show progress
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      const link = (e.target as HTMLElement).closest("a")
+      if (!link) return
+      const href = link.getAttribute("href")
+      if (!href || href.startsWith("#") || href.startsWith("http") || href.startsWith("mailto:")) return
+      if (href === pathname) return
+      setNav({ loading: true, progress: 30 })
+      setTimeout(() => setNav({ progress: 70 }), 100)
+    }
+    document.addEventListener("click", handleClick)
+    return () => document.removeEventListener("click", handleClick)
+  }, [pathname])
+
+  if (!state.loading && state.progress === 0) return null
+
+  return (
+    <div
+      className="fixed top-0 left-0 z-[100] h-0.5 bg-primary transition-all duration-300 ease-out"
+      style={{
+        width: `${state.progress}%`,
+        opacity: state.progress >= 100 ? 0 : 1,
+      }}
+    />
+  )
+}