@pixerate/editor-react 0.77.0 → 0.78.0

package/dist/chunk-FX3EREF5.js

@@ -0,0 +1,206 @@
+import {
+  ParameterFieldControl
+} from "./chunk-ZQZAKUUM.js";
+
+// src/effects/useEffects.ts
+import { useEffect, useState } from "react";
+function useEffects(host, provider) {
+  useEffect(() => {
+    if (!host || !provider) return;
+    return host.useEffects(provider);
+  }, [host, provider]);
+}
+function useEffectDescription(provider, effect) {
+  const [state, setState] = useState({ key: "", description: null, error: null });
+  const key = provider && effect ? `${provider.id}:${effect}` : "";
+  useEffect(() => {
+    if (!provider || !effect) return;
+    let live = true;
+    Promise.resolve().then(() => provider.describe(effect)).then(
+      (description) => live && setState({ key, description, error: null }),
+      (e) => live && setState({ key, description: null, error: e instanceof Error ? e.message : String(e) })
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider, effect, key]);
+  return state.key === key ? { description: state.description, error: state.error } : { description: null, error: null };
+}
+
+// src/effects/EffectThumbnail.tsx
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { renderEffectThumbnail } from "@pixerate/editor/effects";
+import { jsx } from "react/jsx-runtime";
+function EffectThumbnail({ provider, effect, width = 96, height = 54, className = "" }) {
+  const ref = useRef(null);
+  const [failed, setFailed] = useState2(effect.kind === "motion");
+  useEffect2(() => {
+    if (effect.kind === "motion") return;
+    let live = true;
+    renderEffectThumbnail(provider, effect, { width, height }).then(
+      (pixels) => {
+        const ctx = live ? ref.current?.getContext("2d") : null;
+        if (!ctx || typeof ImageData === "undefined") return;
+        ctx.putImageData(new ImageData(new Uint8ClampedArray(pixels.data), pixels.width, pixels.height), 0, 0);
+      },
+      () => live && setFailed(true)
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider, effect, width, height]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `relative overflow-hidden rounded border border-border bg-[repeating-conic-gradient(#8884_0_25%,transparent_0_50%)] bg-[length:12px_12px] ${className}`,
+      style: { aspectRatio: `${width} / ${height}` },
+      "data-effect-thumbnail": effect.id,
+      children: failed ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground", children: effect.kind === "motion" ? "Motion" : "No preview" }) : /* @__PURE__ */ jsx("canvas", { ref, width, height, className: "h-full w-full", "aria-hidden": "true" })
+    }
+  );
+}
+
+// src/effects/EffectsBrowser.tsx
+import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
+import { EFFECT_USE_LABELS } from "@pixerate/editor/effects";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function EffectsBrowser({ provider, uses, onPick, thumbnails = true, title = "Effects", className = "" }) {
+  const [all, setAll] = useState3([]);
+  const [query, setQuery] = useState3("");
+  const [category, setCategory] = useState3("");
+  const [use, setUse] = useState3("");
+  const [error, setError] = useState3(null);
+  useEffect3(() => {
+    if (!provider) return setAll([]);
+    let live = true;
+    Promise.resolve().then(() => provider.list()).then(
+      (list) => live && (setAll(list), setError(null)),
+      (e) => live && setError(e instanceof Error ? e.message : String(e))
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider]);
+  const [found, setFound] = useState3([]);
+  useEffect3(() => {
+    if (!provider) return setFound([]);
+    let live = true;
+    Promise.resolve().then(() => provider.search(query, { ...category ? { category } : {}, ...use ? { use } : {} })).then((list) => live && setFound(list), () => live && setFound([]));
+    return () => {
+      live = false;
+    };
+  }, [provider, query, category, use]);
+  const allowed = (e) => (uses ? e.kind !== "motion" || uses.includes("motion") : e.kind !== "motion") && (!uses || e.uses.some((u) => uses.includes(u)));
+  const categories = useMemo(() => [...new Set(all.filter(allowed).map((e) => e.category))], [all, uses]);
+  const shown = found.filter(allowed);
+  if (!provider)
+    return /* @__PURE__ */ jsx2("div", { className: `rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground ${className}`, "data-effects-browser": "", "data-effects-unavailable": "", children: "No effects provider is registered, so effects cannot be added. Effects already in the document are kept." });
+  return /* @__PURE__ */ jsxs("section", { className: `flex flex-col gap-2 ${className}`, "data-effects-browser": "", "aria-label": "Effects browser", children: [
+    title && /* @__PURE__ */ jsx2("h3", { className: "text-xs font-semibold", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "search",
+          className: "min-w-0 flex-1 rounded border border-border bg-transparent px-1.5 py-0.5 text-xs",
+          placeholder: "Search effects",
+          "aria-label": "Search effects",
+          value: query,
+          onChange: (e) => setQuery(e.currentTarget.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Category", value: category, onChange: (e) => setCategory(e.currentTarget.value), children: [
+        /* @__PURE__ */ jsx2("option", { value: "", children: "All categories" }),
+        categories.map((c) => /* @__PURE__ */ jsx2("option", { value: c, children: c }, c))
+      ] }),
+      uses && uses.length > 1 && /* @__PURE__ */ jsxs("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Use", value: use, onChange: (e) => setUse(e.currentTarget.value), children: [
+        /* @__PURE__ */ jsx2("option", { value: "", children: "Any use" }),
+        uses.map((u) => /* @__PURE__ */ jsx2("option", { value: u, children: EFFECT_USE_LABELS[u] }, u))
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx2("p", { role: "alert", className: "text-[11px] text-destructive", children: error }),
+    /* @__PURE__ */ jsx2("ul", { className: "grid grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5", role: "list", children: shown.map((e) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full flex-col gap-1 rounded border border-transparent p-1 text-left hover:border-border focus-visible:border-border",
+        title: e.description ?? e.name,
+        "data-effect-id": e.id,
+        onClick: () => onPick(e),
+        children: [
+          thumbnails && /* @__PURE__ */ jsx2(EffectThumbnail, { provider, effect: e }),
+          /* @__PURE__ */ jsx2("span", { className: "truncate text-[11px] font-medium", children: e.name }),
+          /* @__PURE__ */ jsx2("span", { className: "truncate text-[10px] text-muted-foreground", children: e.uses.map((u) => EFFECT_USE_LABELS[u]).join(" \xB7 ") })
+        ]
+      }
+    ) }, e.id)) }),
+    !shown.length && !error && /* @__PURE__ */ jsx2("p", { className: "text-[11px] text-muted-foreground", children: "No effects match." })
+  ] });
+}
+
+// src/effects/EffectParameters.tsx
+import React3, { useId, useMemo as useMemo2 } from "react";
+import { effectFieldValue, effectParameterFields } from "@pixerate/editor/effects";
+import { parameterLabel, parameterValuesEqual } from "@pixerate/editor/parameters";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function EffectParameters({ description, values, onChange, onReset, keyframed, onPreset, disabled = false, className = "" }) {
+  const fields = useMemo2(() => effectParameterFields(description), [description]);
+  const idBase = useId();
+  const gesture = React3.useRef(null);
+  const count = React3.useRef(0);
+  return /* @__PURE__ */ jsxs2("div", { className: `space-y-2 ${className}`, "data-effect-parameters": description.id, children: [
+    onPreset && description.presets.length > 0 && /* @__PURE__ */ jsxs2(
+      "select",
+      {
+        className: "w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs",
+        "aria-label": `${description.name} presets`,
+        value: "",
+        disabled,
+        onChange: (e) => {
+          const preset = description.presets.find((p) => p.name === e.currentTarget.value);
+          if (preset) onPreset({ ...description.defaults, ...preset.values });
+        },
+        children: [
+          /* @__PURE__ */ jsx3("option", { value: "", children: "Presets\u2026" }),
+          description.presets.map((p) => /* @__PURE__ */ jsx3("option", { value: p.name, children: p.name }, p.name))
+        ]
+      }
+    ),
+    fields.map((field) => {
+      const label = parameterLabel(field);
+      const inputId = `${idBase}-${field.id}`;
+      const keyed = keyframed?.has(field.id) ?? false;
+      const value = effectFieldValue(field, values[field.id]);
+      const changed = !keyed && !parameterValuesEqual(value, field.default);
+      return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", "data-effect-control": field.id, children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx3("label", { htmlFor: inputId, className: "min-w-0 flex-1 truncate text-xs font-medium", title: field.description, children: label }),
+          keyed && /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-muted-foreground", children: "keyframed" }),
+          onReset && changed && !disabled && /* @__PURE__ */ jsx3("button", { type: "button", className: "rounded px-1 text-[11px] text-muted-foreground hover:text-foreground", "aria-label": `Reset ${label}`, onClick: () => onReset(field.id), children: "\u21BA" })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          ParameterFieldControl,
+          {
+            field,
+            value,
+            id: inputId,
+            disabled: disabled || keyed,
+            onChange: (v) => onChange(field.id, v, gesture.current),
+            onGestureStart: () => gesture.current = `${idBase}:${field.id}:${++count.current}`,
+            onGestureEnd: () => gesture.current = null
+          }
+        )
+      ] }, field.id);
+    }),
+    !fields.length && /* @__PURE__ */ jsx3("p", { className: "text-[11px] text-muted-foreground", children: "No controls." })
+  ] });
+}
+
+export {
+  useEffects,
+  useEffectDescription,
+  EffectThumbnail,
+  EffectsBrowser,
+  EffectParameters
+};
+//# sourceMappingURL=chunk-FX3EREF5.js.map

