@openpresentation/opf-editor 0.28.0 → 0.29.1

package/dist/content-controls.js

@@ -1,8 +1,10 @@
 // Content controls (RR-26): the DOM controls for the content actions, mounted by `createDesignControls` in its
-// "Selected content" and "Slide structure" sections. Each action is a native button or select with a visible label;
-// it shows what the change would not carry over BEFORE it is applied (a dry run through the same prepare function the
-// action uses), is disabled with its reason when it does not apply, and commits one undoable change through the
-// session. Nothing here owns document state: `sync` re-reads the session after every change, Undo and Redo included.
+// "Selected content" and "Slide structure" sections. The structural actions of a block are one row of icon buttons
+// (each named, with a tooltip); the others are native buttons or selects with a short label. An action runs a dry run
+// through the same prepare function it uses, so before it is applied its tooltip names what it would not carry over,
+// and when it does not apply it is shown disabled (aria-disabled, so it stays focusable) with the reason as its tooltip
+// and accessible description. Each commits one undoable change through the session. Nothing here owns document state:
+// `sync` re-reads the session after every change, Undo and Redo included.
 import { BLOCK_KIND_LABELS, blockConversionTargets, convertBlock, metricGroupForSelection } from "./block-convert.js";
 import {
   listItemIndexForSelection,
@@ -21,6 +23,7 @@ import {
   shiftListItems,
   ungroupBlock,
 } from "./content-actions.js";
+import { ICONS } from "./studio-kit/dom.js";
 
 /** Region layouts offered for a slide with this many blocks (each block gets its own region, none overlap). */
 export const REGION_LAYOUTS = Object.freeze({
@@ -51,34 +54,67 @@ const DESIGN_IMAGE_LABELS = { background: "background image", watermark: "waterm
 // An image block's own framing fields (FA-22) do not stop it being "a block that holds only an image".
 const IMAGE_BLOCK_FIELDS = new Set(["id", "extensions", "type", "fit", "focus", "aspectRatio", "shape", "cornerRadius", "border", "opacity", "recolor", "overlay", "placement"]);
 const messageOf = (error) => error?.issues?.[0]?.message ?? error?.message ?? String(error);
-const lossText = (prepared) => (prepared.loss.length ? `Not carried over: ${prepared.loss.join(", ")}.` : "Nothing is lost.");
+const lossText = (prepared) => (prepared.loss?.length ? `Not carried over: ${prepared.loss.join(", ")}.` : "");
+const SVG = "http://www.w3.org/2000/svg";
+
+/** An inline Lucide icon (aria-hidden) from the studio kit's set. */
+export function iconNode(doc, name, size = 16) {
+  const svg = doc.createElementNS(SVG, "svg");
+  for (const [key, value] of Object.entries({ viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false", class: "opf-dc-icon" })) svg.setAttribute(key, String(value));
+  svg.innerHTML = ICONS[name] ?? "";
+  return svg;
+}
+
+/** The first sentence of a refusal, for a tooltip: "The first line is longer than 24 characters." */
+export function shortReason(reason) {
+  if (!reason) return "";
+  const first = String(reason).split(/(?<=[.!?])\s/)[0];
+  return first.replace(/, which [^.]*\./, ".");
+}
+
+/**
+ * Show a button as available or not. A disabled action keeps its focus (aria-disabled) so the reason in its tooltip is reachable from the
+ * keyboard; the tooltip is the label (with its shortcut) when it is available, and the label and the reason when it is not.
+ */
+export function setActionState(button, { label, enabled, reason, shortcut, loss }) {
+  if (enabled) button.removeAttribute("aria-disabled");
+  else button.setAttribute("aria-disabled", "true");
+  const tip = enabled ? `${label}${shortcut ? ` (${shortcut})` : ""}${loss ? `. ${loss}` : ""}` : `${label}: ${shortReason(reason) || "not available here."}`;
+  button.title = tip;
+}
 
 /**
- * Build the content controls. `ctx` supplies the panel's helpers: `editor`, `h` (element builder), `selectField`,
- * `run(action, done)` (commit, report, restore on failure), `nextId`, `getSlide()` and `reselect(path)`.
- * Returns the nodes to place and `sync(state)`, where `state` is `{ blockPath, content, selectedPath, slideIndex }`.
+ * Build the content controls. `ctx` supplies the panel's helpers: `editor`, `doc`, `h` (element builder), `selectField`,
+ * `run(action, done)` (commit, report, restore on failure), `nextId`, `getSlide()`, `reselect(path)` and, optionally,
+ * `blockActions` (`{ before, after }`: host actions for the arrange toolbar, each `{ role, label, icon, state(), run() }`).
+ * Returns the nodes to place and `sync(state)`, where `state` is `{ blockPath, groupPath, content, selectedPath, slideIndex }`
+ * (`groupPath` is a selected group, which has no content of its own).
  */
 export function createContentControls(ctx) {
   const { editor, h, selectField, run, nextId, getSlide, reselect } = ctx;
   const updaters = [];
   const ctxState = { current: {} };
 
-  /** A button that shows the dry-run report under it before it is pressed and is disabled, with the reason, when it does not apply. */
-  function action(label, { prepare, apply, done, selectAfter, role }) {
-    const id = nextId("content-note");
-    const note = h("p", { class: "opf-dc-help", id, "data-role": `${role}-note` });
-    const button = h("button", { type: "button", class: "secondary", "aria-describedby": id, "data-role": role }, label);
+  /**
+   * A button for one content action: an icon button in a toolbar when `icon` is given, otherwise a text button. Before it is pressed its
+   * tooltip names what the change would not carry over; it is disabled, with the reason as its tooltip, when it does not apply.
+   */
+  function action(label, { prepare, apply, done, selectAfter, role, icon }) {
+    const button = icon
+      ? h("button", { type: "button", class: "opf-dc-tool", "aria-label": label, "data-role": role }, iconNode(ctx.doc, icon))
+      : h("button", { type: "button", class: "secondary", "data-role": role }, label);
     button.addEventListener("click", () => {
+      if (button.getAttribute("aria-disabled") === "true") return;
       run(
         () => {
           const change = apply();
           if (selectAfter) reselect(selectAfter(change));
           return change;
         },
-        (change) => `${typeof done === "function" ? done(change) : done} ${lossText(change)}`,
+        (change) => `${typeof done === "function" ? done(change) : done}${lossText(change) ? ` ${lossText(change)}` : ""}`,
       );
     });
-    const wrap = h("div", { class: "opf-dc-action" }, button, note);
+    const wrap = icon ? button : h("div", { class: "opf-dc-action" }, button);
     let current = {};
     const update = (state) => {
       current = state;
@@ -86,19 +122,28 @@ export function createContentControls(ctx) {
       try {
         prepared = prepare(state);
       } catch (error) {
-        button.disabled = true;
-        note.textContent = messageOf(error);
+        setActionState(button, { label, enabled: false, reason: messageOf(error) });
         return;
       }
-      button.disabled = !prepared.changed;
-      note.textContent = prepared.changed ? lossText(prepared) : (prepared.reason ?? "");
+      setActionState(button, { label, enabled: prepared.changed, reason: prepared.reason, loss: prepared.changed ? lossText(prepared) : "" });
     };
-    return { wrap, update, state: () => current };
+    return { wrap, button, update, state: () => current };
+  }
+
+  /** A host action in the toolbar (the Studio's move, duplicate and delete): `{ role, label, icon, state() → { enabled, reason, shortcut }, run() }`. */
+  function hostAction(entry) {
+    const button = h("button", { type: "button", class: "opf-dc-tool", "aria-label": entry.label, "data-role": entry.role }, iconNode(ctx.doc, entry.icon));
+    button.addEventListener("click", () => {
+      if (button.getAttribute("aria-disabled") === "true") return;
+      entry.run();
+    });
+    return { wrap: button, update: () => setActionState(button, { label: entry.label, ...entry.state() }) };
   }
 
   // --- list levels ---------------------------------------------------------------------------------
 
-  const list = h("div", { class: "opf-dc-actions-block", role: "group", "aria-label": "List levels", "data-role": "list-levels" });
+  const listTools = h("div", { class: "opf-dc-toolbar", role: "group", "aria-label": "List level" });
+  const list = h("div", { class: "opf-dc-row", "data-role": "list-levels" }, h("span", { class: "opf-dc-row-label", "aria-hidden": "true" }, "List level"), listTools);
   {
     const index = (state) => listItemIndexForSelection(state.selectedPath, state.blockPath);
     const prepare = (delta) => (state) => {
@@ -110,9 +155,9 @@ export function createContentControls(ctx) {
       const state = ctxState.current;
       return shiftListItems(editor, state.blockPath, [index(state)], delta);
     };
-    const indent = action("Indent item", { role: "indent", prepare: prepare(1), apply: apply(1), done: "Item moved in." });
-    const outdent = action("Outdent item", { role: "outdent", prepare: prepare(-1), apply: apply(-1), done: "Item moved out." });
-    list.append(h("p", { class: "opf-dc-help" }, "Select an item, then change its level. Items under it move with it."), indent.wrap, outdent.wrap);
+    const outdent = action("Outdent item", { role: "outdent", icon: "IndentDecrease", prepare: prepare(-1), apply: apply(-1), done: "Item moved out." });
+    const indent = action("Indent item", { role: "indent", icon: "IndentIncrease", prepare: prepare(1), apply: apply(1), done: "Item moved in." });
+    listTools.append(outdent.wrap, indent.wrap);
     updaters.push((state) => {
       list.hidden = state.content?.kind !== "list";
       if (!list.hidden) {
@@ -125,14 +170,13 @@ export function createContentControls(ctx) {
   // --- a group of metrics --------------------------------------------------------------------------
 
   const metrics = selectField("metric-group", "Group of metrics", {
-    empty: "Convert the group to…",
-    help: "Every block in this group is a metric. Converting keeps their labels, values, units and deltas.",
+    empty: "Convert to…",
     onChange: (value) => {
       if (!value) return;
       const path = ctxState.current.metricGroupPath;
       run(
         () => convertBlock(editor, path, value),
-        (change) => `Converted the group to ${BLOCK_KIND_LABELS[value]?.toLowerCase() ?? value}. ${lossText(change)}`,
+        (change) => `Converted the group to ${BLOCK_KIND_LABELS[value]?.toLowerCase() ?? value}.${lossText(change) ? ` ${lossText(change)}` : ""}`,
       );
       reselect(path);
     },
@@ -144,9 +188,9 @@ export function createContentControls(ctx) {
     metrics.setOptions(
       targets.map((target) => ({
         value: target.kind,
-        label: target.available ? `${target.label}${target.lossless ? "" : ` (loses ${target.loss.join(", ")})`}` : `${target.label} (unavailable)`,
+        label: target.available ? `${target.label}${target.lossless ? "" : ` (loses ${target.loss.join(", ")})`}` : target.label,
         disabled: !target.available,
-        title: target.reason,
+        title: target.available ? undefined : shortReason(target.reason),
       })),
     );
     metrics.set("");
@@ -154,9 +198,25 @@ export function createContentControls(ctx) {
 
   // --- arrange the selected block -------------------------------------------------------------------
 
-  const arrange = h("div", { class: "opf-dc-actions-block", role: "group", "aria-label": "Arrange the selected block", "data-role": "arrange" });
+  // One row of icon buttons: the host's actions before (the Studio's Move up and Move down), Group with the next block and Ungroup, then the
+  // host's actions after (Duplicate, Delete). `target` is the selected block, or the selected group (which has no content to convert).
+  const arrange = h("div", { class: "opf-dc-toolbar", role: "group", "aria-label": "Arrange", "data-role": "arrange" });
+  const imageUse = selectField("image-destination", "Use image as", {
+    empty: "Choose…",
+    onChange: (value) => {
+      const destination = IMAGE_DESTINATIONS.find((entry) => entry.value === value);
+      if (!destination) return;
+      const state = ctxState.current;
+      run(
+        () => moveImageToDesign(editor, state.blockPath, destination.target, destination.options),
+        (change) => `Image is now the ${destination.label.toLowerCase()}.${lossText(change) ? ` ${lossText(change)}` : ""}`,
+      );
+      reselect(`slides.${state.slideIndex}`);
+    },
+  });
   {
-    const parts = (state) => state.blockPath?.split(".") ?? [];
+    const target = (state) => state.blockPath ?? state.groupPath;
+    const parts = (state) => target(state)?.split(".") ?? [];
     const blockIndex = (state) => {
       const found = parts(state);
       return found.at(-2) === "blocks" && /^\d+$/.test(found.at(-1)) ? Number(found.at(-1)) : undefined;
@@ -169,9 +229,10 @@ export function createContentControls(ctx) {
     };
     const group = action("Group with the next block", {
       role: "group-next",
+      icon: "Group",
       prepare: (state) => {
         const indices = next(state);
-        if (!indices) return { changed: false, loss: [], reason: "There is no block after this one in its container." };
+        if (!indices) return { changed: false, loss: [], reason: "There is no block after this one." };
         return prepareGroupBlocks(editor.presentation, containerPath(state), indices, { validate: false });
       },
       apply: () => {
@@ -181,56 +242,49 @@ export function createContentControls(ctx) {
       selectAfter: (change) => change.path,
       done: "Blocks grouped.",
     });
-    const parentGroup = (state) => {
+    // The group to dissolve: the selected group itself, or the group the selected block is in.
+    const groupToUndo = (state) => {
+      if (state.groupPath && !state.blockPath) return state.groupPath;
       const found = parts(state);
       return found.length >= 6 && found.at(-4) === "blocks" ? found.slice(0, -2).join(".") : undefined;
     };
-    const ungroup = action("Ungroup these blocks", {
+    const ungroup = action("Ungroup", {
       role: "ungroup",
+      icon: "Ungroup",
       prepare: (state) => {
-        const path = parentGroup(state);
+        const path = groupToUndo(state);
         if (!path) return { changed: false, loss: [], reason: "This block is not inside a group." };
         return prepareUngroupBlock(editor.presentation, path, { validate: false });
       },
-      apply: () => ungroupBlock(editor, parentGroup(ctxState.current)),
+      apply: () => ungroupBlock(editor, groupToUndo(ctxState.current)),
       selectAfter: (change) => change.path,
       done: "Group dissolved.",
     });
-    const image = selectField("image-destination", "Use this image as", {
-      empty: "Choose where it goes…",
-      help: "Moves the image out of the content into the slide's design. Undo puts it back.",
-      onChange: (value) => {
-        const destination = IMAGE_DESTINATIONS.find((entry) => entry.value === value);
-        if (!destination) return;
-        const state = ctxState.current;
-        run(
-          () => moveImageToDesign(editor, state.blockPath, destination.target, destination.options),
-          (change) => `Image is now the ${destination.label.toLowerCase()}. ${lossText(change)}`,
-        );
-        reselect(`slides.${state.slideIndex}`);
-      },
-    });
-    arrange.append(group.wrap, ungroup.wrap, image.wrap);
+    const host = ctx.blockActions ?? {};
+    const before = (host.before ?? []).map(hostAction);
+    const after = (host.after ?? []).map(hostAction);
+    const separator = () => h("span", { class: "opf-dc-toolbar-separator", "aria-hidden": "true" });
+    arrange.append(...before.map((entry) => entry.wrap), ...(before.length ? [separator()] : []), group.wrap, ungroup.wrap, ...(after.length ? [separator()] : []), ...after.map((entry) => entry.wrap));
     updaters.push((state) => {
-      arrange.hidden = !state.content;
+      arrange.hidden = !state.content && !state.groupPath;
       if (arrange.hidden) return;
-      group.update(state);
-      ungroup.update(state);
+      for (const entry of [...before, group, ungroup, ...after]) entry.update(state);
+    });
+    updaters.push((state) => {
       const isImage = state.imageBlock === true;
-      image.wrap.hidden = !isImage;
-      if (isImage) {
-        image.setOptions(
-          IMAGE_DESTINATIONS.map((entry) => {
-            try {
-              const prepared = prepareImageToDesign(editor.presentation, state.blockPath, entry.target, { ...entry.options, validate: false });
-              return { value: entry.value, label: `${entry.label}${prepared.loss.length ? ` (loses ${prepared.loss.join(", ")})` : ""}` };
-            } catch (error) {
-              return { value: entry.value, label: `${entry.label} (unavailable)`, disabled: true, title: messageOf(error) };
-            }
-          }),
-        );
-        image.set("");
-      }
+      imageUse.wrap.hidden = !isImage;
+      if (!isImage) return;
+      imageUse.setOptions(
+        IMAGE_DESTINATIONS.map((entry) => {
+          try {
+            const prepared = prepareImageToDesign(editor.presentation, state.blockPath, entry.target, { ...entry.options, validate: false });
+            return { value: entry.value, label: `${entry.label}${prepared.loss.length ? ` (loses ${prepared.loss.join(", ")})` : ""}` };
+          } catch (error) {
+            return { value: entry.value, label: entry.label, disabled: true, title: shortReason(messageOf(error)) };
+          }
+        }),
+      );
+      imageUse.set("");
     });
   }
 
@@ -238,14 +292,13 @@ export function createContentControls(ctx) {
 
   const slideBox = h("div", { class: "opf-dc-actions-block", "data-role": "slide-structure" });
   {
-    const layouts = selectField("region-layout", "Place the blocks in regions", {
+    const layouts = selectField("region-layout", "Place blocks in regions", {
       empty: "Choose a layout…",
-      help: "Each block gets its own part of the slide. Undo returns them to one list.",
       onChange: (value) => {
         const slideIndex = getSlide();
         const choice = REGION_LAYOUTS[blockCount(slideIndex)]?.find((entry) => entry.id === value);
         if (!choice) return;
-        run(() => placeBlocksInRegions(editor, slideIndex, choice.regions), (change) => `Blocks placed: ${choice.label.toLowerCase()}. ${lossText(change)}`);
+        run(() => placeBlocksInRegions(editor, slideIndex, choice.regions), (change) => `Blocks placed: ${choice.label.toLowerCase()}.${lossText(change) ? ` ${lossText(change)}` : ""}`);
         reselect(`slides.${slideIndex}`);
       },
     });
@@ -278,7 +331,7 @@ export function createContentControls(ctx) {
               const prepared = prepareBlocksToRegions(editor.presentation, state.slideIndex, choice.regions, { validate: false });
               return { value: choice.id, label: `${choice.label}${prepared.loss.length ? ` (loses ${prepared.loss.join(", ")})` : ""}` };
             } catch (error) {
-              return { value: choice.id, label: `${choice.label} (unavailable)`, disabled: true, title: messageOf(error) };
+              return { value: choice.id, label: choice.label, disabled: true, title: shortReason(messageOf(error)) };
             }
           }),
         );
@@ -303,8 +356,8 @@ export function createContentControls(ctx) {
   }
 
   return {
-    /** Nodes for the "Selected content" section: list levels, the group-of-metrics conversion and the arrange actions. */
-    nodes: { list, metrics: metrics.wrap, arrange },
+    /** Nodes for the "Selected content" section: the arrange toolbar, list levels, the group-of-metrics conversion and the image destination. */
+    nodes: { arrange, list, metrics: metrics.wrap, image: imageUse.wrap },
     /** The node for the "Slide structure" section. */
     slideNode: slideBox,
     /** Update every control from the session and the current selection. */

package/dist/data-grid.js

@@ -1120,6 +1120,19 @@ export function createDataGrid(container, options = {}) {
     const td = event.target.closest?.("td[data-line]");
     return td ? { u: Number(td.dataset.line), c: Number(td.dataset.column) } : undefined;
   };
+  // A press focuses a cell (or the table) at once. A host that was editing text elsewhere (the slide canvas) saves it when the grid takes
+  // the focus, and may move the focus back as it does (the canvas focuses the target it saved, from its field's blur), so the grid takes it
+  // once more. Both happen inside the press: a key pressed straight after the click must reach the grid, and a timer would run after it
+  // (browsers dispatch pending input before timers). The timer stays for a host that moves the focus later.
+  const focusFromPress = (at) => {
+    const take = () => (cellNode(at.u, at.c) ?? table).focus?.({ preventScroll: true });
+    const lost = () => !destroyed && !editing && grid && !root.contains(doc.activeElement);
+    take();
+    if (lost()) take();
+    setTimeout(() => {
+      if (lost()) take();
+    }, 0);
+  };
   table.addEventListener("mousedown", (event) => {
     if (!grid || event.button !== 0) return;
     const ruler = event.target.closest?.("th[data-ruler]");
@@ -1139,7 +1152,7 @@ export function createDataGrid(container, options = {}) {
         if (event.shiftKey) selection.anchor = { u: selection.anchor.u, c: 0 };
       }
       paint();
-      (cellNode(selection.focus.u, selection.focus.c) ?? table).focus?.({ preventScroll: true });
+      focusFromPress({ ...selection.focus });
       return;
     }
     const hit = cellFromEvent(event);
@@ -1154,12 +1167,7 @@ export function createDataGrid(container, options = {}) {
     dragging = true;
     invalid = new Map();
     setSelection(event.shiftKey ? selection.anchor : hit, hit, { scroll: false });
-    // A host that was editing text elsewhere (the slide canvas) saves it when this click takes the focus, and may move the focus back as it does.
-    const wanted = { ...selection.focus };
-    setTimeout(() => {
-      if (destroyed || editing || !grid || root.contains(doc.activeElement)) return;
-      cellNode(wanted.u, wanted.c)?.focus({ preventScroll: true });
-    }, 0);
+    focusFromPress({ ...selection.focus });
   });
   table.addEventListener("mouseover", (event) => {
     if (!dragging) return;

package/dist/design-controls.d.ts

@@ -37,6 +37,19 @@ export interface DesignControlsOptions {
   onAddAsset?: (image: { name: string; mediaType: string; bytes: Uint8Array; size: number; alt?: string; file: unknown }) => string | { src: string } | Promise<string | { src: string }>;
   /** Called with every status or error message the panel shows in its live regions. */
   onStatus?: (message: string, info: { error: boolean }) => void;
+  /** Show the selected block's path as a copyable chip under the selection section's Advanced (default true). A host with its own Advanced turns it off. */
+  showPath?: boolean;
+  /** Host actions for the selected block's arrange toolbar: `before` Group with the next block and Ungroup (Move up, Move down), `after` them (Duplicate, Delete). */
+  blockActions?: { before?: readonly DesignBlockAction[]; after?: readonly DesignBlockAction[] };
+}
+/** One icon button of the arrange toolbar, supplied by the host. Its tooltip is the label and shortcut, or the label and the reason when it is disabled. */
+export interface DesignBlockAction {
+  role: string;
+  label: string;
+  /** An icon name of the studio kit's set (`ArrowUp`, `ArrowDown`, `Copy`, `Trash2`, ...). */
+  icon: string;
+  state(): { enabled: boolean; reason?: string; shortcut?: string };
+  run(): void;
 }
 export interface DesignControls {
   element: HTMLElement;