@c2n/code-viewer 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @c2n/code-viewer
+
+Syntax-highlighted code blocks powered by [shiki](https://shiki.style), built with Lit.
+
+```bash
+npm install @c2n/code-viewer
+```
+
+```html
+<script type="module">
+  import '@c2n/code-viewer'
+</script>
+
+<c2-code-viewer language="ts" line-numbers highlight-lines="2" copyable>
+  <span slot="title">greet.ts</span>
+  export function greet(name: string) { return `Hello, ${name}!` }
+</c2-code-viewer>
+```
+
+- **Source**: the default slot, with text in a `<pre>` (formatters collapse whitespace inside custom elements but leave `<pre>` alone) or markup in a `<template>` (so the browser does not parse it); indentation is stripped. Or the `code` property / attribute, where `\n` stands for a newline.
+- **Languages and themes**: `language` takes any shiki id or alias; `theme` any built-in theme name or `css-variables`. Grammars and themes load on demand into one shared highlighter using shiki's JavaScript engine, no WASM.
+- **Dark mode**: add `dark-theme` and both palettes are rendered; `color-scheme="auto|light|dark"` picks one (auto follows `prefers-color-scheme`).
+- **Extras**: `line-numbers` (+ `start-line`), `highlight-lines="2-4,7"`, `copyable` (fires `code-copy`), `wrap`, `inline`, a `title` slot for a file name header, and `--c2-code-viewer--max-height` for scrolling.
+- **Progressive**: the plain code renders immediately (server-side too) and is upgraded in place once highlighted.
+
+Theming: `--c2-code-viewer--*` for the frame (font, padding, borders, radius, max-height; `background` and `color` override the theme), `__header`, `__copy`, `__line-numbers` and `__line__highlighted` for the parts, and `__theme--*` for the colours of the `css-variables` theme. The full list is in `custom-elements.json` and on the docs site.

package/dist/code-viewer.js

@@ -0,0 +1,350 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { Task } from "@lit/task";
+import { createCssVariablesTheme, createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { bundledLanguages } from "shiki/langs";
+import { bundledThemes } from "shiki/themes";
+//#region src/code-viewer.scss?inline
+var code_viewer_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n  min-width: 0;\n}\n\n:host([inline]) {\n  display: inline;\n}\n\n.c2-code-viewer {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: clip;\n  position: relative;\n  background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-light-bg)));\n  color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-light)));\n  box-shadow: var(--c2-code-viewer--box-shadow);\n  border-top: var(--c2-code-viewer--border-top,1px solid rgb(213, 213, 213));\n  border-right: var(--c2-code-viewer--border-right,1px solid rgb(213, 213, 213));\n  border-bottom: var(--c2-code-viewer--border-bottom,1px solid rgb(213, 213, 213));\n  border-left: var(--c2-code-viewer--border-left,1px solid rgb(213, 213, 213));\n  border-top-left-radius: var(--c2-code-viewer--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-code-viewer--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-code-viewer--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-code-viewer--border-bottom-right-radius,8px);\n  font-family: var(--c2-code-viewer--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  font-size: var(--c2-code-viewer--font-size,13px);\n  line-height: var(--c2-code-viewer--line-height,1.6);\n}\n\n.c2-code-viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-top: var(--c2-code-viewer__header--padding-top,6px);\n  padding-right: var(--c2-code-viewer__header--padding-right,8px);\n  padding-bottom: var(--c2-code-viewer__header--padding-bottom,6px);\n  padding-left: var(--c2-code-viewer__header--padding-left,16px);\n  background: var(--c2-code-viewer__header--background,rgba(127, 127, 127, 0.08));\n  color: var(--c2-code-viewer__header--color);\n  font-family: var(--c2-code-viewer__header--font-family,var(--c2-code-viewer--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));\n  font-size: var(--c2-code-viewer__header--font-size,12px);\n  border-bottom: var(--c2-code-viewer__header--border-bottom,1px solid rgba(127, 127, 127, 0.2));\n}\n.c2-code-viewer-header slot[name=title] {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.c2-code-viewer-header[hidden] {\n  display: none;\n}\n\n.c2-code-viewer-body {\n  position: relative;\n  min-width: 0;\n  max-height: var(--c2-code-viewer--max-height);\n  overflow: auto;\n}\n.c2-code-viewer-body > .c2-code-viewer-copy {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  opacity: 0;\n  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-code-viewer-body:hover > .c2-code-viewer-copy, .c2-code-viewer-body:focus-within > .c2-code-viewer-copy,\n.c2-code-viewer-body > .c2-code-viewer-copy.is-copied {\n  opacity: 1;\n}\n\n.c2-code-viewer-copy {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  box-sizing: border-box;\n  width: var(--c2-code-viewer__copy--size,28px);\n  height: var(--c2-code-viewer__copy--size,28px);\n  padding: 0;\n  border: none;\n  border-radius: var(--c2-code-viewer__copy--border-radius,6px);\n  background: var(--c2-code-viewer__copy--background);\n  color: var(--c2-code-viewer__copy--color);\n  opacity: 0.7;\n  cursor: pointer;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-code-viewer-copy svg,\n.c2-code-viewer-copy ::slotted(*) {\n  width: var(--c2-code-viewer__copy--icon-size,14px);\n  height: var(--c2-code-viewer__copy--icon-size,14px);\n}\n.c2-code-viewer-copy:hover {\n  background: var(--c2-code-viewer__copy__hover--background,rgba(127, 127, 127, 0.15));\n  opacity: 1;\n}\n.c2-code-viewer-copy:focus-visible {\n  outline: 2px solid rgba(2, 101, 220, 0.4);\n  outline-offset: 1px;\n  opacity: 1;\n}\n.c2-code-viewer-copy.is-copied {\n  color: var(--c2-code-viewer__copy__copied--color,rgb(34, 197, 94));\n  opacity: 1;\n}\n\npre.shiki {\n  margin: 0;\n  box-sizing: border-box;\n  min-width: 100%;\n  width: max-content;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  tab-size: var(--c2-code-viewer--tab-size,2);\n  padding-top: var(--c2-code-viewer--padding-top,12px);\n  padding-right: var(--c2-code-viewer--padding-right,16px);\n  padding-bottom: var(--c2-code-viewer--padding-bottom,12px);\n  padding-left: var(--c2-code-viewer--padding-left,16px);\n}\npre.shiki code {\n  display: block;\n  font: inherit;\n}\npre.shiki .line {\n  display: inline-block;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 1lh;\n}\npre.shiki .line.highlighted {\n  background: var(--c2-code-viewer__line__highlighted--background,rgba(99, 102, 241, 0.12));\n  border-left: var(--c2-code-viewer__line__highlighted--border-left,3px solid rgb(99, 102, 241));\n  margin-left: calc(-1 * var(--c2-code-viewer--padding-left,16px));\n  padding-left: calc(var(--c2-code-viewer--padding-left,16px) - 3px);\n  width: calc(100% + var(--c2-code-viewer--padding-left,16px) + var(--c2-code-viewer--padding-right,16px));\n  margin-right: calc(-1 * var(--c2-code-viewer--padding-right,16px));\n}\npre.shiki.has-line-numbers .line::before {\n  counter-increment: line;\n  content: counter(line);\n  display: inline-block;\n  min-width: var(--c2-code-viewer__line-numbers--min-width,2ch);\n  margin-right: var(--c2-code-viewer__line-numbers--gap,16px);\n  text-align: right;\n  color: var(--c2-code-viewer__line-numbers--color);\n  opacity: 0.45;\n  user-select: none;\n}\npre.shiki .diff-marker {\n  user-select: none;\n}\n\n:host([wrap]) pre.shiki {\n  width: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.c2-code-viewer-inline {\n  font-family: var(--c2-code-viewer--font-family,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  font-size: 0.9em;\n  color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-light)));\n  background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-light-bg)));\n  padding: 0.1em 0.4em;\n  border-radius: 4px;\n  border-top: var(--c2-code-viewer--border-top,1px solid rgb(213, 213, 213));\n  border-right: var(--c2-code-viewer--border-right,1px solid rgb(213, 213, 213));\n  border-bottom: var(--c2-code-viewer--border-bottom,1px solid rgb(213, 213, 213));\n  border-left: var(--c2-code-viewer--border-left,1px solid rgb(213, 213, 213));\n}\n\n.dual span {\n  color: var(--shiki-light);\n}\n\n:host([color-scheme=dark]) .c2-code-viewer,\n:host([color-scheme=dark]) .c2-code-viewer-inline {\n  background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-dark-bg)));\n  color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-dark)));\n}\n:host([color-scheme=dark]) .dual span {\n  color: var(--shiki-dark);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host(:not([color-scheme=light])) .c2-code-viewer,\n  :host(:not([color-scheme=light])) .c2-code-viewer-inline {\n    background: var(--c2-code-viewer--background,var(--cv-bg,var(--shiki-dark-bg)));\n    color: var(--c2-code-viewer--color,var(--cv-fg,var(--shiki-dark)));\n  }\n  :host(:not([color-scheme=light])) .dual span {\n    color: var(--shiki-dark);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .c2-code-viewer-copy,\n  .c2-code-viewer-body > .c2-code-viewer-copy {\n    transition: none;\n  }\n}";
+//#endregion
+//#region src/shiki.ts
+var CSS_VARIABLES_THEME = "css-variables";
+var CSS_VARIABLES_PREFIX = "--c2-code-viewer__theme--";
+/** Defaults baked into the `css-variables` theme (a GitHub-light-like palette), overridable per element. */
+var CSS_VARIABLE_DEFAULTS = {
+	foreground: "#24292e",
+	background: "#ffffff",
+	"token-constant": "#005cc5",
+	"token-string": "#032f62",
+	"token-comment": "#6a737d",
+	"token-keyword": "#d73a49",
+	"token-parameter": "#24292e",
+	"token-function": "#6f42c1",
+	"token-string-expression": "#22863a",
+	"token-punctuation": "#24292e",
+	"token-link": "#032f62"
+};
+var corePromise;
+var pending = /* @__PURE__ */ new Map();
+/** One shared highlighter for every `c2-code-viewer`; grammars and themes are loaded on demand. */
+function getCore() {
+	return corePromise ??= createHighlighterCore({
+		engine: createJavaScriptRegexEngine({ forgiving: true }),
+		langs: [],
+		themes: []
+	});
+}
+/** Resolves a language id or alias to what the highlighter knows, falling back to `plaintext`. */
+function normalizeLang(lang) {
+	const id = (lang ?? "").trim().toLowerCase();
+	if (!id || id === "text" || id === "txt" || id === "plaintext" || id === "plain") return "plaintext";
+	return id in bundledLanguages ? id : "plaintext";
+}
+async function ensureLanguage(core, lang) {
+	if (lang === "plaintext" || core.getLoadedLanguages().includes(lang)) return;
+	const key = `lang:${lang}`;
+	if (!pending.has(key)) pending.set(key, core.loadLanguage(bundledLanguages[lang]).finally(() => pending.delete(key)));
+	await pending.get(key);
+}
+var cssVariablesTheme;
+async function ensureTheme(core, theme) {
+	if (core.getLoadedThemes().includes(theme)) return;
+	const key = `theme:${theme}`;
+	if (!pending.has(key)) {
+		const registration = theme === "css-variables" ? cssVariablesTheme ??= createCssVariablesTheme({
+			name: CSS_VARIABLES_THEME,
+			variablePrefix: CSS_VARIABLES_PREFIX,
+			variableDefaults: CSS_VARIABLE_DEFAULTS,
+			fontStyle: true
+		}) : bundledThemes[theme];
+		pending.set(key, core.loadTheme(registration).finally(() => pending.delete(key)));
+	}
+	await pending.get(key);
+}
+function isKnownTheme(theme) {
+	return !!theme && (theme === "css-variables" || theme in bundledThemes);
+}
+/** Highlights `code`; the component stylesheet owns the frame look, the theme only supplies colours. */
+async function highlight({ code, lang, theme, darkTheme, inline = false, lineNumbers = false, startLine = 1, highlightedLines }) {
+	const core = await getCore();
+	const language = normalizeLang(lang);
+	await Promise.all([
+		ensureLanguage(core, language),
+		ensureTheme(core, theme),
+		darkTheme ? ensureTheme(core, darkTheme) : void 0
+	]);
+	const themeOptions = darkTheme ? {
+		themes: {
+			light: theme,
+			dark: darkTheme
+		},
+		defaultColor: false
+	} : { theme };
+	const html = core.codeToHtml(code, {
+		lang: language,
+		...themeOptions,
+		transformers: [{
+			pre(node) {
+				const style = String(node.properties.style ?? "");
+				if (!darkTheme) node.properties.style = style.replace(/background-color:/, "--cv-bg:").replace(/(^|;)color:/, "$1--cv-fg:");
+				const classes = [...String(node.properties.class ?? "").split(" ").filter(Boolean)];
+				if (lineNumbers) classes.push("has-line-numbers");
+				if (darkTheme) classes.push("dual");
+				node.properties.class = classes.join(" ");
+				delete node.properties.tabindex;
+			},
+			code(node) {
+				if (lineNumbers) node.properties.style = `counter-reset: line ${startLine - 1}`;
+			},
+			line(node, line) {
+				if (highlightedLines?.has(line)) this.addClassToHast(node, "highlighted");
+				if (language === "diff") {
+					const first = node.children[0];
+					const text = first?.type === "element" ? first.children[0] : void 0;
+					if (text?.type === "text" && (text.value[0] === "+" || text.value[0] === "-")) {
+						const marker = text.value[0];
+						text.value = text.value.slice(1);
+						first.children.unshift({
+							type: "element",
+							tagName: "span",
+							properties: { class: "diff-marker" },
+							children: [{
+								type: "text",
+								value: marker
+							}]
+						});
+					}
+				}
+			}
+		}]
+	});
+	const style = html.match(/^<pre[^>]*?style="([^"]*)"/)?.[1] ?? "";
+	if (inline) return {
+		html: html.match(/<code[^>]*>([\s\S]*)<\/code>\s*<\/pre>\s*$/)?.[1] ?? html,
+		style
+	};
+	return {
+		html,
+		style
+	};
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/code-viewer.ts
+var LEGACY_LANG_ATTRIBUTE = "langage";
+var CodeViewer = class CodeViewer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.code = void 0;
+		this.language = "plaintext";
+		this.theme = "github-light";
+		this.darkTheme = void 0;
+		this.colorScheme = "auto";
+		this.wrap = false;
+		this.inline = false;
+		this.lineNumbers = false;
+		this.startLine = 1;
+		this.highlightLines = "";
+		this.copyable = false;
+		this.slotCode = "";
+		this.hasTitle = false;
+		this.highlighted = void 0;
+		this.copied = false;
+		this.highlightTask = new Task(this, {
+			args: () => [
+				this.source,
+				this.language,
+				this.theme,
+				this.darkTheme,
+				this.inline,
+				this.lineNumbers,
+				this.startLine,
+				this.highlightLines
+			],
+			task: async ([code, lang, theme, darkTheme, inline, lineNumbers, startLine]) => {
+				if (!code) return {
+					html: "",
+					style: ""
+				};
+				return highlight({
+					code,
+					lang,
+					theme: isKnownTheme(theme) ? theme : "github-light",
+					darkTheme: isKnownTheme(darkTheme) ? darkTheme : void 0,
+					inline,
+					lineNumbers,
+					startLine,
+					highlightedLines: this.highlightedLines
+				});
+			},
+			onComplete: (value) => {
+				this.highlighted = value;
+			}
+		});
+	}
+	static {
+		this.styles = unsafeCSS(code_viewer_default);
+	}
+	/** Accepts the pre-1.0 `langage` attribute. */
+	static get observedAttributes() {
+		return [...super.observedAttributes, LEGACY_LANG_ATTRIBUTE];
+	}
+	attributeChangedCallback(name, old, value) {
+		if (name === LEGACY_LANG_ATTRIBUTE) {
+			if (value !== null) this.language = value;
+			return;
+		}
+		super.attributeChangedCallback(name, old, value);
+	}
+	/** The code being displayed: `code` or the dedented slot text. */
+	get source() {
+		if (this.code === void 0) return this.slotCode;
+		return this.code.includes("\n") ? this.code : this.code.replace(/\\n/g, "\n");
+	}
+	get highlightedLines() {
+		const lines = /* @__PURE__ */ new Set();
+		for (const part of this.highlightLines.split(",")) {
+			const [from, to] = part.trim().split("-").map((n) => Number.parseInt(n, 10));
+			if (Number.isNaN(from)) continue;
+			const last = to === void 0 || Number.isNaN(to) ? from : to;
+			for (let i = from; i <= last; i++) lines.add(i);
+		}
+		return lines;
+	}
+	willUpdate(changed) {
+		if (changed.has("code") || changed.has("slotCode") || changed.has("language") || changed.has("inline")) this.highlighted = void 0;
+	}
+	firstUpdated() {
+		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSlot(slot);
+	}
+	handleSlotChange(event) {
+		this.updateSlot(event.target);
+	}
+	updateSlot(slot) {
+		const nodes = slot.assignedNodes({ flatten: true });
+		if (slot.name === "title") this.hasTitle = nodes.some((n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? "").trim() !== "");
+		else if (slot.name === "") {
+			const elements = nodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
+			const parts = (elements.length ? elements : nodes).map((n) => n instanceof HTMLTemplateElement ? n.innerHTML : n.textContent ?? "");
+			this.slotCode = dedent(parts.join(""));
+		}
+	}
+	/** Copies the displayed code to the clipboard. */
+	async copy() {
+		const code = this.source;
+		await navigator.clipboard.writeText(code);
+		this.copied = true;
+		clearTimeout(this.copiedTimer);
+		this.copiedTimer = setTimeout(() => this.copied = false, 2e3);
+		this.dispatchEvent(new CustomEvent("code-copy", {
+			detail: { code },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	renderCopyButton() {
+		return html`
+      <button
+        class=${classMap({
+			"c2-code-viewer-copy": true,
+			"is-copied": this.copied
+		})}
+        type="button"
+        aria-label=${this.copied ? "Copied" : "Copy code"}
+        @click=${this.copy}
+      >
+        ${this.copied ? html`<slot name="copied-icon"
+                ><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="20 6 9 17 4 12"></polyline></svg
+              ></slot>` : html`<slot name="copy-icon"
+                ><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg
+              ></slot>`}
+      </button>
+    `;
+	}
+	renderCode() {
+		if (this.highlighted !== void 0) return unsafeHTML(this.highlighted.html);
+		return this.inline ? html`${this.source}` : html`<pre
+          class="shiki plain ${this.lineNumbers ? "has-line-numbers" : ""}"
+        ><code style=${this.lineNumbers ? `counter-reset: line ${this.startLine - 1}` : nothing}>${this.source.split("\n").map((line, i, all) => html`<span class="line">${line}</span>${i < all.length - 1 ? "\n" : ""}`)}</code></pre>`;
+	}
+	render() {
+		const source = html`<slot hidden @slotchange=${this.handleSlotChange}></slot>`;
+		if (this.inline) return html`${source}<code
+          class="c2-code-viewer-inline ${this.darkTheme ? "dual" : ""}"
+          style=${this.highlighted?.style || nothing}
+          data-language=${normalizeLang(this.language)}
+          >${this.renderCode()}</code
+        >`;
+		return html`
+      ${source}
+      <div class=${classMap({
+			"c2-code-viewer": true,
+			"has-title": this.hasTitle
+		})} style=${this.highlighted?.style || nothing}>
+        <div class="c2-code-viewer-header" ?hidden=${!this.hasTitle}>
+          <slot name="title" @slotchange=${this.handleSlotChange}></slot>
+          ${this.copyable ? this.renderCopyButton() : nothing}
+        </div>
+        <div class="c2-code-viewer-body">${this.renderCode()} ${this.copyable && !this.hasTitle ? this.renderCopyButton() : nothing}</div>
+      </div>
+    `;
+	}
+};
+__decorate([property()], CodeViewer.prototype, "code", void 0);
+__decorate([property({ reflect: true })], CodeViewer.prototype, "language", void 0);
+__decorate([property()], CodeViewer.prototype, "theme", void 0);
+__decorate([property({ attribute: "dark-theme" })], CodeViewer.prototype, "darkTheme", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "color-scheme"
+})], CodeViewer.prototype, "colorScheme", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CodeViewer.prototype, "wrap", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CodeViewer.prototype, "inline", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "line-numbers"
+})], CodeViewer.prototype, "lineNumbers", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "start-line"
+})], CodeViewer.prototype, "startLine", void 0);
+__decorate([property({ attribute: "highlight-lines" })], CodeViewer.prototype, "highlightLines", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CodeViewer.prototype, "copyable", void 0);
+__decorate([state()], CodeViewer.prototype, "slotCode", void 0);
+__decorate([state()], CodeViewer.prototype, "hasTitle", void 0);
+__decorate([state()], CodeViewer.prototype, "highlighted", void 0);
+__decorate([state()], CodeViewer.prototype, "copied", void 0);
+CodeViewer = __decorate([customElement("c2-code-viewer")], CodeViewer);
+/** Removes leading/trailing blank lines and the indentation shared by every non-empty line. */
+function dedent(text) {
+	const lines = text.replace(/\r\n?/g, "\n").split("\n");
+	while (lines.length && lines[0].trim() === "") lines.shift();
+	while (lines.length && lines[lines.length - 1].trim() === "") lines.pop();
+	const indent = Math.min(...lines.filter((l) => l.trim() !== "").map((l) => l.match(/^[ \t]*/)[0].length));
+	return lines.map((l) => l.slice(Number.isFinite(indent) ? indent : 0)).join("\n");
+}
+//#endregion
+export { CodeViewer, dedent };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@c2n/code-viewer",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/code-viewer.js",
+  "exports": {
+    ".": {
+      "default": "./dist/code-viewer.js",
+      "types": "./types/src/code-viewer.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "code-viewer",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "@lit/task": "1.0.3",
+    "lit": "3.3.3",
+    "shiki": "4.4.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*",
+    "@types/hast": "^3.0.5"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/code-viewer.d.ts

@@ -0,0 +1,142 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { Task } from '@lit/task';
+import { type HighlightResult, type ThemeName } from './shiki';
+export type { ThemeName } from './shiki';
+/**
+ * Syntax-highlighted source code powered by shiki. Grammars and themes are loaded on demand into one shared
+ * highlighter, so many viewers on a page cost one engine. The raw code renders immediately as plain text (also on the
+ * server) and is upgraded in place once highlighted.
+ *
+ * Source: the `code` property, or the default slot. Wrap slotted text in a `<pre>` (formatters such as Prettier collapse
+ * whitespace inside custom elements but leave `<pre>` alone) and markup samples in a `<template>` so the browser does
+ * not parse them. Common indentation is stripped.
+ *
+ * @tag c2-code-viewer
+ *
+ * @slot - Source code, in a `<pre>` (text) or a `<template>` (markup). Ignored when the `code` property is set.
+ * @slot title - Header label, typically a file name. Shown above the code when present.
+ * @slot copy-icon - Replaces the default copy icon.
+ * @slot copied-icon - Replaces the default check icon shown after copying.
+ *
+ * @event {CustomEvent<{ code: string }>} code-copy - Fired after the copy button put the code on the clipboard.
+ *
+ * @cssproperty {background} --c2-code-viewer--background - Overrides the theme background.
+ * @cssproperty {color} --c2-code-viewer--color - Overrides the theme foreground.
+ * @cssproperty {font-family} [--c2-code-viewer--font-family=ui-monospace, SFMono-Regular, Menlo, Consolas, monospace]
+ * @cssproperty {font-size} [--c2-code-viewer--font-size=13px]
+ * @cssproperty {line-height} [--c2-code-viewer--line-height=1.6]
+ * @cssproperty {tab-size} [--c2-code-viewer--tab-size=2]
+ * @cssproperty {pixel} --c2-code-viewer--max-height - The code scrolls vertically past this height.
+ *
+ * @cssproperty {padding} [--c2-code-viewer--padding-top=12px]
+ * @cssproperty {padding} [--c2-code-viewer--padding-right=16px]
+ * @cssproperty {padding} [--c2-code-viewer--padding-bottom=12px]
+ * @cssproperty {padding} [--c2-code-viewer--padding-left=16px]
+ *
+ * @cssproperty {border} [--c2-code-viewer--border-top=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-code-viewer--border-right=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-code-viewer--border-bottom=1px solid rgb(213, 213, 213)]
+ * @cssproperty {border} [--c2-code-viewer--border-left=1px solid rgb(213, 213, 213)]
+ * @cssproperty {box-shadow} --c2-code-viewer--box-shadow
+ *
+ * @cssproperty {border-radius} [--c2-code-viewer--border-top-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-code-viewer--border-top-right-radius=8px]
+ * @cssproperty {border-radius} [--c2-code-viewer--border-bottom-left-radius=8px]
+ * @cssproperty {border-radius} [--c2-code-viewer--border-bottom-right-radius=8px]
+ *
+ * @cssproperty {background} [--c2-code-viewer__header--background=rgba(127, 127, 127, 0.08)]
+ * @cssproperty {color} --c2-code-viewer__header--color
+ * @cssproperty {font-family} --c2-code-viewer__header--font-family - Defaults to the code font.
+ * @cssproperty {font-size} [--c2-code-viewer__header--font-size=12px]
+ * @cssproperty {padding} [--c2-code-viewer__header--padding-top=6px]
+ * @cssproperty {padding} [--c2-code-viewer__header--padding-right=8px]
+ * @cssproperty {padding} [--c2-code-viewer__header--padding-bottom=6px]
+ * @cssproperty {padding} [--c2-code-viewer__header--padding-left=16px]
+ * @cssproperty {border} [--c2-code-viewer__header--border-bottom=1px solid rgba(127, 127, 127, 0.2)]
+ *
+ * @cssproperty {pixel} [--c2-code-viewer__copy--size=28px]
+ * @cssproperty {pixel} [--c2-code-viewer__copy--icon-size=14px]
+ * @cssproperty {border-radius} [--c2-code-viewer__copy--border-radius=6px]
+ * @cssproperty {color} --c2-code-viewer__copy--color - Defaults to the code foreground at 70% opacity.
+ * @cssproperty {background} --c2-code-viewer__copy--background
+ * @cssproperty {background} [--c2-code-viewer__copy__hover--background=rgba(127, 127, 127, 0.15)]
+ * @cssproperty {color} [--c2-code-viewer__copy__copied--color=rgb(34, 197, 94)]
+ *
+ * @cssproperty {pixel} [--c2-code-viewer__line-numbers--min-width=2ch]
+ * @cssproperty {pixel} [--c2-code-viewer__line-numbers--gap=16px]
+ * @cssproperty {color} --c2-code-viewer__line-numbers--color - Defaults to the foreground at 45% opacity.
+ *
+ * @cssproperty {background} [--c2-code-viewer__line__highlighted--background=rgba(99, 102, 241, 0.12)]
+ * @cssproperty {border} [--c2-code-viewer__line__highlighted--border-left=3px solid rgb(99, 102, 241)]
+ *
+ * @cssproperty {color} [--c2-code-viewer__theme--foreground=#24292e] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--background=#ffffff] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-constant=#005cc5] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-string=#032f62] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-comment=#6a737d] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-keyword=#d73a49] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-parameter=#24292e] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-function=#6f42c1] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-string-expression=#22863a] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-punctuation=#24292e] - `css-variables` theme only.
+ * @cssproperty {color} [--c2-code-viewer__theme--token-link=#032f62] - `css-variables` theme only.
+ */
+export declare class CodeViewer extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Source code. When unset, the default slot's text is used. A literal `\n` counts as a newline when the text has none. */
+    code: string | undefined;
+    /**
+     * Language id or alias (`ts`, `html`, `bash`, `diff`, …). Unknown values render as plain text. (Not `lang`: that is the
+     * global attribute for the natural language of the element's text and is read by assistive technology.)
+     */
+    language: string;
+    /** shiki theme name, or `css-variables`. */
+    theme: ThemeName;
+    /** Second theme for dark mode. When set both palettes are rendered and `color-scheme` picks one. */
+    darkTheme: ThemeName | undefined;
+    /** Which palette to show when `dark-theme` is set: follow the OS (`auto`), or force one. */
+    colorScheme: 'auto' | 'light' | 'dark';
+    /** Soft-wrap long lines instead of scrolling horizontally. */
+    wrap: boolean;
+    /** Render as an inline `<code>` fragment (no frame, no header). */
+    inline: boolean;
+    lineNumbers: boolean;
+    /** First line number when `line-numbers` is on. */
+    startLine: number;
+    /** Lines to emphasise, 1-based, e.g. `"2-4,7"`. */
+    highlightLines: string;
+    /** Show a copy-to-clipboard button. */
+    copyable: boolean;
+    private slotCode;
+    private hasTitle;
+    private highlighted;
+    private copied;
+    private copiedTimer;
+    /** Accepts the pre-1.0 `langage` attribute. */
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** The code being displayed: `code` or the dedented slot text. */
+    get source(): string;
+    private get highlightedLines();
+    protected highlightTask: Task<readonly [string, string, ThemeName, ThemeName | undefined, boolean, boolean, number, string], HighlightResult | {
+        readonly html: "";
+        readonly style: "";
+    }>;
+    willUpdate(changed: PropertyValues): void;
+    firstUpdated(): void;
+    private handleSlotChange;
+    private updateSlot;
+    /** Copies the displayed code to the clipboard. */
+    copy(): Promise<void>;
+    private renderCopyButton;
+    private renderCode;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/** Removes leading/trailing blank lines and the indentation shared by every non-empty line. */
+export declare function dedent(text: string): string;
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-code-viewer': CodeViewer;
+    }
+}
+//# sourceMappingURL=code-viewer.d.ts.map

