highsoft-ui 1.0.136 → 1.0.138

package/CLAUDE.md

@@ -248,6 +248,28 @@ Pill-shaped inline code display with integrated copy button and success state.
 - **`children`:** `string` — the code text to display and copy
 - **`duration`:** ms for success state (default: 2000)
 
+### CodeBlock
+Code viewer with syntax colors, a line-number gutter, diff lines and a copy button — all from plain `code`, no setup.
+```tsx
+<CodeBlock lang="ts" code={source} />
+
+// Added / removed lines — mark them with [!code ++] / [!code --]:
+<CodeBlock lang="ts" code={`const a = 1   // [!code --]
+const a = 2   // [!code ++]`} />
+
+// Bring your own highlighter (Shiki etc.) for a custom theme / SSR:
+<CodeBlock lang="ts" code={source} html={preHighlightedHtml} />
+```
+- **`code`:** raw code (required). Lines ending with `// [!code ++]` / `// [!code --]` render as added (green) / removed (red); copy returns the resulting code with markers stripped and removed lines dropped.
+- **`html`:** pre-highlighted HTML (e.g. Shiki) — overrides the built-in Prism highlighter; use for an exact theme or SSR.
+- **`lang`:** `bash`, `js`, `ts`, `json`, `python`, `html`, `css`, `text`, … — drives the header icon/badge and the highlighter grammar.
+- **`showLines`:** line-number gutter (default `true`).
+- **`syntax`:** built-in Prism highlighting (default `true`); set `false` for plain, uncolored code.
+- **`diff`:** parse `[!code ++]` / `[!code --]` markers (default `true`); set `false` to show code that literally contains those tokens.
+- **`wrap`:** soft-wrap long lines (default `true`); set `false` for horizontal scrolling with a pinned line-number gutter.
+- **`copyLabel`:** copy button label (default `'Copy code'`).
+- Colors come from `--code-block-*` design tokens (light/dark automatic). Code renders in IBM Plex Mono — load `@fontsource/ibm-plex-mono` (or it falls back to the system monospace).
+
 ### Layout
 ```tsx
 <Header />

package/dist/{Button-CTdphXmG.js → Button-Dc8NFRWQ.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { C as t } from "./esm-Co_Guu6S.js";
+import { C as t } from "./esm-CDDjSK4f.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = {

package/dist/{ButtonGroup-D5_sI3QL.js → ButtonGroup-CYmrw7gQ.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./Button-CTdphXmG.js";
+import { t } from "./Button-Dc8NFRWQ.js";
 import { useEffect as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 var a = {

package/dist/{Checkbox-Yg8sUFcu.js → Checkbox-CErz7eBz.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { S as t } from "./esm-Co_Guu6S.js";
+import { S as t } from "./esm-CDDjSK4f.js";
 import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 var d = {