@kekonic/diagrams-ui 1.0.0-rc.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kekonic
+
+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,34 @@
+# @kekonic/diagrams-ui
+
+React components and browser-facing helpers for KDiagram:
+
+- **UI tokens** — shared application colors and typography (`@kekonic/diagrams-ui/chrome.css`)
+- **Shiki grammar** — KDiagram language for Starlight / Expressive Code (`@kekonic/diagrams-ui/shiki`)
+- **Embed helpers** — `renderKDiagramSvg` (SSR), `KDiagramLive` (React → Lit `<k-diagram>`), `KDiagramPlayground` (editable + live)
+
+## Usage
+
+```ts
+import { renderKDiagramSvg, KDiagramLive } from "@kekonic/diagrams-ui";
+import { KDiagramPlayground } from "@kekonic/diagrams-ui/playground";
+import { kdiagramLanguage } from "@kekonic/diagrams-ui/shiki";
+```
+
+```css
+@import "@kekonic/diagrams-ui/chrome.css";
+@import "@kekonic/diagrams-ui/live.css";
+@import "@kekonic/diagrams-ui/playground.css";
+```
+
+`KDiagramLive` is a thin `@lit/react` wrapper around `@kekonic/diagrams-element`’s
+`<k-diagram>`. Prefer the Lit element directly outside React.
+
+The root entry contains the static helper and live React embed only. Playground and Shiki use
+separate entry points so a live diagram does not pull editor/highlighter code. `KDiagramPlayground`
+lazy-loads Shiki and passes animation selection, autoplay, loop, and control props to its live view;
+pair it with Astro `client:visible` when the editor starts below the fold.
+
+Both live components accept `frameless` to remove the diagram host border and panel background;
+controls remain independently configurable.
+
+Docs: [React](https://diagrams.kekonic.com/publish/react/) / [Editable playground](https://diagrams.kekonic.com/publish/react/#editable-playground).

package/dist/KDiagramLive-CnGvR1jR.mjs

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import { KDiagramElement, K_DIAGRAM_TAG } from "@kekonic/diagrams-element";
+import { jsx } from "react/jsx-runtime";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region src/diagram/KDiagramLive.tsx
+var KDiagramLive_exports = /* @__PURE__ */ __exportAll({ KDiagramLive: () => KDiagramLive });
+/** Lit + React prop inference drifts when the element surface grows; keep React props explicit. */
+const KDiagramReact = createComponent({
+	react: React,
+	tagName: K_DIAGRAM_TAG,
+	elementClass: KDiagramElement,
+	events: { onKDiagramRender: "kdiagram-render" }
+});
+/**
+* React thin wrapper around Lit `<k-diagram>`.
+* Same interactive host as HTML embeds — pan/zoom, theme, live `source` updates.
+*/
+const KDiagramLive = React.forwardRef(function KDiagramLive({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(KDiagramReact, {
+		ref,
+		className: ["kd-live", className].filter(Boolean).join(" "),
+		...props
+	});
+});
+//#endregion
+export { KDiagramLive_exports as n, KDiagramLive as t };
+
+//# sourceMappingURL=KDiagramLive-CnGvR1jR.mjs.map

package/dist/KDiagramLive-CnGvR1jR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"KDiagramLive-CnGvR1jR.mjs","names":[],"sources":["../src/diagram/KDiagramLive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport { KDiagramElement, K_DIAGRAM_TAG } from \"@kekonic/diagrams-element\";\nimport type { InteractiveRenderOptions, RenderResult, ThemeMode } from \"@kekonic/diagrams\";\n\nexport type KDiagramLiveProps = {\n  source: string;\n  /** Diagram theme. `\"auto\"` follows the host page (`html[data-theme]`). */\n  theme?: ThemeMode | \"auto\";\n  className?: string;\n  /** Remove the host border and panel background. Controls remain independently configurable. */\n  frameless?: boolean;\n  /** Sun/moon control that dogfoods theme swaps. */\n  showThemeToggle?: boolean;\n  /** Zoom / fit / fullscreen controls. */\n  showViewControls?: boolean;\n  /** Compact render stats badge (floating). Off by default for a clean embed. */\n  showStats?: boolean;\n  /** Animation play/scrub chrome when an animation exists. Default on. */\n  showAnimationControls?: boolean;\n  /** Start playing when the diagram mounts. */\n  autoplay?: boolean;\n  /** Loop the active animation. */\n  animationLoop?: boolean;\n  /** Preferred animation name or id (authored blocks). */\n  animation?: string;\n  height?: number | string;\n  options?: Omit<InteractiveRenderOptions, \"theme\">;\n  /** Fired after mount / source / theme renders complete. */\n  onKDiagramRender?: (event: CustomEvent<RenderResult>) => void;\n};\n\n/** Lit + React prop inference drifts when the element surface grows; keep React props explicit. */\nconst KDiagramReact = createComponent({\n  react: React,\n  tagName: K_DIAGRAM_TAG,\n  elementClass: KDiagramElement,\n  events: {\n    onKDiagramRender: \"kdiagram-render\",\n  },\n}) as unknown as React.ForwardRefExoticComponent<\n  KDiagramLiveProps & React.RefAttributes<KDiagramElement>\n>;\n\n/**\n * React thin wrapper around Lit `<k-diagram>`.\n * Same interactive host as HTML embeds — pan/zoom, theme, live `source` updates.\n */\nexport const KDiagramLive = React.forwardRef<KDiagramElement, KDiagramLiveProps>(\n  function KDiagramLive({ className, ...props }, ref) {\n    return (\n      <KDiagramReact\n        ref={ref}\n        className={[\"kd-live\", className].filter(Boolean).join(\" \")}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCA,MAAM,gBAAgB,gBAAgB;CACpC,OAAO;CACP,SAAS;CACT,cAAc;CACd,QAAQ,EACN,kBAAkB,kBACpB;AACF,CAAC;;;;;AAQD,MAAa,eAAe,MAAM,WAChC,SAAS,aAAa,EAAE,WAAW,GAAG,SAAS,KAAK;CAClD,OACE,oBAAC,eAAD;EACO;EACL,WAAW,CAAC,WAAW,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC1D,GAAI;CACL,CAAA;AAEL,CACF"}

package/dist/KDiagramLive-Cx3hrc2_.d.mts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { KDiagramElement } from "@kekonic/diagrams-element";
+import { InteractiveRenderOptions, RenderResult, ThemeMode } from "@kekonic/diagrams";
+
+//#region src/diagram/KDiagramLive.d.ts
+type KDiagramLiveProps = {
+  source: string; /** Diagram theme. `"auto"` follows the host page (`html[data-theme]`). */
+  theme?: ThemeMode | "auto";
+  className?: string; /** Remove the host border and panel background. Controls remain independently configurable. */
+  frameless?: boolean; /** Sun/moon control that dogfoods theme swaps. */
+  showThemeToggle?: boolean; /** Zoom / fit / fullscreen controls. */
+  showViewControls?: boolean; /** Compact render stats badge (floating). Off by default for a clean embed. */
+  showStats?: boolean; /** Animation play/scrub chrome when an animation exists. Default on. */
+  showAnimationControls?: boolean; /** Start playing when the diagram mounts. */
+  autoplay?: boolean; /** Loop the active animation. */
+  animationLoop?: boolean; /** Preferred animation name or id (authored blocks). */
+  animation?: string;
+  height?: number | string;
+  options?: Omit<InteractiveRenderOptions, "theme">; /** Fired after mount / source / theme renders complete. */
+  onKDiagramRender?: (event: CustomEvent<RenderResult>) => void;
+};
+/**
+ * React thin wrapper around Lit `<k-diagram>`.
+ * Same interactive host as HTML embeds — pan/zoom, theme, live `source` updates.
+ */
+declare const KDiagramLive: React.ForwardRefExoticComponent<KDiagramLiveProps & React.RefAttributes<KDiagramElement>>;
+//#endregion
+export { KDiagramLiveProps as n, KDiagramLive as t };
+//# sourceMappingURL=KDiagramLive-Cx3hrc2_.d.mts.map

package/dist/index.d.mts

@@ -0,0 +1,17 @@
+import { n as KDiagramLiveProps, t as KDiagramLive } from "./KDiagramLive-Cx3hrc2_.mjs";
+import { RenderOptions, RenderResult } from "@kekonic/diagrams";
+
+//#region src/diagram/render-static.d.ts
+type StaticDiagramOptions = RenderOptions & {
+  /** Prefer snapshot CSS vars so SVGs look correct outside live theme CSS. */snapshotTheme?: boolean;
+};
+/**
+ * Server-safe SVG render for docs/SSR. Uses the shared font measurer in Node.
+ */
+declare function renderKDiagramSvg(source: string, options?: StaticDiagramOptions): Promise<{
+  svg: string;
+  diagnostics: RenderResult["diagnostics"];
+}>;
+//#endregion
+export { KDiagramLive, type KDiagramLiveProps, type StaticDiagramOptions, renderKDiagramSvg };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,23 @@
+import { t as KDiagramLive } from "./KDiagramLive-CnGvR1jR.mjs";
+//#region src/diagram/render-static.ts
+/**
+* Server-safe SVG render for docs/SSR. Uses the shared font measurer in Node.
+*/
+async function renderKDiagramSvg(source, options = {}) {
+	const { KDiagram } = await import("@kekonic/diagrams");
+	const { snapshotTheme = true, theme = "dark", ...rest } = options;
+	const result = await KDiagram.renderToSvg(source, {
+		...rest,
+		theme,
+		snapshotTheme,
+		presentation: rest.presentation
+	});
+	return {
+		svg: result.svg ?? "",
+		diagnostics: result.diagnostics
+	};
+}
+//#endregion
+export { KDiagramLive, renderKDiagramSvg };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/diagram/render-static.ts"],"sourcesContent":["import type { RenderOptions, RenderResult } from \"@kekonic/diagrams\";\n\nexport type StaticDiagramOptions = RenderOptions & {\n  /** Prefer snapshot CSS vars so SVGs look correct outside live theme CSS. */\n  snapshotTheme?: boolean;\n};\n\n/**\n * Server-safe SVG render for docs/SSR. Uses the shared font measurer in Node.\n */\nexport async function renderKDiagramSvg(\n  source: string,\n  options: StaticDiagramOptions = {},\n): Promise<{\n  svg: string;\n  diagnostics: RenderResult[\"diagnostics\"];\n}> {\n  const { KDiagram } = await import(\"@kekonic/diagrams\");\n  const { snapshotTheme = true, theme = \"dark\", ...rest } = options;\n  const result = await KDiagram.renderToSvg(source, {\n    ...rest,\n    theme,\n    snapshotTheme,\n    // Chromeless by default — opt into title/legend/etc. via options or the DSL.\n    presentation: rest.presentation,\n  });\n  return { svg: result.svg ?? \"\", diagnostics: result.diagnostics };\n}\n"],"mappings":";;;;;AAUA,eAAsB,kBACpB,QACA,UAAgC,CAAC,GAIhC;CACD,MAAM,EAAE,aAAa,MAAM,OAAO;CAClC,MAAM,EAAE,gBAAgB,MAAM,QAAQ,QAAQ,GAAG,SAAS;CAC1D,MAAM,SAAS,MAAM,SAAS,YAAY,QAAQ;EAChD,GAAG;EACH;EACA;EAEA,cAAc,KAAK;CACrB,CAAC;CACD,OAAO;EAAE,KAAK,OAAO,OAAO;EAAI,aAAa,OAAO;CAAY;AAClE"}