package/types/src/code-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-viewer.d.ts","sourceRoot":"","sources":["../../src/code-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/E,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,OAAO,EAA0C,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAEtG,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAoB;IAE1C,2HAA2H;IAC/G,IAAI,EAAE,MAAM,GAAG,SAAS,CAAY;IAEhD;;;OAGG;IAC0B,QAAQ,SAAc;IAEnD,4CAA4C;IAChC,KAAK,EAAE,SAAS,CAAiB;IAE7C,oGAAoG;IAC7D,SAAS,EAAE,SAAS,GAAG,SAAS,CAAY;IAEnF,4FAA4F;IACpC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAS;IAEvG,8DAA8D;IAClB,IAAI,UAAQ;IAExD,mEAAmE;IACvB,MAAM,UAAQ;IAEa,WAAW,UAAQ;IAE1F,mDAAmD;IACE,SAAS,SAAI;IAElE,mDAAmD;IACP,cAAc,SAAK;IAE/D,uCAAuC;IACK,QAAQ,UAAQ;IAEnD,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,WAAW,CAAyC;IAC5D,OAAO,CAAC,MAAM,CAAQ;IAE/B,OAAO,CAAC,WAAW,CAA2C;IAE9D,+CAA+C;IAC/C,WAAoB,kBAAkB,aAErC;IAEQ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAQxF,kEAAkE;IAClE,IAAI,MAAM,IAAI,MAAM,CAInB;IAED,OAAO,KAAK,gBAAgB,GAY3B;IAED,SAAS,CAAC,aAAa;;;OAWrB;IAEO,UAAU,CAAC,OAAO,EAAE,cAAc;IAKlC,YAAY;IAIrB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAYlB,kDAAkD;IAC5C,IAAI;IASV,OAAO,CAAC,gBAAgB;IAwBxB,OAAO,CAAC,UAAU;IAUT,MAAM;CAqBhB;AAED,+FAA+F;AAC/F,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAM3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAA;KAC7B;CACF"}

