@lar-works/design-system 0.2.1 → 0.3.0

package/dist/forms/MarkdownEditor.js

@@ -0,0 +1,175 @@
+import { MarkdownToolbar } from "./MarkdownToolbar.js";
+import { useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CodeNode } from "@lexical/code";
+import { $generateNodesFromDOM } from "@lexical/html";
+import { LinkNode } from "@lexical/link";
+import { $isListItemNode, ListItemNode, ListNode } from "@lexical/list";
+import { $convertFromMarkdownString, $convertToMarkdownString, $generateNodesFromMarkdownString, TRANSFORMERS } from "@lexical/markdown";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { $findMatchingParent, $getRoot, $getSelection, $insertNodes, $isParagraphNode, $isRangeSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, INDENT_CONTENT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, PASTE_COMMAND } from "lexical";
+// src/forms/MarkdownEditor.tsx
+const theme = {
+	heading: {
+		h1: "text-xl font-semibold mt-4 mb-1.5 first:mt-0",
+		h2: "text-lg font-semibold mt-4 mb-1 first:mt-0",
+		h3: "font-semibold mt-3 mb-1 first:mt-0"
+	},
+	list: {
+		ul: "list-disc ps-6 my-1.5",
+		ol: "list-decimal ps-6 my-1.5",
+		listitem: "my-0.5 marker:text-base-500",
+		nested: { listitem: "list-none" }
+	},
+	paragraph: "my-1.5 first:mt-0",
+	quote: "border-s-2 border-base-300 ps-3 text-base-700 my-1.5",
+	code: "block rounded-md bg-base-200 p-3 font-mono text-xs my-1.5 whitespace-pre-wrap",
+	link: "text-(--lar-info-text) underline underline-offset-2",
+	text: {
+		bold: "font-semibold",
+		italic: "italic",
+		strikethrough: "line-through",
+		code: "rounded bg-base-200 px-1 font-mono text-[0.85em]"
+	}
+};
+const LOOKS_LIKE_MARKDOWN = /(^|\n)\s*([-*+] |\d+[.)] |#{1,6} |> |```)|\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\)/;
+/** Puts pasted `nodes` in place of the selected text. Ones starting with a heading, list, quote or code block go in after
+*  the block the caret is in, unless it is empty, as inserted at the caret the first block's text would join that block's. */
+function $insertPasted(nodes) {
+	const selection = $getSelection();
+	if ($isRangeSelection(selection)) selection.removeText();
+	const block = $isRangeSelection(selection) ? selection.anchor.getNode().getTopLevelElement() : null;
+	const first = nodes[0];
+	if (!block || !first || $isParagraphNode(first) || block.getTextContentSize() === 0) return $insertNodes(nodes);
+	let last = block;
+	for (const node of nodes) last = last.insertAfter(node);
+	last.selectEnd();
+}
+/** Plain text that reads as Markdown, pasted without HTML, goes in as the nodes it stands for. */
+function MarkdownPastePlugin() {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => editor.registerCommand(PASTE_COMMAND, (event) => {
+		const data = "clipboardData" in event ? event.clipboardData : null;
+		if (!data || data.types.includes("text/html")) return false;
+		const text = data.getData("text/plain");
+		if (!LOOKS_LIKE_MARKDOWN.test(text)) return false;
+		event.preventDefault();
+		editor.update(() => $insertPasted($generateNodesFromMarkdownString(text, TRANSFORMERS)));
+		return true;
+	}, COMMAND_PRIORITY_HIGH), [editor]);
+	return null;
+}
+/** Tab nests the list item the selection is in, one deeper than the item before it at most, and Shift+Tab lifts it back
+*  out. Where neither can change anything, as outside a list or on a top-level item, Tab is left to the browser, so it
+*  moves focus on rather than trapping it in the editor. */
+function ListTabPlugin() {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => editor.registerCommand(KEY_TAB_COMMAND, (event) => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return false;
+		const items = selection.getNodes().map((node) => $isListItemNode(node) ? node : $findMatchingParent(node, $isListItemNode));
+		const moves = (item) => item !== null && (event.shiftKey ? item.getIndent() > 0 : item.getPreviousSibling() !== null);
+		if (!items.some(moves)) return false;
+		event.preventDefault();
+		return editor.dispatchCommand(event.shiftKey ? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND, void 0);
+	}, COMMAND_PRIORITY_EDITOR), [editor]);
+	return null;
+}
+/** Locks the text, as a disabled field does. */
+function EditablePlugin({ editable }) {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => editor.setEditable(editable), [editor, editable]);
+	return null;
+}
+/** Reports the Markdown the editor makes of its starting text, which a check for changes compares against. */
+function BaselinePlugin({ onBaseline }) {
+	const [editor] = useLexicalComposerContext();
+	useEffect(() => editor.getEditorState().read(() => onBaseline($convertToMarkdownString(TRANSFORMERS))), [editor, onBaseline]);
+	return null;
+}
+/** Fills a new editor from `value`, read as Markdown or as HTML. */
+const startFrom = (value, format) => (editor) => {
+	if (format === "markdown") return $convertFromMarkdownString(value, TRANSFORMERS);
+	$getRoot().select();
+	$insertNodes($generateNodesFromDOM(editor, new DOMParser().parseFromString(value, "text/html")));
+};
+/** A rich text field that reads and reports Markdown, such as a ticket's description, with a formatting toolbar. */
+function MarkdownEditor({ value, format = "markdown", onChange, label, placeholder, fill = false, disabled = false, autoFocus = false, onBaseline }) {
+	const narrow = fill === "wide" ? {
+		box: "@max-[40rem]:flex-none @max-[40rem]:overflow-visible",
+		area: "@max-[40rem]:flex-none @max-[40rem]:overflow-visible",
+		text: "@max-[40rem]:min-h-44",
+		toolbar: "@max-[40rem]:sticky @max-[40rem]:top-0 @max-[40rem]:z-10 @max-[40rem]:rounded-t-lg @max-[40rem]:bg-base-100"
+	} : {
+		box: "",
+		area: "",
+		text: "",
+		toolbar: ""
+	};
+	const onEdit = useCallback((state) => state.read(() => onChange($convertToMarkdownString(TRANSFORMERS))), [onChange]);
+	return /* @__PURE__ */ jsxs(LexicalComposer, {
+		initialConfig: {
+			namespace: "description",
+			theme,
+			onError: (error) => {
+				throw error;
+			},
+			nodes: [
+				HeadingNode,
+				QuoteNode,
+				ListNode,
+				ListItemNode,
+				CodeNode,
+				LinkNode
+			],
+			editorState: startFrom(value, format)
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-description-editor": true,
+				className: `border-base-300 bg-base-100 focus-within:border-primary/60 focus-within:ring-primary/15 flex flex-col overflow-hidden rounded-lg border transition-[border-color,box-shadow] focus-within:ring-3 ${fill ? `min-h-0 flex-1 ${narrow.box}` : ""}`,
+				children: [/* @__PURE__ */ jsx(MarkdownToolbar, { className: narrow.toolbar }), /* @__PURE__ */ jsx("div", {
+					className: `relative overflow-y-auto ${fill ? `min-h-0 flex-1 ${narrow.area}` : "max-h-[min(24rem,45dvh)]"}`,
+					children: /* @__PURE__ */ jsx(RichTextPlugin, {
+						contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
+							"aria-label": label,
+							className: `px-4 py-3 text-[15px] leading-relaxed outline-none ${fill ? `min-h-full ${narrow.text}` : "min-h-44"}`
+						}),
+						placeholder: /* @__PURE__ */ jsx("div", {
+							className: "text-base-700 pointer-events-none absolute top-3 left-4 text-[15px] leading-relaxed",
+							children: placeholder
+						}),
+						ErrorBoundary: LexicalErrorBoundary
+					})
+				})]
+			}),
+			autoFocus && /* @__PURE__ */ jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }),
+			/* @__PURE__ */ jsx(HistoryPlugin, {}),
+			/* @__PURE__ */ jsx(ListPlugin, {}),
+			/* @__PURE__ */ jsx(LinkPlugin, {}),
+			/* @__PURE__ */ jsx(ListTabPlugin, {}),
+			/* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }),
+			/* @__PURE__ */ jsx(MarkdownPastePlugin, {}),
+			/* @__PURE__ */ jsx(EditablePlugin, { editable: !disabled }),
+			onBaseline && /* @__PURE__ */ jsx(BaselinePlugin, { onBaseline }),
+			/* @__PURE__ */ jsx(OnChangePlugin, {
+				ignoreSelectionChange: true,
+				onChange: onEdit
+			})
+		]
+	});
+}
+export { MarkdownEditor };
+
+//# sourceMappingURL=MarkdownEditor.js.map

