@openpresentation/opf-editor 0.0.1 → 0.1.0

package/dist/rich-text-toolbar.js

@@ -0,0 +1,123 @@
+import {richTextContent, formatRichTextRange, replaceRichTextRange} from './rich-text.js';
+
+/** Native SVG selection stays on the exact rendered glyphs; no HTML reflow. */
+export function createRichTextToolbar(root, {editor, report, beforeChange, onProperties, validateChange, onChange}) {
+  const doc = root.ownerDocument, win = doc.defaultView;
+  const toolbar = doc.createElement('div');
+  toolbar.className = 'opf-rich-toolbar';
+  toolbar.setAttribute('role','toolbar'); toolbar.setAttribute('aria-label','Text formatting');
+  toolbar.style.cssText = 'position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:8px;border:1px solid #d5cde5;border-radius:8px;background:#fff;color:#332e40;box-shadow:0 4px 20px #28203922;z-index:5;font:12px/1.4 system-ui;pointer-events:auto';
+  root.append(toolbar);
+  let selected = null, restoring = false;
+  const buttons = new Map();
+  const hide = () => {selected = null; toolbar.style.display = 'none';};
+  const button = (label, action) => {
+    const node = doc.createElement('button'); node.type='button'; node.textContent=label;
+    node.style.cssText='padding:4px 7px;border:1px solid #ded8e8;border-radius:4px;background:#faf9fc;color:inherit;cursor:pointer';
+    node.addEventListener('mousedown',event=>event.preventDefault());
+    node.onclick=()=>{try {action();} catch(error) {report(error);}};
+    toolbar.append(node); return node;
+  };
+  function currentRuns() {
+    if (!selected) return [];
+    const value=editor.get(selected.path), result=[];let offset=0;
+    for (const run of typeof value==='string'?[value]:value) {
+      const text=typeof run==='string'?run:run.text;
+      if (offset<selected.end && offset+text.length>selected.start) result.push(typeof run==='string'?{}:run);
+      offset+=text.length;
+    }
+    return result;
+  }
+  function common(key) {
+    const values=currentRuns().map(run=>run[key]);
+    return values.length && values.every(value=>value===values[0]) ? values[0] : undefined;
+  }
+  function sync() {
+    if (!selected) return;
+    toolbar.style.display='flex';
+    for (const [key,node] of buttons) {
+      const values=currentRuns().map(run=>!!run[key]), mixed=values.some(Boolean)&&!values.every(Boolean);
+      node.setAttribute('aria-pressed',mixed?'mixed':String(values.every(Boolean)));
+      node.style.background=values.every(Boolean)?'#eae4fa':'#faf9fc';
+    }
+    color.value=common('color')??'';size.value=common('fontSize')??'';
+    family.value=common('fontFamily')??'';link.value=common('link')??'';
+    replacement.value=richTextContent(editor.get(selected.path)).slice(selected.start,selected.end);
+    status.textContent=`${selected.end-selected.start} characters selected`;
+  }
+  function restore() {
+    if (!selected) return;
+    const nodes=[...root.querySelectorAll('text[data-opf-text-start]')].filter(node=>node.closest('[data-opf-path]')?.getAttribute('data-opf-path')===selected.path);
+    const a=nodes.find(node=>+node.dataset.opfTextStart<=selected.start&&+node.dataset.opfTextEnd>selected.start);
+    const b=nodes.findLast(node=>+node.dataset.opfTextStart<selected.end&&+node.dataset.opfTextEnd>=selected.end);
+    if (!a?.firstChild || !b?.firstChild) return;
+    const range=doc.createRange(); range.setStart(a.firstChild,selected.start-Number(a.dataset.opfTextStart));range.setEnd(b.firstChild,selected.end-Number(b.dataset.opfTextStart));
+    const selection=win.getSelection(); selection.removeAllRanges();selection.addRange(range);
+  }
+  function apply(format, text) {
+    if (!selected) return;
+    const snapshot=selected;
+    if (JSON.stringify(editor.get(snapshot.path))!==snapshot.base) {hide();throw new Error('The text changed elsewhere. Select it again before formatting.');}
+    if (beforeChange && !beforeChange()) return;
+    if (JSON.stringify(editor.get(snapshot.path))!==snapshot.base) {hide();throw new Error("Finish the active edit, then select text again.");}
+    const value=editor.get(snapshot.path);
+    const next=text===undefined ? formatRichTextRange(value,snapshot.start,snapshot.end,format) : replaceRichTextRange(value,snapshot.start,snapshot.end,text);
+    validateChange?.(snapshot.path,next);
+    restoring=true;
+    try {
+      editor.set(snapshot.path,next,{source:'canvas-rich-text',rejectInvalid:true});
+      selected={...snapshot,base:JSON.stringify(editor.get(snapshot.path)),end:text===undefined?snapshot.end:snapshot.start+text.length};
+      if(selected.end===selected.start) hide();else {restore();sync();}
+      onChange?.(snapshot.path);
+    } finally {restoring=false;}
+  }
+  for(const [key,label] of [['bold','Bold'],['italic','Italic'],['underline','Underline'],['strikethrough','Strike'],['superscript','Superscript'],['subscript','Subscript']])
+    buttons.set(key,button(label,()=>apply({[key]:!currentRuns().every(run=>!!run[key])})));
+  function field(label,type='text') {
+    const input=doc.createElement('input');input.type=type;input.setAttribute('aria-label',label);input.placeholder=label;
+    input.style.cssText='width:90px;min-width:0;padding:4px 6px;border:1px solid #ded8e8;border-radius:4px;background:white;color:inherit;font:inherit';
+    input.onkeydown=event=>{if(event.key==='Enter') {event.preventDefault();input.dispatchEvent(new win.Event('change'));}};
+    toolbar.append(input);return input;
+  }
+  const color=field('Text color');
+  color.onchange=()=>{try {if(color.value&&!/^#(?:[\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.test(color.value))throw new Error('Use a hex text color, such as #2563eb.');apply({color:color.value||null});}catch(error){report(error);}};
+  const size=field('Font size (pt)','number');size.min='0.1';size.step='0.5';size.style.width='80px';
+  size.onchange=()=>{try{apply({fontSize:size.value?Number(size.value):null});}catch(error){report(error);}};
+  const family=field('Font family');family.onchange=()=>{try{apply({fontFamily:family.value||null});}catch(error){report(error);}};
+  const link=field('Link URL');link.onchange=()=>{try{if(link.value&&!/^(https?:|mailto:)/i.test(link.value))throw new Error('Use an HTTP, HTTPS, or mailto link.');apply({link:link.value||null});}catch(error){report(error);}};
+  const replacement=field('Selected text');replacement.style.width='160px';
+  replacement.onkeydown=event=>{if(event.key==='Enter'){event.preventDefault();try{apply(null,replacement.value);}catch(error){report(error);}}};
+  button('Replace text',()=>apply(null,replacement.value));
+  button('Reset style',()=>apply(Object.fromEntries(['bold','italic','underline','strikethrough','superscript','subscript','color','fontSize','fontFamily','link'].map(key=>[key,null]))));
+  button('Edit runs',()=>{const path=selected?.path;hide();if(path)onProperties?.(path);});
+  button('Done',()=>{hide();win.getSelection()?.removeAllRanges();});
+  const status=doc.createElement('span');status.style.fontSize='11px';toolbar.append(status);
+  toolbar.addEventListener('keydown',event=>{if(event.key==='Escape'){event.preventDefault();event.stopPropagation();hide();}
+    if(event.target.tagName==='BUTTON'&&['ArrowLeft','ArrowRight','Home','End'].includes(event.key)){
+      const controls=[...toolbar.querySelectorAll('button,input')],index=controls.indexOf(event.target);
+      const next=event.key==='Home'?0:event.key==='End'?controls.length-1:(index+(event.key==='ArrowRight'?1:-1)+controls.length)%controls.length;
+      event.preventDefault();controls[next].focus();
+    }});
+  function endpoint(node,offset) {
+    if(node?.nodeType!==3) return null;
+    const element=node.parentElement?.closest('text[data-opf-text-start]');
+    if(!element||!root.contains(element))return null;
+    return {path:element.closest('[data-opf-path]')?.getAttribute('data-opf-path'),offset:Number(element.dataset.opfTextStart)+offset};
+  }
+  function selectionChanged() {
+    if(restoring||toolbar.contains(doc.activeElement))return;
+    const selection=win.getSelection();
+    if(!selection?.rangeCount||selection.isCollapsed){hide();return;}
+    const range=selection.getRangeAt(0),a=endpoint(range.startContainer,range.startOffset),b=endpoint(range.endContainer,range.endOffset);
+    if(!a||!b||a.path!==b.path||a.offset>=b.offset){hide();return;}
+    selected={path:a.path,start:a.offset,end:b.offset,base:JSON.stringify(editor.get(a.path))};sync();
+  }
+  doc.addEventListener('selectionchange',selectionChanged);
+  const unsubscribe=editor.subscribe(()=>{if(!restoring)hide();});
+  hide();
+  return {hide,selectAll(path) {
+    const value=editor.get(path);if(!Array.isArray(value))return false;
+    const end=richTextContent(value).length;if(!end)return false;
+    selected={path,start:0,end,base:JSON.stringify(value)};restore();sync();return true;
+  },destroy(){doc.removeEventListener('selectionchange',selectionChanged);unsubscribe();toolbar.remove();}};
+}

package/dist/rich-text.d.ts

@@ -0,0 +1,10 @@
+export type TextRun = string | {text:string; bold?:boolean; italic?:boolean; underline?:boolean; strikethrough?:boolean; color?:string; fontFamily?:string; fontSize?:number; link?:string; superscript?:boolean; subscript?:boolean; [key:string]:unknown};
+export interface TextRunFormat {
+  bold?:boolean|null; italic?:boolean|null; underline?:boolean|null; strikethrough?:boolean|null;
+  superscript?:boolean|null; subscript?:boolean|null; color?:string|null; fontFamily?:string|null;
+  fontSize?:number|null; link?:string|null;
+}
+export declare function richTextContent(value:string|TextRun[]):string;
+/** Nonempty UTF-16 range on grapheme boundaries; null removes an override. */
+export declare function formatRichTextRange(value:string|TextRun[],start:number,end:number,format:TextRunFormat):TextRun[];
+export declare function replaceRichTextRange(value:string|TextRun[],start:number,end:number,replacement:string):TextRun[];

package/dist/rich-text.js

@@ -0,0 +1,71 @@
+/** UTF-16 ranges match DOM Selection; boundaries must be whole graphemes. */
+export function richTextContent(value) {
+  return runs(value).map(run => typeof run === 'string' ? run : run.text).join('');
+}
+function runs(value) {
+  const result = typeof value === 'string' ? [value] : value;
+  if (!Array.isArray(result) || result.some(run => typeof run !== 'string' && (!run || typeof run !== 'object' || typeof run.text !== 'string')))
+    throw new TypeError('Expected a string or OPF text runs.');
+  return result;
+}
+function range(value, start, end, allowEmpty) {
+  const text = richTextContent(value);
+  if (!Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end < start || end > text.length || (!allowEmpty && start === end))
+    throw new RangeError('Select a nonempty text range within the content.');
+  const boundaries = new Set([0, text.length]);
+  for (const part of new Intl.Segmenter(undefined, {granularity:'grapheme'}).segment(text)) boundaries.add(part.index);
+  if (!boundaries.has(start) || !boundaries.has(end)) throw new RangeError('Text ranges must end at whole grapheme boundaries.');
+  return runs(value);
+}
+const booleans = ['bold','italic','underline','strikethrough','superscript','subscript'];
+const strings = ['color','fontFamily','link'];
+function checkedFormat(format) {
+  if (!format || typeof format !== 'object' || Array.isArray(format)) throw new TypeError('Expected a run formatting object.');
+  for (const [key,value] of Object.entries(format)) {
+    if (![...booleans,...strings,'fontSize'].includes(key)) throw new TypeError(`Unknown run style: ${key}`);
+    if (value === null) continue;
+    if (booleans.includes(key) && typeof value !== 'boolean' || strings.includes(key) && typeof value !== 'string' || key === 'fontSize' && (!Number.isFinite(value) || value <= 0))
+      throw new TypeError(`Invalid run style: ${key}`);
+  }
+  if (format.superscript && format.subscript) throw new TypeError('Choose superscript or subscript, not both.');
+  return {...format, ...(format.superscript ? {subscript:false} : {}), ...(format.subscript ? {superscript:false} : {})};
+}
+function piece(run, text) { return typeof run === 'string' ? text : {...structuredClone(run),text}; }
+export function formatRichTextRange(value, start, end, format) {
+  const source = range(value,start,end,false), patch = checkedFormat(format), result = [];
+  let offset = 0;
+  for (const run of source) {
+    const text = typeof run === 'string' ? run : run.text, next = offset + text.length;
+    if (next <= start || offset >= end || !text.length) result.push(structuredClone(run));
+    else {
+      const a = Math.max(0,start-offset), b = Math.min(text.length,end-offset);
+      if (a) result.push(piece(run,text.slice(0,a)));
+      const changed = typeof run === 'string' ? {text:text.slice(a,b)} : piece(run,text.slice(a,b));
+      for (const [key,value] of Object.entries(patch)) { if (value === null) delete changed[key]; else changed[key] = value; }
+      result.push(changed);
+      if (b < text.length) result.push(piece(run,text.slice(b)));
+    }
+    offset = next;
+  }
+  return result;
+}
+/** Replacement inherits the first selected run (the preceding run for insertion). */
+export function replaceRichTextRange(value, start, end, replacement) {
+  const source = range(value,start,end,true);
+  if (typeof replacement !== 'string') throw new TypeError('Replacement text must be a string.');
+  const result = []; let offset = 0, inserted = false;
+  for (const run of source) {
+    const text = typeof run === 'string' ? run : run.text, next = offset + text.length;
+    const insertion = start === end && start >= offset && start <= next;
+    if (!inserted && (insertion || next > start && offset < end)) {
+      if (start > offset) result.push(piece(run,text.slice(0,start-offset)));
+      if (replacement) result.push(piece(run,replacement));
+      inserted = true;
+      if (end < next) result.push(piece(run,text.slice(Math.max(0,end-offset))));
+    } else if (next <= start || offset >= end) result.push(structuredClone(run));
+    else if (end < next) result.push(piece(run,text.slice(end-offset)));
+    offset = next;
+  }
+  if (!inserted && replacement) result.push(replacement);
+  return result.length ? result : [''];
+}

package/dist/schema-inspector.d.ts

@@ -0,0 +1,3 @@
+import type { EditorSession } from './index.js';
+export interface SchemaInspector { navigate(path:string|string[]):void; commit():boolean; reset():void; readonly document:any; readonly dirty:boolean; destroy():void; }
+export declare function createSchemaInspector(container:HTMLElement, options:{editor:EditorSession;path?:string;onDraft?:(event:{document:any;path:string;dirty:boolean})=>void;onCommit?:(event:{editor:EditorSession;path:string})=>void;onCancel?:()=>void;onError?:(error:Error)=>void}):SchemaInspector;

package/dist/schema-inspector.js

@@ -0,0 +1,100 @@
+import { applyJsonPatch, createValuePatch, getValueAtPath, opfPathToJsonPointer, splitOpfPath, validateOpfDocument } from './index.js';
+import { schemaAtPath, schemaVariants, activeSchema, schemaType, schemaLabel, createSchemaValue } from './schema.js';
+/** A staged form editor; valid drafts preview immediately and Apply creates one undo step. */
+export function createSchemaInspector(container, {editor,path='',onDraft,onCommit,onCancel,onError}={}) {
+  if(!editor)throw new Error('An editor session is required.');
+  let base=JSON.stringify(editor.document), draft=structuredClone(editor.document), selected=opfPathToJsonPointer(path), dirty=false, destroyed=false, suppress=false;
+  const doc=container.ownerDocument;
+  const el=(tag,text,cls)=>{const node=doc.createElement(tag);if(text!==undefined)node.textContent=text;if(cls)node.className=cls;return node;};
+  const button=(text,action)=>{const node=el('button',text);node.type='button';node.onclick=()=>{try{action();}catch(error){showError(error.message);onError?.(error);}};return node;};
+  const input=(label,value,change,type='text')=>{const wrap=el('label',undefined,'opf-schema-field'),caption=el('span',label);const control=el(type==='textarea'?'textarea':'input');if(type!=='textarea')control.type=type;control.value=String(value??'');control.setAttribute('aria-label',label);control.oninput=()=>change(control.value,control);wrap.append(caption,control);return wrap;};
+  const errorBox=el('p',undefined,'opf-schema-error');errorBox.setAttribute('role','alert');
+  const status=el('p',undefined,'opf-schema-status');status.setAttribute('role','status');
+  const body=el('div',undefined,'opf-schema-body'),nav=el('nav',undefined,'opf-schema-breadcrumbs');nav.setAttribute('aria-label','OPF field location');
+  const actions=el('div',undefined,'opf-schema-actions');const apply=button('Apply changes',commit),cancel=button('Discard draft',reset);actions.append(status,apply,cancel);
+  container.replaceChildren(nav,body,errorBox,actions);container.classList.add('opf-schema-inspector');
+  function showError(message){errorBox.textContent=message;}
+  function check(){
+    const validation=validateOpfDocument(draft);
+    apply.disabled=!dirty||!validation.valid;
+    status.textContent=dirty?'Draft changes · apply to save':'No pending changes';
+    showError(validation.valid?'':validation.errors.slice(0,3).map(error=>`${error.path||'/'}: ${error.message}`).join('\n'));
+    if(validation.valid)try{onDraft?.({document:structuredClone(draft),path:selected,dirty});}catch(error){showError(`Preview: ${error.message}`);onError?.(error);}
+  }
+  function mutate(operations,redraw=true){draft=applyJsonPatch(draft,operations);dirty=JSON.stringify(draft)!==base;if(redraw)render();check();}
+  function set(path,value,redraw=true){mutate(createValuePatch(draft,path,value),redraw);}
+  function navigate(path){selected=opfPathToJsonPointer(path);render();check();}
+  function reset(){base=JSON.stringify(editor.document);draft=structuredClone(editor.document);dirty=false;render();check();onCancel?.();}
+  function commit(){
+    if(!dirty)return true;
+    if(JSON.stringify(editor.document)!==base){showError('The document changed elsewhere. Discard this draft and reopen the field to avoid overwriting newer changes.');return false;}
+    const result=validateOpfDocument(draft);if(!result.valid){check();return false;}
+    suppress=true;
+    try{editor.applyPatch([{op:'replace',path:'',value:draft}],{source:'schema-inspector',rejectInvalid:true});base=JSON.stringify(editor.document);draft=structuredClone(editor.document);dirty=false;render();check();onCommit?.({editor,path:selected});return true;}finally{suppress=false;}
+  }
+  function summary(value){return Array.isArray(value)?`${value.length} items`:value&&typeof value==='object'?`${Object.keys(value).length} fields`:String(value??'').slice(0,80);}
+  function render(){
+    if(destroyed)return;
+    if(getValueAtPath(draft,selected)===undefined) selected='';
+    const parts=splitOpfPath(selected), value=getValueAtPath(draft,selected), raw=schemaAtPath(draft,selected), variants=schemaVariants(raw), schema=activeSchema(raw,value), type=schemaType(schema,value);
+    nav.replaceChildren(button('Presentation',()=>navigate('')));
+    parts.forEach((part,index)=>nav.append(el('span','/'),button(/^\d+$/.test(part)?String(Number(part)+1):part,()=>navigate(parts.slice(0,index+1)))));
+    body.replaceChildren(el('h3',parts[0]==='slides'&&parts.length===2?`Slide ${Number(parts[1])+1}`:parts.at(-1)??'Presentation'));
+    if(schema.description)body.append(el('p',schema.description,'opf-schema-description'));
+    if(variants.length>1 || Object.keys(raw).length===0){
+      const choices=variants.length>1?variants:[{type:'string'},{type:'number'},{type:'boolean'},{type:'object'},{type:'array'},{type:'null'}];
+      const label=el('label','Value form'), select=el('select');select.setAttribute('aria-label','Value form');
+      choices.forEach((variant,index)=>{const option=el('option',schemaLabel(variant,index));option.value=String(index);select.append(option);});
+      const current=choices.findIndex(item=>item===schema||JSON.stringify(item)===JSON.stringify(schema));select.value=String(Math.max(0,current>=0?current:choices.findIndex(item=>schemaType(item,value)===(Array.isArray(value)?'array':value===null?'null':typeof value))));
+      select.onchange=()=>{try{set(selected,createSchemaValue(choices[Number(select.value)]));}catch(error){showError(error.message);}};label.append(select);body.append(label);
+    }
+    if(type==='object' && value!==null && !Array.isArray(value)){
+      const search=input('Find a field','',text=>{for(const row of rows.children)row.hidden=!row.textContent.toLowerCase().includes(text.toLowerCase());},'search');body.append(search);
+      const rows=el('div',undefined,'opf-schema-rows');
+      const properties={...schema.properties};for(const key of Object.keys(value))properties[key]??={};
+      for(const [key,fieldSchema]of Object.entries(properties)){
+        const present=Object.prototype.hasOwnProperty.call(value,key), required=(schema.required??[]).includes(key), fieldPath=opfPathToJsonPointer([...parts,key]);
+        const row=el('div',undefined,'opf-schema-row'),name=el('div');name.append(el('strong',key+(required?' *':'')),el('small',present?summary(value[key]):'Not set'));
+        const help=fieldSchema.description??'';row.title=help;
+        const controls=el('div');controls.append(button(present?'Edit':'Add',()=>{if(!present)set(fieldPath,createSchemaValue(fieldSchema));navigate(fieldPath);}));
+        if(present&&!required)controls.append(button('Remove',()=>mutate([{op:'remove',path:fieldPath}])));
+        for(const control of controls.children)control.setAttribute('aria-label',`${control.textContent} ${key}`);
+        row.append(name,controls);rows.append(row);
+      }
+      body.append(rows);
+      if(schema.additionalProperties!==false){
+        let newKey='';body.append(input('New field name','',value=>{newKey=value;}),button('Add named field',()=>{
+          if(!newKey.trim()||['__proto__','constructor','prototype'].includes(newKey))throw new Error('Enter a safe, nonempty field name.');
+          if(Object.prototype.hasOwnProperty.call(value,newKey))throw new Error('That field already exists.');
+          const keySchema=Object.entries(schema.patternProperties??{}).find(([pattern])=>new RegExp(pattern).test(newKey))?.[1]??schema.additionalProperties;
+          const next=opfPathToJsonPointer([...parts,newKey]);set(next,createSchemaValue(typeof keySchema==='object'?keySchema:{}));navigate(next);
+        }));
+      }
+    }else if(type==='array' && Array.isArray(value)){
+      value.forEach((item,index)=>{
+        const row=el('div',undefined,'opf-schema-row'), itemPath=opfPathToJsonPointer([...parts,String(index)]),controls=el('div');
+        row.append(el('span',`${index+1}. ${summary(item)}`));controls.append(button('Edit',()=>navigate(itemPath)),button('Duplicate',()=>mutate([{op:'add',path:opfPathToJsonPointer([...parts,String(index+1)]),value:item}])));
+        if(index>0)controls.append(button('Move up',()=>{const next=[...value];[next[index-1],next[index]]=[next[index],next[index-1]];set(selected,next);}));
+        if(index<value.length-1)controls.append(button('Move down',()=>{const next=[...value];[next[index+1],next[index]]=[next[index],next[index+1]];set(selected,next);}));
+        if(value.length>(schema.minItems??0))controls.append(button('Remove',()=>mutate([{op:'remove',path:itemPath}])));
+        row.append(controls);body.append(row);
+      });
+      const add=button('Add item',()=>{const itemPath=opfPathToJsonPointer([...parts,String(value.length)]), itemSchema=schemaAtPath(draft,itemPath);set(itemPath,createSchemaValue(itemSchema));navigate(itemPath);});add.disabled=value.length>=(schema.maxItems??10000);body.append(add);
+    }else if(schema.enum || Object.prototype.hasOwnProperty.call(schema,'const')){
+      const label=el('label','Value'),select=el('select');select.setAttribute('aria-label','Value');
+      (schema.enum??[schema.const]).forEach(item=>{const option=el('option',String(item));option.value=JSON.stringify(item);select.append(option);});select.value=JSON.stringify(value);select.disabled=schema.const!==undefined;select.onchange=()=>set(selected,JSON.parse(select.value),false);label.append(select);body.append(label);
+    }else if(type==='boolean'){
+      const label=el('label'),control=el('input');control.type='checkbox';control.checked=value;control.setAttribute('aria-label',parts.at(-1)??'Value');control.onchange=()=>set(selected,control.checked,false);label.append(control,el('span','Enabled'));body.append(label);
+    }else if(type==='null')body.append(el('p','Null value'));
+    else {
+      const numeric=type==='number'||type==='integer';
+      body.append(input('Value',value,(text,control)=>{
+        if(numeric && (!text.trim()||!Number.isFinite(Number(text)))){control.setAttribute('aria-invalid','true');apply.disabled=true;showError('Enter a finite number.');return;}
+        control.removeAttribute('aria-invalid');set(selected,numeric?Number(text):text,false);
+      },numeric?'number':'textarea'));
+    }
+  }
+  const unsubscribe=editor.subscribe(()=>{if(suppress)return;if(dirty){showError('The document changed elsewhere. Discard the draft to load the latest version.');apply.disabled=true;}else reset();});
+  render();check();
+  return {navigate,commit,reset,get document(){return structuredClone(draft);},get dirty(){return dirty;},destroy(){destroyed=true;unsubscribe();container.replaceChildren();}};
+}

package/dist/schema.d.ts

@@ -0,0 +1,10 @@
+export type Schema = Record<string, any>;
+export declare const opfSchemas: Record<string, Schema>;
+export declare function resolveSchema(schema: Schema, root?: Schema): Schema;
+export declare function schemaVariants(schema: Schema, root?: Schema): Schema[];
+export declare function schemaType(schema: Schema, value?: unknown): string;
+export declare function activeSchema(schema: Schema, value: unknown, root?: Schema): Schema;
+export declare function schemaAtPath(document: unknown, path: string | string[], root?: Schema): Schema;
+export declare function schemaLabel(schema: Schema, index?: number): string;
+export declare function createSchemaValue(schema: Schema, root?: Schema): any;
+export declare function listSchemaFields(): Array<{schema:string;path:string;name:string;description:string;reference:string|null;type:string|null;values:unknown[]|null}>;

package/dist/schema.js

@@ -0,0 +1,102 @@
+import { schemas, catalogSchemaNames } from '@openpresentation/opf';
+import { getValueAtPath, splitOpfPath, opfPathToJsonPointer } from './index.js';
+export const opfSchemas = schemas;
+const documents = new Map(Object.values(schemas).map(schema => [schema.$id, schema]));
+const own = (object, key) => Object.prototype.hasOwnProperty.call(object, key);
+export function resolveSchema(schema, root = schemas.presentation, seen = new Set()) {
+  if (!schema || typeof schema !== 'object') return {};
+  if (!schema.$ref) return schema;
+  const ref = schema.$ref;
+  if (seen.has(ref)) return {};
+  seen.add(ref);
+  const [id, fragment = ''] = ref.split('#');
+  const target = id ? documents.get(id) : root;
+  if (!target) throw new Error(`Unresolved OPF schema: ${ref}`);
+  const resolved = fragment ? getValueAtPath(target, fragment) : target;
+  if (!resolved) throw new Error(`Unresolved OPF schema: ${ref}`);
+  const { $ref, ...rest } = schema;
+  return {...resolveSchema(resolved, target, seen), ...rest};
+}
+export function schemaVariants(schema, root = schemas.presentation) {
+  const resolved = resolveSchema(schema, root);
+  if (Array.isArray(resolved.type)) return resolved.type.flatMap(type=>schemaVariants({...resolved,type},root));
+  const variants = resolved.oneOf ?? resolved.anyOf;
+  if (!variants) return [resolved];
+  const {$ref, oneOf, anyOf, ...base} = resolved;
+  return variants.flatMap(child => schemaVariants(child, root).map(variant => ({...base, ...variant, properties: base.properties || variant.properties ? {...base.properties,...variant.properties} : undefined})));
+}
+export function schemaType(schema, value) {
+  return schema.type ?? (schema.properties || schema.additionalProperties ? 'object' : schema.items ? 'array' : schema.const !== undefined ? typeof schema.const : value === null ? 'null' : Array.isArray(value) ? 'array' : typeof value === 'undefined' ? 'string' : typeof value);
+}
+function score(schema, value) {
+  const type=schemaType(schema,value);
+  if (type === 'integer' ? !Number.isInteger(value) : type === 'array' ? !Array.isArray(value) : type === 'null' ? value !== null : typeof value !== type || (type === 'object' && (value === null || Array.isArray(value)))) return -100;
+  if (own(schema,'const')) return JSON.stringify(schema.const)===JSON.stringify(value)?100:-100;
+  if(schema.enum && !schema.enum.includes(value))return -100;
+  let result=1;
+  for(const [key,child] of Object.entries(schema.properties??{})) {
+    if(!value || !own(value,key))continue;
+    if(own(child,'const'))result+=value[key]===child.const?100:-1000;
+    else result+=1;
+  }
+  for(const key of schema.required??[])if(!value || !own(value,key))result-=2;
+  return result;
+}
+export function activeSchema(schema, value, root=schemas.presentation) {
+  return schemaVariants(schema,root).sort((a,b)=>score(b,value)-score(a,value))[0] ?? {};
+}
+export function schemaAtPath(document, path, root = schemas.presentation) {
+  const parts=splitOpfPath(path);let current=root,value=document;
+  for(let index=0; index<parts.length;index++) {
+    const key=parts[index], resolved=activeSchema(current,value,root);
+    if(parts[0]==='catalogs' && parts[2]==='records' && index===3) current=schemas[catalogSchemaNames[parts[1]]]??{};
+    else current=Array.isArray(value)||resolved.type==='array' ? resolved.items??{} : resolved.properties?.[key] ?? Object.entries(resolved.patternProperties??{}).find(([pattern])=>new RegExp(pattern).test(key))?.[1] ?? (typeof resolved.additionalProperties==='object'?resolved.additionalProperties:{});
+    value=value?.[key];
+  }
+  return resolveSchema(current,root);
+}
+export function schemaLabel(schema, index=0) {
+  const type=schemaType(schema);
+  return schema.title ?? schema.properties?.type?.const ?? (schema.const!==undefined?String(schema.const):`${type}${schema.properties ? ` · ${Object.keys(schema.properties).slice(0,3).join(', ')}` : ''}`) ?? `Option ${index+1}`;
+}
+export function createSchemaValue(schema, root=schemas.presentation, depth=0) {
+  if(depth>20)throw new Error('Choose a shallower initial value for this recursive structure.');
+  const variants=schemaVariants(schema,root), s=variants[0]??{};
+  if(own(s,'const'))return structuredClone(s.const);
+  if(own(s,'default'))return structuredClone(s.default);
+  if(s.enum?.length)return structuredClone(s.enum[0]);
+  const type=schemaType(s);
+  if(type==='object'){
+    const value={};
+    for(const key of new Set([...(s.required??[]),...Object.keys(s.properties??{}).filter(key=>own(s.properties[key],'const'))])) value[key]=createSchemaValue(s.properties?.[key]??{},root,depth+1);
+    if(s.anyOf || s.oneOf){ /* Variants have already been expanded. */ }
+    return value;
+  }
+  if(type==='array')return Array.from({length:Math.min(s.minItems??0,100)},()=>createSchemaValue(s.items??{},root,depth+1));
+  if(type==='boolean')return false;
+  if(type==='null')return null;
+  if(type==='number'||type==='integer')return s.minimum??(s.exclusiveMinimum!==undefined?s.exclusiveMinimum+1:0);
+  if(s.examples?.length && typeof s.examples[0]==='string' && !s.examples[0].includes('...'))return s.examples[0];
+  if(s.format==='uri')return 'https://example.com';
+  if(s.pattern?.includes('a-z'))return 'example';
+  return s.minLength?'Text':'';
+}
+export function listSchemaFields() {
+  const result=[];
+  for(const [name,root] of Object.entries(schemas)) {
+    const walk=(schema,path)=>{
+      if(!schema || typeof schema!=='object')return;
+      for(const [key,child]of Object.entries(schema.properties??{})){
+        result.push({schema:name,path:opfPathToJsonPointer([...path,'properties',key]),name:key,description:child.description??'',reference:child.$ref??null,type:child.type??null,values:child.enum??(own(child,'const')?[child.const]:null)});
+        walk(child,[...path,'properties',key]);
+      }
+      for(const [key,child]of Object.entries(schema.$defs??{}))walk(child,[...path,'$defs',key]);
+      for(const keyword of ['oneOf','anyOf','allOf']) (schema[keyword]??[]).forEach((child,index)=>walk(child,[...path,keyword,String(index)]));
+      if(schema.items)walk(schema.items,[...path,'items']);
+      if(typeof schema.additionalProperties==='object')walk(schema.additionalProperties,[...path,'additionalProperties']);
+      for(const [key,child]of Object.entries(schema.patternProperties??{}))walk(child,[...path,'patternProperties',key]);
+    };
+    walk(root,[]);
+  }
+  return result;
+}

package/dist/transfer.d.ts

@@ -0,0 +1,27 @@
+export declare const MAX_OPF_BYTES: number;
+export interface OpfTransfer {
+  kind: "presentation" | "slides" | "selection";
+  value: unknown;
+  document?: any;
+}
+export declare function assertOpf(document: any): any;
+export declare function unwrapOpf(value: any): any;
+export declare function parseOpfTransfer(text: string): OpfTransfer;
+export declare function serializeOpfTransfer(
+  document: any,
+  options?: {
+    scope?: "presentation" | "slide" | "selection";
+    slideIndex?: number;
+    path?: string;
+    format?: "pretty" | "compact" | "markdown";
+  },
+): string;
+export declare function prepareOpfImport(
+  current: any,
+  transfer: OpfTransfer,
+  options?: {
+    mode?: "insert" | "replace" | "selection";
+    slideIndex?: number;
+    path?: string;
+  },
+): { document: any; slideIndex: number };