@firedrill-tools/notion 0.1.1

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

@@ -0,0 +1,159 @@
+// Rendering of Notion rich text and property values into safe DOM (textContent only; links are anchors with
+// rel="noopener" that never resolve inside the test environment).
+import { icon } from "./icons.js";
+import { avatar, el, propertyDate } from "./ui.js";
+
+export const OPTION_COLORS = ["default", "gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
+
+export const EMOJIS = [
+  "📄", "📝", "📚", "📖", "🗂️", "🗃️", "📁", "📌", "📎", "🔖", "🧭", "🗺️", "🏠", "🏢", "🏭", "🚀", "🛠️", "⚙️", "🔧", "🔩",
+  "🤖", "🦾", "🔋", "🔌", "💡", "🧪", "🔬", "📡", "🛰️", "📦", "🚚", "🏗️", "📐", "🎨", "🖌️", "🧩", "🎯", "✅", "☑️", "📋",
+  "📅", "🗓️", "⏰", "🔔", "💬", "📣", "📊", "📈", "📉", "💰", "🏷️", "🔑", "🔒", "🛡️", "⚠️", "🚧", "🔥", "⭐", "🌟", "❤️",
+  "👋", "🙌", "🧠", "👀", "🍀", "🌱", "🌍", "☕", "🍕", "🎉", "🎁", "🏆", "🥇", "🎓", "✈️", "🚗", "🐛", "🦄", "🐙", "🐝",
+];
+
+/** Rich text array → span with annotated runs, links and mentions. */
+export function richText(items, { className = "rich" } = {}) {
+  const host = el("span", { class: className });
+  for (const item of Array.isArray(items) ? items : []) host.append(richItem(item));
+  return host;
+}
+
+function richItem(item) {
+  const annotations = item.annotations ?? {};
+  let text = item.plain_text ?? item.text?.content ?? "";
+  let node;
+  if (item.type === "mention") {
+    const mention = item.mention ?? {};
+    if (mention.type === "user") node = el("span", { class: "mention mention-user", text: `@${mention.user?.name ?? text.replace(/^@/, "") ?? "user"}` });
+    else if (mention.type === "page") node = el("span", { class: "mention mention-page" }, [icon("page", "mention-icon"), el("span", { text: text || "Untitled" })]);
+    else if (mention.type === "date") node = el("span", { class: "mention mention-date", text: `@${propertyDate(mention.date) || text}` });
+    else node = el("span", { class: "mention", text });
+  } else if (item.href || item.text?.link?.url) {
+    node = el("a", { class: "rich-link", text, attrs: { href: item.href ?? item.text.link.url, target: "_blank", rel: "noopener noreferrer" } });
+  } else {
+    node = el("span", { text });
+  }
+  const classes = [];
+  if (annotations.bold) classes.push("b");
+  if (annotations.italic) classes.push("i");
+  if (annotations.strikethrough) classes.push("s");
+  if (annotations.underline) classes.push("u");
+  if (annotations.code) classes.push("code");
+  if (classes.length > 0) node.classList.add(...classes);
+  if (annotations.color && annotations.color !== "default") node.dataset.color = annotations.color;
+  return node;
+}
+
+export function plain(items) {
+  return (Array.isArray(items) ? items : []).map((item) => item.plain_text ?? item.text?.content ?? "").join("");
+}
+
+/** Plain-text content → the rich text array the API expects. */
+export function textToRich(content) {
+  return content.length === 0 ? [] : [{ type: "text", text: { content } }];
+}
+
+/** Coloured pill for select / multi-select / status options. */
+export function pill(option, { status = false } = {}) {
+  const element = el("span", { class: `pill ${status ? "status" : ""}`.trim(), text: option.name });
+  element.dataset.color = option.color ?? "default";
+  if (status) element.prepend(el("span", { class: "status-dot" }));
+  return element;
+}
+
+export function checkbox(checked, { onToggle, label = "Checkbox" } = {}) {
+  const box = el("button", { class: `checkbox ${checked ? "checked" : ""}`.trim(), attrs: { type: "button", role: "checkbox", "aria-checked": String(checked), "aria-label": label } });
+  if (checked) box.append(icon("check", "checkbox-mark"));
+  if (onToggle) box.addEventListener("click", (event) => { event.stopPropagation(); onToggle(!checked); });
+  else box.disabled = true;
+  return box;
+}
+
+/** Name for a user object (partial objects have no name). */
+export function userName(user, users) {
+  if (!user) return "";
+  if (user.name) return user.name;
+  const known = users?.get?.(user.id);
+  return known?.name ?? "Unknown user";
+}
+
+export function person(user, users, { size = "" } = {}) {
+  const name = userName(user, users);
+  return el("span", { class: "person" }, [avatar({ id: user?.id, name }, size), el("span", { class: "person-name", text: name })]);
+}
+
+/**
+ * Render one property value (Notion page property object) for a cell or the property panel.
+ * `lookup`: { users: Map, pages: Map<id, {title, icon}> } for people and relation values.
+ */
+export function propertyValue(property, lookup = {}) {
+  const type = property.type;
+  const value = property[type];
+  const host = el("span", { class: `prop-value type-${type}` });
+  switch (type) {
+    case "title":
+    case "rich_text":
+      host.append(richText(value));
+      break;
+    case "number":
+      host.textContent = value === null || value === undefined ? "" : String(value);
+      break;
+    case "select":
+      if (value) host.append(pill(value));
+      break;
+    case "status":
+      if (value) host.append(pill(value, { status: true }));
+      break;
+    case "multi_select":
+      for (const option of value ?? []) host.append(pill(option));
+      break;
+    case "date":
+      host.textContent = propertyDate(value);
+      break;
+    case "checkbox":
+      host.append(checkbox(value === true));
+      break;
+    case "url":
+      if (value) host.append(el("a", { class: "cell-link", text: value, attrs: { href: value, target: "_blank", rel: "noopener noreferrer" } }));
+      break;
+    case "email":
+      if (value) host.append(el("a", { class: "cell-link", text: value, attrs: { href: `mailto:${value}` } }));
+      break;
+    case "phone_number":
+      host.textContent = value ?? "";
+      break;
+    case "people":
+      for (const user of value ?? []) host.append(person(user, lookup.users));
+      break;
+    case "created_by":
+    case "last_edited_by":
+      if (value) host.append(person(value, lookup.users));
+      break;
+    case "relation":
+      for (const ref of value ?? []) {
+        const target = lookup.pages?.get(ref.id);
+        host.append(el("span", { class: "relation-chip" }, [target?.icon ? el("span", { class: "relation-icon", text: target.icon }) : icon("page", "relation-icon"), el("span", { text: target?.title ?? "Untitled" })]));
+      }
+      break;
+    case "created_time":
+    case "last_edited_time":
+      host.textContent = value ? propertyDate({ start: value }) : "";
+      break;
+    default:
+      host.textContent = typeof value === "string" ? value : "";
+  }
+  return host;
+}
+
+/** Emoji string of an icon object, or undefined for none / external images (never loaded here). */
+export function emojiOf(iconObject) {
+  return iconObject && iconObject.type === "emoji" ? iconObject.emoji : undefined;
+}
+
+/** Page or database icon node: the emoji, or the product's grey document / database glyph. */
+export function objectIcon(iconObject, kind = "page", className = "") {
+  const emoji = emojiOf(iconObject);
+  if (emoji !== undefined) return el("span", { class: `obj-icon emoji ${className}`.trim(), text: emoji, attrs: { "aria-hidden": "true" } });
+  return icon(kind === "database" ? "database" : "page", `obj-icon glyph ${className}`.trim());
+}

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

@@ -0,0 +1,170 @@
+// App-wide state and the caches every screen shares (workspace context, users, the page/database index used by
+// the sidebar, breadcrumbs and relation chips). Caches are refilled from the Tool on every world revision change.
+import { call, ToolError } from "./ui.js";
+import { emojiOf, plain } from "./rich.js";
+
+export const state = {
+  context: undefined, // workspace.context value (workspace, user, integration, now, limits)
+  nowMs: undefined,
+  users: new Map(), // id → user object (persons and bots) when the integration may list users
+  usersDenied: false,
+  usersTruncated: false,
+  indexTruncated: false,
+  pages: new Map(), // id → { id, title, icon, parent, kind: "page", lastEdited, inTrash }
+  databases: new Map(), // database id → { id, title, icon, parent, kind: "database", dataSourceId, isInline, schema }
+  dataSources: new Map(), // data source id → data source object
+  indexError: undefined,
+  route: { name: "home" },
+  favorites: new Set(),
+  tick: 0,
+};
+
+export const canWrite = (level = "read_update") => {
+  const content = state.context?.integration?.capabilities?.content ?? "none";
+  const rank = { none: 0, read: 1, read_update: 2, read_update_insert: 3 };
+  return rank[content] >= rank[level];
+};
+export const canComment = (level = "read") => {
+  const comments = state.context?.integration?.capabilities?.comments ?? "none";
+  const rank = { none: 0, read: 1, read_insert: 2 };
+  return rank[comments] >= rank[level];
+};
+
+export function pageTitle(page) {
+  const property = Object.values(page.properties ?? {}).find((entry) => entry.type === "title");
+  const title = property ? plain(property.title) : "";
+  return title.length > 0 ? title : "Untitled";
+}
+
+export function titleOfRich(items) {
+  const title = plain(items);
+  return title.length > 0 ? title : "Untitled";
+}
+
+/** Read the workspace context (virtual time, identity). */
+export async function loadContext() {
+  state.context = await call("workspace.context", {});
+  state.nowMs = Date.parse(state.context.now);
+}
+
+const USER_PAGES = 20;
+const INDEX_PAGES = 200;
+
+/** All users when the integration has the user-information capability; otherwise the caller's own identity only. */
+export async function loadUsers() {
+  const users = new Map();
+  try {
+    let cursor;
+    let more = true;
+    // Pages end early by bytes as well as by count, so the guard counts requests, and tripping it is surfaced.
+    for (let guard = 0; guard < USER_PAGES && more; guard += 1) {
+      const page = await call("users.list", cursor ? { start_cursor: cursor, page_size: 100 } : { page_size: 100 });
+      for (const user of page.results) users.set(user.id, user);
+      more = page.has_more === true;
+      cursor = page.next_cursor;
+    }
+    state.usersTruncated = more;
+    state.usersDenied = false;
+  } catch (error) {
+    if (!(error instanceof ToolError) || !(error.is("RESTRICTED_RESOURCE") || error.denied)) throw error;
+    state.usersDenied = true;
+  }
+  if (state.context?.user) users.set(state.context.user.id, { ...state.context.user, object: "user" });
+  state.users = users;
+}
+
+/** Every page and data source visible to the integration (search without a query, paginated). */
+export async function loadIndex() {
+  const pages = new Map();
+  const databases = new Map();
+  const dataSources = new Map();
+  let truncated = false;
+  const collect = async (value, sink) => {
+    let cursor;
+    for (let guard = 0; ; guard += 1) {
+      if (guard === INDEX_PAGES) {
+        truncated = true;
+        break;
+      }
+      const page = await call("search", { filter: { property: "object", value }, sort: { timestamp: "last_edited_time", direction: "descending" }, page_size: 100, ...(cursor ? { start_cursor: cursor } : {}) });
+      for (const item of page.results) sink(item);
+      if (!page.has_more) break;
+      cursor = page.next_cursor;
+    }
+  };
+  try {
+    await collect("page", (page) => pages.set(page.id, { id: page.id, kind: "page", title: pageTitle(page), icon: emojiOf(page.icon), iconObject: page.icon, parent: page.parent, lastEdited: page.last_edited_time, created: page.created_time, inTrash: page.in_trash, raw: page }));
+    await collect("data_source", (source) => {
+      dataSources.set(source.id, source);
+      const databaseId = source.parent?.database_id ?? source.id;
+      databases.set(databaseId, { id: databaseId, kind: "database", title: titleOfRich(source.title), icon: emojiOf(source.icon), iconObject: source.icon, parent: source.database_parent ?? { type: "workspace", workspace: true }, dataSourceId: source.id, isInline: source.is_inline === true, lastEdited: source.last_edited_time, schema: source.properties });
+    });
+    state.indexError = undefined;
+    state.indexTruncated = truncated;
+  } catch (error) {
+    state.indexError = error;
+  }
+  state.pages = pages;
+  state.databases = databases;
+  state.dataSources = dataSources;
+  state.tick += 1;
+}
+
+/** Lookup maps for property rendering (people names, relation titles). */
+export function lookup() {
+  const pageLookup = new Map();
+  for (const page of state.pages.values()) pageLookup.set(page.id, { title: page.title, icon: page.icon });
+  return { users: state.users, pages: pageLookup };
+}
+
+/** Parent chain (nearest first) of a page or database node from the index, for breadcrumbs. */
+export function ancestors(node) {
+  const chain = [];
+  let parent = node?.parent;
+  for (let depth = 0; depth < 32 && parent; depth += 1) {
+    let next;
+    if (parent.type === "page_id") next = state.pages.get(parent.page_id);
+    else if (parent.type === "data_source_id") {
+      const source = state.dataSources.get(parent.data_source_id);
+      next = source ? state.databases.get(source.parent?.database_id ?? parent.database_id) : state.databases.get(parent.database_id);
+    } else if (parent.type === "database_id") next = state.databases.get(parent.database_id);
+    if (!next) break;
+    chain.push(next);
+    parent = next.parent;
+  }
+  return chain;
+}
+
+// ---------------------------------------------------------------------------------------------
+// Routing (hash based, so the app works from any served path)
+// ---------------------------------------------------------------------------------------------
+
+export function parseRoute(hash) {
+  const raw = (hash || "#/home").replace(/^#\/?/, "");
+  const [path, query = ""] = raw.split("?");
+  const params = new URLSearchParams(query);
+  const parts = path.split("/").filter(Boolean);
+  if (parts[0] === "page" && parts[1]) return { name: "page", id: parts[1], peek: params.get("peek") ?? undefined };
+  if (parts[0] === "database" && parts[1]) return { name: "database", id: parts[1], view: parts[2] ?? "table", peek: params.get("peek") ?? undefined };
+  return { name: "home" };
+}
+
+export function routeHash(route) {
+  let hash;
+  if (route.name === "page") hash = `#/page/${route.id}`;
+  else if (route.name === "database") hash = `#/database/${route.id}/${route.view ?? "table"}`;
+  else hash = "#/home";
+  if (route.peek) hash += `?peek=${encodeURIComponent(route.peek)}`;
+  return hash;
+}
+
+export function navigate(route) {
+  const hash = routeHash(route);
+  if (location.hash === hash) window.dispatchEvent(new HashChangeEvent("hashchange"));
+  else location.hash = hash;
+}
+
+/** Route to open any index node (page → page view, database → its table). */
+export function routeFor(node) {
+  return node.kind === "database" ? { name: "database", id: node.id, view: "table" } : { name: "page", id: node.id };
+}