@troyio/vite-file-router 0.4.1 → 0.6.0

package/devtools/style.css

@@ -1,31 +1,32 @@
 :root {
   color-scheme: light;
-  --bg: #f7f8fa;
+  --bg: #f5f5f5;
   --surface: #ffffff;
-  --surface-2: #f2f4f7;
-  --border: #e4e7ec;
-  --border-strong: #d0d5dd;
-  --text: #101828;
-  --text-2: #475467;
-  --text-3: #667085;
-  --accent: #6d4aff;
-  --accent-soft: #f0ecff;
-  --accent-text: #5b36f2;
-  --success: #12b76a;
-  --success-soft: #e7f8ef;
-  --success-text: #067647;
-  --warning: #f79009;
-  --warning-soft: #fef4e6;
-  --warning-text: #b54708;
-  --danger: #f04438;
-  --danger-soft: #fef0ef;
-  --danger-text: #b42318;
-  --info-soft: #eaf2ff;
-  --info-text: #1858c7;
-  --match: rgba(109, 74, 255, 0.08);
-  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-  --ring: 0 0 0 3px rgba(109, 74, 255, 0.22);
-  --radius: 10px;
+  --surface-2: #f0f0f0;
+  --border: #e3e3e3;
+  --border-strong: #c8c8c8;
+  --text: #171717;
+  --text-2: #4a4a4a;
+  --text-3: #737373;
+  --accent: #171717;
+  --accent-contrast: #ffffff;
+  --accent-soft: #ebebeb;
+  --accent-text: #171717;
+  --success: #3f9a62;
+  --success-soft: #f0f0f0;
+  --success-text: #4a4a4a;
+  --warning: #b7791f;
+  --warning-soft: #f0f0f0;
+  --warning-text: #8a5a14;
+  --danger: #c2413a;
+  --danger-soft: #f0f0f0;
+  --danger-text: #a3342e;
+  --info-soft: #f0f0f0;
+  --info-text: #4a4a4a;
+  --match: #f0f0f0;
+  --shadow: none;
+  --ring: 0 0 0 2px #a3a3a3;
+  --radius: 0;
   --mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
 
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
@@ -41,31 +42,32 @@
 @media (prefers-color-scheme: dark) {
   :root {
     color-scheme: dark;
-    --bg: #0b0c10;
-    --surface: #121318;
-    --surface-2: #1a1b22;
-    --border: #23252e;
-    --border-strong: #30333f;
-    --text: #ecedf2;
-    --text-2: #b4b7c3;
-    --text-3: #868a99;
-    --accent: #8b6dff;
-    --accent-soft: rgba(139, 109, 255, 0.14);
-    --accent-text: #b9a6ff;
-    --success: #32d583;
-    --success-soft: rgba(50, 213, 131, 0.12);
-    --success-text: #6ce9a6;
-    --warning: #fdb022;
-    --warning-soft: rgba(253, 176, 34, 0.12);
-    --warning-text: #fec84b;
-    --danger: #f97066;
-    --danger-soft: rgba(249, 112, 102, 0.12);
-    --danger-text: #fda29b;
-    --info-soft: rgba(83, 151, 255, 0.14);
-    --info-text: #84adff;
-    --match: rgba(139, 109, 255, 0.12);
+    --bg: #111111;
+    --surface: #171717;
+    --surface-2: #212121;
+    --border: #2a2a2a;
+    --border-strong: #3d3d3d;
+    --text: #ededed;
+    --text-2: #b5b5b5;
+    --text-3: #8a8a8a;
+    --accent: #ededed;
+    --accent-contrast: #111111;
+    --accent-soft: #2a2a2a;
+    --accent-text: #ededed;
+    --success: #5cb87e;
+    --success-soft: #212121;
+    --success-text: #b5b5b5;
+    --warning: #d9a441;
+    --warning-soft: #212121;
+    --warning-text: #d9a441;
+    --danger: #e0716a;
+    --danger-soft: #212121;
+    --danger-text: #e0857f;
+    --info-soft: #212121;
+    --info-text: #b5b5b5;
+    --match: #212121;
     --shadow: none;
-    --ring: 0 0 0 3px rgba(139, 109, 255, 0.3);
+    --ring: 0 0 0 2px #6b6b6b;
   }
 }
 
@@ -132,9 +134,9 @@ input {
   place-items: center;
   width: 30px;
   height: 30px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, var(--accent), #b06dff);
-  color: #fff;
+  border-radius: 0;
+  background: var(--accent);
+  color: var(--accent-contrast);
 }
 
 h1 {
@@ -162,7 +164,7 @@ h1 {
   gap: 5px;
   padding: 4px 9px;
   border: 1px solid var(--border);
-  border-radius: 999px;
+  border-radius: 0;
   background: var(--surface);
 }
 
@@ -190,7 +192,7 @@ h1 {
   align-items: center;
   gap: 7px;
   padding: 4px 10px;
-  border-radius: 999px;
+  border-radius: 0;
   background: var(--surface-2);
   color: var(--text-2);
   font-size: 12px;
@@ -260,7 +262,7 @@ h1 {
   gap: 6px;
   height: 32px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 0;
   background: var(--surface);
   color: var(--text-2);
   cursor: pointer;
@@ -292,7 +294,7 @@ h1 {
   padding: 0 14px;
   border-color: transparent;
   background: var(--accent);
-  color: #fff;
+  color: var(--accent-contrast);
   font-weight: 600;
 }
 
@@ -313,7 +315,7 @@ h1 {
   height: 32px;
   padding: 0 10px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 0;
   background: var(--surface);
   transition: border-color 120ms, box-shadow 120ms;
 }
@@ -323,7 +325,7 @@ h1 {
 }
 
 .field input:focus {
-  border-color: var(--accent);
+  border-color: var(--border-strong);
   outline: none;
   box-shadow: var(--ring);
 }
@@ -348,11 +350,16 @@ h1 {
 
 .alert,
 .conflicts {
-  margin: 16px 20px 0;
+  margin: 0;
   padding: 12px 14px;
-  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
-  border-radius: var(--radius);
-  background: var(--danger-soft);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  background: var(--surface);
+  color: var(--text);
+}
+
+.alert,
+.conflicts h2 {
   color: var(--danger-text);
 }
 
@@ -382,7 +389,7 @@ h1 {
   grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
   gap: 16px;
   align-items: start;
-  padding: 16px 20px 24px;
+  padding: 0;
 }
 
 @media (max-width: 860px) {
@@ -411,7 +418,7 @@ h1 {
 .panel {
   min-width: 0;
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: 0;
   background: var(--surface);
   box-shadow: var(--shadow);
 }
@@ -471,7 +478,7 @@ h1 {
   gap: 6px;
   min-height: 30px;
   padding: 3px 8px 3px 4px;
-  border-radius: 7px;
+  border-radius: 0;
   cursor: pointer;
   user-select: none;
 }
@@ -485,7 +492,6 @@ h1 {
 }
 
 .row.matched {
-  box-shadow: inset 2px 0 0 var(--accent);
   background: var(--match);
 }
 
@@ -500,7 +506,7 @@ h1 {
   height: 18px;
   padding: 0;
   border: 0;
-  border-radius: 4px;
+  border-radius: 0;
   background: none;
   color: var(--text-3);
   cursor: pointer;
@@ -541,11 +547,13 @@ h1 {
 }
 
 .segment .param {
-  color: var(--info-text);
+  color: var(--text);
+  font-weight: 650;
 }
 
 .segment .optional {
-  color: var(--warning-text);
+  color: var(--text-2);
+  font-style: italic;
 }
 
 .segment .group {
@@ -574,7 +582,7 @@ h1 {
   align-items: center;
   height: 20px;
   padding: 0 7px;
-  border-radius: 999px;
+  border-radius: 0;
   background: var(--surface-2);
   color: var(--text-2);
   font-size: 11px;
@@ -582,10 +590,11 @@ h1 {
   white-space: nowrap;
 }
 
-.chip-page { background: var(--accent-soft); color: var(--accent-text); }
+.chip-page { background: var(--surface-2); color: var(--text); }
 .chip-layout { background: var(--info-soft); color: var(--info-text); }
 .chip-loader,
-.chip-action { background: var(--success-soft); color: var(--success-text); }
+.chip-action,
+.chip-middleware { background: var(--success-soft); color: var(--success-text); }
 .chip-loading { background: var(--warning-soft); color: var(--warning-text); }
 .chip-error,
 .chip-notFound { background: var(--danger-soft); color: var(--danger-text); }
@@ -598,8 +607,8 @@ h1 {
 }
 
 mark {
-  border-radius: 3px;
-  background: color-mix(in srgb, var(--warning) 30%, transparent);
+  border-radius: 0;
+  background: var(--accent-soft);
   color: inherit;
 }
 
@@ -651,13 +660,13 @@ mark {
 .crumb {
   padding: 2px 7px;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 0;
   background: var(--surface-2);
   cursor: pointer;
 }
 
 .crumb:hover {
-  border-color: var(--accent);
+  border-color: var(--border-strong);
 }
 
 .crumb-sep {
@@ -702,7 +711,7 @@ mark {
   display: inline-flex;
   overflow: hidden;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 0;
   font-family: var(--mono);
   font-size: 12px;
 }
@@ -713,7 +722,7 @@ mark {
 
 .param-pill span:first-child {
   background: var(--surface-2);
-  color: var(--info-text);
+  color: var(--text-2);
 }
 
 .param-pill .missing {
@@ -729,7 +738,7 @@ mark {
   min-width: 0;
   padding: 6px 8px;
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: 0;
   background: var(--surface);
   color: var(--text);
   font-family: var(--mono);
@@ -757,8 +766,8 @@ mark {
 }
 
 .file-link:hover {
-  border-color: var(--accent);
-  background: var(--accent-soft);
+  border-color: var(--border-strong);
+  background: var(--surface-2);
 }
 
 .file-link:hover svg,
@@ -767,7 +776,7 @@ mark {
 }
 
 .file-link.opened {
-  border-color: var(--success);
+  background: var(--surface-2);
 }
 
 .muted {
@@ -806,11 +815,10 @@ mark {
   left: 50%;
   z-index: 3;
   padding: 8px 14px;
-  border-radius: 8px;
+  border-radius: 0;
   background: var(--text);
   color: var(--bg);
   font-size: 12px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
   transform: translateX(-50%);
   animation: toast-in 160ms ease;
 }
@@ -867,7 +875,6 @@ mark {
   flex: none;
   border-radius: 50%;
   background: var(--success);
-  box-shadow: 0 0 0 3px var(--success-soft);
 }
 
 .current-empty {
@@ -886,7 +893,7 @@ mark {
   height: 24px;
   padding: 0 8px;
   border: 1px solid var(--border);
-  border-radius: 999px;
+  border-radius: 0;
   background: var(--surface);
   color: var(--text-2);
   font-size: 11.5px;
@@ -894,7 +901,7 @@ mark {
 }
 
 .tab-picker button[aria-pressed="true"] {
-  border-color: var(--success);
+  border-color: var(--border-strong);
   background: var(--success-soft);
   color: var(--success-text);
 }
@@ -910,69 +917,6 @@ mark {
   vertical-align: middle;
 }
 
-.row.current {
-  box-shadow: inset 2px 0 0 var(--success);
-}
-
-.row.current.matched {
-  box-shadow: inset 2px 0 0 var(--success), inset 4px 0 0 var(--accent);
-}
-
-/* Tabs */
-
-.tabs {
-  display: flex;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-
-.tab {
-  display: inline-flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 30px;
-  border: 0;
-  border-radius: 7px;
-  background: none;
-  color: var(--text-2);
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.tab:hover {
-  color: var(--text);
-}
-
-.tab[aria-selected="true"] {
-  background: var(--accent-soft);
-  color: var(--accent-text);
-}
-
-.tab-count {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 999px;
-  background: var(--accent);
-  color: #fff;
-  font-size: 10.5px;
-  line-height: 18px;
-  font-variant-numeric: tabular-nums;
-}
-
-.view {
-  display: grid;
-  gap: 16px;
-}
-
-.view[hidden] {
-  display: none;
-}
 
 .text-button {
   width: auto;
@@ -993,7 +937,7 @@ mark {
   display: flex;
   gap: 2px;
   padding: 2px;
-  border-radius: 8px;
+  border-radius: 0;
   background: var(--surface-2);
 }
 
@@ -1001,7 +945,7 @@ mark {
   flex: 1;
   height: 26px;
   border: 0;
-  border-radius: 6px;
+  border-radius: 0;
   background: none;
   color: var(--text-2);
   font-size: 12px;
@@ -1012,7 +956,6 @@ mark {
 .segmented button[aria-pressed="true"] {
   background: var(--surface);
   color: var(--text);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
 }
 
 .timeline {
@@ -1032,7 +975,7 @@ mark {
 }
 
 .call {
-  border-radius: 8px;
+  border-radius: 0;
 }
 
 .call + .call {
@@ -1047,7 +990,7 @@ mark {
   width: 100%;
   padding: 8px 10px;
   border: 0;
-  border-radius: 8px;
+  border-radius: 0;
   background: none;
   color: inherit;
   text-align: left;
@@ -1113,7 +1056,7 @@ mark {
   padding: 8px 10px;
   overflow: auto;
   border: 1px solid var(--border);
-  border-radius: 7px;
+  border-radius: 0;
   background: var(--surface-2);
   font-family: var(--mono);
   font-size: 11.5px;
@@ -1134,3 +1077,634 @@ mark {
 .call-summary::-webkit-details-marker {
   display: none;
 }
+
+/* Missing-file warnings */
+
+.warnings {
+  margin: 0;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.warnings > details > summary {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.warnings > details > summary::-webkit-details-marker {
+  display: none;
+}
+
+.warnings > details > summary::before {
+  content: "▸";
+  color: var(--text-3);
+}
+
+.warnings > details[open] > summary::before {
+  content: "▾";
+}
+
+.warnings h2 {
+  font-size: 13px;
+}
+
+.warnings .warning-list {
+  padding: 0 14px 12px;
+}
+
+.warning-list {
+  display: grid;
+  gap: 8px;
+  margin: 0 0 12px;
+  padding: 0;
+  list-style: none;
+}
+
+.warning {
+  display: grid;
+  gap: 6px;
+  padding: 10px 12px;
+  background: var(--surface-2);
+}
+
+.warning p {
+  color: var(--text-2);
+}
+
+.warning-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.warning-route {
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.chip-warn {
+  background: var(--surface-2);
+  color: var(--warning-text);
+  font-weight: 650;
+}
+
+.chip-hint {
+  color: var(--text-3);
+}
+
+.warning .chip-warn {
+  background: var(--surface);
+}
+
+/* Per-route call stats */
+
+.data-stats {
+  display: grid;
+  gap: 6px;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+
+.data-stats h3 {
+  margin: 0;
+  color: var(--text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.stat-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 10px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-type {
+  min-width: 76px;
+  font-weight: 600;
+}
+
+.stat-row .slow {
+  color: var(--warning-text);
+  font-weight: 600;
+}
+
+.error-text {
+  color: var(--danger-text);
+}
+
+/* Timeline route filter */
+
+.route-pill {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 4px 4px 10px;
+  background: var(--surface-2);
+  font-size: 12px;
+}
+
+.route-pill strong {
+  font-family: var(--mono);
+  font-weight: 600;
+}
+
+.route-pill button {
+  width: 24px;
+  height: 24px;
+  border: 0;
+  background: none;
+  color: var(--text-3);
+  cursor: pointer;
+}
+
+.route-pill button:hover {
+  color: var(--text);
+}
+
+/* Call inspector */
+
+.call-data {
+  display: grid;
+  gap: 6px;
+}
+
+.call-data-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  font-size: 11.5px;
+}
+
+.json {
+  max-height: 320px;
+  padding: 8px 10px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  line-height: 1.6;
+}
+
+.json-node > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.json-node > summary::-webkit-details-marker {
+  display: none;
+}
+
+.json-node > summary::before {
+  content: "▸ ";
+  color: var(--text-3);
+}
+
+.json-node[open] > summary::before {
+  content: "▾ ";
+}
+
+.json-children {
+  padding-left: 14px;
+}
+
+.json-row {
+  padding-left: 12px;
+  overflow-wrap: anywhere;
+}
+
+.json-key {
+  color: var(--text-2);
+}
+
+.json-string {
+  color: var(--text);
+}
+
+.json-number,
+.json-boolean,
+.json-null {
+  color: var(--text-2);
+  font-weight: 600;
+}
+
+.json-preview {
+  color: var(--text-3);
+}
+
+.pairs {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--mono);
+  font-size: 11.5px;
+}
+
+.pairs th,
+.pairs td {
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  text-align: left;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+
+.pairs th {
+  width: 35%;
+  background: var(--surface-2);
+  color: var(--text-2);
+  font-weight: 500;
+}
+
+.call-headers > summary {
+  color: var(--text-2);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.call-headers[open] > summary {
+  margin-bottom: 6px;
+}
+
+.call-error {
+  display: grid;
+  gap: 6px;
+  color: var(--danger-text);
+}
+
+.call-stack {
+  color: var(--text-2);
+}
+
+/* Open in app */
+
+.button-quiet {
+  justify-self: start;
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 12px;
+}
+
+.button-quiet:hover {
+  filter: none;
+  background: var(--surface-2);
+}
+
+.button-quiet svg {
+  width: 14px;
+  height: 14px;
+}
+
+.open-form {
+  display: grid;
+  gap: 8px;
+}
+
+.param-field {
+  display: grid;
+  gap: 3px;
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.param-field input {
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.param-field input:focus {
+  border-color: var(--border-strong);
+  outline: none;
+}
+
+.form-error {
+  color: var(--danger-text);
+  font-size: 12px;
+}
+
+.row-open {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-2);
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.row:hover .row-open,
+.row[aria-selected="true"] .row-open,
+.row-open:focus-visible {
+  visibility: visible;
+}
+
+.row-open:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.row-open svg {
+  width: 13px;
+  height: 13px;
+}
+
+.result-open {
+  margin-left: auto;
+}
+
+/* Pages and navigation */
+
+.alert {
+  margin: 16px 20px 0;
+}
+
+.app {
+  display: grid;
+  grid-template-columns: 184px minmax(0, 1fr);
+  align-items: start;
+  min-height: calc(100vh - 57px);
+}
+
+.page-nav {
+  position: sticky;
+  top: 57px;
+  display: grid;
+  align-content: start;
+  gap: 2px;
+  padding: 16px 10px;
+  border-right: 1px solid var(--border);
+  min-height: calc(100vh - 57px);
+}
+
+.page-nav a {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 34px;
+  padding: 0 10px;
+  color: var(--text-2);
+  font-weight: 550;
+  text-decoration: none;
+}
+
+.page-nav a:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+
+.page-nav a[aria-current="page"] {
+  background: var(--accent-soft);
+  color: var(--text);
+  font-weight: 650;
+}
+
+.page-nav svg {
+  color: var(--text-3);
+}
+
+.page-nav a[aria-current="page"] svg {
+  color: var(--text);
+}
+
+.nav-count {
+  min-width: 18px;
+  height: 18px;
+  margin-left: auto;
+  padding: 0 5px;
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-size: 10.5px;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+#warning-count {
+  background: var(--surface-2);
+  color: var(--warning-text);
+  font-weight: 650;
+}
+
+.page {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  padding: 16px 20px 24px;
+  align-content: start;
+}
+
+@media (max-width: 860px) {
+  .app {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .page-nav {
+    position: static;
+    display: flex;
+    gap: 2px;
+    min-height: 0;
+    padding: 6px 12px;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .page-nav a {
+    flex: none;
+  }
+
+  .page {
+    padding: 12px;
+  }
+}
+
+/* Generated code */
+
+.code-layout {
+  display: grid;
+  grid-template-columns: 230px minmax(0, 1fr);
+  border-top: 1px solid var(--border);
+  margin-top: 14px;
+}
+
+.code-modules {
+  display: grid;
+  align-content: start;
+  border-right: 1px solid var(--border);
+}
+
+.code-module {
+  display: grid;
+  gap: 2px;
+  padding: 10px 14px;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.code-module:hover {
+  background: var(--surface-2);
+}
+
+.code-module[aria-selected="true"] {
+  background: var(--accent-soft);
+}
+
+.code-module-name {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.code-module-description {
+  color: var(--text-3);
+  font-size: 11.5px;
+}
+
+.code-view {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px 14px 14px;
+}
+
+.code-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.code-variant {
+  flex: none;
+  width: 220px;
+}
+
+.code-size {
+  margin-left: auto;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.code-note {
+  font-size: 12px;
+}
+
+.code-error {
+  padding: 10px 12px;
+  background: var(--surface-2);
+  color: var(--danger-text);
+  white-space: pre-wrap;
+}
+
+.code {
+  max-height: calc(100vh - 260px);
+  min-height: 200px;
+  margin: 0;
+  overflow: auto;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  counter-reset: line;
+}
+
+.code code {
+  display: block;
+  min-width: max-content;
+  padding: 8px 0;
+}
+
+.code-line {
+  display: block;
+  padding-right: 16px;
+  white-space: pre;
+}
+
+.code-line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 3.5em;
+  margin-right: 14px;
+  padding-right: 10px;
+  border-right: 1px solid var(--border);
+  color: var(--text-3);
+  text-align: right;
+  user-select: none;
+}
+
+.tok-comment {
+  color: var(--text-3);
+  font-style: italic;
+}
+
+.tok-string {
+  color: var(--success);
+}
+
+.tok-keyword {
+  color: var(--text);
+  font-weight: 650;
+}
+
+.tok-number {
+  color: var(--warning-text);
+}
+
+@media (max-width: 860px) {
+  .code-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .code-modules {
+    display: flex;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .code-module {
+    flex: none;
+    border-bottom: 0;
+    border-right: 1px solid var(--border);
+  }
+
+  .code-module-description {
+    display: none;
+  }
+}
+
+@media (max-width: 1080px) and (min-width: 861px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .side {
+    position: static;
+  }
+}