@tristan2828/ui-foundation 3.20.1 → 3.21.0

package/dist/components/app/rich-text-table.js

@@ -0,0 +1,162 @@
+import { TextSelection } from '@milkdown/kit/prose/state';
+import { addColumnAfter, addColumnBefore, deleteColumn, deleteRow, deleteTable, isInTable, selectedRect, TableMap, } from '@milkdown/kit/prose/tables';
+const ALIGN = {
+    alignLeft: 'left',
+    alignCenter: 'center',
+    alignRight: 'right',
+};
+/** The caret's column's alignment, as the header cell has it (GFM's default is left). */
+export function columnAlignment(state) {
+    if (!isInTable(state))
+        return 'left';
+    const { map, table, left } = selectedRect(state);
+    const value = table.nodeAt(map.map[left])?.attrs.alignment;
+    return value ?? 'left';
+}
+/** Whether an action can apply where the caret is. */
+export function tableActionEnabled(state, action) {
+    if (!isInTable(state))
+        return false;
+    const { map, top, bottom, left, right } = selectedRect(state);
+    switch (action) {
+        case 'rowAbove':
+            return top > 0;
+        case 'deleteRow':
+            // Not the header row, and never every row under it.
+            return top > 0 && bottom - top < map.height - 1;
+        case 'deleteColumn':
+            return right - left < map.width;
+        default:
+            return true;
+    }
+}
+/** Runs an action where the caret is. False when it can't apply there. */
+export function runTableAction(state, dispatch, action) {
+    if (!tableActionEnabled(state, action))
+        return false;
+    const alignment = ALIGN[action];
+    if (alignment)
+        return alignColumn(state, dispatch, alignment);
+    switch (action) {
+        case 'rowAbove':
+            return addRow(state, dispatch, 'above');
+        case 'rowBelow':
+            return addRow(state, dispatch, 'below');
+        case 'columnLeft':
+            return addColumn(state, dispatch, 'left');
+        case 'columnRight':
+            return addColumn(state, dispatch, 'right');
+        case 'deleteRow':
+            return deleteRow(state, dispatch);
+        case 'deleteColumn':
+            return deleteColumn(state, dispatch);
+        case 'deleteTable':
+            return deleteTable(state, dispatch);
+        default:
+            return false;
+    }
+}
+// A row of empty cells, each aligned as its column is, above or below the
+// caret's rows (or at the end: `'end'`), and the caret into it in the
+// same column (the first, at the end).
+function addRow(state, dispatch, where) {
+    const { map, table, tableStart, top, bottom, left } = selectedRect(state);
+    const index = where === 'above' ? top : where === 'below' ? bottom : map.height;
+    if (index === 0)
+        return false;
+    const { schema } = state;
+    const cells = Array.from({ length: map.width }, (_value, column) => schema.nodes.table_cell.createAndFill({ alignment: table.nodeAt(map.map[column])?.attrs.alignment ?? null }));
+    let pos = tableStart;
+    for (let row = 0; row < index; row++)
+        pos += table.child(row).nodeSize;
+    const tr = state.tr.insert(pos, schema.nodes.table_row.create(null, cells));
+    const updated = tr.doc.nodeAt(tableStart - 1);
+    const column = where === 'end' ? 0 : left;
+    tr.setSelection(TextSelection.near(tr.doc.resolve(tableStart + TableMap.get(updated).map[index * map.width + column] + 1)));
+    dispatch(tr.scrollIntoView());
+    return true;
+}
+// A column of empty cells left or right of the caret's columns, unaligned
+// (prosemirror-tables makes its cells with the schema's default, left,
+// which would write `:---` for a column nobody aligned). The caret stays.
+function addColumn(state, dispatch, side) {
+    const { tableStart, left, right } = selectedRect(state);
+    let added = null;
+    const add = side === 'left' ? addColumnBefore : addColumnAfter;
+    if (!add(state, (tr) => (added = tr)))
+        return false;
+    const tr = added;
+    const table = tr.doc.nodeAt(tableStart - 1);
+    const map = TableMap.get(table);
+    const column = side === 'left' ? left : right;
+    for (let row = 0; row < map.height; row++) {
+        const pos = map.map[row * map.width + column];
+        const cell = table.nodeAt(pos);
+        tr.setNodeMarkup(tableStart + pos, undefined, { ...cell.attrs, alignment: null });
+    }
+    dispatch(tr);
+    return true;
+}
+// Every cell in the caret's columns aligned; left is GFM's default, so it
+// clears the alignment rather than writing `:---`.
+function alignColumn(state, dispatch, alignment) {
+    const { map, table, tableStart, left, right } = selectedRect(state);
+    const tr = state.tr;
+    const value = alignment === 'left' ? null : alignment;
+    for (let row = 0; row < map.height; row++) {
+        for (let column = left; column < right; column++) {
+            const pos = map.map[row * map.width + column];
+            const cell = table.nodeAt(pos);
+            if (cell.attrs.alignment !== value)
+                tr.setNodeMarkup(tableStart + pos, undefined, { ...cell.attrs, alignment: value });
+        }
+    }
+    if (tr.docChanged)
+        dispatch(tr);
+    return true;
+}
+// The caret's cell: its row and column, and the table's size.
+function cellAt(state) {
+    const rect = selectedRect(state);
+    return { ...rect, row: rect.top, column: rect.left };
+}
+// The caret out of the table: to the start of the block after it, or a
+// new line there when nothing follows.
+function exitTable(state, dispatch) {
+    const { tableStart, table } = selectedRect(state);
+    const after = tableStart - 1 + table.nodeSize;
+    const tr = state.tr;
+    const next = tr.doc.resolve(after).nodeAfter;
+    if (!next || !next.isTextblock)
+        tr.insert(after, state.schema.nodes.paragraph.create());
+    tr.setSelection(TextSelection.near(tr.doc.resolve(after + 1), 1));
+    dispatch(tr.scrollIntoView());
+    return true;
+}
+/**
+ * The editor's table keys, before Milkdown's own (which go to the next
+ * cell on Tab, and out of the table on any Enter). True when it handled
+ * the key.
+ */
+export function handleTableKey(state, dispatch, event) {
+    if (event.metaKey || event.ctrlKey || event.altKey || !isInTable(state) || !state.selection.empty)
+        return false;
+    const { map, row, column } = cellAt(state);
+    const lastRow = row === map.height - 1;
+    if (event.key === 'Tab' && !event.shiftKey && lastRow && column === map.width - 1)
+        return addRow(state, dispatch, 'end');
+    if (event.key !== 'Enter')
+        return false;
+    if (event.shiftKey)
+        return true;
+    if (lastRow)
+        return exitTable(state, dispatch);
+    const { tableStart } = selectedRect(state);
+    const below = map.map[(row + 1) * map.width + column];
+    dispatch(state.tr.setSelection(TextSelection.near(state.doc.resolve(tableStart + below + 1))).scrollIntoView());
+    return true;
+}
+/** A row added at the table's end, the caret into its first cell (the "Add a row" bar). */
+export function addRowAtEnd(state, dispatch) {
+    return isInTable(state) && addRow(state, dispatch, 'end');
+}