package/types/src/shiki.d.ts

@@ -0,0 +1,35 @@
+import { type BundledLanguage } from 'shiki/langs';
+import { type BundledTheme } from 'shiki/themes';
+export type { BundledLanguage, BundledTheme };
+/** Built-in shiki theme name, or `css-variables` to colour tokens with the `--c2-code-viewer__theme--*` custom properties. */
+export type ThemeName = BundledTheme | 'css-variables';
+export declare const CSS_VARIABLES_THEME = "css-variables";
+/** Defaults baked into the `css-variables` theme (a GitHub-light-like palette), overridable per element. */
+export declare const CSS_VARIABLE_DEFAULTS: Record<string, string>;
+export interface HighlightOptions {
+    code: string;
+    lang: string;
+    theme: ThemeName;
+    /** Second theme: the output carries both palettes as `--shiki-light` / `--shiki-dark` variables. */
+    darkTheme?: ThemeName;
+    inline?: boolean;
+    lineNumbers?: boolean;
+    startLine?: number;
+    /** 1-based line numbers to mark as highlighted. */
+    highlightedLines?: Set<number>;
+}
+/** Resolves a language id or alias to what the highlighter knows, falling back to `plaintext`. */
+export declare function normalizeLang(lang: string | undefined): string;
+export declare function isKnownTheme(theme: string | undefined): theme is ThemeName;
+export interface HighlightResult {
+    /** `<pre class="shiki"><code>…</code></pre>`, or only the token spans when `inline`. */
+    html: string;
+    /**
+     * The theme's frame colours as custom properties (`--cv-bg` / `--cv-fg` for one theme, shiki's `--shiki-light(-bg)` /
+     * `--shiki-dark(-bg)` for two). Put it on the frame so the stylesheet can use them for header and body alike.
+     */
+    style: string;
+}
+/** Highlights `code`; the component stylesheet owns the frame look, the theme only supplies colours. */
+export declare function highlight({ code, lang, theme, darkTheme, inline, lineNumbers, startLine, highlightedLines, }: HighlightOptions): Promise<HighlightResult>;
+//# sourceMappingURL=shiki.d.ts.map

package/types/src/shiki.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiki.d.ts","sourceRoot":"","sources":["../../src/shiki.ts"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAA;AACpE,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAE/D,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,CAAA;AAE7C,8HAA8H;AAC9H,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,eAAe,CAAA;AAEtD,eAAO,MAAM,mBAAmB,kBAAkB,CAAA;AAGlD,4GAA4G;AAC5G,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAYxD,CAAA;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,SAAS,CAAA;IAChB,oGAAoG;IACpG,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC/B;AAUD,kGAAkG;AAClG,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAI9D;AAqCD,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,SAAS,CAE1E;AAED,MAAM,WAAW,eAAe;IAC9B,wFAAwF;IACxF,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wGAAwG;AACxG,wBAAsB,SAAS,CAAC,EAC9B,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAc,EACd,WAAmB,EACnB,SAAa,EACb,gBAAgB,GACjB,EAAE,gBAAgB,GAAG,OAAO,CAAC,eAAe,CAAC,CA2D7C"}