{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "code-window", "type": "registry:ui", "title": "Code Window", "description": "macOS-style window chrome for wrapping editor, terminal, or code-preview content: a bordered `bg-card` box plus an optional title bar with the three traffic-light dots, a centred monospace filename, and an actions slot.", "author": "ofri-peretz ", "categories": [ "blog", "pattern" ], "dependencies": [], "registryDependencies": [ "https://ds.interlace.tools/r/theme.json", "https://ds.interlace.tools/r/cn.json" ], "files": [ { "path": "registry/interlace-ui/patterns/code-window.tsx", "target": "components/ui/patterns/code-window.tsx", "type": "registry:ui", "content": "'use client';\n\nimport * as React from 'react';\n\n// @interlace/code-window v1.2.0 — Interlace design system.\n// Docs, props and live preview: https://ds.interlace.tools/c/code-window\n// What changed since: https://ds.interlace.tools/c/code-window#history\n// Generated banner — keep it, the upgrade diff reads this version.\n\n/**\n * @interlace/ui — CodeWindow + CodeWindowTitleBar\n *\n * macOS-style window chrome for wrapping editor, terminal, or code-preview\n * content: a bordered `bg-card` box plus an optional title bar with the three\n * traffic-light dots, a centred monospace filename, and an actions slot.\n *\n * It is chrome only — it renders whatever you nest inside it and has no\n * opinion about the content.\n *\n * Modeled on MagicUI's `Terminal` chrome (the dots + bar layout convention)\n * but reduced to the visual primitive — no animation, no terminal-specific\n * line emitter. Reach for MagicUI's `Terminal` when you want the typed-prompt\n * animation; reach for this when you want a window-shaped container.\n *\n * ## Anatomy\n *\n * CodeWindow (div — data-slot=\"code-window\")\n * ├─ CodeWindowTitleBar (div — data-slot=\"code-window-title-bar\")\n * │ ├─ span aria-hidden (data-slot=\"code-window-traffic-lights\")\n * │ │ └─ 3 × span size-3 (bg-window-control-close/-minimize/-zoom)\n * │ ├─ span (title — centred, font-mono text-xs)\n * │ └─ span (actions — ml-auto)\n * └─ children (the body: editor, 
, anything)\n *\n * ## No accessible name, deliberately\n *\n * The root is a bare `
`: no role, no label. That is the correct shape for\n * this component rather than a gap in it. It claims no role, so ARIA requires\n * it to expose no name — and an `aria-label` on a roleless `
` is ignored\n * by most of the mapping specs anyway, so adding one would buy a false sense\n * of coverage. Nothing is hidden either: the dots are `aria-hidden` because\n * they are ornament, while the `title` slot is an ordinary `` whose text\n * is read in document order like any other text, and the body renders whatever\n * you nest with its own semantics intact.\n *\n * If a particular window needs to be announced AS a region — a labelled\n * landmark a screen-reader user can jump to — that is a call-site decision\n * about that page's structure, so give it a role and a name there. Baking one\n * in would make every code sample on a docs page a landmark.\n *\n * There is also no `MIN_VIEWPORT`: the chrome is one border and a 40px bar, so\n * it inherits whatever width its container gives it.\n *\n * | Rule | Concept                     | Where in this file                                        |\n * | ---- | --------------------------- | --------------------------------------------------------- |\n * | R4   | Extends native el           | `React.ComponentProps<'div'>` on both parts               |\n * | R6   | data-slot per part          | `code-window` / `-title-bar` / `-traffic-lights`          |\n * | R7   | className merged + ...rest  | `cn(BASE, className)` + `{...props}`                      |\n * | R10  | Composition seams           | `title` and `actions` are `ReactNode`, not strings        |\n * | R18  | Tailwind only               | zero inline `style`                                       |\n * | R19  | Tokens only                 | dots use `--window-control-*`, not the macOS hex literals |\n * | R25  | Client directive            | `'use client'` is declared although neither part uses a hook |\n */\n\nimport { cn } from '@/lib/utils';\n\nfunction CodeWindow({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    \n      {children}\n    
\n  );\n}\n\ninterface CodeWindowTitleBarProps extends Omit, 'title'> {\n  /**\n   * Optional title to display in the bar (typically a filename or rule id).\n   * If omitted, the bar renders just the traffic-light dots — leaner for\n   * cases where a separate header already names the content. Typed as\n   * `ReactNode` (not the native HTML `title` attribute) so callers can\n   * pass JSX such as a styled filename.\n   */\n  title?: React.ReactNode;\n  /**\n   * Optional trailing slot (right-aligned). Useful for a \"copy\" button or\n   * a status indicator. Renders inside the title-bar row.\n   */\n  actions?: React.ReactNode;\n}\n\nfunction CodeWindowTitleBar({\n  className,\n  title,\n  actions,\n  ...props\n}: CodeWindowTitleBarProps) {\n  return (\n    \n      \n        \n        \n        \n      \n      {title && (\n        \n          {title}\n        \n      )}\n      {actions && (\n        \n          {actions}\n        \n      )}\n    
\n  );\n}\n\nexport { CodeWindow, CodeWindowTitleBar };\nexport type { CodeWindowTitleBarProps };\n"
    }
  ],
  "meta": {
    "tier": "pattern",
    "client": true,
    "minViewport": null,
    "loading": false,
    "version": "1.2.0",
    "since": "1.0.0"
  },
  "docs": "## @interlace/code-window\n\nInstalled to `components/ui/patterns/code-window.tsx`.\n\n```tsx\nimport { /* … */ } from '@/components/ui/patterns/code-window';\n```\n\nProps, a11y contract, live preview and source: https://ds.interlace.tools/c/code-window\n\nRequires the `@interlace/theme` CSS baseline (installed automatically as a registry dependency)."
}