@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/Flow/useFlowLabels.js

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+const FLOW_RUN_STATUS_TONE = {
+  passed: "success",
+  wouldRun: "info",
+  skipped: "neutral",
+  blocked: "warning",
+  failed: "danger",
+  error: "danger"
+};
+const useFlowLabels = () => {
+  const { t } = useTranslation("ui");
+  return useMemo(() => {
+    const ports = {
+      next: t("flow.ports.next"),
+      true: t("flow.ports.true"),
+      false: t("flow.ports.false"),
+      error: t("flow.ports.error")
+    };
+    const categories = {
+      trigger: t("flow.categories.trigger"),
+      condition: t("flow.categories.condition"),
+      action: t("flow.categories.action")
+    };
+    const runStatus = {
+      passed: t("flow.run.passed"),
+      failed: t("flow.run.failed"),
+      skipped: t("flow.run.skipped"),
+      wouldRun: t("flow.run.wouldRun"),
+      error: t("flow.run.error"),
+      blocked: t("flow.run.blocked")
+    };
+    const graphIssues = {
+      missingTrigger: t("flow.issues.missingTrigger"),
+      multipleTriggers: t("flow.issues.multipleTriggers"),
+      unknownBlock: t("flow.issues.unknownBlock"),
+      unreachableNode: t("flow.issues.unreachableNode"),
+      multipleInputs: t("flow.issues.multipleInputs"),
+      portFanOut: t("flow.issues.portFanOut"),
+      cycle: t("flow.issues.cycle"),
+      missingTrueBranch: t("flow.issues.missingTrueBranch")
+    };
+    const issueMessage = (issue) => issue.message ?? graphIssues[issue.code] ?? issue.code;
+    return { ports, categories, runStatus, issueMessage };
+  }, [t]);
+};
+export {
+  FLOW_RUN_STATUS_TONE,
+  useFlowLabels
+};
+//# sourceMappingURL=useFlowLabels.js.map

package/dist/components/UI/Flow/useFlowLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowLabels.js","sources":["../../../../src/components/UI/Flow/useFlowLabels.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport type { TChipTone } from '@/components/UI/Chips/chipTones';\n\nimport type { IFlowIssue, TFlowBlockCategory, TFlowGraphIssueCode, TFlowPortId, TFlowRunStepStatus } from './flowTypes';\n\nexport const FLOW_RUN_STATUS_TONE: Record<TFlowRunStepStatus, TChipTone> = {\n  passed: 'success',\n  wouldRun: 'info',\n  skipped: 'neutral',\n  blocked: 'warning',\n  failed: 'danger',\n  error: 'danger',\n};\n\n/** Every label the flow UI shows, spelled as literal keys so the translation tooling can read them. */\nexport const useFlowLabels = () => {\n  const { t } = useTranslation('ui');\n\n  return useMemo(() => {\n    const ports: Record<TFlowPortId, string> = {\n      next: t('flow.ports.next'),\n      true: t('flow.ports.true'),\n      false: t('flow.ports.false'),\n      error: t('flow.ports.error'),\n    };\n    const categories: Record<TFlowBlockCategory, string> = {\n      trigger: t('flow.categories.trigger'),\n      condition: t('flow.categories.condition'),\n      action: t('flow.categories.action'),\n    };\n    const runStatus: Record<TFlowRunStepStatus, string> = {\n      passed: t('flow.run.passed'),\n      failed: t('flow.run.failed'),\n      skipped: t('flow.run.skipped'),\n      wouldRun: t('flow.run.wouldRun'),\n      error: t('flow.run.error'),\n      blocked: t('flow.run.blocked'),\n    };\n    const graphIssues: Record<TFlowGraphIssueCode, string> = {\n      missingTrigger: t('flow.issues.missingTrigger'),\n      multipleTriggers: t('flow.issues.multipleTriggers'),\n      unknownBlock: t('flow.issues.unknownBlock'),\n      unreachableNode: t('flow.issues.unreachableNode'),\n      multipleInputs: t('flow.issues.multipleInputs'),\n      portFanOut: t('flow.issues.portFanOut'),\n      cycle: t('flow.issues.cycle'),\n      missingTrueBranch: t('flow.issues.missingTrueBranch'),\n    };\n    const issueMessage = (issue: IFlowIssue): string =>\n      issue.message ?? graphIssues[issue.code as TFlowGraphIssueCode] ?? issue.code;\n\n    return { ports, categories, runStatus, issueMessage };\n  }, [t]);\n};\n"],"names":[],"mappings":";;AAOO,MAAM,uBAA8D;AAAA,EACzE,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,MAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SAAO,QAAQ,MAAM;AACnB,UAAM,QAAqC;AAAA,MACzC,MAAM,EAAE,iBAAiB;AAAA,MACzB,MAAM,EAAE,iBAAiB;AAAA,MACzB,OAAO,EAAE,kBAAkB;AAAA,MAC3B,OAAO,EAAE,kBAAkB;AAAA,IAAA;AAE7B,UAAM,aAAiD;AAAA,MACrD,SAAS,EAAE,yBAAyB;AAAA,MACpC,WAAW,EAAE,2BAA2B;AAAA,MACxC,QAAQ,EAAE,wBAAwB;AAAA,IAAA;AAEpC,UAAM,YAAgD;AAAA,MACpD,QAAQ,EAAE,iBAAiB;AAAA,MAC3B,QAAQ,EAAE,iBAAiB;AAAA,MAC3B,SAAS,EAAE,kBAAkB;AAAA,MAC7B,UAAU,EAAE,mBAAmB;AAAA,MAC/B,OAAO,EAAE,gBAAgB;AAAA,MACzB,SAAS,EAAE,kBAAkB;AAAA,IAAA;AAE/B,UAAM,cAAmD;AAAA,MACvD,gBAAgB,EAAE,4BAA4B;AAAA,MAC9C,kBAAkB,EAAE,8BAA8B;AAAA,MAClD,cAAc,EAAE,0BAA0B;AAAA,MAC1C,iBAAiB,EAAE,6BAA6B;AAAA,MAChD,gBAAgB,EAAE,4BAA4B;AAAA,MAC9C,YAAY,EAAE,wBAAwB;AAAA,MACtC,OAAO,EAAE,mBAAmB;AAAA,MAC5B,mBAAmB,EAAE,+BAA+B;AAAA,IAAA;AAEtD,UAAM,eAAe,CAAC,UACpB,MAAM,WAAW,YAAY,MAAM,IAA2B,KAAK,MAAM;AAE3E,WAAO,EAAE,OAAO,YAAY,WAAW,aAAA;AAAA,EACzC,GAAG,CAAC,CAAC,CAAC;AACR;"}

