geoiq-frontend-ui-kit 2.0.2 → 2.0.4

package/dist/index.es168.js

@@ -1,94 +1,36 @@
-import e from "react";
-import { Slider as s } from "./index.es30.js";
-import { SingleSelect as r } from "./index.es29.js";
-import { SwatchGrid as c } from "./index.es38.js";
-import { FONTS as n, SHAPES as h } from "./index.es145.js";
-import { ShapeIcons as i } from "./index.es180.js";
-import { ColorPicker as o } from "./index.es181.js";
-import { useImageEditorPortalContainer as p } from "./index.es140.js";
-const x = [
-  { label: "Outline only", value: "stroke" },
-  { label: "Solid fill", value: "fill" }
-], d = [
-  { label: "Marker", value: "round" },
-  { label: "Highlighter", value: "highlight" }
+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.es143.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 f({ ui: t, engine: l }) {
-  const m = p();
-  return /* @__PURE__ */ e.createElement("div", null, t.mode === "text" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Font"), /* @__PURE__ */ e.createElement(
-    r,
+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,
     {
-      items: n,
-      value: t.textFont,
-      onValueChange: l.setTextFont,
-      container: m
-    }
-  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Size"), /* @__PURE__ */ e.createElement(
-    s,
-    {
-      min: 16,
-      max: 200,
-      step: 1,
-      value: [t.textSize],
-      onValueChange: ([a]) => l.setTextSize(a)
-    }
-  )), t.mode === "shape" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Shape"), /* @__PURE__ */ e.createElement(
-    c,
-    {
-      columns: 3,
-      value: t.selectedShapeType,
-      onSelect: l.selectShapeType,
-      items: h.map((a) => ({
-        value: a.id,
-        label: a.name,
-        icon: i[a.id]
-      }))
-    }
-  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Fill style"), /* @__PURE__ */ e.createElement(
-    r,
-    {
-      items: x,
-      value: t.shapeFill,
-      onValueChange: (a) => l.setShapeFill(a),
-      container: m
-    }
-  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Thickness"), /* @__PURE__ */ e.createElement(
-    s,
-    {
-      min: 1,
-      max: 40,
+      min: e.min,
+      max: e.max,
       step: 1,
-      value: [t.shapeWidth],
-      onValueChange: ([a]) => l.setShapeWidth(a)
-    }
-  )), t.mode === "draw" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Brush size"), /* @__PURE__ */ e.createElement(
-    s,
-    {
-      min: 1,
-      max: 60,
-      step: 1,
-      value: [t.brushSize],
-      onValueChange: ([a]) => l.setBrushSize(a)
-    }
-  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Brush style"), /* @__PURE__ */ e.createElement(
-    r,
-    {
-      items: d,
-      value: t.brushStyle,
-      onValueChange: (a) => l.setBrushStyle(a),
-      container: m
+      value: [a[e.key]],
+      onValueChange: ([m]) => l.setAdjustment(e.key, m)
     }
-  )), t.mode === "sticker" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement(
-    c,
+  ))), /* @__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: 3,
-      onSelect: l.addSticker,
-      emptyMessage: /* @__PURE__ */ e.createElement(e.Fragment, null, "No stickers configured — pass a ", /* @__PURE__ */ e.createElement("code", null, "stickers"), " prop with image URLs."),
-      items: t.stickers.map((a) => ({ value: a, thumbnail: a }))
+      columns: 2,
+      value: a.filter,
+      onSelect: (e) => l.setFilter(e),
+      items: r.map((e) => ({ value: e.id, label: e.name }))
     }
-  )), t.mode === "text" && /* @__PURE__ */ e.createElement(o, { value: t.textColor, onChange: l.setTextColor }), t.mode === "shape" && /* @__PURE__ */ e.createElement(o, { value: t.shapeColor, onChange: l.setShapeColor }), t.mode === "draw" && /* @__PURE__ */ e.createElement(o, { value: t.drawColor, onChange: l.setDrawColor }));
+  ));
 }
 export {
-  f as PanelInsert
+  o as PanelAdjust
 };
 //# sourceMappingURL=index.es168.js.map

