@pixerate/editor-react 0.65.0 → 0.67.0

package/dist/{chunk-OSBDCFF4.js → chunk-LCTQWNTL.js}

@@ -1666,7 +1666,7 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
 
 // src/image-editor/FreeTransformOptionsBar.tsx
 import { useEffect as useEffect7, useState as useState10 } from "react";
-import { FREE_TRANSFORM_FIELDS, FREE_TRANSFORM_MODE_OPTIONS, INTERPOLATIONS, TRANSFORM_ANCHORS } from "@pixerate/editor/image-editor";
+import { FREE_TRANSFORM_FIELDS, FREE_TRANSFORM_MODE_OPTIONS, INTERPOLATIONS, TRANSFORM_ANCHORS, WARP_GRID_OPTIONS, WARP_STYLE_OPTIONS } from "@pixerate/editor/image-editor";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var chip2 = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var round = (v, unit) => unit === "px" ? Math.round(v * 10) / 10 : Math.round(v * 100) / 100;
@@ -1675,6 +1675,11 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
   useEffect7(() => tool.subscribe(() => setTick((n) => n + 1)), [tool]);
   const bar = tool.bar();
   if (!tool.active || !bar) return null;
+  const warp = tool.warpBar();
+  const warpNumber = (key, raw) => {
+    const v = Number(raw);
+    if (raw.trim() !== "" && Number.isFinite(v) && v !== warp[key]) tool.setWarp({ [key]: Math.max(-100, Math.min(100, v)) });
+  };
   const apply = (field, raw) => {
     const v = Number(raw);
     if (raw.trim() !== "" && Number.isFinite(v) && Math.abs(v - bar[field]) > 1e-9) tool.setField(field, v);
@@ -1682,7 +1687,66 @@ var FreeTransformOptionsBar = ({ tool, className }) => {
   return /* @__PURE__ */ jsxs10("div", { className: `flex flex-wrap items-center gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "free-transform-options", role: "toolbar", "aria-label": "Free Transform options", children: [
     /* @__PURE__ */ jsx10("div", { className: "flex gap-1", role: "group", "aria-label": "Transform mode", children: FREE_TRANSFORM_MODE_OPTIONS.map((m) => /* @__PURE__ */ jsx10("button", { type: "button", title: m.title, "aria-pressed": tool.mode === m.id, className: chip2(tool.mode === m.id), onClick: () => tool.setMode(m.id), children: m.label }, m.id)) }),
     /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-3 gap-px", role: "group", "aria-label": "Reference point", children: TRANSFORM_ANCHORS.map((a) => /* @__PURE__ */ jsx10("button", { type: "button", "aria-label": `Reference point ${a}`, title: `Reference point: ${a}`, className: "h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500", onClick: () => tool.setReference(a) }, a)) }),
-    FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", title: f.title, children: [
+    tool.mode === "warp" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": "Warp options", children: [
+      /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: "Warp" }),
+        /* @__PURE__ */ jsx10("select", { "aria-label": "Warp style", value: warp.style, onChange: (e) => tool.setWarp({ style: e.target.value }), className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5", children: WARP_STYLE_OPTIONS.map((o) => /* @__PURE__ */ jsx10("option", { value: o.id, children: o.label }, o.id)) })
+      ] }),
+      ["bend", "horizontal", "vertical"].map((k) => /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: k === "bend" ? "Bend" : k === "horizontal" ? "H" : "V" }),
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            type: "number",
+            "aria-label": k === "bend" ? "Warp bend in percent" : `Warp ${k} distortion in percent`,
+            defaultValue: warp[k],
+            min: -100,
+            max: 100,
+            disabled: warp.style === "custom",
+            className: "w-14 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-right disabled:opacity-40",
+            onBlur: (e) => warpNumber(k, e.currentTarget.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                warpNumber(k, e.currentTarget.value);
+              }
+            }
+          },
+          `${k}:${warp[k]}`
+        ),
+        /* @__PURE__ */ jsx10("span", { className: "text-slate-500", children: "%" })
+      ] }, k)),
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          title: "Bend along the vertical axis",
+          "aria-pressed": warp.orientation === "vertical",
+          disabled: warp.style === "custom",
+          className: chip2(warp.orientation === "vertical"),
+          onClick: () => tool.setWarp({ orientation: warp.orientation === "vertical" ? "horizontal" : "vertical" }),
+          children: "Vertical"
+        }
+      ),
+      /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: "Grid" }),
+        /* @__PURE__ */ jsx10(
+          "select",
+          {
+            "aria-label": "Warp grid",
+            value: WARP_GRID_OPTIONS.find((g) => g.columns === warp.columns && g.rows === warp.rows)?.id ?? "1x1",
+            onChange: (e) => {
+              const g = WARP_GRID_OPTIONS.find((o) => o.id === e.target.value);
+              tool.setWarp({ columns: g.columns, rows: g.rows });
+            },
+            className: "rounded border border-slate-700 bg-slate-900 px-1 py-0.5",
+            children: WARP_GRID_OPTIONS.map((g) => /* @__PURE__ */ jsx10("option", { value: g.id, children: g.label }, g.id))
+          }
+        )
+      ] })
+    ] }),
+    tool.mode !== "warp" && FREE_TRANSFORM_FIELDS.map((f) => /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", title: f.title, children: [
       /* @__PURE__ */ jsx10("span", { className: "text-slate-400", children: f.label }),
       /* @__PURE__ */ jsx10(
         "input",
@@ -3226,4 +3290,4 @@ export {
   FreeTransformOptionsBar,
   ImageEditor
 };
-//# sourceMappingURL=chunk-OSBDCFF4.js.map
+//# sourceMappingURL=chunk-LCTQWNTL.js.map