@sntlr/registry-shell 1.0.0 → 1.1.0

package/src/next-app/components/component-icon.tsx

@@ -1,140 +1,140 @@
-"use client"
-
-import {
-  AlertTriangle,
-  ChevronsDown,
-  Terminal,
-  Hash,
-  BookMarked,
-  RectangleHorizontal,
-  BadgeCheck,
-  ChevronRight,
-  CalendarDays,
-  CreditCard,
-  CheckSquare,
-  ChevronsUpDown,
-  MousePointerClick,
-  Inbox,
-  Keyboard,
-  PanelTop,
-  ChevronDown,
-  TextCursorInput,
-  Tag,
-  Layers,
-  CircleDot,
-  ListFilter,
-  SeparatorHorizontal,
-  PanelRight,
-  LayoutDashboard,
-  Square,
-  Bell,
-  Table2,
-  Columns3,
-  AlignLeft,
-  ToggleLeft,
-  MessageSquare,
-  Pipette,
-  Palette,
-  TableProperties,
-  FunctionSquare,
-  Upload,
-  SplitSquareHorizontal,
-  TextCursor,
-  MousePointer2,
-  KeyRound,
-  ArrowLeftRight,
-  ShieldAlert,
-  SquarePen,
-  Filter,
-  Users,
-  Link2,
-  LogIn,
-  UserPlus,
-  Smartphone,
-  Mail,
-  Lock,
-  Shield,
-  UserCog,
-  Building2,
-  Users2,
-  ShieldCheck,
-  Component,
-  type LucideIcon,
-} from "lucide-react"
-
-const iconMap: Record<string, LucideIcon> = {
-  accordion: ChevronsDown,
-  alert: AlertTriangle,
-  avatar: CircleDot,
-  badge: BadgeCheck,
-  breadcrumb: ChevronRight,
-  button: RectangleHorizontal,
-  calendar: CalendarDays,
-  card: CreditCard,
-  checkbox: CheckSquare,
-  collapsible: ChevronsUpDown,
-  command: Terminal,
-  "confirm-dialog": ShieldAlert,
-  "context-menu": MousePointerClick,
-  "color-picker": Pipette,
-  "color-swatch": Palette,
-  "data-table": TableProperties,
-  "empty-state": Inbox,
-  "file-upload": Upload,
-  "form-section": SquarePen,
-  kbd: Keyboard,
-  "formula-editor": FunctionSquare,
-  "app-switcher": ArrowLeftRight,
-  dialog: PanelTop,
-  "dropdown-menu": ChevronDown,
-  input: TextCursorInput,
-  "input-otp": Hash,
-  label: Tag,
-  "live-caret": TextCursor,
-  "live-cursor": MousePointer2,
-  pagination: BookMarked,
-  popover: Layers,
-  "radio-group": CircleDot,
-  "search-filter-bar": Filter,
-  select: ListFilter,
-  separator: SeparatorHorizontal,
-  "password-input": KeyRound,
-  sheet: PanelRight,
-  sidebar: LayoutDashboard,
-  skeleton: Square,
-  "split-button": SplitSquareHorizontal,
-  sonner: Bell,
-  table: Table2,
-  tabs: Columns3,
-  textarea: AlignLeft,
-  toggle: ToggleLeft,
-  tooltip: MessageSquare,
-  "social-links": Link2,
-  "user-status": Users,
-  "auth-login": LogIn,
-  "auth-register": UserPlus,
-  "authorized-devices": Smartphone,
-  "email-update-form": Mail,
-  "password-reset-form": Lock,
-  "mfa-form": Shield,
-  "profile-form": UserCog,
-  "account-deletion-form": AlertTriangle,
-  "org-settings-form": Building2,
-  "org-roles-form": ShieldCheck,
-  "org-members-form": Users2,
-}
-
-export function ComponentHeroIcon({ name }: { name: string }) {
-  const Icon = iconMap[name] ?? Component
-
-  return (
-    <Icon
-      className="absolute right-0 top-1/2 -translate-y-1/2 size-28 text-foreground/4 -rotate-12 pointer-events-none"
-      strokeWidth={1.5}
-    />
-  )
-}
-
-export function getComponentIcon(name: string): LucideIcon {
-  return iconMap[name] ?? Component
-}
+"use client"
+
+import {
+  AlertTriangle,
+  ChevronsDown,
+  Terminal,
+  Hash,
+  BookMarked,
+  RectangleHorizontal,
+  BadgeCheck,
+  ChevronRight,
+  CalendarDays,
+  CreditCard,
+  CheckSquare,
+  ChevronsUpDown,
+  MousePointerClick,
+  Inbox,
+  Keyboard,
+  PanelTop,
+  ChevronDown,
+  TextCursorInput,
+  Tag,
+  Layers,
+  CircleDot,
+  ListFilter,
+  SeparatorHorizontal,
+  PanelRight,
+  LayoutDashboard,
+  Square,
+  Bell,
+  Table2,
+  Columns3,
+  AlignLeft,
+  ToggleLeft,
+  MessageSquare,
+  Pipette,
+  Palette,
+  TableProperties,
+  FunctionSquare,
+  Upload,
+  SplitSquareHorizontal,
+  TextCursor,
+  MousePointer2,
+  KeyRound,
+  ArrowLeftRight,
+  ShieldAlert,
+  SquarePen,
+  Filter,
+  Users,
+  Link2,
+  LogIn,
+  UserPlus,
+  Smartphone,
+  Mail,
+  Lock,
+  Shield,
+  UserCog,
+  Building2,
+  Users2,
+  ShieldCheck,
+  Component,
+  type LucideIcon,
+} from "lucide-react"
+
+const iconMap: Record<string, LucideIcon> = {
+  accordion: ChevronsDown,
+  alert: AlertTriangle,
+  avatar: CircleDot,
+  badge: BadgeCheck,
+  breadcrumb: ChevronRight,
+  button: RectangleHorizontal,
+  calendar: CalendarDays,
+  card: CreditCard,
+  checkbox: CheckSquare,
+  collapsible: ChevronsUpDown,
+  command: Terminal,
+  "confirm-dialog": ShieldAlert,
+  "context-menu": MousePointerClick,
+  "color-picker": Pipette,
+  "color-swatch": Palette,
+  "data-table": TableProperties,
+  "empty-state": Inbox,
+  "file-upload": Upload,
+  "form-section": SquarePen,
+  kbd: Keyboard,
+  "formula-editor": FunctionSquare,
+  "app-switcher": ArrowLeftRight,
+  dialog: PanelTop,
+  "dropdown-menu": ChevronDown,
+  input: TextCursorInput,
+  "input-otp": Hash,
+  label: Tag,
+  "live-caret": TextCursor,
+  "live-cursor": MousePointer2,
+  pagination: BookMarked,
+  popover: Layers,
+  "radio-group": CircleDot,
+  "search-filter-bar": Filter,
+  select: ListFilter,
+  separator: SeparatorHorizontal,
+  "password-input": KeyRound,
+  sheet: PanelRight,
+  sidebar: LayoutDashboard,
+  skeleton: Square,
+  "split-button": SplitSquareHorizontal,
+  sonner: Bell,
+  table: Table2,
+  tabs: Columns3,
+  textarea: AlignLeft,
+  toggle: ToggleLeft,
+  tooltip: MessageSquare,
+  "social-links": Link2,
+  "user-status": Users,
+  "auth-login": LogIn,
+  "auth-register": UserPlus,
+  "authorized-devices": Smartphone,
+  "email-update-form": Mail,
+  "password-reset-form": Lock,
+  "mfa-form": Shield,
+  "profile-form": UserCog,
+  "account-deletion-form": AlertTriangle,
+  "org-settings-form": Building2,
+  "org-roles-form": ShieldCheck,
+  "org-members-form": Users2,
+}
+
+export function ComponentHeroIcon({ name }: { name: string }) {
+  const Icon = iconMap[name] ?? Component
+
+  return (
+    <Icon
+      className="absolute right-0 top-1/2 -translate-y-1/2 size-28 text-foreground/4 -rotate-12 pointer-events-none"
+      strokeWidth={1.5}
+    />
+  )
+}
+
+export function getComponentIcon(name: string): LucideIcon {
+  return iconMap[name] ?? Component
+}

