{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "description": "A modal dialog using the native browser dialog element with a rough-drawn border that redraws fresh on every open.",
  "dependencies": [
    "roughjs"
  ],
  "registryDependencies": [
    "https://www.bydefaulthuman.fun/r/use-rough.json",
    "utils",
    "https://www.bydefaulthuman.fun/r/crumble-theme.json",
    "https://www.bydefaulthuman.fun/r/rough-lib.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/dialog.tsx",
      "content": "\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useRough } from \"@/hooks/use-rough\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  CrumbleContext,\n  randomSeed,\n  resolveRoughVars,\n  type CrumbleColorProps,\n  type CrumbleTheme,\n} from \"@/lib/rough\";\n\ninterface DialogContextValue {\n  onClose: () => void;\n  theme: CrumbleTheme;\n}\n\nconst DialogContext = createContext<DialogContextValue>({\n  onClose: () => {},\n  theme: \"pencil\",\n});\n\nexport interface DialogProps extends CrumbleColorProps {\n  children: ReactNode;\n  onOpenChange?: (open: boolean) => void;\n  open: boolean;\n  theme?: CrumbleTheme;\n}\n\nexport function Dialog({\n  children,\n  fill,\n  onOpenChange,\n  open,\n  stroke,\n  strokeMuted,\n  theme: themeProp,\n}: DialogProps) {\n  const { theme: contextTheme } = useContext(CrumbleContext);\n  const theme = themeProp ?? contextTheme;\n  const onClose = () => onOpenChange?.(false);\n  const roughStyle = resolveRoughVars({ stroke, strokeMuted, fill });\n  return (\n    <DialogContext.Provider value={{ onClose, theme }}>\n      <div style={roughStyle}>{children}</div>\n    </DialogContext.Provider>\n  );\n}\n\nexport function DialogTrigger({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span className={cn(\"inline-flex\", className)} {...props}>\n      {children}\n    </span>\n  );\n}\n\nexport type DialogSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  showClose?: boolean;\n  size?: DialogSize;\n}\n\nconst sizeMap: Record<DialogSize, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\n};\n\nexport function DialogContent({\n  children,\n  className,\n  open,\n  showClose = true,\n  size = \"md\",\n  ...props\n}: DialogContentProps) {\n  const { onClose, theme } = useContext(DialogContext);\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const externalSvgRef = useRef<SVGSVGElement>(null);\n  const { drawRect, svgRef } = useRough({\n    svgRef: externalSvgRef,\n    theme,\n    variant: \"border\",\n  });\n\n  useEffect(() => {\n    const el = dialogRef.current;\n    if (!el) return;\n    if (open) {\n      if (!el.open) el.showModal();\n    } else if (el.open) {\n      el.close();\n    }\n  }, [open]);\n\n  useEffect(() => {\n    const el = dialogRef.current;\n    if (!el) return;\n    const handler = (e: Event) => {\n      e.preventDefault();\n      onClose();\n    };\n    el.addEventListener(\"cancel\", handler);\n    return () => el.removeEventListener(\"cancel\", handler);\n  }, [onClose]);\n\n  const handleDialogClick = (e: React.MouseEvent<HTMLDialogElement>) => {\n    if (e.target === dialogRef.current) onClose();\n  };\n\n  const draw = useCallback(() => {\n    const panel = panelRef.current;\n    const svg = svgRef.current;\n    if (!panel || !svg) return;\n\n    svg.replaceChildren();\n    const w = panel.offsetWidth;\n    const h = panel.offsetHeight;\n    svg.setAttribute(\"width\", String(w));\n    svg.setAttribute(\"height\", String(h));\n    svg.setAttribute(\"viewBox\", `0 0 ${w} ${h}`);\n\n    const rect = drawRect(1, 1, w - 2, h - 2, {\n      fill: \"none\",\n      seed: randomSeed(),\n      stroke: \"var(--cr-stroke)\",\n      strokeWidth: theme === \"crayon\" ? 2.5 : theme === \"ink\" ? 1.5 : 1,\n    });\n    if (rect) svg.appendChild(rect);\n  }, [drawRect, svgRef, theme]);\n\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => draw());\n      return () => cancelAnimationFrame(id);\n    }\n  }, [draw, open]);\n\n  useEffect(() => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    const ro = new ResizeObserver(() => draw());\n    ro.observe(panel);\n    return () => ro.disconnect();\n  }, [draw]);\n\n  return (\n    <>\n      <style>{`\n        @keyframes crumble-dialog-in {\n          from { opacity: 0; transform: scale(0.96) translateY(6px); }\n          to { opacity: 1; transform: scale(1) translateY(0); }\n        }\n        dialog.crumble-dialog::backdrop {\n          background: rgba(0,0,0,0.45);\n          animation: crumble-backdrop-in 150ms ease forwards;\n        }\n        @keyframes crumble-backdrop-in {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n      `}</style>\n\n      <dialog\n        ref={dialogRef}\n        className={cn(\n          \"crumble-dialog m-auto w-full bg-transparent p-0 outline-none\",\n          \"backdrop:bg-transparent\",\n          sizeMap[size],\n        )}\n        onClick={handleDialogClick}\n      >\n        <div\n          ref={panelRef}\n          className={cn(\"relative bg-background p-6\", className)}\n          style={{\n            animation: open\n              ? \"crumble-dialog-in 200ms cubic-bezier(0.16,1,0.3,1) forwards\"\n              : undefined,\n          }}\n          {...props}\n        >\n          <svg\n            ref={externalSvgRef}\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 h-full w-full overflow-visible\"\n          />\n          <div className=\"relative\">\n            {showClose ? (\n              <button\n                type=\"button\"\n                aria-label=\"Close dialog\"\n                onClick={onClose}\n                className=\"absolute -top-1 right-0 text-muted-foreground hover:text-foreground outline-none transition-colors\"\n              >\n                <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n                  <line x1=\"3\" y1=\"3\" x2=\"13\" y2=\"13\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n                  <line x1=\"13\" y1=\"3\" x2=\"3\" y2=\"13\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n                </svg>\n              </button>\n            ) : null}\n            {children}\n          </div>\n        </div>\n      </dialog>\n    </>\n  );\n}\n\nexport function DialogHeader({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(\"mb-4 flex flex-col gap-1\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function DialogTitle({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h2\n      className={cn(\"text-base font-semibold leading-none text-foreground\", className)}\n      {...(props as object)}\n    >\n      {children}\n    </h2>\n  );\n}\n\nexport function DialogDescription({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLParagraphElement>) {\n  return (\n    <p className={cn(\"text-sm text-muted-foreground\", className)} {...(props as object)}>\n      {children}\n    </p>\n  );\n}\n\nexport function DialogFooter({\n  children,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(\"mt-6 flex justify-end gap-2\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/crumble/ui/dialog.tsx"
    }
  ],
  "type": "registry:ui"
}