@zettelgeist/cli 0.1.0

package/dist/viewer-bundle/base.css

@@ -0,0 +1,248 @@
+:root {
+  --zg-spacing: 1rem;
+  --zg-color-blocked: #c0392b;
+  --zg-color-cancelled: #7f8c8d;
+}
+
+#app {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--zg-spacing);
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+[data-theme='light'] {
+  color-scheme: light;
+}
+
+.zg-nav {
+  display: flex;
+  gap: 1rem;
+  padding: 0.5rem 1rem;
+  background: var(--pico-card-background-color, #f5f5f5);
+  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
+  align-items: center;
+}
+.zg-nav a {
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+button.zg-theme-toggle {
+  margin-left: auto;
+  background: var(--zg-btn-bg, #ffffff);
+  border: 1px solid var(--zg-btn-border, #d0d7de);
+  border-radius: 0.375rem;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  color: var(--zg-btn-fg, #57606a);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s, color 0.15s;
+}
+button.zg-theme-toggle:hover,
+button.zg-theme-toggle:focus-visible {
+  border-color: var(--zg-btn-fg-hover, #1095c1);
+  color: var(--zg-btn-fg-hover, #1095c1);
+}
+
+.zg-graph-container {
+  margin: 1rem 0;
+  text-align: center;
+  overflow-x: auto;
+}
+
+.zg-graph-header {
+  margin-bottom: 0.5rem;
+}
+.zg-graph-header h2 {
+  margin: 0 0 0.25rem 0;
+}
+.zg-graph-subtitle {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--pico-muted-color, #666);
+  max-width: 60ch;
+}
+
+.zg-graph-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0.75rem 0;
+  background: var(--pico-card-background-color, #f5f5f5);
+  border: 1px solid var(--pico-muted-border-color, #ddd);
+  border-radius: 0.375rem;
+  font-size: 0.8rem;
+}
+.zg-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--pico-color, #1a1a1a);
+}
+.zg-legend-swatch {
+  display: inline-block;
+  width: 0.9rem;
+  height: 0.9rem;
+  border-radius: 0.2rem;
+  border: 1px solid;
+}
+/* Legend swatch colors mirror the Mermaid classDef palette so the legend
+   actually predicts what users see in the graph. */
+.zg-legend-swatch.zg-legend-draft       { background: #f3f4f6; border-color: #9ca3af; }
+.zg-legend-swatch.zg-legend-planned     { background: #dbeafe; border-color: #60a5fa; }
+.zg-legend-swatch.zg-legend-in-progress { background: #fef3c7; border-color: #f59e0b; }
+.zg-legend-swatch.zg-legend-in-review   { background: #ede9fe; border-color: #8b5cf6; }
+.zg-legend-swatch.zg-legend-done        { background: #d1fae5; border-color: #10b981; }
+.zg-legend-swatch.zg-legend-blocked     { background: #fee2e2; border-color: #c0392b; }
+.zg-legend-swatch.zg-legend-cancelled   { background: #f3f4f6; border-color: #7f8c8d; }
+
+/* Subgraph titles. Cluster fill/stroke is driven per-cluster by the Mermaid
+   `style sg_<n>` directives in graph.ts (deterministic palette per part_of). */
+.zg-graph-container .cluster-label .nodeLabel,
+.zg-graph-container .cluster-label text {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.zg-graph-fallback {
+  background: var(--pico-card-background-color, #f5f5f5);
+  padding: 1rem;
+  border-radius: 0.375rem;
+  text-align: left;
+  overflow-x: auto;
+}
+
+.zg-empty-state {
+  max-width: 640px;
+  margin: 4rem auto;
+  padding: 2rem;
+  text-align: center;
+  border: 2px dashed var(--pico-muted-border-color, #ddd);
+  border-radius: 0.75rem;
+  background: var(--pico-card-background-color, #fafafa);
+}
+.zg-empty-state h2,
+.zg-empty-state h3 {
+  margin: 0 0 0.5rem 0;
+  font-weight: 600;
+}
+.zg-empty-state p {
+  color: var(--pico-muted-color, #666);
+  margin: 0.5rem 0;
+}
+.zg-empty-example {
+  text-align: left;
+  font-family: var(--pico-font-family-monospace, ui-monospace, monospace);
+  font-size: 0.8rem;
+  background: var(--pico-background-color, #fff);
+  border: 1px solid var(--pico-muted-border-color, #e5e7eb);
+  border-radius: 0.375rem;
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+.zg-empty-hint {
+  font-size: 0.85rem;
+  font-style: italic;
+}
+
+/* Validation banner — surfaced above board / graph when validate_repo
+   reports any errors. Defaults to expanded so users see what's wrong. */
+.zg-validation-banner {
+  margin: 0 0 1rem 0;
+  padding: 0.5rem 0.75rem;
+  background: rgba(245, 158, 11, 0.12);
+  border: 1px solid rgba(245, 158, 11, 0.4);
+  border-radius: 0.375rem;
+  font-size: 0.85rem;
+}
+.zg-validation-summary {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 500;
+  color: #b45309;
+  list-style: none;
+}
+.zg-validation-summary::-webkit-details-marker { display: none; }
+.zg-validation-icon {
+  font-size: 1rem;
+  line-height: 1;
+}
+.zg-validation-list {
+  margin: 0.5rem 0 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.zg-validation-item {
+  padding: 0.35rem 0.5rem;
+  background: var(--pico-background-color, #fff);
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+}
+.zg-validation-item code {
+  font-size: 0.75rem;
+  background: rgba(0,0,0,0.05);
+  padding: 0.05rem 0.3rem;
+  border-radius: 0.2rem;
+}
+
+/* Wiki-style links: [[spec-name]] inside any markdown body. The "exists"
+   variant uses the primary accent — already-clickable to the spec detail.
+   The "missing" variant is amber + a dashed underline so the user can tell
+   the target doesn't exist yet. Clicking still navigates (you can write the
+   spec by visiting its URL). */
+.zg-markdown a.zg-wikilink {
+  color: var(--pico-primary, #1095c1);
+  text-decoration: none;
+  border-bottom: 1px dotted currentColor;
+}
+.zg-markdown a.zg-wikilink:hover {
+  text-decoration: underline;
+}
+.zg-markdown a.zg-wikilink-missing {
+  color: #b45309;
+  border-bottom-style: dashed;
+}
+.zg-markdown a.zg-wikilink-missing:hover {
+  color: #92400e;
+}
+
+/* Markdown GFM task-list rendering: marked v14 emits
+     <ul><li><input type="checkbox" disabled> text</li>...</ul>
+   without a task-list-item class. We target via :has() instead so the styling
+   actually attaches. (The Tasks tab gets its own interactive checkboxes via
+   the task-list component; these are display-only.) */
+.zg-markdown ul:has(> li > input[type="checkbox"]) {
+  list-style: none;
+  padding-left: 0;
+}
+.zg-markdown li:has(> input[type="checkbox"]) {
+  list-style: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0.25rem 0;
+}
+.zg-markdown li > input[type="checkbox"] {
+  margin: 0.25rem 0 0 0;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--pico-primary, #1095c1);
+}