@espressif/dashboard-ui-components 1.5.0 → 1.6.0

package/dist/{chunk-X7LDLZBT.js → chunk-IYMCZTJ5.js}

@@ -3,7 +3,7 @@ import { FieldLabelRow, fieldHintClassName, Button, inputLabelClassName, Input,
 import { getStrictContext, buttonVariants, Separator, CollapsibleContent, Collapsible, CollapsibleTrigger, useIsMobile, useControlledState, Button as Button$1, Skeleton, Avatar, AvatarFallback } from './chunk-OKB2WTX7.js';
 import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
 import { __commonJS, __toESM } from './chunk-TRTQSARU.js';
-import { ChevronDown, ChevronUp, Check, Upload, X, RefreshCw, LoaderCircle, Triangle, Info, MinusIcon, ArrowLeft, ArrowRight, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, FileCheck, CheckCheck, TriangleAlert, CircleX, Menu, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, ChevronLeft, Columns2, ChevronsRight, ChevronsLeft, XIcon, MoveLeft, CircleIcon, Bolt, Plus, Trash2, Clock, XCircle, CheckCircle2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, Upload, X, RefreshCw, LoaderCircle, Triangle, Info, MinusIcon, ArrowLeft, ArrowRight, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, Braces, FileCheck, CheckCheck, TriangleAlert, CircleX, Menu, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, XIcon, ChevronLeft, Columns2, ChevronsRight, ChevronsLeft, MoveLeft, CircleIcon, Bolt, Plus, Trash2, Clock, XCircle, CheckCircle2 } from 'lucide-react';
 import * as React10 from 'react';
 import React10__default, { forwardRef, useMemo, isValidElement, useRef, useState, useCallback, useLayoutEffect, useEffect, useId, Fragment as Fragment$1, Children, cloneElement, createElement } from 'react';
 import { Switch as Switch$1, ToggleGroup as ToggleGroup$1, Dialog as Dialog$1, Accordion as Accordion$1 } from 'radix-ui';
@@ -24,7 +24,7 @@ import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Command as Command$1 } from 'cmdk';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
-import { format, endOfMonth, startOfMonth, sub, endOfDay, startOfDay, endOfYear, startOfYear, endOfWeek, startOfWeek, isValid, parse, set } from 'date-fns';
+import { format, sub, endOfMonth, startOfMonth, endOfDay, startOfDay, endOfYear, startOfYear, endOfWeek, startOfWeek, isValid, parse, set } from 'date-fns';
 import { useReactTable, getPaginationRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { PreviewCard as PreviewCard$1 } from '@base-ui-components/react/preview-card';
 import { startCase } from 'lodash-es';
@@ -52331,6 +52331,12 @@ var stateVisuals = {
     titleClass: "text-success",
     descriptionClass: "text-success/80"
   },
+  warning: {
+    avatarColor: "warning",
+    endIconClass: "text-warning",
+    titleClass: "text-warning",
+    descriptionClass: "text-warning/80"
+  },
   error: {
     avatarColor: "error",
     endIconClass: "text-error",
@@ -52352,6 +52358,7 @@ var stateVisuals = {
 };
 var stateSurfaceCssVar = {
   success: "--color-success",
+  warning: "--color-warning",
   error: "--color-error",
   in_progress: "--color-primary",
   not_started: "--color-gray"
@@ -52464,6 +52471,8 @@ function StatusEndIndicator({
   switch (state) {
     case "success":
       return /* @__PURE__ */ jsx(CheckCircle2, { className: cls, "aria-hidden": true });
+    case "warning":
+      return /* @__PURE__ */ jsx(TriangleAlert, { className: cls, "aria-hidden": true });
     case "error":
       return /* @__PURE__ */ jsx(XCircle, { className: cls, "aria-hidden": true });
     case "in_progress":
@@ -52782,15 +52791,15 @@ var Spinner = React10.forwardRef(function Spinner2({
   "aria-labelledby": ariaLabelledby,
   ...rest
 }, ref) {
-  const resolved = color != null ? resolveColor(color, "text") : void 0;
+  const resolved2 = color != null ? resolveColor(color, "text") : void 0;
   const ariaLabelResolved = ariaLabelledby != null ? void 0 : ariaLabel !== void 0 ? ariaLabel : "Loading";
   return /* @__PURE__ */ jsx(
     LoaderCircle,
     {
       ref,
       ...rest,
-      className: cn("animate-spin", resolved?.className, className),
-      style: { ...resolved?.style, ...style },
+      className: cn("animate-spin", resolved2?.className, className),
+      style: { ...resolved2?.style, ...style },
       size: size ?? "1em",
       "aria-label": ariaLabelResolved,
       "aria-labelledby": ariaLabelledby
@@ -56284,6 +56293,7 @@ function DateTimePicker(props) {
 }
 DateTimePicker.displayName = "DateTimePicker";
 var PRESET_IDS = [
+  // Calendar periods
   "today",
   "yesterday",
   "this-week",
@@ -56292,10 +56302,16 @@ var PRESET_IDS = [
   "last-month",
   "this-year",
   "last-year",
+  // Trailing ranges, shortest first. A rolling preset (ends now) precedes
+  // the day-snapped preset of the same length.
+  "last-1-hour",
+  "last-24-hours",
   "last-1-day",
+  "past-7-days",
   "last-7-days",
   "last-14-days",
   "last-15-days",
+  "past-30-days",
   "last-30-days",
   "last-4-weeks",
   "last-90-days",
@@ -56313,10 +56329,14 @@ var PRESET_LABELS = {
   "last-month": "Last month",
   "this-year": "This year",
   "last-year": "Last year",
+  "last-1-hour": "Last 1 hour",
+  "last-24-hours": "Last 24 hours",
   "last-1-day": "Last 1 day",
+  "past-7-days": "Past 7 days",
   "last-7-days": "Last 7 days",
   "last-14-days": "Last 14 days",
   "last-15-days": "Last 15 days",
+  "past-30-days": "Past 30 days",
   "last-30-days": "Last 30 days",
   "last-4-weeks": "Last 4 weeks",
   "last-90-days": "Last 90 days",
@@ -56325,6 +56345,12 @@ var PRESET_LABELS = {
   "last-1-year": "Last 1 year",
   "last-5-years": "Last 5 years"
 };
+var ROLLING_PRESET_IDS = [
+  "last-1-hour",
+  "last-24-hours",
+  "past-7-days",
+  "past-30-days"
+];
 function computeDateRange(id) {
   const now = /* @__PURE__ */ new Date();
   switch (id) {
@@ -56401,6 +56427,14 @@ function computeDateRange(id) {
       return { startDate: startOfMonth(sub(now, { years: 1 })), endDate: endOfMonth(now) };
     case "last-5-years":
       return { startDate: startOfMonth(sub(now, { years: 5 })), endDate: endOfMonth(now) };
+    case "last-1-hour":
+      return { startDate: sub(now, { hours: 1 }), endDate: now };
+    case "last-24-hours":
+      return { startDate: sub(now, { hours: 24 }), endDate: now };
+    case "past-7-days":
+      return { startDate: sub(now, { days: 7 }), endDate: now };
+    case "past-30-days":
+      return { startDate: sub(now, { days: 30 }), endDate: now };
   }
 }
 var DEFAULT_DATE_FORMAT = "dd MMM yyyy";
@@ -56436,6 +56470,9 @@ function DateRangePicker({
   selectedPresetId,
   selectedStartDate,
   selectedEndDate,
+  clearable = false,
+  clearLabel = "Clear",
+  onClear,
   trigger,
   placeholder = "Select date range",
   label,
@@ -56577,7 +56614,12 @@ function DateRangePicker({
     if (lockEndToToday) return;
     setEndInputValue(draftRange.endDate ? format(draftRange.endDate, dateFormat) : "");
   };
+  const handleClear = () => {
+    onClear?.();
+    handleOpenChange(false);
+  };
   const displayValue = selectedPresetId ? resolveLabel(selectedPresetId) : "";
+  const hasSelection = !!(selectedPresetId || selectedStartDate);
   const inputTrigger = /* @__PURE__ */ jsx(
     Input,
     {
@@ -56673,6 +56715,22 @@ function DateRangePicker({
                   ]
                 }
               )
+            ] }),
+            clearable && hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-1 my-1 h-px bg-border" }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClear,
+                  onMouseEnter: () => setShowCalendar(false),
+                  className: "flex w-full items-center justify-between gap-6 px-3 py-1.5 text-left text-sm text-muted-foreground hover:bg-accent",
+                  children: [
+                    clearLabel,
+                    /* @__PURE__ */ jsx(XIcon, { className: "size-4 shrink-0" })
+                  ]
+                }
+              )
             ] })
           ] }),
           allowCustom && showCalendar && /* @__PURE__ */ jsx(
@@ -57451,17 +57509,21 @@ function DataTable({
     () => enableRowSelection ? [selectColumn, ...columns] : columns,
     [enableRowSelection, selectColumn, columns]
   );
+  const pagination = useMemo(() => ({ pageIndex: 0, pageSize }), [pageSize]);
   const table = useReactTable({
     data: data2,
     columns: tableColumns,
     state: {
       columnVisibility,
-      pagination: {
-        pageIndex: 0,
-        pageSize
-      },
+      pagination,
       ...rowSelection !== void 0 && { rowSelection }
     },
+    // With `manualPagination` unset, TanStack resets pageIndex (an internal
+    // setState + re-render) whenever `data` changes identity. pageIndex is pinned
+    // to 0 here, so that reset is a no-op; with consumers that pass a fresh array
+    // each render (`data?.items ?? []`) it can loop into "Maximum update depth
+    // exceeded".
+    autoResetPageIndex: false,
     onColumnVisibilityChange: setColumnVisibility,
     enableRowSelection,
     enableMultiRowSelection,
@@ -57851,8 +57913,8 @@ function DeviceIcon({ type, size = 18, color, fallback: Fallback, className }) {
   const Matched = matchDevice(type);
   const Icon2 = Matched ?? Fallback;
   if (!Icon2) return null;
-  const resolved = color ? resolveColor(color, "text") : void 0;
-  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex", resolved?.className, className), style: resolved?.style, children: /* @__PURE__ */ jsx(Icon2, { size }) });
+  const resolved2 = color ? resolveColor(color, "text") : void 0;
+  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex", resolved2?.className, className), style: resolved2?.style, children: /* @__PURE__ */ jsx(Icon2, { size }) });
 }
 var userTypeBadgeRegistry = {
   admin: {
@@ -60029,6 +60091,8 @@ function getHighlighter() {
 function normalizeLang(lang) {
   return LANG_ALIASES[lang.toLowerCase()] ?? lang;
 }
+
+// src/core/animate-ui/primitives/animate/escape-html.ts
 function escapeHtml(input) {
   return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -60156,6 +60220,33 @@ function CodeBlock({
     }
   );
 }
+function CodeHeader({ icon: Icon2, fileName, copyContent, copyLabel = "Copy", actions }) {
+  const copyButton = copyContent !== void 0 && /* @__PURE__ */ jsx(
+    CopyButton,
+    {
+      content: copyContent,
+      size: "sm",
+      variant: "ghost",
+      "aria-label": copyLabel,
+      title: copyLabel,
+      className: cn(actions == null && "ml-auto", "w-auto h-auto p-2 -mr-2")
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "shrink-0 gap-x-2 border-b border-border/75 dark:border-border/50 text-sm flex text-muted-foreground items-center px-4 w-full h-10 font-medium",
+      children: [
+        Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "size-4" }),
+        fileName,
+        actions != null ? /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+          actions,
+          copyButton
+        ] }) : copyButton
+      ]
+    }
+  );
+}
 function Code({
   className,
   code,
@@ -60182,23 +60273,12 @@ function Code({
       style: { height: height2, ...style },
       ...props,
       children: [
-        showHeader && /* @__PURE__ */ jsxs(
-          "div",
+        showHeader && /* @__PURE__ */ jsx(
+          CodeHeader,
           {
-            className: "shrink-0 gap-x-2 border-b border-border/75 dark:border-border/50 text-sm flex text-muted-foreground items-center px-4 w-full h-10 font-medium",
-            children: [
-              Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "size-4" }),
-              fileName,
-              showCopyButton && /* @__PURE__ */ jsx(
-                CopyButton,
-                {
-                  content: code,
-                  size: "sm",
-                  variant: "ghost",
-                  className: "ml-auto w-auto h-auto p-2 -mr-2"
-                }
-              )
-            ]
+            icon: Icon2,
+            fileName,
+            copyContent: showCopyButton ? code : void 0
           }
         ),
         lang && /* @__PURE__ */ jsx(
@@ -61017,14 +61097,79 @@ function DynamicList({
     );
   }) });
 }
+function KeyValueManagerField({
+  field,
+  label,
+  value: value2,
+  meta,
+  error,
+  errorMessage,
+  selectPlaceholder,
+  onChange
+}) {
+  const errorContent = error ? errorMessage : void 0;
+  if (meta?.options) {
+    return (
+      // Remounted when cleared: a Radix Select can't show its placeholder again once it held a value.
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: value2 || void 0,
+          onValueChange: onChange,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                label,
+                size: "sm",
+                error,
+                errorContent,
+                children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectPlaceholder })
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: meta.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: option }, option)) })
+          ]
+        },
+        value2 ? "selected" : "empty"
+      )
+    );
+  }
+  if (field === "key") {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        label,
+        value: value2,
+        charLimit: meta?.maxLength,
+        error,
+        size: "sm",
+        errorContent,
+        onChange: (e) => onChange(e.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      label,
+      value: value2,
+      charLimit: meta?.maxLength,
+      error,
+      errorContent,
+      onChange: (e) => onChange(e.target.value),
+      size: "sm"
+    }
+  );
+}
 
 // src/components/key-value-manager/key-value-manager.utils.ts
 function validateField(value2, meta) {
   if (!value2.trim()) return false;
   if (meta?.maxLength != null && value2.length > meta.maxLength) return false;
+  if (meta?.options && !meta.options.includes(value2)) return false;
   if (meta?.regex) {
     try {
-      if (!new RegExp(meta.regex).test(value2)) return false;
+      if (!new RegExp(meta.regex, meta.regexFlags).test(value2)) return false;
     } catch {
     }
   }
@@ -61113,27 +61258,29 @@ function KeyValueManagerAddPopover({
     ) }),
     /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-80 space-y-4", children: [
       /* @__PURE__ */ jsx(
-        Input,
+        KeyValueManagerField,
         {
+          field: "key",
           label: labels.keyLabel,
           value: draftKey,
-          charLimit: meta?.key?.maxLength,
+          meta: meta?.key,
           error: keyError,
-          size: "sm",
-          errorContent: keyError ? labels.keyErrorMessage : void 0,
-          onChange: (e) => handleFieldChange("key", e.target.value)
+          errorMessage: labels.keyErrorMessage,
+          selectPlaceholder: labels.selectPlaceholder,
+          onChange: (value2) => handleFieldChange("key", value2)
         }
       ),
       /* @__PURE__ */ jsx(
-        Textarea,
+        KeyValueManagerField,
         {
+          field: "value",
           label: labels.valueLabel,
           value: draftValue,
-          charLimit: meta?.value?.maxLength,
+          meta: meta?.value,
           error: valueError,
-          errorContent: valueError ? labels.valueErrorMessage : void 0,
-          onChange: (e) => handleFieldChange("value", e.target.value),
-          size: "sm"
+          errorMessage: labels.valueErrorMessage,
+          selectPlaceholder: labels.selectPlaceholder,
+          onChange: (value2) => handleFieldChange("value", value2)
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -61296,7 +61443,8 @@ var STATIC_DEFAULT_LABELS = {
   valueLabel: "Value",
   actionLabel: "Action",
   emptyItems: "No items",
-  emptySearch: "No matches"
+  emptySearch: "No matches",
+  selectPlaceholder: "Select"
 };
 function resolveKeyValueManagerLabels(labels) {
   const merged = { ...STATIC_DEFAULT_LABELS, ...labels };
@@ -68108,6 +68256,506 @@ var SimpleInfoCard = React10.forwardRef(
   }
 );
 SimpleInfoCard.displayName = "SimpleInfoCard";
+
+// src/components/code-editor/code-editor.utils.ts
+function getLineStart(value2, pos) {
+  return value2.lastIndexOf("\n", pos - 1) + 1;
+}
+function getLineEnd(value2, pos) {
+  const next = value2.indexOf("\n", pos);
+  return next === -1 ? value2.length : next;
+}
+function getLineIndent(value2, pos) {
+  const lineStart = getLineStart(value2, pos);
+  return /^[ \t]*/.exec(value2.slice(lineStart, pos))[0];
+}
+function isMultiLineSelection(value2, start, end) {
+  return value2.slice(start, end).includes("\n");
+}
+function getSelectedLineStarts(value2, start, end) {
+  const lastPos = end > start && value2[end - 1] === "\n" ? end - 1 : end;
+  const starts = [getLineStart(value2, start)];
+  for (let i = value2.indexOf("\n", starts[0]); i !== -1 && i < lastPos; i = value2.indexOf("\n", i + 1)) {
+    starts.push(i + 1);
+  }
+  return starts;
+}
+function insertTab(value2, start, end, tabSize) {
+  const column = start - getLineStart(value2, start);
+  const text2 = " ".repeat(tabSize - column % tabSize);
+  const caret = start + text2.length;
+  return { start, end, text: text2, selectionStart: caret, selectionEnd: caret };
+}
+function indentLines(value2, start, end, tabSize) {
+  const lineStarts = getSelectedLineStarts(value2, start, end);
+  const blockStart = lineStarts[0];
+  const blockEnd = getLineEnd(value2, lineStarts[lineStarts.length - 1]);
+  const indent = " ".repeat(tabSize);
+  const added = lineStarts.map(
+    (lineStart) => lineStart === getLineEnd(value2, lineStart) ? 0 : tabSize
+  );
+  const lines = value2.slice(blockStart, blockEnd).split("\n");
+  const text2 = lines.map((line, i) => added[i] ? indent + line : line).join("\n");
+  const mapOffset = (pos, keepAtLineStart) => {
+    let shift = 0;
+    lineStarts.forEach((lineStart, i) => {
+      if (lineStart < pos || lineStart === pos && !keepAtLineStart) shift += added[i];
+    });
+    return pos + shift;
+  };
+  return {
+    start: blockStart,
+    end: blockEnd,
+    text: text2,
+    // A selection starting at column 0 keeps starting there, so the new indentation is selected too.
+    selectionStart: mapOffset(start, true),
+    selectionEnd: mapOffset(end, false)
+  };
+}
+function outdentLines(value2, start, end, tabSize) {
+  const lineStarts = getSelectedLineStarts(value2, start, end);
+  const blockStart = lineStarts[0];
+  const blockEnd = getLineEnd(value2, lineStarts[lineStarts.length - 1]);
+  const lines = value2.slice(blockStart, blockEnd).split("\n");
+  const removed = lines.map(
+    (line) => line.startsWith("	") ? 1 : Math.min(tabSize, /^ */.exec(line)[0].length)
+  );
+  const text2 = lines.map((line, i) => line.slice(removed[i])).join("\n");
+  const mapOffset = (pos) => {
+    let shift = 0;
+    lineStarts.forEach((lineStart, i) => {
+      if (lineStart <= pos) shift += Math.min(removed[i], pos - lineStart);
+    });
+    return pos - shift;
+  };
+  return {
+    start: blockStart,
+    end: blockEnd,
+    text: text2,
+    selectionStart: mapOffset(start),
+    selectionEnd: mapOffset(end)
+  };
+}
+function insertNewline(value2, start, end) {
+  const text2 = "\n" + getLineIndent(value2, start);
+  const caret = start + text2.length;
+  return { start, end, text: text2, selectionStart: caret, selectionEnd: caret };
+}
+function applyTextEdit(value2, edit) {
+  return value2.slice(0, edit.start) + edit.text + value2.slice(edit.end);
+}
+function formatJson(value2, tabSize) {
+  return JSON.stringify(JSON.parse(value2), null, tabSize);
+}
+function getBuiltInFormatter(lang) {
+  return lang.toLowerCase() === "json" ? formatJson : void 0;
+}
+function applyEdit(el, edit) {
+  const current = el.value;
+  const expected = applyTextEdit(current, edit);
+  if (expected === current) {
+    el.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+    return;
+  }
+  if (el.ownerDocument.activeElement !== el) el.focus({ preventScroll: true });
+  el.setSelectionRange(edit.start, edit.end);
+  let applied = false;
+  try {
+    applied = typeof document.execCommand === "function" && document.execCommand(edit.text ? "insertText" : "delete", false, edit.text);
+  } catch {
+    applied = false;
+  }
+  if (!applied || el.value !== expected) {
+    if (el.value !== current) el.value = current;
+    el.setRangeText(edit.text, edit.start, edit.end, "end");
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  el.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+}
+function useCodeEditorKeys({ tabSize, onKeyDown, onBlur }) {
+  const tabReleasedRef = React10.useRef(false);
+  const handleKeyDown = React10.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+      const el = event.currentTarget;
+      if (el.readOnly || el.disabled) return;
+      if (event.key === "Escape") {
+        tabReleasedRef.current = true;
+        return;
+      }
+      if (event.key === "Shift") return;
+      const released = tabReleasedRef.current;
+      tabReleasedRef.current = false;
+      const { value: value2, selectionStart: start, selectionEnd: end } = el;
+      if (event.key === "Tab") {
+        if (released || event.altKey || event.ctrlKey || event.metaKey) return;
+        event.preventDefault();
+        if (event.shiftKey) {
+          applyEdit(el, outdentLines(value2, start, end, tabSize));
+        } else if (isMultiLineSelection(value2, start, end)) {
+          applyEdit(el, indentLines(value2, start, end, tabSize));
+        } else {
+          applyEdit(el, insertTab(value2, start, end, tabSize));
+        }
+        return;
+      }
+      if (event.key === "Enter" && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+        event.preventDefault();
+        applyEdit(el, insertNewline(value2, start, end));
+      }
+    },
+    [onKeyDown, tabSize]
+  );
+  const handleBlur = React10.useCallback(
+    (event) => {
+      tabReleasedRef.current = false;
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+  return { onKeyDown: handleKeyDown, onBlur: handleBlur };
+}
+var DEFAULT_CODE_EDITOR_THEMES = {
+  light: "everforest-light",
+  dark: "everforest-dark"
+};
+var PLAIN_LANGS = /* @__PURE__ */ new Set(["text", "plaintext", "txt", "plain"]);
+var TRAILING_LINE = "\u200B";
+var transformer = {
+  // Shiki makes its `<pre>` focusable; this one sits in an `aria-hidden` layer.
+  pre(node) {
+    delete node.properties.tabindex;
+  },
+  code(node) {
+    node.children.push({ type: "text", value: TRAILING_LINE });
+  }
+};
+function plainHtml(value2) {
+  return `<pre><code>${escapeHtml(value2)}${TRAILING_LINE}</code></pre>`;
+}
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key2, message, error) {
+  if (warned.has(key2)) return;
+  warned.add(key2);
+  console.warn(`[dashboard-ui-components] ${message}`, ...error ? [error] : []);
+}
+var resolved = /* @__PURE__ */ new WeakMap();
+function useHighlightedHtml(value2, { lang, theme, themes, maxHighlightLength }) {
+  const [highlighter, setHighlighter] = React10.useState(() => {
+    const promise = getHighlighter();
+    return resolved.get(promise) ?? null;
+  });
+  React10.useEffect(() => {
+    if (highlighter) return;
+    let active2 = true;
+    const promise = getHighlighter();
+    promise.then(
+      (loaded) => {
+        resolved.set(promise, loaded);
+        if (active2) setHighlighter(loaded);
+      },
+      (error) => warnOnce("load", "Syntax highlighter failed to load; showing plain text.", error)
+    );
+    return () => {
+      active2 = false;
+    };
+  }, [highlighter]);
+  const deferredValue = React10.useDeferredValue(value2);
+  const { light, dark } = themes;
+  return React10.useMemo(() => {
+    if (!highlighter || deferredValue.length > maxHighlightLength) {
+      return plainHtml(deferredValue);
+    }
+    const normalizedLang = normalizeLang(lang);
+    if (!PLAIN_LANGS.has(normalizedLang) && !highlighter.getLoadedLanguages().includes(normalizedLang)) {
+      warnOnce(
+        `lang:${lang}`,
+        `Falling back to plain text for lang="${lang}"; not in the curated Shiki bundle.`
+      );
+      return plainHtml(deferredValue);
+    }
+    try {
+      return highlighter.codeToHtml(deferredValue, {
+        lang: normalizedLang,
+        themes: { light, dark },
+        defaultColor: theme,
+        transformers: [transformer]
+      });
+    } catch (error) {
+      warnOnce(
+        `theme:${light}:${dark}:${lang}`,
+        `Falling back to plain text for themes "${light}" / "${dark}" with lang="${lang}".`,
+        error
+      );
+      return plainHtml(deferredValue);
+    }
+  }, [highlighter, deferredValue, lang, theme, light, dark, maxHighlightLength]);
+}
+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]";
+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]";
+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: set2 } = base;
+  Object.defineProperty(node, "value", {
+    configurable: true,
+    enumerable: base.enumerable,
+    get() {
+      return get.call(this);
+    },
+    set(next) {
+      set2.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;
+  };
+}
+function hasContent(node) {
+  return node != null && node !== false && node !== "";
+}
+function toCssSize(size) {
+  return typeof size === "number" ? `${size}px` : size;
+}
+var CodeEditor = React10.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: value2,
+    defaultValue,
+    onChange,
+    onKeyDown,
+    onBlur,
+    onScroll,
+    disabled,
+    readOnly,
+    "aria-describedby": ariaDescribedBy,
+    ...textareaProps
+  }, forwardedRef) => {
+    const autoId = React10.useId();
+    const textareaId = id || autoId;
+    const errorId = `${textareaId}-error`;
+    const hasError = error || !!errorContent;
+    const isControlled = value2 !== void 0;
+    const [innerValue, setInnerValue] = React10.useState(
+      () => defaultValue == null ? "" : String(defaultValue)
+    );
+    const currentValue = isControlled ? String(value2 ?? "") : innerValue;
+    const html = useHighlightedHtml(currentValue, {
+      lang,
+      theme,
+      themes,
+      maxHighlightLength
+    });
+    const keys = useCodeEditorKeys({ tabSize, onKeyDown, onBlur });
+    const textareaRef = React10.useRef(null);
+    const stopObservingRef = React10.useRef(void 0);
+    const setTextareaRef = React10.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 format6 = formatter ?? (builtInFormatter && ((v) => builtInFormatter(v, tabSize)));
+    const showFormatButton = formatButton !== false && format6 !== void 0;
+    const handleFormat = () => {
+      const el = textareaRef.current;
+      if (!el || !format6) return;
+      let formatted;
+      try {
+        formatted = format6(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, { 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$1({ 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,
+                      "\u200B"
+                    ] }),
+                    /* @__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: value2,
+                        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";
 var maxWidthClasses = {
   sm: "max-w-2xl",
   md: "max-w-4xl",
@@ -68288,4 +68936,4 @@ lottie-react/build/index.es.js:
   (*! goToAndStop must be relative to the start of the current segment *)
 */
 
-export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };
+export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CodeEditor, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, ROLLING_PRESET_IDS, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };