diff mrjunejune/src/jrpg/jrpg.css @ 261:b401627fc49e

Add JRPG mock flows and interactive previews Add scripted mock SSE commands, custom event forwarding, animated chat turns, full-height message navigation, and a cyberpunk resume dossier. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <mrjunejune@users.noreply.github.com>
date Wed, 05 Aug 2026 20:38:32 -0700
parents 1f9877b637e9
children 0f45474c1b1a
line wrap: on
line diff
--- a/mrjunejune/src/jrpg/jrpg.css	Wed Aug 05 09:19:41 2026 -0700
+++ b/mrjunejune/src/jrpg/jrpg.css	Wed Aug 05 20:38:32 2026 -0700
@@ -177,7 +177,6 @@
   border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
 }
 
-.jrpg-panel-heading span,
 .jrpg-preview-kicker,
 .jrpg-menu-label,
 .jrpg-brand > p,
@@ -194,14 +193,18 @@
   font-size: var(--zenbu-sys-font-size-lg);
 }
 
-zen-message-scroller,
-.jrpg-message-viewport {
+zen-message-scroller {
   display: block;
+  overflow: hidden;
   min-height: 0;
   height: 100%;
 }
 
-.jrpg-message-viewport {
+zen-message-scroller > .jrpg-message-viewport {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
   overflow-anchor: none;
   overscroll-behavior: contain;
@@ -224,6 +227,10 @@
   border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent);
 }
 
+.jrpg-message[hidden] {
+  display: none;
+}
+
 .jrpg-message[data-speaker="June"] {
   border-left-color: var(--mjj-jrpg-info);
 }
@@ -236,16 +243,75 @@
 .jrpg-message p {
   margin: 0;
   color: var(--mjj-jrpg-text);
+  white-space: pre-wrap;
+}
+
+.jrpg-message[data-streaming="true"] p::after {
+  display: inline-block;
+  width: 0.65em;
+  height: 1em;
+  margin-left: var(--zenbu-sys-space-icon-label);
+  background: currentColor;
+  content: "";
+  vertical-align: -0.12em;
+  animation: mjj-jrpg-cursor
+    calc(var(--zenbu-sys-motion-duration-layout) * 2)
+    steps(1, end)
+    infinite;
+}
+
+@keyframes mjj-jrpg-cursor {
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .jrpg-message[data-streaming="true"] p::after {
+    animation: none;
+  }
 }
 
-.jrpg-next {
-  display: flex;
+.jrpg-turn-navigation {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  justify-content: end;
   gap: var(--zenbu-sys-space-icon-label);
-  margin: 0;
+  padding-top: var(--zenbu-sys-padding-sm);
+  border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
+}
+
+.jrpg-turn-navigation zen-button,
+.jrpg-turn-navigation button {
+  width: 100%;
+}
+
+.jrpg-turn-navigation button {
+  justify-content: center;
+  border: var(--zenbu-sys-stroke-width) solid transparent;
+  border-radius: 0;
+  background: transparent;
   color: var(--mjj-jrpg-primary);
   font-size: var(--zenbu-sys-font-size-xs);
+  cursor: pointer;
+}
+
+.jrpg-turn-navigation button:hover:not(:disabled) {
+  border-color: var(--mjj-jrpg-primary);
+  background: var(--mjj-jrpg-surface-raised);
+}
+
+.jrpg-turn-navigation button:disabled {
+  color: var(--mjj-jrpg-text-muted);
+  cursor: not-allowed;
+  opacity: var(--zenbu-sys-opacity-disabled);
+}
+
+.jrpg-turn-navigation [data-turn-position] {
+  justify-self: center;
+  color: var(--mjj-jrpg-text-muted);
+  font-size: var(--zenbu-sys-font-size-xs);
+  letter-spacing: 0.08em;
 }
 
 .jrpg-utility {
@@ -299,7 +365,7 @@
 
 .jrpg-preview-panel {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
   gap: var(--zenbu-sys-space-group);
   height: 100%;
   padding: var(--zenbu-sys-padding-lg);
@@ -327,6 +393,40 @@
   color: var(--mjj-jrpg-text);
 }
 
+.jrpg-work-showcase {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-content: start;
+  gap: var(--zenbu-sys-space-control);
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.jrpg-work-showcase a {
+  display: grid;
+  gap: var(--zenbu-sys-space-icon-label);
+  height: 100%;
+  padding: var(--zenbu-sys-padding-sm);
+  border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
+  background: var(--mjj-jrpg-panel);
+  color: var(--mjj-jrpg-primary);
+  text-decoration: none;
+}
+
+.jrpg-work-showcase a:hover,
+.jrpg-work-showcase a:focus-visible {
+  border-color: var(--mjj-jrpg-accent);
+  background: var(--mjj-jrpg-surface-raised);
+}
+
+.jrpg-work-showcase small {
+  color: var(--mjj-jrpg-text-muted);
+  font-size: var(--zenbu-sys-font-size-xs);
+}
+
 .jrpg-preview-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -434,9 +534,133 @@
   margin-bottom: var(--zenbu-sys-space-content);
 }
 
+.jrpg-preview-dialog dialog.jrpg-resume-dialog {
+  width: min(94vw, 72rem);
+  max-height: calc(100dvh - var(--zenbu-sys-space-container));
+  overflow: hidden;
+}
+
+.jrpg-preview-dialog dialog.jrpg-resume-dialog[open] {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  gap: var(--zenbu-sys-space-group);
+}
+
+.jrpg-resume-dossier {
+  min-height: 0;
+  padding: var(--zenbu-sys-padding-lg);
+  overflow: auto;
+  border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
+  background: var(--mjj-jrpg-surface-sunken);
+  scrollbar-color: var(--mjj-jrpg-frame) transparent;
+}
+
+.jrpg-resume-dossier[hidden],
+[data-dialog-copy][hidden],
+[data-resume-status][hidden],
+[data-resume-download][hidden] {
+  display: none;
+}
+
+.jrpg-resume-dossier [data-resume-status] {
+  margin: 0;
+  color: var(--mjj-jrpg-highlight);
+}
+
+.jrpg-resume-dossier [data-resume-content] {
+  display: grid;
+  gap: var(--zenbu-sys-space-group);
+  color: var(--mjj-jrpg-text);
+}
+
+.jrpg-resume-dossier :where(p, ul) {
+  margin-block: 0;
+}
+
+.jrpg-resume-dossier .info {
+  display: grid;
+  gap: var(--zenbu-sys-space-control);
+  padding: var(--zenbu-sys-padding-lg);
+  border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-primary);
+  background: var(--mjj-jrpg-panel);
+}
+
+.jrpg-resume-dossier .info > p {
+  color: var(--mjj-jrpg-primary);
+  font-size: var(--zenbu-sys-font-size-xl);
+}
+
+.jrpg-resume-dossier .header-address-style,
+.jrpg-resume-dossier .header-social-style {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zenbu-sys-space-control);
+  color: var(--mjj-jrpg-text-muted);
+}
+
+.jrpg-resume-dossier .sub-header {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--zenbu-sys-space-control);
+  margin-top: var(--zenbu-sys-space-content);
+}
+
+.jrpg-resume-dossier .sub-header h2 {
+  margin: 0;
+  color: var(--mjj-jrpg-highlight);
+  font-size: var(--zenbu-sys-font-size-lg);
+  text-transform: uppercase;
+}
+
+.jrpg-resume-dossier .sub-header .line {
+  height: var(--zenbu-sys-stroke-width-emphasis);
+  background: var(--mjj-jrpg-accent);
+}
+
+.jrpg-resume-dossier .flex-box {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--zenbu-sys-space-control);
+  padding-top: var(--zenbu-sys-padding-sm);
+  border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
+}
+
+.jrpg-resume-dossier .entry-title-style,
+.jrpg-resume-dossier .entry-position-style {
+  color: var(--mjj-jrpg-primary);
+}
+
+.jrpg-resume-dossier .entry-location-style,
+.jrpg-resume-dossier .entry-date-style,
+.jrpg-resume-dossier .skill-type-style {
+  color: var(--mjj-jrpg-text-muted);
+  text-align: right;
+}
+
+.jrpg-resume-dossier .description-style {
+  display: grid;
+  gap: var(--zenbu-sys-space-control);
+  padding-left: var(--zenbu-sys-padding-xl);
+}
+
+.jrpg-resume-dossier a {
+  color: var(--mjj-jrpg-primary);
+  text-decoration-color: var(--mjj-jrpg-accent);
+  text-underline-offset: var(--zenbu-sys-space-icon-label);
+}
+
+.jrpg-dialog-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--zenbu-sys-space-control);
+}
+
 mjj-jrpg-composer {
   grid-area: composer;
   display: block;
+  min-height: 0;
   padding: var(--zenbu-sys-padding-md);
   background: var(--mjj-jrpg-surface);
 }
