@umodeapporg/ui 0.14.0 → 0.16.0

package/dist/components/UI/DataTable/grid/useGridKeyboard.js

@@ -14,13 +14,12 @@ const isTextEntryTarget = (target) => {
   if (target.isContentEditable) return true;
   return target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
 };
-const moveKeepingTheEditorOpen = (store, columnDelta, canEditCell) => {
-  if (!store.getState().moveActiveCell(0, columnDelta, { wrap: true })) return false;
-  const { activeCell, startEditing } = store.getState();
-  if (activeCell && canEditCell?.(activeCell)) startEditing(activeCell);
-  return true;
+const isPrintableKey = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+const moveWithTab = (store, direction, canEditCell) => {
+  if (canEditCell) return store.getState().moveToEditableCell(direction, canEditCell);
+  return store.getState().moveActiveCell(0, direction, { wrap: true });
 };
-const useGridKeyboard = ({ store, canEditCell, onSave }) => useCallback(
+const useGridKeyboard = ({ store, canEditCell, acceptsTypedValue, onSave }) => useCallback(
   (event) => {
     if (!store) return;
     const state = store.getState();
@@ -41,12 +40,12 @@ const useGridKeyboard = ({ store, canEditCell, onSave }) => useCallback(
       if (key === "Enter") {
         event.preventDefault();
         state.stopEditing();
-        state.moveActiveCell(1, 0);
+        state.moveActiveCell(event.shiftKey ? -1 : 1, 0);
         return;
       }
       if (key === "Tab") {
         state.stopEditing();
-        if (moveKeepingTheEditorOpen(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();
+        if (moveWithTab(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();
       }
       return;
     }
@@ -77,7 +76,7 @@ const useGridKeyboard = ({ store, canEditCell, onSave }) => useCallback(
         state.moveActiveCell(0, 1, { extend });
         return;
       case "Tab":
-        if (moveKeepingTheEditorOpen(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();
+        if (moveWithTab(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();
         return;
       case "Home":
         event.preventDefault();
@@ -93,7 +92,7 @@ const useGridKeyboard = ({ store, canEditCell, onSave }) => useCallback(
         if (!active) return;
         if (canEditCell?.(active)) {
           event.preventDefault();
-          state.startEditing(active);
+          state.startEditing(active, { entry: "keyboard" });
           return;
         }
         const focusableInsideCell = cellElement?.querySelector(CELL_CONTENT_FOCUS_SELECTOR);
@@ -110,9 +109,24 @@ const useGridKeyboard = ({ store, canEditCell, onSave }) => useCallback(
       case "Escape":
         state.clearSelection();
         return;
+      case "Backspace":
+      case "Delete": {
+        const active = state.activeCell;
+        if (!active || !canEditCell?.(active) || !acceptsTypedValue?.(active)) return;
+        event.preventDefault();
+        state.startEditing(active, { entry: "typing", seed: "" });
+        return;
+      }
+      default: {
+        const active = state.activeCell;
+        if (!active || !isPrintableKey(event) || !canEditCell?.(active)) return;
+        event.preventDefault();
+        const seed = acceptsTypedValue?.(active) ? key : void 0;
+        state.startEditing(active, { entry: "typing", seed });
+      }
     }
   },
-  [store, canEditCell, onSave]
+  [store, canEditCell, acceptsTypedValue, onSave]
 );
 export {
   isTextEntryTarget,

package/dist/components/UI/DataTable/grid/useGridKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGridKeyboard.js","sources":["../../../../../src/components/UI/DataTable/grid/useGridKeyboard.ts"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { type StoreApi } from 'zustand/vanilla';\n\nimport { type IGridState } from './gridStore';\nimport { GRID_CELL_DATA_ATTR, type IGridCellCoord } from './gridTypes';\n\ninterface IUseGridKeyboardParams {\n  store: StoreApi<IGridState> | null;\n  /** Whether the cell can open an editor, so Enter/F2 know what to do. */\n  canEditCell?: (coord: IGridCellCoord) => boolean;\n  onSave?: () => void;\n}\n\nconst CELL_CONTENT_FOCUS_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]',\n]\n  .map((selector) => `${selector}:not([tabindex=\"-1\"])`)\n  .join(', ');\n\n/** The `<td>` the event came from, so the handler never queries the whole document. */\nconst resolveCellElement = (target: EventTarget | null): HTMLElement | null =>\n  target instanceof HTMLElement ? target.closest<HTMLElement>(`[${GRID_CELL_DATA_ATTR}]`) : null;\n\n/**\n * A control that owns the caret (input, textarea, select, contenteditable) keeps\n * every key the grid would otherwise claim: the horizontal arrows walk the text,\n * not the columns.\n */\nexport const isTextEntryTarget = (target: EventTarget | null): boolean => {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.isContentEditable) return true;\n\n  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT';\n};\n\n/**\n * Tab walks to the neighbouring cell and OPENS its editor when the cell accepts one, so a\n * row is filled by typing and tabbing instead of reopening the editor at every stop.\n * Returns whether the active cell moved, which is what decides if the grid keeps the event.\n */\nconst moveKeepingTheEditorOpen = (\n  store: StoreApi<IGridState>,\n  columnDelta: 1 | -1,\n  canEditCell?: (coord: IGridCellCoord) => boolean,\n): boolean => {\n  // Past the last cell the grid gives the focus back to the page: trapping Tab inside a\n  // table is a keyboard trap, not a spreadsheet.\n  if (!store.getState().moveActiveCell(0, columnDelta, { wrap: true })) return false;\n\n  const { activeCell, startEditing } = store.getState();\n  if (activeCell && canEditCell?.(activeCell)) startEditing(activeCell);\n\n  return true;\n};\n\n/**\n * The grid's ONLY keyboard listener: one React handler on the scroll container,\n * reached by bubbling from the focused cell. No document listeners, no per-cell\n * handlers, so two tables on the same screen never fight over the same keys.\n */\nexport const useGridKeyboard = ({ store, canEditCell, onSave }: IUseGridKeyboardParams) =>\n  useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (!store) return;\n\n      const state = store.getState();\n      const { key } = event;\n\n      if ((event.metaKey || event.ctrlKey) && (key === 's' || key === 'S')) {\n        if (!onSave) return;\n        event.preventDefault();\n        onSave();\n        return;\n      }\n\n      const isEditing = !!state.editingCell || isTextEntryTarget(event.target);\n\n      if (isEditing) {\n        if (key === 'Escape') {\n          // The table may live inside a dialog or drawer: leaving the editor must\n          // not also close the surface around it.\n          event.stopPropagation();\n          state.stopEditing('cancel');\n          return;\n        }\n\n        if (key === 'Enter') {\n          event.preventDefault();\n          state.stopEditing();\n          state.moveActiveCell(1, 0);\n          return;\n        }\n\n        if (key === 'Tab') {\n          state.stopEditing();\n          if (moveKeepingTheEditorOpen(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();\n        }\n\n        return;\n      }\n\n      const cellElement = resolveCellElement(event.target);\n      const isInsideCellContent = !!cellElement && event.target !== cellElement;\n\n      // Focus went into a control inside the cell (an action button, a link).\n      // While it is there the cell content owns the keyboard, and Escape brings\n      // the focus back to the cell.\n      if (isInsideCellContent) {\n        if (key !== 'Escape') return;\n        event.preventDefault();\n        cellElement.focus();\n        return;\n      }\n\n      const extend = event.shiftKey;\n\n      switch (key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          state.moveActiveCell(-1, 0, { extend });\n          return;\n        case 'ArrowDown':\n          event.preventDefault();\n          state.moveActiveCell(1, 0, { extend });\n          return;\n        case 'ArrowLeft':\n          event.preventDefault();\n          state.moveActiveCell(0, -1, { extend });\n          return;\n        case 'ArrowRight':\n          event.preventDefault();\n          state.moveActiveCell(0, 1, { extend });\n          return;\n        case 'Tab':\n          if (moveKeepingTheEditorOpen(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();\n          return;\n        case 'Home':\n          event.preventDefault();\n          state.moveActiveToEdge(event.ctrlKey || event.metaKey ? -1 : 0, -1, { extend });\n          return;\n        case 'End':\n          event.preventDefault();\n          state.moveActiveToEdge(event.ctrlKey || event.metaKey ? 1 : 0, 1, { extend });\n          return;\n        case 'Enter':\n        case 'F2': {\n          const active = state.activeCell;\n          if (!active) return;\n\n          if (canEditCell?.(active)) {\n            event.preventDefault();\n            state.startEditing(active);\n            return;\n          }\n\n          // Read-only cell: Enter steps INTO whatever control it holds, which is\n          // the only way a keyboard user reaches the per-row actions now that Tab\n          // walks the cells.\n          const focusableInsideCell = cellElement?.querySelector<HTMLElement>(CELL_CONTENT_FOCUS_SELECTOR);\n          if (focusableInsideCell) {\n            event.preventDefault();\n            focusableInsideCell.focus();\n            return;\n          }\n\n          if (key !== 'Enter') return;\n          event.preventDefault();\n          state.moveActiveCell(1, 0);\n\n          return;\n        }\n        case 'Escape':\n          state.clearSelection();\n          return;\n        default:\n      }\n    },\n    [store, canEditCell, onSave],\n  );\n"],"names":[],"mappings":";;AAaA,MAAM,8BAA8B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EACG,IAAI,CAAC,aAAa,GAAG,QAAQ,uBAAuB,EACpD,KAAK,IAAI;AAGZ,MAAM,qBAAqB,CAAC,WAC1B,kBAAkB,cAAc,OAAO,QAAqB,IAAI,mBAAmB,GAAG,IAAI;AAOrF,MAAM,oBAAoB,CAAC,WAAwC;AACxE,MAAI,EAAE,kBAAkB,aAAc,QAAO;AAC7C,MAAI,OAAO,kBAAmB,QAAO;AAErC,SAAO,OAAO,YAAY,WAAW,OAAO,YAAY,cAAc,OAAO,YAAY;AAC3F;AAOA,MAAM,2BAA2B,CAC/B,OACA,aACA,gBACY;AAGZ,MAAI,CAAC,MAAM,SAAA,EAAW,eAAe,GAAG,aAAa,EAAE,MAAM,KAAA,CAAM,EAAG,QAAO;AAE7E,QAAM,EAAE,YAAY,iBAAiB,MAAM,SAAA;AAC3C,MAAI,cAAc,cAAc,UAAU,gBAAgB,UAAU;AAEpE,SAAO;AACT;AAOO,MAAM,kBAAkB,CAAC,EAAE,OAAO,aAAa,aACpD;AAAA,EACE,CAAC,UAA4C;AAC3C,QAAI,CAAC,MAAO;AAEZ,UAAM,QAAQ,MAAM,SAAA;AACpB,UAAM,EAAE,QAAQ;AAEhB,SAAK,MAAM,WAAW,MAAM,aAAa,QAAQ,OAAO,QAAQ,MAAM;AACpE,UAAI,CAAC,OAAQ;AACb,YAAM,eAAA;AACN,aAAA;AACA;AAAA,IACF;AAEA,UAAM,YAAY,CAAC,CAAC,MAAM,eAAe,kBAAkB,MAAM,MAAM;AAEvE,QAAI,WAAW;AACb,UAAI,QAAQ,UAAU;AAGpB,cAAM,gBAAA;AACN,cAAM,YAAY,QAAQ;AAC1B;AAAA,MACF;AAEA,UAAI,QAAQ,SAAS;AACnB,cAAM,eAAA;AACN,cAAM,YAAA;AACN,cAAM,eAAe,GAAG,CAAC;AACzB;AAAA,MACF;AAEA,UAAI,QAAQ,OAAO;AACjB,cAAM,YAAA;AACN,YAAI,yBAAyB,OAAO,MAAM,WAAW,KAAK,GAAG,WAAW,EAAG,OAAM,eAAA;AAAA,MACnF;AAEA;AAAA,IACF;AAEA,UAAM,cAAc,mBAAmB,MAAM,MAAM;AACnD,UAAM,sBAAsB,CAAC,CAAC,eAAe,MAAM,WAAW;AAK9D,QAAI,qBAAqB;AACvB,UAAI,QAAQ,SAAU;AACtB,YAAM,eAAA;AACN,kBAAY,MAAA;AACZ;AAAA,IACF;AAEA,UAAM,SAAS,MAAM;AAErB,YAAQ,KAAA;AAAA,MACN,KAAK;AACH,cAAM,eAAA;AACN,cAAM,eAAe,IAAI,GAAG,EAAE,QAAQ;AACtC;AAAA,MACF,KAAK;AACH,cAAM,eAAA;AACN,cAAM,eAAe,GAAG,GAAG,EAAE,QAAQ;AACrC;AAAA,MACF,KAAK;AACH,cAAM,eAAA;AACN,cAAM,eAAe,GAAG,IAAI,EAAE,QAAQ;AACtC;AAAA,MACF,KAAK;AACH,cAAM,eAAA;AACN,cAAM,eAAe,GAAG,GAAG,EAAE,QAAQ;AACrC;AAAA,MACF,KAAK;AACH,YAAI,yBAAyB,OAAO,MAAM,WAAW,KAAK,GAAG,WAAW,EAAG,OAAM,eAAA;AACjF;AAAA,MACF,KAAK;AACH,cAAM,eAAA;AACN,cAAM,iBAAiB,MAAM,WAAW,MAAM,UAAU,KAAK,GAAG,IAAI,EAAE,OAAA,CAAQ;AAC9E;AAAA,MACF,KAAK;AACH,cAAM,eAAA;AACN,cAAM,iBAAiB,MAAM,WAAW,MAAM,UAAU,IAAI,GAAG,GAAG,EAAE,OAAA,CAAQ;AAC5E;AAAA,MACF,KAAK;AAAA,MACL,KAAK,MAAM;AACT,cAAM,SAAS,MAAM;AACrB,YAAI,CAAC,OAAQ;AAEb,YAAI,cAAc,MAAM,GAAG;AACzB,gBAAM,eAAA;AACN,gBAAM,aAAa,MAAM;AACzB;AAAA,QACF;AAKA,cAAM,sBAAsB,aAAa,cAA2B,2BAA2B;AAC/F,YAAI,qBAAqB;AACvB,gBAAM,eAAA;AACN,8BAAoB,MAAA;AACpB;AAAA,QACF;AAEA,YAAI,QAAQ,QAAS;AACrB,cAAM,eAAA;AACN,cAAM,eAAe,GAAG,CAAC;AAEzB;AAAA,MACF;AAAA,MACA,KAAK;AACH,cAAM,eAAA;AACN;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,CAAC,OAAO,aAAa,MAAM;AAC7B;"}
+{"version":3,"file":"useGridKeyboard.js","sources":["../../../../../src/components/UI/DataTable/grid/useGridKeyboard.ts"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { type StoreApi } from 'zustand/vanilla';\n\nimport { type IGridState } from './gridStore';\nimport { GRID_CELL_DATA_ATTR, type IGridCellCoord } from './gridTypes';\n\ninterface IUseGridKeyboardParams {\n  store: StoreApi<IGridState> | null;\n  /** Whether the cell can open an editor, so Enter/F2/typing know what to do and Tab knows where to stop. */\n  canEditCell?: (coord: IGridCellCoord) => boolean;\n  /** Whether the cell's editor is free text, so a typed key can become its value. */\n  acceptsTypedValue?: (coord: IGridCellCoord) => boolean;\n  onSave?: () => void;\n}\n\nconst CELL_CONTENT_FOCUS_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]',\n]\n  .map((selector) => `${selector}:not([tabindex=\"-1\"])`)\n  .join(', ');\n\n/** The `<td>` the event came from, so the handler never queries the whole document. */\nconst resolveCellElement = (target: EventTarget | null): HTMLElement | null =>\n  target instanceof HTMLElement ? target.closest<HTMLElement>(`[${GRID_CELL_DATA_ATTR}]`) : null;\n\n/**\n * A control that owns the caret (input, textarea, select, contenteditable) keeps\n * every key the grid would otherwise claim: the horizontal arrows walk the text,\n * not the columns.\n */\nexport const isTextEntryTarget = (target: EventTarget | null): boolean => {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.isContentEditable) return true;\n\n  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT';\n};\n\nconst isPrintableKey = (event: React.KeyboardEvent): boolean =>\n  event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;\n\n/**\n * Tab jumps to the next cell that accepts an editor and opens it, so a row is filled by\n * typing and tabbing, never stopping on a read-only cell. A table with no editable cell\n * keeps the plain cell-by-cell walk. Returns whether the active cell moved, which is what\n * decides if the grid keeps the event: past the last cell the focus goes back to the page,\n * because trapping Tab inside a table is a keyboard trap, not a spreadsheet.\n */\nconst moveWithTab = (\n  store: StoreApi<IGridState>,\n  direction: 1 | -1,\n  canEditCell?: (coord: IGridCellCoord) => boolean,\n): boolean => {\n  if (canEditCell) return store.getState().moveToEditableCell(direction, canEditCell);\n  return store.getState().moveActiveCell(0, direction, { wrap: true });\n};\n\n/**\n * The grid's ONLY keyboard listener: one React handler on the scroll container,\n * reached by bubbling from the focused cell. No document listeners, no per-cell\n * handlers, so two tables on the same screen never fight over the same keys.\n */\nexport const useGridKeyboard = ({ store, canEditCell, acceptsTypedValue, onSave }: IUseGridKeyboardParams) =>\n  useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (!store) return;\n\n      const state = store.getState();\n      const { key } = event;\n\n      if ((event.metaKey || event.ctrlKey) && (key === 's' || key === 'S')) {\n        if (!onSave) return;\n        event.preventDefault();\n        onSave();\n        return;\n      }\n\n      const isEditing = !!state.editingCell || isTextEntryTarget(event.target);\n\n      if (isEditing) {\n        if (key === 'Escape') {\n          // The table may live inside a dialog or drawer: leaving the editor must\n          // not also close the surface around it.\n          event.stopPropagation();\n          state.stopEditing('cancel');\n          return;\n        }\n\n        if (key === 'Enter') {\n          event.preventDefault();\n          state.stopEditing();\n          state.moveActiveCell(event.shiftKey ? -1 : 1, 0);\n          return;\n        }\n\n        if (key === 'Tab') {\n          state.stopEditing();\n          if (moveWithTab(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();\n        }\n\n        return;\n      }\n\n      const cellElement = resolveCellElement(event.target);\n      const isInsideCellContent = !!cellElement && event.target !== cellElement;\n\n      // Focus went into a control inside the cell (an action button, a link).\n      // While it is there the cell content owns the keyboard, and Escape brings\n      // the focus back to the cell.\n      if (isInsideCellContent) {\n        if (key !== 'Escape') return;\n        event.preventDefault();\n        cellElement.focus();\n        return;\n      }\n\n      const extend = event.shiftKey;\n\n      switch (key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          state.moveActiveCell(-1, 0, { extend });\n          return;\n        case 'ArrowDown':\n          event.preventDefault();\n          state.moveActiveCell(1, 0, { extend });\n          return;\n        case 'ArrowLeft':\n          event.preventDefault();\n          state.moveActiveCell(0, -1, { extend });\n          return;\n        case 'ArrowRight':\n          event.preventDefault();\n          state.moveActiveCell(0, 1, { extend });\n          return;\n        case 'Tab':\n          if (moveWithTab(store, event.shiftKey ? -1 : 1, canEditCell)) event.preventDefault();\n          return;\n        case 'Home':\n          event.preventDefault();\n          state.moveActiveToEdge(event.ctrlKey || event.metaKey ? -1 : 0, -1, { extend });\n          return;\n        case 'End':\n          event.preventDefault();\n          state.moveActiveToEdge(event.ctrlKey || event.metaKey ? 1 : 0, 1, { extend });\n          return;\n        case 'Enter':\n        case 'F2': {\n          const active = state.activeCell;\n          if (!active) return;\n\n          if (canEditCell?.(active)) {\n            event.preventDefault();\n            state.startEditing(active, { entry: 'keyboard' });\n            return;\n          }\n\n          // Read-only cell: Enter steps INTO whatever control it holds, which is\n          // the only way a keyboard user reaches the per-row actions now that Tab\n          // walks the cells.\n          const focusableInsideCell = cellElement?.querySelector<HTMLElement>(CELL_CONTENT_FOCUS_SELECTOR);\n          if (focusableInsideCell) {\n            event.preventDefault();\n            focusableInsideCell.focus();\n            return;\n          }\n\n          if (key !== 'Enter') return;\n          event.preventDefault();\n          state.moveActiveCell(1, 0);\n\n          return;\n        }\n        case 'Escape':\n          state.clearSelection();\n          return;\n        case 'Backspace':\n        case 'Delete': {\n          const active = state.activeCell;\n          if (!active || !canEditCell?.(active) || !acceptsTypedValue?.(active)) return;\n          event.preventDefault();\n          state.startEditing(active, { entry: 'typing', seed: '' });\n          return;\n        }\n        default: {\n          // Typing over the active cell edits it, like a spreadsheet: free text takes the\n          // key as its new value, a picker opens so the next keys search its options.\n          const active = state.activeCell;\n          if (!active || !isPrintableKey(event) || !canEditCell?.(active)) return;\n          event.preventDefault();\n          const seed = acceptsTypedValue?.(active) ? key : undefined;\n          state.startEditing(active, { entry: 'typing', seed });\n        }\n      }\n    },\n    [store, canEditCell, acceptsTypedValue, onSave],\n  );\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ImageAiAdjust/ImageAiAdjustDialog.d.ts

@@ -1,3 +1,4 @@
+import { TImageAiReviewHandler } from './imageAiReview';
 import { TImageAiAdjuster } from './useImageAiAdjust';
 interface IImageAiAdjustDialogProps {
     open: boolean;
@@ -10,6 +11,11 @@ interface IImageAiAdjustDialogProps {
     onClose: () => void;
     /** Recebe a imagem ajustada; resolver fecha o diálogo, lançar mantém aberto. */
     onSave: (file: File) => Promise<void> | void;
+    /**
+     * Optional feedback sink. Only used when the adjuster resolved a `generationId`: using the
+     * result approves it, discarding asks for a reason first. Failures never block the flow.
+     */
+    onReviewResult?: TImageAiReviewHandler;
 }
 declare const ImageAiAdjustDialog: React.FC<IImageAiAdjustDialogProps>;
 export default ImageAiAdjustDialog;

package/dist/components/UI/ImageAiAdjust/ImageAiAdjustDialog.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -6,12 +6,16 @@ import ControlledButton from "../../Form/ControlledButton.js";
 import ControlledDialog from "../../Form/ControlledDialog.js";
 import ControlledImage from "../../Form/ControlledImage/index.js";
 import ControlledTextarea from "../../Form/ControlledTextarea.js";
+import ImageMaskPainter from "../ImageMaskPainter/index.js";
 import LoadingSpinner from "../LoadingSpinner.js";
 import { MaterialSymbol } from "../MaterialSymbol/index.js";
 import { uiLogger } from "../../../helpers/uiLogger.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { useNotification } from "../../../hooks/useNotification.js";
-import { useImageAiAdjust } from "./useImageAiAdjust.js";
+import ImageAiDiscardReasonDialog from "./ImageAiDiscardReasonDialog.js";
+import { submitImageAiReview } from "./imageAiReview.js";
+import ImageAiVerificationNotice from "./ImageAiVerificationNotice.js";
+import { useImageAiAdjust, IMAGE_AI_ADJUST_MAX_INSTRUCTIONS } from "./useImageAiAdjust.js";
 const ImageAiAdjustDialog = ({
   open,
   imageUrl,
@@ -19,28 +23,42 @@ const ImageAiAdjustDialog = ({
   productId,
   adjustImage,
   onClose,
-  onSave
+  onSave,
+  onReviewResult
 }) => {
   const { t } = useTranslation("ui");
   const { isTabletDown } = useBreakpoint();
   const { notify } = useNotification();
   const [saving, setSaving] = useState(false);
+  const [pendingDiscard, setPendingDiscard] = useState(null);
+  const [markingArea, setMarkingArea] = useState(false);
+  const [mask, setMask] = useState(null);
   const {
     instructions,
     setInstructions,
     resultUrl,
+    resultGenerationId,
+    resultVerification,
     isGenerating,
     canGenerate,
     generate,
     cancel,
     discardResult,
     buildResultFile
-  } = useImageAiAdjust({ imageUrl, imageName, productId, adjustImage });
+  } = useImageAiAdjust({ imageUrl, imageName, productId, adjustImage, mask: markingArea ? mask : null });
+  const toggleMarkingArea = () => {
+    if (markingArea) setMask(null);
+    setMarkingArea(!markingArea);
+  };
+  const reviewEnabled = Boolean(onReviewResult && resultGenerationId);
   const handleSave = async () => {
     if (!resultUrl || saving) return;
     setSaving(true);
     try {
       await onSave(await buildResultFile());
+      if (reviewEnabled && resultGenerationId) {
+        void submitImageAiReview(onReviewResult, { generationId: resultGenerationId, decision: "approved" });
+      }
       onClose();
     } catch (error) {
       uiLogger.error("Failed to save the AI adjusted image", error);
@@ -49,8 +67,39 @@ const ImageAiAdjustDialog = ({
       setSaving(false);
     }
   };
+  const handleTryAgain = () => {
+    if (reviewEnabled) {
+      setPendingDiscard("tryAgain");
+      return;
+    }
+    discardResult();
+  };
+  const handleGenerate = () => {
+    if (reviewEnabled && resultUrl) {
+      setPendingDiscard("regenerate");
+      return;
+    }
+    void generate();
+  };
+  const handleDiscardConfirmed = ({ reasonCode, reason }) => {
+    const action = pendingDiscard;
+    setPendingDiscard(null);
+    if (resultGenerationId) {
+      void submitImageAiReview(onReviewResult, {
+        generationId: resultGenerationId,
+        decision: "discarded",
+        reasonCode,
+        reason
+      });
+    }
+    if (action === "regenerate") {
+      void generate();
+      return;
+    }
+    discardResult();
+  };
   const previewClass = "max-h-[38vh] w-auto max-w-full rounded-lg object-contain";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     ControlledDialog,
     {
       open,
@@ -60,81 +109,122 @@ const ImageAiAdjustDialog = ({
       onCancel: onClose,
       useFooter: false,
       fitBody: true,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[76vh] flex-col gap-y-3 overflow-y-auto", children: [
-        /* @__PURE__ */ jsxs("div", { className: classNames("flex gap-3", isTabletDown ? "flex-col" : "flex-row"), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: t("imageAiAdjust.original") }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-xl bg-ink/95 p-2", children: /* @__PURE__ */ jsx(ControlledImage, { src: imageUrl, className: previewClass }) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: t("imageAiAdjust.result") }),
-            /* @__PURE__ */ jsxs("div", { className: "flex min-h-40 items-center justify-center rounded-xl bg-ink/95 p-2", children: [
-              isGenerating && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-2 p-4", children: [
-                /* @__PURE__ */ jsx(LoadingSpinner, { size: 8, color: "white" }),
-                /* @__PURE__ */ jsx("span", { className: "text-center text-xs text-white", children: t("imageAiAdjust.generating") })
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex max-h-[76vh] flex-col gap-y-3 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: classNames("flex gap-3", isTabletDown ? "flex-col" : "flex-row"), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: t("imageAiAdjust.original") }),
+                /* @__PURE__ */ jsxs(
+                  ControlledButton,
+                  {
+                    size: "sm",
+                    variant: "text",
+                    tone: markingArea ? "brand" : "neutral",
+                    "aria-pressed": markingArea,
+                    disabled: isGenerating || saving,
+                    onClick: toggleMarkingArea,
+                    className: "flex items-center gap-x-1.5 px-2 py-1 normal-case",
+                    children: [
+                      /* @__PURE__ */ jsx(MaterialSymbol, { "aria-hidden": true, icon: markingArea ? "close" : "brush", size: 14 }),
+                      markingArea ? t("imageAiAdjust.mask.stop") : t("imageAiAdjust.mask.start")
+                    ]
+                  }
+                )
               ] }),
-              !isGenerating && resultUrl && /* @__PURE__ */ jsx(ControlledImage, { src: resultUrl, className: previewClass }),
-              !isGenerating && !resultUrl && /* @__PURE__ */ jsx("span", { className: "max-w-64 p-4 text-center text-xs text-white/70", children: t("imageAiAdjust.resultHint") })
+              markingArea ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-muted", children: t("imageAiAdjust.mask.hint") }),
+                /* @__PURE__ */ jsx(
+                  ImageMaskPainter,
+                  {
+                    imageUrl,
+                    disabled: isGenerating || saving,
+                    onMaskChange: setMask,
+                    imageClassName: previewClass
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-xl bg-ink/95 p-2", children: /* @__PURE__ */ jsx(ControlledImage, { src: imageUrl, className: previewClass }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-y-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: t("imageAiAdjust.result") }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-h-40 items-center justify-center rounded-xl bg-ink/95 p-2", children: [
+                isGenerating && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-2 p-4", children: [
+                  /* @__PURE__ */ jsx(LoadingSpinner, { size: 8, color: "white" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-center text-xs text-white", children: t("imageAiAdjust.generating") })
+                ] }),
+                !isGenerating && resultUrl && /* @__PURE__ */ jsx(ControlledImage, { src: resultUrl, className: previewClass }),
+                !isGenerating && !resultUrl && /* @__PURE__ */ jsx("span", { className: "max-w-64 p-4 text-center text-xs text-white/70", children: t("imageAiAdjust.resultHint") })
+              ] }),
+              !isGenerating && resultUrl && /* @__PURE__ */ jsx(ImageAiVerificationNotice, { verification: resultVerification })
             ] })
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ControlledTextarea,
+            {
+              resize: "none",
+              value: instructions,
+              rows: 3,
+              maxLength: IMAGE_AI_ADJUST_MAX_INSTRUCTIONS,
+              disabled: isGenerating || saving,
+              "aria-label": t("imageAiAdjust.promptLabel"),
+              placeholder: t("imageAiAdjust.promptPlaceholder"),
+              onChange: (event) => setInstructions(event.target.value),
+              className: "rounded-xl"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: isGenerating ? /* @__PURE__ */ jsx(ControlledButton, { size: "sm", variant: "outlined", onClick: cancel, className: "normal-case", children: t("actions.cancel") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            resultUrl && /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                size: "sm",
+                variant: "outlined",
+                disabled: saving,
+                onClick: handleTryAgain,
+                className: "flex items-center gap-x-1.5 normal-case",
+                children: [
+                  /* @__PURE__ */ jsx(MaterialSymbol, { icon: "refresh", size: 14 }),
+                  t("imageAiAdjust.tryAgain")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                size: "sm",
+                variant: resultUrl ? "outlined" : "filled",
+                disabled: !canGenerate || saving,
+                onClick: handleGenerate,
+                className: "flex items-center gap-x-1.5 normal-case",
+                children: [
+                  /* @__PURE__ */ jsx(MaterialSymbol, { icon: "auto_fix_high", size: 14 }),
+                  t("imageAiAdjust.generate")
+                ]
+              }
+            ),
+            resultUrl && /* @__PURE__ */ jsxs(
+              ControlledButton,
+              {
+                size: "sm",
+                disabled: saving,
+                onClick: handleSave,
+                className: "flex items-center gap-x-1.5 normal-case",
+                children: [
+                  saving ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "white" }) : /* @__PURE__ */ jsx(MaterialSymbol, { icon: "check", size: 14, color: "white" }),
+                  t("imageAiAdjust.useResult")
+                ]
+              }
+            )
+          ] }) })
         ] }),
         /* @__PURE__ */ jsx(
-          ControlledTextarea,
+          ImageAiDiscardReasonDialog,
           {
-            resize: "none",
-            value: instructions,
-            rows: 3,
-            disabled: isGenerating || saving,
-            "aria-label": t("imageAiAdjust.promptLabel"),
-            placeholder: t("imageAiAdjust.promptPlaceholder"),
-            onChange: (event) => setInstructions(event.target.value),
-            className: "rounded-xl"
+            open: pendingDiscard !== null,
+            onCancel: () => setPendingDiscard(null),
+            onConfirm: handleDiscardConfirmed
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: isGenerating ? /* @__PURE__ */ jsx(ControlledButton, { size: "sm", variant: "outlined", onClick: cancel, className: "normal-case", children: t("actions.cancel") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          resultUrl && /* @__PURE__ */ jsxs(
-            ControlledButton,
-            {
-              size: "sm",
-              variant: "outlined",
-              disabled: saving,
-              onClick: discardResult,
-              className: "flex items-center gap-x-1.5 normal-case",
-              children: [
-                /* @__PURE__ */ jsx(MaterialSymbol, { icon: "refresh", size: 14 }),
-                t("imageAiAdjust.tryAgain")
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            ControlledButton,
-            {
-              size: "sm",
-              variant: resultUrl ? "outlined" : "filled",
-              disabled: !canGenerate || saving,
-              onClick: generate,
-              className: "flex items-center gap-x-1.5 normal-case",
-              children: [
-                /* @__PURE__ */ jsx(MaterialSymbol, { icon: "auto_fix_high", size: 14 }),
-                t("imageAiAdjust.generate")
-              ]
-            }
-          ),
-          resultUrl && /* @__PURE__ */ jsxs(
-            ControlledButton,
-            {
-              size: "sm",
-              disabled: saving,
-              onClick: handleSave,
-              className: "flex items-center gap-x-1.5 normal-case",
-              children: [
-                saving ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "white" }) : /* @__PURE__ */ jsx(MaterialSymbol, { icon: "check", size: 14, color: "white" }),
-                t("imageAiAdjust.useResult")
-              ]
-            }
-          )
-        ] }) })
-      ] })
+        )
+      ]
     }
   );
 };