package/dist/components/UI/GeneratedByAI.d.ts

@@ -0,0 +1,2 @@
+declare const GeneratedByAI: React.FC;
+export default GeneratedByAI;

package/dist/components/UI/GeneratedByAI.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import Sparkles from "../../assets/images/common-pngs/sparkles.png.js";
+import ControlledImage from "../Form/ControlledImage/index.js";
+const GeneratedByAI = () => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx(ControlledImage, { src: Sparkles, className: "size-5", tooltip: t("generatedByAI.tooltip") });
+};
+export {
+  GeneratedByAI as default
+};
+//# sourceMappingURL=GeneratedByAI.js.map

package/dist/components/UI/GeneratedByAI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneratedByAI.js","sources":["../../../src/components/UI/GeneratedByAI.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport Sparkles from '@/assets/images/common-pngs/sparkles.png';\n\nimport ControlledImage from '../Form/ControlledImage';\n\nconst GeneratedByAI: React.FC = () => {\n  const { t } = useTranslation('ui');\n  return <ControlledImage src={Sparkles} className=\"size-5\" tooltip={t('generatedByAI.tooltip')} />;\n};\n\nexport default GeneratedByAI;\n"],"names":[],"mappings":";;;;AAMA,MAAM,gBAA0B,MAAM;AACpC,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,SAAO,oBAAC,mBAAgB,KAAK,UAAU,WAAU,UAAS,SAAS,EAAE,uBAAuB,EAAA,CAAG;AACjG;"}

package/dist/components/UI/HorizontalScrollArea.d.ts

@@ -0,0 +1,22 @@
+interface IHorizontalScrollAreaProps {
+    children: React.ReactNode;
+    /** Classes for the scrolling strip itself (usually the flex row that holds the items). */
+    className?: string;
+    /** Classes for the outer positioning wrapper that carries the edge fades. */
+    containerClassName?: string;
+    /** Names the strip for assistive tech, since it is keyboard focusable. Makes it a `group`: a name on a div with no role is ignored. */
+    ariaLabel?: string;
+}
+/**
+ * A strip that keeps its children on one line and scrolls horizontally when they
+ * do not fit, with a fade on whichever edge still has content behind it.
+ *
+ * This is the house answer to "a row of controls that overflows on a narrow
+ * screen" (segmented tabs, bulk actions, filter chips). It exists so those rows
+ * do not each grow their own clipping, wrapping or hide-on-mobile behaviour:
+ * clipped controls are unreachable, and wrapping a control bar reflows the whole
+ * page height. The fades are the only affordance a touch user gets that there is
+ * more to the side, so they are part of the primitive rather than a caller's job.
+ */
+declare const HorizontalScrollArea: React.FC<IHorizontalScrollAreaProps>;
+export default HorizontalScrollArea;

