@stridge/noctis 1.0.0-beta.0

package/dist/components/code-block/brand-logo.js

@@ -0,0 +1,212 @@
+import { Icon } from "../../icons/icon.js";
+import { TerminalIcon } from "../../icons/glyphs.js";
+import { managerGlyphProps } from "./code-block.props.js";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { siApachegroovy, siAstro, siC, siClojure, siCplusplus, siCrystal, siCss, siCurl, siDart, siDocker, siDotnet, siElixir, siErlang, siFishshell, siGnubash, siGo, siGradle, siGraphql, siHaskell, siHelm, siHtml5, siJavascript, siJson, siJulia, siKotlin, siKubernetes, siLua, siMarkdown, siMdx, siMysql, siNextdotjs, siNginx, siNim, siNodedotjs, siOcaml, siOpenjdk, siPerl, siPhp, siPostgresql, siPython, siR, siReact, siRuby, siRust, siSass, siScala, siShell, siSolidity, siSqlite, siSvelte, siSwift, siTailwindcss, siTerraform, siToml, siTypescript, siVuedotjs, siWebassembly, siXml, siYaml, siZig } from "simple-icons";
+//#region src/components/code-block/brand-logo.tsx
+/**
+* Inline data-URI brand glyphs for each package manager — static 1em SVGs, so no asset coupling and no
+* `next/image` round-trip. Kept as data URIs (rather than Simple Icons) because these are the official
+* multi-colour marks, which the monochrome Simple Icons set doesn't carry; they take precedence over the
+* recoloured language marks when a name matches a manager.
+*/
+const MANAGER_ICON = {
+	pnpm: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill='%23f9ad00' d='M30 10.75h-8.749V2H30Zm-9.626 0h-8.75V2h8.75Zm-9.625 0H2V2h8.749ZM30 20.375h-8.749v-8.75H30Z'/%3E%3Cpath fill='%234e4e4e' d='M20.374 20.375h-8.75v-8.75h8.75Zm0 9.625h-8.75v-8.75h8.75ZM30 30h-8.749v-8.75H30Zm-19.251 0H2v-8.75h8.749Z'/%3E%3C/svg%3E",
+	npm: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill='%23c12127' d='M2 2h28v28H2'/%3E%3Cpath fill='%23fff' d='M7.25 7.25h17.5v17.5h-3.5v-14H16v14H7.25'/%3E%3C/svg%3E",
+	yarn: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill='%232188b6' d='M28.208 24.409a10.5 10.5 0 0 0-3.959 1.822a23.7 23.7 0 0 1-5.835 2.642a1.63 1.63 0 0 1-.983.55a62 62 0 0 1-6.447.577c-1.163.009-1.876-.3-2.074-.776a1.573 1.573 0 0 1 .866-2.074a4 4 0 0 1-.514-.379c-.171-.171-.352-.514-.406-.388c-.225.55-.343 1.894-.947 2.5c-.83.839-2.4.559-3.328.072c-1.019-.541.072-1.813.072-1.813a.73.73 0 0 1-.992-.343a4.85 4.85 0 0 1-.667-2.949a5.37 5.37 0 0 1 1.749-2.895a9.3 9.3 0 0 1 .658-4.4a10.45 10.45 0 0 1 3.165-3.661S6.628 10.747 7.35 8.817c.469-1.262.658-1.253.812-1.308a3.6 3.6 0 0 0 1.452-.857a5.27 5.27 0 0 1 4.41-1.7S15.2 1.4 16.277 2.09a18.4 18.4 0 0 1 1.533 2.886s1.281-.748 1.425-.469a11.33 11.33 0 0 1 .523 6.132a14 14 0 0 1-2.6 5.411c-.135.225 1.551.938 2.615 3.887c.983 2.7.108 4.96.262 5.212c.027.045.036.063.036.063s1.127.09 3.391-1.308a8.5 8.5 0 0 1 4.277-1.604a1.081 1.081 0 0 1 .469 2.11Z'/%3E%3C/svg%3E",
+	bun: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill='%23fbf0df' d='M29 17c0 5.65-5.82 10.23-13 10.23S3 22.61 3 17c0-3.5 2.24-6.6 5.66-8.44S14.21 4.81 16 4.81s3.32 1.54 7.34 3.71C26.76 10.36 29 13.46 29 17'/%3E%3Cpath fill='none' stroke='%23000' d='M16 27.65c7.32 0 13.46-4.65 13.46-10.65c0-3.72-2.37-7-5.89-8.85c-1.39-.75-2.46-1.41-3.37-2l-1.13-.69A6.14 6.14 0 0 0 16 4.35a6.9 6.9 0 0 0-3.3 1.23c-.42.24-.86.51-1.32.8c-.87.54-1.83 1.13-3 1.73C4.91 10 2.54 13.24 2.54 17c0 6 6.14 10.65 13.46 10.65Z'/%3E%3Cellipse cx='21.65' cy='18.62' fill='%23febbd0' rx='2.17' ry='1.28'/%3E%3Cellipse cx='10.41' cy='18.62' fill='%23febbd0' rx='2.17' ry='1.28'/%3E%3Cpath fill-rule='evenodd' d='M11.43 18.11a2 2 0 1 0-2-2.05a2.05 2.05 0 0 0 2 2.05m9.2 0a2 2 0 1 0-2-2.05a2 2 0 0 0 2 2.05'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M10.79 16.19a.77.77 0 1 0-.76-.77a.76.76 0 0 0 .76.77m9.2 0a.77.77 0 1 0 0-1.53a.77.77 0 0 0 0 1.53'/%3E%3Cpath fill='%23b71422' stroke='%23000' stroke-width='.75' d='M18.62 19.67a3.3 3.3 0 0 1-1.09 1.75a2.48 2.48 0 0 1-1.5.69a2.53 2.53 0 0 1-1.5-.69a3.28 3.28 0 0 1-1.08-1.75a.26.26 0 0 1 .29-.3h4.58a.27.27 0 0 1 .3.3Z'/%3E%3Cpath fill='%23ccbea7' fill-rule='evenodd' d='M14.93 5.75a6.1 6.1 0 0 1-2.09 4.62c-.1.09 0 .27.11.22c1.25-.49 2.94-1.94 2.23-4.88c-.03-.15-.25-.11-.25.04m.85 0a6 6 0 0 1 .57 5c0 .13.12.24.21.13c.83-1 1.54-3.11-.59-5.31c-.1-.11-.27.04-.19.17Zm1-.06a6.1 6.1 0 0 1 2.53 4.38c0 .14.21.17.24 0c.34-1.3.15-3.51-2.66-4.66c-.12-.02-.21.18-.09.27ZM9.94 9.55a6.27 6.27 0 0 0 3.89-3.33c.07-.13.28-.08.25.07c-.64 3-2.79 3.59-4.13 3.51c-.14-.01-.14-.21-.01-.25'/%3E%3C/svg%3E",
+	deno: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' d='M4.45 21.34A12.5 12.5 0 0 1 3.27 16a12 12 0 0 1 .09-1.46a11 11 0 0 1 .24-1.42a12.75 12.75 0 0 1 9.73-9.57A13 13 0 0 1 16 3.27h1a12.73 12.73 0 0 1 11.57 10.5a13 13 0 0 1 .16 2.23v1a12.6 12.6 0 0 1-3.3 7.61a6.62 6.62 0 0 1-4.7 2.06a4.68 4.68 0 0 1-2.88-1.09a4.58 4.58 0 0 1-1.63-3.09a5.5 5.5 0 0 1 .14-1.61a3.4 3.4 0 0 1 .8-1.53a5 5 0 0 1-1.3-.88a.15.15 0 0 1 0-.19a.16.16 0 0 1 .18-.06a10 10 0 0 0 1.46.37a20 20 0 0 0 2.45.31c2.13.1 4.38-.9 5.05-2.81s.43-3.83-2.08-5s-3.66-2.5-5.69-3.32a5 5 0 0 0-4.3.62c-4.08 2.25-7.72 9.35-6 15.94a.21.21 0 0 1-.1.23a.2.2 0 0 1-.23 0a13 13 0 0 1-1.33-1.73a13 13 0 0 1-.82-1.49'/%3E%3Cpath fill='%23f5f5f5' fill-rule='evenodd' d='M16.65 2A14 14 0 1 1 2 15.35A14 14 0 0 1 16.65 2m3.27 16.85a20 20 0 0 1-2.45-.31a8.6 8.6 0 0 1-1.47-.35a.16.16 0 0 0-.18.06a.15.15 0 0 0 0 .19a5 5 0 0 0 1.3.88a3.4 3.4 0 0 0-.8 1.53a5.5 5.5 0 0 0-.14 1.61a4.58 4.58 0 0 0 1.63 3.09a4.68 4.68 0 0 0 2.88 1.09a6.62 6.62 0 0 0 4.72-2.07a12.73 12.73 0 1 0-18.84 0a.21.21 0 0 0 .35-.19c-1.68-6.59 2-13.69 6-15.94a5 5 0 0 1 4.3-.62c2 .82 3.18 2.18 5.69 3.32s2.78 3 2.08 5s-2.91 2.86-5.07 2.73ZM15.54 8.69c-.82.06-1.36 1.08-1.43 1.73s.25 1.73 1.32 1.71c1.25 0 1.64-1.09 1.5-2.13a1.39 1.39 0 0 0-1.39-1.31'/%3E%3Cpath fill-rule='evenodd' d='M15.54 8.68A1.4 1.4 0 0 1 16.93 10c.14 1-.24 2.12-1.49 2.14c-1.07 0-1.4-1.06-1.33-1.71s.61-1.68 1.43-1.75'/%3E%3C/svg%3E"
+};
+/**
+* Brand logo for a fenced-code language, addressed by its Shiki language id (`bash`, `ts`, `go`) or a
+* human label (`Node.js`, `cURL`). Backed by Simple Icons — the canonical CC0 brand-mark set. Drives
+* the `CodeBlock` header and the `CodeBlock.Tabs` tab strip so a tab reads as the language with its
+* real logo. Keys match case-insensitively against the raw token, then a punctuation-stripped form
+* (`node.js` → `nodejs`, `c++` → `cpp`); unknown languages fall back to a neutral terminal glyph.
+*/
+const ICON_BY_KEY = {
+	javascript: siJavascript,
+	js: siJavascript,
+	mjs: siJavascript,
+	cjs: siJavascript,
+	typescript: siTypescript,
+	ts: siTypescript,
+	react: siReact,
+	jsx: siReact,
+	tsx: siReact,
+	node: siNodedotjs,
+	nodejs: siNodedotjs,
+	"node.js": siNodedotjs,
+	nextjs: siNextdotjs,
+	"next.js": siNextdotjs,
+	vue: siVuedotjs,
+	svelte: siSvelte,
+	astro: siAstro,
+	go: siGo,
+	golang: siGo,
+	rust: siRust,
+	rs: siRust,
+	c: siC,
+	cpp: siCplusplus,
+	"c++": siCplusplus,
+	cc: siCplusplus,
+	cxx: siCplusplus,
+	csharp: siDotnet,
+	"c#": siDotnet,
+	cs: siDotnet,
+	fsharp: siDotnet,
+	"f#": siDotnet,
+	dotnet: siDotnet,
+	".net": siDotnet,
+	java: siOpenjdk,
+	kotlin: siKotlin,
+	kt: siKotlin,
+	kts: siKotlin,
+	swift: siSwift,
+	zig: siZig,
+	nim: siNim,
+	crystal: siCrystal,
+	python: siPython,
+	py: siPython,
+	ruby: siRuby,
+	rb: siRuby,
+	php: siPhp,
+	perl: siPerl,
+	pl: siPerl,
+	lua: siLua,
+	r: siR,
+	dart: siDart,
+	elixir: siElixir,
+	ex: siElixir,
+	exs: siElixir,
+	erlang: siErlang,
+	erl: siErlang,
+	scala: siScala,
+	groovy: siApachegroovy,
+	clojure: siClojure,
+	clj: siClojure,
+	haskell: siHaskell,
+	hs: siHaskell,
+	ocaml: siOcaml,
+	ml: siOcaml,
+	julia: siJulia,
+	jl: siJulia,
+	solidity: siSolidity,
+	sol: siSolidity,
+	bash: siGnubash,
+	sh: siShell,
+	shell: siShell,
+	shellsession: siShell,
+	console: siShell,
+	zsh: siShell,
+	ksh: siShell,
+	fish: siFishshell,
+	curl: siCurl,
+	json: siJson,
+	jsonc: siJson,
+	json5: siJson,
+	yaml: siYaml,
+	yml: siYaml,
+	toml: siToml,
+	xml: siXml,
+	html: siHtml5,
+	htm: siHtml5,
+	css: siCss,
+	scss: siSass,
+	sass: siSass,
+	markdown: siMarkdown,
+	md: siMarkdown,
+	mdx: siMdx,
+	graphql: siGraphql,
+	gql: siGraphql,
+	wasm: siWebassembly,
+	wat: siWebassembly,
+	sql: siPostgresql,
+	postgres: siPostgresql,
+	postgresql: siPostgresql,
+	psql: siPostgresql,
+	mysql: siMysql,
+	sqlite: siSqlite,
+	docker: siDocker,
+	dockerfile: siDocker,
+	nginx: siNginx,
+	terraform: siTerraform,
+	tf: siTerraform,
+	hcl: siTerraform,
+	kubernetes: siKubernetes,
+	k8s: siKubernetes,
+	helm: siHelm,
+	gradle: siGradle,
+	tailwind: siTailwindcss,
+	tailwindcss: siTailwindcss
+};
+function parseHex(hex) {
+	const value = hex.replace("#", "");
+	return [
+		Number.parseInt(value.slice(0, 2), 16),
+		Number.parseInt(value.slice(2, 4), 16),
+		Number.parseInt(value.slice(4, 6), 16)
+	];
+}
+const toByte = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+/** Minimum perceived luminance (0–255) a logo fill must clear to stay legible on the dark code well. */
+const LUMINANCE_FLOOR = 96;
+/**
+* Brand hex nudged so a near-black mark (Rust, JSON, Markdown) reads on the dark code surface: mixed
+* toward white by the smallest amount that lifts its luminance to {@link LUMINANCE_FLOOR}, keeping the
+* hue. Most logos pass through untouched.
+*/
+function readableHex(hex) {
+	const [r, g, b] = parseHex(hex);
+	const luminance = .2126 * r + .7152 * g + .0722 * b;
+	if (luminance >= LUMINANCE_FLOOR) return `#${hex.replace("#", "")}`;
+	const t = (LUMINANCE_FLOOR - luminance) / (255 - luminance);
+	const lift = (c) => c + (255 - c) * t;
+	return `#${toByte(lift(r))}${toByte(lift(g))}${toByte(lift(b))}`;
+}
+function lookup(token) {
+	if (!token) return void 0;
+	const key = token.trim().toLowerCase();
+	if (key in ICON_BY_KEY) return ICON_BY_KEY[key];
+	return ICON_BY_KEY[key.replace(/[\s._-]/g, "")];
+}
+/**
+* The brand glyph for a fenced-code language or a package manager — one component for both, so a
+* `CodeBlock.Tab`'s leading mark reads consistently whether the strip is languages or managers.
+* Resolves in order: an official multi-colour package-manager mark (pnpm, npm, yarn, bun, deno), then a
+* Simple Icons language mark (recoloured to stay legible on the dark well), then a muted terminal glyph
+* so every tab keeps a leading icon. Reads `label` first (an explicit `Node.js` beats the raw `ts`
+* fence id), then `name`.
+*
+* @see {@link BrandLogo.Props}
+*/
+function BrandLogo({ name, label, size = 14, className, ...rest }) {
+	const manager = (label ?? name)?.trim().toLowerCase();
+	if (manager && Object.hasOwn(MANAGER_ICON, manager)) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		style: { backgroundImage: `url("${MANAGER_ICON[manager]}")` },
+		...managerGlyphProps({ className }),
+		...rest
+	});
+	const icon = lookup(label) ?? lookup(name);
+	if (!icon) return /* @__PURE__ */ jsx(Icon, {
+		icon: TerminalIcon,
+		size: "sm",
+		className,
+		"aria-hidden": true,
+		...rest
+	});
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		width: size,
+		height: size,
+		fill: readableHex(icon.hex),
+		className: clsx$1(className),
+		"aria-hidden": true,
+		...rest,
+		children: [/* @__PURE__ */ jsx("title", { children: icon.title }), /* @__PURE__ */ jsx("path", { d: icon.path })]
+	});
+}
+//#endregion
+export { BrandLogo };

