@fraza/module-ai 0.0.0-stage → 0.4.23

package/dist/admin/StudioCompose.client.js

@@ -0,0 +1,457 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useLayoutEffect, 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 StudioComposer, { SendButton, StudioBox } from "./StudioComposer.client.js";
+import StudioFields from "./StudioFields.client.js";
+import StudioPlan from "./StudioPlan.client.js";
+import { CONTENT_TRANSITION, WORKING_CONTENT, WorkingGlows, WorkingWord } from "./StudioWorking.client.js";
+import { firstRequest, groupHints, hasValue, mergeVersion, planOf, planToSend, WORK_WORDS } from "./studio-compose.js";
+import { fieldsOf } from "./studio-diff.js";
+const START_KEY = "fraza-ai-studio-start:";
+const WRITE_FROM_PLAN = "R\xE9dige le contenu complet en suivant ce plan.";
+const WRITE_NOW = "R\xE9dige le contenu complet maintenant, sans plan.";
+const REVIEW_PLAN = "Propose une nouvelle structure pour ce contenu.";
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+const MORPH = 700;
+function rectIn(el, base) {
+  if (!el || !base) return null;
+  const r = el.getBoundingClientRect();
+  return { left: r.left - base.left, top: r.top - base.top, width: r.width, height: r.height };
+}
+function ghostOut(win, snapshot, keyframes, options) {
+  if (!win || !snapshot || !snapshot.node.animate) return;
+  const node = snapshot.node;
+  Object.assign(node.style, {
+    position: "absolute",
+    left: `${snapshot.rect.left}px`,
+    top: `${snapshot.rect.top}px`,
+    width: `${snapshot.rect.width}px`,
+    margin: "0",
+    pointerEvents: "none",
+    zIndex: "20"
+  });
+  node.setAttribute("aria-hidden", "true");
+  node.removeAttribute("id");
+  win.appendChild(node);
+  const animation = node.animate(keyframes, { easing: EASE, fill: "forwards", ...options });
+  animation.onfinish = () => node.remove();
+  animation.oncancel = () => node.remove();
+}
+function flipFrom(el, from, base, options = {}, extra = {}) {
+  if (!(el == null ? void 0 : el.animate) || !from) return;
+  const to = rectIn(el, base);
+  el.animate([
+    { transform: `translate(${from.left - to.left}px, ${from.top - to.top}px)`, ...extra.from ?? {} },
+    { transform: "none", ...extra.to ?? {} }
+  ], { duration: MORPH, easing: EASE, fill: "backwards", ...options });
+}
+function readStart(name) {
+  try {
+    return window.localStorage.getItem(START_KEY + name) === "write" ? "write" : "plan";
+  } catch {
+    return "plan";
+  }
+}
+function saveStart(name, value) {
+  try {
+    window.localStorage.setItem(START_KEY + name, value);
+  } catch {
+  }
+}
+function reducedMotion() {
+  var _a;
+  return typeof window !== "undefined" && ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+}
+function filledValues(values) {
+  return Object.fromEntries(Object.entries(values).filter(([, value]) => hasValue(value)));
+}
+function listOf(labels) {
+  if (labels.length <= 1) return labels.join("");
+  return `${labels.slice(0, -1).join(", ")} et ${labels.at(-1)}`;
+}
+function StepPill({ step, active, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-current": active ? "step" : void 0,
+      onClick,
+      className: `h-7 rounded-full border px-2.5 text-[12px] transition-colors ${active ? "border-accent bg-accent-soft font-medium text-accent" : "border-line text-fg-secondary hover:border-line-strong hover:text-fg"}`,
+      children: step.label
+    }
+  );
+}
+function StudioCompose({ 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 hints = useMemo(() => (action == null ? void 0 : action.hints) ?? [], [action]);
+  const hintGroups = useMemo(() => groupHints(hints), [hints]);
+  const suggestions = ((action == null ? void 0 : action.suggestions) ?? []).filter((suggestion) => suggestion.variants === 1);
+  const [start, setStart] = useState(() => planned ? readStart(action.name) : "write");
+  const [ticked, setTicked] = useState(() => /* @__PURE__ */ new Set());
+  const [draft, setDraft] = useState("");
+  const [chat, setChat] = useState([]);
+  const [asks, setAsks] = useState([]);
+  const [steps, setSteps] = useState(() => [{ label: "D\xE9part", values: { ...current } }]);
+  const [at, setAt] = useState(0);
+  const [plan, setPlan] = useState(null);
+  const [working, setWorking] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [startError, setStartError] = useState(null);
+  const [pending, setPending] = useState(null);
+  const listRef = useRef(null);
+  const winRef = useRef(null);
+  const questionRef = useRef(null);
+  const composerRef = useRef(null);
+  const waitBubbleRef = useRef(null);
+  const waitLineRef = useRef(null);
+  const firstBubbleRef = useRef(null);
+  const firstMessageRef = useRef(null);
+  const dividerRef = useRef(null);
+  const fieldRef = useRef(null);
+  const barRef = useRef(null);
+  const contentRef = useRef(null);
+  const toWait = useRef(null);
+  const toSplit = useRef(null);
+  const answered = steps.length > 1;
+  const waiting = !answered && chat.length > 0;
+  const started = chat.length > 0;
+  const step = steps[at];
+  const values = step.values;
+  const showingPlan = Boolean(plan) && step.plan === plan;
+  const versions = steps.slice(0, at + 1).filter((item, index) => index > 0 && !item.plan).length;
+  const workKind = pending === "plan" ? "plan" : versions === 0 ? "write" : "rework";
+  useEffect(() => {
+    var _a2;
+    (_a2 = listRef.current) == null ? void 0 : _a2.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
+  }, [chat, working]);
+  useLayoutEffect(() => {
+    var _a2;
+    if (!waiting || !toWait.current) return;
+    const before = toWait.current;
+    toWait.current = null;
+    if (reducedMotion()) return;
+    const base = (_a2 = winRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+    ghostOut(winRef.current, before.composer, [
+      { opacity: 1, transform: "none", filter: "blur(0)" },
+      { opacity: 0, transform: "scale(.97)", filter: "blur(4px)" }
+    ], { duration: 450 });
+    flipFrom(questionRef.current, before.question, base, { duration: 500 });
+  }, [waiting]);
+  useLayoutEffect(() => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!answered || !toSplit.current) return;
+    const before = toSplit.current;
+    toSplit.current = null;
+    if (reducedMotion()) return;
+    const base = (_a2 = winRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+    ghostOut(winRef.current, before.question, [
+      { opacity: 1, transform: "none", filter: "blur(0)" },
+      { opacity: 0, transform: "translateY(-24px)", filter: "blur(6px)" }
+    ], { duration: MORPH });
+    flipFrom(firstBubbleRef.current, before.bubble, base);
+    flipFrom(firstMessageRef.current, before.line, base, {}, { from: { opacity: 0 }, to: { opacity: 1 } });
+    (_c = (_b = dividerRef.current) == null ? void 0 : _b.animate) == null ? void 0 : _c.call(_b, [{ transform: "scaleY(0)" }, { transform: "scaleY(1)" }], { duration: MORPH, delay: 80, easing: EASE, fill: "backwards" });
+    (_e = (_d = fieldRef.current) == null ? void 0 : _d.animate) == null ? void 0 : _e.call(_d, [{ opacity: 0, transform: "translateY(24px)" }, { opacity: 1, transform: "none" }], { duration: MORPH, delay: 220, easing: EASE, fill: "backwards" });
+    (_g = (_f = barRef.current) == null ? void 0 : _f.animate) == null ? void 0 : _g.call(_f, [{ opacity: 0 }, { opacity: 1 }], { duration: MORPH, delay: 300, easing: EASE, fill: "backwards" });
+    const content = contentRef.current;
+    (_h = content == null ? void 0 : content.animate) == null ? void 0 : _h.call(content, [{ opacity: 0, transform: "translateX(40px)" }, { opacity: 1, transform: "none" }], { duration: MORPH, delay: 280, easing: EASE, fill: "backwards" });
+    [...((_i = content == null ? void 0 : content.firstElementChild) == null ? void 0 : _i.children) ?? []].slice(0, 6).forEach((card, index) => {
+      var _a3;
+      (_a3 = card.animate) == null ? void 0 : _a3.call(card, [{ opacity: 0, transform: "translateY(12px)" }, { opacity: 1, transform: "none" }], { duration: 500, delay: 420 + index * 100, easing: EASE, fill: "backwards" });
+    });
+  }, [answered]);
+  const pushStep = useCallback((next) => {
+    setSteps((all) => [...all.slice(0, at + 1), next]);
+    setAt(at + 1);
+  }, [at]);
+  const send = useCallback(async (request, { phase = null, sendPlan = null, shown = request } = {}) => {
+    var _a2, _b;
+    const text = request.trim();
+    if (!text || working) return;
+    const index = chat.length;
+    setChat((all) => [...all, { ask: shown.trim() }]);
+    setDraft("");
+    setWorking(true);
+    setPending(phase);
+    const previous = filledValues(values);
+    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: 1,
+            ...phase ? { phase } : {},
+            ...sendPlan ? { plan: sendPlan } : {}
+          }
+        }
+      });
+      if (steps.length === 1) {
+        const base = (_a2 = winRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+        toSplit.current = {
+          question: questionRef.current ? { node: questionRef.current.cloneNode(true), rect: rectIn(questionRef.current, base) } : null,
+          bubble: rectIn(waitBubbleRef.current, base),
+          line: rectIn(waitLineRef.current, base)
+        };
+      }
+      setAsks((all) => [...all, text]);
+      setChat((all) => all.map((item, i) => i === index ? { ...item, message: data.data.message } : item));
+      if (phase === "plan") {
+        const next = planOf(data.data);
+        setPlan(next);
+        pushStep({ label: "Plan", values, plan: next });
+      } else {
+        const version = ((_b = data.data.versions) == null ? void 0 : _b[0]) ?? {};
+        pushStep({ label: `V${versions + 1}`, values: mergeVersion(fields, values, version) });
+      }
+    } catch (error) {
+      const message = error.message || "L'IA n'a pas pu r\xE9pondre.";
+      if (steps.length === 1) {
+        setChat([]);
+        setStartError(message);
+      } else {
+        setChat((all) => all.map((item, i) => i === index ? { ...item, error: message } : item));
+      }
+      setDraft(shown);
+    } finally {
+      setWorking(false);
+      setPending(null);
+    }
+  }, [action, asks, chat.length, context, fields, pushStep, scope, steps.length, values, versions, working]);
+  const begin = useCallback((event) => {
+    var _a2;
+    event == null ? void 0 : event.preventDefault();
+    if (!draft.trim() || working) return;
+    const base = (_a2 = winRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+    toWait.current = {
+      composer: composerRef.current ? { node: composerRef.current.cloneNode(true), rect: rectIn(composerRef.current, base) } : null,
+      question: rectIn(questionRef.current, base)
+    };
+    setStartError(null);
+    const request = firstRequest(draft, hints, ticked);
+    if (planned) saveStart(action.name, start);
+    send(request, { phase: planned && start === "plan" ? "plan" : null, shown: draft });
+  }, [action, draft, hints, planned, send, start, ticked, working]);
+  const toggleHint = useCallback((label) => {
+    setTicked((all) => {
+      const next = new Set(all);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  }, []);
+  const pickInGroup = useCallback((group, label) => {
+    setTicked((all) => {
+      const next = new Set(all);
+      for (const hint of group.hints) next.delete(hint.label);
+      if (label) next.add(label);
+      return next;
+    });
+  }, []);
+  const setValue = useCallback((key, value) => {
+    setSteps((all) => all.map((item, i) => i === at ? { ...item, values: { ...item.values, [key]: value } } : item));
+  }, [at]);
+  const changePlan = useCallback((next) => {
+    setPlan(next);
+    setSteps((all) => all.map((item, i) => i === at ? { ...item, plan: next } : item));
+  }, [at]);
+  const writeFromPlan = useCallback(() => {
+    if (!plan) return;
+    send(WRITE_FROM_PLAN, { sendPlan: planToSend(plan), shown: "R\xE9diger \xE0 partir de ce plan" });
+  }, [plan, send]);
+  const writeWithoutPlan = useCallback(() => {
+    send(WRITE_NOW, { shown: "\xC9crire sans plan" });
+  }, [send]);
+  const sendDraft = useCallback(() => {
+    if (showingPlan) send(draft, { phase: "plan", sendPlan: planToSend(plan) });
+    else send(draft);
+  }, [draft, plan, send, showingPlan]);
+  const pick = useCallback((index) => {
+    setAt(index);
+    if (steps[index].plan) setPlan(steps[index].plan);
+  }, [steps]);
+  const apply = useCallback(() => {
+    const out = filledValues(values);
+    if (Object.keys(out).length === 0) return;
+    onApply(out);
+    onClose();
+    toast.success("Le contenu est mis dans le formulaire. Relire avant d'enregistrer.");
+  }, [onApply, onClose, toast, values]);
+  const requestClose = useCallback(() => {
+    if (started) setConfirming(true);
+    else onClose();
+  }, [onClose, started]);
+  const canApply = !working && !showingPlan && Object.keys(filledValues(values)).length > 0;
+  const question = /* @__PURE__ */ jsxs("div", { ref: questionRef, className: "flex flex-col items-center gap-2 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: `m-0 text-[34px] leading-[42px] text-fg ${AI_CLASSES.voice}`, children: "Qu'est-ce qu'on \xE9crit ?" }),
+    /* @__PURE__ */ jsx("p", { className: "m-0 text-[13.5px] text-fg-muted", children: "Le sujet, \xE0 qui il s'adresse, ce qu'il doit faire passer." })
+  ] });
+  const middle = /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center overflow-y-auto px-6 pb-24 pt-8", children: waiting ? /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[680px] flex-col items-center gap-6", children: [
+    question,
+    /* @__PURE__ */ jsx("div", { ref: waitBubbleRef, className: `${AI_CLASSES.arrive} max-w-[520px] self-center whitespace-pre-line rounded-[14px_14px_4px_14px] border border-line bg-surface-muted px-4 py-3 text-[15px] leading-[22px] text-fg`, children: (_a = chat[0]) == null ? void 0 : _a.ask }),
+    /* @__PURE__ */ jsxs("div", { ref: waitLineRef, className: `${AI_CLASSES.arrive} flex items-center gap-2.5 [animation-delay:150ms]`, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "fraza-ai-pulse h-2 w-2 rounded-full bg-accent" }),
+      /* @__PURE__ */ jsx(WorkingWord, { words: WORK_WORDS[workKind], className: "text-[16px] text-fg-muted" })
+    ] })
+  ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: begin, className: `${AI_CLASSES.arrive} flex w-full max-w-[680px] flex-col gap-6`, children: [
+    question,
+    startError && /* @__PURE__ */ jsx("p", { role: "alert", className: "m-0 text-center text-[13px] text-danger", children: startError }),
+    /* @__PURE__ */ jsx("div", { ref: composerRef, children: /* @__PURE__ */ jsx(
+      StudioComposer,
+      {
+        draft,
+        onDraft: setDraft,
+        maxLength: REQUEST_MAX,
+        onSubmit: begin,
+        groups: hintGroups.groups,
+        alone: hintGroups.alone,
+        ticked,
+        onPick: pickInGroup,
+        onToggle: toggleHint,
+        planned,
+        start,
+        onStart: setStart,
+        footer: /* @__PURE__ */ jsxs("p", { className: "m-0 text-balance text-center text-[12px] leading-[18px] text-fg-muted", children: [
+          "L'IA remplira ",
+          listOf(fields.map((field) => field.label)),
+          "."
+        ] })
+      }
+    ) })
+  ] }) });
+  const chips = /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+    planned && !showingPlan && versions > 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: working,
+        onClick: () => send(REVIEW_PLAN, { 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"
+      }
+    ),
+    !showingPlan && versions > 0 && suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: working,
+        onClick: () => send(suggestion.request, { shown: suggestion.label }),
+        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
+    ))
+  ] });
+  const conversation = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__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: [
+      chat.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { ref: index === 0 ? firstBubbleRef : void 0, className: "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: item.ask }),
+        item.error && /* @__PURE__ */ jsx("p", { className: "m-0 text-[12.5px] text-danger", children: item.error }),
+        item.message && /* @__PURE__ */ jsxs("div", { ref: index === 0 ? firstMessageRef : void 0, className: `${index === 0 ? "" : 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__ */ jsx("p", { className: `m-0 text-[15px] leading-[22px] text-fg ${AI_CLASSES.voice}`, children: item.message })
+        ] })
+      ] }, 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[workKind], className: "text-[15px] text-fg-muted" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "flex flex-col gap-2.5 px-5 pb-5 pt-2", children: [
+      chips,
+      /* @__PURE__ */ jsx("form", { onSubmit: (event) => {
+        event.preventDefault();
+        sendDraft();
+      }, children: /* @__PURE__ */ jsxs(StudioBox, { rounded: "rounded-[14px]", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            rows: 3,
+            value: draft,
+            maxLength: REQUEST_MAX,
+            "aria-label": "Demande",
+            placeholder: showingPlan ? "Changer le plan, un autre angle\u2026" : "Qu'est-ce qu'on change ?",
+            onChange: (event) => setDraft(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                sendDraft();
+              }
+            },
+            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() })
+        ] })
+      ] }) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Modal, { variant: "ai", bare: true, size: "full", isOpen: true, onClose: requestClose, closable: !working, title: (action == null ? void 0 : action.heading) ?? "Le studio", children: /* @__PURE__ */ jsx("div", { ref: winRef, className: `${WINDOW_CLASS} relative`, children: !answered ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-14 shrink-0 items-center justify-between pl-5 pr-3", children: [
+        /* @__PURE__ */ jsx(StudioLabel, { label: (action == null ? void 0 : action.label) ?? "Le studio" }),
+        /* @__PURE__ */ jsx(StudioClose, { onClose: requestClose, disabled: working })
+      ] }),
+      middle
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { ref: dividerRef, "aria-hidden": "true", className: "pointer-events-none absolute bottom-0 left-[339px] top-0 z-10 w-px origin-top bg-line" }),
+      /* @__PURE__ */ jsxs("aside", { "aria-label": "Conversation", className: "flex w-[340px] shrink-0 flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: LABEL_CLASS, children: /* @__PURE__ */ jsx(StudioLabel, { label: (action == null ? void 0 : action.label) ?? "Le studio" }) }),
+        conversation
+      ] }),
+      /* @__PURE__ */ jsxs("section", { "aria-label": "Le contenu", className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { ref: barRef, className: BAR_CLASS, children: [
+          /* @__PURE__ */ jsx("nav", { "aria-label": "Historique", className: "flex min-w-0 items-center gap-1.5 overflow-x-auto", children: steps.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-px w-3 bg-line-strong" }),
+            /* @__PURE__ */ jsx(StepPill, { step: item, active: index === at, onClick: () => pick(index) })
+          ] }, index)) }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", disabled: working || at === 0, onClick: () => pick(at - 1), children: "Annuler l'\xE9tape" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          showingPlan ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", disabled: working, onClick: writeWithoutPlan, children: "\xC9crire sans plan" }),
+            /* @__PURE__ */ jsx(Button, { variant: "ai", size: "sm", icon: SparklesIcon, disabled: working || plan.sections.every((section) => !section.title.trim()), onClick: writeFromPlan, children: "R\xE9diger \xE0 partir de ce plan" })
+          ] }) : /* @__PURE__ */ jsx(Button, { variant: "ai", size: "sm", onClick: apply, disabled: !canApply, children: "Appliquer" }),
+          /* @__PURE__ */ jsx(StudioClose, { onClose: requestClose, disabled: working })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("div", { ref: contentRef, className: `relative min-h-0 flex-1 overflow-y-auto bg-canvas ${CONTENT_TRANSITION} ${working ? WORKING_CONTENT : ""}`, children: showingPlan ? /* @__PURE__ */ jsx(StudioPlan, { plan, onChange: changePlan, disabled: working }) : at === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: `text-[16px] text-fg-muted ${AI_CLASSES.voice}`, children: working ? "L'IA pr\xE9pare le contenu\u2026" : "Le contenu s'affichera ici." }) }) : /* @__PURE__ */ jsx(StudioFields, { fields, values, onChange: setValue, busy: working }) }),
+          /* @__PURE__ */ jsx(WorkingGlows, { active: working })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        isOpen: confirming,
+        title: "Fermer le studio ?",
+        description: "La conversation et le contenu non appliqu\xE9 seront perdus.",
+        confirmLabel: "Fermer",
+        onConfirm: () => {
+          setConfirming(false);
+          onClose();
+        },
+        onCancel: () => setConfirming(false)
+      }
+    )
+  ] });
+}
+export {
+  StudioCompose as default
+};