package/dist/components/UI/HorizontalScrollArea.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import classNames from "classnames";
+const HorizontalScrollArea = ({
+  children,
+  className,
+  containerClassName,
+  ariaLabel
+}) => {
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateEdges = useCallback(() => {
+    const scroller = scrollRef.current;
+    if (!scroller) return;
+    const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth;
+    setCanScrollLeft(scroller.scrollLeft > 1);
+    setCanScrollRight(scroller.scrollLeft < maxScrollLeft - 1);
+  }, []);
+  useEffect(() => {
+    const scroller = scrollRef.current;
+    if (!scroller) return void 0;
+    updateEdges();
+    const observer = new ResizeObserver(updateEdges);
+    observer.observe(scroller);
+    const firstChild = scroller.firstElementChild;
+    if (firstChild) observer.observe(firstChild);
+    return () => observer.disconnect();
+  }, [updateEdges, children]);
+  const fadeClass = "pointer-events-none absolute inset-y-0 z-10 w-6 transition-opacity duration-fast";
+  return /* @__PURE__ */ jsxs("div", { className: classNames("relative flex min-w-0 max-w-full", containerClassName), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: ariaLabel ? "group" : void 0,
+        "aria-label": ariaLabel,
+        ref: scrollRef,
+        onScroll: updateEdges,
+        tabIndex: canScrollLeft || canScrollRight ? 0 : -1,
+        className: classNames(
+          "scrollbar-hide min-w-0 max-w-full overflow-x-auto overscroll-x-contain focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border",
+          className
+        ),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: classNames(
+          fadeClass,
+          "left-0 bg-gradient-to-r from-surface to-transparent",
+          canScrollLeft ? "opacity-100" : "opacity-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: classNames(
+          fadeClass,
+          "right-0 bg-gradient-to-l from-surface to-transparent",
+          canScrollRight ? "opacity-100" : "opacity-0"
+        )
+      }
+    )
+  ] });
+};
+export {
+  HorizontalScrollArea as default
+};
+//# sourceMappingURL=HorizontalScrollArea.js.map