package/dist/components/code-block/code-block.context.js

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/code-block/code-block.context.ts
+const CodeBlockContext = createContext(null);
+const CodeBlockProvider = CodeBlockContext.Provider;
+/** Read the code-block context, throwing a named error when a part renders outside `<CodeBlock>`. */
+function useCodeBlockContext(part) {
+	const context = use(CodeBlockContext);
+	if (context === null) throw new Error(`CodeBlock.${part} must be rendered inside <CodeBlock>.`);
+	return context;
+}
+//#endregion
+export { CodeBlockProvider, useCodeBlockContext };

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,190 @@
+import { tabs_d_exports } from "../../primitives/tabs.js";
+import { bodyProps, frameProps, headerProps, titleProps } from "./code-block.props.js";
+import { JSX, ReactElement, ReactNode } from "react";
+
+//#region src/components/code-block/code-block.d.ts
+/**
+ * Owns the copy-target resolution and the chrome labels, and renders the default composition when
+ * called with children only: a header band (the language logo plus a filename `label` or the language
+ * name, with a copy button) over the code in a horizontally scrollable body — or a floating copy
+ * button when there is no header. The Noctis well surface (`Surface` at the `sunken` shade) is the
+ * chassis; the `data-codeblock` hook lets the app stylesheet attach the line-number gutter.
+ *
+ * Compose explicitly for full control: {@link CodeBlock.Header} (holding {@link CodeBlock.Title} and
+ * {@link CodeBlock.CopyButton}), {@link CodeBlock.Body}, and — for a tabbed group of samples —
+ * {@link CodeBlock.Tabs} with {@link CodeBlock.Tab}s and {@link CodeBlock.Panel}s.
+ *
+ * @see {@link CodeBlock.Root.Props}
+ */
+declare function CodeBlockRoot({
+  label,
+  language,
+  icon,
+  copyText,
+  copyLabel,
+  copiedLabel,
+  className,
+  children
+}: CodeBlock.Root.Props): ReactElement;
+/** The header band. Renders the `code-block-header` slot; holds the title, logo, and copy button. */
+declare function CodeBlockHeader({
+  className,
+  ...props
+}: CodeBlock.Header.Props): ReactElement;
+/** The filename / language caption in the header. Treated as code, not prose. Renders no slot. */
+declare function CodeBlockTitle({
+  className,
+  ...props
+}: CodeBlock.Title.Props): ReactElement;
+/**
+ * The copy affordance, reading the copy target and chrome labels from context so it works in the header
+ * or floating. Renders the `code-copy` slot.
+ */
+declare function CodeBlockCopyButton({
+  className
+}: CodeBlock.CopyButton.Props): ReactElement;
+/**
+ * The horizontally scrollable code body. Pinned `dir=ltr` so tokens never reorder on an RTL page, and
+ * registers its ref as the copy target. Renders no slot — the frame above carries `code-block`.
+ */
+declare function CodeBlockBody({
+  className,
+  children,
+  ...props
+}: CodeBlock.Body.Props): ReactElement;
+/**
+ * A tabbed group of code samples — one tab per language or filename, each with its brand logo — on the
+ * well surface. Each child is a `<CodeBlock>` (or a raw `<pre>` with `label` / `language`); the strip
+ * reads each child's label, the active panel renders that child flush, and one copy button copies
+ * whichever sample is showing. Owns its own copy-target/active context. Renders the `code-tabs` slot.
+ *
+ * Styling lives in the sibling `code-tabs.css` (the tab strip is the `code-tabs` component in the token
+ * graph). It keys the frame radius off the `code-tabs` slot, and the strip/list/tab/logo metrics off the
+ * stable descendant hooks this markup stamps — `data-code-tabs-strip` on the bar, Base UI's
+ * `[role="tablist"]`/`[role="tab"]` on the list and tabs, and `data-code-tabs-logo` on each tab's logo.
+ */
+declare function CodeBlockTabs({
+  children,
+  "aria-label": ariaLabel,
+  copyLabel,
+  copiedLabel,
+  className
+}: CodeBlock.Tabs.Props): ReactElement | null;
+/**
+ * One language tab — a brand logo plus its label, addressed by `value`. The logo de-dims when the tab
+ * is active or hovered (handled by `code-tabs.css` off Base UI's `[data-active]`). Renders no slot (a
+ * Base UI tab inside the strip); stamps `data-code-tabs-logo` on the logo wrapper for the CSS to key on.
+ */
+declare function CodeBlockTab({
+  value,
+  language,
+  label,
+  icon,
+  className,
+  children,
+  ...props
+}: CodeBlock.Tab.Props): ReactElement;
+/**
+ * The active sample's panel. Matches its `value` to the showing tab; flattens a nested `CodeBlock`'s
+ * frame so the sample sits flush (handled by `code-tabs.css`). Renders the `code-tabs-panel` slot.
+ */
+declare function CodeBlockPanel({
+  className,
+  ...props
+}: CodeBlock.Panel.Props): ReactElement;
+/**
+ * The code-block family — one composable component. Bare `<CodeBlock>` renders the default composition
+ * (a header from the `label`/`language` plus a copy button over the scrollable body); compose the parts
+ * for full control: `CodeBlock.Header` (with `CodeBlock.Title` + `CodeBlock.CopyButton`),
+ * `CodeBlock.Body`, and `CodeBlock.Tabs` (with `CodeBlock.Tab`s and `CodeBlock.Panel`s) for a tabbed
+ * group of samples. Presentation only — syntax highlighting is the caller's concern (Shiki at build
+ * time in the docs), so any pre-tokenised `<pre>` drops straight in.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+ * the matching `CodeBlock` namespace — e.g. `CodeBlock.Tab.Props`. Each part carries its D12 `props()`
+ * escape hatch via `Object.assign`: spread `CodeBlock.Header.props()` onto a foreign element to style
+ * it as that part (styling is attribute-driven — `code-block.css` keys off the stamped `data-slot`).
+ */
+declare const CodeBlock: typeof CodeBlockRoot & {
+  Header: typeof CodeBlockHeader & {
+    props: typeof headerProps;
+  };
+  Title: typeof CodeBlockTitle & {
+    props: typeof titleProps;
+  };
+  CopyButton: typeof CodeBlockCopyButton;
+  Body: typeof CodeBlockBody & {
+    props: typeof bodyProps;
+  };
+  Tabs: typeof CodeBlockTabs;
+  Tab: typeof CodeBlockTab;
+  Panel: typeof CodeBlockPanel; /** Escape-hatch helper for the frame slot — spread onto an element a `<Surface>` can't wrap. */
+  props: typeof frameProps;
+};
+/**
+ * Per-part prop types, mirroring Base UI's `Component.Part.Props` convention. Types-only — it emits no
+ * runtime code and merges with the `CodeBlock` object above, so `CodeBlock.Tab` is the component value
+ * while `CodeBlock.Tab.Props` is its prop type.
+ */
+declare namespace CodeBlock {
+  namespace Root {
+    type Props = {
+      /** A filename / caption shown in the header band (e.g. `App.tsx`). Treated as code, not prose. */label?: string; /** The language id, used for the brand logo and (absent a `label`) the header text. */
+      language?: string;
+      /**
+       * Override the brand logo shown in the header — e.g. a package-manager glyph
+       * (`<BrandLogo name="pnpm" />`). Inside `CodeBlock.Tabs`, this is the tab's logo.
+       * Defaults to the language logo.
+       */
+      icon?: ReactNode;
+      /**
+       * The exact text the copy button writes to the clipboard. Omit to copy the rendered code's
+       * `textContent` — the right default when `children` is a syntax-highlighted `<pre>`.
+       */
+      copyText?: string; /** Copy button label at rest. Defaults to `Copy`. */
+      copyLabel?: string; /** Copy button label just after copying. Defaults to `Copied`. */
+      copiedLabel?: string; /** Classes merged onto the well surface. */
+      className?: string; /** The code itself — typically a build-time syntax-highlighted `<pre>`. */
+      children?: ReactNode;
+    };
+  }
+  namespace Header {
+    type Props = JSX.IntrinsicElements["div"];
+  }
+  namespace Title {
+    type Props = JSX.IntrinsicElements["span"];
+  }
+  namespace CopyButton {
+    type Props = {
+      /** Classes merged onto the copy button. */className?: string;
+    };
+  }
+  namespace Body {
+    type Props = JSX.IntrinsicElements["div"];
+  }
+  namespace Tabs {
+    type Props = {
+      /** One child per language — a `<CodeBlock>` or a raw `<pre>` carrying `label` / `language`. */children?: ReactNode; /** Accessible name for the tab strip (e.g. "Code language"). */
+      "aria-label"?: string; /** Copy button label at rest. Defaults to `Copy`. */
+      copyLabel?: string; /** Copy button label just after copying. Defaults to `Copied`. */
+      copiedLabel?: string; /** Classes merged onto the tab-group frame. */
+      className?: string;
+    };
+  }
+  namespace Tab {
+    type Props = tabs_d_exports.Tabs.Tab.Props & {
+      /** Shiki language id for the tab's brand logo. */language?: string; /** Author-facing label for the tab's brand logo; preferred over `language`. */
+      label?: string;
+      /**
+       * Override the tab's brand logo — e.g. a package-manager glyph
+       * (`<BrandLogo name="pnpm" />`). Defaults to the language logo from `language`/`label`.
+       */
+      icon?: ReactNode;
+    };
+  }
+  namespace Panel {
+    type Props = tabs_d_exports.Tabs.Panel.Props;
+  }
+}
+//#endregion
+export { CodeBlock };

