@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/Code/Code.js

@@ -0,0 +1,25 @@
+'use client';
+import Code_module_default from "./Code.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Code/Code.tsx
+var TONE_CLASS = {
+	default: Code_module_default.toneDefault,
+	muted: Code_module_default.toneMuted,
+	accent: Code_module_default.toneAccent,
+	danger: Code_module_default.toneDanger
+};
+/**
+* Inline `<code>` primitive: monospace text with a subtle chip background.
+* @see docs/components/Code.md
+*/
+var Code = forwardRef(function Code({ tone = "default", className, children, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("code", {
+		ref,
+		className: clsx(Code_module_default.code, TONE_CLASS[tone], className),
+		...rest,
+		children
+	});
+});
+export { Code };

package/dist/components/Code/Code.module.js

@@ -0,0 +1,15 @@
+import "./Code.css";
+// src/components/Code/Code.module.scss
+var code = "Code__code__zqXAs";
+var toneDefault = "Code__toneDefault__Tnyb2";
+var toneMuted = "Code__toneMuted__ETLJ_";
+var toneAccent = "Code__toneAccent__j56Tf";
+var toneDanger = "Code__toneDanger__hTIW0";
+var Code_module_default = {
+	code,
+	toneDefault,
+	toneMuted,
+	toneAccent,
+	toneDanger
+};
+export { code, Code_module_default as default, toneAccent, toneDanger, toneDefault, toneMuted };

package/dist/components/Code/index.d.ts

@@ -0,0 +1,2 @@
+export { Code } from './Code.js';
+export type { CodeProps, CodeTone } from './Code.js';

package/dist/components/CodeBlock/CodeBlock.css

@@ -0,0 +1,153 @@
+:root {
+  --code-block-bg: var(--color-bg-subtle);
+  --code-block-border-color: var(--color-border);
+  --code-block-radius: var(--radius-md);
+  --code-block-header-bg: var(--color-bg);
+  --code-block-fg: var(--color-fg);
+  --code-block-font-size: var(--font-size-code);
+  --code-block-line-height: var(--line-height-normal);
+  --code-block-padding-y: var(--space-3);
+  --code-block-padding-x: var(--space-4);
+  --code-block-line-highlight-bg: var(--color-accent-bg-subtle);
+  --code-block-line-highlight-bar: var(--color-accent);
+  --code-block-syntax-keyword: var(--color-palette-violet-fg);
+  --code-block-syntax-string: var(--color-palette-green-fg);
+  --code-block-syntax-number: var(--color-warning-strong);
+  --code-block-syntax-comment: var(--color-fg-muted);
+  --code-block-syntax-function: var(--color-palette-blue-fg);
+  --code-block-syntax-property: var(--color-palette-teal-fg);
+  --code-block-syntax-punctuation: var(--color-fg-muted);
+  --code-block-syntax-plain: var(--code-block-fg);
+}
+
+.CodeBlock__root__jANJ4 {
+  border: var(--border-width) solid var(--code-block-border-color);
+  border-radius: var(--code-block-radius);
+  background: var(--code-block-bg);
+  color: var(--code-block-fg);
+}
+
+.CodeBlock__header__Wou0H {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  min-height: var(--size-md);
+  padding-inline: var(--code-block-padding-x) var(--space-2);
+  border-bottom: var(--border-width) solid var(--code-block-border-color);
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+  background: var(--code-block-header-bg);
+  --tabs-border-color: transparent;
+}
+
+.CodeBlock__title__Vomkv {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-muted);
+}
+
+.CodeBlock__actions__gNVPZ {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-1);
+}
+
+.CodeBlock__body__sM-IU {
+  overflow-x: auto;
+  padding-block: var(--code-block-padding-y);
+  font-family: var(--font-family-mono);
+  font-size: var(--code-block-font-size);
+  line-height: var(--code-block-line-height);
+  white-space: pre;
+  tab-size: 2;
+}
+.CodeBlock__body__sM-IU:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: calc(var(--ring-width) * -1);
+}
+
+.CodeBlock__wrap__fc8TD {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.CodeBlock__maxXs__MTZPI {
+  max-height: var(--measure-xs);
+  overflow-y: auto;
+}
+
+.CodeBlock__maxSm__IyhjB {
+  max-height: var(--measure-sm);
+  overflow-y: auto;
+}
+
+.CodeBlock__maxMd__RXdf6 {
+  max-height: var(--measure-md);
+  overflow-y: auto;
+}
+
+.CodeBlock__maxLg__96Nwq {
+  max-height: var(--measure-lg);
+  overflow-y: auto;
+}
+
+.CodeBlock__maxXl__Y7twV {
+  max-height: var(--measure-xl);
+  overflow-y: auto;
+}
+
+.CodeBlock__lines__nOHy9 {
+  display: inline-block;
+  min-width: 100%;
+  font: inherit;
+}
+
+.CodeBlock__line__CDJN0 {
+  display: inline-block;
+  min-width: 100%;
+  min-height: 1lh;
+  vertical-align: top;
+  padding-inline: var(--code-block-padding-x);
+  border-inline-start: var(--border-width-strong) solid transparent;
+}
+.CodeBlock__line__CDJN0[data-highlighted] {
+  border-inline-start-color: var(--code-block-line-highlight-bar);
+  background: var(--code-block-line-highlight-bg);
+}
+
+.CodeBlock__keyword__dEbi3 {
+  color: var(--code-block-syntax-keyword);
+}
+
+.CodeBlock__string__JYw_J {
+  color: var(--code-block-syntax-string);
+}
+
+.CodeBlock__number__J-IbK {
+  color: var(--code-block-syntax-number);
+}
+
+.CodeBlock__comment__KGIIU {
+  color: var(--code-block-syntax-comment);
+  font-style: italic;
+}
+
+.CodeBlock__function__H1ahQ {
+  color: var(--code-block-syntax-function);
+}
+
+.CodeBlock__property__jui72 {
+  color: var(--code-block-syntax-property);
+}
+
+.CodeBlock__punctuation__JnNJW {
+  color: var(--code-block-syntax-punctuation);
+}
+
+.CodeBlock__plain__O8O4i {
+  color: var(--code-block-syntax-plain);
+}

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,64 @@
+import { type HTMLAttributes } from 'react';
+import { type CodeBlockLanguage } from './highlight.js';
+export type { CodeBlockLanguage } from './highlight.js';
+/** One tab of a multi-sample block (e.g. the same request in cURL and Python). */
+export interface CodeBlockSample {
+    /** Stable id, unique within `samples`. Shared ids are what `syncKey` keeps in step. */
+    id: string;
+    /** Visible tab label (e.g. `'cURL'`, `'Python'`). */
+    label: string;
+    /** The source. Copied verbatim; one trailing newline is not rendered. */
+    code: string;
+    /** Grammar for highlighting. Unknown values render as plain text. */
+    language?: CodeBlockLanguage | (string & {});
+}
+/** 1-based line numbers and inclusive `[from, to]` ranges, e.g. `[2, [5, 7]]`. */
+export type CodeBlockHighlightLines = readonly (number | readonly [number, number])[];
+/** Body max-height step; maps to `var(--measure-<step>)`. */
+export type CodeBlockMaxHeight = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> {
+    /** Single-sample mode: the source. Ignored when `samples` is set. */
+    code?: string;
+    /**
+     * Single-sample mode: grammar for highlighting — `'json'`, `'bash'`,
+     * `'javascript'`, `'typescript'`, `'python'`, `'go'`, `'kotlin'`, `'java'`,
+     * `'csharp'` or `'rust'` (aliases `sh`, `shell`, `js`, `ts`, `py`, `golang`,
+     * `kt`, `kts`, `cs`, `c#`, `rs`). Anything else renders as plain text.
+     */
+    language?: CodeBlockLanguage | (string & {});
+    /**
+     * Header label in single-sample mode. Defaults to a one-item `samples`
+     * entry's `label`, else the language name (`JSON`, `Bash`…), else "Plain
+     * text". Also names the body (single-sample) or the sample tabs (multi-sample).
+     */
+    title?: string;
+    /** Multi-sample mode: 2+ samples render as tabs. Wins over `code`/`language`. */
+    samples?: readonly CodeBlockSample[];
+    /** Controlled active sample id. Wins over `syncKey` and the user's own pick. */
+    activeSampleId?: string;
+    /** Initial sample id when uncontrolled and nothing is synced. Defaults to the first sample. */
+    defaultSampleId?: string;
+    /** Called with the new id when the user picks a tab in THIS block (not when a synced block changes it). */
+    onSampleChange?: (id: string) => void;
+    /**
+     * Blocks sharing a `syncKey` switch together: picking `py` in one selects
+     * `py` in every block with the same key that has a `py` sample. In-memory,
+     * per page load; for uncontrolled blocks (controlled blocks sharing one state
+     * don't need it).
+     */
+    syncKey?: string;
+    /** Lines to emphasise (visual only — explain the emphasis in prose). */
+    highlightLines?: CodeBlockHighlightLines;
+    /**
+     * Caps the body height; the body scrolls inside it (it is always a focusable, named region).
+     * `xs` 200px · `sm` 320px · `md` 448px · `lg` 640px · `xl` 800px. Default: no cap.
+     */
+    maxHeight?: CodeBlockMaxHeight;
+    /** Initial state of the wrap-lines toggle. Default `false` (long lines scroll horizontally). */
+    defaultWrap?: boolean;
+}
+/**
+ * Syntax-highlighted code sample with copy, wrap toggle and optional language tabs.
+ * @see docs/components/CodeBlock.md
+ */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,147 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { Button } from "../Button/Button.js";
+import { LiveRegion } from "../LiveRegion/LiveRegion.js";
+import { Tabs } from "../Tabs/Tabs.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { LANGUAGE_LABELS, highlightedLineSet, tokenizeLines } from "./highlight.js";
+import { resolveActiveSample, setSynced, useSyncedSample } from "./sampleSync.js";
+import CodeBlock_module_default from "./CodeBlock.module.js";
+import { Fragment, forwardRef, useEffect, useId, useMemo, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy, WrapText, X } from "lucide-react";
+// src/components/CodeBlock/CodeBlock.tsx
+var MAX_HEIGHT_CLASS = {
+	xs: CodeBlock_module_default.maxXs,
+	sm: CodeBlock_module_default.maxSm,
+	md: CodeBlock_module_default.maxMd,
+	lg: CodeBlock_module_default.maxLg,
+	xl: CodeBlock_module_default.maxXl
+};
+var COPIED_MS = 1500;
+/**
+* Syntax-highlighted code sample with copy, wrap toggle and optional language tabs.
+* @see docs/components/CodeBlock.md
+*/
+var CodeBlock = forwardRef(function CodeBlock({ code = "", language, title, samples, activeSampleId, defaultSampleId, onSampleChange, syncKey, highlightLines, maxHeight, defaultWrap = false, className, ...props }, ref) {
+	const t = useTranslation();
+	const prefix = useId().replace(/[^a-zA-Z0-9_-]/g, "_");
+	const [localPick, setLocalPick] = useState();
+	const [wrap, setWrap] = useState(defaultWrap);
+	const [copyStatus, setCopyStatus] = useState("idle");
+	const [copyCount, setCopyCount] = useState(0);
+	const synced = useSyncedSample(syncKey);
+	const list = samples?.length ? samples : [{
+		id: "code",
+		label: "",
+		code,
+		language
+	}];
+	const multi = list.length > 1;
+	const activeId = resolveActiveSample(list.map((s) => s.id), {
+		controlled: activeSampleId,
+		synced,
+		own: localPick,
+		fallback: defaultSampleId
+	});
+	const active = list.find((s) => s.id === activeId) ?? list[0];
+	const lines = useMemo(() => tokenizeLines(active.code, active.language), [active.code, active.language]);
+	const highlighted = highlightedLineSet(highlightLines, lines.length);
+	const lang = active.language;
+	const label = title || samples?.length === 1 && samples[0].label || (lang && Object.hasOwn(LANGUAGE_LABELS, lang) ? LANGUAGE_LABELS[lang] : t("codeBlock.plainText"));
+	useEffect(() => {
+		if (copyStatus === "idle") return;
+		const id = setTimeout(() => setCopyStatus("idle"), COPIED_MS);
+		return () => clearTimeout(id);
+	}, [copyStatus, copyCount]);
+	const copy = async () => {
+		const text = active.code;
+		let ok = true;
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch {
+			ok = false;
+		}
+		setCopyStatus(ok ? "copied" : "failed");
+		setCopyCount((n) => n + 1);
+	};
+	const pick = (id) => {
+		setLocalPick(id);
+		if (syncKey !== void 0) setSynced(syncKey, id);
+		onSampleChange?.(id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref,
+		className: clsx(CodeBlock_module_default.root, className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: CodeBlock_module_default.header,
+				children: [multi ? /* @__PURE__ */ jsx(Tabs, {
+					items: list.map(({ id, label: tabLabel }) => ({
+						id,
+						label: tabLabel
+					})),
+					activeId: active.id,
+					onChange: pick,
+					panelIdPrefix: prefix,
+					"aria-label": title
+				}) : /* @__PURE__ */ jsx("span", {
+					id: `${prefix}-label`,
+					className: CodeBlock_module_default.title,
+					children: label
+				}), /* @__PURE__ */ jsxs("div", {
+					className: CodeBlock_module_default.actions,
+					children: [/* @__PURE__ */ jsx(Tooltip, {
+						content: t("codeBlock.wrap"),
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							"aria-label": t("codeBlock.wrap"),
+							"aria-pressed": wrap,
+							selected: wrap,
+							onClick: () => setWrap((w) => !w),
+							children: /* @__PURE__ */ jsx(WrapText, { "aria-hidden": "true" })
+						})
+					}), /* @__PURE__ */ jsx(Tooltip, {
+						content: copyStatus === "failed" ? t("codeBlock.copyFailed") : t("codeBlock.copy"),
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							"aria-label": t("codeBlock.copy"),
+							onClick: copy,
+							children: copyStatus === "copied" ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : copyStatus === "failed" ? /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" })
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(LiveRegion, {
+				announceKey: copyCount,
+				children: copyStatus === "copied" ? t("codeBlock.copied") : copyStatus === "failed" ? t("codeBlock.copyFailed") : null
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: clsx(CodeBlock_module_default.body, wrap && CodeBlock_module_default.wrap, maxHeight && MAX_HEIGHT_CLASS[maxHeight]),
+				role: multi ? "tabpanel" : "group",
+				id: multi ? `${prefix}-${active.id}-panel` : void 0,
+				"aria-labelledby": multi ? `${prefix}-${active.id}-tab` : `${prefix}-label`,
+				tabIndex: 0,
+				children: /* @__PURE__ */ jsx("code", {
+					className: CodeBlock_module_default.lines,
+					children: lines.map((tokens, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && "\n", /* @__PURE__ */ jsx("span", {
+						"data-line": "",
+						"data-highlighted": highlighted.has(i + 1) ? "" : void 0,
+						className: CodeBlock_module_default.line,
+						children: tokens.map((token, j) => /* @__PURE__ */ jsx("span", {
+							className: CodeBlock_module_default[token.key],
+							children: token.content
+						}, j))
+					})] }, i))
+				})
+			})
+		]
+	});
+});
+export { CodeBlock };

package/dist/components/CodeBlock/CodeBlock.module.js

@@ -0,0 +1,46 @@
+import "./CodeBlock.css";
+// src/components/CodeBlock/CodeBlock.module.scss
+var root = "CodeBlock__root__jANJ4";
+var header = "CodeBlock__header__Wou0H";
+var title = "CodeBlock__title__Vomkv";
+var actions = "CodeBlock__actions__gNVPZ";
+var body = "CodeBlock__body__sM-IU";
+var wrap = "CodeBlock__wrap__fc8TD";
+var maxXs = "CodeBlock__maxXs__MTZPI";
+var maxSm = "CodeBlock__maxSm__IyhjB";
+var maxMd = "CodeBlock__maxMd__RXdf6";
+var maxLg = "CodeBlock__maxLg__96Nwq";
+var maxXl = "CodeBlock__maxXl__Y7twV";
+var lines = "CodeBlock__lines__nOHy9";
+var line = "CodeBlock__line__CDJN0";
+var keyword = "CodeBlock__keyword__dEbi3";
+var string = "CodeBlock__string__JYw_J";
+var number = "CodeBlock__number__J-IbK";
+var comment = "CodeBlock__comment__KGIIU";
+var property = "CodeBlock__property__jui72";
+var punctuation = "CodeBlock__punctuation__JnNJW";
+var plain = "CodeBlock__plain__O8O4i";
+var CodeBlock_module_default = {
+	root,
+	header,
+	title,
+	actions,
+	body,
+	wrap,
+	maxXs,
+	maxSm,
+	maxMd,
+	maxLg,
+	maxXl,
+	lines,
+	line,
+	keyword,
+	string,
+	number,
+	comment,
+	"function": "CodeBlock__function__H1ahQ",
+	property,
+	punctuation,
+	plain
+};
+export { actions, body, comment, CodeBlock_module_default as default, header, keyword, line, lines, maxLg, maxMd, maxSm, maxXl, maxXs, number, plain, property, punctuation, root, string, title, wrap };

package/dist/components/CodeBlock/highlight.d.ts

@@ -0,0 +1,11 @@
+export type CodeBlockLanguage = 'json' | 'bash' | 'javascript' | 'typescript' | 'python' | 'go' | 'kotlin' | 'java' | 'csharp' | 'rust';
+export type SyntaxKey = 'keyword' | 'string' | 'number' | 'comment' | 'function' | 'property' | 'punctuation' | 'plain';
+export interface CodeToken {
+    content: string;
+    key: SyntaxKey;
+}
+export declare const LANGUAGE_LABELS: Record<CodeBlockLanguage, string>;
+/** One array of merged tokens per rendered line. Unknown languages render as plain text. */
+export declare function tokenizeLines(code: string, language?: string): CodeToken[][];
+/** Expands `[a, b]` ranges and single numbers into a 1-based set clipped to 1..lineCount. */
+export declare function highlightedLineSet(spec: readonly (number | readonly [number, number])[] | undefined, lineCount: number): ReadonlySet<number>;

package/dist/components/CodeBlock/highlight.js

@@ -0,0 +1,159 @@
+import { Prism, normalizeTokens } from "prism-react-renderer";
+// src/components/CodeBlock/highlight.ts
+var LANGUAGE_LABELS = {
+	json: "JSON",
+	bash: "Bash",
+	javascript: "JavaScript",
+	typescript: "TypeScript",
+	python: "Python",
+	go: "Go",
+	kotlin: "Kotlin",
+	java: "Java",
+	csharp: "C#",
+	rust: "Rust"
+};
+if (!Prism.languages.bash) {
+	const variable = /\$(?:\w+|\{[^}]*\})/;
+	Prism.languages.bash = {
+		comment: {
+			pattern: /(^|\s)#.*/,
+			lookbehind: true
+		},
+		string: [{
+			pattern: /"(?:\\[\s\S]|[^"\\])*"/,
+			greedy: true,
+			inside: { variable }
+		}, {
+			pattern: /'[^']*'/,
+			greedy: true
+		}],
+		variable,
+		function: {
+			pattern: /(^|[;|&]\s*)[\w.][\w.-]*/m,
+			lookbehind: true
+		},
+		parameter: /--?[\w-]+/,
+		operator: /&&|\|\||[|;<>]/,
+		punctuation: /\\/
+	};
+}
+var pascalCase = /\b[A-Z]\w*[a-z]\w*\b/;
+if (!Prism.languages.java) {
+	Prism.languages.java = Prism.languages.extend("clike", {
+		keyword: /\b(?:abstract|assert|break|case|catch|class|const|continue|default|do|else|enum|exports|extends|final|finally|for|goto|if|implements|import|instanceof|interface|module|native|new|non-sealed|null|package|permits|private|protected|public|record|requires|return|sealed|static|strictfp|super|switch|synchronized|this|throw|throws|transient|try|var|void|volatile|while|yield|boolean|byte|char|double|float|int|long|short)\b/,
+		string: {
+			pattern: /"""[\s\S]*?"""|"(?:\\.|[^"\\\r\n])*"|'(?:\\.|[^'\\\r\n]){1,6}'/,
+			greedy: true
+		},
+		number: /\b0x[\da-f_]+l?\b|(?:\b\d[\d_]*\.?[\d_]*|\B\.\d[\d_]*)(?:e[+-]?\d[\d_]*)?[dfl]?/i,
+		"class-name": pascalCase
+	});
+	Prism.languages.insertBefore("java", "class-name", { annotation: {
+		pattern: /@\w+/,
+		alias: "builtin"
+	} });
+}
+if (!Prism.languages.csharp) {
+	Prism.languages.csharp = Prism.languages.extend("clike", {
+		keyword: /\b(?:abstract|as|async|await|base|bool|break|byte|case|catch|char|checked|class|const|continue|decimal|default|delegate|do|double|dynamic|else|enum|event|explicit|extern|finally|fixed|float|for|foreach|get|goto|if|implicit|in|init|int|interface|internal|is|lock|long|namespace|nameof|new|null|object|operator|out|override|params|partial|private|protected|public|readonly|record|ref|required|return|sbyte|sealed|set|short|sizeof|stackalloc|static|string|struct|switch|this|throw|try|typeof|uint|ulong|unchecked|unsafe|ushort|using|var|virtual|void|volatile|when|where|while|with|yield)\b/,
+		string: {
+			pattern: /\$*"""[\s\S]*?"""|(?:\$@|@\$|@)"(?:""|[^"])*"|\$?"(?:\\.|[^"\\\r\n])*"|'(?:\\.|[^'\\\r\n]){1,6}'/,
+			greedy: true
+		},
+		number: /\b0x[\da-f_]+\b|(?:\b\d[\d_]*\.?[\d_]*|\B\.\d[\d_]*)(?:e[+-]?\d[\d_]*)?(?:ul|lu|[dfmlu])?/i,
+		"class-name": pascalCase
+	});
+	Prism.languages.insertBefore("csharp", "string", { attribute: {
+		pattern: /^(\s*)\[(?:\w+:\s*)?[A-Z](?:"(?:\\.|[^"\\\r\n])*"|\[[^\]\r\n]*\]|[^\]"\r\n])*\](?=[ \t]*(?:$|[\w[]|\/[/*]))/m,
+		lookbehind: true,
+		greedy: true,
+		alias: "builtin"
+	} });
+}
+var ALIASES = {
+	shell: "bash",
+	sh: "bash",
+	js: "javascript",
+	ts: "typescript",
+	py: "python",
+	golang: "go",
+	kt: "kotlin",
+	kts: "kotlin",
+	cs: "csharp",
+	"c#": "csharp",
+	rs: "rust"
+};
+var KEY_BY_TYPE = {};
+for (const [key, types] of Object.entries({
+	keyword: [
+		"keyword",
+		"builtin",
+		"important",
+		"atrule",
+		"boolean"
+	],
+	string: [
+		"string",
+		"char",
+		"attr-value",
+		"url",
+		"regex",
+		"template-string"
+	],
+	number: ["number", "constant"],
+	comment: [
+		"comment",
+		"prolog",
+		"doctype",
+		"cdata"
+	],
+	function: ["function", "class-name"],
+	property: [
+		"property",
+		"attr-name",
+		"tag",
+		"variable",
+		"parameter",
+		"selector"
+	],
+	punctuation: ["punctuation", "operator"]
+})) for (const type of types) KEY_BY_TYPE[type] = key;
+var keyOf = (types) => {
+	for (const type of types) if (KEY_BY_TYPE[type]) return KEY_BY_TYPE[type];
+	return "plain";
+};
+/** One array of merged tokens per rendered line. Unknown languages render as plain text. */
+function tokenizeLines(code, language) {
+	const src = code.replace(/\r\n?/g, "\n").replace(/\n$/, "");
+	const name = language && (Object.hasOwn(ALIASES, language) ? ALIASES[language] : language);
+	const grammar = name && Object.hasOwn(LANGUAGE_LABELS, name) && Prism.languages[name];
+	if (!grammar) return src.split("\n").map((l) => [{
+		content: l,
+		key: "plain"
+	}]);
+	return normalizeTokens(Prism.tokenize(src, grammar)).map((line) => {
+		const out = [];
+		for (const { types, content, empty } of line) {
+			if (empty) continue;
+			const key = keyOf(types);
+			const last = out[out.length - 1];
+			if (last?.key === key) last.content += content;
+			else out.push({
+				content,
+				key
+			});
+		}
+		return out;
+	});
+}
+/** Expands `[a, b]` ranges and single numbers into a 1-based set clipped to 1..lineCount. */
+function highlightedLineSet(spec, lineCount) {
+	const set = /* @__PURE__ */ new Set();
+	for (const item of spec ?? []) {
+		const [a, b] = typeof item === "number" ? [item, item] : item;
+		if (!Number.isInteger(a) || !Number.isInteger(b)) continue;
+		for (let n = Math.max(1, Math.min(a, b)); n <= Math.min(lineCount, Math.max(a, b)); n++) set.add(n);
+	}
+	return set;
+}
+export { LANGUAGE_LABELS, highlightedLineSet, tokenizeLines };

package/dist/components/CodeBlock/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from './CodeBlock.js';
+export type { CodeBlockProps, CodeBlockSample, CodeBlockHighlightLines, CodeBlockMaxHeight, CodeBlockLanguage, } from './CodeBlock.js';

package/dist/components/CodeBlock/sampleSync.d.ts

@@ -0,0 +1,10 @@
+export declare function getSynced(key: string): string | undefined;
+export declare function setSynced(key: string, sampleId: string): void;
+export declare function subscribeSynced(key: string, onChange: () => void): () => void;
+export declare function useSyncedSample(key: string | undefined): string | undefined;
+export declare function resolveActiveSample(ids: readonly string[], opts: {
+    controlled?: string;
+    synced?: string;
+    own?: string;
+    fallback?: string;
+}): string;

package/dist/components/CodeBlock/sampleSync.js

@@ -0,0 +1,35 @@
+'use client';
+import { useCallback, useSyncExternalStore } from "react";
+// src/components/CodeBlock/sampleSync.ts
+var values = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Map();
+function getSynced(key) {
+	return values.get(key);
+}
+function setSynced(key, sampleId) {
+	values.set(key, sampleId);
+	listeners.get(key)?.forEach((onChange) => onChange());
+}
+function subscribeSynced(key, onChange) {
+	const set = listeners.get(key) ?? /* @__PURE__ */ new Set();
+	set.add(onChange);
+	listeners.set(key, set);
+	return () => {
+		set.delete(onChange);
+		if (set.size === 0 && listeners.get(key) === set) listeners.delete(key);
+	};
+}
+function useSyncedSample(key) {
+	const subscribe = useCallback((onChange) => key === void 0 ? () => {} : subscribeSynced(key, onChange), [key]);
+	const getSnapshot = useCallback(() => key === void 0 ? void 0 : getSynced(key), [key]);
+	return useSyncExternalStore(subscribe, getSnapshot, () => void 0);
+}
+function resolveActiveSample(ids, opts) {
+	return [
+		opts.controlled,
+		opts.synced,
+		opts.own,
+		opts.fallback
+	].find((id) => id !== void 0 && ids.includes(id)) ?? ids[0];
+}
+export { getSynced, resolveActiveSample, setSynced, subscribeSynced, useSyncedSample };