@firedrill-tools/notion 0.1.1

package/firedrill/tools/notion/app/site/assets/notion-wordmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 178"><path fill="#fff" d="M10.691 7.666L109.012.404c12.077-1.037 15.181-.338 22.774 5.183l31.386 22.11c5.177 3.803 6.9 4.84 6.9 8.98v121.26c0 7.6-2.76 12.095-12.42 12.782l-114.177 6.912c-7.25.344-10.703-.693-14.5-5.532L5.864 142.046C1.718 136.514 0 132.374 0 127.535V19.748C0 13.535 2.76 8.353 10.691 7.666"/><path d="M109.012.404L10.691 7.666C2.761 8.353 0 13.536 0 19.748v107.787c0 4.839 1.718 8.979 5.864 14.511L28.975 172.1c3.797 4.84 7.25 5.876 14.5 5.532l114.177-6.912c9.654-.687 12.42-5.182 12.42-12.782V36.677c0-3.928-1.551-5.059-6.118-8.411l-.788-.569l-31.38-22.11C124.193.067 121.09-.633 109.012.404M46.057 34.692c-9.323.628-11.437.77-16.732-3.536L15.862 20.447c-1.368-1.386-.681-3.115 2.766-3.459l94.519-6.906c7.936-.693 12.07 2.073 15.174 4.49l16.212 11.745c.693.35 2.416 2.417.343 2.417l-97.61 5.875zM35.188 156.901V53.96c0-4.496 1.38-6.57 5.515-6.919l112.11-6.562c3.802-.344 5.52 2.073 5.52 6.562v102.255c0 4.495-.693 8.298-6.9 8.641l-107.283 6.22c-6.207.343-8.962-1.724-8.962-7.256M141.091 59.48c.687 3.11 0 6.219-3.11 6.574l-5.17 1.025v76.004c-4.49 2.416-8.624 3.796-12.077 3.796c-5.52 0-6.9-1.73-11.035-6.906l-33.814-53.2v51.47l10.697 2.423s0 6.22-8.63 6.22l-23.792 1.38c-.693-1.387 0-4.84 2.41-5.527l6.214-1.724V72.96l-8.624-.698c-.693-3.11 1.03-7.6 5.863-7.95l25.528-1.717l35.183 53.887V68.808l-8.967-1.03c-.693-3.809 2.067-6.575 5.514-6.912zm104.322 66.39V79.02h.811l33.785 46.85h10.637V57.022h-11.828v46.803h-.811l-33.785-46.803h-10.679v68.842h11.876zm78.663 1.055c15.607 0 25.101-10.212 25.101-27.151c0-16.893-9.542-27.151-25.101-27.151c-15.507 0-25.096 10.306-25.096 27.15c0 16.94 9.447 27.152 25.096 27.152m0-9.927c-8.251 0-12.972-6.296-12.972-17.224c0-10.88 4.721-17.224 12.972-17.224c8.209 0 12.93 6.343 12.93 17.224c0 10.928-4.674 17.224-12.93 17.224m35.91-56.109v13.12h-8.25v9.447h8.25v28.484c0 10.116 4.775 14.173 16.75 14.173c2.287 0 4.485-.237 6.202-.574v-9.258c-1.433.142-2.34.237-4.01.237c-4.957 0-7.155-2.286-7.155-7.44V83.457h11.165V74.01h-11.165V60.883h-11.786zm30.042 64.981h11.787V73.671h-11.787zm5.87-60.829c3.909 0 7.06-3.157 7.06-7.113c0-3.963-3.145-7.161-7.06-7.161c-3.862 0-7.06 3.198-7.06 7.16c0 3.957 3.198 7.108 7.06 7.108zm38.25 61.884c15.601 0 25.096-10.212 25.096-27.151c0-16.893-9.542-27.151-25.096-27.151c-15.512 0-25.101 10.306-25.101 27.15c0 16.94 9.447 27.152 25.101 27.152m0-9.927c-8.256 0-12.983-6.296-12.983-17.224c0-10.88 4.727-17.224 12.983-17.224c8.204 0 12.93 6.343 12.93 17.224c0 10.928-4.679 17.224-12.93 17.224m32.138 8.872h11.835V95.48c0-7.683 4.442-12.551 11.496-12.551c7.208 0 10.543 4.01 10.543 11.976v30.965H512V92.092c0-12.456-6.35-19.47-17.988-19.47c-7.783 0-13.03 3.578-15.512 9.4h-.812v-8.35h-11.402z"/></svg>

package/firedrill/tools/notion/app/site/assets/notion.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 268"><path fill="#fff" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188"/><path d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z"/></svg>

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

