@openpresentation/opf-editor 0.26.9 → 0.27.0

package/dist/workspace-measure.js

@@ -0,0 +1,35 @@
+// CE-06 (promoted from examples/playground.js): text measurement and font notes shared by the workspace parts.
+import { createScriptTextMeasurement } from "@openpresentation/opf-render/fonts";
+import { resolveScriptFonts } from "@openpresentation/opf/composition";
+
+/**
+ * The layout options for composing slide `index` of `deck`: the fonts handle's measurement, made script-aware for this document (Japanese
+ * under Aptos measures with Noto Sans JP, where the plain strict measurement would throw "cannot display U+65E5" with every face loaded).
+ * A fonts handle without a measurement is passed through.
+ */
+export function layoutOptionsFor(fonts, deck, index, catalogs) {
+  if (!fonts?.textMeasurement) return fonts ? { fonts } : {};
+  try {
+    return { fonts: { textMeasurement: createScriptTextMeasurement(fonts.textMeasurement, resolveScriptFonts(deck, { slideIndex: index, catalogs })) } };
+  } catch {
+    return { fonts };
+  }
+}
+
+/** Review text for one font resolution the registry recorded. A change inside one family is a style fallback, not a replacement font. */
+export function describeFontChange(change) {
+  const sameFamily = (change.sourceFamily ?? change.requestedFamily).toLowerCase() === change.resolvedFamily.toLowerCase();
+  if (!sameFamily) return `${change.requestedFamily} → ${change.resolvedFamily} · ${change.compatibility === "metric" ? "Metric substitute" : "Approximate substitute; wrapping may change"} (${change.resolvedWeight}).`;
+  const drawn = `${change.resolvedFamily} ${change.resolvedWeight}${change.italic ? " italic" : ""}`;
+  return change.requestedWeight === change.resolvedWeight
+    ? `${change.requestedFamily}: the ${change.italic ? "italic" : "upright"} face asked for is not available, so ${drawn} is drawn; wrapping may change.`
+    : `${change.requestedFamily} ${change.requestedWeight}: that weight is not available, so ${drawn} is drawn; wrapping may change.`;
+}
+
+/** Notes (`{ path, message }`) for the font substitutions a fonts handle recorded, one per requested face. */
+export function fontSubstitutionNotes(fonts) {
+  const changes = fonts?.substitutions ?? [];
+  return changes
+    .filter((change, index, all) => all.findIndex((other) => other.requestedFamily === change.requestedFamily && other.requestedWeight === change.requestedWeight && other.italic === change.italic) === index)
+    .map((change) => ({ path: change.path ?? "design.fontScheme", message: describeFontChange(change) }));
+}

package/dist/workspace-shell.js

