@dogsbay/ui 0.2.0-beta.162 → 0.2.0-beta.163

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.162",
+  "version": "0.2.0-beta.163",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
@@ -22,9 +22,9 @@
     "katex": "^0.16.47",
     "maplibre-gl": "^5.24.0",
     "shiki": "^4.3.1",
-    "@dogsbay/elements": "0.2.0-beta.162",
-    "@dogsbay/icons": "0.2.0-beta.162",
-    "@dogsbay/primitives": "0.2.0-beta.162"
+    "@dogsbay/elements": "0.2.0-beta.163",
+    "@dogsbay/primitives": "0.2.0-beta.163",
+    "@dogsbay/icons": "0.2.0-beta.163"
   },
   "files": [
     "src",

package/src/code-block/CodeBlock.astro

@@ -1,5 +1,6 @@
 ---
 import { Code } from "astro/components";
+import { ansiColoursOnly, stripAnsi } from "./ansi";
 import { tv } from "tailwind-variants";
 
 const codeBlockWrapper = tv({
@@ -55,6 +56,16 @@ const LANG_ALIASES: Record<string, string> = {
 };
 const shikiLang = LANG_ALIASES[lang.toLowerCase()] ?? lang.toLowerCase();
 
+// Tags that mean "no language": no label, as render-html (its PLAIN set, @dogsbay/render-html/lines).
+// Only `plaintext` was hidden, so `txt` and `output` blocks showed "txt" and "output".
+const PLAIN = new Set(["", "text", "txt", "plain", "plaintext", "none", "output", "log", "code", "codeblock"]);
+const plain = PLAIN.has(lang.toLowerCase().trim());
+// An `ansi` block shows its colours, not its escape codes: copy the text as shown
+const isAnsi = shikiLang === "ansi";
+const copyText = isAnsi ? stripAnsi(code) : code;
+// Shiki draws colours only; any other sequence would garble the text (./ansi.ts)
+const shownCode = isAnsi ? ansiColoursOnly(code) : code;
+
 // Show header bar based on showTitle prop:
 // - true: show when there's a title or a declared language (default, original behavior)
 // - false: never show
@@ -66,7 +77,7 @@ const showHeader =
   hasCaption ? true
   : showTitle === false ? false
   : showTitle === "auto" ? !!title
-  : !!title || lang !== "plaintext";
+  : !!title || !plain;
 // When no header, copy button floats inside the code body
 const floatingCopy = copy && !showHeader;
 ---
@@ -90,12 +101,12 @@ const floatingCopy = copy && !showHeader;
         <span class="select-none">{lang}</span>
       )}
       <span class="flex shrink-0 items-center gap-2">
-      {(hasCaption || title) && lang !== "plaintext" && <span class="select-none" data-part="language">{lang}</span>}
+      {(hasCaption || title) && !plain && <span class="select-none" data-part="language">{lang}</span>}
       {copy && (
         <button
           class={codeBlockCopy()}
           data-part="copy"
-          data-copy-text={code}
+          data-copy-text={copyText}
           type="button"
           aria-label="Copy code"
         >
@@ -137,12 +148,12 @@ const floatingCopy = copy && !showHeader;
     </Header>
   )}
   <div class="relative overflow-x-auto [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:px-4 [&_pre]:py-3">
-    <Code code={code} lang={shikiLang} themes={{ light: "github-light-default", dark: theme }} defaultColor={false} />
+    <Code code={shownCode} lang={shikiLang} themes={{ light: "github-light-default", dark: theme }} defaultColor={false} />
     {floatingCopy && (
       <button
         class:list={[codeBlockCopy(), "absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity"]}
         data-part="copy"
-        data-copy-text={code}
+        data-copy-text={copyText}
         type="button"
         aria-label="Copy code"
       >

package/src/code-block/ansi.ts

@@ -0,0 +1,31 @@
+/**
+ * A terminal's escape sequences in an `ansi` code block (dogsbay-ssg, 2026-11-04). Shared with
+ * @dogsbay/render-html (copied by its sync-sources as `code-ansi.ts`), so both pipelines show and
+ * copy the same text.
+ *
+ * One pattern, linear (each alternative is a run of one character class with a fixed end):
+ *  - CSI: `ESC [` or the 8-bit `\x9b`, parameters, intermediates, a final byte — or cut off at the
+ *    end of the text;
+ *  - OSC (titles, `ESC ] 8` hyperlinks): to BEL or `ESC \`, or the end of the text;
+ *  - `ESC` + intermediates + a final byte (`ESC ( B`, which `tput sgr0` writes), and any other
+ *    two-byte escape.
+ */
+const SEQUENCE = /(?:\x1b\[|\x9b)[0-?]*[ -/]*(?:[@-~]|$)|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\|$)|\x1b[ -/]*[0-~]?/g;
+
+/** Is this sequence a colour or style (SGR, `ESC [ … m`), the only kind a highlighter draws? */
+const SGR = /^(?:\x1b\[|\x9b)[0-9;:]*m$/;
+
+/** The text as a terminal shows it, every escape sequence left out (plain rendering, copy). */
+export function stripAnsi(s: string): string {
+  return s.replace(SEQUENCE, "");
+}
+
+/**
+ * Only the colour and style sequences kept, for Shiki's `ansi`: it reads `ESC [` as running to the
+ * next `m`, so `ESC [2K` (erase line) ate the next letters (`Compiling` → `piling`), and it shows
+ * an OSC hyperlink's bytes as text. What is left is what it draws correctly. 8-bit CSI is written
+ * in its 7-bit form.
+ */
+export function ansiColoursOnly(s: string): string {
+  return s.replace(SEQUENCE, (m) => (SGR.test(m) ? m.replace(/^\x9b/, "\x1b[") : ""));
+}

package/src/code-rich/CodeRich.astro

@@ -1,6 +1,7 @@
 ---
 import "./code-rich.css";
 import { stripMarkersForCopy, stripUnprocessableMarkers } from "./markers";
+import { ansiColoursOnly, stripAnsi } from "../code-block/ansi";
 import { codeToHtml, bundledLanguages, type BundledLanguage, type BundledTheme } from "shiki";
 import {
   transformerNotationDiff,
@@ -246,19 +247,22 @@ if (wordHighlights) metaStr += `/${wordHighlights}/ `;
 // Copy text: explicit override (diff blocks pass the post-change code)
 // or the block's own code — either way every annotation form is
 // stripped (see ./markers.ts).
-const copyText = stripMarkersForCopy(copyTextOverride ?? code);
+const copyText = stripMarkersForCopy(copyTextOverride ?? (lang.toLowerCase() === "ansi" ? stripAnsi(code) : code));
 
 // Unknown languages (package-install, mdx-ish doc tokens) fall back
 // to plaintext instead of throwing — same behavior as CodeBlock's
 // <Code>. The header still shows the declared language label.
 const requestedLang = lang.toLowerCase();
+// `ansi` is no grammar: Shiki colours its escape codes itself (as CodeBlock's <Code>), and it has
+// no comments for [!code] markers, so they are stripped as in plain text.
+const isAnsi = requestedLang === "ansi";
 const isPlainGrammar =
-  !(requestedLang in bundledLanguages) || ["plaintext", "text", "txt", "ansi"].includes(requestedLang);
-const shikiLang = isPlainGrammar ? "plaintext" : requestedLang;
+  !isAnsi && (!(requestedLang in bundledLanguages) || ["plaintext", "text", "txt"].includes(requestedLang));
+const shikiLang = isAnsi ? "ansi" : isPlainGrammar ? "plaintext" : requestedLang;
 
 // Markers Shiki cannot process would render as literal text — strip
 // exactly those, leave the rest for the notation transformers.
-const highlightCode = stripUnprocessableMarkers(code, isPlainGrammar);
+const highlightCode = stripUnprocessableMarkers(isAnsi ? ansiColoursOnly(code) : code, isPlainGrammar || isAnsi);
 
 const html = await codeToHtml(highlightCode, {
   lang: shikiLang as BundledLanguage,
@@ -275,7 +279,10 @@ const html = await codeToHtml(highlightCode, {
 const hasCaption = Astro.slots.has("caption");
 const Wrapper = hasCaption ? "figure" : "div";
 const Header = hasCaption ? "figcaption" : "div";
-const hasLabel = hasCaption || !!title || (lang !== "plaintext");
+// Tags that mean "no language" show no label, as CodeBlock and render-html
+const PLAIN = new Set(["", "text", "txt", "plain", "plaintext", "none", "output", "log", "code", "codeblock"]);
+const plain = PLAIN.has(requestedLang.trim());
+const hasLabel = hasCaption || !!title || !plain;
 const showHeader = hasLabel;
 // When no header, copy button floats inside the code body
 const floatingCopy = copy && !showHeader;
@@ -301,7 +308,7 @@ const floatingCopy = copy && !showHeader;
         <span class="select-none">{lang}</span>
       )}
       <span class="flex shrink-0 items-center gap-2">
-      {(hasCaption || title) && lang !== "plaintext" && <span class="select-none" data-part="language">{lang}</span>}
+      {(hasCaption || title) && !plain && <span class="select-none" data-part="language">{lang}</span>}
       {copy && (
         <button
           class={codeRichCopy()}