@pixerate/editor-react 0.19.0 → 0.20.0

package/dist/parameters/index.cjs

@@ -0,0 +1,692 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/parameters/index.ts
+var parameters_exports = {};
+__export(parameters_exports, {
+  KeyframeDiamond: () => KeyframeDiamond,
+  ParameterColor: () => ParameterColor,
+  ParameterCommitInput: () => ParameterCommitInput,
+  ParameterFieldControl: () => ParameterFieldControl,
+  ParameterImage: () => ParameterImage,
+  ParameterNumberInput: () => ParameterNumberInput,
+  ParameterSelect: () => ParameterSelect,
+  ParameterSlider: () => ParameterSlider,
+  ParameterText: () => ParameterText,
+  ParameterToggle: () => ParameterToggle,
+  ParameterVector: () => ParameterVector,
+  ParametersPanel: () => ParametersPanel,
+  parameterButtonClass: () => parameterButtonClass,
+  parameterInputClass: () => parameterInputClass,
+  useParameterCommands: () => useParameterCommands,
+  useParameters: () => useParameters,
+  useParametersController: () => useParametersController,
+  useParametersState: () => useParametersState
+});
+module.exports = __toCommonJS(parameters_exports);
+
+// src/parameters/useParameters.ts
+var import_react = require("react");
+var import_parameters = require("@pixerate/editor/parameters");
+function useParametersController(options) {
+  const ref = (0, import_react.useRef)(null);
+  if (!ref.current) ref.current = new import_parameters.ParametersController(options);
+  const controller = ref.current;
+  const schema = options.schema;
+  const first = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    controller.setSchema(schema);
+  }, [controller, schema]);
+  return controller;
+}
+function useParametersState(controller) {
+  return (0, import_react.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+}
+function useParameters(controllerOrOptions) {
+  const own = (0, import_react.useRef)(null);
+  let controller;
+  if (controllerOrOptions instanceof import_parameters.ParametersController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new import_parameters.ParametersController(controllerOrOptions);
+    controller = own.current;
+  }
+  const state = useParametersState(controller);
+  const actions = (0, import_react.useMemo)(
+    () => ({
+      setValue: (id, value) => controller.setValue(id, value),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo(),
+      reset: (ids) => void controller.reset(ids),
+      randomize: (ids) => void controller.randomize({ ids })
+    }),
+    [controller]
+  );
+  return { controller, state, values: state.values, ...actions };
+}
+function useParameterCommands(registry, controller, options = {}) {
+  const { prefix, group, scope } = options;
+  (0, import_react.useEffect)(() => {
+    if (!registry) return;
+    return registry.register((0, import_parameters.createParameterCommands)(controller, { prefix, group, scope }));
+  }, [registry, controller, prefix, group, scope]);
+}
+
+// src/parameters/fields.tsx
+var import_react2 = require("react");
+var import_parameters2 = require("@pixerate/editor/parameters");
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("textarea", { ...props, className: `${props.className} h-auto min-h-[3.5rem] py-1` }, value) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "text", ...props }, value);
+}
+var plainNumber = (field, value) => (0, import_parameters2.formatParameterNumber)({ ...field, unit: void 0 }, value);
+function ParameterNumberInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  id,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ParameterCommitInput,
+      {
+        id,
+        inputMode: "decimal",
+        "aria-label": ariaLabel ?? (0, import_parameters2.parameterLabel)(field),
+        value: plainNumber(field, value),
+        disabled: disabled || field.readOnly,
+        className: `${parameterInputClass} ${field.unit ? "pr-6" : ""}`,
+        onCommit: (text, input) => {
+          const n = (0, import_parameters2.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 = (0, import_parameters2.parameterStep)(field) * (e.shiftKey ? 10 : 1);
+          onChange((0, import_parameters2.clampParameterNumber)(field, value + (e.key === "ArrowUp" ? step : -step)));
+        }
+      }
+    ),
+    field.unit && /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_react2.useRef)(false);
+  const end = () => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    onGestureEnd?.();
+  };
+  if (!(0, import_parameters2.isSliderField)(field)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterNumberInput, { ...props });
+  const step = (0, import_parameters2.parameterStep)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "range",
+        "aria-label": (0, import_parameters2.parameterLabel)(field),
+        "aria-valuetext": (0, import_parameters2.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((0, import_parameters2.clampParameterNumber)(field, Number(e.target.value)))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterNumberInput, { ...props, id: props.id, "aria-label": `${(0, import_parameters2.parameterLabel)(field)} value` }) })
+  ] });
+}
+function ParameterToggle({ field, value, onChange, disabled, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": value,
+      "aria-label": (0, import_parameters2.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__ */ (0, import_jsx_runtime.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 = (0, import_parameters2.getChoiceOptions)(field);
+  const off = disabled || field.readOnly;
+  if (field.control === "segmented") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "radiogroup", "aria-label": (0, import_parameters2.parameterLabel)(field), className: "inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.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: (0, import_parameters2.choiceOptionLabel)(o)
+      },
+      String(o.value)
+    )) });
+  }
+  const index = options.findIndex((o) => o.value === value);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "select",
+    {
+      id,
+      "aria-label": (0, import_parameters2.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__ */ (0, import_jsx_runtime.jsx)("option", { value: String(i), title: o.description, children: (0, import_parameters2.choiceOptionLabel)(o) }, String(o.value)))
+    }
+  );
+}
+function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd, disabled, id }) {
+  const picking = (0, import_react2.useRef)(false);
+  const alpha = !!field.alpha;
+  const hex = (0, import_parameters2.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0", style: { background: alpha ? hex : rgb } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type: "color",
+            "aria-label": (0, import_parameters2.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__ */ (0, import_jsx_runtime.jsx)(
+        ParameterCommitInput,
+        {
+          id,
+          "aria-label": `${(0, import_parameters2.parameterLabel)(field)} hex`,
+          value: alpha ? hex : rgb,
+          disabled: off,
+          spellCheck: false,
+          className: `${parameterInputClass} font-mono`,
+          onCommit: (text) => {
+            const next = (0, import_parameters2.normalizeHexColor)(text, alpha);
+            if (next) onChange(next);
+          }
+        }
+      )
+    ] }),
+    alpha && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "range",
+        "aria-label": `${(0, import_parameters2.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-1", children: field.swatches.map((s) => {
+      const swatch = (0, import_parameters2.normalizeHexColor)(s, alpha);
+      if (!swatch) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          title: swatch,
+          "aria-label": `${(0, import_parameters2.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 = (0, import_parameters2.vectorSize)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))` }, children: Array.from({ length: size }, (_, i) => {
+    const component = (0, import_parameters2.vectorComponentField)(field, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex min-w-0 items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-3 shrink-0 text-[10px] uppercase text-muted-foreground", children: component.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ParameterNumberInput,
+        {
+          field: component,
+          value: value[i] ?? 0,
+          id: i === 0 ? id : void 0,
+          "aria-label": `${(0, import_parameters2.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 = (0, import_parameters2.parameterLabel)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("img", { src: value, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "None" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ParameterCommitInput,
+          {
+            id,
+            "aria-label": `${name} URL`,
+            placeholder: "Image URL",
+            value: value.startsWith("data:") ? "" : value,
+            disabled: off,
+            onCommit: (text) => onChange(text.trim())
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-1", children: [
+          resolveFile && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: `${parameterButtonClass} cursor-pointer ${off ? "pointer-events-none opacity-50" : ""}`, children: [
+            "Choose file\u2026",
+            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: parameterButtonClass, disabled: off, onClick: () => onChange(""), "aria-label": `Clear ${name}`, children: "Clear" })
+        ] })
+      ] })
+    ] }),
+    field.options && field.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-1", children: field.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("img", { src: o.url, alt: "", className: "h-full w-full object-cover" })
+      },
+      o.url
+    )) })
+  ] });
+}
+function ParameterText({ field, value, onChange, disabled, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ParameterCommitInput,
+    {
+      id,
+      "aria-label": (0, import_parameters2.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 10 10", className: "h-2.5 w-2.5", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ParameterSlider, { field, value, onChange: set, ...rest });
+    case "boolean":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterToggle, { field, value, onChange: set, ...rest });
+    case "choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterSelect, { field, value, onChange: set, ...rest });
+    case "color":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterColor, { field, value, onChange: set, ...rest });
+    case "vector":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterVector, { field, value, onChange: set, ...rest });
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterImage, { field, value, onChange: set, resolveFile, ...rest });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParameterText, { field, value, onChange: set, ...rest });
+  }
+}
+
+// src/parameters/ParametersPanel.tsx
+var import_react3 = require("react");
+var import_parameters3 = require("@pixerate/editor/parameters");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FieldRow({
+  controller,
+  state,
+  field,
+  idBase,
+  showKeyframes,
+  showFieldReset,
+  resolveFile
+}) {
+  const label = (0, import_parameters3.parameterLabel)(field);
+  const inputId = `${idBase}-${field.id}`;
+  const value = state.values[field.id];
+  const error = state.errors[field.id];
+  const changed = !(0, import_parameters3.parameterValuesEqual)(value, state.defaults[field.id]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-parameter-id": field.id, "data-parameter-type": field.type, className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex min-h-[1.25rem] items-center gap-1.5", children: [
+      showKeyframes && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(KeyframeDiamond, { state: state.keys[field.id] ?? "none", label, onToggle: () => controller.toggleKeyframe(field.id) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "rounded px-1 text-[11px] text-muted-foreground hover:text-foreground",
+          title: `Reset to ${String(state.defaults[field.id])}`,
+          "aria-label": `Reset ${label}`,
+          onClick: () => controller.reset([field.id]),
+          children: "\u21BA"
+        }
+      )
+    ] }),
+    field.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[11px] leading-snug text-muted-foreground", children: field.description }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ParameterFieldControl,
+      {
+        field,
+        value,
+        id: inputId,
+        resolveFile,
+        onChange: (v) => controller.setValue(field.id, v),
+        onGestureStart: () => controller.beginGesture(field.id),
+        onGestureEnd: () => controller.endGesture()
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: error })
+  ] });
+}
+function PresetBar({ controller, state }) {
+  const [saving, setSaving] = (0, import_react3.useState)(false);
+  const [name, setName] = (0, import_react3.useState)("");
+  const [message, setMessage] = (0, import_react3.useState)(null);
+  const active = state.presets.find((p) => p.name === state.activePreset);
+  const save = (e) => {
+    e.preventDefault();
+    const result = controller.savePreset(name);
+    if (result.ok) {
+      setSaving(false);
+      setName("");
+      setMessage(null);
+    } else setMessage(result.message);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-1.5", "data-parameter-presets": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "select",
+        {
+          "aria-label": "Preset",
+          className: parameterInputClass,
+          value: state.activePreset ?? "",
+          onChange: (e) => e.target.value && controller.applyPreset(e.target.value),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: state.presets.length ? "Presets\u2026" : "No presets" }),
+            state.presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: p.name, title: p.description, children: p.name }, p.name))
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: parameterButtonClass, onClick: () => setSaving((s) => !s), "aria-expanded": saving, children: "Save\u2026" }),
+      active && !active.builtIn && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: parameterButtonClass, "aria-label": `Delete preset ${active.name}`, onClick: () => controller.deletePreset(active.name), children: "Delete" })
+    ] }),
+    saving && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { className: "flex items-center gap-1.5", onSubmit: save, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          autoFocus: true,
+          "aria-label": "Preset name",
+          placeholder: "Preset name",
+          className: parameterInputClass,
+          value: name,
+          onChange: (e) => setName(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "submit", className: parameterButtonClass, children: "Save" })
+    ] }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+function ParametersPanel({
+  controller,
+  title,
+  showToolbar = true,
+  showPresets = true,
+  showKeyframes,
+  showFieldReset = true,
+  resolveFile,
+  emptyMessage = "No parameters.",
+  className = ""
+}) {
+  const state = useParametersState(controller);
+  const idBase = (0, import_react3.useId)();
+  const keys = showKeyframes ?? state.keyframesEnabled;
+  const heading = title === void 0 ? state.schema.title : title;
+  const renderItems = (items) => items.map((item) => {
+    if (state.visible[item.id] === false) return null;
+    if ((0, import_parameters3.isParameterGroup)(item)) return renderGroup(item);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FieldRow,
+      {
+        controller,
+        state,
+        field: item,
+        idBase,
+        showKeyframes: keys,
+        showFieldReset,
+        resolveFile
+      },
+      item.id
+    );
+  });
+  const renderGroup = (group) => {
+    const collapsed = !!state.collapsed[group.id];
+    const bodyId = `${idBase}-group-${group.id}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { "data-parameter-group": group.id, className: "rounded-md border border-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": !collapsed,
+          "aria-controls": bodyId,
+          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__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", className: `inline-block text-[10px] text-muted-foreground transition-transform ${collapsed ? "" : "rotate-90"}`, children: "\u25B6" }),
+            (0, import_parameters3.parameterLabel)(group)
+          ]
+        }
+      ),
+      !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id: bodyId, className: "space-y-3 border-t border-border px-2 py-2", children: [
+        group.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[11px] text-muted-foreground", children: group.description }),
+        renderItems(group.fields)
+      ] })
+    ] }, group.id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `space-y-3 text-foreground ${className}`, "data-parameters-panel": "", children: [
+    (heading || showToolbar) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+      heading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "mr-auto text-sm font-semibold", children: heading }),
+      showToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Parameter actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: parameterButtonClass,
+            disabled: !state.canUndo,
+            title: state.canUndo ? `Undo ${state.undoLabel}` : "Nothing to undo",
+            onClick: () => controller.undo(),
+            children: "Undo"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: parameterButtonClass,
+            disabled: !state.canRedo,
+            title: state.canRedo ? `Redo ${state.redoLabel}` : "Nothing to redo",
+            onClick: () => controller.redo(),
+            children: "Redo"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: parameterButtonClass, disabled: !state.modified, onClick: () => controller.reset(), children: "Reset" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: parameterButtonClass, onClick: () => controller.randomize(), children: "Randomize" })
+      ] })
+    ] }),
+    showPresets && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PresetBar, { controller, state }),
+    state.fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : renderItems(state.schema.fields)
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KeyframeDiamond,
+  ParameterColor,
+  ParameterCommitInput,
+  ParameterFieldControl,
+  ParameterImage,
+  ParameterNumberInput,
+  ParameterSelect,
+  ParameterSlider,
+  ParameterText,
+  ParameterToggle,
+  ParameterVector,
+  ParametersPanel,
+  parameterButtonClass,
+  parameterInputClass,
+  useParameterCommands,
+  useParameters,
+  useParametersController,
+  useParametersState
+});
+//# sourceMappingURL=index.cjs.map