geoiq-frontend-ui-kit 2.0.2 → 2.0.4

package/dist/index.es138.js

@@ -1,28 +1,26 @@
-import { cva as e } from "class-variance-authority";
-const t = e(
-  "w-auto min-w-[50px] h-5 flex items-center justify-center gap-2 px-1 py-0.5 rounded-[4px]",
-  {
-    variants: {
-      trend: {
-        1: "bg-success-1 border border-success-1",
-        "-1": "bg-danger-1 border border-danger-1",
-        0: "",
-        null: ""
-      }
-    }
-  }
-), s = e("text-sm", {
-  variants: {
-    trend: {
-      1: "text-success-1",
-      "-1": "text-danger-1",
-      0: "",
-      null: ""
-    }
-  }
-});
+import t from "react";
+import { LayersList as l } from "./index.es167.js";
+import { PanelAdjust as o } from "./index.es168.js";
+import { PanelCrop as s } from "./index.es169.js";
+import { PanelInsert as m } from "./index.es170.js";
+import { PanelSelected as c } from "./index.es171.js";
+import { SavedLayersList as d } from "./index.es172.js";
+const n = {
+  select: {
+    title: "Adjust & layers",
+    sub: "Adjust the photo, or click a layer"
+  },
+  crop: { title: "Crop", sub: "Trim to a region" },
+  text: { title: "Add text", sub: "Click on the image to place" },
+  draw: { title: "Draw", sub: "Freehand — becomes a layer" },
+  shape: { title: "Shape", sub: "Drag to draw — becomes a layer" },
+  sticker: { title: "Stickers", sub: "Click a sticker to drop it in" }
+};
+function k({ ui: e, engine: a }) {
+  const r = n[e.mode];
+  return /* @__PURE__ */ t.createElement("aside", { className: "image-editor-panel shrink-0 touch-pan-y overflow-y-auto overscroll-y-contain bg-light-3 p-4" }, /* @__PURE__ */ t.createElement("h3", { className: "mb-1 text-base font-semibold" }, r.title), /* @__PURE__ */ t.createElement("p", { className: "mb-3.5 text-xs text-light-4" }, r.sub), e.mode === "select" && e.selected == null && /* @__PURE__ */ t.createElement(o, { adjustments: e.adjustments, engine: a }), e.mode === "select" && e.selected != null && /* @__PURE__ */ t.createElement(c, { selected: e.selected, engine: a }), e.mode === "crop" && /* @__PURE__ */ t.createElement(s, { ui: e, engine: a }), (e.mode === "text" || e.mode === "draw" || e.mode === "shape" || e.mode === "sticker") && /* @__PURE__ */ t.createElement(m, { ui: e, engine: a }), /* @__PURE__ */ t.createElement(d, { ui: e, engine: a }), e.hasImage && /* @__PURE__ */ t.createElement(l, { ui: e, engine: a }));
+}
 export {
-  t as trendBoxStyles,
-  s as trendValueStyles
+  k as Panel
 };
 //# sourceMappingURL=index.es138.js.map