package/dist/chunk-FX3EREF5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/effects/useEffects.ts","../src/effects/EffectThumbnail.tsx","../src/effects/EffectsBrowser.tsx","../src/effects/EffectParameters.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport type { EffectDescription, EffectProvider } from '@pixerate/editor/effects';\n\n/** Anything that takes an effects provider: every editor controller with effects support. */\nexport interface EffectsHost {\n  useEffects(provider: EffectProvider): () => void;\n}\n\n/**\n * Registers `provider` with an editor while mounted (or while it is the one passed), and removes it\n * again on unmount. Pass `null` or `undefined` for no provider: the editor then behaves as without\n * effects support.\n */\nexport function useEffects(host: EffectsHost | null | undefined, provider: EffectProvider | null | undefined): void {\n  useEffect(() => {\n    if (!host || !provider) return;\n    return host.useEffects(provider);\n  }, [host, provider]);\n}\n\n/** An effect's description from the provider, loaded when `effect` changes (`null` while loading or on error). */\nexport function useEffectDescription(provider: EffectProvider | null | undefined, effect: string | null | undefined): { description: EffectDescription | null; error: string | null } {\n  const [state, setState] = useState<{ key: string; description: EffectDescription | null; error: string | null }>({ key: '', description: null, error: null });\n  const key = provider && effect ? `${provider.id}:${effect}` : '';\n  useEffect(() => {\n    if (!provider || !effect) return;\n    let live = true;\n    Promise.resolve()\n      .then(() => provider.describe(effect))\n      .then(\n        (description) => live && setState({ key, description, error: null }),\n        (e: unknown) => live && setState({ key, description: null, error: e instanceof Error ? e.message : String(e) }),\n      );\n    return () => {\n      live = false;\n    };\n  }, [provider, effect, key]);\n  return state.key === key ? { description: state.description, error: state.error } : { description: null, error: null };\n}\n","import React, { useEffect, useRef, useState } from 'react';\nimport { renderEffectThumbnail, type EffectProvider, type EffectSummary } from '@pixerate/editor/effects';\n\nexport interface EffectThumbnailProps {\n  provider: EffectProvider;\n  effect: EffectSummary;\n  /** Pixel size of the preview (default 96 × 54). */\n  width?: number;\n  height?: number;\n  className?: string;\n}\n\n/**\n * A preview of an effect drawn by the provider's own renderer (filters on a sample picture,\n * transitions half way, generators mid-way through). Motion effects and failures show a label.\n */\nexport function EffectThumbnail({ provider, effect, width = 96, height = 54, className = '' }: EffectThumbnailProps) {\n  const ref = useRef<HTMLCanvasElement>(null);\n  const [failed, setFailed] = useState(effect.kind === 'motion');\n  useEffect(() => {\n    if (effect.kind === 'motion') return;\n    let live = true;\n    renderEffectThumbnail(provider, effect, { width, height }).then(\n      (pixels) => {\n        const ctx = live ? ref.current?.getContext('2d') : null;\n        if (!ctx || typeof ImageData === 'undefined') return;\n        ctx.putImageData(new ImageData(new Uint8ClampedArray(pixels.data), pixels.width, pixels.height), 0, 0);\n      },\n      () => live && setFailed(true),\n    );\n    return () => {\n      live = false;\n    };\n  }, [provider, effect, width, height]);\n  return (\n    <div\n      className={`relative overflow-hidden rounded border border-border bg-[repeating-conic-gradient(#8884_0_25%,transparent_0_50%)] bg-[length:12px_12px] ${className}`}\n      style={{ aspectRatio: `${width} / ${height}` }}\n      data-effect-thumbnail={effect.id}\n    >\n      {failed ? (\n        <span className=\"absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground\">{effect.kind === 'motion' ? 'Motion' : 'No preview'}</span>\n      ) : (\n        <canvas ref={ref} width={width} height={height} className=\"h-full w-full\" aria-hidden=\"true\" />\n      )}\n    </div>\n  );\n}\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { EFFECT_USE_LABELS, type EffectProvider, type EffectSummary, type EffectUse } from '@pixerate/editor/effects';\nimport { EffectThumbnail } from './EffectThumbnail';\n\nexport interface EffectsBrowserProps {\n  /** The editor's provider; without one the browser says effects are unavailable. */\n  provider: EffectProvider | null | undefined;\n  /** Only effects with one of these uses (default: all but motion). */\n  uses?: readonly EffectUse[];\n  /** Called with the effect the user picks. */\n  onPick: (effect: EffectSummary) => void;\n  /** Draw previews with the provider's renderer (default true). */\n  thumbnails?: boolean;\n  /** Heading (default \"Effects\"). */\n  title?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Browses a provider's effects: a search box, a category filter (and a use filter when more than\n * one use is allowed), and a grid of effects with previews. Picking one calls `onPick`.\n */\nexport function EffectsBrowser({ provider, uses, onPick, thumbnails = true, title = 'Effects', className = '' }: EffectsBrowserProps) {\n  const [all, setAll] = useState<readonly EffectSummary[]>([]);\n  const [query, setQuery] = useState('');\n  const [category, setCategory] = useState('');\n  const [use, setUse] = useState<EffectUse | ''>('');\n  const [error, setError] = useState<string | null>(null);\n  useEffect(() => {\n    if (!provider) return setAll([]);\n    let live = true;\n    Promise.resolve()\n      .then(() => provider.list())\n      .then(\n        (list) => live && (setAll(list), setError(null)),\n        (e: unknown) => live && setError(e instanceof Error ? e.message : String(e)),\n      );\n    return () => {\n      live = false;\n    };\n  }, [provider]);\n  const [found, setFound] = useState<readonly EffectSummary[]>([]);\n  useEffect(() => {\n    if (!provider) return setFound([]);\n    let live = true;\n    Promise.resolve()\n      .then(() => provider.search(query, { ...(category ? { category } : {}), ...(use ? { use } : {}) }))\n      .then((list) => live && setFound(list), () => live && setFound([]));\n    return () => {\n      live = false;\n    };\n  }, [provider, query, category, use]);\n  const allowed = (e: EffectSummary) => (uses ? e.kind !== 'motion' || uses.includes('motion') : e.kind !== 'motion') && (!uses || e.uses.some((u) => uses.includes(u)));\n  const categories = useMemo(() => [...new Set(all.filter(allowed).map((e) => e.category))], [all, uses]);\n  const shown = found.filter(allowed);\n  if (!provider)\n    return (\n      <div className={`rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground ${className}`} data-effects-browser=\"\" data-effects-unavailable=\"\">\n        No effects provider is registered, so effects cannot be added. Effects already in the document are kept.\n      </div>\n    );\n  return (\n    <section className={`flex flex-col gap-2 ${className}`} data-effects-browser=\"\" aria-label=\"Effects browser\">\n      {title && <h3 className=\"text-xs font-semibold\">{title}</h3>}\n      <div className=\"flex flex-wrap gap-1\">\n        <input\n          type=\"search\"\n          className=\"min-w-0 flex-1 rounded border border-border bg-transparent px-1.5 py-0.5 text-xs\"\n          placeholder=\"Search effects\"\n          aria-label=\"Search effects\"\n          value={query}\n          onChange={(e) => setQuery(e.currentTarget.value)}\n        />\n        <select className=\"rounded border border-border bg-transparent px-1 py-0.5 text-xs\" aria-label=\"Category\" value={category} onChange={(e) => setCategory(e.currentTarget.value)}>\n          <option value=\"\">All categories</option>\n          {categories.map((c) => (\n            <option key={c} value={c}>\n              {c}\n            </option>\n          ))}\n        </select>\n        {uses && uses.length > 1 && (\n          <select className=\"rounded border border-border bg-transparent px-1 py-0.5 text-xs\" aria-label=\"Use\" value={use} onChange={(e) => setUse(e.currentTarget.value as EffectUse | '')}>\n            <option value=\"\">Any use</option>\n            {uses.map((u) => (\n              <option key={u} value={u}>\n                {EFFECT_USE_LABELS[u]}\n              </option>\n            ))}\n          </select>\n        )}\n      </div>\n      {error && <p role=\"alert\" className=\"text-[11px] text-destructive\">{error}</p>}\n      <ul className=\"grid grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5\" role=\"list\">\n        {shown.map((e) => (\n          <li key={e.id}>\n            <button\n              type=\"button\"\n              className=\"flex w-full flex-col gap-1 rounded border border-transparent p-1 text-left hover:border-border focus-visible:border-border\"\n              title={e.description ?? e.name}\n              data-effect-id={e.id}\n              onClick={() => onPick(e)}\n            >\n              {thumbnails && <EffectThumbnail provider={provider} effect={e} />}\n              <span className=\"truncate text-[11px] font-medium\">{e.name}</span>\n              <span className=\"truncate text-[10px] text-muted-foreground\">{e.uses.map((u) => EFFECT_USE_LABELS[u]).join(' · ')}</span>\n            </button>\n          </li>\n        ))}\n      </ul>\n      {!shown.length && !error && <p className=\"text-[11px] text-muted-foreground\">No effects match.</p>}\n    </section>\n  );\n}\n","import React, { useId, useMemo } from 'react';\nimport { effectFieldValue, effectParameterFields, type EffectDescription } from '@pixerate/editor/effects';\nimport { parameterLabel, parameterValuesEqual, type ParameterValue } from '@pixerate/editor/parameters';\nimport { ParameterFieldControl } from '../parameters/fields';\n\nexport interface EffectParametersProps {\n  /** The effect's description (`describe`). */\n  description: EffectDescription;\n  /** Its saved values; controls left out show their defaults. */\n  values: Readonly<Record<string, unknown>>;\n  /**\n   * A control changed. While a slider or colour drag is under way `gesture` is a key unique to\n   * that drag, so the host can fold its changes into one undo step; otherwise `null`.\n   */\n  onChange: (control: string, value: ParameterValue, gesture: string | null) => void;\n  /** Resets one control to its default. */\n  onReset?: (control: string) => void;\n  /** Controls that are keyframed: shown read-only with a note (edit them as keyframes). */\n  keyframed?: ReadonlySet<string>;\n  /** Applies a preset's values. */\n  onPreset?: (values: Readonly<Record<string, unknown>>) => void;\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * The parameter panel of an effect, generated from its JSON Schema controls: sliders for bounded\n * numbers, switches, choices, colour pickers, vectors and text, with each control's description,\n * per-control reset and the effect's presets.\n */\nexport function EffectParameters({ description, values, onChange, onReset, keyframed, onPreset, disabled = false, className = '' }: EffectParametersProps) {\n  const fields = useMemo(() => effectParameterFields(description), [description]);\n  const idBase = useId();\n  const gesture = React.useRef<string | null>(null);\n  const count = React.useRef(0);\n  return (\n    <div className={`space-y-2 ${className}`} data-effect-parameters={description.id}>\n      {onPreset && description.presets.length > 0 && (\n        <select\n          className=\"w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs\"\n          aria-label={`${description.name} presets`}\n          value=\"\"\n          disabled={disabled}\n          onChange={(e) => {\n            const preset = description.presets.find((p) => p.name === e.currentTarget.value);\n            if (preset) onPreset({ ...description.defaults, ...preset.values });\n          }}\n        >\n          <option value=\"\">Presets…</option>\n          {description.presets.map((p) => (\n            <option key={p.name} value={p.name}>\n              {p.name}\n            </option>\n          ))}\n        </select>\n      )}\n      {fields.map((field) => {\n        const label = parameterLabel(field);\n        const inputId = `${idBase}-${field.id}`;\n        const keyed = keyframed?.has(field.id) ?? false;\n        const value = effectFieldValue(field, values[field.id]);\n        const changed = !keyed && !parameterValuesEqual(value, field.default);\n        return (\n          <div key={field.id} className=\"space-y-1\" data-effect-control={field.id}>\n            <div className=\"flex items-center gap-1.5\">\n              <label htmlFor={inputId} className=\"min-w-0 flex-1 truncate text-xs font-medium\" title={field.description}>\n                {label}\n              </label>\n              {keyed && <span className=\"text-[10px] text-muted-foreground\">keyframed</span>}\n              {onReset && changed && !disabled && (\n                <button type=\"button\" className=\"rounded px-1 text-[11px] text-muted-foreground hover:text-foreground\" aria-label={`Reset ${label}`} onClick={() => onReset(field.id)}>\n                  ↺\n                </button>\n              )}\n            </div>\n            <ParameterFieldControl\n              field={field}\n              value={value}\n              id={inputId}\n              disabled={disabled || keyed}\n              onChange={(v) => onChange(field.id, v, gesture.current)}\n              onGestureStart={() => (gesture.current = `${idBase}:${field.id}:${++count.current}`)}\n              onGestureEnd={() => (gesture.current = null)}\n            />\n          </div>\n        );\n      })}\n      {!fields.length && <p className=\"text-[11px] text-muted-foreground\">No controls.</p>}\n    </div>\n  );\n}\n"],"mappings":"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","names":["useEffect","useState","useEffect","useState","jsx","useState","useEffect","React","useMemo","jsx","jsxs","useMemo","React"]}

package/dist/chunk-ZQZAKUUM.js

@@ -0,0 +1,416 @@
+// src/parameters/fields.tsx
+import { useRef } 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 = useRef(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 = useRef(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 });
+  }
+}
+
+export {
+  parameterInputClass,
+  parameterButtonClass,
+  ParameterCommitInput,
+  ParameterNumberInput,
+  ParameterSlider,
+  ParameterToggle,
+  ParameterSelect,
+  ParameterColor,
+  ParameterVector,
+  ParameterImage,
+  ParameterText,
+  KeyframeDiamond,
+  ParameterFieldControl
+};
+//# sourceMappingURL=chunk-ZQZAKUUM.js.map