package/dist/index.es168.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es168.js","sources":["../src/components/organisms/image-editor/components/panel-insert.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Slider } from '@/components/molecules/slider'\nimport { SingleSelect } from '@/components/molecules/single-select'\nimport { SwatchGrid } from '@/components/molecules/swatch-grid'\n\nimport { ImageEditorEngine, ImageEditorUiState } from '../image-editor.types'\nimport { FONTS, SHAPES } from '../picture-studio-engine'\nimport { ShapeIcons } from './shape-icons'\nimport { ColorPicker } from './color-picker'\nimport { useImageEditorPortalContainer } from './portal-context'\n\ninterface PanelInsertProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n}\n\nconst FILL_ITEMS = [\n  { label: 'Outline only', value: 'stroke' },\n  { label: 'Solid fill', value: 'fill' },\n]\nconst BRUSH_STYLE_ITEMS = [\n  { label: 'Marker', value: 'round' },\n  { label: 'Highlighter', value: 'highlight' },\n]\n\nexport function PanelInsert({ ui, engine }: PanelInsertProps) {\n  const container = useImageEditorPortalContainer()\n  return (\n    <div>\n      {ui.mode === 'text' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Font</span>\n          <SingleSelect\n            items={FONTS}\n            value={ui.textFont}\n            onValueChange={engine.setTextFont}\n            container={container}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">Size</span>\n          <Slider\n            min={16}\n            max={200}\n            step={1}\n            value={[ui.textSize]}\n            onValueChange={([v]) => engine.setTextSize(v)}\n          />\n        </div>\n      )}\n\n      {ui.mode === 'shape' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Shape</span>\n          <SwatchGrid\n            columns={3}\n            value={ui.selectedShapeType}\n            onSelect={engine.selectShapeType}\n            items={SHAPES.map((s) => ({\n              value: s.id,\n              label: s.name,\n              icon: ShapeIcons[s.id],\n            }))}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">\n            Fill style\n          </span>\n          <SingleSelect\n            items={FILL_ITEMS}\n            value={ui.shapeFill}\n            onValueChange={(v) => engine.setShapeFill(v as 'stroke' | 'fill')}\n            container={container}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">\n            Thickness\n          </span>\n          <Slider\n            min={1}\n            max={40}\n            step={1}\n            value={[ui.shapeWidth]}\n            onValueChange={([v]) => engine.setShapeWidth(v)}\n          />\n        </div>\n      )}\n\n      {ui.mode === 'draw' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Brush size</span>\n          <Slider\n            min={1}\n            max={60}\n            step={1}\n            value={[ui.brushSize]}\n            onValueChange={([v]) => engine.setBrushSize(v)}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">\n            Brush style\n          </span>\n          <SingleSelect\n            items={BRUSH_STYLE_ITEMS}\n            value={ui.brushStyle}\n            onValueChange={(v) =>\n              engine.setBrushStyle(v as 'round' | 'highlight')\n            }\n            container={container}\n          />\n        </div>\n      )}\n\n      {ui.mode === 'sticker' && (\n        <div className=\"mb-3.5\">\n          <SwatchGrid\n            columns={3}\n            onSelect={engine.addSticker}\n            emptyMessage={\n              <>\n                No stickers configured — pass a <code>stickers</code> prop with\n                image URLs.\n              </>\n            }\n            items={ui.stickers.map((src) => ({ value: src, thumbnail: src }))}\n          />\n        </div>\n      )}\n\n      {ui.mode === 'text' && (\n        <ColorPicker value={ui.textColor} onChange={engine.setTextColor} />\n      )}\n      {ui.mode === 'shape' && (\n        <ColorPicker value={ui.shapeColor} onChange={engine.setShapeColor} />\n      )}\n      {ui.mode === 'draw' && (\n        <ColorPicker value={ui.drawColor} onChange={engine.setDrawColor} />\n      )}\n    </div>\n  )\n}\n"],"names":["FILL_ITEMS","BRUSH_STYLE_ITEMS","PanelInsert","ui","engine","container","useImageEditorPortalContainer","React","SingleSelect","FONTS","Slider","v","SwatchGrid","SHAPES","s","ShapeIcons","src","ColorPicker"],"mappings":"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"}
+{"version":3,"file":"index.es168.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;"}

package/dist/index.es169.js

@@ -1,120 +1,36 @@
-import { Trash2 as c } from "lucide-react";
 import e from "react";
-import { Button as m } from "./index.es9.js";
-import { Textarea as o } from "./index.es16.js";
-import { Slider as n } from "./index.es30.js";
-import { SingleSelect as s } from "./index.es29.js";
-import { FONTS as i } from "./index.es145.js";
-import { ColorPicker as x } from "./index.es181.js";
-import { useImageEditorPortalContainer as p } from "./index.es140.js";
-const u = [
-  { label: "Outline only", value: "stroke" },
-  { label: "Solid fill", value: "fill" }
-];
-function C({ selected: t, engine: a }) {
-  const r = p();
-  return /* @__PURE__ */ e.createElement("div", null, t.type === "text" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Text"), /* @__PURE__ */ e.createElement(
-    o,
-    {
-      className: "min-h-[52px]",
-      value: t.text ?? "",
-      onChange: (l) => a.setSelectedText(l.target.value)
-    }
-  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Font"), /* @__PURE__ */ e.createElement(
-    s,
-    {
-      items: i,
-      value: t.font ?? "",
-      onValueChange: a.setSelectedFont,
-      container: r
-    }
-  ), /* @__PURE__ */ e.createElement("div", { className: "mb-1 mt-2.5 flex justify-between text-xs text-light-4" }, /* @__PURE__ */ e.createElement("span", null, "Size"), /* @__PURE__ */ e.createElement("span", null, t.size, "px")), /* @__PURE__ */ e.createElement(
-    n,
-    {
-      min: 10,
-      max: 240,
-      step: 1,
-      value: [t.size ?? 24],
-      onValueChange: ([l]) => a.setSelectedTextSize(l)
-    }
-  ), /* @__PURE__ */ e.createElement("div", { className: "mb-1 mt-2.5 flex justify-between text-xs text-light-4" }, /* @__PURE__ */ e.createElement("span", null, "Box size"), /* @__PURE__ */ e.createElement("span", null, t.boxWidth, "px")), /* @__PURE__ */ e.createElement(
-    n,
-    {
-      min: 20,
-      max: 2e3,
-      step: 1,
-      value: [t.boxWidth ?? 200],
-      onValueChange: ([l]) => a.setSelectedBoxWidth(l)
-    }
-  )), t.type === "shape" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Fill style"), /* @__PURE__ */ e.createElement(
-    s,
-    {
-      items: u,
-      value: t.fill ?? "stroke",
-      onValueChange: (l) => a.setSelectedShapeFill(l),
-      container: r
-    }
-  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Thickness"), /* @__PURE__ */ e.createElement(
-    n,
-    {
-      min: 1,
-      max: 40,
-      step: 1,
-      value: [t.width ?? 6],
-      onValueChange: ([l]) => a.setSelectedWidth(l)
-    }
-  )), t.type === "stroke" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Brush size"), /* @__PURE__ */ e.createElement(
-    n,
-    {
-      min: 1,
-      max: 60,
-      step: 1,
-      value: [t.width ?? 8],
-      onValueChange: ([l]) => a.setSelectedWidth(l)
-    }
-  )), t.type !== "sticker" && /* @__PURE__ */ e.createElement(
-    x,
-    {
-      value: t.color ?? "#d24b2f",
-      onChange: a.setSelectedColor
-    }
-  ), /* @__PURE__ */ e.createElement("div", { className: "my-3.5 h-px bg-neutral-1" }), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ e.createElement(
-    m,
-    {
-      variant: "secondary",
-      size: "sm",
-      onClick: a.bringSelectedToFront
-    },
-    "Bring to front"
-  ), /* @__PURE__ */ e.createElement(
-    m,
-    {
-      variant: "secondary",
-      size: "sm",
-      onClick: a.sendSelectedToBack
-    },
-    "Send to back"
-  ), /* @__PURE__ */ e.createElement(
-    m,
-    {
-      variant: "secondary",
-      size: "sm",
-      onClick: a.duplicateSelected
+import { SingleSelect as l } from "./index.es29.js";
+import { CROP_RATIOS as o } from "./index.es143.js";
+import { useImageEditorPortalContainer as n } from "./index.es137.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"
     },
-    "Duplicate"
+    "Apply crop"
   ), /* @__PURE__ */ e.createElement(
-    m,
+    "button",
     {
-      variant: "secondary",
-      size: "sm",
-      onClick: a.deleteSelected,
-      prefixIcon: /* @__PURE__ */ e.createElement(c, { className: "h-4 w-4" }),
-      className: "text-danger-1"
+      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"
     },
-    "Delete layer"
-  )));
+    "Cancel"
+  ));
 }
 export {
-  C as PanelSelected
+  s as PanelCrop
 };
 //# sourceMappingURL=index.es169.js.map

