geoiq-frontend-ui-kit 2.0.2 → 2.0.4

package/dist/index.es164.js

@@ -1,57 +1,28 @@
-import { applyZoom as m, renderOverlay as x } from "./index.es147.js";
-function f(n) {
-  const [r, i] = n;
-  return { x: (r.x + i.x) / 2, y: (r.y + i.y) / 2 };
-}
-function t(n) {
-  const [r, i] = n;
-  return Math.hypot(r.x - i.x, r.y - i.y);
-}
-function g(n) {
-  n.dragMode && (n.pendingStroke = null, n.pendingShape = null, n.dragMode = null, n.activePointerId != null && n.overlayEl?.hasPointerCapture?.(n.activePointerId) && n.overlayEl.releasePointerCapture(n.activePointerId), n.activePointerId = null, x(n), n.notify());
-}
-function s(n) {
-  const r = [...n.panPointers.values()].slice(0, 2);
-  if (r.length !== 2) return null;
-  const i = f(r);
-  return { x: i.x, y: i.y, distance: t(r) };
-}
-function d(n) {
-  n.panFrame != null && (cancelAnimationFrame(n.panFrame), n.panFrame = null);
-}
-function y(n) {
-  const r = [...n.panPointers.values()].slice(0, 2);
-  if (r.length !== 2 || !n.panLast || !n.stageEl) return;
-  const i = n.stageEl, o = f(r), e = t(r), c = i.getBoundingClientRect(), p = o.x - c.left, a = o.y - c.top;
-  if (n.panLast.distance > 0 && e > 0) {
-    const u = e / n.panLast.distance;
-    if (Math.abs(u - 1) > 5e-3) {
-      const P = n.viewScale;
-      m(n, n.zoom * u);
-      const l = n.viewScale / P;
-      l !== 1 && (i.scrollLeft = (i.scrollLeft + p) * l - p, i.scrollTop = (i.scrollTop + a) * l - a);
+import { cva as e } from "class-variance-authority";
+const t = e(
+  "w-auto min-w-[50px] h-5 flex items-center justify-center gap-2 px-1 py-0.5 rounded-[4px]",
+  {
+    variants: {
+      trend: {
+        1: "bg-success-1 border border-success-1",
+        "-1": "bg-danger-1 border border-danger-1",
+        0: "",
+        null: ""
+      }
     }
   }
-  i.scrollLeft -= o.x - n.panLast.x, i.scrollTop -= o.y - n.panLast.y, n.panLast = { x: o.x, y: o.y, distance: e };
-}
-function L(n, r) {
-  return r.pointerType === "mouse" || (n.panPointers ??= /* @__PURE__ */ new Map(), n.panPointers.set(r.pointerId, { x: r.clientX, y: r.clientY }), !n.stageEl || n.panPointers.size < 2) ? !1 : (g(n), n.panLast = s(n), !0);
-}
-function F(n, r) {
-  return !n.panPointers?.has(r.pointerId) || (n.panPointers.set(r.pointerId, { x: r.clientX, y: r.clientY }), n.panPointers.size < 2 || !n.panLast || !n.stageEl) ? !1 : (n.panFrame == null && (n.panFrame = requestAnimationFrame(() => {
-    n.panFrame = null, y(n);
-  })), !0);
-}
-function h(n, r) {
-  n.panPointers && (n.panFrame != null && (d(n), y(n)), n.panPointers.delete(r.pointerId), n.panLast = n.panPointers.size >= 2 ? s(n) : null);
-}
-function I(n) {
-  d(n), n.panPointers?.clear(), n.panLast = null;
-}
+), s = e("text-sm", {
+  variants: {
+    trend: {
+      1: "text-success-1",
+      "-1": "text-danger-1",
+      0: "",
+      null: ""
+    }
+  }
+});
 export {
-  L as panPointerDown,
-  F as panPointerMove,
-  h as panPointerUp,
-  I as resetPan
+  t as trendBoxStyles,
+  s as trendValueStyles
 };
 //# sourceMappingURL=index.es164.js.map

package/dist/index.es164.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es164.js","sources":["../src/components/organisms/image-editor/engine/touch-pan.js"],"sourcesContent":["import { applyZoom, renderOverlay } from './rendering.js'\n\nfunction midpoint(points) {\n  const [a, b] = points\n  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }\n}\n\nfunction distance(points) {\n  const [a, b] = points\n  return Math.hypot(a.x - b.x, a.y - b.y)\n}\n\nfunction cancelActiveDrag(state) {\n  if (!state.dragMode) return\n  state.pendingStroke = null\n  state.pendingShape = null\n  state.dragMode = null\n  if (\n    state.activePointerId != null &&\n    state.overlayEl?.hasPointerCapture?.(state.activePointerId)\n  ) {\n    state.overlayEl.releasePointerCapture(state.activePointerId)\n  }\n  state.activePointerId = null\n  renderOverlay(state)\n  state.notify()\n}\n\nfunction baseline(state) {\n  const points = [...state.panPointers.values()].slice(0, 2)\n  if (points.length !== 2) return null\n  const mid = midpoint(points)\n  return { x: mid.x, y: mid.y, distance: distance(points) }\n}\n\nfunction cancelFrame(state) {\n  if (state.panFrame == null) return\n  cancelAnimationFrame(state.panFrame)\n  state.panFrame = null\n}\n\nfunction applyGesture(state) {\n  const points = [...state.panPointers.values()].slice(0, 2)\n  if (points.length !== 2 || !state.panLast || !state.stageEl) return\n\n  const stage = state.stageEl\n  const mid = midpoint(points)\n  const dist = distance(points)\n  const rect = stage.getBoundingClientRect()\n  const localX = mid.x - rect.left\n  const localY = mid.y - rect.top\n\n  if (state.panLast.distance > 0 && dist > 0) {\n    const ratio = dist / state.panLast.distance\n    if (Math.abs(ratio - 1) > 0.005) {\n      const previousScale = state.viewScale\n      applyZoom(state, state.zoom * ratio)\n      const scaled = state.viewScale / previousScale\n      if (scaled !== 1) {\n        stage.scrollLeft = (stage.scrollLeft + localX) * scaled - localX\n        stage.scrollTop = (stage.scrollTop + localY) * scaled - localY\n      }\n    }\n  }\n\n  stage.scrollLeft -= mid.x - state.panLast.x\n  stage.scrollTop -= mid.y - state.panLast.y\n  state.panLast = { x: mid.x, y: mid.y, distance: dist }\n}\n\nexport function panPointerDown(state, e) {\n  if (e.pointerType === 'mouse') return false\n  state.panPointers ??= new Map()\n  state.panPointers.set(e.pointerId, { x: e.clientX, y: e.clientY })\n  if (!state.stageEl || state.panPointers.size < 2) return false\n\n  cancelActiveDrag(state)\n  state.panLast = baseline(state)\n  return true\n}\n\nexport function panPointerMove(state, e) {\n  if (!state.panPointers?.has(e.pointerId)) return false\n  state.panPointers.set(e.pointerId, { x: e.clientX, y: e.clientY })\n  if (state.panPointers.size < 2 || !state.panLast || !state.stageEl) {\n    return false\n  }\n\n  if (state.panFrame == null) {\n    state.panFrame = requestAnimationFrame(() => {\n      state.panFrame = null\n      applyGesture(state)\n    })\n  }\n  return true\n}\n\nexport function panPointerUp(state, e) {\n  if (!state.panPointers) return\n  if (state.panFrame != null) {\n    cancelFrame(state)\n    applyGesture(state)\n  }\n  state.panPointers.delete(e.pointerId)\n  state.panLast = state.panPointers.size >= 2 ? baseline(state) : null\n}\n\nexport function resetPan(state) {\n  cancelFrame(state)\n  state.panPointers?.clear()\n  state.panLast = null\n}\n"],"names":["midpoint","points","a","b","distance","cancelActiveDrag","state","renderOverlay","baseline","mid","cancelFrame","applyGesture","stage","dist","rect","localX","localY","ratio","previousScale","applyZoom","scaled","panPointerDown","e","panPointerMove","panPointerUp","resetPan"],"mappings":"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"}
+{"version":3,"file":"index.es164.js","sources":["../src/components/ui/report-snippet-view/report-snippet-view-style.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const trendBoxStyles = cva(\n  'w-auto min-w-[50px] h-5 flex items-center justify-center gap-2 px-1 py-0.5 rounded-[4px]',\n  {\n    variants: {\n      trend: {\n        '1': 'bg-success-1 border border-success-1',\n        '-1': 'bg-danger-1 border border-danger-1',\n        '0': '',\n        null: '',\n      },\n    },\n  }\n)\n\nexport const trendValueStyles = cva('text-sm', {\n  variants: {\n    trend: {\n      '1': 'text-success-1',\n      '-1': 'text-danger-1',\n      '0': '',\n      null: '',\n    },\n  },\n})\n"],"names":["trendBoxStyles","cva","trendValueStyles"],"mappings":";AAEO,MAAMA,IAAiBC;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAK;AAAA,QACL,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ,GAEaC,IAAmBD,EAAI,WAAW;AAAA,EAC7C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAK;AAAA,MACL,MAAM;AAAA,MACN,GAAK;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,CAAC;"}

package/dist/index.es165.js

@@ -1,39 +1,94 @@
-import { X as s, Type as n, Sticker as c, Shapes as m } from "lucide-react";
-import e from "react";
-import { cn as i } from "./index.es89.js";
-function o(t) {
-  return t === "text" ? /* @__PURE__ */ e.createElement(n, { className: "h-3.5 w-3.5 shrink-0 text-light-4" }) : t === "sticker" ? /* @__PURE__ */ e.createElement(c, { className: "h-3.5 w-3.5 shrink-0 text-light-4" }) : /* @__PURE__ */ e.createElement(m, { className: "h-3.5 w-3.5 shrink-0 text-light-4" });
+let s = null;
+function d() {
+  if (s !== null) return s;
+  if (typeof document > "u") return !1;
+  const t = document.createElement("canvas").getContext("2d");
+  return s = !!t && "filter" in t, s;
 }
-function h({ ui: t, engine: a }) {
-  return /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: "my-3.5 h-px bg-neutral-1" }), /* @__PURE__ */ e.createElement("div", { className: "mb-2 flex items-center justify-between text-xs text-light-4" }, /* @__PURE__ */ e.createElement("span", null, "Layers"), /* @__PURE__ */ e.createElement("span", null, t.layers.length || "")), t.layers.length ? /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-1.5" }, [...t.layers].reverse().map((r) => /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      key: r.id,
-      className: i(
-        "flex items-center gap-2 rounded-lg border border-neutral-1 bg-white px-2.5 py-1.5 text-xs cursor-pointer",
-        t.selected?.id === r.id && "border-rest-p1 ring-1 ring-rest-p1"
-      ),
-      onClick: () => {
-        t.mode !== "select" && a.setMode("select"), a.selectLayer(r.id);
+function p(t) {
+  return String(t).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function h(t) {
+  const e = parseFloat(t);
+  return Number.isNaN(e) ? null : t.trim().endsWith("%") ? e / 100 : e;
+}
+function u(t, e) {
+  return `<feComponentTransfer>${["R", "G", "B"].map(
+    (n) => `<feFunc${n} type="linear" slope="${t}" intercept="${e}"/>`
+  ).join("")}</feComponentTransfer>`;
+}
+function m(t) {
+  const e = 1 - t;
+  return `<feColorMatrix type="matrix" values="${[
+    0.393 + 0.607 * e,
+    0.769 - 0.769 * e,
+    0.189 - 0.189 * e,
+    0,
+    0,
+    0.349 - 0.349 * e,
+    0.686 + 0.314 * e,
+    0.168 - 0.168 * e,
+    0,
+    0,
+    0.272 - 0.272 * e,
+    0.534 - 0.534 * e,
+    0.131 + 0.869 * e,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0
+  ].join(" ")}"/>`;
+}
+function g(t) {
+  const e = [], i = /([a-zA-Z-]+)\(([^)]*)\)/g;
+  let n;
+  for (; (n = i.exec(t)) !== null; ) {
+    const a = n[1].toLowerCase(), r = h(n[2]);
+    if (r !== null)
+      switch (a) {
+        case "brightness":
+          e.push(u(r, 0));
+          break;
+        case "contrast":
+          e.push(u(r, -0.5 * r + 0.5));
+          break;
+        case "saturate":
+          e.push(`<feColorMatrix type="saturate" values="${r}"/>`);
+          break;
+        case "grayscale":
+          e.push(
+            `<feColorMatrix type="saturate" values="${1 - r}"/>`
+          );
+          break;
+        case "sepia":
+          e.push(m(r));
+          break;
+        case "hue-rotate":
+          e.push(`<feColorMatrix type="hueRotate" values="${r}"/>`);
+          break;
+        case "blur":
+          r > 0 && e.push(`<feGaussianBlur stdDeviation="${r}"/>`);
+          break;
       }
-    },
-    o(r.type),
-    /* @__PURE__ */ e.createElement("span", { className: "flex-1 truncate" }, r.name),
-    /* @__PURE__ */ e.createElement(
-      "button",
-      {
-        type: "button",
-        title: "Delete",
-        onClick: (l) => {
-          l.stopPropagation(), a.deleteLayer(r.id);
-        },
-        className: "text-light-4 hover:text-danger-1"
-      },
-      /* @__PURE__ */ e.createElement(s, { className: "h-3.5 w-3.5" })
-    )
-  ))) : /* @__PURE__ */ e.createElement("p", { className: "text-xs italic text-light-4" }, "No layers yet. Use Text, Draw, or Shape."));
+  }
+  return e;
+}
+function v(t, e) {
+  return new Promise((i, n) => {
+    const a = g(e);
+    if (!a.length) {
+      n(new Error("no translatable filter primitives"));
+      return;
+    }
+    const { width: r, height: l } = t, c = t.toDataURL("image/png"), f = `<svg xmlns="http://www.w3.org/2000/svg" width="${r}" height="${l}"><filter id="f" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">${a.join("")}</filter><image href="${p(c)}" width="${r}" height="${l}" filter="url(#f)"/></svg>`, o = new Image();
+    o.onload = () => i(o), o.onerror = () => n(new Error("filter rasterisation failed")), o.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(f);
+  });
 }
 export {
-  h as LayersList
+  v as rasterizeWithFilter,
+  d as supportsContextFilter
 };
 //# sourceMappingURL=index.es165.js.map

