@fraza/module-ai 0.0.0-stage → 0.4.23

package/dist/admin/AiStudio.client.js

@@ -0,0 +1,453 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AI_CLASSES, Button, ConfirmDialog, Modal } from "@fraza/core/shared/components";
+import { apiFetch } from "@fraza/core/shared/http";
+import { useToast } from "@fraza/core/toast";
+import { SparklesIcon } from "@fraza/icons/SparklesIcon";
+import { hasHtmlField, REQUEST_MAX } from "../studio.js";
+import { AI_API } from "./paths.js";
+import { BAR_CLASS, LABEL_CLASS, StudioClose, StudioLabel, WINDOW_CLASS } from "./StudioBar.client.js";
+import StudioCompose from "./StudioCompose.client.js";
+import { SendButton, StudioBox } from "./StudioComposer.client.js";
+import StudioPlan from "./StudioPlan.client.js";
+import { CONTENT_TRANSITION, WORKING_CONTENT, WorkingGlows, WorkingWord } from "./StudioWorking.client.js";
+import { isEmptyValues, planOf, planToSend, WORK_WORDS } from "./studio-compose.js";
+import { compareVersion, fieldsOf } from "./studio-diff.js";
+const REVIEW_PLAN = "Propose une nouvelle structure pour ce contenu.";
+const WRITE_FROM_PLAN = "R\xE9\xE9cris le contenu en suivant ce plan. Garde ce qui fonctionne d\xE9j\xE0.";
+const SEGMENT = {
+  same: "",
+  del: "rounded-[3px] bg-danger-soft px-px text-danger line-through decoration-danger/60",
+  add: "rounded-[3px] bg-accent-soft px-px text-fg",
+  addClean: "underline decoration-accent/60 decoration-1 underline-offset-4"
+};
+const BLOCK_STYLE = {
+  h1: "text-[20px] leading-[28px] font-semibold text-fg",
+  h2: "text-[18px] leading-[26px] font-semibold text-fg",
+  h3: "text-[16px] leading-[24px] font-semibold text-fg",
+  h4: "text-[15px] leading-[22px] font-semibold text-fg",
+  blockquote: "border-l-2 border-line-strong pl-3 italic",
+  ul: "whitespace-pre-line",
+  ol: "whitespace-pre-line"
+};
+function shownSegments(segments, kept, view) {
+  if (!kept) return segments.filter(([kind]) => kind !== "add").map(([, text]) => ["same", text]);
+  if (view === "clean") return segments.filter(([kind]) => kind !== "del").map(([kind, text]) => [kind === "add" ? "addClean" : "same", text]);
+  return segments;
+}
+function Segments({ segments }) {
+  return segments.map(([kind, text], index) => /* @__PURE__ */ jsx("span", { className: SEGMENT[kind], children: text }, index));
+}
+function Piece({ piece, kept, current, view, titleLike, onPick }) {
+  const changed = piece.kind !== "same";
+  const style = titleLike ? "text-[22px] leading-[30px] font-semibold tracking-[-0.01em] text-fg" : BLOCK_STYLE[piece.tag] ?? "text-[14.5px] leading-[24px] text-fg-secondary";
+  if (piece.marker) {
+    return /* @__PURE__ */ jsx("span", { className: "inline-flex w-fit items-center gap-1.5 rounded-control border border-dashed border-line-strong px-2.5 py-1 text-[12px] text-fg-muted", children: "\xC9l\xE9ment gard\xE9 tel quel (image, vid\xE9o, bloc\u2026)" });
+  }
+  const body = /* @__PURE__ */ jsx(Segments, { segments: changed ? shownSegments(piece.segments, kept, view) : piece.segments });
+  if (!changed) return /* @__PURE__ */ jsx("div", { className: style, children: body });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: -1,
+      onClick: onPick,
+      className: `relative -ml-4 cursor-pointer rounded-control py-0.5 pl-4 pr-1 transition-colors ${current ? "bg-accent-soft/40" : "hover:bg-surface-muted"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `absolute bottom-1 left-0 top-1 w-[2px] rounded-full transition-colors ${kept ? "bg-accent" : "bg-line-strong"}` }),
+        /* @__PURE__ */ jsx("div", { className: `${style} transition-opacity ${kept ? "" : "opacity-60"}`, children: body })
+      ]
+    }
+  );
+}
+function Toggle({ options, value, onChange }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 rounded-control border border-line bg-surface-muted p-0.5", children: options.map(([key, label]) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": value === key,
+      onClick: () => onChange(key),
+      className: `h-7 rounded-[6px] px-2.5 text-[12.5px] font-medium transition-colors ${value === key ? "bg-surface text-fg shadow-[inset_0_0_0_1px_var(--color-line-strong)]" : "text-fg-muted hover:text-fg"}`,
+      children: label
+    },
+    key
+  )) });
+}
+function Kbd({ children }) {
+  return /* @__PURE__ */ jsx("kbd", { className: "ml-1 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[4px] border border-current/30 px-1 font-sans text-[10.5px] opacity-70", children });
+}
+function cardTitle(fields, version) {
+  for (const field of fields) {
+    const value = version == null ? void 0 : version[field.key];
+    if (field.kind === "text" && typeof value === "string" && value.trim() && !value.includes("<")) return value;
+  }
+  return "Le texte retravaill\xE9";
+}
+function AiStudio(props) {
+  const { isOpen, action, scope, context, current, onApply, onClose } = props;
+  const [composing] = useState(() => isEmptyValues(fieldsOf(action == null ? void 0 : action.output), current));
+  if (!isOpen) return null;
+  if (composing) return /* @__PURE__ */ jsx(StudioCompose, { action, scope, context, current, onApply, onClose });
+  return /* @__PURE__ */ jsx(StudioRevise, { ...props });
+}
+function StudioRevise({ isOpen, action, scope, context, current, onApply, onClose }) {
+  var _a;
+  const toast = useToast();
+  const fields = useMemo(() => fieldsOf(action == null ? void 0 : action.output), [action]);
+  const planned = useMemo(() => hasHtmlField(action == null ? void 0 : action.output), [action]);
+  const [plan, setPlan] = useState(null);
+  const [planOpen, setPlanOpen] = useState(false);
+  const [pending, setPending] = useState(null);
+  const [turns, setTurns] = useState([]);
+  const [shown, setShown] = useState(null);
+  const [kept, setKept] = useState({});
+  const [cursor, setCursor] = useState(0);
+  const [view, setView] = useState("diff");
+  const [draft, setDraft] = useState("");
+  const [working, setWorking] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const listRef = useRef(null);
+  const docRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    setTurns([]);
+    setShown(null);
+    setKept({});
+    setCursor(0);
+    setView("diff");
+    setDraft("");
+    setConfirming(false);
+    setPlan(null);
+    setPlanOpen(false);
+  }, [isOpen, action]);
+  useEffect(() => {
+    var _a2;
+    (_a2 = listRef.current) == null ? void 0 : _a2.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
+  }, [turns, working]);
+  const shownKey = shown ? `${shown.turn}.${shown.version}` : null;
+  const shownTurn = shown ? turns[shown.turn] : null;
+  const version = ((_a = shownTurn == null ? void 0 : shownTurn.versions) == null ? void 0 : _a[shown.version]) ?? null;
+  const base = (shownTurn == null ? void 0 : shownTurn.base) ?? current;
+  const carried = useMemo(() => (shownTurn == null ? void 0 : shownTurn.carried) ?? {}, [shownTurn]);
+  const keptHere = useMemo(() => shownKey ? kept[shownKey] ?? {} : {}, [kept, shownKey]);
+  const result = useMemo(() => compareVersion(fields, base, version ?? {}, keptHere), [fields, base, version, keptHere]);
+  const total = useMemo(() => ({ ...carried, ...result.merged }), [carried, result.merged]);
+  const changes = version ? result.changes : [];
+  const keptCount = changes.filter((change) => keptHere[change.id] !== false).length;
+  const at = Math.min(cursor, Math.max(0, changes.length - 1));
+  const currentChange = changes[at] ?? null;
+  const setKeep = useCallback((id, value) => {
+    if (!shownKey) return;
+    setKept((all) => ({ ...all, [shownKey]: { ...all[shownKey] ?? {}, [id]: value } }));
+  }, [shownKey]);
+  const decide = useCallback((value) => {
+    if (!currentChange) return;
+    setKeep(currentChange.id, value);
+    setCursor(Math.min(changes.length - 1, at + 1));
+  }, [at, changes.length, currentChange, setKeep]);
+  const setAll = useCallback((value) => {
+    if (!shownKey) return;
+    setKept((all) => ({ ...all, [shownKey]: Object.fromEntries(changes.map((change) => [change.id, value])) }));
+  }, [changes, shownKey]);
+  const send = useCallback(async (request, variants = 1, { phase = null, plan: sendPlan = null, shown: shown2 = request } = {}) => {
+    const text = request.trim();
+    if (!text || working) return;
+    const asks = turns.filter((turn) => turn.versions || turn.planned).map((turn) => turn.request ?? turn.ask);
+    const index = turns.length;
+    const previous = version ? total : {};
+    setTurns((all) => [...all, { ask: shown2.trim(), request: text, carried: previous, base: { ...current, ...previous } }]);
+    setDraft("");
+    setWorking(true);
+    setPending(phase);
+    try {
+      const data = await apiFetch(`${AI_API}/run`, {
+        method: "POST",
+        body: {
+          prompt: action.name,
+          input: { request: text },
+          scope,
+          context: typeof context === "function" ? context() : context ?? null,
+          turn: {
+            asks,
+            previous: Object.keys(previous).length > 0 ? previous : null,
+            variants,
+            ...phase ? { phase } : {},
+            ...sendPlan ? { plan: sendPlan } : {}
+          }
+        }
+      });
+      if (phase === "plan") {
+        setTurns((all) => all.map((turn, i) => i === index ? { ...turn, message: data.data.message, planned: true } : turn));
+        setPlan(planOf(data.data));
+        setPlanOpen(true);
+        return;
+      }
+      setTurns((all) => all.map((turn, i) => i === index ? { ...turn, message: data.data.message, versions: data.data.versions } : turn));
+      setShown({ turn: index, version: 0 });
+      setCursor(0);
+      setView("diff");
+      setPlanOpen(false);
+    } catch (error) {
+      setTurns((all) => all.map((turn, i) => i === index ? { ...turn, error: error.message || "L'IA n'a pas pu r\xE9pondre." } : turn));
+      setDraft(shown2);
+    } finally {
+      setWorking(false);
+      setPending(null);
+    }
+  }, [action, context, current, scope, total, turns, version, working]);
+  const apply = useCallback(() => {
+    if (Object.keys(total).length === 0) return;
+    onApply(total);
+    onClose();
+    toast.success("Les changements gard\xE9s sont appliqu\xE9s au formulaire. Relire avant d'enregistrer.");
+  }, [onApply, onClose, total, toast]);
+  const requestClose = useCallback(() => {
+    if (turns.length > 0) setConfirming(true);
+    else onClose();
+  }, [onClose, turns.length]);
+  const onDocKey = useCallback((event) => {
+    if (!currentChange) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setCursor(Math.min(changes.length - 1, at + 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setCursor(Math.max(0, at - 1));
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      decide(true);
+    } else if (event.key === "Backspace") {
+      event.preventDefault();
+      decide(false);
+    }
+  }, [at, changes.length, currentChange, decide]);
+  const suggestions = (action == null ? void 0 : action.suggestions) ?? [];
+  const showingPlan = planOpen && plan !== null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Modal, { variant: "ai", bare: true, size: "full", isOpen, onClose: requestClose, closable: !working, title: (action == null ? void 0 : action.heading) ?? "Le studio", children: /* @__PURE__ */ jsxs("div", { className: WINDOW_CLASS, children: [
+      /* @__PURE__ */ jsxs("aside", { "aria-label": "Conversation", className: "flex w-[340px] shrink-0 flex-col border-r border-line", children: [
+        /* @__PURE__ */ jsx("div", { className: LABEL_CLASS, children: /* @__PURE__ */ jsx(StudioLabel, { label: (action == null ? void 0 : action.label) ?? "Le studio" }) }),
+        /* @__PURE__ */ jsxs("div", { ref: listRef, className: "flex min-h-0 flex-1 flex-col gap-3.5 overflow-y-auto px-5 py-5", children: [
+          turns.length === 0 && /* @__PURE__ */ jsxs("div", { className: `${AI_CLASSES.arrive} flex flex-col gap-1.5`, children: [
+            /* @__PURE__ */ jsx("p", { className: `m-0 text-[22px] leading-[29px] text-fg ${AI_CLASSES.voice}`, children: "Qu'est-ce qu'on change ?" }),
+            /* @__PURE__ */ jsx("p", { className: "m-0 text-[12.5px] text-fg-muted", children: "L'IA propose, on garde ce qui pla\xEEt." })
+          ] }),
+          turns.map((turn, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: `${AI_CLASSES.arrive} max-w-[260px] self-end whitespace-pre-line rounded-[12px_12px_4px_12px] border border-line bg-surface-muted px-3 py-2 text-[13px] leading-[19px] text-fg`, children: turn.ask }),
+            turn.error && /* @__PURE__ */ jsx("p", { className: "m-0 text-[12.5px] text-danger", children: turn.error }),
+            turn.planned && /* @__PURE__ */ jsxs("div", { className: `${AI_CLASSES.arrive} flex items-start gap-2.5`, children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-[6px] bg-accent-soft text-accent", children: /* @__PURE__ */ jsx(SparklesIcon, { className: "h-3 w-3" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: `m-0 text-[15px] leading-[22px] text-fg ${AI_CLASSES.voice}`, children: turn.message }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": showingPlan,
+                    onClick: () => setPlanOpen(true),
+                    className: `flex items-center justify-between rounded-control border px-3 py-2 text-left text-[11.5px] text-fg-muted transition-colors ${showingPlan ? AI_CLASSES.optionPicked : AI_CLASSES.option}`,
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "Plan \xB7 ",
+                        (plan == null ? void 0 : plan.sections.length) ?? 0,
+                        " sections"
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "text-accent", children: showingPlan ? "Affich\xE9" : "Voir" })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            turn.versions && /* @__PURE__ */ jsxs("div", { className: `${AI_CLASSES.arrive} flex items-start gap-2.5`, children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-[6px] bg-accent-soft text-accent", children: /* @__PURE__ */ jsx(SparklesIcon, { className: "h-3 w-3" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: `m-0 text-[15px] leading-[22px] text-fg ${AI_CLASSES.voice}`, children: turn.message }),
+                turn.versions.map((item, v) => {
+                  const active = (shown == null ? void 0 : shown.turn) === index && (shown == null ? void 0 : shown.version) === v;
+                  const count = compareVersion(fields, turn.base ?? current, item, {}).changes.length;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-pressed": active,
+                      onClick: () => {
+                        setShown({ turn: index, version: v });
+                        setCursor(0);
+                      },
+                      className: `flex flex-col gap-1 rounded-control border px-3 py-2 text-left transition-colors ${active ? AI_CLASSES.optionPicked : AI_CLASSES.option}`,
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between text-[11.5px] text-fg-muted", children: [
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            turn.versions.length > 1 ? `Version ${String.fromCharCode(65 + v)} \xB7 ` : "",
+                            count,
+                            " changement",
+                            count > 1 ? "s" : ""
+                          ] }),
+                          /* @__PURE__ */ jsx("span", { className: "text-accent", children: active ? "Affich\xE9e" : "Voir" })
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-[13px] font-medium leading-[18px] text-fg", children: cardTitle(fields, item) })
+                      ]
+                    },
+                    v
+                  );
+                })
+              ] })
+            ] })
+          ] }, index)),
+          working && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "fraza-ai-pulse mx-1.5 h-2 w-2 rounded-full bg-accent" }),
+            /* @__PURE__ */ jsx(WorkingWord, { words: WORK_WORDS[pending === "plan" ? "plan" : "rework"], className: "text-[15px] text-fg-muted" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 px-5 pb-5 pt-2", children: [
+          (suggestions.length > 0 || planned) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+            planned && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: working,
+                onClick: () => send(REVIEW_PLAN, 1, { phase: "plan", shown: "Revoir le plan" }),
+                className: "h-7 rounded-full border border-accent-line bg-accent-soft px-2.5 text-[12.5px] text-accent transition-colors disabled:opacity-50",
+                children: "Revoir le plan"
+              }
+            ),
+            suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: working,
+                onClick: () => send(suggestion.request, suggestion.variants),
+                className: "h-7 rounded-full border border-line bg-surface-muted px-2.5 text-[12.5px] text-fg-secondary transition-colors hover:border-accent-line hover:bg-accent-soft hover:text-fg disabled:opacity-50",
+                children: suggestion.label
+              },
+              suggestion.label
+            ))
+          ] }),
+          /* @__PURE__ */ jsx("form", { onSubmit: (event) => {
+            event.preventDefault();
+            send(draft);
+          }, children: /* @__PURE__ */ jsxs(StudioBox, { rounded: "rounded-[14px]", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                rows: 3,
+                value: draft,
+                maxLength: REQUEST_MAX,
+                "aria-label": "Demande",
+                placeholder: "Ce qui ne va pas, ce qui manque, le ton voulu\u2026",
+                onChange: (event) => setDraft(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" && !event.shiftKey) {
+                    event.preventDefault();
+                    send(draft);
+                  }
+                },
+                className: "relative block w-full resize-none border-0 bg-transparent px-3 pt-2.5 text-[13.5px] leading-5 text-fg outline-none placeholder:text-fg-subtle"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between px-3 pb-2 pt-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[11.5px] text-fg-subtle", children: "Entr\xE9e pour envoyer" }),
+              /* @__PURE__ */ jsx(SendButton, { label: "Envoyer", size: "h-8 w-8", disabled: working || !draft.trim() })
+            ] })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { "aria-label": "Le contenu", className: "relative flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: BAR_CLASS, children: [
+          showingPlan ? /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", disabled: working, onClick: () => setPlanOpen(false), children: "Retour au contenu" }) : version && changes.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Toggle, { options: [["diff", "Changements"], ["clean", "R\xE9sultat"]], value: view, onChange: setView }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[12.5px] text-fg-muted", children: [
+              keptCount,
+              " sur ",
+              changes.length,
+              " gard\xE9s"
+            ] }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setAll(true), className: "text-[12.5px] text-accent hover:underline", children: "Tout garder" }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setAll(false), className: "text-[12.5px] text-fg-muted hover:text-fg", children: "Tout refuser" })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-[12.5px] text-fg-muted", children: version ? "Cette version ne change rien." : "Rien n'est enregistr\xE9 avant la relecture." }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          showingPlan ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ai",
+              size: "sm",
+              icon: SparklesIcon,
+              disabled: working || plan.sections.every((section) => !section.title.trim()),
+              onClick: () => send(WRITE_FROM_PLAN, 1, { plan: planToSend(plan), shown: "R\xE9\xE9crire selon ce plan" }),
+              children: "R\xE9\xE9crire selon ce plan"
+            }
+          ) : /* @__PURE__ */ jsx(Button, { variant: "ai", size: "sm", onClick: apply, disabled: working || Object.keys(total).length === 0, children: keptCount > 0 ? `Appliquer ${keptCount} changement${keptCount > 1 ? "s" : ""}` : "Appliquer" }),
+          /* @__PURE__ */ jsx(StudioClose, { onClose: requestClose, disabled: working })
+        ] }),
+        showingPlan && /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto bg-canvas", children: /* @__PURE__ */ jsx(StudioPlan, { plan, onChange: setPlan, disabled: working }) }),
+        !showingPlan && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("div", { ref: docRef, tabIndex: 0, onKeyDown: onDocKey, className: "relative min-h-0 flex-1 overflow-y-auto outline-none", children: /* @__PURE__ */ jsx("div", { className: `mx-auto flex max-w-[680px] flex-col gap-6 px-6 py-6 ${CONTENT_TRANSITION} ${working ? WORKING_CONTENT : ""}`, children: fields.map((field, fieldIndex) => {
+              const compared = result.compared[field.key];
+              if (!compared || compared.pieces.every((piece) => piece.segments.length === 0)) return null;
+              return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[11.5px] font-medium text-fg-subtle", children: field.label }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: compared.pieces.map((piece) => {
+                  const index = changes.findIndex((change) => change.id === piece.id);
+                  return /* @__PURE__ */ jsx(
+                    Piece,
+                    {
+                      piece,
+                      view,
+                      kept: keptHere[piece.id] !== false,
+                      current: index === at && index !== -1,
+                      titleLike: fieldIndex === 0 && !compared.html,
+                      onPick: () => {
+                        var _a2;
+                        setCursor(index);
+                        (_a2 = docRef.current) == null ? void 0 : _a2.focus();
+                      }
+                    },
+                    piece.id
+                  );
+                }) })
+              ] }, field.key);
+            }) }) }),
+            /* @__PURE__ */ jsx(WorkingGlows, { active: working })
+          ] }),
+          currentChange && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 border-t border-line px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", "aria-hidden": "true", children: changes.map((change, index) => /* @__PURE__ */ jsx("span", { className: `h-1.5 rounded-full transition-all ${index === at ? "w-4 bg-accent" : `w-1.5 ${keptHere[change.id] !== false ? "bg-accent/45" : "bg-line-strong"}`}` }, change.id)) }),
+            /* @__PURE__ */ jsxs("span", { className: "truncate text-[12.5px] text-fg-muted", children: [
+              at + 1,
+              " sur ",
+              changes.length,
+              " \xB7 ",
+              currentChange.field.label
+            ] }),
+            /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", onClick: () => decide(false), children: [
+              "Refuser",
+              /* @__PURE__ */ jsx(Kbd, { children: "\u232B" })
+            ] }),
+            /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", onClick: () => decide(true), children: [
+              "Garder",
+              /* @__PURE__ */ jsx(Kbd, { children: "\u21B5" })
+            ] })
+          ] }) })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        isOpen: confirming,
+        title: "Fermer le studio ?",
+        description: "La conversation et les changements non appliqu\xE9s seront perdus.",
+        confirmLabel: "Fermer",
+        onConfirm: () => {
+          setConfirming(false);
+          onClose();
+        },
+        onCancel: () => setConfirming(false)
+      }
+    )
+  ] });
+}
+export {
+  AiStudio as default
+};

package/dist/admin/AiUsageWidget.client.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { registerWidget } from "@fraza/core/features/admin";
+import { useAdminHref } from "@fraza/core/features/admin/components";
+import { StatCard } from "@fraza/core/shared/components";
+import { SOURCE } from "../source.js";
+import { formatTokens } from "./format.js";
+import { AI_WIDGETS } from "./widgets.js";
+function AiUsageWidget({ data, loading }) {
+  const adminHref = useAdminHref();
+  if (!loading && !data) return null;
+  const total = data ? data.inputTokens + data.outputTokens : 0;
+  const change = !data ? void 0 : !data.configured ? "IA non configur\xE9e" : data.errors > 0 ? `${data.errors} appels en \xE9chec sur ${data.calls}` : `${data.calls} appels`;
+  return /* @__PURE__ */ jsx(
+    StatCard,
+    {
+      title: "Jetons d'IA ce mois-ci",
+      value: data ? formatTokens(total) : "",
+      change,
+      tone: data && (!data.configured || data.errors > 0) ? "warning" : "default",
+      href: adminHref("ai"),
+      linkLabel: "Voir la page IA",
+      loading
+    }
+  );
+}
+registerWidget({ ...AI_WIDGETS.USAGE, Component: AiUsageWidget }, { source: SOURCE });

package/dist/admin/StudioBar.client.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SparklesIcon } from "@fraza/icons/SparklesIcon";
+function StudioLabel({ label }) {
+  return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-[6px] bg-accent-soft text-accent", children: /* @__PURE__ */ jsx(SparklesIcon, { className: "h-3 w-3" }) }),
+    /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-medium text-fg", children: label })
+  ] });
+}
+function StudioClose({ onClose, disabled = false }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Fermer",
+      disabled,
+      onClick: onClose,
+      className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-control text-fg-muted transition-colors hover:bg-line-soft hover:text-fg disabled:opacity-40",
+      children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
+    }
+  );
+}
+const WINDOW_CLASS = "flex h-[min(820px,calc(90dvh-2px))]";
+const LABEL_CLASS = "flex h-14 shrink-0 items-center border-b border-line px-5";
+const BAR_CLASS = "flex h-14 shrink-0 items-center gap-3 border-b border-line pl-5 pr-3";
+export {
+  BAR_CLASS,
+  LABEL_CLASS,
+  StudioClose,
+  StudioLabel,
+  WINDOW_CLASS
+};