raffel 1.1.39 → 1.1.42-next.50bacca

package/dist/docs/ui/assets/raffel-docs.css

@@ -678,9 +678,10 @@
 
     .main-shell {
       display: grid;
-      grid-template-columns: 1fr 220px;
-      align-items: start;
+      grid-template-columns: 1fr 380px;
+      align-items: stretch;
       min-width: 0;
+      gap: 0;
     }
 
     /* ========== SIDEBAR ========== */
@@ -1089,17 +1090,25 @@
       opacity: 0.7;
     }
 
-    /* ========== TOC (On this page) — editorial sidenote ========== */
+    /* ========== TOC / TRY IT OUT PANEL (ReDoc-style right panel) ========== */
     .toc {
-      align-self: start;
+      align-self: stretch;
       position: sticky;
-      top: 24px;
-      padding: 8px 0 8px 16px;
+      top: 0;
+      padding: 24px;
       border-left: 1px solid var(--border-color);
       font-size: var(--font-size-small);
       line-height: 1.5;
-      max-height: calc(100vh - 48px);
+      max-height: 100vh;
       overflow-y: auto;
+      background: #263238;
+      color: #eceff1;
+    }
+
+    [data-theme="light"] .toc {
+      background: #f5f7fa;
+      color: #263238;
+      border-left-color: #e0e0e0;
     }
 
     .toc:empty {
@@ -1108,40 +1117,61 @@
     }
 
     .toc-title {
-      color: var(--text-muted);
+      color: #90caf9;
       font-size: var(--font-size-xs);
       font-weight: 600;
       letter-spacing: 0.04em;
-      margin: 0 0 8px;
+      margin: 0 0 16px;
       text-transform: uppercase;
     }
 
+    [data-theme="light"] .toc-title {
+      color: #1976d2;
+    }
+
     .toc-link {
       display: block;
-      padding: 3px 0;
-      color: var(--text-secondary);
+      padding: 6px 0;
+      color: #b0bec5;
       text-decoration: none;
-      border-left: 2px solid transparent;
-      margin-left: -16px;
-      padding-left: 14px;
+      border-left: 3px solid transparent;
+      margin-left: -24px;
+      padding-left: 21px;
       transition: color 0.15s, border-color 0.15s;
+      font-family: 'SF Mono', 'Monaco', monospace;
+      font-size: 12px;
     }
 
     .toc-link:hover {
-      color: var(--text-primary);
+      color: #e0e0e0;
+      border-left-color: #90caf9;
+    }
+
+    [data-theme="light"] .toc-link {
+      color: #666;
+    }
+
+    [data-theme="light"] .toc-link:hover {
+      color: #263238;
+      border-left-color: #1976d2;
     }
 
     .toc-link.active {
-      color: var(--text-primary);
-      border-left-color: var(--primary-color);
+      color: #e0e0e0;
+      border-left-color: #90caf9;
       font-weight: 600;
     }
 
