@openpresentation/opf-editor 0.24.0 → 0.24.2

package/dist/block-controls.js

@@ -29,9 +29,9 @@ export function createBlockControls(root, options) {
     if(parts.at(-2)!=='blocks'||!Number.isInteger(index)||index<0||!Array.isArray(source)||index>=source.length){options.onError(new Error('Choose an existing content block.'));return;}
     const count=source.length;
     panel=doc.createElement('div');panel.setAttribute('role','dialog');panel.setAttribute('aria-label','Move content block');
-    panel.style.cssText='position:absolute;right:8px;bottom:8px;width:280px;max-width:calc(100% - 16px);box-sizing:border-box;padding:14px;background:white;color:#332e40;border:1px solid #d5cde5;border-radius:8px;box-shadow:0 5px 24px #28203922;pointer-events:auto;font:12px/1.5 system-ui;z-index:3';
+    panel.style.cssText='position:absolute;right:8px;bottom:8px;width:280px;max-width:calc(100% - 16px);box-sizing:border-box;padding:14px;background:var(--opf-ui-surface,white);color:var(--opf-ui-fg,#332e40);border:1px solid var(--opf-ui-border,#d5cde5);border-radius:var(--opf-ui-radius-md,8px);box-shadow:var(--opf-ui-shadow-pop,0 5px 24px #28203922);pointer-events:auto;font:12px/1.5 var(--opf-ui-font,system-ui);z-index:3';
     const heading=doc.createElement('strong');heading.textContent='Move content';panel.append(heading);
-    const button=(label,handler,disabled=false)=>{const b=doc.createElement('button');b.type='button';b.textContent=label;b.disabled=disabled;b.style.cssText='margin:6px 5px 0 0;padding:5px 8px;border:1px solid #ded8e8;border-radius:4px;background:#faf9fc;color:inherit;cursor:pointer';b.onclick=handler;panel.append(b);return b;};
+    const button=(label,handler,disabled=false)=>{const b=doc.createElement('button');b.type='button';b.textContent=label;b.disabled=disabled;b.style.cssText='margin:6px 5px 0 0;padding:5px 8px;border:1px solid var(--opf-ui-border,#ded8e8);border-radius:var(--opf-ui-radius-sm,4px);background:var(--opf-ui-muted-2,#faf9fc);color:inherit;cursor:pointer';b.onclick=handler;panel.append(b);return b;};
     button('Earlier',()=>move(path,container,index-1,base),index===0);
     button('Later',()=>move(path,container,index+2,base),index===count-1);
     const label=doc.createElement('label');label.textContent='Destination';label.style.cssText='display:block;margin-top:10px';
@@ -63,7 +63,7 @@ export function createBlockControls(root, options) {
     if(!containers.some(c=>c.path===requested)){options.onError(new Error('Choose a content container on this slide.'));return;}
     if(index!==undefined&&(!Number.isInteger(index)||index<0||index>containers.find(c=>c.path===requested).count)){options.onError(new Error('Insertion index is out of range.'));return;}
     panel=doc.createElement('div');panel.setAttribute('role','dialog');panel.setAttribute('aria-label','Add content');
-    panel.style.cssText='position:absolute;right:8px;top:40px;width:300px;max-width:calc(100% - 16px);max-height:calc(100% - 48px);overflow:auto;box-sizing:border-box;padding:14px;background:white;color:#332e40;border:1px solid #d5cde5;border-radius:8px;box-shadow:0 5px 24px #28203922;pointer-events:auto;font:12px/1.5 system-ui;z-index:3';
+    panel.style.cssText='position:absolute;right:8px;top:40px;width:300px;max-width:calc(100% - 16px);max-height:calc(100% - 48px);overflow:auto;box-sizing:border-box;padding:14px;background:var(--opf-ui-surface,white);color:var(--opf-ui-fg,#332e40);border:1px solid var(--opf-ui-border,#d5cde5);border-radius:var(--opf-ui-radius-md,8px);box-shadow:var(--opf-ui-shadow-pop,0 5px 24px #28203922);pointer-events:auto;font:12px/1.5 var(--opf-ui-font,system-ui);z-index:3';
     const heading=doc.createElement('strong');heading.textContent='Add content';panel.append(heading);
     function field(label,node){const wrapper=doc.createElement('label');wrapper.textContent=label;wrapper.style.cssText='display:block;margin-top:10px';node.setAttribute('aria-label',label);node.style.cssText='display:block;box-sizing:border-box;width:100%;padding:6px;margin-top:4px';wrapper.append(node);panel.append(wrapper);return wrapper;}
     const kind=doc.createElement('select');for(const [value,label] of [['text','Text'],['list','List'],['chart','Chart'],['table','Table'],['metric','Metric'],['quote','Quote'],['code','Code'],['timeline','Timeline'],['group','Group'],['image','Image'],['video','Video']]){const option=doc.createElement('option');option.value=value;option.textContent=label;kind.append(option);}field('Content type',kind);
@@ -74,7 +74,7 @@ export function createBlockControls(root, options) {
     const source=doc.createElement('input');source.type='text';const media=field('Media URL or asset reference',source);media.style.display='none';
     const file=doc.createElement('input');file.type='file';file.accept='image/png,image/jpeg,image/webp';const upload=field('Or choose an image',file);upload.style.display='none';
     let loading=false,fileRevision=0;const thisPanel=panel;
-    const add=doc.createElement('button');add.type='button';add.textContent='Add';add.style.cssText='margin:12px 6px 0 0;padding:6px 12px;border:1px solid #bfb1de;border-radius:4px;background:#ede7f9;color:inherit;cursor:pointer';
+    const add=doc.createElement('button');add.type='button';add.textContent='Add';add.style.cssText='margin:12px 6px 0 0;padding:6px 12px;border:1px solid var(--opf-ui-border-strong,#bfb1de);border-radius:var(--opf-ui-radius-sm,4px);background:var(--opf-ui-muted,#ede7f9);color:inherit;cursor:pointer';
     const close=doc.createElement('button');close.type='button';close.textContent='Cancel';close.onclick=cancel;close.style.cssText=add.style.cssText;
     const cancelRead=()=>{fileRevision++;loading=false;add.disabled=false;};
     source.oninput=()=>{cancelRead();file.value='';};
@@ -97,7 +97,7 @@ export function createBlockControls(root, options) {
     cancel();layer.replaceChildren();cells=[];
     if(!options.enabled()||options.isEditing())return;
     const add=doc.createElement('button');add.type='button';add.textContent='+ Add content';add.setAttribute('aria-label','Add content');add.dataset.blockAdd='';
-    add.style.cssText='position:absolute;right:8px;top:8px;pointer-events:auto;padding:5px 9px;background:#f6f3fc;color:#675394;border:1px solid #cfc4e7;border-radius:5px;font:12px system-ui;cursor:pointer';add.onclick=()=>openInsert();layer.append(add);
+    add.style.cssText='position:absolute;right:8px;top:8px;pointer-events:auto;padding:5px 9px;background:var(--opf-ui-muted-2,#f6f3fc);color:var(--opf-ui-accent-strong,#675394);border:1px solid var(--opf-ui-border-strong,#cfc4e7);border-radius:var(--opf-ui-radius-sm,5px);font:12px var(--opf-ui-font,system-ui);cursor:pointer';add.onclick=()=>openInsert();layer.append(add);
     for(const flow of geometry.flows??[]){
       const blocks=getValueAtPath(presentation,[...splitOpfPath(flow.path),'blocks']);
       if(!Array.isArray(blocks)||blocks.length!==flow.itemCount)continue;
@@ -110,7 +110,7 @@ export function createBlockControls(root, options) {
         node.textContent=Array.isArray(block.blocks)?`Group ${index+1} ⋮⋮`:`${index+1} ⋮⋮`;
         node.setAttribute('aria-label',`Move ${Array.isArray(block.blocks)?'group':'block'} ${index+1} in ${flow.path===`slides.${options.slideIndex()}`?'slide':'group'}`);
         node.title='Drag to reorder · Click to move between groups · Arrow keys reorder';
-        node.style.cssText=`position:absolute;pointer-events:auto;touch-action:none;cursor:grab;left:calc(${(box.x+box.width)/geometry.width*100}% - ${Array.isArray(block.blocks)?70:38}px);top:calc(${box.y/geometry.height*100}% + ${(depth-1)*23}px);height:22px;min-width:34px;padding:2px 5px;background:#f6f3fc;color:#675394;border:1px solid #cfc4e7;border-radius:4px;font:11px system-ui;z-index:${depth}`;
+        node.style.cssText=`position:absolute;pointer-events:auto;touch-action:none;cursor:grab;left:calc(${(box.x+box.width)/geometry.width*100}% - ${Array.isArray(block.blocks)?70:38}px);top:calc(${box.y/geometry.height*100}% + ${(depth-1)*23}px);height:22px;min-width:34px;padding:2px 5px;background:var(--opf-ui-muted-2,#f6f3fc);color:var(--opf-ui-accent-strong,#675394);border:1px solid var(--opf-ui-border-strong,#cfc4e7);border-radius:var(--opf-ui-radius-sm,4px);font:11px var(--opf-ui-font,system-ui);z-index:${depth}`;
         const cell={path,container,index,box,axis:flow.composition.mode==='column'?'y':'x',node};cells.push(cell);
         node.onclick=()=>open(path);
         node.onkeydown=event=>{if(['ArrowLeft','ArrowUp','ArrowRight','ArrowDown'].includes(event.key)){event.preventDefault();event.stopPropagation();if(!options.beforeEdit())return;const delta=['ArrowLeft','ArrowUp'].includes(event.key)?-1:1;if(index+delta>=0&&index+delta<blocks.length)move(path,container,index+(delta>0?2:-1));}};
@@ -132,7 +132,7 @@ export function createBlockControls(root, options) {
       const node=doc.createElement('button');node.type='button';node.draggable=true;node.dataset.blockPath=path;
       node.textContent=`${index+1} ⋮⋮`;node.setAttribute('aria-label',`Move block ${index+1} from ${item.region} to another region`);
       node.title='Drag to a region marked Drop content here';
-      node.style.cssText=`position:absolute;pointer-events:auto;cursor:grab;left:calc(${item.box.x/geometry.width*100}% + 3px);top:calc(${item.box.y/geometry.height*100}% + 3px);padding:2px 5px;background:#f6f3fc;color:#675394;border:1px solid #cfc4e7;border-radius:4px;font:11px system-ui`;
+      node.style.cssText=`position:absolute;pointer-events:auto;cursor:grab;left:calc(${item.box.x/geometry.width*100}% + 3px);top:calc(${item.box.y/geometry.height*100}% + 3px);padding:2px 5px;background:var(--opf-ui-muted-2,#f6f3fc);color:var(--opf-ui-accent-strong,#675394);border:1px solid var(--opf-ui-border-strong,#cfc4e7);border-radius:var(--opf-ui-radius-sm,4px);font:11px var(--opf-ui-font,system-ui)`;
       node.ondragstart=event=>{if(!options.beforeEdit()){event.preventDefault();return;}event.dataTransfer.effectAllowed='move';event.dataTransfer.setData('text/plain',path);};
       layer.append(node);
     }
@@ -147,7 +147,7 @@ export function createBlockControls(root, options) {
     const after=target.axis==='x'?x>target.box.x+target.box.width/2:y>target.box.y+target.box.height/2;
     try{drag.prepared=prepareBlockMove(drag.base,drag.from,target.container,target.index+(after?1:0));}catch(error){options.onError(error);return;}
     const marker=doc.createElement('div');marker.dataset.blockDrop='';const vertical=target.axis==='x',box=target.box;
-    marker.style.cssText=`position:absolute;pointer-events:none;background:#7765d0;z-index:10;${vertical?`left:${(box.x+(after?box.width:0))/geometry.width*100}%;top:${box.y/geometry.height*100}%;width:3px;height:${box.height/geometry.height*100}%`:`top:${(box.y+(after?box.height:0))/geometry.height*100}%;left:${box.x/geometry.width*100}%;height:3px;width:${box.width/geometry.width*100}%`}`;layer.append(marker);
+    marker.style.cssText=`position:absolute;pointer-events:none;background:var(--opf-ui-accent,#7765d0);z-index:10;${vertical?`left:${(box.x+(after?box.width:0))/geometry.width*100}%;top:${box.y/geometry.height*100}%;width:3px;height:${box.height/geometry.height*100}%`:`top:${(box.y+(after?box.height:0))/geometry.height*100}%;left:${box.x/geometry.width*100}%;height:3px;width:${box.width/geometry.width*100}%`}`;layer.append(marker);
   }
   function drop(event){if(!drag)return;event.preventDefault();const prepared=drag.prepared;try{apply(prepared);}catch(error){cancel();options.onError(error);}finally{cancel();options.render();}}
   const escape=event=>{if(event.key==='Escape'&&(drag||panel)){event.preventDefault();event.stopPropagation();cancel();options.render();}};

package/dist/export-dom.js

@@ -0,0 +1,57 @@
+// Shared by the export menu (RR-98) and the agent handoff dialog: the few DOM helpers both use, and the Lucide icons they draw.
+// Lucide (https://lucide.dev) is ISC-licensed, Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT) and
+// Lucide Contributors 2022. The path data below is inlined from lucide-react 1.48.0; nothing is loaded from a CDN. Internal: not a package entry.
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+const ICONS = {
+  Download: [["path",{"d":"M12 15V3"}],["path",{"d":"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["path",{"d":"m7 10 5 5 5-5"}]],
+  ChevronDown: [["path",{"d":"m6 9 6 6 6-6"}]],
+  X: [["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],
+  Check: [["path",{"d":"M20 6 9 17l-5-5"}]],
+  Copy: [["rect",{"width":"14","height":"14","x":"8","y":"8","rx":"2","ry":"2"}],["path",{"d":"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]],
+  Bot: [["path",{"d":"M12 8V4H8"}],["rect",{"width":"16","height":"12","x":"4","y":"8","rx":"2"}],["path",{"d":"M2 14h2"}],["path",{"d":"M20 14h2"}],["path",{"d":"M15 13v2"}],["path",{"d":"M9 13v2"}]],
+  FileText: [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],
+  FileJson: [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"}],["path",{"d":"M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"}]],
+  FileCode: [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 12.5 8 15l2 2.5"}],["path",{"d":"m14 12.5 2 2.5-2 2.5"}]],
+  FileType: [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M11 18h2"}],["path",{"d":"M12 12v6"}],["path",{"d":"M9 13v-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v.5"}]],
+  Image: [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2","ry":"2"}],["circle",{"cx":"9","cy":"9","r":"2"}],["path",{"d":"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}]],
+  Images: [["path",{"d":"m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"}],["path",{"d":"M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"}],["circle",{"cx":"13","cy":"7","r":"1","fill":"currentColor"}],["rect",{"x":"8","y":"2","width":"14","height":"14","rx":"2"}]],
+  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"}]],
+};
+
+/** An inline Lucide icon as an SVG element. It is decorative (aria-hidden); the control that holds it carries the name. */
+export function icon(doc, name, size = 14) {
+  const nodes = ICONS[name];
+  const svg = doc.createElementNS(SVG_NS, "svg");
+  for (const [key, value] of Object.entries({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false", class: "opf-icon" })) svg.setAttribute(key, String(value));
+  for (const [tag, attributes] of nodes ?? []) {
+    const child = doc.createElementNS(SVG_NS, tag);
+    for (const [key, value] of Object.entries(attributes)) child.setAttribute(key, value);
+    svg.append(child);
+  }
+  return svg;
+}
+
+/** `el(doc, "button", { class, type, "aria-label" }, ...children)`; `text` sets textContent, a false or nullish value leaves the attribute off. */
+export function el(doc, tag, props = {}, ...children) {
+  const node = doc.createElement(tag);
+  for (const [key, value] of Object.entries(props)) {
+    if (value === undefined || value === null || value === false) continue;
+    if (key === "class") node.className = value;
+    else if (key === "text") node.textContent = value;
+    else node.setAttribute(key, value === true ? "" : String(value));
+  }
+  node.append(...children.filter((child) => child !== null && child !== undefined && child !== false));
+  return node;
+}
+
+/** Save a Blob through a temporary link, the default for every download the export components make. */
+export function saveBlob(doc, blob, fileName) {
+  const url = URL.createObjectURL(blob);
+  const link = el(doc, "a", { href: url, download: fileName, hidden: true });
+  doc.body.append(link);
+  link.click();
+  link.remove();
+  globalThis.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/dist/export-menu.d.ts

@@ -0,0 +1,125 @@
+import type { Catalog } from "@openpresentation/opf";
+import type { ToSvgOptions } from "@openpresentation/opf-render";
+import type { AgentHandoffTarget } from "./agent-handoff.js";
+import type { EditorFonts } from "./canvas.js";
+import type { ConvertOptions } from "./export.js";
+
+/** The slide formats, in menu order. `pptx` shows only when `exportPptx` is given (or you list it, and then it is disabled). */
+export type ExportSlideFormat = "pptx" | "pdf" | "svg" | "png";
+/** The OPF source formats: `json` is the document as "Save OPF" writes it, `yaml` and `markdown` are core's `toYaml` and `toMarkdown`. */
+export type ExportSourceFormat = "json" | "yaml" | "markdown";
+/** What `onDownload` is told: a slide or source format, or `"handoff"` for the agent prompt's "Download .md". */
+export type ExportedFormat = ExportSlideFormat | ExportSourceFormat | "handoff";
+
+export interface ExportDownload {
+  blob: Blob;
+  fileName: string;
+  format: ExportedFormat;
+}
+
+/** A note about an export: a plain sentence, or a finding / diagnostic (`slide` is zero-based, as core's Finding defines it). */
+export type ExportNote = string | { message?: string; ruleId?: string; slide?: number; path?: string; severity?: string };
+
+export interface ExportPptxOptions {
+  /** Aborted by Cancel (or `destroy()`). The menu stops waiting at once even if the exporter ignores it. */
+  signal: AbortSignal;
+  /** Tell the menu how far along the export is; `message` is shown in the status line. */
+  onProgress(progress: { stage?: string; done?: number; total?: number; message?: string }): void;
+}
+export type ExportPptxResult = Uint8Array | ArrayBuffer | Blob | { bytes: Uint8Array | ArrayBuffer | Blob; fileName?: string; warnings?: ExportNote[] };
+
+export interface ExportMenuItems {
+  /** The slide formats to show, in this order (default all four; `pptx` only when `exportPptx` is set). `false` hides the group. */
+  slides?: readonly ExportSlideFormat[] | false;
+  /** Default `["json", "yaml", "markdown"]`. `false` hides the group. */
+  source?: readonly ExportSourceFormat[] | false;
+  /** `false` hides "For an agent". */
+  agent?: boolean;
+}
+
+export interface ExportStatus {
+  state: "busy" | "success" | "error" | "cancelled";
+  message: string;
+  notes: string[];
+}
+
+export interface ExportMenuOptions {
+  /** The document to export. Called on every export; the menu exports a `structuredClone` of what it returns. */
+  getDeck(): unknown;
+  /**
+   * Called before an export or the handoff reads the document, for example to commit an open canvas edit. Return `false` to stop.
+   */
+  beforeExport?(kind: "slides" | "source" | "agent", format: string): boolean | void;
+  /** PDF, PNG and SVG: the renderer's fonts handle (`loadFonts()`), as for the canvas, so preview and export share one set of fonts. */
+  fonts?: EditorFonts;
+  /** Host catalogs for references and for embedding, or a function that returns them (for example `() => editor.catalogs`). */
+  catalogs?: readonly Catalog[] | (() => readonly Catalog[] | undefined);
+  /** The options the host's preview renders with. */
+  renderOptions?: ToSvgOptions;
+  /** More options for `convert` (`export.js`): `scale`, `includeHidden`, `converters`, `text`, ... Not `format`, `signal` or `onProgress`. */
+  convertOptions?: Partial<Omit<ConvertOptions, "format" | "signal" | "onProgress">>;
+  /**
+   * PowerPoint lives in @openpresentation/opf-pptx, which the editor does not import: the host runs `toPptx` here and returns the bytes.
+   * Load the fonts the deck needs first, as the host's preview does. Reject to report a failure.
+   */
+  exportPptx?(deck: any, options: ExportPptxOptions): Promise<ExportPptxResult> | ExportPptxResult;
+  /** Take the file instead of the default Blob-link download. May return a promise; a rejection is reported as a failure. */
+  onDownload?(download: ExportDownload): void | Promise<void>;
+  /** Called after a file was handed on, with its notes. */
+  onExport?(done: ExportDownload & { notes: string[] }): void;
+  /** Every change of the status line (busy, success, error, cancelled). Also announced in the menu's `aria-live` region. */
+  onStatus?(status: ExportStatus): void;
+  /** "Agent handoff": handle it yourself. Default: open the agent handoff dialog. */
+  onAgentHandoff?(handoff: { document: unknown; target: AgentHandoffTarget }): void;
+  /** The target the handoff dialog starts on (default `"pptx"`). */
+  handoffTarget?: AgentHandoffTarget;
+  /** Where the default handoff dialog mounts (default `document.body`). */
+  handoffContainer?: HTMLElement;
+  /** The name the handoff prompt tells the agent to save the deck as (default `deck.opf.json`). */
+  handoffFileName?: string;
+  specUrl?: string;
+  agentGuideUrl?: string;
+  /** Hide groups or formats. */
+  items?: ExportMenuItems;
+  /** `"menu"` (default) is a popover under the trigger; `"sheet"` is the mobile bottom sheet with a scrim, a drag handle and Close. */
+  mode?: "menu" | "sheet";
+  /** `"touch"` makes controls 40px (sheet rows 44px). Default `"comfortable"` (32px). */
+  density?: "comfortable" | "touch";
+  /**
+   * Disable the slide exports, for example while the JSON is invalid. `true` gives the default reason; a string is your own. The reason is the
+   * items' title. Source exports and the handoff stay available.
+   */
+  disabled?: boolean | string;
+  /** The trigger's text (default "Export"). */
+  label?: string;
+}
+
+export interface ExportMenu {
+  /** The root element, mounted in the container. */
+  element: HTMLElement;
+  /** The trigger button. */
+  trigger: HTMLButtonElement;
+  /** Re-read the document for the menu's hints ("ZIP" or one file). Called on every open as well. */
+  refresh(): void;
+  open(which?: "first" | "last"): void;
+  close(options?: { restoreFocus?: boolean }): void;
+  /** `true` disables the slide exports with the default reason, a string with your own, `false`/`undefined` enables them. */
+  setDisabled(reason?: boolean | string): void;
+  /** Switch between the popover and the bottom sheet, for example at a media query. */
+  setMode(mode: "menu" | "sheet"): void;
+  setDensity(density: "comfortable" | "touch"): void;
+  /** Cancel the export that is running, if any. */
+  cancel(): void;
+  /** Cancel a running export and remove the menu and any handoff dialog it opened. */
+  destroy(): void;
+}
+
+/** The reason `setDisabled(true)` gives. */
+export declare const EXPORT_DISABLED_REASON: string;
+
+/**
+ * The Export menu: a trigger button and a grouped `role="menu"` (Slides, OPF source, For an agent). Slides use this package's headless
+ * `convert`; PowerPoint comes from `exportPptx`; source formats use core's `toYaml` and `toMarkdown`. Progress, Cancel and a success or
+ * failure line show under the trigger and are announced through `aria-live`. CSS: `src/styles/export-menu.css`, classes `opf-export-*`.
+ */
+export declare function createExportMenu(container: HTMLElement, options: ExportMenuOptions): ExportMenu;