Code Block

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/code-block v1.1.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/code-block
7// What changed since: https://ds.interlace.tools/c/code-block#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — CodeBlock
12 *
13 * Fenced code block with a title bar (title left, language tag + copy button
14 * right). The copy action shells out to `navigator.clipboard.writeText` and
15 * flips an inline "Copied!" affordance for 1.5s — the only piece of state
16 * this primitive owns. Everything else is structural: a `<figure>` wrapping
17 * a `<pre><code class="language-{lang}">`, ready for any downstream syntax
18 * highlighter (Shiki, Prism, hand-rolled — we don't care).
19 *
20 * The header is omitted entirely when neither `title` nor `language` are
21 * provided AND copy is disabled, so the primitive degrades to a clean
22 * `<figure><pre><code/></pre></figure>` for inline snippets.
23 *
24 * ## Anatomy
25 *
26 *   CodeBlock                          (figure — data-min-viewport=320)
27 *     ├─ figcaption                    (header bar; rendered only when needed)
28 *     │   ├─ {title}                   (left)
29 *     │   ├─ {language tag}            (right)
30 *     │   └─ <button> "Copy" / "Copied!" (right; client-only)
31 *     └─ <pre>
32 *         └─ <code class="language-{lang}">{children}</code>
33 *
34 * ## MIN_VIEWPORT — 320
35 *
36 * Code blocks are the load-bearing surface of a docs site and MUST work on
37 * a 320 CSS-px phone. We never wrap content (would shred indentation) — we
38 * `overflow-x-auto` instead, so a narrow viewport gets a horizontally
39 * scrollable block rather than mangled syntax.
40 *
41 * | Rule | Concept                          | Where in this file                                          |
42 * | ---- | -------------------------------- | ----------------------------------------------------------- |
43 * | R4   | Extends native el                | `React.ComponentProps<'figure'> & CodeBlockProps`           |
44 * | R6   | data-slot per part               | code-block / code-block-header / code-block-title / code-block-language / code-block-copy / code-block-pre / code-block-code |
45 * | R7   | className merged + ...rest       | `cn(BASE, className)` + `{...props}`                        |
46 * | R8   | No isXxx; props are scalars      | `title?` / `language?` only — no boolean variants           |
47// … truncated