wiki-formant 0.89.4 → 0.91.0

package/README.md

@@ -859,14 +859,13 @@ export const GET = resolveMapHandler({ authorize: async () => !!(await currentUs
 
 ## Block editor
 
-`wiki-formant/block-editor` is the block list an author edits and the fields of the core types. Three wikis had written it, 500 to 700 lines each, and had drifted: one dropped a stored code language its list did not name, one let a typed count run past the row cap, one named every remove button "Remove", one never marked the block being edited. The behaviour is here once; the look arrives as a kit.
+`wiki-formant/block-editor` is the block list an author edits and the fields of the core types. Three wikis had written it, 500 to 700 lines each, and had drifted: one dropped a stored code language its list did not name, one let a typed count run past the row cap, one named every remove button "Remove", one never marked the block being edited. The behaviour is here once, and so is the chrome: each block is a card with a toolbar (its name, then add below, move, duplicate and delete, shown while the block is in hand and always on a touch screen), and every add menu is two tight columns of names, each type's `hint` its tooltip, drawn by `base.css` on the `--ui-*` tokens. The fields' look arrives as a kit.
 
 ```tsx
 const KIT: BlockEditorKit = {
-  classNames: { list: 'stack', card: 'block-card', action: 'icon-btn', input: 'input', row: 'row', … },
+  classNames: { action: 'icon-btn', input: 'input', row: 'row', stack: 'stack-sm', … },
   icons: { add: <Plus />, up: <ChevronUp />, down: <ChevronDown />, duplicate: <Copy />, remove: <Trash2 /> },
   Choice: ToggleGroup,   // optional: a <select> otherwise
-  Menu: PopoverMenu,     // optional: an inline panel otherwise
 };
 const SCHEMA: BlockSchema<Block> = {
   meta: type => BLOCK_META[type], create: createBlock, duplicate: duplicateBlock,
@@ -885,7 +884,7 @@ const SCHEMA: BlockSchema<Block> = {
 
 The dispatch stays a `switch` over the wiki's own union, so a new type is a compile error there. `CodeTabsFields`, `StatsFields`, `TestimonialFields`, `EventsFields`, `LocationsFields`, `ReferencesFields`, `LinkGridFields`, `BannerFields`, `PageListFields`, `ListFields`, `ColumnsFields` and `InfoboxFields` take the core blocks `wiki-formant/blocks` declares; the two containers hold the same list, offering `nestedTypes`. `Field`, `Choice` and `LimitField` are exported for a wiki's own editors, so its native types wear the same kit. A card is marked `data-selected` while it is being edited and `data-nested` inside a container; a type the build does not know is shown by its raw type and carried through untouched. Keep the kit and the schema stable — a module constant or a `useMemo` — since both reach every card through context, and a fresh one re-renders every card on every keystroke.
 
-An editor that draws each block in place, with a list of its own (miow's), hosts the same fields in `<BlockFieldsKit kit={KIT}>`, without `<BlockEditor>`. Only the two container fields need the full editor, since they hold a block list.
+An editor that draws each block in place, with a list of its own (miow's), hosts the same fields in `<BlockFieldsKit kit={KIT}>`, without `<BlockEditor>`. Only the two container fields need the full editor, since they hold a block list. It wears the same chrome: `<BlockToolbar>` over each block (an editor's own controls go in as `children`, before add below) and `<AddBlockMenu>` at a list's foot, each offering `BlockOption`s.
 
 A `testimonial` is `{ quote, author, role?, avatarUrl? }`, drawn by `TestimonialView` as `figure.testimonial`: the words in a `blockquote`, then a `figcaption` holding the photo and a `span` of `strong` (who) and `small` (their role). radix-wiki and miow each had one under its own field names; a site with sized images passes `photo`, the `<img>` attributes (`src`, `srcSet`, `sizes`) it made from `avatarUrl`. They are data, because a server component renders the view.
 

package/dist/base.css

@@ -203,7 +203,7 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
 
 /* ---- the look of the package's components ----------------------------------
    The panels, lists, cards and rails the package's markup produces, drawn once
-   on eight tokens a site maps from its own palette in `:root`. Four
+   on the tokens a site maps from its own palette in `:root`. Four
    stylesheets had restated sixty of these classes with four vocabularies
    (`--corner`, `--radius`, `--radius-wing`; `--space`, `--spacing-md`,
    `--space-3`) and four bodies. A site that must differ overrides the rule;
@@ -212,6 +212,7 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
      :root {
        --ui-surface: var(--color-surface-1);   a card's background
        --ui-surface-2: var(--color-surface-2); a raised or hovered one
+       --ui-stripe: color-mix(in srgb, var(--color-text) 5%, transparent);  every other table row, over its cells
        --ui-border: var(--color-border);
        --ui-radius: var(--radius);
        --ui-pad: 1rem;                          a panel's padding
@@ -225,6 +226,7 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
 :root {
   --ui-surface: color-mix(in srgb, currentColor 6%, transparent);
   --ui-surface-2: color-mix(in srgb, currentColor 12%, transparent);
+  --ui-stripe: color-mix(in srgb, currentColor 5%, transparent);
   --ui-border: color-mix(in srgb, currentColor 20%, transparent);
   --ui-radius: 0.5rem;
   --ui-pad: 1rem;
@@ -252,6 +254,11 @@ html[data-sidebar='closed'] .wiki-sidebar { width: 0; }
 /* Labels are short and values are the reading: 42% still fits "Published:". */
 .infobox th { width: 42%; font-weight: 600; color: var(--ui-muted); }
 .infobox tr:last-child :is(th, td) { border-bottom: 0; }
+/* Every table's body rows alternate, so a row reads across, the infobox's
+   included. The stripe is an image laid over the cell rather than a colour, so
+   it shows on whatever background a site gives its cells, and under a hover's.
+   The chart lays itself out in a table, and is not one. */
+tbody > tr:nth-child(even) > :is(th, td):not(.chart *) { background-image: linear-gradient(var(--ui-stripe), var(--ui-stripe)); }
 .infobox-facts { margin: 0; }
 .infobox-series { align-items: center; gap: 0.125rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ui-border); text-align: center; font-size: var(--ui-small); color: var(--ui-muted); }
 .page-with-infobox { gap: 1.5rem; }
@@ -597,11 +604,15 @@ pre:hover > .code-copy-btn,
    `TimeChart`: the canvas, a loading or empty state over it, and the range and
    step buttons pinned to its top-left corner. A site gives the buttons and the
    box their look; pressed is all this marks. */
-.chart { position: relative; margin: 0; overflow: hidden; }
+.chart { position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden; container-type: inline-size; }
 /* Its own stacking context: the library's canvases stack themselves, and the buttons go over them. */
 .chart-canvas { position: relative; z-index: 0; height: var(--chart-height, 15rem); }
 /* The chart lays itself out in a <table>; a site's table styles are not for it. */
 .chart-canvas :is(table, tr, td) { background: none; border: 0; border-radius: 0; }
+/* It sizes the plot and leaves the axis column to fit its labels. The infobox's
+   fixed layout split what was left between the axis and an empty column, and
+   cut the axis to half its labels. */
+.chart-canvas table { table-layout: auto; }
 .chart-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
 .chart-controls {
   position: absolute;
@@ -622,6 +633,12 @@ pre:hover > .code-copy-btn,
 .chart-controls :is(button, a):is([aria-pressed='true'], [aria-checked='true'], [aria-current]) { opacity: 1; }
 /* A step the range cannot make stays in its place, and dims. */
 .chart-controls button:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
+/* A narrow chart has no room over its plot: in the 306px of radix-wiki's
+   infobox the buttons ran across the price axis and wrapped onto the line. There
+   they take a row of their own above it, still over the loading and empty state. */
+@container (max-width: 30rem) {
+  .chart-controls { position: relative; top: auto; left: auto; order: -1; padding: 0.5rem 0.5rem 0; }
+}
 
 /* ---- Stats ----------------------------------------------------------------
    `--share` is a row's value over the largest in its list, 0 to 1. Bars take
@@ -701,3 +718,118 @@ pre:hover > .code-copy-btn,
   max-width: 100%;
   min-height: 200px;
 }
+
+/* ---- the block editor (BlockEditor, BlockToolbar, AddBlockMenu) -------------
+   Every wiki's editor wears the same chrome: a card per block, its name and its
+   controls in a toolbar above its fields, and an add menu of two tight columns,
+   names only, with what each type is for as its tooltip. The four had drawn it
+   four ways, one a 16-row list a screen tall. A block's controls show while it
+   is in hand (hovered, focused, picked, or with its menu open), and always on a
+   screen with no hover. The fields inside are the site's kit. */
+.block-list { display: flex; flex-direction: column; gap: 1rem; }
+.block-list[data-nested] { gap: 0.5rem; }
+.block-list__empty { margin: 0; font-size: var(--ui-small); color: var(--ui-muted); }
+.block-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  padding: var(--ui-pad);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  transition: border-color 150ms, background-color 150ms;
+}
+.block-card:hover { border-color: color-mix(in srgb, var(--ui-muted) 50%, transparent); }
+.block-card[data-nested] { gap: 0.5rem; padding: 0.75rem; }
+.block-card[data-selected] { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 5%, transparent); }
+
+.block-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.75rem; }
+.block-toolbar__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  font-size: var(--ui-small);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  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; }
+: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; } }
+.block-toolbar__button {
+  display: inline-grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--ui-radius) / 2);
+  background: none;
+  color: var(--ui-muted);
+  cursor: pointer;
+}
+.block-toolbar__button:is(:hover, [aria-expanded='true']):not(:disabled) { background: var(--ui-surface-2); color: inherit; }
+.block-toolbar__button:disabled { opacity: 0.3; cursor: default; }
+/* BlockActions puts delete last. */
+.block-toolbar__actions > :last-child:hover { color: var(--ui-down); }
+: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; }
+.block-add {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px dashed var(--ui-border);
+  border-radius: var(--ui-radius);
+  background: none;
+  font: inherit;
+  font-size: var(--ui-small);
+  color: var(--ui-muted);
+  cursor: pointer;
+}
+.block-add:is(:hover, [aria-expanded='true']) { border-color: var(--ui-muted); color: inherit; }
+.block-menu__panel {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  z-index: 50;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  width: min(22rem, 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; }
+/* 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) {
+  /* As specific as the two placements above, and after them. */
+  .block-menu:is(:not([data-below]), [data-below]) > .block-menu__panel { position: fixed; inset: auto 1rem 1rem; width: auto; translate: none; }
+}
+.block-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  border-radius: calc(var(--ui-radius) / 2);
+  background: none;
+  font: inherit;
+  font-size: var(--ui-small);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.block-menu__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.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.d.ts

@@ -1,29 +1,11 @@
-import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
+import { type BlockActionsProps } from './react.js';
 import { type BannerBlock, type CodeTabsBlock, type ColumnsBlock, type EventsBlock, type LocationsBlock, type InfoboxBlock, type LinkGridBlock, type ReferencesBlock, type StatsBlock, type TestimonialBlock } from './blocks.js';
 export interface BlockEditorClassNames {
-    /** A page's block list. */
-    list?: string;
-    /** A column's or an infobox's. */
-    nestedList?: string;
-    /** The line an empty list shows. */
-    empty?: string;
-    /** A block. It carries `data-selected` while it is the one being edited, and `data-nested` inside a container. */
-    card?: string;
-    cardHead?: string;
-    cardLabel?: string;
-    cardActions?: string;
-    /** Every icon button: a card's actions, add-below, remove. */
+    /** A field's icon button: remove a row, a tab, a column. */
     action?: string;
-    /** The Add block button at the foot of a list. */
-    addBlock?: string;
     /** The default `Add` button: Add tab, Add link. */
     add?: string;
-    /** The default `Menu`'s wrapper and panel. */
-    menuAnchor?: string;
-    menu?: string;
-    menuItem?: string;
-    menuText?: string;
-    menuHint?: string;
     /** A vertical group of fields. */
     stack?: string;
     /** A row of inputs ending in a remove button. */
@@ -68,18 +50,6 @@ export interface ChoiceProps {
     }>;
     onChange: (value: string) => void;
 }
-/**
- * The add-block menu around its trigger. `trigger` is the button the editor
- * drew; a popover takes it as its anchor, an inline panel renders it first.
- */
-export interface MenuProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    trigger: ReactElement;
-    /** The icon in a block's head that adds under it, rather than the list's foot button. */
-    below: boolean;
-    children: ReactNode;
-}
 export interface AddProps {
     onPress: () => void;
     children: ReactNode;
@@ -89,7 +59,6 @@ export interface BlockEditorKit {
     icons: BlockEditorIcons;
     Field?: ComponentType<FieldProps>;
     Choice?: ComponentType<ChoiceProps>;
-    Menu?: ComponentType<MenuProps>;
     Add?: ComponentType<AddProps>;
 }
 export type EditableBlock = {
@@ -99,7 +68,7 @@ export type EditableBlock = {
 export interface BlockMeta {
     label: string;
     icon?: ReactNode;
-    /** The line under the label in the add menu. */
+    /** What it is for: the add menu's tooltip on it. */
     hint?: string;
 }
 export interface BlockSchema<B extends EditableBlock> {
@@ -141,6 +110,37 @@ export interface BlockEditorProps<B extends EditableBlock> {
  * the same list, offering `nestedTypes`.
  */
 export declare function BlockEditor<B extends EditableBlock>({ blocks, onChange, schema, kit }: BlockEditorProps<B>): import("react").JSX.Element;
+/** A type an add menu offers. */
+export interface BlockOption {
+    type: string;
+    label: string;
+    icon?: ReactNode;
+    /** What it is for: the item's tooltip. */
+    hint?: string;
+}
+export interface AddBlockMenuProps {
+    options: readonly BlockOption[];
+    onPick: (type: string) => void;
+    icon: ReactNode;
+    /** The icon in a block's toolbar that adds under it, rather than the button at a list's foot. */
+    below?: boolean;
+    /** The foot button's words. */
+    label?: string;
+}
+/** An add button and its menu, which closes on a pick, a click outside it or Escape. Nothing to offer, no button. */
+export declare function AddBlockMenu({ options, onPick, icon, below, label }: AddBlockMenuProps): import("react").JSX.Element | null;
+export interface BlockToolbarProps extends Pick<BlockActionsProps, 'index' | 'total' | 'ops'> {
+    label: string;
+    icon?: ReactNode;
+    icons: BlockEditorIcons;
+    /** What add-below offers; without them, no add-below. */
+    options?: readonly BlockOption[];
+    onAdd?: (type: string) => void;
+    /** An editor's own controls, before add-below. */
+    children?: ReactNode;
+}
+/** A block's name and its controls: add below, move up and down, duplicate, delete. */
+export declare function BlockToolbar({ label, icon, index, total, ops, icons, options, onAdd, children }: BlockToolbarProps): import("react").JSX.Element;
 /** A labelled field in the kit's style, for a wiki's own block editors as well as these. */
 export declare function Field(props: FieldProps): import("react").JSX.Element;
 /** One of a few values in the kit's style; a `<select>` when the kit has none. */

package/dist/block-editor.js

@@ -7,10 +7,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // drifted the way copies do: one dropped a stored code language that was not
 // in its list, one let a typed count run past the row cap, one named every
 // remove button "Remove", one never highlighted the block being edited. The
-// behaviour lives here once. The look does not: each wiki draws its inputs,
-// toggles and menus with its own design system, so those arrive as a KIT —
-// class names, icons, and four optional components — and the markup here is
-// bare semantic HTML wearing whatever the kit says.
+// behaviour lives here once, and so does the chrome every editor wears: a
+// block's toolbar and the add menu, drawn by base.css. The fields' look does
+// not: each wiki draws its inputs and toggles with its own design system, so
+// those arrive as a KIT — class names, icons, and three optional components —
+// and the markup here is bare semantic HTML wearing whatever the kit says.
 //
 // The dispatch stays with the wiki. `renderBody` is a `switch` over its own
 // closed union, as S4 of the workspace's STRUCTURE.md requires, so a new block
@@ -21,8 +22,8 @@ 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, useState, } from 'react';
-import { BlockActions, useBlockOperations } from './react.js';
+import { createContext, memo, useCallback, useContext, 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';
 import { DAY_NAMES, DAYS, DEFAULT_ZONE, hoursRows, TIME } from './hours.js';
@@ -65,48 +66,55 @@ export function BlockEditor({ blocks, onChange, schema, kit }) {
 }
 function BlockList({ blocks, onChange, nested = false }) {
     const { kit, schema } = useEditorContext();
-    const c = kit.classNames;
     const ops = useBlockOperations(blocks, onChange, schema);
     const base = nested ? schema.nestedTypes : schema.types;
     // A string, so the offer is recomputed — and every card re-rendered — only
     // when a single-use type comes or goes, not on every keystroke.
     const held = (schema.single ?? []).filter(t => blocks.some(b => b.type === t)).join(' ');
-    const offered = useMemo(() => base.filter(t => !held.split(' ').includes(t)), [base, held]);
+    const offered = useMemo(() => base.filter(t => !held.split(' ').includes(t)).map(type => blockOption(schema, type)), [base, held, schema]);
     const insertNew = useCallback((type) => ops.insert(schema.create(type)), [ops.insert, schema]);
-    return (_jsxs("div", { className: nested ? c.nestedList : c.list, children: [blocks.length === 0 && _jsx("p", { className: c.empty, children: nested ? 'Empty.' : 'Nothing here yet. Add the first block.' }), blocks.map((block, i) => (_jsx(BlockCard, { block: block, index: i, total: blocks.length, selected: ops.selectedIndex === i, nested: nested, offered: offered, update: ops.update, move: ops.move, duplicate: ops.duplicate, remove: ops.remove, insert: ops.insert, select: ops.setSelectedIndex }, block.id))), _jsx(InsertMenu, { types: offered, onPick: insertNew })] }));
+    return (_jsxs("div", { className: "block-list", "data-nested": nested || undefined, children: [blocks.length === 0 && _jsx("p", { className: "block-list__empty", children: nested ? 'Empty.' : 'Nothing here yet. Add the first block.' }), blocks.map((block, i) => (_jsx(BlockCard, { block: block, index: i, total: blocks.length, selected: ops.selectedIndex === i, nested: nested, offered: offered, update: ops.update, move: ops.move, duplicate: ops.duplicate, remove: ops.remove, insert: ops.insert, select: ops.setSelectedIndex }, block.id))), _jsx(AddBlockMenu, { options: offered, onPick: insertNew, icon: kit.icons.add })] }));
+}
+function blockOption(schema, type) {
+    const meta = schema.meta(type);
+    return { type, label: meta?.label ?? type, icon: meta?.icon, hint: meta?.hint };
 }
 // Memoised on the list's ref-stable callbacks, so a keystroke in one block does
 // not re-render every other block's editor.
 const BlockCard = memo(function BlockCard({ block, index, total, selected, nested, offered, update, move, duplicate, remove, insert, select }) {
     const { kit, schema } = useEditorContext();
-    const c = kit.classNames;
     const onUpdate = useCallback((next) => update(index, next), [update, index]);
     const onSelect = useCallback(() => select(index), [select, index]);
+    const onAdd = useCallback((type) => insert(schema.create(type), index + 1), [insert, schema, index]);
     const meta = schema.meta(block.type);
     const label = meta?.label ?? block.type;
     const body = meta ? schema.renderBody(block, onUpdate) : null;
-    return (_jsxs("section", { className: c.card, "data-selected": selected || undefined, "data-nested": nested || undefined, onFocusCapture: onSelect, onClick: onSelect, children: [_jsxs("div", { className: c.cardHead, children: [_jsxs("span", { className: c.cardLabel, children: [meta?.icon, label] }), _jsxs("span", { className: c.cardActions, children: [_jsx(InsertMenu, { below: true, types: offered, onPick: type => insert(schema.create(type), index + 1) }), _jsx(BlockActions, { index: index, total: total, ops: { move, duplicate, remove }, icons: kit.icons, className: c.cardActions, buttonClassName: c.action, blockLabel: label })] })] }), body ?? _jsx("p", { className: c.muted, children: "Kept as it is \u2013 this editor has no fields for it." })] }));
+    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." })] }));
 });
-function InsertMenu({ types, onPick, below = false }) {
-    const { kit, schema } = useEditorContext();
-    const c = kit.classNames;
+/** 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 Menu = kit.Menu ?? InlineMenu;
-    const toggle = () => setOpen(o => !o);
-    const trigger = below ? (_jsx("button", { type: "button", className: c.action, title: "Add a block below", "aria-label": "Add a block below", "aria-expanded": open, onClick: toggle, children: kit.icons.add })) : (_jsxs("button", { type: "button", className: c.addBlock, "aria-expanded": open, onClick: toggle, children: [kit.icons.add, "Add block"] }));
-    return (_jsx(Menu, { open: open, onOpenChange: setOpen, trigger: trigger, below: below, children: types.map(type => {
-            const meta = schema.meta(type);
-            return (_jsxs("button", { type: "button", className: c.menuItem, onClick: e => {
-                    // Inside a card, a pick is not also a click on the card.
-                    e.stopPropagation();
-                    onPick(type);
-                    setOpen(false);
-                }, children: [meta?.icon, _jsxs("span", { className: c.menuText, children: [_jsx("span", { children: meta?.label ?? type }), meta?.hint && _jsx("span", { className: c.menuHint, children: meta.hint })] })] }, type));
-        }) }));
+    const close = useCallback(() => setOpen(false), []);
+    const ref = useClickOutside(close);
+    const trigger = useRef(null);
+    if (options.length === 0)
+        return null;
+    return (_jsxs("span", { ref: ref, className: "block-menu", "data-below": below || undefined, onKeyDown: e => {
+            if (e.key !== 'Escape' || !open)
+                return;
+            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 => {
+                        // Inside a card, a pick is not also a click on the card.
+                        e.stopPropagation();
+                        close();
+                        onPick(o.type);
+                    }, children: [o.icon, _jsx("span", { children: o.label })] }, o.type))) }))] }));
 }
-function InlineMenu({ open, trigger, children }) {
-    const c = useEditorContext().kit.classNames;
-    return (_jsxs("span", { className: c.menuAnchor, children: [trigger, open && _jsx("span", { className: c.menu, children: children })] }));
+/** A block's name and its controls: add below, move up and down, duplicate, delete. */
+export function BlockToolbar({ label, icon, index, total, ops, icons, options, onAdd, children }) {
+    return (_jsxs("div", { className: "block-toolbar", children: [_jsxs("span", { className: "block-toolbar__label", children: [icon, label] }), _jsxs("span", { className: "block-toolbar__tools", children: [children, options && onAdd && _jsx(AddBlockMenu, { below: true, options: options, onPick: onAdd, icon: icons.add }), _jsx(BlockActions, { index: index, total: total, ops: ops, icons: icons, className: "block-toolbar__actions", buttonClassName: "block-toolbar__button", blockLabel: label })] })] }));
 }
 // ---- the kit's parts, resolved ----------------------------------------------
 /** A labelled field in the kit's style, for a wiki's own block editors as well as these. */
@@ -254,7 +262,7 @@ function PagePicker({ ids, onChange: set, pages }) {
     };
     return (_jsxs("div", { className: c.stack, children: [ids.map((id, i) => {
                 const page = byId.get(id);
-                return (_jsxs("div", { className: c.row, children: [_jsxs("span", { className: c.muted, children: [i + 1, "."] }), _jsxs("span", { children: [pages ? (page?.title ?? `No such page: ${id}`) : id, page?.detail && _jsxs("span", { className: c.muted, children: [" \u00B7 ", page.detail] })] }), _jsx(BlockActions, { index: i, total: ids.length, ops: ops, icons: { up: kit.icons.up, down: kit.icons.down, remove: kit.icons.remove }, className: c.cardActions, buttonClassName: c.action, blockLabel: "page" })] }, i));
+                return (_jsxs("div", { className: c.row, children: [_jsxs("span", { className: c.muted, children: [i + 1, "."] }), _jsxs("span", { children: [pages ? (page?.title ?? `No such page: ${id}`) : id, page?.detail && _jsxs("span", { className: c.muted, children: [" \u00B7 ", page.detail] })] }), _jsx(BlockActions, { index: i, total: ids.length, ops: ops, icons: { up: kit.icons.up, down: kit.icons.down, remove: kit.icons.remove }, className: "block-toolbar__actions", buttonClassName: "block-toolbar__button", blockLabel: "page" })] }, i));
             }), pages && pages.length === 0 && _jsx("p", { className: c.muted, children: "This wiki has no pages to pick yet." }), !full && pages && unpicked.length > 0 && (_jsx(Field, { label: "Add a page", children: _jsxs("select", { className: c.input, value: "", onChange: e => add(e.target.value), children: [_jsx("option", { value: "", children: "Choose\u2026" }), unpicked.map(p => (_jsx("option", { value: p.id, children: p.detail ? `${p.title} · ${p.detail}` : p.title }, p.id)))] }) })), !full && !pages && (_jsxs("div", { className: c.row, children: [_jsx("input", { type: "text", className: c.input, "aria-label": "Page id", placeholder: "Page id", value: typed, onChange: e => setTyped(e.target.value), onKeyDown: e => {
                             if (e.key !== 'Enter')
                                 return;
@@ -301,7 +309,7 @@ const MAX_COLUMNS = 4;
 export function ColumnsFields({ block, onUpdate }) {
     const c = useEditorContext().kit.classNames;
     const columns = block.columns;
-    return (_jsxs("div", { className: c.stack, children: [_jsxs("div", { className: c.row, children: [_jsx(Choice, { label: "Gap", value: block.gap ?? 'md', options: GAPS, onChange: gap => onUpdate({ ...block, gap: gap }) }), _jsx(Choice, { label: "Align", value: block.align ?? 'start', options: ALIGNS, onChange: align => onUpdate({ ...block, align: align }) })] }), _jsx("div", { className: c.columns, children: columns.map((column, ci) => (_jsxs("div", { className: cx(c.nest, c.stack), children: [_jsxs("div", { className: c.cardHead, children: [_jsxs("span", { className: c.cardLabel, children: ["Column ", ci + 1] }), columns.length > 1 && _jsx(Remove, { label: `Remove column ${ci + 1}`, onPress: () => onUpdate({ ...block, columns: removeAt(columns, ci) }) })] }), _jsx(BlockList, { nested: true, blocks: column.blocks, onChange: blocks => onUpdate({ ...block, columns: replaceAt(columns, ci, { ...column, blocks: blocks }) }) })] }, column.id))) }), columns.length < MAX_COLUMNS && _jsx(Add, { onPress: () => onUpdate({ ...block, columns: [...columns, { id: newId(), blocks: [] }] }), children: "Add column" })] }));
+    return (_jsxs("div", { className: c.stack, children: [_jsxs("div", { className: c.row, children: [_jsx(Choice, { label: "Gap", value: block.gap ?? 'md', options: GAPS, onChange: gap => onUpdate({ ...block, gap: gap }) }), _jsx(Choice, { label: "Align", value: block.align ?? 'start', options: ALIGNS, onChange: align => onUpdate({ ...block, align: align }) })] }), _jsx("div", { className: c.columns, children: columns.map((column, ci) => (_jsxs("div", { className: cx(c.nest, c.stack), children: [_jsxs("div", { className: "block-toolbar", children: [_jsxs("span", { className: "block-toolbar__label", children: ["Column ", ci + 1] }), columns.length > 1 && _jsx(Remove, { label: `Remove column ${ci + 1}`, onPress: () => onUpdate({ ...block, columns: removeAt(columns, ci) }) })] }), _jsx(BlockList, { nested: true, blocks: column.blocks, onChange: blocks => onUpdate({ ...block, columns: replaceAt(columns, ci, { ...column, blocks: blocks }) }) })] }, column.id))) }), columns.length < MAX_COLUMNS && _jsx(Add, { onPress: () => onUpdate({ ...block, columns: [...columns, { id: newId(), blocks: [] }] }), children: "Add column" })] }));
 }
 /** An infobox's blocks, offering the schema's `nestedTypes`. */
 export function InfoboxFields({ block, onUpdate }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.89.4",
+  "version": "0.91.0",
   "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",