package/dist/index.es169.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es169.js","sources":["../src/components/organisms/image-editor/components/panel-selected.tsx"],"sourcesContent":["import { Trash2 } from 'lucide-react'\nimport React from 'react'\n\nimport { Button } from '@/components/atoms/button'\nimport { Textarea } from '@/components/atoms/textarea'\nimport { Slider } from '@/components/molecules/slider'\nimport { SingleSelect } from '@/components/molecules/single-select'\n\nimport {\n  ImageEditorEngine,\n  ImageEditorSelectedLayer,\n} from '../image-editor.types'\nimport { FONTS } from '../picture-studio-engine'\nimport { ColorPicker } from './color-picker'\nimport { useImageEditorPortalContainer } from './portal-context'\n\ninterface PanelSelectedProps {\n  selected: ImageEditorSelectedLayer\n  engine: ImageEditorEngine\n}\n\nconst FILL_ITEMS = [\n  { label: 'Outline only', value: 'stroke' },\n  { label: 'Solid fill', value: 'fill' },\n]\n\nexport function PanelSelected({ selected, engine }: PanelSelectedProps) {\n  const container = useImageEditorPortalContainer()\n  return (\n    <div>\n      {selected.type === 'text' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Text</span>\n          <Textarea\n            className=\"min-h-[52px]\"\n            value={selected.text ?? ''}\n            onChange={(e) => engine.setSelectedText(e.target.value)}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">Font</span>\n          <SingleSelect\n            items={FONTS}\n            value={selected.font ?? ''}\n            onValueChange={engine.setSelectedFont}\n            container={container}\n          />\n          <div className=\"mb-1 mt-2.5 flex justify-between text-xs text-light-4\">\n            <span>Size</span>\n            <span>{selected.size}px</span>\n          </div>\n          <Slider\n            min={10}\n            max={240}\n            step={1}\n            value={[selected.size ?? 24]}\n            onValueChange={([v]) => engine.setSelectedTextSize(v)}\n          />\n          <div className=\"mb-1 mt-2.5 flex justify-between text-xs text-light-4\">\n            <span>Box size</span>\n            <span>{selected.boxWidth}px</span>\n          </div>\n          <Slider\n            min={20}\n            max={2000}\n            step={1}\n            value={[selected.boxWidth ?? 200]}\n            onValueChange={([v]) => engine.setSelectedBoxWidth(v)}\n          />\n        </div>\n      )}\n\n      {selected.type === 'shape' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Fill style</span>\n          <SingleSelect\n            items={FILL_ITEMS}\n            value={selected.fill ?? 'stroke'}\n            onValueChange={(v) =>\n              engine.setSelectedShapeFill(v as 'stroke' | 'fill')\n            }\n            container={container}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">\n            Thickness\n          </span>\n          <Slider\n            min={1}\n            max={40}\n            step={1}\n            value={[selected.width ?? 6]}\n            onValueChange={([v]) => engine.setSelectedWidth(v)}\n          />\n        </div>\n      )}\n\n      {selected.type === 'stroke' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Brush size</span>\n          <Slider\n            min={1}\n            max={60}\n            step={1}\n            value={[selected.width ?? 8]}\n            onValueChange={([v]) => engine.setSelectedWidth(v)}\n          />\n        </div>\n      )}\n\n      {selected.type !== 'sticker' && (\n        <ColorPicker\n          value={selected.color ?? '#d24b2f'}\n          onChange={engine.setSelectedColor}\n        />\n      )}\n\n      <div className=\"my-3.5 h-px bg-neutral-1\" />\n\n      <div className=\"flex flex-col gap-2\">\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          onClick={engine.bringSelectedToFront}\n        >\n          Bring to front\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          onClick={engine.sendSelectedToBack}\n        >\n          Send to back\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          onClick={engine.duplicateSelected}\n        >\n          Duplicate\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          onClick={engine.deleteSelected}\n          prefixIcon={<Trash2 className=\"h-4 w-4\" />}\n          className=\"text-danger-1\"\n        >\n          Delete layer\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["FILL_ITEMS","PanelSelected","selected","engine","container","useImageEditorPortalContainer","React","Textarea","e","SingleSelect","FONTS","Slider","v","ColorPicker","Button","Trash2"],"mappings":"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"}
+{"version":3,"file":"index.es169.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;"}