geoiq-frontend-ui-kit 2.0.2 → 2.0.4

package/dist/index.es142.js

@@ -1,173 +1,8 @@
-import { ImagePlus as s, Undo2 as i, Redo2 as d, RefreshCcw as b, RotateCcw as p, RotateCw as h, FlipHorizontal2 as E, FlipVertical2 as u, MousePointer2 as w, Crop as f, Type as N, Pen as x, Shapes as v, Sticker as C, ZoomOut as g, ZoomIn as k } from "lucide-react";
 import e from "react";
-import { Button as R } from "./index.es9.js";
-import { cn as y } from "./index.es89.js";
-function c({
-  icon: a,
-  label: t,
-  active: r,
-  disabled: o,
-  onClick: l
-}) {
-  return /* @__PURE__ */ e.createElement(
-    R,
-    {
-      variant: "secondary",
-      size: "sm",
-      disabled: o,
-      onClick: l,
-      className: y(
-        "w-auto flex-col gap-0.5 h-auto min-w-[52px] border-neutral-1 px-2 py-1.5 text-[10.5px]",
-        r && "border-rest-p1 bg-rest-p1 text-white hover:bg-hover-p1"
-      )
-    },
-    a,
-    t
-  );
-}
-function Z({
-  zoomPercent: a,
-  canZoomIn: t,
-  canZoomOut: r,
-  disabled: o,
-  onZoomIn: l,
-  onZoomOut: n,
-  onZoomReset: m
-}) {
-  return /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-0.5 rounded-lg border border-neutral-1 bg-white p-0.5" }, /* @__PURE__ */ e.createElement(
-    "button",
-    {
-      type: "button",
-      title: "Zoom out",
-      disabled: o || !r,
-      onClick: n,
-      className: "flex h-7 w-7 items-center justify-center rounded-md text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40"
-    },
-    /* @__PURE__ */ e.createElement(g, { className: "h-4 w-4" })
-  ), /* @__PURE__ */ e.createElement(
-    "button",
-    {
-      type: "button",
-      title: "Reset zoom to fit",
-      disabled: o,
-      onClick: m,
-      className: "min-w-[38px] rounded-md py-1 text-[11px] font-medium text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40"
-    },
-    a,
-    "%"
-  ), /* @__PURE__ */ e.createElement(
-    "button",
-    {
-      type: "button",
-      title: "Zoom in",
-      disabled: o || !t,
-      onClick: l,
-      className: "flex h-7 w-7 items-center justify-center rounded-md text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40"
-    },
-    /* @__PURE__ */ e.createElement(k, { className: "h-4 w-4" })
-  ));
-}
-const O = [
-  {
-    mode: "select",
-    label: "Select",
-    icon: /* @__PURE__ */ e.createElement(w, { className: "h-4 w-4" })
-  },
-  { mode: "crop", label: "Crop", icon: /* @__PURE__ */ e.createElement(f, { className: "h-4 w-4" }) },
-  { mode: "text", label: "Text", icon: /* @__PURE__ */ e.createElement(N, { className: "h-4 w-4" }) },
-  { mode: "draw", label: "Draw", icon: /* @__PURE__ */ e.createElement(x, { className: "h-4 w-4" }) },
-  { mode: "shape", label: "Shape", icon: /* @__PURE__ */ e.createElement(v, { className: "h-4 w-4" }) },
-  { mode: "sticker", label: "Sticker", icon: /* @__PURE__ */ e.createElement(C, { className: "h-4 w-4" }) }
-];
-function F({ ui: a, engine: t, onOpenFile: r }) {
-  const o = !a.hasImage;
-  return /* @__PURE__ */ e.createElement("div", { className: "flex items-stretch gap-2 overflow-x-auto overscroll-x-contain border-b border-neutral-1 bg-light-3 p-2" }, a.canOpenImage && /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1.5 border-r border-neutral-1 pr-2" }, /* @__PURE__ */ e.createElement(
-    c,
-    {
-      icon: /* @__PURE__ */ e.createElement(s, { className: "h-4 w-4" }),
-      label: "Open",
-      onClick: r
-    }
-  )), /* @__PURE__ */ e.createElement("div", { className: "mr-auto flex items-center gap-1.5" }, O.map((l) => /* @__PURE__ */ e.createElement(
-    c,
-    {
-      key: l.mode,
-      icon: l.icon,
-      label: l.label,
-      disabled: o,
-      active: a.mode === l.mode,
-      onClick: () => t.setMode(l.mode)
-    }
-  ))), /* @__PURE__ */ e.createElement("div", { className: "ml-auto flex items-center" }, /* @__PURE__ */ e.createElement(
-    Z,
-    {
-      zoomPercent: a.zoomPercent,
-      canZoomIn: a.canZoomIn,
-      canZoomOut: a.canZoomOut,
-      disabled: o,
-      onZoomIn: t.zoomIn,
-      onZoomOut: t.zoomOut,
-      onZoomReset: t.zoomToFit
-    }
-  )), /* @__PURE__ */ e.createElement("div", { className: "ml-auto flex items-center gap-1.5 border-l border-neutral-1 pl-2" }, /* @__PURE__ */ e.createElement(
-    c,
-    {
-      icon: /* @__PURE__ */ e.createElement(i, { className: "h-4 w-4" }),
-      label: "Undo",
-      disabled: !a.canUndo,
-      onClick: t.undo
-    }
-  ), /* @__PURE__ */ e.createElement(
-    c,
-    {
-      icon: /* @__PURE__ */ e.createElement(d, { className: "h-4 w-4" }),
-      label: "Redo",
-      disabled: !a.canRedo,
-      onClick: t.redo
-    }
-  ), /* @__PURE__ */ e.createElement(
-    c,
-    {
-      icon: /* @__PURE__ */ e.createElement(b, { className: "h-4 w-4" }),
-      label: "Reset",
-      disabled: !a.canReset,
-      onClick: t.resetToOriginal
-    }
-  )), /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1.5 border-l border-neutral-1 pl-2" }, /* @__PURE__ */ e.createElement(
-    c,
-    {
-      icon: /* @__PURE__ */ e.createElement(p, { className: "h-4 w-4" }),
-      label: "Rotate L",
-      disabled: o,
-      onClick: () => t.rotate(-90)
-    }
-  ), /* @__PURE__ */ e.createElement(
-    c,
-    {
-      icon: /* @__PURE__ */ e.createElement(h, { className: "h-4 w-4" }),
-      label: "Rotate R",
-      disabled: o,
-      onClick: () => t.rotate(90)
-    }
-  ), /* @__PURE__ */ e.createElement(
-    c,
-    {
-      icon: /* @__PURE__ */ e.createElement(E, { className: "h-4 w-4" }),
-      label: "Flip H",
-      disabled: o,
-      onClick: () => t.flip(!0)
-    }
-  ), /* @__PURE__ */ e.createElement(
-    c,
-    {
-      icon: /* @__PURE__ */ e.createElement(u, { className: "h-4 w-4" }),
-      label: "Flip V",
-      disabled: o,
-      onClick: () => t.flip(!1)
-    }
-  )));
+function r({ ui: t }) {
+  return /* @__PURE__ */ e.createElement("div", { className: "flex h-[30px] shrink-0 items-center gap-4 border-t border-neutral-1 bg-light-3 px-4 text-xs text-light-4" }, /* @__PURE__ */ e.createElement("span", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ e.createElement("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-rest-p1" }), t.statusText), /* @__PURE__ */ e.createElement("span", null, t.dims));
 }
 export {
-  F as Ribbon
+  r as StatusBar
 };
 //# sourceMappingURL=index.es142.js.map

