geoiq-frontend-ui-kit 2.0.1 → 2.0.2

package/dist/index.es142.js

@@ -1,132 +1,173 @@
-import * as e from "react";
-import { useState as $, useRef as x } from "react";
-import { Input as R } from "./index.es9.js";
-import { Typography as g } from "./index.es17.js";
-import { Spinner as T } from "./index.es57.js";
-import { Upload as U, Pen as I, X as z } from "lucide-react";
-import { useFormValues as C } from "./index.es130.js";
-import { useToast as M } from "./index.es79.js";
-const q = ({
-  id: p,
-  onChange: c,
-  value: l = [],
-  accept: E = "image/*",
-  error: u,
-  maxImages: r = 20,
-  placeholder: f
-}) => {
-  const { onAssetUpload: h, onToggleImageEditor: y } = C(), { toast: o } = M(), [s, b] = $(!1), m = x(null), N = async (a) => {
-    const t = a.target.files;
-    if (!(!t?.length || s)) {
-      if (l.length + t.length > r) {
-        o({
-          title: "Alert!",
-          description: `Maximum ${r} images allowed.`,
-          icon: "warning"
-        });
-        return;
-      }
-      if (h) {
-        b(!0);
-        try {
-          const i = Array.from(t).map((d) => h(d)), A = (await Promise.all(i)).map((d) => ({ ...d, tag: "" }));
-          c([...l, ...A]), o({
-            title: "Alert!",
-            description: `${t.length} ${t.length === 1 ? "image" : "images"} uploaded successfully.`,
-            icon: "success"
-          });
-        } catch {
-          o({
-            title: "Alert!",
-            description: "Error uploading images",
-            icon: "warning"
-          });
-        } finally {
-          b(!1), m.current && (m.current.value = "");
-        }
-      }
-    }
-  }, w = () => {
-    !s && l.length < r ? m.current?.click() : l.length >= r && o({
-      title: "Alert!",
-      description: `Maximum ${r} images allowed.`,
-      icon: "warning"
-    });
-  }, v = (a) => {
-    if (!s) {
-      const t = [...l];
-      t.splice(a, 1), c(t);
-    }
-  }, k = (a, t) => {
-    const i = [...l], n = i[t];
-    i.splice(t, 1, { ...n, ...a }), c(i);
-  };
-  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, s && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(T, { className: "w-8 h-8 text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
+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",
     {
-      className: "w-full",
-      onClick: w,
       type: "button",
-      disabled: s || l.length >= r
+      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("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(U, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-600" }, s ? "Uploading..." : l.length >= r ? `Maximum ${r} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-500" }, l.length, " of ", r, " images"))
+    /* @__PURE__ */ e.createElement(g, { className: "h-4 w-4" })
   ), /* @__PURE__ */ e.createElement(
-    "input",
-    {
-      ref: m,
-      id: `${p}-gallery`,
-      type: "file",
-      accept: E,
-      disabled: s || l.length >= r,
-      onChange: N,
-      className: "hidden",
-      multiple: !0
-    }
-  ), u && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "mt-1 text-danger-1" }, u)), l.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, l.map((a, t) => /* @__PURE__ */ e.createElement("div", { key: a.private_url, className: "flex flex-col gap-2" }, /* @__PURE__ */ e.createElement("div", { key: t, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
-    "img",
-    {
-      src: a.public_url,
-      alt: `Preview ${t + 1}`,
-      className: "object-cover w-full h-24 rounded"
-    }
-  ), y && /* @__PURE__ */ e.createElement(
     "button",
     {
-      onClick: () => {
-        y({
-          imageUrl: a.public_url,
-          index: t,
-          onReplaceImage: k
-        });
-      },
-      className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
+      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"
     },
-    /* @__PURE__ */ e.createElement(I, { size: 16, className: "stroke-danger" })
+    a,
+    "%"
   ), /* @__PURE__ */ e.createElement(
     "button",
     {
-      onClick: () => v(t),
-      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
       type: "button",
-      disabled: s
+      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(z, { size: 16, className: "stroke-danger" })
-  )), /* @__PURE__ */ e.createElement(
-    R,
+    /* @__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,
     {
-      id: p + t,
-      type: "text",
-      placeholder: f || "",
-      value: a.tag,
-      required: !0,
-      onChange: (i) => {
-        const n = [...l];
-        n[t].tag = i.target.value, c(n);
-      }
+      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)
+    }
+  )));
+}
 export {
-  q as TaggableImageUploadFieldWithInput
+  F as Ribbon
 };
 //# sourceMappingURL=index.es142.js.map

package/dist/index.es142.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es142.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/taggable-multi-image-picker-with-input/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Input } from '@/components/atoms/input'\nimport { Typography } from '@/components/atoms/typography'\nimport { useToast } from '@/components/molecules/toast'\nimport { useFormValues } from '@/components/ui/form-renderer/context/form-values'\nimport {\n  AssetValue,\n  TaggableAssetValue,\n} from '@/components/ui/form-renderer/form.types'\nimport { Spinner } from '@/components/unstyled/spinner'\nimport { Upload, X, Pen } from 'lucide-react'\nimport { useRef, useState } from 'react'\n\ninterface TaggableImageUploadFieldWithInputProps {\n  id: string\n  onChange: (data: TaggableAssetValue[]) => void\n  value?: TaggableAssetValue[]\n  accept?: string\n  error?: string\n  maxImages?: number\n  placeholder?: string\n}\n\nconst TaggableImageUploadFieldWithInput: React.FC<\n  TaggableImageUploadFieldWithInputProps\n> = ({\n  id,\n  onChange,\n  value = [],\n  accept = 'image/*',\n  error,\n  maxImages = 20,\n  placeholder,\n}) => {\n  const { onAssetUpload, onToggleImageEditor } = useFormValues()\n  const { toast } = useToast()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n\n  const handleImageSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files\n    if (!files?.length || isLoading) return\n\n    if (value.length + files.length > maxImages) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxImages} images allowed.`,\n        icon: 'warning',\n      })\n      return\n    }\n\n    if (onAssetUpload) {\n      setIsLoading(true)\n\n      try {\n        const uploads = Array.from(files).map((file) => onAssetUpload(file))\n        const results = await Promise.all(uploads)\n\n        const TaggedResults = results.map((result) => ({ ...result, tag: '' }))\n\n        onChange([...value, ...TaggedResults])\n\n        toast({\n          title: 'Alert!',\n          description: `${files.length} ${files.length === 1 ? 'image' : 'images'} uploaded successfully.`,\n          icon: 'success',\n        })\n      } catch (error) {\n        toast({\n          title: 'Alert!',\n          description: `Error uploading images`,\n          icon: 'warning',\n        })\n      } finally {\n        setIsLoading(false)\n        // Reset the file input so the same files can be selected again\n        if (fileInputRef.current) {\n          fileInputRef.current.value = ''\n        }\n      }\n    }\n  }\n\n  const handleClick = () => {\n    if (!isLoading && value.length < maxImages) {\n      fileInputRef.current?.click()\n    } else if (value.length >= maxImages) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxImages} images allowed.`,\n        icon: 'warning',\n      })\n    }\n  }\n\n  const removeImage = (index: number) => {\n    if (!isLoading) {\n      const newImages = [...value]\n      newImages.splice(index, 1)\n      onChange(newImages)\n    }\n  }\n\n  const onReplaceImage = (data: AssetValue, index: number) => {\n    const newValue = [...value]\n    const existingImage = newValue[index]\n\n    newValue.splice(index, 1, { ...existingImage, ...data })\n    onChange(newValue)\n  }\n  return (\n    <div className=\"relative\">\n      {isLoading && (\n        <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70\">\n          <Spinner className=\"w-8 h-8 text-primary-1\" />\n        </div>\n      )}\n      <div className=\"relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1\">\n        <button\n          className=\"w-full\"\n          onClick={handleClick}\n          type=\"button\"\n          disabled={isLoading || value.length >= maxImages}\n        >\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <div className=\"bg-gray-100 rounded-full\">\n              <Upload className=\"w-6 h-6 text-gray-500\" />\n            </div>\n            <Typography variant=\"body1\" className=\"text-gray-600\">\n              {isLoading\n                ? 'Uploading...'\n                : value.length >= maxImages\n                  ? `Maximum ${maxImages} images reached`\n                  : 'Add Images'}\n            </Typography>\n            {value.length > 0 && (\n              <Typography variant=\"body1\" className=\"text-gray-500\">\n                {value.length} of {maxImages} images\n              </Typography>\n            )}\n          </div>\n        </button>\n        <input\n          ref={fileInputRef}\n          id={`${id}-gallery`}\n          type=\"file\"\n          accept={accept}\n          disabled={isLoading || value.length >= maxImages}\n          onChange={handleImageSelect}\n          className=\"hidden\"\n          multiple\n        />\n\n        {error && (\n          <Typography variant=\"body1\" className=\"mt-1 text-danger-1\">\n            {error}\n          </Typography>\n        )}\n      </div>\n\n      {value.length > 0 && (\n        <div className=\"grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4\">\n          {value.map((image, index) => (\n            <div key={image.private_url} className=\"flex flex-col gap-2\">\n              <div key={index} className=\"relative flex rounded\">\n                <img\n                  src={image.public_url}\n                  alt={`Preview ${index + 1}`}\n                  className=\"object-cover w-full h-24 rounded\"\n                />\n                {onToggleImageEditor && (\n                  <button\n                    onClick={() => {\n                      onToggleImageEditor({\n                        imageUrl: image.public_url,\n                        index,\n                        onReplaceImage,\n                      })\n                    }}\n                    className=\"absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100\"\n                  >\n                    <Pen size={16} className=\"stroke-danger\" />\n                  </button>\n                )}\n                <button\n                  onClick={() => removeImage(index)}\n                  className=\"absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100\"\n                  type=\"button\"\n                  disabled={isLoading}\n                >\n                  <X size={16} className=\"stroke-danger\" />\n                </button>\n              </div>\n              <Input\n                id={id + index}\n                type=\"text\"\n                placeholder={placeholder ? placeholder : ''}\n                value={image.tag}\n                required={true}\n                onChange={(e) => {\n                  const newImages = [...value]\n                  newImages[index].tag = e.target.value\n                  onChange(newImages)\n                }}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { TaggableImageUploadFieldWithInput }\n"],"names":["TaggableImageUploadFieldWithInput","id","onChange","value","accept","error","maxImages","placeholder","onAssetUpload","onToggleImageEditor","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","handleImageSelect","e","files","uploads","file","TaggedResults","result","handleClick","removeImage","index","newImages","onReplaceImage","data","newValue","existingImage","React","Spinner","Upload","Typography","image","Pen","X","Input"],"mappings":"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"}
+{"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":"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"}

package/dist/index.es143.js

@@ -1,9 +1,85 @@
-import { format as o } from "date-fns";
-const m = (t) => {
-  const e = new Date(t * 1e3);
-  return o(e, "dd MMM yyyy, hh:mm a");
-};
+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…"))
+    )
+  );
+});
 export {
-  m as convertEpochTime
+  R as Stage
 };
 //# sourceMappingURL=index.es143.js.map