package/dist/components/UI/HorizontalScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScrollArea.js","sources":["../../../src/components/UI/HorizontalScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\ninterface IHorizontalScrollAreaProps {\n  children: React.ReactNode;\n  /** Classes for the scrolling strip itself (usually the flex row that holds the items). */\n  className?: string;\n  /** Classes for the outer positioning wrapper that carries the edge fades. */\n  containerClassName?: string;\n  /** Names the strip for assistive tech, since it is keyboard focusable. Makes it a `group`: a name on a div with no role is ignored. */\n  ariaLabel?: string;\n}\n\n/**\n * A strip that keeps its children on one line and scrolls horizontally when they\n * do not fit, with a fade on whichever edge still has content behind it.\n *\n * This is the house answer to \"a row of controls that overflows on a narrow\n * screen\" (segmented tabs, bulk actions, filter chips). It exists so those rows\n * do not each grow their own clipping, wrapping or hide-on-mobile behaviour:\n * clipped controls are unreachable, and wrapping a control bar reflows the whole\n * page height. The fades are the only affordance a touch user gets that there is\n * more to the side, so they are part of the primitive rather than a caller's job.\n */\nconst HorizontalScrollArea: React.FC<IHorizontalScrollAreaProps> = ({\n  children,\n  className,\n  containerClassName,\n  ariaLabel,\n}) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const updateEdges = useCallback(() => {\n    const scroller = scrollRef.current;\n    if (!scroller) return;\n\n    const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth;\n    setCanScrollLeft(scroller.scrollLeft > 1);\n    setCanScrollRight(scroller.scrollLeft < maxScrollLeft - 1);\n  }, []);\n\n  useEffect(() => {\n    const scroller = scrollRef.current;\n    if (!scroller) return undefined;\n\n    updateEdges();\n\n    const observer = new ResizeObserver(updateEdges);\n    observer.observe(scroller);\n    const firstChild = scroller.firstElementChild;\n    if (firstChild) observer.observe(firstChild);\n\n    return () => observer.disconnect();\n  }, [updateEdges, children]);\n\n  const fadeClass = 'pointer-events-none absolute inset-y-0 z-10 w-6 transition-opacity duration-fast';\n\n  return (\n    <div className={classNames('relative flex min-w-0 max-w-full', containerClassName)}>\n      <div\n        role={ariaLabel ? 'group' : undefined}\n        aria-label={ariaLabel}\n        ref={scrollRef}\n        onScroll={updateEdges}\n        // `tabIndex` keeps an overflowing strip reachable by keyboard: without it a\n        // scroll container that holds only non-focusable content cannot be panned.\n        tabIndex={canScrollLeft || canScrollRight ? 0 : -1}\n        className={classNames(\n          'scrollbar-hide min-w-0 max-w-full overflow-x-auto overscroll-x-contain focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border',\n          className,\n        )}\n      >\n        {children}\n      </div>\n\n      <span\n        aria-hidden\n        className={classNames(\n          fadeClass,\n          'left-0 bg-gradient-to-r from-surface to-transparent',\n          canScrollLeft ? 'opacity-100' : 'opacity-0',\n        )}\n      />\n      <span\n        aria-hidden\n        className={classNames(\n          fadeClass,\n          'right-0 bg-gradient-to-l from-surface to-transparent',\n          canScrollRight ? 'opacity-100' : 'opacity-0',\n        )}\n      />\n    </div>\n  );\n};\n\nexport default HorizontalScrollArea;\n"],"names":[],"mappings":";;;AAwBA,MAAM,uBAA6D,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D,QAAM,cAAc,YAAY,MAAM;AACpC,UAAM,WAAW,UAAU;AAC3B,QAAI,CAAC,SAAU;AAEf,UAAM,gBAAgB,SAAS,cAAc,SAAS;AACtD,qBAAiB,SAAS,aAAa,CAAC;AACxC,sBAAkB,SAAS,aAAa,gBAAgB,CAAC;AAAA,EAC3D,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,UAAM,WAAW,UAAU;AAC3B,QAAI,CAAC,SAAU,QAAO;AAEtB,gBAAA;AAEA,UAAM,WAAW,IAAI,eAAe,WAAW;AAC/C,aAAS,QAAQ,QAAQ;AACzB,UAAM,aAAa,SAAS;AAC5B,QAAI,WAAY,UAAS,QAAQ,UAAU;AAE3C,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,QAAM,YAAY;AAElB,8BACG,OAAA,EAAI,WAAW,WAAW,oCAAoC,kBAAkB,GAC/E,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,YAAY,UAAU;AAAA,QAC5B,cAAY;AAAA,QACZ,KAAK;AAAA,QACL,UAAU;AAAA,QAGV,UAAU,iBAAiB,iBAAiB,IAAI;AAAA,QAChD,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,gBAAgB,gBAAgB;AAAA,QAAA;AAAA,MAClC;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,iBAAiB,gBAAgB;AAAA,QAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

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

@@ -0,0 +1,21 @@
+import { TImageAiReviewHandler } from './imageAiReview';
+import { TImageAiAdjuster } from './useImageAiAdjust';
+interface IImageAiAdjustDialogProps {
+    open: boolean;
+    imageUrl: string;
+    imageName?: string;
+    /** Opcional: quando existe, a geração fica associada ao produto no criAI. */
+    productId?: string;
+    /** Runs the generation; the host decides which AI backend serves it. */
+    adjustImage: TImageAiAdjuster;
+    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

@@ -0,0 +1,235 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+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 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 MASK_PAINTER_MAX_HEIGHT = "48vh";
+const ImageAiAdjustDialog = ({
+  open,
+  imageUrl,
+  imageName,
+  productId,
+  adjustImage,
+  onClose,
+  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, 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);
+      notify({ message: t("imageAiAdjust.errorSave"), type: "error" });
+    } finally {
+      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__ */ jsxs(
+    ControlledDialog,
+    {
+      open,
+      size: isTabletDown ? "xxl" : "lg",
+      title: t("imageAiAdjust.title"),
+      subtitle: t("imageAiAdjust.subtitle"),
+      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 || markingArea ? "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")
+                    ]
+                  }
+                )
+              ] }),
+              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,
+                    maxHeight: MASK_PAINTER_MAX_HEIGHT
+                  }
+                )
+              ] }) : /* @__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(
+          ImageAiDiscardReasonDialog,
+          {
+            open: pendingDiscard !== null,
+            onCancel: () => setPendingDiscard(null),
+            onConfirm: handleDiscardConfirmed
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ImageAiAdjustDialog as default
+};
+//# sourceMappingURL=ImageAiAdjustDialog.js.map

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

@@ -0,0 +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 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\n/** Leaves room for the instructions and the actions under the painter without scrolling the dialog. */\nconst MASK_PAINTER_MAX_HEIGHT = '48vh';\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 || markingArea ? '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                  maxHeight={MASK_PAINTER_MAX_HEIGHT}\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;

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

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+const ImageAiVerificationNotice = ({ verification, className }) => {
+  const { t } = useTranslation("ui");
+  const changedTooMuch = verification?.changedMoreThanRequested === true;
+  const colorCheck = verification?.colorCheck ?? null;
+  const colorFailed = colorCheck?.passed === false;
+  if (!changedTooMuch && !colorFailed) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: classNames(
+        "flex flex-col gap-y-1 rounded-xl border border-warning-border bg-warning-soft px-3 py-2 text-xs",
+        "text-warning-emphasis",
+        className
+      ),
+      children: [
+        changedTooMuch && /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-x-1.5", children: [
+          /* @__PURE__ */ jsx(MaterialSymbol, { "aria-hidden": true, icon: "warning", size: 14, className: "mt-px shrink-0" }),
+          t("imageAiAdjust.verification.changedMoreThanRequested")
+        ] }),
+        colorFailed && colorCheck && /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-x-1.5", children: [
+          /* @__PURE__ */ jsx(MaterialSymbol, { "aria-hidden": true, icon: "warning", size: 14, className: "mt-px shrink-0" }),
+          t("imageAiAdjust.verification.colorMismatch", {
+            dominant: colorCheck.dominantHex,
+            target: colorCheck.targetHex
+          })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  ImageAiVerificationNotice as default
+};
+//# sourceMappingURL=ImageAiVerificationNotice.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageAiVerificationNotice.js","sources":["../../../../src/components/UI/ImageAiAdjust/ImageAiVerificationNotice.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport { IImageAiVerification } from './imageAiVerification';\n\ninterface IImageAiVerificationNoticeProps {\n  verification: IImageAiVerification | null | undefined;\n  className?: string;\n}\n\n/** Renders nothing unless the backend flagged the result; the flags are advisory only. */\nconst ImageAiVerificationNotice: React.FC<IImageAiVerificationNoticeProps> = ({ verification, className }) => {\n  const { t } = useTranslation('ui');\n\n  const changedTooMuch = verification?.changedMoreThanRequested === true;\n  const colorCheck = verification?.colorCheck ?? null;\n  const colorFailed = colorCheck?.passed === false;\n  if (!changedTooMuch && !colorFailed) return null;\n\n  return (\n    <div\n      role=\"status\"\n      className={classNames(\n        'flex flex-col gap-y-1 rounded-xl border border-warning-border bg-warning-soft px-3 py-2 text-xs',\n        'text-warning-emphasis',\n        className,\n      )}\n    >\n      {changedTooMuch && (\n        <span className=\"flex items-start gap-x-1.5\">\n          <MaterialSymbol aria-hidden icon=\"warning\" size={14} className=\"mt-px shrink-0\" />\n          {t('imageAiAdjust.verification.changedMoreThanRequested')}\n        </span>\n      )}\n      {colorFailed && colorCheck && (\n        <span className=\"flex items-start gap-x-1.5\">\n          <MaterialSymbol aria-hidden icon=\"warning\" size={14} className=\"mt-px shrink-0\" />\n          {t('imageAiAdjust.verification.colorMismatch', {\n            dominant: colorCheck.dominantHex,\n            target: colorCheck.targetHex,\n          })}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default ImageAiVerificationNotice;\n"],"names":[],"mappings":";;;;AAaA,MAAM,4BAAuE,CAAC,EAAE,cAAc,gBAAgB;AAC5G,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,iBAAiB,cAAc,6BAA6B;AAClE,QAAM,aAAa,cAAc,cAAc;AAC/C,QAAM,cAAc,YAAY,WAAW;AAC3C,MAAI,CAAC,kBAAkB,CAAC,YAAa,QAAO;AAE5C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,kBACC,qBAAC,QAAA,EAAK,WAAU,8BACd,UAAA;AAAA,UAAA,oBAAC,gBAAA,EAAe,eAAW,MAAC,MAAK,WAAU,MAAM,IAAI,WAAU,iBAAA,CAAiB;AAAA,UAC/E,EAAE,qDAAqD;AAAA,QAAA,GAC1D;AAAA,QAED,eAAe,cACd,qBAAC,QAAA,EAAK,WAAU,8BACd,UAAA;AAAA,UAAA,oBAAC,gBAAA,EAAe,eAAW,MAAC,MAAK,WAAU,MAAM,IAAI,WAAU,iBAAA,CAAiB;AAAA,UAC/E,EAAE,4CAA4C;AAAA,YAC7C,UAAU,WAAW;AAAA,YACrB,QAAQ,WAAW;AAAA,UAAA,CACpB;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}