@bygghammar/cms-platform 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -72,7 +72,11 @@
     "./backoffice/forms/ConditionBuilder": "./src/backoffice/forms/ConditionBuilder.tsx",
     "./backoffice/forms/RuleSimulator": "./src/backoffice/forms/RuleSimulator.tsx",
     "./backoffice/forms/SmartTags": "./src/backoffice/forms/SmartTags.tsx",
-    "./backoffice/forms/ActivityLog": "./src/backoffice/forms/ActivityLog.tsx"
+    "./backoffice/forms/ActivityLog": "./src/backoffice/forms/ActivityLog.tsx",
+    "./backoffice/ProgressBar": "./src/backoffice/ProgressBar.tsx",
+    "./backoffice/PreviewLightbox": "./src/backoffice/PreviewLightbox.tsx",
+    "./backoffice/RichTextEditor": "./src/backoffice/RichTextEditor.tsx",
+    "./backoffice/media/ConfirmDialog": "./src/backoffice/media/ConfirmDialog.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -85,7 +89,18 @@
     "sonner": ">=2",
     "@supabase/supabase-js": ">=2",
     "@tanstack/react-start": ">=1",
-    "@tanstack/react-router": ">=1"
+    "@tanstack/react-router": ">=1",
+    "@tiptap/react": ">=3",
+    "@tiptap/starter-kit": ">=3",
+    "@tiptap/pm": ">=3",
+    "@tiptap/extensions": ">=3",
+    "@tiptap/extension-image": ">=3",
+    "@tiptap/extension-text-align": ">=3",
+    "@tiptap/extension-highlight": ">=3",
+    "@tiptap/extension-subscript": ">=3",
+    "@tiptap/extension-superscript": ">=3",
+    "@tiptap/extension-text-style": ">=3",
+    "@tiptap/extension-table": ">=3"
   },
   "peerDependenciesMeta": {
     "@supabase/supabase-js": {
@@ -96,6 +111,39 @@
     },
     "@tanstack/react-router": {
       "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/extensions": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
+      "optional": true
+    },
+    "@tiptap/extension-text-align": {
+      "optional": true
+    },
+    "@tiptap/extension-highlight": {
+      "optional": true
+    },
+    "@tiptap/extension-subscript": {
+      "optional": true
+    },
+    "@tiptap/extension-superscript": {
+      "optional": true
+    },
+    "@tiptap/extension-text-style": {
+      "optional": true
+    },
+    "@tiptap/extension-table": {
+      "optional": true
     }
   }
 }

