@unson/brainbase-mcp 0.6.0 → 0.8.0

package/ui/graph-view-shared.css

@@ -0,0 +1,522 @@
+/*
+ * Shared look of the local Graph screens (プロジェクトと関係者・情報と関係).
+ * Load after workspace-kit.css: the page head, notices, metrics, ledgers and
+ * the right rail come from the kit (the organization edition's screen
+ * pattern).  This file adds what the Graph screens need on top of it — the
+ * compact relation items in the rail, badges, provenance, the correction form
+ * and the fallback rail for hosts without one.
+ * Uses only the shared tokens in brainbase-tokens.css.
+ */
+.bb-graph,
+.bb-graph-rail {
+  min-width: 0;
+  color: var(--bb-color-ink);
+  font-family: var(--bb-font-sans);
+  line-height: 1.5;
+}
+
+.bb-graph *,
+.bb-graph *::before,
+.bb-graph *::after,
+.bb-graph-rail *,
+.bb-graph-rail *::before,
+.bb-graph-rail *::after {
+  box-sizing: border-box;
+}
+
+/* Only this file's own text blocks are reset; the kit's page head and rail keep their spacing. */
+.bb-graph-notice-body p,
+.bb-graph-correction p,
+.bb-graph-correction h3 {
+  margin: 0;
+}
+
+/* A host without a right rail shows the selected item after the workspace. */
+.bb-graph-rail-inline {
+  min-width: 0;
+  margin-top: 48px;
+  border-top: 1px solid var(--bb-color-border-strong);
+  padding-top: 28px;
+}
+
+.bb-graph-rail-inline .bb-ws-detail-empty {
+  min-height: 0;
+  padding-block: 24px;
+}
+
+/* Notices inside the rail sit closer than the workspace's. */
+.bb-graph-rail .bb-ws-notice {
+  margin: 16px 0;
+}
+
+.bb-graph-notice-body {
+  display: grid;
+  gap: var(--bb-space-2);
+  justify-items: start;
+  min-width: 0;
+}
+
+.bb-graph-notice-body > * {
+  max-width: 100%;
+}
+
+.bb-graph-rail .bb-ws-rail-head {
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-rail > .bb-ws-actions {
+  border-bottom: 1px solid var(--bb-color-border);
+  padding-block: 18px;
+}
+
+.bb-graph-block-lead,
+.bb-graph-help,
+.bb-graph-empty {
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.bb-graph-rail .bb-ws-rail-block > .bb-graph-block-lead {
+  margin-bottom: 12px;
+}
+
+.bb-graph-rail .bb-ws-rail-block > .bb-graph-empty {
+  font-size: 13px;
+}
+
+.bb-graph-help {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-inline-value {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-1) var(--bb-space-2);
+  align-items: baseline;
+  min-width: 0;
+}
+
+/* Compact items: each 関係者 or relation in the rail. */
+.bb-graph-compact-list {
+  display: grid;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bb-graph-compact {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  border-top: 1px solid var(--bb-color-border);
+  padding-block: 16px;
+}
+
+.bb-graph-compact:last-child {
+  padding-bottom: 0;
+}
+
+.bb-graph-compact.is-ended .bb-graph-compact-title,
+.bb-graph-compact.is-ended .bb-ws-definition dd {
+  color: var(--bb-color-muted);
+}
+
+.bb-graph-compact-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-1) var(--bb-space-2);
+  align-items: baseline;
+  min-width: 0;
+}
+
+.bb-graph-compact-title {
+  min-width: 0;
+  color: var(--bb-color-ink);
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-compact .bb-ws-definition {
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 6px 10px;
+  font-size: 12px;
+}
+
+.bb-graph-compact .bb-ws-actions {
+  gap: 6px;
+}
+
+.bb-graph-relation {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-1) var(--bb-space-2);
+  align-items: baseline;
+  min-width: 0;
+  font-size: 14px;
+}
+
+.bb-graph-commands {
+  display: grid;
+  gap: var(--bb-space-2);
+  width: 100%;
+  margin: 0;
+  padding-left: var(--bb-space-5);
+}
+
+.bb-graph-commands code {
+  display: block;
+  border: 1px solid var(--bb-color-border);
+  border-radius: var(--bb-radius-sm);
+  padding: var(--bb-space-2) var(--bb-space-3);
+  color: var(--bb-color-ink);
+  background: var(--bb-color-panel);
+  font-family: var(--bb-font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.bb-graph-issue-list,
+.bb-graph-plain-list,
+.bb-graph-history-list {
+  display: grid;
+  gap: var(--bb-space-1);
+  margin: 0;
+  padding-left: var(--bb-space-5);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-badge {
+  display: inline-block;
+  border-radius: 999px;
+  padding: 2px 7px;
+  color: var(--bb-color-muted);
+  background: var(--bb-color-canvas);
+  font-size: 10px;
+  font-weight: 720;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.bb-graph-badge.is-success { color: var(--bb-color-accent-strong); background: var(--bb-color-success-soft); }
+.bb-graph-badge.is-warning { color: var(--bb-color-warning); background: var(--bb-color-warning-soft); }
+.bb-graph-badge.is-danger { color: var(--bb-color-danger); background: var(--bb-color-danger-soft); }
+.bb-graph-badge.is-accent { color: var(--bb-color-accent-strong); background: var(--bb-color-accent-soft); }
+
+/* Inline messages inside the correction form. */
+.bb-graph-notice,
+.bb-graph-rail .bb-graph-notice {
+  border-left: 3px solid var(--bb-color-border-strong);
+  padding: 10px 12px;
+  font-size: 12px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-notice.is-muted { border-left-color: var(--bb-color-border-strong); color: var(--bb-color-muted); background: var(--bb-color-surface); }
+.bb-graph-notice.is-warning { border-left-color: var(--bb-color-warning); color: var(--bb-color-warning); background: var(--bb-color-warning-soft); }
+.bb-graph-notice.is-danger { border-left-color: var(--bb-color-danger); color: var(--bb-color-danger); background: var(--bb-color-danger-soft); }
+.bb-graph-notice.is-success,
+.bb-graph-notice.is-accent { border-left-color: var(--bb-color-accent); color: var(--bb-color-accent-strong); background: var(--bb-color-accent-soft); }
+
+/* A name that opens a record. */
+.bb-graph-link {
+  border: 0;
+  padding: 0;
+  color: var(--bb-color-accent-strong);
+  background: none;
+  font: inherit;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-link:hover {
+  text-decoration: underline;
+}
+
+.bb-graph-back {
+  display: block;
+  margin-bottom: 18px;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.bb-graph .bb-ws-ledger-row.is-selectable:focus-visible,
+.bb-graph-link:focus-visible,
+.bb-graph-correction:focus-visible,
+.bb-graph-field input:focus-visible,
+.bb-graph-field textarea:focus-visible,
+.bb-graph-field select:focus-visible,
+.bb-graph-rail summary:focus-visible,
+.bb-graph summary:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--bb-color-focus) 45%, var(--bb-color-panel));
+  outline-offset: 2px;
+}
+
+.bb-graph .bb-ws-ledger-row.is-ended > span,
+.bb-graph .bb-ws-ledger-row.is-ended .bb-ws-ledger-object strong {
+  color: var(--bb-color-muted);
+}
+
+/* The selected row keeps its soft green while the pointer is on it. */
+.bb-graph .bb-ws-ledger-row.is-selected:hover {
+  background: var(--bb-color-accent-soft);
+}
+
+.bb-graph-facts {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--bb-space-1) var(--bb-space-3);
+  margin: 0;
+  font-size: 12px;
+}
+
+.bb-graph-facts dt {
+  color: var(--bb-color-muted);
+}
+
+.bb-graph-facts dd {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-facts.is-mono dd {
+  font-family: var(--bb-font-mono);
+  font-size: 11px;
+}
+
+.bb-graph-audit,
+.bb-graph-history {
+  min-width: 0;
+  font-size: 12px;
+}
+
+.bb-graph-audit summary,
+.bb-graph-history summary {
+  color: var(--bb-color-quiet);
+  cursor: pointer;
+}
+
+.bb-graph-audit[open] > .bb-graph-facts,
+.bb-graph-history[open] > .bb-graph-history-list {
+  margin-top: var(--bb-space-2);
+}
+
+.bb-ws-rail-block > .bb-graph-audit {
+  margin-top: 14px;
+}
+
+.bb-graph-rail > .bb-graph-history {
+  border-bottom: 1px solid var(--bb-color-border);
+  padding-block: 18px;
+  font-size: 13px;
+}
+
+.bb-graph-source {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-1);
+  align-items: baseline;
+  min-width: 0;
+}
+
+.bb-graph-source-ref {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-source-ref.is-unresolved {
+  color: var(--bb-color-warning);
+}
+
+/* Correction form: a rail block with the accent bar the organization uses for the selection. */
+.bb-graph-correction {
+  display: grid;
+  gap: var(--bb-space-3);
+  min-width: 0;
+  border-bottom: 1px solid var(--bb-color-border);
+  border-left: 3px solid var(--bb-color-accent);
+  padding: 20px 0 22px 14px;
+}
+
+.bb-graph-correction.is-conflict {
+  border-left-color: var(--bb-color-warning);
+}
+
+.bb-graph-correction.is-saved {
+  border-left-color: var(--bb-color-success);
+}
+
+.bb-graph-compact .bb-graph-correction {
+  margin-top: 4px;
+  border-bottom: 0;
+  padding-block: 14px 4px;
+}
+
+.bb-graph-correction > .bb-ws-button {
+  justify-self: start;
+}
+
+.bb-graph-correction-head {
+  display: grid;
+  gap: var(--bb-space-1);
+}
+
+.bb-graph-correction-head h3 {
+  font-size: 15px;
+}
+
+.bb-graph-correction-head .bb-graph-lead {
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.bb-graph-readback,
+.bb-graph-current {
+  display: grid;
+  gap: var(--bb-space-2);
+  min-width: 0;
+  border-top: 1px solid var(--bb-color-border);
+  padding-top: var(--bb-space-3);
+  font-size: 13px;
+}
+
+.bb-graph-form,
+.bb-graph-fields {
+  display: grid;
+  gap: var(--bb-space-3);
+  min-width: 0;
+}
+
+.bb-graph-field {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.bb-graph-field label {
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  font-weight: 680;
+}
+
+.bb-graph-field.is-reason label {
+  color: var(--bb-color-accent-strong);
+}
+
+.bb-graph-field input,
+.bb-graph-field textarea,
+.bb-graph-field select {
+  width: 100%;
+  min-width: 0;
+  min-height: 40px;
+  border: 1px solid var(--bb-color-border-strong);
+  border-radius: var(--bb-radius-sm);
+  padding: 9px 10px;
+  color: var(--bb-color-ink);
+  background: var(--bb-color-panel);
+  font: inherit;
+  font-size: 14px;
+}
+
+.bb-graph-field textarea {
+  resize: vertical;
+  line-height: 1.55;
+}
+
+.bb-graph-inline {
+  display: flex;
+  gap: var(--bb-space-2);
+  min-width: 0;
+}
+
+.bb-graph-inline input {
+  flex: 1 1 auto;
+}
+
+.bb-graph-inline > .bb-ws-button {
+  flex: none;
+  white-space: nowrap;
+}
+
+.bb-graph-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-2);
+}
+
+@media (max-width: 480px) {
+  .bb-graph-facts {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .bb-graph-facts dd {
+    margin-bottom: var(--bb-space-1);
+  }
+}
+
+/*
+ * The owner's own share (graph-own-share.js): a separate, read-only section
+ * after the host's content, never inside its ledgers or rail.
+ */
+.bb-graph-own {
+  min-width: 0;
+  margin-top: 48px;
+  border-top: 1px solid var(--bb-color-border-strong);
+}
+
+.bb-graph-own .bb-ws-section-title {
+  margin-top: 28px;
+}
+
+.bb-graph-own-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bb-space-2);
+  align-items: center;
+  margin: 0 0 var(--bb-space-4);
+  color: var(--bb-color-muted);
+  font-size: 13px;
+}
+
+.bb-graph-own-detail {
+  position: relative;
+  min-width: 0;
+  margin-top: var(--bb-space-5);
+  border: 1px solid var(--bb-color-border);
+  border-radius: var(--bb-radius-md);
+  padding: var(--bb-space-4) var(--bb-space-5);
+  background: var(--bb-color-panel);
+}
+
+.bb-graph-own-close {
+  position: absolute;
+  top: var(--bb-space-4);
+  right: var(--bb-space-5);
+}
+
+.bb-graph-own-objective-ledger .bb-ws-ledger-row {
+  grid-template-columns: minmax(0, 1.6fr) 88px minmax(0, 1.2fr) minmax(0, .9fr) 64px;
+}
+
+@media (max-width: 760px) {
+  .bb-graph-own-detail {
+    padding: var(--bb-space-3) var(--bb-space-4);
+  }
+
+  .bb-graph-own-objective-ledger .bb-ws-ledger-row {
+    grid-template-columns: minmax(0, 1fr) 88px;
+  }
+
+  .bb-graph-own-objective-ledger .bb-ws-ledger-row > :nth-child(n + 3) {
+    display: none;
+  }
+}