package/src/next-app/components/heading-anchor.tsx

@@ -1,52 +1,52 @@
-"use client"
-
-import { Link as LinkIcon } from "lucide-react"
-
-function slugify(text: string): string {
-  return text
-    .toLowerCase()
-    .replace(/[^\w\s-]/g, "")
-    .replace(/\s+/g, "-")
-}
-
-interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  children?: React.ReactNode
-}
-
-function createHeading(level: 1 | 2 | 3 | 4 | 5 | 6) {
-  const Tag = `h${level}` as const
-
-  return function Heading({ children, id, ...props }: HeadingProps) {
-    const headingId = id || slugify(typeof children === "string" ? children : "")
-    if (!headingId) return <Tag {...props}>{children}</Tag>
-
-    return (
-      <Tag id={headingId} className="group relative scroll-mt-20" {...props}>
-        {children}
-        <a
-          href={`#${headingId}`}
-          onClick={(e) => {
-            e.preventDefault()
-            history.replaceState(null, "", `#${headingId}`)
-            document.getElementById(headingId)?.scrollIntoView({ behavior: "smooth", block: "start" })
-            // Copy link to clipboard
-            navigator.clipboard?.writeText(window.location.href)
-          }}
-          className="inline-flex items-center ml-2 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground"
-          aria-label={`Link to ${typeof children === "string" ? children : "section"}`}
-        >
-          <LinkIcon className="size-4" />
-        </a>
-      </Tag>
-    )
-  }
-}
-
-export const mdxHeadings = {
-  h1: createHeading(1),
-  h2: createHeading(2),
-  h3: createHeading(3),
-  h4: createHeading(4),
-  h5: createHeading(5),
-  h6: createHeading(6),
-}
+"use client"
+
+import { Link as LinkIcon } from "lucide-react"
+
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/\s+/g, "-")
+}
+
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  children?: React.ReactNode
+}
+
+function createHeading(level: 1 | 2 | 3 | 4 | 5 | 6) {
+  const Tag = `h${level}` as const
+
+  return function Heading({ children, id, ...props }: HeadingProps) {
+    const headingId = id || slugify(typeof children === "string" ? children : "")
+    if (!headingId) return <Tag {...props}>{children}</Tag>
+
+    return (
+      <Tag id={headingId} className="group relative scroll-mt-20" {...props}>
+        {children}
+        <a
+          href={`#${headingId}`}
+          onClick={(e) => {
+            e.preventDefault()
+            history.replaceState(null, "", `#${headingId}`)
+            document.getElementById(headingId)?.scrollIntoView({ behavior: "smooth", block: "start" })
+            // Copy link to clipboard
+            navigator.clipboard?.writeText(window.location.href)
+          }}
+          className="inline-flex items-center ml-2 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground"
+          aria-label={`Link to ${typeof children === "string" ? children : "section"}`}
+        >
+          <LinkIcon className="size-4" />
+        </a>
+      </Tag>
+    )
+  }
+}
+
+export const mdxHeadings = {
+  h1: createHeading(1),
+  h2: createHeading(2),
+  h3: createHeading(3),
+  h4: createHeading(4),
+  h5: createHeading(5),
+  h6: createHeading(6),
+}

package/src/next-app/{fallback → components}/homepage.tsx

@@ -1,6 +1,5 @@
 /**
- * Fallback homepage rendered at `/` when the user's config has no custom
- * `homePage`. Two states:
+ * The shell's homepage rendered at `/`. Two states:
  *   - Registry has content → generic index listing components/blocks/docs.
  *   - Registry empty / absent → terse "no registry wired" placeholder
  *     pointing at the shell's documentation site.
@@ -10,7 +9,7 @@ import { getAllComponents } from "@shell/lib/components-nav"
 import { getAllDocs } from "@shell/lib/docs"
 import type { HomePageProps } from "@shell/lib/registry-adapter"
 
-export default function FallbackHomePage({ firstDocSlug }: HomePageProps) {
+export default function HomePage({ firstDocSlug }: HomePageProps) {
   const items = getAllComponents()
   const docs = getAllDocs()
 

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

@@ -1,62 +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,
-      }}
-    />
-  )
-}
+"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,
+      }}
+    />
+  )
+}