@@ -0,0 +1,96 @@
+// CE-06: the default arrangement of the workspace (`layout: "full"`, `"canvas"` or `"source"`): a bar, the source pane, the slide, the slide
+// row, and a side panel for Review and Design. It only builds DOM and hands the elements to the workspace as named slots; a host that
+// arranges the parts itself passes its own elements as `slots` and none of this runs. Styled by src/styles/workspace.css (tokens only).
+
+const make = (doc, tag, attributes = {}, ...children) => {
+  const node = doc.createElement(tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === undefined || value === false) continue;
+    if (name === "text") node.textContent = value;
+    else node.setAttribute(name, value === true ? "" : value);
+  }
+  node.append(...children);
+  return node;
+};
+
+const VIEW_LABELS = { slide: "Slide", sorter: "Sorter", outline: "Outline", layouts: "Layouts" };
+
+/**
+ * Build the shell inside `root`. `parts` names what is mounted (`source`, `canvas`, `navigator`, `thumbnails`, `present`, `export`, `find`,
+ * `review`, `design`, `layouts`, `sorter`, `outline`, `persistence`, `history`); `views` lists the views in switch order. Returns the slots
+ * (one element per mounted part) and the bar's controls.
+ */
+export function buildWorkspaceShell(root, { parts, views, layout, labels = {} }) {
+  const doc = root.ownerDocument;
+  const text = { slideView: "Slide view", undo: "Undo", redo: "Redo", find: "Find", review: "Review", design: "Design", inspector: "Inspector", ...labels };
+  const slots = {};
+  const controls = {};
+  const slot = (name, tag = "div", attributes = {}) => (slots[name] = make(doc, tag, { "data-opf-slot": name, ...attributes }));
+
+  // The bar.
+  const bar = make(doc, "header", { class: "opf-ws-bar" });
+  if (parts.history) {
+    controls.undo = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-action": "undo", "aria-label": text.undo, title: `${text.undo} · Ctrl/Cmd Z`, text: text.undo });
+    controls.redo = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-action": "redo", "aria-label": text.redo, title: `${text.redo} · Ctrl/Cmd Shift Z`, text: text.redo });
+    bar.append(make(doc, "div", { class: "opf-ws-group" }, controls.undo, controls.redo));
+  }
+  if (parts.find) {
+    controls.find = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-action": "find", "aria-expanded": "false", "aria-keyshortcuts": "Control+F Meta+F Control+H", title: `${text.find} · Ctrl/Cmd F`, text: text.find });
+    bar.append(controls.find);
+  }
+  if (views.length > 1) {
+    const group = make(doc, "div", { class: "opf-ws-views", role: "group", "aria-label": text.slideView });
+    controls.views = {};
+    for (const view of views) group.append(controls.views[view] = make(doc, "button", { type: "button", class: "opf-ws-button", "data-opf-view-button": view, "aria-pressed": "false", text: VIEW_LABELS[view] ?? view }));
+    bar.append(group);
+  }
+  bar.append(make(doc, "span", { class: "opf-ws-spacer" }));
+  if (parts.persistence) bar.append(slot("autosave", "span", { class: "opf-ws-autosave" }));
+  if (parts.export) bar.append(slot("export", "div", { class: "opf-ws-export" }));
+  if (parts.present) bar.append(slot("present", "div", { class: "opf-ws-present" }));
+  const hasBar = bar.children.length > 1;
+
+  // The main column: the slide (or another view) over the slide row.
+  const stage = make(doc, "div", { class: "opf-ws-stage" });
+  const frame = make(doc, "div", { class: "opf-ws-frame" }, slot("canvas", "div", { class: "opf-ws-canvas", "aria-label": "Slide preview" }));
+  stage.append(frame);
+  for (const view of ["sorter", "outline", "layouts"]) if (parts[view]) stage.append(slot(view, "div", { class: `opf-ws-view opf-ws-${view}`, hidden: true }));
+  const main = make(doc, "section", { class: "opf-ws-main", "aria-label": "Slide workspace" });
+  if (parts.find) main.append(slot("find", "div", { class: "opf-ws-find", hidden: true }));
+  main.append(stage);
+  if (parts.navigator || parts.thumbnails) {
+    const dock = make(doc, "div", { class: "opf-ws-dock" });
+    if (parts.navigator) dock.append(slot("navigator", "div", { class: "opf-ws-navigator" }));
+    if (parts.thumbnails) dock.append(slot("thumbnails", "div", { class: "opf-ws-thumbnails" }));
+    main.append(dock);
+  }
+  main.append(slot("status", "p", { class: "opf-ws-status", role: "status" }));
+
+  const body = make(doc, "div", { class: "opf-ws-body" });
+  if (parts.source) body.append(make(doc, "section", { class: "opf-ws-source", "aria-label": "OPF source" }, slot("source", "div", { class: "opf-ws-source-host" })));
+  body.append(main);
+
+  // The side panel: Review and Design as tabs.
+  const tabs = ["design", "review"].filter((name) => parts[name]);
+  if (tabs.length) {
+    controls.tabs = {};
+    const list = make(doc, "div", { class: "opf-ws-tabs", role: "tablist", "aria-label": text.inspector });
+    const side = make(doc, "aside", { class: "opf-ws-side", "aria-label": text.inspector }, list);
+    for (const name of tabs) {
+      list.append(controls.tabs[name] = make(doc, "button", { type: "button", role: "tab", class: "opf-ws-tab", id: `opf-ws-tab-${name}`, "aria-selected": "false", "aria-controls": `opf-ws-panel-${name}`, "data-opf-tab": name, text: text[name] }));
+      side.append(make(doc, "div", { class: "opf-ws-panel", role: "tabpanel", id: `opf-ws-panel-${name}`, "aria-labelledby": `opf-ws-tab-${name}`, hidden: true }, slot(name, "div", { class: `opf-ws-${name}` })));
+    }
+    controls.side = side;
+    body.append(side);
+  }
+
+  if (parts.persistence) root.append();
+  if (hasBar) root.append(bar);
+  if (parts.persistence) root.append(slot("banner", "div", { class: "opf-ws-banner", hidden: true }));
+  root.append(body);
+  root.setAttribute("data-opf-layout", layout);
+  controls.frame = frame;
+  controls.stage = stage;
+  controls.bar = bar;
+  return { slots, controls };
+}

