@espressif/dashboard-ui-components 1.10.0 → 1.11.1

package/dist/components/chart/treemap-chart.js

@@ -0,0 +1,294 @@
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { buildSeriesChartConfig } from "./chart-colors.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Treemap } from "recharts";
+//#region src/components/chart/treemap-chart.tsx
+var GRADIENT_TOP_OPACITY = 1;
+var GRADIENT_BOTTOM_OPACITY = .82;
+var TILE_RADIUS = 4;
+var TILE_GUTTER = 2;
+var LABEL_MIN_WIDTH = 60;
+var LABEL_MIN_HEIGHT = 28;
+var VALUE_MIN_WIDTH = 80;
+var VALUE_MIN_HEIGHT = 44;
+var DEFAULT_TREEMAP_ANIMATION_DURATION_MS = 300;
+var DEFAULT_TREEMAP_ANIMATION_EASING = "ease-out";
+var DEFAULT_LABEL_STYLE = {
+	color: "var(--color-foreground)",
+	outline: "none",
+	outlineWidth: 0,
+	fontSize: 12,
+	fontWeight: 600,
+	valueFontSize: 11,
+	valueFontWeight: 500
+};
+function defaultValueFormatter(value) {
+	return value.toLocaleString();
+}
+function deriveConfig(data, explicitConfig) {
+	if (explicitConfig) return explicitConfig;
+	const keys = Array.from(new Set(data.map((d) => d.key)));
+	const labels = {};
+	for (const d of data) if (typeof d.label === "string") labels[d.key] = d.label;
+	return buildSeriesChartConfig(keys, { labels });
+}
+function resolveConfigColor(config, key) {
+	const item = config[key];
+	if (!item) return void 0;
+	if ("color" in item && item.color) return item.color;
+	if ("theme" in item && item.theme) return item.theme.light ?? item.theme.dark;
+}
+/**
+* Strip characters that aren't valid in CSS custom property names or in
+* `url(#...)` SVG fragment refs. Keys like `/v1/login2` would otherwise
+* produce broken `var(--color-/v1/login2)` declarations or unparseable
+* gradient IDs, leaving tiles with no fill (i.e. black).
+*/
+function sanitizeId(key) {
+	return key.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+/**
+* Resolve a `Color` (preset token or arbitrary CSS color string) to a CSS
+* color string usable in SVG `fill` / `stop-color` / `color-mix()`.
+*/
+function resolveBaseColor(color) {
+	if (isPresetColor(color)) return `var(--color-${color})`;
+	return color;
+}
+var RAMP_MIN_PCT = 25;
+var RAMP_MAX_PCT = 85;
+/**
+* Build a monochrome ramp by mixing the base color with the active page
+* background in `srgb`. Largest tile (i = 0) gets `RAMP_MAX_PCT` base;
+* smallest (i = total - 1) gets `RAMP_MIN_PCT` base + the rest background.
+*
+* The ceiling is intentionally below 100% so the saturated end never punches
+* out — important for tokens like dark-mode `--color-primary` (#7cd9ff)
+* which would otherwise read as neon. Because the mix endpoint is
+* `var(--color-background)`, the ramp auto-flips between light and dark
+* themes: the saturated end stays bold, the faded end always blends.
+*/
+function shadeForIndex(base, index, total) {
+	if (total <= 1) return `color-mix(in srgb, ${base} ${RAMP_MAX_PCT}%, var(--color-background))`;
+	const t = index / (total - 1);
+	return `color-mix(in srgb, ${base} ${Math.round(RAMP_MAX_PCT - t * (RAMP_MAX_PCT - RAMP_MIN_PCT))}%, var(--color-background))`;
+}
+/**
+* Pick a text color that reads against the corresponding ramp shade without
+* a stroke halo. For tiles in the saturated half (large values, more base
+* color) we use `var(--color-background)`, which is the natural inverse of
+* `var(--color-foreground)` in both light and dark themes — i.e. light text
+* on saturated dark-blue in light mode, dark text on bright cyan in dark
+* mode. For tiles in the faded half (small values, more background) we use
+* `var(--color-foreground)` directly since the tile already approaches the
+* surface. Returns `undefined` when there's only one tile so the caller can
+* fall back to the explicit/default label color.
+*/
+function pickAutoTextColor(index, total) {
+	if (total <= 1) return "var(--color-background)";
+	return index / (total - 1) < .5 ? "var(--color-background)" : "var(--color-foreground)";
+}
+function TreemapTile(props) {
+	const { x = 0, y = 0, width = 0, height = 0, depth = 0, name, value, label, gradientScope, gradient, valueFormatter, colorByKey, textColorByKey, autoTextColor, labelStyle } = props;
+	if (depth === 0 || width <= 0 || height <= 0) return null;
+	const tileKey = name ?? "";
+	const resolvedColor = colorByKey.get(tileKey) ?? "var(--color-muted)";
+	const fill = gradient ? `url(#treemap-grad-${gradientScope}-${sanitizeId(tileKey)})` : resolvedColor;
+	const textFill = autoTextColor && textColorByKey.has(tileKey) ? textColorByKey.get(tileKey) : labelStyle.color;
+	const insetX = x + TILE_GUTTER / 2;
+	const insetY = y + TILE_GUTTER / 2;
+	const insetW = Math.max(0, width - TILE_GUTTER);
+	const insetH = Math.max(0, height - TILE_GUTTER);
+	const showLabel = insetW >= LABEL_MIN_WIDTH && insetH >= LABEL_MIN_HEIGHT;
+	const showValue = insetW >= VALUE_MIN_WIDTH && insetH >= VALUE_MIN_HEIGHT;
+	const labelText = typeof label === "string" && label.length > 0 ? label : tileKey;
+	const charWidth = Math.max(5, labelStyle.fontSize * .58);
+	const maxChars = Math.max(3, Math.floor((insetW - 16) / charWidth));
+	const displayLabel = labelText.length > maxChars ? `${labelText.slice(0, Math.max(1, maxChars - 1))}\u2026` : labelText;
+	const textOutlineStyle = labelStyle.outline !== "none" && labelStyle.outlineWidth > 0 ? {
+		paintOrder: "stroke",
+		stroke: labelStyle.outline,
+		strokeWidth: labelStyle.outlineWidth,
+		strokeLinejoin: "round"
+	} : {};
+	const labelY = insetY + Math.max(14, labelStyle.fontSize + 6);
+	const valueY = labelY + Math.max(12, labelStyle.valueFontSize + 5);
+	return /* @__PURE__ */ jsxs("g", {
+		className: "esp-treemap-tile",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: insetX,
+				y: insetY,
+				width: insetW,
+				height: insetH,
+				rx: TILE_RADIUS,
+				ry: TILE_RADIUS,
+				fill,
+				className: "transition-opacity duration-150 hover:opacity-90"
+			}),
+			showLabel && /* @__PURE__ */ jsx("text", {
+				x: insetX + 10,
+				y: labelY,
+				fill: textFill,
+				fontSize: labelStyle.fontSize,
+				fontWeight: labelStyle.fontWeight,
+				style: {
+					...textOutlineStyle,
+					pointerEvents: "none"
+				},
+				children: displayLabel
+			}),
+			showValue && typeof value === "number" && /* @__PURE__ */ jsx("text", {
+				x: insetX + 10,
+				y: valueY,
+				fill: textFill,
+				fontSize: labelStyle.valueFontSize,
+				fontWeight: labelStyle.valueFontWeight,
+				opacity: .95,
+				style: {
+					...textOutlineStyle,
+					fontVariantNumeric: "tabular-nums",
+					pointerEvents: "none"
+				},
+				children: valueFormatter(value)
+			})
+		]
+	});
+}
+function TreemapLegend({ config, order, colorByKey }) {
+	const seen = /* @__PURE__ */ new Set();
+	const items = order.filter((k) => {
+		if (seen.has(k)) return false;
+		seen.add(k);
+		return k in config;
+	}).map((k) => ({
+		key: k,
+		entry: config[k]
+	}));
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center justify-start gap-x-4 gap-y-2 pt-3 text-sm",
+		children: items.map(({ key, entry }) => {
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "h-3 w-3 shrink-0 rounded-sm",
+					style: { backgroundColor: colorByKey.get(key) ?? resolveConfigColor(config, key) }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-normal text-foreground",
+					children: entry.label ?? key
+				})]
+			}, key);
+		})
+	});
+}
+var TreemapChart = React$1.forwardRef(function TreemapChart({ data, config: explicitConfig, color, maxDataPoints, showTooltip = true, showLegend = false, gradient = true, aspectRatio = 4 / 3, valueFormatter = defaultValueFormatter, labelStyle, className, isAnimationActive = true, animationDuration = DEFAULT_TREEMAP_ANIMATION_DURATION_MS, animationEasing = DEFAULT_TREEMAP_ANIMATION_EASING, animationBegin = 0, isUpdateAnimationActive }, ref) {
+	const resolvedUpdateAnimationActive = isUpdateAnimationActive ?? isAnimationActive;
+	const gradientScope = React$1.useId().replace(/:/g, "");
+	const resolvedLabelStyle = React$1.useMemo(() => ({
+		...DEFAULT_LABEL_STYLE,
+		...labelStyle
+	}), [labelStyle]);
+	const sortedData = React$1.useMemo(() => {
+		const sorted = [...data].sort((a, b) => b.value - a.value);
+		if (typeof maxDataPoints === "number" && maxDataPoints > 0) return sorted.slice(0, maxDataPoints);
+		return sorted;
+	}, [data, maxDataPoints]);
+	const config = React$1.useMemo(() => deriveConfig(sortedData, explicitConfig), [sortedData, explicitConfig]);
+	const uniqueKeys = React$1.useMemo(() => Array.from(new Set(sortedData.map((d) => d.key))), [sortedData]);
+	const colorByKey = React$1.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		if (typeof color === "string" && color.length > 0) {
+			const base = resolveBaseColor(color);
+			sortedData.forEach((d, i) => {
+				if (!map.has(d.key)) map.set(d.key, shadeForIndex(base, i, sortedData.length));
+			});
+		} else for (const k of uniqueKeys) map.set(k, resolveConfigColor(config, k) ?? "var(--color-muted)");
+		return map;
+	}, [
+		config,
+		uniqueKeys,
+		color,
+		sortedData
+	]);
+	const textColorByKey = React$1.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		if (typeof color === "string" && color.length > 0) sortedData.forEach((d, i) => {
+			if (!map.has(d.key)) map.set(d.key, pickAutoTextColor(i, sortedData.length));
+		});
+		return map;
+	}, [color, sortedData]);
+	const autoTextColor = labelStyle?.color === void 0;
+	const treemapData = React$1.useMemo(() => sortedData.map((d) => ({
+		...d,
+		name: d.key,
+		fill: colorByKey.get(d.key)
+	})), [sortedData, colorByKey]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex w-full flex-col", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative min-h-0 flex-1",
+			children: /* @__PURE__ */ jsx(ChartContainer, {
+				config,
+				className: "h-full w-full",
+				children: /* @__PURE__ */ jsxs(Treemap, {
+					data: treemapData,
+					dataKey: "value",
+					nameKey: "key",
+					aspectRatio,
+					stroke: "transparent",
+					isAnimationActive,
+					isUpdateAnimationActive: resolvedUpdateAnimationActive,
+					animationBegin,
+					animationDuration,
+					animationEasing,
+					content: /* @__PURE__ */ jsx(TreemapTile, {
+						gradientScope,
+						gradient,
+						valueFormatter,
+						colorByKey,
+						textColorByKey,
+						autoTextColor,
+						labelStyle: resolvedLabelStyle
+					}),
+					children: [gradient && /* @__PURE__ */ jsx("defs", { children: uniqueKeys.map((key) => {
+						const stopColor = colorByKey.get(key) ?? "var(--color-muted)";
+						return /* @__PURE__ */ jsxs("linearGradient", {
+							id: `treemap-grad-${gradientScope}-${sanitizeId(key)}`,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ jsx("stop", {
+								offset: "0%",
+								stopColor,
+								stopOpacity: GRADIENT_TOP_OPACITY
+							}), /* @__PURE__ */ jsx("stop", {
+								offset: "100%",
+								stopColor,
+								stopOpacity: GRADIENT_BOTTOM_OPACITY
+							})]
+						}, key);
+					}) }), showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+						cursor: false,
+						content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+							hideLabel: true,
+							nameKey: "key"
+						})
+					})]
+				})
+			})
+		}), showLegend && /* @__PURE__ */ jsx(TreemapLegend, {
+			config,
+			order: uniqueKeys,
+			colorByKey
+		})]
+	});
+});
+TreemapChart.displayName = "TreemapChart";
+//#endregion
+export { TreemapChart };

