@openpresentation/opf-editor 0.28.0 → 0.29.1

package/dist/studio-kit/dom.js

@@ -41,6 +41,21 @@ export const ICONS = {
   Hash: '<line x1="4" x2="20" y1="9" y2="9"/><line x1="4" x2="20" y1="15" y2="15"/><line x1="10" x2="8" y1="3" y2="21"/><line x1="16" x2="14" y1="3" y2="21"/>',
   Quote: '<path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>',
   GitCommitHorizontal: '<circle cx="12" cy="12" r="3"/><line x1="3" x2="9" y1="12" y2="12"/><line x1="15" x2="21" y1="12" y2="12"/>',
+  Video: '<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/>',
+  Gauge: '<path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>',
+  CalendarRange: '<rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4"/><path d="M3 10h18"/><path d="M8 2v4"/><path d="M17 14h-6"/><path d="M13 18H7"/><path d="M7 14h.01"/><path d="M17 18h.01"/>',
+  Type: '<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/>',
+  Menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
+  FileCode: '<path d="M10 12.5 8 15l2 2.5"/><path d="m14 12.5 2 2.5-2 2.5"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/>',
+  PanelLeft: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/>',
+  Presentation: '<path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/>',
+  Keyboard: '<path d="M10 8h.01"/><path d="M12 12h.01"/><path d="M14 8h.01"/><path d="M16 12h.01"/><path d="M18 8h.01"/><path d="M6 8h.01"/><path d="M7 16h10"/><path d="M8 12h.01"/><rect width="20" height="16" x="2" y="4" rx="2"/>',
+  EyeOff: '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>',
+  Ungroup: '<rect width="8" height="6" x="5" y="4" rx="1"/><rect width="8" height="6" x="11" y="14" rx="1"/>',
+  ArrowUp: '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
+  IndentIncrease: '<path d="M21 12H11"/><path d="M21 18H11"/><path d="M21 6H11"/><path d="m3 8 4 4-4 4"/>',
+  IndentDecrease: '<path d="M21 12H11"/><path d="M21 18H11"/><path d="M21 6H11"/><path d="m7 8-4 4 4 4"/>',
+  ArrowDown: '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>',
   Group: '<path d="M3 7V5c0-1.1.9-2 2-2h2"/><path d="M17 3h2c1.1 0 2 .9 2 2v2"/><path d="M21 17v2c0 1.1-.9 2-2 2h-2"/><path d="M7 21H5c-1.1 0-2-.9-2-2v-2"/><rect width="7" height="5" x="7" y="7" rx="1"/><rect width="7" height="5" x="10" y="12" rx="1"/>',
 };
 
