@firedrill-tools/notion 0.1.1

package/firedrill/tools/notion/app/site/editors.js

@@ -0,0 +1,320 @@
+// Popover editors for page property values (the same controls back the property panel and table cells),
+// the emoji picker and the "/" block menu. Every editor resolves to the Notion property value to write.
+import { icon } from "./icons.js";
+import { EMOJIS, OPTION_COLORS, checkbox, pill, plain, textToRich } from "./rich.js";
+import { state } from "./state.js";
+import { $$, call, closePopovers, el, menuList, openPopover, textButton } from "./ui.js";
+
+const TEXT_TYPES = ["rich_text", "url", "email", "phone_number", "number"];
+
+/**
+ * Open the right editor for `definition` (data source property schema entry) anchored at `anchor`.
+ * `current` is the rendered property object; `onChange(valueObject)` receives e.g. `{ select: { name } }`.
+ */
+export function openPropertyEditor(anchor, definition, current, onChange, options = {}) {
+  const type = definition.type;
+  const value = current?.[type];
+  if (TEXT_TYPES.includes(type)) return textEditor(anchor, definition, value, onChange);
+  if (type === "date") return dateEditor(anchor, value, onChange);
+  if (type === "select" || type === "status") return optionEditor(anchor, definition, value, onChange, { multi: false });
+  if (type === "multi_select") return optionEditor(anchor, definition, value ?? [], onChange, { multi: true });
+  if (type === "people") return peopleEditor(anchor, value ?? [], onChange);
+  if (type === "relation") return relationEditor(anchor, definition, value ?? [], onChange, options);
+  if (type === "checkbox") return onChange({ checkbox: !(value === true) });
+  return undefined;
+}
+
+function textEditor(anchor, definition, value, onChange) {
+  const type = definition.type;
+  const initial = type === "rich_text" ? plain(value) : value === null || value === undefined ? "" : String(value);
+  const box = el("div", { class: "editor-text" });
+  const input = type === "rich_text" ? el("textarea", { class: "editor-input", attrs: { rows: "3", "aria-label": definition.name } }) : el("input", { class: "editor-input", attrs: { type: type === "number" ? "number" : "text", "aria-label": definition.name, step: "any" } });
+  input.value = initial;
+  const commit = () => {
+    const raw = input.value.trim();
+    if (raw === initial.trim()) return closePopovers();
+    let next;
+    if (type === "rich_text") next = { rich_text: textToRich(raw) };
+    else if (type === "number") next = { number: raw === "" ? null : Number(raw) };
+    else next = { [type]: raw === "" ? null : raw };
+    closePopovers();
+    onChange(next);
+  };
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && !(type === "rich_text" && event.shiftKey)) {
+      event.preventDefault();
+      commit();
+    }
+  });
+  box.append(input, el("div", { class: "editor-hint", text: type === "rich_text" ? "Shift+Enter for a new line · Enter to save" : "Enter to save · Esc to cancel" }));
+  const popover = openPopover(anchor, box, { width: 300, onClose: undefined });
+  input.focus();
+  input.select?.();
+  return popover;
+}
+
+function dateEditor(anchor, value, onChange) {
+  const box = el("div", { class: "editor-date" });
+  const start = el("input", { class: "editor-input", attrs: { type: "date", "aria-label": "Start date" } });
+  const end = el("input", { class: "editor-input", attrs: { type: "date", "aria-label": "End date" } });
+  start.value = value?.start?.slice(0, 10) ?? "";
+  end.value = value?.end?.slice(0, 10) ?? "";
+  const endRow = el("label", { class: "editor-row" }, [el("span", { class: "editor-label", text: "End date" }), end]);
+  endRow.hidden = !value?.end;
+  const toggle = textButton(value?.end ? "Remove end date" : "Add end date", { class: "link", onClick: () => { endRow.hidden = !endRow.hidden; toggle.querySelector("span:last-child").textContent = endRow.hidden ? "Add end date" : "Remove end date"; if (endRow.hidden) end.value = ""; } });
+  const save = textButton("Save", { class: "primary", onClick: () => { closePopovers(); onChange({ date: start.value ? { start: start.value, end: end.value && !endRow.hidden ? end.value : null } : null }); } });
+  const clear = textButton("Clear", { onClick: () => { closePopovers(); onChange({ date: null }); } });
+  box.append(el("label", { class: "editor-row" }, [el("span", { class: "editor-label", text: "Date" }), start]), endRow, toggle, el("div", { class: "editor-actions" }, [clear, save]));
+  return openPopover(anchor, box, { width: 300 });
+}
+
+function optionEditor(anchor, definition, value, onChange, { multi }) {
+  const options = definition[definition.type]?.options ?? definition.config?.options ?? [];
+  const selectedIds = new Set(multi ? value.map((option) => option.id) : value ? [value.id] : []);
+  const box = el("div", { class: "editor-options" });
+  const chips = el("div", { class: "editor-chips" });
+  const search = el("input", { class: "editor-search", attrs: { type: "text", placeholder: multi ? "Search or create an option…" : "Search for an option…", "aria-label": "Search options" } });
+  const list = el("div", { class: "picker-list", attrs: { role: "listbox" } });
+  const renderChips = () => {
+    chips.replaceChildren();
+    for (const option of options.filter((candidate) => selectedIds.has(candidate.id))) {
+      const chip = pill(option, { status: definition.type === "status" });
+      const remove = el("button", { class: "chip-remove", attrs: { type: "button", "aria-label": `Remove ${option.name}` } }, icon("close"));
+      remove.addEventListener("click", () => { selectedIds.delete(option.id); commit(true); });
+      chip.append(remove);
+      chips.append(chip);
+    }
+    chips.hidden = chips.childElementCount === 0;
+  };
+  const commit = (keepOpen = false) => {
+    if (multi) onChange({ multi_select: options.filter((option) => selectedIds.has(option.id)).map((option) => ({ id: option.id })) });
+    else {
+      const chosen = options.find((option) => selectedIds.has(option.id));
+      onChange({ [definition.type]: chosen ? { id: chosen.id } : null });
+    }
+    if (!keepOpen) closePopovers();
+    else render();
+  };
+  const render = () => {
+    renderChips();
+    list.replaceChildren();
+    const needle = search.value.trim().toLowerCase();
+    const visible = options.filter((option) => option.name.toLowerCase().includes(needle));
+    list.append(el("div", { class: "picker-heading", text: "Select an option" }));
+    for (const option of visible) {
+      const row = el("button", { class: `picker-item ${selectedIds.has(option.id) ? "selected" : ""}`.trim(), attrs: { type: "button", role: "option", "aria-selected": String(selectedIds.has(option.id)) } });
+      row.append(pill(option, { status: definition.type === "status" }));
+      if (selectedIds.has(option.id)) row.append(icon("check", "picker-check"));
+      row.addEventListener("click", () => {
+        if (multi) {
+          if (selectedIds.has(option.id)) selectedIds.delete(option.id);
+          else selectedIds.add(option.id);
+          commit(true);
+        } else {
+          selectedIds.clear();
+          selectedIds.add(option.id);
+          commit();
+        }
+      });
+      list.append(row);
+    }
+    if (multi && needle.length > 0 && !options.some((option) => option.name.toLowerCase() === needle)) {
+      const create = el("button", { class: "picker-item create", attrs: { type: "button" } }, [el("span", { text: "Create " }), pill({ name: search.value.trim(), color: OPTION_COLORS[(search.value.length % (OPTION_COLORS.length - 1)) + 1] })]);
+      create.addEventListener("click", () => {
+        // A new option name is accepted by the Tool, which adds it to the schema exactly as the product does.
+        const names = options.filter((option) => selectedIds.has(option.id)).map((option) => ({ id: option.id }));
+        closePopovers();
+        onChange({ multi_select: [...names, { name: search.value.trim() }] });
+      });
+      list.append(create);
+    }
+    if (visible.length === 0 && !(multi && needle.length > 0)) list.append(el("div", { class: "picker-empty", text: "No options" }));
+    if (!multi && selectedIds.size > 0) {
+      const clear = el("button", { class: "picker-item clear", attrs: { type: "button" } }, [icon("close", "picker-icon"), el("span", { text: "Clear" })]);
+      clear.addEventListener("click", () => { selectedIds.clear(); commit(); });
+      list.append(clear);
+    }
+  };
+  search.addEventListener("input", render);
+  box.append(chips, search, list);
+  render();
+  return openPopover(anchor, box, { width: 300 });
+}
+
+function peopleEditor(anchor, value, onChange) {
+  const persons = [...state.users.values()].filter((user) => user.type === "person");
+  const selected = new Set(value.map((user) => user.id));
+  const box = el("div", { class: "editor-options" });
+  const search = el("input", { class: "editor-search", attrs: { type: "text", placeholder: "Search for a person…", "aria-label": "Search people" } });
+  const list = el("div", { class: "picker-list", attrs: { role: "listbox" } });
+  const commit = () => onChange({ people: [...selected].map((id) => ({ id })) });
+  const render = () => {
+    list.replaceChildren();
+    const needle = search.value.trim().toLowerCase();
+    if (state.usersDenied) {
+      list.append(el("div", { class: "picker-empty", text: "This integration can't list workspace users (no user-information capability)." }));
+      return;
+    }
+    if (state.usersTruncated) list.append(el("div", { class: "picker-empty", text: `Showing the first ${state.users.size} workspace members.` }));
+    list.append(el("div", { class: "picker-heading", text: "Select a person" }));
+    for (const user of persons.filter((user) => user.name.toLowerCase().includes(needle))) {
+      const row = el("button", { class: `picker-item ${selected.has(user.id) ? "selected" : ""}`.trim(), attrs: { type: "button", role: "option", "aria-selected": String(selected.has(user.id)) } });
+      const initial = el("span", { class: "avatar small", text: user.name.charAt(0).toUpperCase() });
+      row.append(initial, el("span", { class: "picker-label", text: user.name }), el("span", { class: "picker-sub", text: user.person?.email ?? (user.is_guest ? "Guest" : "") }));
+      if (selected.has(user.id)) row.append(icon("check", "picker-check"));
+      row.addEventListener("click", () => {
+        if (selected.has(user.id)) selected.delete(user.id);
+        else selected.add(user.id);
+        commit();
+        render();
+      });
+      list.append(row);
+    }
+  };
+  search.addEventListener("input", render);
+  box.append(search, list);
+  render();
+  return openPopover(anchor, box, { width: 300 });
+}
+
+function relationEditor(anchor, definition, value, onChange, options) {
+  const config = definition.relation ?? definition.config ?? {};
+  const sourceId = config.data_source_id;
+  const selected = new Set(value.map((ref) => ref.id));
+  const box = el("div", { class: "editor-options" });
+  const search = el("input", { class: "editor-search", attrs: { type: "text", placeholder: "Search for a page…", "aria-label": "Search pages" } });
+  const list = el("div", { class: "picker-list", attrs: { role: "listbox" } });
+  let candidates = [];
+  let loading = true;
+  let failure;
+  const titleOf = (page) => {
+    const property = Object.values(page.properties).find((entry) => entry.type === "title");
+    const text = property ? plain(property.title) : "";
+    return text || "Untitled";
+  };
+  const commit = () => onChange({ relation: [...selected].map((id) => ({ id })) });
+  const render = () => {
+    list.replaceChildren();
+    if (loading) {
+      list.append(el("div", { class: "picker-empty", text: "Loading…" }));
+      return;
+    }
+    if (failure) {
+      list.append(el("div", { class: "picker-empty", text: failure }));
+      return;
+    }
+    const needle = search.value.trim().toLowerCase();
+    list.append(el("div", { class: "picker-heading", text: "Link to page" }));
+    const visible = candidates.filter((page) => titleOf(page).toLowerCase().includes(needle));
+    for (const page of visible) {
+      const row = el("button", { class: `picker-item ${selected.has(page.id) ? "selected" : ""}`.trim(), attrs: { type: "button", role: "option", "aria-selected": String(selected.has(page.id)) } });
+      row.append(el("span", { class: "picker-emoji", text: page.icon?.type === "emoji" ? page.icon.emoji : "" }), el("span", { class: "picker-label", text: titleOf(page) }));
+      if (selected.has(page.id)) row.append(icon("check", "picker-check"));
+      row.addEventListener("click", () => {
+        if (selected.has(page.id)) selected.delete(page.id);
+        else selected.add(page.id);
+        commit();
+        render();
+      });
+      list.append(row);
+    }
+    if (visible.length === 0) list.append(el("div", { class: "picker-empty", text: "No pages found" }));
+  };
+  search.addEventListener("input", render);
+  box.append(search, list);
+  render();
+  const popover = openPopover(anchor, box, { width: 320 });
+  void (async () => {
+    try {
+      const result = await call("data-sources.query", { data_source_id: sourceId, page_size: 100, filter_properties: ["title"], sorts: [{ timestamp: "last_edited_time", direction: "descending" }] });
+      candidates = result.results;
+      if (result.has_more) options.onNotice?.(`Showing the ${result.results.length} most recently edited pages of the related database; search to narrow the list.`);
+    } catch (error) {
+      failure = error?.message ?? "Could not load the related pages.";
+    }
+    loading = false;
+    if (popover.isConnected) render();
+  })();
+  return popover;
+}
+
+// ---------------------------------------------------------------------------------------------
+// Emoji picker (page / database icons)
+// ---------------------------------------------------------------------------------------------
+
+export function openEmojiPicker(anchor, current, onPick) {
+  const box = el("div", { class: "emoji-picker" });
+  const tabs = el("div", { class: "picker-tabs" }, [el("span", { class: "picker-tab active", text: "Emoji" }), el("span", { class: "picker-tab", text: "Icons" }), el("span", { class: "picker-tab", text: "Upload" })]);
+  const remove = textButton("Remove", { onClick: () => { closePopovers(); onPick(null); } });
+  remove.disabled = current === undefined;
+  const search = el("input", { class: "editor-search", attrs: { type: "text", placeholder: "Filter…", "aria-label": "Filter emoji" } });
+  const grid = el("div", { class: "emoji-grid", attrs: { role: "listbox", "aria-label": "Emoji" } });
+  const render = () => {
+    grid.replaceChildren();
+    for (const emoji of EMOJIS) {
+      const button = el("button", { class: `emoji-cell ${emoji === current ? "selected" : ""}`.trim(), text: emoji, attrs: { type: "button", role: "option", "aria-selected": String(emoji === current), "aria-label": emoji } });
+      button.addEventListener("click", () => { closePopovers(); onPick(emoji); });
+      grid.append(button);
+    }
+  };
+  render();
+  box.append(el("div", { class: "picker-head" }, [tabs, remove]), search, el("div", { class: "picker-heading", text: "Emoji" }), grid);
+  return openPopover(anchor, box, { width: 352 });
+}
+
+// ---------------------------------------------------------------------------------------------
+// "/" block menu
+// ---------------------------------------------------------------------------------------------
+
+export const BLOCK_MENU = [
+  { type: "paragraph", label: "Text", description: "Just start writing with plain text.", icon: "block_text" },
+  { type: "heading_1", label: "Heading 1", description: "Big section heading.", icon: "block_h1" },
+  { type: "heading_2", label: "Heading 2", description: "Medium section heading.", icon: "block_h2" },
+  { type: "heading_3", label: "Heading 3", description: "Small section heading.", icon: "block_h3" },
+  { type: "bulleted_list_item", label: "Bulleted list", description: "Create a simple bulleted list.", icon: "block_bullet" },
+  { type: "numbered_list_item", label: "Numbered list", description: "Create a list with numbering.", icon: "block_numbered" },
+  { type: "to_do", label: "To-do list", description: "Track tasks with a to-do list.", icon: "block_todo" },
+  { type: "toggle", label: "Toggle list", description: "Toggles can hide and show content inside.", icon: "block_toggle" },
+  { type: "quote", label: "Quote", description: "Capture a quote.", icon: "block_quote" },
+  { type: "callout", label: "Callout", description: "Make writing stand out.", icon: "block_callout" },
+  { type: "code", label: "Code", description: "Capture a code snippet.", icon: "block_code" },
+  { type: "divider", label: "Divider", description: "Visually divide blocks.", icon: "block_divider" },
+  { type: "page", label: "Page", description: "Embed a sub-page inside this page.", icon: "block_page" },
+];
+
+/** Block content object for a fresh block of `type` (the shape blocks.children.append accepts). */
+export function newBlockInput(type, text = "") {
+  if (type === "divider") return { type, divider: {} };
+  if (type === "code") return { type, code: { rich_text: textToRich(text), language: "plain text" } };
+  if (type === "callout") return { type, callout: { rich_text: textToRich(text), icon: { type: "emoji", emoji: "💡" } } };
+  if (type === "to_do") return { type, to_do: { rich_text: textToRich(text), checked: false } };
+  return { type, [type]: { rich_text: textToRich(text) } };
+}
+
+export function openBlockMenu(anchor, onPick, { filter = "" } = {}) {
+  const box = el("div", { class: "block-menu" });
+  const render = (needle) => {
+    box.replaceChildren();
+    const items = BLOCK_MENU.filter((item) => item.label.toLowerCase().includes(needle) || item.type.includes(needle));
+    if (items.length === 0) {
+      box.append(el("div", { class: "picker-empty", text: "No results" }));
+      return;
+    }
+    box.append(el("div", { class: "picker-heading", text: "Basic blocks" }));
+    box.append(menuList(items.map((item) => ({ label: item.label, description: item.description, icon: item.icon, onSelect: () => onPick(item.type) }))));
+  };
+  render(filter.toLowerCase());
+  const popover = openPopover(anchor, box, { width: 320, focusFirst: false });
+  popover.filter = (needle) => render(needle.toLowerCase());
+  return popover;
+}
+
+/** Focus the first menu item of the open block menu (Enter from the block that triggered it). */
+export function pickFirstMenuItem(popover) {
+  const first = $$(".menu-item:not(:disabled)", popover)[0];
+  first?.click();
+}
+
+export function checkboxControl(checked, onToggle, label) {
+  return checkbox(checked, { onToggle, label });
+}