package/dist/forms/MarkdownEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.js","names":[],"sources":["../../src/forms/MarkdownEditor.tsx"],"sourcesContent":["// The Markdown editor: Lexical, formatting as you type and storing Markdown, under a light toolbar. \"- \" starts a\n// bullet list, \"1. \" a numbered list, \"# \" a heading and **bold** turns bold; pasted plain-text Markdown renders. It\n// opens HTML, as an older Azure DevOps description holds, as the nodes it stands for, and still reports Markdown.\n\nimport { CodeNode } from '@lexical/code';\nimport { $generateNodesFromDOM } from '@lexical/html';\nimport { LinkNode } from '@lexical/link';\nimport { $isListItemNode, ListItemNode, ListNode } from '@lexical/list';\nimport {\n    $convertFromMarkdownString,\n    $convertToMarkdownString,\n    $generateNodesFromMarkdownString,\n    TRANSFORMERS,\n} from '@lexical/markdown';\nimport { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';\nimport { LexicalComposer } from '@lexical/react/LexicalComposer';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin';\nimport { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';\nimport { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text';\nimport {\n    $findMatchingParent,\n    $getRoot,\n    $getSelection,\n    $insertNodes,\n    $isParagraphNode,\n    $isRangeSelection,\n    COMMAND_PRIORITY_EDITOR,\n    COMMAND_PRIORITY_HIGH,\n    INDENT_CONTENT_COMMAND,\n    KEY_TAB_COMMAND,\n    OUTDENT_CONTENT_COMMAND,\n    PASTE_COMMAND,\n} from 'lexical';\nimport type { EditorState, LexicalEditor, LexicalNode } from 'lexical';\nimport { useCallback, useEffect } from 'react';\n\nimport type { RichTextFormat } from '../display/RichText';\nimport { MarkdownToolbar } from './MarkdownToolbar';\n\nconst theme = {\n    heading: {\n        h1: 'text-xl font-semibold mt-4 mb-1.5 first:mt-0',\n        h2: 'text-lg font-semibold mt-4 mb-1 first:mt-0',\n        h3: 'font-semibold mt-3 mb-1 first:mt-0',\n    },\n    list: {\n        ul: 'list-disc ps-6 my-1.5',\n        ol: 'list-decimal ps-6 my-1.5',\n        listitem: 'my-0.5 marker:text-base-500',\n        nested: { listitem: 'list-none' },\n    },\n    paragraph: 'my-1.5 first:mt-0',\n    quote: 'border-s-2 border-base-300 ps-3 text-base-700 my-1.5',\n    code: 'block rounded-md bg-base-200 p-3 font-mono text-xs my-1.5 whitespace-pre-wrap',\n    link: 'text-(--lar-info-text) underline underline-offset-2',\n    text: {\n        bold: 'font-semibold',\n        italic: 'italic',\n        strikethrough: 'line-through',\n        code: 'rounded bg-base-200 px-1 font-mono text-[0.85em]',\n    },\n};\n\nconst LOOKS_LIKE_MARKDOWN = /(^|\\n)\\s*([-*+] |\\d+[.)] |#{1,6} |> |```)|\\*\\*[^*]+\\*\\*|\\[[^\\]]+\\]\\([^)]+\\)/;\n\n/** Puts pasted `nodes` in place of the selected text. Ones starting with a heading, list, quote or code block go in after\n *  the block the caret is in, unless it is empty, as inserted at the caret the first block's text would join that block's. */\nfunction $insertPasted(nodes: LexicalNode[]) {\n    const selection = $getSelection();\n\n    if ($isRangeSelection(selection)) selection.removeText();\n\n    const block = $isRangeSelection(selection) ? selection.anchor.getNode().getTopLevelElement() : null;\n    const first = nodes[0];\n\n    if (!block || !first || $isParagraphNode(first) || block.getTextContentSize() === 0) return $insertNodes(nodes);\n\n    let last: LexicalNode = block;\n\n    for (const node of nodes) last = last.insertAfter(node);\n    last.selectEnd();\n}\n\n/** Plain text that reads as Markdown, pasted without HTML, goes in as the nodes it stands for. */\nfunction MarkdownPastePlugin() {\n    const [editor] = useLexicalComposerContext();\n\n    useEffect(\n        () =>\n            editor.registerCommand(\n                PASTE_COMMAND,\n                (event) => {\n                    const data = 'clipboardData' in event ? event.clipboardData : null;\n\n                    if (!data || data.types.includes('text/html')) return false;\n\n                    const text = data.getData('text/plain');\n\n                    if (!LOOKS_LIKE_MARKDOWN.test(text)) return false;\n\n                    event.preventDefault();\n                    editor.update(() => $insertPasted($generateNodesFromMarkdownString(text, TRANSFORMERS)));\n\n                    return true;\n                },\n                COMMAND_PRIORITY_HIGH,\n            ),\n        [editor],\n    );\n\n    return null;\n}\n\n/** Tab nests the list item the selection is in, one deeper than the item before it at most, and Shift+Tab lifts it back\n *  out. Where neither can change anything, as outside a list or on a top-level item, Tab is left to the browser, so it\n *  moves focus on rather than trapping it in the editor. */\nfunction ListTabPlugin() {\n    const [editor] = useLexicalComposerContext();\n\n    useEffect(\n        () =>\n            editor.registerCommand(\n                KEY_TAB_COMMAND,\n                (event) => {\n                    const selection = $getSelection();\n\n                    if (!$isRangeSelection(selection)) return false;\n\n                    const items = selection\n                        .getNodes()\n                        .map((node) => ($isListItemNode(node) ? node : $findMatchingParent(node, $isListItemNode)));\n                    const moves = (item: ListItemNode | null) =>\n                        item !== null && (event.shiftKey ? item.getIndent() > 0 : item.getPreviousSibling() !== null);\n\n                    if (!items.some(moves)) return false;\n\n                    event.preventDefault();\n\n                    return editor.dispatchCommand(\n                        event.shiftKey ? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND,\n                        undefined,\n                    );\n                },\n                COMMAND_PRIORITY_EDITOR,\n            ),\n        [editor],\n    );\n\n    return null;\n}\n\n/** Locks the text, as a disabled field does. */\nfunction EditablePlugin({ editable }: { editable: boolean }) {\n    const [editor] = useLexicalComposerContext();\n\n    useEffect(() => editor.setEditable(editable), [editor, editable]);\n\n    return null;\n}\n\n/** Reports the Markdown the editor makes of its starting text, which a check for changes compares against. */\nfunction BaselinePlugin({ onBaseline }: { onBaseline: (markdown: string) => void }) {\n    const [editor] = useLexicalComposerContext();\n\n    useEffect(\n        () => editor.getEditorState().read(() => onBaseline($convertToMarkdownString(TRANSFORMERS))),\n        [editor, onBaseline],\n    );\n\n    return null;\n}\n\n/** Fills a new editor from `value`, read as Markdown or as HTML. */\nconst startFrom = (value: string, format: RichTextFormat) => (editor: LexicalEditor) => {\n    if (format === 'markdown') return $convertFromMarkdownString(value, TRANSFORMERS);\n\n    $getRoot().select();\n    $insertNodes($generateNodesFromDOM(editor, new DOMParser().parseFromString(value, 'text/html')));\n};\n\ninterface MarkdownEditorProps {\n    /** The Markdown it starts from; later changes to it are ignored. */\n    value: string;\n    /** How `value` is written; the editor reports Markdown either way. */\n    format?: RichTextFormat;\n    onChange: (markdown: string) => void;\n    label: string;\n    placeholder: string;\n    /** Grows the editor into its parent's height, or, when 'wide', only while its container is 40rem wide or more and\n     *  otherwise with its text, uncapped, as its parent scrolls. Without it, it grows with its text up to a cap. */\n    fill?: boolean | 'wide';\n    disabled?: boolean;\n    autoFocus?: boolean;\n    /** Called with the Markdown the editor makes of `value`, before any edit. */\n    onBaseline?: (markdown: string) => void;\n}\n\n/** A rich text field that reads and reports Markdown, such as a ticket's description, with a formatting toolbar. */\nexport function MarkdownEditor({\n    value,\n    format = 'markdown',\n    onChange,\n    label,\n    placeholder,\n    fill = false,\n    disabled = false,\n    autoFocus = false,\n    onBaseline,\n}: MarkdownEditorProps) {\n    // Below 40rem a 'wide' fill gives way to the editor's text height, with no scroll area of its own. The toolbar then\n    // sticks to the top of the parent's scroll area, which needs the box to stop clipping, so the toolbar rounds its own\n    // corners instead.\n    const narrow =\n        fill === 'wide'\n            ? {\n                  box: '@max-[40rem]:flex-none @max-[40rem]:overflow-visible',\n                  area: '@max-[40rem]:flex-none @max-[40rem]:overflow-visible',\n                  text: '@max-[40rem]:min-h-44',\n                  toolbar:\n                      '@max-[40rem]:sticky @max-[40rem]:top-0 @max-[40rem]:z-10 @max-[40rem]:rounded-t-lg @max-[40rem]:bg-base-100',\n              }\n            : { box: '', area: '', text: '', toolbar: '' };\n    const onEdit = useCallback(\n        (state: EditorState) => state.read(() => onChange($convertToMarkdownString(TRANSFORMERS))),\n        [onChange],\n    );\n\n    return (\n        <LexicalComposer\n            initialConfig={{\n                namespace: 'description',\n                theme,\n                onError: (error) => {\n                    throw error;\n                },\n                nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, CodeNode, LinkNode],\n                editorState: startFrom(value, format),\n            }}\n        >\n            <div\n                data-description-editor\n                className={`border-base-300 bg-base-100 focus-within:border-primary/60 focus-within:ring-primary/15 flex flex-col overflow-hidden rounded-lg border transition-[border-color,box-shadow] focus-within:ring-3 ${fill ? `min-h-0 flex-1 ${narrow.box}` : ''}`}\n            >\n                <MarkdownToolbar className={narrow.toolbar} />\n                <div\n                    className={`relative overflow-y-auto ${fill ? `min-h-0 flex-1 ${narrow.area}` : 'max-h-[min(24rem,45dvh)]'}`}\n                >\n                    <RichTextPlugin\n                        contentEditable={\n                            <ContentEditable\n                                aria-label={label}\n                                className={`px-4 py-3 text-[15px] leading-relaxed outline-none ${fill ? `min-h-full ${narrow.text}` : 'min-h-44'}`}\n                            />\n                        }\n                        placeholder={\n                            <div className=\"text-base-700 pointer-events-none absolute top-3 left-4 text-[15px] leading-relaxed\">\n                                {placeholder}\n                            </div>\n                        }\n                        ErrorBoundary={LexicalErrorBoundary}\n                    />\n                </div>\n            </div>\n            {autoFocus && <AutoFocusPlugin defaultSelection=\"rootEnd\" />}\n            <HistoryPlugin />\n            <ListPlugin />\n            <LinkPlugin />\n            <ListTabPlugin />\n            <MarkdownShortcutPlugin transformers={TRANSFORMERS} />\n            <MarkdownPastePlugin />\n            <EditablePlugin editable={!disabled} />\n            {onBaseline && <BaselinePlugin onBaseline={onBaseline} />}\n            <OnChangePlugin ignoreSelectionChange onChange={onEdit} />\n        </LexicalComposer>\n    );\n}\n"],"mappings":"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"}

