┌─ ASTRO ───────────────────────────────────────────────────────────────────[ COPY ]─┐
│ ---                                                                                │
│ // Hover/focus tooltip. The text is known at build time, so the box is             │
│ // framed exactly - no runtime measurement.                                        │
│ import { box, len, wrap } from "../../lib/ascii";                                  │
│ import { TOOLTIP_MAX_W, type Props } from "./Tooltip";                             │
│ import "./Tooltip.scss";                                                           │
│                                                                                    │
│ const { text, label = "?" } = Astro.props as Props;                                │
│ const inner = Math.min(TOOLTIP_MAX_W - 4, len(text));                              │
│ const lines = wrap(text, inner).split("\n");                                       │
│ const width = Math.max(...lines.map(len)) + 4;                                     │
│ const frame = box({ width, lines: lines.map((l) => ` ${l}`), align: "end" });      │
│ const id = `tip-${text.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 32)}`;   │
│ ---                                                                                │
│ <span class="tooltip"><button type="button" class="tooltip-trigger" aria-described │
│ by={id}>[{label}]</button><span class="tooltip-pop" role="tooltip" id={id}><pre cl │
│ ass="ascii tooltip-frame" aria-hidden="true">{frame}</pre><span class="sr-only">{t │
│ ext}</span></span></span>                                                          │
└────────────────────────────────────────────────────────────────────────────────────┘

┌─ ASTRO ─────────────────────────────[ COPY ]─┐
│ ---                                          │
│ // Hover/focus tooltip. The text is known at │
│  build time, so the box is                   │
│ // framed exactly - no runtime measurement.  │
│ import { box, len, wrap } from "../../lib/as │
│ cii";                                        │
│ import { TOOLTIP_MAX_W, type Props } from ". │
│ /Tooltip";                                   │
│ import "./Tooltip.scss";                     │
│                                              │
│ const { text, label = "?" } = Astro.props as │
│  Props;                                      │
│ const inner = Math.min(TOOLTIP_MAX_W - 4, le │
│ n(text));                                    │
│ const lines = wrap(text, inner).split("\n"); │
│ const width = Math.max(...lines.map(len)) +  │
│ 4;                                           │
│ const frame = box({ width, lines: lines.map( │
│ (l) => ` ${l}`), align: "end" });            │
│ const id = `tip-${text.toLowerCase().replace │
│ (/[^a-z0-9]+/g, "-").slice(0, 32)}`;         │
│ ---                                          │
│ <span class="tooltip"><button type="button"  │
│ class="tooltip-trigger" aria-describedby={id │
│ }>[{label}]</button><span class="tooltip-pop │
│ " role="tooltip" id={id}><pre class="ascii t │
│ ooltip-frame" aria-hidden="true">{frame}</pr │
│ e><span class="sr-only">{text}</span></span> │
│ </span>                                      │
└──────────────────────────────────────────────┘