package/dist/workspace-source.js

@@ -0,0 +1,83 @@
+// CE-06 (promoted from openpresentation.org's playground runtime): the source pane's text, read and judged the way a host wants it.
+// `parseSourceText` reads the text of the pane in its format into a document or a message; `reportSource` adds core's verdict. The pane
+// calls these (through `getFindings`) for the text it shows, so the footer of a host and the findings under the code say the same thing.
+import { validate } from "@openpresentation/opf";
+import { fromYaml } from "@openpresentation/opf/yaml";
+import { fromMarkdown } from "@openpresentation/opf/markdown";
+import { findDuplicateKey } from "./exact-source.js";
+
+const isObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+
+/** The checks a source verdict runs by default: the format rules and the catalog reference rules (what the session itself applies to an edit). */
+export const SOURCE_CHECKS = Object.freeze({ only: Object.freeze(["format", "references"]) });
+
+/** Line endings as the code editor holds them: LF. */
+export const lf = (text) => text.replace(/\r\n?/g, "\n");
+
+/** Read `text` in `format` (`json`, `yaml`, `md`): `{ document, message: "" }`, or `{ message }` when it does not read as a document. */
+export function parseSourceText(format, text, { catalogs } = {}) {
+  if (format === "json") {
+    try {
+      const document = JSON.parse(text);
+      if (!isObject(document)) return { message: "An OPF document is a JSON object." };
+      // JSON.parse keeps the last of a repeated key and hides the rest; the pane refuses such a document, so this does too.
+      const duplicate = findDuplicateKey(text);
+      if (duplicate) return { message: `Duplicate key "${duplicate.key}". Remove the repeated key.` };
+      return { document, message: "" };
+    } catch (error) {
+      return { message: error instanceof Error ? error.message : "Not valid JSON" };
+    }
+  }
+  const result = format === "yaml" ? fromYaml(text, { catalogs }) : fromMarkdown(text, { catalogs });
+  const syntax = result.findings.filter((finding) => !finding.ruleId?.startsWith("opf/"));
+  if (syntax.length) return { message: syntax[0].message };
+  return { document: result.presentation, message: "" };
+}
+
+/**
+ * The verdict on the text of the pane: `{ status, findings, valid }`. `status` is `{ kind: "valid", warnings }`,
+ * `{ kind: "invalid", errors, warnings }` or `{ kind: "syntax", format, message }` (the text does not read as a document).
+ */
+export function reportSource(format, text, { catalogs, checks = SOURCE_CHECKS } = {}) {
+  const parsed = parseSourceText(format, text, { catalogs });
+  if (parsed.document === undefined) return { status: { kind: "syntax", format, message: parsed.message }, findings: [], valid: false };
+  const result = validate(parsed.document, { ...checks, ...(catalogs !== undefined ? { catalogs } : {}) });
+  const errors = result.findings.filter((finding) => finding.severity === "error").length;
+  const warnings = result.findings.filter((finding) => finding.severity === "warning").length;
+  return {
+    status: result.valid ? { kind: "valid", warnings } : { kind: "invalid", errors, warnings },
+    findings: result.findings,
+    valid: result.valid,
+  };
+}
+
+/** Copy text to the clipboard; falls back to a hidden textarea and `execCommand` where the Clipboard API is refused. */
+export async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return;
+  } catch {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const copied = document.execCommand("copy");
+    textarea.remove();
+    if (!copied) throw new Error("The browser refused the copy.");
+  }
+}
+
+/** Download a source file the pane produced (`{ filename, text, mime }`) as a Blob link. */
+export function downloadSourceFile(file, text = file.text) {
+  const url = URL.createObjectURL(new Blob([text], { type: `${file.mime};charset=utf-8` }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = file.filename;
+  document.body.append(link);
+  link.click();
+  link.remove();
+  globalThis.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/dist/workspace-theme.js

@@ -0,0 +1,142 @@
+// CE-06: theming of the editor chrome. The chrome reads `--opf-ui-*` CSS custom properties (src/styles/tokens.css). Every component root
+// carries the class `opf-ui` and declares the defaults itself, so a value set on an ancestor never reaches it: a host overrides the
+// tokens on `.opf-ui`. `createThemeController` does that for one editor: it writes a rule, scoped to the editor's root, with enough
+// specificity to win over the package's light, dark and touch rules whichever stylesheet loads last. The rule is built with the CSSOM
+// (`insertRule`, `setProperty`), never from text, so a value cannot close the rule or add another, and an invalid value is dropped.
+
+/** The short names of a theme: each maps to one `--opf-ui-*` custom property. The full names are accepted too. */
+export const THEME_TOKENS = Object.freeze({
+  background: "--opf-ui-bg",
+  surface: "--opf-ui-surface",
+  muted: "--opf-ui-muted",
+  mutedAlt: "--opf-ui-muted-2",
+  text: "--opf-ui-fg",
+  textMuted: "--opf-ui-muted-fg",
+  accent: "--opf-ui-accent",
+  accentText: "--opf-ui-accent-fg",
+  accentStrong: "--opf-ui-accent-strong",
+  border: "--opf-ui-border",
+  borderStrong: "--opf-ui-border-strong",
+  focus: "--opf-ui-ring",
+  danger: "--opf-ui-danger",
+  warning: "--opf-ui-warn",
+  success: "--opf-ui-success",
+  codeBackground: "--opf-ui-code-bg",
+  codeBorder: "--opf-ui-code-border",
+  font: "--opf-ui-font",
+  mono: "--opf-ui-mono",
+  radiusSmall: "--opf-ui-radius-sm",
+  radius: "--opf-ui-radius",
+  radiusMedium: "--opf-ui-radius-md",
+  radiusLarge: "--opf-ui-radius-lg",
+  controlHeight: "--opf-ui-control-h",
+  shadow: "--opf-ui-shadow-pop",
+  motion: "--opf-ui-ease",
+});
+
+const FULL_NAMES = new Set(Object.values(THEME_TOKENS));
+const SCHEMES = new Set(["light", "dark", "auto", "inherit"]);
+
+/**
+ * A map of short or full token names to values, as `{ "--opf-ui-name": "value" }`. A name that is neither a short name nor a
+ * `--opf-ui-*` token of the contract throws, so a typo does not silently do nothing.
+ */
+export function normalizeThemeTokens(map, label = "theme.tokens") {
+  if (map === undefined || map === null) return {};
+  if (typeof map !== "object" || Array.isArray(map)) throw new TypeError(`${label} must be an object of token names and values.`);
+  const out = {};
+  for (const [name, value] of Object.entries(map)) {
+    const full = THEME_TOKENS[name] ?? (FULL_NAMES.has(name) ? name : undefined);
+    if (!full) throw new RangeError(`${label}: "${name}" is not an editor token. Use one of ${Object.keys(THEME_TOKENS).join(", ")} or a full --opf-ui-* name.`);
+    if (value === undefined || value === null) continue;
+    out[full] = String(value);
+  }
+  return out;
+}
+
+/** The theme as the controller applies it: validated, with defaults. Throws on a bad scheme or token name. */
+export function normalizeTheme(theme) {
+  if (theme === undefined || theme === null) return { colorScheme: "inherit", tokens: {}, dark: {} };
+  if (typeof theme !== "object" || Array.isArray(theme)) throw new TypeError("theme must be an object.");
+  const colorScheme = theme.colorScheme ?? "inherit";
+  if (!SCHEMES.has(colorScheme)) throw new RangeError('theme.colorScheme must be "light", "dark", "auto" or "inherit".');
+  return { colorScheme, tokens: normalizeThemeTokens(theme.tokens, "theme.tokens"), dark: normalizeThemeTokens(theme.dark, "theme.dark") };
+}
+
+let themeCounter = 0;
+
+const apply = (rule, tokens) => { for (const [name, value] of Object.entries(tokens)) rule.style.setProperty(name, value); };
+
+/**
+ * Apply a theme to the editor mounted in `root` (the element the host gave `createOpfEditor`; the chrome inside it, and `root` itself, take the values). `update(theme)` replaces it; `destroy()` removes the
+ * rule and the attributes. The scheme: `light` and `dark` force it for this editor, `auto` follows `prefers-color-scheme`, and `inherit` (the
+ * default) leaves it to the host page, which marks dark with `.dark` or `[data-theme="dark"]` on the page, as the stylesheet expects.
+ */
+export function createThemeController(root, initial) {
+  const doc = root.ownerDocument;
+  const win = doc.defaultView;
+  const id = `opf-theme-${++themeCounter}`;
+  const before = { theme: root.getAttribute("data-opf-theme"), scheme: root.getAttribute("data-theme") };
+  const style = doc.createElement("style");
+  style.setAttribute("data-opf-theme-style", "");
+  root.append(style);
+  let media;
+  let onMedia;
+  const detach = () => { if (media && onMedia) media.removeEventListener?.("change", onMedia); media = undefined; onMedia = undefined; };
+  const clearRules = () => { const sheet = style.sheet; while (sheet && sheet.cssRules.length) sheet.deleteRule(0); };
+
+  function write(theme) {
+    clearRules();
+    const sheet = style.sheet;
+    if (!sheet) return;
+    // Three copies of the attribute selector lift the rule over the package's own `.dark .opf-ui`, `[data-theme="dark"] .opf-ui`, forced-light and
+    // touch rules, whichever stylesheet loads last. The element itself is in the rule, so the host's own chrome inside it inherits the tokens.
+    const scope = `[data-opf-theme="${id}"][data-opf-theme="${id}"][data-opf-theme="${id}"]`;
+    const notLight = `${scope}:not([data-theme="light"])`;
+    if (Object.keys(theme.tokens).length) {
+      sheet.insertRule(`${scope}, ${scope} .opf-ui {}`, sheet.cssRules.length);
+      apply(sheet.cssRules[sheet.cssRules.length - 1], theme.tokens);
+    }
+    if (Object.keys(theme.dark).length) {
+      // The same dark scopes tokens.css uses, so a host that marks dark on the page, on an ancestor or on the editor itself is followed.
+      const selectors = [];
+      for (const target of [notLight, `${notLight} .opf-ui`]) selectors.push(`.dark ${target}`, `[data-theme="dark"] ${target}`);
+      selectors.push(`${scope}[data-theme="dark"]`, `${scope}[data-theme="dark"] .opf-ui`, `${scope}.dark`, `${scope}.dark .opf-ui`);
+      sheet.insertRule(`${selectors.join(", ")} {}`, sheet.cssRules.length);
+      apply(sheet.cssRules[sheet.cssRules.length - 1], theme.dark);
+    }
+  }
+
+  const restoreScheme = () => {
+    if (before.scheme === null) root.removeAttribute("data-theme");
+    else root.setAttribute("data-theme", before.scheme);
+  };
+
+  function update(next) {
+    const theme = normalizeTheme(next);
+    detach();
+    root.setAttribute("data-opf-theme", id);
+    if (theme.colorScheme === "light" || theme.colorScheme === "dark") root.setAttribute("data-theme", theme.colorScheme);
+    else if (theme.colorScheme === "auto" && typeof win?.matchMedia === "function") {
+      media = win.matchMedia("(prefers-color-scheme: dark)");
+      onMedia = () => root.setAttribute("data-theme", media.matches ? "dark" : "light");
+      onMedia();
+      media.addEventListener?.("change", onMedia);
+    } else restoreScheme();
+    write(theme);
+    return theme;
+  }
+
+  let current = update(initial);
+  return {
+    get theme() { return current; },
+    update(next) { current = update(next); return current; },
+    destroy() {
+      detach();
+      style.remove();
+      restoreScheme();
+      if (before.theme === null) root.removeAttribute("data-opf-theme");
+      else root.setAttribute("data-opf-theme", before.theme);
+    },
+  };
+}