package/dist/forms/MarkdownToolbar.js

@@ -0,0 +1,204 @@
+import { Button } from "../actions/Button.js";
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { applePlatform } from "../foundations/KeyboardShortcut.js";
+import { Popover } from "../overlays/Popover.js";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../overlays/Tooltip.js";
+import { useEffect, useRef, useState } from "react";
+import { BoldIcon, HeadingIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { $isLinkNode, $toggleLink, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
+import { $createParagraphNode, $getSelection, $isRangeSelection, $setSelection, FORMAT_TEXT_COMMAND } from "lexical";
+import { $setBlocksType } from "@lexical/selection";
+// src/forms/MarkdownToolbar.tsx
+const MOD = applePlatform ? "⌘" : "Ctrl+";
+const NONE = {
+	bold: false,
+	italic: false,
+	link: false,
+	block: "paragraph"
+};
+/** What the selection has on. */
+function readActive(state) {
+	return state.read(() => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return NONE;
+		const node = selection.anchor.getNode();
+		const top = node.getKey() === "root" ? null : node.getTopLevelElement();
+		const block = $isHeadingNode(top) ? "heading" : $isListNode(top) ? top.getListType() === "number" ? "number" : "bullet" : "paragraph";
+		return {
+			bold: selection.hasFormat("bold"),
+			italic: selection.hasFormat("italic"),
+			link: $isLinkNode(node.getParent()) || $isLinkNode(node),
+			block
+		};
+	});
+}
+/** A toolbar button; `quiet` keeps its tooltip shut, as while the field it opens would sit under it. Any other props,
+*  such as a popover trigger's, go on the button itself. */
+function ToolButton({ label, keys, on, icon, run, quiet = false, ...button }) {
+	const [tip, setTip] = useState(false);
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		open: tip && !quiet,
+		onOpenChange: (open) => setTip(open && !quiet),
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				...button,
+				"aria-label": label,
+				"aria-pressed": on,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: (event) => {
+					run();
+					button.onClick?.(event);
+				},
+				className: `focus-visible:ring-primary grid size-7 place-items-center rounded-md transition-colors outline-none focus-visible:ring-2 [&_svg]:size-4 ${on ? "bg-primary/10 text-primary" : "text-base-700 hover:bg-base-200 hover:text-base-content"}`,
+				children: icon
+			})
+		}), /* @__PURE__ */ jsxs(TooltipPopup, {
+			side: "bottom",
+			children: [label, keys && /* @__PURE__ */ jsx("span", {
+				className: "text-base-500 ms-2",
+				children: keys
+			})]
+		})]
+	});
+}
+/** The URL field Link opens, anchored under its button; `close` gets the URL to link, or null for none. A popover is a
+*  layer above the dialog, so Escape closes the field alone. */
+function LinkField({ open, close, children }) {
+	const labels = useDesignSystemLabels().editor;
+	const field = useRef(null);
+	const apply = () => close(field.current.value.trim() || null);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (opened) => !opened && close(null),
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			onClick: (event) => event.preventDefault(),
+			children
+		}), /* @__PURE__ */ jsx(Popover.Content, {
+			side: "bottom",
+			align: "start",
+			onCloseAutoFocus: (event) => event.preventDefault(),
+			onInput: (event) => event.stopPropagation(),
+			onChange: (event) => event.stopPropagation(),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("input", {
+					ref: field,
+					type: "url",
+					"aria-label": labels.linkUrl,
+					placeholder: labels.linkPlaceholder,
+					autoComplete: "off",
+					className: "border-base-300 bg-base-100 focus:border-primary/60 focus:ring-primary/15 h-7 w-56 max-w-full rounded-md border px-2 text-sm outline-none focus:ring-3",
+					onKeyDown: (event) => {
+						if (event.key !== "Enter") return;
+						event.preventDefault();
+						apply();
+					}
+				}), /* @__PURE__ */ jsx(Button, {
+					compact: true,
+					onClick: apply,
+					children: labels.apply
+				})]
+			})
+		})]
+	});
+}
+/** `className` adds to the bar's own classes. */
+function MarkdownToolbar({ className = "" }) {
+	const labels = useDesignSystemLabels().editor;
+	const [editor] = useLexicalComposerContext();
+	const [active, setActive] = useState(NONE);
+	const [linking, setLinking] = useState(null);
+	useEffect(() => editor.registerUpdateListener(({ editorState }) => setActive(readActive(editorState))), [editor]);
+	const heading = () => editor.update(() => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) $setBlocksType(selection, () => active.block === "heading" ? $createParagraphNode() : $createHeadingNode("h2"));
+	});
+	const list = (type) => {
+		if (active.block === type) editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+		else editor.dispatchCommand(type === "bullet" ? INSERT_UNORDERED_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND, void 0);
+	};
+	const link = () => {
+		if (active.link) return editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+		setLinking(editor.getEditorState().read(() => $getSelection()?.clone() ?? null));
+	};
+	const closeLink = (url) => {
+		const selection = linking;
+		setLinking(null);
+		if (url && selection) editor.update(() => {
+			$setSelection(selection.clone());
+			$toggleLink(url);
+		});
+		editor.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "toolbar",
+		"aria-label": labels.formatting,
+		className: `border-base-300/70 flex shrink-0 items-center gap-0.5 border-b px-2 py-1 ${className}`,
+		children: [
+			/* @__PURE__ */ jsx(ToolButton, {
+				label: labels.bold,
+				keys: `${MOD}B`,
+				on: active.bold,
+				icon: /* @__PURE__ */ jsx(BoldIcon, {}),
+				run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")
+			}),
+			/* @__PURE__ */ jsx(ToolButton, {
+				label: labels.italic,
+				keys: `${MOD}I`,
+				on: active.italic,
+				icon: /* @__PURE__ */ jsx(ItalicIcon, {}),
+				run: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "bg-base-300 mx-1 h-4 w-px"
+			}),
+			/* @__PURE__ */ jsx(ToolButton, {
+				label: labels.heading,
+				keys: "#",
+				on: active.block === "heading",
+				icon: /* @__PURE__ */ jsx(HeadingIcon, {}),
+				run: heading
+			}),
+			/* @__PURE__ */ jsx(ToolButton, {
+				label: labels.bulletedList,
+				keys: "-",
+				on: active.block === "bullet",
+				icon: /* @__PURE__ */ jsx(ListIcon, {}),
+				run: () => list("bullet")
+			}),
+			/* @__PURE__ */ jsx(ToolButton, {
+				label: labels.numberedList,
+				keys: "1.",
+				on: active.block === "number",
+				icon: /* @__PURE__ */ jsx(ListOrderedIcon, {}),
+				run: () => list("number")
+			}),
+			/* @__PURE__ */ jsx(LinkField, {
+				open: linking !== null,
+				close: closeLink,
+				children: /* @__PURE__ */ jsx(ToolButton, {
+					label: labels.link,
+					on: active.link,
+					icon: /* @__PURE__ */ jsx(LinkIcon, {}),
+					run: link,
+					quiet: linking !== null
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-base-700 ms-auto pe-1 text-[11px]",
+				children: labels.markdown
+			})
+		]
+	});
+}
+export { MarkdownToolbar };
+
+//# sourceMappingURL=MarkdownToolbar.js.map

