@panphora/clayjs 1.13.0 → 1.14.0

package/src/page/board-panel.js

@@ -0,0 +1,353 @@
+import { state } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { announce } from "./announce.js";
+import { BOARD_ICONS, el, iconButton, boardOf, cardFace, dueLabel, dueState, todayKey, placeAfter } from "./board-view.js";
+
+const NARROW = "(max-width: 1039.98px)";
+const isTyping = (target) => /^(INPUT|TEXTAREA|SELECT)$/.test(target?.tagName ?? "");
+const panels = new WeakMap();
+let count = 0;
+
+export function cardPanel(view) {
+  if (!panels.has(view)) panels.set(view, new CardPanel(view));
+  return panels.get(view);
+}
+
+export class CardPanel {
+  constructor(view) {
+    this.view = view;
+    this.blockId = null;
+    this.cardId = null;
+    this.host = null;
+    this.node = null;
+    this.people = [];
+    this.dueInput = null;
+    this.rendering = false;
+    this.titleBase = "";
+    this.ownerBase = "";
+    const doc = view.dom.ownerDocument;
+    const id = `page-board-panel-${++count}`;
+    this.scrim = el(doc, "div", "page-board-scrim", { "aria-hidden": "true" });
+    this.dom = el(doc, "aside", "page-board-panel", { role: "dialog", "aria-modal": "false", "aria-labelledby": `${id}-title` });
+    const top = el(doc, "div", "page-board-panel-top");
+    this.title = el(doc, "textarea", "page-board-panel-title", { id: `${id}-title`, rows: 2, "aria-label": "Card title", spellcheck: "false", "data-focus": "title" });
+    top.append(this.title, iconButton(doc, "page-board-icon page-board-close", "close", null, { "aria-label": "Close", "aria-keyshortcuts": "Escape", "data-action": "close", "data-focus": "close" }));
+    this.ownerInput = el(doc, "input", "page-board-owner-input", { type: "text", "aria-label": "Owner name", placeholder: "Or type a name…", "data-focus": "owner-name" });
+    this.fields = el(doc, "div", "page-board-fields");
+    this.actions = el(doc, "div", "page-board-actions");
+    this.dom.append(top, this.fields, this.actions);
+    this.labels = { column: `${id}-column`, owner: `${id}-owner`, due: `${id}-due` };
+    this.textField(this.title, () => this.commitTitle());
+    this.textField(this.ownerInput, () => this.commitOwner());
+    this.dom.addEventListener("click", (event) => this.click(event));
+    this.dom.addEventListener("mousedown", (event) => { if (event.target.closest?.("button")) event.preventDefault(); });
+    this.dom.addEventListener("change", (event) => { if (event.target.dataset.focus === "column") this.moveTo(event.target.value); });
+    this.dom.addEventListener("keydown", (event) => this.keydown(event));
+    this.scrim.addEventListener("click", () => this.hide(true));
+  }
+
+  textField(input, commit) {
+    input.addEventListener("keydown", (event) => {
+      if (event.isComposing || event.keyCode === 229) return;
+      if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); commit(); }
+      else if (event.key === "Escape") { event.preventDefault(); this.hide(true); }
+    });
+    input.addEventListener("blur", () => {
+      if (this.rendering) return;
+      setTimeout(() => { if (this.blockId !== null && input.ownerDocument.activeElement !== input) commit(); }, 0);
+    });
+  }
+
+  get shell() { return this.view.dom.parentElement; }
+
+  isOpen(blockId, cardId) { return this.blockId === blockId && this.cardId === cardId; }
+
+  boardNode() {
+    let found = null;
+    this.view.state.doc.forEach((node) => { if (!found && node.type === schema.nodes.board && node.attrs.id === this.blockId) found = node; });
+    return found;
+  }
+
+  card() { return this.boardNode()?.attrs.cards?.[this.cardId] ?? null; }
+
+  boardButton(blockId, key) {
+    const board = [...this.view.dom.querySelectorAll(".page-board")].find((node) => node.dataset.id === blockId);
+    return board ? [...board.querySelectorAll("[data-focus]")].find((node) => node.dataset.focus === key && !node.disabled) ?? null : null;
+  }
+
+  setExpanded(on) {
+    this.boardButton(this.blockId, `card:${this.cardId}`)?.setAttribute("aria-expanded", String(on));
+  }
+
+  open(blockId, cardId, host) {
+    if (this.blockId !== null) {
+      this.commit();
+      this.setExpanded(false);
+    }
+    this.blockId = blockId;
+    this.cardId = cardId;
+    this.host = host;
+    this.dueInput = null;
+    if (!this.dom.isConnected) this.shell.append(this.scrim, this.dom);
+    this.shell.classList.add("has-board-panel");
+    const sheet = !!this.view.dom.ownerDocument.defaultView.matchMedia?.(NARROW).matches;
+    this.dom.setAttribute("aria-modal", String(sheet));
+    this.render(true);
+    this.setExpanded(true);
+    if (sheet) this.focusKey("close");
+    else this.title.focus();
+    this.loadPeople();
+  }
+
+  hide(refocus = false, commit = true) {
+    if (this.blockId === null) return;
+    if (commit) this.commit();
+    const { blockId, cardId } = this;
+    this.setExpanded(false);
+    this.blockId = this.cardId = this.node = null;
+    this.dueInput = null;
+    this.scrim.remove();
+    this.dom.remove();
+    this.shell?.classList.remove("has-board-panel");
+    if (refocus) this.boardButton(blockId, `card:${cardId}`)?.focus();
+  }
+
+  loadPeople() {
+    const source = globalThis.clay?.people?.available;
+    if (!source) return;
+    Promise.resolve().then(() => source()).then((people) => {
+      this.people = (Array.isArray(people) ? people : []).filter((person) => typeof person?.name === "string" && person.name);
+      if (this.blockId !== null) this.render(false);
+    }).catch(() => {});
+  }
+
+  run(name, ...args) {
+    if (!this.host?.commands || !this.view.editable) return { status: "refused", code: "read-only" };
+    const result = this.host.commands[name](this.blockId, this.cardId, ...args);
+    if (result?.status === "refused") this.sync(true);
+    return result;
+  }
+
+  commit() {
+    this.commitTitle();
+    this.commitOwner();
+    if (this.dueInput) this.commitDue();
+  }
+
+  commitTitle() {
+    const card = this.card();
+    const title = this.title.value.replace(/\s*\n\s*/g, " ");
+    this.title.value = title;
+    if (card && title !== card.title) this.run("editCard", { title });
+  }
+
+  commitOwner() {
+    const card = this.card();
+    const typed = this.ownerInput.value.trim();
+    this.ownerInput.value = typed;
+    const owner = typed || null;
+    if (card && owner !== (card.owner ?? null)) this.run("editCard", { owner });
+  }
+
+  commitDue() {
+    const card = this.card();
+    const due = this.dueInput?.value || null;
+    this.dueInput = null;
+    if (card && due !== (card.due ?? null)) this.run("editCard", { due });
+    else if (this.blockId !== null) this.render(false);
+  }
+
+  openDue() {
+    const doc = this.view.dom.ownerDocument;
+    const input = el(doc, "input", "page-board-control page-board-date", { type: "date", "aria-labelledby": this.labels.due, "data-focus": "due-input" });
+    input.value = this.card()?.due ?? "";
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") { event.preventDefault(); this.commitDue(); this.focusKey("due"); }
+      else if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); this.dueInput = null; this.render(false); this.focusKey("due"); }
+    });
+    input.addEventListener("blur", () => {
+      if (this.rendering) return;
+      setTimeout(() => { if (this.dueInput === input && doc.activeElement !== input) this.commitDue(); }, 0);
+    });
+    this.dueInput = input;
+    this.render(false);
+    input.focus();
+    try { input.showPicker?.(); } catch {}
+  }
+
+  sync(force = false) {
+    if (this.blockId === null) return;
+    const node = this.boardNode();
+    if (!force && node === this.node) return;
+    const col = this.node?.attrs.cards?.[this.cardId]?.col;
+    if (!node?.attrs.cards?.[this.cardId]) {
+      const inside = this.dom.contains(this.view.dom.ownerDocument.activeElement);
+      const blockId = this.blockId;
+      this.hide(false, false);
+      if (inside) (this.boardButton(blockId, `add:${col}`) ?? this.boardButton(blockId, "add-column"))?.focus();
+      return;
+    }
+    this.render(false);
+  }
+
+  focusKey(key) {
+    const target = [...this.dom.querySelectorAll("[data-focus]")].find((node) => node.dataset.focus === key && !node.disabled);
+    target?.focus();
+    return !!target;
+  }
+
+  render(fresh) {
+    const doc = this.view.dom.ownerDocument;
+    this.node = this.boardNode();
+    const board = boardOf(this.node);
+    const card = board.cards[this.cardId];
+    if (!card) return this.hide(false, false);
+    const active = doc.activeElement;
+    const key = this.dom.contains(active) ? active.dataset.focus : null;
+    const range = key && typeof active.selectionStart === "number" ? [active.selectionStart, active.selectionEnd] : null;
+    this.rendering = true;
+    try {
+      const titleDirty = !fresh && this.title.value !== this.titleBase;
+      this.titleBase = card.title ?? "";
+      if (!titleDirty) this.title.value = this.titleBase;
+      const ownerDirty = !fresh && this.ownerInput.value !== this.ownerBase;
+      this.ownerBase = card.owner ?? "";
+      if (!ownerDirty) this.ownerInput.value = this.ownerBase;
+      this.fields.replaceChildren(this.columnField(board, card), this.ownerField(card), this.dueField(card));
+      this.actions.replaceChildren(...this.actionButtons(board, card));
+      if (key && key !== "title" && this.focusKey(key)) { if (range) doc.activeElement.setSelectionRange?.(...range); }
+      else if (key === "up" || key === "down") this.focusKey(key === "up" ? "down" : "up");
+    } finally {
+      this.rendering = false;
+    }
+  }
+
+  field(name, label, control, owner = false) {
+    const doc = this.view.dom.ownerDocument;
+    const row = el(doc, "div", `page-board-field${owner ? " is-owner" : ""}`);
+    row.append(el(doc, "span", "page-board-label", { id: this.labels[name] }, label), control);
+    return row;
+  }
+
+  columnField(board, card) {
+    const doc = this.view.dom.ownerDocument;
+    const wrap = el(doc, "span", "page-board-select");
+    const select = el(doc, "select", "page-board-control", { "aria-labelledby": this.labels.column, "data-focus": "column", disabled: !board.columnIds.length });
+    if (!board.lanes.has(card.col)) select.append(el(doc, "option", null, { value: "", selected: true, disabled: true }, "Deleted column"));
+    for (const col of board.columnIds) select.append(el(doc, "option", null, { value: col, selected: col === card.col }, board.columns[col].name || "Untitled"));
+    wrap.append(select);
+    wrap.insertAdjacentHTML("beforeend", BOARD_ICONS.chevron);
+    return this.field("column", "Column", wrap);
+  }
+
+  ownerField(card) {
+    const doc = this.view.dom.ownerDocument;
+    const box = el(doc, "div", "page-board-owners");
+    const people = el(doc, "div", "page-board-people", { role: "group", "aria-labelledby": this.labels.owner });
+    for (const person of this.people) {
+      const chip = el(doc, "button", "page-board-person", { type: "button", "aria-pressed": String(person.name === card.owner), "data-action": "owner", "data-owner": person.name, "data-focus": `owner:${person.id ?? person.name}` });
+      chip.append(cardFace(doc, person.name), el(doc, "span", null, {}, person.name));
+      people.append(chip);
+    }
+    people.append(el(doc, "button", "page-board-person is-none", { type: "button", "aria-pressed": String(!card.owner), "data-action": "owner-none", "data-focus": "owner-none" }, "No owner"));
+    box.append(people, this.ownerInput);
+    return this.field("owner", "Owner", box, true);
+  }
+
+  dueField(card) {
+    const doc = this.view.dom.ownerDocument;
+    if (this.dueInput) return this.field("due", "Due", this.dueInput);
+    const today = todayKey();
+    const state = card.due ? dueState(card.due, today) : null;
+    const label = card.due ? dueLabel(card.due, today, true) : null;
+    const button = el(doc, "button", "page-board-control", { type: "button", "aria-label": card.due ? `Due ${label}${state === "overdue" ? ", overdue" : ""}` : "Set due date", "data-action": "due", "data-focus": "due" });
+    if (card.due) {
+      button.append(el(doc, "span", "page-board-due", { "data-due": state }, label));
+      if (state === "overdue") button.append(el(doc, "span", "page-board-due-note", {}, "Overdue"));
+    } else button.append(el(doc, "span", "page-board-control-text page-board-none", {}, "No date"));
+    button.insertAdjacentHTML("beforeend", BOARD_ICONS.calendar);
+    return this.field("due", "Due", button);
+  }
+
+  actionButtons(board, card) {
+    const doc = this.view.dom.ownerDocument;
+    const ids = board.lanes.get(card.col);
+    const index = ids ? ids.indexOf(this.cardId) : -1;
+    return [
+      iconButton(doc, "page-board-btn", "up", "Move up", { "data-action": "up", "data-focus": "up", disabled: index <= 0 }),
+      iconButton(doc, "page-board-btn", "down", "Move down", { "data-action": "down", "data-focus": "down", disabled: index < 0 || index >= ids.length - 1 }),
+      iconButton(doc, "page-board-btn page-board-delete", "trash", "Delete card", { "data-action": "delete", "data-focus": "delete" }),
+    ];
+  }
+
+  step(delta) {
+    const card = this.card();
+    const ids = card ? boardOf(this.node).lanes.get(card.col) : null;
+    if (!ids) return;
+    const index = ids.indexOf(this.cardId);
+    this.run("moveCard", { columnId: card.col, afterId: delta < 0 ? placeAfter(ids, index) : ids[index + 1] });
+  }
+
+  moveTo(col) {
+    const ids = boardOf(this.node).lanes.get(col)?.filter((id) => id !== this.cardId);
+    if (ids) this.run("moveCard", { columnId: col, afterId: ids[ids.length - 1] ?? null });
+  }
+
+  remove() {
+    const card = this.card();
+    if (!card) return;
+    const board = boardOf(this.node);
+    const ids = board.lanes.get(card.col) ?? board.missing.get(card.col) ?? [];
+    const index = ids.indexOf(this.cardId);
+    const next = ids[index + 1] ?? ids[index - 1];
+    const { blockId, cardId, host } = this;
+    this.hide(false, false);
+    if (!host?.commands || !this.view.editable || host.commands.removeCard(blockId, cardId).status !== "removed") return;
+    announce(this.view, "Card deleted");
+    const target = (next && this.boardButton(blockId, `card:${next}`)) || this.boardButton(blockId, `add:${card.col}`) || this.boardButton(blockId, "add-column");
+    target?.focus();
+  }
+
+  click(event) {
+    const target = event.target.closest?.("[data-action]");
+    if (!target || target.disabled) return;
+    const action = target.dataset.action;
+    if (action !== "close") this.commitTitle();
+    if (action === "close") this.hide(true);
+    else if (action === "owner") { this.ownerInput.value = this.ownerBase; this.run("editCard", { owner: target.dataset.owner }); }
+    else if (action === "owner-none") { this.ownerInput.value = this.ownerBase; this.run("editCard", { owner: null }); }
+    else if (action === "due") this.openDue();
+    else if (action === "up" || action === "down") this.step(action === "up" ? -1 : 1);
+    else if (action === "delete") this.remove();
+  }
+
+  keydown(event) {
+    const key = event.key.toLowerCase();
+    if (event.defaultPrevented) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.hide(true);
+    } else if ((event.metaKey || event.ctrlKey) && (key === "z" || key === "y") && !isTyping(event.target)) {
+      event.preventDefault();
+      if (key === "y" || event.shiftKey) this.host?.redo?.();
+      else this.host?.undo?.();
+    } else if (event.key === "Tab" && this.dom.getAttribute("aria-modal") === "true") {
+      const items = [...this.dom.querySelectorAll("button, input, select, textarea")].filter((node) => !node.disabled);
+      if (event.target !== items[event.shiftKey ? 0 : items.length - 1]) return;
+      event.preventDefault();
+      items[event.shiftKey ? items.length - 1 : 0].focus();
+    }
+  }
+}
+
+export function boardPlugin() {
+  return new state.Plugin({
+    view: (view) => ({
+      update: () => panels.get(view)?.sync(),
+      destroy: () => {
+        panels.get(view)?.hide(false, false);
+        panels.delete(view);
+      },
+    }),
+  });
+}

