@number10/jsx-components 5.0.0

package/dist/ColorPicker.js

@@ -0,0 +1,256 @@
+import { Text as e } from "./primitives/Text.js";
+import { VectorDrawContent as t } from "./primitives/VectorDrawContent.js";
+import { View as n } from "./primitives/View.js";
+import "./primitives.js";
+import { RadioGroup as r } from "./RadioGroup.js";
+import { Slider as i } from "./Slider.js";
+import { KNOWN_COMPONENTS as a, darken as o, getGlobalThemeDefaults as ee, hslToNumber as s, lighten as c, mergeThemes as l, numberToHex as te, numberToHsl as u, numberToRgb as ne, resolveComponentTheme as re, useEffect as d, useRef as ie, useState as f, useTheme as ae } from "@number10/jsx-core";
+import { jsx as p, jsxs as m } from "@number10/jsx-core/jsx-runtime";
+//#region src/ColorPicker.tsx
+var oe = {
+	title: "Color Picker",
+	tone: "Tone",
+	vivid: "Vivid",
+	muted: "Muted",
+	hue: "Hue",
+	saturation: "Saturation",
+	lightness: "Lightness",
+	close: "X"
+};
+function h(e, t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+function g(e, t, n) {
+	return s(h(e, 0, 360) / 360, h(t, 0, 100) / 100, h(n, 0, 100) / 100);
+}
+function _(e) {
+	let t = u(e);
+	return {
+		hue: Math.round(t.h * 360),
+		saturation: Math.round(t.s * 100),
+		lightness: Math.round(t.l * 100)
+	};
+}
+function v(s) {
+	let { value: u, defaultValue: v = 3113197, onChange: se, tone: y, defaultTone: ce = "vivid", onToneChange: le, onClose: b, showCloseButton: ue, showTone: de = !0, showSwatches: fe = !0, showRgbLabel: pe = !0, labels: me, trackLength: he, previewSize: ge, gradientSteps: _e, theme: x } = s, S = ae(), ve = x ? l(S ?? {}, x) : S, { props: C, nestedTheme: w } = re({
+		componentName: "ColorPicker",
+		globalTheme: ee(),
+		localTheme: ve,
+		knownComponents: a
+	}), T = _(u ?? v), [E, D] = f(T.hue), [O, k] = f(T.saturation), [A, j] = f(T.lightness), [M, N] = f(y ?? ce), P = ie(void 0), F = y ?? M, I = g(E, O, A), L = ne(I), R = te(I).toUpperCase(), z = {
+		...oe,
+		...C.labels ?? {},
+		...me ?? {}
+	}, B = C.labelStyle ?? {
+		color: "#ffffff",
+		fontSize: "12px"
+	}, ye = C.valueStyle ?? B, be = C.titleStyle ?? {
+		color: "#ffffff",
+		fontSize: "16px",
+		fontStyle: "bold"
+	}, V = he ?? C.trackLength ?? 280, H = C.trackHeight ?? 14, U = ge ?? C.previewSize ?? 116, W = _e ?? C.gradientSteps ?? 32, G = C.borderColor ?? 3489874, xe = C.backgroundColor ?? 1515566, Se = C.controlBackgroundColor ?? 2240583, K = C.thumbBorderColor ?? 16777215, q = C.swatchSize ?? 18, Ce = ue ?? b !== void 0;
+	d(() => {
+		if (u === void 0 || u === P.current) return;
+		let e = _(u);
+		D(e.hue), k(e.saturation), j(e.lightness);
+	}, [u]), d(() => {
+		y !== void 0 && y !== M && N(y);
+	}, [y, M]);
+	let we = (e, t, n, r = F) => {
+		let i = g(e, t, n);
+		P.current = i, se?.(i, {
+			hue: e,
+			saturation: t,
+			lightness: n,
+			tone: r
+		});
+	}, J = (e, t, n, r = F) => {
+		let i = Math.round(h(e, 0, 360)), a = Math.round(h(t, 0, 100)), o = Math.round(h(n, 0, 100));
+		D(i), k(a), j(o), we(i, a, o, r);
+	}, Te = (e) => {
+		let t = _(e);
+		J(t.hue, t.saturation, t.lightness);
+	}, Ee = (e) => {
+		let t = Math.round(e === "muted" ? O * .6 : h(O / .6, Math.max(O, 70), 100));
+		y === void 0 && N(e), le?.(e), J(E, t, A, e);
+	}, De = [
+		o(I, .35),
+		o(I, .15),
+		I,
+		c(I, .2),
+		c(I, .4)
+	], Y = C.thumbSize ?? 18, X = Y / 2, Oe = Math.max(1, Math.round(X * .22)), ke = l(w, { Slider: {
+		trackHeight: H,
+		trackBorderRadius: H / 2,
+		thumbSize: Y,
+		thumbBorderWidth: 2,
+		thumbBorderColor: K
+	} }), Z = (e) => () => /* @__PURE__ */ p(n, {
+		width: V,
+		height: H,
+		children: /* @__PURE__ */ p(t, { onDraw: (t) => {
+			let n = V / W;
+			for (let r = 0; r < W; r += 1) {
+				let i = W === 1 ? 1 : r / (W - 1);
+				t.fillStyle(e(i), 1), t.fillRect(r * n, 0, n + 1, H);
+			}
+		} })
+	}), Q = (e) => (n, r) => /* @__PURE__ */ p(t, {
+		scale: r ? 1.2 : 1,
+		onDraw: (t) => {
+			t.fillStyle(0, .32).fillCircle(0, Oe, X), t.fillStyle(e, 1).fillCircle(0, 0, X), t.lineStyle(2, K, 1).strokeCircle(0, 0, X), r && t.lineStyle(2, e, .7).strokeCircle(0, 0, X + 4);
+		}
+	}), $ = (t, r) => /* @__PURE__ */ m(n, {
+		direction: "row",
+		width: V,
+		justifyContent: "space-between",
+		children: [/* @__PURE__ */ p(e, {
+			text: t,
+			style: B
+		}), /* @__PURE__ */ p(e, {
+			text: r,
+			style: ye
+		})]
+	});
+	return /* @__PURE__ */ m(n, {
+		direction: "row",
+		gap: C.gap ?? 18,
+		padding: C.padding ?? 14,
+		backgroundColor: xe,
+		borderColor: G,
+		borderWidth: C.borderWidth ?? 1,
+		cornerRadius: C.cornerRadius ?? 8,
+		alignItems: "center",
+		theme: w,
+		children: [/* @__PURE__ */ m(n, {
+			gap: C.previewGap ?? 10,
+			width: Math.max(U, 132),
+			children: [
+				/* @__PURE__ */ p(n, {
+					width: U,
+					height: U,
+					backgroundColor: I,
+					borderColor: G,
+					borderWidth: C.previewBorderWidth ?? 2,
+					cornerRadius: C.previewCornerRadius ?? 8,
+					alignItems: "center",
+					justifyContent: "center",
+					children: /* @__PURE__ */ p(e, {
+						text: R,
+						style: C.hexStyle
+					})
+				}),
+				pe ? /* @__PURE__ */ p(e, {
+					text: z.formatRgb ? z.formatRgb(L) : `rgb ${L.r}, ${L.g}, ${L.b}`,
+					style: B
+				}) : null,
+				fe ? /* @__PURE__ */ p(n, {
+					direction: "row",
+					gap: C.swatchGap ?? 6,
+					children: De.map((e, t) => /* @__PURE__ */ p(n, {
+						width: q,
+						height: q,
+						backgroundColor: e,
+						borderColor: G,
+						borderWidth: 1,
+						cornerRadius: C.swatchCornerRadius ?? 4,
+						enableGestures: !0,
+						onTouch: () => Te(e)
+					}, `swatch-${t}`))
+				}) : null
+			]
+		}), /* @__PURE__ */ m(n, {
+			gap: C.controlGap ?? 12,
+			theme: ke,
+			children: [
+				/* @__PURE__ */ m(n, {
+					direction: "row",
+					justifyContent: "space-between",
+					alignItems: "center",
+					width: V,
+					children: [/* @__PURE__ */ p(e, {
+						text: z.title,
+						style: be
+					}), Ce ? /* @__PURE__ */ p(n, {
+						width: C.closeButtonSize ?? 24,
+						height: C.closeButtonSize ?? 24,
+						alignItems: "center",
+						justifyContent: "center",
+						backgroundColor: Se,
+						backgroundAlpha: C.controlBackgroundAlpha ?? .65,
+						borderColor: G,
+						borderWidth: 1,
+						cornerRadius: C.closeButtonCornerRadius ?? 5,
+						enableGestures: !0,
+						onTouch: () => b?.(),
+						children: /* @__PURE__ */ p(e, {
+							text: z.close,
+							style: B
+						})
+					}) : null]
+				}),
+				de ? /* @__PURE__ */ m(n, {
+					direction: "row",
+					gap: 12,
+					alignItems: "center",
+					children: [/* @__PURE__ */ p(e, {
+						text: z.tone,
+						style: B
+					}), /* @__PURE__ */ p(r, {
+						direction: "row",
+						options: [{
+							value: "vivid",
+							label: z.vivid
+						}, {
+							value: "muted",
+							label: z.muted
+						}],
+						value: F,
+						onChange: (e) => Ee(e)
+					})]
+				}) : null,
+				/* @__PURE__ */ m(n, {
+					gap: 6,
+					children: [$(z.hue, z.formatHue?.(E) ?? `${Math.round(E)}deg`), /* @__PURE__ */ p(i, {
+						value: E,
+						onChange: (e) => J(e, O, A),
+						min: 0,
+						max: 360,
+						step: 1,
+						trackLength: V,
+						renderTrack: Z((e) => g(e * 360, 100, 50)),
+						renderThumb: Q(g(E, 100, 50))
+					})]
+				}),
+				/* @__PURE__ */ m(n, {
+					gap: 6,
+					children: [$(z.saturation, z.formatSaturation?.(O) ?? `${Math.round(O)}%`), /* @__PURE__ */ p(i, {
+						value: O,
+						onChange: (e) => J(E, e, A),
+						min: 0,
+						max: 100,
+						step: 1,
+						trackLength: V,
+						renderTrack: Z((e) => g(E, e * 100, A)),
+						renderThumb: Q(I)
+					})]
+				}),
+				/* @__PURE__ */ m(n, {
+					gap: 6,
+					children: [$(z.lightness, z.formatLightness?.(A) ?? `${Math.round(A)}%`), /* @__PURE__ */ p(i, {
+						value: A,
+						onChange: (e) => J(E, O, e),
+						min: 0,
+						max: 100,
+						step: 1,
+						trackLength: V,
+						renderTrack: Z((e) => g(E, O, e * 100)),
+						renderThumb: Q(I)
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { v as ColorPicker };

package/dist/DebugPanel.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);let n=require(`@number10/jsx-core`),r=require(`@number10/jsx-core/jsx-runtime`);var i={fps:[`fps`,`frameMs`],perf:[`fps`,`frameMs`,`renderer`,`viewport`],vdom:[`mountsTotal`,`mountsByType`,`mountsByParent`,`mountsByKey`],textures:[`textureCount`],full:[`fps`,`frameMs`,`phaserVersion`,`renderer`,`viewport`,`textureCount`,`mountsTotal`,`mountsByType`,`mountsByParent`,`mountsByKey`,`debugFlags`]},a={fps:`FPS`,frameMs:`Frame ms`,phaserVersion:`Phaser`,renderer:`Renderer`,viewport:`Viewport`,textureCount:`Textures`,mountsTotal:`Mounts`,mountsByType:`Mounts/type`,mountsByParent:`Mounts/parent`,mountsByKey:`Mounts/key`,debugFlags:`Debug flags`};function o(e){if(typeof e==`string`)return e;if(typeof e==`number`||typeof e==`boolean`)return String(e);if(e===null)return`null`;if(e===void 0)return`undefined`;if(typeof e==`object`){let t=e;if(typeof t.name==`string`&&t.name.length>0)return t.name;if(typeof t.type==`string`)return t.type;if(typeof t.label==`string`)return t.label;let n=t.constructor;if(n?.name&&n.name!==`Object`)return n.name}return String(e)}function s(e,t=3){return Array.from(e.entries()).sort((e,t)=>t[1]-e[1]).slice(0,t).map(([e,t])=>`${o(e)}:${t}`).join(` | `)||`-`}function c(e){return typeof e==`number`?String(e):e}function l(o){let s=(0,n.useTheme)(),{props:l}=(0,n.resolveComponentTheme)({componentName:`DebugPanel`,localTheme:o.theme??s,knownComponents:n.KNOWN_COMPONENTS}),u=(0,n.useThemeTokens)(),{snapshot:d,preset:f=`fps`,metrics:p,compact:m=!1,maxRows:h,labels:g,formatters:_,innerProps:v,theme:y,...b}=o,x=(()=>{let e=p&&p.length>0?p:i[f];return Array.from(new Set(e))})(),S=l.rowTextStyle??u?.textStyles.small,C=l.valueTextStyle??u?.textStyles.small,w=x.map(e=>{let t=d[e],n=g?.[e]??a[e],r=_?.[e];return{metric:e,label:n,value:r?r(t):c(t)}}),T=typeof h==`number`?w.slice(0,Math.max(1,h)):w;if(m){let n=T.map(e=>`${e.label} ${e.value}`).join(` | `);return(0,r.jsx)(t.View,{...b,...l,children:(0,r.jsx)(e.Text,{text:n,style:C})})}return(0,r.jsx)(t.View,{direction:`column`,gap:l.rowGap??4,...b,...l,children:T.map(n=>(0,r.jsxs)(t.View,{direction:`row`,gap:8,...v,children:[(0,r.jsx)(e.Text,{text:`${n.label}:`,style:S}),(0,r.jsx)(e.Text,{text:n.value,style:C})]},`debug-${n.metric}`))})}exports.DEFAULT_LABELS=a,exports.DebugPanel=l,exports.PRESET_METRICS=i,exports.formatDefault=c,exports.summarizeMap=s;

package/dist/DebugPanel.d.ts

@@ -0,0 +1,63 @@
+import { VNodeLike, ViewPrimitivePropsComplete } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export type DebugPanelPreset = 'fps' | 'perf' | 'vdom' | 'textures' | 'full';
+export type DebugMetricKey = 'fps' | 'frameMs' | 'phaserVersion' | 'renderer' | 'viewport' | 'textureCount' | 'mountsTotal' | 'mountsByType' | 'mountsByParent' | 'mountsByKey' | 'debugFlags';
+export type DebugValue = string | number;
+/**
+ * Debug data snapshot — partial because not all renderers support all metrics.
+ * Each renderer adapter fills in what it can.
+ */
+export type DebugSnapshot = Partial<Record<DebugMetricKey, DebugValue>>;
+export interface DebugPanelProps extends Omit<ViewPrimitivePropsComplete, 'children'> {
+    /** Current debug data snapshot (provided by renderer adapter). */
+    snapshot: DebugSnapshot;
+    /** Optional ready-made metric set. Ignored when `metrics` is set. */
+    preset?: DebugPanelPreset;
+    /** Explicit metric selection (takes precedence over `preset`). */
+    metrics?: DebugMetricKey[];
+    /** Render all metrics in one line (instead of key/value rows). */
+    compact?: boolean;
+    /** Maximum rows to render in non-compact mode. */
+    maxRows?: number;
+    /** Optional metric label overrides. */
+    labels?: Partial<Record<DebugMetricKey, string>>;
+    /** Optional formatter overrides per metric. */
+    formatters?: Partial<Record<DebugMetricKey, (value: DebugValue) => string>>;
+    /** Optional props forwarded to each inner row View (column mode only). */
+    innerProps?: Omit<ViewPrimitivePropsComplete, 'children'>;
+    /** Theme overrides. */
+    theme?: PortableComponentPartialTheme<'DebugPanel'>;
+}
+export declare const PRESET_METRICS: Record<DebugPanelPreset, DebugMetricKey[]>;
+export declare const DEFAULT_LABELS: Record<DebugMetricKey, string>;
+/**
+ * Summarize a Map of counts into a compact string.
+ * Uses {@link describeKey} to produce readable key names for non-string keys.
+ *
+ * @param map - Map of keys to counts
+ * @param maxEntries - Maximum entries to include (default 3)
+ * @returns Compact summary string or "-" if empty
+ */
+export declare function summarizeMap(map: Map<unknown, number>, maxEntries?: number): string;
+/**
+ * Default value formatter — numbers as strings, strings pass through.
+ */
+export declare function formatDefault(value: DebugValue): string;
+/**
+ * DebugPanel — renders a snapshot of debug metrics as labelled rows.
+ *
+ * Pure presentational component. Does NOT collect data or manage intervals.
+ * The renderer adapter provides `snapshot` and handles refresh.
+ *
+ * @example
+ * ```tsx
+ * <DebugPanel
+ *   snapshot={{ fps: 60, frameMs: 16.67 }}
+ *   preset="fps"
+ *   compact
+ *   backgroundColor={0x1a1a2e}
+ * />
+ * ```
+ */
+export declare function DebugPanel(props: DebugPanelProps): VNodeLike;
+//# sourceMappingURL=DebugPanel.d.ts.map

package/dist/DebugPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugPanel.d.ts","sourceRoot":"","sources":["../src/DebugPanel.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EAAqB,SAAS,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAA;AAQlG,OAAO,KAAK,EAAmB,6BAA6B,EAAE,MAAM,eAAe,CAAA;AAMnF,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAE5E,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,SAAS,GACT,eAAe,GACf,UAAU,GACV,UAAU,GACV,cAAc,GACd,aAAa,GACb,cAAc,GACd,gBAAgB,GAChB,aAAa,GACb,YAAY,CAAA;AAEhB,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAA;AAEvE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC;IACnF,kEAAkE;IAClE,QAAQ,EAAE,aAAa,CAAA;IACvB,qEAAqE;IACrE,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,kEAAkE;IAClE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;IAC1B,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAA;IAChD,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC,CAAC,CAAA;IAC3E,0EAA0E;IAC1E,UAAU,CAAC,EAAE,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC,CAAA;IACzD,uBAAuB;IACvB,KAAK,CAAC,EAAE,6BAA6B,CAAC,YAAY,CAAC,CAAA;CACpD;AAMD,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,gBAAgB,EAAE,cAAc,EAAE,CAkBrE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAYzD,CAAA;AA8BD;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,SAAI,GAAG,MAAM,CAQ9E;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAEvD;AAMD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,CAmE5D"}

package/dist/DebugPanel.js

@@ -0,0 +1,116 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { KNOWN_COMPONENTS as n, resolveComponentTheme as r, useTheme as i, useThemeTokens as a } from "@number10/jsx-core";
+import { jsx as o, jsxs as s } from "@number10/jsx-core/jsx-runtime";
+//#region src/DebugPanel.tsx
+var c = {
+	fps: ["fps", "frameMs"],
+	perf: [
+		"fps",
+		"frameMs",
+		"renderer",
+		"viewport"
+	],
+	vdom: [
+		"mountsTotal",
+		"mountsByType",
+		"mountsByParent",
+		"mountsByKey"
+	],
+	textures: ["textureCount"],
+	full: [
+		"fps",
+		"frameMs",
+		"phaserVersion",
+		"renderer",
+		"viewport",
+		"textureCount",
+		"mountsTotal",
+		"mountsByType",
+		"mountsByParent",
+		"mountsByKey",
+		"debugFlags"
+	]
+}, l = {
+	fps: "FPS",
+	frameMs: "Frame ms",
+	phaserVersion: "Phaser",
+	renderer: "Renderer",
+	viewport: "Viewport",
+	textureCount: "Textures",
+	mountsTotal: "Mounts",
+	mountsByType: "Mounts/type",
+	mountsByParent: "Mounts/parent",
+	mountsByKey: "Mounts/key",
+	debugFlags: "Debug flags"
+};
+function u(e) {
+	if (typeof e == "string") return e;
+	if (typeof e == "number" || typeof e == "boolean") return String(e);
+	if (e === null) return "null";
+	if (e === void 0) return "undefined";
+	if (typeof e == "object") {
+		let t = e;
+		if (typeof t.name == "string" && t.name.length > 0) return t.name;
+		if (typeof t.type == "string") return t.type;
+		if (typeof t.label == "string") return t.label;
+		let n = t.constructor;
+		if (n?.name && n.name !== "Object") return n.name;
+	}
+	return String(e);
+}
+function d(e, t = 3) {
+	return Array.from(e.entries()).sort((e, t) => t[1] - e[1]).slice(0, t).map(([e, t]) => `${u(e)}:${t}`).join(" | ") || "-";
+}
+function f(e) {
+	return typeof e == "number" ? String(e) : e;
+}
+function p(u) {
+	let d = i(), { props: p } = r({
+		componentName: "DebugPanel",
+		localTheme: u.theme ?? d,
+		knownComponents: n
+	}), m = a(), { snapshot: h, preset: g = "fps", metrics: _, compact: v = !1, maxRows: y, labels: b, formatters: x, innerProps: S, theme: C, ...w } = u, T = (() => {
+		let e = _ && _.length > 0 ? _ : c[g];
+		return Array.from(new Set(e));
+	})(), E = p.rowTextStyle ?? m?.textStyles.small, D = p.valueTextStyle ?? m?.textStyles.small, O = T.map((e) => {
+		let t = h[e], n = b?.[e] ?? l[e], r = x?.[e];
+		return {
+			metric: e,
+			label: n,
+			value: r ? r(t) : f(t)
+		};
+	}), k = typeof y == "number" ? O.slice(0, Math.max(1, y)) : O;
+	if (v) {
+		let n = k.map((e) => `${e.label} ${e.value}`).join(" | ");
+		return /* @__PURE__ */ o(t, {
+			...w,
+			...p,
+			children: /* @__PURE__ */ o(e, {
+				text: n,
+				style: D
+			})
+		});
+	}
+	return /* @__PURE__ */ o(t, {
+		direction: "column",
+		gap: p.rowGap ?? 4,
+		...w,
+		...p,
+		children: k.map((n) => /* @__PURE__ */ s(t, {
+			direction: "row",
+			gap: 8,
+			...S,
+			children: [/* @__PURE__ */ o(e, {
+				text: `${n.label}:`,
+				style: E
+			}), /* @__PURE__ */ o(e, {
+				text: n.value,
+				style: D
+			})]
+		}, `debug-${n.metric}`))
+	});
+}
+//#endregion
+export { l as DEFAULT_LABELS, p as DebugPanel, c as PRESET_METRICS, f as formatDefault, d as summarizeMap };

package/dist/Dialog.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const n=require(`./Modal.cjs`);let r=require(`@number10/jsx-core`),i=require(`@number10/jsx-core/jsx-runtime`);(0,r.registerComponentDefaultsIfMissing)(`Dialog`,{backgroundColor:16777215,cornerRadius:8,maxWidth:600,showClose:!0,Header:{padding:{left:24,right:24,top:20,bottom:16},gap:12,borderColor:14737632,closeButton:{size:32,cornerRadius:4}},Content:{padding:{left:24,right:24,top:16,bottom:16},gap:12},Actions:{padding:{left:24,right:24,top:16,bottom:20},gap:12,justifyContent:`end`,borderColor:14737632}});function a(a){let o=(0,r.useTheme)(),{props:s,nestedTheme:c}=(0,r.resolveComponentTheme)({componentName:`Dialog`,globalTheme:(0,r.getGlobalThemeDefaults)(),localTheme:o,knownComponents:r.KNOWN_COMPONENTS}),l=(0,r.useRef)(null),u=a.showClose??s.showClose??!0,d=a.maxWidth??s.maxWidth??600,f=a.prefix??s.prefix,p=s.backgroundColor??16777215,m=s.cornerRadius??8,h=s.Header,g=h?.gap??12,_=h?.padding??16,v=h?.borderColor??14737632,y=h?.textStyle,b=h?.closeButton,x=b?.size??32,S=b?.cornerRadius??4,C=b?.backgroundColor,w=b?.borderColor,T=b?.borderWidth,E=s.closeIcon,D=s.Content,O=D?.padding??16,k=D?.gap??12,A=s.Actions,j=A?.borderColor??14737632,M=A?.justifyContent??`end`,N=A?.gap??8,P=A?.padding??16,F=e=>{l.current=e,a.forwardRef?.(e)};return(0,i.jsx)(n.Modal,{...a.key&&{key:a.key},show:a.isOpen,onClosed:a.onClose,closeOnBackdrop:a.closeOnBackdrop,closeOnEscape:a.closeOnEscape,depth:a.depth,children:(0,i.jsxs)(t.View,{ref:F,width:d,maxWidth:d,backgroundColor:p,cornerRadius:m,padding:0,direction:`column`,theme:c,children:[(0,i.jsxs)(t.View,{direction:`column`,gap:0,width:`fill`,children:[(0,i.jsxs)(t.View,{direction:`row`,width:`fill`,alignItems:`center`,gap:g,padding:_,children:[f&&f,(0,i.jsx)(t.View,{flex:1,children:(0,i.jsx)(e.Text,{text:a.title,style:y})}),u&&a.onClose&&(0,i.jsx)(t.View,{width:x,height:x,justifyContent:`center`,alignItems:`center`,cornerRadius:S,backgroundColor:C,borderColor:w,borderWidth:T,onTouch:e=>{e.stopPropagation(),a.onClose?.()},children:E??(0,i.jsx)(e.Text,{text:`X`})})]}),(0,i.jsx)(t.View,{height:1,width:`fill`,backgroundColor:v})]}),(0,i.jsx)(t.View,{width:`fill`,padding:O,direction:`column`,gap:k,children:a.children}),a.actions&&(0,i.jsxs)(t.View,{direction:`column`,gap:0,width:`fill`,children:[(0,i.jsx)(t.View,{height:1,width:`fill`,backgroundColor:j}),(0,i.jsx)(t.View,{direction:`row`,justifyContent:M,gap:N,padding:P,children:a.actions})]})]})})}exports.Dialog=a;

package/dist/Dialog.d.ts

@@ -0,0 +1,59 @@
+import { ChildrenType, SizeValue, VNodeLike } from '@number10/jsx-core';
+/**
+ * Dialog component props
+ */
+export interface DialogProps {
+    /** Unique key for VDOM identification */
+    key?: string;
+    /** Ref to the container */
+    forwardRef?: ((ref: unknown) => void) | undefined;
+    /** Whether dialog is visible */
+    isOpen: boolean;
+    /** Callback when dialog should close */
+    onClose?: (() => void) | undefined;
+    /** Close on backdrop click (default: true) */
+    closeOnBackdrop?: boolean | undefined;
+    /** Close on Escape key (default: true) */
+    closeOnEscape?: boolean | undefined;
+    /** Portal depth (default: 1000) */
+    depth?: number | undefined;
+    /** Dialog title */
+    title: string;
+    /** Optional prefix content (e.g., Icon) */
+    prefix?: ChildrenType;
+    /** Show close button in header (default: true) */
+    showClose?: boolean;
+    /** Maximum width of dialog (default: 600) */
+    maxWidth?: SizeValue;
+    /** Dialog content */
+    children: ChildrenType;
+    /** Optional action buttons in footer */
+    actions?: ChildrenType;
+}
+/**
+ * Dialog component with structured layout
+ * Provides header with title/icon, content area, and action footer
+ *
+ * @param props - Dialog props
+ * @returns Dialog component
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   title="Settings"
+ *   prefix={<Icon type="gear" />}
+ *   actions={
+ *     <>
+ *       <Button onClick={onCancel}>Cancel</Button>
+ *       <Button onClick={onSave}>Save</Button>
+ *     </>
+ *   }
+ * >
+ *   <Text>Dialog content...</Text>
+ * </Dialog>
+ * ```
+ */
+export declare function Dialog(props: DialogProps): VNodeLike;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;GAKG;AACH,OAAO,KAAK,EACV,YAAY,EAGZ,SAAS,EACT,SAAS,EACV,MAAM,oBAAoB,CAAA;AAa3B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2BAA2B;IAC3B,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACjD,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,wCAAwC;IACxC,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IAClC,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAE1B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,2CAA2C;IAC3C,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,qBAAqB;IACrB,QAAQ,EAAE,YAAY,CAAA;IACtB,wCAAwC;IACxC,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AA4BD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,CAuIpD"}

package/dist/Dialog.js

@@ -0,0 +1,142 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { Modal as n } from "./Modal.js";
+import { KNOWN_COMPONENTS as r, getGlobalThemeDefaults as i, registerComponentDefaultsIfMissing as a, resolveComponentTheme as o, useRef as s, useTheme as c } from "@number10/jsx-core";
+import { jsx as l, jsxs as u } from "@number10/jsx-core/jsx-runtime";
+//#region src/Dialog.tsx
+a("Dialog", {
+	backgroundColor: 16777215,
+	cornerRadius: 8,
+	maxWidth: 600,
+	showClose: !0,
+	Header: {
+		padding: {
+			left: 24,
+			right: 24,
+			top: 20,
+			bottom: 16
+		},
+		gap: 12,
+		borderColor: 14737632,
+		closeButton: {
+			size: 32,
+			cornerRadius: 4
+		}
+	},
+	Content: {
+		padding: {
+			left: 24,
+			right: 24,
+			top: 16,
+			bottom: 16
+		},
+		gap: 12
+	},
+	Actions: {
+		padding: {
+			left: 24,
+			right: 24,
+			top: 16,
+			bottom: 20
+		},
+		gap: 12,
+		justifyContent: "end",
+		borderColor: 14737632
+	}
+});
+function d(a) {
+	let d = c(), { props: f, nestedTheme: p } = o({
+		componentName: "Dialog",
+		globalTheme: i(),
+		localTheme: d,
+		knownComponents: r
+	}), m = s(null), h = a.showClose ?? f.showClose ?? !0, g = a.maxWidth ?? f.maxWidth ?? 600, _ = a.prefix ?? f.prefix, v = f.backgroundColor ?? 16777215, y = f.cornerRadius ?? 8, b = f.Header, x = b?.gap ?? 12, S = b?.padding ?? 16, C = b?.borderColor ?? 14737632, w = b?.textStyle, T = b?.closeButton, E = T?.size ?? 32, D = T?.cornerRadius ?? 4, O = T?.backgroundColor, k = T?.borderColor, A = T?.borderWidth, j = f.closeIcon, M = f.Content, N = M?.padding ?? 16, P = M?.gap ?? 12, F = f.Actions, I = F?.borderColor ?? 14737632, L = F?.justifyContent ?? "end", R = F?.gap ?? 8, z = F?.padding ?? 16, B = (e) => {
+		m.current = e, a.forwardRef?.(e);
+	};
+	return /* @__PURE__ */ l(n, {
+		...a.key && { key: a.key },
+		show: a.isOpen,
+		onClosed: a.onClose,
+		closeOnBackdrop: a.closeOnBackdrop,
+		closeOnEscape: a.closeOnEscape,
+		depth: a.depth,
+		children: /* @__PURE__ */ u(t, {
+			ref: B,
+			width: g,
+			maxWidth: g,
+			backgroundColor: v,
+			cornerRadius: y,
+			padding: 0,
+			direction: "column",
+			theme: p,
+			children: [
+				/* @__PURE__ */ u(t, {
+					direction: "column",
+					gap: 0,
+					width: "fill",
+					children: [/* @__PURE__ */ u(t, {
+						direction: "row",
+						width: "fill",
+						alignItems: "center",
+						gap: x,
+						padding: S,
+						children: [
+							_ && _,
+							/* @__PURE__ */ l(t, {
+								flex: 1,
+								children: /* @__PURE__ */ l(e, {
+									text: a.title,
+									style: w
+								})
+							}),
+							h && a.onClose && /* @__PURE__ */ l(t, {
+								width: E,
+								height: E,
+								justifyContent: "center",
+								alignItems: "center",
+								cornerRadius: D,
+								backgroundColor: O,
+								borderColor: k,
+								borderWidth: A,
+								onTouch: (e) => {
+									e.stopPropagation(), a.onClose?.();
+								},
+								children: j ?? /* @__PURE__ */ l(e, { text: "X" })
+							})
+						]
+					}), /* @__PURE__ */ l(t, {
+						height: 1,
+						width: "fill",
+						backgroundColor: C
+					})]
+				}),
+				/* @__PURE__ */ l(t, {
+					width: "fill",
+					padding: N,
+					direction: "column",
+					gap: P,
+					children: a.children
+				}),
+				a.actions && /* @__PURE__ */ u(t, {
+					direction: "column",
+					gap: 0,
+					width: "fill",
+					children: [/* @__PURE__ */ l(t, {
+						height: 1,
+						width: "fill",
+						backgroundColor: I
+					}), /* @__PURE__ */ l(t, {
+						direction: "row",
+						justifyContent: L,
+						gap: R,
+						padding: z,
+						children: a.actions
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { d as Dialog };

package/dist/Divider.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/View.cjs`);require(`./primitives.cjs`),require(`@number10/jsx-core`);let t=require(`@number10/jsx-core/jsx-runtime`);function n(n){let{orientation:r=`horizontal`,thickness:i=1,color:a=13421772,length:o}=n,s=r===`horizontal`;return(0,t.jsx)(e.View,{width:s?o??`100%`:i,height:s?i:o??`100%`,backgroundColor:a})}exports.Divider=n;

package/dist/Divider.d.ts

@@ -0,0 +1,19 @@
+import { SizeValue, VNodeLike } from '@number10/jsx-core';
+/**
+ * Props for Divider component.
+ */
+export interface DividerProps {
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Thickness of the divider line */
+    thickness?: SizeValue | undefined;
+    /** Color of the divider */
+    color?: number;
+    /** Length of the divider (defaults to 100%) */
+    length?: SizeValue | undefined;
+}
+/**
+ * Divider component — renders a simple line separator.
+ */
+export declare function Divider(props: DividerProps): VNodeLike;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../src/Divider.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;GAQG;AACH,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAGnE;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,oCAAoC;IACpC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACjC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+CAA+C;IAC/C,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAC/B;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,SAAS,CAYtD"}