@unson/brainbase-mcp 0.6.0 → 0.8.0

package/ui/workspace-kit.css

@@ -0,0 +1,485 @@
+/*
+ * Workspace kit: the organization edition's screen pattern (page head, notice,
+ * metrics, ledger, right rail). Values follow brainbase-organization
+ * apps/web/public/styles.css (final layer) through the shared tokens only.
+ */
+
+/* Page head */
+.bb-ws-page {
+  display: grid;
+  gap: 0;
+  min-width: 0;
+}
+
+.bb-ws-breadcrumb {
+  margin-bottom: 24px;
+  color: var(--bb-color-quiet);
+  font-size: 11px;
+  letter-spacing: .02em;
+}
+
+.bb-ws-breadcrumb-separator {
+  margin-inline: 8px;
+  color: var(--bb-color-border-strong);
+}
+
+.bb-ws-page-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px 30px;
+  min-width: 0;
+}
+
+/* The title is never broken inside a word: when it and the actions do not fit
+   on one line, the actions move below it. */
+.bb-ws-page-copy {
+  flex: 1 1 0;
+  min-width: min-content;
+  max-width: 100%;
+}
+
+.bb-ws-page-head h1 {
+  margin: 0;
+  color: var(--bb-color-ink);
+  font-size: clamp(32px, 3.5vw, 44px);
+  font-weight: 760;
+  line-height: 1.1;
+  letter-spacing: -.055em;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+.bb-ws-lead {
+  max-width: 720px;
+  margin: 12px 0 0;
+  color: var(--bb-color-muted);
+  line-height: 1.65;
+}
+
+.bb-ws-page-side {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--bb-space-2);
+}
+
+.bb-ws-source {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 30px;
+  border-radius: var(--bb-radius-sm);
+  padding: 7px 10px;
+  background: var(--bb-color-accent-soft);
+  color: var(--bb-color-accent-strong);
+  font-size: 11px;
+  font-weight: 720;
+  white-space: nowrap;
+}
+
+.bb-ws-source::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  content: "";
+}
+
+/* Notice */
+.bb-ws-notice {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 12px;
+  margin: 30px 0;
+  border: 1px solid var(--bb-color-border);
+  border-left: 3px solid var(--bb-color-accent);
+  padding: 14px 16px;
+  background: var(--bb-color-surface);
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+.bb-ws-notice > :only-child {
+  grid-column: 1 / -1;
+}
+
+.bb-ws-notice strong {
+  color: var(--bb-color-accent-strong);
+  font-size: 12px;
+}
+
+.bb-ws-notice.is-warning {
+  border-left-color: var(--bb-color-warning);
+  background: var(--bb-color-warning-soft);
+}
+
+.bb-ws-notice.is-warning strong {
+  color: var(--bb-color-warning);
+}
+
+.bb-ws-notice.is-danger {
+  border-left-color: var(--bb-color-danger);
+  background: var(--bb-color-danger-soft);
+}
+
+.bb-ws-notice.is-danger strong {
+  color: var(--bb-color-danger);
+}
+
+/* Buttons */
+.bb-ws-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bb-space-2);
+}
+
+.bb-ws-button {
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bb-space-2);
+  border: 1px solid var(--bb-color-border-strong);
+  border-radius: var(--bb-radius-sm);
+  padding: 8px 13px;
+  background: var(--bb-color-panel);
+  color: var(--bb-color-ink);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 680;
+  cursor: pointer;
+}
+
+.bb-ws-button:hover {
+  border-color: var(--bb-color-muted);
+}
+
+.bb-ws-button.is-primary {
+  border-color: var(--bb-color-rail);
+  background: var(--bb-color-rail);
+  color: var(--bb-color-rail-strong);
+}
+
+.bb-ws-button.is-primary:hover {
+  border-color: var(--bb-color-accent);
+  background: var(--bb-color-accent);
+}
+
+.bb-ws-button.is-danger {
+  color: var(--bb-color-danger);
+}
+
+.bb-ws-button.is-quiet {
+  min-height: 30px;
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.bb-ws-button:disabled {
+  cursor: not-allowed;
+  opacity: .58;
+}
+
+/* Summary metrics */
+.bb-ws-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0 0 34px;
+  border-block: 1px solid var(--bb-color-border);
+}
+
+.bb-ws-summary.is-1 { grid-template-columns: minmax(0, 1fr); }
+.bb-ws-summary.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.bb-ws-summary.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.bb-ws-summary.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.bb-ws-summary.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+
+.bb-ws-metric {
+  min-width: 0;
+  border-right: 1px solid var(--bb-color-border);
+  padding: 20px 24px;
+}
+
+.bb-ws-metric:first-child {
+  padding-left: 0;
+}
+
+.bb-ws-metric:last-child {
+  border-right: 0;
+}
+
+.bb-ws-metric small,
+.bb-ws-metric span {
+  display: block;
+  color: var(--bb-color-muted);
+  font-size: 11px;
+}
+
+.bb-ws-metric strong {
+  display: block;
+  margin-block: 8px 3px;
+  color: var(--bb-color-ink);
+  font-size: 30px;
+  letter-spacing: -.03em;
+}
+
+/* Ledger */
+.bb-ws-ledger {
+  width: 100%;
+  min-width: 0;
+  border-top: 1px solid var(--bb-color-border-strong);
+}
+
+.bb-ws-ledger-row {
+  width: 100%;
+  min-height: 60px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  border: 0;
+  border-bottom: 1px solid var(--bb-color-border);
+  padding: 0;
+  background: transparent;
+  color: var(--bb-color-muted);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+}
+
+.bb-ws-ledger-row > span {
+  min-width: 0;
+  overflow: hidden;
+  padding: 9px 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bb-ws-ledger-row > span:first-child {
+  padding-left: 8px;
+}
+
+.bb-ws-ledger-head {
+  min-height: 38px;
+  color: var(--bb-color-quiet);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.bb-ws-ledger-row.is-selectable {
+  cursor: pointer;
+}
+
+.bb-ws-ledger-row.is-selectable:hover {
+  background: var(--bb-color-surface);
+}
+
+.bb-ws-ledger-row.is-selected,
+.bb-ws-ledger-row.is-selectable.is-selected:hover {
+  background: var(--bb-color-accent-soft);
+  box-shadow: inset 3px 0 var(--bb-color-accent);
+}
+
+.bb-ws-ledger-object {
+  display: grid;
+  gap: 4px;
+}
+
+.bb-ws-ledger-object strong {
+  overflow: hidden;
+  color: var(--bb-color-ink);
+  text-overflow: ellipsis;
+}
+
+.bb-ws-ledger-object code {
+  overflow: hidden;
+  color: var(--bb-color-quiet);
+  font-family: var(--bb-font-mono);
+  font-size: 10px;
+  text-overflow: ellipsis;
+}
+
+.bb-ws-ledger .is-unresolved,
+.bb-ws-definition .is-unrecorded {
+  color: var(--bb-color-quiet);
+}
+
+.bb-ws-ledger-empty {
+  margin: 0;
+  border-bottom: 1px solid var(--bb-color-border);
+  padding: 18px 8px;
+  color: var(--bb-color-muted);
+}
+
+/* Right rail */
+.bb-ws-rail-head {
+  display: block;
+  border-bottom: 1px solid var(--bb-color-border);
+  padding-bottom: 22px;
+}
+
+.bb-ws-rail-head small {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--bb-color-eyebrow);
+  font-size: 11px;
+  font-weight: 720;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.bb-ws-rail-head h2 {
+  margin: 0;
+  color: var(--bb-color-ink);
+  font-size: 24px;
+  line-height: 1.32;
+  letter-spacing: -.035em;
+  overflow-wrap: anywhere;
+}
+
+.bb-ws-rail-head span {
+  display: block;
+  margin-top: 8px;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-ws-rail-head p {
+  margin: 12px 0 0;
+  color: var(--bb-color-muted);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.bb-ws-rail-block {
+  border-bottom: 1px solid var(--bb-color-border);
+  padding-block: 22px;
+}
+
+.bb-ws-rail-block h3 {
+  margin: 0 0 10px;
+  color: var(--bb-color-ink);
+  font-size: 15px;
+}
+
+.bb-ws-rail-block p {
+  margin: 0;
+  color: var(--bb-color-muted);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.bb-ws-definition {
+  display: grid;
+  grid-template-columns: 105px minmax(0, 1fr);
+  gap: 10px 12px;
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.bb-ws-definition dt {
+  color: var(--bb-color-muted);
+}
+
+.bb-ws-definition dd {
+  margin: 0;
+  color: var(--bb-color-ink);
+  overflow-wrap: anywhere;
+}
+
+.bb-ws-detail-empty {
+  min-height: 60vh;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  color: var(--bb-color-muted);
+  text-align: center;
+}
+
+.bb-ws-detail-empty h2 {
+  margin: 14px 0 6px;
+  color: var(--bb-color-ink);
+  font-size: 20px;
+}
+
+.bb-ws-detail-empty p {
+  max-width: 270px;
+  margin: 0;
+  line-height: 1.65;
+}
+
+.bb-ws-empty-mark {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--bb-color-border);
+  border-radius: 50%;
+  color: var(--bb-color-muted);
+}
+
+/* Section title below a ledger */
+.bb-ws-section-title {
+  display: grid;
+  gap: 6px;
+  margin: 48px 0 16px;
+}
+
+.bb-ws-section-title h2 {
+  margin: 0;
+  color: var(--bb-color-ink);
+  font-size: 22px;
+  letter-spacing: -.035em;
+}
+
+.bb-ws-section-title p {
+  margin: 0;
+  color: var(--bb-color-muted);
+}
+
+@media (max-width: 760px) {
+  .bb-ws-page-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .bb-ws-page-head h1 {
+    font-size: 34px;
+  }
+
+  .bb-ws-notice {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4px;
+    margin-block: 24px;
+  }
+
+  .bb-ws-source {
+    display: none;
+  }
+
+  .bb-ws-summary,
+  .bb-ws-summary.is-2,
+  .bb-ws-summary.is-4,
+  .bb-ws-summary.is-5,
+  .bb-ws-summary.is-6 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .bb-ws-metric,
+  .bb-ws-metric:first-child {
+    border-right: 0;
+    border-bottom: 1px solid var(--bb-color-border);
+    padding: 14px 0;
+  }
+
+  .bb-ws-metric:last-child {
+    border-bottom: 0;
+  }
+
+}

package/ui/workspace-kit.js

@@ -0,0 +1,229 @@
+/*
+ * Workspace kit: the organization edition's screen pattern as shared parts.
+ *
+ * Every Brainbase screen is built the same way — breadcrumb and page head,
+ * a notice about the source, actions, summary metrics, a ledger of rows the
+ * owner selects, and a right rail with the selected item's detail. The look
+ * comes from workspace-kit.css (organization design values through the
+ * `--bb-*` tokens). Builders take the host's document and return elements;
+ * they keep no state. Column widths are set by the caller's CSS class on the
+ * ledger, because the hosts' CSP forbids inline styles.
+ */
+
+export const WORKSPACE_KIT_CONTRACT_VERSION = 'brainbase.workspace-kit.v1';
+
+export function makeWorkspaceElement(doc, tag, { className, text, attrs = {} } = {}) {
+  const element = doc.createElement(tag);
+  if (className) element.className = className;
+  if (text !== undefined && text !== null) element.textContent = String(text);
+  for (const [name, value] of Object.entries(attrs)) {
+    if (value === undefined || value === null || value === false) continue;
+    element.setAttribute(name, value === true ? '' : String(value));
+  }
+  return element;
+}
+
+const el = makeWorkspaceElement;
+
+function appendContent(parent, doc, content) {
+  if (content === undefined || content === null || content === false) return;
+  if (Array.isArray(content)) {
+    for (const item of content) appendContent(parent, doc, item);
+    return;
+  }
+  if (typeof content === 'object' && typeof content.tagName === 'string') {
+    parent.append(content);
+    return;
+  }
+  if (typeof content === 'object' && 'text' in content) {
+    parent.append(el(doc, 'span', { className: content.className, text: content.text }));
+    return;
+  }
+  parent.append(el(doc, 'span', { text: String(content) }));
+}
+
+/** Breadcrumb, h1, lead, source label and actions, as on the organization screens. */
+export function workspacePageHeader(doc, { crumbs = [], title, lead, source, actions = [] } = {}) {
+  const wrap = el(doc, 'div', { className: 'bb-ws-page' });
+  if (crumbs.length > 0) {
+    const breadcrumb = el(doc, 'nav', { className: 'bb-ws-breadcrumb', attrs: { 'aria-label': 'パンくず' } });
+    crumbs.forEach((crumb, index) => {
+      if (index > 0) breadcrumb.append(el(doc, 'span', { className: 'bb-ws-breadcrumb-separator', text: '/', attrs: { 'aria-hidden': 'true' } }));
+      breadcrumb.append(el(doc, 'span', { text: crumb }));
+    });
+    wrap.append(breadcrumb);
+  }
+  const head = el(doc, 'header', { className: 'bb-ws-page-head' });
+  const copy = el(doc, 'div', { className: 'bb-ws-page-copy' });
+  copy.append(el(doc, 'h1', { text: title }));
+  if (lead) copy.append(el(doc, 'p', { className: 'bb-ws-lead', text: lead }));
+  head.append(copy);
+  const side = el(doc, 'div', { className: 'bb-ws-page-side' });
+  if (source) side.append(el(doc, 'span', { className: 'bb-ws-source', text: source }));
+  if (actions.length > 0) side.append(workspaceActions(doc, actions));
+  if (source || actions.length > 0) head.append(side);
+  wrap.append(head);
+  return wrap;
+}
+
+/** A notice with a short label, like 接続範囲 on the organization screens. */
+export function workspaceNotice(doc, { label, text, tone = 'info', role } = {}) {
+  const notice = el(doc, 'div', { className: `bb-ws-notice is-${tone}`, attrs: { role: role ?? (tone === 'info' ? undefined : 'alert') } });
+  if (label) notice.append(el(doc, 'strong', { text: label }));
+  appendContent(notice, doc, text);
+  return notice;
+}
+
+/**
+ * The notice a host passes to a part in place of (or in addition to) the
+ * part's own: `{ label, text }`, where `text` is a string or an element.  Null
+ * when the host passed none.
+ */
+export function workspaceHostNotice(doc, notice) {
+  if (!notice || typeof notice !== 'object' || Array.isArray(notice)) return null;
+  const label = typeof notice.label === 'string' && notice.label.trim() ? notice.label.trim() : undefined;
+  return workspaceNotice(doc, { label, text: notice.text });
+}
+
+/** A host's extra page-head buttons, `[{ text, variant, onClick, disabled }]`, as `workspaceActions` items. */
+export function workspaceHostActions(actions) {
+  if (!Array.isArray(actions)) return [];
+  return actions
+    .filter((action) => action && typeof action === 'object' && typeof action.text === 'string' && action.text.trim())
+    .map(({ text, variant, onClick, disabled }) => ({ text, variant, onClick, disabled: disabled === true }));
+}
+
+export function workspaceButton(doc, { text, variant = 'default', onClick, disabled = false, attrs = {} } = {}) {
+  const button = el(doc, 'button', {
+    className: `bb-ws-button${variant === 'primary' ? ' is-primary' : variant === 'danger' ? ' is-danger' : variant === 'quiet' ? ' is-quiet' : ''}`,
+    text,
+    attrs: { type: 'button', disabled, ...attrs },
+  });
+  if (typeof onClick === 'function') button.addEventListener('click', onClick);
+  return button;
+}
+
+export function workspaceActions(doc, buttons = []) {
+  const actions = el(doc, 'div', { className: 'bb-ws-actions' });
+  for (const button of buttons) {
+    if (button) actions.append(typeof button.tagName === 'string' ? button : workspaceButton(doc, button));
+  }
+  return actions;
+}
+
+/** Summary metrics in one ruled row. `value` null means 未確認, never zero. */
+export function workspaceMetrics(doc, items = [], { ariaLabel = '集計' } = {}) {
+  const summary = el(doc, 'section', { className: `bb-ws-summary is-${Math.min(Math.max(items.length, 1), 6)}`, attrs: { 'aria-label': ariaLabel } });
+  for (const item of items) {
+    const card = el(doc, 'div', { className: 'bb-ws-metric' });
+    card.append(
+      el(doc, 'small', { text: item.label }),
+      el(doc, 'strong', { text: item.value === null || item.value === undefined ? '未確認' : item.value }),
+    );
+    if (item.note) card.append(el(doc, 'span', { text: item.note }));
+    summary.append(card);
+  }
+  return summary;
+}
+
+// A readable name for a row: its first cell's text (a button with role=row has no name of its own).
+function ledgerRowLabel(cells = []) {
+  const first = cells[0];
+  if (first === null || first === undefined) return undefined;
+  if (typeof first === 'object' && 'primary' in first) return String(first.primary);
+  if (typeof first === 'object' && 'text' in first) return String(first.text);
+  if (typeof first === 'object' && typeof first.tagName === 'string') return first.textContent || undefined;
+  return String(first);
+}
+
+/**
+ * A ledger: a header row and selectable rows. `className` sets the column
+ * template in the caller's CSS. A cell is text, an element, `{ text, className }`,
+ * or `{ primary, secondary }` for a name with its id underneath.
+ */
+export function workspaceLedger(doc, { columns = [], rows = [], className = '', ariaLabel, empty } = {}) {
+  const ledger = el(doc, 'div', { className: `bb-ws-ledger${className ? ` ${className}` : ''}`, attrs: { role: 'table', 'aria-label': ariaLabel } });
+  const head = el(doc, 'div', { className: 'bb-ws-ledger-row bb-ws-ledger-head', attrs: { role: 'row' } });
+  for (const column of columns) head.append(el(doc, 'span', { text: column, attrs: { role: 'columnheader' } }));
+  ledger.append(head);
+  if (rows.length === 0 && empty) {
+    ledger.append(el(doc, 'p', { className: 'bb-ws-ledger-empty', text: empty }));
+    return ledger;
+  }
+  for (const row of rows) {
+    const selectable = typeof row.onSelect === 'function';
+    const item = el(doc, selectable ? 'button' : 'div', {
+      className: `bb-ws-ledger-row${selectable ? ' is-selectable' : ''}${row.selected ? ' is-selected' : ''}${row.className ? ` ${row.className}` : ''}`,
+      attrs: {
+        type: selectable ? 'button' : undefined,
+        role: 'row',
+        'aria-pressed': selectable ? (row.selected ? 'true' : 'false') : undefined,
+        'aria-label': row.label ?? ledgerRowLabel(row.cells),
+        'data-key': row.key,
+      },
+    });
+    for (const cell of row.cells ?? []) {
+      if (cell && typeof cell === 'object' && 'primary' in cell) {
+        const object = el(doc, 'span', { className: 'bb-ws-ledger-object', attrs: { role: 'cell' } });
+        object.append(el(doc, 'strong', { text: cell.primary }));
+        if (cell.secondary) object.append(el(doc, 'code', { text: cell.secondary }));
+        item.append(object);
+        continue;
+      }
+      const span = el(doc, 'span', { attrs: { role: 'cell' } });
+      if (cell && typeof cell === 'object' && typeof cell.tagName === 'string') span.append(cell);
+      else if (cell && typeof cell === 'object' && 'text' in cell) {
+        span.className = cell.className ?? '';
+        span.textContent = String(cell.text);
+      } else span.textContent = cell === null || cell === undefined ? '' : String(cell);
+      item.append(span);
+    }
+    if (selectable) item.addEventListener('click', () => row.onSelect(row.key));
+    ledger.append(item);
+  }
+  return ledger;
+}
+
+/** The selected item's head in the right rail. */
+export function workspaceRailHead(doc, { kicker, title, sub, lead } = {}) {
+  const head = el(doc, 'div', { className: 'bb-ws-rail-head' });
+  if (kicker) head.append(el(doc, 'small', { text: kicker }));
+  head.append(el(doc, 'h2', { text: title }));
+  if (sub) head.append(el(doc, 'span', { text: sub }));
+  if (lead) head.append(el(doc, 'p', { text: lead }));
+  return head;
+}
+
+export function workspaceRailBlock(doc, { title, content, className } = {}) {
+  const block = el(doc, 'section', { className: `bb-ws-rail-block${className ? ` ${className}` : ''}`, attrs: { 'aria-label': title } });
+  if (title) block.append(el(doc, 'h3', { text: title }));
+  appendContent(block, doc, content);
+  return block;
+}
+
+/** Term and value pairs; a null value is shown as 未記録. */
+export function workspaceDefinition(doc, pairs = []) {
+  const list = el(doc, 'dl', { className: 'bb-ws-definition' });
+  for (const [term, value] of pairs) {
+    list.append(el(doc, 'dt', { text: term }));
+    const dd = el(doc, 'dd');
+    appendContent(dd, doc, value === null || value === undefined || value === '' ? { text: '未記録', className: 'is-unrecorded' } : value);
+    list.append(dd);
+  }
+  return list;
+}
+
+export function workspaceDetailEmpty(doc, { mark = '?', title, text } = {}) {
+  const empty = el(doc, 'div', { className: 'bb-ws-detail-empty' });
+  empty.append(el(doc, 'div', { className: 'bb-ws-empty-mark', text: mark, attrs: { 'aria-hidden': 'true' } }), el(doc, 'h2', { text: title }));
+  if (text) empty.append(el(doc, 'p', { text }));
+  return empty;
+}
+
+/** A plain section title inside the workspace, below the ledger. */
+export function workspaceSectionTitle(doc, { title, lead } = {}) {
+  const wrap = el(doc, 'div', { className: 'bb-ws-section-title' });
+  wrap.append(el(doc, 'h2', { text: title }));
+  if (lead) wrap.append(el(doc, 'p', { text: lead }));
+  return wrap;
+}