codebaseiq 0.1.0 → 0.2.0

package/ui/view/styles.css

@@ -0,0 +1,1125 @@
+:root {
+  color-scheme: light dark;
+  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-code: ui-monospace, SFMono-Regular, 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', monospace;
+
+  --bg: #f4f6f9;
+  --surface: #ffffff;
+  --raised: #eef1f6;
+  --text: #1b2230;
+  --muted: #566074;
+  --border: #d5dbe5;
+  --accent: #1f4fbf;
+  --accent-text: #ffffff;
+  --accent-soft: #e4ebfa;
+  --danger: #b3261e;
+  --danger-soft: #fbe9e7;
+  --ok: #1c6b3a;
+  --warn: #8a5a00;
+  --focus: #1f4fbf;
+  --shadow: 0 8px 28px rgb(20 30 50 / 18%);
+
+  --map-bg: #fbfcfe;
+  --map-text: #1b2230;
+  --map-muted: #566074;
+  --map-dir-fill: #e3ebfb;
+  --map-dir-border: #5b7fcf;
+  --map-file-fill: #ffffff;
+  --map-file-border: #8591a6;
+  --map-external-fill: #eceff3;
+  --map-external-border: #7b8596;
+  --map-edge: #7d8798;
+  --map-cycle: #b3261e;
+  --map-accent: #1f4fbf;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0e1117;
+    --surface: #161b24;
+    --raised: #1d2430;
+    --text: #e6e9ef;
+    --muted: #9aa5b8;
+    --border: #2b3341;
+    --accent: #8cb0ff;
+    --accent-text: #0b1220;
+    --accent-soft: #1d2a47;
+    --danger: #ff8f86;
+    --danger-soft: #3a1f1d;
+    --ok: #6fcf97;
+    --warn: #f2c94c;
+    --focus: #8cb0ff;
+    --shadow: 0 8px 28px rgb(0 0 0 / 55%);
+
+    --map-bg: #11151d;
+    --map-text: #e6e9ef;
+    --map-muted: #9aa5b8;
+    --map-dir-fill: #1e2b47;
+    --map-dir-border: #6b8fd8;
+    --map-file-fill: #1b212c;
+    --map-file-border: #66738a;
+    --map-external-fill: #141922;
+    --map-external-border: #667085;
+    --map-edge: #7d8aa0;
+    --map-cycle: #ff8f86;
+    --map-accent: #8cb0ff;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  font: 14px/1.5 var(--font-ui);
+  color: var(--text);
+  background: var(--bg);
+}
+
+a {
+  color: var(--accent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+a:hover {
+  text-decoration-thickness: 2px;
+}
+
+code,
+pre,
+.path-dir,
+.path-base,
+.path-title {
+  font-family: var(--font-code);
+}
+
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.skip-link {
+  position: absolute;
+  left: 8px;
+  top: -48px;
+  z-index: 50;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: var(--accent);
+  color: var(--accent-text);
+}
+
+.skip-link:focus {
+  top: 8px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.pad {
+  padding: 16px;
+}
+
+.hint,
+.empty {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+/* Top bar */
+
+.topbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+  padding: 8px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.brand {
+  font-weight: 700;
+  color: var(--text);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.crumbs {
+  flex: 1 1 260px;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.crumbs ol {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+}
+
+.crumbs li + li::before {
+  content: '›';
+  margin: 0 6px;
+  color: var(--muted);
+}
+
+.crumbs [aria-current='page'] {
+  font-weight: 600;
+}
+
+.tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.search {
+  display: flex;
+  gap: 4px;
+}
+
+input[type='search'],
+input[type='text'],
+textarea {
+  width: 100%;
+  padding: 6px 8px;
+  font: inherit;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.search input {
+  width: 200px;
+}
+
+textarea {
+  resize: vertical;
+}
+
+button {
+  font: inherit;
+  color: var(--text);
+  background: var(--raised);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+button:hover:not(:disabled) {
+  border-color: var(--accent);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+button.accent {
+  color: var(--accent-text);
+  background: var(--accent);
+  border-color: var(--accent);
+  font-weight: 600;
+}
+
+.icon-button {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  line-height: 1;
+  font-size: 16px;
+}
+
+.link-button {
+  padding: 2px 4px;
+  color: var(--accent);
+  background: none;
+  border: none;
+  text-decoration: underline;
+}
+
+.segmented {
+  display: inline-flex;
+}
+
+.segmented button {
+  border-radius: 0;
+}
+
+.segmented button:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.segmented button:last-child {
+  border-radius: 0 6px 6px 0;
+  margin-left: -1px;
+}
+
+.segmented button[aria-pressed='true'],
+.toggle[aria-pressed='true'] {
+  color: var(--accent-text);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.pill {
+  padding: 2px 10px;
+  font-size: 12px;
+  color: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.pill[data-state='ok'] {
+  color: var(--ok);
+}
+
+.pill[data-state='warn'],
+.pill[data-state='offline'] {
+  color: var(--warn);
+  border-color: var(--warn);
+}
+
+.progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  overflow: hidden;
+  opacity: 0;
+}
+
+body[data-busy] .progress {
+  opacity: 1;
+}
+
+.progress::after {
+  content: '';
+  display: block;
+  width: 30%;
+  height: 100%;
+  background: var(--accent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .progress::after {
+    animation: sweep 1.1s ease-in-out infinite;
+  }
+}
+
+@keyframes sweep {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(340%);
+  }
+}
+
+/* Two-pane split */
+
+.split {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 11fr) minmax(320px, 9fr);
+}
+
+.split[data-view='focus'] {
+  grid-template-columns: minmax(0, 2fr) minmax(360px, 3fr);
+}
+
+.pane {
+  min-width: 0;
+  min-height: 0;
+}
+
+.map-pane {
+  position: relative;
+  background: var(--map-bg);
+}
+
+.map-canvas {
+  position: absolute;
+  inset: 0;
+}
+
+.map-controls {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.map-message {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  text-align: center;
+}
+
+.map-tooltip {
+  position: absolute;
+  z-index: 5;
+  max-width: 320px;
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: var(--shadow);
+  pointer-events: none;
+  overflow-wrap: anywhere;
+}
+
+.map-tooltip strong {
+  font-family: var(--font-code);
+}
+
+.tip-list {
+  margin: 2px 0 0;
+  padding-left: 16px;
+  font-family: var(--font-code);
+}
+
+.cycle-flag {
+  color: var(--danger);
+  font-weight: 600;
+}
+
+.detail-pane {
+  container: detail / inline-size;
+  overflow: auto;
+  padding: 16px;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+}
+
+.detail-pane:focus,
+[tabindex='-1']:focus {
+  outline: none;
+}
+
+/* Detail panels */
+
+.panel-head {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.path-title {
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.path-dir {
+  color: var(--muted);
+}
+
+.head-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+}
+
+.stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.stat {
+  display: grid;
+}
+
+.stat strong {
+  font-size: 18px;
+}
+
+.stat span {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.block {
+  margin-bottom: 20px;
+}
+
+.block h3,
+.lane h3,
+.bucket h3 {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.block-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.block-head h3 {
+  margin: 0;
+}
+
+.count {
+  margin-left: 6px;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--muted);
+}
+
+.plain-list,
+.outline-list,
+.lane-list,
+.cards,
+.why {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.plain-list > li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 10px;
+  padding: 2px 0;
+}
+
+.plain-list.stacked > li {
+  display: block;
+}
+
+.plain-list.columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: 0 12px;
+}
+
+.path-link {
+  overflow-wrap: anywhere;
+  font-size: 13px;
+}
+
+.more-row {
+  padding-top: 4px;
+}
+
+.edge-row {
+  justify-content: space-between;
+  font-size: 13px;
+}
+
+.edge-row.cycle {
+  color: var(--danger);
+}
+
+.chip {
+  display: inline-block;
+  padding: 0 7px;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--muted);
+  background: var(--raised);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+}
+
+.chip.kind {
+  margin-right: 6px;
+  border-radius: 4px;
+}
+
+.chip.danger {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+.chip.strong {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.chip.subtle {
+  background: none;
+}
+
+/* Outline */
+
+.outline-list.root {
+  margin-left: -4px;
+}
+
+.outline-list .outline-list {
+  margin-left: 14px;
+  padding-left: 8px;
+  border-left: 1px solid var(--border);
+}
+
+.outline-list li {
+  padding: 2px 0;
+}
+
+.outline-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 2px 8px;
+}
+
+.outline-link {
+  overflow-wrap: anywhere;
+}
+
+.outline-name {
+  font-family: var(--font-code);
+  font-size: 13px;
+}
+
+.outline-signature {
+  display: block;
+  margin: 0 0 2px 4px;
+  font-size: 12px;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
+.lines {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* Focus view */
+
+.signature {
+  margin: 0;
+  padding: 8px 10px;
+  overflow-x: auto;
+  font-size: 12px;
+  background: var(--raised);
+  border-radius: 6px;
+}
+
+.documentation {
+  max-height: 11em;
+  overflow: auto;
+  white-space: pre-wrap;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.relatives p {
+  margin-bottom: 6px;
+}
+
+.lanes {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.lanes-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+.lanes-more {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 12px 16px;
+}
+
+.symbol-card {
+  padding: 12px;
+  text-align: center;
+  background: var(--accent-soft);
+  border: 2px solid var(--accent);
+  border-radius: 10px;
+  overflow-wrap: anywhere;
+}
+
+.symbol-card-name {
+  display: block;
+  font-family: var(--font-code);
+  font-size: 14px;
+}
+
+.lane-list {
+  display: grid;
+  gap: 6px;
+}
+
+.lane-item {
+  padding: 6px 8px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-left-width: 4px;
+  border-radius: 6px;
+  overflow-wrap: anywhere;
+}
+
+.lane-item[data-strength='exact'] {
+  border-style: solid;
+  border-color: var(--accent);
+}
+
+.lane-item[data-strength='derived'] {
+  border-style: solid;
+  border-color: var(--muted);
+}
+
+.lane-item[data-strength='candidate'],
+.lane-item[data-strength='mixed'] {
+  border-style: dashed;
+  border-color: var(--muted);
+}
+
+.lane-item[data-strength='mixed'] {
+  border-left-color: var(--accent);
+}
+
+.lane-item[data-strength='unknown'] {
+  border-style: dotted;
+  border-color: var(--muted);
+}
+
+.lane-title {
+  font-family: var(--font-code);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.lane-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.lane-place {
+  font-family: var(--font-code);
+}
+
+.lane-strength {
+  font-style: italic;
+}
+
+.coverage {
+  margin-bottom: 20px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.collapsible > summary {
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.collapsible > summary + * {
+  margin-top: 8px;
+}
+
+.source-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.code-view {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-view pre {
+  margin: 0;
+  padding: 8px 10px;
+}
+
+.gutter {
+  text-align: right;
+  color: var(--muted);
+  border-right: 1px solid var(--border);
+  user-select: none;
+}
+
+.code {
+  overflow-x: auto;
+  tab-size: 2;
+}
+
+.statements {
+  width: 100%;
+  margin-bottom: 12px;
+  font-size: 12px;
+  border-collapse: collapse;
+}
+
+.statements caption {
+  padding: 4px 0;
+  text-align: left;
+  font-weight: 700;
+  color: var(--muted);
+}
+
+.statements th,
+.statements td {
+  padding: 3px 8px;
+  text-align: left;
+  vertical-align: top;
+  border-top: 1px solid var(--border);
+}
+
+.statements .num {
+  width: 3.5em;
+  text-align: right;
+  color: var(--muted);
+}
+
+.statements code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* Notices, toast */
+
+.notice {
+  padding: 10px 12px;
+  font-size: 13px;
+  background: var(--raised);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.notice.error {
+  color: var(--danger);
+  background: var(--danger-soft);
+  border-color: var(--danger);
+}
+
+.notice.warn {
+  color: var(--warn);
+  border-color: var(--warn);
+}
+
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  z-index: 60;
+  padding: 6px 14px;
+  font-size: 13px;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  box-shadow: var(--shadow);
+  transform: translateX(-50%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.toast.visible {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .toast {
+    transition: opacity 0.2s ease;
+  }
+}
+
+/* Builder drawer */
+
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  width: min(640px, 100vw);
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+
+.drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.drawer-head h2 {
+  font-size: 15px;
+}
+
+.drawer-body {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+}
+
+.drawer-form {
+  display: grid;
+  gap: 8px;
+}
+
+.drawer-form label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.modes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.modes legend {
+  padding: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text);
+}
+
+.form-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.results {
+  display: grid;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.result-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.result-summary p {
+  flex-basis: 100%;
+}
+
+.probe-list {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  margin: 0;
+}
+
+.probe-list dt {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.probe-list dd {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 0;
+}
+
+.buckets {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.cards {
+  display: grid;
+  gap: 8px;
+}
+
+.card {
+  display: grid;
+  gap: 4px;
+  padding: 8px 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow-wrap: anywhere;
+}
+
+.card-signature {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.why {
+  display: grid;
+  gap: 2px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.why li::before {
+  content: '• ';
+}
+
+/* Narrow layouts: the panes stack and the page scrolls */
+
+@container detail (max-width: 640px) {
+  .lanes-main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .symbol-card {
+    order: -1;
+  }
+}
+
+@media (max-width: 899px) {
+  html,
+  body {
+    height: auto;
+  }
+
+  body {
+    min-height: 100vh;
+  }
+
+  .split,
+  .split[data-view='focus'] {
+    display: block;
+  }
+
+  .map-pane {
+    height: 55vh;
+    min-height: 320px;
+  }
+
+  .detail-pane {
+    overflow: visible;
+    border-left: none;
+    border-top: 1px solid var(--border);
+  }
+
+  .search input {
+    width: 150px;
+  }
+
+  .crumbs {
+    order: 3;
+    flex-basis: 100%;
+  }
+}
+
+.statements .place {
+  font-family: var(--font-code);
+  font-size: 11px;
+}
+
+.statements tr[data-strength='candidate'] td,
+.statements tr[data-strength='mixed'] td {
+  border-top-style: dashed;
+}