package/dist/index.es142.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es142.js","sources":["../src/components/organisms/image-editor/components/ribbon.tsx"],"sourcesContent":["import {\n  Crop,\n  FlipHorizontal2,\n  FlipVertical2,\n  ImagePlus,\n  MousePointer2,\n  Pen,\n  Redo2,\n  RefreshCcw,\n  RotateCcw,\n  RotateCw,\n  Shapes,\n  Sticker,\n  Type,\n  Undo2,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react'\nimport React from 'react'\n\nimport { Button } from '@/components/atoms/button'\nimport { cn } from '@/lib/utils'\n\nimport {\n  ImageEditorEngine,\n  ImageEditorMode,\n  ImageEditorUiState,\n} from '../image-editor.types'\n\ninterface ToolButtonProps {\n  icon: React.ReactNode\n  label: string\n  active?: boolean\n  disabled?: boolean\n  onClick: () => void\n}\n\nfunction ToolButton({\n  icon,\n  label,\n  active,\n  disabled,\n  onClick,\n}: ToolButtonProps) {\n  return (\n    <Button\n      variant=\"secondary\"\n      size=\"sm\"\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(\n        'w-auto flex-col gap-0.5 h-auto min-w-[52px] border-neutral-1 px-2 py-1.5 text-[10.5px]',\n        active && 'border-rest-p1 bg-rest-p1 text-white hover:bg-hover-p1'\n      )}\n    >\n      {icon}\n      {label}\n    </Button>\n  )\n}\n\ninterface ZoomControlProps {\n  zoomPercent: number\n  canZoomIn: boolean\n  canZoomOut: boolean\n  disabled: boolean\n  onZoomIn: () => void\n  onZoomOut: () => void\n  onZoomReset: () => void\n}\n\nfunction ZoomControl({\n  zoomPercent,\n  canZoomIn,\n  canZoomOut,\n  disabled,\n  onZoomIn,\n  onZoomOut,\n  onZoomReset,\n}: ZoomControlProps) {\n  return (\n    <div className=\"flex items-center gap-0.5 rounded-lg border border-neutral-1 bg-white p-0.5\">\n      <button\n        type=\"button\"\n        title=\"Zoom out\"\n        disabled={disabled || !canZoomOut}\n        onClick={onZoomOut}\n        className=\"flex h-7 w-7 items-center justify-center rounded-md text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40\"\n      >\n        <ZoomOut className=\"h-4 w-4\" />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Reset zoom to fit\"\n        disabled={disabled}\n        onClick={onZoomReset}\n        className=\"min-w-[38px] rounded-md py-1 text-[11px] font-medium text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40\"\n      >\n        {zoomPercent}%\n      </button>\n      <button\n        type=\"button\"\n        title=\"Zoom in\"\n        disabled={disabled || !canZoomIn}\n        onClick={onZoomIn}\n        className=\"flex h-7 w-7 items-center justify-center rounded-md text-light-2 hover:bg-light-2 disabled:pointer-events-none disabled:opacity-40\"\n      >\n        <ZoomIn className=\"h-4 w-4\" />\n      </button>\n    </div>\n  )\n}\n\nexport interface RibbonProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n  onOpenFile: () => void\n}\n\nconst MODE_TOOLS: {\n  mode: ImageEditorMode\n  label: string\n  icon: React.ReactNode\n}[] = [\n  {\n    mode: 'select',\n    label: 'Select',\n    icon: <MousePointer2 className=\"h-4 w-4\" />,\n  },\n  { mode: 'crop', label: 'Crop', icon: <Crop className=\"h-4 w-4\" /> },\n  { mode: 'text', label: 'Text', icon: <Type className=\"h-4 w-4\" /> },\n  { mode: 'draw', label: 'Draw', icon: <Pen className=\"h-4 w-4\" /> },\n  { mode: 'shape', label: 'Shape', icon: <Shapes className=\"h-4 w-4\" /> },\n  { mode: 'sticker', label: 'Sticker', icon: <Sticker className=\"h-4 w-4\" /> },\n]\n\nexport function Ribbon({ ui, engine, onOpenFile }: RibbonProps) {\n  const disabled = !ui.hasImage\n\n  return (\n    <div className=\"flex items-stretch gap-2 overflow-x-auto overscroll-x-contain border-b border-neutral-1 bg-light-3 p-2\">\n      {ui.canOpenImage && (\n        <div className=\"flex items-center gap-1.5 border-r border-neutral-1 pr-2\">\n          <ToolButton\n            icon={<ImagePlus className=\"h-4 w-4\" />}\n            label=\"Open\"\n            onClick={onOpenFile}\n          />\n        </div>\n      )}\n\n      <div className=\"mr-auto flex items-center gap-1.5\">\n        {MODE_TOOLS.map((t) => (\n          <ToolButton\n            key={t.mode}\n            icon={t.icon}\n            label={t.label}\n            disabled={disabled}\n            active={ui.mode === t.mode}\n            onClick={() => engine.setMode(t.mode)}\n          />\n        ))}\n      </div>\n\n      <div className=\"ml-auto flex items-center\">\n        <ZoomControl\n          zoomPercent={ui.zoomPercent}\n          canZoomIn={ui.canZoomIn}\n          canZoomOut={ui.canZoomOut}\n          disabled={disabled}\n          onZoomIn={engine.zoomIn}\n          onZoomOut={engine.zoomOut}\n          onZoomReset={engine.zoomToFit}\n        />\n      </div>\n\n      <div className=\"ml-auto flex items-center gap-1.5 border-l border-neutral-1 pl-2\">\n        <ToolButton\n          icon={<Undo2 className=\"h-4 w-4\" />}\n          label=\"Undo\"\n          disabled={!ui.canUndo}\n          onClick={engine.undo}\n        />\n        <ToolButton\n          icon={<Redo2 className=\"h-4 w-4\" />}\n          label=\"Redo\"\n          disabled={!ui.canRedo}\n          onClick={engine.redo}\n        />\n        <ToolButton\n          icon={<RefreshCcw className=\"h-4 w-4\" />}\n          label=\"Reset\"\n          disabled={!ui.canReset}\n          onClick={engine.resetToOriginal}\n        />\n      </div>\n\n      <div className=\"flex items-center gap-1.5 border-l border-neutral-1 pl-2\">\n        <ToolButton\n          icon={<RotateCcw className=\"h-4 w-4\" />}\n          label=\"Rotate L\"\n          disabled={disabled}\n          onClick={() => engine.rotate(-90)}\n        />\n        <ToolButton\n          icon={<RotateCw className=\"h-4 w-4\" />}\n          label=\"Rotate R\"\n          disabled={disabled}\n          onClick={() => engine.rotate(90)}\n        />\n        <ToolButton\n          icon={<FlipHorizontal2 className=\"h-4 w-4\" />}\n          label=\"Flip H\"\n          disabled={disabled}\n          onClick={() => engine.flip(true)}\n        />\n        <ToolButton\n          icon={<FlipVertical2 className=\"h-4 w-4\" />}\n          label=\"Flip V\"\n          disabled={disabled}\n          onClick={() => engine.flip(false)}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["ToolButton","icon","label","active","disabled","onClick","React","Button","cn","ZoomControl","zoomPercent","canZoomIn","canZoomOut","onZoomIn","onZoomOut","onZoomReset","ZoomOut","ZoomIn","MODE_TOOLS","MousePointer2","Crop","Type","Pen","Shapes","Sticker","Ribbon","ui","engine","onOpenFile","ImagePlus","t","Undo2","Redo2","RefreshCcw","RotateCcw","RotateCw","FlipHorizontal2","FlipVertical2"],"mappings":";;;;AAqCA,SAASA,EAAW;AAAA,EAClB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,SACEC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,UAAAH;AAAA,MACA,SAAAC;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAL,KAAU;AAAA,MAAA;AAAA,IACZ;AAAA,IAECF;AAAA,IACAC;AAAA,EAAA;AAGP;AAYA,SAASO,EAAY;AAAA,EACnB,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAR;AAAA,EACA,UAAAS;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AACF,GAAqB;AACnB,SACET,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,8EAAA,GACbA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAM;AAAA,MACN,UAAUF,KAAY,CAACQ;AAAA,MACvB,SAASE;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,IAEVR,gBAAAA,EAAA,cAACU,GAAA,EAAQ,WAAU,UAAA,CAAU;AAAA,EAAA,GAE/BV,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAM;AAAA,MACN,UAAAF;AAAA,MACA,SAASW;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,IAETL;AAAA,IAAY;AAAA,EAAA,GAEfJ,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAM;AAAA,MACN,UAAUF,KAAY,CAACO;AAAA,MACvB,SAASE;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,IAEVP,gBAAAA,EAAA,cAACW,GAAA,EAAO,WAAU,UAAA,CAAU;AAAA,EAAA,CAEhC;AAEJ;AAQA,MAAMC,IAIA;AAAA,EACJ;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAMZ,gBAAAA,EAAA,cAACa,GAAA,EAAc,WAAU,UAAA,CAAU;AAAA,EAAA;AAAA,EAE3C,EAAE,MAAM,QAAQ,OAAO,QAAQ,MAAMb,gBAAAA,EAAA,cAACc,GAAA,EAAK,WAAU,UAAA,CAAU,EAAA;AAAA,EAC/D,EAAE,MAAM,QAAQ,OAAO,QAAQ,MAAMd,gBAAAA,EAAA,cAACe,GAAA,EAAK,WAAU,UAAA,CAAU,EAAA;AAAA,EAC/D,EAAE,MAAM,QAAQ,OAAO,QAAQ,MAAMf,gBAAAA,EAAA,cAACgB,GAAA,EAAI,WAAU,UAAA,CAAU,EAAA;AAAA,EAC9D,EAAE,MAAM,SAAS,OAAO,SAAS,MAAMhB,gBAAAA,EAAA,cAACiB,GAAA,EAAO,WAAU,UAAA,CAAU,EAAA;AAAA,EACnE,EAAE,MAAM,WAAW,OAAO,WAAW,MAAMjB,gBAAAA,EAAA,cAACkB,GAAA,EAAQ,WAAU,UAAA,CAAU,EAAA;AAC1E;AAEO,SAASC,EAAO,EAAE,IAAAC,GAAI,QAAAC,GAAQ,YAAAC,KAA2B;AAC9D,QAAMxB,IAAW,CAACsB,EAAG;AAErB,SACEpB,gBAAAA,EAAA,cAAC,SAAI,WAAU,yGAAA,GACZoB,EAAG,gBACFpB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,2DAAA,GACbA,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAMM,gBAAAA,EAAA,cAACuB,GAAA,EAAU,WAAU,WAAU;AAAA,MACrC,OAAM;AAAA,MACN,SAASD;AAAA,IAAA;AAAA,EAAA,CAEb,GAGFtB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,oCAAA,GACZY,EAAW,IAAI,CAACY,MACfxB,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,KAAK8B,EAAE;AAAA,MACP,MAAMA,EAAE;AAAA,MACR,OAAOA,EAAE;AAAA,MACT,UAAA1B;AAAA,MACA,QAAQsB,EAAG,SAASI,EAAE;AAAA,MACtB,SAAS,MAAMH,EAAO,QAAQG,EAAE,IAAI;AAAA,IAAA;AAAA,EAAA,CAEvC,CACH,GAEAxB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,+BACbA,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,aAAaiB,EAAG;AAAA,MAChB,WAAWA,EAAG;AAAA,MACd,YAAYA,EAAG;AAAA,MACf,UAAAtB;AAAA,MACA,UAAUuB,EAAO;AAAA,MACjB,WAAWA,EAAO;AAAA,MAClB,aAAaA,EAAO;AAAA,IAAA;AAAA,EAAA,CAExB,GAEArB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,mEAAA,GACbA,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAMM,gBAAAA,EAAA,cAACyB,GAAA,EAAM,WAAU,WAAU;AAAA,MACjC,OAAM;AAAA,MACN,UAAU,CAACL,EAAG;AAAA,MACd,SAASC,EAAO;AAAA,IAAA;AAAA,EAAA,GAElBrB,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAMM,gBAAAA,EAAA,cAAC0B,GAAA,EAAM,WAAU,WAAU;AAAA,MACjC,OAAM;AAAA,MACN,UAAU,CAACN,EAAG;AAAA,MACd,SAASC,EAAO;AAAA,IAAA;AAAA,EAAA,GAElBrB,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAMM,gBAAAA,EAAA,cAAC2B,GAAA,EAAW,WAAU,WAAU;AAAA,MACtC,OAAM;AAAA,MACN,UAAU,CAACP,EAAG;AAAA,MACd,SAASC,EAAO;AAAA,IAAA;AAAA,EAAA,CAEpB,GAEArB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,2DAAA,GACbA,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAMM,gBAAAA,EAAA,cAAC4B,GAAA,EAAU,WAAU,WAAU;AAAA,MACrC,OAAM;AAAA,MACN,UAAA9B;AAAA,MACA,SAAS,MAAMuB,EAAO,OAAO,GAAG;AAAA,IAAA;AAAA,EAAA,GAElCrB,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAMM,gBAAAA,EAAA,cAAC6B,GAAA,EAAS,WAAU,WAAU;AAAA,MACpC,OAAM;AAAA,MACN,UAAA/B;AAAA,MACA,SAAS,MAAMuB,EAAO,OAAO,EAAE;AAAA,IAAA;AAAA,EAAA,GAEjCrB,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAMM,gBAAAA,EAAA,cAAC8B,GAAA,EAAgB,WAAU,WAAU;AAAA,MAC3C,OAAM;AAAA,MACN,UAAAhC;AAAA,MACA,SAAS,MAAMuB,EAAO,KAAK,EAAI;AAAA,IAAA;AAAA,EAAA,GAEjCrB,gBAAAA,EAAA;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAMM,gBAAAA,EAAA,cAAC+B,GAAA,EAAc,WAAU,WAAU;AAAA,MACzC,OAAM;AAAA,MACN,UAAAjC;AAAA,MACA,SAAS,MAAMuB,EAAO,KAAK,EAAK;AAAA,IAAA;AAAA,EAAA,CAEpC,CACF;AAEJ;"}
+{"version":3,"file":"index.es142.js","sources":["../src/components/organisms/image-editor/components/status-bar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ImageEditorUiState } from '../image-editor.types'\n\nexport function StatusBar({ ui }: { ui: ImageEditorUiState }) {\n  return (\n    <div className=\"flex h-[30px] shrink-0 items-center gap-4 border-t border-neutral-1 bg-light-3 px-4 text-xs text-light-4\">\n      <span className=\"flex items-center gap-1.5\">\n        <span className=\"inline-block h-1.5 w-1.5 rounded-full bg-rest-p1\" />\n        {ui.statusText}\n      </span>\n      <span>{ui.dims}</span>\n    </div>\n  )\n}\n"],"names":["StatusBar","ui","React"],"mappings":";AAIO,SAASA,EAAU,EAAE,IAAAC,KAAkC;AAC5D,SACEC,gBAAAA,EAAA,cAAC,SAAI,WAAU,2GAAA,mCACZ,QAAA,EAAK,WAAU,+BACdA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,mDAAA,CAAmD,GAClED,EAAG,UACN,mCACC,QAAA,MAAMA,EAAG,IAAK,CACjB;AAEJ;"}

package/dist/index.es143.js

@@ -1,85 +1,59 @@
-import { ImageUp as x, Loader2 as d } from "lucide-react";
-import e, { forwardRef as E } from "react";
-import { cn as g } from "./index.es89.js";
-const v = {
-  backgroundImage: "linear-gradient(45deg,#e2e0d9 25%,transparent 25%),linear-gradient(-45deg,#e2e0d9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e0d9 75%),linear-gradient(-45deg,transparent 75%,#e2e0d9 75%)",
-  backgroundSize: "22px 22px",
-  backgroundPosition: "0 0, 0 11px, 11px -11px, -11px 0",
-  backgroundColor: "#eceae4"
-}, R = E(function({ ui: t, onChooseImage: f, onDropFile: p }, u) {
-  const l = e.useRef(null), s = e.useRef(null), o = e.useRef(null), c = e.useRef(null), r = e.useRef(null);
-  return e.useImperativeHandle(u, () => ({
-    stage: l.current,
-    cwrap: s.current,
-    canvas: o.current,
-    overlay: c.current,
-    textEditor: r.current
-  })), e.useEffect(() => {
-    if (!t.isEditingText) return;
-    const a = r.current;
-    if (!a) return;
-    let n = 0, i = 0;
-    const m = () => {
-      document.activeElement !== a && (a.focus(), t.editingSelectAll && a.select()), n += 1, n < 3 && (i = requestAnimationFrame(m));
-    };
-    return m(), () => cancelAnimationFrame(i);
-  }, [t.isEditingText, t.editingSelectAll]), /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      ref: l,
-      className: "relative flex flex-1 touch-none overflow-auto overscroll-contain",
-      style: v,
-      onDragOver: (a) => a.preventDefault(),
-      onDragEnter: (a) => a.preventDefault(),
-      onDrop: (a) => {
-        if (a.preventDefault(), !t.canOpenImage) return;
-        const n = a.dataTransfer.files[0];
-        n && n.type.startsWith("image/") && p(n);
-      }
-    },
-    !t.hasImage && !t.isLoadingImage && t.canOpenImage && /* @__PURE__ */ e.createElement("div", { className: "m-auto max-w-[340px] px-8 text-center text-light-4" }, /* @__PURE__ */ e.createElement(x, { className: "mx-auto mb-3 h-14 w-14 stroke-[1.2]" }), /* @__PURE__ */ e.createElement("h2", { className: "mb-2 text-lg font-semibold text-light-2" }, "Drop a picture in"), /* @__PURE__ */ e.createElement("p", { className: "text-sm leading-relaxed" }, "Open an image to crop, filter, rotate, and annotate. Text, shapes, and drawings become movable layers."), /* @__PURE__ */ e.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: f,
-        className: "mt-4 inline-block rounded-lg bg-rest-p1 px-5 py-2 text-sm text-white hover:bg-hover-p1"
-      },
-      "Choose an image"
-    )),
-    !t.hasImage && t.isLoadingImage && /* @__PURE__ */ e.createElement("div", { className: "m-auto flex flex-col items-center gap-3 text-light-4" }, /* @__PURE__ */ e.createElement(d, { className: "h-10 w-10 animate-spin" }), /* @__PURE__ */ e.createElement("p", { className: "text-sm" }, "Loading image…")),
-    /* @__PURE__ */ e.createElement(
-      "div",
-      {
-        ref: s,
-        className: g(
-          "relative m-auto bg-white shadow-lg",
-          !t.hasImage && "hidden"
-        )
-      },
-      /* @__PURE__ */ e.createElement("canvas", { ref: o, className: "image-editor-canvas block" }),
-      /* @__PURE__ */ e.createElement(
-        "canvas",
-        {
-          ref: c,
-          className: "image-editor-canvas absolute inset-0"
-        }
-      ),
-      /* @__PURE__ */ e.createElement(
-        "textarea",
-        {
-          ref: r,
-          rows: 1,
-          className: g(
-            "absolute z-30 resize-none overflow-hidden rounded-md border border-rest-p1 bg-white px-1.5 py-1 leading-[1.1] shadow-lg outline-none",
-            !t.isEditingText && "hidden"
-          )
-        }
-      ),
-      t.isLoadingImage && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-40 flex flex-col items-center justify-center gap-3 bg-white text-light-4" }, /* @__PURE__ */ e.createElement(d, { className: "h-10 w-10 animate-spin" }), /* @__PURE__ */ e.createElement("p", { className: "text-sm" }, "Loading image…"))
-    )
-  );
-});
+const e = "1.0.0", a = [
+  { id: "none", name: "Original" },
+  { id: "grayscale", name: "B & W" },
+  { id: "vivid", name: "Vivid" },
+  { id: "cool", name: "Cool" },
+  { id: "warm", name: "Warm" },
+  { id: "vintage", name: "Vintage" },
+  { id: "fade", name: "Fade" },
+  { id: "noir", name: "Noir" }
+], r = {
+  none: "",
+  grayscale: "grayscale(1) contrast(1.05)",
+  vivid: "saturate(1.7) contrast(1.15)",
+  cool: "hue-rotate(200deg) saturate(1.2)",
+  warm: "sepia(.35) saturate(1.3) brightness(1.05)",
+  vintage: "sepia(.5) contrast(.9) brightness(1.05) saturate(1.2)",
+  fade: "contrast(.82) brightness(1.12) saturate(.85)",
+  noir: "grayscale(1) contrast(1.4) brightness(.92)"
+}, n = [
+  "#d24b2f",
+  "#2f5fd2",
+  "#e8b423",
+  "#2fa84f",
+  "#111111",
+  "#ffffff",
+  "#8e44ad",
+  "#ff5da2"
+], i = [
+  { id: "rect", name: "Rectangle" },
+  { id: "ellipse", name: "Ellipse" },
+  { id: "circle", name: "Circle" },
+  { id: "line", name: "Line" },
+  { id: "dashedLine", name: "Dashed line" },
+  { id: "arrow", name: "Arrow" },
+  { id: "dashedArrow", name: "Dashed arrow" },
+  { id: "doubleArrow", name: "Double arrow" },
+  { id: "dashedDoubleArrow", name: "Dashed double arrow" }
+], l = [
+  { label: "Serif", value: "Iowan Old Style, Georgia, serif" },
+  { label: "Sans", value: "Avenir Next, Segoe UI, sans-serif" },
+  { label: "Mono", value: "Courier New, monospace" },
+  { label: "Impact", value: "Impact, sans-serif" }
+], s = [
+  { label: "Freeform", value: "free" },
+  { label: "Square 1:1", value: "1" },
+  { label: "4:3", value: "1.3333" },
+  { label: "16:9", value: "1.7777" },
+  { label: "3:4 portrait", value: "0.75" }
+];
 export {
-  R as Stage
+  s as CROP_RATIOS,
+  a as FILTERS,
+  r as FILTER_CSS,
+  l as FONTS,
+  i as SHAPES,
+  n as SWATCHES,
+  e as VERSION
 };
 //# sourceMappingURL=index.es143.js.map

