@fraza/module-ai 0.0.0-stage → 0.4.22

package/dist/admin/StudioComposer.client.js

@@ -0,0 +1,217 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useId, useRef, useState } from "react";
+import { AI_CLASSES } from "@fraza/core/shared/components";
+const BORDER = "linear-gradient(120deg, var(--color-accent), var(--color-accent-line) 35%, var(--color-line-strong) 70%)";
+const LIGHT = "radial-gradient(70% 90% at 30% 0%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%)";
+const GRAIN_MASK = "radial-gradient(70% 90% at 30% 0%, #000, transparent 70%)";
+function StudioBox({ rounded = "rounded-[18px]", className = "", children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "group/box relative", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `pointer-events-none absolute inset-0 ${rounded} opacity-0 transition-opacity duration-300 ease-out group-focus-within/box:opacity-100 motion-reduce:transition-none`, style: { background: BORDER } }),
+    /* @__PURE__ */ jsxs("div", { className: `relative overflow-hidden ${rounded} border border-control-line bg-control bg-clip-padding transition-colors group-focus-within/box:border-transparent ${className}`, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 ease-out group-focus-within/box:opacity-100 motion-reduce:transition-none", style: { background: LIGHT } }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 ease-out group-focus-within/box:opacity-[calc(var(--fraza-ai-grain-opacity,0.65)*0.77)] motion-reduce:transition-none forced-colors:hidden print:hidden",
+          style: { backgroundImage: "var(--fraza-ai-grain)", backgroundSize: "160px 160px", mixBlendMode: "overlay", WebkitMaskImage: GRAIN_MASK, maskImage: GRAIN_MASK }
+        }
+      ),
+      children
+    ] })
+  ] });
+}
+function SendButton({ label, disabled = false, size = "h-9 w-9" }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "submit",
+      "aria-label": label,
+      title: label,
+      disabled,
+      className: `relative flex ${size} shrink-0 items-center justify-center rounded-full transition-colors ${AI_CLASSES.button}`,
+      children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M6 11l6-6 6 6" }) })
+    }
+  );
+}
+const STARTS = [
+  { key: "plan", label: "Plan d'abord", text: "On valide les titres et la structure, puis l'IA r\xE9dige." },
+  { key: "write", label: "\xC9crire tout de suite", text: "L'IA r\xE9dige directement, on retouche ensuite." }
+];
+const PANEL = `${AI_CLASSES.arrive} absolute top-[calc(100%+8px)] z-10 rounded-card border border-line dark:border-line-strong bg-surface shadow-[0_8px_24px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_24px_rgba(0,0,0,0.6)]`;
+function SlidersIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12" }),
+    /* @__PURE__ */ jsx("circle", { cx: "16", cy: "6", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "12", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "2" })
+  ] });
+}
+function Segmented({ group, ticked, onPick }) {
+  const labelId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("span", { id: labelId, className: "text-[12.5px] text-fg-muted", children: group.name }),
+    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-labelledby": labelId, className: "flex rounded-control border border-line bg-surface-muted p-0.5", children: group.hints.map((hint) => {
+      const on = ticked.has(hint.label);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": on,
+          title: hint.text,
+          onClick: () => onPick(group, on ? null : hint.label),
+          className: `h-[26px] rounded-[6px] px-2.5 text-[12.5px] transition-colors ${on ? "bg-surface text-accent shadow-[inset_0_0_0_1px_var(--color-accent-line)]" : "text-fg-muted hover:text-fg"}`,
+          children: hint.label
+        },
+        hint.label
+      );
+    }) })
+  ] });
+}
+function HintSwitch({ hint, on, onToggle }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": on,
+      title: hint.text,
+      onClick: onToggle,
+      className: "flex items-center justify-between gap-4 text-left text-[12.5px] text-fg-muted",
+      children: [
+        hint.label,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `relative inline-block h-[18px] w-[30px] shrink-0 rounded-full transition-colors ${on ? "bg-accent" : "bg-line-strong"}`, children: /* @__PURE__ */ jsx("span", { className: `absolute top-[2px] h-[14px] w-[14px] rounded-full bg-surface transition-[left] ${on ? "left-[14px]" : "left-[2px]"}` }) })
+      ]
+    }
+  );
+}
+function StudioComposer({ draft, onDraft, maxLength, onSubmit, groups, alone, ticked, onPick, onToggle, planned, start, onStart, footer = null }) {
+  var _a;
+  const [open, setOpen] = useState(null);
+  const optionsId = useId();
+  const startId = useId();
+  const rootRef = useRef(null);
+  const optionsRef = useRef(null);
+  const startRef = useRef(null);
+  const hasOptions = groups.length > 0 || alone.length > 0;
+  const sendLabel = planned && start === "plan" ? "Proposer un plan" : "\xC9crire";
+  const startLabel = ((_a = STARTS.find((item) => item.key === start)) == null ? void 0 : _a.label) ?? STARTS[0].label;
+  useEffect(() => {
+    if (!open) return void 0;
+    const close = (event) => {
+      var _a2;
+      if (!((_a2 = rootRef.current) == null ? void 0 : _a2.contains(event.target))) setOpen(null);
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [open]);
+  const toggle = (name) => setOpen((current) => current === name ? null : name);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: "group relative",
+        onKeyDown: (event) => {
+          var _a2;
+          if (event.key === "Escape" && open) {
+            event.preventDefault();
+            event.stopPropagation();
+            (_a2 = (open === "start" ? startRef : optionsRef).current) == null ? void 0 : _a2.focus();
+            setOpen(null);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(StudioBox, { className: "shadow-[0_8px_28px_rgba(0,0,0,0.12)]", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                rows: 3,
+                value: draft,
+                maxLength,
+                "aria-label": "Demande",
+                placeholder: "Un guide pour\u2026, une annonce de\u2026, un article sur\u2026",
+                onChange: (event) => onDraft(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" && !event.shiftKey) onSubmit(event);
+                },
+                className: "relative block w-full resize-none border-0 bg-transparent px-5 pb-1.5 pt-[18px] text-[15.5px] leading-6 text-fg outline-none placeholder:text-fg-subtle"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-2 px-3 pb-2.5 pt-2", children: [
+              hasOptions && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: optionsRef,
+                  type: "button",
+                  "aria-expanded": open === "options",
+                  "aria-controls": open === "options" ? optionsId : void 0,
+                  onClick: () => toggle("options"),
+                  className: `flex h-8 items-center gap-1.5 rounded-control border px-2.5 text-[13px] transition-colors ${open === "options" ? "border-line-strong bg-surface-muted text-fg" : "border-line text-fg-secondary hover:border-line-strong hover:text-fg"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(SlidersIcon, {}),
+                    "Options",
+                    ticked.size > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-accent px-1 text-[11px] font-medium text-accent-fg", children: ticked.size })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              planned && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: startRef,
+                  type: "button",
+                  "aria-haspopup": "true",
+                  "aria-expanded": open === "start",
+                  "aria-controls": open === "start" ? startId : void 0,
+                  onClick: () => toggle("start"),
+                  className: `flex h-8 items-center gap-1.5 rounded-control px-2.5 text-[13px] transition-colors ${open === "start" ? "bg-surface-muted text-fg" : "text-fg-secondary hover:bg-surface-muted hover:text-fg"}`,
+                  children: [
+                    startLabel,
+                    /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: `text-fg-muted transition-transform ${open === "start" ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(SendButton, { label: sendLabel, disabled: !draft.trim() })
+            ] })
+          ] }),
+          open === "options" && /* @__PURE__ */ jsxs("div", { id: optionsId, role: "group", "aria-label": "Options", className: `${PANEL} left-0 flex w-[380px] max-w-full flex-col gap-3 p-3.5`, children: [
+            groups.map((group) => /* @__PURE__ */ jsx(Segmented, { group, ticked, onPick }, group.name)),
+            alone.map((hint) => /* @__PURE__ */ jsx(HintSwitch, { hint, on: ticked.has(hint.label), onToggle: () => onToggle(hint.label) }, hint.label))
+          ] }),
+          open === "start" && /* @__PURE__ */ jsx("div", { id: startId, role: "radiogroup", "aria-label": "Comment commencer", className: `${PANEL} right-0 flex w-[300px] max-w-full flex-col p-1.5`, children: STARTS.map((item) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": start === item.key,
+              onClick: () => {
+                var _a2;
+                onStart(item.key);
+                setOpen(null);
+                (_a2 = startRef.current) == null ? void 0 : _a2.focus();
+              },
+              className: `flex items-start gap-2.5 rounded-control px-2.5 py-2 text-left transition-colors ${start === item.key ? "bg-accent-soft" : "hover:bg-surface-muted"}`,
+              children: [
+                /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", className: `mt-[3px] shrink-0 text-accent ${start === item.key ? "" : "invisible"}`, children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5L20 7" }) }),
+                /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: `text-[13px] font-medium ${start === item.key ? "text-accent" : "text-fg"}`, children: item.label }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] leading-[17px] text-fg-muted", children: item.text })
+                ] })
+              ]
+            },
+            item.key
+          )) })
+        ]
+      }
+    ),
+    footer && /* @__PURE__ */ jsx("div", { className: open ? "invisible" : "", children: footer })
+  ] });
+}
+export {
+  SendButton,
+  StudioBox,
+  StudioComposer as default
+};

