@unson/brainbase-mcp 0.41.3 → 0.41.6

package/ui/local-web-shell.js

@@ -451,8 +451,11 @@ export function createLocalWebShell({
   workspace.append(mobileBar, main);
   const railAside = makeElement(doc, 'aside', { className: 'bb-shell-rail', attrs: { 'aria-label': '選択中の項目' } });
   const rails = new Map();
+  const nativeDrawers = Boolean(doc.body && typeof doc.createElement('dialog').showModal === 'function');
   for (const screen of screens) {
-    if (!screen.rail) continue;
+    // The built-in history uses a modal drawer in browsers, with a rail fallback
+    // for minimal hosts. Do not reserve an empty desktop column for the drawer.
+    if (!screen.rail || (nativeDrawers && screen.mount === mountToday)) continue;
     const railSlot = makeElement(doc, 'div', { className: 'bb-shell-rail-slot', attrs: { 'data-rail': screen.id } });
     railSlot.hidden = true;
     rails.set(screen.id, railSlot);

package/ui/people-and-companies-view.css

@@ -119,3 +119,146 @@
     display: none;
   }
 }
+
+/* Marks, counts and badges (2026-10). A person is a round mark, a company a
+   rounded square; both keep one tone per id. Counts sit next to each group
+   title, and the jump links at the top move to the people or company part. */
+.bb-pc-jump {
+  display: flex;
+  gap: 4px;
+  margin: 4px 0 18px;
+  padding: 3px;
+  width: max-content;
+  border-radius: 9px;
+  background: var(--bb-color-canvas);
+}
+
+.bb-pc-jump-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--bb-color-ink);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.bb-pc-jump-link:hover {
+  background: var(--bb-color-paper);
+  box-shadow: 0 1px 2px rgb(32 33 36 / 10%);
+}
+
+.bb-pc-count {
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.bb-graph .bb-pc-group-title,
+.bb-graph .bb-pc-company-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bb-graph .bb-pc-company-title {
+  color: var(--bb-color-ink);
+  font-weight: 600;
+}
+
+.bb-pc-mark {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  color: var(--bb-pc-mark-ink);
+  background: var(--bb-pc-mark-bg);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.bb-pc-person-mark { border-radius: 50%; }
+.bb-pc-company-mark { border-radius: 6px; }
+.bb-pc-company-title .bb-pc-mark,
+.bb-pc-company-chip .bb-pc-mark { width: 18px; height: 18px; margin-right: 0; border-radius: 5px; font-size: 10px; }
+
+.bb-pc-tone-0 { --bb-pc-mark-bg: #fde7e9; --bb-pc-mark-ink: #b4233a; }
+.bb-pc-tone-1 { --bb-pc-mark-bg: #e3effd; --bb-pc-mark-ink: #1f5fbf; }
+.bb-pc-tone-2 { --bb-pc-mark-bg: #e2f5ea; --bb-pc-mark-ink: #157046; }
+.bb-pc-tone-3 { --bb-pc-mark-bg: #fff1d6; --bb-pc-mark-ink: #9a5a00; }
+.bb-pc-tone-4 { --bb-pc-mark-bg: #efe7fd; --bb-pc-mark-ink: #6d36c9; }
+.bb-pc-tone-5 { --bb-pc-mark-bg: #e0f4f6; --bb-pc-mark-ink: #0d6e7a; }
+
+.bb-pc-people-ledger .bb-ws-ledger-object,
+.bb-pc-company-ledger .bb-ws-ledger-object {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.bb-pc-people-ledger .bb-ws-ledger-object strong,
+.bb-pc-company-ledger .bb-ws-ledger-object strong {
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bb-pc-company-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+}
+
+.bb-pc-company-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.bb-pc-kinds {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.bb-pc-kind {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 8px;
+  border-radius: 5px;
+  background: var(--bb-color-canvas);
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bb-pc-kind::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.bb-pc-kind-customer { background: #e2f5ea; color: #157046; }
+.bb-pc-kind-partner { background: #e3effd; color: #1f5fbf; }
+.bb-pc-kind-prospect { background: #fff1d6; color: #9a5a00; }
+
+.bb-pc-people-ledger .bb-ws-ledger-row:not(.bb-ws-ledger-head),
+.bb-pc-company-ledger .bb-ws-ledger-row:not(.bb-ws-ledger-head) {
+  align-items: center;
+  min-height: 46px;
+}

package/ui/people-and-companies-view.js

@@ -117,6 +117,21 @@ function ownKey(table, key) {
   return typeof key === 'string' && Object.hasOwn(table, key) ? table[key] : undefined;
 }
 
+/** First visible character of a name for its mark, or a placeholder. */
+function nameInitial(name) {
+  const text = String(name ?? '').trim();
+  const latin = text.split(/\s+/u).filter(Boolean);
+  if (/^[A-Za-z]/u.test(text) && latin.length > 1) return `${latin[0][0]}${latin[1][0]}`.toUpperCase();
+  return ([...text][0] ?? '?').toUpperCase();
+}
+
+/** A stable tone (0-5) per id so a person or company keeps its color. */
+function markTone(id) {
+  let hash = 0;
+  for (const character of String(id ?? '')) hash = (hash * 31 + character.codePointAt(0)) >>> 0;
+  return hash % 6;
+}
+
 /** The read is `ok` only when every person and company is well formed. */
 export function normalizePeopleAndCompanies(result) {
   if (result?.state !== 'ok') return result ?? INVALID;
@@ -269,8 +284,8 @@ export function createPeopleAndCompaniesView({
       selected: person.id === state.detail?.id,
       onSelect: (id) => void controller.openEntity(id),
       cells: [
-        { primary: person.isOwner ? `${person.name}（あなた）` : person.name, secondary: person.id },
-        person.companyIds.length > 0 ? person.companyIds.map(nameOf).join('、') : companyCell(person, ownId),
+        { primary: person.isOwner ? `${person.name}（あなた）` : person.name, leading: personMark(person) },
+        person.companyIds.length > 0 ? companyChips(person.companyIds) : companyCell(person, ownId),
         person.accountableProjectCount > 0
           ? `${person.projectCount}件（うち責任 ${person.accountableProjectCount}件）`
           : `${person.projectCount}件`,
@@ -280,6 +295,67 @@ export function createPeopleAndCompaniesView({
     }));
   }
 
+  function personMark(person) {
+    return makeElement(doc, 'span', {
+      className: `bb-pc-mark bb-pc-person-mark bb-pc-tone-${markTone(person.id)}`,
+      text: nameInitial(person.name),
+      attrs: { 'aria-hidden': 'true' },
+    });
+  }
+
+  function companyMark(id, name) {
+    return makeElement(doc, 'span', {
+      className: `bb-pc-mark bb-pc-company-mark bb-pc-tone-${markTone(id)}`,
+      text: nameInitial(name),
+      attrs: { 'aria-hidden': 'true' },
+    });
+  }
+
+  function companyChips(ids) {
+    const list = makeElement(doc, 'span', { className: 'bb-pc-company-chips' });
+    for (const id of ids) {
+      const chip = makeElement(doc, 'span', { className: 'bb-pc-company-chip' });
+      chip.append(companyMark(id, nameOf(id)), makeElement(doc, 'span', { text: nameOf(id) }));
+      list.append(chip);
+    }
+    return list;
+  }
+
+  function kindBadges(company) {
+    const kinds = company.kinds ?? [];
+    if (kinds.length === 0) return '';
+    const list = makeElement(doc, 'span', { className: 'bb-pc-kinds' });
+    for (const item of kinds) {
+      list.append(makeElement(doc, 'span', {
+        className: `bb-pc-kind bb-pc-kind-${Object.hasOwn(COMPANY_KIND_LABELS, item.kind) ? item.kind : 'other'}`,
+        text: ownKey(COMPANY_KIND_LABELS, item.kind) ?? item.kind,
+      }));
+    }
+    return list;
+  }
+
+  function groupTitle(tag, text, count, { className = 'bb-pc-group-title', leading } = {}) {
+    const title = makeElement(doc, tag, { className });
+    if (leading) title.append(leading);
+    title.append(makeElement(doc, 'span', { text }), makeElement(doc, 'span', { className: 'bb-pc-count', text: String(count) }));
+    return title;
+  }
+
+  function jumpLinks(payload) {
+    const people = payload.people.filter((person) => person.active).length;
+    const companies = payload.companies.filter((company) => company.active).length;
+    const nav = makeElement(doc, 'nav', { className: 'bb-pc-jump', attrs: { 'aria-label': '人と会社の段' } });
+    for (const [label, count, target] of [['人', people, 'bb-pc-people'], ['会社', companies, 'bb-pc-companies']]) {
+      const link = button(doc, '', () => {
+        const node = typeof doc.getElementById === 'function' ? doc.getElementById(target) : null;
+        node?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
+      }, { className: 'bb-pc-jump-link', attrs: { 'aria-label': `${label} ${count}件の段へ移る` } });
+      link.append(makeElement(doc, 'span', { text: label }), makeElement(doc, 'span', { className: 'bb-pc-count', text: String(count) }));
+      nav.append(link);
+    }
+    return nav;
+  }
+
   function orgNoteText(note) {
     return `記録上のメモ: ${note}（所属ではありません）`;
   }
@@ -324,7 +400,7 @@ export function createPeopleAndCompaniesView({
   }
 
   function peopleSection(payload) {
-    const section = makeElement(doc, 'section', { className: 'bb-pc-people', attrs: { 'aria-label': '人' } });
+    const section = makeElement(doc, 'section', { className: 'bb-pc-people', attrs: { 'aria-label': '人', id: 'bb-pc-people' } });
     section.append(workspaceSectionTitle(doc, { title: '人', lead: '社内か社外かは、所属（会社への所属の関係）と自社から決めています。印は別に持っていません。' }));
     if (can.createPerson) section.append(sectionActions('人を加える', () => openCreateEntity('person')));
     const groups = groupPeople(payload);
@@ -337,22 +413,22 @@ export function createPeopleAndCompaniesView({
       }));
     }
     if (groups.ownCompanyId) {
-      section.append(makeElement(doc, 'h3', { className: 'bb-pc-group-title', text: `社内（${nameOf(groups.ownCompanyId)}）` }));
+      section.append(groupTitle('h3', `社内（${nameOf(groups.ownCompanyId)}）`, groups.internal.length));
       section.append(peopleLedger('社内の人', groups.internal, '自社に所属する人の記録はありません。'));
-      section.append(makeElement(doc, 'h3', { className: 'bb-pc-group-title', text: '社外' }));
+      section.append(groupTitle('h3', '社外', groups.external.reduce((sum, group) => sum + group.people.length, 0)));
       if (groups.external.length === 0) section.append(makeElement(doc, 'p', { className: 'bb-pc-empty', text: 'ほかの会社に所属する人の記録はありません。' }));
       for (const group of groups.external) {
-        section.append(makeElement(doc, 'h4', { className: 'bb-pc-company-title', text: group.company.name }));
+        section.append(groupTitle('h4', group.company.name, group.people.length, { className: 'bb-pc-company-title', leading: companyMark(group.company.id, group.company.name) }));
         section.append(peopleLedger(`${group.company.name}の人`, group.people));
       }
     }
-    section.append(makeElement(doc, 'h3', { className: 'bb-pc-group-title', text: '所属未確認' }));
+    section.append(groupTitle('h3', '所属未確認', groups.unknown.length));
     section.append(peopleLedger('所属未確認の人', groups.unknown, '所属が分からない人はいません。'));
     return section;
   }
 
   function companySection(payload) {
-    const section = makeElement(doc, 'section', { className: 'bb-pc-companies', attrs: { 'aria-label': '会社' } });
+    const section = makeElement(doc, 'section', { className: 'bb-pc-companies', attrs: { 'aria-label': '会社', id: 'bb-pc-companies' } });
     section.append(workspaceSectionTitle(doc, {
       title: '会社',
       lead: '自社を先頭に、顧客・協業先など関わる会社を並べています。種類は、会社の属性、プロジェクトとの関係の役割、提案中の案件の記録から出しています。記録が無い会社には種類を出しません。',
@@ -369,8 +445,8 @@ export function createPeopleAndCompaniesView({
         selected: company.id === state.detail?.id,
         onSelect: (id) => void controller.openEntity(id),
         cells: [
-          { primary: company.id === payload.ownCompany.id ? `${company.name}（自社）` : company.name, secondary: company.id },
-          companyKindLabel(company),
+          { primary: company.id === payload.ownCompany.id ? `${company.name}（自社）` : company.name, leading: companyMark(company.id, company.name) },
+          kindBadges(company),
           `${company.memberIds.length}人`,
           company.relatedProjects.length > 0
             ? `${company.projectIds.length}件（関わる ${company.relatedProjects.length}件）`
@@ -408,7 +484,7 @@ export function createPeopleAndCompaniesView({
       return [...children, graphHostEmptyNotice(doc, emptyNotice)
         ?? workspaceNotice(doc, { label: '未登録', tone: 'info', role: 'status', text: 'Graphに人と会社の記録はまだありません。' })];
     }
-    return [...children, peopleSection(payload), companySection(payload), endedNote(payload)];
+    return [...children, jumpLinks(payload), peopleSection(payload), companySection(payload), endedNote(payload)];
   }
 
   // -------------------------------------------------------------------------

package/ui/workspace-kit.css

@@ -530,3 +530,46 @@
 .bb-ws-error-card :is(summary,button):focus-visible { outline: 2px solid var(--bb-color-notice-text); outline-offset: 2px; }
 .bb-ws-inline-error { height: 15px; max-height: 15px; margin: 4px 0; padding: 0; overflow: hidden; color: var(--bb-color-inline-error); font-size: 11px; line-height: 15px; }
 @media (prefers-reduced-motion: reduce) { .bb-ws-help-bubble { transition: none; } }
+
+/* One native-dialog drawer presentation for shared parts and host-owned task dialogs. */
+.bb-ws-drawer {
+  box-sizing: border-box; width: min(640px,100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
+  margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--bb-color-border);
+  border-radius: 0; background: var(--bb-color-panel); color: var(--bb-color-ink); box-shadow: var(--bb-shadow-drawer); overflow: auto;
+}
+.bb-ws-drawer[open] { animation: bb-ws-drawer-in 180ms ease-out; }
+.bb-ws-drawer::backdrop { background: var(--bb-color-drawer-overlay); }
+.bb-ws-drawer.is-closing { animation: bb-ws-drawer-out 280ms ease-in both; pointer-events: none; }
+.bb-ws-drawer.is-closing::backdrop { animation: bb-ws-drawer-backdrop-out 280ms ease-in both; }
+.bb-ws-drawer .bb-ws-dialog-head { align-items: center; padding: 14px 16px 14px 28px; }
+.bb-ws-drawer .bb-ws-dialog-head h2 { font-weight: 650; line-height: 1.35; }
+.bb-ws-drawer .bb-ws-dialog-body { padding: 18px 28px 32px; }
+@keyframes bb-ws-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
+@keyframes bb-ws-drawer-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(32px); opacity: 0; } }
+@keyframes bb-ws-drawer-backdrop-out { from { background: var(--bb-color-drawer-overlay); } to { background: var(--bb-color-drawer-overlay-clear); } }
+.bb-ws-filter-anchor { position: relative; display: inline-flex; flex: none; }
+.bb-ws-filter-anchor > .bb-ws-button::after { content: '⌄'; margin-left: var(--bb-space-2); }
+.bb-ws-filter-popover {
+  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: grid; gap: var(--bb-space-4);
+  box-sizing: border-box; width: 360px; max-width: calc(100vw - 48px); padding: 20px;
+  border: 1px solid var(--bb-color-border); border-radius: 12px; background: var(--bb-color-panel); color: var(--bb-color-ink);
+  box-shadow: var(--bb-shadow-popover); max-height: calc(100dvh - 220px); overflow-y: auto;
+  transform-origin: top right; animation: bb-ws-filter-enter 180ms ease-out;
+}
+.bb-ws-filter-popover[hidden] { display: none !important; }
+@keyframes bb-ws-filter-enter { from { opacity: 0; transform: translateY(-6px) scaleY(.96); } to { opacity: 1; transform: none; } }
+.bb-ws-loading-card { align-items: center; border-left-color: var(--bb-color-notice-control-border); }
+.bb-ws-loading-spinner { position: relative; display: block; flex: none; width: 14px; height: 14px; }
+.bb-ws-loading-spinner::before {
+  content: ''; position: absolute; top: 1px; left: 1px; box-sizing: border-box; width: 12px; height: 12px;
+  border: 1.5px solid var(--bb-color-notice-control-border); border-top-color: var(--bb-color-notice-text); border-radius: 50%;
+  transform-origin: center; animation: bb-ws-spinner 1s linear infinite;
+}
+@keyframes bb-ws-spinner { to { transform: rotate(360deg); } }
+.bb-ws-error-card.is-dismissing { animation: bb-ws-notification-out 450ms ease both; pointer-events: none; }
+@keyframes bb-ws-notification-out { to { opacity: 0; transform: translateX(28px); } }
+@media (max-width:760px) { .bb-ws-drawer { width: 100vw; border-left: 0; } }
+@media (prefers-reduced-motion:reduce) {
+  .bb-ws-drawer[open], .bb-ws-drawer.is-closing, .bb-ws-drawer.is-closing::backdrop,
+  .bb-ws-filter-popover, .bb-ws-loading-spinner::before, .bb-ws-error-card.is-dismissing { animation: none; }
+}

package/ui/workspace-kit.js

@@ -256,23 +256,150 @@ export function workspaceHelp(doc, { text, label } = {}) {
   wrap.append(control, bubble); return wrap;
 }
 
-/** Native dialog keeps focus trapped, Escape close and focus restoration. */
-export function workspaceDialog(doc, { title, content, opener } = {}) {
+const drawerClosings = new WeakMap();
+const notificationClosings = new WeakMap();
+const reducedMotion = node => node.ownerDocument?.defaultView?.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;
+
+/** Apply the same native-dialog presentation to host-owned and kit drawers. */
+export function workspaceApplyDrawer(dialog) {
+  dialog.classList.add('bb-ws-drawer');
+  return dialog;
+}
+
+/** Keep the modal/focus trap alive until the exit motion finishes. Returns cancellation cleanup. */
+export function workspaceCloseDrawer(dialog, finish) {
+  if (drawerClosings.has(dialog)) return drawerClosings.get(dialog);
+  if (!dialog.open || reducedMotion(dialog)) { finish(); return () => {}; }
+  let timer;
+  let active = true;
+  const cancel = () => {
+    if (!active) return;
+    active = false;
+    clearTimeout(timer);
+    dialog.removeEventListener('animationend', ended);
+    dialog.removeEventListener('close', cancel);
+    dialog.classList.remove('is-closing');
+    drawerClosings.delete(dialog);
+  };
+  const complete = () => { if (!active) return; cancel(); finish(); };
+  const ended = event => {
+    if (event.target === dialog && event.animationName === 'bb-ws-drawer-out') complete();
+  };
+  drawerClosings.set(dialog, cancel);
+  dialog.addEventListener('animationend', ended);
+  dialog.addEventListener('close', cancel);
+  dialog.classList.add('is-closing');
+  timer = setTimeout(complete, 360); // Animation cancellation / background-tab fallback.
+  return cancel;
+}
+
+/** Native modal, optionally a right drawer. close() animates; dispose() tears down immediately. */
+export function workspaceDialog(doc, { title, content, opener, presentation = 'center', onClose } = {}) {
   const dialog = el(doc, 'dialog', { className: 'bb-ws-dialog' });
+  if (presentation === 'drawer') workspaceApplyDrawer(dialog);
   const headingId = `bb-ws-dialog-${++workspaceSequence}`;
   dialog.setAttribute('aria-labelledby', headingId);
   const head = el(doc, 'header', { className: 'bb-ws-dialog-head' });
+  const nativeClose = dialog.close.bind(dialog);
+  let disposed = false;
+  const cleanup = () => {
+    if (disposed) return;
+    disposed = true;
+    drawerClosings.get(dialog)?.();
+    dialog.remove();
+    try { onClose?.(); } finally {
+      const target = typeof opener === 'function' ? opener() : opener;
+      if (target?.isConnected) target.focus();
+    }
+  };
+  dialog.close = value => {
+    if (disposed) return;
+    const finish = () => { nativeClose(value); cleanup(); };
+    if (presentation === 'drawer') workspaceCloseDrawer(dialog, finish);
+    else finish();
+  };
+  dialog.dispose = () => {
+    if (disposed) return;
+    drawerClosings.get(dialog)?.();
+    nativeClose(); cleanup();
+  };
   const close = workspaceButton(doc, { text: '×', attrs: { 'aria-label': '閉じる' }, onClick: () => dialog.close() });
   head.append(el(doc, 'h2', { text: title, attrs: { id: headingId } }), close);
   const body = el(doc, 'div', { className: 'bb-ws-dialog-body' }); appendContent(body, doc, content);
   dialog.append(head, body); doc.body.append(dialog);
+  dialog.addEventListener('cancel', event => { event.preventDefault(); dialog.close(); });
   dialog.addEventListener('click', event => {
     if (event.target !== dialog) return;
     const rect = dialog.getBoundingClientRect();
     if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) dialog.close();
   });
-  dialog.addEventListener('close', () => { dialog.remove(); if (opener?.isConnected) opener.focus(); }, { once: true });
-  dialog.showModal(); close.focus(); return dialog;
+  dialog.addEventListener('close', cleanup, { once: true });
+  try { dialog.showModal(); close.focus(); } catch (error) { cleanup(); throw error; }
+  return dialog;
+}
+
+/** Anchored advanced search. Hosts destroy it before replacing its controls. */
+export function workspaceFilterPopover(doc, { content, open = false, onToggle, trigger, panel: suppliedPanel, initialFocus } = {}) {
+  const root = el(doc, 'span', { className: 'bb-ws-filter-anchor' });
+  const panel = suppliedPanel || el(doc, 'div', { className: 'bb-ws-filter-popover', attrs: { id: `bb-ws-filter-${++workspaceSequence}`, role: 'region', 'aria-label': '詳細検索' } });
+  if (!panel.id && !panel.getAttribute?.('id')) panel.setAttribute('id', `bb-ws-filter-${++workspaceSequence}`);
+  panel.classList?.add('bb-ws-filter-popover');
+  const control = trigger || workspaceButton(doc, { text: '詳細検索', variant: 'quiet' });
+  control.setAttribute('aria-controls', panel.id || panel.getAttribute?.('id') || panel.attributes?.id);
+  appendContent(panel, doc, content); root.append(control, panel);
+  let destroyed = false;
+  const removeListeners = () => { doc.removeEventListener?.('pointerdown', outside); doc.removeEventListener?.('keydown', escape); };
+  const setOpen = (value, focus = false) => {
+    if (destroyed) return;
+    removeListeners(); panel.hidden = !value; control.setAttribute('aria-expanded', String(value));
+    onToggle?.(value);
+    if (value) {
+      doc.addEventListener?.('pointerdown', outside); doc.addEventListener?.('keydown', escape);
+      if (focus) (typeof initialFocus === 'function' ? initialFocus() : initialFocus || panel.querySelector?.('input:not(:disabled),select:not(:disabled),button:not(:disabled)'))?.focus();
+    }
+  };
+  const outside = event => { if (!root.contains?.(event.target)) setOpen(false); };
+  const escape = event => {
+    if (event.key !== 'Escape') return;
+    event.preventDefault(); event.stopPropagation(); setOpen(false); control.focus();
+  };
+  const toggle = () => setOpen(panel.hidden, true);
+  control.addEventListener('click', toggle); setOpen(open);
+  return { root, control, panel, destroy() {
+    destroyed = true; removeListeners(); control.removeEventListener?.('click', toggle);
+    panel.hidden = true; control.setAttribute('aria-expanded', 'false');
+  } };
+}
+
+/** Compact notification with a fixed-center, purely visual spinner. */
+export function workspaceLoadingCard(doc, { title = 'ロード中' } = {}) {
+  const card = el(doc, 'section', { className: 'bb-ws-error-card bb-ws-loading-card', attrs: { role: 'status', 'aria-live': 'polite' } });
+  card.append(el(doc, 'span', { className: 'bb-ws-loading-spinner', attrs: { 'aria-hidden': 'true' } }), el(doc, 'span', { text: title }));
+  return card;
+}
+
+/** Fade right then remove. Calling the returned cancel function restores a reusable card. */
+export function workspaceDismissNotification(card, onDismiss) {
+  const remove = () => {
+    if (typeof card.remove === 'function') card.remove();
+    else if (card.parentNode?.removeChild) card.parentNode.removeChild(card);
+    else if (card.parentNode?.replaceChildren) card.parentNode.replaceChildren(...Array.from(card.parentNode.children).filter(node => node !== card));
+  };
+  if (notificationClosings.has(card)) return notificationClosings.get(card);
+  if (!card.classList || reducedMotion(card)) { remove(); onDismiss?.(); return () => {}; }
+  let timer;
+  let active = true;
+  const cancel = () => {
+    if (!active) return;
+    active = false; clearTimeout(timer);
+    card.removeEventListener('animationend', ended);
+    card.classList.remove('is-dismissing'); notificationClosings.delete(card);
+  };
+  const complete = () => { if (!active) return; cancel(); remove(); onDismiss?.(); };
+  const ended = event => { if (event.target === card && event.animationName === 'bb-ws-notification-out') complete(); };
+  notificationClosings.set(card, cancel); card.addEventListener('animationend', ended);
+  card.classList.add('is-dismissing'); timer = setTimeout(complete, 500);
+  return cancel;
 }
 
 /** Persistent, initially closed notification. The caller owns its lifecycle. */