package/dist/playground.d.mts

@@ -0,0 +1,57 @@
+import { n as KDiagramLiveProps } from "./KDiagramLive-Cx3hrc2_.mjs";
+import { ThemeMode } from "@kekonic/diagrams";
+
+//#region src/diagram/KDiagramPlayground.d.ts
+type KDiagramPlaygroundProps = {
+  /** Initial KDiagram source (also the Reset target). */source: string;
+  theme?: ThemeMode | "auto";
+  className?: string; /** Remove the live diagram's host border and panel background. */
+  frameless?: boolean; /** Source pane + diagram side-by-side, stacked, or gallery (diagram-first). */
+  layout?: "split" | "stacked" | "gallery"; /** Debounce before `controller.update` (ms). */
+  debounceMs?: number;
+  editable?: boolean;
+  showThemeToggle?: boolean;
+  showViewControls?: boolean;
+  showStats?: boolean;
+  showAnimationControls?: boolean;
+  autoplay?: boolean;
+  animationLoop?: boolean;
+  animation?: string;
+  /**
+   * Playground root height — both panes stretch to fill.
+   * Diagram viewport flexes inside; no separate short editor box.
+   */
+  height?: number | string;
+  /**
+   * Minimum height for the source editor region when the root is not stretched
+   * (e.g. stacked layout without an explicit `height`).
+   */
+  editorHeight?: number | string;
+  options?: KDiagramLiveProps["options"];
+};
+/**
+ * Docs dogfood embed: editable KDiagram source (Shiki) + live diagram (`KDiagramLive`).
+ * Shiki and the render path load lazily on mount / first highlight.
+ */
+declare function KDiagramPlayground({
+  source,
+  theme,
+  className,
+  frameless,
+  layout,
+  debounceMs,
+  editable,
+  showThemeToggle,
+  showViewControls,
+  showStats,
+  showAnimationControls,
+  autoplay,
+  animationLoop,
+  animation,
+  height,
+  editorHeight,
+  options
+}: KDiagramPlaygroundProps): import("react").JSX.Element;
+//#endregion
+export { KDiagramPlayground, type KDiagramPlaygroundProps };
+//# sourceMappingURL=playground.d.mts.map

