@openpresentation/opf-editor 0.24.3 → 0.25.0

package/dist/presenter.d.ts

@@ -83,16 +83,19 @@ export interface PresentButtonOptions {
   density?: "comfortable" | "touch";
   /** The accessible name (default "Present"). */
   label?: string;
+  /** `"quiet"` (default): a transparent icon button like the toolbar's undo and redo. `"primary"`: the filled accent look of the Export trigger. */
+  variant?: "quiet" | "primary";
 }
 
 export interface PresentButton {
   readonly element: HTMLButtonElement;
   setDisabled(reason?: boolean | string): void;
   setDensity(density: "comfortable" | "touch"): void;
+  setVariant(variant: "quiet" | "primary"): void;
   destroy(): void;
 }
 
-/** The icon-only Present button: a Lucide Presentation icon, `aria-label="Present"`, title "Present (F5)", styled like the Export trigger. */
+/** The icon-only Present button: a Lucide Presentation icon, `aria-label="Present"`, title "Present (F5)". Quiet by default (a transparent icon button like undo and redo); `variant: "primary"` styles it like the Export trigger. */
 export declare function createPresentButton(container: HTMLElement, options?: PresentButtonOptions): PresentButton;
 
 /**

package/dist/presenter.js

@@ -372,9 +372,10 @@ function isInteractiveTarget(target) {
  * Mount the Present button in `container`: an icon-only button (Lucide Presentation) named "Present", titled "Present (F5)".
  *
  * Options: `onPresent(event)`, `disabled` (`true`, or a string that says why and is the title), `density` (`"comfortable"` 32px, or `"touch"` 40px)
- * and `label` (the accessible name, default "Present"). A disabled button stays focusable (`aria-disabled`) and does nothing.
+ * `label` (the accessible name, default "Present") and `variant` (`"quiet"`, the default: a transparent icon button like the toolbar's undo and redo,
+ * or `"primary"`: the filled accent look of the Export trigger). A disabled button stays focusable (`aria-disabled`) and does nothing.
  *
- * Returns `{ element, setDisabled(reason), setDensity(density), destroy() }`.
+ * Returns `{ element, setDisabled(reason), setDensity(density), setVariant(variant), destroy() }`.
  */
 export function createPresentButton(container, options = {}) {
   if (!container?.ownerDocument) throw new TypeError("A DOM container is required.");
@@ -384,7 +385,7 @@ export function createPresentButton(container, options = {}) {
   let destroyed = false;
   const button = el(doc, "button", {
     type: "button", class: "opf-present-button opf-ui", "aria-label": label, title: "Present (F5)", "aria-keyshortcuts": "F5",
-    "data-density": options.density === "touch" ? "touch" : "comfortable",
+    "data-density": options.density === "touch" ? "touch" : "comfortable", "data-variant": options.variant === "primary" ? "primary" : "quiet",
   }, icon(doc, "Presentation", 16));
   const paint = () => {
     if (disabledReason) { button.setAttribute("aria-disabled", "true"); button.title = disabledReason; }
@@ -404,6 +405,7 @@ export function createPresentButton(container, options = {}) {
       paint();
     },
     setDensity(next) { button.dataset.density = next === "touch" ? "touch" : "comfortable"; },
+    setVariant(next) { button.dataset.variant = next === "primary" ? "primary" : "quiet"; },
     destroy() { destroyed = true; button.remove(); },
   };
 }

package/dist/slide-manager.js

@@ -9,6 +9,7 @@ import {
 import { listSwitchOptions } from "./switches.js";
 import { layoutRegionSummary } from "./layout-templates.js";
 import { groupLayoutChoices } from "./layout-templates.js";
+import { buildLayoutDiagram } from "./layout-diagram.js";
 import { switchDimension } from "./switches.js";
 
 let instances = 0;
@@ -521,13 +522,8 @@ export function createSlideManager(container, options) {
       template.replaceChildren(); currentPreview.replaceChildren();
       if (choice?.record?.preview && typeof choice.record.preview === "string") {
         template.append(el("img", { src: choice.record.preview, alt: `${choice.label} template preview` }));
-      } else if (Array.isArray(choice?.record?.areas)) {
-        const diagram = el("div", { class: "opf-layout-diagram" });
-        diagram.style.gridTemplateAreas = choice.record.areas.map((row) => `"${row.join(" ")}"`).join(" ");
-        diagram.style.gridTemplateColumns = `repeat(${choice.record.areas[0]?.length ?? 1}, 1fr)`;
-        const areas = [...new Set(choice.record.areas.flat())].filter((area) => area !== ".");
-        for (const area of areas) { const part = el("span", { text: area }); part.style.gridArea = area; diagram.append(part); }
-        template.append(diagram);
+      } else if (Array.isArray(choice?.record?.regions)) {
+        template.append(buildLayoutDiagram(document, choice.record));
       }
       if (choice && options.renderLayoutPreview) {
         try { currentPreview.innerHTML = options.renderLayoutPreview(deck(), current(), choice) ?? ""; }