{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "json-viewer",
  "title": "JSON Viewer",
  "description": "Expandable structured JSON viewer with accessible controls and copy actions.",
  "registryDependencies": [
    "askyourpolicy/ss-registry/stitch-base",
    "askyourpolicy/ss-registry/button",
    "askyourpolicy/ss-registry/tooltip"
  ],
  "files": [
    {
      "path": "src/components/ui/json-viewer.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CaretDownIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CheckIcon,\n  CopyIcon,\n  DotsThreeIcon,\n} from \"@phosphor-icons/react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport type JsonViewerProps = {\n  className?: string;\n  data?: unknown;\n  defaultExpanded?: boolean;\n  maxHeight?: string;\n  rootName?: string;\n  value?: unknown;\n};\n\nexport function JsonViewer({\n  className,\n  data,\n  defaultExpanded = false,\n  maxHeight = \"max-h-72\",\n  rootName = \"root\",\n  value,\n}: JsonViewerProps) {\n  const source = value !== undefined ? value : data;\n\n  return (\n    <TooltipProvider>\n      <div\n        data-slot=\"json-viewer\"\n        className={cn(\n          maxHeight,\n          \"space-y-1.5 overflow-auto rounded-lg border bg-background p-2\",\n          className,\n        )}\n      >\n        <div className=\"max-w-full\">\n          <div className=\"w-max min-w-full whitespace-nowrap font-mono text-[11px]\">\n            <JsonNode\n              data={source}\n              defaultExpanded={defaultExpanded}\n              isRoot\n              level={0}\n              name={rootName}\n            />\n          </div>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n}\n\ntype JsonNodeProps = {\n  data: unknown;\n  defaultExpanded: boolean;\n  isRoot?: boolean;\n  level: number;\n  name: string;\n};\n\nfunction JsonNode({ data, defaultExpanded, isRoot = false, level, name }: JsonNodeProps) {\n  const [expanded, setExpanded] = React.useState(defaultExpanded);\n  const [copyState, setCopyState] = React.useState<\"idle\" | \"copied\" | \"error\">(\"idle\");\n  const copyStateTimer = React.useRef<number | null>(null);\n  const contentId = React.useId();\n  const dataType = getJsonType(data);\n  const expandable = dataType === \"object\" || dataType === \"array\";\n  const entries = expandable ? getEntries(data) : [];\n\n  React.useEffect(\n    () => () => {\n      if (copyStateTimer.current !== null) {\n        window.clearTimeout(copyStateTimer.current);\n      }\n    },\n    [],\n  );\n\n  async function copyToClipboard(event: React.MouseEvent) {\n    event.stopPropagation();\n\n    if (copyStateTimer.current !== null) {\n      window.clearTimeout(copyStateTimer.current);\n    }\n\n    try {\n      const serialized = JSON.stringify(data, null, 2) ?? String(data);\n      if (!navigator.clipboard?.writeText) {\n        throw new Error(\"Clipboard access is unavailable.\");\n      }\n      await navigator.clipboard.writeText(serialized);\n      setCopyState(\"copied\");\n    } catch {\n      setCopyState(\"error\");\n    }\n\n    copyStateTimer.current = window.setTimeout(() => {\n      setCopyState(\"idle\");\n      copyStateTimer.current = null;\n    }, 1600);\n  }\n\n  const rowContent = (\n    <>\n      <span className=\"flex size-4 shrink-0 items-center justify-center text-muted-foreground\">\n        {expandable ? (\n          expanded ? (\n            <CaretDownIcon className=\"size-3.5\" weight=\"bold\" />\n          ) : (\n            <CaretRightIcon className=\"size-3.5\" weight=\"bold\" />\n          )\n        ) : null}\n      </span>\n      <span className=\"text-primary\">{name}</span>\n      <span className=\"text-muted-foreground\">\n        {expandable ? (\n          <>\n            {dataType === \"array\" ? \"[\" : \"{\"}\n            {!expanded ? (\n              <>\n                {\" \"}\n                {entries.length} {entries.length === 1 ? \"item\" : \"items\"}{\" \"}\n                {dataType === \"array\" ? \"]\" : \"}\"}\n              </>\n            ) : null}\n          </>\n        ) : (\n          \":\"\n        )}\n      </span>\n      {!expandable ? <JsonValue data={data} /> : null}\n    </>\n  );\n\n  return (\n    <div className={cn(\"min-w-0 pl-3\", level > 0 && \"border-l border-border-subtle\")}>\n      <div\n        className={cn(\n          \"-ml-3 flex min-w-0 cursor-default items-center rounded-md transition-colors group/property\",\n          expandable && \"hover:bg-muted/60\",\n          isRoot && \"font-medium\",\n        )}\n      >\n        {expandable ? (\n          <button\n            aria-controls={contentId}\n            aria-expanded={expanded}\n            aria-label={`${expanded ? \"Collapse\" : \"Expand\"} ${name}`}\n            className=\"flex min-w-0 flex-1 cursor-pointer items-center gap-1 rounded-md px-1 py-px text-left leading-4 outline-none focus-visible:ring-2 focus-visible:ring-ring/50\"\n            onClick={() => setExpanded((current) => !current)}\n            type=\"button\"\n          >\n            {rowContent}\n          </button>\n        ) : (\n          <div className=\"flex min-w-0 flex-1 items-center gap-1 px-1 py-px leading-4\">\n            {rowContent}\n          </div>\n        )}\n        <Button\n          aria-label={\n            copyState === \"copied\"\n              ? `${name} copied`\n              : copyState === \"error\"\n                ? `Copy ${name} failed. Try again`\n                : `Copy ${name}`\n          }\n          className=\"ml-auto size-5 shrink-0 opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100\"\n          onClick={(event) => void copyToClipboard(event)}\n          size=\"icon-xs\"\n          type=\"button\"\n          variant=\"ghost\"\n        >\n          {copyState === \"copied\" ? (\n            <CheckIcon className=\"size-3.5 text-status-success\" weight=\"bold\" />\n          ) : (\n            <CopyIcon\n              className={cn(\n                \"size-3.5 text-muted-foreground\",\n                copyState === \"error\" && \"text-destructive\",\n              )}\n            />\n          )}\n        </Button>\n        <span aria-live=\"polite\" className=\"sr-only\" role=\"status\">\n          {copyState === \"copied\"\n            ? `${name} copied to clipboard.`\n            : copyState === \"error\"\n              ? `${name} could not be copied. Try again.`\n              : \"\"}\n        </span>\n      </div>\n      {expandable && expanded ? (\n        <div id={contentId} className=\"pl-4\">\n          {entries.map(([key, entry]) => (\n            <JsonNode data={entry} defaultExpanded={false} key={key} level={level + 1} name={key} />\n          ))}\n          <div className=\"py-px pl-4 leading-4 text-muted-foreground\">\n            {dataType === \"array\" ? \"]\" : \"}\"}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction JsonValue({ data }: { data: unknown }) {\n  const [expanded, setExpanded] = React.useState(false);\n  const textLimit = 80;\n\n  if (data === null) {\n    return <span className=\"text-destructive\">null</span>;\n  }\n  if (data === undefined) {\n    return <span className=\"text-muted-foreground\">undefined</span>;\n  }\n  if (data instanceof Date) {\n    return <span className=\"text-purple-700 dark:text-purple-300\">{data.toISOString()}</span>;\n  }\n  if (typeof data === \"string\") {\n    if (data.length > textLimit) {\n      const displayValue = expanded ? data : `${data.slice(0, textLimit)}...`;\n      return (\n        <button\n          aria-expanded={expanded}\n          className=\"group/value inline-flex items-center gap-1 text-left whitespace-nowrap text-emerald-700 dark:text-emerald-300\"\n          onClick={(event) => {\n            event.stopPropagation();\n            setExpanded((current) => !current);\n          }}\n          type=\"button\"\n        >\n          <span>\"</span>\n          {expanded ? (\n            <span>{displayValue}</span>\n          ) : (\n            <Tooltip>\n              <TooltipTrigger render={<span />}>{displayValue}</TooltipTrigger>\n              <TooltipContent className=\"max-w-md break-words text-left\" side=\"bottom\">\n                {data}\n              </TooltipContent>\n            </Tooltip>\n          )}\n          <span>\"</span>\n          {expanded ? (\n            <CaretUpIcon className=\"size-3 text-muted-foreground opacity-60 transition-opacity group-hover/value:opacity-100 group-focus-visible/value:opacity-100\" />\n          ) : (\n            <DotsThreeIcon className=\"size-3 text-muted-foreground opacity-60 transition-opacity group-hover/value:opacity-100 group-focus-visible/value:opacity-100\" />\n          )}\n        </button>\n      );\n    }\n    return <span className=\"text-emerald-700 dark:text-emerald-300\">{`\"${data}\"`}</span>;\n  }\n  if (typeof data === \"number\") {\n    return <span className=\"text-amber-700 dark:text-amber-300\">{data}</span>;\n  }\n  if (typeof data === \"boolean\") {\n    return <span className=\"text-blue-700 dark:text-blue-300\">{String(data)}</span>;\n  }\n  return <span>{String(data)}</span>;\n}\n\nfunction getJsonType(value: unknown) {\n  if (value === null) return \"null\";\n  if (Array.isArray(value)) return \"array\";\n  if (value instanceof Date) return \"date\";\n  return typeof value;\n}\n\nfunction getEntries(value: unknown): [string, unknown][] {\n  if (Array.isArray(value)) return value.map((entry, index) => [String(index), entry]);\n  if (value && typeof value === \"object\") return Object.entries(value);\n  return [];\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}