cli-jaw 1.5.0 → 1.6.2

package/public/assets/providers/openai.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"></path></svg>

package/public/assets/providers/opencode.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>

package/public/assets/providers/telegram.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>

package/public/css/chat.css

@@ -10,7 +10,7 @@
     position: relative;
 }
 
-/* CRT noise grain texture */
+/* CRT noise grain texture — dark mode only, disabled in light mode to prevent gray cast */
 .chat-area::after {
     content: '';
     position: absolute;
@@ -22,6 +22,9 @@
     background-repeat: repeat;
     mix-blend-mode: overlay;
 }
+[data-theme="light"] .chat-area::after {
+    display: none;
+}
 
 /* ── Theme Toggle Switch (Pill) ── */
 .theme-switch {
@@ -74,7 +77,7 @@
 
 .theme-switch.is-light .theme-switch-knob::after {
     box-shadow: none;
-    background: color-mix(in srgb, var(--warning) 80%, #fff);
+    background: color-mix(in oklch, var(--warning) 80%, #fff);
     width: 4px;
     height: 4px;
     top: 6px;
@@ -97,6 +100,17 @@
     animation: revealUp 0.35s var(--ease-out-expo) 0.15s both;
 }
 
+#headerCli {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+#headerCli svg {
+    width: 1.1em;
+    height: 1.1em;
+    flex-shrink: 0;
+}
+
 .chat-messages {
     flex: 1;
     overflow-y: auto;
@@ -111,49 +125,17 @@
     will-change: scroll-position;
 }
 
-/* Depth fade gradients — messages scroll beneath these */
-.chat-messages::before {
-    content: '';
-    position: sticky;
-    top: 0;
-    display: block;
-    height: 40px;
-    margin-bottom: -40px;
-    background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
-    pointer-events: none;
-    z-index: 10;
-    flex-shrink: 0;
-}
-
-.chat-messages::after {
-    content: '';
-    position: sticky;
-    bottom: 0;
-    display: block;
-    height: 30px;
-    margin-top: -30px;
-    background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
-    pointer-events: none;
-    z-index: 10;
-    flex-shrink: 0;
-}
-
-/* Hide fades when chat is empty */
-.chat-messages:not(:has(.msg))::before,
-.chat-messages:not(:has(.msg))::after {
-    display: none;
-}
+/* Depth fade gradients removed — caused visible white bars on scroll in light mode */
 
 /* ── Message Bubbles ── */
 .msg {
     padding: var(--space-3) var(--space-4);
     border-radius: var(--radius-lg);
     font-size: var(--text-base);
-    line-height: 1.3;
+    line-height: 1.75;
     max-width: 85%;
     word-wrap: break-word;
     overflow-wrap: break-word;
-    white-space: pre-wrap;
     position: relative;
     transition: box-shadow var(--duration-base);
     contain: layout style;
@@ -176,10 +158,11 @@
 }
 
 .msg-user {
-    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+    background: color-mix(in oklch, var(--accent) 10%, var(--surface));
     align-self: flex-end;
-    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
+    border: 1px solid color-mix(in oklch, var(--accent) 18%, var(--border));
     border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
+    white-space: pre-wrap;
     max-width: 75%;
     animation: msgEnterUser 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -259,7 +242,7 @@
 .msg-user:hover::after { opacity: 0.3; }
 
 .msg-user:hover {
-    box-shadow: 0 2px 12px color-mix(in srgb, var(--bg) 85%, transparent);
+    box-shadow: 0 2px 12px color-mix(in oklch, var(--bg) 85%, transparent);
 }
 
 .msg-agent:hover { box-shadow: none; }
@@ -357,7 +340,7 @@
     display: inline-block;
     width: 3px;
     height: 1.1em;
-    background: color-mix(in srgb, var(--accent) 40%, transparent);
+    background: color-mix(in oklch, var(--accent) 40%, transparent);
     border-radius: 2px;
     margin-left: 2px;
     vertical-align: text-bottom;
@@ -390,7 +373,7 @@
     font-size: 48px;
     font-family: var(--font-display);
     color: var(--accent);
-    text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
+    text-shadow: 0 0 20px color-mix(in oklch, var(--accent) 30%, transparent);
 }
 
 .empty-title {
@@ -421,7 +404,7 @@
     background: linear-gradient(
         90deg,
         var(--border) 0%,
-        color-mix(in srgb, var(--accent) 15%, var(--border)) 40%,
+        color-mix(in oklch, var(--accent) 15%, var(--border)) 40%,
         var(--border) 80%
     );
     background-size: 300% 100%;
@@ -480,8 +463,8 @@
     outline: none;
     border-color: var(--accent);
     box-shadow:
-        0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
-        0 0 20px color-mix(in srgb, var(--accent) 8%, transparent);
+        0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent),
+        0 0 20px color-mix(in oklch, var(--accent) 8%, transparent);
 }
 
 .chat-input:disabled {
@@ -509,14 +492,14 @@
 .btn-send:hover {
     transform: translateY(-2px);
     box-shadow:
-        0 4px 20px color-mix(in srgb, var(--accent) 45%, transparent),
-        0 0 40px color-mix(in srgb, var(--accent) 15%, transparent);
+        0 4px 20px color-mix(in oklch, var(--accent) 45%, transparent),
+        0 0 40px color-mix(in oklch, var(--accent) 15%, transparent);
     filter: brightness(1.15);
 }
 
 .btn-send:active {
     transform: scale(0.95);
-    box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 50%, transparent);
+    box-shadow: 0 0 30px color-mix(in oklch, var(--accent) 50%, transparent);
     filter: brightness(1.3);
 }
 
@@ -673,6 +656,14 @@
     color: var(--text);
     transition: all 0.2s;
     flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-voice svg {
+    width: 20px;
+    height: 20px;
 }
 
 .btn-voice:hover {
@@ -687,8 +678,8 @@
 }
 
 @keyframes pulse-recording {
-    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--error) 40%, transparent); }
-    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--error) 0%, transparent); }
+    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--error) 40%, transparent); }
+    50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--error) 0%, transparent); }
 }
 
 .voice-timer {
@@ -715,7 +706,7 @@
 }
 
 .btn-voice-cancel:hover {
-    background: color-mix(in srgb, var(--error) 30%, transparent);
+    background: color-mix(in oklch, var(--error) 30%, transparent);
 }
 
 /* ── Slash Command Dropdown ── */