package/dist/index.es138.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es138.js","sources":["../src/components/ui/report-snippet-view/report-snippet-view-style.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const trendBoxStyles = cva(\n  'w-auto min-w-[50px] h-5 flex items-center justify-center gap-2 px-1 py-0.5 rounded-[4px]',\n  {\n    variants: {\n      trend: {\n        '1': 'bg-success-1 border border-success-1',\n        '-1': 'bg-danger-1 border border-danger-1',\n        '0': '',\n        null: '',\n      },\n    },\n  }\n)\n\nexport const trendValueStyles = cva('text-sm', {\n  variants: {\n    trend: {\n      '1': 'text-success-1',\n      '-1': 'text-danger-1',\n      '0': '',\n      null: '',\n    },\n  },\n})\n"],"names":["trendBoxStyles","cva","trendValueStyles"],"mappings":";AAEO,MAAMA,IAAiBC;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAK;AAAA,QACL,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ,GAEaC,IAAmBD,EAAI,WAAW;AAAA,EAC7C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAK;AAAA,MACL,MAAM;AAAA,MACN,GAAK;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,CAAC;"}
+{"version":3,"file":"index.es138.js","sources":["../src/components/organisms/image-editor/components/panel.tsx"],"sourcesContent":["import React from 'react'\n\nimport {\n  ImageEditorEngine,\n  ImageEditorMode,\n  ImageEditorUiState,\n} from '../image-editor.types'\nimport { LayersList } from './layers-list'\nimport { PanelAdjust } from './panel-adjust'\nimport { PanelCrop } from './panel-crop'\nimport { PanelInsert } from './panel-insert'\nimport { PanelSelected } from './panel-selected'\nimport { SavedLayersList } from './saved-layers-list'\n\ninterface PanelProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n}\n\nconst PANEL_HEADERS: Record<ImageEditorMode, { title: string; sub: string }> = {\n  select: {\n    title: 'Adjust & layers',\n    sub: 'Adjust the photo, or click a layer',\n  },\n  crop: { title: 'Crop', sub: 'Trim to a region' },\n  text: { title: 'Add text', sub: 'Click on the image to place' },\n  draw: { title: 'Draw', sub: 'Freehand — becomes a layer' },\n  shape: { title: 'Shape', sub: 'Drag to draw — becomes a layer' },\n  sticker: { title: 'Stickers', sub: 'Click a sticker to drop it in' },\n}\n\nexport function Panel({ ui, engine }: PanelProps) {\n  const header = PANEL_HEADERS[ui.mode]\n\n  return (\n    <aside className=\"image-editor-panel shrink-0 touch-pan-y overflow-y-auto overscroll-y-contain bg-light-3 p-4\">\n      <h3 className=\"mb-1 text-base font-semibold\">{header.title}</h3>\n      <p className=\"mb-3.5 text-xs text-light-4\">{header.sub}</p>\n\n      {ui.mode === 'select' && ui.selected == null && (\n        <PanelAdjust adjustments={ui.adjustments} engine={engine} />\n      )}\n      {ui.mode === 'select' && ui.selected != null && (\n        <PanelSelected selected={ui.selected} engine={engine} />\n      )}\n      {ui.mode === 'crop' && <PanelCrop ui={ui} engine={engine} />}\n      {(ui.mode === 'text' ||\n        ui.mode === 'draw' ||\n        ui.mode === 'shape' ||\n        ui.mode === 'sticker') && <PanelInsert ui={ui} engine={engine} />}\n\n      <SavedLayersList ui={ui} engine={engine} />\n\n      {ui.hasImage && <LayersList ui={ui} engine={engine} />}\n    </aside>\n  )\n}\n"],"names":["PANEL_HEADERS","Panel","ui","engine","header","React","PanelAdjust","PanelSelected","PanelCrop","PanelInsert","SavedLayersList","LayersList"],"mappings":";;;;;;;AAmBA,MAAMA,IAAyE;AAAA,EAC7E,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,MAAM,EAAE,OAAO,QAAQ,KAAK,mBAAA;AAAA,EAC5B,MAAM,EAAE,OAAO,YAAY,KAAK,8BAAA;AAAA,EAChC,MAAM,EAAE,OAAO,QAAQ,KAAK,6BAAA;AAAA,EAC5B,OAAO,EAAE,OAAO,SAAS,KAAK,iCAAA;AAAA,EAC9B,SAAS,EAAE,OAAO,YAAY,KAAK,gCAAA;AACrC;AAEO,SAASC,EAAM,EAAE,IAAAC,GAAI,QAAAC,KAAsB;AAChD,QAAMC,IAASJ,EAAcE,EAAG,IAAI;AAEpC,yCACG,SAAA,EAAM,WAAU,8FAAA,GACfG,gBAAAA,EAAA,cAAC,QAAG,WAAU,+BAAA,GAAgCD,EAAO,KAAM,GAC3DC,gBAAAA,EAAA,cAAC,KAAA,EAAE,WAAU,iCAA+BD,EAAO,GAAI,GAEtDF,EAAG,SAAS,YAAYA,EAAG,YAAY,QACtCG,gBAAAA,EAAA,cAACC,GAAA,EAAY,aAAaJ,EAAG,aAAa,QAAAC,GAAgB,GAE3DD,EAAG,SAAS,YAAYA,EAAG,YAAY,wCACrCK,GAAA,EAAc,UAAUL,EAAG,UAAU,QAAAC,GAAgB,GAEvDD,EAAG,SAAS,0CAAWM,GAAA,EAAU,IAAAN,GAAQ,QAAAC,EAAA,CAAgB,IACxDD,EAAG,SAAS,UACZA,EAAG,SAAS,UACZA,EAAG,SAAS,WACZA,EAAG,SAAS,cAAcG,gBAAAA,EAAA,cAACI,GAAA,EAAY,IAAAP,GAAQ,QAAAC,GAAgB,GAEjEE,gBAAAA,EAAA,cAACK,GAAA,EAAgB,IAAAR,GAAQ,QAAAC,EAAA,CAAgB,GAExCD,EAAG,4CAAaS,GAAA,EAAW,IAAAT,GAAQ,QAAAC,GAAgB,CACtD;AAEJ;"}