package/dist/admin/StudioFields.client.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { lazy, Suspense, useEffect, useRef, useState } from "react";
+import { blocksToHtml, htmlToBlocks } from "@fraza/core/shared/components/block-editor";
+import { hasValue, layoutFields } from "./studio-compose.js";
+const BlockEditor = lazy(() => import("@fraza/core/shared/components/BlockEditor"));
+function HtmlEditor({ field, value, onChange }) {
+  const [blocks, setBlocks] = useState(() => htmlToBlocks(value ?? ""));
+  const sent = useRef(value ?? "");
+  useEffect(() => {
+    if ((value ?? "") === sent.current) return;
+    sent.current = value ?? "";
+    setBlocks(htmlToBlocks(value ?? ""));
+  }, [value]);
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "h-[320px] animate-pulse rounded-control bg-surface-muted motion-reduce:animate-none" }), children: /* @__PURE__ */ jsx(
+    BlockEditor,
+    {
+      label: field.label,
+      value: blocks,
+      minHeight: 320,
+      onChange: (next) => {
+        setBlocks(next);
+        const html = blocksToHtml(next);
+        sent.current = html;
+        onChange(html);
+      }
+    }
+  ) });
+}
+function SheetField({ field, value, onChange }) {
+  const id = `studio-${field.key}`;
+  if (field.kind === "choice" || field.kind === "list" && field.options) {
+    const picked = new Set(field.kind === "list" ? Array.isArray(value) ? value : [] : [value].filter(Boolean));
+    const toggle = (option) => {
+      if (field.kind === "choice") return onChange(picked.has(option) ? null : option);
+      const next = new Set(picked);
+      if (next.has(option)) next.delete(option);
+      else next.add(option);
+      return onChange(field.options.filter((item) => next.has(item)));
+    };
+    return /* @__PURE__ */ jsxs("fieldset", { className: "m-0 flex flex-col gap-2 border-0 p-0", children: [
+      /* @__PURE__ */ jsx("legend", { className: "mb-2 text-[12px] text-fg-muted", children: field.label }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: (field.options ?? []).map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": picked.has(option),
+          onClick: () => toggle(option),
+          className: `h-7 rounded-full border px-2.5 text-[12.5px] transition-colors ${picked.has(option) ? "border-accent-line bg-accent-soft text-accent" : "border-line bg-surface text-fg-secondary hover:border-line-strong"}`,
+          children: option
+        },
+        option
+      )) })
+    ] });
+  }
+  const text = Array.isArray(value) ? value.join(", ") : value ?? "";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-[12px] text-fg-muted", children: field.label }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id,
+        rows: field.maxLength && field.maxLength <= 80 ? 1 : 3,
+        value: text,
+        maxLength: field.maxLength ?? void 0,
+        onChange: (event) => onChange(field.kind === "list" ? event.target.value.split(",").map((item) => item.trim()).filter(Boolean) : event.target.value),
+        className: "resize-none rounded-control border border-control-line bg-control px-3 py-2 text-[13.5px] leading-5 text-fg outline-none focus:border-accent-line"
+      }
+    ),
+    field.maxLength && /* @__PURE__ */ jsxs("span", { className: "self-end text-[11px] tabular-nums text-fg-subtle", children: [
+      [...text].length,
+      " / ",
+      field.maxLength
+    ] })
+  ] });
+}
+function StudioFields({ fields, values, onChange, busy = false }) {
+  const { title, page, sheet } = layoutFields(fields);
+  const [open, setOpen] = useState(false);
+  const filled = sheet.filter((field) => hasValue(values[field.key])).length;
+  return /* @__PURE__ */ jsxs("div", { className: `mx-auto flex max-w-[760px] flex-col gap-4 px-6 py-6 ${busy ? "pointer-events-none" : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 rounded-card border border-line bg-surface p-6", children: [
+      title && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `studio-${title.key}`, className: "text-[12px] text-fg-muted", children: title.label }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `studio-${title.key}`,
+            value: values[title.key] ?? "",
+            maxLength: title.maxLength ?? void 0,
+            onChange: (event) => onChange(title.key, event.target.value),
+            className: "border-0 bg-transparent p-0 text-[24px] font-semibold leading-[32px] tracking-[-0.01em] text-fg outline-none"
+          }
+        )
+      ] }),
+      page.map((field) => /* @__PURE__ */ jsx(HtmlEditor, { field, value: values[field.key], onChange: (html) => onChange(field.key, html) }, field.key))
+    ] }),
+    sheet.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-card border border-line bg-surface", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": open,
+          onClick: () => setOpen(!open),
+          className: "flex w-full items-center gap-3 px-5 py-3.5 text-left",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[13.5px] font-medium text-fg", children: "Fiche" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[12.5px] text-fg-muted", children: sheet.map((field) => field.label).join(" \xB7 ") }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[12px] tabular-nums text-fg-muted", children: [
+              filled,
+              " sur ",
+              sheet.length
+            ] }),
+            /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", className: `text-fg-muted transition-transform ${open ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 border-t border-line px-5 py-4", children: sheet.map((field) => /* @__PURE__ */ jsx(SheetField, { field, value: values[field.key], onChange: (value) => onChange(field.key, value) }, field.key)) })
+    ] })
+  ] });
+}
+export {
+  StudioFields as default
+};