package/dist/index.es165.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es165.js","sources":["../src/components/organisms/image-editor/components/layers-list.tsx"],"sourcesContent":["import { Shapes, Sticker, Type, X } from 'lucide-react'\nimport React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nimport { ImageEditorEngine, ImageEditorUiState } from '../image-editor.types'\n\ninterface LayersListProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n}\n\nfunction layerIcon(type: string) {\n  if (type === 'text')\n    return <Type className=\"h-3.5 w-3.5 shrink-0 text-light-4\" />\n  if (type === 'sticker')\n    return <Sticker className=\"h-3.5 w-3.5 shrink-0 text-light-4\" />\n  return <Shapes className=\"h-3.5 w-3.5 shrink-0 text-light-4\" />\n}\n\nexport function LayersList({ ui, engine }: LayersListProps) {\n  return (\n    <div>\n      <div className=\"my-3.5 h-px bg-neutral-1\" />\n      <div className=\"mb-2 flex items-center justify-between text-xs text-light-4\">\n        <span>Layers</span>\n        <span>{ui.layers.length || ''}</span>\n      </div>\n      {!ui.layers.length ? (\n        <p className=\"text-xs italic text-light-4\">\n          No layers yet. Use Text, Draw, or Shape.\n        </p>\n      ) : (\n        <div className=\"flex flex-col gap-1.5\">\n          {[...ui.layers].reverse().map((l) => (\n            <div\n              key={l.id}\n              className={cn(\n                'flex items-center gap-2 rounded-lg border border-neutral-1 bg-white px-2.5 py-1.5 text-xs cursor-pointer',\n                ui.selected?.id === l.id && 'border-rest-p1 ring-1 ring-rest-p1'\n              )}\n              onClick={() => {\n                if (ui.mode !== 'select') engine.setMode('select')\n                engine.selectLayer(l.id)\n              }}\n            >\n              {layerIcon(l.type)}\n              <span className=\"flex-1 truncate\">{l.name}</span>\n              <button\n                type=\"button\"\n                title=\"Delete\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  engine.deleteLayer(l.id)\n                }}\n                className=\"text-light-4 hover:text-danger-1\"\n              >\n                <X className=\"h-3.5 w-3.5\" />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["layerIcon","type","React","Type","Sticker","Shapes","LayersList","ui","engine","l","cn","e","X"],"mappings":";;;AAYA,SAASA,EAAUC,GAAc;AAC/B,SAAIA,MAAS,SACJC,gBAAAA,EAAA,cAACC,GAAA,EAAK,WAAU,oCAAA,CAAoC,IACzDF,MAAS,YACJC,gBAAAA,EAAA,cAACE,GAAA,EAAQ,WAAU,oCAAA,CAAoC,IACzDF,gBAAAA,EAAA,cAACG,GAAA,EAAO,WAAU,oCAAA,CAAoC;AAC/D;AAEO,SAASC,EAAW,EAAE,IAAAC,GAAI,QAAAC,KAA2B;AAC1D,SACEN,gBAAAA,EAAA,cAAC,aACCA,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,2BAAA,CAA2B,mCACzC,OAAA,EAAI,WAAU,iEACbA,gBAAAA,EAAA,cAAC,QAAA,MAAK,QAAM,GACZA,gBAAAA,EAAA,cAAC,cAAMK,EAAG,OAAO,UAAU,EAAG,CAChC,GACEA,EAAG,OAAO,SAKVL,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,wBAAA,GACZ,CAAC,GAAGK,EAAG,MAAM,EAAE,QAAA,EAAU,IAAI,CAACE,MAC7BP,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKO,EAAE;AAAA,MACP,WAAWC;AAAA,QACT;AAAA,QACAH,EAAG,UAAU,OAAOE,EAAE,MAAM;AAAA,MAAA;AAAA,MAE9B,SAAS,MAAM;AACb,QAAIF,EAAG,SAAS,YAAUC,EAAO,QAAQ,QAAQ,GACjDA,EAAO,YAAYC,EAAE,EAAE;AAAA,MACzB;AAAA,IAAA;AAAA,IAECT,EAAUS,EAAE,IAAI;AAAA,IACjBP,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,kBAAA,GAAmBO,EAAE,IAAK;AAAA,IAC1CP,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAAS,CAACS,MAAM;AACd,UAAAA,EAAE,gBAAA,GACFH,EAAO,YAAYC,EAAE,EAAE;AAAA,QACzB;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,MAEVP,gBAAAA,EAAA,cAACU,GAAA,EAAE,WAAU,cAAA,CAAc;AAAA,IAAA;AAAA,EAC7B,CAEH,CACH,IAhCAV,gBAAAA,EAAA,cAAC,KAAA,EAAE,WAAU,8BAAA,GAA8B,0CAE3C,CAgCJ;AAEJ;"}
+{"version":3,"file":"index.es165.js","sources":["../src/components/organisms/image-editor/engine/canvas-filter.js"],"sourcesContent":["let contextFilterSupport = null\n\nexport function supportsContextFilter() {\n  if (contextFilterSupport !== null) return contextFilterSupport\n  if (typeof document === 'undefined') return false\n  const ctx = document.createElement('canvas').getContext('2d')\n  contextFilterSupport = !!ctx && 'filter' in ctx\n  return contextFilterSupport\n}\n\nfunction escapeXml(value) {\n  return String(value)\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n}\n\nfunction toAmount(raw) {\n  const value = parseFloat(raw)\n  if (Number.isNaN(value)) return null\n  return raw.trim().endsWith('%') ? value / 100 : value\n}\n\nfunction componentTransfer(slope, intercept) {\n  const fn = ['R', 'G', 'B']\n    .map(\n      (c) =>\n        `<feFunc${c} type=\"linear\" slope=\"${slope}\" intercept=\"${intercept}\"/>`\n    )\n    .join('')\n  return `<feComponentTransfer>${fn}</feComponentTransfer>`\n}\n\nfunction sepiaMatrix(amount) {\n  const r = 1 - amount\n  const m = [\n    0.393 + 0.607 * r,\n    0.769 - 0.769 * r,\n    0.189 - 0.189 * r,\n    0,\n    0,\n    0.349 - 0.349 * r,\n    0.686 + 0.314 * r,\n    0.168 - 0.168 * r,\n    0,\n    0,\n    0.272 - 0.272 * r,\n    0.534 - 0.534 * r,\n    0.131 + 0.869 * r,\n    0,\n    0,\n    0,\n    0,\n    0,\n    1,\n    0,\n  ]\n  return `<feColorMatrix type=\"matrix\" values=\"${m.join(' ')}\"/>`\n}\n\nfunction toSvgPrimitives(filter) {\n  const primitives = []\n  const re = /([a-zA-Z-]+)\\(([^)]*)\\)/g\n  let match\n\n  while ((match = re.exec(filter)) !== null) {\n    const name = match[1].toLowerCase()\n    const amount = toAmount(match[2])\n    if (amount === null) continue\n\n    switch (name) {\n      case 'brightness':\n        primitives.push(componentTransfer(amount, 0))\n        break\n      case 'contrast':\n        primitives.push(componentTransfer(amount, -0.5 * amount + 0.5))\n        break\n      case 'saturate':\n        primitives.push(`<feColorMatrix type=\"saturate\" values=\"${amount}\"/>`)\n        break\n      case 'grayscale':\n        primitives.push(\n          `<feColorMatrix type=\"saturate\" values=\"${1 - amount}\"/>`\n        )\n        break\n      case 'sepia':\n        primitives.push(sepiaMatrix(amount))\n        break\n      case 'hue-rotate':\n        primitives.push(`<feColorMatrix type=\"hueRotate\" values=\"${amount}\"/>`)\n        break\n      case 'blur':\n        if (amount > 0) {\n          primitives.push(`<feGaussianBlur stdDeviation=\"${amount}\"/>`)\n        }\n        break\n      default:\n        break\n    }\n  }\n\n  return primitives\n}\n\nexport function rasterizeWithFilter(sourceCanvas, filter) {\n  return new Promise((resolve, reject) => {\n    const primitives = toSvgPrimitives(filter)\n    if (!primitives.length) {\n      reject(new Error('no translatable filter primitives'))\n      return\n    }\n\n    const { width, height } = sourceCanvas\n    const href = sourceCanvas.toDataURL('image/png')\n    const svg =\n      `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\">` +\n      `<filter id=\"f\" color-interpolation-filters=\"sRGB\" ` +\n      `x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">${primitives.join('')}</filter>` +\n      `<image href=\"${escapeXml(href)}\" width=\"${width}\" height=\"${height}\" ` +\n      `filter=\"url(#f)\"/>` +\n      `</svg>`\n\n    const img = new Image()\n    img.onload = () => resolve(img)\n    img.onerror = () => reject(new Error('filter rasterisation failed'))\n    img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg)\n  })\n}\n"],"names":["contextFilterSupport","supportsContextFilter","ctx","escapeXml","value","toAmount","raw","componentTransfer","slope","intercept","c","sepiaMatrix","amount","r","toSvgPrimitives","filter","primitives","re","match","name","rasterizeWithFilter","sourceCanvas","resolve","reject","width","height","href","svg","img"],"mappings":"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"}

package/dist/index.es166.js

@@ -1,36 +1,57 @@
-import t from "react";
-import { Slider as i } from "./index.es30.js";
-import { SwatchGrid as n } from "./index.es38.js";
-import { FILTERS as r } from "./index.es145.js";
-const s = [
-  { key: "brightness", label: "Brightness", suffix: "%", min: 0, max: 200 },
-  { key: "contrast", label: "Contrast", suffix: "%", min: 0, max: 200 },
-  { key: "saturate", label: "Saturation", suffix: "%", min: 0, max: 200 },
-  { key: "sepia", label: "Warmth", suffix: "%", min: 0, max: 100 },
-  { key: "blur", label: "Blur", suffix: "px", min: 0, max: 12 },
-  { key: "hue", label: "Hue", suffix: "°", min: 0, max: 360 }
-];
-function o({ adjustments: a, engine: l }) {
-  return /* @__PURE__ */ t.createElement("div", null, s.map((e) => /* @__PURE__ */ t.createElement("div", { key: e.key, className: "mb-3" }, /* @__PURE__ */ t.createElement("div", { className: "mb-1 flex justify-between text-xs" }, /* @__PURE__ */ t.createElement("span", null, e.label), /* @__PURE__ */ t.createElement("span", { className: "tabular-nums text-light-4" }, a[e.key], e.suffix)), /* @__PURE__ */ t.createElement(
-    i,
-    {
-      min: e.min,
-      max: e.max,
-      step: 1,
-      value: [a[e.key]],
-      onValueChange: ([m]) => l.setAdjustment(e.key, m)
-    }
-  ))), /* @__PURE__ */ t.createElement("div", { className: "my-3.5 h-px bg-neutral-1" }), /* @__PURE__ */ t.createElement("span", { className: "mb-2 block text-xs text-light-4" }, "Artistic filters"), /* @__PURE__ */ t.createElement(
-    n,
-    {
-      columns: 2,
-      value: a.filter,
-      onSelect: (e) => l.setFilter(e),
-      items: r.map((e) => ({ value: e.id, label: e.name }))
+import { applyZoom as m, renderOverlay as x } from "./index.es145.js";
+function f(n) {
+  const [r, i] = n;
+  return { x: (r.x + i.x) / 2, y: (r.y + i.y) / 2 };
+}
+function t(n) {
+  const [r, i] = n;
+  return Math.hypot(r.x - i.x, r.y - i.y);
+}
+function g(n) {
+  n.dragMode && (n.pendingStroke = null, n.pendingShape = null, n.dragMode = null, n.activePointerId != null && n.overlayEl?.hasPointerCapture?.(n.activePointerId) && n.overlayEl.releasePointerCapture(n.activePointerId), n.activePointerId = null, x(n), n.notify());
+}
+function s(n) {
+  const r = [...n.panPointers.values()].slice(0, 2);
+  if (r.length !== 2) return null;
+  const i = f(r);
+  return { x: i.x, y: i.y, distance: t(r) };
+}
+function d(n) {
+  n.panFrame != null && (cancelAnimationFrame(n.panFrame), n.panFrame = null);
+}
+function y(n) {
+  const r = [...n.panPointers.values()].slice(0, 2);
+  if (r.length !== 2 || !n.panLast || !n.stageEl) return;
+  const i = n.stageEl, o = f(r), e = t(r), c = i.getBoundingClientRect(), p = o.x - c.left, a = o.y - c.top;
+  if (n.panLast.distance > 0 && e > 0) {
+    const u = e / n.panLast.distance;
+    if (Math.abs(u - 1) > 5e-3) {
+      const P = n.viewScale;
+      m(n, n.zoom * u);
+      const l = n.viewScale / P;
+      l !== 1 && (i.scrollLeft = (i.scrollLeft + p) * l - p, i.scrollTop = (i.scrollTop + a) * l - a);
     }
-  ));
+  }
+  i.scrollLeft -= o.x - n.panLast.x, i.scrollTop -= o.y - n.panLast.y, n.panLast = { x: o.x, y: o.y, distance: e };
+}
+function L(n, r) {
+  return r.pointerType === "mouse" || (n.panPointers ??= /* @__PURE__ */ new Map(), n.panPointers.set(r.pointerId, { x: r.clientX, y: r.clientY }), !n.stageEl || n.panPointers.size < 2) ? !1 : (g(n), n.panLast = s(n), !0);
+}
+function F(n, r) {
+  return !n.panPointers?.has(r.pointerId) || (n.panPointers.set(r.pointerId, { x: r.clientX, y: r.clientY }), n.panPointers.size < 2 || !n.panLast || !n.stageEl) ? !1 : (n.panFrame == null && (n.panFrame = requestAnimationFrame(() => {
+    n.panFrame = null, y(n);
+  })), !0);
+}
+function h(n, r) {
+  n.panPointers && (n.panFrame != null && (d(n), y(n)), n.panPointers.delete(r.pointerId), n.panLast = n.panPointers.size >= 2 ? s(n) : null);
+}
+function I(n) {
+  d(n), n.panPointers?.clear(), n.panLast = null;
 }
 export {
-  o as PanelAdjust
+  L as panPointerDown,
+  F as panPointerMove,
+  h as panPointerUp,
+  I as resetPan
 };
 //# sourceMappingURL=index.es166.js.map

package/dist/index.es166.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es166.js","sources":["../src/components/organisms/image-editor/components/panel-adjust.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Slider } from '@/components/molecules/slider'\nimport { SwatchGrid } from '@/components/molecules/swatch-grid'\n\nimport {\n  ImageEditorAdjustments,\n  ImageEditorEngine,\n} from '../image-editor.types'\nimport { FILTERS } from '../picture-studio-engine'\n\nconst SLIDERS: {\n  key: Exclude<keyof ImageEditorAdjustments, 'filter'>\n  label: string\n  suffix: string\n  min: number\n  max: number\n}[] = [\n  { key: 'brightness', label: 'Brightness', suffix: '%', min: 0, max: 200 },\n  { key: 'contrast', label: 'Contrast', suffix: '%', min: 0, max: 200 },\n  { key: 'saturate', label: 'Saturation', suffix: '%', min: 0, max: 200 },\n  { key: 'sepia', label: 'Warmth', suffix: '%', min: 0, max: 100 },\n  { key: 'blur', label: 'Blur', suffix: 'px', min: 0, max: 12 },\n  { key: 'hue', label: 'Hue', suffix: '°', min: 0, max: 360 },\n]\n\ninterface PanelAdjustProps {\n  adjustments: ImageEditorAdjustments\n  engine: ImageEditorEngine\n}\n\nexport function PanelAdjust({ adjustments, engine }: PanelAdjustProps) {\n  return (\n    <div>\n      {SLIDERS.map((s) => (\n        <div key={s.key} className=\"mb-3\">\n          <div className=\"mb-1 flex justify-between text-xs\">\n            <span>{s.label}</span>\n            <span className=\"tabular-nums text-light-4\">\n              {adjustments[s.key]}\n              {s.suffix}\n            </span>\n          </div>\n          <Slider\n            min={s.min}\n            max={s.max}\n            step={1}\n            value={[adjustments[s.key]]}\n            onValueChange={([v]) => engine.setAdjustment(s.key, v)}\n          />\n        </div>\n      ))}\n      <div className=\"my-3.5 h-px bg-neutral-1\" />\n      <span className=\"mb-2 block text-xs text-light-4\">Artistic filters</span>\n      <SwatchGrid\n        columns={2}\n        value={adjustments.filter}\n        onSelect={(id) => engine.setFilter(id)}\n        items={FILTERS.map((f) => ({ value: f.id, label: f.name }))}\n      />\n    </div>\n  )\n}\n"],"names":["SLIDERS","PanelAdjust","adjustments","engine","React","s","Slider","v","SwatchGrid","id","FILTERS","f"],"mappings":";;;;AAWA,MAAMA,IAMA;AAAA,EACJ,EAAE,KAAK,cAAc,OAAO,cAAc,QAAQ,KAAK,KAAK,GAAG,KAAK,IAAA;AAAA,EACpE,EAAE,KAAK,YAAY,OAAO,YAAY,QAAQ,KAAK,KAAK,GAAG,KAAK,IAAA;AAAA,EAChE,EAAE,KAAK,YAAY,OAAO,cAAc,QAAQ,KAAK,KAAK,GAAG,KAAK,IAAA;AAAA,EAClE,EAAE,KAAK,SAAS,OAAO,UAAU,QAAQ,KAAK,KAAK,GAAG,KAAK,IAAA;AAAA,EAC3D,EAAE,KAAK,QAAQ,OAAO,QAAQ,QAAQ,MAAM,KAAK,GAAG,KAAK,GAAA;AAAA,EACzD,EAAE,KAAK,OAAO,OAAO,OAAO,QAAQ,KAAK,KAAK,GAAG,KAAK,IAAA;AACxD;AAOO,SAASC,EAAY,EAAE,aAAAC,GAAa,QAAAC,KAA4B;AACrE,SACEC,gBAAAA,EAAA,cAAC,OAAA,MACEJ,EAAQ,IAAI,CAACK,MACZD,gBAAAA,EAAA,cAAC,OAAA,EAAI,KAAKC,EAAE,KAAK,WAAU,OAAA,mCACxB,OAAA,EAAI,WAAU,oCAAA,GACbD,gBAAAA,EAAA,cAAC,QAAA,MAAMC,EAAE,KAAM,mCACd,QAAA,EAAK,WAAU,4BAAA,GACbH,EAAYG,EAAE,GAAG,GACjBA,EAAE,MACL,CACF,GACAD,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,KAAKD,EAAE;AAAA,MACP,KAAKA,EAAE;AAAA,MACP,MAAM;AAAA,MACN,OAAO,CAACH,EAAYG,EAAE,GAAG,CAAC;AAAA,MAC1B,eAAe,CAAC,CAACE,CAAC,MAAMJ,EAAO,cAAcE,EAAE,KAAKE,CAAC;AAAA,IAAA;AAAA,EAAA,CAEzD,CACD,GACDH,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,4BAA2B,GAC1CA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,kCAAA,GAAkC,kBAAgB,GAClEA,gBAAAA,EAAA;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,OAAON,EAAY;AAAA,MACnB,UAAU,CAACO,MAAON,EAAO,UAAUM,CAAE;AAAA,MACrC,OAAOC,EAAQ,IAAI,CAACC,OAAO,EAAE,OAAOA,EAAE,IAAI,OAAOA,EAAE,KAAA,EAAO;AAAA,IAAA;AAAA,EAAA,CAE9D;AAEJ;"}
+{"version":3,"file":"index.es166.js","sources":["../src/components/organisms/image-editor/engine/touch-pan.js"],"sourcesContent":["import { applyZoom, renderOverlay } from './rendering.js'\n\nfunction midpoint(points) {\n  const [a, b] = points\n  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }\n}\n\nfunction distance(points) {\n  const [a, b] = points\n  return Math.hypot(a.x - b.x, a.y - b.y)\n}\n\nfunction cancelActiveDrag(state) {\n  if (!state.dragMode) return\n  state.pendingStroke = null\n  state.pendingShape = null\n  state.dragMode = null\n  if (\n    state.activePointerId != null &&\n    state.overlayEl?.hasPointerCapture?.(state.activePointerId)\n  ) {\n    state.overlayEl.releasePointerCapture(state.activePointerId)\n  }\n  state.activePointerId = null\n  renderOverlay(state)\n  state.notify()\n}\n\nfunction baseline(state) {\n  const points = [...state.panPointers.values()].slice(0, 2)\n  if (points.length !== 2) return null\n  const mid = midpoint(points)\n  return { x: mid.x, y: mid.y, distance: distance(points) }\n}\n\nfunction cancelFrame(state) {\n  if (state.panFrame == null) return\n  cancelAnimationFrame(state.panFrame)\n  state.panFrame = null\n}\n\nfunction applyGesture(state) {\n  const points = [...state.panPointers.values()].slice(0, 2)\n  if (points.length !== 2 || !state.panLast || !state.stageEl) return\n\n  const stage = state.stageEl\n  const mid = midpoint(points)\n  const dist = distance(points)\n  const rect = stage.getBoundingClientRect()\n  const localX = mid.x - rect.left\n  const localY = mid.y - rect.top\n\n  if (state.panLast.distance > 0 && dist > 0) {\n    const ratio = dist / state.panLast.distance\n    if (Math.abs(ratio - 1) > 0.005) {\n      const previousScale = state.viewScale\n      applyZoom(state, state.zoom * ratio)\n      const scaled = state.viewScale / previousScale\n      if (scaled !== 1) {\n        stage.scrollLeft = (stage.scrollLeft + localX) * scaled - localX\n        stage.scrollTop = (stage.scrollTop + localY) * scaled - localY\n      }\n    }\n  }\n\n  stage.scrollLeft -= mid.x - state.panLast.x\n  stage.scrollTop -= mid.y - state.panLast.y\n  state.panLast = { x: mid.x, y: mid.y, distance: dist }\n}\n\nexport function panPointerDown(state, e) {\n  if (e.pointerType === 'mouse') return false\n  state.panPointers ??= new Map()\n  state.panPointers.set(e.pointerId, { x: e.clientX, y: e.clientY })\n  if (!state.stageEl || state.panPointers.size < 2) return false\n\n  cancelActiveDrag(state)\n  state.panLast = baseline(state)\n  return true\n}\n\nexport function panPointerMove(state, e) {\n  if (!state.panPointers?.has(e.pointerId)) return false\n  state.panPointers.set(e.pointerId, { x: e.clientX, y: e.clientY })\n  if (state.panPointers.size < 2 || !state.panLast || !state.stageEl) {\n    return false\n  }\n\n  if (state.panFrame == null) {\n    state.panFrame = requestAnimationFrame(() => {\n      state.panFrame = null\n      applyGesture(state)\n    })\n  }\n  return true\n}\n\nexport function panPointerUp(state, e) {\n  if (!state.panPointers) return\n  if (state.panFrame != null) {\n    cancelFrame(state)\n    applyGesture(state)\n  }\n  state.panPointers.delete(e.pointerId)\n  state.panLast = state.panPointers.size >= 2 ? baseline(state) : null\n}\n\nexport function resetPan(state) {\n  cancelFrame(state)\n  state.panPointers?.clear()\n  state.panLast = null\n}\n"],"names":["midpoint","points","a","b","distance","cancelActiveDrag","state","renderOverlay","baseline","mid","cancelFrame","applyGesture","stage","dist","rect","localX","localY","ratio","previousScale","applyZoom","scaled","panPointerDown","e","panPointerMove","panPointerUp","resetPan"],"mappings":";AAEA,SAASA,EAASC,GAAQ;AACxB,QAAM,CAACC,GAAGC,CAAC,IAAIF;AACf,SAAO,EAAE,IAAIC,EAAE,IAAIC,EAAE,KAAK,GAAG,IAAID,EAAE,IAAIC,EAAE,KAAK,EAAC;AACjD;AAEA,SAASC,EAASH,GAAQ;AACxB,QAAM,CAACC,GAAGC,CAAC,IAAIF;AACf,SAAO,KAAK,MAAMC,EAAE,IAAIC,EAAE,GAAGD,EAAE,IAAIC,EAAE,CAAC;AACxC;AAEA,SAASE,EAAiBC,GAAO;AAC/B,EAAKA,EAAM,aACXA,EAAM,gBAAgB,MACtBA,EAAM,eAAe,MACrBA,EAAM,WAAW,MAEfA,EAAM,mBAAmB,QACzBA,EAAM,WAAW,oBAAoBA,EAAM,eAAe,KAE1DA,EAAM,UAAU,sBAAsBA,EAAM,eAAe,GAE7DA,EAAM,kBAAkB,MACxBC,EAAcD,CAAK,GACnBA,EAAM,OAAM;AACd;AAEA,SAASE,EAASF,GAAO;AACvB,QAAML,IAAS,CAAC,GAAGK,EAAM,YAAY,QAAQ,EAAE,MAAM,GAAG,CAAC;AACzD,MAAIL,EAAO,WAAW,EAAG,QAAO;AAChC,QAAMQ,IAAMT,EAASC,CAAM;AAC3B,SAAO,EAAE,GAAGQ,EAAI,GAAG,GAAGA,EAAI,GAAG,UAAUL,EAASH,CAAM,EAAC;AACzD;AAEA,SAASS,EAAYJ,GAAO;AAC1B,EAAIA,EAAM,YAAY,SACtB,qBAAqBA,EAAM,QAAQ,GACnCA,EAAM,WAAW;AACnB;AAEA,SAASK,EAAaL,GAAO;AAC3B,QAAML,IAAS,CAAC,GAAGK,EAAM,YAAY,QAAQ,EAAE,MAAM,GAAG,CAAC;AACzD,MAAIL,EAAO,WAAW,KAAK,CAACK,EAAM,WAAW,CAACA,EAAM,QAAS;AAE7D,QAAMM,IAAQN,EAAM,SACdG,IAAMT,EAASC,CAAM,GACrBY,IAAOT,EAASH,CAAM,GACtBa,IAAOF,EAAM,sBAAqB,GAClCG,IAASN,EAAI,IAAIK,EAAK,MACtBE,IAASP,EAAI,IAAIK,EAAK;AAE5B,MAAIR,EAAM,QAAQ,WAAW,KAAKO,IAAO,GAAG;AAC1C,UAAMI,IAAQJ,IAAOP,EAAM,QAAQ;AACnC,QAAI,KAAK,IAAIW,IAAQ,CAAC,IAAI,MAAO;AAC/B,YAAMC,IAAgBZ,EAAM;AAC5B,MAAAa,EAAUb,GAAOA,EAAM,OAAOW,CAAK;AACnC,YAAMG,IAASd,EAAM,YAAYY;AACjC,MAAIE,MAAW,MACbR,EAAM,cAAcA,EAAM,aAAaG,KAAUK,IAASL,GAC1DH,EAAM,aAAaA,EAAM,YAAYI,KAAUI,IAASJ;AAAA,IAE5D;AAAA,EACF;AAEA,EAAAJ,EAAM,cAAcH,EAAI,IAAIH,EAAM,QAAQ,GAC1CM,EAAM,aAAaH,EAAI,IAAIH,EAAM,QAAQ,GACzCA,EAAM,UAAU,EAAE,GAAGG,EAAI,GAAG,GAAGA,EAAI,GAAG,UAAUI,EAAI;AACtD;AAEO,SAASQ,EAAef,GAAOgB,GAAG;AAIvC,SAHIA,EAAE,gBAAgB,YACtBhB,EAAM,gBAAgB,oBAAI,IAAG,GAC7BA,EAAM,YAAY,IAAIgB,EAAE,WAAW,EAAE,GAAGA,EAAE,SAAS,GAAGA,EAAE,QAAO,CAAE,GAC7D,CAAChB,EAAM,WAAWA,EAAM,YAAY,OAAO,KAAU,MAEzDD,EAAiBC,CAAK,GACtBA,EAAM,UAAUE,EAASF,CAAK,GACvB;AACT;AAEO,SAASiB,EAAejB,GAAOgB,GAAG;AAGvC,SAFI,CAAChB,EAAM,aAAa,IAAIgB,EAAE,SAAS,MACvChB,EAAM,YAAY,IAAIgB,EAAE,WAAW,EAAE,GAAGA,EAAE,SAAS,GAAGA,EAAE,QAAO,CAAE,GAC7DhB,EAAM,YAAY,OAAO,KAAK,CAACA,EAAM,WAAW,CAACA,EAAM,WAClD,MAGLA,EAAM,YAAY,SACpBA,EAAM,WAAW,sBAAsB,MAAM;AAC3C,IAAAA,EAAM,WAAW,MACjBK,EAAaL,CAAK;AAAA,EACpB,CAAC,IAEI;AACT;AAEO,SAASkB,EAAalB,GAAOgB,GAAG;AACrC,EAAKhB,EAAM,gBACPA,EAAM,YAAY,SACpBI,EAAYJ,CAAK,GACjBK,EAAaL,CAAK,IAEpBA,EAAM,YAAY,OAAOgB,EAAE,SAAS,GACpChB,EAAM,UAAUA,EAAM,YAAY,QAAQ,IAAIE,EAASF,CAAK,IAAI;AAClE;AAEO,SAASmB,EAASnB,GAAO;AAC9B,EAAAI,EAAYJ,CAAK,GACjBA,EAAM,aAAa,MAAK,GACxBA,EAAM,UAAU;AAClB;"}

package/dist/index.es167.js

@@ -1,36 +1,39 @@
+import { X as s, Type as n, Sticker as c, Shapes as m } from "lucide-react";
 import e from "react";
-import { SingleSelect as l } from "./index.es29.js";
-import { CROP_RATIOS as o } from "./index.es145.js";
-import { useImageEditorPortalContainer as n } from "./index.es140.js";
-function s({ ui: r, engine: t }) {
-  const a = n();
-  return /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("p", { className: "mb-3.5 text-xs leading-relaxed text-light-4" }, "Drag a box on the image, then apply."), /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Aspect ratio"), /* @__PURE__ */ e.createElement(
-    l,
-    {
-      items: o,
-      value: r.cropRatio,
-      onValueChange: t.setCropRatio,
-      container: a
-    }
-  ), /* @__PURE__ */ e.createElement("div", { className: "my-3.5 h-px bg-neutral-1" }), /* @__PURE__ */ e.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: t.applyCrop,
-      className: "mb-2 w-full rounded-lg bg-rest-p1 py-2.5 text-sm text-white hover:bg-hover-p1"
-    },
-    "Apply crop"
-  ), /* @__PURE__ */ e.createElement(
-    "button",
+import { cn as i } from "./index.es89.js";
+function o(t) {
+  return t === "text" ? /* @__PURE__ */ e.createElement(n, { className: "h-3.5 w-3.5 shrink-0 text-light-4" }) : t === "sticker" ? /* @__PURE__ */ e.createElement(c, { className: "h-3.5 w-3.5 shrink-0 text-light-4" }) : /* @__PURE__ */ e.createElement(m, { className: "h-3.5 w-3.5 shrink-0 text-light-4" });
+}
+function h({ ui: t, engine: a }) {
+  return /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: "my-3.5 h-px bg-neutral-1" }), /* @__PURE__ */ e.createElement("div", { className: "mb-2 flex items-center justify-between text-xs text-light-4" }, /* @__PURE__ */ e.createElement("span", null, "Layers"), /* @__PURE__ */ e.createElement("span", null, t.layers.length || "")), t.layers.length ? /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-1.5" }, [...t.layers].reverse().map((r) => /* @__PURE__ */ e.createElement(
+    "div",
     {
-      type: "button",
-      onClick: t.cancelCrop,
-      className: "w-full rounded-lg border border-neutral-1 bg-white py-2.5 text-sm hover:bg-light-3"
+      key: r.id,
+      className: i(
+        "flex items-center gap-2 rounded-lg border border-neutral-1 bg-white px-2.5 py-1.5 text-xs cursor-pointer",
+        t.selected?.id === r.id && "border-rest-p1 ring-1 ring-rest-p1"
+      ),
+      onClick: () => {
+        t.mode !== "select" && a.setMode("select"), a.selectLayer(r.id);
+      }
     },
-    "Cancel"
-  ));
+    o(r.type),
+    /* @__PURE__ */ e.createElement("span", { className: "flex-1 truncate" }, r.name),
+    /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        type: "button",
+        title: "Delete",
+        onClick: (l) => {
+          l.stopPropagation(), a.deleteLayer(r.id);
+        },
+        className: "text-light-4 hover:text-danger-1"
+      },
+      /* @__PURE__ */ e.createElement(s, { className: "h-3.5 w-3.5" })
+    )
+  ))) : /* @__PURE__ */ e.createElement("p", { className: "text-xs italic text-light-4" }, "No layers yet. Use Text, Draw, or Shape."));
 }
 export {
-  s as PanelCrop
+  h as LayersList
 };
 //# sourceMappingURL=index.es167.js.map

