@arqel-dev/ai 0.8.0

package/dist/index.js

@@ -0,0 +1,1133 @@
+import { Label, Button, Card, CardContent, Badge, Alert, AlertDescription, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@arqel-dev/ui';
+import { useId, useState, useCallback, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/AiExtractInput.tsx
+function buildExtractUrl(override, resource, field) {
+  if (override !== void 0 && override !== "") {
+    return override;
+  }
+  if (resource && field) {
+    return `/admin/${resource}/fields/${field}/extract`;
+  }
+  return null;
+}
+function isPlainRecord(input) {
+  return input !== null && typeof input === "object" && !Array.isArray(input);
+}
+function coerceSourceText(raw) {
+  if (typeof raw === "string") {
+    return raw;
+  }
+  if (raw === null || raw === void 0) {
+    return "";
+  }
+  if (typeof raw === "number" || typeof raw === "boolean") {
+    return String(raw);
+  }
+  return "";
+}
+function formatPreviewValue(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      className: "animate-spin",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 12a10 10 0 0 1-10 10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function AiExtractInput(props) {
+  const {
+    name,
+    value,
+    onChange,
+    props: fieldProps,
+    resource,
+    field,
+    formData,
+    extractUrl,
+    csrfToken,
+    onPopulateField
+  } = props;
+  const sourceField = fieldProps?.sourceField ?? "";
+  const targetFields = fieldProps?.targetFields ?? [];
+  const buttonLabel = fieldProps?.buttonLabel ?? "Extract with AI";
+  const reactId = useId();
+  const previewId = `arqel-ai-extract-${reactId}`;
+  const [extracted, setExtracted] = useState(value);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const applyAll = useCallback(
+    (next) => {
+      if (onPopulateField !== void 0) {
+        for (const key of Object.keys(next)) {
+          onPopulateField(key, next[key]);
+        }
+        return;
+      }
+      onChange?.(next);
+    },
+    [onChange, onPopulateField]
+  );
+  const applyOne = useCallback(
+    (target, val) => {
+      if (onPopulateField !== void 0) {
+        onPopulateField(target, val);
+        return;
+      }
+      onChange?.({ [target]: val });
+    },
+    [onChange, onPopulateField]
+  );
+  const handleExtract = useCallback(async () => {
+    const url = buildExtractUrl(extractUrl, resource, field);
+    if (url === null) {
+      setError("Missing extract URL: provide `extractUrl` or both `resource` and `field`.");
+      return;
+    }
+    const sourceText = coerceSourceText(
+      formData !== void 0 && sourceField !== "" ? formData[sourceField] : ""
+    );
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          "X-CSRF-TOKEN": csrfToken ?? ""
+        },
+        body: JSON.stringify({ sourceText })
+      });
+      if (!response.ok) {
+        let message = null;
+        try {
+          const body2 = await response.json();
+          if (typeof body2.message === "string" && body2.message !== "") {
+            message = body2.message;
+          }
+        } catch {
+          message = null;
+        }
+        setError(message ?? `Extraction failed (HTTP ${String(response.status)}).`);
+        return;
+      }
+      const body = await response.json();
+      if (!isPlainRecord(body.extracted)) {
+        setError("Extraction failed: invalid response body.");
+        return;
+      }
+      setExtracted(body.extracted);
+    } catch {
+      setError("Extraction failed: network error.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [csrfToken, extractUrl, field, formData, resource, sourceField]);
+  const hasExtraction = extracted !== null && Object.keys(extracted).length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-arqel-field": "aiExtract", "data-field-name": name, children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Label, { className: "text-muted-foreground", children: [
+      "Source: ",
+      sourceField
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => {
+            void handleExtract();
+          },
+          disabled: isLoading,
+          "aria-label": buttonLabel,
+          children: [
+            isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Extracting", children: /* @__PURE__ */ jsx(Spinner, {}) }) : null,
+            /* @__PURE__ */ jsx("span", { children: buttonLabel })
+          ]
+        }
+      ),
+      hasExtraction && extracted !== null ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "default",
+          size: "sm",
+          onClick: () => {
+            applyAll(extracted);
+          },
+          children: "Apply all"
+        }
+      ) : null
+    ] }),
+    hasExtraction && extracted !== null ? /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsx("dl", { id: previewId, className: "flex flex-col gap-2", children: (targetFields.length > 0 ? targetFields : Object.keys(extracted)).map((target) => {
+      const val = extracted[target];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between gap-2 border-b border-border pb-2 last:border-b-0 last:pb-0",
+          children: [
+            /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: target }) }),
+            /* @__PURE__ */ jsxs("dd", { className: "flex items-center gap-2 flex-1 justify-end", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-sm text-foreground truncate",
+                  "data-testid": `extract-value-${target}`,
+                  children: formatPreviewValue(val)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => {
+                    applyOne(target, val);
+                  },
+                  "aria-label": `Apply ${target}`,
+                  children: "Apply"
+                }
+              )
+            ] })
+          ]
+        },
+        target
+      );
+    }) }) }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic", children: "No extraction yet \u2014 click button to start." }),
+    error !== null ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) : null
+  ] });
+}
+function buildAnalyzeUrl(override, resource, field) {
+  if (override !== void 0 && override !== "") {
+    return override;
+  }
+  if (resource && field) {
+    return `/admin/${resource}/fields/${field}/analyze-image`;
+  }
+  return null;
+}
+function isStringRecord(input) {
+  if (input === null || typeof input !== "object" || Array.isArray(input)) {
+    return false;
+  }
+  for (const value of Object.values(input)) {
+    if (typeof value !== "string") {
+      return false;
+    }
+  }
+  return true;
+}
+function readFileAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result === "string") {
+        resolve(result);
+        return;
+      }
+      reject(new Error("FileReader returned non-string result."));
+    };
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("FileReader error."));
+    };
+    reader.readAsDataURL(file);
+  });
+}
+function formatBytes(bytes) {
+  if (bytes >= 1048576) {
+    return `${(bytes / 1048576).toFixed(1)} MB`;
+  }
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${String(bytes)} B`;
+}
+function Spinner2() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      className: "animate-spin",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 12a10 10 0 0 1-10 10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function AiImageInput(props) {
+  const {
+    name,
+    value,
+    onChange,
+    props: fieldProps,
+    resource,
+    field,
+    analyzeUrl,
+    csrfToken,
+    onPopulateField
+  } = props;
+  const analyses = fieldProps?.analyses ?? [];
+  const populateFields = fieldProps?.populateFields ?? {};
+  const acceptedMimes = fieldProps?.acceptedMimes ?? [];
+  const maxFileSize = fieldProps?.maxFileSize ?? 0;
+  const buttonLabel = fieldProps?.buttonLabel ?? "Analyze with AI";
+  const reactId = useId();
+  const inputId = `arqel-ai-image-${reactId}`;
+  const [file, setFile] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [results, setResults] = useState(null);
+  const [populateMapping, setPopulateMapping] = useState(populateFields);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const handleFileChange = useCallback(
+    (event) => {
+      const next = event.target.files?.[0] ?? null;
+      setError(null);
+      setResults(null);
+      if (next === null) {
+        setFile(null);
+        setPreviewUrl(null);
+        return;
+      }
+      if (maxFileSize > 0 && next.size > maxFileSize) {
+        setError(`File too large: ${formatBytes(next.size)} (max ${formatBytes(maxFileSize)}).`);
+        setFile(null);
+        setPreviewUrl(null);
+        return;
+      }
+      setFile(next);
+      try {
+        setPreviewUrl(URL.createObjectURL(next));
+      } catch {
+        setPreviewUrl(null);
+      }
+    },
+    [maxFileSize]
+  );
+  const handleAnalyze = useCallback(async () => {
+    if (file === null) {
+      return;
+    }
+    const url = buildAnalyzeUrl(analyzeUrl, resource, field);
+    if (url === null) {
+      setError("Missing analyze URL: provide `analyzeUrl` or both `resource` and `field`.");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const imageBase64 = await readFileAsDataUrl(file);
+      const response = await fetch(url, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          "X-CSRF-TOKEN": csrfToken ?? ""
+        },
+        body: JSON.stringify({ imageBase64 })
+      });
+      if (!response.ok) {
+        let message = null;
+        try {
+          const body2 = await response.json();
+          if (typeof body2.message === "string" && body2.message !== "") {
+            message = body2.message;
+          }
+        } catch {
+          message = null;
+        }
+        setError(message ?? `Analysis failed (HTTP ${String(response.status)}).`);
+        return;
+      }
+      const body = await response.json();
+      if (!isStringRecord(body.analyses)) {
+        setError("Analysis failed: invalid response body.");
+        return;
+      }
+      setResults(body.analyses);
+      if (isStringRecord(body.populateMapping)) {
+        setPopulateMapping(body.populateMapping);
+      }
+      if (onChange !== void 0) {
+        onChange(imageBase64);
+      }
+    } catch {
+      setError("Analysis failed: network error.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [analyzeUrl, csrfToken, field, file, onChange, resource]);
+  const applyOne = useCallback(
+    (analysisKey, val) => {
+      const target = populateMapping[analysisKey];
+      if (target === void 0 || target === "") {
+        return;
+      }
+      onPopulateField?.(target, val);
+    },
+    [onPopulateField, populateMapping]
+  );
+  const applyAll = useCallback(
+    (entries) => {
+      for (const key of Object.keys(entries)) {
+        const target = populateMapping[key];
+        const val = entries[key];
+        if (target === void 0 || target === "" || val === void 0) {
+          continue;
+        }
+        onPopulateField?.(target, val);
+      }
+    },
+    [onPopulateField, populateMapping]
+  );
+  const accept = acceptedMimes.join(",");
+  const hasResults = results !== null && Object.keys(results).length > 0;
+  const canAnalyze = file !== null && !isLoading;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col gap-2",
+      "data-arqel-field": "aiImage",
+      "data-field-name": name,
+      "data-has-value": value !== null && value !== "" ? "true" : "false",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: "flex items-center justify-center w-full min-h-[6rem] rounded-sm border-2 border-dashed border-border bg-muted/40 px-4 py-6 text-sm text-muted-foreground hover:bg-muted cursor-pointer transition-colors",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: file !== null ? file.name : `Click or drop image (${accept !== "" ? accept : "any"})` }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: inputId,
+                  type: "file",
+                  accept,
+                  onChange: handleFileChange,
+                  className: "sr-only",
+                  "aria-label": "Image file"
+                }
+              )
+            ]
+          }
+        ),
+        previewUrl !== null ? /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: previewUrl,
+            alt: "Selected preview",
+            "data-testid": "image-preview",
+            className: "max-h-64 max-w-full rounded-sm"
+          }
+        ) }) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => {
+                void handleAnalyze();
+              },
+              disabled: !canAnalyze,
+              "aria-label": buttonLabel,
+              children: [
+                isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Analyzing", children: /* @__PURE__ */ jsx(Spinner2, {}) }) : null,
+                /* @__PURE__ */ jsx("span", { children: buttonLabel })
+              ]
+            }
+          ),
+          hasResults && results !== null ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "default",
+              size: "sm",
+              onClick: () => {
+                applyAll(results);
+              },
+              children: "Apply all"
+            }
+          ) : null
+        ] }),
+        hasResults && results !== null ? /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-2", children: (analyses.length > 0 ? analyses : Object.keys(results)).map((key) => {
+          const val = results[key];
+          if (val === void 0) {
+            return null;
+          }
+          const target = populateMapping[key];
+          const hasTarget = target !== void 0 && target !== "";
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between gap-2 border-b border-border pb-2 last:border-b-0 last:pb-0",
+              children: [
+                /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: key }) }),
+                /* @__PURE__ */ jsxs("dd", { className: "flex items-center gap-2 flex-1 justify-end", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-sm text-foreground truncate",
+                      "data-testid": `analysis-value-${key}`,
+                      children: val
+                    }
+                  ),
+                  hasTarget ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: () => {
+                        applyOne(key, val);
+                      },
+                      "aria-label": `Apply ${key}`,
+                      children: "Apply"
+                    }
+                  ) : null
+                ] })
+              ]
+            },
+            key
+          );
+        }) }) }) }) : null,
+        error !== null ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) : null
+      ]
+    }
+  );
+}
+var DEFAULT_BUTTON_LABEL = "Classify with AI";
+var NO_CONTEXT_TOOLTIP = "No context fields configured. Add `classifyFromFields` to enable AI classification.";
+function buildClassifyUrl(override, resource, field) {
+  if (override !== void 0 && override !== "") {
+    return override;
+  }
+  if (resource && field) {
+    return `/admin/${resource}/fields/${field}/classify`;
+  }
+  return null;
+}
+function Spinner3() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      className: "animate-spin",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 12a10 10 0 0 1-10 10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function AiSelectInput(props) {
+  const {
+    name,
+    value,
+    onChange,
+    props: fieldProps,
+    resource,
+    field,
+    formData,
+    classifyUrl,
+    csrfToken
+  } = props;
+  const options = fieldProps?.options ?? {};
+  const fallbackOption = fieldProps?.fallbackOption ?? null;
+  const hasContextFields = fieldProps?.hasContextFields ?? false;
+  const reactId = useId();
+  const selectId = `arqel-ai-select-${reactId}`;
+  const [internalValue, setInternalValue] = useState(value);
+  const isControlled = onChange !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [suggestion, setSuggestion] = useState(null);
+  const applyValue = useCallback(
+    (next) => {
+      if (isControlled && onChange) {
+        onChange(next);
+      } else {
+        setInternalValue(next);
+      }
+    },
+    [isControlled, onChange]
+  );
+  const handleSelectChange = useCallback(
+    (next) => {
+      applyValue(next === "" ? null : next);
+      setSuggestion(null);
+    },
+    [applyValue]
+  );
+  const handleClassify = useCallback(async () => {
+    const url = buildClassifyUrl(classifyUrl, resource, field);
+    if (url === null) {
+      setError("Missing classify URL: provide `classifyUrl` or both `resource` and `field`.");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    setSuggestion(null);
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          "X-CSRF-TOKEN": csrfToken ?? ""
+        },
+        body: JSON.stringify({ formData: formData ?? {} })
+      });
+      if (!response.ok) {
+        setError(`Classification failed (HTTP ${String(response.status)}).`);
+        return;
+      }
+      const body = await response.json();
+      const key = typeof body.key === "string" ? body.key : null;
+      if (key !== null) {
+        applyValue(key);
+        setSuggestion("ai");
+        return;
+      }
+      if (fallbackOption !== null && fallbackOption !== "") {
+        applyValue(fallbackOption);
+        setSuggestion("fallback");
+        return;
+      }
+      setError("Could not classify.");
+    } catch {
+      setError("Classification failed: network error.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [applyValue, classifyUrl, csrfToken, fallbackOption, field, formData, resource]);
+  const buttonDisabled = isLoading || !hasContextFields;
+  const buttonTitle = !hasContextFields ? NO_CONTEXT_TOOLTIP : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-arqel-field": "aiSelect", "data-field-name": name, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Select, { value: currentValue ?? "", onValueChange: handleSelectChange, name, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { id: selectId, className: "flex-1", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select..." }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: Object.entries(options).map(([key, label]) => /* @__PURE__ */ jsx(SelectItem, { value: key, children: label }, key)) })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => {
+            void handleClassify();
+          },
+          disabled: buttonDisabled,
+          "aria-label": DEFAULT_BUTTON_LABEL,
+          ...buttonTitle !== void 0 ? { title: buttonTitle } : {},
+          children: [
+            isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Classifying", children: /* @__PURE__ */ jsx(Spinner3, {}) }) : null,
+            /* @__PURE__ */ jsx("span", { children: DEFAULT_BUTTON_LABEL })
+          ]
+        }
+      )
+    ] }),
+    suggestion !== null ? /* @__PURE__ */ jsxs("div", { role: "status", className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "secondary",
+          className: suggestion === "ai" ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+          children: suggestion === "ai" ? "Suggested by AI" : "Used fallback"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            setSuggestion(null);
+          },
+          children: "Accept"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            setSuggestion(null);
+          },
+          children: "Pick another"
+        }
+      )
+    ] }) : null,
+    error !== null ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) : null
+  ] });
+}
+var DEFAULT_BUTTON_LABEL2 = "Generate with AI";
+var REGENERATE_LABEL = "Regenerate";
+function buildGenerateUrl(override, resource, field) {
+  if (override !== void 0 && override !== "") {
+    return override;
+  }
+  if (resource && field) {
+    return `/admin/${resource}/fields/${field}/generate`;
+  }
+  return null;
+}
+function Spinner4() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      className: "animate-spin",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 12a10 10 0 0 1-10 10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function AiTextInput(props) {
+  const {
+    name,
+    value,
+    onChange,
+    props: fieldProps,
+    resource,
+    field,
+    formData,
+    generateUrl,
+    csrfToken
+  } = props;
+  const buttonLabel = fieldProps?.buttonLabel ?? DEFAULT_BUTTON_LABEL2;
+  const maxLength = fieldProps?.maxLength ?? null;
+  const reactId = useId();
+  const textareaId = `arqel-ai-text-${reactId}`;
+  const [internalValue, setInternalValue] = useState(value);
+  const isControlled = onChange !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [hasGenerated, setHasGenerated] = useState(false);
+  const handleTextareaChange = useCallback(
+    (event) => {
+      const next = event.target.value;
+      if (isControlled && onChange) {
+        onChange(next);
+      } else {
+        setInternalValue(next);
+      }
+    },
+    [isControlled, onChange]
+  );
+  const applyGeneratedText = useCallback(
+    (next) => {
+      if (isControlled && onChange) {
+        onChange(next);
+      } else {
+        setInternalValue(next);
+      }
+    },
+    [isControlled, onChange]
+  );
+  const handleGenerate = useCallback(async () => {
+    const url = buildGenerateUrl(generateUrl, resource, field);
+    if (url === null) {
+      setError("Missing generate URL: provide `generateUrl` or both `resource` and `field`.");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          "X-CSRF-TOKEN": csrfToken ?? ""
+        },
+        body: JSON.stringify({ formData: formData ?? {} })
+      });
+      if (!response.ok) {
+        setError(`Generation failed (HTTP ${String(response.status)}).`);
+        return;
+      }
+      const body = await response.json();
+      const text = typeof body.text === "string" ? body.text : "";
+      applyGeneratedText(text);
+      setHasGenerated(true);
+    } catch {
+      setError("Generation failed: network error.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [applyGeneratedText, csrfToken, field, formData, generateUrl, resource]);
+  const triggerLabel = hasGenerated ? REGENERATE_LABEL : buttonLabel;
+  const charCount = currentValue.length;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-arqel-field": "aiText", "data-field-name": name, children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        id: textareaId,
+        name,
+        value: currentValue,
+        onChange: handleTextareaChange,
+        ...maxLength !== null ? { maxLength } : {},
+        rows: 6
+      }
+    ),
+    maxLength !== null ? /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground self-end", "aria-live": "polite", children: [
+      charCount,
+      " / ",
+      maxLength
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => {
+          void handleGenerate();
+        },
+        disabled: isLoading,
+        "aria-label": triggerLabel,
+        children: [
+          isLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Generating", children: /* @__PURE__ */ jsx(Spinner4, {}) }) : null,
+          /* @__PURE__ */ jsx("span", { children: triggerLabel })
+        ]
+      }
+    ) }),
+    error !== null ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) : null
+  ] });
+}
+var AiTextInput_default = AiTextInput;
+function buildTranslateUrl(override, resource, field) {
+  if (override !== void 0 && override !== "") {
+    return override;
+  }
+  if (resource && field) {
+    return `/admin/${resource}/fields/${field}/translate`;
+  }
+  return null;
+}
+function isStringRecord2(input) {
+  if (input === null || typeof input !== "object") {
+    return false;
+  }
+  for (const v of Object.values(input)) {
+    if (typeof v !== "string") {
+      return false;
+    }
+  }
+  return true;
+}
+function isMissing(translations, lang) {
+  const v = translations[lang];
+  return v === void 0 || v === null || v === "";
+}
+function Spinner5() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      className: "animate-spin",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 12a10 10 0 0 1-10 10",
+            stroke: "currentColor",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function AiTranslateInput(props) {
+  const {
+    name,
+    value,
+    onChange,
+    props: fieldProps,
+    resource,
+    field,
+    translateUrl,
+    csrfToken
+  } = props;
+  const languages = useMemo(() => fieldProps?.languages ?? [], [fieldProps?.languages]);
+  const defaultLanguage = fieldProps?.defaultLanguage ?? languages[0] ?? "";
+  const reactId = useId();
+  const tablistId = `arqel-ai-translate-${reactId}`;
+  const [internalValue, setInternalValue] = useState(value ?? {});
+  const isControlled = onChange !== void 0;
+  const currentValue = isControlled ? value ?? {} : internalValue;
+  const initialActive = languages.includes(defaultLanguage) ? defaultLanguage : languages[0] ?? defaultLanguage;
+  const [activeLang, setActiveLang] = useState(initialActive);
+  const [loadingLangs, setLoadingLangs] = useState(() => /* @__PURE__ */ new Set());
+  const [error, setError] = useState(null);
+  const applyValue = useCallback(
+    (next) => {
+      if (isControlled && onChange) {
+        onChange(next);
+      } else {
+        setInternalValue(next);
+      }
+    },
+    [isControlled, onChange]
+  );
+  const handleTextareaChange = useCallback(
+    (event) => {
+      const next = { ...currentValue, [activeLang]: event.target.value };
+      applyValue(next);
+    },
+    [activeLang, applyValue, currentValue]
+  );
+  const setLoadingFor = useCallback((langs, on) => {
+    setLoadingLangs((prev) => {
+      const next = new Set(prev);
+      for (const l of langs) {
+        if (on) {
+          next.add(l);
+        } else {
+          next.delete(l);
+        }
+      }
+      return next;
+    });
+  }, []);
+  const performTranslate = useCallback(
+    async (targetLanguages) => {
+      if (targetLanguages.length === 0) {
+        return;
+      }
+      const url = buildTranslateUrl(translateUrl, resource, field);
+      if (url === null) {
+        setError("Missing translate URL: provide `translateUrl` or both `resource` and `field`.");
+        return;
+      }
+      setError(null);
+      setLoadingFor(targetLanguages, true);
+      try {
+        const response = await fetch(url, {
+          method: "POST",
+          credentials: "same-origin",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "X-CSRF-TOKEN": csrfToken ?? ""
+          },
+          body: JSON.stringify({
+            sourceLanguage: defaultLanguage,
+            targetLanguages,
+            sourceText: currentValue[defaultLanguage] ?? ""
+          })
+        });
+        if (!response.ok) {
+          setError(`Translation failed (HTTP ${String(response.status)}).`);
+          return;
+        }
+        const body = await response.json();
+        const incoming = body.translations;
+        if (!isStringRecord2(incoming)) {
+          setError("Translation failed: invalid response body.");
+          return;
+        }
+        const merged = { ...currentValue, ...incoming };
+        applyValue(merged);
+      } catch {
+        setError("Translation failed: network error.");
+      } finally {
+        setLoadingFor(targetLanguages, false);
+      }
+    },
+    [
+      applyValue,
+      csrfToken,
+      currentValue,
+      defaultLanguage,
+      field,
+      resource,
+      setLoadingFor,
+      translateUrl
+    ]
+  );
+  const handleTranslateOne = useCallback(
+    (lang) => {
+      void performTranslate([lang]);
+    },
+    [performTranslate]
+  );
+  const handleTranslateAllMissing = useCallback(() => {
+    const missing = languages.filter(
+      (lang) => lang !== defaultLanguage && isMissing(currentValue, lang)
+    );
+    void performTranslate(missing);
+  }, [currentValue, defaultLanguage, languages, performTranslate]);
+  const missingCount = languages.filter(
+    (lang) => lang !== defaultLanguage && isMissing(currentValue, lang)
+  ).length;
+  const activeText = currentValue[activeLang] ?? "";
+  const activeIsLoading = loadingLangs.has(activeLang);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-arqel-field": "aiTranslate", "data-field-name": name, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: handleTranslateAllMissing,
+        disabled: missingCount === 0 || loadingLangs.size > 0,
+        children: "Translate all missing"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { role: "tablist", id: tablistId, className: "flex items-center gap-1 border-b border-border", children: languages.map((lang) => {
+      const selected = lang === activeLang;
+      const missing = isMissing(currentValue, lang);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": selected,
+          "aria-controls": `${tablistId}-panel-${lang}`,
+          "data-missing": missing ? "true" : "false",
+          onClick: () => setActiveLang(lang),
+          className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium border-b-2 -mb-px transition-colors " + (selected ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: lang }),
+            missing ? /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "secondary",
+                role: "img",
+                "aria-label": "Missing translation",
+                "data-testid": `missing-dot-${lang}`,
+                className: "px-1 py-0",
+                children: "\u2022"
+              }
+            ) : null
+          ]
+        },
+        lang
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { role: "tabpanel", id: `${tablistId}-panel-${activeLang}`, className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          name: `${name}[${activeLang}]`,
+          value: activeText,
+          onChange: handleTextareaChange,
+          rows: 6,
+          "aria-label": `Translation in ${activeLang}`
+        }
+      ),
+      activeLang !== defaultLanguage ? /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => handleTranslateOne(activeLang),
+          disabled: activeIsLoading,
+          children: [
+            activeIsLoading ? /* @__PURE__ */ jsx("span", { role: "status", "aria-label": "Translating", children: /* @__PURE__ */ jsx(Spinner5, {}) }) : null,
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Translate from ",
+              defaultLanguage
+            ] })
+          ]
+        }
+      ) }) : null
+    ] }),
+    error !== null ? /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }) : null
+  ] });
+}
+
+export { AiExtractInput, AiImageInput, AiSelectInput, AiTextInput, AiTranslateInput, AiTextInput_default as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map