package/dist/components/app/rich-text-toolbar.d.ts

@@ -2,6 +2,7 @@ import { type Ref } from 'react';
 import type { EditorState } from '@milkdown/kit/prose/state';
 import { type FormatItem } from './rich-text-format-items.js';
 import { type FormatId } from './rich-text-formats.js';
+import type { TableAction } from './rich-text-table.js';
 declare const SETS: {
     all: FormatItem[][];
     selection: FormatItem[][];
@@ -14,8 +15,12 @@ export type FormatButtonsProps = {
     readOnly: boolean;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
+    /** A Table menu item picked (only the fixed toolbar has the menu). */
+    onTable?: (action: TableAction) => void;
+    /** The editable element, for the Table menu to give focus back to. */
+    text?: () => HTMLElement | null;
 };
-export declare function FormatButtons({ formats, state, readOnly, onFormat }: FormatButtonsProps): import("react").JSX.Element;
+export declare function FormatButtons({ formats, state, readOnly, onFormat, onTable, text }: FormatButtonsProps): import("react").JSX.Element;
 export interface RichTextToolbarProps {
     /** The editor's state now, to show which formats are on. Null until it's made. */
     state: EditorState | null;
@@ -24,8 +29,12 @@ export interface RichTextToolbarProps {
     controls?: string;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
+    /** A Table menu item picked: run it on the editor and give it focus back. */
+    onTable: (action: TableAction) => void;
+    /** The editable element, for the Table menu to give focus back to. */
+    text: () => HTMLElement | null;
     /** The toolbar's element, for Alt+F10 to reach it from the text. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare function RichTextToolbar({ state, readOnly, controls, onFormat, ref }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
 export {};

package/dist/components/app/rich-text-toolbar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The rich-text editor's fixed toolbar: one row of pressed/not-pressed
-// buttons above the text, each a format and its keyboard shortcut.
+// buttons above the text, each a format and its keyboard shortcut, and a
+// Table menu (rich-text-table-menu.tsx).
 //
 // - One tab stop (ARIA's toolbar pattern): Tab reaches the last button
 //   used, the arrow keys, Home and End move along the row.
@@ -16,35 +17,21 @@ import { Fragment, useRef, useState } from 'react';
 import { Separator } from '../ui/separator.js';
 import { Toggle } from '../ui/toggle.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip.js';
-import { FORMAT_GROUPS } from './rich-text-format-items.js';
+import { FORMAT_GROUPS, FORMAT_ITEMS } from './rich-text-format-items.js';
 import { formatOn } from './rich-text-formats.js';
-function isApple() {
-    return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-}
-// `aria-keyshortcuts` names real keys: Meta on Apple, Control elsewhere.
-function ariaKeys(keys, apple) {
-    return keys.replace('Mod', apple ? 'Meta' : 'Control');
-}
-// What a person reads: ⌘⌥X on Apple, Ctrl+Alt+X elsewhere.
-function shownKeys(keys, apple) {
-    if (!apple)
-        return keys.replace('Mod', 'Ctrl');
-    const symbols = { Mod: '⌘', Alt: '⌥', Shift: '⇧', Enter: '↵' };
-    return keys
-        .split('+')
-        .map((part) => symbols[part] ?? part)
-        .join('');
-}
+import { ariaKeys, isApple, shownKeys } from './rich-text-shortcuts.js';
+import { RichTextTableMenu } from './rich-text-table-menu.js';
 // Which buttons a toolbar has: every format (the fixed one), or the ones
 // that apply to selected words (the floating one).
+const SELECTION = ['bold', 'italic', 'strike', 'code', 'link'];
 const SETS = {
     all: FORMAT_GROUPS,
-    selection: [FORMAT_GROUPS[0], FORMAT_GROUPS[4]],
+    selection: [SELECTION.slice(0, 4), SELECTION.slice(4)].map((ids) => ids.map((id) => FORMAT_ITEMS.get(id))),
 };
 // A toolbar's row of buttons: one tab stop, the last one used (ARIA's
 // toolbar pattern); the arrow keys, Home and End move along the row. The
 // toolbar's element (`role="toolbar"`, its name) is the caller's.
-export function FormatButtons({ formats, state, readOnly, onFormat }) {
+export function FormatButtons({ formats, state, readOnly, onFormat, onTable, text = () => null }) {
     const apple = isApple();
     const groups = SETS[formats];
     const items = groups.flat();
@@ -71,6 +58,10 @@ export function FormatButtons({ formats, state, readOnly, onFormat }) {
     };
     return (_jsx(TooltipProvider, { delay: 400, children: groups.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
                     const index = items.indexOf(item);
+                    if (item.id === 'table')
+                        return (_jsx(RichTextTableMenu, { ref: (element) => {
+                                buttons.current[index] = element;
+                            }, state: state, readOnly: readOnly, tabIndex: index === current ? 0 : -1, onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onInsert: () => onFormat('table'), onAction: (action) => onTable?.(action), text: text }, item.id));
                     const Icon = item.icon;
                     const tip = [
                         item.label,
@@ -86,6 +77,6 @@ export function FormatButtons({ formats, state, readOnly, onFormat }) {
                                     onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
                 })] }, groupIndex))) }));
 }
-export function RichTextToolbar({ state, readOnly, controls, onFormat, ref }) {
-    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat }) }));
+export function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, text, ref }) {
+    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat, onTable: onTable, text: text }) }));
 }

package/dist/components/app/rich-text-widgets.d.ts

@@ -0,0 +1,19 @@
+import { type CalloutKind } from '../../lib/markdown-callout.js';
+export interface CalloutKindMenuProps {
+    kind: CalloutKind;
+    readOnly: boolean;
+    onPick: (kind: CalloutKind) => void;
+    onRemove: () => void;
+    /** The editable element, where focus goes when the menu closes. */
+    text: () => HTMLElement | null;
+}
+export declare function CalloutKindMenu({ kind, readOnly, onPick, onRemove, text }: CalloutKindMenuProps): import("react").JSX.Element;
+export interface TableBarProps {
+    /** Under the table (a row) or along its right (a column). */
+    side: 'row' | 'column';
+    /** The caret is in this table: shown without the pointer over it. */
+    active: boolean;
+    readOnly: boolean;
+    onAdd: () => void;
+}
+export declare function TableBar({ side, active, readOnly, onAdd }: TableBarProps): import("react").JSX.Element | null;

package/dist/components/app/rich-text-widgets.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The React parts of the editor's node views (rich-text-node-views.ts),
+// rendered into their slots through portals:
+//
+// - A callout's icon is a menu of its kinds (and Remove callout). From the
+//   keyboard, "/" at the start of a line in the callout lists the kinds
+//   too (rich-text-slash.ts), so the icon is a mouse shortcut and out of
+//   the tab order.
+// - A table's bars add a column at its right and a row at its end, shown
+//   while the pointer is over the table or the caret is in it. Mouse
+//   shortcuts as well: Tab in the last cell adds a row, and the toolbar's
+//   Table menu does both.
+//
+// Each gives focus back to the text when it's done.
+import { PlusIcon } from 'lucide-react';
+import { cn } from 'cn';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
+import { CALLOUT_KINDS } from '../../lib/markdown-callout.js';
+import { CALLOUT_LOOK } from './prose-look.js';
+export function CalloutKindMenu({ kind, readOnly, onPick, onRemove, text }) {
+    const look = CALLOUT_LOOK[kind];
+    const Icon = look.icon;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { tabIndex: -1, disabled: readOnly, "aria-label": `${look.label} callout: change its kind`, "data-slot": "rich-text-callout-kind", className: "flex size-5 items-center justify-center rounded-md outline-none hover:bg-foreground/10 focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none", children: _jsx(Icon, { "aria-hidden": "true", className: cn('size-4', look.tint) }) }), _jsxs(DropdownMenuContent, { className: "w-44", finalFocus: () => text() ?? true, children: [_jsx(DropdownMenuRadioGroup, { value: kind, onValueChange: (value) => onPick(value), children: CALLOUT_KINDS.map((one) => {
+                            const OneIcon = CALLOUT_LOOK[one].icon;
+                            return (_jsxs(DropdownMenuRadioItem, { value: one, closeOnClick: true, children: [_jsx(OneIcon, { "aria-hidden": "true", className: CALLOUT_LOOK[one].tint }), CALLOUT_LOOK[one].label] }, one));
+                        }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onClick: onRemove, children: "Remove callout" })] })] }));
+}
+export function TableBar({ side, active, readOnly, onAdd }) {
+    if (readOnly)
+        return null;
+    return (_jsx("button", { type: "button", tabIndex: -1, "aria-label": side === 'row' ? 'Add a row' : 'Add a column', "data-slot": `rich-text-table-add-${side}`, className: cn('flex flex-1 items-center justify-center rounded-md text-muted-foreground transition-opacity hover:bg-muted hover:text-foreground', 'opacity-0 group-hover/table:opacity-100', active && 'opacity-100'), 
+        // A press keeps focus in the text: the caret moves into the new cell.
+        onMouseDown: (event) => event.preventDefault(), onClick: onAdd, children: _jsx(PlusIcon, { "aria-hidden": "true", className: "size-3.5" }) }));
+}

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "success" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "info" | "warning" | "outline-success" | "outline-warning" | "outline-info" | "outline-destructive" | "tinted-success" | "tinted-warning" | "tinted-info" | "tinted-destructive" | null | undefined;
+    variant?: "link" | "success" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "warning" | "info" | "outline-success" | "outline-warning" | "outline-info" | "outline-destructive" | "tinted-success" | "tinted-warning" | "tinted-info" | "tinted-destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { cn } from "cn";
+import { ChevronRightIcon, CheckIcon } from "lucide-react";
+function DropdownMenu({ ...props }) {
+    return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (_jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/lib/markdown-callout.d.ts

@@ -0,0 +1,38 @@
+export declare const CALLOUT_KINDS: readonly ["note", "tip", "important", "warning", "caution"];
+export type CalloutKind = (typeof CALLOUT_KINDS)[number];
+type MdNode = {
+    type: string;
+    children?: MdNode[];
+    value?: string;
+    data?: Record<string, unknown>;
+    [key: string]: unknown;
+};
+/**
+ * For react-markdown: a callout quote becomes a `<div data-callout="note">`
+ * (its marker gone), which <Markdown>'s `div` component draws as one.
+ */
+export declare function remarkCallouts(): (tree: unknown) => void;
+/**
+ * For the rich-text editor: a callout quote becomes a `callout` node
+ * (`kind`, `marker`), which its schema reads and `calloutHandler` writes.
+ */
+export declare function remarkCalloutNodes(): (tree: unknown) => void;
+/** The marker to write for a callout: as it was written, unless its kind changed. */
+export declare function calloutMarker(kind: CalloutKind, written: string | null | undefined): string;
+type ToMarkdownState = {
+    enter: (name: string) => () => void;
+    createTracker: (info: unknown) => {
+        move: (value: string) => void;
+        shift: (value: number) => void;
+        current: () => unknown;
+    };
+    containerFlow: (node: MdNode, info: unknown) => string;
+    indentLines: (value: string, map: (line: string, index: number, blank: boolean) => string) => string;
+};
+/**
+ * Writes a `callout` node the way remark writes a quote, with the marker
+ * as its first line. A first block that isn't a paragraph gets a blank
+ * line after the marker, so it can't run into it.
+ */
+export declare function calloutHandler(node: MdNode, _parent: unknown, state: ToMarkdownState, info: unknown): string;
+export {};

package/dist/lib/markdown-callout.js

@@ -0,0 +1,103 @@
+// Callouts (Notion's coloured boxes) in Markdown: GitHub's alert syntax, a
+// quote whose first line is its kind in brackets.
+//
+//   > [!NOTE]
+//   > Measure twice, cut once.
+//
+// It's plain Markdown, so a note stays readable anywhere (GitHub and
+// Obsidian render it as a callout too, anything else as a quote), and
+// remark parses it as a blockquote whose first text is the marker. These
+// plugins read that marker: `remarkCallouts` for <Markdown> (an element
+// react-markdown hands to its `div` component) and `remarkCalloutNodes`
+// for the rich-text editor (a `callout` node it has a schema for, written
+// back with `calloutHandler`). The merge (markdown-merge.ts) needs
+// neither: to it a callout is the quote it's written as.
+//
+// Five kinds, GitHub's: note, tip, important, warning, caution. The marker
+// is kept as it was written (`[!note]` stays lower case) unless the kind
+// changes, so an untouched callout never reads as edited.
+export const CALLOUT_KINDS = ['note', 'tip', 'important', 'warning', 'caution'];
+// The marker alone on the quote's first line: `[!NOTE]`, any case, spaces
+// after it allowed.
+const MARKER = /^\[!(note|tip|important|warning|caution)\][ \t]*(?:\n|$)/i;
+/**
+ * A quote that's a callout: its kind and marker as written, with the
+ * marker taken out of its first paragraph (and that paragraph too, when
+ * the marker was all of it). Null for any other node, untouched.
+ */
+function takeCallout(node) {
+    if (node.type !== 'blockquote')
+        return null;
+    const paragraph = node.children?.[0];
+    const text = paragraph?.type === 'paragraph' ? paragraph.children?.[0] : undefined;
+    if (!paragraph || text?.type !== 'text' || typeof text.value !== 'string')
+        return null;
+    const found = MARKER.exec(text.value);
+    if (!found)
+        return null;
+    const rest = text.value.slice(found[0].length);
+    if (rest)
+        text.value = rest;
+    else
+        paragraph.children.shift();
+    if (paragraph.children.length === 0)
+        node.children.shift();
+    return { kind: found[1].toLowerCase(), marker: found[0].trim() };
+}
+function visit(node, each) {
+    for (const child of node.children ?? [])
+        visit(child, each);
+    each(node);
+}
+/**
+ * For react-markdown: a callout quote becomes a `<div data-callout="note">`
+ * (its marker gone), which <Markdown>'s `div` component draws as one.
+ */
+export function remarkCallouts() {
+    return (tree) => {
+        visit(tree, (node) => {
+            const callout = takeCallout(node);
+            if (callout)
+                node.data = { ...node.data, hName: 'div', hProperties: { dataCallout: callout.kind } };
+        });
+    };
+}
+/**
+ * For the rich-text editor: a callout quote becomes a `callout` node
+ * (`kind`, `marker`), which its schema reads and `calloutHandler` writes.
+ */
+export function remarkCalloutNodes() {
+    return (tree) => {
+        visit(tree, (node) => {
+            const callout = takeCallout(node);
+            if (!callout)
+                return;
+            node.type = 'callout';
+            node.kind = callout.kind;
+            node.marker = callout.marker;
+        });
+    };
+}
+/** The marker to write for a callout: as it was written, unless its kind changed. */
+export function calloutMarker(kind, written) {
+    return written && written.slice(2, -1).toLowerCase() === kind ? written : `[!${kind.toUpperCase()}]`;
+}
+/**
+ * Writes a `callout` node the way remark writes a quote, with the marker
+ * as its first line. A first block that isn't a paragraph gets a blank
+ * line after the marker, so it can't run into it.
+ */
+export function calloutHandler(node, _parent, state, info) {
+    const exit = state.enter('blockquote');
+    const tracker = state.createTracker(info);
+    tracker.move('> ');
+    tracker.shift(2);
+    const marker = calloutMarker(node.kind, node.marker);
+    // Milkdown's serializer starts a container's flow on a new line; the
+    // marker's line is that line.
+    const body = state.containerFlow(node, tracker.current()).replace(/^\n+/, '');
+    const joined = !body ? marker : node.children?.[0]?.type === 'paragraph' ? `${marker}\n${body}` : `${marker}\n\n${body}`;
+    const value = state.indentLines(joined, (line, _index, blank) => '>' + (blank ? '' : ' ') + line);
+    exit();
+    return value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.20.1",
+  "version": "3.21.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {

package/styles/index.css

@@ -47,6 +47,8 @@
     --color-info: var(--info);
     --color-info-foreground: var(--info-foreground);
     --color-info-text: var(--info-text);
+    --color-link: var(--link);
+    --color-rule: var(--rule);
     --color-category-1: var(--category-1);
     --color-category-2: var(--category-2);
     --color-category-3: var(--category-3);
@@ -105,6 +107,21 @@
   line-height: var(--type-caption-leading);
   font-weight: var(--type-caption-weight);
 }
+@utility type-heading-1 {
+  font-size: var(--type-heading-1-size);
+  line-height: var(--type-heading-1-leading);
+  font-weight: var(--type-heading-1-weight);
+}
+@utility type-heading-2 {
+  font-size: var(--type-heading-2-size);
+  line-height: var(--type-heading-2-leading);
+  font-weight: var(--type-heading-2-weight);
+}
+@utility type-heading-3 {
+  font-size: var(--type-heading-3-size);
+  line-height: var(--type-heading-3-leading);
+  font-weight: var(--type-heading-3-weight);
+}
 
 @layer base {
   * {