package/dist/playground.mjs

@@ -0,0 +1,226 @@
+import { Suspense, lazy, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/diagram/KDiagramPlayground.tsx
+const KDiagramLive = lazy(async () => {
+	return { default: (await import("./KDiagramLive-CnGvR1jR.mjs").then((n) => n.n)).KDiagramLive };
+});
+/** Kick off Shiki as soon as this island module evaluates (still lazy vs the page). */
+const highlightModule = import("./shiki/highlight.mjs");
+function escapeHtml(text) {
+	return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+}
+function cssSize(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+function copyTextFallback(text) {
+	const input = document.createElement("textarea");
+	input.value = text;
+	input.setAttribute("readonly", "");
+	input.style.position = "fixed";
+	input.style.opacity = "0";
+	document.body.append(input);
+	input.select();
+	const copied = document.execCommand("copy");
+	input.remove();
+	return copied;
+}
+/**
+* Docs dogfood embed: editable KDiagram source (Shiki) + live diagram (`KDiagramLive`).
+* Shiki and the render path load lazily on mount / first highlight.
+*/
+function KDiagramPlayground({ source, theme = "auto", className, frameless = false, layout = "split", debounceMs = 280, editable = true, showThemeToggle = true, showViewControls = true, showStats = false, showAnimationControls = true, autoplay = false, animationLoop = false, animation, height = 360, editorHeight = 280, options }) {
+	const [draft, setDraft] = useState(source);
+	const [liveSource, setLiveSource] = useState(source);
+	const [highlightHtml, setHighlightHtml] = useState(null);
+	const [dirty, setDirty] = useState(false);
+	const [actionStatus, setActionStatus] = useState("");
+	const highlightRef = useRef(null);
+	const inputRef = useRef(null);
+	const labelId = useId();
+	const sourceGen = useRef(0);
+	useEffect(() => {
+		setDraft(source);
+		setLiveSource(source);
+		setDirty(false);
+	}, [source]);
+	useEffect(() => {
+		if (draft === liveSource) return;
+		const t = window.setTimeout(() => setLiveSource(draft), debounceMs);
+		return () => window.clearTimeout(t);
+	}, [
+		draft,
+		liveSource,
+		debounceMs
+	]);
+	useEffect(() => {
+		let cancelled = false;
+		const gen = ++sourceGen.current;
+		setHighlightHtml(`<pre><code>${escapeHtml(draft)}</code></pre>`);
+		(async () => {
+			try {
+				const { highlightKDiagram } = await highlightModule;
+				const html = await highlightKDiagram(draft);
+				if (!cancelled && gen === sourceGen.current) setHighlightHtml(html);
+			} catch {}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [draft]);
+	const syncScroll = (event) => {
+		const pre = highlightRef.current;
+		if (!pre) return;
+		pre.scrollTop = event.currentTarget.scrollTop;
+		pre.scrollLeft = event.currentTarget.scrollLeft;
+	};
+	const reset = () => {
+		setDraft(source);
+		setLiveSource(source);
+		setDirty(false);
+		inputRef.current?.focus();
+	};
+	const copySource = async () => {
+		let copied = false;
+		try {
+			if (navigator.clipboard?.writeText) {
+				await navigator.clipboard.writeText(draft);
+				copied = true;
+			} else copied = copyTextFallback(draft);
+		} catch {
+			copied = copyTextFallback(draft);
+		}
+		setActionStatus(copied ? "Copied source" : "Could not copy source");
+		window.setTimeout(() => setActionStatus(""), 1500);
+	};
+	const downloadSvg = async () => {
+		const { KDiagram } = await import("@kekonic/diagrams");
+		const resolvedTheme = theme === "auto" ? document.documentElement.dataset.theme === "light" ? "light" : "dark" : theme;
+		const result = await KDiagram.renderToSvg(draft, {
+			...options,
+			theme: resolvedTheme,
+			snapshotTheme: true
+		});
+		if (!result.ok || !result.svg) {
+			setActionStatus("Fix diagram errors before downloading");
+			return;
+		}
+		const url = URL.createObjectURL(new Blob([result.svg], { type: "image/svg+xml" }));
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "diagram.svg";
+		document.body.append(link);
+		link.click();
+		link.remove();
+		window.setTimeout(() => URL.revokeObjectURL(url), 1e3);
+		setActionStatus("Downloaded SVG");
+		window.setTimeout(() => setActionStatus(""), 1500);
+	};
+	const rootStyle = {
+		height: cssSize(height),
+		"--kd-play-editor-min": cssSize(editorHeight)
+	};
+	const hint = editable ? "Edit source — diagram updates live" : "Source + live diagram";
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["kd-play", className].filter(Boolean).join(" "),
+		style: rootStyle,
+		title: hint,
+		"aria-labelledby": labelId,
+		children: [/* @__PURE__ */ jsx("span", {
+			id: labelId,
+			className: "kd-play__sr-only",
+			children: hint
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "kd-play__body",
+			"data-layout": layout,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "kd-play__source",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "kd-play__pane-bar",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "kd-play__label",
+							children: "Source"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "kd-play__actions",
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "kd-play__btn",
+									onClick: () => void copySource(),
+									children: "Copy source"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "kd-play__btn",
+									onClick: () => void downloadSvg(),
+									children: "Download SVG"
+								}),
+								editable ? /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "kd-play__btn",
+									disabled: !dirty,
+									onClick: reset,
+									children: "Reset"
+								}) : null
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "kd-play__sr-only",
+							role: "status",
+							"aria-live": "polite",
+							children: actionStatus
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "kd-play__editor",
+					children: [/* @__PURE__ */ jsx("div", {
+						ref: highlightRef,
+						className: "kd-play__highlight",
+						"aria-hidden": true,
+						dangerouslySetInnerHTML: { __html: highlightHtml ?? `<pre><code>${escapeHtml(draft)}</code></pre>` }
+					}), editable ? /* @__PURE__ */ jsx("textarea", {
+						ref: inputRef,
+						className: "kd-play__input",
+						value: draft,
+						spellCheck: false,
+						autoCapitalize: "off",
+						autoCorrect: "off",
+						"aria-label": "KDiagram source",
+						onScroll: syncScroll,
+						onChange: (event) => {
+							setDraft(event.target.value);
+							setDirty(event.target.value !== source);
+						}
+					}) : null]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "kd-play__diagram",
+				children: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx("div", {
+						className: "kd-play__fallback",
+						children: "Loading diagram…"
+					}),
+					children: /* @__PURE__ */ jsx(KDiagramLive, {
+						source: liveSource,
+						theme,
+						height: "100%",
+						frameless,
+						showThemeToggle,
+						showViewControls,
+						showStats,
+						showAnimationControls,
+						autoplay,
+						animationLoop,
+						animation,
+						options
+					})
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { KDiagramPlayground };
+
+//# sourceMappingURL=playground.mjs.map

package/dist/playground.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.mjs","names":[],"sources":["../src/diagram/KDiagramPlayground.tsx"],"sourcesContent":["import {\n  lazy,\n  Suspense,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type UIEvent,\n} from \"react\";\nimport type { ThemeMode } from \"@kekonic/diagrams\";\nimport type { KDiagramLiveProps } from \"./KDiagramLive.tsx\";\n\nconst KDiagramLive = lazy(async () => {\n  const mod = await import(\"./KDiagramLive.tsx\");\n  return { default: mod.KDiagramLive };\n});\n\n/** Kick off Shiki as soon as this island module evaluates (still lazy vs the page). */\nconst highlightModule = import(\"../shiki/highlight.ts\");\n\nexport type KDiagramPlaygroundProps = {\n  /** Initial KDiagram source (also the Reset target). */\n  source: string;\n  theme?: ThemeMode | \"auto\";\n  className?: string;\n  /** Remove the live diagram's host border and panel background. */\n  frameless?: boolean;\n  /** Source pane + diagram side-by-side, stacked, or gallery (diagram-first). */\n  layout?: \"split\" | \"stacked\" | \"gallery\";\n  /** Debounce before `controller.update` (ms). */\n  debounceMs?: number;\n  editable?: boolean;\n  showThemeToggle?: boolean;\n  showViewControls?: boolean;\n  showStats?: boolean;\n  showAnimationControls?: boolean;\n  autoplay?: boolean;\n  animationLoop?: boolean;\n  animation?: string;\n  /**\n   * Playground root height — both panes stretch to fill.\n   * Diagram viewport flexes inside; no separate short editor box.\n   */\n  height?: number | string;\n  /**\n   * Minimum height for the source editor region when the root is not stretched\n   * (e.g. stacked layout without an explicit `height`).\n   */\n  editorHeight?: number | string;\n  options?: KDiagramLiveProps[\"options\"];\n};\n\nfunction escapeHtml(text: string): string {\n  return text\n    .replaceAll(\"&\", \"&amp;\")\n    .replaceAll(\"<\", \"&lt;\")\n    .replaceAll(\">\", \"&gt;\")\n    .replaceAll('\"', \"&quot;\");\n}\n\nfunction cssSize(value: number | string): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nfunction copyTextFallback(text: string): boolean {\n  const input = document.createElement(\"textarea\");\n  input.value = text;\n  input.setAttribute(\"readonly\", \"\");\n  input.style.position = \"fixed\";\n  input.style.opacity = \"0\";\n  document.body.append(input);\n  input.select();\n  const copied = document.execCommand(\"copy\");\n  input.remove();\n  return copied;\n}\n\n/**\n * Docs dogfood embed: editable KDiagram source (Shiki) + live diagram (`KDiagramLive`).\n * Shiki and the render path load lazily on mount / first highlight.\n */\nexport function KDiagramPlayground({\n  source,\n  theme = \"auto\",\n  className,\n  frameless = false,\n  layout = \"split\",\n  debounceMs = 280,\n  editable = true,\n  showThemeToggle = true,\n  showViewControls = true,\n  showStats = false,\n  showAnimationControls = true,\n  autoplay = false,\n  animationLoop = false,\n  animation,\n  height = 360,\n  editorHeight = 280,\n  options,\n}: KDiagramPlaygroundProps) {\n  const [draft, setDraft] = useState(source);\n  const [liveSource, setLiveSource] = useState(source);\n  const [highlightHtml, setHighlightHtml] = useState<string | null>(null);\n  const [dirty, setDirty] = useState(false);\n  const [actionStatus, setActionStatus] = useState(\"\");\n  const highlightRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const labelId = useId();\n  const sourceGen = useRef(0);\n\n  useEffect(() => {\n    setDraft(source);\n    setLiveSource(source);\n    setDirty(false);\n  }, [source]);\n\n  useEffect(() => {\n    if (draft === liveSource) return;\n    const t = window.setTimeout(() => setLiveSource(draft), debounceMs);\n    return () => window.clearTimeout(t);\n  }, [draft, liveSource, debounceMs]);\n\n  useEffect(() => {\n    let cancelled = false;\n    const gen = ++sourceGen.current;\n    // Plain text first; upgrade once the module-level Shiki import resolves.\n    setHighlightHtml(`<pre><code>${escapeHtml(draft)}</code></pre>`);\n    void (async () => {\n      try {\n        const { highlightKDiagram } = await highlightModule;\n        const html = await highlightKDiagram(draft);\n        if (!cancelled && gen === sourceGen.current) setHighlightHtml(html);\n      } catch {\n        // Keep plain text if Shiki cannot load in this host.\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [draft]);\n\n  const syncScroll = (event: UIEvent<HTMLTextAreaElement>) => {\n    const pre = highlightRef.current;\n    if (!pre) return;\n    pre.scrollTop = event.currentTarget.scrollTop;\n    pre.scrollLeft = event.currentTarget.scrollLeft;\n  };\n\n  const reset = () => {\n    setDraft(source);\n    setLiveSource(source);\n    setDirty(false);\n    inputRef.current?.focus();\n  };\n\n  const copySource = async () => {\n    let copied = false;\n    try {\n      if (navigator.clipboard?.writeText) {\n        await navigator.clipboard.writeText(draft);\n        copied = true;\n      } else {\n        copied = copyTextFallback(draft);\n      }\n    } catch {\n      copied = copyTextFallback(draft);\n    }\n    setActionStatus(copied ? \"Copied source\" : \"Could not copy source\");\n    window.setTimeout(() => setActionStatus(\"\"), 1_500);\n  };\n\n  const downloadSvg = async () => {\n    const { KDiagram } = await import(\"@kekonic/diagrams\");\n    const resolvedTheme =\n      theme === \"auto\"\n        ? document.documentElement.dataset.theme === \"light\"\n          ? \"light\"\n          : \"dark\"\n        : theme;\n    const result = await KDiagram.renderToSvg(draft, {\n      ...options,\n      theme: resolvedTheme,\n      snapshotTheme: true,\n    });\n    if (!result.ok || !result.svg) {\n      setActionStatus(\"Fix diagram errors before downloading\");\n      return;\n    }\n    const url = URL.createObjectURL(new Blob([result.svg], { type: \"image/svg+xml\" }));\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = \"diagram.svg\";\n    document.body.append(link);\n    link.click();\n    link.remove();\n    window.setTimeout(() => URL.revokeObjectURL(url), 1_000);\n    setActionStatus(\"Downloaded SVG\");\n    window.setTimeout(() => setActionStatus(\"\"), 1_500);\n  };\n\n  const rootStyle = {\n    height: cssSize(height),\n    \"--kd-play-editor-min\": cssSize(editorHeight),\n  } as CSSProperties;\n\n  const hint = editable ? \"Edit source — diagram updates live\" : \"Source + live diagram\";\n\n  return (\n    <div\n      className={[\"kd-play\", className].filter(Boolean).join(\" \")}\n      style={rootStyle}\n      title={hint}\n      aria-labelledby={labelId}\n    >\n      <span id={labelId} className=\"kd-play__sr-only\">\n        {hint}\n      </span>\n      <div className=\"kd-play__body\" data-layout={layout}>\n        <div className=\"kd-play__source\">\n          <div className=\"kd-play__pane-bar\">\n            <span className=\"kd-play__label\">Source</span>\n            <div className=\"kd-play__actions\">\n              <button type=\"button\" className=\"kd-play__btn\" onClick={() => void copySource()}>\n                Copy source\n              </button>\n              <button type=\"button\" className=\"kd-play__btn\" onClick={() => void downloadSvg()}>\n                Download SVG\n              </button>\n              {editable ? (\n                <button type=\"button\" className=\"kd-play__btn\" disabled={!dirty} onClick={reset}>\n                  Reset\n                </button>\n              ) : null}\n            </div>\n            <span className=\"kd-play__sr-only\" role=\"status\" aria-live=\"polite\">\n              {actionStatus}\n            </span>\n          </div>\n          <div className=\"kd-play__editor\">\n            <div\n              ref={highlightRef}\n              className=\"kd-play__highlight\"\n              aria-hidden\n              dangerouslySetInnerHTML={{\n                __html: highlightHtml ?? `<pre><code>${escapeHtml(draft)}</code></pre>`,\n              }}\n            />\n            {editable ? (\n              <textarea\n                ref={inputRef}\n                className=\"kd-play__input\"\n                value={draft}\n                spellCheck={false}\n                autoCapitalize=\"off\"\n                autoCorrect=\"off\"\n                aria-label=\"KDiagram source\"\n                onScroll={syncScroll}\n                onChange={(event) => {\n                  setDraft(event.target.value);\n                  setDirty(event.target.value !== source);\n                }}\n              />\n            ) : null}\n          </div>\n        </div>\n        <div className=\"kd-play__diagram\">\n          <Suspense fallback={<div className=\"kd-play__fallback\">Loading diagram…</div>}>\n            <KDiagramLive\n              source={liveSource}\n              theme={theme}\n              height=\"100%\"\n              frameless={frameless}\n              showThemeToggle={showThemeToggle}\n              showViewControls={showViewControls}\n              showStats={showStats}\n              showAnimationControls={showAnimationControls}\n              autoplay={autoplay}\n              animationLoop={animationLoop}\n              animation={animation}\n              options={options}\n            />\n          </Suspense>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/shiki/highlight.d.mts

@@ -0,0 +1,10 @@
+//#region src/shiki/highlight.d.ts
+/**
+ * Lazy Shiki highlighter for KDiagram source in docs embeds.
+ * Loaded on first highlight request — not on package import.
+ */
+/** Dual-theme HTML (CSS vars `--shiki-dark` / `--shiki-light`) for site theme toggles. */
+declare function highlightKDiagram(code: string): Promise<string>;
+//#endregion
+export { highlightKDiagram };
+//# sourceMappingURL=highlight.d.mts.map

package/dist/shiki/highlight.mjs

@@ -0,0 +1,27 @@
+//#region src/shiki/highlight.ts
+let highlighterPromise = null;
+async function getHighlighter() {
+	if (!highlighterPromise) highlighterPromise = (async () => {
+		const [{ createHighlighter }, { kdiagramLanguage }] = await Promise.all([import("shiki"), import("./kdiagram.mjs")]);
+		return createHighlighter({
+			themes: ["github-dark", "github-light"],
+			langs: [kdiagramLanguage]
+		});
+	})();
+	return highlighterPromise;
+}
+/** Dual-theme HTML (CSS vars `--shiki-dark` / `--shiki-light`) for site theme toggles. */
+async function highlightKDiagram(code) {
+	return (await getHighlighter()).codeToHtml(code.length > 0 ? code : " ", {
+		lang: "kdiagram",
+		themes: {
+			dark: "github-dark",
+			light: "github-light"
+		},
+		defaultColor: false
+	});
+}
+//#endregion
+export { highlightKDiagram };
+
+//# sourceMappingURL=highlight.mjs.map

package/dist/shiki/highlight.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.mjs","names":[],"sources":["../../src/shiki/highlight.ts"],"sourcesContent":["/**\n * Lazy Shiki highlighter for KDiagram source in docs embeds.\n * Loaded on first highlight request — not on package import.\n */\n\ntype Highlighter = Awaited<ReturnType<(typeof import(\"shiki\"))[\"createHighlighter\"]>>;\n\nlet highlighterPromise: Promise<Highlighter> | null = null;\n\nasync function getHighlighter(): Promise<Highlighter> {\n  if (!highlighterPromise) {\n    highlighterPromise = (async () => {\n      const [{ createHighlighter }, { kdiagramLanguage }] = await Promise.all([\n        import(\"shiki\"),\n        import(\"./kdiagram.ts\"),\n      ]);\n      return createHighlighter({\n        themes: [\"github-dark\", \"github-light\"],\n        // TextMate grammar object — compatible at runtime; Shiki's bundled lang union is narrower.\n        langs: [kdiagramLanguage as never],\n      });\n    })();\n  }\n  return highlighterPromise;\n}\n\n/** Dual-theme HTML (CSS vars `--shiki-dark` / `--shiki-light`) for site theme toggles. */\nexport async function highlightKDiagram(code: string): Promise<string> {\n  const highlighter = await getHighlighter();\n  return highlighter.codeToHtml(code.length > 0 ? code : \" \", {\n    lang: \"kdiagram\",\n    themes: {\n      dark: \"github-dark\",\n      light: \"github-light\",\n    },\n    defaultColor: false,\n  });\n}\n"],"mappings":";AAOA,IAAI,qBAAkD;AAEtD,eAAe,iBAAuC;CACpD,IAAI,CAAC,oBACH,sBAAsB,YAAY;EAChC,MAAM,CAAC,EAAE,qBAAqB,EAAE,sBAAsB,MAAM,QAAQ,IAAI,CACtE,OAAO,UACP,OAAO,iBACT,CAAC;EACD,OAAO,kBAAkB;GACvB,QAAQ,CAAC,eAAe,cAAc;GAEtC,OAAO,CAAC,gBAAyB;EACnC,CAAC;CACH,EAAA,CAAG;CAEL,OAAO;AACT;;AAGA,eAAsB,kBAAkB,MAA+B;CAErE,QAAO,MADmB,eAAe,EAAA,CACtB,WAAW,KAAK,SAAS,IAAI,OAAO,KAAK;EAC1D,MAAM;EACN,QAAQ;GACN,MAAM;GACN,OAAO;EACT;EACA,cAAc;CAChB,CAAC;AACH"}