@damiro/stylo 0.4.0

package/dist/toolbar-settings.js

@@ -0,0 +1,269 @@
+import { r as e, t } from "./config-DTBxVhtH.js";
+import { useId as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { DndContext as o, KeyboardSensor as s, PointerSensor as c, closestCenter as l, useSensor as u, useSensors as d } from "@dnd-kit/core";
+import { SortableContext as f, sortableKeyboardCoordinates as p, useSortable as m, verticalListSortingStrategy as h } from "@dnd-kit/sortable";
+import { CSS as g } from "@dnd-kit/utilities";
+//#region src/toolbar/labels.ts
+var _ = {
+	undo: "Undo",
+	redo: "Redo",
+	save: "Save",
+	search: "Find / replace",
+	h1: "Heading 1",
+	h2: "Heading 2",
+	h3: "Heading 3",
+	body: "Body",
+	bold: "Bold",
+	italic: "Italic",
+	strike: "Strikethrough",
+	underline: "Underline",
+	code: "Inline code",
+	codeBlock: "Code block",
+	link: "Link",
+	wikilink: "Wikilink",
+	quote: "Blockquote",
+	bulletList: "Bulleted list",
+	orderedList: "Numbered list",
+	task: "Task list",
+	hr: "Divider",
+	frontmatter: "Frontmatter",
+	table: "Table",
+	math: "Inline math",
+	mathBlock: "Block math"
+}, v = Object.keys(_), y = {
+	root: "_root_18hcd_3",
+	col: "_col_18hcd_17",
+	colHead: "_colHead_18hcd_26",
+	list: "_list_18hcd_37",
+	row: "_row_18hcd_47",
+	handle: "_handle_18hcd_73",
+	glyph: "_glyph_18hcd_105",
+	label: "_label_18hcd_121",
+	rowActions: "_rowActions_18hcd_130",
+	iconButton: "_iconButton_18hcd_136",
+	textButton: "_textButton_18hcd_137",
+	footer: "_footer_18hcd_176",
+	empty: "_empty_18hcd_184",
+	srOnly: "_srOnly_18hcd_190"
+};
+//#endregion
+//#region src/toolbar-settings/SortableRow.tsx
+function b({ id: e, label: t, icon: n, position: r, count: o, actions: s }) {
+	let { attributes: c, listeners: l, setNodeRef: u, transform: d, transition: f, isDragging: p } = m({ id: e });
+	return /* @__PURE__ */ a("li", {
+		ref: u,
+		className: y.row,
+		style: {
+			transform: g.Transform.toString(d),
+			transition: f
+		},
+		"data-dragging": p || void 0,
+		children: [
+			/* @__PURE__ */ i("button", {
+				type: "button",
+				className: y.handle,
+				"aria-label": `Reorder ${t}, position ${r} of ${o}`,
+				...c,
+				...l,
+				children: /* @__PURE__ */ i("span", {
+					"aria-hidden": "true",
+					children: "⠿"
+				})
+			}),
+			/* @__PURE__ */ i("span", {
+				className: y.glyph,
+				"aria-hidden": "true",
+				children: n
+			}),
+			/* @__PURE__ */ i("span", {
+				className: y.label,
+				children: t
+			}),
+			/* @__PURE__ */ i("span", {
+				className: y.rowActions,
+				children: s
+			})
+		]
+	});
+}
+function x(e) {
+	return e === "|";
+}
+function S(e) {
+	return x(e) ? null : typeof e == "string" ? e : e.id;
+}
+function C(e, t) {
+	return S(e) ?? `separator-${t}`;
+}
+function w(t, n) {
+	return x(t) ? {
+		id: null,
+		label: "Separator",
+		icon: null
+	} : typeof t == "string" ? {
+		id: t,
+		label: _[t] ?? t,
+		icon: n?.[t] ?? e[t] ?? null
+	} : {
+		id: t.id,
+		label: t.title,
+		icon: t.icon
+	};
+}
+function T(e, t) {
+	let n = new Set(t.map(S).filter((e) => e !== null));
+	return e.filter((e) => {
+		let t = S(e);
+		return t !== null && !n.has(t);
+	});
+}
+function E(e, t, n) {
+	if (n < 0 || n >= e.length || t === n) return e.slice();
+	let r = e.slice(), [i] = r.splice(t, 1);
+	return r.splice(n, 0, i), r;
+}
+function D(e, t) {
+	let n = e.slice();
+	return n.splice(t, 1), n;
+}
+function O(e, t) {
+	return [...e, t];
+}
+//#endregion
+//#region src/toolbar-settings/StyloToolbarSettings.tsx
+function k({ value: e, onChange: m, available: g, icons: _, className: x }) {
+	let S = n(), k = n(), [A, j] = r(""), M = d(u(c, { activationConstraint: { distance: 4 } }), u(s, { coordinateGetter: p })), N = T(g ?? v, e), P = e.map((e, t) => String(t));
+	function F({ active: t, over: n }) {
+		if (!n || t.id === n.id) return;
+		let r = Number(t.id), i = Number(n.id), a = w(e[r], _).label;
+		m(E(e, r, i)), j(`${a} moved to position ${i + 1} of ${e.length}`);
+	}
+	function I(t) {
+		let n = w(e[t], _).label;
+		m(D(e, t)), j(`${n} removed from the bar`);
+	}
+	function L(t) {
+		m(O(e, t)), j(`${w(t, _).label} added to the bar`);
+	}
+	function R() {
+		m([...t]), j("Toolbar reset to the default set");
+	}
+	let z = (t, n) => `${w(e[Number(t)], _).label} ${n}`;
+	return /* @__PURE__ */ a("div", {
+		className: [y.root, x].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a("section", {
+				className: y.col,
+				children: [
+					/* @__PURE__ */ i("h3", {
+						className: y.colHead,
+						id: S,
+						children: "On the bar"
+					}),
+					/* @__PURE__ */ i(o, {
+						sensors: M,
+						collisionDetection: l,
+						onDragEnd: F,
+						accessibility: { announcements: {
+							onDragStart: ({ active: e }) => z(e.id, "picked up"),
+							onDragOver: ({ active: e, over: t }) => t ? `${z(e.id, "is over position")} ${Number(t.id) + 1}` : "",
+							onDragEnd: ({ active: e, over: t }) => t ? `${z(e.id, "dropped at position")} ${Number(t.id) + 1}` : z(e.id, "dropped"),
+							onDragCancel: ({ active: e }) => z(e.id, "drag cancelled")
+						} },
+						children: /* @__PURE__ */ i(f, {
+							items: P,
+							strategy: h,
+							children: /* @__PURE__ */ i("ul", {
+								className: y.list,
+								"aria-labelledby": S,
+								children: e.map((t, n) => {
+									let { icon: r, label: a } = w(t, _);
+									return /* @__PURE__ */ i(b, {
+										id: String(n),
+										label: a,
+										icon: r,
+										position: n + 1,
+										count: e.length,
+										actions: /* @__PURE__ */ i("button", {
+											type: "button",
+											className: y.iconButton,
+											title: "Remove",
+											"aria-label": `Remove ${a} from the bar`,
+											onClick: () => I(n),
+											children: "✕"
+										})
+									}, C(t, n));
+								})
+							})
+						})
+					}),
+					/* @__PURE__ */ a("div", {
+						className: y.footer,
+						children: [/* @__PURE__ */ i("button", {
+							type: "button",
+							className: y.textButton,
+							onClick: () => L("|"),
+							children: "Add separator"
+						}), /* @__PURE__ */ i("button", {
+							type: "button",
+							className: y.textButton,
+							onClick: R,
+							children: "Reset to default"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ a("section", {
+				className: y.col,
+				children: [/* @__PURE__ */ i("h3", {
+					className: y.colHead,
+					id: k,
+					children: "Available"
+				}), /* @__PURE__ */ a("ul", {
+					className: y.list,
+					"aria-labelledby": k,
+					children: [N.length === 0 && /* @__PURE__ */ i("li", {
+						className: y.empty,
+						children: "Every button is on the bar."
+					}), N.map((e, t) => {
+						let { icon: n, label: r } = w(e, _);
+						return /* @__PURE__ */ a("li", {
+							className: y.row,
+							children: [
+								/* @__PURE__ */ i("span", {
+									className: y.glyph,
+									"aria-hidden": "true",
+									children: n
+								}),
+								/* @__PURE__ */ i("span", {
+									className: y.label,
+									children: r
+								}),
+								/* @__PURE__ */ i("span", {
+									className: y.rowActions,
+									children: /* @__PURE__ */ i("button", {
+										type: "button",
+										className: y.textButton,
+										"aria-label": `Add ${r} to the bar`,
+										onClick: () => L(e),
+										children: "Add"
+									})
+								})
+							]
+						}, C(e, t));
+					})]
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				"aria-live": "polite",
+				className: y.srOnly,
+				children: A
+			})
+		]
+	});
+}
+//#endregion
+export { k as StyloToolbarSettings };
+
+//# sourceMappingURL=toolbar-settings.js.map

package/dist/toolbar-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-settings.js","names":[],"sources":["../src/toolbar/labels.ts","../src/toolbar-settings/StyloToolbarSettings.module.css","../src/toolbar-settings/SortableRow.tsx","../src/toolbar-settings/items.ts","../src/toolbar-settings/StyloToolbarSettings.tsx"],"sourcesContent":["import type { ToolbarCommandId } from \"../types\"\n\n/**\n * Display labels for the built-in command ids — the single source of truth for\n * the button title / accessible name. `commands.ts` owns the *behaviour* of each\n * command and imports CodeMirror to do it; this module is pure data, so surfaces\n * that only need to *name* a command (the toolbar customizer, docs tooling) can\n * import it without pulling the editor in.\n *\n * `test/toolbar-settings.test.tsx` asserts these stay in step with\n * `BUILTIN_COMMANDS` — a renamed command title there without a change here fails\n * the build.\n */\nexport const BUILTIN_LABELS: Record<ToolbarCommandId, string> = {\n  undo: \"Undo\",\n  redo: \"Redo\",\n  save: \"Save\",\n  search: \"Find / replace\",\n  h1: \"Heading 1\",\n  h2: \"Heading 2\",\n  h3: \"Heading 3\",\n  body: \"Body\",\n  bold: \"Bold\",\n  italic: \"Italic\",\n  strike: \"Strikethrough\",\n  underline: \"Underline\",\n  code: \"Inline code\",\n  codeBlock: \"Code block\",\n  link: \"Link\",\n  wikilink: \"Wikilink\",\n  quote: \"Blockquote\",\n  bulletList: \"Bulleted list\",\n  orderedList: \"Numbered list\",\n  task: \"Task list\",\n  hr: \"Divider\",\n  frontmatter: \"Frontmatter\",\n  table: \"Table\",\n  math: \"Inline math\",\n  mathBlock: \"Block math\",\n}\n\n/** Every built-in command id, in the canonical order labels are declared above. */\nexport const ALL_BUILTIN_IDS = Object.keys(BUILTIN_LABELS) as ToolbarCommandId[]\n","/* Reads the same `--stylo-*` tokens as the editor chrome, so it themes with it\n   in light and dark. Structural only — the host controls the palette. */\n.root {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n  color: var(--stylo-text);\n  font: inherit;\n}\n\n@media (max-width: 460px) {\n  .root {\n    grid-template-columns: 1fr;\n  }\n}\n\n.col {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--stylo-border);\n  border-radius: var(--stylo-radius);\n  background: var(--stylo-bg);\n}\n\n.colHead {\n  margin: 0;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--stylo-border);\n  font-size: 0.75rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--stylo-text-muted);\n}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 5px 6px;\n  border-radius: calc(var(--stylo-radius) - 3px);\n  background: var(--stylo-bg);\n}\n\n.row:focus-visible {\n  outline: 2px solid var(--stylo-ring);\n  outline-offset: -2px;\n}\n\n.row:hover {\n  background: color-mix(in srgb, var(--stylo-border) 30%, transparent);\n}\n\n/* Mid-drag: the sortable clone floats over the list, so give it an opaque\n   raised surface and lift the original's contrast down. */\n.row[data-dragging] {\n  background: var(--stylo-surface-floating, #fff);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);\n  opacity: 0.9;\n}\n\n.handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 22px;\n  flex: none;\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: calc(var(--stylo-radius) - 4px);\n  background: none;\n  color: var(--stylo-text-muted);\n  font: inherit;\n  line-height: 1;\n  cursor: grab;\n  touch-action: none;\n}\n\n.handle:hover {\n  background: color-mix(in srgb, var(--stylo-border) 45%, transparent);\n  color: var(--stylo-text);\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--stylo-ring);\n  outline-offset: -1px;\n}\n\n.handle:active {\n  cursor: grabbing;\n}\n\n.glyph {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  flex: none;\n  color: var(--stylo-text-muted);\n}\n\n.glyph svg {\n  width: 16px;\n  height: 16px;\n  display: block;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 0.8125rem;\n}\n\n.rowActions {\n  display: flex;\n  gap: 2px;\n  flex: none;\n}\n\n.iconButton,\n.textButton {\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  border-radius: calc(var(--stylo-radius) - 4px);\n  background: none;\n  color: var(--stylo-text-muted);\n  font: inherit;\n  cursor: pointer;\n}\n\n.iconButton {\n  width: 22px;\n  height: 22px;\n  font-size: 0.8125rem;\n  line-height: 1;\n}\n\n.textButton {\n  padding: 3px 8px;\n  font-size: 0.75rem;\n}\n\n.iconButton:hover:not(:disabled),\n.textButton:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--stylo-border) 45%, transparent);\n  color: var(--stylo-text);\n}\n\n.iconButton:focus-visible,\n.textButton:focus-visible {\n  outline: 2px solid var(--stylo-ring);\n  outline-offset: -1px;\n}\n\n.iconButton:disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n\n.footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 6px;\n  border-top: 1px solid var(--stylo-border);\n}\n\n.empty {\n  padding: 8px 6px;\n  font-size: 0.8125rem;\n  color: var(--stylo-text-muted);\n}\n\n.srOnly {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n","import type { ReactNode } from \"react\"\nimport { useSortable } from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport styles from \"./StyloToolbarSettings.module.css\"\n\n/**\n * One draggable row in the \"On the bar\" list. The drag handle carries the\n * `@dnd-kit` listeners (pointer and keyboard), so the row's own action buttons\n * stay independently focusable and clickable.\n */\nexport function SortableRow({\n  id,\n  label,\n  icon,\n  position,\n  count,\n  actions,\n}: {\n  id: string\n  label: string\n  icon: ReactNode\n  position: number\n  count: number\n  actions: ReactNode\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id,\n  })\n\n  return (\n    <li\n      ref={setNodeRef}\n      className={styles.row}\n      style={{ transform: CSS.Transform.toString(transform), transition }}\n      data-dragging={isDragging || undefined}\n    >\n      <button\n        type=\"button\"\n        className={styles.handle}\n        aria-label={`Reorder ${label}, position ${position} of ${count}`}\n        {...attributes}\n        {...listeners}\n      >\n        <span aria-hidden=\"true\">⠿</span>\n      </button>\n      <span className={styles.glyph} aria-hidden=\"true\">\n        {icon}\n      </span>\n      <span className={styles.label}>{label}</span>\n      <span className={styles.rowActions}>{actions}</span>\n    </li>\n  )\n}\n","import type { ReactNode } from \"react\"\nimport type { ToolbarCommandId, ToolbarItem } from \"../types\"\nimport { DEFAULT_ICONS } from \"../toolbar/icons\"\nimport { BUILTIN_LABELS } from \"../toolbar/labels\"\n\n/** The `\"|\"` separator slot. */\nexport const SEPARATOR = \"|\" as const\n\nexport function isSeparator(item: ToolbarItem): item is \"|\" {\n  return item === SEPARATOR\n}\n\n/** Stable identity of a non-separator item; `null` for a separator. */\nexport function itemId(item: ToolbarItem): string | null {\n  if (isSeparator(item)) return null\n  return typeof item === \"string\" ? item : item.id\n}\n\n/** React key for a slot — separators fall back to their position. */\nexport function itemKey(item: ToolbarItem, index: number): string {\n  return itemId(item) ?? `separator-${index}`\n}\n\ninterface Display {\n  /** `null` for a separator. */\n  id: string | null\n  label: string\n  icon: ReactNode\n}\n\n/** Icon + label for a slot, honouring a consumer `icons` override for built-ins. */\nexport function resolveDisplay(\n  item: ToolbarItem,\n  icons?: Partial<Record<ToolbarCommandId, ReactNode>>,\n): Display {\n  if (isSeparator(item)) return { id: null, label: \"Separator\", icon: null }\n  if (typeof item !== \"string\") return { id: item.id, label: item.title, icon: item.icon }\n  return {\n    id: item,\n    label: BUILTIN_LABELS[item] ?? item,\n    icon: icons?.[item] ?? DEFAULT_ICONS[item] ?? null,\n  }\n}\n\n/** Palette entries not already on the bar (matched by id; separators excluded). */\nexport function availableNotOnBar(\n  available: readonly ToolbarItem[],\n  onBar: readonly ToolbarItem[],\n): ToolbarItem[] {\n  const used = new Set(onBar.map(itemId).filter((id): id is string => id !== null))\n  return available.filter((item) => {\n    const id = itemId(item)\n    return id !== null && !used.has(id)\n  })\n}\n\nexport function move<T>(arr: readonly T[], from: number, to: number): T[] {\n  if (to < 0 || to >= arr.length || from === to) return arr.slice()\n  const next = arr.slice()\n  const [picked] = next.splice(from, 1)\n  next.splice(to, 0, picked as T)\n  return next\n}\n\nexport function removeAt<T>(arr: readonly T[], index: number): T[] {\n  const next = arr.slice()\n  next.splice(index, 1)\n  return next\n}\n\nexport function append<T>(arr: readonly T[], value: T): T[] {\n  return [...arr, value]\n}\n","import { useId, useState } from \"react\"\nimport type { ReactNode } from \"react\"\nimport {\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\"\nimport {\n  SortableContext,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport type { ToolbarCommandId, ToolbarItem } from \"../types\"\nimport { DEFAULT_TOOLBAR_ITEMS } from \"../toolbar/config\"\nimport { ALL_BUILTIN_IDS } from \"../toolbar/labels\"\nimport styles from \"./StyloToolbarSettings.module.css\"\nimport { SortableRow } from \"./SortableRow\"\nimport {\n  append,\n  availableNotOnBar,\n  itemKey,\n  move,\n  removeAt,\n  resolveDisplay,\n  SEPARATOR,\n} from \"./items\"\n\nexport interface StyloToolbarSettingsProps {\n  /** The toolbar items — the same array passed to `<Stylo toolbar={{ items }}>`. */\n  value: ToolbarItem[]\n  /** Called with the next items array on every change. */\n  onChange: (next: ToolbarItem[]) => void\n  /**\n   * Every item the user may pick from. Defaults to all built-in command ids;\n   * pass a list to add `ToolbarCustomItem`s or to hold some built-ins back.\n   */\n  available?: ToolbarItem[]\n  /** Per-id glyph overrides, matching `<Stylo icons>`. */\n  icons?: Partial<Record<ToolbarCommandId, ReactNode>>\n  /** Extra class on the root element. */\n  className?: string\n}\n\n/**\n * A keyboard-accessible editor for the formatting bar's `items`. Controlled:\n * the host owns `value`, persists it, and feeds it to both this component and\n * `<Stylo>`.\n *\n * Reorder a row by dragging its ⠿ handle, or focus the handle and use\n * Space + Arrow keys (`@dnd-kit`'s keyboard sensor). The ✕ / Add buttons move\n * items between the two lists. `@dnd-kit/core`, `/sortable`, and `/utilities`\n * are optional peer dependencies of this entry point.\n */\nexport function StyloToolbarSettings({\n  value,\n  onChange,\n  available,\n  icons,\n  className,\n}: StyloToolbarSettingsProps) {\n  const barHeadId = useId()\n  const availHeadId = useId()\n  const [message, setMessage] = useState(\"\")\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),\n  )\n\n  const paletteItems = availableNotOnBar(available ?? ALL_BUILTIN_IDS, value)\n  const barIds = value.map((_, i) => String(i))\n\n  function onDragEnd({ active, over }: DragEndEvent) {\n    if (!over || active.id === over.id) return\n    const from = Number(active.id)\n    const to = Number(over.id)\n    const label = resolveDisplay(value[from]!, icons).label\n    onChange(move(value, from, to))\n    setMessage(`${label} moved to position ${to + 1} of ${value.length}`)\n  }\n\n  function removeSlot(index: number) {\n    const label = resolveDisplay(value[index]!, icons).label\n    onChange(removeAt(value, index))\n    setMessage(`${label} removed from the bar`)\n  }\n\n  function add(item: ToolbarItem) {\n    onChange(append(value, item))\n    setMessage(`${resolveDisplay(item, icons).label} added to the bar`)\n  }\n\n  function reset() {\n    onChange([...DEFAULT_TOOLBAR_ITEMS])\n    setMessage(\"Toolbar reset to the default set\")\n  }\n\n  const dragAnnounce = (id: string | number, verb: string) =>\n    `${resolveDisplay(value[Number(id)]!, icons).label} ${verb}`\n\n  return (\n    <div className={[styles.root, className].filter(Boolean).join(\" \")}>\n      <section className={styles.col}>\n        <h3 className={styles.colHead} id={barHeadId}>\n          On the bar\n        </h3>\n        <DndContext\n          sensors={sensors}\n          collisionDetection={closestCenter}\n          onDragEnd={onDragEnd}\n          accessibility={{\n            announcements: {\n              onDragStart: ({ active }) => dragAnnounce(active.id, \"picked up\"),\n              onDragOver: ({ active, over }) =>\n                over ? `${dragAnnounce(active.id, \"is over position\")} ${Number(over.id) + 1}` : \"\",\n              onDragEnd: ({ active, over }) =>\n                over\n                  ? `${dragAnnounce(active.id, \"dropped at position\")} ${Number(over.id) + 1}`\n                  : dragAnnounce(active.id, \"dropped\"),\n              onDragCancel: ({ active }) => dragAnnounce(active.id, \"drag cancelled\"),\n            },\n          }}\n        >\n          <SortableContext items={barIds} strategy={verticalListSortingStrategy}>\n            <ul className={styles.list} aria-labelledby={barHeadId}>\n              {value.map((item, i) => {\n                const { icon, label } = resolveDisplay(item, icons)\n                return (\n                  <SortableRow\n                    key={itemKey(item, i)}\n                    id={String(i)}\n                    label={label}\n                    icon={icon}\n                    position={i + 1}\n                    count={value.length}\n                    actions={\n                      <button\n                        type=\"button\"\n                        className={styles.iconButton}\n                        title=\"Remove\"\n                        aria-label={`Remove ${label} from the bar`}\n                        onClick={() => removeSlot(i)}\n                      >\n                        ✕\n                      </button>\n                    }\n                  />\n                )\n              })}\n            </ul>\n          </SortableContext>\n        </DndContext>\n        <div className={styles.footer}>\n          <button type=\"button\" className={styles.textButton} onClick={() => add(SEPARATOR)}>\n            Add separator\n          </button>\n          <button type=\"button\" className={styles.textButton} onClick={reset}>\n            Reset to default\n          </button>\n        </div>\n      </section>\n\n      <section className={styles.col}>\n        <h3 className={styles.colHead} id={availHeadId}>\n          Available\n        </h3>\n        <ul className={styles.list} aria-labelledby={availHeadId}>\n          {paletteItems.length === 0 && (\n            <li className={styles.empty}>Every button is on the bar.</li>\n          )}\n          {paletteItems.map((item, i) => {\n            const { icon, label } = resolveDisplay(item, icons)\n            return (\n              <li key={itemKey(item, i)} className={styles.row}>\n                <span className={styles.glyph} aria-hidden=\"true\">\n                  {icon}\n                </span>\n                <span className={styles.label}>{label}</span>\n                <span className={styles.rowActions}>\n                  <button\n                    type=\"button\"\n                    className={styles.textButton}\n                    aria-label={`Add ${label} to the bar`}\n                    onClick={() => add(item)}\n                  >\n                    Add\n                  </button>\n                </span>\n              </li>\n            )\n          })}\n        </ul>\n      </section>\n\n      <div aria-live=\"polite\" className={styles.srOnly}>\n        {message}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,264 @@
+import type { ReactNode } from "react";
+import type { Language, LanguageDescription } from "@codemirror/language";
+import type { EditorState } from "@codemirror/state";
+import type { EditorView } from "@codemirror/view";
+export type StyloMode = "in-place" | "source" | "preview" | "split";
+/**
+ * How `preview` (and the preview pane of `split`) treats the leading `---` YAML
+ * block. `"hidden"` (default) drops it from the render; `"code"` renders it as a
+ * styled `<pre class="stylo-frontmatter">` a consumer can restyle with its own
+ * CSS. A parsed key/value panel is deferred (ADR-001, needs a YAML parser).
+ */
+export type FrontmatterDisplay = "hidden" | "code";
+/**
+ * Built-in toolbar command identifiers. In a `ToolbarConfig["items"]` list,
+ * `"|"` inserts a visual separator. See ADR-002 §2.
+ */
+export type ToolbarCommandId = "undo" | "redo" | "save" | "search" | "h1" | "h2" | "h3" | "body" | "bold" | "italic" | "strike" | "underline" | "code" | "codeBlock" | "link" | "wikilink" | "quote" | "bulletList" | "orderedList" | "task" | "hr" | "frontmatter" | "table" | "math" | "mathBlock";
+/**
+ * A consumer-supplied toolbar button. Mixed into `ToolbarConfig["items"]`
+ * alongside the built-in ids. It runs against the same live `EditorView` the
+ * built-ins do; `isActive` / `disabled` are read back from the state on every
+ * selection, key, and pointer change, exactly like a built-in.
+ *
+ * No `keys` field: built-in shortcuts are compiled into CodeMirror's keymap at
+ * editor construction, so a custom binding would need its own keymap. Bind it
+ * yourself against `getView()` for now.
+ */
+export interface ToolbarCustomItem {
+    /**
+     * Stable identity, also the React key. Must not collide with a built-in id
+     * (`bold`, `h1`, …) or another custom item.
+     */
+    id: string;
+    /** Tooltip and accessible label. */
+    title: string;
+    /** Button content — an inline SVG, a glyph, a short label. */
+    icon: ReactNode;
+    /** Run against the live view. The return value is ignored. */
+    run: (view: EditorView) => void;
+    /** Reflected as the button's pressed state (`aria-pressed`, `data-active`). */
+    isActive?: (state: EditorState) => boolean;
+    /** When true, the button is rendered `disabled`. */
+    disabled?: (state: EditorState) => boolean;
+}
+/** One rendered slot: a built-in id, a `"|"` separator, or a custom button. */
+export type ToolbarItem = ToolbarCommandId | "|" | ToolbarCustomItem;
+export interface ToolbarConfig {
+    /**
+     * Ordered toolbar slots — built-in command ids, `"|"` separators, and
+     * {@link ToolbarCustomItem} objects, in any order. Omit for the full default
+     * bar.
+     */
+    items?: ToolbarItem[];
+    /**
+     * Wrap or replace the rendered bar. `bar` is the built-in
+     * `<div role="toolbar">` element; return it wrapped, with extra chrome
+     * appended, or ignore it entirely and return your own. `view` is `null` until
+     * the surface has mounted.
+     */
+    render?: (bar: ReactNode, ctx: {
+        view: EditorView | null;
+    }) => ReactNode;
+    /**
+     * Fix the bar to an edge of the **window** instead of wherever `<Stylo>`
+     * sits on the page. `"bottom"` (or `true`) rides above the on-screen
+     * keyboard, tracked via the `visualViewport` API; `"top"` pins to the top
+     * edge, which needs no keyboard tracking and can't be covered by it or by a
+     * platform's own input accessory bar. Off (`false`, the default) is right
+     * for a small embedded field; a host opts in deliberately for a
+     * full-screen editor. See the toolbar reference's "On touch" section.
+     */
+    sticky?: boolean | "top" | "bottom";
+    /**
+     * When `sticky` is set, whether the bar stays on screen the whole time
+     * (`"consistent"`, the default) or only while the editing surface actually
+     * has focus (`"dynamic"`) — faded out otherwise, so it doesn't sit over the
+     * content while the caret is elsewhere. Ignored when `sticky` is off.
+     */
+    stickyVisibility?: "consistent" | "dynamic";
+}
+/**
+ * Grammars for fenced-code sub-highlighting, forwarded verbatim to
+ * `@codemirror/lang-markdown`. Stylo ships none by default — a consumer opts in
+ * with exactly the set they want (`codeLanguages={languages}` from
+ * `@codemirror/language-data`, or a hand-built list). Affects the CodeMirror
+ * surfaces only (`source`, `split`, `in-place`); `preview` is a separate
+ * pipeline. See the ADR-001 amendment.
+ */
+export type CodeLanguages = readonly LanguageDescription[] | ((info: string) => Language | LanguageDescription | null);
+/**
+ * Per-construct on/off switches for the in-place canvas. Each key defaults to
+ * `true`; setting one `false` leaves that construct as plain source — no
+ * decoration, no cursor-reveal behaviour. See ADR-005.
+ */
+export interface InPlaceDecorationToggles {
+    headings?: boolean;
+    emphasis?: boolean;
+    links?: boolean;
+    wikilinks?: boolean;
+    math?: boolean;
+    lists?: boolean;
+    tasks?: boolean;
+    blockquote?: boolean;
+    horizontalRule?: boolean;
+    code?: boolean;
+    frontmatter?: boolean;
+    tables?: boolean;
+}
+/**
+ * How the in-place canvas handles editing a table.
+ * `"source"` (default) reveals the aligned pipe source under the caret;
+ * `"cells"` keeps the rendered `<table>` and edits its cells in place.
+ */
+export type TableEditing = "source" | "cells";
+/**
+ * Whether the in-place canvas shows a construct's Markdown markers when the
+ * caret is on its line. `"caret"` (default) reveals them for editing and
+ * re-hides them on the way out — Obsidian's Live Preview. `"never"` keeps every
+ * inline marker hidden at all times; formatting is changed through the toolbar,
+ * the right-click menu, shortcuts, and autoformat-on-type instead. See ADR-007;
+ * `"never"` is being rolled out in stages.
+ */
+export type RevealMode = "caret" | "never";
+/**
+ * What appears when text is selected in the in-place canvas. `"menu"` (default)
+ * puts the inline-formatting group in the right-click menu and shows no floating
+ * bar; `"bar"` shows a floating bar above the selection and drops that group
+ * from the menu so nothing is doubled; `"none"` shows neither and leaves the
+ * main toolbar as the only formatting surface. The toolbar is independent of
+ * this setting — it is always available (unless hidden via `toolbar`) and always
+ * acts on the selection.
+ */
+export type SelectionUI = "menu" | "bar" | "none";
+/**
+ * The right-click menu's top-level groups. `link` is the internal / external
+ * link field rows; `format` the inline-mark submenu; `paragraph` the block-type
+ * submenu; `insert` the new-block submenu; `clipboard` cut / copy / paste.
+ */
+export type MenuGroupId = "link" | "format" | "paragraph" | "insert" | "clipboard";
+export interface ContextMenuConfig {
+    /**
+     * Which top-level groups the menu shows, in order. Omit for all five in their
+     * default order. `link` and `format` still yield to `selectionUI` when it is
+     * not `"menu"` (they move to the floating bar / toolbar).
+     */
+    groups?: MenuGroupId[];
+}
+export interface InPlaceConfig {
+    /** Which decoration types the in-place canvas renders. Read once, at mount. */
+    decorations?: InPlaceDecorationToggles;
+    /** Table editing mode (see `TableEditing`). Read once, at mount. */
+    table?: TableEditing;
+    /**
+     * Marker reveal behaviour (see `RevealMode`). Optional, defaults to
+     * `"caret"`. Read once, at mount.
+     */
+    reveal?: RevealMode;
+    /**
+     * Right-click a block for a context menu (inline actions on a selection,
+     * block + insert actions otherwise). `false` keeps the browser's own menu; an
+     * object picks and orders the menu's groups. Defaults to `true`. Read once,
+     * at mount.
+     */
+    contextMenu?: boolean | ContextMenuConfig;
+    /**
+     * What a non-empty selection offers (see `SelectionUI`). Defaults to
+     * `"menu"`. Read once, at mount.
+     */
+    selectionUI?: SelectionUI;
+    /**
+     * Which buttons the floating selection bar shows (`selectionUI: "bar"`), in
+     * order. Any of `bold` / `italic` / `strike` / `code` / `link` / `wikilink` /
+     * `math`. Omit for all seven. Read once, at mount.
+     */
+    selectionBarItems?: ToolbarCommandId[];
+}
+export interface StyloProps {
+    /** The canonical Markdown document. Stylo never holds a parsed model of it. */
+    value: string;
+    /** Called with the complete Markdown string on every edit. */
+    onChange: (next: string) => void;
+    /**
+     * Interaction layout. Defaults to `"in-place"` — the live decoration canvas.
+     * `"source"` is the plain surface and avoids loading the render chunk.
+     */
+    mode?: StyloMode;
+    /**
+     * Called with the full Markdown string when `Mod-s` is pressed on any editing
+     * surface; the browser's own save dialog is then suppressed. Omit it and
+     * `Mod-s` keeps its default browser behaviour. Stylo holds no dirty state —
+     * `value` is yours, so compare it against your last-saved copy.
+     */
+    onSave?: (value: string) => void;
+    /**
+     * Called on mount and whenever the leading `---` YAML block changes, with its
+     * inner text (no fences), or `null` when there is no block. Stylo does not
+     * parse it — pass `raw` to your own YAML parser for a structured panel. The
+     * same split is available synchronously as the exported `splitFrontmatter`.
+     */
+    onFrontmatter?: (raw: string | null) => void;
+    /** Invoked when a `[[wikilink]]` is activated in the preview or in-place canvas. */
+    onWikiLinkClick?: (target: string) => void;
+    /**
+     * Invoked by the in-place link editor's "Open link" action with the link's
+     * `href`. Stylo does not navigate on its own.
+     */
+    onLinkClick?: (href: string) => void;
+    /** Configures the in-place canvas (ADR-005). Applied when it mounts. */
+    inPlace?: InPlaceConfig;
+    /**
+     * How `preview` (and `split`'s preview pane) shows the leading `---` YAML
+     * block. `"hidden"` (default) drops it; `"code"` renders it as a styled
+     * `<pre class="stylo-frontmatter">`.
+     */
+    frontmatter?: FrontmatterDisplay;
+    /**
+     * Grammars for fenced-code sub-highlighting on the CodeMirror surfaces
+     * (`source`, `split`, `in-place`). None by default. Read once, at mount.
+     */
+    codeLanguages?: CodeLanguages;
+    /**
+     * Formatting toolbar above the editing surface (`source`, `in-place`,
+     * `split`; never `preview`). Omit or `true` for the default bar, `false` to
+     * hide it, or an object to choose and order the buttons. See ADR-002 §2.
+     */
+    toolbar?: boolean | ToolbarConfig;
+    /**
+     * Replace individual toolbar glyphs, keyed by command id. Any id left out
+     * keeps its built-in inline-SVG icon — Stylo ships no icon dependency.
+     */
+    icons?: Partial<Record<ToolbarCommandId, ReactNode>>;
+    /** Render the source surface read-only. */
+    readOnly?: boolean;
+    /** Placeholder text shown when the document is empty (source surface). */
+    placeholder?: string;
+    /** Extra class on the root element, alongside the internal classes. */
+    className?: string;
+}
+/**
+ * Imperative handle exposed on a `ref` to `<Stylo>`. Every method is a no-op —
+ * returning `null` / `false` where it has a return value — in `preview` mode or
+ * before the editing surface has mounted, since there is no editor then.
+ */
+export interface StyloHandle {
+    /** Move keyboard focus into the editing surface. */
+    focus(): void;
+    /**
+     * Put the caret at the start of the first ATX heading (`#` … `######`) whose
+     * text matches `text` (trimmed, case-insensitive) and scroll it to the top of
+     * the viewport. Returns `true` when a heading matched.
+     */
+    scrollToHeading(text: string): boolean;
+    /**
+     * Replace the current selection — or insert at the caret when the selection is
+     * empty — with `md`. No effect on a `readOnly` surface.
+     */
+    insertAtCursor(md: string): void;
+    /**
+     * The underlying CodeMirror `EditorView`, or `null` in `preview` mode or
+     * before mount. An escape hatch: not covered by semver.
+     */
+    getView(): EditorView | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}