package/dist/index.es139.js

@@ -1,19 +1,173 @@
-import { cva as r } from "class-variance-authority";
-import { StepItemStatus as e } from "./index.es31.js";
-const o = r(
-  "h-8 w-8 border-2 flex items-center justify-center rounded-full cursor-pointer trasnition-all",
-  {
-    variants: {
-      variant: {
-        pending: "border-neutral-2 ",
-        current: "bg-primary-1 border-primary-2 hover:bg-hover-t1 active:bg-click-t1",
-        completed: "bg-rest-p1 hover:bg-hover-p1 active:bg-click-p1 border-none"
-      }
+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"
     },
-    defaultVariants: { variant: e.PENDING }
-  }
-);
+    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)
+    }
+  )));
+}
 export {
-  o as StepItemVariants
+  F as Ribbon
 };
 //# sourceMappingURL=index.es139.js.map

package/dist/index.es139.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es139.js","sources":["../src/components/molecules/stepper/stepper.styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport { StepItemStatus } from './stepper.type'\nexport const StepItemVariants = cva(\n  'h-8 w-8 border-2 flex items-center justify-center rounded-full cursor-pointer trasnition-all',\n  {\n    variants: {\n      variant: {\n        pending: 'border-neutral-2 ',\n        current:\n          'bg-primary-1 border-primary-2 hover:bg-hover-t1 active:bg-click-t1',\n        completed:\n          'bg-rest-p1 hover:bg-hover-p1 active:bg-click-p1 border-none',\n      },\n    },\n    defaultVariants: { variant: StepItemStatus.PENDING },\n  }\n)\n"],"names":["StepItemVariants","cva","StepItemStatus"],"mappings":";;AAEO,MAAMA,IAAmBC;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB,EAAE,SAASC,EAAe,QAAA;AAAA,EAAQ;AAEvD;"}
+{"version":3,"file":"index.es139.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.es140.js

@@ -1,10 +1,85 @@
-import { createContext as t, useContext as o } from "react";
-const e = t(null);
-function n() {
-  return o(e);
-}
+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 {
-  e as ImageEditorPortalContext,
-  n as useImageEditorPortalContainer
+  R as Stage
 };
 //# sourceMappingURL=index.es140.js.map

package/dist/index.es140.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es140.js","sources":["../src/components/organisms/image-editor/components/portal-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport const ImageEditorPortalContext = createContext<HTMLElement | null>(null)\n\nexport function useImageEditorPortalContainer() {\n  return useContext(ImageEditorPortalContext)\n}\n"],"names":["ImageEditorPortalContext","createContext","useImageEditorPortalContainer","useContext"],"mappings":";AAEO,MAAMA,IAA2BC,EAAkC,IAAI;AAEvE,SAASC,IAAgC;AAC9C,SAAOC,EAAWH,CAAwB;AAC5C;"}
+{"version":3,"file":"index.es140.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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"}

package/dist/index.es141.js

@@ -1,25 +1,77 @@
-import t from "react";
-import { LayersList as l } from "./index.es165.js";
-import { PanelAdjust as o } from "./index.es166.js";
-import { PanelCrop as s } from "./index.es167.js";
-import { PanelInsert as m } from "./index.es168.js";
-import { PanelSelected as c } from "./index.es169.js";
-const d = {
-  select: {
-    title: "Adjust & layers",
-    sub: "Adjust the photo, or click a layer"
-  },
-  crop: { title: "Crop", sub: "Trim to a region" },
-  text: { title: "Add text", sub: "Click on the image to place" },
-  draw: { title: "Draw", sub: "Freehand — becomes a layer" },
-  shape: { title: "Shape", sub: "Drag to draw — becomes a layer" },
-  sticker: { title: "Stickers", sub: "Click a sticker to drop it in" }
-};
-function f({ ui: e, engine: a }) {
-  const r = d[e.mode];
-  return /* @__PURE__ */ t.createElement("aside", { className: "image-editor-panel shrink-0 touch-pan-y overflow-y-auto overscroll-y-contain bg-light-3 p-4" }, /* @__PURE__ */ t.createElement("h3", { className: "mb-1 text-base font-semibold" }, r.title), /* @__PURE__ */ t.createElement("p", { className: "mb-3.5 text-xs text-light-4" }, r.sub), e.mode === "select" && e.selected == null && /* @__PURE__ */ t.createElement(o, { adjustments: e.adjustments, engine: a }), e.mode === "select" && e.selected != null && /* @__PURE__ */ t.createElement(c, { selected: e.selected, engine: a }), e.mode === "crop" && /* @__PURE__ */ t.createElement(s, { ui: e, engine: a }), (e.mode === "text" || e.mode === "draw" || e.mode === "shape" || e.mode === "sticker") && /* @__PURE__ */ t.createElement(m, { ui: e, engine: a }), e.hasImage && /* @__PURE__ */ t.createElement(l, { ui: e, engine: a }));
+import { Spline as r, CornerUpLeft as c, Check as m, X as p } from "lucide-react";
+import e from "react";
+function u({ ui: a, engine: t }) {
+  if (!a.poly?.active) return null;
+  const { pointCount: n, canFinish: l, canClose: i } = a.poly;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: "pointer-events-none absolute inset-x-0 bottom-3 z-20 flex justify-center px-3",
+      role: "toolbar",
+      "aria-label": "Multi-point line controls"
+    },
+    /* @__PURE__ */ e.createElement("div", { className: "pointer-events-auto flex max-w-full items-center gap-1 overflow-x-auto rounded-xl bg-dark-2/95 p-1.5 shadow-lg backdrop-blur" }, /* @__PURE__ */ e.createElement("span", { className: "flex shrink-0 items-center gap-1.5 px-2 text-xs font-medium text-white/70" }, /* @__PURE__ */ e.createElement(r, { className: "h-3.5 w-3.5" }), n, " ", n === 1 ? "point" : "points"), /* @__PURE__ */ e.createElement("span", { className: "h-6 w-px shrink-0 bg-white/15" }), /* @__PURE__ */ e.createElement(
+      o,
+      {
+        onClick: t.undoLinePoint,
+        icon: /* @__PURE__ */ e.createElement(c, { className: "h-4 w-4" }),
+        label: "Undo point"
+      }
+    ), /* @__PURE__ */ e.createElement(
+      o,
+      {
+        onClick: t.closeLine,
+        icon: /* @__PURE__ */ e.createElement(r, { className: "h-4 w-4" }),
+        label: "Close shape",
+        disabled: !i
+      }
+    ), /* @__PURE__ */ e.createElement(
+      o,
+      {
+        onClick: t.finishLine,
+        icon: /* @__PURE__ */ e.createElement(m, { className: "h-4 w-4" }),
+        label: "Done",
+        disabled: !l,
+        primary: !0
+      }
+    ), /* @__PURE__ */ e.createElement(
+      o,
+      {
+        onClick: t.cancelLine,
+        icon: /* @__PURE__ */ e.createElement(p, { className: "h-4 w-4" }),
+        label: "Cancel"
+      }
+    ))
+  );
+}
+function o({
+  onClick: a,
+  icon: t,
+  label: n,
+  disabled: l,
+  primary: i
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      onPointerDown: (s) => s.stopPropagation(),
+      onClick: (s) => {
+        s.stopPropagation(), a();
+      },
+      disabled: l,
+      "aria-label": n,
+      className: [
+        "flex min-h-9 shrink-0 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium transition-colors",
+        "disabled:pointer-events-none disabled:opacity-40",
+        i ? "bg-rest-p1 text-white hover:bg-hover-p1" : "text-white/85 hover:bg-white/10"
+      ].join(" ")
+    },
+    t,
+    /* @__PURE__ */ e.createElement("span", { className: "hidden sm:inline" }, n)
+  );
 }
 export {
-  f as Panel
+  u as LineSessionBar
 };
 //# sourceMappingURL=index.es141.js.map

