@unson/brainbase-mcp 0.41.2 → 0.41.4

package/ui/local-web-shell.css

@@ -1,3 +1,4 @@
+@import './native-scrollbars.css';
 /*
  * Shell of the local Web host, in the organization edition's layout: a white
  * left rail (brand, navigation, source) and a paper workspace. Uses only the

package/ui/local-web-shell.js

@@ -26,6 +26,7 @@ import { createMeetingMinutesStorageExtension } from './meeting-minutes-storage.
 import { createMeetingMinutesLineageExtension } from './meeting-minutes-lineage-http.js';
 import { createWorldModelView } from './world-model-view.js';
 import { createGraphClient } from './graph-view-shared.js';
+import { installNativeScrollbars } from './native-scrollbars.js';
 
 export const LOCAL_WEB_SHELL_CONTRACT_VERSION = 'brainbase.local-web-shell.v1';
 
@@ -459,6 +460,7 @@ export function createLocalWebShell({
   }
   shell.append(sidebar, backdrop, workspace, railAside);
   root.replaceChildren(shell);
+  const stopScrollbars = doc.documentElement?.classList && doc.addEventListener ? installNativeScrollbars(doc) : () => {};
 
   // The rail column shows only while the active screen is mounted and has one.
   function updateRail() {
@@ -493,6 +495,7 @@ export function createLocalWebShell({
   }
 
   const controller = {
+    destroy() { stopScrollbars(); for (const view of mounted.values()) view?.destroy?.(); root.replaceChildren(); },
     get state() {
       return { active, status, mounted: [...mounted.keys()] };
     },

package/ui/native-scrollbars.css

@@ -0,0 +1,18 @@
+
+@property --bb-scrollbar-opacity { syntax: "<number>"; inherits: false; initial-value: 0; }
+:root.bb-native-scrollbars, .bb-native-scrollbars :is(.bb-scrollable, .sidebar, .bb-shell-sidebar, .bb-shell-main, .bb-shell-rail, .bb-ws-dialog, .mutation-dialog) {
+  --bb-scrollbar-rgb: var(--bb-color-scrollbar-rgb); --bb-scrollbar-opacity: 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--bb-scrollbar-rgb),var(--bb-scrollbar-opacity)) transparent;
+  transition: --bb-scrollbar-opacity 450ms ease;
+}
+.bb-native-scrollbars :is(.sidebar,.bb-shell-sidebar) { --bb-scrollbar-rgb: var(--bb-color-scrollbar-dark-rgb); }
+:root.bb-native-scrollbars.bb-is-scrolling, .bb-native-scrollbars .bb-is-scrolling { --bb-scrollbar-opacity: .28; }
+:root.bb-native-scrollbars::-webkit-scrollbar, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog)::-webkit-scrollbar { width: 6px; height: 6px; }
+:root.bb-native-scrollbars::-webkit-scrollbar-track, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog)::-webkit-scrollbar-track { background: transparent; }
+:root.bb-native-scrollbars::-webkit-scrollbar-thumb, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog)::-webkit-scrollbar-thumb { background: rgba(var(--bb-scrollbar-rgb),var(--bb-scrollbar-opacity)); border-radius: 8px; }
+@media (prefers-reduced-motion: reduce) { :root.bb-native-scrollbars, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog) { transition: none; } }
+@media (forced-colors: active) {
+  :root.bb-native-scrollbars, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog) { scrollbar-width: auto; scrollbar-color: auto; }
+  :root.bb-native-scrollbars::-webkit-scrollbar-thumb, .bb-native-scrollbars :is(.bb-scrollable,.sidebar,.bb-shell-sidebar,.bb-shell-main,.bb-shell-rail,.bb-ws-dialog,.mutation-dialog)::-webkit-scrollbar-thumb { background: CanvasText; }
+}

package/ui/native-scrollbars.js

@@ -0,0 +1,18 @@
+/** Animate native scrollbars without replacing scrolling or input handling. */
+export function installNativeScrollbars(doc = document) {
+  const timers = new Map();
+  doc.documentElement.classList.add('bb-native-scrollbars');
+  const activate = event => {
+    const target = event.target === doc ? doc.scrollingElement : event.target;
+    if (!target?.classList) return;
+    target.classList.add('bb-scrollable', 'bb-is-scrolling');
+    clearTimeout(timers.get(target));
+    timers.set(target, setTimeout(() => { target.classList.remove('bb-is-scrolling'); timers.delete(target); }, 800));
+  };
+  doc.addEventListener('scroll', activate, true);
+  return () => {
+    doc.removeEventListener('scroll', activate, true);
+    for (const [target, timer] of timers) { clearTimeout(timer); target.classList.remove('bb-is-scrolling'); }
+    timers.clear(); doc.documentElement.classList.remove('bb-native-scrollbars');
+  };
+}