@@ -114,20 +129,41 @@ export const pct = (fraction) => `${Math.round(fraction * 10000) / 100}%`;
 export function openMenu(dom, host, { x, y, items, label, returnFocus, onClose, className = "" }) {
   const p = dom.prefix;
   const menu = dom.el("div", `${p}-menu ${className}`.trim(), { role: "menu", "aria-label": label });
-  const buttons = items.map((item) => {
+  // CE-20: items may carry an `icon` (a Lucide name), a `media` element (a layout diagram), a `description` (a second line), a `title` (why
+  // it is disabled), `pointerdown(event, item)` (an item that can also be dragged out of the menu) and a `group` name: consecutive items of
+  // one group sit in a `role="group"` under a visible heading. `{ separator: true }` draws a separator.
+  let parent = menu, groupName;
+  const buttons = [];
+  for (const item of items) {
+    if (item.separator) { menu.append(dom.el("div", `${p}-menu-separator`, { role: "separator" })); parent = menu; groupName = undefined; continue; }
+    if (item.group !== groupName) {
+      groupName = item.group;
+      if (groupName) {
+        parent = dom.el("div", `${p}-menu-group`, { role: "group", "aria-label": groupName });
+        parent.append(dom.el("div", `${p}-menu-heading`, { "aria-hidden": "true", text: groupName }));
+        menu.append(parent);
+      } else parent = menu;
+    }
     const role = item.role ?? "menuitem";
-    const node = dom.el("button", `${p}-menuitem`, { type: "button", role, tabindex: "-1", "aria-disabled": item.disabled ? "true" : undefined, "aria-checked": role === "menuitemcheckbox" ? String(Boolean(item.checked)) : undefined });
-    node.append(dom.el("span", `${p}-menu-label`, { text: item.label }));
+    const node = dom.el("button", `${p}-menuitem`, { type: "button", role, tabindex: "-1", title: item.title, "aria-disabled": item.disabled ? "true" : undefined, "aria-checked": role === "menuitemcheckbox" ? String(Boolean(item.checked)) : undefined, "aria-keyshortcuts": item.keyshortcuts });
+    if (item.media) node.append(item.media);
+    else if (item.icon) node.append(dom.icon(item.icon, 16));
+    if (item.description) {
+      const text = dom.el("span", `${p}-menu-text`);
+      text.append(dom.el("span", `${p}-menu-label`, { text: item.label }), dom.el("span", `${p}-menu-description`, { text: item.description }));
+      node.append(text);
+    } else node.append(dom.el("span", `${p}-menu-label`, { text: item.label }));
     if (item.hint) node.append(dom.el("span", `${p}-menu-hint`, { text: item.hint }));
     if (role === "menuitemcheckbox") node.prepend(dom.icon(item.checked ? "Check" : "Square", 14));
+    if (item.pointerdown) node.addEventListener("pointerdown", (event) => item.pointerdown(event, item, { close: () => close({ restore: false }) }));
     node.addEventListener("click", () => {
       if (item.disabled) return;
       close();
       item.onSelect?.();
     });
-    return node;
-  });
-  menu.append(...buttons);
+    parent.append(node);
+    buttons.push(node);
+  }
   let closed = false;
   const outside = (event) => { if (!menu.contains(event.target)) close({ restore: false }); };
   function close({ restore = true } = {}) {

package/dist/studio-layers.d.ts

@@ -0,0 +1,12 @@
+/** CE-20 (internal): the Studio's layers tree over the current slide's scene. */
+import type { KitDom } from "./studio-kit/dom.js";
+import type { SlideAdapter } from "./slide-adapter.js";
+
+export interface StudioLayers {
+  element: HTMLElement;
+  render(): void;
+  paintSelection(options?: { focus?: boolean }): void;
+  focus(): void;
+  destroy(): void;
+}
+export declare function createStudioLayers(container: HTMLElement, options: { dom: KitDom; adapter: SlideAdapter; studio: any }): StudioLayers;

package/dist/studio-layers.js

@@ -0,0 +1,218 @@
+// CE-20: the Studio's layers panel, the current slide's scene as a tree (the WAI-ARIA tree pattern from the kit: `role="tree"`, a roving tab
+// stop, `aria-level`, `aria-setsize`, `aria-posinset`, `aria-selected`, `aria-expanded`). A click selects, Shift+click selects a range of
+// siblings, Cmd or Ctrl+click toggles one; the arrow keys move and expand or collapse; Enter goes to the canvas with that node selected; F2 edits
+// a text node; a drag reorders or moves into a container with the canvas's trial and reason. One selection for every surface: the Studio
+// owns it, this only draws it and asks for changes.
+import { hitRow, rovingTabStop, rowDropMode, showTreeDrop, treeItem, treeKeyAction } from "./studio-kit/tree.js";
+import { isTypingTarget } from "./studio-kit/dom.js";
+
+const ICON_OF = { slide: "Square", heading: "Heading", region: "Columns2", group: "Group", implicit: "AlignLeft", part: "GitCommitHorizontal" };
+const TYPE_ICON = { text: "AlignLeft", list: "List", image: "Image", video: "Video", chart: "ChartColumn", table: "Table", code: "Code", metric: "Hash", quote: "Quote", timeline: "CalendarRange" };
+
+/**
+ * Mount the layers tree in `container`. `adapter` is the slide adapter, `studio` the controller. Returns `{ element, render, paintSelection,
+ * focus, destroy }`.
+ */
+export function createStudioLayers(container, { dom, adapter, studio }) {
+  const doc = container.ownerDocument;
+  const { el } = dom;
+  const p = dom.prefix;
+  const scroller = el("div", `${p}-layers-scroll`);
+  const tree = el("ul", `${p}-tree`, { role: "tree", "aria-label": "Layers", "aria-multiselectable": "true" });
+  const mark = el("div", `${p}-tree-drop`, { "aria-hidden": "true" });
+  mark.hidden = true;
+  scroller.append(tree, mark);
+  container.append(scroller);
+  const collapsed = new Set();
+  let rows = [];
+  let focusKey = null;
+  let drag = null;
+  let lastScene = null;
+
+  const scene = () => adapter.scene();
+  const visibleChildren = (s, key) => s.children(key).filter((node) => node.kind !== "part");
+
+  function render() {
+    const s = scene();
+    lastScene = s;
+    const hadFocus = tree.contains(doc.activeElement);
+    const selected = new Set(studio.selectedKeys());
+    const items = [];
+    rows = [];
+    const add = (node, level, setsize, posinset) => {
+      const children = visibleChildren(s, node.key);
+      const expandable = children.length > 0;
+      const expanded = expandable && !collapsed.has(node.key);
+      const li = treeItem(dom, { level, selected: selected.has(node.key), expanded: expandable ? expanded : undefined, setsize: level > 1 ? setsize : undefined, posinset: level > 1 ? posinset : undefined, attributes: { "data-key": node.key, "data-kind": node.kind }, className: `${p}-row` });
+      const label = el("span", `${p}-row-label`);
+      label.style.setProperty("--opf-studio-level", String(level - 1));
+      if (expandable) {
+        const caret = el("span", `${p}-caret`, { "aria-hidden": "true" });
+        caret.append(dom.icon(expanded ? "ChevronDown" : "ChevronRight", 14));
+        caret.addEventListener("click", (event) => { event.stopPropagation(); toggle(node.key); });
+        label.append(caret);
+      } else label.append(el("span", `${p}-caret`, { "aria-hidden": "true" }));
+      label.append(dom.icon(node.kind === "block" || node.kind === "implicit" ? TYPE_ICON[node.type] ?? "Square" : ICON_OF[node.kind] ?? "Square", 14));
+      label.append(el("span", `${p}-row-text`, { text: node.kind === "slide" ? studio.slideLabel(node) : node.label }));
+      if (node.findings.length) label.append(el("span", `${p}-row-badge`, { text: String(node.findings.length), title: node.findings.map((finding) => finding.message).join("\n"), "aria-label": `${node.findings.length} finding${node.findings.length === 1 ? "" : "s"}` }));
+      if (node.hidden) { const hidden = el("span", `${p}-row-hidden`, { title: "Hidden slide" }); hidden.append(dom.icon("EyeOff", 14)); label.append(hidden); }
+      li.append(label);
+      items.push(li);
+      rows.push({ row: li, key: node.key, node, level, expandable, expanded });
+      if (expanded) {
+        const group = el("ul", `${p}-tree-group`, { role: "group" });
+        li.append(group);
+        const parentItems = items.length;
+        children.forEach((child, index) => add(child, level + 1, children.length, index + 1));
+        group.append(...items.splice(parentItems));
+      }
+    };
+    const slide = s.node(s.slideKey);
+    add(slide, 1, 1, 1);
+    // The Background pseudo-row: it selects the slide and shows the Design panel's background section.
+    const background = treeItem(dom, { level: 2, selected: false, setsize: visibleChildren(s, s.slideKey).length + 1, posinset: visibleChildren(s, s.slideKey).length + 1, attributes: { "data-key": "#background", "data-kind": "background" }, className: `${p}-row` });
+    const backgroundLabel = el("span", `${p}-row-label`);
+    backgroundLabel.style.setProperty("--opf-studio-level", "1");
+    backgroundLabel.append(el("span", `${p}-caret`, { "aria-hidden": "true" }), dom.icon("Image", 14), el("span", `${p}-row-text`, { text: "Background" }));
+    background.append(backgroundLabel);
+    rows.push({ row: background, key: "#background", node: null, level: 2, expandable: false, expanded: false });
+    const slideGroup = items[0]?.querySelector(":scope > ul");
+    if (slideGroup) slideGroup.append(background);
+    else { const group = el("ul", `${p}-tree-group`, { role: "group" }); group.append(background); items[0]?.append(group); }
+    tree.replaceChildren(...items);
+    paintSelection({ focus: hadFocus });
+  }
+
+  /** Mark the selection and the tab stop without rebuilding (`focus`: move focus to the stop). */
+  function paintSelection({ focus = false } = {}) {
+    if (scene() !== lastScene) { render(); return; }
+    const selected = new Set(studio.selectedKeys());
+    const primary = studio.primaryKey();
+    for (const entry of rows) entry.row.setAttribute("aria-selected", String(entry.key !== "#background" && selected.has(entry.key)));
+    const stop = (focus ? null : rows.find((entry) => entry.key === (focusKey && tree.contains(doc.activeElement) ? focusKey : primary))) ?? rows.find((entry) => entry.key === primary) ?? rows[0];
+    if (focus && stop) focusKey = stop.key;
+    rovingTabStop(rows.map((entry) => entry.row), stop?.row);
+    if (focus && stop) stop.row.focus({ preventScroll: false });
+    else if (stop && !tree.contains(doc.activeElement)) stop.row.scrollIntoView?.({ block: "nearest" });
+  }
+
+  function toggle(key) {
+    if (collapsed.has(key)) collapsed.delete(key); else collapsed.add(key);
+    focusKey = key;
+    render();
+    rows.find((entry) => entry.key === key)?.row.focus();
+  }
+  const rowOf = (target) => rows.find((entry) => entry.row === target.closest?.(`.${p}-row`));
+
+  function activate(entry, event) {
+    if (entry.key === "#background") { studio.select([scene().slideKey], { source: "layers" }); studio.showDesignSection("background"); return; }
+    if (event.shiftKey) studio.selectRange(entry.key, { source: "layers" });
+    else if (event.metaKey || event.ctrlKey) studio.selectAdd(entry.key, { source: "layers" });
+    else studio.select([entry.key], { source: "layers" });
+  }
+  tree.addEventListener("click", (event) => {
+    const entry = rowOf(event.target);
+    if (!entry || drag?.moved) return;
+    focusKey = entry.key;
+    activate(entry, event);
+    entry.row.focus({ preventScroll: true });
+  });
+  tree.addEventListener("focusin", (event) => { const entry = rowOf(event.target); if (entry) focusKey = entry.key; });
+  tree.addEventListener("keydown", (event) => {
+    if (isTypingTarget(event.target)) return;
+    const entry = rowOf(event.target);
+    if (!entry) return;
+    const visible = rows.map((item) => item.row);
+    const parentRow = entry.node?.parent ? rows.find((item) => item.key === entry.node.parent)?.row : entry.key === "#background" ? rows[0]?.row : null;
+    const firstChild = entry.expanded ? rows[rows.indexOf(entry) + 1]?.row : null;
+    if (event.key === "F2" && entry.node) { event.preventDefault(); studio.select([entry.key], { source: "layers" }); studio.beginTextEdit(entry.key); return; }
+    if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      activate(entry, {});
+      studio.focusCanvas();
+      return;
+    }
+    if ((event.key === "ContextMenu" || (event.key === "F10" && event.shiftKey)) && entry.node) {
+      event.preventDefault();
+      if (!studio.selectedKeys().includes(entry.key)) studio.select([entry.key], { source: "layers" });
+      const box = entry.row.getBoundingClientRect();
+      studio.openContextMenu({ x: box.left + 24, y: box.bottom }, { returnFocus: entry.row });
+      return;
+    }
+    const action = treeKeyAction(event, entry.row, visible, { expandable: entry.expandable, expanded: entry.expanded, collapsible: entry.expandable, parent: parentRow, firstChild, menu: false });
+    if (!action || action.type === "activate" || action.type === "menu") {
+      if (event.key === " ") { event.preventDefault(); activate(entry, event); }
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (action.type === "expand" || action.type === "collapse") { toggle(entry.key); return; }
+    const target = rows.find((item) => item.row === action.target);
+    if (!target) return;
+    focusKey = target.key;
+    rovingTabStop(visible, target.row);
+    target.row.focus();
+    if (target.key !== "#background" && !event.shiftKey) studio.select([target.key], { source: "layers" });
+    else if (event.shiftKey && target.key !== "#background") studio.selectRange(target.key, { source: "layers" });
+  });
+
+  // --- drag to reorder or move into a container -------------------------------------------------------------------------------------------
+  tree.addEventListener("pointerdown", (event) => {
+    const entry = rowOf(event.target);
+    if (!entry?.node?.can?.move || studio.readOnly || (event.pointerType === "mouse" && event.button !== 0)) return;
+    drag = { entry, x: event.clientX, y: event.clientY, id: event.pointerId, moved: false, drop: null };
+  });
+  const dropFor = (clientY) => {
+    const target = hitRow(rows.filter((item) => item.node), clientY);
+    if (!target) return null;
+    const box = target.row.querySelector(`.${p}-row-label`).getBoundingClientRect();
+    const node = target.node;
+    const container = node.kind === "slide" || node.kind === "group" || node.kind === "region";
+    const mode = rowDropMode((clientY - box.top) / Math.max(1, box.height), { root: node.kind === "slide", container });
+    const keys = studio.selectedKeys().includes(drag.entry.key) ? studio.selectedKeys() : [drag.entry.key];
+    let targetKey, index;
+    if (mode === "into") { targetKey = node.key; index = scene().contentChildren(node.key).length; }
+    else {
+      if (!node.parent) return null;
+      targetKey = node.parent;
+      const list = scene().contentChildren(node.parent);
+      index = list.findIndex((child) => child.key === node.key) + (mode === "after" ? 1 : 0);
+      if (index < 0) return null;
+    }
+    const trial = adapter.trialMove(keys, targetKey, index);
+    return { keys, target: targetKey, index, mode, box, ...trial };
+  };
+  tree.addEventListener("pointermove", (event) => {
+    if (!drag || event.pointerId !== drag.id) return;
+    if (!drag.moved && Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 4) return;
+    if (!drag.moved) { drag.moved = true; try { tree.setPointerCapture?.(event.pointerId); } catch { /* a pointer that cannot be captured (a synthetic one) */ } if (!studio.selectedKeys().includes(drag.entry.key)) studio.select([drag.entry.key], { source: "layers" }); }
+    drag.drop = dropFor(event.clientY);
+    showTreeDrop(mark, scroller, drag.drop ? { mode: drag.drop.mode, state: drag.drop.ok ? (drag.drop.noop ? "same" : "ok") : "refused", reason: drag.drop.reason, box: drag.drop.box } : null);
+    if (drag.drop && !drag.drop.ok) studio.status(drag.drop.reason);
+  });
+  const endDrag = (commit) => {
+    const session = drag;
+    drag = null;
+    showTreeDrop(mark, scroller, null);
+    if (!session?.moved || !commit) return;
+    // The click that follows a drag must not select the row under the pointer.
+    drag = { moved: true };
+    globalThis.setTimeout(() => { if (drag?.moved && !drag.entry) drag = null; }, 0);
+    const found = session.drop;
+    if (!found) return;
+    if (!found.ok) { studio.announce(found.reason); return; }
+    if (!found.noop) studio.move(found.keys, found.target, found.index);
+  };
+  tree.addEventListener("pointerup", () => endDrag(true));
+  tree.addEventListener("pointercancel", () => endDrag(false));
+  tree.addEventListener("keydown", (event) => { if (event.key === "Escape" && drag?.moved) { event.preventDefault(); event.stopPropagation(); endDrag(false); studio.announce("Move cancelled."); } }, true);
+
+  return {
+    element: scroller,
+    render,
+    paintSelection,
+    focus() { (rows.find((entry) => entry.row.tabIndex === 0) ?? rows[0])?.row.focus(); },
+    destroy() { scroller.remove(); },
+  };
+}

package/dist/studio.d.ts

@@ -0,0 +1,31 @@
+/**
+ * CE-20 (internal): the Studio's shell and controller. Hosts use `createOpfEditor(el, { layout: "studio" })` from
+ * `@openpresentation/opf-editor/workspace`; the workspace calls these.
+ */
+import type { KitDom } from "./studio-kit/dom.js";
+import type { OpfCommand, OpfCommandInfo, OpfEditorSlots, OpfStudioOptions, OpfStudioSelectionItem } from "./workspace.js";
+import type { SlideAdapter } from "./slide-adapter.js";
+
+export interface StudioShell {
+  dom: KitDom;
+  [element: string]: unknown;
+}
+export declare function buildStudioShell(root: HTMLElement, options: { parts: Record<string, boolean>; layout: "studio" | "playground"; labels?: Record<string, string>; studio?: OpfStudioOptions; slots?: OpfEditorSlots }): { slots: OpfEditorSlots & Record<string, HTMLElement>; controls: { undo: HTMLButtonElement; redo: HTMLButtonElement }; shell: StudioShell };
+export interface Studio {
+  readonly layout: "studio" | "playground";
+  readonly selection: readonly OpfStudioSelectionItem[];
+  readonly zoom: number;
+  readonly adapter: SlideAdapter;
+  readonly commands: { list(): OpfCommandInfo[]; run(id: string): boolean; register(command: OpfCommand): () => void };
+  setLayout(layout: "studio" | "playground"): boolean;
+  select(keys: string[], options?: { source?: string }): void;
+  selectTargets(keysOrPaths: string | string[]): boolean;
+  revealPath(path: string): boolean;
+  setZoom(zoom: number): number;
+  fit(mode?: "slide" | "width"): number;
+  openLayout(layoutId?: string, options?: { slide?: number }): boolean;
+  showTab(id: string, options?: { focus?: boolean }): boolean;
+  refresh(): void;
+  destroy(): void;
+}
+export declare function createStudio(context: Record<string, any>): Studio;