package/dist/components/code-block/code-block.js

@@ -0,0 +1,267 @@
+"use client";
+import { Surface } from "../surface/surface.js";
+import { tabs_exports } from "../../primitives/tabs.js";
+import { CopyButton } from "../copy-button/copy-button.js";
+import { CODE_BLOCK_SLOTS } from "./code-block.slots.js";
+import { bodyProps, floatingCopyProps, frameProps, headerProps, logoProps, titleProps } from "./code-block.props.js";
+import { BrandLogo } from "./brand-logo.js";
+import { CodeBlockProvider, useCodeBlockContext } from "./code-block.context.js";
+import { prettyLanguage } from "./language-label.js";
+import { Children, isValidElement, useCallback, useMemo, useRef, useState } from "react";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/code-block/code-block.tsx
+const childLabel = (props) => props.label ?? props["data-label"];
+const childLanguage = (props) => props.language ?? props["data-language"];
+const childIcon = (props) => props.icon;
+function resolveTabLabel(label, language, index) {
+	if (label) return label;
+	if (language) return prettyLanguage(language, language);
+	return `${index + 1}`;
+}
+/**
+* Owns the copy-target resolution and the chrome labels, and renders the default composition when
+* called with children only: a header band (the language logo plus a filename `label` or the language
+* name, with a copy button) over the code in a horizontally scrollable body — or a floating copy
+* button when there is no header. The Noctis well surface (`Surface` at the `sunken` shade) is the
+* chassis; the `data-codeblock` hook lets the app stylesheet attach the line-number gutter.
+*
+* Compose explicitly for full control: {@link CodeBlock.Header} (holding {@link CodeBlock.Title} and
+* {@link CodeBlock.CopyButton}), {@link CodeBlock.Body}, and — for a tabbed group of samples —
+* {@link CodeBlock.Tabs} with {@link CodeBlock.Tab}s and {@link CodeBlock.Panel}s.
+*
+* @see {@link CodeBlock.Root.Props}
+*/
+function CodeBlockRoot({ label, language, icon, copyText, copyLabel, copiedLabel, className, children }) {
+	const targetRef = useRef(null);
+	const registerTarget = useCallback((ref) => {
+		targetRef.current = ref;
+	}, []);
+	const getText = useCallback(() => copyText ?? targetRef.current?.current?.querySelector("code, pre")?.textContent ?? "", [copyText]);
+	const context = useMemo(() => ({
+		state: { activeValue: void 0 },
+		actions: {
+			setActiveValue: () => {},
+			registerTarget,
+			getText
+		},
+		meta: {
+			copyLabel,
+			copiedLabel
+		}
+	}), [
+		registerTarget,
+		getText,
+		copyLabel,
+		copiedLabel
+	]);
+	const headerText = label ?? prettyLanguage(language);
+	const showHeader = Boolean(headerText);
+	return /* @__PURE__ */ jsx(CodeBlockProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Surface, {
+			"data-codeblock": "",
+			shade: "sunken",
+			bordered: true,
+			...frameProps({ className }),
+			children: [showHeader ? /* @__PURE__ */ jsxs(CodeBlockHeader, { children: [
+				icon ?? /* @__PURE__ */ jsx(BrandLogo, {
+					name: language,
+					label,
+					...logoProps()
+				}),
+				/* @__PURE__ */ jsx(CodeBlockTitle, { children: headerText }),
+				/* @__PURE__ */ jsx(CodeBlockCopyButton, {})
+			] }) : /* @__PURE__ */ jsx("div", {
+				...floatingCopyProps(),
+				children: /* @__PURE__ */ jsx(CodeBlockCopyButton, {})
+			}), /* @__PURE__ */ jsx(CodeBlockBody, { children })]
+		})
+	});
+}
+/** The header band. Renders the `code-block-header` slot; holds the title, logo, and copy button. */
+function CodeBlockHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...headerProps({ className }),
+		...props
+	});
+}
+/** The filename / language caption in the header. Treated as code, not prose. Renders no slot. */
+function CodeBlockTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-allow-literal": true,
+		...titleProps({ className }),
+		...props
+	});
+}
+/**
+* The copy affordance, reading the copy target and chrome labels from context so it works in the header
+* or floating. Renders the `code-copy` slot.
+*/
+function CodeBlockCopyButton({ className }) {
+	const { actions, meta } = useCodeBlockContext("CopyButton");
+	return /* @__PURE__ */ jsx(CopyButton, {
+		variant: "ghost",
+		size: "xs",
+		iconOnly: true,
+		getText: actions.getText,
+		copyLabel: meta.copyLabel,
+		copiedLabel: meta.copiedLabel,
+		className: clsx$1(className)
+	});
+}
+/**
+* The horizontally scrollable code body. Pinned `dir=ltr` so tokens never reorder on an RTL page, and
+* registers its ref as the copy target. Renders no slot — the frame above carries `code-block`.
+*/
+function CodeBlockBody({ className, children, ...props }) {
+	const { actions } = useCodeBlockContext("Body");
+	const ref = useRef(null);
+	return /* @__PURE__ */ jsx("div", {
+		ref: useCallback((node) => {
+			ref.current = node;
+			actions.registerTarget(ref);
+		}, [actions]),
+		dir: "ltr",
+		"data-custom-scrollbar": true,
+		...bodyProps({ className }),
+		...props,
+		children
+	});
+}
+/**
+* A tabbed group of code samples — one tab per language or filename, each with its brand logo — on the
+* well surface. Each child is a `<CodeBlock>` (or a raw `<pre>` with `label` / `language`); the strip
+* reads each child's label, the active panel renders that child flush, and one copy button copies
+* whichever sample is showing. Owns its own copy-target/active context. Renders the `code-tabs` slot.
+*
+* Styling lives in the sibling `code-tabs.css` (the tab strip is the `code-tabs` component in the token
+* graph). It keys the frame radius off the `code-tabs` slot, and the strip/list/tab/logo metrics off the
+* stable descendant hooks this markup stamps — `data-code-tabs-strip` on the bar, Base UI's
+* `[role="tablist"]`/`[role="tab"]` on the list and tabs, and `data-code-tabs-logo` on each tab's logo.
+*/
+function CodeBlockTabs({ children, "aria-label": ariaLabel, copyLabel, copiedLabel, className }) {
+	const items = Children.toArray(children).filter((child) => isValidElement(child));
+	const [value, setValue] = useState("0");
+	const panelRef = useRef(null);
+	const registerTarget = useCallback((_ref) => {}, []);
+	const getText = useCallback(() => panelRef.current?.querySelector("code, pre")?.textContent ?? "", []);
+	const setActiveValue = useCallback((next) => setValue(next), []);
+	const context = useMemo(() => ({
+		state: { activeValue: value },
+		actions: {
+			setActiveValue,
+			registerTarget,
+			getText
+		},
+		meta: {
+			copyLabel,
+			copiedLabel
+		}
+	}), [
+		value,
+		setActiveValue,
+		registerTarget,
+		getText,
+		copyLabel,
+		copiedLabel
+	]);
+	if (items.length === 0) return null;
+	const activeChild = items[Number(value)] ?? items[0];
+	return /* @__PURE__ */ jsx(CodeBlockProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Surface, {
+			"data-slot": CODE_BLOCK_SLOTS.tabs,
+			"data-codeblock": "",
+			shade: "sunken",
+			bordered: true,
+			className: clsx$1(className),
+			children: /* @__PURE__ */ jsxs(tabs_exports.Tabs.Root, {
+				value,
+				onValueChange: (next) => setActiveValue(String(next)),
+				children: [/* @__PURE__ */ jsxs("div", {
+					"data-code-tabs-strip": "",
+					children: [/* @__PURE__ */ jsx(tabs_exports.Tabs.List, {
+						"aria-label": ariaLabel,
+						children: items.map((child, index) => {
+							const language = childLanguage(child.props);
+							const label = childLabel(child.props);
+							return /* @__PURE__ */ jsx(CodeBlockTab, {
+								value: String(index),
+								language,
+								label,
+								icon: childIcon(child.props),
+								children: resolveTabLabel(label, language, index)
+							}, child.key ?? index);
+						})
+					}), /* @__PURE__ */ jsx(CodeBlockCopyButton, {})]
+				}), /* @__PURE__ */ jsx(CodeBlockPanel, {
+					ref: panelRef,
+					value,
+					children: /* @__PURE__ */ jsx("div", {
+						dir: "ltr",
+						"data-code-block-body": "",
+						children: activeChild.props.children
+					})
+				})]
+			})
+		})
+	});
+}
+/**
+* One language tab — a brand logo plus its label, addressed by `value`. The logo de-dims when the tab
+* is active or hovered (handled by `code-tabs.css` off Base UI's `[data-active]`). Renders no slot (a
+* Base UI tab inside the strip); stamps `data-code-tabs-logo` on the logo wrapper for the CSS to key on.
+*/
+function CodeBlockTab({ value, language, label, icon, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(tabs_exports.Tabs.Tab, {
+		value,
+		"data-allow-literal": true,
+		className: clsx$1(className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-code-tabs-logo": "",
+			children: icon ?? /* @__PURE__ */ jsx(BrandLogo, {
+				name: language,
+				label
+			})
+		}), children]
+	});
+}
+/**
+* The active sample's panel. Matches its `value` to the showing tab; flattens a nested `CodeBlock`'s
+* frame so the sample sits flush (handled by `code-tabs.css`). Renders the `code-tabs-panel` slot.
+*/
+function CodeBlockPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(tabs_exports.Tabs.Panel, {
+		"data-slot": CODE_BLOCK_SLOTS.panel,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* The code-block family — one composable component. Bare `<CodeBlock>` renders the default composition
+* (a header from the `label`/`language` plus a copy button over the scrollable body); compose the parts
+* for full control: `CodeBlock.Header` (with `CodeBlock.Title` + `CodeBlock.CopyButton`),
+* `CodeBlock.Body`, and `CodeBlock.Tabs` (with `CodeBlock.Tab`s and `CodeBlock.Panel`s) for a tabbed
+* group of samples. Presentation only — syntax highlighting is the caller's concern (Shiki at build
+* time in the docs), so any pre-tokenised `<pre>` drops straight in.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+* the matching `CodeBlock` namespace — e.g. `CodeBlock.Tab.Props`. Each part carries its D12 `props()`
+* escape hatch via `Object.assign`: spread `CodeBlock.Header.props()` onto a foreign element to style
+* it as that part (styling is attribute-driven — `code-block.css` keys off the stamped `data-slot`).
+*/
+const CodeBlock = Object.assign(CodeBlockRoot, {
+	Header: Object.assign(CodeBlockHeader, { props: headerProps }),
+	Title: Object.assign(CodeBlockTitle, { props: titleProps }),
+	CopyButton: CodeBlockCopyButton,
+	Body: Object.assign(CodeBlockBody, { props: bodyProps }),
+	Tabs: CodeBlockTabs,
+	Tab: CodeBlockTab,
+	Panel: CodeBlockPanel,
+	/** Escape-hatch helper for the frame slot — spread onto an element a `<Surface>` can't wrap. */
+	props: frameProps
+});
+//#endregion
+export { CodeBlock };