package/dist/components/circular-progress/circular-progress.js

@@ -0,0 +1,125 @@
+import { cn } from "../../utils/cn.js";
+import { isPresetColor, resolveColor } from "../../utils/color.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/circular-progress/circular-progress.tsx
+var VIEW_CENTER = 50;
+var DEFAULT_SIZE_PX = 36;
+var MIN_SIZE_PX = 16;
+var MAX_SIZE_PX = 512;
+/** Ring thickness as a fraction of `size` (matches previous default at 36px). */
+var STROKE_TO_SIZE = 4 / 36;
+/** Share of inner diameter used for label cap height so "100.0%" fits. */
+var LABEL_TO_INNER_DIAMETER = .24;
+var presetTrackClassMap = {
+	primary: "text-primary/20",
+	secondary: "text-secondary/20",
+	error: "text-error/20",
+	info: "text-info/20",
+	success: "text-success/20",
+	warning: "text-warning/20",
+	disabled: "text-disabled/20",
+	gray: "text-gray/20",
+	mist: "text-mist-border"
+};
+var presetProgressClassMap = {
+	primary: "text-primary",
+	secondary: "text-secondary",
+	error: "text-error",
+	info: "text-info",
+	success: "text-success",
+	warning: "text-warning",
+	disabled: "text-disabled",
+	gray: "text-gray",
+	mist: "text-mist-foreground"
+};
+function clampSizePx(size) {
+	if (!Number.isFinite(size)) return DEFAULT_SIZE_PX;
+	return Math.min(MAX_SIZE_PX, Math.max(MIN_SIZE_PX, size));
+}
+function strokeWidthPx(sizePx) {
+	return sizePx * STROKE_TO_SIZE;
+}
+/** Stroke width in viewBox 0–100 units (constant ratio for all sizes). */
+var STROKE_WIDTH_VIEWBOX = STROKE_TO_SIZE * 100;
+function labelFontSizePx(sizePx) {
+	const stroke = strokeWidthPx(sizePx);
+	const px = Math.max(0, sizePx - 2 * stroke) * LABEL_TO_INNER_DIAMETER;
+	return Math.max(5, Math.min(72, Math.round(px)));
+}
+function clampProgress(value) {
+	return Math.min(100, Math.max(0, value));
+}
+function truncateOneDecimal(value) {
+	return Math.trunc(value * 10) / 10;
+}
+function strokeResolvedStyle(color, opacity) {
+	if (isPresetColor(color)) return void 0;
+	return { stroke: opacity === "muted" ? `color-mix(in srgb, ${color} 20%, transparent)` : color };
+}
+var labelTypographyClass = "whitespace-nowrap text-center leading-none font-semibold tracking-tight tabular-nums";
+var CircularProgress = React$1.forwardRef(function CircularProgress({ value, showPercentage = false, color = "primary", size = DEFAULT_SIZE_PX, className, style, ...props }, ref) {
+	const boxSize = clampSizePx(size);
+	const displayValue = truncateOneDecimal(clampProgress(value));
+	const strokeWidth = STROKE_WIDTH_VIEWBOX;
+	const r = VIEW_CENTER - strokeWidth / 2;
+	const circumference = 2 * Math.PI * r;
+	const dashOffset = circumference * (1 - displayValue / 100);
+	const fontSizePx = labelFontSizePx(boxSize);
+	const presetTrackClass = isPresetColor(color) ? presetTrackClassMap[color] : void 0;
+	const presetProgressClass = isPresetColor(color) ? presetProgressClassMap[color] : void 0;
+	const trackExtraStyle = strokeResolvedStyle(color, "muted");
+	const progressResolved = !isPresetColor(color) ? resolveColor(color, "text") : null;
+	const progressExtraStyle = progressResolved?.style != null ? { stroke: progressResolved.style.color } : void 0;
+	const labelColorStyle = !isPresetColor(color) && progressResolved?.style?.color != null ? { color: progressResolved.style.color } : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": displayValue,
+		className: cn("relative inline-flex shrink-0 items-center justify-center", className),
+		style: {
+			...style,
+			width: boxSize,
+			height: boxSize
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("svg", {
+			className: "size-full",
+			viewBox: "0 0 100 100",
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsxs("g", {
+				transform: `rotate(-90 ${VIEW_CENTER} ${VIEW_CENTER})`,
+				children: [/* @__PURE__ */ jsx("circle", {
+					className: cn("fill-none", presetTrackClass != null && cn("stroke-current", presetTrackClass)),
+					style: trackExtraStyle,
+					cx: VIEW_CENTER,
+					cy: VIEW_CENTER,
+					r,
+					strokeWidth
+				}), /* @__PURE__ */ jsx("circle", {
+					className: cn("fill-none", presetProgressClass != null && cn("stroke-current", presetProgressClass)),
+					style: progressExtraStyle,
+					cx: VIEW_CENTER,
+					cy: VIEW_CENTER,
+					r,
+					strokeWidth,
+					strokeLinecap: "round",
+					strokeDasharray: circumference,
+					strokeDashoffset: dashOffset
+				})]
+			})
+		}), showPercentage ? /* @__PURE__ */ jsxs("span", {
+			className: cn("pointer-events-none absolute inset-0 flex min-h-0 min-w-0 items-center justify-center", presetProgressClass, labelTypographyClass),
+			style: {
+				fontSize: fontSizePx,
+				...labelColorStyle
+			},
+			children: [displayValue.toFixed(1), "%"]
+		}) : null]
+	});
+});
+CircularProgress.displayName = "CircularProgress";
+//#endregion
+export { CircularProgress };

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

