@openpresentation/opf-editor 0.16.0 → 0.18.0

package/dist/review.d.ts

@@ -61,8 +61,13 @@ export declare function groupFindings(findings: readonly ReviewFinding[]): { cat
 export declare function findingTarget(presentation: unknown, finding: Pick<ReviewFinding, "path">): ReviewTarget;
 /** Apply a `patch` fix as one undoable, validated session change; refuses a stale or unsafe patch. */
 export declare function applyReviewFix(editor: EditorSession, finding: Pick<ReviewFinding, "ruleId"> | undefined, fix: ReviewFix, meta?: Record<string, unknown>): EditorChange;
-/** The patch that sets (or, for `""`, marks decorative) the alt text of the picture at `pointer`; null when nothing changes. */
+/**
+ * The patch that sets (or, for `""`, marks decorative) the alt text of the picture at `pointer`; null when nothing changes. A
+ * logo reference (`var:organization.logo.icon`) stays a whole-field string: its alt is written on the organization logo
+ * asset(s) it draws, and a reference that names no logo is refused (`unresolved-logo-alt`).
+ */
 export declare function altTextPatch(presentation: unknown, pointer: string, text: string): JsonPatchOperation[] | null;
 export declare function setReviewAltText(editor: EditorSession, pointer: string, text: string, meta?: Record<string, unknown>): { changed: boolean } & Partial<EditorChange>;
 export declare function markDecorative(editor: EditorSession, pointer: string, meta?: Record<string, unknown>): { changed: boolean } & Partial<EditorChange>;
+/** The alt text a picture has now; for a logo reference, the alt of the organization asset it draws. */
 export declare function currentAltText(presentation: unknown, pointer: string): string;

package/dist/review.js

@@ -7,7 +7,9 @@
 // module needs no DOM.
 import { validationCategories } from "@openpresentation/opf";
 import { OPFEditorError, getValueAtPath, hasValueAtPath, jsonPointerToOpfPath, opfPathToJsonPointer, splitOpfPath } from "./index.js";
+import { resolveLogo } from "@openpresentation/opf/composition";
 import { assetIdOf, prepareAssetAlt } from "./assets.js";
+import { parseLogoReference } from "./design-options.js";
 
 function fail(code, message, details) {
   return new OPFEditorError(code, message, details);
@@ -158,10 +160,36 @@ export function applyReviewFix(editor, finding, fix, meta = {}) {
 
 const isObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
 
-/** The patch operations that give the asset value at `pointer` alt text (`""` marks it decorative), or `null` when it already has exactly this alt. */
+// RR-71: a logo reference (`var:organization.logo.icon`) is a whole-field string, so its alt text cannot be written beside
+// it ({ src: "var:…", alt } is an ordinary image whose source is no longer the logo). The logo's alt lives on the
+// organization's asset (Organization.logo, each shape and onLight/onDark value a path or Asset): these are the OPF paths of
+// the assets the reference draws, on a light and on a dark background (one path when both resolve to the same asset).
+function logoAltPaths(presentation, value) {
+  if (typeof value !== "string" || !parseLogoReference(value)) return null;
+  const paths = new Set();
+  for (const onDark of [false, true]) {
+    const logo = resolveLogo(presentation, undefined, { reference: value, onDark });
+    if (logo) paths.add(logo.path);
+  }
+  if (!paths.size) {
+    throw fail("unresolved-logo-alt", `${value} names no logo yet. Add the organization's logo first; its alt text is written on the logo in the organization.`, { reference: value });
+  }
+  return [...paths];
+}
+
+/**
+ * The patch operations that give the asset value at `pointer` alt text (`""` marks it decorative), or `null` when it already
+ * has exactly this alt. For a logo reference the alt is written on the organization logo asset(s) it draws.
+ */
 export function altTextPatch(presentation, pointer, text) {
   const value = getValueAtPath(presentation, pointer);
   if (value === undefined) throw fail("stale-finding", "The picture this finding is about no longer exists.", { pointer });
+  const logoPaths = logoAltPaths(presentation, value);
+  if (logoPaths) {
+    // Both backgrounds may name one registry asset (asset:<id>): write it once.
+    const operations = [...new Map(logoPaths.flatMap((path) => altTextPatch(presentation, opfPathToJsonPointer(splitOpfPath(path)), text) ?? []).map((operation) => [JSON.stringify(operation), operation])).values()];
+    return operations.length ? operations : null;
+  }
   const alt = String(text ?? "");
   const id = assetIdOf(value);
   const entry = id === undefined ? undefined : getValueAtPath(presentation, ["assets", id]);
@@ -202,6 +230,14 @@ export function markDecorative(editor, pointer, meta = {}) {
 /** The alt text a picture has now (own or through the assets registry), for pre-filling the field. */
 export function currentAltText(presentation, pointer) {
   const value = getValueAtPath(presentation, pointer);
+  // A logo reference shows the alt of the organization asset it draws (on a light background first).
+  if (typeof value === "string" && parseLogoReference(value)) {
+    for (const onDark of [false, true]) {
+      const logo = resolveLogo(presentation, undefined, { reference: value, onDark });
+      if (logo) return currentAltText(presentation, opfPathToJsonPointer(splitOpfPath(logo.path)));
+    }
+    return "";
+  }
   if (isObject(value) && typeof value.alt === "string") return value.alt;
   const id = assetIdOf(value);
   const entry = id === undefined ? undefined : getValueAtPath(presentation, ["assets", id]);

package/dist/template-panel.d.ts

@@ -5,7 +5,7 @@ export interface TemplatePanelOptions {
   editor: EditorSession;
   /**
    * Draw the live preview: return the SVG of one slide of `presentation` with `variables` (the values typed so far)
-   * as an SVG string, or a promise of one. Typically `renderSlideSvg(presentation, slideIndex, { variables, ... })` from
+   * as an SVG string, or a promise of one. Typically `toSvg(presentation, slideIndex + 1, { variables, ... })` from
    * `@openpresentation/opf-render` with the host's fonts. Omit for no preview.
    */
   renderPreview?: (input: { presentation: unknown; variables: Record<string, unknown>; slideIndex: number }) => string | Promise<string>;

package/dist/template-panel.js

@@ -67,7 +67,7 @@ export function createTemplatePanel(container, options) {
   const builtinList = h(doc, "ul", { class: "opf-template-builtin-list" });
   const builtinSection = h(doc, "details", { class: "opf-template-builtins", "data-opf-component": "template-builtins" },
     h(doc, "summary", { text: "Built-in variables" }),
-    h(doc, "p", { class: "opf-template-help", text: "Read from the presentation's own speaker, organization and deck fields; edit those fields to change them. Use them like any variable: {{speaker.name}} inside text, or var:speaker.photo as a whole image field." }),
+    h(doc, "p", { class: "opf-template-help", text: "Read from the presentation's own speaker, organization and deck fields; edit those fields to change them. Use them like any variable: {{speaker.name}} inside text, or var:speaker.photo as a whole image field. Slide number, section and slide count vary per slide: write them as {{slide.number}}, {{slide.section}} and {{deck.slideCount}} inside any text, not as a whole var: field. The organization logos are images that follow each slide's background (light or dark artwork): place one as a whole image field, for example var:organization.logo.icon in a header or footer zone's image, or choose it with Insert logo." }),
     builtinList);
   const live = h(doc, "p", { class: "opf-template-live", role: "status", "aria-live": "polite" });
   const applyButton = h(doc, "button", { type: "button", class: "opf-template-apply primary", text: "Fill the presentation" });
@@ -230,14 +230,19 @@ export function createTemplatePanel(container, options) {
     const builtins = listBuiltins(editor.presentation);
     insertSelect.replaceChildren(
       ...fields.map((field) => h(doc, "option", { value: field.id, text: `${field.label} (${KIND_LABELS[field.kind]})` })),
-      ...(builtins.length ? [h(doc, "optgroup", { label: "Built-in variables" }, ...builtins.map((entry) => h(doc, "option", { value: entry.name, text: `${entry.label} (${entry.name})` })))] : []),
+      // A slide-scoped image (an organization logo) is a whole-field var: reference, not a {{ }} token for text.
+      ...(builtins.length ? [h(doc, "optgroup", { label: "Built-in variables" }, ...builtins.filter((entry) => !(entry.scope === "slide" && entry.kind === "image")).map((entry) => h(doc, "option", { value: entry.name, text: `${entry.label} (${entry.name})` })))] : []),
     );
     builtinSection.hidden = !builtins.length;
     builtinList.replaceChildren(...builtins.map((entry) => {
-      const shown = builtinValueText(entry);
       const uses = entry.uses.length;
-      return h(doc, "li", { "data-builtin": entry.name, "data-kind": entry.kind, "data-available": entry.available ? "true" : "false" },
-        h(doc, "code", { text: `{{${entry.name}}}` }), ` ${entry.label}: `, entry.available ? shown : h(doc, "em", { text: "not set" }), uses ? ` (used ${uses} time${uses === 1 ? "" : "s"})` : "");
+      // A slide-scoped built-in has no single value: each slide gets its own when it is drawn or exported (FA-31).
+      const slideScoped = entry.scope === "slide";
+      // RR-71: an organization logo is an image placed by var:, and the artwork follows each slide's background.
+      const logoImage = slideScoped && entry.kind === "image";
+      const shown = logoImage ? h(doc, "em", { text: "image; light or dark artwork per slide" }) : slideScoped ? h(doc, "em", { text: "varies per slide" }) : entry.available ? builtinValueText(entry) : h(doc, "em", { text: "not set" });
+      return h(doc, "li", { "data-builtin": entry.name, "data-kind": entry.kind, "data-scope": entry.scope, "data-available": entry.available ? "true" : "false" },
+        h(doc, "code", { text: logoImage ? `var:${entry.name}` : `{{${entry.name}}}` }), ` ${entry.label}: `, shown, slideScoped && !logoImage && !entry.available ? " (no slide has one yet)" : "", logoImage && !entry.available ? " (no logo yet)" : "", uses ? ` (used ${uses} time${uses === 1 ? "" : "s"})` : "");
     }));
     slideSelect.replaceChildren(...(editor.presentation.slides ?? []).map((slide, index) => h(doc, "option", { value: String(index), text: `${index + 1}. ${slideTitle(slide) || "Untitled"}` })));
     previewSlide = Math.min(previewSlide, Math.max(0, (editor.presentation.slides?.length ?? 1) - 1));

package/dist/templates.d.ts

@@ -109,7 +109,9 @@ export interface BuiltinInfo {
   name: string;
   kind: "text" | "image" | "list";
   label: string;
-  /** The source value, when the document has one. */
+  /** `deck` for a value read once from the document; `slide` for `slide.number`, `slide.section` and `deck.slideCount`, which vary per slide. */
+  scope: "deck" | "slide";
+  /** The source value, when the document has one. Never set for a slide-scoped built-in. */
   value?: unknown;
   available: boolean;
   uses: { id: string; path: string; form: "token" | "reference" }[];

package/dist/templates.js

@@ -8,7 +8,7 @@ import { OPFEditorError, getValueAtPath, opfPathToJsonPointer } from "./index.js
 
 const VARIABLE_ID = /^[a-z][a-z0-9-]*$/;
 // A built-in variable name (core FA-04): `speakers`, or deck/speaker/organization plus one or two dotted segments.
-const BUILTIN_NAME = /^(?:speakers|(?:deck|speaker|organization)(?:.[A-Za-z0-9_-]+){1,2})$/;
+const BUILTIN_NAME = /^(?:speakers|(?:deck|slide|speaker|organization)(?:\.[A-Za-z0-9_-]+){1,3})$/;
 const KINDS = ["color", "text", "number", "date", "image", "url", "list"];
 
 /** The form control each variable kind uses. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -258,11 +258,11 @@
     "@codemirror/state": "6.7.6",
     "@codemirror/view": "6.43.13",
     "@lezer/highlight": "1.2.4",
-    "@openpresentation/opf": "^0.16.0",
+    "@openpresentation/opf": "^0.18.1",
     "jsonc-parser": "3.3.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.16.0"
+    "@openpresentation/opf-render": "^0.18.0"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -314,8 +314,9 @@
     "@expo-google-fonts/roboto-mono": "0.4.2",
     "@expo-google-fonts/stix-two-math": "0.4.0",
     "@expo-google-fonts/tinos": "0.4.2",
-    "@openpresentation/opf-pptx": "^0.16.0",
-    "@openpresentation/opf-render": "^0.16.0",
+    "@openpresentation/opf-pptx": "^0.18.0",
+    "@openpresentation/opf-render": "^0.18.0",
+    "@resvg/resvg-js": "2.6.2",
     "axe-core": "4.13.0",
     "esbuild": "0.28.2",
     "jszip": "3.10.2",