package/firedrill/tools/notion/app/site/format-bar.js

@@ -0,0 +1,97 @@
+// Inline text toolbar shown over a text selection inside an editable block, as in the product.
+// Editing writes one plain rich-text run (see README), so marks, links, colors, AI and turn-into are shown in place and
+// open a "Not simulated by this Tool" panel. Comment opens the block's discussions, which the Tool serves.
+import { el, notSimulated } from "./ui.js";
+import { icon } from "./icons.js";
+
+const handlers = new WeakMap();
+let bar;
+let current;
+
+/** Register an editable block element with its in-scope actions ({ openComments }). */
+export function registerFormatTarget(element, actions) {
+  handlers.set(element, actions);
+  install();
+}
+
+const MARKS_TEXT = "Bold, italic, underline, strikethrough, inline code and colors are rich-text annotations. This app writes an edited block back as one plain text run, so formatting from the toolbar is not simulated by this Tool.";
+
+function glyphButton(label, text, className, shortcut, note) {
+  const button = el("button", { class: `format-btn ${className}`.trim(), title: shortcut ? `${label} ${shortcut}` : label, attrs: { type: "button", "aria-label": label } });
+  if (text) button.append(el("span", { class: "format-glyph", text }));
+  button.addEventListener("click", () => notSimulated(button, label, note ?? MARKS_TEXT));
+  return button;
+}
+
+function build() {
+  const element = el("div", { class: "format-bar", attrs: { role: "toolbar", "aria-label": "Text formatting" } });
+  const ai = glyphButton("Ask AI", "", "format-ai", "", "Notion AI editing is not part of the API subset this Tool serves.");
+  ai.append(icon("ai"), el("span", { class: "format-label", text: "Ask AI" }));
+  const turn = glyphButton("Turn into", "", "format-turn", "", "Changing a block's type in place is not part of the API subset this Tool serves; use / to insert a new block.");
+  turn.append(el("span", { class: "format-label", text: "Text" }), icon("chevron_down", "format-caret"));
+  const link = glyphButton("Link", "", "", "⌘K", "Links are rich-text annotations; this app writes edited blocks as plain text, so adding a link is not simulated by this Tool.");
+  link.append(icon("link"));
+  const comment = el("button", { class: "format-btn format-comment", title: "Comment ⌘⇧M", attrs: { type: "button", "aria-label": "Comment" } }, [icon("comment"), el("span", { class: "format-label", text: "Comment" })]);
+  comment.addEventListener("click", () => {
+    const actions = current && handlers.get(current);
+    hide();
+    actions?.openComments?.();
+  });
+  const color = glyphButton("Text color", "", "format-color", "⌘⇧H");
+  color.append(el("span", { class: "format-glyph", text: "A" }), icon("chevron_down", "format-caret"));
+  const more = glyphButton("More", "", "", "", "Mentions, equations and the rest of the selection menu are not simulated by this Tool.");
+  more.append(icon("more"));
+  const divider = () => el("span", { class: "format-divider", attrs: { "aria-hidden": "true" } });
+  element.append(
+    ai, divider(), turn, divider(), link, comment, divider(),
+    glyphButton("Bold", "B", "format-bold", "⌘B"),
+    glyphButton("Italicize", "i", "format-italic", "⌘I"),
+    glyphButton("Underline", "U", "format-underline", "⌘U"),
+    glyphButton("Strike-through", "S", "format-strike", "⌘⇧S"),
+    glyphButton("Mark as code", "<>", "format-code", "⌘E"),
+    color, divider(), more,
+  );
+  // Keep the text selection while the toolbar is used.
+  element.addEventListener("mousedown", (event) => event.preventDefault());
+  element.hidden = true;
+  document.body.append(element);
+  return element;
+}
+
+function hide() {
+  if (bar) bar.hidden = true;
+  current = undefined;
+}
+
+function update() {
+  const selection = document.getSelection();
+  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+    if (!bar?.contains(document.activeElement)) hide();
+    return;
+  }
+  const range = selection.getRangeAt(0);
+  const start = range.startContainer.parentElement?.closest?.(".block-text[contenteditable]") ?? (range.startContainer.nodeType === 1 ? range.startContainer.closest(".block-text[contenteditable]") : null);
+  if (!start || !handlers.has(start) || !start.contains(range.endContainer) || range.toString().trim() === "") {
+    hide();
+    return;
+  }
+  bar ??= build();
+  current = start;
+  bar.hidden = false;
+  const rect = range.getBoundingClientRect();
+  const width = bar.offsetWidth;
+  const left = Math.max(8, Math.min(window.innerWidth - width - 8, rect.left + rect.width / 2 - width / 2));
+  const top = rect.top - bar.offsetHeight - 8 < 8 ? rect.bottom + 8 : rect.top - bar.offsetHeight - 8;
+  bar.style.left = `${Math.round(left)}px`;
+  bar.style.top = `${Math.round(top)}px`;
+}
+
+let installed = false;
+function install() {
+  if (installed) return;
+  installed = true;
+  document.addEventListener("selectionchange", update);
+  window.addEventListener("resize", hide);
+  document.addEventListener("scroll", hide, true);
+  document.addEventListener("keydown", (event) => { if (event.key === "Escape") hide(); });
+}