package/src/page/board-style.js

@@ -0,0 +1,146 @@
+export const BOARD_CSS = `
+:where(article[data-page], .page-shell) { --page-board-lane: 274px; --page-board-gap: 14px; --page-board-radius: 8px; --page-board-panel: 360px; }
+.page-editor .page-board { margin-block: 1.1em 1.5em; font-size: 15px; line-height: 1.4; white-space: normal; }
+:is(.page-board, .page-board-panel) .i { flex: none; width: 16px; height: 16px; }
+.page-board-scroll { position: relative; margin: -4px -4px 0; padding: 4px 4px 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--page-chrome-ink-rest) transparent; }
+.page-board-lanes { display: flex; align-items: flex-start; gap: var(--page-board-gap); width: max-content; }
+.page-board-lane { flex: 0 0 var(--page-board-lane); width: var(--page-board-lane); min-width: 0; }
+.page-board-head { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 8px 0 7px; margin-bottom: 10px; border-bottom: 1px solid var(--page-rule); }
+.page-board-name { min-width: 0; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--page-ink-strong); font: 600 14px/20px var(--page-font-heading); overflow-wrap: anywhere; }
+.page-board-count { flex: none; color: var(--page-ink-soft); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
+.page-board-icon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-block: -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--page-ink-faint); cursor: pointer; transition: background-color var(--page-fade), color var(--page-fade); }
+.page-board-icon:hover, .page-board-icon[aria-expanded="true"] { background: var(--page-pop-hover); color: var(--page-ink-soft); }
+.page-board-icon:focus-visible { color: var(--page-ink-soft); }
+.page-board-colmenu { margin-inline: auto -4px; }
+.page-board-cards { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.page-board-cards > li { position: relative; }
+.page-board-card { display: block; width: 100%; margin: 0; padding: 10px 12px 11px; border: 1px solid var(--page-rule); border-radius: var(--page-board-radius); background: var(--page-pop-bg); color: var(--page-ink); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--page-fade), border-color var(--page-fade); }
+.page-board-card:hover { background-color: color-mix(in srgb, var(--page-pop-bg) 96%, var(--page-ink)); }
+.page-board-card[aria-expanded="true"] { border-color: var(--page-accent); box-shadow: inset 0 0 0 1px var(--page-accent); }
+.page-board-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 21px; overflow-wrap: anywhere; }
+.page-board-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--page-ink-soft); font-size: 13px; line-height: 20px; }
+.page-board-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.page-board-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.page-board-face { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--page-code-bg); box-shadow: inset 0 0 0 1px var(--page-rule); color: var(--page-ink-soft); font-size: 10.5px; font-weight: 600; line-height: 1; }
+.page-board-due { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.page-board-due[data-due="today"] { color: var(--page-ink); font-weight: 500; }
+.page-board-due[data-due="overdue"] { color: var(--page-ink); }
+.page-board-due[data-due="overdue"]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--page-danger); }
+.page-board-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.page-board-add { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; margin-top: 6px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--page-ink-soft); font: inherit; font-size: 14px; text-align: start; cursor: pointer; transition: background-color var(--page-fade); }
+.page-board-add .i { width: 14px; height: 14px; color: var(--page-ink-faint); }
+.page-board-add:hover { background: var(--page-pop-hover); }
+.page-board-addcol { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; padding: 0; border: 1px solid var(--page-chrome-line-rest); border-radius: var(--page-chrome-radius); background: var(--page-chrome-bg-rest); color: var(--page-ink-faint); cursor: pointer; transition: color var(--page-fade), background-color var(--page-fade), border-color var(--page-fade); }
+.page-board-addcol:hover { border-color: var(--page-chrome-line-moved); background: var(--page-chrome-bg-moved); color: var(--page-ink-soft); }
+.page-board-addcol .i { width: 14px; height: 14px; }
+.page-board-tray { margin-bottom: 18px; padding: 6px 12px 12px; border-radius: 10px; background: var(--page-callout-bg); }
+.page-board-tray-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 4px; }
+.page-board-tray .page-board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
+.page-board-select { position: relative; display: block; min-width: 0; }
+.page-board-select > .i { position: absolute; inset-inline-end: 8px; top: 50%; margin-top: -8px; color: var(--page-ink-faint); pointer-events: none; }
+.page-board-select select { appearance: none; -webkit-appearance: none; padding-inline-end: 32px; text-overflow: ellipsis; }
+.page-board-move { margin-top: 6px; }
+.page-board-move select { width: 100%; min-height: 32px; padding-inline-start: 10px; border: 1px solid var(--page-pop-line); border-radius: 7px; background: var(--page-pop-bg); color: var(--page-ink); font: inherit; font-size: 14px; cursor: pointer; }
+.page-board-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--page-pop-line); border-radius: 7px; background: none; color: var(--page-pop-ink); font: inherit; font-size: 14px; cursor: pointer; transition: background-color var(--page-fade), color var(--page-fade); }
+.page-board-btn:hover { background: var(--page-pop-hover); }
+.page-board-btn .i { width: 14px; height: 14px; color: var(--page-pop-muted); }
+.page-board-btn:disabled { background: none; color: var(--page-ink-faint); cursor: default; }
+.page-board-btn:disabled .i { color: var(--page-ink-faint); }
+.page-board-restore { flex: none; margin-inline-start: auto; }
+.page-board-deleted { background: none; padding: 0; }
+.page-board-deleted-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
+.page-board-deleted-list { list-style: none; margin: 0; padding: 0 0 0 12px; }
+.page-board-deleted-item { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--page-ink-soft); }
+.page-board :is(button, select, input, textarea):focus-visible, .page-board-panel :is(button, select, input, textarea):focus-visible { outline: 2px solid var(--page-accent); outline-offset: 2px; }
+.page-board-pop { position: absolute; z-index: 6; padding: 6px; border: 1px solid var(--page-pop-line); border-radius: var(--page-pop-radius); background: var(--page-pop-bg); box-shadow: var(--page-pop-shadow); color: var(--page-pop-ink); font-size: 14px; line-height: 1.4; }
+.page-board-menu { top: calc(100% - 2px); inset-inline-end: -6px; width: 208px; }
+.page-board-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 4px 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+.page-board-option:hover, .page-board-option[aria-selected="true"], .page-board-option[aria-pressed="true"] { background: var(--page-pop-hover); }
+.page-board-option > .i { color: var(--page-pop-muted); }
+.page-board-option.is-danger { color: var(--page-danger); }
+.page-board-option.is-danger > .i { color: inherit; }
+.page-board-option:disabled { color: var(--page-ink-faint); cursor: default; background: none; }
+.page-board-option:disabled > .i { color: var(--page-ink-faint); }
+.page-board-sep { height: 1px; margin: 4px 6px; background: var(--page-pop-line); }
+.page-board-rename { flex: 1 1 auto; min-width: 0; height: 28px; margin: -4px 0 -4px -6px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--page-pop-hover); color: var(--page-ink-strong); font: 600 14px/20px var(--page-font-heading); }
+.page-board-new { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--page-rule); border-radius: var(--page-board-radius); background: var(--page-pop-bg); color: var(--page-ink); font: 500 15px/21px var(--page-font); }
+.page-board-new::placeholder, .page-board-rename::placeholder { color: var(--page-ink-faint); font-weight: 400; }
+.page-board-card, .page-board-name, .page-board-count { -webkit-user-select: none; user-select: none; }
+.page-editor[contenteditable="true"] .page-board-head[data-col] .page-board-name { cursor: grab; }
+.page-board.is-dragging, .page-board.is-dragging * { cursor: grabbing; }
+.page-board .is-drag-source { opacity: 0.45; }
+.page-board-drop { height: 2px; margin-block: -5px; border-radius: 1px; background: var(--page-drop, var(--page-accent)); pointer-events: none; }
+.page-board-drop.is-column { flex: 0 0 2px; align-self: stretch; width: 2px; height: auto; margin-block: 0; margin-inline: calc((var(--page-board-gap) + 2px) / -2); }
+.page-board-ghost { position: fixed; z-index: 6; top: 0; left: 0; box-sizing: border-box; margin: 0; box-shadow: var(--page-pop-shadow); pointer-events: none; }
+.page-board-lane.page-board-ghost { padding: 0 10px 10px; border-radius: var(--page-board-radius); background: var(--page-bg); }
+.page-board-scrim { display: none; position: fixed; inset: 0; z-index: 4; background: var(--page-scrim); }
+.page-board-panel { position: fixed; z-index: 5; inset-block: 0; inset-inline-end: 0; width: var(--page-board-panel); box-sizing: border-box; overflow-y: auto; padding: 18px 20px 24px; border-inline-start: 1px solid var(--page-pop-line); background: var(--page-pop-bg); color: var(--page-pop-ink); font-family: var(--page-font); font-size: 15px; line-height: 1.4; }
+.page-shell.has-board-panel { padding-inline-end: calc(var(--page-board-panel) + 16px); }
+.page-board-panel-top { display: flex; align-items: flex-start; gap: 8px; }
+.page-board-panel-title { flex: 1 1 0; min-width: 0; margin: -4px 0 0 -8px; padding: 4px 8px; border: 0; border-radius: 7px; background: none; color: var(--page-ink-strong); font: 600 20px/28px var(--page-font-heading); field-sizing: content; resize: none; overflow: hidden; }
+.page-board-panel-title:hover { background: var(--page-pop-hover); }
+.page-board-close { width: 32px; height: 32px; margin: -2px -6px 0 0; color: var(--page-ink-soft); }
+.page-board-fields { margin: 18px 0 0; border-top: 1px solid var(--page-pop-line); }
+.page-board-field { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 44px; border-bottom: 1px solid var(--page-pop-line); }
+.page-board-field.is-owner { align-items: start; padding-block: 8px; }
+.page-board-field.is-owner .page-board-label { padding-top: 4px; }
+.page-board-label { color: var(--page-pop-muted); font-size: 14px; }
+.page-board-control { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 34px; margin: 0; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--page-pop-ink); font: inherit; font-size: 15px; text-align: start; cursor: pointer; transition: background-color var(--page-fade); }
+.page-board-control:hover { background: var(--page-pop-hover); }
+.page-board-control > .i:last-child { margin-inline-start: auto; color: var(--page-ink-faint); }
+.page-board-control-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.page-board-none { color: var(--page-ink-faint); }
+.page-board-control .page-board-due { margin: 0; color: var(--page-pop-ink); font-weight: 400; }
+.page-board-due-note { color: var(--page-pop-muted); font-size: 13px; }
+.page-board-control .page-board-due + .page-board-due-note { margin-inline-start: auto; }
+.page-board-control .page-board-due-note + .i { margin-inline-start: 0; }
+.page-board-date { border: 1px solid var(--page-pop-line); cursor: text; }
+.page-board-owners { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-inline: 8px; }
+.page-board-people { display: flex; flex-wrap: wrap; gap: 4px; }
+.page-board-person { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--page-rule); border-radius: 14px; background: var(--page-pop-bg); color: var(--page-pop-ink); font: inherit; font-size: 13px; cursor: pointer; transition: background-color var(--page-fade), border-color var(--page-fade); }
+.page-board-person.is-none { padding-inline-start: 10px; color: var(--page-pop-muted); }
+.page-board-person:hover { background: var(--page-pop-hover); }
+.page-board-person[aria-pressed="true"] { border-color: var(--page-accent); background: var(--page-selection); color: var(--page-pop-ink); }
+.page-board-owner-input { width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--page-pop-line); border-radius: 7px; background: var(--page-pop-bg); color: var(--page-pop-ink); font: inherit; font-size: 14px; }
+.page-board-owner-input::placeholder { color: var(--page-ink-faint); }
+.page-board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
+.page-board-delete { margin-inline-start: auto; border-color: transparent; color: var(--page-pop-muted); }
+.page-board-delete:hover { background: var(--page-pop-hover); color: var(--page-danger); }
+.page-board-delete:hover .i { color: inherit; }
+@media (max-width: 1039.98px) {
+  .page-shell.has-board-panel { padding-inline-end: 16px; }
+  .page-board-scrim { display: block; }
+  .page-board-panel { inset: auto 0 0 0; width: auto; max-width: 640px; max-height: 85%; margin-inline: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border: 1px solid var(--page-pop-line); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: var(--page-pop-shadow); }
+  .page-board-close { width: 44px; height: 44px; margin: -8px -10px 0 0; }
+  .page-board-panel-top { min-height: 36px; }
+  .page-board-field { min-height: 48px; }
+  .page-board-control { min-height: 44px; }
+  .page-board-actions { margin-top: 16px; }
+  .page-board-actions .page-board-btn { flex: 1 1 0; min-height: 44px; }
+  .page-board-actions .page-board-delete { flex: 1 1 100%; margin-inline-start: 0; }
+}
+@media (max-width: 560px) {
+  .page-board-scroll { scroll-snap-type: x proximity; scroll-padding-inline: 4px; }
+  .page-board-lane { scroll-snap-align: start; }
+  .page-board-head { padding: 12px 0 11px; }
+  .page-board-head .page-board-icon { width: 44px; height: 44px; margin-block: -12px; }
+  .page-board-colmenu { margin-inline-end: -12px; }
+  .page-board-card { min-height: 44px; padding: 12px 14px 13px; }
+  .page-board-add { min-height: 44px; padding-inline: 14px; }
+  .page-board-addcol { width: 44px; height: 44px; margin-top: 0; }
+  .page-board-tray-head { min-height: 48px; }
+  .page-board-move select, .page-board-btn { min-height: 44px; }
+  .page-board-move select, .page-board-new { font-size: 16px; }
+  .page-board-option { min-height: 44px; }
+  .page-board-rename { height: 44px; margin-block: -12px; font-size: 16px; }
+  .page-board-panel { border-width: 1px 0 0; }
+  .page-board-panel-title { margin-top: -8px; padding-block: 8px; }
+  .page-board-control, .page-board-owner-input { font-size: 16px; }
+  .page-board-label { font-size: 15px; }
+  .page-board-person { height: 44px; border-radius: 22px; }
+  .page-board-owner-input { height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .page-board-icon, .page-board-card, .page-board-add, .page-board-addcol, .page-board-btn, .page-board-control, .page-board-person { transition: none; }
+}
+`;