@@ -754,7 +745,7 @@
 
 .cmd-item:hover,
 .cmd-item.selected {
-    background: color-mix(in srgb, var(--accent) 10%, transparent);
+    background: color-mix(in oklch, var(--accent) 10%, transparent);
 }
 
 .cmd-item.selected {
@@ -841,6 +832,24 @@
     }
 }
 
+/* ── Shimmer streaming bar (alternative to dot bounce) ── */
+.streaming-shimmer {
+    height: 3px;
+    border-radius: 2px;
+    background: linear-gradient(90deg, transparent, var(--accent), transparent);
+    background-size: 200% 100%;
+    animation: streaming-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes streaming-shimmer {
+    0%   { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+}
+
+.status-badge {
+    transition: background-color var(--duration-base) ease, scale 150ms ease;
+}
+
 .status-badge.status-running {
     animation: none;
 }
@@ -859,4 +868,23 @@
 .status-badge.status-idle {
     animation: none;
     opacity: 0.7;
+}
+
+/* ── View Transitions (same-document panel switching) ── */
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation-duration: 200ms;
+}
+
+/* ── Scroll-driven fade-in (progressive enhancement) ── */
+@supports (animation-timeline: view()) {
+    .msg {
+        animation: scroll-fade-in linear both;
+        animation-timeline: view();
+        animation-range: entry 0% entry 30%;
+    }
+    @keyframes scroll-fade-in {
+        from { opacity: 0; transform: translateY(12px); }
+        to   { opacity: 1; transform: translateY(0); }
+    }
 }

package/public/css/diagram.css

@@ -0,0 +1,348 @@
+/* public/css/diagram.css — Diagram visualization design system */
+
+/* ── Diagram Containers ── */
+.diagram-container {
+  position: relative;
+  margin: 1rem 0;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.diagram-svg {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: var(--space-4);
+}
+
+.diagram-svg svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 680px;
+}
+
+.diagram-widget {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.diagram-widget iframe {
+  display: block;
+  width: 100%;
+  min-height: 60px;
+  border: none;
+}
+
+/* ── Loading & Error ── */
+.diagram-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.diagram-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: diagram-spin 0.8s linear infinite;
+}
+
+@keyframes diagram-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .diagram-spinner { animation: none; }
+}
+
+.diagram-error {
+  padding: var(--space-4);
+  color: var(--text-dim);
+  font-size: 14px;
+  text-align: center;
+}
+
+.diagram-widget-pending {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+}
+
+/* ── Zoom Button ── */
+.diagram-zoom-btn {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast);
+  z-index: 2;
+}
+
+.diagram-container:hover .diagram-zoom-btn,
+.diagram-container:focus-within .diagram-zoom-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.diagram-zoom-btn:hover {
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* ── Action Buttons (Copy / Save) ── */
+.diagram-copy-btn,
+.diagram-save-btn {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast), color var(--duration-fast);
+  z-index: 2;
+}
+
+/* Widget: copy rightmost, save left of copy */
+.diagram-widget .diagram-save-btn { right: calc(var(--space-2) + 36px); }
+
+/* SVG: zoom rightmost, copy middle, save leftmost */
+.diagram-svg .diagram-copy-btn { right: calc(var(--space-2) + 36px); }
+.diagram-svg .diagram-save-btn { right: calc(var(--space-2) + 72px); }
+
+.diagram-container:hover .diagram-copy-btn,
+.diagram-container:hover .diagram-save-btn,
+.diagram-container:focus-within .diagram-copy-btn,
+.diagram-container:focus-within .diagram-save-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.diagram-copy-btn:hover,
+.diagram-save-btn:hover {
+  background: var(--bg);
+  color: var(--text);
+}
+
+.diagram-copy-btn.copied,
+.diagram-save-btn.copied {
+  color: var(--success);
+}
+
+/* ── Zoom Overlay ── */
+.diagram-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+
+.diagram-overlay-content {
+  min-width: min(680px, 90vw);
+  max-width: 95vw;
+  max-height: 90vh;
+  overflow: auto;
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.diagram-overlay-content svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 1200px;
+}
+
+.diagram-overlay-close {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  color: var(--text);
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.diagram-overlay-close:hover {
+  background: var(--bg);
+}
+
+/* ═══════════════════════════════════════════
+   COLOR RAMPS — 9 semantic colors
+   Dark = default (:root), Light = [data-theme="light"]
+   Each ramp: fill (background), stroke (border), text (label)
+   ═══════════════════════════════════════════ */
+
+/* ── Blue (Primary) ── */
+.c-blue-fill   { fill: #1e3a5f; }
+.c-blue-stroke { stroke: #3b82f6; fill: none; }
+.c-blue-text   { fill: #93c5fd; }
+.c-blue-bg     { fill: #1e3a5f; stroke: #3b82f6; stroke-width: 1; }
+
+/* ── Purple ── */
+.c-purple-fill   { fill: #3b1f5e; }
+.c-purple-stroke { stroke: #8b5cf6; fill: none; }
+.c-purple-text   { fill: #c4b5fd; }
+.c-purple-bg     { fill: #3b1f5e; stroke: #8b5cf6; stroke-width: 1; }
+
+/* ── Green ── */
+.c-green-fill   { fill: #14532d; }
+.c-green-stroke { stroke: #22c55e; fill: none; }
+.c-green-text   { fill: #86efac; }
+.c-green-bg     { fill: #14532d; stroke: #22c55e; stroke-width: 1; }
+
+/* ── Amber ── */
+.c-amber-fill   { fill: #451a03; }
+.c-amber-stroke { stroke: #f59e0b; fill: none; }
+.c-amber-text   { fill: #fcd34d; }
+.c-amber-bg     { fill: #451a03; stroke: #f59e0b; stroke-width: 1; }
+
+/* ── Red ── */
+.c-red-fill   { fill: #450a0a; }
+.c-red-stroke { stroke: #ef4444; fill: none; }
+.c-red-text   { fill: #fca5a5; }
+.c-red-bg     { fill: #450a0a; stroke: #ef4444; stroke-width: 1; }
+
+/* ── Cyan ── */
+.c-cyan-fill   { fill: #083344; }
+.c-cyan-stroke { stroke: #06b6d4; fill: none; }
+.c-cyan-text   { fill: #67e8f9; }
+.c-cyan-bg     { fill: #083344; stroke: #06b6d4; stroke-width: 1; }
+
+/* ── Pink ── */
+.c-pink-fill   { fill: #500724; }
+.c-pink-stroke { stroke: #ec4899; fill: none; }
+.c-pink-text   { fill: #f9a8d4; }
+.c-pink-bg     { fill: #500724; stroke: #ec4899; stroke-width: 1; }
+
+/* ── Slate (Neutral) ── */
+.c-slate-fill   { fill: #1e293b; }
+.c-slate-stroke { stroke: #64748b; fill: none; }
+.c-slate-text   { fill: #94a3b8; }
+.c-slate-bg     { fill: #1e293b; stroke: #64748b; stroke-width: 1; }
+
+/* ── Orange ── */
+.c-orange-fill   { fill: #431407; }
+.c-orange-stroke { stroke: #f97316; fill: none; }
+.c-orange-text   { fill: #fdba74; }
+.c-orange-bg     { fill: #431407; stroke: #f97316; stroke-width: 1; }
+
+/* ── SVG Primitives (scoped to .diagram-svg to avoid Mermaid class collision) ── */
+.diagram-svg .node {
+  rx: 8;
+  ry: 8;
+}
+
+.diagram-svg .connector {
+  stroke: var(--border);
+  stroke-width: 1.5;
+  fill: none;
+}
+
+.diagram-svg .label {
+  font-size: 14px;
+  text-anchor: middle;
+  dominant-baseline: central;
+}
+
+.diagram-svg .diagram-title {
+  font-size: 16px;
+  font-weight: 600;
+  text-anchor: middle;
+}
+
+/* ═══════════════════════════════════════════
+   LIGHT MODE OVERRIDES
+   ═══════════════════════════════════════════ */
+
+[data-theme="light"] .c-blue-fill   { fill: #dbeafe; }
+[data-theme="light"] .c-blue-stroke { stroke: #2563eb; }
+[data-theme="light"] .c-blue-text   { fill: #1e40af; }
+[data-theme="light"] .c-blue-bg     { fill: #dbeafe; stroke: #2563eb; }
+
+[data-theme="light"] .c-purple-fill   { fill: #ede9fe; }
+[data-theme="light"] .c-purple-stroke { stroke: #7c3aed; }
+[data-theme="light"] .c-purple-text   { fill: #5b21b6; }
+[data-theme="light"] .c-purple-bg     { fill: #ede9fe; stroke: #7c3aed; }
+
+[data-theme="light"] .c-green-fill   { fill: #dcfce7; }
+[data-theme="light"] .c-green-stroke { stroke: #16a34a; }
+[data-theme="light"] .c-green-text   { fill: #15803d; }
+[data-theme="light"] .c-green-bg     { fill: #dcfce7; stroke: #16a34a; }
+
+[data-theme="light"] .c-amber-fill   { fill: #fef3c7; }
+[data-theme="light"] .c-amber-stroke { stroke: #d97706; }
+[data-theme="light"] .c-amber-text   { fill: #92400e; }
+[data-theme="light"] .c-amber-bg     { fill: #fef3c7; stroke: #d97706; }
+
+[data-theme="light"] .c-red-fill   { fill: #fee2e2; }
+[data-theme="light"] .c-red-stroke { stroke: #dc2626; }
+[data-theme="light"] .c-red-text   { fill: #991b1b; }
+[data-theme="light"] .c-red-bg     { fill: #fee2e2; stroke: #dc2626; }
+
+[data-theme="light"] .c-cyan-fill   { fill: #cffafe; }
+[data-theme="light"] .c-cyan-stroke { stroke: #0891b2; }
+[data-theme="light"] .c-cyan-text   { fill: #155e75; }
+[data-theme="light"] .c-cyan-bg     { fill: #cffafe; stroke: #0891b2; }
+
+[data-theme="light"] .c-pink-fill   { fill: #fce7f3; }
+[data-theme="light"] .c-pink-stroke { stroke: #db2777; }
+[data-theme="light"] .c-pink-text   { fill: #9d174d; }
+[data-theme="light"] .c-pink-bg     { fill: #fce7f3; stroke: #db2777; }
+
+[data-theme="light"] .c-slate-fill   { fill: #f1f5f9; }
+[data-theme="light"] .c-slate-stroke { stroke: #475569; }
+[data-theme="light"] .c-slate-text   { fill: #334155; }
+[data-theme="light"] .c-slate-bg     { fill: #f1f5f9; stroke: #475569; }
+
+[data-theme="light"] .c-orange-fill   { fill: #ffedd5; }
+[data-theme="light"] .c-orange-stroke { stroke: #ea580c; }
+[data-theme="light"] .c-orange-text   { fill: #9a3412; }
+[data-theme="light"] .c-orange-bg     { fill: #ffedd5; stroke: #ea580c; }
+
+[data-theme="light"] .diagram-svg .connector {
+  stroke: var(--border);
+}