package/dist/components/UI/ImageAiAdjust/ImageAiAdjustDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageAiAdjustDialog.js","sources":["../../../../src/components/UI/ImageAiAdjust/ImageAiAdjustDialog.tsx"],"sourcesContent":["import { useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledDialog from '@/components/Form/ControlledDialog';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTextarea from '@/components/Form/ControlledTextarea';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\nimport { useNotification } from '@/hooks/useNotification';\n\nimport { TImageAiAdjuster, useImageAiAdjust } from './useImageAiAdjust';\n\ninterface IImageAiAdjustDialogProps {\n  open: boolean;\n  imageUrl: string;\n  imageName?: string;\n  /** Opcional: quando existe, a geração fica associada ao produto no criAI. */\n  productId?: string;\n  /** Runs the generation; the host decides which AI backend serves it. */\n  adjustImage: TImageAiAdjuster;\n  onClose: () => void;\n  /** Recebe a imagem ajustada; resolver fecha o diálogo, lançar mantém aberto. */\n  onSave: (file: File) => Promise<void> | void;\n}\n\nconst ImageAiAdjustDialog: React.FC<IImageAiAdjustDialogProps> = ({\n  open,\n  imageUrl,\n  imageName,\n  productId,\n  adjustImage,\n  onClose,\n  onSave,\n}) => {\n  const { t } = useTranslation('ui');\n  const { isTabletDown } = useBreakpoint();\n  const { notify } = useNotification();\n\n  const [saving, setSaving] = useState(false);\n  const {\n    instructions,\n    setInstructions,\n    resultUrl,\n    isGenerating,\n    canGenerate,\n    generate,\n    cancel,\n    discardResult,\n    buildResultFile,\n  } = useImageAiAdjust({ imageUrl, imageName, productId, adjustImage });\n\n  const handleSave = async () => {\n    if (!resultUrl || saving) return;\n\n    setSaving(true);\n    try {\n      await onSave(await buildResultFile());\n      onClose();\n    } catch (error) {\n      uiLogger.error('Failed to save the AI adjusted image', error);\n      notify({ message: t('imageAiAdjust.errorSave'), type: 'error' });\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const previewClass = 'max-h-[38vh] w-auto max-w-full rounded-lg object-contain';\n\n  return (\n    <ControlledDialog\n      open={open}\n      size={isTabletDown ? 'xxl' : 'lg'}\n      title={t('imageAiAdjust.title')}\n      subtitle={t('imageAiAdjust.subtitle')}\n      onCancel={onClose}\n      useFooter={false}\n      fitBody\n    >\n      <div className=\"flex max-h-[76vh] flex-col gap-y-3 overflow-y-auto\">\n        <div className={classNames('flex gap-3', isTabletDown ? 'flex-col' : 'flex-row')}>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-y-1.5\">\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {t('imageAiAdjust.original')}\n            </span>\n            <div className=\"flex items-center justify-center rounded-xl bg-ink/95 p-2\">\n              <ControlledImage src={imageUrl} className={previewClass} />\n            </div>\n          </div>\n\n          <div className=\"flex min-w-0 flex-1 flex-col gap-y-1.5\">\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {t('imageAiAdjust.result')}\n            </span>\n            <div className=\"flex min-h-40 items-center justify-center rounded-xl bg-ink/95 p-2\">\n              {isGenerating && (\n                <div className=\"flex flex-col items-center gap-y-2 p-4\">\n                  <LoadingSpinner size={8} color=\"white\" />\n                  <span className=\"text-center text-xs text-white\">{t('imageAiAdjust.generating')}</span>\n                </div>\n              )}\n\n              {!isGenerating && resultUrl && <ControlledImage src={resultUrl} className={previewClass} />}\n\n              {!isGenerating && !resultUrl && (\n                <span className=\"max-w-64 p-4 text-center text-xs text-white/70\">{t('imageAiAdjust.resultHint')}</span>\n              )}\n            </div>\n          </div>\n        </div>\n\n        <ControlledTextarea\n          resize=\"none\"\n          value={instructions}\n          rows={3}\n          disabled={isGenerating || saving}\n          aria-label={t('imageAiAdjust.promptLabel')}\n          placeholder={t('imageAiAdjust.promptPlaceholder')}\n          onChange={(event) => setInstructions(event.target.value)}\n          className=\"rounded-xl\"\n        />\n\n        <div className=\"flex flex-wrap items-center justify-end gap-2\">\n          {isGenerating ? (\n            <ControlledButton size=\"sm\" variant=\"outlined\" onClick={cancel} className=\"normal-case\">\n              {t('actions.cancel')}\n            </ControlledButton>\n          ) : (\n            <>\n              {resultUrl && (\n                <ControlledButton\n                  size=\"sm\"\n                  variant=\"outlined\"\n                  disabled={saving}\n                  onClick={discardResult}\n                  className=\"flex items-center gap-x-1.5 normal-case\"\n                >\n                  <MaterialSymbol icon=\"refresh\" size={14} />\n                  {t('imageAiAdjust.tryAgain')}\n                </ControlledButton>\n              )}\n\n              <ControlledButton\n                size=\"sm\"\n                variant={resultUrl ? 'outlined' : 'filled'}\n                disabled={!canGenerate || saving}\n                onClick={generate}\n                className=\"flex items-center gap-x-1.5 normal-case\"\n              >\n                <MaterialSymbol icon=\"auto_fix_high\" size={14} />\n                {t('imageAiAdjust.generate')}\n              </ControlledButton>\n\n              {resultUrl && (\n                <ControlledButton\n                  size=\"sm\"\n                  disabled={saving}\n                  onClick={handleSave}\n                  className=\"flex items-center gap-x-1.5 normal-case\"\n                >\n                  {saving ? (\n                    <LoadingSpinner size={4} color=\"white\" />\n                  ) : (\n                    <MaterialSymbol icon=\"check\" size={14} color=\"white\" />\n                  )}\n                  {t('imageAiAdjust.useResult')}\n                </ControlledButton>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </ControlledDialog>\n  );\n};\n\nexport default ImageAiAdjustDialog;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ImageAiAdjustDialog.js","sources":["../../../../src/components/UI/ImageAiAdjust/ImageAiAdjustDialog.tsx"],"sourcesContent":["import { useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledDialog from '@/components/Form/ControlledDialog';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTextarea from '@/components/Form/ControlledTextarea';\nimport ImageMaskPainter from '@/components/UI/ImageMaskPainter';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { uiLogger } from '@/helpers/uiLogger';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\nimport { useNotification } from '@/hooks/useNotification';\n\nimport ImageAiDiscardReasonDialog from './ImageAiDiscardReasonDialog';\nimport { IImageAiDiscardReason, submitImageAiReview, TImageAiReviewHandler } from './imageAiReview';\nimport ImageAiVerificationNotice from './ImageAiVerificationNotice';\nimport { IMAGE_AI_ADJUST_MAX_INSTRUCTIONS, TImageAiAdjuster, useImageAiAdjust } from './useImageAiAdjust';\n\ntype TPendingDiscard = 'tryAgain' | 'regenerate';\n\ninterface IImageAiAdjustDialogProps {\n  open: boolean;\n  imageUrl: string;\n  imageName?: string;\n  /** Opcional: quando existe, a geração fica associada ao produto no criAI. */\n  productId?: string;\n  /** Runs the generation; the host decides which AI backend serves it. */\n  adjustImage: TImageAiAdjuster;\n  onClose: () => void;\n  /** Recebe a imagem ajustada; resolver fecha o diálogo, lançar mantém aberto. */\n  onSave: (file: File) => Promise<void> | void;\n  /**\n   * Optional feedback sink. Only used when the adjuster resolved a `generationId`: using the\n   * result approves it, discarding asks for a reason first. Failures never block the flow.\n   */\n  onReviewResult?: TImageAiReviewHandler;\n}\n\nconst ImageAiAdjustDialog: React.FC<IImageAiAdjustDialogProps> = ({\n  open,\n  imageUrl,\n  imageName,\n  productId,\n  adjustImage,\n  onClose,\n  onSave,\n  onReviewResult,\n}) => {\n  const { t } = useTranslation('ui');\n  const { isTabletDown } = useBreakpoint();\n  const { notify } = useNotification();\n\n  const [saving, setSaving] = useState(false);\n  const [pendingDiscard, setPendingDiscard] = useState<TPendingDiscard | null>(null);\n  const [markingArea, setMarkingArea] = useState(false);\n  const [mask, setMask] = useState<File | null>(null);\n  const {\n    instructions,\n    setInstructions,\n    resultUrl,\n    resultGenerationId,\n    resultVerification,\n    isGenerating,\n    canGenerate,\n    generate,\n    cancel,\n    discardResult,\n    buildResultFile,\n  } = useImageAiAdjust({ imageUrl, imageName, productId, adjustImage, mask: markingArea ? mask : null });\n\n  const toggleMarkingArea = () => {\n    if (markingArea) setMask(null);\n    setMarkingArea(!markingArea);\n  };\n\n  const reviewEnabled = Boolean(onReviewResult && resultGenerationId);\n\n  const handleSave = async () => {\n    if (!resultUrl || saving) return;\n\n    setSaving(true);\n    try {\n      await onSave(await buildResultFile());\n      if (reviewEnabled && resultGenerationId) {\n        void submitImageAiReview(onReviewResult, { generationId: resultGenerationId, decision: 'approved' });\n      }\n      onClose();\n    } catch (error) {\n      uiLogger.error('Failed to save the AI adjusted image', error);\n      notify({ message: t('imageAiAdjust.errorSave'), type: 'error' });\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const handleTryAgain = () => {\n    if (reviewEnabled) {\n      setPendingDiscard('tryAgain');\n      return;\n    }\n    discardResult();\n  };\n\n  const handleGenerate = () => {\n    if (reviewEnabled && resultUrl) {\n      setPendingDiscard('regenerate');\n      return;\n    }\n    void generate();\n  };\n\n  const handleDiscardConfirmed = ({ reasonCode, reason }: IImageAiDiscardReason) => {\n    const action = pendingDiscard;\n    setPendingDiscard(null);\n    if (resultGenerationId) {\n      void submitImageAiReview(onReviewResult, {\n        generationId: resultGenerationId,\n        decision: 'discarded',\n        reasonCode,\n        reason,\n      });\n    }\n    if (action === 'regenerate') {\n      void generate();\n      return;\n    }\n    discardResult();\n  };\n\n  const previewClass = 'max-h-[38vh] w-auto max-w-full rounded-lg object-contain';\n\n  return (\n    <ControlledDialog\n      open={open}\n      size={isTabletDown ? 'xxl' : 'lg'}\n      title={t('imageAiAdjust.title')}\n      subtitle={t('imageAiAdjust.subtitle')}\n      onCancel={onClose}\n      useFooter={false}\n      fitBody\n    >\n      <div className=\"flex max-h-[76vh] flex-col gap-y-3 overflow-y-auto\">\n        <div className={classNames('flex gap-3', isTabletDown ? 'flex-col' : 'flex-row')}>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-y-1.5\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n                {t('imageAiAdjust.original')}\n              </span>\n              <ControlledButton\n                size=\"sm\"\n                variant=\"text\"\n                tone={markingArea ? 'brand' : 'neutral'}\n                aria-pressed={markingArea}\n                disabled={isGenerating || saving}\n                onClick={toggleMarkingArea}\n                className=\"flex items-center gap-x-1.5 px-2 py-1 normal-case\"\n              >\n                <MaterialSymbol aria-hidden icon={markingArea ? 'close' : 'brush'} size={14} />\n                {markingArea ? t('imageAiAdjust.mask.stop') : t('imageAiAdjust.mask.start')}\n              </ControlledButton>\n            </div>\n            {markingArea ? (\n              <>\n                <span className=\"text-xs text-foreground-muted\">{t('imageAiAdjust.mask.hint')}</span>\n                <ImageMaskPainter\n                  imageUrl={imageUrl}\n                  disabled={isGenerating || saving}\n                  onMaskChange={setMask}\n                  imageClassName={previewClass}\n                />\n              </>\n            ) : (\n              <div className=\"flex items-center justify-center rounded-xl bg-ink/95 p-2\">\n                <ControlledImage src={imageUrl} className={previewClass} />\n              </div>\n            )}\n          </div>\n\n          <div className=\"flex min-w-0 flex-1 flex-col gap-y-1.5\">\n            <span className=\"text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n              {t('imageAiAdjust.result')}\n            </span>\n            <div className=\"flex min-h-40 items-center justify-center rounded-xl bg-ink/95 p-2\">\n              {isGenerating && (\n                <div className=\"flex flex-col items-center gap-y-2 p-4\">\n                  <LoadingSpinner size={8} color=\"white\" />\n                  <span className=\"text-center text-xs text-white\">{t('imageAiAdjust.generating')}</span>\n                </div>\n              )}\n\n              {!isGenerating && resultUrl && <ControlledImage src={resultUrl} className={previewClass} />}\n\n              {!isGenerating && !resultUrl && (\n                <span className=\"max-w-64 p-4 text-center text-xs text-white/70\">{t('imageAiAdjust.resultHint')}</span>\n              )}\n            </div>\n            {!isGenerating && resultUrl && <ImageAiVerificationNotice verification={resultVerification} />}\n          </div>\n        </div>\n\n        <ControlledTextarea\n          resize=\"none\"\n          value={instructions}\n          rows={3}\n          maxLength={IMAGE_AI_ADJUST_MAX_INSTRUCTIONS}\n          disabled={isGenerating || saving}\n          aria-label={t('imageAiAdjust.promptLabel')}\n          placeholder={t('imageAiAdjust.promptPlaceholder')}\n          onChange={(event) => setInstructions(event.target.value)}\n          className=\"rounded-xl\"\n        />\n\n        <div className=\"flex flex-wrap items-center justify-end gap-2\">\n          {isGenerating ? (\n            <ControlledButton size=\"sm\" variant=\"outlined\" onClick={cancel} className=\"normal-case\">\n              {t('actions.cancel')}\n            </ControlledButton>\n          ) : (\n            <>\n              {resultUrl && (\n                <ControlledButton\n                  size=\"sm\"\n                  variant=\"outlined\"\n                  disabled={saving}\n                  onClick={handleTryAgain}\n                  className=\"flex items-center gap-x-1.5 normal-case\"\n                >\n                  <MaterialSymbol icon=\"refresh\" size={14} />\n                  {t('imageAiAdjust.tryAgain')}\n                </ControlledButton>\n              )}\n\n              <ControlledButton\n                size=\"sm\"\n                variant={resultUrl ? 'outlined' : 'filled'}\n                disabled={!canGenerate || saving}\n                onClick={handleGenerate}\n                className=\"flex items-center gap-x-1.5 normal-case\"\n              >\n                <MaterialSymbol icon=\"auto_fix_high\" size={14} />\n                {t('imageAiAdjust.generate')}\n              </ControlledButton>\n\n              {resultUrl && (\n                <ControlledButton\n                  size=\"sm\"\n                  disabled={saving}\n                  onClick={handleSave}\n                  className=\"flex items-center gap-x-1.5 normal-case\"\n                >\n                  {saving ? (\n                    <LoadingSpinner size={4} color=\"white\" />\n                  ) : (\n                    <MaterialSymbol icon=\"check\" size={14} color=\"white\" />\n                  )}\n                  {t('imageAiAdjust.useResult')}\n                </ControlledButton>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n\n      <ImageAiDiscardReasonDialog\n        open={pendingDiscard !== null}\n        onCancel={() => setPendingDiscard(null)}\n        onConfirm={handleDiscardConfirmed}\n      />\n    </ControlledDialog>\n  );\n};\n\nexport default ImageAiAdjustDialog;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/ImageAiAdjust/ImageAiDiscardReasonDialog.d.ts

@@ -0,0 +1,8 @@
+import { IImageAiDiscardReason } from './imageAiReview';
+interface IImageAiDiscardReasonDialogProps {
+    open: boolean;
+    onCancel: () => void;
+    onConfirm: (reason: IImageAiDiscardReason) => void;
+}
+declare const ImageAiDiscardReasonDialog: React.FC<IImageAiDiscardReasonDialogProps>;
+export default ImageAiDiscardReasonDialog;

package/dist/components/UI/ImageAiAdjust/ImageAiDiscardReasonDialog.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ControlledDialog from "../../Form/ControlledDialog.js";
+import ControlledRadio from "../../Form/ControlledRadio.js";
+import ControlledTextarea from "../../Form/ControlledTextarea.js";
+import { IMAGE_AI_REVIEW_REASON_CODES, IMAGE_AI_REVIEW_REASON_LABEL_KEYS, IMAGE_AI_REVIEW_REASON_MAX } from "./imageAiReview.js";
+const ImageAiDiscardReasonDialog = ({ open, onCancel, onConfirm }) => {
+  const { t } = useTranslation("ui");
+  const [reasonCode, setReasonCode] = useState(null);
+  const [reason, setReason] = useState("");
+  useEffect(() => {
+    if (!open) return;
+    setReasonCode(null);
+    setReason("");
+  }, [open]);
+  const handleConfirm = () => {
+    if (!reasonCode) return;
+    const trimmed = reason.trim().slice(0, IMAGE_AI_REVIEW_REASON_MAX);
+    onConfirm({ reasonCode, reason: trimmed || void 0 });
+  };
+  return /* @__PURE__ */ jsx(
+    ControlledDialog,
+    {
+      open,
+      size: "sm",
+      title: t("imageAiReview.discardTitle"),
+      subtitle: t("imageAiReview.discardSubtitle"),
+      onCancel,
+      onConfirm: handleConfirm,
+      cancelLabel: t("actions.cancel"),
+      confirmLabel: t("imageAiReview.discardConfirm"),
+      disableConfirm: !reasonCode,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-3", children: [
+        /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": t("imageAiReview.reasonLabel"), className: "flex flex-col gap-y-1.5", children: IMAGE_AI_REVIEW_REASON_CODES.map((code) => /* @__PURE__ */ jsx(
+          ControlledRadio,
+          {
+            id: `image-ai-discard-reason-${code}`,
+            name: "image-ai-discard-reason",
+            size: "sm",
+            checked: reasonCode === code,
+            onChange: () => setReasonCode(code),
+            label: t(IMAGE_AI_REVIEW_REASON_LABEL_KEYS[code])
+          },
+          code
+        )) }),
+        /* @__PURE__ */ jsx(
+          ControlledTextarea,
+          {
+            resize: "none",
+            rows: 3,
+            value: reason,
+            maxLength: IMAGE_AI_REVIEW_REASON_MAX,
+            "aria-label": t("imageAiReview.detailsLabel"),
+            placeholder: t("imageAiReview.detailsPlaceholder"),
+            onChange: (event) => setReason(event.target.value),
+            className: "rounded-xl"
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  ImageAiDiscardReasonDialog as default
+};
+//# sourceMappingURL=ImageAiDiscardReasonDialog.js.map

package/dist/components/UI/ImageAiAdjust/ImageAiDiscardReasonDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageAiDiscardReasonDialog.js","sources":["../../../../src/components/UI/ImageAiAdjust/ImageAiDiscardReasonDialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledDialog from '@/components/Form/ControlledDialog';\nimport ControlledRadio from '@/components/Form/ControlledRadio';\nimport ControlledTextarea from '@/components/Form/ControlledTextarea';\n\nimport {\n  IImageAiDiscardReason,\n  IMAGE_AI_REVIEW_REASON_CODES,\n  IMAGE_AI_REVIEW_REASON_LABEL_KEYS,\n  IMAGE_AI_REVIEW_REASON_MAX,\n  TImageAiReviewReasonCode,\n} from './imageAiReview';\n\ninterface IImageAiDiscardReasonDialogProps {\n  open: boolean;\n  onCancel: () => void;\n  onConfirm: (reason: IImageAiDiscardReason) => void;\n}\n\nconst ImageAiDiscardReasonDialog: React.FC<IImageAiDiscardReasonDialogProps> = ({ open, onCancel, onConfirm }) => {\n  const { t } = useTranslation('ui');\n  const [reasonCode, setReasonCode] = useState<TImageAiReviewReasonCode | null>(null);\n  const [reason, setReason] = useState('');\n\n  useEffect(() => {\n    if (!open) return;\n    setReasonCode(null);\n    setReason('');\n  }, [open]);\n\n  const handleConfirm = () => {\n    if (!reasonCode) return;\n    const trimmed = reason.trim().slice(0, IMAGE_AI_REVIEW_REASON_MAX);\n    onConfirm({ reasonCode, reason: trimmed || undefined });\n  };\n\n  return (\n    <ControlledDialog\n      open={open}\n      size=\"sm\"\n      title={t('imageAiReview.discardTitle')}\n      subtitle={t('imageAiReview.discardSubtitle')}\n      onCancel={onCancel}\n      onConfirm={handleConfirm}\n      cancelLabel={t('actions.cancel')}\n      confirmLabel={t('imageAiReview.discardConfirm')}\n      disableConfirm={!reasonCode}\n    >\n      <div className=\"flex flex-col gap-y-3\">\n        <div role=\"radiogroup\" aria-label={t('imageAiReview.reasonLabel')} className=\"flex flex-col gap-y-1.5\">\n          {IMAGE_AI_REVIEW_REASON_CODES.map((code) => (\n            <ControlledRadio\n              key={code}\n              id={`image-ai-discard-reason-${code}`}\n              name=\"image-ai-discard-reason\"\n              size=\"sm\"\n              checked={reasonCode === code}\n              onChange={() => setReasonCode(code)}\n              label={t(IMAGE_AI_REVIEW_REASON_LABEL_KEYS[code])}\n            />\n          ))}\n        </div>\n\n        <ControlledTextarea\n          resize=\"none\"\n          rows={3}\n          value={reason}\n          maxLength={IMAGE_AI_REVIEW_REASON_MAX}\n          aria-label={t('imageAiReview.detailsLabel')}\n          placeholder={t('imageAiReview.detailsPlaceholder')}\n          onChange={(event) => setReason(event.target.value)}\n          className=\"rounded-xl\"\n        />\n      </div>\n    </ControlledDialog>\n  );\n};\n\nexport default ImageAiDiscardReasonDialog;\n"],"names":[],"mappings":";;;;;;;AAqBA,MAAM,6BAAyE,CAAC,EAAE,MAAM,UAAU,gBAAgB;AAChH,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,CAAC,YAAY,aAAa,IAAI,SAA0C,IAAI;AAClF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAEvC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,kBAAc,IAAI;AAClB,cAAU,EAAE;AAAA,EACd,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,gBAAgB,MAAM;AAC1B,QAAI,CAAC,WAAY;AACjB,UAAM,UAAU,OAAO,KAAA,EAAO,MAAM,GAAG,0BAA0B;AACjE,cAAU,EAAE,YAAY,QAAQ,WAAW,QAAW;AAAA,EACxD;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,OAAO,EAAE,4BAA4B;AAAA,MACrC,UAAU,EAAE,+BAA+B;AAAA,MAC3C;AAAA,MACA,WAAW;AAAA,MACX,aAAa,EAAE,gBAAgB;AAAA,MAC/B,cAAc,EAAE,8BAA8B;AAAA,MAC9C,gBAAgB,CAAC;AAAA,MAEjB,UAAA,qBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,MAAK,cAAa,cAAY,EAAE,2BAA2B,GAAG,WAAU,2BAC1E,UAAA,6BAA6B,IAAI,CAAC,SACjC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,IAAI,2BAA2B,IAAI;AAAA,YACnC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,SAAS,eAAe;AAAA,YACxB,UAAU,MAAM,cAAc,IAAI;AAAA,YAClC,OAAO,EAAE,kCAAkC,IAAI,CAAC;AAAA,UAAA;AAAA,UAN3C;AAAA,QAAA,CAQR,GACH;AAAA,QAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,MAAM;AAAA,YACN,OAAO;AAAA,YACP,WAAW;AAAA,YACX,cAAY,EAAE,4BAA4B;AAAA,YAC1C,aAAa,EAAE,kCAAkC;AAAA,YACjD,UAAU,CAAC,UAAU,UAAU,MAAM,OAAO,KAAK;AAAA,YACjD,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/UI/ImageAiAdjust/ImageAiVerificationNotice.d.ts

@@ -0,0 +1,8 @@
+import { IImageAiVerification } from './imageAiVerification';
+interface IImageAiVerificationNoticeProps {
+    verification: IImageAiVerification | null | undefined;
+    className?: string;
+}
+/** Renders nothing unless the backend flagged the result; the flags are advisory only. */
+declare const ImageAiVerificationNotice: React.FC<IImageAiVerificationNoticeProps>;
+export default ImageAiVerificationNotice;