package/dist/forms/MarkdownToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownToolbar.js","names":[],"sources":["../../src/forms/MarkdownToolbar.tsx"],"sourcesContent":["// The Markdown editor's toolbar: bold, italic, heading, bulleted list, numbered list and link, each pressed while\n// the selection has it. Link opens a URL field under the toolbar, as Electron has no window.prompt: Enter or Apply links\n// the selection, Escape, a click outside or an empty URL closes it with no link, and Escape leaves the dialog open. Its\n// tooltip stays shut while the field is open, so it covers none of it.\n\nimport { $isLinkNode, $toggleLink, TOGGLE_LINK_COMMAND } from '@lexical/link';\nimport {\n    $isListNode,\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    REMOVE_LIST_COMMAND,\n} from '@lexical/list';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $createHeadingNode, $isHeadingNode } from '@lexical/rich-text';\nimport { $setBlocksType } from '@lexical/selection';\nimport { $createParagraphNode, $getSelection, $isRangeSelection, $setSelection, FORMAT_TEXT_COMMAND } from 'lexical';\nimport type { BaseSelection, EditorState } from 'lexical';\nimport { BoldIcon, HeadingIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { applePlatform } from '../foundations/KeyboardShortcut';\nimport { Popover } from '../overlays/Popover';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '../overlays/Tooltip';\n\nconst MOD = applePlatform ? '⌘' : 'Ctrl+';\n\ntype Block = 'paragraph' | 'heading' | 'bullet' | 'number';\ninterface Active {\n    bold: boolean;\n    italic: boolean;\n    link: boolean;\n    block: Block;\n}\n\nconst NONE: Active = { bold: false, italic: false, link: false, block: 'paragraph' };\n\n/** What the selection has on. */\nfunction readActive(state: EditorState): Active {\n    return state.read(() => {\n        const selection = $getSelection();\n\n        if (!$isRangeSelection(selection)) return NONE;\n\n        const node = selection.anchor.getNode();\n        const top = node.getKey() === 'root' ? null : node.getTopLevelElement();\n        const block = $isHeadingNode(top)\n            ? 'heading'\n            : $isListNode(top)\n              ? top.getListType() === 'number'\n                  ? 'number'\n                  : 'bullet'\n              : 'paragraph';\n\n        return {\n            bold: selection.hasFormat('bold'),\n            italic: selection.hasFormat('italic'),\n            link: $isLinkNode(node.getParent()) || $isLinkNode(node),\n            block,\n        };\n    });\n}\n\n/** A toolbar button; `quiet` keeps its tooltip shut, as while the field it opens would sit under it. Any other props,\n *  such as a popover trigger's, go on the button itself. */\nfunction ToolButton({\n    label,\n    keys,\n    on,\n    icon,\n    run,\n    quiet = false,\n    ...button\n}: {\n    label: string;\n    keys?: string;\n    on: boolean;\n    icon: ReactNode;\n    run: () => void;\n    quiet?: boolean;\n} & ComponentProps<'button'>) {\n    // Held here, so a hover while quiet doesn't leave the tooltip to show once it no longer is.\n    const [tip, setTip] = useState(false);\n\n    return (\n        <Tooltip open={tip && !quiet} onOpenChange={(open) => setTip(open && !quiet)}>\n            <TooltipTrigger asChild>\n                {/* Pressing keeps the editor's selection: focus stays in the editor. */}\n                <button\n                    type=\"button\"\n                    {...button}\n                    aria-label={label}\n                    aria-pressed={on}\n                    onMouseDown={(event) => event.preventDefault()}\n                    onClick={(event) => {\n                        run();\n                        button.onClick?.(event);\n                    }}\n                    className={`focus-visible:ring-primary grid size-7 place-items-center rounded-md transition-colors outline-none focus-visible:ring-2 [&_svg]:size-4 ${on ? 'bg-primary/10 text-primary' : 'text-base-700 hover:bg-base-200 hover:text-base-content'}`}\n                >\n                    {icon}\n                </button>\n            </TooltipTrigger>\n            <TooltipPopup side=\"bottom\">\n                {label}\n                {keys && <span className=\"text-base-500 ms-2\">{keys}</span>}\n            </TooltipPopup>\n        </Tooltip>\n    );\n}\n\n/** The URL field Link opens, anchored under its button; `close` gets the URL to link, or null for none. A popover is a\n *  layer above the dialog, so Escape closes the field alone. */\nfunction LinkField({\n    open,\n    close,\n    children,\n}: {\n    open: boolean;\n    close: (url: string | null) => void;\n    children: ReactNode;\n}) {\n    const labels = useDesignSystemLabels().editor;\n    const field = useRef<HTMLInputElement>(null);\n    const apply = () => close(field.current!.value.trim() || null);\n\n    return (\n        <Popover open={open} onOpenChange={(opened) => !opened && close(null)}>\n            {/* The button opens the field itself, so the trigger's own toggle is turned off. */}\n            <Popover.Trigger asChild onClick={(event) => event.preventDefault()}>\n                {children}\n            </Popover.Trigger>\n            {/* Portalled, its events still reach the form in the React tree, which would count them as edits. */}\n            <Popover.Content\n                side=\"bottom\"\n                align=\"start\"\n                onCloseAutoFocus={(event) => event.preventDefault()}\n                onInput={(event) => event.stopPropagation()}\n                onChange={(event) => event.stopPropagation()}\n            >\n                <div className=\"flex items-center gap-1.5\">\n                    <input\n                        ref={field}\n                        type=\"url\"\n                        aria-label={labels.linkUrl}\n                        placeholder={labels.linkPlaceholder}\n                        autoComplete=\"off\"\n                        className=\"border-base-300 bg-base-100 focus:border-primary/60 focus:ring-primary/15 h-7 w-56 max-w-full rounded-md border px-2 text-sm outline-none focus:ring-3\"\n                        onKeyDown={(event) => {\n                            if (event.key !== 'Enter') return;\n\n                            event.preventDefault();\n                            apply();\n                        }}\n                    />\n                    <Button compact onClick={apply}>\n                        {labels.apply}\n                    </Button>\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n\n/** `className` adds to the bar's own classes. */\nexport function MarkdownToolbar({ className = '' }: { className?: string }) {\n    const labels = useDesignSystemLabels().editor;\n    const [editor] = useLexicalComposerContext();\n    const [active, setActive] = useState(NONE);\n    // The selection Link opened its field on, which the field's focus would otherwise lose.\n    const [linking, setLinking] = useState<BaseSelection | null>(null);\n\n    useEffect(() => editor.registerUpdateListener(({ editorState }) => setActive(readActive(editorState))), [editor]);\n\n    const heading = () =>\n        editor.update(() => {\n            const selection = $getSelection();\n\n            if ($isRangeSelection(selection))\n                $setBlocksType(selection, () =>\n                    active.block === 'heading' ? $createParagraphNode() : $createHeadingNode('h2'),\n                );\n        });\n    const list = (type: 'bullet' | 'number') => {\n        if (active.block === type) editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        else\n            editor.dispatchCommand(\n                type === 'bullet' ? INSERT_UNORDERED_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND,\n                undefined,\n            );\n    };\n    const link = () => {\n        if (active.link) return editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n\n        setLinking(editor.getEditorState().read(() => $getSelection()?.clone() ?? null));\n    };\n    const closeLink = (url: string | null) => {\n        const selection = linking;\n\n        setLinking(null);\n\n        if (url && selection)\n            editor.update(() => {\n                $setSelection(selection.clone());\n                $toggleLink(url);\n            });\n\n        editor.focus();\n    };\n\n    return (\n        <div\n            role=\"toolbar\"\n            aria-label={labels.formatting}\n            className={`border-base-300/70 flex shrink-0 items-center gap-0.5 border-b px-2 py-1 ${className}`}\n        >\n            <ToolButton\n                label={labels.bold}\n                keys={`${MOD}B`}\n                on={active.bold}\n                icon={<BoldIcon />}\n                run={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}\n            />\n            <ToolButton\n                label={labels.italic}\n                keys={`${MOD}I`}\n                on={active.italic}\n                icon={<ItalicIcon />}\n                run={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}\n            />\n            <span aria-hidden=\"true\" className=\"bg-base-300 mx-1 h-4 w-px\" />\n            <ToolButton\n                label={labels.heading}\n                keys=\"#\"\n                on={active.block === 'heading'}\n                icon={<HeadingIcon />}\n                run={heading}\n            />\n            <ToolButton\n                label={labels.bulletedList}\n                keys=\"-\"\n                on={active.block === 'bullet'}\n                icon={<ListIcon />}\n                run={() => list('bullet')}\n            />\n            <ToolButton\n                label={labels.numberedList}\n                keys=\"1.\"\n                on={active.block === 'number'}\n                icon={<ListOrderedIcon />}\n                run={() => list('number')}\n            />\n            <LinkField open={linking !== null} close={closeLink}>\n                <ToolButton\n                    label={labels.link}\n                    on={active.link}\n                    icon={<LinkIcon />}\n                    run={link}\n                    quiet={linking !== null}\n                />\n            </LinkField>\n            <span className=\"text-base-700 ms-auto pe-1 text-[11px]\">{labels.markdown}</span>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/forms/OptionSelect.d.ts