@@ -0,0 +1,235 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../../core/animate-ui/components/buttons/copy.js";
+import { FieldLabelRow, fieldHintClassName } from "../../core/field-label-row.js";
+import { CodeHeader } from "../../core/animate-ui/components/animate/code-header.js";
+import { getBuiltInFormatter } from "./code-editor.utils.js";
+import { applyEdit, useCodeEditorKeys } from "./use-code-editor-keys.js";
+import { DEFAULT_CODE_EDITOR_THEMES, useHighlightedHtml } from "./use-highlighted-html.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Braces } from "lucide-react";
+//#region src/components/code-editor/code-editor.tsx
+/**
+* Metrics every layer shares. The textarea and the highlighted text sit in
+* the same grid cell, so any difference in font, size, spacing, padding or
+* wrapping shows up as a caret that drifts from the characters. Ligatures are
+* off because Shiki's token spans break them in the highlight layer but not
+* in the textarea. 16px below `md` stops iOS Safari zooming on focus.
+*/
+var layerClassName = "col-start-1 row-start-1 m-0 box-border border-0 p-4 font-mono text-[16px] leading-normal tracking-normal [font-variant-ligatures:none] md:text-[13px]";
+/** Highlight layer: Shiki's `<pre>` / `<code>` take their metrics from the layer. */
+var highlightClassName = "[&_pre]:m-0 [&_pre]:p-0 [&_pre]:!bg-transparent [&_pre]:[font:inherit] [&_pre]:[white-space:inherit] [&_pre]:[overflow-wrap:inherit] [&_code]:[font:inherit]";
+/**
+* Reports assignments to `textarea.value` that fire no `input` event, such as
+* react-hook-form's `register` writing default values, `setValue` and
+* `reset`, and a native form reset. An uncontrolled editor needs them to
+* keep its highlight layer in sync. The wrapper chains to whatever `value`
+* descriptor is present (React's own value tracker), so React still sees
+* every change.
+*/
+function observeValueWrites(node, onWrite) {
+	const own = Object.getOwnPropertyDescriptor(node, "value");
+	const base = own ?? Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value");
+	if (!base?.get || !base.set || own && !own.configurable) return () => {};
+	const { get, set } = base;
+	Object.defineProperty(node, "value", {
+		configurable: true,
+		enumerable: base.enumerable,
+		get() {
+			return get.call(this);
+		},
+		set(next) {
+			set.call(this, next);
+			onWrite(get.call(this));
+		}
+	});
+	const form = node.form;
+	const handleReset = () => setTimeout(() => onWrite(node.value));
+	form?.addEventListener("reset", handleReset);
+	return () => {
+		form?.removeEventListener("reset", handleReset);
+		if (own) Object.defineProperty(node, "value", own);
+		else delete node.value;
+	};
+}
+/** True for header content worth a header row; `""`, `false` and `null` render nothing. */
+function hasContent(node) {
+	return node != null && node !== false && node !== "";
+}
+function toCssSize(size) {
+	return typeof size === "number" ? `${size}px` : size;
+}
+/**
+* Editable, syntax-highlighted code input. Looks like `Code` (same header,
+* copy button and Shiki themes) and behaves like `Textarea` in a form:
+* controlled or uncontrolled, native `onChange`, ref to the `<textarea>`.
+*
+* Tab indents, Shift+Tab outdents, Enter keeps the indentation. Press Esc,
+* then Tab, to move focus out of the editor. For JSON (or with a custom
+* `formatter`) the header has a Format button next to Copy.
+*/
+var CodeEditor = React$1.forwardRef(({ className, style, lang = "json", theme = "light", themes = DEFAULT_CODE_EDITOR_THEMES, hideHeader = false, fileName, icon, copyButton = true, formatButton, formatter, onFormatError, formatLabel = "Format", copyLabel, headerActions, label, required, hintContent, error, errorContent, minHeight, maxHeight, wrap = false, tabSize = 2, maxHighlightLength = 1e4, id, value, defaultValue, onChange, onKeyDown, onBlur, onScroll, disabled, readOnly, "aria-describedby": ariaDescribedBy, ...textareaProps }, forwardedRef) => {
+	const autoId = React$1.useId();
+	const textareaId = id || autoId;
+	const errorId = `${textareaId}-error`;
+	const hasError = error || !!errorContent;
+	const isControlled = value !== void 0;
+	const [innerValue, setInnerValue] = React$1.useState(() => defaultValue == null ? "" : String(defaultValue));
+	const currentValue = isControlled ? String(value ?? "") : innerValue;
+	const html = useHighlightedHtml(currentValue, {
+		lang,
+		theme,
+		themes,
+		maxHighlightLength
+	});
+	const keys = useCodeEditorKeys({
+		tabSize,
+		onKeyDown,
+		onBlur
+	});
+	const textareaRef = React$1.useRef(null);
+	const stopObservingRef = React$1.useRef(void 0);
+	const setTextareaRef = React$1.useCallback((node) => {
+		textareaRef.current = node;
+		stopObservingRef.current?.();
+		stopObservingRef.current = void 0;
+		if (node && !isControlled) {
+			stopObservingRef.current = observeValueWrites(node, setInnerValue);
+			setInnerValue(node.value);
+		}
+		if (typeof forwardedRef === "function") forwardedRef(node);
+		else if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef, isControlled]);
+	const handleChange = (event) => {
+		if (!isControlled) setInnerValue(event.target.value);
+		onChange?.(event);
+	};
+	const handleScroll = (event) => {
+		const el = event.currentTarget;
+		if (el.scrollTop !== 0) el.scrollTop = 0;
+		if (el.scrollLeft !== 0) el.scrollLeft = 0;
+		onScroll?.(event);
+	};
+	const builtInFormatter = getBuiltInFormatter(lang);
+	const format = formatter ?? (builtInFormatter && ((v) => builtInFormatter(v, tabSize)));
+	const showFormatButton = formatButton !== false && format !== void 0;
+	const handleFormat = () => {
+		const el = textareaRef.current;
+		if (!el || !format) return;
+		let formatted;
+		try {
+			formatted = format(el.value);
+		} catch (formatError) {
+			onFormatError?.(formatError);
+			return;
+		}
+		applyEdit(el, {
+			start: 0,
+			end: el.value.length,
+			text: formatted,
+			selectionStart: 0,
+			selectionEnd: 0
+		});
+	};
+	const describedBy = [ariaDescribedBy, errorContent ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const wrapClassName = wrap ? "whitespace-pre-wrap [overflow-wrap:anywhere]" : "whitespace-pre [overflow-wrap:normal]";
+	const showHeader = !hideHeader && (hasContent(fileName) || copyButton || showFormatButton || hasContent(headerActions));
+	const actions = hasContent(headerActions) || showFormatButton ? /* @__PURE__ */ jsxs(Fragment$1, { children: [headerActions, showFormatButton && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "code-editor-format",
+		"aria-label": formatLabel,
+		title: formatLabel,
+		disabled: disabled || readOnly || currentValue.trim() === "",
+		onClick: handleFormat,
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "sm"
+		}), "w-auto h-auto p-2"),
+		children: /* @__PURE__ */ jsx(Braces, {})
+	})] }) : void 0;
+	const editor = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "code-editor",
+		"data-disabled": disabled ? "" : void 0,
+		className: cn("relative flex flex-col overflow-hidden rounded-lg border bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out", "has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring has-[textarea:focus-visible]:ring-offset-2", hasError && "border-destructive has-[textarea:focus-visible]:ring-destructive", className),
+		style,
+		children: [showHeader && /* @__PURE__ */ jsx(CodeHeader, {
+			icon,
+			fileName,
+			actions,
+			copyContent: copyButton ? currentValue : void 0,
+			copyLabel
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("relative min-h-0 flex-1 overflow-auto bg-accent/10", disabled && "cursor-not-allowed opacity-50"),
+			style: { maxHeight: toCssSize(maxHeight) },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("grid", wrap ? "w-full grid-cols-[minmax(0,1fr)]" : "w-max min-w-full"),
+				style: {
+					minHeight: toCssSize(minHeight),
+					tabSize
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						"aria-hidden": true,
+						className: cn(layerClassName, wrapClassName, "invisible"),
+						children: [currentValue, "​"]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: cn(layerClassName, wrapClassName, highlightClassName, "pointer-events-none"),
+						dangerouslySetInnerHTML: { __html: html }
+					}),
+					/* @__PURE__ */ jsx("textarea", {
+						id: textareaId,
+						ref: setTextareaRef,
+						value,
+						defaultValue,
+						disabled,
+						readOnly,
+						required,
+						wrap: wrap ? "soft" : "off",
+						spellCheck: false,
+						autoCapitalize: "off",
+						autoComplete: "off",
+						autoCorrect: "off",
+						translate: "no",
+						"data-gramm": "false",
+						"aria-invalid": hasError || void 0,
+						"aria-describedby": describedBy,
+						...textareaProps,
+						onChange: handleChange,
+						onKeyDown: keys.onKeyDown,
+						onBlur: keys.onBlur,
+						onScroll: handleScroll,
+						style: { tabSize },
+						className: cn(layerClassName, wrapClassName, "relative z-10 h-full w-full resize-none overflow-hidden bg-transparent text-transparent caret-foreground outline-none [-webkit-text-fill-color:transparent]", "placeholder:text-muted-foreground placeholder:[-webkit-text-fill-color:var(--color-muted-foreground)] selection:bg-primary/20", "disabled:cursor-not-allowed read-only:cursor-default")
+					})
+				]
+			})
+		})]
+	});
+	if (label == null && hintContent == null && errorContent == null) return editor;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 flex-1",
+		children: [
+			label != null ? /* @__PURE__ */ jsx(FieldLabelRow, {
+				htmlFor: textareaId,
+				label,
+				required,
+				hintContent
+			}) : hintContent != null && /* @__PURE__ */ jsx("span", {
+				className: fieldHintClassName,
+				children: hintContent
+			}),
+			editor,
+			errorContent != null && /* @__PURE__ */ jsx("div", {
+				id: errorId,
+				className: "text-sm text-destructive",
+				children: errorContent
+			})
+		]
+	});
+});
+CodeEditor.displayName = "CodeEditor";
+//#endregion
+export { CodeEditor };