@emeryld/rrroutes-contract 2.2.7 → 2.2.8

package/dist/index.mjs

@@ -422,6 +422,7 @@ var CSS_STYLES = `:root {
   --bg-card: rgba(15, 23, 42, 0.6);
   --bg-card-hover: rgba(30, 41, 59, 0.7);
   --bg-glass: rgba(15, 23, 42, 0.90);
+  --bg-panel: #0f172a;
   --border-subtle: rgba(148, 163, 184, 0.2);
 
   --text-main: #f8fafc;
@@ -430,6 +431,8 @@ var CSS_STYLES = `:root {
 
   --accent-primary: #a855f7;
   --accent-glow: rgba(168, 85, 247, 0.25);
+  --accent-success: #4ade80;
+  --accent-error: #f87171;
 
   /* Method Colors */
   --method-get: #4ade80; --method-get-bg: rgba(34, 197, 94, 0.15);
@@ -440,29 +443,27 @@ var CSS_STYLES = `:root {
 
   --radius-card: 12px;
   --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
+  --shadow-panel: -5px 0 30px rgba(0,0,0,0.5);
 
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
   /* Tag Pastel Palette */
-  --tag-0-bg: rgba(254, 202, 202, 0.2); --tag-0-fg: #fca5a5; /* Red */
-  --tag-1-bg: rgba(253, 230, 138, 0.2); --tag-1-fg: #fcd34d; /* Amber */
-  --tag-2-bg: rgba(187, 247, 208, 0.2); --tag-2-fg: #86efac; /* Green */
-  --tag-3-bg: rgba(165, 243, 252, 0.2); --tag-3-fg: #67e8f9; /* Cyan */
-  --tag-4-bg: rgba(191, 219, 254, 0.2); --tag-4-fg: #93c5fd; /* Blue */
-  --tag-5-bg: rgba(233, 213, 255, 0.2); --tag-5-fg: #d8b4fe; /* Purple */
-  --tag-6-bg: rgba(251, 207, 232, 0.2); --tag-6-fg: #f9a8d4; /* Pink */
+  --tag-0-bg: rgba(254, 202, 202, 0.2); --tag-0-fg: #fca5a5;
+  --tag-1-bg: rgba(253, 230, 138, 0.2); --tag-1-fg: #fcd34d;
+  --tag-2-bg: rgba(187, 247, 208, 0.2); --tag-2-fg: #86efac;
+  --tag-3-bg: rgba(165, 243, 252, 0.2); --tag-3-fg: #67e8f9;
+  --tag-4-bg: rgba(191, 219, 254, 0.2); --tag-4-fg: #93c5fd;
+  --tag-5-bg: rgba(233, 213, 255, 0.2); --tag-5-fg: #d8b4fe;
+  --tag-6-bg: rgba(251, 207, 232, 0.2); --tag-6-fg: #f9a8d4;
 }
 
 * { box-sizing: border-box; }
 
 html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
+  height: 100%; margin: 0; padding: 0;
   background-color: var(--bg-root);
   color: var(--text-main);
   font-family: system-ui, -apple-system, sans-serif;
-  -webkit-font-smoothing: antialiased;
 }
 
 body {
@@ -473,345 +474,91 @@ body {
 }
 
 .page {
-  min-height: 100vh;
-  padding: 20px 40px 60px;
-  max-width: 1600px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+  min-height: 100vh; padding: 20px 40px 60px; max-width: 1600px;
+  margin: 0 auto; display: flex; flex-direction: column; gap: 24px;
 }
 
-/* --- Header --- */
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--border-subtle);
-}
+/* Header */
+.header { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
 .header-title h1 {
-  font-size: 28px;
-  margin: 0;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  background: linear-gradient(to right, #e2e8f0, #a855f7);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  font-size: 28px; margin: 0; font-weight: 700; letter-spacing: -0.02em;
+  background: linear-gradient(to right, #e2e8f0, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
 }
 
-/* --- Sticky Controls & Overview --- */
+/* Controls */
 .controls-container {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  background: var(--bg-glass);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-card);
-  padding: 12px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  position: sticky; top: 0; z-index: 50;
+  background: var(--bg-glass); backdrop-filter: blur(16px);
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
+  padding: 12px 16px; display: flex; flex-direction: column; gap: 12px;
   box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
 }
-
-.schema-indent {
-  display: inline-block;
-}
-
-.schema-branch {
-  opacity: 0.6;
-  font-family: var(--font-mono);
-  margin-right: 2px;
-}
-
-.schema-meta code {
-  font-family: var(--font-mono);
-  font-size: 11px;
-}
-
-/* Top Row: Filters */
-.filters-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  width: 100%;
-}
-
-/* New Wrapper for Search and Methods */
-.left-column {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  flex-basis: 300px;
-  min-width: 250px;
-}
-
-.search-box {
-  width: 100%;
-  position: relative;
-}
-
-/* Tag Filter Group */
-.filter-group.tag-filters-container {
-  flex: 1;
-  min-width: 200px;
-}
-
-/* Method Filter Group */
-.filter-group.method-filters-container {
-}
-
+.filters-row { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
+.left-column { display: flex; flex-direction: column; gap: 16px; flex-basis: 300px; min-width: 250px; }
+.search-box { width: 100%; position: relative; }
 .search-input {
-  width: 100%;
-  background: rgba(2, 6, 23, 0.6);
-  border: 1px solid var(--border-subtle);
-  color: var(--text-main);
-  padding: 8px 12px 8px 32px;
-  border-radius: 6px;
-  font-size: 13px;
-  transition: all 0.2s;
-}
-.search-input:focus {
-  outline: none;
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 2px var(--accent-glow);
-}
-.search-icon {
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--text-muted);
-  pointer-events: none;
-  font-size: 12px;
+  width: 100%; background: rgba(2, 6, 23, 0.6); border: 1px solid var(--border-subtle);
+  color: var(--text-main); padding: 8px 12px 8px 32px; border-radius: 6px; font-size: 13px;
 }
+.search-input:focus { outline: none; border-color: var(--accent-primary); }
+.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }
+.filter-group { display: flex; flex-direction: column; gap: 6px; }
+.filter-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
+.checkbox-group { display: flex; flex-wrap: wrap; gap: 6px; }
 
-.filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.filter-label {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  font-weight: 700;
-}
-.checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-/* Bottom Row: Group Overview Chips */
-.overview-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border-subtle);
-  align-items: center;
-}
-.overview-label {
-  font-size: 10px;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  font-weight: 700;
-  margin-right: 4px;
-}
-.schema-indent {
-  display: inline-block;
-}
-
-.schema-branch {
-  opacity: 0.6;
-  font-family: var(--font-mono);
-  margin-right: 2px;
-}
-
-/* Chips/Pills */
-.pill-checkbox { cursor: pointer; user-select: none; }
+/* Pills */
 .pill-checkbox input { display: none; }
 .pill-checkbox span {
-  display: inline-block;
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  background: rgba(30, 41, 59, 0.5);
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  transition: all 0.15s;
-}
-.pill-checkbox input:checked + span {
-  background: rgba(168, 85, 247, 0.15);
-  color: var(--accent-primary);
-  border-color: var(--accent-primary);
-}
-
-/* Tag filter pills */
-.tag-filter-pill {
-  display: inline-block;
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  background: rgba(30, 41, 59, 0.5);
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  transition: all 0.15s;
-}
-.pill-checkbox.colored-tag input:checked + .tag-filter-pill {
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 1px var(--accent-glow);
+  display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
+  background: rgba(30, 41, 59, 0.5); color: var(--text-muted); border: 1px solid transparent; cursor: pointer;
 }
+.pill-checkbox input:checked + span { background: rgba(168, 85, 247, 0.15); color: var(--accent-primary); border-color: var(--accent-primary); }
+.pill-checkbox.colored-tag input:checked + .tag-filter-pill { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-glow); }
 
-/* Group Jump Links */
+/* Overview */
+.overview-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); align-items: center; }
+.overview-label { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
 .group-chip {
-  font-size: 11px;
-  text-decoration: none;
-  color: var(--text-accent);
-  background: rgba(168, 85, 247, 0.08);
-  padding: 3px 8px;
-  border-radius: 4px;
-  transition: all 0.2s;
-  border: 1px solid transparent;
-}
-.group-chip:hover {
-  background: rgba(168, 85, 247, 0.2);
-  border-color: var(--accent-primary);
-  color: #fff;
+  font-size: 11px; text-decoration: none; color: var(--text-accent); background: rgba(168, 85, 247, 0.08);
+  padding: 3px 8px; border-radius: 4px; border: 1px solid transparent;
 }
+.group-chip:hover { background: rgba(168, 85, 247, 0.2); border-color: var(--accent-primary); color: #fff; }
 
-/* --- Main Content --- */
+/* Endpoint Cards */
 .api-group { margin-bottom: 40px; scroll-margin-top: 180px; }
-.group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-.group-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-main);
-  margin: 0;
-}
+.group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
+.group-title { font-size: 20px; font-weight: 600; margin: 0; padding-bottom: 8px; }
 .group-actions button {
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-  color: var(--text-muted);
-  font-size: 11px;
-  padding: 4px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-left: 8px;
-  transition: all 0.2s;
-}
-.group-actions button:hover {
-  color: var(--text-main);
-  background: rgba(255,255,255,0.05);
+  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted);
+  font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; margin-left: 8px;
 }
-
-.cards-list { display: flex; flex-direction: column; gap: 12px; }
-
-/* --- Endpoint Card --- */
 .endpoint-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-card);
-  overflow: hidden;
-  transition: all 0.2s ease;
-  cursor: pointer;
-  backdrop-filter: blur(10px);
-}
-.endpoint-card:hover {
-  background: var(--bg-card-hover);
-  border-color: rgba(148, 163, 184, 0.4);
-  box-shadow: var(--shadow-card);
-}
-.endpoint-card[data-expanded="true"] {
-  background: rgba(30, 41, 59, 0.6);
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 1px var(--accent-glow), var(--shadow-card);
-}
-
-/* Card Header */
-.card-header {
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
+  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
+  overflow: hidden; transition: all 0.2s ease; margin-bottom: 12px;
 }
+.endpoint-card:hover { border-color: rgba(148, 163, 184, 0.4); box-shadow: var(--shadow-card); }
+.card-header { padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; }
+.header-spacer { flex: 1; }
+.card-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border-subtle); margin-top: 4px; }
+.endpoint-card[data-expanded="true"] .card-body { display: block; animation: slideDown 0.2s ease-out; }
+.endpoint-card[data-expanded="true"] .expand-icon { transform: rotate(180deg); color: var(--text-main); }
+@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
 
-/* Item 1: Method */
-.method-badge {
-  font-size: 11px;
-  font-weight: 800;
-  text-transform: uppercase;
-  padding: 4px 8px;
-  border-radius: 4px;
-  min-width: 55px;
-  text-align: center;
-  letter-spacing: 0.05em;
-  flex-shrink: 0;
-}
+/* Method Badges */
+.method-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; min-width: 55px; text-align: center; }
 .m-GET { background: var(--method-get-bg); color: var(--method-get); border: 1px solid rgba(74, 222, 128, 0.3); }
 .m-POST { background: var(--method-post-bg); color: var(--method-post); border: 1px solid rgba(96, 165, 250, 0.3); }
 .m-PUT { background: var(--method-put-bg); color: var(--method-put); border: 1px solid rgba(250, 204, 21, 0.3); }
 .m-PATCH { background: var(--method-patch-bg); color: var(--method-patch); border: 1px solid rgba(45, 212, 191, 0.3); }
 .m-DELETE { background: var(--method-delete-bg); color: var(--method-delete); border: 1px solid rgba(248, 113, 113, 0.3); }
 
-/* Item 2: Path */
-.path-container {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  color: var(--text-main);
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 4px;
-  transition: background 0.2s;
-}
-.path-container:hover {
-  background: rgba(255,255,255,0.05);
-}
-.path-text {
-  font-weight: 500;
-}
-.copy-icon {
-  opacity: 0;
-  color: var(--text-muted);
-  font-size: 10px;
-  transition: opacity 0.2s;
-}
+.path-container { font-family: var(--font-mono); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 4px; }
+.path-container:hover { background: rgba(255,255,255,0.05); }
+.copy-icon { opacity: 0; font-size: 10px; }
 .path-container:hover .copy-icon { opacity: 1; }
-
-/* Item 3: Tags */
-.tags-container {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-.status-badge {
-  font-size: 9px;
-  text-transform: uppercase;
-  padding: 2px 6px;
-  border-radius: 3px;
-  border: 1px solid transparent;
-  font-weight: 600;
-  letter-spacing: 0.03em;
-}
-/* Tag Colors mapped via JS classes */
+.tags-container { display: flex; gap: 6px; }
+.status-badge { font-size: 9px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
+/* Tag colors */
 .tag-0 { background: var(--tag-0-bg); color: var(--tag-0-fg); border-color: var(--tag-0-fg); }
 .tag-1 { background: var(--tag-1-bg); color: var(--tag-1-fg); border-color: var(--tag-1-fg); }
 .tag-2 { background: var(--tag-2-bg); color: var(--tag-2-fg); border-color: var(--tag-2-fg); }
@@ -819,651 +566,784 @@ body {
 .tag-4 { background: var(--tag-4-bg); color: var(--tag-4-fg); border-color: var(--tag-4-fg); }
 .tag-5 { background: var(--tag-5-bg); color: var(--tag-5-fg); border-color: var(--tag-5-fg); }
 .tag-6 { background: var(--tag-6-bg); color: var(--tag-6-fg); border-color: var(--tag-6-fg); }
-
 .not-implemented { border-color: var(--method-delete); color: var(--method-delete); background: var(--method-delete-bg); }
 
-/* Spacer to push expand icon to right */
-.header-spacer { flex: 1; }
-
-.expand-icon {
-  color: var(--text-muted);
-  transition: transform 0.3s ease;
-  font-size: 10px;
-  margin-left: 8px;
-}
-.endpoint-card[data-expanded="true"] .expand-icon {
-  transform: rotate(180deg);
-  color: var(--text-main);
-}
-
-/* Card Body */
-.card-body {
-  display: none;
-  padding: 0 16px 16px;
-  border-top: 1px solid var(--border-subtle);
-  margin-top: 4px;
-  cursor: default;
-}
-.endpoint-card[data-expanded="true"] .card-body {
-  display: block;
-  animation: slideDown 0.2s ease-out;
-}
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-5px); }
-  to { opacity: 1; transform: translateY(0); }
+/* Use Endpoint Button */
+.btn-try-it {
+  background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.4);
+  color: var(--text-accent); font-size: 11px; font-weight: 600; padding: 4px 12px;
+  border-radius: 12px; cursor: pointer; transition: all 0.2s; margin-right: 12px;
+  display: flex; align-items: center; gap: 6px;
 }
+.btn-try-it:hover { background: rgba(168, 85, 247, 0.25); color: #fff; box-shadow: 0 0 10px var(--accent-glow); }
+.btn-try-it .play-icon { font-size: 10px; }
 
+/* Section Titles */
 .section-block { margin-top: 18px; }
-.section-title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-muted);
-  margin-bottom: 8px;
-  border-bottom: 1px solid var(--border-subtle);
-  padding-bottom: 4px;
-}
-.summary-text { font-size: 14px; color: var(--text-main); line-height: 1.5; }
+.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; }
 
-.description-text {
-  font-size: 12px;
-  opacity: 0.7;
-}
-
-/* Tables */
+/* Tables & Schema */
 .schema-table { width: 100%; border-collapse: collapse; font-size: 12px; }
-.schema-table th {
-  text-align: left; color: var(--text-muted); font-weight: 600;
-  padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); background: rgba(0,0,0,0.2);
-}
-.schema-table td {
-  padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--text-muted);
-}
-.col-name { font-family: var(--font-mono); color: var(--text-accent) !important; width: 20%; }
+.schema-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); background: rgba(0,0,0,0.2); }
+.schema-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--text-muted); }
+.col-name { font-family: var(--font-mono); color: var(--text-accent) !important; width: 25%; }
 .col-type { font-family: var(--font-mono); color: #93c5fd !important; width: 15%; }
 .req-badge { font-size: 9px; text-transform: uppercase; padding: 2px 4px; border-radius: 2px; }
 .req-true { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
 .req-false { color: #94a3b8; background: rgba(148, 163, 184, 0.1); }
-
-.schema-subtitle {
-  font-size: 11px;
-  font-weight: 600;
-  margin-bottom: 4px;
-  color: #64748b;
+.schema-toggle {
+  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 10px;
+  padding: 0 4px; margin-right: 4px; width: 16px; text-align: center;
+}
+.schema-toggle:hover { color: var(--text-main); }
+tr[data-hidden="true"] { display: none; }
+
+/* --- Playground Panel --- */
+.playground-overlay {
+  position: fixed; top: 0; right: 0; bottom: 0; width: 600px; max-width: 90vw;
+  background: var(--bg-panel); border-left: 1px solid var(--border-subtle);
+  box-shadow: var(--shadow-panel); z-index: 100;
+  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex; flex-direction: column;
+}
+.playground-overlay.open { transform: translateX(0); }
+
+.pg-header {
+  padding: 16px; border-bottom: 1px solid var(--border-subtle);
+  display: flex; justify-content: space-between; align-items: center;
+  background: var(--bg-glass);
 }
-
-.empty-message { text-align: center; padding: 40px; color: var(--text-muted); }
+.pg-title { font-size: 16px; font-weight: 700; color: var(--text-main); }
+.pg-close { background: transparent; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; }
+.pg-close:hover { color: var(--text-main); }
+
+.pg-content { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 24px; }
+
+.pg-section { display: flex; flex-direction: column; gap: 8px; }
+.pg-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 0.05em; }
+.pg-input, .pg-textarea {
+  background: rgba(2, 6, 23, 0.4); border: 1px solid var(--border-subtle);
+  color: var(--text-main); padding: 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px;
+}
+.pg-input:focus, .pg-textarea:focus { outline: none; border-color: var(--accent-primary); }
+.pg-textarea { min-height: 150px; resize: vertical; }
+
+/* Param Grid */
+.param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.param-row { display: contents; }
+
+.pg-footer {
+  padding: 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-glass);
+  display: flex; justify-content: flex-end; gap: 12px;
+}
+.btn-send {
+  background: var(--accent-primary); color: white; border: none; padding: 8px 24px;
+  border-radius: 6px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
+}
+.btn-send:hover { opacity: 0.9; }
+.btn-send:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Response View */
+.response-box { background: rgba(0,0,0,0.3); border-radius: 8px; border: 1px solid var(--border-subtle); overflow: hidden; }
+.response-meta {
+  background: rgba(255,255,255,0.05); padding: 8px 12px;
+  display: flex; gap: 12px; font-size: 11px; font-family: var(--font-mono); border-bottom: 1px solid var(--border-subtle);
+}
+.meta-item { display: flex; align-items: center; gap: 4px; }
+.status-ok { color: var(--accent-success); }
+.status-err { color: var(--accent-error); }
+.response-body { padding: 12px; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; }
+
+/* JSON Tree */
+.json-tree { font-family: var(--font-mono); line-height: 1.6; }
+.jt-obj, .jt-arr { margin-left: 14px; }
+.jt-key { color: #93c5fd; margin-right: 4px; }
+.jt-str { color: #86efac; }
+.jt-num { color: #fca5a5; }
+.jt-bool { color: #fcd34d; }
+.jt-null { color: #94a3b8; }
+.jt-toggle {
+  display: inline-block; width: 12px; text-align: center; cursor: pointer; color: var(--text-muted);
+  user-select: none; margin-left: -14px;
+}
+.jt-toggle:hover { color: var(--text-main); }
+.jt-collapsed .jt-content { display: none; }
+.jt-collapsed::after { content: " ... "; color: var(--text-muted); font-size: 10px; }
 `;
 var DOCS_JS = `
 (function() {
   let leaves = [];
+  let activeLeaf = null;
+  let activeRequest = {
+    pathParams: {},
+    queryParams: {},
+    body: ''
+  };
+
+  // --- Initialization ---
   try {
     leaves = JSON.parse(document.getElementById('leaf-data').textContent || '[]');
   } catch(e) { console.error('Failed to parse docs', e); }
 
-  // State
-  const filters = {
-    search: '',
-    methods: new Set(),
-    tags: new Set()
-  };
+  const filters = { search: '', methods: new Set(), tags: new Set() };
 
-  // DOM Elements
+  // Elements
   const elRouteList = document.getElementById('routeList');
   const elOverview = document.getElementById('overviewList');
   const elSearch = document.getElementById('searchInput');
   const elMethodFilters = document.getElementById('methodFilters');
   const elTagFilters = document.getElementById('tagFilters');
 
-  // Constants
-  const PALETTE_SIZE = 7; // matches .tag-0 to .tag-6 CSS
+  // Playground Elements
+  let elPlayground, elPgTitle, elPgContent, elPgClose, elPgSend, elPgMethod, elPgUrlPreview, elPgBaseUrl;
 
-  // Initialization
   function init() {
+    injectPlaygroundHTML();
     populateFilters();
     setupGlobalListeners();
+    setupPlaygroundListeners();
     render();
   }
 
-  // Tag Coloring Logic
-  function getTagColorClass(tagName) {
-    if (tagName === 'not-implemented') return 'not-implemented';
-    let hash = 0;
-    for (let i = 0; i < tagName.length; i++) {
-      hash = tagName.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    const index = Math.abs(hash % PALETTE_SIZE);
-    return 'tag-' + index;
+  function injectPlaygroundHTML() {
+    const div = document.createElement('div');
+    div.className = 'playground-overlay';
+    div.id = 'playgroundPanel';
+    div.innerHTML =
+      '<div class="pg-header">' +
+        '<div class="pg-title"><span id="pgMethod" class="method-badge">GET</span> <span id="pgTitle">Endpoint</span></div>' +
+        '<button class="pg-close" id="pgClose">&times;</button>' +
+      '</div>' +
+      '<div class="pg-content" id="pgContent">' +
+        // Dynamic content goes here
+      '</div>' +
+      '<div class="pg-footer">' +
+        '<button class="btn-send" id="pgSend">Send Request</button>' +
+      '</div>';
+    document.body.appendChild(div);
+
+    elPlayground = document.getElementById('playgroundPanel');
+    elPgTitle = document.getElementById('pgTitle');
+    elPgContent = document.getElementById('pgContent');
+    elPgClose = document.getElementById('pgClose');
+    elPgSend = document.getElementById('pgSend');
+    elPgMethod = document.getElementById('pgMethod');
   }
 
-  // Custom Group Sort: Alpha, but UNGROUPED last
-  function sortGroups(a, b) {
-    const nameA = a.toUpperCase();
-    const nameB = b.toUpperCase();
-    if (nameA === 'UNGROUPED') return 1;
-    if (nameB === 'UNGROUPED') return -1;
-    return nameA.localeCompare(nameB);
-  }
+  // --- Filtering & Rendering ---
 
   function populateFilters() {
     if (!elMethodFilters || !elTagFilters) return;
-
-    // Extract unique values
     const allMethods = new Set(leaves.map(l => (l.method || 'GET').toUpperCase()));
     const allTags = new Set(leaves.flatMap(l => (l.cfg && l.cfg.tags) ? l.cfg.tags : []));
 
-    // Setup Method Checkboxes
     const sortedMethods = Array.from(allMethods).sort();
-    elMethodFilters.innerHTML = sortedMethods.map(m => (
-      '<label class="pill-checkbox">' +
-        '<input type="checkbox" value="' + escapeAttr(m) + '" checked>' +
-        '<span>' + escapeHtml(m) + '</span>' +
-      '</label>'
-    )).join('');
+    elMethodFilters.innerHTML = sortedMethods.map(m =>
+      '<label class="pill-checkbox"><input type="checkbox" value="'+escapeAttr(m)+'" checked><span>'+escapeHtml(m)+'</span></label>'
+    ).join('');
     sortedMethods.forEach(m => filters.methods.add(m));
 
-    // Attach listeners to method checkboxes
-    elMethodFilters.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
-      cb.addEventListener('change', updateFilters);
-    });
-
-    // Setup Tag Checkboxes
     if (allTags.size > 0) {
-      elTagFilters.innerHTML = Array.from(allTags).sort().map(t => {
-        const colorClass = getTagColorClass(t);
-        return (
-          '<label class="pill-checkbox colored-tag">' +
-            '<input type="checkbox" value="' + escapeAttr(t) + '">' +
-            '<span class="tag-filter-pill ' + colorClass + '">' + escapeHtml(t) + '</span>' +
-          '</label>'
-        );
-      }).join('');
-
-      // Attach listeners to tag checkboxes
-      elTagFilters.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
-        cb.addEventListener('change', updateFilters);
-      });
+      elTagFilters.innerHTML = Array.from(allTags).sort().map(t =>
+        '<label class="pill-checkbox colored-tag"><input type="checkbox" value="'+escapeAttr(t)+'"><span class="tag-filter-pill '+getTagColorClass(t)+'">'+escapeHtml(t)+'</span></label>'
+      ).join('');
     }
+
+    document.querySelectorAll('#methodFilters input, #tagFilters input').forEach(cb =>
+      cb.addEventListener('change', updateFilters)
+    );
   }
 
   function updateFilters() {
-    if (elSearch) {
-      filters.search = elSearch.value.toLowerCase();
-    }
-
+    if (elSearch) filters.search = elSearch.value.toLowerCase();
     filters.methods.clear();
-    if (elMethodFilters) {
-      elMethodFilters.querySelectorAll('input[type="checkbox"]:checked').forEach(function(cb) {
-        filters.methods.add(cb.value);
-      });
-    }
-
+    elMethodFilters.querySelectorAll('input:checked').forEach(cb => filters.methods.add(cb.value));
     filters.tags.clear();
-    if (elTagFilters) {
-      elTagFilters.querySelectorAll('input[type="checkbox"]:checked').forEach(function(cb) {
-        filters.tags.add(cb.value);
-      });
-    }
-
+    elTagFilters.querySelectorAll('input:checked').forEach(cb => filters.tags.add(cb.value));
     render();
   }
 
   function setupGlobalListeners() {
-    if (elSearch) {
-      elSearch.addEventListener('input', updateFilters);
-    }
+    if (elSearch) elSearch.addEventListener('input', updateFilters);
+
+    // Event Delegation for Card interactions
+    document.body.addEventListener('click', function(e) {
+      const target = e.target;
+
+      // Try It Button
+      const btnTry = target.closest('.btn-try-it');
+      if (btnTry) {
+        e.preventDefault(); e.stopPropagation();
+        const index = parseInt(btnTry.getAttribute('data-index'), 10);
+        openPlayground(leaves[index]);
+        return;
+      }
+
+      // Expand/Collapse Card
+      const cardHeader = target.closest('.card-header');
+      if (cardHeader) {
+        // Don't toggle if clicked on path (copy) or tags
+        if (target.closest('.path-container') || target.closest('.tags-container')) return;
+        const card = cardHeader.closest('.endpoint-card');
+        const expanded = card.getAttribute('data-expanded') === 'true';
+        card.setAttribute('data-expanded', String(!expanded));
+        return;
+      }
+
+      // Schema Toggles
+      const toggleBtn = target.closest('.schema-toggle');
+      if (toggleBtn) {
+        e.preventDefault(); e.stopPropagation();
+        toggleSchemaRow(toggleBtn);
+        return;
+      }
+
+      // Schema Expand All / Collapse All
+      if (target.matches('.schema-actions button')) {
+        e.preventDefault(); e.stopPropagation();
+        const table = target.closest('.section-block').querySelector('table');
+        const action = target.getAttribute('data-action');
+        toggleAllSchema(table, action === 'expand');
+        return;
+      }
+
+      // Copy Path
+      const pathContainer = target.closest('.path-container');
+      if (pathContainer) {
+        e.preventDefault(); e.stopPropagation();
+        copyText(pathContainer.getAttribute('data-path'));
+        return;
+      }
+
+      // Group Chips
+      if (target.matches('.group-chip')) {
+        e.preventDefault();
+        scrollToGroup(target.getAttribute('data-group'));
+        return;
+      }
+
+      // Group Expand/Collapse
+      if (target.matches('.group-actions button')) {
+        toggleGroup(target.getAttribute('data-group'), target.getAttribute('data-action') === 'expand');
+        return;
+      }
+
+      // JSON Tree Toggles
+      if (target.classList.contains('jt-toggle')) {
+        e.stopPropagation();
+        target.parentElement.classList.toggle('jt-collapsed');
+        target.textContent = target.parentElement.classList.contains('jt-collapsed') ? '\u25B6' : '\u25BC';
+      }
+    });
   }
 
-  // Core Render Logic
   function render() {
     if (!elRouteList || !elOverview) return;
 
-    // 1. Filter Data
-    const filtered = leaves.filter(function(leaf) {
+    const filtered = leaves.map((leaf, idx) => ({ ...leaf, originalIndex: idx })).filter(leaf => {
       const m = (leaf.method || 'GET').toUpperCase();
-      const t = (leaf.cfg && leaf.cfg.tags) ? leaf.cfg.tags : [];
+      const t = (leaf.cfg.tags || []);
       const path = (leaf.path || '').toLowerCase();
-      const summary = (leaf.cfg && leaf.cfg.summary || '').toLowerCase();
+      const summary = (leaf.cfg.summary || '').toLowerCase();
 
       if (!filters.methods.has(m)) return false;
-      if (filters.tags.size > 0 && !t.some(function(tag) { return filters.tags.has(tag); })) return false;
+      if (filters.tags.size > 0 && !t.some(tag => filters.tags.has(tag))) return false;
       if (filters.search && !path.includes(filters.search) && !summary.includes(filters.search)) return false;
-
       return true;
     });
 
     if (filtered.length === 0) {
-      elRouteList.innerHTML = '<div class="empty-message">No endpoints match your filters.</div>';
+      elRouteList.innerHTML = '<div style="text-align:center; padding:40px; color:var(--text-muted)">No endpoints match filters.</div>';
       elOverview.innerHTML = '';
       return;
     }
 
-    // 2. Group Data
     const groups = {};
-    filtered.forEach(function(leaf) {
-      const gName = (leaf.cfg && leaf.cfg.docsGroup) ? leaf.cfg.docsGroup : 'UNGROUPED';
-      if (!groups[gName]) groups[gName] = [];
-      groups[gName].push(leaf);
+    filtered.forEach(leaf => {
+      const g = leaf.cfg.docsGroup || 'UNGROUPED';
+      if (!groups[g]) groups[g] = [];
+      groups[g].push(leaf);
     });
 
-    const sortedGroupNames = Object.keys(groups).sort(sortGroups);
-
-    // 3. Render Overview Chips
-    elOverview.innerHTML = (
-      '<span class="overview-label">JUMP TO:</span>' +
-      sortedGroupNames.map(function(gName) {
-        return (
-          '<a href="#group-' + escapeAttr(gName) + '" ' +
-          'class="group-chip" data-group="' + escapeAttr(gName) + '">' +
-          escapeHtml(gName) +
-          '</a>'
-        );
-      }).join('')
-    );
-
-    // 4. Render Groups & Cards
-    const html = sortedGroupNames.map(function(gName) {
-      const routes = groups[gName];
-      routes.sort(function(a, b) {
-        const pA = a.path || '';
-        const pB = b.path || '';
-        if (pA < pB) return -1;
-        if (pA > pB) return 1;
-        return (a.method || '').localeCompare(b.method || '');
-      });
+    const sortedGroups = Object.keys(groups).sort((a,b) => {
+      if (a === 'UNGROUPED') return 1; if (b === 'UNGROUPED') return -1;
+      return a.localeCompare(b);
+    });
 
-      return (
-        '<div class="api-group" id="group-' + escapeAttr(gName) + '">' +
-          '<div class="group-header">' +
-            '<h2 class="group-title">' + escapeHtml(gName) + '</h2>' +
-            '<div class="group-actions">' +
-              '<button type="button" data-group="' + escapeAttr(gName) + '" data-action="expand">Expand All</button>' +
-              '<button type="button" data-group="' + escapeAttr(gName) + '" data-action="collapse">Collapse All</button>' +
-            '</div>' +
-          '</div>' +
-          '<div class="cards-list">' +
-            routes.map(renderCard).join('') +
-          '</div>' +
-        '</div>'
-      );
+    // Render Overview
+    elOverview.innerHTML = '<span class="overview-label">JUMP TO:</span>' +
+      sortedGroups.map(g => '<a href="#group-'+escapeAttr(g)+'" class="group-chip" data-group="'+escapeAttr(g)+'">'+escapeHtml(g)+'</a>').join('');
+
+    // Render Cards
+    elRouteList.innerHTML = sortedGroups.map(g => {
+      const routes = groups[g].sort((a,b) => (a.path||'').localeCompare(b.path||''));
+      return '<div class="api-group" id="group-'+escapeAttr(g)+'">' +
+        '<div class="group-header"><h2 class="group-title">'+escapeHtml(g)+'</h2>' +
+        '<div class="group-actions"><button data-group="'+escapeAttr(g)+'" data-action="expand">Expand All</button><button data-group="'+escapeAttr(g)+'" data-action="collapse">Collapse All</button></div></div>' +
+        '<div class="cards-list">' + routes.map(renderCard).join('') + '</div></div>';
     }).join('');
-
-    elRouteList.innerHTML = html;
-
-    // Wire up interactions that depend on rendered DOM
-    wireOverviewInteractions();
-    wireCardInteractions();
   }
 
-  // Card Renderer
   function renderCard(leaf) {
-    const method = (leaf.method || 'GET').toUpperCase();
-    const path = leaf.path || '/';
-    const cfg = leaf.cfg || {};
-    const summary = cfg.summary || '';
-    const description = cfg.description || '';
+    const { method, path, cfg, originalIndex } = leaf;
     const tags = cfg.tags || [];
+    const methodUc = (method || 'GET').toUpperCase();
 
-    const tagBadges = tags.map(function(t) {
-      const cClass = getTagColorClass(t);
-      return '<span class="status-badge ' + cClass + '">' + escapeHtml(t) + '</span>';
-    }).join('');
+    const tagBadges = tags.map(t => '<span class="status-badge '+getTagColorClass(t)+'">'+escapeHtml(t)+'</span>').join('');
 
-    const headerHtml =
+    return '<article class="endpoint-card" data-expanded="false">' +
       '<div class="card-header">' +
-        '<span class="method-badge m-' + escapeAttr(method) + '">' + escapeHtml(method) + '</span>' +
-        '<div class="path-container" data-path="' + escapeAttr(path) + '" title="Click to copy path">' +
-          '<span class="path-text">' + escapeHtml(path) + '</span>' +
-          '<span class="copy-icon">\u{1F4CB}</span>' +
-        '</div>' +
-        '<div class="tags-container">' +
-          tagBadges +
-        '</div>' +
+        '<span class="method-badge m-'+escapeAttr(methodUc)+'">'+escapeHtml(methodUc)+'</span>' +
+        '<div class="path-container" data-path="'+escapeAttr(path)+'"><span class="path-text">'+escapeHtml(path)+'</span><span class="copy-icon">\u{1F4CB}</span></div>' +
+        '<div class="tags-container">'+tagBadges+'</div>' +
         '<div class="header-spacer"></div>' +
+        '<button class="btn-try-it" data-index="'+originalIndex+'"><span class="play-icon">\u25B6</span> Use endpoint</button>' +
         '<div class="expand-icon">\u25BC</div>' +
+      '</div>' +
+      '<div class="card-body">' +
+        '<div class="section-block"><div class="summary-text"><strong>'+escapeHtml(cfg.summary||'')+'</strong><br><span class="description-text">'+escapeHtml(cfg.description||'')+'</span></div></div>' +
+        (cfg.paramsSchema || cfg.querySchema ? renderSection('Parameters', cfg.paramsSchema, cfg.querySchema) : '') +
+        (cfg.bodySchema ? renderSection('Request Body ' + (cfg.hasBody?'':'(Optional)'), cfg.bodySchema) : '') +
+        (cfg.outputSchema ? renderSection('Response Schema', cfg.outputSchema) : '') +
+      '</div></article>';
+  }
+
+  function renderSection(title, schema1, schema2) {
+    return '<div class="section-block">' +
+      '<div style="display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--border-subtle); margin-bottom:8px;">' +
+        '<div class="section-title" style="border:none; margin:0;">'+title+'</div>' +
+        '<div class="schema-actions" style="margin-bottom:4px;"><button data-action="expand" style="background:none;border:none;color:var(--text-accent);cursor:pointer;font-size:10px;">Exp All</button> <button data-action="collapse" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:10px;">Col All</button></div>' +
+      '</div>' +
+      (schema1 ? renderSchemaTable(schema1) : '') +
+      (schema2 ? renderSchemaTable(schema2) : '') +
       '</div>';
+  }
 
-    let contentHtml =
-      '<div class="section-block"><div class="summary-text">' +
-        '<strong>' + escapeHtml(summary) + '</strong>' +
-        (description
-          ? '<br><span class="description-text">' + escapeHtml(description) + '</span>'
-          : ''
-        ) +
-      '</div></div>';
+  // --- Schema Table Logic (Flattened with Depth) ---
 
-    if (cfg.paramsSchema || cfg.querySchema) {
-      contentHtml += '<div class="section-block"><div class="section-title">Parameters</div>';
-      if (cfg.paramsSchema) contentHtml += renderSchemaTable(cfg.paramsSchema, 'Path Parameters');
-      if (cfg.querySchema) contentHtml += renderSchemaTable(cfg.querySchema, 'Query Parameters');
-      contentHtml += '</div>';
+  function renderSchemaTable(node) {
+    let rows = '';
+    // Start rendering. Root node usually doesn't need a row unless it's not an object.
+    if (node.kind === 'object' && node.properties) {
+      rows = renderObjectChildren(node, 0);
+    } else {
+      rows = renderNodeRow('(root)', node, 0);
     }
+    return '<table class="schema-table">' +
+      '<tr><th class="col-name">Field</th><th class="col-type">Type</th><th>Req</th><th>Description</th></tr>' +
+      rows + '</table>';
+  }
+
+// Returns HTML string for rows
+  function renderNodeRow(name, node, depth, parentPath) {
+    const hasChildren = isComplexNode(node) && ((node.properties && Object.keys(node.properties).length > 0) || (node.element && isComplexNode(node.element)) || (node.union));
+    const currentPath = (parentPath ? parentPath + '.' : '') + name;
+    const indent = depth * 16;
+
+    // NEW: Collapse by default. Hide deeply nested rows (depth > 0) initially.
+    const isExpanded = false;
+    const isHidden = depth > 0;
+
+    const styleAttr = isHidden ? 'style="display:none"' : '';
+    const rowAttrs = 'data-depth="'+depth+'" data-path="'+escapeAttr(currentPath)+'" '+styleAttr + (hasChildren ? ' data-has-children="true" data-expanded="'+isExpanded+'"' : '');
+
+    const toggleHtml = hasChildren
+      ? '<button class="schema-toggle">' + (isExpanded ? '\u25BC' : '\u25B6') + '</button>'
+      : '<span style="width:20px; display:inline-block;"></span>';
 
-    if (cfg.bodySchema) {
-      contentHtml +=
-        '<div class="section-block">' +
-          '<div class="section-title">Request Body ' + (cfg.hasBody ? '' : '(Optional)') + '</div>' +
-          renderSchemaTable(cfg.bodySchema) +
-        '</div>';
+    const nameCell = '<div style="padding-left:'+indent+'px; display:flex; align-items:center;">' +
+      toggleHtml + '<span style="opacity:0.8">'+escapeHtml(name)+'</span></div>';
+
+    let html = '<tr '+rowAttrs+'>' +
+      '<td class="col-name">' + nameCell + '</td>' +
+      '<td class="col-type">' + escapeHtml(getTypeLabel(node)) + '</td>' +
+      '<td><span class="req-badge '+(node.optional?'req-false':'req-true')+'">'+(node.optional?'OPT':'REQ')+'</span></td>' +
+      '<td>' + renderNodeDescription(node) + '</td>' +
+    '</tr>';
+
+    if (hasChildren) {
+      if (node.kind === 'object' && node.properties) {
+        html += renderObjectChildren(node, depth + 1, currentPath);
+      }
+      else if (node.kind === 'array' && node.element) {
+         // ARRAY FIX: If array element is an object, render its properties directly (removing [item] layer)
+         if (node.element.kind === 'object' && node.element.properties) {
+            html += renderObjectChildren(node.element, depth + 1, currentPath);
+         } else {
+            html += renderNodeRow('[item]', node.element, depth + 1, currentPath);
+         }
+      }
+      else if (node.kind === 'union' && node.union) {
+        node.union.forEach((u, i) => { html += renderNodeRow('OneOf ('+i+')', u, depth + 1, currentPath); });
+      }
     }
+    return html;
+  }
 
-    if (cfg.outputSchema) {
-      contentHtml +=
-        '<div class="section-block">' +
-          '<div class="section-title">Response Schema</div>' +
-          renderSchemaTable(cfg.outputSchema) +
-        '</div>';
+  function renderObjectChildren(node, depth, parentPath) {
+    if (!node.properties) return '';
+    return Object.keys(node.properties).map(key => renderNodeRow(key, node.properties[key], depth, parentPath)).join('');
+  }
+
+  // Schema Toggling Logic (JS)
+  function toggleSchemaRow(btn) {
+    const tr = btn.closest('tr');
+    const wasExpanded = tr.getAttribute('data-expanded') === 'true';
+    const isNowExpanded = !wasExpanded;
+    const currentDepth = parseInt(tr.getAttribute('data-depth'), 10);
+
+    // Update State UI
+    tr.setAttribute('data-expanded', String(isNowExpanded));
+    btn.textContent = isNowExpanded ? '\u25BC' : '\u25B6';
+
+    // Process Siblings
+    let sibling = tr.nextElementSibling;
+    while (sibling) {
+      const sibDepth = parseInt(sibling.getAttribute('data-depth'), 10);
+      // Stop if we hit a row with equal or less depth (next sibling or uncle)
+      if (isNaN(sibDepth) || sibDepth <= currentDepth) break;
+
+      if (isNowExpanded) {
+        // EXPANDING: We only show this child if its immediate parent is also expanded.
+        checkVisibility(sibling);
+      } else {
+        // COLLAPSING: Hide all descendants regardless of their state
+        sibling.style.display = 'none';
+      }
+      sibling = sibling.nextElementSibling;
     }
+  }
 
-    return (
-      '<article class="endpoint-card" data-expanded="false">' +
-        headerHtml +
-        '<div class="card-body">' +
-          contentHtml +
-        '</div>' +
-      '</article>'
-    );
+  function checkVisibility(row) {
+    // Walk up previous siblings to find parent and check its expansion state
+    const myDepth = parseInt(row.getAttribute('data-depth'), 10);
+    let prev = row.previousElementSibling;
+    while (prev) {
+      const pDepth = parseInt(prev.getAttribute('data-depth'), 10);
+      if (pDepth < myDepth) {
+        // Found parent
+        // If parent is expanded AND visible, then I should be visible.
+        if (prev.getAttribute('data-expanded') === 'true' && prev.style.display !== 'none') {
+           row.style.display = '';
+        } else {
+           row.style.display = 'none';
+        }
+        return;
+      }
+      prev = prev.previousElementSibling;
+    }
+    // No parent found (depth 0), always visible
+    row.style.display = '';
   }
 
-// Recursive schema renderer with proper depth-based indentation.
+  function toggleAllSchema(table, expand) {
+    if (!table) return;
+    const rows = table.querySelectorAll('tr[data-has-children="true"]');
+    rows.forEach(row => {
+      row.setAttribute('data-expanded', String(expand));
+      const btn = row.querySelector('.schema-toggle');
+      if(btn) btn.textContent = expand ? '\u25BC' : '\u25B6';
+    });
+    // Update visibility for all rows
+    const allRows = table.querySelectorAll('tr[data-depth]');
+    allRows.forEach(row => {
+      if(parseInt(row.getAttribute('data-depth')) === 0) return;
+      checkVisibility(row);
+    });
+  }
 
-function renderSchemaTable(node, title) {
-  let rows = '';
+  // --- Playground Logic ---
 
-  if (node.kind === 'object' && node.properties) {
-    // Start at depth -1 so first level of properties shows at depth 0
-    rows = renderObjectChildren(node, -1);
-  } else {
-    rows = renderNodeRow('(root)', node, 0);
+  function setupPlaygroundListeners() {
+    if(elPgClose) elPgClose.addEventListener('click', closePlayground);
+    if(elPgSend) elPgSend.addEventListener('click', executeRequest);
   }
 
-  return (
-    (title
-      ? '<div class="schema-subtitle">' + escapeHtml(title) + '</div>'
-      : '') +
-    '<table class="schema-table">' +
-      rows +
-    '</table>'
-  );
-}
+  function closePlayground() {
+    elPlayground.classList.remove('open');
+  }
 
-function renderObjectChildren(node, depth) {
-  if (!node.properties) return '';
+  function openPlayground(leaf) {
+    activeLeaf = leaf;
+    elPgTitle.textContent = leaf.path;
+    elPgMethod.textContent = (leaf.method || 'GET').toUpperCase();
+    elPgMethod.className = 'method-badge m-' + elPgMethod.textContent;
 
-  let rows = '';
-  Object.keys(node.properties).forEach(function (key) {
-    rows += renderNodeRow(key, node.properties[key], depth + 1);
-  });
-  return rows;
-}
+    // Reset request state
+    activeRequest = { pathParams: {}, queryParams: {}, body: '' };
+
+    renderPlaygroundForm(leaf);
+    elPlayground.classList.add('open');
+  }
+
+  function renderPlaygroundForm(leaf) {
+    // 1. Base URL
+    let html = '<div class="pg-section"><div class="pg-label">Base URL</div>' +
+      '<input class="pg-input" id="pgBaseUrl" value="'+window.location.origin+'"></div>';
+
+    // 2. Path Params
+    // Extract :param or {param} from path
+    const pathParamRegex = /[:{]([a-zA-Z0-9_]+)}?/g;
+    const matches = [...leaf.path.matchAll(pathParamRegex)];
+
+    if (matches.length > 0) {
+      html += '<div class="pg-section"><div class="pg-label">Path Variables</div><div class="param-grid">';
+      matches.forEach(m => {
+        const key = m[1];
+        html += '<div class="param-row">' +
+          '<input class="pg-input" placeholder="'+key+'" disabled value="'+key+'" style="opacity:0.7">' +
+          '<input class="pg-input pg-path-input" data-key="'+key+'" placeholder="value">' +
+          '</div>';
+      });
+      html += '</div></div>';
+    }
 
-function renderNodeRow(name, node, depth) {
-  const reqClass = node.optional ? 'req-false' : 'req-true';
-  const reqText = node.optional ? 'OPT' : 'REQ';
+    // 3. Query Params
+    // We check leaf.cfg.querySchema or just provide a generic adder
+    html += '<div class="pg-section"><div class="pg-label">Query Parameters</div>' +
+      '<div class="param-grid" id="pgQueryGrid"></div>' +
+      '<button type="button" id="pgAddQuery" style="font-size:11px;background:none;border:1px dashed var(--border-subtle);color:var(--text-muted);padding:4px;cursor:pointer;">+ Add Parameter</button>' +
+      '</div>';
 
-  const indentPx = depth * 16; // increase this if you want more spacing per level
-  const nameCell =
-    '<span class="schema-indent" style="padding-left:' +
-    indentPx +
-    'px;"></span>' +
-    (depth > 0 ? '<span class="schema-branch">\u2514\u2500 </span>' : '') +
-    escapeHtml(name);
+    // 4. Body
+    if (['POST','PUT','PATCH'].includes((leaf.method||'').toUpperCase())) {
+       html += '<div class="pg-section"><div class="pg-label">Request Body (JSON)</div>' +
+         '<textarea class="pg-textarea" id="pgBodyInput" placeholder="{ ... }"></textarea>' +
+         '</div>';
+    }
 
-  const typeLabel = getTypeLabel(node);
-  const descriptionHtml = renderNodeDescription(node);
+    // 5. Response Container
+    html += '<div class="pg-section" id="pgResponseContainer" style="display:none;">' +
+      '<div class="pg-label">Response</div>' +
+      '<div class="response-box">' +
+        '<div class="response-meta" id="pgResponseMeta"></div>' +
+        '<div class="response-body" id="pgResponseBody"></div>' +
+      '</div></div>';
 
-  let rows =
-    '<tr>' +
-      '<td class="col-name">' + nameCell + '</td>' +
-      '<td class="col-type">' + escapeHtml(typeLabel) + '</td>' +
-      '<td><span class="req-badge ' + reqClass + '">' + reqText + '</span></td>' +
-      '<td>' + descriptionHtml + '</td>' +
-    '</tr>';
+    elPgContent.innerHTML = html;
 
-  // 1) Object properties
-  if (node.kind === 'object' && node.properties) {
-    rows += renderObjectChildren(node, depth);
-  }
+    // Setup listeners for the dynamic form
+    const btnAddQuery = document.getElementById('pgAddQuery');
+    if(btnAddQuery) btnAddQuery.addEventListener('click', () => addQueryRow());
 
-  // 2) Array element type
-  if (node.kind === 'array' && node.element) {
-    const element = node.element;
-    if (isComplexNode(element)) {
-      // element rendered one level deeper than the array itself
-      rows += renderNodeRow('[items]', element, depth + 1);
+    // Pre-fill query rows if schema exists
+    if (leaf.cfg.querySchema && leaf.cfg.querySchema.properties) {
+       Object.keys(leaf.cfg.querySchema.properties).forEach(k => addQueryRow(k));
+    } else {
+      addQueryRow();
     }
   }
 
-  // 3) Union variants
-  if (node.kind === 'union' && Array.isArray(node.union)) {
-    node.union.forEach(function (variant, index) {
-      rows += renderNodeRow('option ' + (index + 1), variant, depth + 1);
-    });
+  function addQueryRow(key = '') {
+    const container = document.getElementById('pgQueryGrid');
+    const div = document.createElement('div');
+    div.className = 'param-row';
+    div.innerHTML = '<input class="pg-input pg-query-key" placeholder="Name" value="'+key+'"><input class="pg-input pg-query-val" placeholder="Value">';
+    container.appendChild(div);
   }
 
-  return rows;
-}
+  // --- Execution ---
 
-/**
- * Decide if a node is \u201Ccomplex\u201D enough to warrant a nested expansion row.
- */
-function isComplexNode(node) {
-  return (
-    node.kind === 'object' ||
-    node.kind === 'array' ||
-    node.kind === 'union' ||
-    node.kind === 'record' ||
-    node.kind === 'tuple'
-  );
-}
+  async function executeRequest() {
+    const btn = document.getElementById('pgSend');
+    const resContainer = document.getElementById('pgResponseContainer');
+    const metaEl = document.getElementById('pgResponseMeta');
+    const bodyEl = document.getElementById('pgResponseBody');
+    const baseUrlInput = document.getElementById('pgBaseUrl');
 
-/**
- * Helper: simple vs complex node, for compact type labels.
- */
-function isSimpleNode(node) {
-  return !isComplexNode(node);
-}
+    btn.disabled = true;
+    btn.textContent = 'Sending...';
+    resContainer.style.display = 'none';
 
-/**
- * Type label shown in the "Type" column.
- */
-function getTypeLabel(node) {
-  let base;
-
-  switch (node.kind) {
-    case 'object':
-      base = 'object';
-      break;
-
-    case 'array':
-      if (!node.element) {
-        base = 'array';
-      } else if (isSimpleNode(node.element)) {
-        base = 'array<' + getTypeLabel(node.element) + '>';
-      } else {
-        base = 'array<object>';
-      }
-      break;
+    try {
+      // Build URL
+      let url = (baseUrlInput.value || window.location.origin).replace(/\\/$/, '') + activeLeaf.path;
 
-    case 'union':
-      if (node.union && node.union.length) {
-        const parts = node.union.map(function (u) {
-          return isSimpleNode(u) ? getTypeLabel(u) : 'object';
-        });
-        base = parts.join(' | ');
-      } else {
-        base = 'union';
+      // Sub Path Params
+      document.querySelectorAll('.pg-path-input').forEach(input => {
+        const k = input.getAttribute('data-key');
+        const v = input.value.trim();
+        url = url.replace(':'+k, v).replace('{'+k+'}', v);
+      });
+
+      // Build Query
+      const queryParts = [];
+      document.querySelectorAll('.pgQueryGrid .param-row, .param-grid .param-row').forEach(row => {
+        const k = row.querySelector('.pg-query-key');
+        const v = row.querySelector('.pg-query-val');
+        if(k && v && k.value.trim()) {
+          queryParts.push(encodeURIComponent(k.value.trim()) + '=' + encodeURIComponent(v.value.trim()));
+        }
+      });
+      if(queryParts.length) url += '?' + queryParts.join('&');
+
+      // Build Body
+      const method = (activeLeaf.method || 'GET').toUpperCase();
+      const headers = {};
+      let body = null;
+
+      const bodyInput = document.getElementById('pgBodyInput');
+      if (bodyInput && bodyInput.value.trim()) {
+        try {
+          // Validate JSON
+          const j = JSON.parse(bodyInput.value);
+          body = JSON.stringify(j);
+          headers['Content-Type'] = 'application/json';
+        } catch(e) {
+          alert('Invalid JSON in request body');
+          btn.disabled = false; btn.textContent = 'Send Request';
+          return;
+        }
       }
-      break;
 
-    case 'literal':
-      base = 'literal';
-      break;
+      const start = performance.now();
+      const res = await fetch(url, { method, headers, body });
+      const time = (performance.now() - start).toFixed(0);
 
-    case 'enum':
-      base = 'enum';
-      break;
+      // Read response
+      const status = res.status;
+      const statusText = res.statusText;
+      let resData;
+      const contentType = res.headers.get('content-type') || '';
 
-    case 'record':
-      base = 'record';
-      break;
+      if (contentType.includes('application/json')) {
+        resData = await res.json();
+      } else {
+        resData = await res.text();
+      }
 
-    case 'tuple':
-      base = 'tuple';
-      break;
+      // Render Response
+      resContainer.style.display = 'block';
+      const statusClass = (status >= 200 && status < 300) ? 'status-ok' : 'status-err';
+      metaEl.innerHTML = '<div class="meta-item '+statusClass+'">\u2B24 '+status+' '+statusText+'</div><div class="meta-item">\u23F1 '+time+'ms</div>';
 
-    default:
-      base = node.kind || 'unknown';
-      break;
-  }
+      bodyEl.innerHTML = '';
+      if (typeof resData === 'object' && resData !== null) {
+        bodyEl.appendChild(renderJsonTree(resData));
+      } else {
+        const pre = document.createElement('pre');
+        pre.style.margin = 0;
+        pre.textContent = resData;
+        bodyEl.appendChild(pre);
+      }
 
-  if (node.nullable) {
-    base = base + ' | null';
+    } catch (err) {
+      resContainer.style.display = 'block';
+      metaEl.innerHTML = '<div class="meta-item status-err">Network Error</div>';
+      bodyEl.textContent = err.message;
+    } finally {
+      btn.disabled = false;
+      btn.textContent = 'Send Request';
+    }
   }
-  return base;
-}
 
-/**
- * Description cell content:
- * - main description text
- * - for enum: allowed values
- * - for literal: literal value
- */
-function renderNodeDescription(node) {
-  const parts = [];
-
-  if (node.description) {
-    parts.push(escapeHtml(node.description));
-  }
+  // --- JSON Tree Renderer ---
 
-  if (node.kind === 'enum' && node.enumValues && node.enumValues.length) {
-    const values = node.enumValues
-      .map(function (v) {
-        return '<code>' + escapeHtml(String(v)) + '</code>';
-      })
-      .join(' | ');
-    parts.push('<div class="schema-meta">Allowed: ' + values + '</div>');
-  }
+  function renderJsonTree(data) {
+    // Recursive DOM generator
+    if (data === null) return createSpan('null', 'jt-null');
+    if (typeof data === 'number') return createSpan(String(data), 'jt-num');
+    if (typeof data === 'boolean') return createSpan(String(data), 'jt-bool');
+    if (typeof data === 'string') return createSpan('"'+data+'"', 'jt-str');
 
-  if (node.kind === 'literal' && typeof node.literal !== 'undefined') {
-    const valueStr = escapeHtml(JSON.stringify(node.literal));
-    parts.push(
-      '<div class="schema-meta">Literal: <code>' + valueStr + '</code></div>'
-    );
-  }
+    const isArr = Array.isArray(data);
+    const container = document.createElement('div');
+    container.className = 'json-tree ' + (isArr ? 'jt-arr' : 'jt-obj');
 
-  return parts.join('<br>');
-}
+    const toggle = document.createElement('span');
+    toggle.className = 'jt-toggle';
+    toggle.textContent = '\u25BC';
 
-/**
- * Escape HTML helper.
- */
-function escapeHtml(str) {
-  return String(str)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}
+    const content = document.createElement('div');
+    content.className = 'jt-content';
 
+    const keys = Object.keys(data);
+    if (keys.length === 0) {
+      container.textContent = isArr ? '[]' : '{}';
+      return container;
+    }
 
-  function getTypeLabel(node) {
-    if (!node) return 'any';
-    if (node.kind === 'array') return getTypeLabel(node.element) + '[]';
-    if (node.enumValues) return 'enum(' + node.enumValues.join('|') + ')';
-    return node.kind || 'any';
-  }
+    container.appendChild(toggle);
+    container.appendChild(document.createTextNode(isArr ? '[' : '{'));
+    container.appendChild(content);
 
-  // Interactions
+    keys.forEach((k, i) => {
+      const line = document.createElement('div');
+      line.style.paddingLeft = '16px';
 
-  function wireOverviewInteractions() {
-    if (!elOverview || !elRouteList) return;
+      if (!isArr) {
+        const keySpan = createSpan('"'+k+'": ', 'jt-key');
+        line.appendChild(keySpan);
+      }
 
-    // group chips
-    elOverview.querySelectorAll('.group-chip').forEach(function(chip) {
-      chip.addEventListener('click', function(e) {
-        e.preventDefault();
-        const gName = chip.getAttribute('data-group');
-        if (gName) scrollToGroup(gName);
-      });
+      line.appendChild(renderJsonTree(data[k]));
+      if (i < keys.length - 1) line.appendChild(document.createTextNode(','));
+      content.appendChild(line);
     });
 
-    // expand/collapse buttons
-    elRouteList.querySelectorAll('.group-actions button').forEach(function(btn) {
-      btn.addEventListener('click', function() {
-        const gName = btn.getAttribute('data-group');
-        const action = btn.getAttribute('data-action');
-        if (!gName || !action) return;
-        toggleGroup(gName, action === 'expand');
-      });
-    });
+    container.appendChild(document.createTextNode(isArr ? ']' : '}'));
+    return container;
   }
 
-  function wireCardInteractions() {
-    if (!elRouteList) return;
+  function createSpan(text, cls) {
+    const s = document.createElement('span');
+    s.className = cls;
+    s.textContent = text;
+    return s;
+  }
 
-    // card expand/collapse
-    elRouteList.querySelectorAll('.endpoint-card').forEach(function(card) {
-      card.addEventListener('click', function(e) {
-        var target = e.target;
-        if (target && target.closest && target.closest('.path-container')) {
-          // handled separately for copy
-          return;
-        }
-        toggleCard(card);
-      });
-    });
+  // --- Utilities ---
 
-    // copy path
-    elRouteList.querySelectorAll('.path-container').forEach(function(pc) {
-      pc.addEventListener('click', function(e) {
-        e.stopPropagation();
-        const text = pc.getAttribute('data-path') || '';
-        copyText(text);
-      });
-    });
+  function getTagColorClass(tagName) {
+    if (tagName === 'not-implemented') return 'not-implemented';
+    let hash = 0;
+    for (let i = 0; i < tagName.length; i++) hash = tagName.charCodeAt(i) + ((hash << 5) - hash);
+    return 'tag-' + Math.abs(hash % 7);
+  }
+
+  function getTypeLabel(node) {
+    if (!node) return 'any';
+    if (node.kind === 'array') {
+        if(!node.element) return 'array';
+        return 'array<' + getTypeLabel(node.element) + '>';
+    }
+    if (node.kind === 'union' && node.union) return node.union.map(getTypeLabel).join(' | ');
+    if (node.kind === 'literal') return 'literal';
+    if (node.kind === 'enum') return 'enum';
+    return node.kind || 'any';
   }
 
-  function toggleCard(card) {
-    const isExpanded = card.getAttribute('data-expanded') === 'true';
-    card.setAttribute('data-expanded', String(!isExpanded));
+  function renderNodeDescription(node) {
+    let desc = [];
+    if (node.description) desc.push(escapeHtml(node.description));
+    if (node.kind === 'enum' && node.enumValues) desc.push('Allowed: ' + node.enumValues.map(v=>'<code>'+v+'</code>').join(' | '));
+    if (node.kind === 'literal' && node.literal !== undefined) desc.push('Value: <code>'+JSON.stringify(node.literal)+'</code>');
+    return desc.join('<br>');
   }
 
-  function toggleGroup(gName, expand) {
-    const group = document.getElementById('group-' + gName);
-    if (!group) return;
-    group.querySelectorAll('.endpoint-card').forEach(function(c) {
-      c.setAttribute('data-expanded', String(!!expand));
-    });
+  function isComplexNode(node) {
+    return ['object','array','union','record','tuple'].includes(node.kind);
   }
 
-  function copyText(text) {
-    if (!navigator.clipboard || !text) return;
-    navigator.clipboard.writeText(text).catch(function() {
-      // ignore
-    });
+  function toggleGroup(gName, expand) {
+    const g = document.getElementById('group-'+gName);
+    if(g) g.querySelectorAll('.endpoint-card').forEach(c => c.setAttribute('data-expanded', String(!!expand)));
   }
 
   function scrollToGroup(gName) {
-    const el = document.getElementById('group-' + gName);
-    if (el) window.scrollTo({ top: el.offsetTop - 220, behavior: 'smooth' });
+    const el = document.getElementById('group-'+gName);
+    if (el) window.scrollTo({ top: el.offsetTop - 100, behavior: 'smooth' });
   }
 
-  // Escaping helpers
-  function escapeHtml(str) {
-    if (!str && str !== 0) return '';
-    return String(str)
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;');
+  function copyText(text) {
+    if (navigator.clipboard && text) navigator.clipboard.writeText(text);
   }
 
-  function escapeAttr(str) {
-    return escapeHtml(str);
+  function escapeHtml(str) {
+    if (str === null || str === undefined) return '';
+    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   }
+  function escapeAttr(str) { return escapeHtml(str); }
 
   init();
 })();
@@ -1477,42 +1357,36 @@ function renderLeafDocsHTML(leaves, options = {}) {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>API Documentation</title>
-
+  <title>API Reference</title>
   <style${nonceAttr}>${CSS_STYLES}</style>
   ${options.inlineCss ? `<style${nonceAttr}>${options.inlineCss}</style>` : ""}
 </head>
 <body>
   <div class="page">
     <header class="header">
-      <div class="header-title">
-        <h1>API Reference</h1>
-      </div>
+      <div class="header-title"><h1>API Reference</h1></div>
     </header>
 
     <div class="controls-container">
       <div class="filters-row">
         <div class="left-column">
-          <div class="filter-group method-filters-container">
+          <div class="filter-group">
             <div class="filter-label">Search</div>
             <div class="search-box">
               <span class="search-icon">\u{1F50D}</span>
               <input type="text" id="searchInput" class="search-input" placeholder="Filter endpoints...">
             </div>
           </div>
-
-          <div class="filter-group method-filters-container">
+          <div class="filter-group">
             <div class="filter-label">Methods</div>
             <div class="checkbox-group" id="methodFilters"></div>
           </div>
         </div>
-
-        <div class="filter-group tag-filters-container" id="tagFilterContainer">
+        <div class="filter-group tag-filters-container">
           <div class="filter-label">Tags</div>
           <div class="checkbox-group" id="tagFilters"></div>
         </div>
       </div>
-
       <div class="overview-row" id="overviewList"></div>
     </div>