@@ -1,21 +1,42 @@
-interface LoadedOptionSelectProps<Value extends string> {
-  disabled?: boolean;
+import { SelectProps } from "./Select.js";
+import { ReactNode, Ref } from "react";
+export interface OptionSelectOption<Value extends string = string> {
   label: string;
+  value: Value;
+  /** Disabled options stay visible but cannot be chosen. */
+  disabled?: boolean;
+  icon?: ReactNode;
+  /** A lar-brand app hue that colours the icon, such as a kind's. */
+  hue?: number;
+}
+interface LoadedOptionSelectProps<Value extends string> extends Omit<SelectProps, 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'children' | 'className' | 'size' | 'variant'> {
+  /** The select's accessible name; leave it out when a label names the select by its `id`. */
+  label?: string;
   loading?: false;
   onChange: (value: Value) => void;
-  /** Disabled options stay visible but cannot be chosen. */
-  options: readonly {
-    label: string;
-    value: Value;
-    disabled?: boolean;
-  }[];
-  value: Value;
+  options: readonly OptionSelectOption<Value>[];
+  /** An empty value shows the placeholder, or `none`. */
+  value: Value | '';
+  /** The name of the option that empties the value, which `onChange` hears as ''. */
+  none?: string;
+  /** A form field's name: the select gives its form the value in a hidden field, and fires input on that field once
+   *  a pick has rendered, as Select is a button over a listbox that fires no input event of its own. */
+  name?: string;
+  /** A pick writes at once, so a letter key on the closed control doesn't pick: the Select's typeahead only works
+   *  once its list is open. */
+  writesOnPick?: boolean;
+  /** Busy rather than disabled while a pick it made saves: it keeps the focus and ignores picks. */
+  busy?: boolean;
+  /** `setting` is a settings row's 11rem dropdown; a `field` fills its container. */
+  presentation?: 'field' | 'setting';
+  ref?: Ref<HTMLButtonElement>;
 }
 interface LoadingOptionSelectProps {
   label: string;
   loading: true;
 }
 type OptionSelectProps<Value extends string> = LoadedOptionSelectProps<Value> | LoadingOptionSelectProps;
+/** A Select over plain options, each with an optional icon; while they load, a control-shaped skeleton. */
 export declare function OptionSelect<Value extends string>(props: OptionSelectProps<Value>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=OptionSelect.d.ts.map

package/dist/forms/OptionSelect.js

@@ -1,27 +1,67 @@
 import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
 import { Select, SelectItem } from "./Select.js";
-import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
 // src/forms/OptionSelect.tsx
+const NONE = "__none";
+/** Marks a letter key as handled, which the Select's trigger takes as leaving its typeahead out. Space and arrows still
+*  open the list. */
+const withoutClosedTypeahead = (event) => {
+	if (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.altKey && !event.metaKey) event.preventDefault();
+};
+/** A Select over plain options, each with an optional icon; while they load, a control-shaped skeleton. */
 function OptionSelect(props) {
+	const field = useRef(null);
 	if (props.loading) return /* @__PURE__ */ jsx(SkeletonLoader, {
 		label: props.label,
 		children: /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "control" })
 	});
-	const { disabled, label, onChange, options, value } = props;
-	return /* @__PURE__ */ jsx(Select, {
-		"aria-label": label,
-		disabled,
-		value,
-		onValueChange: (next) => {
-			const option = options.find((candidate) => candidate.value === next);
-			if (option) onChange(option.value);
-		},
-		children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+	const { label, loading: _loading, onChange, options, value, none, name, writesOnPick, busy = false, presentation = "field", ...select } = props;
+	const pick = (next) => {
+		if (busy) return;
+		if (none && next === NONE) {
+			change(() => onChange(""));
+			return;
+		}
+		const option = options.find((candidate) => candidate.value === next);
+		if (option) change(() => onChange(option.value));
+	};
+	const change = (write) => {
+		if (!name) return write();
+		flushSync(write);
+		field.current?.dispatchEvent(new Event("input", { bubbles: true }));
+	};
+	const control = /* @__PURE__ */ jsxs(Fragment$1, { children: [name && /* @__PURE__ */ jsx("input", {
+		ref: field,
+		type: "hidden",
+		name,
+		value
+	}), /* @__PURE__ */ jsxs(Select, {
+		...select,
+		...label !== void 0 && { "aria-label": label },
+		...writesOnPick && { onKeyDown: withoutClosedTypeahead },
+		...busy && { "aria-disabled": true },
+		value: value || (none ? NONE : ""),
+		onValueChange: pick,
+		children: [none && /* @__PURE__ */ jsx(SelectItem, {
+			value: NONE,
+			children: none
+		}), options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
 			value: option.value,
 			disabled: option.disabled,
+			...option.icon !== void 0 && {
+				icon: option.icon,
+				iconHue: option.hue,
+				textValue: option.label
+			},
 			children: option.label
-		}, option.value))
-	});
+		}, option.value))]
+	})] });
+	return presentation === "setting" ? /* @__PURE__ */ jsx("span", {
+		className: "block w-44 max-w-full",
+		children: control
+	}) : control;
 }
 export { OptionSelect };
 

