mnfst 0.5.231 → 0.5.233

package/lib/manifest.d.ts

@@ -351,80 +351,205 @@ export interface ManifestCamera {
     pick(opts?: Record<string, unknown>): Promise<unknown>;
 }
 
-/** Element editor (`x-edit`) — opt-in plugin. Sortable lists and resizable elements
- *  by default; add `.authoring` where a region is a page being edited. */
+/** Edit action names for `$edit.can()` and per-action locks. */
+export type ManifestEditAction = 'move' | 'remove' | 'duplicate' | 'text' | 'attrs' | 'size';
+/** `can()` also answers 'class' (the class list; component nodes allow only this) and copy/cut/paste. */
+
+/** Class controls on `$edit.classes`. `el` defaults to `$edit.target`. */
+export interface ManifestEditClasses {
+    add(cls: string, el?: Element): boolean;
+    remove(cls: string, el?: Element): boolean;
+    toggle(cls: string, el?: Element, force?: boolean): boolean;
+    has(cls: string, el?: Element): boolean;
+    /** Replace the static class list. */
+    set(value: string, el?: Element): boolean;
+    /** The static classes (bound :class classes excluded). */
+    list(el?: Element): string[];
+}
+
+/** Element editor (`x-edit`) — opt-in plugin. Modifiers: `.text` `.move` `.size`
+ *  `.data` (default text + move), `.lock[.action]`, `.gated`, `.persist`, `.bare`,
+ *  `.theme`, `.cssvar`. Every edit is logged; actions default to `$edit.target`. */
 export interface ManifestEdit {
-    /** True while a `.gated` area is editable. */
+    /** True while `.gated` areas are editable. */
     active: boolean;
     canUndo: boolean;
     canRedo: boolean;
+    /** Bumps on every change to the log or target; read it to make a binding re-evaluate. */
+    version: number;
     /** Set a handler to route patches somewhere other than the dev server. */
     onPublish: ((patches: unknown[], state: { log: unknown[]; cursor: number }) => unknown) | null;
     toggle(): void;
     on(): void;
     off(): void;
-    undo(): void;
-    redo(): void;
-    /** Lock an element and its subtree out of editing (runtime, not logged). */
-    lock(el: Element): void;
-    unlock(el: Element): void;
-    /** Resolve the edit log into source patches and send them. */
-    publish(): Promise<unknown>;
-    /** The resolved source patches, without sending them. */
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    /** Source files that changed since the page loaded, from the last refused publish (also an
+     *  `edit:stale` event on document, detail `{ files }`), or a reload held back because it
+     *  would lose unpublished edits. */
+    stale: string[];
+    /** Edits that could not be applied because the source changed under them (also an
+     *  `edit:conflict` event on document, detail `{ conflicts }`, and a console warning).
+     *  `element` names what was edited (tag and opening text, or the region for layout);
+     *  `value` what the edit held; `reason` says what happened in words.
+     *  - A text or attribute edit whose element changed: `prop` is the edited property.
+     *  - Layout (`prop: 'structure'`): kept when only unmoved children changed text in place;
+     *    dropped when a moved, added or removed child changed, with `value`
+     *    `{ changed: [{ was, now }], moved: [...], copies: [{ of, html, text }] }` so typed
+     *    content can be recovered. */
+    conflicts: Array<{ region: string; key: string; element: string; prop: string; value: unknown; before: unknown; reason: string }>;
+    /** Empty `conflicts`. Those of `.persist` regions are kept across reloads until this is called. */
+    clearConflicts(): void;
+    /** Send every area's patches; on success the history is cleared (the source now holds it).
+     *  `rebase: true` takes the current source as the base (writes over external changes). */
+    publish(opts?: { rebase?: boolean }): Promise<unknown>;
+    /** The resolved source patches for every area, without sending them. */
     patches(): unknown[];
     /** The raw delta log — persist it yourself to move edits between devices. */
     export(): { log: unknown[]; cursor: number };
-    /** The block a context menu is acting on — set by the last right-click, or
-     *  assignable. Block operations default to it when called with no element. */
+    /** The piece a right-click landed on (set before any menu opens), or assignable. */
     target: Element | null;
-    /** Whether an operation applies right now: copy, cut, paste, duplicate, remove. */
-    can(op: string, el?: Element): boolean;
+    /** Whether an action applies to `el` (default `$edit.target`): capability and locks. */
+    can(action: ManifestEditAction | 'class' | 'copy' | 'cut' | 'paste', el?: Element | null): boolean;
+    /** Lock `el` and its subtree for one action, or all when omitted. Logged. A component host
+     *  (see `block`) locks by its host key, for all its roots and what is in them. */
+    lock(el?: Element | null, action?: ManifestEditAction): boolean;
+    unlock(el?: Element | null, action?: ManifestEditAction): boolean;
     copy(el?: Element): boolean;
     cut(el?: Element): boolean;
     paste(el?: Element): boolean;
     duplicate(el?: Element): boolean;
     remove(el?: Element): boolean;
-    /** Move a block into another static region (area element or x-edit key), before `ref` or at the end. */
+    /** Move a piece into a container (element or area key), before `before` or at the end. */
     move(el: Element | null, dest: Element | string, before?: Element | null): boolean;
-    /** The addressable block containing a node, or null. */
+    /** Nest a piece into the container before it. */
+    nest(el?: Element): boolean;
+    /** Move a piece out of its container, after it. */
+    unnest(el?: Element): boolean;
+    /** The piece containing a node, or null. In a static area a component instance is one
+     *  piece, its host (its first rendered root; the rest follow it): it moves, duplicates
+     *  (a new instance) and is removed as one, and its markup is not edited from here. */
     block(node: Element): Element | null;
+    /** Set an attribute: a string sets it, `true` sets it empty, `null`/`false` removes it. */
+    attr(name: string, value: string | boolean | null, el?: Element): boolean;
+    classes: ManifestEditClasses;
+    /** Component scope of `el`'s area (default `$edit.target`): `scope(el)` reads it.
+     *  Instance overrides apply to an area that wraps exactly one component with no x-edit region
+     *  of its own; a component among other content is a host piece of a static area instead, and
+     *  a component's own region is edited in its own file. */
+    scope(el?: Element | null): 'instance' | 'main' | null;
+    /** Set the component scope of `el`'s area (default `$edit.target`); false if it has none. */
+    scope(value: 'instance' | 'main', el?: Element | null): boolean;
+    /** Revert a component element's instance overrides (the area element reverts all). */
+    revert(el?: Element): boolean;
 }
 
-/** Text editor (`x-text-edit`) — the area this element sits in, or the last focused one. */
-export interface ManifestTextEdit {
-    /** The stored value, in the mode the directive was given. Assigning replaces the
-     *  document and resets undo history. */
+/** Rich text editor (`x-rich-text`): the area this element sits in, or the last focused one. */
+export interface ManifestRichText {
+    /** The stored value, in the area's format. Assigning replaces the document and resets undo history. */
     value: string;
     focus(): void;
     /** The href at the caret; assign to set it, assign '' to unlink. */
     link: string;
-    /** Page-level styles (font, size, leading, align, color, background) as CSS
-     *  custom properties on the area. Presentation, not document content — persist
-     *  it yourself. Assign `{}` to clear. */
-    page: Record<string, string>;
+    /** Document-wide styles (font, size, leading, align, color, background) as CSS custom
+     *  properties on the area; not part of the stored value. Assign `{}` to clear. */
+    all: Record<string, string>;
     /** Select the whole document. */
     selectAll(): void;
-    /** The current selection and its geometry, or null. Also emitted as a
-     *  `text-edit:selection` event and as --text-edit-selection-* custom properties
-     *  on the area, for anchoring a menu to it. */
+    /** The current selection and its geometry, or null. Also emitted as a `rich-text:selection`
+     *  event and as --rich-text-selection-* custom properties. */
     selection: {
         collapsed: boolean; text: string;
         x: number; y: number; width: number; height: number;
         top: number; bottom: number; left: number; right: number;
     } | null;
-    /** Apply a command. Commands are named for the tag they produce — 'strong',
-     *  'blockquote', 'h2', 'ul', 'a', 'img', 'table' — plus the operations with no
-     *  tag of their own: 'indent', 'outdent', 'align', 'color', 'background',
-     *  'font', 'size', 'checklist', 'clear', 'undo', 'redo', 'block'. */
-    run(command: string, arg?: string | number): void;
+    /** Apply a command. Commands are HTML tag names ('strong', 'h2', 'ul', 'a', 'table', …) plus
+     *  'indent', 'outdent', 'align', 'color', 'background', 'font', 'size', 'leading', 'checklist',
+     *  'unlink', 'clear', 'undo', 'redo', 'block' and the table operations. Every command is also
+     *  a method: `$rich.strong()`, `$rich.table(3, 2)` (columns, rows). */
+    run(command: string, arg?: unknown): void;
     /** Whether that command is active at the caret. */
     active(command: string): boolean;
-    /** Whether that command is available in this area's mode. */
+    /** Whether that command is available here (format, .inline, caret). */
     can(command: string): boolean;
-    /** Read the content as markdown regardless of the storage mode. */
+    /** Read the content as markdown regardless of the storage format. */
     markdown(): string;
-    /** Read the content as sanitized HTML regardless of the storage mode. */
+    /** Read the content as sanitized HTML regardless of the storage format. */
     html(): string;
+
+    // Inline tags: toggle on the selection, or arm for the next typed text
+    strong(): void; b(): void; em(): void; i(): void; s(): void; del(): void; code(): void;
+    bdi(): void; cite(): void; ins(): void; kbd(): void; mark(): void; q(): void; samp(): void;
+    small(): void; span(): void; sub(): void; sup(): void; u(): void; var(): void;
+    /** `title` attribute (html only). */
+    abbr(title?: string): void;
+    /** `title` attribute (html only). */
+    dfn(title?: string): void;
+    /** Direction, default 'rtl' (html only). */
+    bdo(dir?: 'ltr' | 'rtl' | 'auto'): void;
+    /** Machine-readable `value` (html only). */
+    data(value?: string): void;
+    /** `datetime` attribute (html only). */
+    time(datetime?: string): void;
+    /** Link the selection; '' unlinks. */
+    a(href?: string): void;
+    unlink(): void;
+    br(): void;
+    /** Break opportunity (html only). */
+    wbr(): void;
+    img(src: string, alt?: string): void;
+
+    // Block tags: convert the block (again returns to p)
+    p(): void; h1(): void; h2(): void; h3(): void; h4(): void; h5(): void; h6(): void;
+    blockquote(): void; pre(): void; address(): void;
+    ul(): void; ol(): void; li(): void; checklist(): void; hr(): void;
+    figure(): void; figcaption(): void; dl(): void; dt(): void; dd(): void;
+    /** Any block tag by name, e.g. block('h2'). */
+    block(tag: string): void;
+
+    /** Insert a columns × rows table (default 3 × 3). */
+    table(columns?: number, rows?: number): void;
+    'row-before'(): void; 'row-after'(): void; 'row-remove'(): void;
+    'column-before'(): void; 'column-after'(): void; 'column-remove'(): void;
+    'table-remove'(): void; 'table-header'(): void; merge(): void; split(): void;
+
+    indent(): void; outdent(): void;
+    align(value?: 'start' | 'center' | 'end' | 'justify' | string): void;
+    leading(value: string): void;
+    color(value: string): void;
+    background(value: string): void;
+    font(value: string): void;
+    size(value: string | number): void;
+    clear(): void;
+    undo(): void;
+    redo(): void;
+}
+
+/** Options for `ManifestRichText.attach()`. */
+export interface ManifestRichTextAttachOptions {
+    /** 'block' (default) or 'inline' (single line: no block commands, Enter fires `rich-text:enter`). */
+    mode?: 'block' | 'inline';
+    /** Inline html only: `<br>` line breaks are kept, Shift+Enter inserts one, pasted blocks become lines. */
+    breaks?: boolean;
+    /** false: `.all` controls and `$rich.all` are unavailable (no area-wide --rich-text-* styles). Default true. */
+    all?: boolean;
+    /** Storage format: 'markdown' (default), 'html' or 'plain'. */
+    format?: 'markdown' | 'html' | 'plain';
+    /** Initial value; omitted, the element's existing markup is the content. */
+    value?: string;
+    /** No markdown autoformat while typing. */
+    literal?: boolean;
+    /** Called with the stored value after every change. */
+    onChange?(value: string): void;
+}
+
+/** Returned by `ManifestRichText.attach()`: the `$rich` surface plus detach(). */
+export interface ManifestRichTextHandle extends ManifestRichText {
+    el: Element;
+    /** Remove editing and restore the element's own contenteditable/role/aria-multiline. */
+    detach(): void;
+    /** Markup of the newest step in the field's undo history (a pending typing burst is recorded first). */
+    newest(): string;
 }
 
 /**
@@ -437,7 +562,7 @@ export type ManifestDirective =
     | 'x-toast' | 'x-tooltip' | 'x-carousel' | 'x-virtual' | 'x-computed' | 'x-defer'
     | 'x-chart' | 'x-date' | 'x-color' | 'x-colorpicker' | 'x-combobox'
     | 'x-export' | 'x-import' | 'x-pay' | 'x-files' | 'x-data-files'
-    | 'x-edit' | 'x-text-edit';
+    | 'x-edit' | 'x-rich-text';
 
 // ---------------------------------------------------------------------------
 // Global declarations (what Alpine exposes inside `x-data`, `x-show`, etc.)
@@ -487,8 +612,8 @@ declare global {
     const $import: ManifestImport;
     /** Element editor (edit plugin; opt-in). */
     const $edit: ManifestEdit;
-    /** Text editor (text-edit plugin). */
-    const $text: ManifestTextEdit;
+    /** Rich text editor (rich-text plugin; loaded on use). */
+    const $rich: ManifestRichText;
     /** Device/platform info (utilities; enriched by the device plugin). */
     const $device: ManifestDevice;
     /** Native share (device plugin). */
@@ -523,6 +648,14 @@ declare global {
         };
         Alpine?: unknown;
         __manifestLoaded?: unknown;
+        /** Rich text engine (rich-text plugin). */
+        ManifestRichText?: {
+            attach(el: Element, options?: ManifestRichTextAttachOptions): ManifestRichTextHandle | null;
+            toMarkdown(root: Element): string;
+            fromMarkdown(markdown: string): string;
+            sanitize(html: string, allowBlocks?: boolean, keepStyle?: boolean): string;
+            commands(): string[];
+        };
     }
 
     /**

package/lib/manifest.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.231';
+const MANIFEST_BUILD_VERSION = '0.5.233';
 
 /* Manifest Data Sources - Configuration */
 

package/lib/manifest.defer.js

@@ -6,7 +6,7 @@
 // Directives that render their own children — never stash under them
 const OWNS_CHILDREN = new Set([
     'x-html', 'x-text', 'x-ignore', 'x-markdown', 'x-icon', 'x-svg', 'x-code', 'x-code-group',
-    'x-chart', 'x-carousel', 'x-virtual', 'x-combobox', 'x-colorpicker', 'x-date', 'x-text-edit'
+    'x-chart', 'x-carousel', 'x-virtual', 'x-combobox', 'x-colorpicker', 'x-date', 'x-rich-text'
 ]);
 
 // Kill switch: data-defer="off" on the loader script; prerender snapshots keep eager markup

package/lib/manifest.dropdowns.js

@@ -359,6 +359,8 @@ function initializeDropdownPlugin() {
                                     pressTimer = null;
                                     restoreCallout();
                                     el.__mnfstLongPressOpenedAt = Date.now();
+                                    // No contextmenu event on iOS: announce the press so composing plugins (x-edit) can track the target.
+                                    pressTarget.dispatchEvent(new CustomEvent('dropdown:context', { bubbles: true, detail: { x: startX, y: startY } }));
                                     openContextMenuAt(pressTarget, startX, startY);
                                 }, LONG_PRESS_MS);
                             });