package/dist/index.es143.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es143.js","sources":["../src/components/organisms/image-editor/components/stage.tsx"],"sourcesContent":["import { ImageUp, Loader2 } from 'lucide-react'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\nimport { ImageEditorUiState } from '../image-editor.types'\n\nexport interface StageHandle {\n  stage: HTMLDivElement | null\n  cwrap: HTMLDivElement | null\n  canvas: HTMLCanvasElement | null\n  overlay: HTMLCanvasElement | null\n  textEditor: HTMLTextAreaElement | null\n}\n\ninterface StageProps {\n  ui: ImageEditorUiState\n  onChooseImage: () => void\n  onDropFile: (file: File) => void\n}\n\nconst CHECKERBOARD_STYLE: React.CSSProperties = {\n  backgroundImage:\n    'linear-gradient(45deg,#e2e0d9 25%,transparent 25%),linear-gradient(-45deg,#e2e0d9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e0d9 75%),linear-gradient(-45deg,transparent 75%,#e2e0d9 75%)',\n  backgroundSize: '22px 22px',\n  backgroundPosition: '0 0, 0 11px, 11px -11px, -11px 0',\n  backgroundColor: '#eceae4',\n}\n\nexport const Stage = forwardRef<StageHandle, StageProps>(function Stage(\n  { ui, onChooseImage, onDropFile },\n  ref\n) {\n  const stageElRef = React.useRef<HTMLDivElement>(null)\n  const cwrapElRef = React.useRef<HTMLDivElement>(null)\n  const canvasElRef = React.useRef<HTMLCanvasElement>(null)\n  const overlayElRef = React.useRef<HTMLCanvasElement>(null)\n  const textEditorElRef = React.useRef<HTMLTextAreaElement>(null)\n\n  React.useImperativeHandle(ref, () => ({\n    stage: stageElRef.current,\n    cwrap: cwrapElRef.current,\n    canvas: canvasElRef.current,\n    overlay: overlayElRef.current,\n    textEditor: textEditorElRef.current,\n  }))\n\n  React.useEffect(() => {\n    if (!ui.isEditingText) return\n    const el = textEditorElRef.current\n    if (!el) return\n    let attempts = 0\n    let raf = 0\n    const tryFocus = () => {\n      if (document.activeElement !== el) {\n        el.focus()\n        if (ui.editingSelectAll) el.select()\n      }\n      attempts += 1\n      if (attempts < 3) raf = requestAnimationFrame(tryFocus)\n    }\n    tryFocus()\n    return () => cancelAnimationFrame(raf)\n  }, [ui.isEditingText, ui.editingSelectAll])\n\n  return (\n    <div\n      ref={stageElRef}\n      className=\"relative flex flex-1 touch-none overflow-auto overscroll-contain\"\n      style={CHECKERBOARD_STYLE}\n      onDragOver={(e) => e.preventDefault()}\n      onDragEnter={(e) => e.preventDefault()}\n      onDrop={(e) => {\n        e.preventDefault()\n        if (!ui.canOpenImage) return\n        const file = e.dataTransfer.files[0]\n        if (file && file.type.startsWith('image/')) onDropFile(file)\n      }}\n    >\n      {!ui.hasImage && !ui.isLoadingImage && ui.canOpenImage && (\n        <div className=\"m-auto max-w-[340px] px-8 text-center text-light-4\">\n          <ImageUp className=\"mx-auto mb-3 h-14 w-14 stroke-[1.2]\" />\n          <h2 className=\"mb-2 text-lg font-semibold text-light-2\">\n            Drop a picture in\n          </h2>\n          <p className=\"text-sm leading-relaxed\">\n            Open an image to crop, filter, rotate, and annotate. Text, shapes,\n            and drawings become movable layers.\n          </p>\n          <button\n            type=\"button\"\n            onClick={onChooseImage}\n            className=\"mt-4 inline-block rounded-lg bg-rest-p1 px-5 py-2 text-sm text-white hover:bg-hover-p1\"\n          >\n            Choose an image\n          </button>\n        </div>\n      )}\n      {!ui.hasImage && ui.isLoadingImage && (\n        <div className=\"m-auto flex flex-col items-center gap-3 text-light-4\">\n          <Loader2 className=\"h-10 w-10 animate-spin\" />\n          <p className=\"text-sm\">Loading image…</p>\n        </div>\n      )}\n      <div\n        ref={cwrapElRef}\n        className={cn(\n          'relative m-auto bg-white shadow-lg',\n          !ui.hasImage && 'hidden'\n        )}\n      >\n        <canvas ref={canvasElRef} className=\"image-editor-canvas block\" />\n        <canvas\n          ref={overlayElRef}\n          className=\"image-editor-canvas absolute inset-0\"\n        />\n        <textarea\n          ref={textEditorElRef}\n          rows={1}\n          className={cn(\n            'absolute z-30 resize-none overflow-hidden rounded-md border border-rest-p1 bg-white px-1.5 py-1 leading-[1.1] shadow-lg outline-none',\n            !ui.isEditingText && 'hidden'\n          )}\n        />\n        {ui.isLoadingImage && (\n          <div className=\"absolute inset-0 z-40 flex flex-col items-center justify-center gap-3 bg-white text-light-4\">\n            <Loader2 className=\"h-10 w-10 animate-spin\" />\n            <p className=\"text-sm\">Loading image…</p>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n})\n"],"names":["CHECKERBOARD_STYLE","Stage","forwardRef","ui","onChooseImage","onDropFile","ref","stageElRef","React","cwrapElRef","canvasElRef","overlayElRef","textEditorElRef","el","attempts","raf","tryFocus","e","file","ImageUp","Loader2","cn"],"mappings":"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"}
+{"version":3,"file":"index.es143.js","sources":["../src/components/organisms/image-editor/engine/constants.js"],"sourcesContent":["export const VERSION = '1.0.0'\n\nexport const FILTERS = [\n  { id: 'none', name: 'Original' },\n  { id: 'grayscale', name: 'B & W' },\n  { id: 'vivid', name: 'Vivid' },\n  { id: 'cool', name: 'Cool' },\n  { id: 'warm', name: 'Warm' },\n  { id: 'vintage', name: 'Vintage' },\n  { id: 'fade', name: 'Fade' },\n  { id: 'noir', name: 'Noir' },\n]\nexport const FILTER_CSS = {\n  none: '',\n  grayscale: 'grayscale(1) contrast(1.05)',\n  vivid: 'saturate(1.7) contrast(1.15)',\n  cool: 'hue-rotate(200deg) saturate(1.2)',\n  warm: 'sepia(.35) saturate(1.3) brightness(1.05)',\n  vintage: 'sepia(.5) contrast(.9) brightness(1.05) saturate(1.2)',\n  fade: 'contrast(.82) brightness(1.12) saturate(.85)',\n  noir: 'grayscale(1) contrast(1.4) brightness(.92)',\n}\nexport const SWATCHES = [\n  '#d24b2f',\n  '#2f5fd2',\n  '#e8b423',\n  '#2fa84f',\n  '#111111',\n  '#ffffff',\n  '#8e44ad',\n  '#ff5da2',\n]\nexport const SHAPES = [\n  { id: 'rect', name: 'Rectangle' },\n  { id: 'ellipse', name: 'Ellipse' },\n  { id: 'circle', name: 'Circle' },\n  { id: 'line', name: 'Line' },\n  { id: 'dashedLine', name: 'Dashed line' },\n  { id: 'arrow', name: 'Arrow' },\n  { id: 'dashedArrow', name: 'Dashed arrow' },\n  { id: 'doubleArrow', name: 'Double arrow' },\n  { id: 'dashedDoubleArrow', name: 'Dashed double arrow' },\n]\nexport const FONTS = [\n  { label: 'Serif', value: 'Iowan Old Style, Georgia, serif' },\n  { label: 'Sans', value: 'Avenir Next, Segoe UI, sans-serif' },\n  { label: 'Mono', value: 'Courier New, monospace' },\n  { label: 'Impact', value: 'Impact, sans-serif' },\n]\nexport const CROP_RATIOS = [\n  { label: 'Freeform', value: 'free' },\n  { label: 'Square 1:1', value: '1' },\n  { label: '4:3', value: '1.3333' },\n  { label: '16:9', value: '1.7777' },\n  { label: '3:4 portrait', value: '0.75' },\n]\n"],"names":["VERSION","FILTERS","FILTER_CSS","SWATCHES","SHAPES","FONTS","CROP_RATIOS"],"mappings":"AAAY,MAACA,IAAU,SAEVC,IAAU;AAAA,EACrB,EAAE,IAAI,QAAQ,MAAM,WAAU;AAAA,EAC9B,EAAE,IAAI,aAAa,MAAM,QAAO;AAAA,EAChC,EAAE,IAAI,SAAS,MAAM,QAAO;AAAA,EAC5B,EAAE,IAAI,QAAQ,MAAM,OAAM;AAAA,EAC1B,EAAE,IAAI,QAAQ,MAAM,OAAM;AAAA,EAC1B,EAAE,IAAI,WAAW,MAAM,UAAS;AAAA,EAChC,EAAE,IAAI,QAAQ,MAAM,OAAM;AAAA,EAC1B,EAAE,IAAI,QAAQ,MAAM,OAAM;AAC5B,GACaC,IAAa;AAAA,EACxB,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AACR,GACaC,IAAW;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACaC,IAAS;AAAA,EACpB,EAAE,IAAI,QAAQ,MAAM,YAAW;AAAA,EAC/B,EAAE,IAAI,WAAW,MAAM,UAAS;AAAA,EAChC,EAAE,IAAI,UAAU,MAAM,SAAQ;AAAA,EAC9B,EAAE,IAAI,QAAQ,MAAM,OAAM;AAAA,EAC1B,EAAE,IAAI,cAAc,MAAM,cAAa;AAAA,EACvC,EAAE,IAAI,SAAS,MAAM,QAAO;AAAA,EAC5B,EAAE,IAAI,eAAe,MAAM,eAAc;AAAA,EACzC,EAAE,IAAI,eAAe,MAAM,eAAc;AAAA,EACzC,EAAE,IAAI,qBAAqB,MAAM,sBAAqB;AACxD,GACaC,IAAQ;AAAA,EACnB,EAAE,OAAO,SAAS,OAAO,kCAAiC;AAAA,EAC1D,EAAE,OAAO,QAAQ,OAAO,oCAAmC;AAAA,EAC3D,EAAE,OAAO,QAAQ,OAAO,yBAAwB;AAAA,EAChD,EAAE,OAAO,UAAU,OAAO,qBAAoB;AAChD,GACaC,IAAc;AAAA,EACzB,EAAE,OAAO,YAAY,OAAO,OAAM;AAAA,EAClC,EAAE,OAAO,cAAc,OAAO,IAAG;AAAA,EACjC,EAAE,OAAO,OAAO,OAAO,SAAQ;AAAA,EAC/B,EAAE,OAAO,QAAQ,OAAO,SAAQ;AAAA,EAChC,EAAE,OAAO,gBAAgB,OAAO,OAAM;AACxC;"}

package/dist/index.es144.js

@@ -1,8 +1,123 @@
-import e from "react";
-function r({ ui: t }) {
-  return /* @__PURE__ */ e.createElement("div", { className: "flex h-[30px] shrink-0 items-center gap-4 border-t border-neutral-1 bg-light-3 px-4 text-xs text-light-4" }, /* @__PURE__ */ e.createElement("span", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ e.createElement("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-rest-p1" }), t.statusText), /* @__PURE__ */ e.createElement("span", null, t.dims));
+import { FONTS as a, VERSION as i } from "./index.es143.js";
+const d = 30;
+function o() {
+  const e = document.createElement("canvas");
+  return e.width = 0, e.height = 0, e;
+}
+function g(e) {
+  return {
+    config: e,
+    stickers: e.stickers || [],
+    savedLayers: [],
+    listeners: { open: [], close: [], save: [], change: [], load: [] },
+    notify: () => {
+    },
+    sourceCanvas: o(),
+    originalCanvas: null,
+    layers: [],
+    selectedId: null,
+    nextId: 1,
+    undoStack: [],
+    redoStack: [],
+    mode: "select",
+    viewScale: 1,
+    zoom: 1,
+    fitScale: 1,
+    selectedShapeType: "rect",
+    multiPointMode: !1,
+    shapeFill: "stroke",
+    shapeWidth: 6,
+    brushSize: 8,
+    brushStyle: "round",
+    textFont: a[0].value,
+    textSize: 64,
+    textColor: "#111111",
+    shapeColor: "#111111",
+    drawColor: "#111111",
+    cropRatio: "free",
+    isSaving: !1,
+    isLoadingImage: !1,
+    statusText: "Ready",
+    adj: {
+      brightness: 100,
+      contrast: 100,
+      saturate: 100,
+      sepia: 0,
+      blur: 0,
+      hue: 0,
+      filter: "none"
+    },
+    stickerImageCache: /* @__PURE__ */ new Map(),
+    canvasEl: null,
+    overlayEl: null,
+    textEditorEl: null,
+    stageEl: null,
+    ctx: null,
+    octx: null,
+    mounted: !1,
+    editingLayer: null,
+    editingSelectAll: !1,
+    dragMode: null,
+    dragStart: null,
+    dragOrig: null,
+    dragRect: null,
+    resizeCorner: null,
+    resizeAnchor: null,
+    resizeCenter: null,
+    resizeAnchorWorld: null,
+    rotateStart: null,
+    activePointerId: null,
+    pendingShape: null,
+    pendingStroke: null,
+    pendingPoly: null,
+    cropRect: null,
+    cropStart: null,
+    isOpenFlag: !1
+  };
+}
+function s(e, n, l) {
+  (e.listeners[n] || []).forEach((r) => {
+    try {
+      r(l);
+    } catch (t) {
+      console.error(t);
+    }
+  });
+}
+function h(e) {
+  e.listeners.change.length && s(e, "change", { state: u(e) }), e.notify();
+}
+function f(e) {
+  return e.selectedId != null ? e.layers.find((n) => n.id === e.selectedId) : null;
+}
+function S(e) {
+  e.adj.brightness = 100, e.adj.contrast = 100, e.adj.saturate = 100, e.adj.sepia = 0, e.adj.blur = 0, e.adj.hue = 0, e.adj.filter = "none";
+}
+function u(e) {
+  return e.sourceCanvas.width ? {
+    version: i,
+    image: e.sourceCanvas.toDataURL("image/png"),
+    width: e.sourceCanvas.width,
+    height: e.sourceCanvas.height,
+    adjustments: { ...e.adj },
+    layers: JSON.parse(
+      JSON.stringify(
+        e.layers.map((n) => {
+          const l = { ...n };
+          return delete l._editing, l;
+        })
+      )
+    )
+  } : null;
 }
 export {
-  r as StatusBar
+  d as MAX_HISTORY,
+  g as createState,
+  s as emit,
+  h as emitChange,
+  o as emptySourceCanvas,
+  f as getSel,
+  u as getState,
+  S as resetAdjValues
 };
 //# sourceMappingURL=index.es144.js.map

package/dist/index.es144.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es144.js","sources":["../src/components/organisms/image-editor/components/status-bar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ImageEditorUiState } from '../image-editor.types'\n\nexport function StatusBar({ ui }: { ui: ImageEditorUiState }) {\n  return (\n    <div className=\"flex h-[30px] shrink-0 items-center gap-4 border-t border-neutral-1 bg-light-3 px-4 text-xs text-light-4\">\n      <span className=\"flex items-center gap-1.5\">\n        <span className=\"inline-block h-1.5 w-1.5 rounded-full bg-rest-p1\" />\n        {ui.statusText}\n      </span>\n      <span>{ui.dims}</span>\n    </div>\n  )\n}\n"],"names":["StatusBar","ui","React"],"mappings":";AAIO,SAASA,EAAU,EAAE,IAAAC,KAAkC;AAC5D,SACEC,gBAAAA,EAAA,cAAC,SAAI,WAAU,2GAAA,mCACZ,QAAA,EAAK,WAAU,+BACdA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,mDAAA,CAAmD,GAClED,EAAG,UACN,mCACC,QAAA,MAAMA,EAAG,IAAK,CACjB;AAEJ;"}
+{"version":3,"file":"index.es144.js","sources":["../src/components/organisms/image-editor/engine/state.js"],"sourcesContent":["import { FONTS, VERSION } from './constants.js'\n\nexport const MAX_HISTORY = 30\n\nexport function emptySourceCanvas() {\n  const c = document.createElement('canvas')\n  c.width = 0\n  c.height = 0\n  return c\n}\n\nexport function createState(config) {\n  return {\n    config,\n    stickers: config.stickers || [],\n    savedLayers: [],\n    listeners: { open: [], close: [], save: [], change: [], load: [] },\n    notify: () => {},\n\n    sourceCanvas: emptySourceCanvas(),\n    originalCanvas: null,\n    layers: [],\n    selectedId: null,\n    nextId: 1,\n    undoStack: [],\n    redoStack: [],\n\n    mode: 'select',\n    viewScale: 1,\n    zoom: 1,\n    fitScale: 1,\n    selectedShapeType: 'rect',\n    multiPointMode: false,\n    shapeFill: 'stroke',\n    shapeWidth: 6,\n    brushSize: 8,\n    brushStyle: 'round',\n    textFont: FONTS[0].value,\n    textSize: 64,\n    textColor: '#111111',\n    shapeColor: '#111111',\n    drawColor: '#111111',\n    cropRatio: 'free',\n    isSaving: false,\n    isLoadingImage: false,\n    statusText: 'Ready',\n    adj: {\n      brightness: 100,\n      contrast: 100,\n      saturate: 100,\n      sepia: 0,\n      blur: 0,\n      hue: 0,\n      filter: 'none',\n    },\n    stickerImageCache: new Map(),\n\n    canvasEl: null,\n    overlayEl: null,\n    textEditorEl: null,\n    stageEl: null,\n    ctx: null,\n    octx: null,\n    mounted: false,\n\n    editingLayer: null,\n    editingSelectAll: false,\n\n    dragMode: null,\n    dragStart: null,\n    dragOrig: null,\n    dragRect: null,\n    resizeCorner: null,\n    resizeAnchor: null,\n    resizeCenter: null,\n    resizeAnchorWorld: null,\n    rotateStart: null,\n    activePointerId: null,\n    pendingShape: null,\n    pendingStroke: null,\n    pendingPoly: null,\n    cropRect: null,\n    cropStart: null,\n\n    isOpenFlag: false,\n  }\n}\n\nexport function emit(state, ev, payload) {\n  ;(state.listeners[ev] || []).forEach((fn) => {\n    try {\n      fn(payload)\n    } catch (e) {\n      // eslint-disable-next-line no-console\n      console.error(e)\n    }\n  })\n}\n\nexport function emitChange(state) {\n  if (state.listeners.change.length) {\n    emit(state, 'change', { state: getState(state) })\n  }\n  state.notify()\n}\n\nexport function getSel(state) {\n  return state.selectedId != null\n    ? state.layers.find((l) => l.id === state.selectedId)\n    : null\n}\n\nexport function resetAdjValues(state) {\n  state.adj.brightness = 100\n  state.adj.contrast = 100\n  state.adj.saturate = 100\n  state.adj.sepia = 0\n  state.adj.blur = 0\n  state.adj.hue = 0\n  state.adj.filter = 'none'\n}\n\nexport function getState(state) {\n  if (!state.sourceCanvas.width) return null\n  return {\n    version: VERSION,\n    image: state.sourceCanvas.toDataURL('image/png'),\n    width: state.sourceCanvas.width,\n    height: state.sourceCanvas.height,\n    adjustments: { ...state.adj },\n    layers: JSON.parse(\n      JSON.stringify(\n        state.layers.map((L) => {\n          const c = { ...L }\n          delete c._editing\n          return c\n        })\n      )\n    ),\n  }\n}\n"],"names":["MAX_HISTORY","emptySourceCanvas","c","createState","config","FONTS","emit","state","ev","payload","fn","e","emitChange","getState","getSel","l","resetAdjValues","VERSION","L"],"mappings":"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"}