@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/hlidskjalf/src/styles/shell.css

@@ -0,0 +1,641 @@
+/* ============================================================
+   HLIDSKJALF — Shell
+   Grid: 236px rail | 1fr  ·  rows 56px topbar · stage · 192px stream
+   Ported from the reference contract (plan 28 §0, design.md §5.1)
+   ============================================================ */
+
+.shell {
+  --rail-w: 236px;
+  --topbar-h: 56px;
+  --stream-h: 192px;
+  display: grid;
+  grid-template-columns: var(--rail-w) 1fr;
+  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--stream-h);
+  grid-template-areas:
+    'rail topbar'
+    'rail stage'
+    'rail stream';
+  height: 100%;
+  width: 100%;
+  background:
+    radial-gradient(1200px 600px at 18% -10%, var(--realm-tint-dim), transparent 60%),
+    var(--ymir-bg-0);
+  transition: background 220ms var(--ymir-ease);
+}
+
+.shell[data-density='compact'] {
+  --ymir-s-body: 14px / 20px;
+}
+
+/* ============================================================
+   RAIL
+   ============================================================ */
+.rail {
+  grid-area: rail;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: linear-gradient(180deg, var(--ymir-bg-1), var(--ymir-bg-0));
+  border-right: 1px solid var(--ymir-steel-1);
+  box-shadow: var(--ymir-bevel);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-3);
+  height: var(--topbar-h);
+  padding: 0 var(--ymir-space-4);
+  border-bottom: 1px solid var(--ymir-steel-1);
+  flex-shrink: 0;
+}
+
+.emblem {
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ymir-chisel) 25%, transparent));
+}
+
+.brand-mark {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+  flex-shrink: 0;
+  box-shadow: var(--ymir-bevel), 0 0 14px color-mix(in srgb, var(--ymir-chisel) 18%, transparent);
+}
+.login-brand .brand-mark {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+}
+
+.wordmark {
+  display: flex;
+  flex-direction: column;
+  line-height: 1;
+  min-width: 0;
+}
+.wordmark-name {
+  font-family: var(--ymir-font-head);
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: 0.22em;
+  color: var(--ymir-text-0);
+}
+.wordmark-sub {
+  font-family: var(--ymir-font-mono);
+  font-size: 9px;
+  letter-spacing: 0.32em;
+  color: var(--realm-tint);
+  text-transform: uppercase;
+  margin-top: 3px;
+}
+
+/* --- Navigation gates ---------------------------------------- */
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--ymir-space-3) var(--ymir-space-2);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.gate {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-3);
+  padding: 9px var(--ymir-space-3);
+  border-radius: var(--ymir-radius);
+  color: var(--ymir-text-1);
+  text-align: left;
+  border: 1px solid transparent;
+  transition: background var(--ymir-dur-fast) var(--ymir-ease),
+    color var(--ymir-dur-fast) var(--ymir-ease), border-color var(--ymir-dur-fast) var(--ymir-ease);
+}
+.gate:hover {
+  background: var(--ymir-bg-2);
+  color: var(--ymir-text-0);
+}
+.gate[aria-current='true'] {
+  background: var(--realm-tint-dim);
+  color: var(--ymir-text-0);
+  border-color: color-mix(in srgb, var(--realm-tint) 40%, transparent);
+  box-shadow: var(--ymir-bevel);
+}
+.gate[aria-current='true']::before {
+  content: '';
+  position: absolute;
+  left: -2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  border-radius: 2px;
+  background: var(--realm-tint);
+  box-shadow: 0 0 8px var(--realm-tint);
+}
+.gate-glyph {
+  width: 22px;
+  text-align: center;
+  font-family: var(--ymir-font-head);
+  font-size: 19px;
+  color: var(--realm-tint);
+  flex-shrink: 0;
+}
+.gate-label {
+  font-size: 14px;
+  font-weight: 500;
+  flex: 1;
+}
+.gate-count {
+  font-family: var(--ymir-font-mono);
+  font-size: 11px;
+  color: var(--ymir-text-2);
+  background: var(--ymir-bg-3);
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+
+/* --- Rail foot: realm switch + node status ------------------- */
+.rail-foot {
+  flex-shrink: 0;
+  border-top: 1px solid var(--ymir-steel-1);
+  padding: var(--ymir-space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ymir-space-3);
+}
+
+.realm-switch {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.realm-opt {
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-2);
+  padding: 6px var(--ymir-space-2);
+  border-radius: var(--ymir-radius);
+  border: 1px solid transparent;
+  color: var(--ymir-text-1);
+  font-size: 13px;
+  transition: background var(--ymir-dur-fast) var(--ymir-ease);
+}
+.realm-opt:hover {
+  background: var(--ymir-bg-2);
+  color: var(--ymir-text-0);
+}
+.realm-opt[aria-current='true'] {
+  background: var(--ymir-bg-2);
+  border-color: var(--ymir-steel-1);
+  color: var(--ymir-text-0);
+}
+.realm-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ymir-text-0) 15%, transparent);
+}
+
+.rail-node {
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-2);
+  font-family: var(--ymir-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  color: var(--ymir-text-2);
+  text-transform: uppercase;
+}
+
+/* ============================================================
+   TOPBAR
+   ============================================================ */
+.topbar {
+  grid-area: topbar;
+  position: relative;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-3);
+  padding: 0 var(--ymir-space-5);
+  background: color-mix(in srgb, var(--ymir-bg-1) 88%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--ymir-steel-1);
+}
+
+.realm-chip {
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-2);
+  padding: 5px 11px 5px 9px;
+  border-radius: 999px;
+  background: var(--realm-tint-dim);
+  border: 1px solid color-mix(in srgb, var(--realm-tint) 35%, transparent);
+  font-family: var(--ymir-font-mono);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  color: var(--ymir-text-0);
+  white-space: nowrap;
+}
+.realm-chip .house-glyph {
+  color: var(--realm-tint);
+  font-family: var(--ymir-font-head);
+  font-size: 15px;
+}
+
+.search {
+  flex: 1;
+  max-width: 440px;
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-2);
+  padding: 0 var(--ymir-space-3);
+  height: 34px;
+  border-radius: var(--ymir-radius);
+  background: var(--ymir-bg-0);
+  border: 1px solid var(--ymir-steel-1);
+  color: var(--ymir-text-2);
+  transition: border-color var(--ymir-dur-fast) var(--ymir-ease);
+}
+.search:focus-within {
+  border-color: var(--ymir-chisel);
+  box-shadow: var(--ymir-bevel);
+}
+.search input {
+  flex: 1;
+  min-width: 0;
+  background: none;
+  border: none;
+  outline: none;
+  font-size: 13px;
+  color: var(--ymir-text-0);
+}
+.search input::placeholder {
+  color: var(--ymir-text-3);
+}
+.search kbd {
+  font-family: var(--ymir-font-mono);
+  font-size: 10px;
+  color: var(--ymir-text-3);
+  border: 1px solid var(--ymir-steel-1);
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+
+.topbar-spacer {
+  flex: 1;
+}
+
+.trace-chip {
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-2);
+  padding: 4px 12px;
+  border-radius: var(--ymir-radius);
+  background: var(--ymir-bg-2);
+  border: 1px solid var(--ymir-steel-1);
+  box-shadow: var(--ymir-bevel);
+  font-family: var(--ymir-font-mono);
+  white-space: nowrap;
+}
+.trace-chip .label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  color: var(--ymir-text-2);
+  text-transform: uppercase;
+}
+.trace-chip .value {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ymir-ok);
+  font-variant-numeric: tabular-nums;
+}
+
+.icon-btn {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border-radius: var(--ymir-radius);
+  border: 1px solid var(--ymir-steel-1);
+  background: var(--ymir-bg-1);
+  color: var(--ymir-text-1);
+  font-family: var(--ymir-font-head);
+  font-size: 15px;
+  transition: background var(--ymir-dur-fast) var(--ymir-ease), color var(--ymir-dur-fast) var(--ymir-ease);
+}
+.icon-btn:hover {
+  background: var(--ymir-bg-3);
+  color: var(--ymir-text-0);
+}
+.icon-btn[aria-pressed='true'] {
+  background: var(--realm-tint-dim);
+  border-color: color-mix(in srgb, var(--realm-tint) 40%, transparent);
+  color: var(--realm-tint);
+}
+
+/* The Hall door — the Óðrerir Live Hall is outside the three apps, so it opens
+   as a page in its own tab; the glyph is Othala, the ancestral hall. */
+.hall-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--realm-tint) 35%, transparent);
+  background: var(--realm-tint-dim);
+  color: var(--realm-tint);
+  font-family: var(--ymir-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.hall-btn .glyph {
+  font-family: var(--ymir-font-head);
+  font-size: 13px;
+}
+.hall-btn:hover {
+  background: color-mix(in srgb, var(--realm-tint) 22%, transparent);
+  border-color: var(--realm-tint);
+  color: var(--ymir-text-0);
+}
+
+.user-menu {
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-2);
+  padding-left: var(--ymir-space-3);
+  border-left: 1px solid var(--ymir-steel-1);
+}
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, var(--realm-tint), var(--realm-tint-2));
+  color: var(--ymir-bg-0);
+  font-family: var(--ymir-font-mono);
+  font-weight: 700;
+  font-size: 12px;
+}
+
+/* ============================================================
+   STAGE
+   ============================================================ */
+.stage {
+  grid-area: stage;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--ymir-space-5) var(--ymir-space-5) var(--ymir-space-6);
+}
+
+.stage-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--ymir-space-4);
+  margin-bottom: var(--ymir-space-4);
+}
+.stage-title {
+  font-size: clamp(22px, 2.4vw, 32px);
+  line-height: 1.1;
+}
+.stage-deck {
+  font-family: var(--ymir-font-mono);
+  font-size: 12px;
+  color: var(--ymir-text-2);
+  margin-top: 6px;
+  letter-spacing: 0.02em;
+}
+
+/* ============================================================
+   BOTTOM STREAM (Ratatoskr + Runes)
+   ============================================================ */
+.stream {
+  grid-area: stream;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: linear-gradient(180deg, var(--ymir-bg-1), var(--ymir-bg-0));
+  border-top: 1px solid var(--ymir-steel-1);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ymir-chisel) 6%, transparent);
+  position: relative;
+}
+
+/* --- Drag handle: raise the stream, or sink it --------------- */
+.stream-resizer {
+  position: absolute;
+  top: -5px;
+  left: 0;
+  right: 0;
+  height: 10px;
+  cursor: ns-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 5;
+  touch-action: none;
+}
+.stream-resizer .grip {
+  width: 52px;
+  height: 4px;
+  border-radius: 3px;
+  background: var(--ymir-steel-2);
+  transition: width var(--ymir-dur-fast) var(--ymir-ease),
+    background var(--ymir-dur-fast) var(--ymir-ease);
+}
+.stream-resizer:hover .grip,
+.stream-resizer:focus-visible .grip,
+body:has(.stream-resizer:active) .stream-resizer .grip {
+  width: 84px;
+  background: var(--ymir-chisel);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--ymir-chisel) 60%, transparent);
+}
+.stream-resizer:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.stream-head {
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-3);
+  height: 34px;
+  padding: 0 var(--ymir-space-5);
+  border-bottom: 1px solid var(--ymir-steel-1);
+  flex-shrink: 0;
+}
+.stream-title {
+  font-family: var(--ymir-font-head);
+  font-size: 13px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ymir-text-1);
+}
+.stream-tabs {
+  display: flex;
+  gap: 2px;
+}
+.stream-tab {
+  font-family: var(--ymir-font-mono);
+  font-size: 11px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  color: var(--ymir-text-2);
+  border: 1px solid transparent;
+}
+.stream-tab[aria-pressed='true'] {
+  color: var(--realm-tint);
+  background: var(--realm-tint-dim);
+}
+
+.live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ymir-ok);
+  box-shadow: 0 0 0 0 var(--ymir-ok);
+  animation: pulse 2s infinite;
+}
+.live-dot.paused {
+  background: var(--ymir-warn);
+  animation: none;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ymir-ok) 50%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ymir-ok) 0%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ymir-ok) 0%, transparent);
+  }
+}
+
+.stream-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px var(--ymir-space-5);
+  font-family: var(--ymir-font-mono);
+  font-size: 12px;
+}
+.stream-line {
+  display: grid;
+  grid-template-columns: 74px 132px 1fr auto;
+  gap: var(--ymir-space-3);
+  padding: 3px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--ymir-steel-2) 35%, transparent);
+  align-items: baseline;
+}
+.stream-line .ts {
+  color: var(--ymir-text-3);
+}
+.stream-line .actor {
+  color: var(--ymir-text-1);
+}
+.stream-line .actor .to {
+  color: var(--ymir-text-3);
+}
+.stream-line .msg {
+  color: var(--ymir-text-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stream-line .kind {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.kind.ratatoskr {
+  color: var(--ymir-violet-1);
+}
+.kind.rune {
+  color: var(--ymir-cyan-1);
+}
+
+/* ============================================================
+   Responsive: collapse rail to rune-only under 900px
+   ============================================================ */
+@media (max-width: 900px) {
+  .shell {
+    --rail-w: 64px;
+  }
+  .wordmark,
+  .gate-label,
+  .gate-count,
+  .realm-opt span.label,
+  .rail-node span {
+    display: none;
+  }
+  .brand {
+    justify-content: center;
+    padding: 0;
+  }
+  .gate {
+    justify-content: center;
+    padding: 10px 0;
+  }
+  .rail-foot {
+    align-items: center;
+  }
+  .realm-opt {
+    justify-content: center;
+  }
+}
+
+/* --- Topbar workspace switcher (single tenant) --------------------------- */
+.ws-switch {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ws-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--ymir-steel-1);
+  background: var(--ymir-bg-2);
+  color: var(--ymir-text-1);
+  font-size: 12px;
+  cursor: pointer;
+}
+.ws-chip:hover {
+  color: var(--ymir-text-0);
+  border-color: var(--ymir-chisel);
+}
+.ws-chip.on {
+  background: var(--realm-tint-dim);
+  border-color: var(--realm-tint);
+  color: var(--ymir-text-0);
+}
+.ws-chip.add {
+  padding: 5px 9px;
+  color: var(--ymir-text-2);
+}
+.ws-chip .house-glyph {
+  color: var(--realm-tint);
+}
+
+/* Keep the header stat chip visible; never let it shrink off the bar. */
+.trace-chip {
+  flex-shrink: 0;
+}
+.topbar .search {
+  min-width: 280px;
+}