@@ -0,0 +1,104 @@
+// Top bar, side panel and peek chrome shared by every screen.
+import { icon } from "./icons.js";
+import { objectIcon } from "./rich.js";
+import { ancestors, navigate, routeFor, state } from "./state.js";
+import { $, el, iconButton } from "./ui.js";
+
+/** Breadcrumb from the index: ancestors (oldest first) then the current node; collapses the middle like the product. */
+export function setBreadcrumb(current, { extra } = {}) {
+  const host = $("#breadcrumb");
+  host.replaceChildren();
+  if (!current) return;
+  const chain = [...ancestors(current).reverse(), current];
+  const items = chain.length > 4 ? [chain[0], { ellipsis: true }, chain[chain.length - 2], chain[chain.length - 1]] : chain;
+  items.forEach((node, index) => {
+    if (index > 0) host.append(el("span", { class: "crumb-sep", text: "/", attrs: { "aria-hidden": "true" } }));
+    if (node.ellipsis) {
+      host.append(el("span", { class: "crumb ellipsis", text: "…" }));
+      return;
+    }
+    const last = index === items.length - 1;
+    const crumb = el(last ? "span" : "a", { class: `crumb ${last ? "current" : ""}`.trim(), attrs: last ? { "aria-current": "page" } : { href: routeHashOf(node) } });
+    crumb.append(objectIcon(node.iconObject, node.kind, "crumb-icon"), el("span", { class: "crumb-title", text: node.title }));
+    host.append(crumb);
+  });
+  if (extra) host.append(extra);
+}
+
+function routeHashOf(node) {
+  const route = routeFor(node);
+  return route.name === "database" ? `#/database/${route.id}/table` : `#/page/${route.id}`;
+}
+
+export function setPlainBreadcrumb(title, iconName) {
+  const host = $("#breadcrumb");
+  host.replaceChildren(el("span", { class: "crumb current" }, [iconName ? icon(iconName, "crumb-icon glyph") : null, el("span", { class: "crumb-title", text: title })]));
+}
+
+export function setTopbarActions(elements) {
+  const host = $("#topbar-actions");
+  host.replaceChildren(...elements.filter(Boolean));
+}
+
+/** Right-hand panel (comments, markdown, updates). */
+export function openSidePanel(title, content, { onClose } = {}) {
+  const panel = $("#side-panel");
+  panel.replaceChildren(
+    el("div", { class: "panel-head" }, [el("span", { class: "panel-title", text: title }), iconButton("close", "Close panel", { onClick: () => closeSidePanel() })]),
+    el("div", { class: "panel-body" }, content),
+  );
+  panel.hidden = false;
+  panel.onclose = onClose;
+  document.body.classList.add("has-side-panel");
+}
+export function closeSidePanel() {
+  const panel = $("#side-panel");
+  if (panel.hidden) return;
+  panel.hidden = true;
+  document.body.classList.remove("has-side-panel");
+  const onClose = panel.onclose;
+  panel.onclose = undefined;
+  onClose?.();
+}
+export const sidePanelOpen = () => !$("#side-panel").hidden;
+
+/** Side peek: a page opened from a database view, on the right half like the product's default "Side peek". */
+export function openPeek(content, { onClose, onExpand } = {}) {
+  const peek = $("#peek");
+  const head = el("div", { class: "peek-head" }, [
+    iconButton("double_chevron_left", "Close peek", { class: "peek-close-btn", onClick: () => closePeek() }),
+    onExpand ? iconButton("expand", "Open as page", { onClick: onExpand }) : null,
+  ]);
+  peek.replaceChildren(head, el("div", { class: "peek-body" }, content));
+  peek.hidden = false;
+  peek.onclose = onClose;
+  document.body.classList.add("has-peek");
+}
+export function closePeek() {
+  const peek = $("#peek");
+  if (peek.hidden) return;
+  peek.hidden = true;
+  document.body.classList.remove("has-peek");
+  const onClose = peek.onclose;
+  peek.onclose = undefined;
+  onClose?.();
+}
+export const peekOpen = () => !$("#peek").hidden;
+export const peekBody = () => $("#peek .peek-body");
+
+/** Product-style full-screen states used by every screen. */
+export function emptyState(title, text, actions = []) {
+  return el("div", { class: "empty-state" }, [el("p", { class: "empty-title", text: title }), text ? el("p", { class: "empty-text", text }) : null, actions.length > 0 ? el("div", { class: "empty-actions" }, actions) : null]);
+}
+
+export function skeleton(lines = 6) {
+  const host = el("div", { class: "skeleton", attrs: { "aria-hidden": "true" } });
+  for (let index = 0; index < lines; index += 1) host.append(el("div", { class: `skeleton-line w${(index % 4) + 1}` }));
+  return host;
+}
+
+export function goTo(node) {
+  navigate(routeFor(node));
+}
+
+export { state };