-    .toc-level-2 { padding-left: 14px; }
-    .toc-level-3 { padding-left: 26px; }
-    .toc-level-4 { padding-left: 38px; }
-    .toc-level-5 { padding-left: 50px; }
-    .toc-level-6 { padding-left: 62px; }
+    [data-theme="light"] .toc-link.active {
+      color: #263238;
+      border-left-color: #1976d2;
+    }
+
+    .toc-level-2 { padding-left: 27px; }
+    .toc-level-3 { padding-left: 39px; }
+    .toc-level-4 { padding-left: 51px; }
+    .toc-level-5 { padding-left: 63px; }
+    .toc-level-6 { padding-left: 75px; }
     /* ========== SEARCH MODAL (cmd+K) ========== */
     dialog.search-modal {
       padding: 0;
@@ -2230,25 +2260,35 @@
     /* ========== REDOC-STYLE PARAMETERS ========== */
     .param-row {
       display: flex;
-      padding: 16px 0;
-      border-bottom: 1px solid var(--border-color);
+      padding: 12px;
+      margin-bottom: 12px;
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      background: var(--surface-color);
+      transition: border-color 0.15s, background 0.15s;
+    }
+
+    .param-row:hover {
+      border-color: var(--primary-color);
+      background: var(--hover-bg);
     }
 
     .param-row:last-child {
-      border-bottom: none;
+      margin-bottom: 0;
     }
 
     .param-tree {
-      width: 24px;
+      width: 20px;
       display: flex;
       align-items: flex-start;
-      padding-top: 4px;
+      padding-top: 2px;
       color: var(--border-color);
+      margin-right: 8px;
     }
 
     .param-tree-line {
-      width: 12px;
-      height: 12px;
+      width: 10px;
+      height: 10px;
       border-left: 1px solid var(--border-color);
       border-bottom: 1px solid var(--border-color);
     }
@@ -2259,9 +2299,9 @@
 
     .param-header {
       display: flex;
-      align-items: baseline;
-      gap: 8px;
-      margin-bottom: 4px;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
       flex-wrap: wrap;
     }
 
@@ -2273,31 +2313,54 @@
     }
 
     .param-required-badge {
-      font-size: 11px;
-      font-weight: 600;
-      color: #ef4444;
-      text-transform: lowercase;
+      font-size: 10px;
+      font-weight: 700;
+      padding: 3px 8px;
+      border-radius: 4px;
+      background: #fee2e2;
+      color: #991b1b;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+
+    [data-theme="dark"] .param-required-badge {
+      background: #7f1d1d;
+      color: #fca5a5;
     }
 
     .param-type-info {
       font-family: 'SF Mono', 'Monaco', monospace;
-      font-size: 13px;
-      color: var(--text-muted);
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: rgba(99, 102, 241, 0.1);
+      color: #6366f1;
+    }
+
+    [data-theme="dark"] .param-type-info {
+      background: rgba(129, 140, 248, 0.15);
+      color: #a5b4fc;
     }
 
     .param-type-info .format {
       color: #8b5cf6;
     }
 
+    [data-theme="dark"] .param-type-info .format {
+      color: #c4b5fd;
+    }
+
     .param-constraint {
       display: inline-block;
-      font-size: 11px;
-      padding: 2px 6px;
+      font-size: 10px;
+      padding: 3px 8px;
       border-radius: 4px;
       background: #fef3c7;
       color: #92400e;
       font-family: 'SF Mono', 'Monaco', monospace;
       margin-left: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
     }
 
     [data-theme="dark"] .param-constraint {
@@ -2306,53 +2369,61 @@
     }
 
     .param-default {
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-muted);
-      margin-top: 4px;
+      margin-top: 6px;
     }
 
     .param-default code {
       background: var(--code-bg);
-      padding: 2px 6px;
-      border-radius: 4px;
+      padding: 3px 6px;
+      border-radius: 3px;
       font-family: 'SF Mono', 'Monaco', monospace;
+      font-size: 11px;
     }
 
     .param-example {
-      font-size: 13px;
+      font-size: 12px;
       color: var(--text-muted);
-      margin-top: 4px;
+      margin-top: 6px;
     }
 
     .param-example code {
       background: var(--code-bg);
-      padding: 2px 6px;
-      border-radius: 4px;
+      padding: 3px 6px;
+      border-radius: 3px;
       font-family: 'SF Mono', 'Monaco', monospace;
+      font-size: 11px;
     }
 
     .param-description {
-      font-size: 14px;
+      font-size: 13px;
       color: var(--text-color);
       line-height: 1.5;
-      margin-top: 6px;
+      margin-top: 8px;
     }
 
     /* ========== REDOC-STYLE RESPONSES ========== */
     .response-item {
       border: 1px solid var(--border-color);
-      border-radius: 4px;
-      margin-bottom: 8px;
+      border-radius: 6px;
+      margin-bottom: 12px;
       overflow: hidden;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+
+    .response-item:hover {
+      border-color: var(--primary-color);
     }
 
     .response-header {
       display: flex;
       align-items: center;
       gap: 12px;
-      padding: 12px 16px;
+      padding: 14px 16px;
       cursor: pointer;
       transition: background 0.15s;
+      background: var(--surface-color);
     }
 
     .response-header:hover {
@@ -2360,9 +2431,11 @@
     }
 
     .response-arrow {
-      font-size: 10px;
+      font-size: 11px;
       transition: transform 0.2s;
       color: var(--text-muted);
+      width: 16px;
+      text-align: center;
     }
 
     .response-item.expanded .response-arrow {
@@ -2370,13 +2443,45 @@
     }
 
     .response-status {
-      font-size: 14px;
-      font-weight: 600;
+      font-size: 13px;
+      font-weight: 700;
+      padding: 4px 10px;
+      border-radius: 4px;
+      min-width: 50px;
+      text-align: center;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .response-status.status-2xx {
+      background: #dcfce7;
+      color: #166534;
     }
 
-    .response-status.status-2xx { color: #10b981; }
-    .response-status.status-4xx { color: #f59e0b; }
-    .response-status.status-5xx { color: #ef4444; }
+    [data-theme="dark"] .response-status.status-2xx {
+      background: #064e3b;
+      color: #86efac;
+    }
+
+    .response-status.status-4xx {
+      background: #fed7aa;
+      color: #92400e;
+    }
+
+    [data-theme="dark"] .response-status.status-4xx {
+      background: #78350f;
+      color: #fdba74;
+    }
+
+    .response-status.status-5xx {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    [data-theme="dark"] .response-status.status-5xx {
+      background: #7f1d1d;
+      color: #fca5a5;
+    }
 
     .response-desc {
       font-size: 14px;

package/dist/docs/ui/assets/raffel-docs.js

@@ -1186,14 +1186,244 @@ function appendSidebarGroup(nav, title, items) {
     group.appendChild(itemContainer);
     nav.appendChild(group);
 }
+function generateExampleFromSchema(schema) {
+    if (!schema)
+        return null;
+    if (schema.$ref)
+        return { $ref: schema.$ref };
+    if (schema.example !== undefined)
+        return schema.example;
+    if (schema.default !== undefined)
+        return schema.default;
+    if (schema.enum && schema.enum.length > 0)
+        return schema.enum[0];
+    switch (schema.type) {
+        case 'string': return schema.format === 'email' ? 'user@example.com' : 'string';
+        case 'number': return 0;
+        case 'integer': return 0;
+        case 'boolean': return true;
+        case 'array': return schema.items ? [generateExampleFromSchema(schema.items)] : [];
+        case 'object':
+            if (!schema.properties)
+                return {};
+            const obj = {};
+            Object.entries(schema.properties).forEach(([key, prop]) => {
+                obj[key] = generateExampleFromSchema(prop);
+            });
+            return obj;
+        default: return null;
+    }
+}
+function renderCodeExamples(endpoint, data) {
+    const container = doc.createElement('div');
+    container.style.marginTop = '20px';
+    container.style.paddingTop = '16px';
+    container.style.borderTop = '1px solid var(--border-color)';
+    // cURL example
+    const method = endpoint.method?.toUpperCase() || 'GET';
+    const path = endpoint.path || '/';
+    const baseUrl = 'http://localhost:3000';
+    const curlSection = doc.createElement('div');
+    curlSection.style.marginBottom = '20px';
+    curlSection.innerHTML = '<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px;">cURL EXAMPLE</div>';
+    const curlCode = doc.createElement('pre');
+    curlCode.style.backgroundColor = 'var(--bg-secondary)';
+    curlCode.style.padding = '12px';
+    curlCode.style.borderRadius = '4px';
+    curlCode.style.fontSize = '12px';
+    curlCode.style.overflow = 'auto';
+    let curlCmd = `curl -X ${method} "${baseUrl}${path}"`;
+    const reqBody = data.requestBody?.content?.[Object.keys(data.requestBody.content)[0]];
+    if (reqBody && ['POST', 'PUT', 'PATCH'].includes(method)) {
+        const example = generateExampleFromSchema(reqBody.schema);
+        curlCmd += ` \\\n  -H "Content-Type: application/json" \\\n  -d '${JSON.stringify(example, null, 2).split('\n').join('\n  ')}'`;
+    }
+    curlCode.textContent = curlCmd;
+    curlSection.appendChild(curlCode);
+    container.appendChild(curlSection);
+    // Response example
+    if (data.responses) {
+        const responses = Object.entries(data.responses);
+        if (responses.length > 0) {
+            const [status, resp] = responses[0];
+            const respSection = doc.createElement('div');
+            respSection.innerHTML = `<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px;">RESPONSE ${status}</div>`;
+            const respCode = doc.createElement('pre');
+            respCode.style.backgroundColor = 'var(--bg-secondary)';
+            respCode.style.padding = '12px';
+            respCode.style.borderRadius = '4px';
+            respCode.style.fontSize = '12px';
+            respCode.style.overflow = 'auto';
+            if (resp.content) {
+                const contentType = Object.keys(resp.content)[0];
+                const schema = resp.content[contentType]?.schema;
+                const example = generateExampleFromSchema(schema);
+                respCode.textContent = JSON.stringify(example, null, 2);
+            }
+            else {
+                respCode.textContent = `{}`;
+            }
+            respSection.appendChild(respCode);
+            container.appendChild(respSection);
+        }
+    }
+    return container;
+}
+function renderSchemaTree(parent, schema, depth = 0) {
+    if (!schema)
+        return;
+    const div = doc.createElement('div');
+    div.style.paddingLeft = depth > 0 ? `${depth * 12}px` : '0';
+    div.style.marginTop = depth === 0 ? '8px' : '0';
+    if (schema.$ref) {
+        const refName = String(schema.$ref).split('/').pop();
+        const row = doc.createElement('div');
+        row.style.padding = '4px 0';
+        row.innerHTML = `<span style="color: #888; font-style: italic;">$ref: ${esc(refName)}</span>`;
+        div.appendChild(row);
+    }
+    else if (schema.type === 'object' && schema.properties) {
+        Object.entries(schema.properties).forEach(([key, prop]) => {
+            const row = doc.createElement('div');
+            row.style.padding = '6px 0';
+            row.style.borderLeft = depth === 0 ? '2px solid var(--border-color)' : 'none';
+            row.style.paddingLeft = depth === 0 ? '8px' : '0';
+            const type = prop.type || 'any';
+            const required = schema.required?.includes(key) ? '<span style="color: #ef4444; margin-left: 4px;">*</span>' : '';
+            const format = prop.format ? ` (${prop.format})` : '';
+            row.innerHTML = `<div style="font-weight: 500; color: var(--text-primary); display: flex; align-items: center;">${esc(key)}${required} <span style="color: var(--text-secondary); font-weight: normal; margin-left: 8px;">${type}${format}</span></div>`;
+            if (prop.description) {
+                const desc = doc.createElement('div');
+                desc.style.fontSize = '12px';
+                desc.style.color = 'var(--text-muted)';
+                desc.style.marginTop = '4px';
+                desc.textContent = prop.description;
+                row.appendChild(desc);
+            }
+            if (prop.example !== undefined) {
+                const ex = doc.createElement('div');
+                ex.style.fontSize = '11px';
+                ex.style.color = '#888';
+                ex.style.marginTop = '2px';
+                ex.style.fontFamily = 'monospace';
+                ex.textContent = `Example: ${JSON.stringify(prop.example)}`;
+                row.appendChild(ex);
+            }
+            if (prop.enum) {
+                const en = doc.createElement('div');
+                en.style.fontSize = '11px';
+                en.style.color = '#888';
+                en.style.marginTop = '2px';
+                en.textContent = `Values: ${prop.enum.join(', ')}`;
+                row.appendChild(en);
+            }
+            div.appendChild(row);
+            if (prop.properties) {
+                renderSchemaTree(div, prop, depth + 1);
+            }
+        });
+    }
+    else if (schema.type === 'array' && schema.items) {
+        const row = doc.createElement('div');
+        row.style.padding = '6px 0';
+        row.innerHTML = `<span style="color: var(--text-primary); font-weight: 500;">array</span> <span style="color: var(--text-secondary);">of ${schema.items.type || 'object'}</span>`;
+        div.appendChild(row);
+        if (schema.items.properties) {
+            renderSchemaTree(div, schema.items, depth + 1);
+        }
+    }
+    else {
+        const row = doc.createElement('div');
+        row.style.padding = '6px 0';
+        row.innerHTML = `<span style="color: var(--text-secondary);">${esc(schema.type || 'any')}</span>`;
+        div.appendChild(row);
+    }
+    parent.appendChild(div);
+}
 function renderEndpointDetails(endpoint) {
     const container = doc.createElement('div');
     container.className = 'endpoint-details';
     const data = (endpoint.data ?? {});
     appendProtocolConsole(container, { doc, spec, wsSpec, streamsSpec, jsonrpcSpec, activeProtocol, endpoint, data, esc, escapeAttr });
     const appendMany = (items) => items.forEach(([title, value]) => appendSchemaSubsection(container, title, value));
-    if (activeProtocol === 'http')
-        appendMany([['Parameters', data.parameters], ['Request Body', getFirstContentSchema(data.requestBody?.content)], ['Responses', data.responses]]);
+    if (activeProtocol === 'http') {
+        const params = (data.parameters ?? []);
+        if (params.length > 0) {
+            const section = doc.createElement('div');
+            section.className = 'endpoint-subsection';
+            section.innerHTML = '<div class="subsection-label">PARAMETERS</div>';
+            const grid = doc.createElement('div');
+            grid.className = 'info-grid';
+            params.forEach(p => {
+                grid.innerHTML += `<div class="info-card"><div class="info-card-title">${esc(p.name)}</div><div class="info-card-value">${esc(p.in || 'query')} • ${esc(p.schema?.type || 'string')}${p.required ? ' *' : ''}</div></div>`;
+            });
+            section.appendChild(grid);
+            container.appendChild(section);
+        }
+        const reqBody = data.requestBody;
+        if (reqBody?.content) {
+            const section = doc.createElement('div');
+            section.className = 'endpoint-subsection';
+            section.innerHTML = '<div class="subsection-label">REQUEST BODY</div>';
+            const content = reqBody.content[Object.keys(reqBody.content)[0]];
+            if (content?.schema) {
+                renderSchemaTree(section, content.schema);
+            }
+            container.appendChild(section);
+        }
+        const responses = data.responses;
+        if (responses && Object.keys(responses).length > 0) {
+            const section = doc.createElement('div');
+            section.className = 'endpoint-subsection';
+            section.innerHTML = '<div class="subsection-label">RESPONSES</div>';
+            Object.entries(responses).forEach(([status, resp]) => {
+                const statusClass = status.startsWith('2') ? 'status-2xx' : status.startsWith('4') ? 'status-4xx' : 'status-5xx';
+                const item = doc.createElement('div');
+                item.style.marginBottom = '16px';
+                item.style.padding = '12px';
+                item.style.borderRadius = '6px';
+                item.style.backgroundColor = 'var(--bg-secondary)';
+                item.innerHTML = `<div style="color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;"><span class="badge badge-${statusClass}">${status}</span> <strong>${esc(resp.description || '')}</strong></div>`;
+                // Headers
+                if (resp.headers && Object.keys(resp.headers).length > 0) {
+                    const headersDiv = doc.createElement('div');
+                    headersDiv.style.marginBottom = '12px';
+                    headersDiv.innerHTML = '<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px;">HEADERS</div>';
+                    const headersList = doc.createElement('div');
+                    headersList.style.fontSize = '12px';
+                    Object.entries(resp.headers).forEach(([headerName, headerDef]) => {
+                        const headerRow = doc.createElement('div');
+                        headerRow.style.padding = '4px 0';
+                        headerRow.style.borderLeft = '2px solid var(--border-color)';
+                        headerRow.style.paddingLeft = '8px';
+                        const headerType = headerDef.schema?.type || 'string';
+                        headerRow.innerHTML = `<div style="font-weight: 500; color: var(--text-primary);">${esc(headerName)}</div><div style="color: var(--text-muted); font-size: 11px;">${headerType}</div>${headerDef.description ? `<div style="color: var(--text-muted); font-size: 11px; margin-top: 2px;">${esc(headerDef.description)}</div>` : ''}`;
+                        headersList.appendChild(headerRow);
+                    });
+                    headersDiv.appendChild(headersList);
+                    item.appendChild(headersDiv);
+                }
+                // Schema
+                if (resp.content) {
+                    const contentType = Object.keys(resp.content)[0];
+                    const schema = resp.content[contentType]?.schema;
+                    if (schema) {
+                        const schemaDiv = doc.createElement('div');
+                        schemaDiv.innerHTML = '<div style="font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px;">SCHEMA</div>';
+                        renderSchemaTree(schemaDiv, schema);
+                        item.appendChild(schemaDiv);
+                    }
+                }
+                section.appendChild(item);
+            });
+            container.appendChild(section);
+        }
+        // Code examples
+        const examplesSection = doc.createElement('div');
+        examplesSection.className = 'endpoint-subsection';
+        examplesSection.appendChild(renderCodeExamples(endpoint, data));
+        container.appendChild(examplesSection);
+    }
     if (activeProtocol === 'websocket') {
         appendInfoGrid(container, [['Channel Type', data.type], ['Path', endpoint.path]]);
         appendMany([['Parameters', parameterMapToSchema(data.parameters)], ['Subscribe Message', resolveMessagePayload(data.subscribe?.message)], ['Publish Message', resolveMessagePayload(data.publish?.message)]]);
@@ -2026,6 +2256,9 @@ function init() {
     render();
     startDocsStatePolling();
     // Mount cmd+K / ctrl+K search modal (skipped when sidebar search is disabled).
+    // Dispose any previously-mounted modal so a re-initialised runtime never
+    // leaves a duplicate dialog or a stale keydown listener behind.
+    win.RaffelDocs?.searchModal?.dispose?.();
     const modal = createDocsSearchModal({
         doc, win, enabled: sidebarConfig?.search !== false,
         altShortcut: typeof sidebarConfig?.searchModalAltShortcut === 'string' ? String(sidebarConfig.searchModalAltShortcut) : '',

package/dist/docs/ui/client-script/content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/docs/ui/client-script/content.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,mBAAmB,QA2V/B,CAAA"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/docs/ui/client-script/content.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,mBAAmB,QAuZ/B,CAAA"}