package/ui/workspace-kit.css

@@ -494,3 +494,39 @@
   }
 
 }
+
+/* Shared help, modal, disclosures and persistent notifications. */
+.bb-ws-help { position: relative; display: inline-flex; vertical-align: middle; }
+.bb-ws-help-button { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--bb-color-muted); border-radius: 50%; background: transparent; color: var(--bb-color-muted); font: italic 11px var(--bb-font-help); cursor: help; }
+.bb-ws-help-bubble { position: absolute; z-index: 70; bottom: calc(100% + 8px); left: 50%; width: min(300px,70vw); padding: 10px 12px; border: 1px solid var(--bb-color-border); border-radius: 8px; background: var(--bb-color-panel); color: var(--bb-color-ink); font-size: 12px; font-weight: normal; line-height: 1.7; box-shadow: var(--bb-shadow-help); opacity: 0; visibility: hidden; transform: translate(-50%,4px); transition: opacity 160ms ease,transform 160ms ease,visibility 160ms; pointer-events: none; }
+.bb-ws-help-bubble::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 10px; }
+.bb-ws-help:not(.is-dismissed):is(:hover,:focus-within,.is-open) .bb-ws-help-bubble { opacity: 1; visibility: visible; transform: translate(-50%,0); pointer-events: auto; }
+.bb-ws-dialog { width: min(720px,calc(100vw - 36px)); max-height: calc(100dvh - 48px); box-sizing: border-box; padding: 0; overflow: auto; border: 1px solid var(--bb-color-border); border-radius: 12px; background: var(--bb-color-panel); color: var(--bb-color-ink); font: inherit; }
+.bb-ws-dialog::backdrop { background: var(--bb-color-dialog-overlay); }
+.bb-ws-dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--bb-color-border); }
+.bb-ws-dialog-head h2 { margin: 0; font-size: 22px; line-height: 1.5; }
+.bb-ws-dialog-body { padding: 28px; }
+.bb-ws-disclosure { border-top: 1px solid var(--bb-color-border); }
+.bb-ws-disclosure > summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; }
+.bb-ws-disclosure > summary::-webkit-details-marker { display: none; }
+.bb-ws-disclosure > summary::before { content: '›'; font-size: 20px; color: var(--bb-color-muted); }
+.bb-ws-disclosure[open] > summary::before { transform: rotate(90deg); }
+.bb-ws-disclosure > summary h2 { margin: 0; font-size: 22px; line-height: 1.4; }
+.bb-ws-disclosure > :not(summary) { margin: 0 0 18px 25px; }
+.bb-ws-disclosure > summary:focus-visible, .bb-ws-help-button:focus-visible { outline: 2px solid var(--bb-color-focus); outline-offset: 3px; }
+.bb-ws-error-stack { position: absolute; z-index: 55; top: 0; right: 0; width: min(300px,100%); max-height: none; padding-bottom: 64px; pointer-events: none; box-sizing: border-box; overflow: visible; }
+.bb-ws-error-list { display: grid; gap: 6px; }
+.bb-ws-error-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.bb-ws-error-card { display: flex; align-items: start; gap: 8px; box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid var(--bb-color-notice-border); border-left: 3px solid var(--bb-color-notice-danger); border-radius: 4px; background: var(--bb-color-notice-background); backdrop-filter: blur(5px); color: var(--bb-color-notice-text); font-size: 12px; line-height: 1.5; pointer-events: auto; }
+.bb-ws-error-card.is-warning { border-left-color: var(--bb-color-notice-warning); }
+.bb-ws-error-card > details { flex: 1; min-width: 0; }
+.bb-ws-error-card summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
+.bb-ws-error-card summary::-webkit-details-marker { display: none; }
+.bb-ws-error-card summary > span:last-child { overflow-wrap: anywhere; }
+.bb-ws-error-symbol { display: grid; flex: none; place-items: center; width: 14px; height: 14px; border: 1px solid var(--bb-color-notice-danger-symbol-border); color: var(--bb-color-notice-danger-text); border-radius: 3px; }
+.bb-ws-error-card.is-warning .bb-ws-error-symbol { color: var(--bb-color-notice-warning-text); border-color: var(--bb-color-notice-warning-symbol-border); }
+.bb-ws-error-card p { margin: 8px 0 0; overflow-wrap: anywhere; font-size: 11px; }
+.bb-ws-error-card .bb-ws-button { flex: none; min-height: 18px; padding: 0 5px; border: 1px solid var(--bb-color-notice-control-border); border-radius: 4px; background: transparent; color: var(--bb-color-notice-text); font-size: 11px; line-height: 16px; }
+.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; } }

