stream_weaver 0.3.0

data/examples/parity/tyrion_components.css

@@ -0,0 +1,777 @@
+/* Tyrion War Room -- component-parity slice (stream_weaver-oeo proof)
+ *
+ * ONE stylesheet, targeting ONLY the sw- hook classes documented in
+ * docs/theming-hooks.md (now including sw-topbar and lane's icon:
+ * slot, both added by this same ticket) plus this slice's own tc-
+ * prefixed classes for the handful of elements with no dedicated
+ * component (git/error pills, war-table hero wrapper, story-detail page
+ * chrome -- see this file's companion .rb header comment for why those
+ * specific gaps exist). No specificity workaround anywhere -- every
+ * framework rule lives in @layer stream-weaver (stream_weaver-oeo
+ * commit 1), so a plain unlayered selector here always wins.
+ *
+ * Palette/type values re-derived by reading (READ-ONLY, never copied)
+ * ~/work/tyrion/web/public/shared.css's :root custom properties and
+ * .wr-board/.wr-col-header/.wr-card rules (translucency/photo-bg
+ * convergence pass, same ticket).
+ */
+
+:root {
+  --tc-bg: #0D0A07;
+  --tc-surface: #1A1208;
+  --tc-border: #4A3520;
+  --tc-text: #F5E6C8;
+  --tc-text-dim: #D4B896;
+  --tc-text-muted: #9B7D5A;
+  --tc-text-faint: #6B5037;
+  --tc-amber: #F59E0B;
+  --tc-amber-dim: #D97706;
+  --tc-crimson: #DC2626;
+  --tc-emerald: #16A34A;
+  --tc-gold: #D97706;
+  --tc-gold-bright: #F59E0B;
+  --tc-parchment: #F0E4C0;
+  --tc-parchment-aged: #D9CDB0;
+  --tc-ink: #1A0E05;
+  --tc-ink-dim: #3D2410;
+  --tc-ink-muted: #6B4525;
+  --tc-ink-faint: #9B7550;
+  --tc-font-display: 'Cinzel', Georgia, serif;
+  --tc-font-serif: 'Lora', Georgia, serif;
+  --tc-font-mono: 'IBM Plex Mono', monospace;
+  --tc-sidebar-w: 240px;
+  --tc-topbar-h: 52px;
+  --tc-navbar-h: 40px;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
+body.sw-chromeless {
+  padding: 0;
+}
+
+/* ===========================================================
+   Topbar (sw-topbar hooks, stream_weaver-oeo -- replaces the
+   design-parity-fights.md #6 hand-rolled tc-topbar div/phrase soup)
+   =========================================================== */
+.sw-topbar {
+  height: var(--tc-topbar-h);
+  min-height: var(--tc-topbar-h);
+  padding: 0 16px;
+  background: var(--tc-surface);
+  border-bottom: 0;
+  gap: 8px;
+  /* Real .topbar carries the war-table photo too (re-derived from
+     ~/work/tyrion/web/public/shared.css, read-only) -- MAP_URL's
+     resolved value is appended by the .rb file as a small inline
+     override (env var unset: this gradient-only fallback stands). */
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.48), rgba(13, 10, 7, 0.88));
+  background-size: cover;
+  background-position: center 35%;
+}
+
+.sw-topbar-icon {
+  width: 34px;
+  height: 34px;
+}
+
+.sw-topbar-wordmark {
+  font-family: var(--tc-font-display);
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--tc-gold-bright);
+  letter-spacing: 0.1em;
+}
+
+.sw-topbar-breadcrumbs {
+  font-family: var(--tc-font-mono);
+  font-size: 13px;
+  color: var(--tc-text-muted);
+}
+
+.sw-topbar-separator {
+  color: var(--tc-text-faint);
+}
+
+.sw-topbar-crumb--active {
+  color: var(--tc-gold-bright);
+  font-weight: 500;
+}
+
+.tc-pill {
+  font-family: var(--tc-font-mono);
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--tc-text-dim);
+}
+
+.tc-pill--amber {
+  background: rgba(245, 158, 11, 0.12);
+  color: var(--tc-amber);
+}
+
+/* navbar (real sw-navbar/sw-navbar-item hooks) */
+.tc-navbar.sw-navbar {
+  height: var(--tc-navbar-h);
+  background: rgba(0, 0, 0, 0.42);
+  border-top: 1px solid rgba(107, 78, 42, 0.45);
+  border-bottom: 2px solid var(--tc-border);
+  padding: 0 8px;
+  margin-bottom: 0;
+  gap: 0;
+}
+
+.sw-navbar-item {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--tc-font-mono);
+  font-size: 13px;
+  color: var(--tc-text-muted);
+  padding: 8px 12px 7px;
+  text-decoration: none;
+}
+
+.sw-navbar-item-active {
+  color: var(--tc-gold-bright);
+  border-bottom: 2px solid var(--tc-gold-bright);
+}
+
+.sw-navbar-item__close {
+  order: -1;
+  margin: 0 6px 0 0;
+  opacity: 1;
+  font-weight: 400;
+}
+
+/* ===========================================================
+   Shell / Sidebar (sw-app-shell / sw-sidebar hooks)
+   =========================================================== */
+.tc-shell.sw-app-shell {
+  height: calc(100% - var(--tc-topbar-h) - var(--tc-navbar-h));
+}
+
+.sw-app-shell-main {
+  overflow-y: auto;
+  background: var(--tc-bg);
+}
+
+.tc-sidebar.sw-sidebar {
+  background: var(--tc-surface);
+  border-right: 1px solid var(--tc-border);
+  overflow: hidden;
+  padding-bottom: 0;
+}
+
+.tc-sidebar-path {
+  padding: 8px 14px 0;
+  font-size: 11px;
+  color: var(--tc-text-faint);
+  font-family: var(--tc-font-mono);
+}
+
+/* The framework's own .sw-sidebar-section hook is card-styled
+   (background/border/radius, meant for a "Monica-style" facts box) --
+   insufficient for a bare section label like "Stories · warroom-
+   components" (white-band regression, stream_weaver-oeo review). Fix is
+   exactly what docs/theming-hooks.md's own worked example shows:
+   background: transparent, no border -- this hook is a plain CSS
+   utility, not a dedicated component, so there's nothing to change in
+   the framework itself. */
+.sw-sidebar-section {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 12px 14px 4px;
+  font-size: 11px;
+  font-family: var(--tc-font-display);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--tc-text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tc-story-row.sw-clickable {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px 6px 12px;
+  margin: 2px 8px;
+  font-family: var(--tc-font-mono);
+  font-size: 15px;
+  color: var(--tc-ink-dim);
+  text-decoration: none;
+  border: 1px solid #B8A070;
+  border-radius: 3px;
+  background: var(--tc-parchment-aged);
+  min-width: 0;
+}
+
+.tc-story-row:hover {
+  background: #F5EDD8;
+  border-color: var(--tc-amber);
+}
+
+.tc-story-row--done .tc-story-icon {
+  color: var(--tc-emerald);
+}
+
+.tc-story-row--done {
+  opacity: 0.65;
+}
+
+.tc-story-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tc-story-row--in_progress .tc-story-icon {
+  color: var(--tc-amber);
+}
+
+.tc-story-row--pending .tc-story-icon {
+  color: var(--tc-text-faint);
+}
+
+.tc-discoveries {
+  margin-top: auto;
+  border-top: 1px solid var(--tc-border);
+  padding: 10px 0 8px;
+}
+
+.tc-disc-row.sw-clickable {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 14px;
+  text-decoration: none;
+}
+
+.tc-disc-pill {
+  font-family: var(--tc-font-mono);
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  color: var(--tc-ink);
+}
+
+.tc-disc-pill--spike {
+  background: #7C3AED;
+  color: #fff;
+}
+
+.tc-disc-pill--mark {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--tc-text-dim);
+}
+
+.tc-disc-label {
+  font-size: 12px;
+  color: var(--tc-text-muted);
+}
+
+/* ===========================================================
+   War table hero + board (sw-board / sw-board__lane / sw-board__card hooks)
+   =========================================================== */
+.tc-board-hero {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  /* War-table photo goes here (MAP_URL, appended by the .rb file as a
+     small inline override -- see its header comment); unset MAP_URL
+     falls back to this gradient-only look. */
+  background:
+    radial-gradient(circle at 50% 52%, rgba(255, 180, 60, 0.08), transparent 32%),
+    linear-gradient(180deg, rgba(8, 10, 11, 0.55), rgba(8, 10, 11, 0.75)), var(--tc-bg);
+  padding: 0;
+  overflow: hidden;
+}
+
+.tc-dragon-zone {
+  position: absolute;
+  top: 88px;
+  bottom: 196px;
+  left: 50%;
+  width: 22%;
+  transform: translateX(-50%);
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #ead7ba;
+  padding: 24px 16px;
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at 50% 48%, rgba(255, 80, 20, 0.28), rgba(0, 0, 0, 0) 26%),
+    radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.24) 55%, rgba(0, 0, 0, 0) 82%);
+  pointer-events: none;
+}
+
+.tc-dragon-zone::before {
+  content: "";
+  position: absolute;
+  inset: 8% 12%;
+  background: radial-gradient(circle at 50% 48%, rgba(255, 112, 54, 0.28), rgba(255, 80, 20, 0.08) 22%, transparent 50%);
+  filter: blur(14px);
+}
+
+.tc-dragon-glyph.tc-art-img {
+  width: 70px;
+  height: 70px;
+  margin: 0 auto 10px;
+  position: relative;
+  z-index: 2;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.82;
+  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
+}
+
+.tc-dragon-glyph.tc-art-glyph {
+  display: block;
+  font-size: 48px;
+  margin-bottom: 10px;
+  opacity: 0.82;
+}
+
+.tc-dragon-zone h3 {
+  font-family: var(--tc-font-display);
+  position: relative;
+  z-index: 2;
+  margin: 0 0 8px;
+  font-size: 22px;
+  letter-spacing: 0.04em;
+  color: #f0cdb4;
+}
+
+.tc-dragon-zone p {
+  position: relative;
+  z-index: 2;
+  color: var(--tc-text-dim);
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* Board frame: rounded/bordered/shadowed like the real .wr-board so the
+   photo doesn't bleed square corners past the war-table edge, gap: 0 +
+   each lane's own border-right (below) reproduces the real CSS's
+   edge-to-edge columns-with-rule-lines look instead of a gutter that
+   shows flat board-hero background between lanes. */
+.sw-board {
+  position: relative;
+  z-index: 2;
+  gap: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  align-items: stretch;
+  border-radius: 16px;
+  border: 1px solid rgba(215, 176, 102, 0.28);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+}
+
+.sw-board--pinned-headers {
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.sw-board--pinned-headers .sw-board__lane {
+  max-height: 100%;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(215, 176, 102, 0.2) transparent;
+}
+
+.sw-board::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 50% 52%, rgba(255, 180, 60, 0.07), transparent 22%),
+    linear-gradient(180deg, rgba(18, 18, 18, 0.06), rgba(3, 4, 5, 0.22));
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Lane containers stay transparent so the war-table photo shows through
+   uninterrupted -- only a soft vertical rule separates them (softer
+   than the framework default's solid 1px box border all around, per
+   stream_weaver-oeo review's "softer lane container borders" note). */
+.sw-board__lane {
+  flex: 1 0 25%;
+  min-width: 0;
+  min-height: 100%;
+  position: relative;
+  z-index: 2;
+  background: transparent;
+  border: none;
+  border-right: 1px solid rgba(215, 176, 102, 0.18);
+  border-radius: 0;
+}
+
+.sw-board__lane:last-child {
+  border-right: none;
+}
+
+/* Muted, translucent parchment-gradient bands (re-derived from
+   ~/work/tyrion/web/public/shared.css's .wr-col-header/.active-hdr/
+   .dragons-hdr/.done-hdr, read-only) -- NOT the flat saturated
+   --tc-gold/--tc-crimson/--tc-emerald blocks this slice shipped with
+   originally (stream_weaver-oeo review finding). */
+.sw-board__lane-header {
+  background: linear-gradient(180deg, rgba(236, 220, 184, 0.94), rgba(187, 164, 122, 0.92));
+  color: #2b2418;
+  height: 78px;
+  padding: 0 14px;
+  justify-content: center;
+  text-align: center;
+  border-bottom: 1px solid rgba(89, 70, 40, 0.3);
+  box-shadow: inset 0 -4px 18px rgba(64, 43, 14, 0.1);
+  z-index: 4;
+}
+
+.sw-board__lane-header--neutral {
+  background: linear-gradient(180deg, rgba(236, 220, 184, 0.94), rgba(187, 164, 122, 0.92));
+  color: #2b2418;
+}
+
+.sw-board__lane-header--warning {
+  background: linear-gradient(180deg, rgba(255, 220, 140, 0.95), rgba(210, 160, 60, 0.9));
+  color: #2b2418;
+}
+
+.sw-board__lane-header--error {
+  background: linear-gradient(180deg, rgba(200, 130, 120, 0.92), rgba(155, 70, 60, 0.88));
+  color: #2a0e0a;
+}
+
+.sw-board__lane-header--success {
+  background: linear-gradient(180deg, rgba(180, 210, 170, 0.93), rgba(130, 165, 110, 0.88));
+  color: #1a2e14;
+}
+
+.sw-board__lane-icon {
+  width: 22px;
+  height: 22px;
+  margin-right: 0;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
+}
+
+.sw-board__lane-title {
+  font-family: var(--tc-font-display);
+  font-size: 15px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1.1;
+  text-align: center;
+}
+
+.sw-board__lane-subtitle {
+  font-size: 11px;
+  opacity: 0.7;
+  text-align: center;
+  margin-top: 2px;
+}
+
+.sw-board__lane-count {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-family: var(--tc-font-display);
+  font-size: 20px;
+  opacity: 1;
+}
+
+.sw-board__lane-body {
+  background: transparent;
+  padding: 14px;
+  gap: 0;
+  min-height: 60px;
+}
+
+/* Warm parchment cards floating on the map, translucent enough that the
+   photo still reads through the gaps between them (re-derived from the
+   real .wr-card, read-only). */
+.sw-board__card {
+  position: relative;
+  background: linear-gradient(180deg, rgba(236, 220, 184, 0.97), rgba(209, 186, 141, 0.96));
+  color: var(--tc-ink);
+  border-radius: 12px;
+  padding: 14px 14px 12px;
+  border: 1px solid rgba(96, 73, 32, 0.35);
+  margin-bottom: 12px;
+  text-decoration: none;
+  display: block;
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+}
+
+/* Decorative corner studs (re-derived from the real .wr-card::before/
+   ::after, read-only). */
+.sw-board__card::before,
+.sw-board__card::after {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  top: 8px;
+  border-radius: 50%;
+  background: #92713c;
+  opacity: 0.6;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.28);
+}
+
+.sw-board__card::before {
+  left: 10px;
+}
+
+.sw-board__card::after {
+  right: 10px;
+}
+
+.sw-board__card--error {
+  border-left: 3px solid var(--tc-crimson);
+}
+
+.tc-card--done {
+  background: linear-gradient(180deg, rgba(200, 190, 160, 0.88), rgba(175, 162, 128, 0.84));
+  opacity: 0.82;
+}
+
+.sw-board__card h4 {
+  font-family: var(--tc-font-serif);
+  font-size: 17px;
+  line-height: 1.25;
+  font-weight: 500;
+  margin: 0;
+  color: var(--tc-ink);
+}
+
+.tc-card-epic {
+  font-family: var(--tc-font-mono);
+  display: block;
+  font-size: 13px;
+  color: #564327;
+  margin-bottom: 6px;
+}
+
+.tc-card-ctx {
+  font-size: 12px;
+  color: #4a3318;
+  margin-top: 6px;
+  font-family: var(--tc-font-mono);
+  line-height: 1.4;
+}
+
+.sw-board__card .sw-badge {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 3px 8px;
+  border: 1px solid rgba(88, 70, 41, 0.2);
+  border-radius: 6px;
+  background: rgba(113, 92, 58, 0.14);
+  color: #3e3222;
+  font-family: var(--tc-font-mono);
+  font-size: 11px;
+  line-height: 1.2;
+}
+
+.tc-card-done-meta {
+  font-size: 11px;
+  color: #166534;
+}
+
+.tc-card--stale {
+  opacity: 0.85;
+}
+
+.tc-stale-badge {
+  display: block;
+  font-size: 10px;
+  color: var(--tc-crimson);
+  margin-bottom: 4px;
+}
+
+/* ===========================================================
+   Story detail page (no dedicated component -- sw-card/sw-status-badge hooks)
+   =========================================================== */
+.tc-story-page {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.tc-back-link.sw-clickable {
+  display: inline-block;
+  font-size: 12px;
+  font-family: var(--tc-font-mono);
+  color: var(--tc-text-faint);
+  text-decoration: none;
+  margin-bottom: 12px;
+}
+
+.sw-card {
+  background: var(--tc-surface);
+  border: 1px solid var(--tc-border);
+  color: var(--tc-text-dim);
+}
+
+.tc-story-hero.sw-card {
+  background: linear-gradient(160deg, var(--tc-surface), var(--tc-bg));
+}
+
+.sw-card-header {
+  font-family: var(--tc-font-display);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--tc-text-faint);
+  padding: 12px 16px 4px;
+}
+
+.sw-card-body {
+  padding: 8px 16px 16px;
+  color: var(--tc-text-dim);
+}
+
+.tc-hero-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.tc-hero-meta {
+  font-size: 12px;
+  color: var(--tc-text-muted);
+}
+
+.tc-hero-title {
+  font-family: var(--tc-font-display);
+  font-size: 26px;
+  color: var(--tc-text);
+  margin: 8px 0 0;
+}
+
+.tc-brief {
+  background: rgba(180, 140, 80, 0.08);
+  border-left: 3px solid rgba(180, 140, 80, 0.35);
+  border-radius: 0 6px 6px 0;
+  padding: 10px 14px;
+  margin-top: 14px;
+}
+
+.tc-brief-label {
+  font-size: 10px;
+  font-family: var(--tc-font-mono);
+  color: var(--tc-text-faint);
+  letter-spacing: 0.1em;
+  display: block;
+  margin-bottom: 6px;
+}
+
+.tc-brief-text {
+  font-family: var(--tc-font-serif);
+  font-size: 14px;
+  color: var(--tc-text-dim);
+  font-style: italic;
+}
+
+.tc-story-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.tc-crit-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.tc-crit-check {
+  color: var(--tc-text-faint);
+}
+
+.tc-crit-row--met .tc-crit-check {
+  color: var(--tc-emerald);
+}
+
+.tc-note-entry {
+  padding: 6px 0;
+  border-bottom: 1px solid var(--tc-border);
+}
+
+.tc-note-meta {
+  display: block;
+  font-size: 11px;
+  color: var(--tc-text-faint);
+  font-family: var(--tc-font-mono);
+}
+
+.tc-note-body {
+  font-size: 13px;
+  color: var(--tc-text-dim);
+}
+
+.tc-resume-strip {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr 1fr;
+  gap: 12px;
+  margin-top: 16px;
+  padding: 14px;
+  background: var(--tc-surface);
+  border-radius: 6px;
+  border: 1px solid var(--tc-border);
+}
+
+.tc-rs-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tc-rs-panel--beacon {
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.tc-lantern-glyph.tc-art-img {
+  width: 32px;
+  height: 32px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.tc-lantern-glyph.tc-art-glyph {
+  font-size: 24px;
+}
+
+.tc-rs-label {
+  font-size: 10px;
+  font-family: var(--tc-font-mono);
+  color: var(--tc-text-faint);
+  letter-spacing: 0.08em;
+}
+
+.tc-rs-text {
+  font-size: 13px;
+  color: var(--tc-text-dim);
+}