package/dist/forms/OptionSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionSelect.js","names":[],"sources":["../../src/forms/OptionSelect.tsx"],"sourcesContent":["import { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Select, SelectItem } from './Select';\n\ninterface LoadedOptionSelectProps<Value extends string> {\n    disabled?: boolean;\n    label: string;\n    loading?: false;\n    onChange: (value: Value) => void;\n    /** Disabled options stay visible but cannot be chosen. */\n    options: readonly { label: string; value: Value; disabled?: boolean }[];\n    value: Value;\n}\n\ninterface LoadingOptionSelectProps {\n    label: string;\n    loading: true;\n}\n\ntype OptionSelectProps<Value extends string> = LoadedOptionSelectProps<Value> | LoadingOptionSelectProps;\n\nexport function OptionSelect<Value extends string>(props: OptionSelectProps<Value>) {\n    if (props.loading)\n        return (\n            <SkeletonLoader label={props.label}>\n                <SkeletonLoader.Shape presentation=\"control\" />\n            </SkeletonLoader>\n        );\n\n    const { disabled, label, onChange, options, value } = props;\n\n    return (\n        <Select\n            aria-label={label}\n            disabled={disabled}\n            value={value}\n            onValueChange={(next) => {\n                const option = options.find((candidate) => candidate.value === next);\n\n                if (option) onChange(option.value);\n            }}\n        >\n            {options.map((option) => (\n                <SelectItem key={option.value} value={option.value} disabled={option.disabled}>\n                    {option.label}\n                </SelectItem>\n            ))}\n        </Select>\n    );\n}\n"],"mappings":";;;;AAoBA,SAAgB,aAAmC,OAAiC;CAChF,IAAI,MAAM,SACN,OACI,oBAAC,gBAAD;EAAgB,OAAO,MAAM;EACzB,UAAA,oBAAC,eAAe,OAAhB,EAAsB,cAAa,UAAW,CAAA;CAClC,CAAA;CAGxB,MAAM,EAAE,UAAU,OAAO,UAAU,SAAS,UAAU;CAEtD,OACI,oBAAC,QAAD;EACI,cAAY;EACF;EACH;EACP,gBAAgB,SAAS;GACrB,MAAM,SAAS,QAAQ,MAAM,cAAc,UAAU,UAAU,IAAI;GAEnE,IAAI,QAAQ,SAAS,OAAO,KAAK;EACrC;EAEC,UAAA,QAAQ,KAAK,WACV,oBAAC,YAAD;GAA+B,OAAO,OAAO;GAAO,UAAU,OAAO;GAChE,UAAA,OAAO;EACA,GAFK,OAAO,KAEZ,CACf;CACG,CAAA;AAEhB"}
+{"version":3,"file":"OptionSelect.js","names":[],"sources":["../../src/forms/OptionSelect.tsx"],"sourcesContent":["import { type KeyboardEvent, type ReactNode, type Ref, useRef } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Select, SelectItem, type SelectProps } from './Select';\n\nconst NONE = '__none';\n\nexport interface OptionSelectOption<Value extends string = string> {\n    label: string;\n    value: Value;\n    /** Disabled options stay visible but cannot be chosen. */\n    disabled?: boolean;\n    icon?: ReactNode;\n    /** A lar-brand app hue that colours the icon, such as a kind's. */\n    hue?: number;\n}\n\ninterface LoadedOptionSelectProps<Value extends string> extends Omit<\n    SelectProps,\n    'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'children' | 'className' | 'size' | 'variant'\n> {\n    /** The select's accessible name; leave it out when a label names the select by its `id`. */\n    label?: string;\n    loading?: false;\n    onChange: (value: Value) => void;\n    options: readonly OptionSelectOption<Value>[];\n    /** An empty value shows the placeholder, or `none`. */\n    value: Value | '';\n    /** The name of the option that empties the value, which `onChange` hears as ''. */\n    none?: string;\n    /** A form field's name: the select gives its form the value in a hidden field, and fires input on that field once\n     *  a pick has rendered, as Select is a button over a listbox that fires no input event of its own. */\n    name?: string;\n    /** A pick writes at once, so a letter key on the closed control doesn't pick: the Select's typeahead only works\n     *  once its list is open. */\n    writesOnPick?: boolean;\n    /** Busy rather than disabled while a pick it made saves: it keeps the focus and ignores picks. */\n    busy?: boolean;\n    /** `setting` is a settings row's 11rem dropdown; a `field` fills its container. */\n    presentation?: 'field' | 'setting';\n    ref?: Ref<HTMLButtonElement>;\n}\n\ninterface LoadingOptionSelectProps {\n    label: string;\n    loading: true;\n}\n\ntype OptionSelectProps<Value extends string> = LoadedOptionSelectProps<Value> | LoadingOptionSelectProps;\n\n/** Marks a letter key as handled, which the Select's trigger takes as leaving its typeahead out. Space and arrows still\n *  open the list. */\nconst withoutClosedTypeahead = (event: KeyboardEvent) => {\n    if (event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.altKey && !event.metaKey)\n        event.preventDefault();\n};\n\n/** A Select over plain options, each with an optional icon; while they load, a control-shaped skeleton. */\nexport function OptionSelect<Value extends string>(props: OptionSelectProps<Value>) {\n    const field = useRef<HTMLInputElement>(null);\n\n    if (props.loading)\n        return (\n            <SkeletonLoader label={props.label}>\n                <SkeletonLoader.Shape presentation=\"control\" />\n            </SkeletonLoader>\n        );\n\n    const {\n        label,\n        loading: _loading,\n        onChange,\n        options,\n        value,\n        none,\n        name,\n        writesOnPick,\n        busy = false,\n        presentation = 'field',\n        ...select\n    } = props;\n    const pick = (next: string) => {\n        if (busy) return;\n\n        if (none && next === NONE) {\n            change(() => onChange('' as Value));\n\n            return;\n        }\n\n        const option = options.find((candidate) => candidate.value === next);\n\n        if (option) change(() => onChange(option.value));\n    };\n    const change = (write: () => void) => {\n        if (!name) return write();\n\n        flushSync(write);\n        field.current?.dispatchEvent(new Event('input', { bubbles: true }));\n    };\n\n    const control = (\n        <>\n            {name && <input ref={field} type=\"hidden\" name={name} value={value} />}\n            <Select\n                {...select}\n                {...(label !== undefined && { 'aria-label': label })}\n                {...(writesOnPick && { onKeyDown: withoutClosedTypeahead })}\n                {...(busy && { 'aria-disabled': true })}\n                value={value || (none ? NONE : '')}\n                onValueChange={pick}\n            >\n                {none && <SelectItem value={NONE}>{none}</SelectItem>}\n                {options.map((option) => (\n                    <SelectItem\n                        key={option.value}\n                        value={option.value}\n                        disabled={option.disabled}\n                        {...(option.icon !== undefined && {\n                            icon: option.icon,\n                            iconHue: option.hue,\n                            textValue: option.label,\n                        })}\n                    >\n                        {option.label}\n                    </SelectItem>\n                ))}\n            </Select>\n        </>\n    );\n\n    return presentation === 'setting' ? <span className=\"block w-44 max-w-full\">{control}</span> : control;\n}\n"],"mappings":";;;;;;AAMA,MAAM,OAAO;;;AA+Cb,MAAM,0BAA0B,UAAyB;CACrD,IAAI,MAAM,IAAI,WAAW,KAAK,MAAM,QAAQ,OAAO,CAAC,MAAM,WAAW,CAAC,MAAM,UAAU,CAAC,MAAM,SACzF,MAAM,eAAe;AAC7B;;AAGA,SAAgB,aAAmC,OAAiC;CAChF,MAAM,QAAQ,OAAyB,IAAI;CAE3C,IAAI,MAAM,SACN,OACI,oBAAC,gBAAD;EAAgB,OAAO,MAAM;EACzB,UAAA,oBAAC,eAAe,OAAhB,EAAsB,cAAa,UAAW,CAAA;CAClC,CAAA;CAGxB,MAAM,EACF,OACA,SAAS,UACT,UACA,SACA,OACA,MACA,MACA,cACA,OAAO,OACP,eAAe,SACf,GAAG,WACH;CACJ,MAAM,QAAQ,SAAiB;EAC3B,IAAI,MAAM;EAEV,IAAI,QAAQ,SAAS,MAAM;GACvB,aAAa,SAAS,EAAW,CAAC;GAElC;EACJ;EAEA,MAAM,SAAS,QAAQ,MAAM,cAAc,UAAU,UAAU,IAAI;EAEnE,IAAI,QAAQ,aAAa,SAAS,OAAO,KAAK,CAAC;CACnD;CACA,MAAM,UAAU,UAAsB;EAClC,IAAI,CAAC,MAAM,OAAO,MAAM;EAExB,UAAU,KAAK;EACf,MAAM,SAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;CACtE;CAEA,MAAM,UACF,qBAAA,YAAA,EAAA,UAAA,CACK,QAAQ,oBAAC,SAAD;EAAO,KAAK;EAAO,MAAK;EAAe;EAAa;CAAQ,CAAA,GACrE,qBAAC,QAAD;EACI,GAAI;EACJ,GAAK,UAAU,KAAA,KAAa,EAAE,cAAc,MAAM;EAClD,GAAK,gBAAgB,EAAE,WAAW,uBAAuB;EACzD,GAAK,QAAQ,EAAE,iBAAiB,KAAK;EACrC,OAAO,UAAU,OAAO,OAAO;EAC/B,eAAe;EANnB,UAAA,CAQK,QAAQ,oBAAC,YAAD;GAAY,OAAO;GAAO,UAAA;EAAiB,CAAA,GACnD,QAAQ,KAAK,WACV,oBAAC,YAAD;GAEI,OAAO,OAAO;GACd,UAAU,OAAO;GACjB,GAAK,OAAO,SAAS,KAAA,KAAa;IAC9B,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,WAAW,OAAO;GACtB;GAEC,UAAA,OAAO;EACA,GAVH,OAAO,KAUJ,CACf,CACG;CACV,CAAA,CAAA,EAAA,CAAA;CAGN,OAAO,iBAAiB,YAAY,oBAAC,QAAD;EAAM,WAAU;EAAyB,UAAA;CAAc,CAAA,IAAI;AACnG"}