package/firedrill/tools/notion/app/site/icons.js

@@ -0,0 +1,131 @@
+// Monochrome SVG glyphs drawn in the product's icon language (20 px grid, 1.6 px strokes, round caps).
+// Original paths for this package; rendered through the DOM API (never innerHTML with record data).
+const SVG = "http://www.w3.org/2000/svg";
+
+const STROKE = {
+  search: ["M9 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z", "M13 13l3.5 3.5"],
+  home: ["M3.5 9.5 10 4l6.5 5.5V16a1 1 0 0 1-1 1h-3.5v-4.5h-4V17H4.5a1 1 0 0 1-1-1V9.5Z"],
+  inbox: ["M4 4.5h12l1.5 7v4a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-4l1.5-7Z", "M2.5 11.5H7l1 2h4l1-2h4.5"],
+  settings: ["M10 7.25a2.75 2.75 0 1 1 0 5.5 2.75 2.75 0 0 1 0-5.5Z", "M8.6 3h2.8l.4 1.9 1.6.9 1.9-.6 1.4 2.4-1.5 1.3v1.8l1.5 1.3-1.4 2.4-1.9-.6-1.6.9-.4 1.9H8.6l-.4-1.9-1.6-.9-1.9.6-1.4-2.4 1.5-1.3v-1.8L3.3 7.6l1.4-2.4 1.9.6 1.6-.9L8.6 3Z"],
+  templates: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M4 8.5h12", "M8.5 8.5V16"],
+  trash: ["M4 5.5h12", "M8 5.5V4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.5", "M5.5 5.5 6.2 16a1 1 0 0 0 1 .9h5.6a1 1 0 0 0 1-.9l.7-10.5", "M8.5 8.5v5", "M11.5 8.5v5"],
+  invite: ["M8 9.5a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z", "M3 16.5c.4-2.9 2.4-4.5 5-4.5s4.6 1.6 5 4.5", "M15 7v5", "M12.5 9.5h5"],
+  compose: ["M11.5 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9", "M15.6 3.4a1.4 1.4 0 0 1 2 2L11 12l-2.8.8.8-2.8 6.6-6.6Z"],
+  plus: ["M10 4.5v11", "M4.5 10h11"],
+  close: ["M5.5 5.5l9 9", "M14.5 5.5l-9 9"],
+  chevron_down: ["M6 8l4 4 4-4"],
+  chevron_right: ["M8 6l4 4-4 4"],
+  chevron_left: ["M12 6l-4 4 4 4"],
+  double_chevron_left: ["M11 6l-4 4 4 4", "M16 6l-4 4 4 4"],
+  arrow_left: ["M16 10H4", "M9 5l-5 5 5 5"],
+  menu: ["M3.5 6h13", "M3.5 10h13", "M3.5 14h13"],
+  more: ["M5 10h.01", "M10 10h.01", "M15 10h.01"],
+  comment: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v6a1.5 1.5 0 0 1-1.5 1.5H9l-3.5 3v-3H5.5A1.5 1.5 0 0 1 4 11.5v-6Z"],
+  star: ["M10 3.5l2 4.2 4.5.6-3.3 3.2.8 4.5-4-2.2-4 2.2.8-4.5L3.5 8.3 8 7.7l2-4.2Z"],
+  star_filled: ["M10 3.5l2 4.2 4.5.6-3.3 3.2.8 4.5-4-2.2-4 2.2.8-4.5L3.5 8.3 8 7.7l2-4.2Z"],
+  share: ["M14 7.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z", "M6 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z", "M14 16.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z", "M7.8 9.1l4.4-2.6", "M7.8 10.9l4.4 2.6"],
+  clock: ["M10 3.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Z", "M10 6.5V10l2.5 1.5"],
+  help: ["M10 3.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Z", "M8 8a2 2 0 1 1 2.8 1.8c-.6.3-.8.6-.8 1.2v.5", "M10 14h.01"],
+  page: ["M6 3h5.5L15 6.5V16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z", "M11 3v4h4", "M7.5 10h5", "M7.5 13h5"],
+  database: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M4 8h12", "M4 12h12", "M8 8v8"],
+  table: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M4 8h12", "M4 12h12", "M8 8v8"],
+  board: ["M3.5 4.5h3.5v11H3.5z", "M8.25 4.5h3.5v8h-3.5z", "M13 4.5h3.5v6H13z"],
+  filter: ["M3.5 5h13", "M6 10h8", "M8.5 15h3"],
+  sort: ["M7 4v12", "M4 7l3-3 3 3", "M13 16V4", "M10 13l3 3 3-3"],
+  expand: ["M11 4h5v5", "M9 9l7-7", "M9 16H4v-5", "M11 9l-7 7"],
+  open: ["M11 4h5v5", "M16 4l-7 7", "M9 5H5.5A1.5 1.5 0 0 0 4 6.5v8A1.5 1.5 0 0 0 5.5 16h8a1.5 1.5 0 0 0 1.5-1.5V11"],
+  check: ["M4 10.5l4 4 8-9"],
+  restore: ["M4.5 8.5A6 6 0 1 1 6 14", "M4 4.5v4h4"],
+  drag: ["M7.5 5h.01", "M7.5 10h.01", "M7.5 15h.01", "M12.5 5h.01", "M12.5 10h.01", "M12.5 15h.01"],
+  move: ["M4 5.5A1.5 1.5 0 0 1 5.5 4H9l1.5 2h4A1.5 1.5 0 0 1 16 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M10 9v5", "M7.5 11.5 10 14l2.5-2.5"],
+  markdown: ["M3.5 5h13v10h-13z", "M6 12.5v-5l2 2.5 2-2.5v5", "M13 7.5v5", "M11.5 11l1.5 1.5 1.5-1.5"],
+  link: ["M8.5 11.5a3 3 0 0 0 4.2 0l2.3-2.3a3 3 0 0 0-4.2-4.2L9.6 6.2", "M11.5 8.5a3 3 0 0 0-4.2 0L5 10.8a3 3 0 0 0 4.2 4.2l1.2-1.2"],
+  lock: ["M5.5 9h9a1 1 0 0 1 1 1v5.5a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1Z", "M7 9V6.5a3 3 0 0 1 6 0V9"],
+  warning: ["M10 3.5 17 16H3l7-12.5Z", "M10 8v3.5", "M10 13.8h.01"],
+  refresh: ["M15.5 8A6 6 0 0 0 4.7 6.4", "M4.5 3.5v3.5H8", "M4.5 12a6 6 0 0 0 10.8 1.6", "M15.5 16.5V13H12"],
+  send: ["M3.5 10 16.5 4l-3 12.5-4-4.5-6-2Z", "M9.5 12l7-8"],
+  ai: ["M10 3v3", "M10 14v3", "M3 10h3", "M14 10h3", "M5.2 5.2l2 2", "M12.8 12.8l2 2", "M14.8 5.2l-2 2", "M7.2 12.8l-2 2"],
+  image: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M4.5 14l3.5-4 3 3 2-2 2.5 3", "M12.5 8h.01"],
+  learn: ["M3.5 6.5 10 3.5l6.5 3-6.5 3-6.5-3Z", "M6 8v4c0 1.2 1.8 2.5 4 2.5s4-1.3 4-2.5V8", "M16.5 6.5V11"],
+  text_color: ["M6 13.5 9.5 4.5h1l3.5 9", "M7.2 10.5h5.6", "M4 16.5h12"],
+  bolt: ["M11 2.5 4.5 11h5l-1 6.5L15.5 9h-5l.5-6.5Z"],
+  calendar: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M4 8.5h12", "M7.5 3v2.5", "M12.5 3v2.5"],
+  list_view: ["M4 6h.01", "M4 10h.01", "M4 14h.01", "M7 6h9.5", "M7 10h9.5", "M7 14h9.5"],
+  gallery: ["M3.5 4h5.5v5.5H3.5z", "M11 4h5.5v5.5H11z", "M3.5 11.5h5.5V17H3.5z", "M11 11.5h5.5V17H11z"],
+  timeline: ["M3.5 5.5h7", "M6.5 10h8", "M9.5 14.5h7"],
+  chart: ["M4 16.5h12.5", "M6 13.5V9", "M10 13.5V5", "M14 13.5V11"],
+  feed: ["M4 4.5h12v4H4z", "M4 11.5h12v4H4z"],
+  map: ["M3.5 5.5 7.5 4l5 2 4-1.5v10l-4 1.5-5-2-4 1.5v-10Z", "M7.5 4v10", "M12.5 6v10"],
+  teamspace: ["M7 9a2.25 2.25 0 1 0 0-4.5A2.25 2.25 0 0 0 7 9Z", "M13.5 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z", "M2.5 15.5c.4-2.4 2-3.8 4.5-3.8s4.1 1.4 4.5 3.8", "M12 11.8c.5-.2 1-.3 1.5-.3 2.1 0 3.4 1.3 3.8 3.5"],
+  // Property-type glyphs (the table header and property panel show one before each name).
+  prop_title: ["M4 15l3.5-9h1L12 15", "M5.3 12h5.4", "M14 8.5v6.5", "M12.5 12.7a1.6 1.6 0 1 0 1.5 1.5"],
+  prop_text: ["M3.5 6h13", "M3.5 10h13", "M3.5 14h8"],
+  prop_number: ["M7.5 3.5 6 16.5", "M13.5 3.5 12 16.5", "M4 7.5h13", "M3 12.5h13"],
+  prop_select: ["M10 3.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Z", "M7.5 10l1.8 1.8L13 8"],
+  prop_multi_select: ["M4 6h1.5", "M4 10h1.5", "M4 14h1.5", "M8 6h8.5", "M8 10h8.5", "M8 14h8.5"],
+  prop_status: ["M10 3.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Z", "M10 3.5a6.5 6.5 0 0 1 0 13Z"],
+  prop_date: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M4 8.5h12", "M7.5 3v2.5", "M12.5 3v2.5"],
+  prop_people: ["M10 9.5a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z", "M4.5 16.5c.5-2.9 2.6-4.5 5.5-4.5s5 1.6 5.5 4.5"],
+  prop_checkbox: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M7 10.2l2 2 4-4.4"],
+  prop_url: ["M8.5 11.5a3 3 0 0 0 4.2 0l2.3-2.3a3 3 0 0 0-4.2-4.2L9.6 6.2", "M11.5 8.5a3 3 0 0 0-4.2 0L5 10.8a3 3 0 0 0 4.2 4.2l1.2-1.2"],
+  prop_email: ["M3.5 5.5h13v9h-13z", "M3.5 6l6.5 5 6.5-5"],
+  prop_phone: ["M5 3.5h3l1.5 3.5-2 1.5a8 8 0 0 0 4 4l1.5-2 3.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5C8.6 16.5 3.5 11.4 3.5 5A1.5 1.5 0 0 1 5 3.5Z"],
+  prop_relation: ["M4 6h6", "M4 10h4", "M4 14h6", "M12 4l4 6-4 6"],
+  prop_created_time: ["M10 3.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Z", "M10 6.5V10l2.5 1.5"],
+  prop_last_edited_time: ["M10 3.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Z", "M10 6.5V10l2.5 1.5"],
+  prop_created_by: ["M10 9.5a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z", "M4.5 16.5c.5-2.9 2.6-4.5 5.5-4.5s5 1.6 5.5 4.5"],
+  prop_last_edited_by: ["M10 9.5a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z", "M4.5 16.5c.5-2.9 2.6-4.5 5.5-4.5s5 1.6 5.5 4.5"],
+  // Block-type glyphs for the slash menu.
+  block_text: ["M3.5 6h13", "M3.5 10h13", "M3.5 14h8"],
+  block_h1: ["M4 4.5v11", "M4 10h6", "M10 4.5v11", "M14.5 15.5v-7l-1.5 1"],
+  block_h2: ["M4 4.5v11", "M4 10h6", "M10 4.5v11", "M13 9.5c.3-1 1.2-1.3 2-1 1.2.4 1 1.8.3 2.5L13 13.5h3.5"],
+  block_h3: ["M4 4.5v11", "M4 10h6", "M10 4.5v11", "M13 8.5h3l-1.7 2.5c1.3 0 2 .7 2 1.6 0 1.3-1.5 2-3.3 1.3"],
+  block_bullet: ["M6 6h.01", "M6 10h.01", "M6 14h.01", "M9 6h7.5", "M9 10h7.5", "M9 14h7.5"],
+  block_numbered: ["M4 5.5h1.5v3", "M4 8.5h3", "M4 11.5c.4-.5 1.5-.7 2-.2.6.6-.2 1.3-2 3h2.5", "M9 6h7.5", "M9 10h7.5", "M9 14h7.5"],
+  block_todo: ["M4 5.5A1.5 1.5 0 0 1 5.5 4h9A1.5 1.5 0 0 1 16 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5v-9Z", "M7 10.2l2 2 4-4.4"],
+  block_toggle: ["M6 5l6 5-6 5"],
+  block_quote: ["M5 5.5v9", "M8.5 7h8", "M8.5 10h8", "M8.5 13h5"],
+  block_callout: ["M4 6.5A1.5 1.5 0 0 1 5.5 5h9A1.5 1.5 0 0 1 16 6.5v7a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 13.5v-7Z", "M7.5 8v.01", "M10 8h3.5", "M7.5 11.5h6"],
+  block_code: ["M7 6.5 3.5 10 7 13.5", "M13 6.5l3.5 3.5-3.5 3.5", "M11.5 4.5l-3 11"],
+  block_divider: ["M3.5 10h13"],
+  block_page: ["M6 3h5.5L15 6.5V16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z", "M11 3v4h4"],
+};
+
+const FILLED = new Set(["star_filled"]);
+
+/** Build one icon element; `name` unknown → an empty box (so a typo is visible, never a crash). */
+export function icon(name, className = "") {
+  const svg = document.createElementNS(SVG, "svg");
+  svg.setAttribute("viewBox", "0 0 20 20");
+  svg.setAttribute("width", "20");
+  svg.setAttribute("height", "20");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  svg.setAttribute("class", `icon icon-${name} ${className}`.trim());
+  const filled = FILLED.has(name);
+  svg.setAttribute("fill", filled ? "currentColor" : "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.6");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  for (const d of STROKE[name] ?? []) {
+    const path = document.createElementNS(SVG, "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+  }
+  return svg;
+}
+
+/** Property-type glyph name for a data source property type. */
+export function propertyIcon(type) {
+  return STROKE[`prop_${type}`] ? `prop_${type}` : "prop_text";
+}
+
+/** Replace every `<span data-icon="…">` placeholder in `root` with its SVG (used for the static shell). */
+export function hydrateIcons(root = document) {
+  for (const placeholder of root.querySelectorAll("[data-icon]")) {
+    const name = placeholder.getAttribute("data-icon");
+    const svg = icon(name, placeholder.className);
+    placeholder.replaceWith(svg);
+  }
+}