{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigator-dialog",
  "title": "Navigator Dialog",
  "description": "An N-level drill-in dialog — navigate into sub-views to edit things, then go back, with directional slide animations.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dialog",
    "button"
  ],
  "files": [
    {
      "path": "registry/custom-ui/navigator-dialog.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronLeftIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NavigatorRenderProps {\n  navigate: (viewId: string) => void;\n  back: () => void;\n  canGoBack: boolean;\n  activeViewId: string;\n  stack: readonly string[];\n}\n\nconst NavigatorContext = React.createContext<NavigatorRenderProps | null>(null);\n\nexport function useNavigator() {\n  const context = React.useContext(NavigatorContext);\n\n  if (!context) {\n    throw new Error(\"useNavigator must be used within a NavigatorDialog\");\n  }\n\n  return context;\n}\n\nexport interface NavigatorView {\n  /** Unique id referenced by `initialView` and `navigate()`. */\n  id: string;\n  /** Short label centered in the fixed navigation bar. */\n  name: string;\n  /** Standard shadcn dialog title rendered below the navigation bar. */\n  title: React.ReactNode;\n  /** Optional standard shadcn dialog description rendered below the title. */\n  description?: React.ReactNode;\n  /** Body content rendered below the shadcn dialog header. */\n  render: (navigator: NavigatorRenderProps) => React.ReactNode;\n  /** Optional actions rendered in a shadcn DialogFooter. */\n  footer?: (navigator: NavigatorRenderProps) => React.ReactNode;\n}\n\nexport interface NavigatorDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  views: NavigatorView[];\n  /** Id of the view shown first and restored when the dialog closes. */\n  initialView: string;\n  /** Merged onto `DialogContent` for project-specific sizing. */\n  className?: string;\n}\n\nexport function NavigatorDialog({\n  open,\n  onOpenChange,\n  views,\n  initialView,\n  className,\n}: NavigatorDialogProps) {\n  const [stack, setStack] = React.useState<string[]>([initialView]);\n  const [direction, setDirection] = React.useState<\"forward\" | \"back\">(\n    \"forward\",\n  );\n\n  const activeViewId = stack[stack.length - 1];\n  const activeView = views.find((view) => view.id === activeViewId);\n  const canGoBack = stack.length > 1;\n\n  React.useEffect(() => {\n    if (!open) {\n      setStack([initialView]);\n      setDirection(\"forward\");\n    }\n  }, [open, initialView]);\n\n  const navigate = React.useCallback(\n    (viewId: string) => {\n      if (!views.some((view) => view.id === viewId)) {\n        throw new Error(\n          `NavigatorDialog: no view registered with id \"${viewId}\"`,\n        );\n      }\n\n      setDirection(\"forward\");\n      setStack((prev) => [...prev, viewId]);\n    },\n    [views],\n  );\n\n  const back = React.useCallback(() => {\n    if (stack.length <= 1) return;\n\n    setDirection(\"back\");\n    setStack((prev) => prev.slice(0, -1));\n  }, [stack.length]);\n\n  const contextValue = React.useMemo<NavigatorRenderProps>(\n    () => ({ navigate, back, canGoBack, activeViewId, stack }),\n    [navigate, back, canGoBack, activeViewId, stack],\n  );\n\n  if (!activeView) {\n    throw new Error(\n      `NavigatorDialog: no view registered with id \"${activeViewId}\"`,\n    );\n  }\n\n  const footer = activeView.footer?.(contextValue);\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        data-custom-ui=\"navigator-dialog\"\n        showCloseButton={false}\n        {...(!activeView.description ? { \"aria-describedby\": undefined } : {})}\n        className={cn(\n          \"flex h-[80svh] max-h-[calc(100svh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:h-[32rem]\",\n          className,\n        )}\n      >\n        <NavigatorContext.Provider value={contextValue}>\n          <div\n            className=\"relative flex h-11 shrink-0 items-center justify-center border-b px-12\"\n            data-slot=\"navigator-dialog-bar\"\n          >\n            {canGoBack && (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={back}\n                aria-label=\"Go back\"\n                className=\"absolute top-1.5 left-2 size-8 rounded-sm [&_svg]:size-4\"\n              >\n                <ChevronLeftIcon />\n              </Button>\n            )}\n            <div className=\"absolute inset-x-12 top-1/2 truncate -translate-y-1/2 text-center text-sm leading-5 font-medium\">\n              {activeView.name}\n            </div>\n            <DialogClose asChild>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon\"\n                aria-label=\"Close\"\n                className=\"absolute top-1.5 right-2 size-8 rounded-sm text-muted-foreground hover:text-foreground [&_svg]:size-4\"\n              >\n                <XIcon />\n              </Button>\n            </DialogClose>\n          </div>\n\n          <div className=\"min-h-0 flex-1 overflow-y-auto p-6\">\n            <DialogHeader className=\"mb-6 text-left\">\n              <DialogTitle>{activeView.title}</DialogTitle>\n              {activeView.description && (\n                <DialogDescription>{activeView.description}</DialogDescription>\n              )}\n            </DialogHeader>\n            <div\n              key={activeViewId}\n              className={cn(\n                \"motion-safe:animate-in motion-safe:fade-in motion-safe:duration-200\",\n                direction === \"forward\"\n                  ? \"motion-safe:slide-in-from-right-4\"\n                  : \"motion-safe:slide-in-from-left-4\",\n              )}\n            >\n              {activeView.render(contextValue)}\n            </div>\n          </div>\n\n          {footer && (\n            <DialogFooter className=\"border-t px-6 py-4\">{footer}</DialogFooter>\n          )}\n        </NavigatorContext.Provider>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/custom-ui/navigator-dialog.tsx"
    }
  ],
  "type": "registry:ui"
}