package/dist/forms/Select.d.ts

@@ -1,6 +1,9 @@
 import { SelectItemProps, SelectProps } from "@ninna-ui/forms";
 type SelectProps$1 = Omit<SelectProps, 'fullWidth'>;
 declare const Select$1: import("react").ForwardRefExoticComponent<SelectProps$1 & import("react").RefAttributes<HTMLButtonElement>>;
-declare const SelectItem$1: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+/** An option of the Select; its `icon` takes `iconHue`, a lar-brand app hue at full strength, when given. */
+declare const SelectItem$1: import("react").ForwardRefExoticComponent<SelectItemProps & {
+  iconHue?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export { Select$1 as Select, SelectItem$1 as SelectItem, SelectProps$1 as SelectProps };
 //# sourceMappingURL=Select.d.ts.map

package/dist/forms/Select.js

@@ -15,7 +15,8 @@ const Select$1 = forwardRef(({ size = formControlDefaults.size, variant = formCo
 	className: `${variant === "filled" ? formControlClasses : ""} [&>span:first-child]:truncate ${className ?? ""}`
 }));
 Select$1.displayName = "Select";
-const SelectItem$1 = forwardRef(({ icon, children, ...props }, ref) => /* @__PURE__ */ jsx(SelectItem, {
+/** An option of the Select; its `icon` takes `iconHue`, a lar-brand app hue at full strength, when given. */
+const SelectItem$1 = forwardRef(({ icon, iconHue, children, ...props }, ref) => /* @__PURE__ */ jsx(SelectItem, {
 	ref,
 	...props,
 	children: icon ? /* @__PURE__ */ jsxs("span", {
@@ -23,6 +24,7 @@ const SelectItem$1 = forwardRef(({ icon, children, ...props }, ref) => /* @__PUR
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "size-4 shrink-0 [&>svg]:size-full",
+			style: iconHue === void 0 ? void 0 : { color: `oklch(0.62 0.15 ${iconHue})` },
 			children: icon
 		}), /* @__PURE__ */ jsx("span", {
 			className: "truncate",