package/dist/admin/StudioPlan.client.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AI_CLASSES } from "@fraza/core/shared/components";
+import { addSection, moveSection, removeSection, renameSection } from "./studio-compose.js";
+import { PLAN_SECTIONS, PLAN_SUMMARY_MAX, PLAN_TITLE_MAX } from "../studio.js";
+function IconButton({ label, onClick, disabled, children }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      disabled,
+      onClick,
+      className: "flex h-7 w-7 items-center justify-center rounded-[6px] text-fg-muted transition-colors hover:bg-surface-muted hover:text-fg disabled:opacity-30 disabled:hover:bg-transparent",
+      children
+    }
+  );
+}
+const STROKE = { fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
+function StudioPlan({ plan, onChange, disabled = false }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-[720px] flex-col gap-4 px-6 py-6", children: [
+    plan.titles.length > 0 && /* @__PURE__ */ jsxs("fieldset", { disabled, className: "m-0 flex flex-col gap-2 rounded-card border border-line bg-surface p-5", children: [
+      /* @__PURE__ */ jsx("legend", { className: "sr-only", children: "Titre" }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[11.5px] font-medium text-fg-subtle", children: "Titre \xB7 choisir" }),
+      plan.titles.map((title, index) => {
+        const picked = plan.title === title;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": picked,
+            onClick: () => onChange({ ...plan, title }),
+            className: `rounded-control border px-3.5 py-2.5 text-left text-[16px] leading-[22px] text-fg transition-colors ${AI_CLASSES.voice} ${picked ? AI_CLASSES.optionPicked : AI_CLASSES.option}`,
+            children: title
+          },
+          index
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col rounded-card border border-line bg-surface", children: [
+      /* @__PURE__ */ jsx("span", { className: "px-5 pb-2 pt-4 text-[11.5px] font-medium text-fg-subtle", children: "Plan" }),
+      /* @__PURE__ */ jsx("ol", { className: "m-0 list-none p-0", children: plan.sections.map((section, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 border-t border-line px-5 py-3", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mt-1.5 w-5 shrink-0 text-right text-[12px] tabular-nums text-fg-subtle", children: index + 1 }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: section.title,
+              maxLength: PLAN_TITLE_MAX,
+              disabled,
+              "aria-label": `Section ${index + 1} : intertitre`,
+              placeholder: "Intertitre",
+              onChange: (event) => onChange(renameSection(plan, index, { title: event.target.value })),
+              className: "border-0 bg-transparent p-0 text-[14px] font-medium leading-5 text-fg outline-none placeholder:text-fg-subtle"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              rows: 2,
+              value: section.summary,
+              maxLength: PLAN_SUMMARY_MAX,
+              disabled,
+              "aria-label": `Section ${index + 1} : ce qu'elle couvre`,
+              placeholder: "Ce que la section couvre",
+              onChange: (event) => onChange(renameSection(plan, index, { summary: event.target.value })),
+              className: "resize-none border-0 bg-transparent p-0 text-[12.5px] leading-[18px] text-fg-muted outline-none placeholder:text-fg-subtle"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center", children: [
+          /* @__PURE__ */ jsx(IconButton, { label: "Monter la section", disabled: disabled || index === 0, onClick: () => onChange(moveSection(plan, index, -1)), children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", ...STROKE, children: /* @__PURE__ */ jsx("path", { d: "M6 15l6-6 6 6" }) }) }),
+          /* @__PURE__ */ jsx(IconButton, { label: "Descendre la section", disabled: disabled || index === plan.sections.length - 1, onClick: () => onChange(moveSection(plan, index, 1)), children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", ...STROKE, children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) }) }),
+          /* @__PURE__ */ jsx(IconButton, { label: "Retirer la section", disabled: disabled || plan.sections.length === 1, onClick: () => onChange(removeSection(plan, index)), children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", ...STROKE, children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) }) })
+        ] })
+      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "border-t border-line px-5 py-2.5", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: disabled || plan.sections.length >= PLAN_SECTIONS,
+          onClick: () => onChange(addSection(plan)),
+          className: "text-[13px] text-fg-secondary hover:text-fg disabled:opacity-40",
+          children: "+ Ajouter une section"
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  StudioPlan as default
+};

package/dist/admin/StudioWorking.client.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { AI_CLASSES } from "@fraza/core/shared/components";
+const WORKING_CONTENT = "opacity-75 blur-[1.5px]";
+const CONTENT_TRANSITION = "transition-[opacity,filter] duration-[900ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none";
+const COUNT = 5;
+const LAP = 18;
+const GRAIN_MASK = "linear-gradient(rgb(0 0 0 / .5), rgb(0 0 0 / .5)), var(--fraza-ai-grain)";
+const GLOW = (tone) => `radial-gradient(closest-side, color-mix(in srgb, ${tone} 26%, transparent), color-mix(in srgb, ${tone} 6%, transparent) 55%, transparent)`;
+const ACCENT = "var(--color-accent)";
+const LIGHT = "color-mix(in srgb, var(--color-accent) 45%, #fff)";
+const KEYFRAMES = `
+@keyframes fraza-ai-wander { from { offset-distance: 0%; } to { offset-distance: 100%; } }
+@keyframes fraza-ai-glow-breathe { from { opacity: var(--o1); } to { opacity: var(--o2); } }
+@keyframes fraza-ai-glow-grow { from { transform: scale(var(--s1)); } to { transform: scale(var(--s2)); } }
+@media (prefers-reduced-motion: reduce) {
+  .fraza-ai-wander, .fraza-ai-wander > span { animation: none !important; }
+}`;
+function points(w, h) {
+  const cells = [];
+  for (let x = 0; x < 3; x += 1) for (let y = 0; y < 3; y += 1) cells.push([x, y]);
+  for (let i = cells.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [cells[i], cells[j]] = [cells[j], cells[i]];
+  }
+  const span = (cell, size) => Math.round((-0.12 + (cell + 0.1 + Math.random() * 0.8) * (1.24 / 3)) * size);
+  return cells.slice(0, 7).map(([x, y]) => [span(x, w), span(y, h)]);
+}
+function curve(pts) {
+  const n = pts.length;
+  const at = (i) => pts[(i + n) % n];
+  let d = `M ${pts[0][0]} ${pts[0][1]}`;
+  for (let i = 0; i < n; i += 1) {
+    const [p0, p1, p2, p3] = [at(i - 1), at(i), at(i + 1), at(i + 2)];
+    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6];
+    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6];
+    d += ` C ${Math.round(c1[0])} ${Math.round(c1[1])}, ${Math.round(c2[0])} ${Math.round(c2[1])}, ${p2[0]} ${p2[1]}`;
+  }
+  return `path('${d} Z')`;
+}
+function makeGlows(w, h) {
+  return Array.from({ length: COUNT }, (_, i) => {
+    const lap = LAP * (0.8 + Math.random() * 0.6);
+    return {
+      size: Math.round(460 + Math.random() * 220),
+      path: curve(points(w, h)),
+      lap,
+      delay: -Math.random() * lap,
+      pulse: 3 + Math.random() * 3,
+      grow: 4 + Math.random() * 4,
+      o1: 0.35 + Math.random() * 0.2,
+      o2: 0.75 + Math.random() * 0.25,
+      s1: 0.6 + Math.random() * 0.2,
+      s2: 1.15 + Math.random() * 0.3,
+      tone: i % 3 === 2 ? LIGHT : ACCENT
+    };
+  });
+}
+function WorkingGlows({ active }) {
+  const ref = useRef(null);
+  const [box, setBox] = useState(null);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return void 0;
+    const read = () => setBox((old) => {
+      const w = Math.round(node.clientWidth);
+      const h = Math.round(node.clientHeight);
+      return old && Math.abs(old.w - w) < 40 && Math.abs(old.h - h) < 40 ? old : { w, h };
+    });
+    read();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(read);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  const glows = useMemo(() => box ? makeGlows(box.w, box.h) : [], [box]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: `pointer-events-none absolute inset-0 overflow-hidden transition-opacity duration-[900ms] ease-out motion-reduce:transition-none forced-colors:hidden print:hidden ${active ? "opacity-100" : "opacity-0"}`,
+      style: { WebkitMaskImage: GRAIN_MASK, maskImage: GRAIN_MASK, WebkitMaskSize: "100% 100%, 160px 160px", maskSize: "100% 100%, 160px 160px", WebkitMaskComposite: "source-over", maskComposite: "add" },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+        active && glows.map((glow, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fraza-ai-wander absolute left-0 top-0",
+            style: {
+              width: glow.size,
+              height: glow.size,
+              offsetPath: glow.path,
+              offsetRotate: "0deg",
+              offsetAnchor: "center",
+              animation: `fraza-ai-wander ${glow.lap}s linear ${glow.delay}s infinite`
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "absolute inset-0 rounded-full",
+                style: {
+                  background: GLOW(glow.tone),
+                  filter: "blur(24px)",
+                  "--o1": glow.o1,
+                  "--o2": glow.o2,
+                  "--s1": glow.s1,
+                  "--s2": glow.s2,
+                  animation: `fraza-ai-glow-breathe ${glow.pulse}s ease-in-out ${glow.delay}s infinite alternate, fraza-ai-glow-grow ${glow.grow}s ease-in-out ${glow.delay}s infinite alternate`
+                }
+              }
+            )
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+function WorkingWord({ words, className = "" }) {
+  const [index, setIndex] = useState(() => Math.floor(Math.random() * words.length));
+  const [shown, setShown] = useState(true);
+  useEffect(() => {
+    if (words.length < 2) return void 0;
+    let swap;
+    const timer = setInterval(() => {
+      setShown(false);
+      swap = setTimeout(() => {
+        setIndex((current) => {
+          let next = current;
+          while (next === current) next = Math.floor(Math.random() * words.length);
+          return next;
+        });
+        setShown(true);
+      }, 350);
+    }, 2e3);
+    return () => {
+      clearInterval(timer);
+      clearTimeout(swap);
+    };
+  }, [words]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      className: `inline-block transition-[opacity,filter,transform] duration-[350ms] ease-out motion-reduce:transition-none ${AI_CLASSES.voice} ${shown ? "translate-y-0 opacity-100 blur-0" : "translate-y-1 opacity-0 blur-[3px]"} ${className}`,
+      children: `${words[index % words.length]}\u2026`
+    }
+  );
+}
+export {
+  CONTENT_TRANSITION,
+  WORKING_CONTENT,
+  WorkingGlows,
+  WorkingWord
+};

package/dist/admin/choices.js

@@ -0,0 +1,22 @@
+function isTextList(node) {
+  var _a, _b;
+  const itemTypes = Array.isArray((_a = node == null ? void 0 : node.items) == null ? void 0 : _a.type) ? node.items.type : [(_b = node == null ? void 0 : node.items) == null ? void 0 : _b.type];
+  const types = Array.isArray(node == null ? void 0 : node.type) ? node.type : [node == null ? void 0 : node.type];
+  return types.includes("array") && itemTypes.includes("string");
+}
+function choiceGroups(schema, data) {
+  if (!(schema == null ? void 0 : schema.properties) || !data) return [];
+  return Object.entries(schema.properties).filter(([key, node]) => isTextList(node) && Array.isArray(data[key])).map(([key, node]) => ({ key, title: node.title ?? node.description ?? key, options: data[key] }));
+}
+function applyChoices(schema, data, picked) {
+  const result = { ...data };
+  for (const group of choiceGroups(schema, data)) {
+    const index = picked[group.key];
+    result[group.key] = Number.isInteger(index) && index >= 0 && index < group.options.length ? group.options[index] : null;
+  }
+  return result;
+}
+export {
+  applyChoices,
+  choiceGroups
+};

package/dist/admin/format.js

@@ -0,0 +1,19 @@
+const NUMBER = new Intl.NumberFormat("fr-CA");
+function formatTokens(value) {
+  return NUMBER.format(Number.isFinite(value) ? value : 0);
+}
+function formatDuration(ms) {
+  if (!Number.isFinite(ms)) return "\u2014";
+  if (ms < 1e3) return `${ms} ms`;
+  return `${(ms / 1e3).toLocaleString("fr-CA", { maximumFractionDigits: 1 })} s`;
+}
+const TRIGGER_LABELS = Object.freeze({
+  button: "Bouton",
+  code: "Code",
+  test: "Test"
+});
+export {
+  TRIGGER_LABELS,
+  formatDuration,
+  formatTokens
+};