package/src/backoffice/PreviewLightbox.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { Lightbox } from "../ui/Lightbox";
+
+const DESIGN_WIDTH = 1280;
+
+/**
+ * Backoffice preview lightbox: renders a route inside a scaled iframe.
+ * Closing follows the shared site behaviour — Escape, backdrop click, or a
+ * click on the preview itself (the frame is look-only, covered by a
+ * transparent click catcher because iframe clicks never bubble out).
+ */
+export function PreviewLightbox({
+  open,
+  onClose,
+  src,
+  title,
+}: {
+  open: boolean;
+  onClose: () => void;
+  src: string;
+  title: string;
+}) {
+  const [scale, setScale] = useState(1);
+  const [frameHeight, setFrameHeight] = useState(800);
+
+  useEffect(() => {
+    if (!open) return;
+    const measure = () => {
+      const availW = Math.max(320, window.innerWidth - 96);
+      const availH = Math.max(320, window.innerHeight - 120);
+      setScale(Math.min(1, availW / DESIGN_WIDTH));
+      setFrameHeight(Math.round(availH / Math.min(1, availW / DESIGN_WIDTH)));
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <Lightbox open={open} onClose={onClose} label={title} closeOnContentClick>
+      <div
+        className="relative bg-white shadow-2xl overflow-hidden"
+        style={{
+          width: DESIGN_WIDTH * scale,
+          height: frameHeight * scale,
+        }}
+      >
+        <iframe
+          src={src}
+          title={title}
+          className="absolute left-0 top-0 border-0"
+          style={{
+            width: DESIGN_WIDTH,
+            height: frameHeight,
+            transform: `scale(${scale})`,
+            transformOrigin: "top left",
+          }}
+        />
+        {/* Click catcher: iframe clicks can't bubble to the overlay. */}
+        <div className="absolute inset-0 cursor-pointer" onClick={onClose} />
+      </div>
+    </Lightbox>
+  );
+}

package/src/backoffice/ProgressBar.tsx

@@ -0,0 +1,36 @@
+type Props = {
+  /** 0–100, or null for an indeterminate bar */
+  value: number | null;
+  label?: string;
+  detail?: string;
+};
+
+/** Slim determinate/indeterminate progress bar used by the backoffice long-running tools. */
+export function ProgressBar({ value, label, detail }: Props) {
+  const pct = value === null ? null : Math.max(0, Math.min(100, value));
+  return (
+    <div className="w-full">
+      {label || detail ? (
+        <div className="mb-2 flex items-baseline justify-between gap-4">
+          <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+          <span className="text-[0.65rem] tabular-nums text-ink/45">
+            {detail}
+            {pct !== null ? `${detail ? " · " : ""}${Math.round(pct)}%` : ""}
+          </span>
+        </div>
+      ) : null}
+      <div className="h-1.5 w-full overflow-hidden bg-ink/10">
+        {pct === null ? (
+          <div className="h-full w-1/3 animate-[progress-slide_1.2s_ease-in-out_infinite] bg-sea" />
+        ) : (
+          <div
+            className="h-full bg-sea transition-[width] duration-300 ease-out"
+            style={{ width: `${pct}%` }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ProgressBar;

package/src/backoffice/RichTextEditor.tsx

@@ -0,0 +1,633 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { EditorContent, useEditor, type Editor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import TextAlign from "@tiptap/extension-text-align";
+import Highlight from "@tiptap/extension-highlight";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { Placeholder } from "@tiptap/extensions";
+import { Color, FontFamily, FontSize, LineHeight, TextStyle } from "@tiptap/extension-text-style";
+import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Code,
+  Code2,
+  Eraser,
+  Image as ImageIcon,
+  Italic,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Minus,
+  Quote,
+  Redo2,
+  Strikethrough,
+  Subscript as SubIcon,
+  Superscript as SupIcon,
+  Table as TableIcon,
+  Underline as UnderlineIcon,
+  Undo2,
+  Unlink,
+} from "lucide-react";
+import { MediaPickerDialog } from "./inspectors/fields";
+import { sanitizeHtml } from "../html/sanitize-html";
+
+const FONTS: { label: string; value: string }[] = [
+  { label: "Theme (default)", value: "" },
+  { label: "Serif (display)", value: "var(--font-serif)" },
+  { label: "Sans (body)", value: "var(--font-sans)" },
+  { label: "Georgia", value: "Georgia, serif" },
+  { label: "Times New Roman", value: "'Times New Roman', serif" },
+  { label: "Helvetica", value: "Helvetica, Arial, sans-serif" },
+  { label: "Arial", value: "Arial, sans-serif" },
+  { label: "Courier", value: "'Courier New', monospace" },
+];
+
+const SIZES = ["", "12px", "14px", "16px", "18px", "20px", "24px", "30px", "36px", "48px", "60px"];
+
+const SWATCHES = [
+  "#0f1720",
+  "#4b5563",
+  "#9ca3af",
+  "#ffffff",
+  "#2ac4ea",
+  "#d8f2fd",
+  "#afafaf",
+  "#0ea5e9",
+  "#16a34a",
+  "#eab308",
+  "#f97316",
+  "#dc2626",
+];
+
+function Btn({
+  on,
+  active,
+  title,
+  disabled,
+  children,
+}: {
+  on: () => void;
+  active?: boolean;
+  title: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      aria-pressed={active}
+      disabled={disabled}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={on}
+      className={[
+        "flex size-7 items-center justify-center border text-ink transition-colors disabled:opacity-35",
+        active ? "border-sea bg-sea/15" : "border-transparent hover:border-ink/20",
+      ].join(" ")}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Divider() {
+  return <span className="mx-1 h-5 w-px bg-ink/10" />;
+}
+
+function ColorControl({
+  label,
+  value,
+  onPick,
+  onClear,
+}: {
+  label: string;
+  value: string;
+  onPick: (color: string) => void;
+  onClear: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        title={label}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => setOpen((o) => !o)}
+        className="flex h-7 items-center gap-1 border border-transparent px-1.5 text-[0.65rem] uppercase tracking-widest text-ink hover:border-ink/20"
+      >
+        {label}
+        <span
+          className="size-3 border border-ink/25"
+          style={{ background: value || "transparent" }}
+        />
+      </button>
+      {open ? (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute left-0 top-8 z-50 w-44 border border-ink/15 bg-white p-2 shadow-lg">
+            <div className="grid grid-cols-6 gap-1">
+              {SWATCHES.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => {
+                    onPick(c);
+                    setOpen(false);
+                  }}
+                  className="size-5 border border-ink/15"
+                  style={{ background: c }}
+                  title={c}
+                />
+              ))}
+            </div>
+            <div className="mt-2 flex items-center gap-2">
+              <input
+                type="color"
+                value={value || "#000000"}
+                onChange={(e) => onPick(e.target.value)}
+                className="h-6 w-10 border border-ink/15 bg-white"
+              />
+              <button
+                type="button"
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => {
+                  onClear();
+                  setOpen(false);
+                }}
+                className="text-[0.65rem] uppercase tracking-widest text-ink/60 hover:text-ink"
+              >
+                Clear
+              </button>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function Toolbar({ editor }: { editor: Editor }) {
+  const [pickImage, setPickImage] = useState(false);
+
+  const setLink = () => {
+    const previous = (editor.getAttributes("link").href as string) ?? "";
+    const url = window.prompt("Link URL (https://…, /page, mailto:, tel:)", previous);
+    if (url === null) return;
+    if (!url.trim()) {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url.trim() }).run();
+  };
+
+  const headingValue = (() => {
+    for (const level of [1, 2, 3, 4, 5, 6] as const) {
+      if (editor.isActive("heading", { level })) return `h${level}`;
+    }
+    return editor.isActive("codeBlock") ? "code" : "p";
+  })();
+
+  return (
+    <div className="sticky top-0 z-20 flex flex-wrap items-center gap-0.5 border-b border-ink/10 bg-white/95 p-1.5 backdrop-blur">
+      <Btn
+        on={() => editor.chain().focus().undo().run()}
+        title="Undo"
+        disabled={!editor.can().undo()}
+      >
+        <Undo2 className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().redo().run()}
+        title="Redo"
+        disabled={!editor.can().redo()}
+      >
+        <Redo2 className="size-3.5" />
+      </Btn>
+      <Divider />
+
+      <select
+        value={headingValue}
+        onChange={(e) => {
+          const v = e.target.value;
+          const chain = editor.chain().focus();
+          if (v === "p") chain.setParagraph().run();
+          else if (v === "code") chain.toggleCodeBlock().run();
+          else chain.setHeading({ level: Number(v.slice(1)) as 1 | 2 | 3 | 4 | 5 | 6 }).run();
+        }}
+        className="h-7 border border-ink/15 bg-white px-1 text-xs text-ink focus:border-sea focus:outline-none"
+        title="Text style"
+      >
+        <option value="p">Paragraph</option>
+        <option value="h1">Heading 1</option>
+        <option value="h2">Heading 2</option>
+        <option value="h3">Heading 3</option>
+        <option value="h4">Heading 4</option>
+        <option value="h5">Heading 5</option>
+        <option value="h6">Heading 6</option>
+        <option value="code">Code block</option>
+      </select>
+
+      <select
+        value={(editor.getAttributes("textStyle").fontFamily as string) ?? ""}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (!v) editor.chain().focus().unsetFontFamily().run();
+          else editor.chain().focus().setFontFamily(v).run();
+        }}
+        className="h-7 border border-ink/15 bg-white px-1 text-xs text-ink focus:border-sea focus:outline-none"
+        title="Font"
+      >
+        {FONTS.map((f) => (
+          <option key={f.label} value={f.value}>
+            {f.label}
+          </option>
+        ))}
+      </select>
+
+      <select
+        value={(editor.getAttributes("textStyle").fontSize as string) ?? ""}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (!v) editor.chain().focus().unsetFontSize().run();
+          else editor.chain().focus().setFontSize(v).run();
+        }}
+        className="h-7 border border-ink/15 bg-white px-1 text-xs text-ink focus:border-sea focus:outline-none"
+        title="Font size"
+      >
+        {SIZES.map((s) => (
+          <option key={s || "default"} value={s}>
+            {s || "Size"}
+          </option>
+        ))}
+      </select>
+      <Divider />
+
+      <Btn
+        on={() => editor.chain().focus().toggleBold().run()}
+        active={editor.isActive("bold")}
+        title="Bold"
+      >
+        <Bold className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleItalic().run()}
+        active={editor.isActive("italic")}
+        title="Italic"
+      >
+        <Italic className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleUnderline().run()}
+        active={editor.isActive("underline")}
+        title="Underline"
+      >
+        <UnderlineIcon className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleStrike().run()}
+        active={editor.isActive("strike")}
+        title="Strikethrough"
+      >
+        <Strikethrough className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleCode().run()}
+        active={editor.isActive("code")}
+        title="Inline code"
+      >
+        <Code className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleSubscript().run()}
+        active={editor.isActive("subscript")}
+        title="Subscript"
+      >
+        <SubIcon className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleSuperscript().run()}
+        active={editor.isActive("superscript")}
+        title="Superscript"
+      >
+        <SupIcon className="size-3.5" />
+      </Btn>
+      <Divider />
+
+      <ColorControl
+        label="A"
+        value={(editor.getAttributes("textStyle").color as string) ?? ""}
+        onPick={(c) => editor.chain().focus().setColor(c).run()}
+        onClear={() => editor.chain().focus().unsetColor().run()}
+      />
+      <ColorControl
+        label="BG"
+        value={(editor.getAttributes("highlight").color as string) ?? ""}
+        onPick={(c) => editor.chain().focus().setHighlight({ color: c }).run()}
+        onClear={() => editor.chain().focus().unsetHighlight().run()}
+      />
+      <Divider />
+
+      <Btn
+        on={() => editor.chain().focus().setTextAlign("left").run()}
+        active={editor.isActive({ textAlign: "left" })}
+        title="Align left"
+      >
+        <AlignLeft className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().setTextAlign("center").run()}
+        active={editor.isActive({ textAlign: "center" })}
+        title="Align center"
+      >
+        <AlignCenter className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().setTextAlign("right").run()}
+        active={editor.isActive({ textAlign: "right" })}
+        title="Align right"
+      >
+        <AlignRight className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().setTextAlign("justify").run()}
+        active={editor.isActive({ textAlign: "justify" })}
+        title="Justify"
+      >
+        <AlignJustify className="size-3.5" />
+      </Btn>
+      <select
+        value={(editor.getAttributes("paragraph").lineHeight as string) ?? ""}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (!v) editor.chain().focus().unsetLineHeight().run();
+          else editor.chain().focus().setLineHeight(v).run();
+        }}
+        className="h-7 border border-ink/15 bg-white px-1 text-xs text-ink focus:border-sea focus:outline-none"
+        title="Line height"
+      >
+        <option value="">Line height</option>
+        {["1", "1.25", "1.5", "1.75", "2"].map((v) => (
+          <option key={v} value={v}>
+            {v}
+          </option>
+        ))}
+      </select>
+      <Divider />
+
+      <Btn
+        on={() => editor.chain().focus().toggleBulletList().run()}
+        active={editor.isActive("bulletList")}
+        title="Bullet list"
+      >
+        <List className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleOrderedList().run()}
+        active={editor.isActive("orderedList")}
+        title="Numbered list"
+      >
+        <ListOrdered className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleBlockquote().run()}
+        active={editor.isActive("blockquote")}
+        title="Quote"
+      >
+        <Quote className="size-3.5" />
+      </Btn>
+      <Btn on={() => editor.chain().focus().setHorizontalRule().run()} title="Divider">
+        <Minus className="size-3.5" />
+      </Btn>
+      <Divider />
+
+      <Btn on={setLink} active={editor.isActive("link")} title="Add or edit link">
+        <LinkIcon className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().extendMarkRange("link").unsetLink().run()}
+        title="Remove link"
+        disabled={!editor.isActive("link")}
+      >
+        <Unlink className="size-3.5" />
+      </Btn>
+      <Btn on={() => setPickImage(true)} title="Insert image from the media library">
+        <ImageIcon className="size-3.5" />
+      </Btn>
+      <Divider />
+
+      <Btn
+        on={() =>
+          editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+        }
+        title="Insert table"
+      >
+        <TableIcon className="size-3.5" />
+      </Btn>
+      {editor.isActive("table") ? (
+        <div className="flex items-center gap-1 text-[0.65rem] uppercase tracking-widest text-ink/60">
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().addRowAfter().run()}
+            className="hover:text-ink"
+          >
+            +Row
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().addColumnAfter().run()}
+            className="hover:text-ink"
+          >
+            +Col
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().deleteRow().run()}
+            className="hover:text-ink"
+          >
+            -Row
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().deleteColumn().run()}
+            className="hover:text-ink"
+          >
+            -Col
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().deleteTable().run()}
+            className="text-red-500 hover:text-red-700"
+          >
+            Del table
+          </button>
+        </div>
+      ) : null}
+      <Divider />
+
+      <Btn
+        on={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}
+        title="Clear formatting"
+      >
+        <Eraser className="size-3.5" />
+      </Btn>
+
+      {pickImage ? (
+        <MediaPickerDialog
+          accept="image"
+          onClose={() => setPickImage(false)}
+          onPick={(m) => {
+            editor.chain().focus().setImage({ src: m.url, alt: m.name }).run();
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Advanced WYSIWYG editor (TipTap) used by the rich-text block.
+ * Emits sanitized HTML; also offers a raw HTML source view for pasting
+ * markup from elsewhere.
+ */
+export function RichTextEditor({
+  value,
+  onChange,
+  placeholder = "Write or paste your text…",
+}: {
+  value: string;
+  onChange: (html: string) => void;
+  placeholder?: string;
+}) {
+  const [source, setSource] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const last = useRef(value);
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [
+      StarterKit.configure({
+        link: {
+          openOnClick: false,
+          autolink: true,
+          HTMLAttributes: { rel: "noopener noreferrer" },
+        },
+        heading: { levels: [1, 2, 3, 4, 5, 6] },
+      }),
+      TextStyle,
+      Color,
+      FontFamily,
+      FontSize,
+      LineHeight,
+      Highlight.configure({ multicolor: true }),
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      Subscript,
+      Superscript,
+      Image.configure({ inline: false, allowBase64: false }),
+      Table.configure({ resizable: true }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      Placeholder.configure({ placeholder }),
+    ],
+    content: value || "",
+    editorProps: {
+      attributes: {
+        class: "rte-content focus:outline-none",
+      },
+    },
+    onUpdate: ({ editor: e }) => {
+      const html = sanitizeHtml(e.getHTML());
+      last.current = html;
+      onChange(html);
+    },
+  });
+
+  // Adopt external changes (locale switch, version rollback) without
+  // clobbering what the user is typing.
+  useEffect(() => {
+    if (!editor) return;
+    if (value === last.current) return;
+    last.current = value;
+    editor.commands.setContent(value || "", { emitUpdate: false });
+    setDraft(value);
+  }, [value, editor]);
+
+  const applySource = useCallback(() => {
+    const html = sanitizeHtml(draft);
+    last.current = html;
+    onChange(html);
+    editor?.commands.setContent(html || "", { emitUpdate: false });
+    setSource(false);
+  }, [draft, editor, onChange]);
+
+  return (
+    <div className="rte-editor border border-ink/15 bg-white">
+      {editor ? <Toolbar editor={editor} /> : null}
+      {source ? (
+        <div className="p-2">
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            spellCheck={false}
+            rows={16}
+            className="w-full border border-ink/15 p-2 font-mono text-xs text-ink focus:border-sea focus:outline-none"
+          />
+          <div className="mt-2 flex gap-2">
+            <button
+              type="button"
+              onClick={applySource}
+              className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-widest hover:border-sea"
+            >
+              Apply HTML
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setDraft(value);
+                setSource(false);
+              }}
+              className="px-3 py-1.5 text-xs uppercase tracking-widest text-ink/60 hover:text-ink"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="max-h-[32rem] overflow-auto p-4">
+          <EditorContent editor={editor} />
+        </div>
+      )}
+      <div className="flex items-center justify-between border-t border-ink/10 px-2 py-1">
+        <span className="text-[0.65rem] uppercase tracking-widest text-ink/40">
+          {editor
+            ? `${editor.storage.characterCount?.characters?.() ?? editor.getText().length} chars`
+            : ""}
+        </span>
+        <button
+          type="button"
+          onClick={() => {
+            setDraft(value);
+            setSource((s) => !s);
+          }}
+          className="flex items-center gap-1 text-[0.65rem] uppercase tracking-widest text-ink/60 hover:text-ink"
+        >
+          <Code2 className="size-3" />
+          {source ? "Visual editor" : "HTML source"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/media/ConfirmDialog.tsx

@@ -0,0 +1,77 @@
+import { Loader2 } from "lucide-react";
+
+/**
+ * Small backoffice confirmation modal (English UI) used before destructive or
+ * bulk actions in the Media Library.
+ */
+export function ConfirmDialog({
+  title,
+  description,
+  details,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  danger = false,
+  busy = false,
+  onConfirm,
+  onCancel,
+}: {
+  title: string;
+  description?: string;
+  details?: string[];
+  confirmLabel?: string;
+  cancelLabel?: string;
+  danger?: boolean;
+  busy?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
+      onClick={() => !busy && onCancel()}
+    >
+      <div
+        className="w-full max-w-md border border-ink/15 bg-white"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="border-b border-ink/10 px-4 py-3">
+          <h2 className="text-sm font-medium text-ink">{title}</h2>
+        </div>
+        <div className="space-y-3 px-4 py-4">
+          {description ? <p className="text-sm text-ink/70">{description}</p> : null}
+          {details?.length ? (
+            <ul className="max-h-40 space-y-1 overflow-auto border border-ink/10 bg-ice/30 p-2 text-[0.72rem] text-ink/70">
+              {details.map((d) => (
+                <li key={d} className="truncate" title={d}>
+                  {d}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        <div className="flex justify-end gap-2 border-t border-ink/10 px-4 py-3">
+          <button
+            type="button"
+            disabled={busy}
+            onClick={onCancel}
+            className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-ink disabled:opacity-50"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            disabled={busy}
+            onClick={onConfirm}
+            className={[
+              "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-white disabled:opacity-50",
+              danger ? "bg-red-600 hover:bg-red-700" : "bg-ink hover:bg-sea",
+            ].join(" ")}
+          >
+            {busy ? <Loader2 className="size-3.5 animate-spin" /> : null}
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}