@unson/brainbase-mcp 0.41.13 → 0.43.0

package/ui/area-nav.js

@@ -1,13 +1,18 @@
 /*
  * Area navigation shared by OSS Personal and the organization edition
- * (brainbase-project ledger D10, stage 2).
+ * (brainbase-project ledger D10).
  *
- * The left side lists only the areas; the screens of the current area are tabs
- * above the page.  An area link opens the screen last used in that area, which
- * is remembered in the viewer's browser only (a display preference, not a fact
- * of the organization).  Every area link and tab is a link to a screen, so
- * screen addresses never change.  The part draws links only: showing and
- * loading screens stays with the caller (`show` in, `onSelect` out).
+ * Each line on the left is an area: usually one screen (a destination itself,
+ * 2026-10-17 revision), or several screens shown as tabs above the page (設定).
+ * An area link opens the screen last used in that area, which is remembered in
+ * the viewer's browser only (a display preference, not a fact of the
+ * organization).  Optional `sections` group the lines under small headings and
+ * put some at the bottom; a heading can open a screen of its own, and the
+ * caller can put links at the top of a section (starred projects).  Without
+ * `sections` the lines sit directly in the nav, as in stage 2.  Every link is a
+ * link to a screen, so screen addresses never change.  The part draws links
+ * only: showing and loading screens stays with the caller (`show` in,
+ * `onSelect` / `onSelectLink` out).
  */
 
 export const AREA_NAV_CONTRACT_VERSION = 'brainbase.area-nav.v1';
