@wow-two-beta/ui 0.0.17 → 0.0.19

package/dist/{chunk-ILYL6ROC.js → chunk-WRPLV6H2.js}

@@ -1,8 +1,8 @@
 import { listboxVariants, listboxItemVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-FFQENBTW.js';
-import { PopoverTrigger, Popover, PopoverContent } from './chunk-2VAZKEQD.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-DSA7L7PD.js';
 import { Tag } from './chunk-ZCA365IX.js';
-import { useControlled } from './chunk-4P2TFUVW.js';
 import { tv, dataAttr } from './chunk-BMBIZLO4.js';
+import { useControlled } from './chunk-4P2TFUVW.js';
 import { Icon } from './chunk-TDX22OWF.js';
 import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-NC2CBGX2.js';
 import { composeRefs } from './chunk-DN7WBRIV.js';
@@ -11,7 +11,8 @@ import { cn } from './chunk-KZ4VFY2T.js';
 import * as React from 'react';
 import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, useEffect, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, UploadCloud, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, UploadCloud, ChevronRight, Copy, ChevronLeft, Heading1, Heading2, Bold, Italic, Code, Link2, List, Quote } from 'lucide-react';
+import { marked } from 'marked';
 
 var Label = forwardRef(
   ({ className, required, htmlFor, id, children, ...props }, ref) => {
@@ -4240,7 +4241,807 @@ Editable.Preview = EditablePreview;
 Editable.Input = EditableInput;
 Editable.Submit = EditableSubmit;
 Editable.Cancel = EditableCancel;
+var WizardContext = createContext(null);
+function useWizard() {
+  const ctx = useContext(WizardContext);
+  if (!ctx) throw new Error("useWizard must be used inside <Wizard>");
+  return ctx;
+}
+var Wizard = forwardRef(function Wizard2({
+  currentStep: currentStepProp,
+  defaultCurrentStep,
+  onStepChange,
+  onComplete,
+  canGoBack = true,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const childArray = Children.toArray(children).filter(isValidElement);
+  const stepFromChildren = childArray.filter(
+    (c) => c.type.displayName === "WizardStep"
+  ).map((c) => {
+    const props = c.props;
+    return {
+      id: props.id,
+      label: props.label,
+      optional: props.optional,
+      final: props.final
+    };
+  });
+  const [steps, setSteps] = useState(stepFromChildren);
+  const validatorsRef = useState(() => /* @__PURE__ */ new Map())[0];
+  const initialStep = stepFromChildren[0]?.id ?? "";
+  const [currentStepId, setCurrentStepId] = useControlled({
+    controlled: currentStepProp,
+    default: defaultCurrentStep ?? initialStep,
+    onChange: onStepChange
+  });
+  const [visited, setVisited] = useState(() => /* @__PURE__ */ new Set([initialStep]));
+  const [isPending, setIsPending] = useState(false);
+  const currentIndex = steps.findIndex((s) => s.id === currentStepId);
+  const currentStep = steps[currentIndex];
+  const registerStep = useCallback((info) => {
+    setSteps((prev) => {
+      const idx = prev.findIndex((s) => s.id === info.id);
+      if (idx >= 0) {
+        const next2 = prev.slice();
+        next2[idx] = info;
+        return next2;
+      }
+      return [...prev, info];
+    });
+  }, []);
+  const unregisterStep = useCallback((id) => {
+    setSteps((prev) => prev.filter((s) => s.id !== id));
+  }, []);
+  const registerValidator = useCallback(
+    (id, validator) => {
+      validatorsRef.set(id, validator);
+    },
+    [validatorsRef]
+  );
+  const unregisterValidator = useCallback(
+    (id) => {
+      validatorsRef.delete(id);
+    },
+    [validatorsRef]
+  );
+  const goTo = useCallback(
+    (idOrIndex) => {
+      const target = typeof idOrIndex === "number" ? steps[idOrIndex]?.id : idOrIndex;
+      if (!target) return;
+      setCurrentStepId(target);
+      setVisited((prev) => /* @__PURE__ */ new Set([...prev, target]));
+    },
+    [steps, setCurrentStepId]
+  );
+  const next = useCallback(async () => {
+    if (!currentStep || isPending) return;
+    const validator = validatorsRef.get(currentStep.id);
+    if (validator) {
+      setIsPending(true);
+      try {
+        const ok = await validator();
+        if (!ok) return;
+      } finally {
+        setIsPending(false);
+      }
+    }
+    if (currentStep.final) {
+      setIsPending(true);
+      try {
+        await onComplete?.();
+      } finally {
+        setIsPending(false);
+      }
+      return;
+    }
+    const nextStep = steps[currentIndex + 1];
+    if (nextStep) goTo(nextStep.id);
+  }, [currentStep, currentIndex, steps, isPending, onComplete, validatorsRef, goTo]);
+  const back = useCallback(() => {
+    if (!canGoBack) return;
+    const prev = steps[currentIndex - 1];
+    if (prev) goTo(prev.id);
+  }, [canGoBack, currentIndex, steps, goTo]);
+  const ctx = useMemo(
+    () => ({
+      steps,
+      currentIndex,
+      currentStep,
+      goTo,
+      next,
+      back,
+      canGoBack,
+      visited,
+      registerStep,
+      unregisterStep,
+      registerValidator,
+      unregisterValidator,
+      isPending
+    }),
+    [
+      steps,
+      currentIndex,
+      currentStep,
+      goTo,
+      next,
+      back,
+      canGoBack,
+      visited,
+      registerStep,
+      unregisterStep,
+      registerValidator,
+      unregisterValidator,
+      isPending
+    ]
+  );
+  return /* @__PURE__ */ jsx(WizardContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...rest, children }) });
+});
+var WizardSteps = forwardRef(
+  function WizardSteps2({ className, ...rest }, ref) {
+    const ctx = useWizard();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-label": "Wizard steps",
+        className: cn("flex items-center gap-2 overflow-x-auto", className),
+        ...rest,
+        children: ctx.steps.map((step, i) => {
+          const isCurrent = ctx.currentIndex === i;
+          const wasVisited = ctx.visited.has(step.id);
+          const canJump = ctx.canGoBack && wasVisited;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": isCurrent,
+              "aria-disabled": !canJump || void 0,
+              onClick: () => canJump && ctx.goTo(step.id),
+              className: cn(
+                "flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+                isCurrent ? "bg-primary text-primary-foreground" : wasVisited ? "bg-muted text-foreground hover:bg-muted/70" : "text-muted-foreground",
+                !canJump && "cursor-default"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "grid h-5 w-5 place-items-center rounded-full bg-background/20 text-[10px]", children: i + 1 }),
+                step.label ?? step.id,
+                step.optional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] opacity-70", children: "(optional)" })
+              ]
+            },
+            step.id
+          );
+        })
+      }
+    );
+  }
+);
+var WizardStep = forwardRef(function WizardStep2({ id, label, validate, optional, final, className, children, ...rest }, ref) {
+  const ctx = useWizard();
+  const isCurrent = ctx.currentStep?.id === id;
+  useMemo(() => {
+    ctx.registerStep({ id, label, optional, final });
+    return id;
+  }, [id, label, optional, final]);
+  useMemo(() => {
+    if (validate) ctx.registerValidator(id, validate);
+    else ctx.unregisterValidator(id);
+    return validate;
+  }, [id, validate]);
+  if (!isCurrent) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      "aria-labelledby": `wizard-step-${id}`,
+      className: cn("flex flex-col gap-3", className),
+      ...rest,
+      children
+    }
+  );
+});
+WizardStep.displayName = "WizardStep";
+var WizardFooter = forwardRef(
+  function WizardFooter2({
+    prevLabel = "Back",
+    nextLabel = "Next",
+    submitLabel = "Finish",
+    showPrev = true,
+    className,
+    ...rest
+  }, ref) {
+    const ctx = useWizard();
+    const isFirst = ctx.currentIndex === 0;
+    const isFinal = ctx.currentStep?.final ?? false;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("mt-2 flex items-center justify-between gap-3", className),
+        ...rest,
+        children: [
+          showPrev && !isFirst && ctx.canGoBack ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: ctx.back,
+              disabled: ctx.isPending,
+              className: "inline-flex h-9 items-center rounded-md border border-border bg-background px-4 text-sm font-medium hover:bg-muted disabled:opacity-50",
+              children: prevLabel
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: ctx.next,
+              disabled: ctx.isPending,
+              className: "inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
+              children: ctx.isPending ? "\u2026" : isFinal ? submitLabel : nextLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Wizard.Steps = WizardSteps;
+Wizard.Step = WizardStep;
+Wizard.Footer = WizardFooter;
+var CodeEditor = forwardRef(
+  function CodeEditor2({
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    language,
+    tabSize = 2,
+    useTabs = false,
+    disabled,
+    readOnly,
+    invalid,
+    minHeight = "12rem",
+    placeholder,
+    className,
+    onKeyDown,
+    onScroll,
+    ...rest
+  }, forwardedRef) {
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue ?? "",
+      onChange: onValueChange
+    });
+    const textareaRef = useRef(null);
+    const gutterRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    useImperativeHandle(forwardedRef, () => textareaRef.current);
+    const lineCount = useMemo(() => value.split("\n").length, [value]);
+    const indentChar = useTabs ? "	" : " ".repeat(tabSize);
+    const insertAtSelection = useCallback(
+      (insert, selStart, selEnd) => {
+        const next = value.slice(0, selStart) + insert + value.slice(selEnd);
+        setValue(next);
+        return selStart + insert.length;
+      },
+      [value, setValue]
+    );
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || disabled || readOnly) return;
+      const ta = e.currentTarget;
+      const start = ta.selectionStart;
+      const end = ta.selectionEnd;
+      if (e.key === "Tab") {
+        e.preventDefault();
+        if (start === end) {
+          if (e.shiftKey) {
+            const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+            const lineSlice = value.slice(lineStart, start);
+            const match = useTabs ? /^\t/ : new RegExp(`^ {1,${tabSize}}`);
+            const m = match.exec(lineSlice);
+            if (m) {
+              const next = value.slice(0, lineStart) + lineSlice.slice(m[0].length) + value.slice(start);
+              setValue(next);
+              requestAnimationFrame(() => {
+                if (textareaRef.current) {
+                  const newPos = start - m[0].length;
+                  textareaRef.current.selectionStart = newPos;
+                  textareaRef.current.selectionEnd = newPos;
+                }
+              });
+            }
+          } else {
+            const newPos = insertAtSelection(indentChar, start, end);
+            requestAnimationFrame(() => {
+              if (textareaRef.current) {
+                textareaRef.current.selectionStart = newPos;
+                textareaRef.current.selectionEnd = newPos;
+              }
+            });
+          }
+        } else {
+          const before = value.slice(0, start);
+          const between = value.slice(start, end);
+          const after = value.slice(end);
+          const lineStartOffset = before.lastIndexOf("\n") + 1;
+          const blockStart = before.slice(0, lineStartOffset);
+          const block = before.slice(lineStartOffset) + between;
+          if (e.shiftKey) {
+            const re = useTabs ? /^\t/gm : new RegExp(`^ {1,${tabSize}}`, "gm");
+            const next = blockStart + block.replace(re, "") + after;
+            setValue(next);
+          } else {
+            const next = blockStart + block.replace(/^/gm, indentChar) + after;
+            setValue(next);
+          }
+        }
+      }
+    };
+    const state = invalid ? "invalid" : "default";
+    const gutterText = useMemo(
+      () => Array.from({ length: lineCount }, (_, i) => String(i + 1)).join("\n"),
+      [lineCount]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-state": state,
+        "data-language": language || void 0,
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
+        className: cn(
+          "relative flex overflow-hidden rounded-md border border-input bg-card text-card-foreground font-mono text-sm shadow-sm",
+          "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40",
+          state === "invalid" && "border-destructive focus-within:border-destructive focus-within:ring-destructive/40",
+          disabled && "cursor-not-allowed opacity-60",
+          className
+        ),
+        style: { minHeight },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: gutterRef,
+              "aria-hidden": "true",
+              className: "select-none whitespace-pre overflow-hidden border-r border-border bg-muted/40 px-3 py-2 text-right text-muted-foreground tabular-nums",
+              style: { transform: `translateY(${-scrollTop}px)` },
+              children: gutterText
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ...rest,
+              ref: composeRefs(forwardedRef, textareaRef),
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              onScroll: (e) => {
+                setScrollTop(e.currentTarget.scrollTop);
+                onScroll?.(e);
+              },
+              disabled,
+              readOnly,
+              spellCheck: false,
+              placeholder,
+              "aria-invalid": invalid || void 0,
+              className: "block flex-1 resize-none whitespace-pre overflow-auto bg-transparent px-3 py-2 outline-none placeholder:text-subtle-foreground disabled:cursor-not-allowed"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var wrap = (before, after) => ({ value, start, end }) => {
+  const sel = value.slice(start, end);
+  const next = value.slice(0, start) + before + sel + after + value.slice(end);
+  const selStart = start + before.length;
+  return { value: next, selStart, selEnd: selStart + sel.length };
+};
+var linePrefix = (prefix) => ({ value, start, end }) => {
+  const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+  const trailing = value.slice(end).indexOf("\n");
+  const lineEnd = trailing === -1 ? value.length : end + trailing;
+  const block = value.slice(lineStart, lineEnd);
+  const updated = block.split("\n").map((l) => prefix + l).join("\n");
+  const next = value.slice(0, lineStart) + updated + value.slice(lineEnd);
+  return { value: next, selStart: lineStart + prefix.length, selEnd: lineStart + updated.length };
+};
+var ACTIONS = [
+  { key: "h1", label: "Heading 1", icon: /* @__PURE__ */ jsx(Icon, { icon: Heading1, size: 14 }), apply: linePrefix("# ") },
+  { key: "h2", label: "Heading 2", icon: /* @__PURE__ */ jsx(Icon, { icon: Heading2, size: 14 }), apply: linePrefix("## ") },
+  { key: "bold", label: "Bold", icon: /* @__PURE__ */ jsx(Icon, { icon: Bold, size: 14 }), apply: wrap("**", "**") },
+  { key: "italic", label: "Italic", icon: /* @__PURE__ */ jsx(Icon, { icon: Italic, size: 14 }), apply: wrap("*", "*") },
+  { key: "code", label: "Inline code", icon: /* @__PURE__ */ jsx(Icon, { icon: Code, size: 14 }), apply: wrap("`", "`") },
+  { key: "link", label: "Link", icon: /* @__PURE__ */ jsx(Icon, { icon: Link2, size: 14 }), apply: wrap("[", "](https://)") },
+  { key: "list", label: "List", icon: /* @__PURE__ */ jsx(Icon, { icon: List, size: 14 }), apply: linePrefix("- ") },
+  { key: "quote", label: "Blockquote", icon: /* @__PURE__ */ jsx(Icon, { icon: Quote, size: 14 }), apply: linePrefix("> ") }
+];
+var MarkdownEditor = forwardRef(
+  function MarkdownEditor2({
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    view: viewProp,
+    defaultView,
+    onViewChange,
+    renderPreview,
+    disabled,
+    readOnly,
+    invalid,
+    minHeight = "18rem",
+    placeholder,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: defaultValue ?? "",
+      onChange: onValueChange
+    });
+    const [view, setView] = useControlled({
+      controlled: viewProp,
+      default: defaultView ?? "split",
+      onChange: onViewChange
+    });
+    const textareaRef = useRef(null);
+    const groupId = useId$1();
+    useImperativeHandle(forwardedRef, () => textareaRef.current);
+    const previewHtml = useMemo(() => {
+      if (renderPreview) return null;
+      try {
+        return marked.parse(value, { async: false });
+      } catch {
+        return "<p>Failed to render preview.</p>";
+      }
+    }, [value, renderPreview]);
+    const applyAction = (action) => {
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const next = action.apply({
+        value,
+        start: ta.selectionStart ?? value.length,
+        end: ta.selectionEnd ?? value.length
+      });
+      setValue(next.value);
+      requestAnimationFrame(() => {
+        ta.focus();
+        ta.selectionStart = next.selStart;
+        ta.selectionEnd = next.selEnd;
+      });
+    };
+    const showEdit = view === "split" || view === "edit";
+    const showPreview = view === "split" || view === "preview";
+    const state = invalid ? "invalid" : "default";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-state": state,
+        className: cn(
+          "flex flex-col overflow-hidden rounded-md border border-input bg-card text-card-foreground shadow-sm",
+          state === "invalid" && "border-destructive",
+          disabled && "opacity-60",
+          className
+        ),
+        style: { minHeight },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 border-b border-border bg-muted/40 px-2 py-1", children: [
+            /* @__PURE__ */ jsx("div", { role: "toolbar", "aria-label": "Markdown formatting", className: "flex items-center gap-0.5", children: ACTIONS.map((a) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": a.label,
+                disabled: disabled || readOnly,
+                onClick: () => applyAction(a),
+                className: "inline-flex h-7 w-7 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+                children: a.icon
+              },
+              a.key
+            )) }),
+            /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "View mode", className: "ml-auto flex items-center gap-0.5 rounded-md bg-card p-0.5 ring-1 ring-border", children: ["edit", "split", "preview"].map((v) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": view === v,
+                onClick: () => setView(v),
+                className: cn(
+                  "inline-flex h-6 items-center rounded px-2 text-xs font-medium transition-colors",
+                  view === v ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: v
+              },
+              v
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 divide-x divide-border", style: { minHeight: 0 }, children: [
+            showEdit && /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ...rest,
+                ref: textareaRef,
+                id: groupId,
+                value,
+                placeholder,
+                disabled,
+                readOnly,
+                spellCheck: false,
+                "aria-invalid": invalid || void 0,
+                onChange: (e) => setValue(e.target.value),
+                className: cn(
+                  "flex-1 resize-none whitespace-pre-wrap break-words bg-transparent p-3 font-mono text-sm outline-none placeholder:text-subtle-foreground disabled:cursor-not-allowed",
+                  showPreview && "border-r-0"
+                )
+              }
+            ),
+            showPreview && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-live": "polite",
+                "aria-label": "Preview",
+                className: "prose prose-sm flex-1 overflow-auto bg-background p-3 text-sm text-foreground",
+                children: renderPreview ? renderPreview(value) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: previewHtml ?? "" } })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+function describeType(v) {
+  if (v === null) return "null";
+  if (Array.isArray(v)) return "array";
+  return typeof v;
+}
+function pathToString(path) {
+  return path.map((p) => typeof p === "number" ? `[${p}]` : path.indexOf(p) === 0 ? p : `.${p}`).join("");
+}
+function setAtPath(root, path, next) {
+  if (path.length === 0) return next;
+  const [head, ...rest] = path;
+  if (Array.isArray(root)) {
+    const idx = head;
+    const copy = root.slice();
+    copy[idx] = setAtPath(root[idx], rest, next);
+    return copy;
+  }
+  if (root && typeof root === "object") {
+    const key = head;
+    return { ...root, [key]: setAtPath(root[key], rest, next) };
+  }
+  return root;
+}
+var JSONEditor = forwardRef(function JSONEditor2({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  mode: modeProp,
+  defaultMode = "tree",
+  onModeChange,
+  disabled,
+  readOnly,
+  invalid,
+  indent = 2,
+  minHeight = "14rem",
+  className,
+  ...rest
+}, ref) {
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? {},
+    onChange: onValueChange
+  });
+  const [mode, setMode] = useControlled({
+    controlled: modeProp,
+    default: defaultMode,
+    onChange: onModeChange
+  });
+  const updateAt = (path, next) => {
+    setValue(setAtPath(value, path, next));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-state": invalid ? "invalid" : "default",
+      className: cn(
+        "flex flex-col overflow-hidden rounded-md border border-input bg-card text-card-foreground shadow-sm",
+        invalid && "border-destructive",
+        disabled && "opacity-60",
+        className
+      ),
+      style: { minHeight },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 border-b border-border bg-muted/40 px-2 py-1", children: /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "JSON mode", className: "flex items-center gap-0.5 rounded-md bg-card p-0.5 ring-1 ring-border", children: ["tree", "text"].map((m) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": mode === m,
+            onClick: () => setMode(m),
+            className: cn(
+              "inline-flex h-6 items-center rounded px-2 text-xs font-medium transition-colors",
+              mode === m ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: m
+          },
+          m
+        )) }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", style: { minHeight: 0 }, children: mode === "tree" ? /* @__PURE__ */ jsx(TreeView, { value, updateAt, disabled, readOnly }) : /* @__PURE__ */ jsx(TextView, { value, setValue, disabled, readOnly, indent }) })
+      ]
+    }
+  );
+});
+function TreeView({ value, updateAt, disabled, readOnly }) {
+  return /* @__PURE__ */ jsx("ul", { role: "tree", className: "font-mono text-sm", children: /* @__PURE__ */ jsx(TreeNode, { keyName: null, value, path: [], updateAt, disabled, readOnly, depth: 0 }) });
+}
+function TreeNode({ keyName, value, path, updateAt, disabled, readOnly, depth }) {
+  const type = describeType(value);
+  const isObject = type === "object" || type === "array";
+  const [open, setOpen] = useState(depth < 2);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const startEdit = () => {
+    if (disabled || readOnly || isObject) return;
+    setEditing(true);
+    setDraft(typeof value === "string" ? value : String(value));
+  };
+  const commitEdit = () => {
+    setEditing(false);
+    if (typeof value === "number") {
+      const n = Number(draft);
+      if (!Number.isNaN(n)) updateAt(path, n);
+    } else if (typeof value === "boolean") {
+      if (draft === "true" || draft === "false") updateAt(path, draft === "true");
+    } else if (value === null) {
+      if (draft === "null") updateAt(path, null);
+    } else {
+      updateAt(path, draft);
+    }
+  };
+  const onKey = (e) => {
+    if (e.key === "Enter") commitEdit();
+    if (e.key === "Escape") setEditing(false);
+  };
+  const copyPath = () => {
+    const text = pathToString(path);
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(text).catch(() => {
+      });
+    }
+  };
+  const entries = isObject ? Array.isArray(value) ? value.map((v, i) => [i, v]) : Object.entries(value) : [];
+  return /* @__PURE__ */ jsxs("li", { role: "treeitem", "aria-expanded": isObject ? open : void 0, className: "px-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "group flex items-start gap-1 py-0.5", style: { paddingLeft: depth * 16 }, children: [
+      isObject ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": open ? "Collapse" : "Expand",
+          onClick: () => setOpen((o) => !o),
+          className: "inline-flex h-5 w-5 items-center justify-center text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, size: 12, className: cn("transition-transform", open && "rotate-90") })
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "inline-block h-5 w-5" }),
+      keyName !== null && /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+        typeof keyName === "string" ? `"${keyName}"` : keyName,
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: ": " })
+      ] }),
+      isObject ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: Array.isArray(value) ? `Array(${entries.length})` : `Object(${entries.length})` }) : editing ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          autoFocus: true,
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onKeyDown: onKey,
+          onBlur: commitEdit,
+          className: "h-5 rounded-sm bg-background px-1 text-sm font-mono outline-none ring-2 ring-ring"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: startEdit,
+          className: cn(
+            "cursor-text rounded-sm px-1 text-left transition-colors",
+            !disabled && !readOnly && "hover:bg-muted",
+            type === "string" && "text-info",
+            type === "number" && "text-warning",
+            type === "boolean" && "text-success",
+            type === "null" && "text-muted-foreground italic"
+          ),
+          children: type === "string" ? `"${value}"` : String(value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Copy path ${pathToString(path) || "root"}`,
+          onClick: copyPath,
+          className: "ml-auto opacity-0 transition-opacity group-hover:opacity-100 inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
+          children: /* @__PURE__ */ jsx(Icon, { icon: Copy, size: 11 })
+        }
+      )
+    ] }),
+    isObject && open && /* @__PURE__ */ jsx("ul", { role: "group", children: entries.map(([k, v]) => /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        keyName: k,
+        value: v,
+        path: [...path, k],
+        updateAt,
+        disabled,
+        readOnly,
+        depth: depth + 1
+      },
+      String(k)
+    )) })
+  ] });
+}
+function TextView({ value, setValue, disabled, readOnly, indent }) {
+  const initial = useMemo(() => safeStringify(value, indent), [value, indent]);
+  const [draft, setDraft] = useState(initial);
+  const [error, setError] = useState(null);
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (!dirty.current) setDraft(initial);
+  }, [initial]);
+  const commit = () => {
+    try {
+      const parsed = JSON.parse(draft);
+      setError(null);
+      setValue(parsed);
+      dirty.current = false;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Invalid JSON");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value: draft,
+        disabled,
+        readOnly,
+        spellCheck: false,
+        onChange: (e) => {
+          dirty.current = true;
+          setDraft(e.target.value);
+        },
+        onBlur: commit,
+        onKeyDown: (e) => {
+          if (e.key === "Escape") {
+            setDraft(initial);
+            setError(null);
+            dirty.current = false;
+          }
+        },
+        className: cn(
+          "flex-1 resize-none whitespace-pre bg-transparent p-3 font-mono text-sm outline-none placeholder:text-subtle-foreground disabled:cursor-not-allowed",
+          error && "text-foreground"
+        )
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { role: "alert", className: "border-t border-destructive bg-destructive-soft px-3 py-2 text-xs text-destructive", children: error })
+  ] });
+}
+function safeStringify(value, indent) {
+  try {
+    return JSON.stringify(value, null, indent);
+  } catch {
+    return "";
+  }
+}
 
-export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, Fieldset, FilePicker, FileUpload, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, colorSwatchVariants };
-//# sourceMappingURL=chunk-ILYL6ROC.js.map
-//# sourceMappingURL=chunk-ILYL6ROC.js.map
+export { Calendar, CharacterCount, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, Fieldset, FilePicker, FileUpload, FormErrorMessage, FormField, FormHelperText, InputAddon, InputGroup, JSONEditor, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PasswordInput, PasswordStrength, PercentInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, useWizard };
+//# sourceMappingURL=chunk-WRPLV6H2.js.map
+//# sourceMappingURL=chunk-WRPLV6H2.js.map