package/ui/workspace-kit.js

@@ -230,3 +230,68 @@ export function workspaceSectionTitle(doc, { title, lead } = {}) {
   if (lead) wrap.append(el(doc, 'p', { text: lead }));
   return wrap;
 }
+
+
+let workspaceSequence = 0;
+/** Shared explanatory help: hover/focus above the control, click for touch. */
+export function workspaceHelp(doc, { text, label } = {}) {
+  const wrap = el(doc, 'span', { className: 'bb-ws-help' });
+  const control = workspaceButton(doc, { text: 'i', attrs: { 'aria-label': `${label}の説明`, 'aria-expanded': 'false' } });
+  control.className = 'bb-ws-help-button';
+  const bubble = el(doc, 'span', { className: 'bb-ws-help-bubble', text, attrs: { id: `bb-ws-help-${++workspaceSequence}`, role: 'tooltip' } });
+  control.setAttribute('aria-describedby', bubble.id || bubble.getAttribute?.('id') || bubble.attributes?.id);
+  control.addEventListener('click', event => {
+    event.stopPropagation(); event.preventDefault();
+    const opened = wrap.classList.toggle('is-open');
+    wrap.classList.remove('is-dismissed');
+    control.setAttribute('aria-expanded', String(opened));
+  });
+  wrap.addEventListener('mouseleave', () => wrap.classList.remove('is-dismissed'));
+  control.addEventListener('blur', () => { wrap.classList.remove('is-open', 'is-dismissed'); control.setAttribute('aria-expanded', 'false'); });
+  control.addEventListener('keydown', event => {
+    if (event.key !== 'Escape') return;
+    wrap.classList.remove('is-open'); wrap.classList.add('is-dismissed');
+    control.setAttribute('aria-expanded', 'false'); event.stopPropagation();
+  });
+  wrap.append(control, bubble); return wrap;
+}
+
+/** Native dialog keeps focus trapped, Escape close and focus restoration. */
+export function workspaceDialog(doc, { title, content, opener } = {}) {
+  const dialog = el(doc, 'dialog', { className: 'bb-ws-dialog' });
+  const headingId = `bb-ws-dialog-${++workspaceSequence}`;
+  dialog.setAttribute('aria-labelledby', headingId);
+  const head = el(doc, 'header', { className: 'bb-ws-dialog-head' });
+  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('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;
+}
+
+/** Persistent, initially closed notification. The caller owns its lifecycle. */
+export function workspaceErrorCard(doc, { title, message, tone = 'danger', onRetry } = {}) {
+  const card = el(doc, 'section', { className: `bb-ws-error-card is-${tone}`, attrs: { role: 'listitem' } });
+  const details = el(doc, 'details');
+  const summary = el(doc, 'summary', { attrs: { 'aria-label': `${title}の通知` } });
+  summary.append(el(doc, 'span', { className: 'bb-ws-error-symbol', text: '!', attrs: { 'aria-hidden': 'true' } }), el(doc, 'span', { text: title }));
+  details.append(summary, el(doc, 'p', { text: message })); card.append(details);
+  if (onRetry) card.append(workspaceButton(doc, { text: '再試行', attrs: { 'aria-label': `${title}を再試行` }, onClick: onRetry }));
+  return card;
+}
+
+export function workspaceDisclosure(doc, { title, help, content, open = false, onToggle } = {}) {
+  const details = el(doc, 'details', { className: 'bb-ws-disclosure' }); details.open = open;
+  const summary = el(doc, 'summary');
+  summary.append(el(doc, 'h2', { text: title }));
+  if (help) summary.append(workspaceHelp(doc, { label: title, text: help }));
+  details.append(summary, content);
+  if (onToggle) details.addEventListener('toggle', () => onToggle(details.open));
+  return details;
+}