@@ -444,26 +668,42 @@
 .jrpg-composer {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: minmax(0, 1fr) auto;
   gap: var(--zenbu-sys-space-control);
+  height: 100%;
+  min-height: 0;
 }
 
-.jrpg-composer zen-field {
+.jrpg-composer zen-field[appearance="plain"] {
   display: grid;
+  grid-column: 1;
+  grid-row: 1;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: var(--zenbu-sys-space-icon-label);
+  min-height: 0;
 }
 
 .jrpg-composer label,
 .jrpg-composer-hint {
   grid-column: 1 / -1;
+  grid-row: 2;
   color: var(--mjj-jrpg-text-muted);
   font-size: var(--zenbu-sys-font-size-xs);
 }
 
+.jrpg-composer zen-field label {
+  grid-column: 1;
+  grid-row: 1;
+}
+
 .jrpg-composer textarea {
   box-sizing: border-box;
+  grid-column: 1;
+  grid-row: 2;
   width: 100%;
+  height: 100%;
   min-height: calc(var(--zenbu-control-height) * 2);
-  resize: vertical;
+  resize: none;
   padding:
     var(--zenbu-control-padding-block)
     var(--zenbu-control-padding-inline);
@@ -483,11 +723,25 @@
   outline-offset: var(--zenbu-sys-focus-offset);
 }
 
+.jrpg-composer-actions {
+  display: flex;
+  grid-column: 2;
+  grid-row: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: var(--zenbu-sys-space-control);
+}
+
 .jrpg-composer zen-button {
-  align-self: end;
+  width: 100%;
+}
+
+.jrpg-composer zen-button[hidden] {
+  display: none;
 }
 
 .jrpg-composer zen-button > button {
+  width: 100%;
   border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
   border-radius: 0;
   background: var(--mjj-jrpg-primary);
@@ -655,10 +909,39 @@
 
   .jrpg-composer {
     grid-template-columns: 1fr;
+    grid-template-rows:
+      minmax(calc(var(--zenbu-control-height) * 3), 1fr)
+      auto
+      auto;
+  }
+
+  .jrpg-composer-actions {
+    grid-column: 1;
+    grid-row: 2;
+    flex-direction: row;
+  }
+
+  .jrpg-composer-hint {
+    grid-row: 3;
   }
 
-  .jrpg-composer zen-button {
-    width: 100%;
+  .jrpg-composer-actions zen-button {
+    flex: 1;
+  }
+
+  .jrpg-work-showcase,
+  .jrpg-dialog-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .jrpg-resume-dossier .flex-box {
+    display: grid;
+  }
+
+  .jrpg-resume-dossier .entry-location-style,
+  .jrpg-resume-dossier .entry-date-style,
+  .jrpg-resume-dossier .skill-type-style {
+    text-align: left;
   }
 
   .jrpg-composer zen-button > button {