wiki-formant 0.91.0 → 0.91.1

package/dist/base.css

@@ -756,7 +756,8 @@ pre:hover > .code-copy-btn,
   color: var(--ui-muted);
 }
 .block-toolbar__tools, .block-toolbar__actions { display: flex; align-items: center; gap: 0.125rem; }
-.block-toolbar__tools { opacity: 0; transition: opacity 150ms; }
+/* Kept right when an editor lets the toolbar wrap, as miow's narrow tab does. */
+.block-toolbar__tools { margin-left: auto; opacity: 0; transition: opacity 150ms; }
 :is(:hover, :focus-within, [data-selected]) > .block-toolbar > .block-toolbar__tools,
 .block-toolbar__tools:has([aria-expanded='true']) { opacity: 1; }
 @media (hover: none) { .block-toolbar__tools { opacity: 1; } }
@@ -779,7 +780,8 @@ pre:hover > .code-copy-btn,
 :is(.block-toolbar, .block-menu) svg { flex: none; width: 1rem; height: 1rem; }
 
 .block-menu { position: relative; display: inline-flex; }
-.block-list > .block-menu { align-self: center; }
+/* A list's foot button is centred under it, in a flex list or a plain one. */
+.block-menu:not([data-below]) { display: flex; width: fit-content; margin-inline: auto; }
 .block-add {
   display: inline-flex;
   align-items: center;
@@ -800,15 +802,16 @@ pre:hover > .code-copy-btn,
   z-index: 50;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  width: min(22rem, calc(100vw - 2rem));
+  width: min(24rem, calc(100vw - 2rem));
   padding: 0.25rem;
   background: var(--ui-surface);
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius);
   box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
 }
-.block-menu:not([data-below]) > .block-menu__panel { left: 50%; translate: -50% 0; }
-.block-menu[data-below] > .block-menu__panel { right: 0; }
+.block-menu:not([data-below]) > .block-menu__panel { left: 50%; translate: calc(-50% + var(--nudge, 0px)) 0; }
+/* `--nudge` is what AddBlockMenu moves it by to keep it in the window. */
+.block-menu[data-below] > .block-menu__panel { right: 0; translate: var(--nudge, 0px) 0; }
 /* A phone has no room to hang it off a button deep in a column: it is a sheet
    along the foot of the screen. */
 @media (max-width: 40rem) {
@@ -826,10 +829,12 @@ pre:hover > .code-copy-btn,
   background: none;
   font: inherit;
   font-size: var(--ui-small);
+  line-height: 1.25;
   color: inherit;
   text-align: left;
   cursor: pointer;
 }
-.block-menu__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* A long name takes a second line rather than losing its end. */
+.block-menu__item > span { min-width: 0; overflow-wrap: anywhere; }
 .block-menu__item svg { color: var(--ui-muted); }
 .block-menu__item:is(:hover, :focus-visible) { background: var(--ui-surface-2); outline: none; }

package/dist/block-editor.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // what lets a column or an infobox hold a list without being handed the whole
 // configuration. Keep both stable — a module constant or a `useMemo` — or every
 // card re-renders on every keystroke.
-import { createContext, memo, useCallback, useContext, useMemo, useRef, useState, } from 'react';
+import { createContext, memo, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { BlockActions, useBlockOperations, useClickOutside } from './react.js';
 import { CODE_LANGS, DEFAULT_LANG, EVENT_DATE, eventBegun, eventEnded, eventWhen, LIST_SOURCES, today, } from './blocks.js';
 import { BANNER_VARIANTS } from './text.js';
@@ -91,12 +91,32 @@ const BlockCard = memo(function BlockCard({ block, index, total, selected, neste
     const body = meta ? schema.renderBody(block, onUpdate) : null;
     return (_jsxs("section", { className: "block-card", "data-selected": selected || undefined, "data-nested": nested || undefined, onFocusCapture: onSelect, onClick: onSelect, children: [_jsx(BlockToolbar, { label: label, icon: meta?.icon, index: index, total: total, ops: { move, duplicate, remove }, icons: kit.icons, options: offered, onAdd: onAdd }), body ?? _jsx("p", { className: kit.classNames.muted, children: "Kept as it is \u2013 this editor has no fields for it." })] }));
 });
+/** The least gap, in px, between an open menu and the window's side. */
+const MENU_MARGIN = 8;
 /** An add button and its menu, which closes on a pick, a click outside it or Escape. Nothing to offer, no button. */
 export function AddBlockMenu({ options, onPick, icon, below = false, label = 'Add block' }) {
     const [open, setOpen] = useState(false);
     const close = useCallback(() => setOpen(false), []);
     const ref = useClickOutside(close);
     const trigger = useRef(null);
+    const panel = useRef(null);
+    // Hung off a button deep in a column, the panel can run past the window's
+    // edge: it moves back in by what it overhangs. A phone's sheet is fixed and
+    // already fits.
+    useLayoutEffect(() => {
+        const el = panel.current;
+        const view = el?.ownerDocument.defaultView;
+        if (!el || !view)
+            return;
+        el.style.removeProperty('--nudge');
+        if (view.getComputedStyle(el).position === 'fixed')
+            return;
+        const { left, right } = el.getBoundingClientRect();
+        const edge = el.ownerDocument.documentElement.clientWidth - MENU_MARGIN;
+        const nudge = left < MENU_MARGIN ? MENU_MARGIN - left : right > edge ? edge - right : 0;
+        if (nudge)
+            el.style.setProperty('--nudge', `${nudge}px`);
+    }, [open]);
     if (options.length === 0)
         return null;
     return (_jsxs("span", { ref: ref, className: "block-menu", "data-below": below || undefined, onKeyDown: e => {
@@ -105,7 +125,7 @@ export function AddBlockMenu({ options, onPick, icon, below = false, label = 'Ad
             e.stopPropagation();
             close();
             trigger.current?.focus();
-        }, children: [_jsxs("button", { ref: trigger, type: "button", className: below ? 'block-toolbar__button' : 'block-add', title: below ? 'Add a block below' : undefined, "aria-label": below ? 'Add a block below' : undefined, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen(o => !o), children: [icon, !below && label] }), open && (_jsx("span", { className: "block-menu__panel", role: "menu", children: options.map(o => (_jsxs("button", { type: "button", role: "menuitem", className: "block-menu__item", title: o.hint, onClick: e => {
+        }, children: [_jsxs("button", { ref: trigger, type: "button", className: below ? 'block-toolbar__button' : 'block-add', title: below ? 'Add a block below' : undefined, "aria-label": below ? 'Add a block below' : undefined, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen(o => !o), children: [icon, !below && label] }), open && (_jsx("span", { ref: panel, className: "block-menu__panel", role: "menu", children: options.map(o => (_jsxs("button", { type: "button", role: "menuitem", className: "block-menu__item", title: o.hint, onClick: e => {
                         // Inside a card, a pick is not also a click on the card.
                         e.stopPropagation();
                         close();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.91.0",
+  "version": "0.91.1",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",