package/firedrill/tools/notion/app/site/cover-picker.js

@@ -0,0 +1,83 @@
+// Cover picker: the product's Gallery / Upload / Link / Unsplash popover. Gallery and Link write `cover` through
+// pages.update; Upload and Unsplash need file hosting or a remote service and are visibly disabled.
+import { closePopovers, el, openPopover, textButton } from "./ui.js";
+import { state } from "./state.js";
+
+/** Gradient seed used to draw a cover (external images are never fetched inside the test environment). */
+export function coverSeed(text) {
+  let hash = 0;
+  for (const character of String(text)) hash = (hash * 31 + character.charCodeAt(0)) >>> 0;
+  return hash % 6;
+}
+
+/** Cover images already used in the workspace (the Tool stores covers as external links; none are invented here). */
+export function workspaceCovers() {
+  const urls = new Set();
+  for (const node of [...state.pages.values(), ...state.databases.values()]) {
+    const url = node.raw?.cover?.external?.url;
+    if (typeof url === "string" && url !== "") urls.add(url);
+  }
+  return [...urls].slice(0, 9).map((url) => ({ seed: coverSeed(url), url }));
+}
+
+export function openCoverPicker(anchor, currentUrl, onPick, { startWith = "gallery" } = {}) {
+  const GALLERY = workspaceCovers();
+  const box = el("div", { class: "cover-picker", attrs: { "aria-label": "Change cover" } });
+  const tabs = el("div", { class: "cover-tabs", attrs: { role: "tablist" } });
+  const body = el("div", { class: "cover-body" });
+  const tab = (label, { disabled = false, selected = false } = {}) => {
+    const button = el("button", { class: "cover-tab", title: disabled ? `${label}: not simulated by this Tool` : label, attrs: { type: "button", role: "tab", "aria-selected": String(selected) } });
+    button.append(el("span", { text: label }));
+    button.disabled = disabled;
+    return button;
+  };
+  const gallery = tab("Gallery", { selected: true });
+  const upload = tab("Upload", { disabled: true });
+  const link = tab("Link");
+  const unsplash = tab("Unsplash", { disabled: true });
+  const remove = el("button", { class: "cover-remove", text: "Remove", attrs: { type: "button" } });
+  remove.disabled = !currentUrl;
+  remove.addEventListener("click", () => { closePopovers(); onPick(null); });
+  tabs.append(gallery, upload, link, unsplash, el("span", { class: "cover-tabs-gap" }), remove);
+
+  const showGallery = () => {
+    gallery.setAttribute("aria-selected", "true");
+    link.setAttribute("aria-selected", "false");
+    const grid = el("div", { class: "cover-grid" });
+    GALLERY.forEach(({ seed, url }, index) => {
+      const swatch = el("button", { class: `cover-swatch ${url === currentUrl ? "current" : ""}`.trim(), title: url, attrs: { type: "button", "aria-label": `Use cover ${index + 1}: ${url}` } });
+      swatch.dataset.seed = String(seed);
+      swatch.addEventListener("click", () => { closePopovers(); onPick(url); });
+      grid.append(swatch);
+    });
+    const group = el("div", { class: "cover-group", text: "Used in this workspace" });
+    if (GALLERY.length === 0) grid.append(el("p", { class: "cover-note-text", text: "No covers are used in this workspace yet. Add one from a link." }));
+    body.replaceChildren(group, grid, el("p", { class: "cover-note-text", text: "Upload and Unsplash are not simulated by this Tool." }));
+  };
+  const showLink = () => {
+    gallery.setAttribute("aria-selected", "false");
+    link.setAttribute("aria-selected", "true");
+    const id = "cover-link-input";
+    const input = el("input", { class: "cover-link", attrs: { id, type: "url", placeholder: "Paste an image link…", "aria-label": "Image link", value: currentUrl ?? "" } });
+    const submit = textButton("Submit", { class: "primary" });
+    const run = () => {
+      const value = input.value.trim();
+      if (!/^https?:\/\/\S+$/.test(value)) {
+        input.setAttribute("aria-invalid", "true");
+        return;
+      }
+      closePopovers();
+      onPick(value);
+    };
+    submit.addEventListener("click", run);
+    input.addEventListener("keydown", (event) => { if (event.key === "Enter") { event.preventDefault(); run(); } });
+    body.replaceChildren(input, submit, el("p", { class: "cover-note-text", text: "Works with any image from the web. Images are stored as links and drawn as a gradient here." }));
+    input.focus();
+  };
+  gallery.addEventListener("click", showGallery);
+  link.addEventListener("click", showLink);
+  if (startWith === "link") showLink();
+  else showGallery();
+  box.append(tabs, body);
+  return openPopover(anchor, box, { width: 440, align: "end", focusFirst: false });
+}