@pixerate/editor-react 0.76.0 → 0.78.0

package/dist/parameters/index.js

@@ -1,3 +1,19 @@
+import {
+  KeyframeDiamond,
+  ParameterColor,
+  ParameterCommitInput,
+  ParameterFieldControl,
+  ParameterImage,
+  ParameterNumberInput,
+  ParameterSelect,
+  ParameterSlider,
+  ParameterText,
+  ParameterToggle,
+  ParameterVector,
+  parameterButtonClass,
+  parameterInputClass
+} from "../chunk-ZQZAKUUM.js";
+
 // src/parameters/useParameters.ts
 import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import {
@@ -51,414 +67,14 @@ function useParameterCommands(registry, controller, options = {}) {
   }, [registry, controller, prefix, group, scope]);
 }
 
-// src/parameters/fields.tsx
-import { useRef as useRef2 } from "react";
-import {
-  choiceOptionLabel,
-  formatParameterNumber,
-  getChoiceOptions,
-  isSliderField,
-  normalizeHexColor,
-  parameterLabel,
-  parameterStep,
-  parseParameterNumberInput,
-  clampParameterNumber,
-  vectorComponentField,
-  vectorSize
-} from "@pixerate/editor/parameters";
-import { jsx, jsxs } from "react/jsx-runtime";
-var parameterInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
-var parameterButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
-var rangeClass = "h-4 w-full min-w-0 flex-1 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50";
-function ParameterCommitInput({ value, onCommit, multiline, className, onKeyDown, ...rest }) {
-  const commit = (el) => {
-    if (el.value !== value) onCommit(el.value, el);
-  };
-  const keyDown = (e) => {
-    onKeyDown?.(e);
-    if (e.defaultPrevented) return;
-    if (e.key === "Enter" && (!multiline || e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      commit(e.currentTarget);
-    }
-    if (e.key === "Escape") e.currentTarget.value = value;
-  };
-  const props = {
-    defaultValue: value,
-    className: className ?? parameterInputClass,
-    onBlur: (e) => commit(e.currentTarget),
-    onKeyDown: keyDown,
-    ...rest
-  };
-  return multiline ? /* @__PURE__ */ jsx("textarea", { ...props, className: `${props.className} h-auto min-h-[3.5rem] py-1` }, value) : /* @__PURE__ */ jsx("input", { type: "text", ...props }, value);
-}
-var plainNumber = (field, value) => formatParameterNumber({ ...field, unit: void 0 }, value);
-function ParameterNumberInput({
-  field,
-  value,
-  onChange,
-  disabled,
-  id,
-  "aria-label": ariaLabel
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
-    /* @__PURE__ */ jsx(
-      ParameterCommitInput,
-      {
-        id,
-        inputMode: "decimal",
-        "aria-label": ariaLabel ?? parameterLabel(field),
-        value: plainNumber(field, value),
-        disabled: disabled || field.readOnly,
-        className: `${parameterInputClass} ${field.unit ? "pr-6" : ""}`,
-        onCommit: (text, input) => {
-          const n = parseParameterNumberInput(field, text);
-          if (n === null || n === value) input.value = plainNumber(field, value);
-          else onChange(n);
-        },
-        onKeyDown: (e) => {
-          if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-          e.preventDefault();
-          const step = parameterStep(field) * (e.shiftKey ? 10 : 1);
-          onChange(clampParameterNumber(field, value + (e.key === "ArrowUp" ? step : -step)));
-        }
-      }
-    ),
-    field.unit && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground", children: field.unit })
-  ] });
-}
-function ParameterSlider(props) {
-  const { field, value, onChange, onGestureStart, onGestureEnd, disabled } = props;
-  const dragging = useRef2(false);
-  const end = () => {
-    if (!dragging.current) return;
-    dragging.current = false;
-    onGestureEnd?.();
-  };
-  if (!isSliderField(field)) return /* @__PURE__ */ jsx(ParameterNumberInput, { ...props });
-  const step = parameterStep(field);
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "range",
-        "aria-label": parameterLabel(field),
-        "aria-valuetext": formatParameterNumber(field, value),
-        min: field.min,
-        max: field.max,
-        step,
-        value,
-        disabled: disabled || field.readOnly,
-        className: rangeClass,
-        onPointerDown: () => {
-          if (dragging.current) return;
-          dragging.current = true;
-          onGestureStart?.();
-        },
-        onPointerUp: end,
-        onPointerCancel: end,
-        onBlur: end,
-        onChange: (e) => onChange(clampParameterNumber(field, Number(e.target.value)))
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ jsx(ParameterNumberInput, { ...props, id: props.id, "aria-label": `${parameterLabel(field)} value` }) })
-  ] });
-}
-function ParameterToggle({ field, value, onChange, disabled, id }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      role: "switch",
-      id,
-      "aria-checked": value,
-      "aria-label": parameterLabel(field),
-      disabled: disabled || field.readOnly,
-      onClick: () => onChange(!value),
-      className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50 ${value ? "bg-primary" : "bg-muted"}`,
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: `pointer-events-none block h-4 w-4 rounded-full bg-background shadow transition-transform ${value ? "translate-x-4" : "translate-x-0.5"}`
-        }
-      )
-    }
-  );
-}
-function ParameterSelect({ field, value, onChange, disabled, id }) {
-  const options = getChoiceOptions(field);
-  const off = disabled || field.readOnly;
-  if (field.control === "segmented") {
-    return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": parameterLabel(field), className: "inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5", children: options.map((o) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        role: "radio",
-        "aria-checked": o.value === value,
-        title: o.description,
-        disabled: off,
-        onClick: () => onChange(o.value),
-        className: `rounded px-2 py-0.5 text-xs disabled:opacity-50 ${o.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
-        children: choiceOptionLabel(o)
-      },
-      String(o.value)
-    )) });
-  }
-  const index = options.findIndex((o) => o.value === value);
-  return /* @__PURE__ */ jsx(
-    "select",
-    {
-      id,
-      "aria-label": parameterLabel(field),
-      value: String(index),
-      disabled: off,
-      onChange: (e) => {
-        const option = options[Number(e.target.value)];
-        if (option) onChange(option.value);
-      },
-      className: parameterInputClass,
-      children: options.map((o, i) => /* @__PURE__ */ jsx("option", { value: String(i), title: o.description, children: choiceOptionLabel(o) }, String(o.value)))
-    }
-  );
-}
-function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd, disabled, id }) {
-  const picking = useRef2(false);
-  const alpha = !!field.alpha;
-  const hex = normalizeHexColor(value, true) ?? "#000000ff";
-  const rgb = hex.slice(0, 7);
-  const a = hex.slice(7);
-  const off = disabled || field.readOnly;
-  const start = () => {
-    if (picking.current) return;
-    picking.current = true;
-    onGestureStart?.();
-  };
-  const end = () => {
-    if (!picking.current) return;
-    picking.current = false;
-    onGestureEnd?.();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs("span", { className: "relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px]", children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-0", style: { background: alpha ? hex : rgb } }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "color",
-            "aria-label": parameterLabel(field),
-            value: rgb,
-            disabled: off,
-            className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
-            onChange: (e) => {
-              start();
-              onChange(alpha ? `${e.target.value}${a}` : e.target.value);
-            },
-            onBlur: end
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        ParameterCommitInput,
-        {
-          id,
-          "aria-label": `${parameterLabel(field)} hex`,
-          value: alpha ? hex : rgb,
-          disabled: off,
-          spellCheck: false,
-          className: `${parameterInputClass} font-mono`,
-          onCommit: (text) => {
-            const next = normalizeHexColor(text, alpha);
-            if (next) onChange(next);
-          }
-        }
-      )
-    ] }),
-    alpha && /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "range",
-        "aria-label": `${parameterLabel(field)} opacity`,
-        min: 0,
-        max: 255,
-        step: 1,
-        value: parseInt(a, 16),
-        disabled: off,
-        className: rangeClass,
-        onPointerDown: start,
-        onPointerUp: end,
-        onPointerCancel: end,
-        onBlur: end,
-        onChange: (e) => onChange(`${rgb}${Number(e.target.value).toString(16).padStart(2, "0")}`)
-      }
-    ),
-    field.swatches && field.swatches.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: field.swatches.map((s) => {
-      const swatch = normalizeHexColor(s, alpha);
-      if (!swatch) return null;
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          title: swatch,
-          "aria-label": `${parameterLabel(field)} ${swatch}`,
-          "aria-pressed": swatch === (alpha ? hex : rgb),
-          disabled: off,
-          onClick: () => onChange(swatch),
-          className: "h-5 w-5 rounded border border-input aria-pressed:ring-1 aria-pressed:ring-primary",
-          style: { background: swatch }
-        },
-        s
-      );
-    }) })
-  ] });
-}
-function ParameterVector({ field, value, onChange, disabled, id }) {
-  const size = vectorSize(field);
-  return /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))` }, children: Array.from({ length: size }, (_, i) => {
-    const component = vectorComponentField(field, i);
-    return /* @__PURE__ */ jsxs("label", { className: "flex min-w-0 items-center gap-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "w-3 shrink-0 text-[10px] uppercase text-muted-foreground", children: component.label }),
-      /* @__PURE__ */ jsx(
-        ParameterNumberInput,
-        {
-          field: component,
-          value: value[i] ?? 0,
-          id: i === 0 ? id : void 0,
-          "aria-label": `${parameterLabel(field)} ${component.label}`,
-          disabled: disabled || field.readOnly,
-          onChange: (n) => onChange(Array.from({ length: size }, (_2, j) => j === i ? n : value[j] ?? 0))
-        }
-      )
-    ] }, i);
-  }) });
-}
-function ParameterImage({ field, value, onChange, disabled, id, resolveFile }) {
-  const off = disabled || field.readOnly;
-  const name = parameterLabel(field);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input bg-muted", children: value ? /* @__PURE__ */ jsx("img", { src: value, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "None" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ jsx(
-          ParameterCommitInput,
-          {
-            id,
-            "aria-label": `${name} URL`,
-            placeholder: "Image URL",
-            value: value.startsWith("data:") ? "" : value,
-            disabled: off,
-            onCommit: (text) => onChange(text.trim())
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-          resolveFile && /* @__PURE__ */ jsxs("label", { className: `${parameterButtonClass} cursor-pointer ${off ? "pointer-events-none opacity-50" : ""}`, children: [
-            "Choose file\u2026",
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "file",
-                className: "sr-only",
-                accept: field.accept ?? "image/*",
-                disabled: off,
-                "aria-label": `${name} file`,
-                onChange: async (e) => {
-                  const file = e.target.files?.[0];
-                  e.target.value = "";
-                  if (file) onChange(await resolveFile(file));
-                }
-              }
-            )
-          ] }),
-          value && /* @__PURE__ */ jsx("button", { type: "button", className: parameterButtonClass, disabled: off, onClick: () => onChange(""), "aria-label": `Clear ${name}`, children: "Clear" })
-        ] })
-      ] })
-    ] }),
-    field.options && field.options.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: field.options.map((o) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        title: o.label ?? o.url,
-        "aria-label": o.label ?? o.url,
-        "aria-pressed": o.url === value,
-        disabled: off,
-        onClick: () => onChange(o.url),
-        className: "h-9 w-12 overflow-hidden rounded border border-input aria-pressed:ring-2 aria-pressed:ring-primary",
-        children: /* @__PURE__ */ jsx("img", { src: o.url, alt: "", className: "h-full w-full object-cover" })
-      },
-      o.url
-    )) })
-  ] });
-}
-function ParameterText({ field, value, onChange, disabled, id }) {
-  return /* @__PURE__ */ jsx(
-    ParameterCommitInput,
-    {
-      id,
-      "aria-label": parameterLabel(field),
-      multiline: field.multiline,
-      placeholder: field.placeholder,
-      maxLength: field.maxLength,
-      value,
-      disabled: disabled || field.readOnly,
-      onCommit: onChange
-    }
-  );
-}
-function KeyframeDiamond({ state, onToggle, label, disabled, className = "" }) {
-  const keyed = state === "keyed";
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      "data-key-state": state,
-      "aria-pressed": keyed,
-      "aria-label": `${keyed ? "Remove" : "Add"} keyframe for ${label}`,
-      title: keyed ? "Remove keyframe here" : "Add keyframe at the playhead",
-      disabled,
-      onClick: onToggle,
-      className: `inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-40 ${state === "none" ? "text-muted-foreground hover:text-foreground" : "text-amber-500"} ${className}`,
-      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 10 10", className: "h-2.5 w-2.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M5 0.8 9.2 5 5 9.2 0.8 5Z",
-          fill: keyed ? "currentColor" : "none",
-          stroke: "currentColor",
-          strokeWidth: "1.3",
-          opacity: state === "animated" ? 0.7 : 1
-        }
-      ) })
-    }
-  );
-}
-function ParameterFieldControl({ field, value, onChange, resolveFile, ...rest }) {
-  const set = onChange;
-  switch (field.type) {
-    case "number":
-    case "int":
-      return /* @__PURE__ */ jsx(ParameterSlider, { field, value, onChange: set, ...rest });
-    case "boolean":
-      return /* @__PURE__ */ jsx(ParameterToggle, { field, value, onChange: set, ...rest });
-    case "choice":
-      return /* @__PURE__ */ jsx(ParameterSelect, { field, value, onChange: set, ...rest });
-    case "color":
-      return /* @__PURE__ */ jsx(ParameterColor, { field, value, onChange: set, ...rest });
-    case "vector":
-      return /* @__PURE__ */ jsx(ParameterVector, { field, value, onChange: set, ...rest });
-    case "image":
-      return /* @__PURE__ */ jsx(ParameterImage, { field, value, onChange: set, resolveFile, ...rest });
-    case "text":
-      return /* @__PURE__ */ jsx(ParameterText, { field, value, onChange: set, ...rest });
-  }
-}
-
 // src/parameters/ParametersPanel.tsx
 import { useId, useState } from "react";
 import {
   isParameterGroup,
-  parameterLabel as parameterLabel2,
+  parameterLabel,
   parameterValuesEqual
 } from "@pixerate/editor/parameters";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function FieldRow({
   controller,
   state,
@@ -468,16 +84,16 @@ function FieldRow({
   showFieldReset,
   resolveFile
 }) {
-  const label = parameterLabel2(field);
+  const label = parameterLabel(field);
   const inputId = `${idBase}-${field.id}`;
   const value = state.values[field.id];
   const error = state.errors[field.id];
   const changed = !parameterValuesEqual(value, state.defaults[field.id]);
-  return /* @__PURE__ */ jsxs2("div", { "data-parameter-id": field.id, "data-parameter-type": field.type, className: "space-y-1", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-[1.25rem] items-center gap-1.5", children: [
-      showKeyframes && /* @__PURE__ */ jsx2(KeyframeDiamond, { state: state.keys[field.id] ?? "none", label, onToggle: () => controller.toggleKeyframe(field.id) }),
-      /* @__PURE__ */ jsx2("label", { htmlFor: inputId, className: "min-w-0 flex-1 truncate text-xs font-medium text-foreground", title: field.description, children: label }),
-      showFieldReset && changed && !field.readOnly && /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs("div", { "data-parameter-id": field.id, "data-parameter-type": field.type, className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-[1.25rem] items-center gap-1.5", children: [
+      showKeyframes && /* @__PURE__ */ jsx(KeyframeDiamond, { state: state.keys[field.id] ?? "none", label, onToggle: () => controller.toggleKeyframe(field.id) }),
+      /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "min-w-0 flex-1 truncate text-xs font-medium text-foreground", title: field.description, children: label }),
+      showFieldReset && changed && !field.readOnly && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -489,8 +105,8 @@ function FieldRow({
         }
       )
     ] }),
-    field.description && /* @__PURE__ */ jsx2("p", { className: "text-[11px] leading-snug text-muted-foreground", children: field.description }),
-    /* @__PURE__ */ jsx2(
+    field.description && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: field.description }),
+    /* @__PURE__ */ jsx(
       ParameterFieldControl,
       {
         field,
@@ -502,7 +118,7 @@ function FieldRow({
         onGestureEnd: () => controller.endGesture()
       }
     ),
-    error && /* @__PURE__ */ jsx2("p", { role: "alert", className: "text-[11px] text-destructive", children: error })
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[11px] text-destructive", children: error })
   ] });
 }
 function PresetBar({ controller, state }) {
@@ -519,9 +135,9 @@ function PresetBar({ controller, state }) {
       setMessage(null);
     } else setMessage(result.message);
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-1.5", "data-parameter-presets": "", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", "data-parameter-presets": "", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxs(
         "select",
         {
           "aria-label": "Preset",
@@ -529,16 +145,16 @@ function PresetBar({ controller, state }) {
           value: state.activePreset ?? "",
           onChange: (e) => e.target.value && controller.applyPreset(e.target.value),
           children: [
-            /* @__PURE__ */ jsx2("option", { value: "", children: state.presets.length ? "Presets\u2026" : "No presets" }),
-            state.presets.map((p) => /* @__PURE__ */ jsx2("option", { value: p.name, title: p.description, children: p.name }, p.name))
+            /* @__PURE__ */ jsx("option", { value: "", children: state.presets.length ? "Presets\u2026" : "No presets" }),
+            state.presets.map((p) => /* @__PURE__ */ jsx("option", { value: p.name, title: p.description, children: p.name }, p.name))
           ]
         }
       ),
-      /* @__PURE__ */ jsx2("button", { type: "button", className: parameterButtonClass, onClick: () => setSaving((s) => !s), "aria-expanded": saving, children: "Save\u2026" }),
-      active && !active.builtIn && /* @__PURE__ */ jsx2("button", { type: "button", className: parameterButtonClass, "aria-label": `Delete preset ${active.name}`, onClick: () => controller.deletePreset(active.name), children: "Delete" })
+      /* @__PURE__ */ jsx("button", { type: "button", className: parameterButtonClass, onClick: () => setSaving((s) => !s), "aria-expanded": saving, children: "Save\u2026" }),
+      active && !active.builtIn && /* @__PURE__ */ jsx("button", { type: "button", className: parameterButtonClass, "aria-label": `Delete preset ${active.name}`, onClick: () => controller.deletePreset(active.name), children: "Delete" })
     ] }),
-    saving && /* @__PURE__ */ jsxs2("form", { className: "flex items-center gap-1.5", onSubmit: save, children: [
-      /* @__PURE__ */ jsx2(
+    saving && /* @__PURE__ */ jsxs("form", { className: "flex items-center gap-1.5", onSubmit: save, children: [
+      /* @__PURE__ */ jsx(
         "input",
         {
           autoFocus: true,
@@ -549,9 +165,9 @@ function PresetBar({ controller, state }) {
           onChange: (e) => setName(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx2("button", { type: "submit", className: parameterButtonClass, children: "Save" })
+      /* @__PURE__ */ jsx("button", { type: "submit", className: parameterButtonClass, children: "Save" })
     ] }),
-    message && /* @__PURE__ */ jsx2("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+    message && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
   ] });
 }
 function ParametersPanel({
@@ -572,7 +188,7 @@ function ParametersPanel({
   const renderItems = (items) => items.map((item) => {
     if (state.visible[item.id] === false) return null;
     if (isParameterGroup(item)) return renderGroup(item);
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx(
       FieldRow,
       {
         controller,
@@ -589,8 +205,8 @@ function ParametersPanel({
   const renderGroup = (group) => {
     const collapsed = !!state.collapsed[group.id];
     const bodyId = `${idBase}-group-${group.id}`;
-    return /* @__PURE__ */ jsxs2("section", { "data-parameter-group": group.id, className: "rounded-md border border-border", children: [
-      /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs("section", { "data-parameter-group": group.id, className: "rounded-md border border-border", children: [
+      /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -599,22 +215,22 @@ function ParametersPanel({
           onClick: () => controller.toggleCollapsed(group.id),
           className: "flex w-full items-center gap-1.5 px-2 py-1.5 text-left text-xs font-semibold text-foreground hover:bg-muted",
           children: [
-            /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: `inline-block text-[10px] text-muted-foreground transition-transform ${collapsed ? "" : "rotate-90"}`, children: "\u25B6" }),
-            parameterLabel2(group)
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `inline-block text-[10px] text-muted-foreground transition-transform ${collapsed ? "" : "rotate-90"}`, children: "\u25B6" }),
+            parameterLabel(group)
           ]
         }
       ),
-      !collapsed && /* @__PURE__ */ jsxs2("div", { id: bodyId, className: "space-y-3 border-t border-border px-2 py-2", children: [
-        group.description && /* @__PURE__ */ jsx2("p", { className: "text-[11px] text-muted-foreground", children: group.description }),
+      !collapsed && /* @__PURE__ */ jsxs("div", { id: bodyId, className: "space-y-3 border-t border-border px-2 py-2", children: [
+        group.description && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: group.description }),
         renderItems(group.fields)
       ] })
     ] }, group.id);
   };
-  return /* @__PURE__ */ jsxs2("div", { className: `space-y-3 text-foreground ${className}`, "data-parameters-panel": "", children: [
-    (heading || showToolbar) && /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-      heading && /* @__PURE__ */ jsx2("h3", { className: "mr-auto text-sm font-semibold", children: heading }),
-      showToolbar && /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Parameter actions", children: [
-        /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-3 text-foreground ${className}`, "data-parameters-panel": "", children: [
+    (heading || showToolbar) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+      heading && /* @__PURE__ */ jsx("h3", { className: "mr-auto text-sm font-semibold", children: heading }),
+      showToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Parameter actions", children: [
+        /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -625,7 +241,7 @@ function ParametersPanel({
             children: "Undo"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -636,12 +252,12 @@ function ParametersPanel({
             children: "Redo"
           }
         ),
-        /* @__PURE__ */ jsx2("button", { type: "button", className: parameterButtonClass, disabled: !state.modified, onClick: () => controller.reset(), children: "Reset" }),
-        /* @__PURE__ */ jsx2("button", { type: "button", className: parameterButtonClass, onClick: () => controller.randomize(), children: "Randomize" })
+        /* @__PURE__ */ jsx("button", { type: "button", className: parameterButtonClass, disabled: !state.modified, onClick: () => controller.reset(), children: "Reset" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: parameterButtonClass, onClick: () => controller.randomize(), children: "Randomize" })
       ] })
     ] }),
-    showPresets && /* @__PURE__ */ jsx2(PresetBar, { controller, state }),
-    state.fields.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : renderItems(state.schema.fields)
+    showPresets && /* @__PURE__ */ jsx(PresetBar, { controller, state }),
+    state.fields.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : renderItems(state.schema.fields)
   ] });
 }
 export {