package/dist/index.es141.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es141.js","sources":["../src/components/organisms/image-editor/components/panel.tsx"],"sourcesContent":["import React from 'react'\n\nimport {\n  ImageEditorEngine,\n  ImageEditorMode,\n  ImageEditorUiState,\n} from '../image-editor.types'\nimport { LayersList } from './layers-list'\nimport { PanelAdjust } from './panel-adjust'\nimport { PanelCrop } from './panel-crop'\nimport { PanelInsert } from './panel-insert'\nimport { PanelSelected } from './panel-selected'\n\ninterface PanelProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n}\n\nconst PANEL_HEADERS: Record<ImageEditorMode, { title: string; sub: string }> = {\n  select: {\n    title: 'Adjust & layers',\n    sub: 'Adjust the photo, or click a layer',\n  },\n  crop: { title: 'Crop', sub: 'Trim to a region' },\n  text: { title: 'Add text', sub: 'Click on the image to place' },\n  draw: { title: 'Draw', sub: 'Freehand — becomes a layer' },\n  shape: { title: 'Shape', sub: 'Drag to draw — becomes a layer' },\n  sticker: { title: 'Stickers', sub: 'Click a sticker to drop it in' },\n}\n\nexport function Panel({ ui, engine }: PanelProps) {\n  const header = PANEL_HEADERS[ui.mode]\n\n  return (\n    <aside className=\"image-editor-panel shrink-0 touch-pan-y overflow-y-auto overscroll-y-contain bg-light-3 p-4\">\n      <h3 className=\"mb-1 text-base font-semibold\">{header.title}</h3>\n      <p className=\"mb-3.5 text-xs text-light-4\">{header.sub}</p>\n\n      {ui.mode === 'select' && ui.selected == null && (\n        <PanelAdjust adjustments={ui.adjustments} engine={engine} />\n      )}\n      {ui.mode === 'select' && ui.selected != null && (\n        <PanelSelected selected={ui.selected} engine={engine} />\n      )}\n      {ui.mode === 'crop' && <PanelCrop ui={ui} engine={engine} />}\n      {(ui.mode === 'text' ||\n        ui.mode === 'draw' ||\n        ui.mode === 'shape' ||\n        ui.mode === 'sticker') && <PanelInsert ui={ui} engine={engine} />}\n\n      {ui.hasImage && <LayersList ui={ui} engine={engine} />}\n    </aside>\n  )\n}\n"],"names":["PANEL_HEADERS","Panel","ui","engine","header","React","PanelAdjust","PanelSelected","PanelCrop","PanelInsert","LayersList"],"mappings":";;;;;;AAkBA,MAAMA,IAAyE;AAAA,EAC7E,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP,MAAM,EAAE,OAAO,QAAQ,KAAK,mBAAA;AAAA,EAC5B,MAAM,EAAE,OAAO,YAAY,KAAK,8BAAA;AAAA,EAChC,MAAM,EAAE,OAAO,QAAQ,KAAK,6BAAA;AAAA,EAC5B,OAAO,EAAE,OAAO,SAAS,KAAK,iCAAA;AAAA,EAC9B,SAAS,EAAE,OAAO,YAAY,KAAK,gCAAA;AACrC;AAEO,SAASC,EAAM,EAAE,IAAAC,GAAI,QAAAC,KAAsB;AAChD,QAAMC,IAASJ,EAAcE,EAAG,IAAI;AAEpC,SACEG,gBAAAA,EAAA,cAAC,SAAA,EAAM,WAAU,iIACd,MAAA,EAAG,WAAU,+BAAA,GAAgCD,EAAO,KAAM,GAC3DC,gBAAAA,EAAA,cAAC,KAAA,EAAE,WAAU,iCAA+BD,EAAO,GAAI,GAEtDF,EAAG,SAAS,YAAYA,EAAG,YAAY,wCACrCI,GAAA,EAAY,aAAaJ,EAAG,aAAa,QAAAC,GAAgB,GAE3DD,EAAG,SAAS,YAAYA,EAAG,YAAY,QACtCG,gBAAAA,EAAA,cAACE,GAAA,EAAc,UAAUL,EAAG,UAAU,QAAAC,GAAgB,GAEvDD,EAAG,SAAS,UAAUG,gBAAAA,EAAA,cAACG,GAAA,EAAU,IAAAN,GAAQ,QAAAC,EAAA,CAAgB,IACxDD,EAAG,SAAS,UACZA,EAAG,SAAS,UACZA,EAAG,SAAS,WACZA,EAAG,SAAS,8CAAeO,GAAA,EAAY,IAAAP,GAAQ,QAAAC,GAAgB,GAEhED,EAAG,YAAYG,gBAAAA,EAAA,cAACK,GAAA,EAAW,IAAAR,GAAQ,QAAAC,GAAgB,CACtD;AAEJ;"}
+{"version":3,"file":"index.es141.js","sources":["../src/components/organisms/image-editor/components/line-session-bar.tsx"],"sourcesContent":["import { Check, CornerUpLeft, Spline, X } from 'lucide-react'\nimport React from 'react'\n\nimport { ImageEditorEngine, ImageEditorUiState } from '../image-editor.types'\n\ninterface LineSessionBarProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n}\n\n/**\n * On-screen controls for a live multi-point line.\n *\n * Touch has no Shift, Backspace, Enter or Escape, double-tap is unreliable\n * (and often zooms), and there is no hover to preview with -- so on a phone\n * these buttons are the *only* way to undo a corner or finish a line. They\n * show on every device rather than only small screens, because the same\n * ambiguity (\"how do I stop drawing?\") exists with a mouse.\n *\n * Rendered over the stage, bottom-centre, clear of the toolbar and panel.\n */\nexport function LineSessionBar({ ui, engine }: LineSessionBarProps) {\n  if (!ui.poly?.active) return null\n  const { pointCount, canFinish, canClose } = ui.poly\n\n  return (\n    <div\n      className=\"pointer-events-none absolute inset-x-0 bottom-3 z-20 flex justify-center px-3\"\n      role=\"toolbar\"\n      aria-label=\"Multi-point line controls\"\n    >\n      <div className=\"pointer-events-auto flex max-w-full items-center gap-1 overflow-x-auto rounded-xl bg-dark-2/95 p-1.5 shadow-lg backdrop-blur\">\n        <span className=\"flex shrink-0 items-center gap-1.5 px-2 text-xs font-medium text-white/70\">\n          <Spline className=\"h-3.5 w-3.5\" />\n          {pointCount} {pointCount === 1 ? 'point' : 'points'}\n        </span>\n\n        <span className=\"h-6 w-px shrink-0 bg-white/15\" />\n\n        <SessionButton\n          onClick={engine.undoLinePoint}\n          icon={<CornerUpLeft className=\"h-4 w-4\" />}\n          label=\"Undo point\"\n        />\n        <SessionButton\n          onClick={engine.closeLine}\n          icon={<Spline className=\"h-4 w-4\" />}\n          label=\"Close shape\"\n          disabled={!canClose}\n        />\n        <SessionButton\n          onClick={engine.finishLine}\n          icon={<Check className=\"h-4 w-4\" />}\n          label=\"Done\"\n          disabled={!canFinish}\n          primary\n        />\n        <SessionButton\n          onClick={engine.cancelLine}\n          icon={<X className=\"h-4 w-4\" />}\n          label=\"Cancel\"\n        />\n      </div>\n    </div>\n  )\n}\n\ninterface SessionButtonProps {\n  onClick: () => void\n  icon: React.ReactNode\n  label: string\n  disabled?: boolean\n  primary?: boolean\n}\n\nfunction SessionButton({\n  onClick,\n  icon,\n  label,\n  disabled,\n  primary,\n}: SessionButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      // Pointer events would reach the canvas underneath and place a stray\n      // point, so the press is stopped here before it can bubble to the stage.\n      onPointerDown={(e) => e.stopPropagation()}\n      onClick={(e) => {\n        e.stopPropagation()\n        onClick()\n      }}\n      disabled={disabled}\n      aria-label={label}\n      className={[\n        'flex min-h-9 shrink-0 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium transition-colors',\n        'disabled:pointer-events-none disabled:opacity-40',\n        primary\n          ? 'bg-rest-p1 text-white hover:bg-hover-p1'\n          : 'text-white/85 hover:bg-white/10',\n      ].join(' ')}\n    >\n      {icon}\n      <span className=\"hidden sm:inline\">{label}</span>\n    </button>\n  )\n}\n"],"names":["LineSessionBar","ui","engine","pointCount","canFinish","canClose","React","Spline","SessionButton","CornerUpLeft","Check","X","onClick","icon","label","disabled","primary","e"],"mappings":";;AAqBO,SAASA,EAAe,EAAE,IAAAC,GAAI,QAAAC,KAA+B;AAClE,MAAI,CAACD,EAAG,MAAM,OAAQ,QAAO;AAC7B,QAAM,EAAE,YAAAE,GAAY,WAAAC,GAAW,UAAAC,EAAA,IAAaJ,EAAG;AAE/C,SACEK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,IAAA;AAAA,IAEXA,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,+HAAA,GACbA,gBAAAA,EAAA,cAAC,UAAK,WAAU,4EAAA,GACdA,gBAAAA,EAAA,cAACC,GAAA,EAAO,WAAU,cAAA,CAAc,GAC/BJ,GAAW,KAAEA,MAAe,IAAI,UAAU,QAC7C,GAEAG,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,gCAAA,CAAgC,GAEhDA,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAASN,EAAO;AAAA,QAChB,MAAMI,gBAAAA,EAAA,cAACG,GAAA,EAAa,WAAU,WAAU;AAAA,QACxC,OAAM;AAAA,MAAA;AAAA,IAAA,GAERH,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAASN,EAAO;AAAA,QAChB,MAAMI,gBAAAA,EAAA,cAACC,GAAA,EAAO,WAAU,WAAU;AAAA,QAClC,OAAM;AAAA,QACN,UAAU,CAACF;AAAA,MAAA;AAAA,IAAA,GAEbC,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAASN,EAAO;AAAA,QAChB,MAAMI,gBAAAA,EAAA,cAACI,GAAA,EAAM,WAAU,WAAU;AAAA,QACjC,OAAM;AAAA,QACN,UAAU,CAACN;AAAA,QACX,SAAO;AAAA,MAAA;AAAA,IAAA,GAETE,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAASN,EAAO;AAAA,QAChB,MAAMI,gBAAAA,EAAA,cAACK,GAAA,EAAE,WAAU,WAAU;AAAA,QAC7B,OAAM;AAAA,MAAA;AAAA,IAAA,CAEV;AAAA,EAAA;AAGN;AAUA,SAASH,EAAc;AAAA,EACrB,SAAAI;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AACF,GAAuB;AACrB,SACEV,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MAGL,eAAe,CAACW,MAAMA,EAAE,gBAAA;AAAA,MACxB,SAAS,CAACA,MAAM;AACd,QAAAA,EAAE,gBAAA,GACFL,EAAA;AAAA,MACF;AAAA,MACA,UAAAG;AAAA,MACA,cAAYD;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACAE,IACI,4CACA;AAAA,MAAA,EACJ,KAAK,GAAG;AAAA,IAAA;AAAA,IAETH;AAAA,IACDP,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,mBAAA,GAAoBQ,CAAM;AAAA,EAAA;AAGhD;"}