@bettercms-ai/kit 0.1.1 → 1.0.0

package/controls/rich-text/toolbar.d.ts

@@ -0,0 +1,85 @@
+/**
+ * RICH TEXT · the field toolbar (V2 HEAD controls/rich-text/toolbar.tsx, production order):
+ *   Style ▾ | B I U S | • 1. | Link, Clear formatting, Comment | ▾ more | + Insert   ·····   Markdown · Open full editor
+ * The overflow is a chevron next to the formatting, never a second "⋯" (the field's label row owns the one ⋯ menu).
+ * It takes no room at rest (h-0, inert, aria-hidden) and slides open to 32px when the field is in use. Items fold into
+ * "More formatting options" as the field narrows. A control whose element the field does not accept is not drawn.
+ */
+import * as React from "react";
+import { type CatalogItem } from "./catalog";
+import type { RichTextFeature } from "./codec";
+export interface Fmt {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    ul: boolean;
+    ol: boolean;
+    /** lower-case tag of the caret's top-level block, or "island" */
+    block: string;
+    hasSel: boolean;
+    onLink: boolean;
+}
+export declare const EMPTY_FMT: Fmt;
+export type MarkCmd = "bold" | "italic" | "underline" | "strikeThrough";
+export declare const MARK_FEATURE: Record<MarkCmd, RichTextFeature>;
+export declare const STYLES: {
+    tag: string;
+    label: string;
+    short: string;
+    icon: React.ReactNode;
+}[];
+/** The block styles a field accepts (Text always). */
+export declare const stylesFor: (allows: (f: RichTextFeature) => boolean) => {
+    tag: string;
+    label: string;
+    short: string;
+    icon: React.ReactNode;
+}[];
+export declare function ToolButton({ label, tip, icon, onClick, active, disabled, shortcut, children, className, }: {
+    label: string;
+    tip?: string;
+    icon: React.ReactNode;
+    onClick?: () => void;
+    active?: boolean;
+    disabled?: boolean;
+    shortcut?: string;
+    children?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** "Block style" dropdown. Compact trigger: Text / H1…H6 / Quote. */
+export declare function StyleMenu({ block, styles, onPick, onOpenChange, disabled, className, }: {
+    block: string;
+    styles: typeof STYLES;
+    onPick: (tag: string) => void;
+    onOpenChange?: (o: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FormatToolbar({ open, sticky, stickyTop, width, dense, fmt, md, allows, hideFullscreen, insertOpen, setInsertOpen, onMenuOpen, onStyle, onMark, onList, onLink, onClear, onComment, onInlineCode, onCodeBlock, onInsert, keepFocusOnInsertClose, onFullscreen, onMarkdown, saveSel, }: {
+    open: boolean;
+    sticky: boolean;
+    stickyTop?: number;
+    width: number;
+    dense: boolean;
+    fmt: Fmt;
+    md: boolean;
+    allows: (f: RichTextFeature) => boolean;
+    hideFullscreen?: boolean;
+    insertOpen: boolean;
+    setInsertOpen: (o: boolean) => void;
+    onMenuOpen: (name: "style" | "more", o: boolean) => void;
+    onStyle: (tag: string) => void;
+    onMark: (cmd: MarkCmd) => void;
+    onList: (kind: "ul" | "ol") => void;
+    onLink: () => void;
+    onClear: () => void;
+    onComment?: () => void;
+    onInlineCode: () => void;
+    onCodeBlock: () => void;
+    onInsert: (it: CatalogItem) => void;
+    keepFocusOnInsertClose: () => boolean;
+    onFullscreen: () => void;
+    onMarkdown: () => void;
+    saveSel: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/controls/rich-text/toolbar.js

@@ -0,0 +1,338 @@
+import { cn } from "../../lib/cn.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverTrigger, Tooltip } from "../../ui/overlay.js";
+import { InsertMenuContent } from "./catalog.js";
+import "react";
+import { IconArrowsMaximize, IconBlockquote, IconBold, IconCheck, IconChevronDown, IconClearFormatting, IconCode, IconH1, IconH2, IconH3, IconH4, IconH5, IconH6, IconItalic, IconLink, IconList, IconListNumbers, IconMarkdown, IconMarkdownOff, IconMessage, IconPilcrow, IconPlus, IconStrikethrough, IconTerminal2, IconUnderline } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/controls/rich-text/toolbar.tsx
+var EMPTY_FMT = {
+	bold: false,
+	italic: false,
+	underline: false,
+	strike: false,
+	ul: false,
+	ol: false,
+	block: "p",
+	hasSel: false,
+	onLink: false
+};
+var MARK_FEATURE = {
+	bold: "bold",
+	italic: "italic",
+	underline: "underline",
+	strikeThrough: "strike"
+};
+var STYLES = [
+	{
+		tag: "p",
+		label: "Text",
+		short: "Text",
+		icon: /* @__PURE__ */ jsx(IconPilcrow, { stroke: 1.5 })
+	},
+	{
+		tag: "h1",
+		label: "Heading 1",
+		short: "H1",
+		icon: /* @__PURE__ */ jsx(IconH1, { stroke: 1.5 })
+	},
+	{
+		tag: "h2",
+		label: "Heading 2",
+		short: "H2",
+		icon: /* @__PURE__ */ jsx(IconH2, { stroke: 1.5 })
+	},
+	{
+		tag: "h3",
+		label: "Heading 3",
+		short: "H3",
+		icon: /* @__PURE__ */ jsx(IconH3, { stroke: 1.5 })
+	},
+	{
+		tag: "h4",
+		label: "Heading 4",
+		short: "H4",
+		icon: /* @__PURE__ */ jsx(IconH4, { stroke: 1.5 })
+	},
+	{
+		tag: "h5",
+		label: "Heading 5",
+		short: "H5",
+		icon: /* @__PURE__ */ jsx(IconH5, { stroke: 1.5 })
+	},
+	{
+		tag: "h6",
+		label: "Heading 6",
+		short: "H6",
+		icon: /* @__PURE__ */ jsx(IconH6, { stroke: 1.5 })
+	},
+	{
+		tag: "blockquote",
+		label: "Quote",
+		short: "Quote",
+		icon: /* @__PURE__ */ jsx(IconBlockquote, { stroke: 1.5 })
+	}
+];
+/** The block styles a field accepts (Text always). */
+var stylesFor = (allows) => STYLES.filter((s) => s.tag === "p" || allows(s.tag));
+var keepCaret = (e) => e.preventDefault();
+function ToolButton({ label, tip, icon, onClick, active, disabled, shortcut, children, className }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tip ?? label,
+		shortcut,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": label,
+			"aria-pressed": active,
+			"aria-disabled": disabled || void 0,
+			onMouseDown: keepCaret,
+			onClick: () => !disabled && onClick?.(),
+			className: cn("flex h-7 min-w-7 shrink-0 items-center justify-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg [&_svg]:size-4", active && "bg-kit-selected text-kit-fg", disabled && "opacity-40 hover:bg-transparent hover:text-kit-fg-2", className),
+			children: [icon, children]
+		})
+	});
+}
+/** "Block style" dropdown. Compact trigger: Text / H1…H6 / Quote. */
+function StyleMenu({ block, styles, onPick, onOpenChange, disabled, className }) {
+	const cur = STYLES.find((s) => s.tag === block);
+	return /* @__PURE__ */ jsxs(Menu, {
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: "Block style",
+			children: /* @__PURE__ */ jsxs(MenuTrigger, {
+				disabled,
+				"aria-label": "Block style",
+				onMouseDown: keepCaret,
+				className: cn("flex h-7 shrink-0 items-center gap-1 rounded-kit-md pl-2 pr-1.5 text-kit-sm font-medium text-kit-fg hover:bg-kit-hover disabled:opacity-40 data-[popup-open]:bg-kit-hover", !cur && "text-kit-fg-2", className),
+				children: [cur?.short ?? "Text", /* @__PURE__ */ jsx(IconChevronDown, {
+					className: "size-3.5 text-kit-fg-3",
+					stroke: 1.5,
+					"aria-hidden": true
+				})]
+			})
+		}), /* @__PURE__ */ jsx(MenuContent, {
+			className: "w-48",
+			finalFocus: false,
+			children: styles.map((s) => /* @__PURE__ */ jsx(MenuItem, {
+				icon: s.icon,
+				onClick: () => onPick(s.tag),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex w-full items-center justify-between",
+					children: [s.label, block === s.tag ? /* @__PURE__ */ jsx(IconCheck, {
+						className: "size-3.5 text-kit-fg-2",
+						stroke: 2,
+						"aria-hidden": true
+					}) : null]
+				})
+			}, s.tag))
+		})]
+	});
+}
+var Sep = () => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: "mx-1 h-4 w-px shrink-0 bg-kit-line"
+});
+function FormatToolbar({ open, sticky, stickyTop = 0, width, dense, fmt, md, allows, hideFullscreen, insertOpen, setInsertOpen, onMenuOpen, onStyle, onMark, onList, onLink, onClear, onComment, onInlineCode, onCodeBlock, onInsert, keepFocusOnInsertClose, onFullscreen, onMarkdown, saveSel }) {
+	const w = width - (dense ? 40 : 0);
+	const foldUS = w < 430;
+	const foldLists = w < 480;
+	const foldMd = w < 400;
+	const foldClear = w < 360;
+	const insertLabel = w >= 590;
+	const off = md;
+	const styles = stylesFor(allows);
+	const marks = ["underline", "strikeThrough"].filter((m) => allows(MARK_FEATURE[m]));
+	const lists = ["ul", "ol"].filter((l) => allows(l));
+	const linkTip = fmt.hasSel || fmt.onLink ? "Link" : "Link (select some text first)";
+	const commentTip = fmt.hasSel ? "Comment" : "Comment (select some text first)";
+	const check = (on) => on ? /* @__PURE__ */ jsx(IconCheck, {
+		className: "ml-auto size-3.5 text-kit-fg-2",
+		stroke: 2,
+		"aria-hidden": true
+	}) : null;
+	const listIcon = (l) => l === "ul" ? /* @__PURE__ */ jsx(IconList, { stroke: 1.5 }) : /* @__PURE__ */ jsx(IconListNumbers, { stroke: 1.5 });
+	const listLabel = (l) => l === "ul" ? "Bulleted list" : "Numbered list";
+	const markIcon = (m) => m === "underline" ? /* @__PURE__ */ jsx(IconUnderline, { stroke: 1.5 }) : /* @__PURE__ */ jsx(IconStrikethrough, { stroke: 1.5 });
+	const markLabel = (m) => m === "underline" ? "Underline" : "Strikethrough";
+	const more = foldUS && marks.length || foldLists && lists.length || foldClear || foldMd || allows("code") || allows("pre");
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("overflow-clip rounded-t-kit-lg transition-[height] duration-150 ease-out", open ? "h-8 pointer-coarse:h-11" : "h-0", sticky && open && "sticky z-[4]"),
+		style: sticky && open ? { top: stickyTop } : void 0,
+		inert: !open,
+		"aria-hidden": !open,
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "toolbar",
+			"aria-label": "Text formatting",
+			onMouseDown: (e) => {
+				if (!e.target.closest("button")) e.preventDefault();
+			},
+			className: cn("flex h-full items-center gap-0.5 border-b border-kit-line bg-kit-subtle px-1 transition-opacity duration-[120ms] ease-out", open ? "opacity-100" : "opacity-0"),
+			children: [
+				styles.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StyleMenu, {
+					block: fmt.block,
+					styles,
+					onPick: onStyle,
+					disabled: off,
+					onOpenChange: (o) => onMenuOpen("style", o)
+				}), /* @__PURE__ */ jsx(Sep, {})] }) : null,
+				allows("bold") ? /* @__PURE__ */ jsx(ToolButton, {
+					label: "Bold",
+					icon: /* @__PURE__ */ jsx(IconBold, { stroke: 1.5 }),
+					shortcut: "⌘B",
+					active: fmt.bold,
+					disabled: off,
+					onClick: () => onMark("bold")
+				}) : null,
+				allows("italic") ? /* @__PURE__ */ jsx(ToolButton, {
+					label: "Italic",
+					icon: /* @__PURE__ */ jsx(IconItalic, { stroke: 1.5 }),
+					shortcut: "⌘I",
+					active: fmt.italic,
+					disabled: off,
+					onClick: () => onMark("italic")
+				}) : null,
+				foldUS ? null : marks.map((m) => /* @__PURE__ */ jsx(ToolButton, {
+					label: markLabel(m),
+					icon: markIcon(m),
+					shortcut: m === "underline" ? "⌘U" : void 0,
+					active: m === "underline" ? fmt.underline : fmt.strike,
+					disabled: off,
+					onClick: () => onMark(m)
+				}, m)),
+				foldLists || !lists.length ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Sep, {}), lists.map((l) => /* @__PURE__ */ jsx(ToolButton, {
+					label: listLabel(l),
+					icon: listIcon(l),
+					active: fmt[l],
+					disabled: off,
+					onClick: () => onList(l)
+				}, l))] }),
+				/* @__PURE__ */ jsx(Sep, {}),
+				allows("link") ? /* @__PURE__ */ jsx(ToolButton, {
+					label: "Link",
+					tip: linkTip,
+					icon: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 }),
+					shortcut: fmt.hasSel || fmt.onLink ? "⌘K" : void 0,
+					active: fmt.onLink,
+					disabled: off || !(fmt.hasSel || fmt.onLink),
+					onClick: onLink
+				}) : null,
+				foldClear ? null : /* @__PURE__ */ jsx(ToolButton, {
+					label: "Clear formatting",
+					icon: /* @__PURE__ */ jsx(IconClearFormatting, { stroke: 1.5 }),
+					disabled: off,
+					onClick: onClear
+				}),
+				onComment ? /* @__PURE__ */ jsx(ToolButton, {
+					label: "Comment",
+					tip: commentTip,
+					icon: /* @__PURE__ */ jsx(IconMessage, { stroke: 1.5 }),
+					disabled: off || !fmt.hasSel,
+					onClick: onComment
+				}) : null,
+				more ? /* @__PURE__ */ jsxs(Menu, {
+					onOpenChange: (o) => onMenuOpen("more", o),
+					children: [/* @__PURE__ */ jsx(Tooltip, {
+						content: "More formatting",
+						children: /* @__PURE__ */ jsx(MenuTrigger, {
+							"aria-label": "More formatting options",
+							onMouseDown: (e) => {
+								e.preventDefault();
+								saveSel();
+							},
+							className: "flex h-7 w-5 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg [&_svg]:size-3.5",
+							children: /* @__PURE__ */ jsx(IconChevronDown, {
+								stroke: 1.5,
+								"aria-hidden": true
+							})
+						})
+					}), /* @__PURE__ */ jsxs(MenuContent, {
+						align: "start",
+						className: "w-56",
+						finalFocus: false,
+						children: [
+							foldUS ? marks.map((m) => /* @__PURE__ */ jsx(MenuItem, {
+								disabled: off,
+								icon: markIcon(m),
+								shortcut: m === "underline" ? "⌘U" : void 0,
+								onClick: () => onMark(m),
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "flex w-full items-center",
+									children: [markLabel(m), check(m === "underline" ? fmt.underline : fmt.strike)]
+								})
+							}, m)) : null,
+							foldLists ? lists.map((l) => /* @__PURE__ */ jsx(MenuItem, {
+								disabled: off,
+								icon: listIcon(l),
+								onClick: () => onList(l),
+								children: listLabel(l)
+							}, l)) : null,
+							foldClear ? /* @__PURE__ */ jsx(MenuItem, {
+								disabled: off,
+								icon: /* @__PURE__ */ jsx(IconClearFormatting, { stroke: 1.5 }),
+								onClick: onClear,
+								children: "Clear formatting"
+							}) : null,
+							foldMd ? /* @__PURE__ */ jsx(MenuItem, {
+								icon: md ? /* @__PURE__ */ jsx(IconMarkdownOff, { stroke: 1.5 }) : /* @__PURE__ */ jsx(IconMarkdown, { stroke: 1.5 }),
+								onClick: onMarkdown,
+								children: md ? "Return to rich text" : "View and edit as Markdown"
+							}) : null,
+							foldUS && marks.length || foldLists && lists.length || foldClear || foldMd ? /* @__PURE__ */ jsx(MenuSeparator, {}) : null,
+							allows("code") ? /* @__PURE__ */ jsx(MenuItem, {
+								disabled: off,
+								icon: /* @__PURE__ */ jsx(IconCode, { stroke: 1.5 }),
+								shortcut: "⌘E",
+								onClick: onInlineCode,
+								children: "Inline code"
+							}) : null,
+							allows("pre") ? /* @__PURE__ */ jsx(MenuItem, {
+								disabled: off,
+								icon: /* @__PURE__ */ jsx(IconTerminal2, { stroke: 1.5 }),
+								onClick: onCodeBlock,
+								children: "Code"
+							}) : null
+						]
+					})]
+				}) : null,
+				/* @__PURE__ */ jsx(Sep, {}),
+				/* @__PURE__ */ jsxs(Popover, {
+					open: insertOpen,
+					onOpenChange: setInsertOpen,
+					children: [/* @__PURE__ */ jsx(Tooltip, {
+						content: "Insert a block",
+						children: /* @__PURE__ */ jsxs(PopoverTrigger, {
+							disabled: off,
+							"aria-label": "Insert",
+							onMouseDown: () => saveSel(),
+							className: "flex h-7 shrink-0 items-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg disabled:opacity-40 data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg [&_svg]:size-4",
+							children: [/* @__PURE__ */ jsx(IconPlus, {
+								stroke: 1.5,
+								"aria-hidden": true
+							}), insertLabel ? "Insert" : null]
+						})
+					}), insertOpen ? /* @__PURE__ */ jsx(InsertMenuContent, {
+						allows,
+						onInsert,
+						keepFocusOnClose: keepFocusOnInsertClose
+					}) : null]
+				}),
+				/* @__PURE__ */ jsx("span", { className: "min-w-1 flex-1" }),
+				foldMd ? null : /* @__PURE__ */ jsx(ToolButton, {
+					label: md ? "Return to rich text" : "View and edit as Markdown",
+					icon: md ? /* @__PURE__ */ jsx(IconMarkdownOff, { stroke: 1.5 }) : /* @__PURE__ */ jsx(IconMarkdown, { stroke: 1.5 }),
+					active: md,
+					onClick: onMarkdown
+				}),
+				hideFullscreen ? null : /* @__PURE__ */ jsx(ToolButton, {
+					label: "Expand editor",
+					icon: /* @__PURE__ */ jsx(IconArrowsMaximize, { stroke: 1.5 }),
+					shortcut: "⌘↵",
+					onClick: onFullscreen
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { EMPTY_FMT, FormatToolbar, MARK_FEATURE, StyleMenu, ToolButton, stylesFor };
+
+//# sourceMappingURL=toolbar.js.map

package/controls/rich-text/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../../src/kit/controls/rich-text/toolbar.tsx"],"sourcesContent":["/**\n * RICH TEXT · the field toolbar (V2 HEAD controls/rich-text/toolbar.tsx, production order):\n *   Style ▾ | B I U S | • 1. | Link, Clear formatting, Comment | ▾ more | + Insert   ·····   Markdown · Open full editor\n * The overflow is a chevron next to the formatting, never a second \"⋯\" (the field's label row owns the one ⋯ menu).\n * It takes no room at rest (h-0, inert, aria-hidden) and slides open to 32px when the field is in use. Items fold into\n * \"More formatting options\" as the field narrows. A control whose element the field does not accept is not drawn.\n */\nimport * as React from \"react\";\nimport {\n  IconArrowsMaximize, IconBlockquote, IconBold, IconCheck, IconChevronDown, IconClearFormatting, IconCode, IconH1, IconH2, IconH3, IconH4, IconH5,\n  IconH6, IconItalic, IconLink, IconList, IconListNumbers, IconMarkdown, IconMarkdownOff, IconMessage, IconPilcrow, IconPlus, IconStrikethrough,\n  IconTerminal2, IconUnderline,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverTrigger, Tooltip } from \"../../ui/overlay\";\nimport { InsertMenuContent, type CatalogItem } from \"./catalog\";\nimport type { RichTextFeature } from \"./codec\";\n\nexport interface Fmt {\n  bold: boolean;\n  italic: boolean;\n  underline: boolean;\n  strike: boolean;\n  ul: boolean;\n  ol: boolean;\n  /** lower-case tag of the caret's top-level block, or \"island\" */\n  block: string;\n  hasSel: boolean;\n  onLink: boolean;\n}\nexport const EMPTY_FMT: Fmt = { bold: false, italic: false, underline: false, strike: false, ul: false, ol: false, block: \"p\", hasSel: false, onLink: false };\n\nexport type MarkCmd = \"bold\" | \"italic\" | \"underline\" | \"strikeThrough\";\nexport const MARK_FEATURE: Record<MarkCmd, RichTextFeature> = { bold: \"bold\", italic: \"italic\", underline: \"underline\", strikeThrough: \"strike\" };\n\nexport const STYLES: { tag: string; label: string; short: string; icon: React.ReactNode }[] = [\n  { tag: \"p\", label: \"Text\", short: \"Text\", icon: <IconPilcrow stroke={1.5} /> },\n  { tag: \"h1\", label: \"Heading 1\", short: \"H1\", icon: <IconH1 stroke={1.5} /> },\n  { tag: \"h2\", label: \"Heading 2\", short: \"H2\", icon: <IconH2 stroke={1.5} /> },\n  { tag: \"h3\", label: \"Heading 3\", short: \"H3\", icon: <IconH3 stroke={1.5} /> },\n  { tag: \"h4\", label: \"Heading 4\", short: \"H4\", icon: <IconH4 stroke={1.5} /> },\n  { tag: \"h5\", label: \"Heading 5\", short: \"H5\", icon: <IconH5 stroke={1.5} /> },\n  { tag: \"h6\", label: \"Heading 6\", short: \"H6\", icon: <IconH6 stroke={1.5} /> },\n  { tag: \"blockquote\", label: \"Quote\", short: \"Quote\", icon: <IconBlockquote stroke={1.5} /> },\n];\n/** The block styles a field accepts (Text always). */\nexport const stylesFor = (allows: (f: RichTextFeature) => boolean) => STYLES.filter((s) => s.tag === \"p\" || allows(s.tag as RichTextFeature));\n\nconst keepCaret = (e: React.MouseEvent) => e.preventDefault();\n\nexport function ToolButton({\n  label,\n  tip,\n  icon,\n  onClick,\n  active,\n  disabled,\n  shortcut,\n  children,\n  className,\n}: {\n  label: string;\n  tip?: string;\n  icon: React.ReactNode;\n  onClick?: () => void;\n  active?: boolean;\n  disabled?: boolean;\n  shortcut?: string;\n  children?: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <Tooltip content={tip ?? label} shortcut={shortcut}>\n      <button\n        type=\"button\"\n        aria-label={label}\n        aria-pressed={active}\n        aria-disabled={disabled || undefined}\n        onMouseDown={keepCaret}\n        onClick={() => !disabled && onClick?.()}\n        className={cn(\n          \"flex h-7 min-w-7 shrink-0 items-center justify-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg [&_svg]:size-4\",\n          active && \"bg-kit-selected text-kit-fg\",\n          disabled && \"opacity-40 hover:bg-transparent hover:text-kit-fg-2\",\n          className,\n        )}\n      >\n        {icon}\n        {children}\n      </button>\n    </Tooltip>\n  );\n}\n\n/** \"Block style\" dropdown. Compact trigger: Text / H1…H6 / Quote. */\nexport function StyleMenu({\n  block,\n  styles,\n  onPick,\n  onOpenChange,\n  disabled,\n  className,\n}: {\n  block: string;\n  styles: typeof STYLES;\n  onPick: (tag: string) => void;\n  onOpenChange?: (o: boolean) => void;\n  disabled?: boolean;\n  className?: string;\n}) {\n  const cur = STYLES.find((s) => s.tag === block);\n  return (\n    <Menu onOpenChange={onOpenChange}>\n      <Tooltip content=\"Block style\">\n        <MenuTrigger\n          disabled={disabled}\n          aria-label=\"Block style\"\n          onMouseDown={keepCaret}\n          className={cn(\n            \"flex h-7 shrink-0 items-center gap-1 rounded-kit-md pl-2 pr-1.5 text-kit-sm font-medium text-kit-fg hover:bg-kit-hover disabled:opacity-40 data-[popup-open]:bg-kit-hover\",\n            !cur && \"text-kit-fg-2\",\n            className,\n          )}\n        >\n          {cur?.short ?? \"Text\"}\n          <IconChevronDown className=\"size-3.5 text-kit-fg-3\" stroke={1.5} aria-hidden />\n        </MenuTrigger>\n      </Tooltip>\n      <MenuContent className=\"w-48\" finalFocus={false}>\n        {styles.map((s) => (\n          <MenuItem key={s.tag} icon={s.icon} onClick={() => onPick(s.tag)}>\n            <span className=\"flex w-full items-center justify-between\">\n              {s.label}\n              {block === s.tag ? <IconCheck className=\"size-3.5 text-kit-fg-2\" stroke={2} aria-hidden /> : null}\n            </span>\n          </MenuItem>\n        ))}\n      </MenuContent>\n    </Menu>\n  );\n}\n\nconst Sep = () => <span aria-hidden className=\"mx-1 h-4 w-px shrink-0 bg-kit-line\" />;\n\nexport function FormatToolbar({\n  open,\n  sticky,\n  stickyTop = 0,\n  width,\n  dense,\n  fmt,\n  md,\n  allows,\n  hideFullscreen,\n  insertOpen,\n  setInsertOpen,\n  onMenuOpen,\n  onStyle,\n  onMark,\n  onList,\n  onLink,\n  onClear,\n  onComment,\n  onInlineCode,\n  onCodeBlock,\n  onInsert,\n  keepFocusOnInsertClose,\n  onFullscreen,\n  onMarkdown,\n  saveSel,\n}: {\n  open: boolean;\n  sticky: boolean;\n  stickyTop?: number;\n  width: number;\n  dense: boolean;\n  fmt: Fmt;\n  md: boolean;\n  allows: (f: RichTextFeature) => boolean;\n  hideFullscreen?: boolean;\n  insertOpen: boolean;\n  setInsertOpen: (o: boolean) => void;\n  onMenuOpen: (name: \"style\" | \"more\", o: boolean) => void;\n  onStyle: (tag: string) => void;\n  onMark: (cmd: MarkCmd) => void;\n  onList: (kind: \"ul\" | \"ol\") => void;\n  onLink: () => void;\n  onClear: () => void;\n  onComment?: () => void;\n  onInlineCode: () => void;\n  onCodeBlock: () => void;\n  onInsert: (it: CatalogItem) => void;\n  keepFocusOnInsertClose: () => boolean;\n  onFullscreen: () => void;\n  onMarkdown: () => void;\n  saveSel: () => void;\n}) {\n  const w = width - (dense ? 40 : 0);\n  const foldUS = w < 430;\n  const foldLists = w < 480;\n  const foldMd = w < 400;\n  const foldClear = w < 360;\n  const insertLabel = w >= 590;\n  const off = md;\n  const styles = stylesFor(allows);\n  const marks = ([\"underline\", \"strikeThrough\"] as const).filter((m) => allows(MARK_FEATURE[m]));\n  const lists = ([\"ul\", \"ol\"] as const).filter((l) => allows(l));\n  const linkTip = fmt.hasSel || fmt.onLink ? \"Link\" : \"Link (select some text first)\";\n  const commentTip = fmt.hasSel ? \"Comment\" : \"Comment (select some text first)\";\n  const check = (on: boolean) => (on ? <IconCheck className=\"ml-auto size-3.5 text-kit-fg-2\" stroke={2} aria-hidden /> : null);\n  const listIcon = (l: \"ul\" | \"ol\") => (l === \"ul\" ? <IconList stroke={1.5} /> : <IconListNumbers stroke={1.5} />);\n  const listLabel = (l: \"ul\" | \"ol\") => (l === \"ul\" ? \"Bulleted list\" : \"Numbered list\");\n  const markIcon = (m: \"underline\" | \"strikeThrough\") => (m === \"underline\" ? <IconUnderline stroke={1.5} /> : <IconStrikethrough stroke={1.5} />);\n  const markLabel = (m: \"underline\" | \"strikeThrough\") => (m === \"underline\" ? \"Underline\" : \"Strikethrough\");\n  const more = (foldUS && marks.length) || (foldLists && lists.length) || foldClear || foldMd || allows(\"code\") || allows(\"pre\");\n\n  return (\n    <div\n      className={cn(\"overflow-clip rounded-t-kit-lg transition-[height] duration-150 ease-out\", open ? \"h-8 pointer-coarse:h-11\" : \"h-0\", sticky && open && \"sticky z-[4]\")}\n      style={sticky && open ? { top: stickyTop } : undefined}\n      inert={!open}\n      aria-hidden={!open}\n    >\n      <div\n        role=\"toolbar\"\n        aria-label=\"Text formatting\"\n        onMouseDown={(e) => {\n          if (!(e.target as HTMLElement).closest(\"button\")) e.preventDefault();\n        }}\n        className={cn(\"flex h-full items-center gap-0.5 border-b border-kit-line bg-kit-subtle px-1 transition-opacity duration-[120ms] ease-out\", open ? \"opacity-100\" : \"opacity-0\")}\n      >\n        {styles.length > 1 ? (\n          <>\n            <StyleMenu block={fmt.block} styles={styles} onPick={onStyle} disabled={off} onOpenChange={(o) => onMenuOpen(\"style\", o)} />\n            <Sep />\n          </>\n        ) : null}\n        {allows(\"bold\") ? <ToolButton label=\"Bold\" icon={<IconBold stroke={1.5} />} shortcut=\"⌘B\" active={fmt.bold} disabled={off} onClick={() => onMark(\"bold\")} /> : null}\n        {allows(\"italic\") ? <ToolButton label=\"Italic\" icon={<IconItalic stroke={1.5} />} shortcut=\"⌘I\" active={fmt.italic} disabled={off} onClick={() => onMark(\"italic\")} /> : null}\n        {foldUS\n          ? null\n          : marks.map((m) => (\n              <ToolButton key={m} label={markLabel(m)} icon={markIcon(m)} shortcut={m === \"underline\" ? \"⌘U\" : undefined} active={m === \"underline\" ? fmt.underline : fmt.strike} disabled={off} onClick={() => onMark(m)} />\n            ))}\n        {foldLists || !lists.length ? null : (\n          <>\n            <Sep />\n            {lists.map((l) => (\n              <ToolButton key={l} label={listLabel(l)} icon={listIcon(l)} active={fmt[l]} disabled={off} onClick={() => onList(l)} />\n            ))}\n          </>\n        )}\n        <Sep />\n        {allows(\"link\") ? (\n          <ToolButton label=\"Link\" tip={linkTip} icon={<IconLink stroke={1.5} />} shortcut={fmt.hasSel || fmt.onLink ? \"⌘K\" : undefined} active={fmt.onLink} disabled={off || !(fmt.hasSel || fmt.onLink)} onClick={onLink} />\n        ) : null}\n        {foldClear ? null : <ToolButton label=\"Clear formatting\" icon={<IconClearFormatting stroke={1.5} />} disabled={off} onClick={onClear} />}\n        {onComment ? <ToolButton label=\"Comment\" tip={commentTip} icon={<IconMessage stroke={1.5} />} disabled={off || !fmt.hasSel} onClick={onComment} /> : null}\n        {more ? (\n          <Menu onOpenChange={(o) => onMenuOpen(\"more\", o)}>\n            <Tooltip content=\"More formatting\">\n              <MenuTrigger\n                aria-label=\"More formatting options\"\n                onMouseDown={(e) => {\n                  e.preventDefault();\n                  saveSel();\n                }}\n                className=\"flex h-7 w-5 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg [&_svg]:size-3.5\"\n              >\n                <IconChevronDown stroke={1.5} aria-hidden />\n              </MenuTrigger>\n            </Tooltip>\n            <MenuContent align=\"start\" className=\"w-56\" finalFocus={false}>\n              {foldUS\n                ? marks.map((m) => (\n                    <MenuItem key={m} disabled={off} icon={markIcon(m)} shortcut={m === \"underline\" ? \"⌘U\" : undefined} onClick={() => onMark(m)}>\n                      <span className=\"flex w-full items-center\">\n                        {markLabel(m)}\n                        {check(m === \"underline\" ? fmt.underline : fmt.strike)}\n                      </span>\n                    </MenuItem>\n                  ))\n                : null}\n              {foldLists\n                ? lists.map((l) => (\n                    <MenuItem key={l} disabled={off} icon={listIcon(l)} onClick={() => onList(l)}>\n                      {listLabel(l)}\n                    </MenuItem>\n                  ))\n                : null}\n              {foldClear ? (\n                <MenuItem disabled={off} icon={<IconClearFormatting stroke={1.5} />} onClick={onClear}>\n                  Clear formatting\n                </MenuItem>\n              ) : null}\n              {foldMd ? (\n                <MenuItem icon={md ? <IconMarkdownOff stroke={1.5} /> : <IconMarkdown stroke={1.5} />} onClick={onMarkdown}>\n                  {md ? \"Return to rich text\" : \"View and edit as Markdown\"}\n                </MenuItem>\n              ) : null}\n              {(foldUS && marks.length) || (foldLists && lists.length) || foldClear || foldMd ? <MenuSeparator /> : null}\n              {allows(\"code\") ? (\n                <MenuItem disabled={off} icon={<IconCode stroke={1.5} />} shortcut=\"⌘E\" onClick={onInlineCode}>\n                  Inline code\n                </MenuItem>\n              ) : null}\n              {allows(\"pre\") ? (\n                <MenuItem disabled={off} icon={<IconTerminal2 stroke={1.5} />} onClick={onCodeBlock}>\n                  Code\n                </MenuItem>\n              ) : null}\n            </MenuContent>\n          </Menu>\n        ) : null}\n        <Sep />\n        <Popover open={insertOpen} onOpenChange={setInsertOpen}>\n          <Tooltip content=\"Insert a block\">\n            <PopoverTrigger\n              disabled={off}\n              aria-label=\"Insert\"\n              onMouseDown={() => saveSel()}\n              className=\"flex h-7 shrink-0 items-center gap-1 rounded-kit-md px-1.5 text-kit-sm text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg disabled:opacity-40 data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg [&_svg]:size-4\"\n            >\n              <IconPlus stroke={1.5} aria-hidden />\n              {insertLabel ? \"Insert\" : null}\n            </PopoverTrigger>\n          </Tooltip>\n          {insertOpen ? <InsertMenuContent allows={allows} onInsert={onInsert} keepFocusOnClose={keepFocusOnInsertClose} /> : null}\n        </Popover>\n\n        <span className=\"min-w-1 flex-1\" />\n\n        {foldMd ? null : (\n          <ToolButton label={md ? \"Return to rich text\" : \"View and edit as Markdown\"} icon={md ? <IconMarkdownOff stroke={1.5} /> : <IconMarkdown stroke={1.5} />} active={md} onClick={onMarkdown} />\n        )}\n        {hideFullscreen ? null : <ToolButton label=\"Expand editor\" icon={<IconArrowsMaximize stroke={1.5} />} shortcut=\"⌘↵\" onClick={onFullscreen} />}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/controls/scale.d.ts

@@ -0,0 +1,56 @@
+/**
+ * SCALE — one control, two modes (CPO D41), in the designer's CAPSULE: a muted 32px capsule, a soft fill to the value,
+ * a 3px bar thumb at the fill's end (always right of the label), the label inside on the left (panels) and the value
+ * inside on the right. Drag anywhere to slide (always snaps to the steps), ←→ / Home / End / PageUp / PageDown.
+ *  · Fixed only (default): steps snap; the readout shows the token ("Large"), its tooltip the size (88px); scrub it sideways.
+ *  · Fixed + custom (`allowCustom`): DIRECT edit, no mode switch — one click on the value puts the caret there with the
+ *    value selected; double-click anywhere or just start typing on the focused capsule does the same. "24", "24px", "5%",
+ *    "xl" apply live; Enter / Tab / blur commit, Esc reverts. The unit is plain suffix text (parsed from what you type;
+ *    with several units, clicking it cycles them). While typing, token chips under the capsule pick a step in one click;
+ *    ↑↓ step the tokens. A custom value shows a small accent dot and sits proportionally between its tokens.
+ * Used by the Block Kit number control (`field.scale`, or the legacy `layout: "slider"`) and by the Visuals panels.
+ *
+ * Port of V2 HEAD 9829bf1 kit/controls/scale.tsx. V2 tokens map to the kit's (bg-muted → bg-kit-muted, --ring-focus →
+ * the kit focus ring). V2's native `title=` hints become kit tooltips (the dashboard bans native title tooltips); the
+ * custom value keeps ONE tooltip mounted and closes it while typing, so the input never remounts mid-edit.
+ * Values are stored as they are (adapters/values.ts scaleToProd): a number, a token step's string, or { value, unit }.
+ */
+import * as React from "react";
+import type { ScaleSchema, ScaleValue } from "../schema/types";
+import type { ControlProps } from "../types";
+export interface ScaleSliderProps {
+    scale: ScaleSchema;
+    value: unknown;
+    onChange: (v: ScaleValue) => void;
+    /** Accessible name (the field title). */
+    label: string;
+    /** id for the primary control: the input when custom is allowed, otherwise the slider thumb. */
+    id?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    /** an error from outside (schema validation, a design-system demo); a parse error from typing wins */
+    error?: string;
+    /** "form" (Block Kit: label above, tick labels under the track) · "panel" (inspector row: inline scrub label). */
+    density?: "form" | "panel";
+    /** panel: show the label inline on the left (it scrubs). */
+    inlineLabel?: boolean;
+    icon?: React.ReactNode;
+    /** panel: extra classes for the inline label. */
+    labelClassName?: string;
+    /** a unit word that isn't a CSS unit ("items", "s") — shown after numbers */
+    suffix?: string;
+    /** readout for range values (legacy `format`) */
+    format?: (n: number) => string;
+    onBlur?: () => void;
+    /** Enter committed a typed value (custom fields) or was pressed on a fixed capsule — hosts like the canvas popover close on it */
+    onEnter?: () => void;
+    /** start in edit mode with the value selected (the canvas badge → in-place edit) */
+    autoEdit?: boolean;
+    /** Tab / Shift+Tab while typing: commit, then the host moves to the next / previous size (canvas popover sides) */
+    onTab?: (dir: 1 | -1) => void;
+    className?: string;
+}
+export declare function ScaleSlider({ scale, value, onChange, label, id, disabled, readOnly, invalid, error: externalError, inlineLabel, icon, labelClassName, suffix, format, onBlur, onEnter, autoEdit, onTab, className, }: ScaleSliderProps): import("react/jsx-runtime").JSX.Element;
+/** Block Kit adapter: `field.scale` (or legacy `layout: "slider"` + numeric). */
+export declare function ScaleControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;