@imfusion/web-ui 0.5.1-dev.50.ga7a4f1c3 → 0.5.1-dev.51.gad24cd6e

package/dist/{code-qBbqAHK-.js → code-B83kAmnS.js}

@@ -94,21 +94,24 @@ var O = {
 	Inline: () => A,
 	InlineLink: () => j
 });
-function A({ className: e, copyable: n = !1, highlighted: r, children: i, ...a }) {
-	let { copied: o, copy: s } = D(), c = o ? T : E;
+function A({ className: e, copyable: n = !1, children: r, ...i }) {
+	let { copied: a, copy: o } = D(), s = l(null), c = a ? T : E;
 	return /* @__PURE__ */ f("code", {
-		...a,
+		...i,
 		"data-imf-ui-component": "Code.Inline",
 		className: t(O.inline, e),
 		children: [
-			r ?? i,
+			/* @__PURE__ */ d("span", {
+				ref: s,
+				children: r
+			}),
 			n && /* @__PURE__ */ d("span", { className: O.separator }),
 			n && /* @__PURE__ */ d("button", {
 				type: "button",
 				className: O.inlineCopy,
-				"data-copied": o || void 0,
-				"aria-label": o ? "Copied" : "Copy",
-				onClick: () => s(i),
+				"data-copied": a || void 0,
+				"aria-label": a ? "Copied" : "Copy",
+				onClick: () => o(s.current?.textContent ?? ""),
 				children: /* @__PURE__ */ d(c, {
 					size: 12,
 					strokeWidth: 2,
@@ -145,8 +148,8 @@ function j({ className: e, kind: n = "external", children: r, ...i }) {
 	});
 }
 j.displayName = "Code.InlineLink";
-function M({ className: e, language: n, hideCopy: r = !1, highlighted: i, children: a, ...o }) {
-	let { copied: s, copy: c } = D(), l = s ? T : E;
+function M({ className: e, language: n, hideCopy: r = !1, children: i, ...a }) {
+	let { copied: o, copy: s } = D(), c = l(null), u = o ? T : E;
 	return /* @__PURE__ */ f("div", {
 		"data-imf-ui-component": "Code.Block",
 		className: t(O.block, e),
@@ -158,19 +161,22 @@ function M({ className: e, language: n, hideCopy: r = !1, highlighted: i, childr
 			!r && /* @__PURE__ */ d("button", {
 				type: "button",
 				className: O.copy,
-				"data-copied": s || void 0,
-				"aria-label": s ? "Copied" : "Copy",
-				onClick: () => c(a),
-				children: /* @__PURE__ */ d(l, {
+				"data-copied": o || void 0,
+				"aria-label": o ? "Copied" : "Copy",
+				onClick: () => s(c.current?.textContent ?? ""),
+				children: /* @__PURE__ */ d(u, {
 					size: 12,
 					strokeWidth: 2,
 					"aria-hidden": !0
 				})
 			}),
 			/* @__PURE__ */ d("pre", {
-				...o,
+				...a,
 				className: O.pre,
-				children: /* @__PURE__ */ d("code", { children: i ?? a })
+				children: /* @__PURE__ */ d("code", {
+					ref: c,
+					children: i
+				})
 			})
 		]
 	});

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

@@ -1,19 +1,15 @@
 type InlineProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
-    /** The inline code, as a raw string — also the value copied when `copyable`. */
-    children: string;
+    /** Code content shown in the chip. The copy button copies its rendered text. */
+    children: React.ReactNode;
     /** Show a small copy button on the right, behind a hairline separator. @default false */
     copyable?: boolean;
-    /** Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot. */
-    highlighted?: React.ReactNode;
 };
 /**
  * Code.Inline — an inline code fragment (a `<code>` chip) for use inside running
- * text. Dumb: styling only — syntax coloring arrives pre-rendered through the
- * `highlighted` slot (the code-highlight integration supplies it). `Typo.InlineCode`
- * renders this under the hood so inline-code chrome is defined in one place.
- * Children must be a string so an opted-in copy button has clean text to copy.
+ * text. `Typo.InlineCode` renders this under the hood so inline-code chrome is
+ * defined in one place. The copy button copies the rendered text.
  */
-export declare function Inline({ className, copyable, highlighted, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Inline({ className, copyable, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Inline {
     var displayName: string;
 }
@@ -36,24 +32,20 @@ export declare namespace InlineLink {
     var displayName: string;
 }
 type BlockProps = Omit<React.HTMLAttributes<HTMLPreElement>, "children"> & {
-    /** The code to display, as a raw string — also the value copied by the copy button. */
-    children: string;
+    /** Code content shown in the block. The copy button copies its rendered text. */
+    children: React.ReactNode;
     /** Language label shown in the corner notch. Omit to hide the notch. */
     language?: string;
     /** Hide the copy button. @default false */
     hideCopy?: boolean;
-    /** Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot. */
-    highlighted?: React.ReactNode;
 };
 /**
  * Code.Block — a fenced code block on a flat brand surface, with an optional
  * chamfered language notch (top-left) and a copy button (top-right). The
- * surface follows the global corner-radius token when a preset opts in.
- * Dumb: styling only — syntax coloring arrives pre-rendered through the
- * `highlighted` slot (the code-highlight integration supplies it). Children
- * must be a string so the copy button has clean text to copy.
+ * surface follows the global corner-radius token when a preset opts in. The
+ * copy button copies the rendered text.
  */
-export declare function Block({ className, language, hideCopy, highlighted, children, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function Block({ className, language, hideCopy, children, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Block {
     var displayName: string;
 }

package/dist/index.js

@@ -1,6 +1,6 @@
 import { a as e, i as t, n, r, t as i } from "./meta-B8C51eyL.js";
 import { $ as a, $n as o, $t as s, A as c, An as l, At as u, B as d, Bn as f, Bt as p, Cn as m, Ct as h, D as g, Dn as _, Dt as v, E as y, En as b, Et as x, F as S, Fn as C, Ft as w, G as T, Gn as E, Gt as D, H as O, Hn as k, Ht as A, I as j, In as M, It as N, J as P, Jn as F, Jt as I, K as L, Kn as ee, Kt as te, L as ne, Ln as R, Lt as z, M as re, Mn as B, Mt as V, N as H, Nn as ie, Nt as ae, O as U, On as oe, Ot as se, P as ce, Pn as W, Pt as le, Q as ue, Qn as de, Qt as fe, R as G, Rn as pe, Rt as me, Sn as he, St as ge, T as _e, Tn as ve, Tt as ye, U as be, Un as xe, Ut as Se, V as Ce, Vn as we, Vt as Te, W as Ee, Wn as De, Wt as Oe, X as ke, Xn as Ae, Xt as je, Y as Me, Yn as Ne, Yt as Pe, Z as Fe, Zn as Ie, Zt as Le, _ as Re, _n as ze, _t as Be, an as Ve, ar as He, at as Ue, bn as We, bt as Ge, c as Ke, cn as qe, cr as Je, ct as Ye, d as Xe, dn as Ze, dr as Qe, dt as $e, en as et, er as tt, et as nt, f as rt, fn as it, fr as at, ft as ot, gn as st, gt as ct, hn as lt, ht as ut, in as dt, ir as ft, it as pt, j as mt, jn as ht, jt as K, k as gt, kn as _t, kt as vt, l as yt, ln as bt, lr as xt, lt as St, m as Ct, mn as wt, mr as Tt, mt as Et, nn as Dt, nr as Ot, nt as kt, on as At, or as jt, ot as Mt, p as Nt, pn as Pt, pr as Ft, pt as It, q as Lt, qn as q, qt as Rt, rn as zt, rr as Bt, rt as Vt, s as Ht, sn as Ut, sr as Wt, st as Gt, tn as J, tr as Kt, tt as qt, u as Jt, un as Yt, ur as Xt, ut as Zt, vn as Qt, vt as $t, wn as en, wt as tn, xn as nn, xt as rn, yn as an, yt as on, z as sn, zn as cn, zt as ln } from "./tabs-CVp_SgBl.js";
-import { a as un, c as dn, d as fn, l as pn, o as mn, r as hn, s as gn, t as _n, u as vn } from "./code-qBbqAHK-.js";
+import { a as un, c as dn, d as fn, l as pn, o as mn, r as hn, s as gn, t as _n, u as vn } from "./code-B83kAmnS.js";
 import * as Y from "react";
 import { createContext as yn, useContext as bn, useEffect as xn, useLayoutEffect as Sn, useRef as Cn, useState as wn } from "react";
 import { Fragment as Tn, jsx as X, jsxs as En } from "react/jsx-runtime";

package/dist/integrations/code-highlight/code-highlight.d.ts

@@ -1,20 +1,22 @@
 import { Code } from '../../components/code';
 import { SupportedLanguage } from './highlighter';
-type BlockProps = Omit<React.ComponentProps<typeof Code.Block>, "highlighted" | "language"> & {
+type BlockProps = Omit<React.ComponentProps<typeof Code.Block>, "children" | "language"> & {
     /** Language of `children`: grammar for tokenization and label for the corner notch. Omit to hide the notch and skip highlighting. */
+    children: string;
     language?: SupportedLanguage;
 };
-/** Code.Block — the core `Code.Block` with TanStack Highlight tokens filling its `highlighted` slot. */
-export declare function Block({ language, children, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
+/** Code.Block — the core `Code.Block` with TanStack Highlight tokens rendered inside. */
+export declare function Block({ language, children, ...props }: BlockProps): import('react').FunctionComponentElement<any>;
 export declare namespace Block {
     var displayName: string;
 }
-type InlineProps = Omit<React.ComponentProps<typeof Code.Inline>, "highlighted"> & {
+type InlineProps = Omit<React.ComponentProps<typeof Code.Inline>, "children"> & {
     /** Grammar used to tokenize the fragment. Purely visual — the chip shows no language label. Omit for plain text. */
+    children: string;
     language?: SupportedLanguage;
 };
-/** Code.Inline — the core `Code.Inline` with TanStack Highlight tokens filling its `highlighted` slot. */
-export declare function Inline({ language, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
+/** Code.Inline — the core `Code.Inline` with TanStack Highlight tokens rendered inside. */
+export declare function Inline({ language, children, ...props }: InlineProps): import('react').FunctionComponentElement<any>;
 export declare namespace Inline {
     var displayName: string;
 }

package/dist/integrations/code-highlight.js

@@ -1,17 +1,17 @@
 import { a as e, t } from "../meta-B8C51eyL.js";
-import { i as n, n as r, r as i } from "../code-qBbqAHK-.js";
-import { useMemo as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { createHighlighter as s, defineLanguage as c, renderNodesToHtml as l, renderTokens as u } from "@tanstack/highlight/core";
-import { css as d } from "@tanstack/highlight/languages/css";
-import { json as f } from "@tanstack/highlight/languages/json";
-import { plaintext as p } from "@tanstack/highlight/languages/plaintext";
-import { shell as m } from "@tanstack/highlight/languages/shell";
-import { ts as h } from "@tanstack/highlight/languages/ts";
-import { tsx as g } from "@tanstack/highlight/languages/tsx";
-import { python as _ } from "@tanstack/highlight/languages/python";
+import { i as n, n as r, r as i } from "../code-B83kAmnS.js";
+import { cloneElement as a, useMemo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { createHighlighter as c, defineLanguage as l, renderNodesToHtml as u, renderTokens as d } from "@tanstack/highlight/core";
+import { css as f } from "@tanstack/highlight/languages/css";
+import { json as p } from "@tanstack/highlight/languages/json";
+import { plaintext as m } from "@tanstack/highlight/languages/plaintext";
+import { shell as h } from "@tanstack/highlight/languages/shell";
+import { ts as g } from "@tanstack/highlight/languages/ts";
+import { tsx as _ } from "@tanstack/highlight/languages/tsx";
+import { python as v } from "@tanstack/highlight/languages/python";
 //#region src/integrations/code-highlight/language-patterns.ts
-function v(e, t, n = []) {
+function y(e, t, n = []) {
 	let r = [], i = new Uint8Array(e.length);
 	for (let { start: e, end: t } of n) i.fill(1, e, t);
 	for (let n of t) {
@@ -41,7 +41,7 @@ function v(e, t, n = []) {
 }
 //#endregion
 //#region src/integrations/code-highlight/languages/cmake.ts
-var y = [
+var b = [
 	{
 		className: "string",
 		regex: /"(?:\\.|[^"\\\n])*"|\[(=*)\[[\s\S]*?\]\1\]/g
@@ -74,12 +74,12 @@ var y = [
 		className: "operator",
 		regex: /(?:LESS_EQUAL|GREATER_EQUAL|STREQUAL|IN_LIST|MATCHES|EQUAL|LESS|GREATER|AND|OR|NOT|[=<>+*/!-])/gi
 	}
-], b = c({
+], x = l({
 	name: "cmake",
 	tokenize(e) {
-		return v(e, y);
+		return y(e, b);
 	}
-}), x = [
+}), S = [
 	{
 		className: "comment",
 		regex: /\/\/[^\n]*|\/\*[\s\S]*?\*\//g
@@ -116,7 +116,7 @@ var y = [
 		className: "operator",
 		regex: /(?:<<=?|>>=?|->\*|->|\+\+|--|&&|\|\||==|!=|<=|>=|::|\+=|-=|\*=|\/=|%=|&=|\|=|\^=|[-+*/%=&|^!<>?:~])/g
 	}
-], S = c({
+], C = l({
 	name: "cpp",
 	aliases: [
 		"c++",
@@ -125,19 +125,19 @@ var y = [
 		"hpp"
 	],
 	tokenize(e) {
-		return v(e, x);
+		return y(e, S);
 	}
-}), C = [{
+}), w = [{
 	className: "function",
 	regex: /\b[A-Za-z_]\w*(?=\s*\()/g
-}], w = c({
+}], T = l({
 	name: "python",
 	aliases: ["py"],
 	tokenize(e, t) {
-		let n = _.tokenize(e, t), r = v(e, C, n);
+		let n = v.tokenize(e, t), r = y(e, w, n);
 		return [...n, ...r];
 	}
-}), T = {
+}), E = {
 	tsx: { aliases: ["typescriptreact"] },
 	ts: { aliases: ["typescript"] },
 	css: { aliases: ["scss"] },
@@ -156,69 +156,67 @@ var y = [
 	] },
 	python: { aliases: ["py"] },
 	cmake: { aliases: [] }
-}, E = Object.keys(T), D = [...E, ...Object.values(T).flatMap(({ aliases: e }) => e)];
-function O(e) {
-	return D.includes(e);
+}, D = Object.keys(E), O = [...D, ...Object.values(E).flatMap(({ aliases: e }) => e)];
+function k(e) {
+	return O.includes(e);
 }
-function k(e, t) {
+function A(e, t) {
 	return e.aliases.includes(t);
 }
-function A(e) {
-	for (let [t, n] of Object.entries(T)) if (k(n, e)) return t;
+function j(e) {
+	for (let [t, n] of Object.entries(E)) if (A(n, e)) return t;
 	return e;
 }
-var j = s({
+var M = c({
 	languages: [
+		_,
 		g,
-		h,
-		d,
-		m,
 		f,
-		S,
-		w,
-		b,
-		p
+		h,
+		p,
+		C,
+		T,
+		x,
+		m
 	],
 	fallbackLanguage: "plaintext"
 });
-function M(e, t) {
-	let n = A(t), { tokens: r } = j.tokenize(e, { lang: n });
-	return l(u(r));
+function N(e, t) {
+	let n = j(t), { tokens: r } = M.tokenize(e, { lang: n });
+	return u(d(r));
 }
 //#endregion
 //#region src/integrations/code-highlight/code-highlight.tsx
-var N = /* @__PURE__ */ e({
-	Block: () => F,
-	Inline: () => I,
+var P = /* @__PURE__ */ e({
+	Block: () => I,
+	Inline: () => L,
 	InlineLink: () => n
 });
-function P(e, t) {
-	return a(() => {
-		if (!(t == null || e === "")) return /* @__PURE__ */ o("span", { dangerouslySetInnerHTML: { __html: M(e, t) } });
+function F(e, t) {
+	return o(() => {
+		if (!(t == null || e === "")) return /* @__PURE__ */ s("span", { dangerouslySetInnerHTML: { __html: N(e, t) } });
 	}, [e, t]);
 }
-function F({ language: e, children: t, ...n }) {
-	let i = P(t, e);
-	return /* @__PURE__ */ o(r, {
+function I({ language: e, children: t, ...n }) {
+	let i = F(t, e);
+	return a(/* @__PURE__ */ s(r, {
 		...n,
 		language: e,
-		highlighted: i,
 		children: t
-	});
+	}), { children: i ?? t });
 }
-F.displayName = "Code.Block";
-function I({ language: e, children: t, ...n }) {
-	let r = P(t, e);
-	return /* @__PURE__ */ o(i, {
+I.displayName = "Code.Block";
+function L({ language: e, children: t, ...n }) {
+	let r = F(t, e);
+	return a(/* @__PURE__ */ s(i, {
 		...n,
-		highlighted: r,
 		children: t
-	});
+	}), { children: r ?? t });
 }
-I.displayName = "Code.Inline";
+L.displayName = "Code.Inline";
 //#endregion
 //#region src/integrations/code-highlight/code-highlight.meta.ts
-var L = {
+var R = {
 	name: "CodeHighlight",
 	category: t.display,
 	status: "experimental",
@@ -234,4 +232,4 @@ var L = {
 	}
 };
 //#endregion
-export { N as Code, E as SUPPORTED_LANGUAGES, L as codeHighlightMeta, O as isSupportedLanguage };
+export { P as Code, D as SUPPORTED_LANGUAGES, R as codeHighlightMeta, k as isSupportedLanguage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.5.1-dev.50.ga7a4f1c3",
+  "version": "0.5.1-dev.51.gad24cd6e",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "license": "UNLICENSED",

package/src/docgen/doc.gen.json

@@ -491,14 +491,14 @@
     "subComponents": [
       {
         "name": "Code.Block",
-        "description": "Code.Block — a fenced code block on a flat brand surface, with an optional\nchamfered language notch (top-left) and a copy button (top-right). The\nsurface follows the global corner-radius token when a preset opts in.\nDumb: styling only — syntax coloring arrives pre-rendered through the\n`highlighted` slot (the code-highlight integration supplies it). Children\nmust be a string so the copy button has clean text to copy.",
+        "description": "Code.Block — a fenced code block on a flat brand surface, with an optional\nchamfered language notch (top-left) and a copy button (top-right). The\nsurface follows the global corner-radius token when a preset opts in. The\ncopy button copies the rendered text.",
         "props": [
           {
             "name": "children",
             "required": true,
-            "type": "string",
+            "type": "ReactNode",
             "defaultValue": null,
-            "description": "The code to display, as a raw string — also the value copied by the copy button."
+            "description": "Code content shown in the block. The copy button copies its rendered text."
           },
           {
             "name": "hideCopy",
@@ -507,13 +507,6 @@
             "defaultValue": "false",
             "description": "Hide the copy button."
           },
-          {
-            "name": "highlighted",
-            "required": false,
-            "type": "ReactNode",
-            "defaultValue": null,
-            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
-          },
           {
             "name": "language",
             "required": false,
@@ -525,14 +518,14 @@
       },
       {
         "name": "Code.Inline",
-        "description": "Code.Inline — an inline code fragment (a `<code>` chip) for use inside running\ntext. Dumb: styling only — syntax coloring arrives pre-rendered through the\n`highlighted` slot (the code-highlight integration supplies it). `Typo.InlineCode`\nrenders this under the hood so inline-code chrome is defined in one place.\nChildren must be a string so an opted-in copy button has clean text to copy.",
+        "description": "Code.Inline — an inline code fragment (a `<code>` chip) for use inside running\ntext. `Typo.InlineCode` renders this under the hood so inline-code chrome is\ndefined in one place. The copy button copies the rendered text.",
         "props": [
           {
             "name": "children",
             "required": true,
-            "type": "string",
+            "type": "ReactNode",
             "defaultValue": null,
-            "description": "The inline code, as a raw string — also the value copied when `copyable`."
+            "description": "Code content shown in the chip. The copy button copies its rendered text."
           },
           {
             "name": "copyable",
@@ -540,13 +533,6 @@
             "type": "boolean",
             "defaultValue": "false",
             "description": "Show a small copy button on the right, behind a hairline separator."
-          },
-          {
-            "name": "highlighted",
-            "required": false,
-            "type": "ReactNode",
-            "defaultValue": null,
-            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
           }
         ]
       },
@@ -4771,9 +4757,9 @@
           {
             "name": "children",
             "required": true,
-            "type": "string",
+            "type": "ReactNode",
             "defaultValue": null,
-            "description": "The inline code, as a raw string — also the value copied when `copyable`."
+            "description": "Code content shown in the chip. The copy button copies its rendered text."
           },
           {
             "name": "copyable",
@@ -4781,13 +4767,6 @@
             "type": "boolean",
             "defaultValue": "false",
             "description": "Show a small copy button on the right, behind a hairline separator."
-          },
-          {
-            "name": "highlighted",
-            "required": false,
-            "type": "ReactNode",
-            "defaultValue": null,
-            "description": "Pre-rendered display content (e.g. syntax-highlighted tokens) shown in place of `children`, which stays the copied value. The code-highlight integration fills this slot."
           }
         ]
       },
@@ -4915,14 +4894,14 @@
     "subComponents": [
       {
         "name": "CodeHighlight.Block",
-        "description": "Code.Block — the core `Code.Block` with TanStack Highlight tokens filling its `highlighted` slot.",
+        "description": "Code.Block — the core `Code.Block` with TanStack Highlight tokens rendered inside.",
         "props": [
           {
             "name": "children",
             "required": true,
             "type": "string",
             "defaultValue": null,
-            "description": "The code to display, as a raw string — also the value copied by the copy button."
+            "description": "Language of `children`: grammar for tokenization and label for the corner notch. Omit to hide the notch and skip highlighting."
           },
           {
             "name": "hideCopy",
@@ -4936,20 +4915,20 @@
             "required": false,
             "type": "SupportedLanguage",
             "defaultValue": null,
-            "description": "Language of `children`: grammar for tokenization and label for the corner notch. Omit to hide the notch and skip highlighting."
+            "description": ""
           }
         ]
       },
       {
         "name": "CodeHighlight.Inline",
-        "description": "Code.Inline — the core `Code.Inline` with TanStack Highlight tokens filling its `highlighted` slot.",
+        "description": "Code.Inline — the core `Code.Inline` with TanStack Highlight tokens rendered inside.",
         "props": [
           {
             "name": "children",
             "required": true,
             "type": "string",
             "defaultValue": null,
-            "description": "The inline code, as a raw string — also the value copied when `copyable`."
+            "description": "Grammar used to tokenize the fragment. Purely visual — the chip shows no language label. Omit for plain text."
           },
           {
             "name": "copyable",
@@ -4963,7 +4942,7 @@
             "required": false,
             "type": "SupportedLanguage",
             "defaultValue": null,
-            "description": "Grammar used to tokenize the fragment. Purely visual — the chip shows no language label. Omit for plain text."
+            "description": ""
           }
         ]
       },