package/dist/index.es167.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es167.js","sources":["../src/components/organisms/image-editor/components/panel-crop.tsx"],"sourcesContent":["import React from 'react'\n\nimport { SingleSelect } from '@/components/molecules/single-select'\n\nimport { ImageEditorEngine, ImageEditorUiState } from '../image-editor.types'\nimport { CROP_RATIOS } from '../picture-studio-engine'\nimport { useImageEditorPortalContainer } from './portal-context'\n\ninterface PanelCropProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n}\n\nexport function PanelCrop({ ui, engine }: PanelCropProps) {\n  const container = useImageEditorPortalContainer()\n  return (\n    <div>\n      <p className=\"mb-3.5 text-xs leading-relaxed text-light-4\">\n        Drag a box on the image, then apply.\n      </p>\n      <span className=\"mb-1 block text-xs text-light-4\">Aspect ratio</span>\n      <SingleSelect\n        items={CROP_RATIOS}\n        value={ui.cropRatio}\n        onValueChange={engine.setCropRatio}\n        container={container}\n      />\n      <div className=\"my-3.5 h-px bg-neutral-1\" />\n      <button\n        type=\"button\"\n        onClick={engine.applyCrop}\n        className=\"mb-2 w-full rounded-lg bg-rest-p1 py-2.5 text-sm text-white hover:bg-hover-p1\"\n      >\n        Apply crop\n      </button>\n      <button\n        type=\"button\"\n        onClick={engine.cancelCrop}\n        className=\"w-full rounded-lg border border-neutral-1 bg-white py-2.5 text-sm hover:bg-light-3\"\n      >\n        Cancel\n      </button>\n    </div>\n  )\n}\n"],"names":["PanelCrop","ui","engine","container","useImageEditorPortalContainer","React","SingleSelect","CROP_RATIOS"],"mappings":";;;;AAaO,SAASA,EAAU,EAAE,IAAAC,GAAI,QAAAC,KAA0B;AACxD,QAAMC,IAAYC,EAAA;AAClB,SACEC,gBAAAA,EAAA,cAAC,OAAA,MACCA,gBAAAA,EAAA,cAAC,KAAA,EAAE,WAAU,8CAAA,GAA8C,sCAE3D,GACAA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,qCAAkC,cAAY,GAC9DA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOC;AAAA,MACP,OAAON,EAAG;AAAA,MACV,eAAeC,EAAO;AAAA,MACtB,WAAAC;AAAA,IAAA;AAAA,EAAA,GAEFE,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,4BAA2B,GAC1CA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASH,EAAO;AAAA,MAChB,WAAU;AAAA,IAAA;AAAA,IACX;AAAA,EAAA,GAGDG,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASH,EAAO;AAAA,MAChB,WAAU;AAAA,IAAA;AAAA,IACX;AAAA,EAAA,CAGH;AAEJ;"}
+{"version":3,"file":"index.es167.js","sources":["../src/components/organisms/image-editor/components/layers-list.tsx"],"sourcesContent":["import { Shapes, Sticker, Type, X } from 'lucide-react'\nimport React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nimport { ImageEditorEngine, ImageEditorUiState } from '../image-editor.types'\n\ninterface LayersListProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n}\n\nfunction layerIcon(type: string) {\n  if (type === 'text')\n    return <Type className=\"h-3.5 w-3.5 shrink-0 text-light-4\" />\n  if (type === 'sticker')\n    return <Sticker className=\"h-3.5 w-3.5 shrink-0 text-light-4\" />\n  return <Shapes className=\"h-3.5 w-3.5 shrink-0 text-light-4\" />\n}\n\nexport function LayersList({ ui, engine }: LayersListProps) {\n  return (\n    <div>\n      <div className=\"my-3.5 h-px bg-neutral-1\" />\n      <div className=\"mb-2 flex items-center justify-between text-xs text-light-4\">\n        <span>Layers</span>\n        <span>{ui.layers.length || ''}</span>\n      </div>\n      {!ui.layers.length ? (\n        <p className=\"text-xs italic text-light-4\">\n          No layers yet. Use Text, Draw, or Shape.\n        </p>\n      ) : (\n        <div className=\"flex flex-col gap-1.5\">\n          {[...ui.layers].reverse().map((l) => (\n            <div\n              key={l.id}\n              className={cn(\n                'flex items-center gap-2 rounded-lg border border-neutral-1 bg-white px-2.5 py-1.5 text-xs cursor-pointer',\n                ui.selected?.id === l.id && 'border-rest-p1 ring-1 ring-rest-p1'\n              )}\n              onClick={() => {\n                if (ui.mode !== 'select') engine.setMode('select')\n                engine.selectLayer(l.id)\n              }}\n            >\n              {layerIcon(l.type)}\n              <span className=\"flex-1 truncate\">{l.name}</span>\n              <button\n                type=\"button\"\n                title=\"Delete\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  engine.deleteLayer(l.id)\n                }}\n                className=\"text-light-4 hover:text-danger-1\"\n              >\n                <X className=\"h-3.5 w-3.5\" />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["layerIcon","type","React","Type","Sticker","Shapes","LayersList","ui","engine","l","cn","e","X"],"mappings":";;;AAYA,SAASA,EAAUC,GAAc;AAC/B,SAAIA,MAAS,SACJC,gBAAAA,EAAA,cAACC,GAAA,EAAK,WAAU,oCAAA,CAAoC,IACzDF,MAAS,YACJC,gBAAAA,EAAA,cAACE,GAAA,EAAQ,WAAU,oCAAA,CAAoC,IACzDF,gBAAAA,EAAA,cAACG,GAAA,EAAO,WAAU,oCAAA,CAAoC;AAC/D;AAEO,SAASC,EAAW,EAAE,IAAAC,GAAI,QAAAC,KAA2B;AAC1D,SACEN,gBAAAA,EAAA,cAAC,aACCA,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,2BAAA,CAA2B,mCACzC,OAAA,EAAI,WAAU,iEACbA,gBAAAA,EAAA,cAAC,QAAA,MAAK,QAAM,GACZA,gBAAAA,EAAA,cAAC,cAAMK,EAAG,OAAO,UAAU,EAAG,CAChC,GACEA,EAAG,OAAO,SAKVL,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,wBAAA,GACZ,CAAC,GAAGK,EAAG,MAAM,EAAE,QAAA,EAAU,IAAI,CAACE,MAC7BP,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKO,EAAE;AAAA,MACP,WAAWC;AAAA,QACT;AAAA,QACAH,EAAG,UAAU,OAAOE,EAAE,MAAM;AAAA,MAAA;AAAA,MAE9B,SAAS,MAAM;AACb,QAAIF,EAAG,SAAS,YAAUC,EAAO,QAAQ,QAAQ,GACjDA,EAAO,YAAYC,EAAE,EAAE;AAAA,MACzB;AAAA,IAAA;AAAA,IAECT,EAAUS,EAAE,IAAI;AAAA,IACjBP,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,kBAAA,GAAmBO,EAAE,IAAK;AAAA,IAC1CP,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAAS,CAACS,MAAM;AACd,UAAAA,EAAE,gBAAA,GACFH,EAAO,YAAYC,EAAE,EAAE;AAAA,QACzB;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,MAEVP,gBAAAA,EAAA,cAACU,GAAA,EAAE,WAAU,cAAA,CAAc;AAAA,IAAA;AAAA,EAC7B,CAEH,CACH,IAhCAV,gBAAAA,EAAA,cAAC,KAAA,EAAE,WAAU,8BAAA,GAA8B,0CAE3C,CAgCJ;AAEJ;"}