@sntlr/registry-shell 1.0.0

package/src/next-app/components/props-table.tsx

@@ -0,0 +1,134 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { FileCode } from "lucide-react"
+import { Badge } from "@shell/components/shell-ui/badge"
+import { EmptyState, EmptyStateIcon, EmptyStateDescription } from "@shell/components/shell-ui/empty-state"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@shell/components/shell-ui/table"
+
+interface PropDoc {
+  name: string
+  type: string
+  required: boolean
+  defaultValue: string | null
+  description: string
+}
+
+interface ComponentDoc {
+  displayName: string
+  description: string
+  props: PropDoc[]
+}
+
+export function PropsTable({ name }: { name: string }) {
+  const [docs, setDocs] = useState<ComponentDoc[] | null>(null)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    fetch(`/props/${name}.json`)
+      .then((r) => {
+        if (!r.ok) throw new Error()
+        return r.json()
+      })
+      .then(setDocs)
+      .catch(() => setError(true))
+  }, [name])
+
+  const isEmpty = error || (docs && docs.length === 0) || (docs && docs.every((c) => c.props.length === 0))
+
+  if (!docs && !error) return <p className="text-sm text-muted-foreground" role="status" aria-live="polite">Loading...</p>
+
+  if (isEmpty) return (
+    <EmptyState>
+      <EmptyStateIcon><FileCode /></EmptyStateIcon>
+      <EmptyStateDescription>No documented props for this component.</EmptyStateDescription>
+    </EmptyState>
+  )
+
+  if (!docs) return null
+
+  return (
+    <div className="space-y-8">
+      {docs.map((comp) => (
+        <div key={comp.displayName}>
+          {docs.length > 1 && (
+            <h4
+              id={`props-${comp.displayName.toLowerCase()}`}
+              className="text-base font-semibold mb-1"
+            >
+              {comp.displayName}
+            </h4>
+          )}
+          {comp.description && (
+            <p className="text-sm text-muted-foreground mb-3">
+              {comp.description}
+            </p>
+          )}
+          {comp.props.length > 0 ? (
+            <div className="rounded-lg border overflow-hidden">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-36">Prop</TableHead>
+                    <TableHead className="w-48">Type</TableHead>
+                    <TableHead className="w-24">Default</TableHead>
+                    <TableHead>Description</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {comp.props.map((prop) => (
+                    <TableRow key={prop.name}>
+                      <TableCell>
+                        <code className="text-xs font-mono">{prop.name}</code>
+                        {prop.required && (
+                          <Badge
+                            variant="destructive"
+                            className="ml-1.5 text-[10px] px-1 py-0"
+                          >
+                            required
+                          </Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-xs font-mono text-muted-foreground">
+                          {prop.type}
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        {prop.defaultValue ? (
+                          <code className="text-xs font-mono">
+                            {prop.defaultValue}
+                          </code>
+                        ) : (
+                          <span className="text-xs text-muted-foreground">
+                            —
+                          </span>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        {prop.description || (
+                          <span className="text-muted-foreground">—</span>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              No documented props.
+            </p>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/next-app/components/resizable-preview.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { useCallback, useRef, useState, useEffect } from "react"
+
+const STORAGE_KEY = "preview-height"
+const DEFAULT_HEIGHT_DESKTOP = 384
+const DEFAULT_HEIGHT_MOBILE = 600
+const MIN_HEIGHT = 200
+const MAX_HEIGHT = 1000
+
+function getDefaultHeight(): number {
+  if (typeof window === "undefined") return DEFAULT_HEIGHT_DESKTOP
+  return window.matchMedia("(max-width: 767px)").matches
+    ? DEFAULT_HEIGHT_MOBILE
+    : DEFAULT_HEIGHT_DESKTOP
+}
+
+function getStoredHeight(): number {
+  if (typeof window === "undefined") return DEFAULT_HEIGHT_DESKTOP
+  const stored = sessionStorage.getItem(STORAGE_KEY)
+  if (stored) {
+    const n = Number(stored)
+    if (!isNaN(n)) return Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, n))
+  }
+  return getDefaultHeight()
+}
+
+export function ResizablePreview({ children }: { children: React.ReactNode }) {
+  const [height, setHeight] = useState(getStoredHeight)
+  const dragging = useRef(false)
+  const startY = useRef(0)
+  const startH = useRef(0)
+
+  useEffect(() => {
+    sessionStorage.setItem(STORAGE_KEY, String(height))
+  }, [height])
+
+  const onMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    dragging.current = true
+    startY.current = e.clientY
+    startH.current = height
+    document.body.style.cursor = "row-resize"
+    document.body.style.userSelect = "none"
+
+    function onMouseMove(ev: MouseEvent) {
+      if (!dragging.current) return
+      const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startH.current + (ev.clientY - startY.current)))
+      setHeight(newH)
+    }
+
+    function onMouseUp() {
+      dragging.current = false
+      document.body.style.cursor = ""
+      document.body.style.userSelect = ""
+      document.removeEventListener("mousemove", onMouseMove)
+      document.removeEventListener("mouseup", onMouseUp)
+    }
+
+    document.addEventListener("mousemove", onMouseMove)
+    document.addEventListener("mouseup", onMouseUp)
+  }, [height])
+
+  const onTouchStart = useCallback((e: React.TouchEvent) => {
+    if (e.touches.length !== 1) return
+    dragging.current = true
+    startY.current = e.touches[0].clientY
+    startH.current = height
+
+    function onTouchMove(ev: TouchEvent) {
+      if (!dragging.current || ev.touches.length !== 1) return
+      ev.preventDefault()
+      const newH = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startH.current + (ev.touches[0].clientY - startY.current)))
+      setHeight(newH)
+    }
+
+    function onTouchEnd() {
+      dragging.current = false
+      document.removeEventListener("touchmove", onTouchMove)
+      document.removeEventListener("touchend", onTouchEnd)
+    }
+
+    document.addEventListener("touchmove", onTouchMove, { passive: false })
+    document.addEventListener("touchend", onTouchEnd)
+  }, [height])
+
+  return (
+    <div>
+      <div style={{ height }}>
+        {children}
+      </div>
+      <div
+        className="h-3 md:h-2 cursor-row-resize flex items-center justify-center hover:bg-muted/50 active:bg-muted/50 transition-colors group touch-none"
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
+      >
+        <div className="w-8 h-0.5 rounded-full bg-border group-hover:bg-muted-foreground transition-colors" />
+      </div>
+    </div>
+  )
+}

package/src/next-app/components/search.tsx

@@ -0,0 +1,177 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { BookOpen, Component, Search, X } from "lucide-react"
+import { Command } from "cmdk"
+import { Button } from "@shell/components/shell-ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@shell/components/shell-ui/dialog"
+import { useTranslations } from "@shell/lib/i18n"
+
+export interface SearchItem {
+  label: string
+  href: string
+  group: string
+}
+
+// Module-level cache — survives re-renders, shared across mounts
+let cachedItems: SearchItem[] | null = null
+let fetchPromise: Promise<void> | null = null
+
+function preloadSearchIndex() {
+  if (cachedItems || fetchPromise) return
+  fetchPromise = fetch("/api/search-index")
+    .then((r) => r.json())
+    .then((data) => { cachedItems = data })
+    .catch(() => {})
+}
+
+export function SearchTrigger() {
+  return <SearchDialog />
+}
+
+function SearchDialog() {
+  const router = useRouter()
+  const t = useTranslations()
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState("")
+  const [items, setItems] = useState<SearchItem[]>([])
+  const [loading, setLoading] = useState(false)
+
+  // Preload search index on mount (fires on page load)
+  useEffect(() => {
+    preloadSearchIndex()
+  }, [])
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((o) => !o)
+      }
+    }
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  // When dialog opens, use cached data or wait for in-flight fetch
+  useEffect(() => {
+    if (!open || items.length > 0) return
+    if (cachedItems) {
+      setItems(cachedItems)
+      return
+    }
+    setLoading(true)
+    const waitForCache = async () => {
+      if (fetchPromise) await fetchPromise
+      if (cachedItems) setItems(cachedItems)
+      setLoading(false)
+    }
+    waitForCache()
+  }, [open, items.length])
+
+  const onSelect = useCallback(
+    (href: string) => {
+      setOpen(false)
+      router.push(href)
+    },
+    [router]
+  )
+
+  const groups = items.reduce<Record<string, SearchItem[]>>((acc, item) => {
+    ;(acc[item.group] ??= []).push(item)
+    return acc
+  }, {})
+
+  return (
+    <>
+      {/* Desktop: full search bar */}
+      <Button
+        variant="outline"
+        size="sm"
+        className="hidden md:inline-flex gap-2 text-muted-foreground font-normal w-56 justify-start"
+        onClick={() => setOpen(true)}
+      >
+        <Search className="size-4" />
+        <span>{t("header.search")}</span>
+        <kbd className="ml-auto pointer-events-none hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:flex">
+          <span className="text-xs">&#8984;</span>K
+        </kbd>
+      </Button>
+      {/* Mobile: icon only */}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="md:hidden"
+        onClick={() => setOpen(true)}
+        aria-label="Search"
+      >
+        <Search className="size-4" />
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent
+          className="overflow-hidden p-0 sm:max-w-lg max-md:max-w-full! max-md:h-dvh max-md:rounded-none max-md:border-0 max-md:top-0 max-md:translate-y-0"
+          showCloseButton={false}
+        >
+          <DialogTitle className="sr-only">Search</DialogTitle>
+          <Command
+            className="flex flex-col h-full [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium"
+            loop
+          >
+            <div className="flex items-center border-b px-3">
+              <Search className="mr-2 size-4 shrink-0 opacity-50" />
+
+              <Command.Input
+                value={query}
+                onValueChange={setQuery}
+                placeholder={t("search.placeholder")}
+                className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <button
+                onClick={() => setOpen(false)}
+                className="md:hidden p-1 rounded-md text-muted-foreground hover:text-foreground cursor-pointer"
+                aria-label="Close"
+              >
+                <X className="size-4" />
+              </button>
+            </div>
+            <Command.List className="max-h-80 max-md:max-h-none max-md:flex-1 overflow-y-auto p-1" aria-busy={loading} aria-live="polite">
+              {loading ? (
+                <div className="py-6 text-center text-sm text-muted-foreground" role="status">
+                  {t("a11y.loading")}
+                </div>
+              ) : (
+              <Command.Empty className="py-6 text-center text-sm text-muted-foreground">
+                {t("search.noResults")}
+              </Command.Empty>
+              )}
+              {Object.entries(groups).map(([group, groupItems]) => {
+                const Icon =
+                  group === "Documentation" ? BookOpen : Component
+                return (
+                  <Command.Group key={group} heading={group}>
+                    {groupItems.map((item) => (
+                      <Command.Item
+                        key={item.href}
+                        value={`${item.group} ${item.label}`}
+                        onSelect={() => onSelect(item.href)}
+                        className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
+                      >
+                        <Icon className="size-4 shrink-0 text-muted-foreground" />
+                        {item.label}
+                      </Command.Item>
+                    ))}
+                  </Command.Group>
+                )
+              })}
+            </Command.List>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/next-app/components/settings-modal.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { useState } from "react"
+import { Settings, Sun, Moon, Monitor, Globe } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "@shell/components/shell-ui/button"
+import { Separator } from "@shell/components/shell-ui/separator"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@shell/components/shell-ui/dialog"
+import { useLocale, useTranslations, type Locale } from "@shell/lib/i18n"
+
+export function SettingsButton() {
+  const [open, setOpen] = useState(false)
+  const { theme, setTheme } = useTheme()
+  const { locale, setLocale } = useLocale()
+  const t = useTranslations()
+
+  const themes = [
+    { id: "light" as const, label: t("settings.light"), icon: Sun },
+    { id: "dark" as const, label: t("settings.dark"), icon: Moon },
+    { id: "system" as const, label: t("settings.system"), icon: Monitor },
+  ]
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={t("settings.title")}
+          className="md:hidden"
+        >
+          <Settings className="size-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-md:max-w-full! max-md:h-full max-md:rounded-none max-md:border-0">
+        <DialogHeader>
+          <DialogTitle>{t("settings.title")}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Theme */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-semibold flex items-center gap-2">
+              <Sun className="size-4" />
+              {t("settings.theme")}
+            </h3>
+            <div className="flex gap-2">
+              {themes.map((opt) => (
+                <Button
+                  key={opt.id}
+                  variant={theme === opt.id ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setTheme(opt.id)}
+                  className="flex-1"
+                >
+                  <opt.icon className="size-3.5 mr-1.5" />
+                  {opt.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Language */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-semibold flex items-center gap-2">
+              <Globe className="size-4" />
+              {t("settings.language")}
+            </h3>
+            <div className="flex gap-2">
+              {([
+                { id: "en" as Locale, label: "English" },
+                { id: "fr" as Locale, label: "Français" },
+              ]).map((lang) => (
+                <Button
+                  key={lang.id}
+                  variant={locale === lang.id ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setLocale(lang.id)}
+                  className="flex-1"
+                >
+                  {lang.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/next-app/components/shell-ui/accordion.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@shell/lib/utils"
+
+/** Root container for a set of collapsible accordion sections. */
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+/** A single collapsible section within an accordion. */
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** Clickable header that toggles the visibility of its associated accordion content. */
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+/** Animated collapsible content area revealed when its accordion item is expanded. */
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/next-app/components/shell-ui/backdrop.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { cn } from "@shell/lib/utils"
+
+/** A fixed overlay backdrop for modals, drawers, and floating panels. */
+function Backdrop({
+  /** Additional CSS classes. */
+  className,
+  /** Whether the backdrop starts below the header (top: 3.5rem). */
+  belowHeader = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  /** Whether the backdrop starts below the header. */
+  belowHeader?: boolean
+}) {
+  return (
+    <div
+      data-slot="backdrop"
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 bg-black/40 dark:bg-black/60 transition-opacity duration-150 motion-reduce:transition-none",
+        belowHeader ? "top-14" : "top-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Backdrop }

package/src/next-app/components/shell-ui/badge.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@shell/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  /** The visual style variant of the badge. */
+  variant = "default",
+  /** Whether to render as a child element using Radix Slot. */
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    /** The visual style variant of the badge. */
+    variant?: "default" | "secondary" | "destructive" | "outline"
+    /** Whether to render as a child element using Radix Slot. */
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }