mnfst 0.5.195 → 0.5.197

package/lib/manifest.d.ts

@@ -331,6 +331,80 @@ 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. */
+export interface ManifestEdit {
+    /** True while a `.gated` area is editable. */
+    active: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    /** 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. */
+    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. */
+    target: Element | null;
+    /** Whether an operation applies right now: copy, cut, paste, duplicate, remove. */
+    can(op: string, el?: Element): boolean;
+    copy(el?: Element): boolean;
+    cut(el?: Element): boolean;
+    paste(el?: Element): boolean;
+    duplicate(el?: Element): boolean;
+    remove(el?: Element): boolean;
+    /** The addressable block containing a node, or null. */
+    block(node: Element): Element | null;
+}
+
+/** 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. */
+    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>;
+    /** 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. */
+    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;
+    /** Whether that command is active at the caret. */
+    active(command: string): boolean;
+    /** Whether that command is available in this area's mode. */
+    can(command: string): boolean;
+    /** Read the content as markdown regardless of the storage mode. */
+    markdown(): string;
+    /** Read the content as sanitized HTML regardless of the storage mode. */
+    html(): string;
+}
+
 /**
  * Manifest's custom-element/attribute authoring surface (documentation aid —
  * these are HTML attributes, not JS globals). Element styles pair with most.
@@ -340,7 +414,8 @@ export type ManifestDirective =
     | 'x-icon' | 'x-svg' | 'x-markdown' | 'x-code' | 'x-code-group'
     | 'x-toast' | 'x-tooltip' | 'x-carousel' | 'x-virtual' | 'x-resize'
     | 'x-chart' | 'x-date' | 'x-color' | 'x-colorpicker' | 'x-combobox'
-    | 'x-export' | 'x-pay' | 'x-files' | 'x-data-files';
+    | 'x-export' | 'x-pay' | 'x-files' | 'x-data-files'
+    | 'x-edit' | 'x-text-edit';
 
 // ---------------------------------------------------------------------------
 // Global declarations (what Alpine exposes inside `x-data`, `x-show`, etc.)
@@ -381,6 +456,10 @@ declare global {
     const $chart: ManifestChart;
     /** Export plugin. */
     const $export: ManifestExport;
+    /** Element editor (edit plugin; opt-in). */
+    const $edit: ManifestEdit;
+    /** Text editor (text-edit plugin). */
+    const $text: ManifestTextEdit;
     /** Device/platform info (utilities; enriched by the native plugin). */
     const $device: ManifestDevice;
     /** Native share (native plugin). */

package/lib/manifest.datepicker.css

@@ -10,13 +10,18 @@
 
 @layer base {
 
+    /* Animates `scale`, not `transform`. With fill mode `both` a transform
+       animation keeps its final value forever, which silently overrides any
+       transform an author put on a popover — so a menu positioned with
+       translate(-50%) simply would not move. The standalone property leaves
+       transform free. */
     @keyframes mnfst-popover-in {
         from {
-            transform: scale(.9)
+            scale: .9
         }
 
         to {
-            transform: none
+            scale: 1
         }
     }
 

package/lib/manifest.datepicker.js

@@ -454,7 +454,13 @@
 					const t = this.rootEl;
 					if (t.matches(':popover-open')) { this.close(); return; } // toggle
 					this.render();
-					try { t.showPopover(); } catch (_) { }
+					// Body-appended, so neither the popover tree nor manifest.dialog.css can see
+					// that this calendar belongs to the field's dialog or menu. `source` names the
+					// invoker (a text input can't carry popovertarget), without which opening the
+					// calendar light-dismisses the very thing it was opened from; the attribute
+					// exempts it from the stray-dropdown rule that would otherwise fade it out.
+					t.toggleAttribute('data-popover-nested', !!(this.field && this.field.closest('[popover]')));
+					try { t.showPopover({ source: this.field }); } catch (_) { }
 				},
 				close() {
 					if (this._closeTimeMenu) this._closeTimeMenu();
@@ -802,9 +808,12 @@
 			segs = { hIn, mIn, apBtn };
 
 			// Columns menu — body-appended popover so the calendar's overflow can't clip it,
-			// yet nests under the in-calendar invoker (won't dismiss the calendar).
+			// yet nests under the in-calendar invoker (won't dismiss the calendar). Its owner
+			// is always a calendar, never the page, so it is never a stray dropdown for
+			// manifest.dialog.css to fade out.
 			const menu = buildColumns(document.createElement('menu'), false);
 			menu.setAttribute('popover', '');
+			menu.setAttribute('data-popover-nested', '');
 			menu.id = 'mnfst-dp-time-' + (++_uid);
 			if (state._timeMenuEl && state._timeMenuEl.isConnected) state._timeMenuEl.remove();
 			document.body.appendChild(menu);

package/lib/manifest.dialog.css

@@ -10,13 +10,18 @@
 
 @layer base {
 
+    /* Animates `scale`, not `transform`. With fill mode `both` a transform
+       animation keeps its final value forever, which silently overrides any
+       transform an author put on a popover — so a menu positioned with
+       translate(-50%) simply would not move. The standalone property leaves
+       transform free. */
     @keyframes mnfst-popover-in {
         from {
-            transform: scale(.9)
+            scale: .9
         }
 
         to {
-            transform: none
+            scale: 1
         }
     }
 
@@ -101,8 +106,11 @@
     /* Hide dropdowns when dialogs are open */
     html:has(dialog:popover-open) {
 
-        /* Hide dropdowns outside of any dialog */
-        & menu[popover]:not(dialog *) {
+        /* Hide dropdowns outside of any dialog. A generated popover (a datepicker
+           calendar, a colorpicker panel) is appended to <body>, so DOM position alone
+           can't tell page chrome from a menu the dialog itself opened —
+           data-popover-nested marks the latter, which CSS has no way to work out. */
+        & menu[popover]:not(dialog *):not([data-popover-nested]) {
             opacity: 0;
             scale: .9;
             pointer-events: none;

package/lib/manifest.dropdown.css

@@ -10,13 +10,18 @@
 
 @layer base {
 
+    /* Animates `scale`, not `transform`. With fill mode `both` a transform
+       animation keeps its final value forever, which silently overrides any
+       transform an author put on a popover — so a menu positioned with
+       translate(-50%) simply would not move. The standalone property leaves
+       transform free. */
     @keyframes mnfst-popover-in {
         from {
-            transform: scale(.9)
+            scale: .9
         }
 
         to {
-            transform: none
+            scale: 1
         }
     }
 

package/lib/manifest.dropdowns.js

@@ -97,6 +97,10 @@ function initializeDropdownPlugin() {
                     const uniqueDropdownId = `dropdown-${anchorCode}`;
                     menu.setAttribute('id', uniqueDropdownId);
                     document.body.appendChild(menu);
+                    // Appending to <body> loses the fact that the trigger sits inside a
+                    // dialog, which is how manifest.dialog.css tells a dialog's own menus
+                    // from the page's. An authored menu keeps its place and needs no mark.
+                    if (el.closest('[popover]')) menu.setAttribute('data-popover-nested', '');
                     if (!modifiers.includes('context')) el.setAttribute('popovertarget', uniqueDropdownId);
 
                     // Initialize Alpine on the cloned menu
@@ -127,6 +131,7 @@ function initializeDropdownPlugin() {
                                             menu = menuElement.cloneNode(true);
                                             menu.setAttribute('id', dropdownId);
                                             document.body.appendChild(menu);
+                                            if (el.closest('[popover]')) menu.setAttribute('data-popover-nested', '');
                                             if (!modifiers.includes('context')) el.setAttribute('popovertarget', dropdownId);
 
                                             // Initialize Alpine on the menu
@@ -220,7 +225,10 @@ function initializeDropdownPlugin() {
                                 clearTimeout(autoCloseTimeout);
 
                                 pointMenuHere();
-                                menu.showPopover();
+                                // A hover open never runs the trigger's activation behaviour, so
+                                // popovertarget alone doesn't register it as the invoker — say so
+                                // here, or the menu light-dismisses whatever contains its trigger.
+                                menu.showPopover({ source: el });
                             }
                         };
 

package/lib/manifest.edit.css

@@ -0,0 +1,335 @@
+/* Manifest Edit */
+
+@layer base, components, utilities;
+
+/* Self-contained: every rule the plugin needs lives here, so this stylesheet works
+   on its own. Authors override without specificity battles — rules are :where()
+   wrapped and keyed off data-edit-* attributes, including the injected affordances
+   (handles, overlay, live region, toolbar, menu). No class names to collide with. */
+
+@layer utilities {
+
+    /* ---- Editable area (armed) ----
+       Chrome is opt-in. Most uses of this plugin are a resize handle or a sortable
+       list, which should look like themselves; only .authoring gets the outline and
+       the region label. */
+    :where([data-edit-armed]) {
+        position: relative;
+    }
+
+    /* Quiet until touched. A page covered in dashed boxes reads as a diagram of
+       itself; the affordance only has to be there when you go looking for it. */
+    :where([data-edit-armed][data-edit-authoring]) {
+        outline: 1px dashed transparent;
+        outline-offset: 6px;
+        border-radius: var(--radius);
+        transition: outline-color 0.12s ease;
+    }
+
+    :where([data-edit-armed][data-edit-authoring]):hover,
+    :where([data-edit-armed][data-edit-authoring]):focus-within {
+        outline-color: var(--color-line);
+    }
+
+    :where([data-edit-armed][data-edit-authoring])::before {
+        content: attr(data-edit-label);
+        position: absolute;
+        inset-block-start: -1.5rem;
+        inset-inline-start: 0;
+        font-size: 0.7rem;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--color-content-subtle);
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.12s ease;
+    }
+
+    :where([data-edit-armed][data-edit-authoring]):hover::before,
+    :where([data-edit-armed][data-edit-authoring]):focus-within::before {
+        opacity: 1;
+    }
+
+    /* ---- Reorder (pointer + keyboard; touch-action:none lets touch-drag beat scroll) ---- */
+    :where([data-edit-sortable]) {
+        cursor: grab;
+        touch-action: none;
+        transition: opacity 0.12s ease, outline-color 0.12s ease;
+    }
+
+    :where([data-edit-sortable]):hover,
+    :where([data-edit-sortable]):focus-within {
+        outline: 1px solid var(--edit-accent, var(--color-brand-content));
+        outline-offset: 3px;
+    }
+
+    :where([data-edit-sortable], [data-edit-movable]):focus-visible {
+        outline: 2px solid var(--edit-accent, var(--color-brand-content));
+        outline-offset: 3px;
+    }
+
+    /* Lifted out of the flow and following the pointer. */
+    :where([data-edit-sortable][data-edit-dragging]) {
+        z-index: 1000;
+        cursor: grabbing;
+        box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
+    }
+
+    /* The stand-in holding the slot the drop would land in — a translucent copy of
+       the element by default, because the clearest preview of where it lands is the
+       thing itself. Restyle it freely: hide its contents for an empty outlined slot,
+       give it a background, animate it. */
+    :where([data-edit-ghost]) {
+        opacity: var(--edit-ghost-opacity, 0.4);
+        pointer-events: none;
+    }
+
+    /* Nothing else should react while a drag is in progress */
+    :where([data-edit-dragging-in]) {
+        cursor: grabbing;
+        user-select: none;
+
+        & :where([data-edit-sortable]:not([data-edit-dragging])) {
+            cursor: grabbing;
+        }
+    }
+
+    :where([data-edit-grabbed]) {
+        outline: 2px dashed var(--edit-accent, var(--color-brand-content));
+        outline-offset: 3px;
+    }
+
+    /* ---- Move (positioned children) ---- */
+    :where([data-edit-movable]) {
+        cursor: move;
+        touch-action: none;
+    }
+
+    :where([data-edit-movable]):hover {
+        outline: 1px solid var(--edit-accent, var(--color-brand-content));
+        outline-offset: 2px;
+    }
+
+    /* ---- Inline text ---- */
+    :where([data-edit-armed]) [contenteditable="true"] {
+        outline: 1px solid transparent;
+        outline-offset: 2px;
+        border-radius: 3px;
+        transition: outline-color 0.12s ease;
+    }
+
+    :where([data-edit-armed]) [contenteditable="true"]:hover {
+        outline-color: color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
+    }
+
+    :where([data-edit-armed]) [contenteditable="true"]:focus {
+        outline: 2px solid var(--edit-accent, var(--color-brand-content));
+    }
+
+    /* ---- Size handles ----
+       Injected as siblings of the element's own markup, so its native :hover and
+       :focus still fire and its body stays interactive. */
+    :where([data-edit-sizable]) {
+        position: relative;
+    }
+
+    /* Handles reveal on approach rather than sitting on the element permanently */
+    :where([data-edit-sizable]) :where([data-edit-handle])::before {
+        opacity: 0;
+        transition: opacity 0.12s ease, background-color 0.15s ease;
+    }
+
+    :where([data-edit-sizable]):hover :where([data-edit-handle])::before,
+    :where([data-edit-sizable]):focus-within :where([data-edit-handle])::before {
+        opacity: 1;
+    }
+
+    :where([data-edit-handle]) {
+        position: absolute;
+        z-index: 100;
+        background: transparent;
+        --h: var(--edit-size-handle, 1rem);
+
+        /* Hairline, revealed on hover */
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 1px;
+            height: 1px;
+            background: transparent;
+            transition: background-color 0.15s ease;
+            pointer-events: none;
+        }
+
+        &:hover::before,
+        &:active::before {
+            background-color: var(--edit-accent, var(--color-brand-content));
+        }
+    }
+
+    :where([data-edit-handle]):focus-visible {
+        outline: 2px solid var(--edit-accent, var(--color-brand-content));
+    }
+
+    /* Edges span their axis; corners are square. A corner value contains a hyphen. */
+    :where([data-edit-handle="top"], [data-edit-handle="bottom"]) {
+        left: 0;
+        width: 100%;
+        height: var(--h);
+        cursor: ns-resize;
+
+        &::before {
+            width: 100%;
+        }
+    }
+
+    :where([data-edit-handle="left"], [data-edit-handle="right"], [data-edit-handle="start"], [data-edit-handle="end"]) {
+        top: 0;
+        width: var(--h);
+        height: 100%;
+        cursor: ew-resize;
+
+        &::before {
+            height: 100%;
+        }
+    }
+
+    :where([data-edit-handle*="-"]) {
+        width: var(--h);
+        height: var(--h);
+    }
+
+    /* Inset — each handle straddles its edge; a corner matches one rule per axis.
+       inset-inline-* carries the logical start/end values, so they flip for RTL. */
+    :where([data-edit-handle^="top"]) {
+        top: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle^="bottom"]) {
+        bottom: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle$="left"]) {
+        left: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle$="right"]) {
+        right: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle$="start"]) {
+        inset-inline-start: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle$="end"]) {
+        inset-inline-end: calc(var(--h) * -0.5);
+    }
+
+    /* Corner cursors; the logical pair flips with direction. */
+    :where([data-edit-handle="top-left"], [data-edit-handle="bottom-right"], [data-edit-handle="top-start"], [data-edit-handle="bottom-end"]) {
+        cursor: nwse-resize;
+    }
+
+    :where([data-edit-handle="top-right"], [data-edit-handle="bottom-left"], [data-edit-handle="top-end"], [data-edit-handle="bottom-start"]) {
+        cursor: nesw-resize;
+    }
+
+    [dir=rtl] :where([data-edit-handle="top-start"], [data-edit-handle="bottom-end"]) {
+        cursor: nesw-resize;
+    }
+
+    [dir=rtl] :where([data-edit-handle="top-end"], [data-edit-handle="bottom-start"]) {
+        cursor: nwse-resize;
+    }
+
+    /* Collapsed past --edit-size-collapse-* — authors restyle freely */
+    :where([data-edit-collapsed]) {
+        opacity: 0.45;
+    }
+
+    /* Full-viewport capture layer during a size or move drag */
+    :where([data-edit-overlay]) {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        background: transparent;
+    }
+
+    /* Screen-reader announcements (keyboard grab / move / drop) */
+    :where([data-edit-live]) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        border: 0;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+
+        :where([data-edit-armed]) > [draggable="true"],
+        :where([data-edit-handle])::before {
+            transition: none;
+        }
+    }
+}
+
+/* ---- Authoring chrome (toolbar + class/scope menu) ---- */
+@layer components {
+
+    /* Presence is script's business — it knows which route is on screen. Whether it
+       is seen is not, so the toolbar is styled and revealed here. */
+    :where([data-edit-toolbar]) {
+        display: none;
+        position: fixed;
+        inset-block-end: 1rem;
+        inset-inline-end: 1rem;
+        z-index: 9999;
+        gap: 0.5rem;
+        align-items: center;
+
+        & button[disabled] {
+            opacity: 0.35;
+            pointer-events: none;
+        }
+    }
+
+    :root[data-edit-active] :where([data-edit-toolbar]) {
+        display: flex;
+    }
+
+    /* A popover: the top layer sits above every stacking context, so no handle,
+       overlay or z-index anywhere on the page can paint over it. */
+    :where([data-edit-menu]) {
+        position: fixed;
+        margin: 0;
+        width: 16rem;
+        padding: 0.6rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        background: var(--color-surface-1);
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+        box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
+
+        & input {
+            width: 100%;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 0.75rem;
+        }
+
+        & small {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--color-content-subtle);
+        }
+    }
+}