@@ -78,12 +83,18 @@ export function resolveAreaTarget(area, { remembered = null, isShown = () => tru
 /**
  * @param {object} options
  * @param {Document} options.document
- * @param {Array<{id: string, label: string|null, defaultScreen?: string, screenIds: string[]}>} options.areas
+ * @param {Array<{id: string, label: string|null, defaultScreen?: string, screenIds: string[], section?: string}>} options.areas
  *   In menu order. A null label takes the label of the area's only screen.
  * @param {Array<{id: string, label: string, href?: string, external?: boolean, hidden?: boolean}>} options.screens
+ * @param {Array<{id: string, label: string|null, placement?: 'main'|'footer', screenId?: string}>} [options.sections]
+ *   Groups of lines. A section sits where its first area is (a section without
+ *   areas after the other main ones); `footer` sections come last. `screenId`
+ *   makes the heading a link to that screen. Areas without a section are grouped
+ *   with their neighbours, without a heading.
  * @param {{get(areaId: string): string|null, set(areaId: string, screenId: string): void}} [options.memory]
  * @param {(screenId: string) => string} [options.hrefFor] Address of a screen (default `#<id>`).
  * @param {(screenId: string, event: Event) => void} [options.onSelect]
+ * @param {(linkId: string, event: Event) => void} [options.onSelectLink] A link given by `setLinks`.
  * @param {(area: object) => Node|null} [options.iconFor] Icon in front of an area link.
  * @param {string} [options.linkClassName] Extra class for the area links (the host's look).
  */
@@ -91,9 +102,11 @@ export function createAreaNav({
   document: doc,
   areas: areaInput,
   screens: screenInput,
+  sections: sectionInput,
   memory = createAreaMemory(null),
   hrefFor = (screenId) => `#${screenId}`,
   onSelect,
+  onSelectLink,
   iconFor,
   linkClassName = '',
   label = '画面',
@@ -108,10 +121,18 @@ export function createAreaNav({
     count: null,
     waiting: false,
   }]));
+  const sections = new Map((sectionInput ?? []).map((section) => [section.id, {
+    id: section.id,
+    label: section.label ?? null,
+    footer: section.placement === 'footer',
+    screenId: section.screenId ?? null,
+    links: [],
+  }]));
   const areas = (areaInput ?? []).map((area) => ({
     id: area.id,
     label: area.label ?? null,
     defaultScreen: area.defaultScreen ?? null,
+    section: sections.has(area.section) ? area.section : null,
     screens: area.screenIds.map((id) => screens.get(id)).filter(Boolean),
   })).filter((area) => area.screens.length > 0);
   const areaByScreen = new Map();
@@ -137,10 +158,11 @@ export function createAreaNav({
   const tabs = makeElement(doc, 'nav', { className: 'bb-area-tabs' });
   tabs.hidden = true;
   const areaLinks = new Map();
+  const linkClass = ['bb-area-link', linkClassName].filter(Boolean).join(' ');
 
   for (const area of areas) {
     const link = makeElement(doc, 'a', {
-      className: ['bb-area-link', linkClassName].filter(Boolean).join(' '),
+      className: linkClass,
       attrs: { 'data-area': area.id },
     });
     link.addEventListener('click', (event) => {
@@ -148,7 +170,87 @@ export function createAreaNav({
       if (target) onSelect?.(target, event);
     });
     areaLinks.set(area.id, link);
-    nav.append(link);
+  }
+
+  // Groups of lines: one per section, plus runs of areas without a section.
+  const groups = [];
+  if (sections.size === 0) {
+    nav.append(...areas.map((area) => areaLinks.get(area.id)));
+  } else {
+    const groupOf = new Map();
+    const makeGroup = (section) => {
+      const element = makeElement(doc, 'div', {
+        className: section?.footer ? 'bb-area-section is-footer' : 'bb-area-section',
+        attrs: {
+          role: 'group',
+          'aria-label': section?.label ?? null,
+          'data-section': section?.id ?? null,
+          'data-placement': section?.footer ? 'footer' : null,
+        },
+      });
+      const group = { section, element, headingText: null, headingLink: null, linkSlot: null, areas: [] };
+      if (section) {
+        // Both forms of the heading are made once; render shows one of them.
+        group.headingText = makeElement(doc, 'div', { className: 'bb-area-section-label', text: section.label ?? '' });
+        group.headingLink = makeElement(doc, 'a', { className: 'bb-area-section-label bb-area-section-link', text: section.label ?? '' });
+        group.headingLink.addEventListener('click', (event) => {
+          if (section.screenId) onSelect?.(section.screenId, event);
+        });
+        group.linkSlot = makeElement(doc, 'div', { className: 'bb-area-section-links' });
+        groupOf.set(section.id, group);
+      }
+      groups.push(group);
+      return group;
+    };
+    for (const area of areas) {
+      const section = area.section ? sections.get(area.section) : null;
+      const last = groups.at(-1);
+      const group = section
+        ? groupOf.get(section.id) ?? makeGroup(section)
+        : last && !last.section ? last : makeGroup(null);
+      group.areas.push(area);
+    }
+    for (const section of sections.values()) if (!groupOf.has(section.id)) makeGroup(section);
+    const ordered = [...groups.filter((group) => !group.section?.footer), ...groups.filter((group) => group.section?.footer)];
+    groups.splice(0, groups.length, ...ordered);
+    for (const group of groups) {
+      group.element.append(...[group.headingText, group.headingLink, group.linkSlot, ...group.areas.map((area) => areaLinks.get(area.id))].filter(Boolean));
+      nav.append(group.element);
+    }
+  }
+
+  function renderHeading(group) {
+    const { section, headingText, headingLink } = group;
+    const screen = section.screenId ? screens.get(section.screenId) : null;
+    const opens = Boolean(screen && isShown(screen.id) && !screen.external);
+    headingText.hidden = !section.label || opens;
+    headingLink.hidden = !section.label || !opens;
+    if (opens) headingLink.setAttribute('href', screenHref(screen));
+    else headingLink.removeAttribute('href');
+    if (opens && activeScreenId === screen.id) headingLink.setAttribute('aria-current', 'page');
+    else headingLink.removeAttribute('aria-current');
+    return opens;
+  }
+
+  function renderLinks(group) {
+    group.linkSlot.replaceChildren(...group.section.links.map((entry) => {
+      const link = makeElement(doc, 'a', {
+        className: linkClass,
+        attrs: { href: entry.href, 'data-link': entry.id, 'aria-current': entry.current ? 'page' : null },
+      });
+      link.append(makeElement(doc, 'span', { className: 'bb-area-link-label', text: entry.label }));
+      if (entry.count > 0) link.append(countBadge(entry.count, `待っているもの${entry.count}件`));
+      link.addEventListener('click', (event) => onSelectLink?.(entry.id, event));
+      return link;
+    }));
+    group.linkSlot.hidden = group.section.links.length === 0;
+  }
+
+  function renderGroup(group) {
+    const headingOpens = group.section ? renderHeading(group) : false;
+    if (group.section) renderLinks(group);
+    const anyArea = group.areas.some((area) => !areaLinks.get(area.id).hidden);
+    group.element.hidden = !(anyArea || headingOpens || (group.section?.links.length ?? 0) > 0);
   }
 
   function renderAreaLink(area) {
@@ -202,6 +304,7 @@ export function createAreaNav({
 
   function render() {
     for (const area of areas) renderAreaLink(area);
+    for (const group of groups) renderGroup(group);
     renderTabs();
   }
 
@@ -241,6 +344,23 @@ export function createAreaNav({
       render();
       return controller;
     },
+    /**
+     * Links at the top of a section, before its areas (for example starred
+     * projects): `{id, label, href, count?, current?}`. An empty list removes them.
+     */
+    setLinks(sectionId, links) {
+      const section = sections.get(sectionId);
+      if (!section) return controller;
+      section.links = (links ?? []).filter((entry) => entry && entry.id && entry.label && entry.href).map((entry) => ({
+        id: String(entry.id),
+        label: String(entry.label),
+        href: String(entry.href),
+        count: Number.isInteger(entry.count) && entry.count > 0 ? entry.count : 0,
+        current: entry.current === true,
+      }));
+      render();
+      return controller;
+    },
   };
   render();
   return controller;

package/ui/inbox.css

@@ -0,0 +1,189 @@
+/*
+ * 受信箱. Load after workspace-kit.css.
+ * The two tabs, the sections by what to do, the rows with their buttons on
+ * the right, and the lines for kinds that could not be read or are not
+ * collected yet.  A kind that could not be read is told by words in the
+ * warning tone, never left out.  Uses only the shared tokens in
+ * brainbase-tokens.css.
+ */
+.bb-inbox-tabs {
+  display: flex;
+  gap: var(--bb-space-1);
+  margin: 0 0 var(--bb-space-4);
+  border-bottom: 1px solid var(--bb-color-border);
+}
+
+.bb-inbox-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: -1px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 8px 12px;
+  background: transparent;
+  color: var(--bb-color-muted);
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.bb-inbox-tab.is-selected {
+  border-bottom-color: var(--bb-color-accent);
+  color: var(--bb-color-ink);
+  font-weight: 600;
+}
+
+.bb-inbox-count {
+  min-width: 20px;
+  border-radius: 999px;
+  padding: 0 6px;
+  background: var(--bb-color-accent-soft);
+  color: var(--bb-color-accent);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+}
+
+.bb-inbox-loading {
+  height: 2px;
+  margin: 0 0 10px;
+  overflow: hidden;
+  background: var(--bb-color-accent-soft);
+  color: transparent;
+  font-size: 0;
+}
+
+.bb-inbox-group {
+  margin: 0 0 var(--bb-space-5);
+}
+
+.bb-inbox-group-title {
+  margin: 0 0 var(--bb-space-2);
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bb-inbox-list {
+  border: 1px solid var(--bb-color-border);
+  border-radius: var(--bb-radius-md);
+  background: var(--bb-color-paper);
+}
+
+.bb-inbox-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bb-space-2) var(--bb-space-3);
+  padding: var(--bb-space-3) var(--bb-space-4);
+  border-top: 1px solid var(--bb-color-border);
+}
+
+.bb-inbox-row:first-child {
+  border-top: 0;
+}
+
+.bb-inbox-row-main {
+  flex: 1 1 260px;
+  min-width: 0;
+}
+
+.bb-inbox-title {
+  color: var(--bb-color-ink);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+a.bb-inbox-title:hover,
+a.bb-inbox-title:focus-visible {
+  color: var(--bb-color-accent-strong);
+  text-decoration: underline;
+}
+
+.bb-inbox-detail {
+  margin: 2px 0 0;
+  color: var(--bb-color-muted);
+  font-size: 13px;
+}
+
+.bb-inbox-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-2);
+  margin-top: 4px;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-inbox-blocking {
+  border-radius: 999px;
+  padding: 0 8px;
+  background: var(--bb-color-warning-soft);
+  color: var(--bb-color-warning);
+  font-weight: 600;
+}
+
+.bb-inbox-due {
+  color: var(--bb-color-ink);
+}
+
+.bb-inbox-row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-1);
+}
+
+.bb-inbox-later-menu {
+  display: flex;
+  flex-wrap: wrap;
+  flex-basis: 100%;
+  justify-content: flex-end;
+  gap: var(--bb-space-1);
+}
+
+.bb-inbox-source {
+  margin: var(--bb-space-2) 0 0;
+  font-size: 13px;
+}
+
+.bb-inbox-source.is-unavailable {
+  border-radius: var(--bb-radius-sm);
+  padding: var(--bb-space-2) var(--bb-space-3);
+  background: var(--bb-color-warning-soft);
+  color: var(--bb-color-warning);
+}
+
+.bb-inbox-source.is-not-connected,
+.bb-inbox-uncollected {
+  color: var(--bb-color-muted);
+}
+
+.bb-inbox-uncollected {
+  margin: 0 0 var(--bb-space-3);
+  font-size: 13px;
+}
+
+.bb-inbox-empty {
+  margin: 0 0 var(--bb-space-3);
+  color: var(--bb-color-ink);
+  font-size: 14px;
+}
+
+.bb-inbox-elsewhere {
+  display: flex;
+  gap: var(--bb-space-2);
+}
+
+@media (max-width: 640px) {
+  .bb-inbox-row {
+    padding: var(--bb-space-3);
+  }
+
+  .bb-inbox-row-actions {
+    width: 100%;
+  }
+}