package/dist/index.es143.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es143.js","sources":["../src/components/organisms/navbar/components/notification-panel/components/notification-card/notification.utils.ts"],"sourcesContent":["import { format } from 'date-fns'\n\nconst convertEpochTime = (epochTime: number) => {\n  const date = new Date(epochTime * 1000)\n  return format(date, 'dd MMM yyyy, hh:mm a')\n}\n\nexport { convertEpochTime }\n"],"names":["convertEpochTime","epochTime","date","format"],"mappings":";AAEA,MAAMA,IAAmB,CAACC,MAAsB;AAC9C,QAAMC,IAAO,IAAI,KAAKD,IAAY,GAAI;AACtC,SAAOE,EAAOD,GAAM,sBAAsB;AAC5C;"}
+{"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":";;;AAqBA,MAAMA,IAA0C;AAAA,EAC9C,iBACE;AAAA,EACF,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,iBAAiB;AACnB,GAEaC,IAAQC,EAAoC,SACvD,EAAE,IAAAC,GAAI,eAAAC,GAAe,YAAAC,EAAA,GACrBC,GACA;AACA,QAAMC,IAAaC,EAAM,OAAuB,IAAI,GAC9CC,IAAaD,EAAM,OAAuB,IAAI,GAC9CE,IAAcF,EAAM,OAA0B,IAAI,GAClDG,IAAeH,EAAM,OAA0B,IAAI,GACnDI,IAAkBJ,EAAM,OAA4B,IAAI;AAE9DA,SAAAA,EAAM,oBAAoBF,GAAK,OAAO;AAAA,IACpC,OAAOC,EAAW;AAAA,IAClB,OAAOE,EAAW;AAAA,IAClB,QAAQC,EAAY;AAAA,IACpB,SAASC,EAAa;AAAA,IACtB,YAAYC,EAAgB;AAAA,EAAA,EAC5B,GAEFJ,EAAM,UAAU,MAAM;AACpB,QAAI,CAACL,EAAG,cAAe;AACvB,UAAMU,IAAKD,EAAgB;AAC3B,QAAI,CAACC,EAAI;AACT,QAAIC,IAAW,GACXC,IAAM;AACV,UAAMC,IAAW,MAAM;AACrB,MAAI,SAAS,kBAAkBH,MAC7BA,EAAG,MAAA,GACCV,EAAG,oBAAkBU,EAAG,OAAA,IAE9BC,KAAY,GACRA,IAAW,MAAGC,IAAM,sBAAsBC,CAAQ;AAAA,IACxD;AACA,WAAAA,EAAA,GACO,MAAM,qBAAqBD,CAAG;AAAA,EACvC,GAAG,CAACZ,EAAG,eAAeA,EAAG,gBAAgB,CAAC,GAGxCK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKD;AAAA,MACL,WAAU;AAAA,MACV,OAAOP;AAAA,MACP,YAAY,CAACiB,MAAMA,EAAE,eAAA;AAAA,MACrB,aAAa,CAACA,MAAMA,EAAE,eAAA;AAAA,MACtB,QAAQ,CAACA,MAAM;AAEb,YADAA,EAAE,eAAA,GACE,CAACd,EAAG,aAAc;AACtB,cAAMe,IAAOD,EAAE,aAAa,MAAM,CAAC;AACnC,QAAIC,KAAQA,EAAK,KAAK,WAAW,QAAQ,OAAcA,CAAI;AAAA,MAC7D;AAAA,IAAA;AAAA,IAEC,CAACf,EAAG,YAAY,CAACA,EAAG,kBAAkBA,EAAG,gBACxCK,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,qDAAA,GACbA,gBAAAA,EAAA,cAACW,GAAA,EAAQ,WAAU,sCAAA,CAAsC,GACzDX,gBAAAA,EAAA,cAAC,MAAA,EAAG,WAAU,0CAAA,GAA0C,mBAExD,GACAA,gBAAAA,EAAA,cAAC,KAAA,EAAE,WAAU,0BAAA,GAA0B,wGAGvC,GACAA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAASJ;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,MACX;AAAA,IAAA,CAGH;AAAA,IAED,CAACD,EAAG,YAAYA,EAAG,kBAClBK,gBAAAA,EAAA,cAAC,SAAI,WAAU,uDAAA,mCACZY,GAAA,EAAQ,WAAU,0BAAyB,GAC5CZ,gBAAAA,EAAA,cAAC,OAAE,WAAU,UAAA,GAAU,gBAAc,CACvC;AAAA,IAEFA,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKC;AAAA,QACL,WAAWY;AAAA,UACT;AAAA,UACA,CAAClB,EAAG,YAAY;AAAA,QAAA;AAAA,MAClB;AAAA,MAEAK,gBAAAA,EAAA,cAAC,UAAA,EAAO,KAAKE,GAAa,WAAU,6BAA4B;AAAA,MAChEF,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKG;AAAA,UACL,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZH,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKI;AAAA,UACL,MAAM;AAAA,UACN,WAAWS;AAAA,YACT;AAAA,YACA,CAAClB,EAAG,iBAAiB;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,MAEDA,EAAG,kBACFK,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,iGACbA,gBAAAA,EAAA,cAACY,GAAA,EAAQ,WAAU,0BAAyB,GAC5CZ,gBAAAA,EAAA,cAAC,KAAA,EAAE,WAAU,UAAA,GAAU,gBAAc,CACvC;AAAA,IAAA;AAAA,EAEJ;AAGN,CAAC;"}

package/dist/index.es144.js

@@ -0,0 +1,8 @@
+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));
+}
+export {
+  r as StatusBar
+};
+//# sourceMappingURL=index.es144.js.map

package/dist/index.es144.js.map

@@ -0,0 +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;"}

package/dist/index.es145.js

@@ -0,0 +1,59 @@
+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 {
+  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.es145.js.map

package/dist/index.es145.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es145.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;"}