Code Window

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/code-window v1.2.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/code-window
7// What changed since: https://ds.interlace.tools/c/code-window#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — CodeWindow + CodeWindowTitleBar
12 *
13 * macOS-style window chrome for wrapping editor, terminal, or code-preview
14 * content: a bordered `bg-card` box plus an optional title bar with the three
15 * traffic-light dots, a centred monospace filename, and an actions slot.
16 *
17 * It is chrome only — it renders whatever you nest inside it and has no
18 * opinion about the content.
19 *
20 * Modeled on MagicUI's `Terminal` chrome (the dots + bar layout convention)
21 * but reduced to the visual primitive — no animation, no terminal-specific
22 * line emitter. Reach for MagicUI's `Terminal` when you want the typed-prompt
23 * animation; reach for this when you want a window-shaped container.
24 *
25 * ## Anatomy
26 *
27 *   CodeWindow                       (div — data-slot="code-window")
28 *     ├─ CodeWindowTitleBar          (div — data-slot="code-window-title-bar")
29 *     │   ├─ span aria-hidden        (data-slot="code-window-traffic-lights")
30 *     │   │   └─ 3 × span size-3     (bg-window-control-close/-minimize/-zoom)
31 *     │   ├─ span                    (title — centred, font-mono text-xs)
32 *     │   └─ span                    (actions — ml-auto)
33 *     └─ children                    (the body: editor, <pre>, anything)
34 *
35 * ## No accessible name, deliberately
36 *
37 * The root is a bare `<div>`: no role, no label. That is the correct shape for
38 * this component rather than a gap in it. It claims no role, so ARIA requires
39 * it to expose no name — and an `aria-label` on a roleless `<div>` is ignored
40 * by most of the mapping specs anyway, so adding one would buy a false sense
41 * of coverage. Nothing is hidden either: the dots are `aria-hidden` because
42 * they are ornament, while the `title` slot is an ordinary `<span>` whose text
43 * is read in document order like any other text, and the body renders whatever
44 * you nest with its own semantics intact.
45 *
46 * If a particular window needs to be announced AS a region — a labelled
47 * landmark a screen-reader user can jump to — that is a call-site decision
48 * about that page's structure, so give it a role and a name there. Baking one
49// … truncated