{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "memory-layout",
  "type": "registry:ui",
  "title": "MemoryLayout",
  "description": "Contiguous byte/memory layout visualizer with offsets, binary structs, and interactive field inspector.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/memory-layout.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MemorySegment {\n  name: string;\n  bytes: number;\n  offset?: string;\n  type?: string;\n  value?: string;\n  description?: string;\n  color?: \"crimson\" | \"emerald\" | \"amber\" | \"blue\" | \"violet\" | \"neutral\";\n}\n\nexport interface MemoryLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  totalBytes?: number | string;\n  segments: MemorySegment[];\n}\n\nexport function MemoryLayout({\n  title = \"Memory Layout\",\n  totalBytes,\n  segments,\n  className,\n  ...props\n}: MemoryLayoutProps) {\n  const [selectedIndex, setSelectedIndex] = React.useState<number>(0);\n\n  const totalCalculated =\n    totalBytes ??\n    segments.reduce((acc, s) => acc + (typeof s.bytes === \"number\" ? s.bytes : 0), 0);\n\n  const activeSeg = segments[selectedIndex] ?? segments[0];\n\n  const getColorClass = (c?: string) => {\n    switch (c) {\n      case \"crimson\":\n        return \"bg-primary/10 text-primary border-primary/20\";\n      case \"emerald\":\n        return \"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20\";\n      case \"amber\":\n        return \"bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20\";\n      case \"blue\":\n        return \"bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20\";\n      case \"violet\":\n        return \"bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20\";\n      default:\n        return \"bg-muted text-foreground border-border\";\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card text-card-foreground overflow-hidden my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between px-4 py-2.5 border-b border-border bg-muted/30 font-mono text-xs\">\n        <div className=\"flex items-center gap-2 font-semibold text-foreground\">\n          <span className=\"w-1.5 h-1.5 rounded-full bg-primary\" />\n          <span>{title}</span>\n        </div>\n        <div className=\"text-muted-foreground\">Total: {totalCalculated} bytes</div>\n      </div>\n\n      <div className=\"p-4 bg-muted/10 border-b border-border overflow-x-auto\">\n        <div className=\"flex min-h-[52px] min-w-[580px] w-full border border-border rounded-md overflow-hidden bg-card\">\n          {segments.map((seg, idx) => {\n            const flexGrow = Math.max(seg.bytes, 1);\n            const isSelected = selectedIndex === idx;\n\n            return (\n              <div\n                key={idx}\n                className={cn(\n                  \"flex flex-col justify-center items-center p-2 border-r border-border cursor-pointer transition-all min-w-0 max-w-full overflow-hidden last:border-r-0 select-none\",\n                  getColorClass(seg.color),\n                  isSelected && \"ring-2 ring-primary ring-inset z-10 font-bold\"\n                )}\n                style={{ flex: `${flexGrow} 1 0%` }}\n                onClick={() => setSelectedIndex(idx)}\n                title={`${seg.name} (${seg.bytes} bytes, ${seg.offset ?? \"\"})`}\n              >\n                <span className=\"font-mono text-sm font-medium truncate w-full text-center block\">\n                  {seg.name}\n                </span>\n                <span className=\"font-mono text-xs opacity-85 truncate w-full text-center block\">\n                  {seg.offset ?? `${seg.bytes}B`}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      {activeSeg && (\n        <div className=\"p-4 bg-card text-sm\">\n          <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n            <div>\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                Field\n              </span>\n              <span className=\"font-mono font-medium text-foreground\">\n                {activeSeg.name}\n              </span>\n            </div>\n            <div>\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                Offset\n              </span>\n              <span className=\"font-mono font-medium text-foreground\">\n                {activeSeg.offset ?? \"—\"}\n              </span>\n            </div>\n            <div>\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                Size\n              </span>\n              <span className=\"font-mono font-medium text-foreground\">\n                {activeSeg.bytes} bytes ({activeSeg.bytes * 8} bits)\n              </span>\n            </div>\n            {activeSeg.type && (\n              <div>\n                <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                  Type\n                </span>\n                <span className=\"font-mono font-medium text-blue-500\">\n                  {activeSeg.type}\n                </span>\n              </div>\n            )}\n          </div>\n          {activeSeg.description && (\n            <div className=\"mt-3 pt-3 border-t border-border\">\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                Description\n              </span>\n              <p className=\"text-muted-foreground\">{activeSeg.description}</p>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}