@unson/brainbase-mcp 0.6.0 → 0.8.0

package/ui/objective-editor.css

@@ -0,0 +1,286 @@
+/*
+ * Shared Objective editor surface. The host owns shell, identity and policy.
+ * Tabs layout (no rail, as the organization edition composes it): the header
+ * sits in a gradient box, each view is a white section, tabs and buttons share
+ * one shape and the active tab and the primary action use the action color.
+ * Workspace layout (the host gives a rail): the organization edition's screen
+ * pattern from workspace-kit.css; its rules below read the shared tokens.
+ */
+.objective-editor-root,
+.bb-objective-workspace,
+.bb-objective-rail {
+  --objective-paper: var(--bb-color-panel, var(--paper, #fbfbf8));
+  --objective-canvas: var(--bb-color-surface, var(--canvas, #f2f3ef));
+  --objective-ink: var(--bb-color-ink, var(--ink, #141714));
+  --objective-muted: var(--bb-color-muted, var(--muted, #626a64));
+  --objective-quiet: var(--bb-color-muted, var(--quiet, #8b938c));
+  --objective-line: var(--bb-color-border, var(--line, #d9ded9));
+  --objective-line-strong: var(--bb-color-border-strong, var(--line-dark, #b8c0b9));
+  --objective-control-line: var(--bb-color-control-border, var(--line-dark, #b8c0b9));
+  --objective-header-start: var(--bb-color-header-start, var(--paper, #fbfbf8));
+  --objective-header-end: var(--bb-color-header-end, var(--paper, #fbfbf8));
+  --objective-eyebrow: var(--bb-color-eyebrow, var(--green, #087d62));
+  --objective-green: var(--bb-color-accent, var(--green, #087d62));
+  --objective-green-soft: var(--bb-color-accent-soft, var(--green-soft, #e5f1ec));
+  --objective-green-strong: var(--bb-color-accent-strong, var(--green, #087d62));
+  --objective-action: var(--bb-color-action, var(--green, #087d62));
+  --objective-action-hover: var(--bb-color-action-hover, var(--green, #087d62));
+  --objective-action-text: var(--bb-color-action-text, #ffffff);
+  --objective-focus: var(--bb-color-focus, var(--green, #087d62));
+  --objective-amber: var(--bb-color-warning, var(--amber, #a56d05));
+  --objective-amber-soft: var(--bb-color-warning-soft, var(--amber-soft, #fff2ce));
+  --objective-red: var(--bb-color-danger, var(--red, #c82a39));
+  --objective-red-soft: var(--bb-color-danger-soft, var(--red-soft, #fdebed));
+  min-width: 0;
+  color: var(--objective-ink);
+  font-family: var(--bb-font-sans, Geist, "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  line-height: 1.5;
+}
+
+.objective-editor-root {
+  display: grid;
+  gap: 20px;
+}
+
+.objective-editor-root *,
+.objective-editor-root *::before,
+.objective-editor-root *::after { box-sizing: border-box; }
+.objective-editor-root button,
+.objective-editor-root input,
+.objective-editor-root select,
+.objective-editor-root textarea { font: inherit; }
+.objective-editor-root h1,
+.objective-editor-root p { margin: 0; }
+.objective-editor-root h1 { margin: 4px 0 8px; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.02em; line-height: 1.25; }
+.objective-editor-root [hidden],
+.bb-objective-rail [hidden] { display: none !important; }
+
+/* Part header: eyebrow, title and lead inside the gradient box, state at the right. */
+.objective-editor-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: .75rem 1rem;
+  align-items: start;
+  padding: 24px;
+  border: 1px solid var(--objective-line);
+  border-radius: var(--bb-radius-lg, 16px);
+  background: linear-gradient(135deg, var(--objective-header-start), var(--objective-header-end));
+}
+.objective-editor-header-copy { display: grid; min-width: 0; }
+.objective-editor-header-copy p { color: var(--objective-muted); }
+.objective-editor-eyebrow { color: var(--objective-eyebrow); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
+
+/* Tabs and buttons: one shape; the active tab and the primary action use the action color. */
+.objective-editor-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.objective-editor-tab,
+.objective-editor-button,
+.objective-editor-button-primary,
+.objective-editor-button-secondary,
+.objective-editor-button-danger {
+  min-height: 40px;
+  border: 1px solid var(--objective-control-line);
+  border-radius: var(--bb-radius-sm, 7px);
+  padding: 8px 12px;
+  color: var(--objective-ink);
+  background: var(--objective-paper);
+  cursor: pointer;
+  font-weight: 680;
+  line-height: 1.3;
+}
+/* The root resets button fonts with `button { font: inherit }`; keep the weight. */
+.objective-editor-root .objective-editor-tab,
+.objective-editor-root .objective-editor-button,
+.objective-editor-root .objective-editor-button-primary,
+.objective-editor-root .objective-editor-button-secondary,
+.objective-editor-root .objective-editor-button-danger,
+.bb-objective-rail .objective-editor-button-secondary,
+.bb-objective-rail .objective-editor-button-danger { font-weight: 680; }
+.objective-editor-tab:hover,
+.objective-editor-button:hover,
+.objective-editor-button-secondary:hover { border-color: var(--objective-line-strong); }
+.objective-editor-tab.is-active { border-color: var(--objective-action); color: var(--objective-action-text); background: var(--objective-action); }
+.objective-editor-toolbar > .objective-editor-button-secondary { margin-left: auto; }
+.objective-editor-button-primary { border-color: var(--objective-action); color: var(--objective-action-text); background: var(--objective-action); }
+.objective-editor-button-primary:hover:not(:disabled) { border-color: var(--objective-action-hover); background: var(--objective-action-hover); }
+.objective-editor-button-danger { border-color: color-mix(in srgb, var(--objective-red) 45%, var(--objective-line)); color: var(--objective-red); }
+.objective-editor-button-danger:hover { background: var(--objective-red-soft); }
+.objective-editor-tab:disabled,
+.objective-editor-button:disabled,
+.objective-editor-button-primary:disabled,
+.objective-editor-button-secondary:disabled,
+.objective-editor-button-danger:disabled { cursor: wait; opacity: .55; }
+.objective-editor-root button:focus-visible,
+.bb-objective-rail button:focus-visible,
+.objective-editor-input:focus-visible { outline: 3px solid color-mix(in srgb, var(--objective-focus) 45%, var(--objective-paper)); outline-offset: 2px; }
+
+/* Each view is a white section. */
+.objective-editor-content { min-width: 0; }
+.objective-editor-panel {
+  display: grid;
+  gap: .8rem;
+  min-width: 0;
+  padding: 18px;
+  border: 1px solid var(--objective-line);
+  border-radius: var(--bb-radius-md, 14px);
+  background: var(--objective-paper);
+}
+.objective-editor-panel-heading { font-size: 1.1rem; font-weight: 700; }
+.objective-editor-muted,
+.objective-editor-help { color: var(--objective-muted); font-size: .8rem; }
+.objective-editor-list { display: grid; gap: 0; border-top: 1px solid var(--objective-line-strong); }
+.objective-editor-list-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: .75rem;
+  align-items: center;
+  width: 100%;
+  min-height: 4.2rem;
+  border: 0;
+  border-bottom: 1px solid var(--objective-line);
+  padding: .75rem .5rem;
+  color: inherit;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.objective-editor-list-row:hover { background: var(--objective-canvas); }
+.objective-editor-list-copy { display: grid; gap: .15rem; min-width: 0; }
+.objective-editor-list-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.objective-editor-list-copy small { color: var(--objective-quiet); font-size: .72rem; }
+.objective-editor-list-badges { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
+.objective-editor-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.65rem;
+  border: 1px solid var(--objective-line);
+  border-radius: 999px;
+  padding: .16rem .55rem;
+  color: var(--objective-muted);
+  background: var(--objective-paper);
+  font-size: .7rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.objective-editor-badge-judgment_available,
+.objective-editor-badge-verified { border-color: color-mix(in srgb, var(--objective-green) 40%, var(--objective-line)); color: var(--objective-green-strong); background: var(--objective-green-soft); }
+.objective-editor-badge-draft,
+.objective-editor-badge-conflict { border-color: color-mix(in srgb, var(--objective-amber) 40%, var(--objective-line)); color: var(--objective-amber); background: var(--objective-amber-soft); }
+.objective-editor-badge-permission_denied,
+.objective-editor-badge-api_unavailable,
+.objective-editor-badge-missing,
+.objective-editor-badge-saved_unverified { border-color: color-mix(in srgb, var(--objective-red) 35%, var(--objective-line)); color: var(--objective-red); background: var(--objective-red-soft); }
+.objective-editor-empty { padding: 1.5rem 0; color: var(--objective-muted); }
+.objective-editor-skeleton { height: 3.5rem; margin-bottom: .4rem; border-bottom: 1px solid var(--objective-line); color: var(--objective-quiet); font-size: .76rem; }
+
+/* State boxes. */
+.objective-editor-notice { display: grid; gap: .25rem; justify-items: start; border-radius: var(--bb-radius-sm, 7px); padding: 11px 12px; background: var(--objective-canvas); }
+.objective-editor-notice p { color: var(--objective-muted); font-size: .8rem; }
+.objective-editor-notice-permission_denied,
+.objective-editor-notice-api_unavailable,
+.objective-editor-notice-conflict,
+.objective-editor-notice-missing { color: var(--objective-red); background: var(--objective-red-soft); }
+
+/* Form. */
+.objective-editor-form { display: grid; gap: 1rem; max-width: 58rem; }
+.objective-editor-identity,
+.objective-editor-inline-fields,
+.objective-editor-inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
+.objective-editor-inline-form { align-items: end; }
+.objective-editor-field { display: grid; gap: .3rem; min-width: 0; }
+.objective-editor-label { color: var(--objective-ink); font-size: .78rem; font-weight: 650; }
+.objective-editor-input {
+  width: 100%;
+  min-height: 40px;
+  border: 1px solid var(--objective-line-strong);
+  border-radius: var(--bb-radius-sm, 7px);
+  padding: 9px 10px;
+  color: var(--objective-ink);
+  background: var(--objective-paper);
+}
+.objective-editor-input:focus { border-color: var(--objective-green); }
+textarea.objective-editor-input { min-height: 5.4rem; resize: vertical; }
+.objective-editor-readonly-value { display: grid; align-content: center; gap: .2rem; min-height: 40px; border-bottom: 1px solid var(--objective-line); }
+.objective-editor-subheading { font-size: .9rem; font-weight: 700; }
+.objective-editor-readiness,
+.objective-editor-reference-section { display: grid; gap: .5rem; min-width: 0; border-top: 1px solid var(--objective-line); padding-top: .8rem; }
+.objective-editor-readiness { justify-items: start; }
+.objective-editor-issue-list,
+.objective-editor-reference-list,
+.objective-editor-link-list { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
+.objective-editor-issue-list { color: var(--objective-red); font-size: .78rem; }
+.objective-editor-reference-item,
+.objective-editor-link-item { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; min-height: 2.25rem; border-bottom: 1px solid var(--objective-line); padding: .35rem 0; }
+.objective-editor-reference-item small,
+.objective-editor-link-item small { width: 100%; color: var(--objective-muted); font-size: .72rem; }
+.objective-editor-reference-item .objective-editor-button-danger { margin-left: auto; }
+.objective-editor-criteria { display: grid; gap: .5rem; min-width: 0; margin: 0; border: 1px solid var(--objective-line); border-radius: var(--bb-radius-sm, 7px); padding: 12px; }
+.objective-editor-criteria legend { padding: 0 5px; font-size: .9rem; font-weight: 700; }
+.objective-editor-criteria > .objective-editor-button-secondary { justify-self: start; }
+.objective-editor-criterion-row { display: grid; grid-template-columns: minmax(8rem, 1.4fr) minmax(6rem, .8fr) minmax(6rem, .7fr) minmax(6rem, .8fr) auto; gap: .5rem; align-items: end; padding: .5rem 0; border-bottom: 1px solid var(--objective-line); }
+.objective-editor-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding-top: .3rem; }
+.objective-editor-actions .objective-editor-muted { margin-right: auto; }
+
+/* Workspace layout: page head, metrics and the objectives ledger; the rail holds the selection. */
+.bb-objective-workspace { display: block; }
+.bb-objective-workspace > .bb-ws-summary { margin-top: 30px; }
+.bb-objective-workspace > .bb-ws-notice { margin-top: 0; }
+/* The local shell resets `.bb-shell button { font: inherit }`, which outranks the kit's button and row type. */
+.bb-objective-workspace .bb-ws-button,
+.bb-objective-rail .bb-ws-button { font-size: 13px; font-weight: 680; }
+.bb-objective-workspace .bb-ws-button.is-quiet,
+.bb-objective-rail .bb-ws-button.is-quiet { font-size: 12px; }
+.bb-objective-workspace button.bb-ws-ledger-row { font-size: 12px; }
+.bb-objective-ledger .bb-ws-ledger-row { grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 1fr) 72px 136px minmax(152px, 1fr); }
+.bb-objective-judgment { font-weight: 690; }
+.bb-objective-judgment.is-available { color: var(--bb-color-accent-strong); }
+.bb-objective-judgment.is-draft { color: var(--bb-color-warning); }
+.bb-objective-judgment.is-unresolved { color: var(--bb-color-quiet); font-weight: 500; }
+.bb-objective-story { margin-top: var(--bb-space-6); }
+.bb-objective-notice-body { display: grid; gap: var(--bb-space-2); min-width: 0; }
+.bb-objective-notice-body p { margin: 0; overflow-wrap: anywhere; }
+.bb-objective-notice-body .bb-ws-button { justify-self: start; }
+
+.bb-objective-rail { display: block; }
+.bb-objective-rail > .bb-ws-notice { margin: var(--bb-space-4) 0 0; }
+.bb-objective-rail > .bb-ws-actions { padding-top: 22px; }
+.bb-objective-rail .bb-ws-rail-block > p + p,
+.bb-objective-rail .bb-objective-note { margin-top: var(--bb-space-2); }
+.bb-objective-rail .bb-objective-note { color: var(--bb-color-muted); font-size: 12px; }
+.bb-objective-rail .bb-ws-rail-block .is-unrecorded { color: var(--bb-color-quiet); }
+.bb-objective-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
+.bb-objective-list li { display: grid; gap: 2px; border-bottom: 1px solid var(--bb-color-border); padding: var(--bb-space-2) 0; font-size: 13px; }
+.bb-objective-list li:first-child { border-top: 1px solid var(--bb-color-border); }
+.bb-objective-list code { color: var(--bb-color-ink); font-family: var(--bb-font-mono); font-size: 11px; overflow-wrap: anywhere; }
+.bb-objective-list span { color: var(--bb-color-muted); }
+.bb-objective-issues { display: grid; gap: var(--bb-space-1); margin: var(--bb-space-2) 0 0; padding-left: var(--bb-space-5); color: var(--bb-color-danger); font-size: 13px; }
+.bb-objective-readiness-block .objective-editor-badge { margin-bottom: var(--bb-space-2); }
+/* The edit form in the rail: one column. */
+.bb-objective-rail .objective-editor-form { max-width: none; margin-top: 22px; }
+.bb-objective-rail .objective-editor-form p { margin: 0; }
+.bb-objective-rail .objective-editor-identity,
+.bb-objective-rail .objective-editor-inline-fields,
+.bb-objective-rail .objective-editor-inline-form { grid-template-columns: minmax(0, 1fr); }
+.bb-objective-rail .objective-editor-criterion-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+.bb-objective-rail .objective-editor-criterion-row .objective-editor-button-danger { grid-column: 1 / -1; justify-self: start; }
+.bb-objective-rail .objective-editor-actions .objective-editor-muted { flex-basis: 100%; }
+
+@media (max-width: 760px) {
+  .objective-editor-header { padding: 18px; }
+  .objective-editor-panel { padding: 14px; }
+  .bb-objective-ledger .bb-ws-ledger-row { grid-template-columns: minmax(0, 1fr) 60px 132px; }
+  .bb-objective-ledger .bb-ws-ledger-row > span:nth-child(2),
+  .bb-objective-ledger .bb-ws-ledger-row > span:nth-child(5) { display: none; }
+}
+
+@media (max-width: 720px) {
+  .objective-editor-header,
+  .objective-editor-list-row { grid-template-columns: 1fr; }
+  .objective-editor-header > .objective-editor-badge { justify-self: start; }
+  .objective-editor-list-badges { justify-content: flex-start; }
+  .objective-editor-toolbar > .objective-editor-button-secondary { margin-left: 0; }
+  .objective-editor-identity,
+  .objective-editor-inline-fields,
+  .objective-editor-inline-form { grid-template-columns: 1fr; }
+  .objective-editor-criterion-row { grid-template-columns: 1fr 1fr; }
+  .objective-editor-criterion-row .objective-editor-button-danger { grid-column: 1 / -1; justify-self: start; }
+}