morphbox
Version:
Docker-based AI sandbox for development with Claude integration
295 lines (284 loc) • 36.6 kB
JavaScript
import { c as create_ssr_component, v as validate_component, e as escape, f as each, m as missing_component } from './ssr-Bi8A3Ffq.js';
import { I as Icon } from './Icon-BX2G3WyD.js';
const Code = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [["path", { "d": "m16 18 6-6-6-6" }], ["path", { "d": "m8 6-6 6 6 6" }]];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "code" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const File_json = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
[
"path",
{
"d": "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
}
],
["path", { "d": "M14 2v4a2 2 0 0 0 2 2h4" }],
[
"path",
{
"d": "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"
}
],
[
"path",
{
"d": "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"
}
]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "file-json" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const Layers = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
[
"path",
{
"d": "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
}
],
[
"path",
{
"d": "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"
}
],
[
"path",
{
"d": "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"
}
]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "layers" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const Settings = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
[
"path",
{
"d": "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
}
],
["circle", { "cx": "12", "cy": "12", "r": "3" }]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "settings" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const css = {
code: ".api-overview.svelte-1f5gjk.svelte-1f5gjk{padding:2rem;max-width:1200px;margin:0 auto}.page-header.svelte-1f5gjk.svelte-1f5gjk{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.page-header.svelte-1f5gjk h1.svelte-1f5gjk{margin:0}.intro.svelte-1f5gjk.svelte-1f5gjk{font-size:1.1rem;color:var(--text-secondary);margin-bottom:3rem}.base-info.svelte-1f5gjk.svelte-1f5gjk{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.base-info.svelte-1f5gjk h2.svelte-1f5gjk{margin:0 0 0.5rem 0}.base-url.svelte-1f5gjk.svelte-1f5gjk{display:inline-block;padding:0.5rem 1rem;background:var(--surface-primary);border:1px solid var(--border);border-radius:4px;font-size:1.1rem;margin:0.5rem 0}.auth-section.svelte-1f5gjk.svelte-1f5gjk{margin-bottom:3rem}pre.svelte-1f5gjk.svelte-1f5gjk{background:var(--surface-primary);border:1px solid var(--border);border-radius:4px;padding:1rem;overflow-x:auto;margin:1rem 0}code.svelte-1f5gjk.svelte-1f5gjk{font-family:'SF Mono', Monaco, 'Cascadia Code', monospace}.categories.svelte-1f5gjk.svelte-1f5gjk{margin-bottom:3rem}.category-section.svelte-1f5gjk.svelte-1f5gjk{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.category-header.svelte-1f5gjk.svelte-1f5gjk{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem}.category-header.svelte-1f5gjk h2.svelte-1f5gjk{margin:0}.endpoints.svelte-1f5gjk.svelte-1f5gjk{display:flex;flex-direction:column;gap:0.75rem}.endpoint.svelte-1f5gjk.svelte-1f5gjk{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0;border-bottom:1px solid var(--border)}.endpoint.svelte-1f5gjk.svelte-1f5gjk:last-child{border-bottom:none}.method.svelte-1f5gjk.svelte-1f5gjk{font-weight:600;font-size:0.85rem;padding:0.25rem 0.5rem;border-radius:4px;min-width:50px;text-align:center}.method-get.svelte-1f5gjk.svelte-1f5gjk{background:#4CAF50;color:white}.method-post.svelte-1f5gjk.svelte-1f5gjk{background:#2196F3;color:white}.method-delete.svelte-1f5gjk.svelte-1f5gjk{background:#f44336;color:white}.method-ws.svelte-1f5gjk.svelte-1f5gjk{background:#9C27B0;color:white}.path.svelte-1f5gjk.svelte-1f5gjk{flex:1;font-size:0.9rem}.desc.svelte-1f5gjk.svelte-1f5gjk{color:var(--text-secondary);font-size:0.9rem}.response-format.svelte-1f5gjk.svelte-1f5gjk{margin-bottom:3rem}.response-format.svelte-1f5gjk h3.svelte-1f5gjk{margin:1.5rem 0 0.5rem 0}.websocket-section.svelte-1f5gjk.svelte-1f5gjk{margin-bottom:3rem}.message-types.svelte-1f5gjk.svelte-1f5gjk{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1.5rem;margin-top:1.5rem}.message-type.svelte-1f5gjk.svelte-1f5gjk{background:var(--surface-secondary);border-radius:8px;padding:1rem}.message-type.svelte-1f5gjk h4.svelte-1f5gjk{margin:0 0 0.75rem 0}.message-type.svelte-1f5gjk ul.svelte-1f5gjk{margin:0;padding-left:1.5rem}.message-type.svelte-1f5gjk li.svelte-1f5gjk{margin-bottom:0.25rem;font-size:0.9rem}.examples-section.svelte-1f5gjk h3.svelte-1f5gjk{margin:2rem 0 0.5rem 0}.rate-limiting.svelte-1f5gjk.svelte-1f5gjk{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;margin-bottom:3rem}.rate-limiting.svelte-1f5gjk h2.svelte-1f5gjk{margin:0 0 1rem 0}.rate-limiting.svelte-1f5gjk ul.svelte-1f5gjk{margin:1rem 0;padding-left:1.5rem}.sdks.svelte-1f5gjk.svelte-1f5gjk{margin-bottom:3rem}.sdk-grid.svelte-1f5gjk.svelte-1f5gjk{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1rem;margin-top:1rem}.sdk-card.svelte-1f5gjk.svelte-1f5gjk{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;text-align:center}.sdk-card.svelte-1f5gjk h3.svelte-1f5gjk{margin:0 0 0.75rem 0}.sdk-card.svelte-1f5gjk code.svelte-1f5gjk{display:block;padding:0.5rem;background:var(--surface-primary);border:1px solid var(--border);border-radius:4px;margin:0.75rem 0;font-size:0.85rem}.sdk-card.svelte-1f5gjk a.svelte-1f5gjk{color:var(--primary);text-decoration:none;font-size:0.9rem}.sdk-card.svelte-1f5gjk a.svelte-1f5gjk:hover{text-decoration:underline}@media(max-width: 768px){.api-overview.svelte-1f5gjk.svelte-1f5gjk{padding:1rem}.endpoint.svelte-1f5gjk.svelte-1f5gjk{flex-wrap:wrap}.path.svelte-1f5gjk.svelte-1f5gjk{width:100%;order:2;margin-top:0.25rem}}",
map: `{"version":3,"file":"+page.svelte","sources":["+page.svelte"],"sourcesContent":["<script>\\n import { Code, FileJson, Layers, Settings } from 'lucide-svelte';\\n \\n const apiCategories = [\\n {\\n icon: FileJson,\\n title: 'File Operations',\\n path: '/api/files',\\n endpoints: [\\n { method: 'GET', path: '/api/files/list', desc: 'List directory contents' },\\n { method: 'POST', path: '/api/files/read', desc: 'Read file contents' },\\n { method: 'POST', path: '/api/files/write', desc: 'Write to file' },\\n { method: 'POST', path: '/api/files/create', desc: 'Create new file/folder' },\\n { method: 'POST', path: '/api/files/rename', desc: 'Rename file/folder' },\\n { method: 'DELETE', path: '/api/files/delete', desc: 'Delete file/folder' }\\n ]\\n },\\n {\\n icon: Layers,\\n title: 'Panel Management',\\n path: '/api/panels',\\n endpoints: [\\n { method: 'GET', path: '/api/panels/list', desc: 'List available panels' },\\n { method: 'POST', path: '/api/panels/create', desc: 'Create new panel instance' },\\n { method: 'GET', path: '/api/panels/layout', desc: 'Get current layout' },\\n { method: 'POST', path: '/api/panels/save', desc: 'Save panel state' },\\n { method: 'GET', path: '/api/panels/templates', desc: 'Get panel templates' }\\n ]\\n },\\n {\\n icon: Code,\\n title: 'Custom Panels',\\n path: '/api/custom-panels',\\n endpoints: [\\n { method: 'GET', path: '/api/custom-panels/list', desc: 'List custom panels' },\\n { method: 'POST', path: '/api/custom-panels/create', desc: 'Create custom panel' },\\n { method: 'POST', path: '/api/custom-panels/load', desc: 'Load panel component' },\\n { method: 'GET', path: '/api/custom-panels/watch', desc: 'Watch for changes (SSE)' }\\n ]\\n },\\n {\\n icon: Settings,\\n title: 'System',\\n path: '/api/system',\\n endpoints: [\\n { method: 'WS', path: '/api/ws', desc: 'WebSocket connection' },\\n { method: 'GET', path: '/api/sessions', desc: 'List terminal sessions' },\\n { method: 'POST', path: '/api/auth/login', desc: 'Authenticate user' },\\n { method: 'POST', path: '/api/log/browser', desc: 'Browser error logging' }\\n ]\\n }\\n ];\\n<\/script>\\n\\n<svelte:head>\\n <title>API Reference - MorphBox Documentation</title>\\n</svelte:head>\\n\\n<div class=\\"api-overview\\">\\n <div class=\\"page-header\\">\\n <Code size={32} />\\n <h1>API Reference</h1>\\n </div>\\n\\n <p class=\\"intro\\">\\n Complete reference for MorphBox's REST and WebSocket APIs. Use these endpoints to interact with the system programmatically.\\n </p>\\n\\n <div class=\\"base-info\\">\\n <h2>Base URL</h2>\\n <code class=\\"base-url\\">http://localhost:3000</code>\\n <p>All API endpoints are relative to this base URL. Replace with your MorphBox instance URL.</p>\\n </div>\\n\\n <div class=\\"auth-section\\">\\n <h2>Authentication</h2>\\n <p>Most endpoints require authentication. Include the session token in your requests:</p>\\n <pre><code>{\`// Header authentication\\nfetch('/api/files/list', {\\n headers: {\\n 'Authorization': 'Bearer YOUR_SESSION_TOKEN'\\n }\\n})\\n\\n// Cookie authentication (automatic in browser)\\nfetch('/api/files/list', {\\n credentials: 'include'\\n})\`}</code></pre>\\n </div>\\n\\n <div class=\\"categories\\">\\n {#each apiCategories as category}\\n <div class=\\"category-section\\">\\n <div class=\\"category-header\\">\\n <svelte:component this={category.icon} size={24} />\\n <h2>{category.title}</h2>\\n </div>\\n \\n <div class=\\"endpoints\\">\\n {#each category.endpoints as endpoint}\\n <div class=\\"endpoint\\">\\n <span class=\\"method method-{endpoint.method.toLowerCase()}\\">{endpoint.method}</span>\\n <code class=\\"path\\">{endpoint.path}</code>\\n <span class=\\"desc\\">{endpoint.desc}</span>\\n </div>\\n {/each}\\n </div>\\n </div>\\n {/each}\\n </div>\\n\\n <div class=\\"response-format\\">\\n <h2>Response Format</h2>\\n <p>All API responses follow a consistent format:</p>\\n \\n <h3>Success Response</h3>\\n <pre><code>{\`{\\n \\"success\\": true,\\n \\"data\\": {\\n // Response data\\n }\\n}\`}</code></pre>\\n\\n <h3>Error Response</h3>\\n <pre><code>{\`{\\n \\"success\\": false,\\n \\"error\\": {\\n \\"code\\": \\"ERROR_CODE\\",\\n \\"message\\": \\"Human readable error message\\",\\n \\"details\\": {} // Optional additional information\\n }\\n}\`}</code></pre>\\n </div>\\n\\n <div class=\\"websocket-section\\">\\n <h2>WebSocket API</h2>\\n <p>Connect to the WebSocket endpoint for real-time communication:</p>\\n \\n <pre><code>{\`const ws = new WebSocket('ws://localhost:3000/api/ws');\\n\\nws.onopen = () => {\\n console.log('Connected to MorphBox');\\n \\n // Send a message\\n ws.send(JSON.stringify({\\n type: 'TERMINAL_INPUT',\\n payload: { \\n sessionId: 'abc123',\\n input: 'ls -la\\\\\\\\n'\\n }\\n }));\\n};\\n\\nws.onmessage = (event) => {\\n const message = JSON.parse(event.data);\\n console.log('Received:', message);\\n};\`}</code></pre>\\n\\n <h3>Message Types</h3>\\n <div class=\\"message-types\\">\\n <div class=\\"message-type\\">\\n <h4>Terminal Messages</h4>\\n <ul>\\n <li><code>TERMINAL_INPUT</code> - Send input to terminal</li>\\n <li><code>TERMINAL_OUTPUT</code> - Receive terminal output</li>\\n <li><code>TERMINAL_RESIZE</code> - Resize terminal</li>\\n <li><code>SESSION_CREATE</code> - Create new session</li>\\n <li><code>SESSION_ATTACH</code> - Attach to existing session</li>\\n </ul>\\n </div>\\n \\n <div class=\\"message-type\\">\\n <h4>File System Events</h4>\\n <ul>\\n <li><code>FILE_CHANGED</code> - File modification notification</li>\\n <li><code>FILE_CREATED</code> - New file created</li>\\n <li><code>FILE_DELETED</code> - File deleted</li>\\n <li><code>DIRECTORY_CHANGED</code> - Directory contents changed</li>\\n </ul>\\n </div>\\n \\n <div class=\\"message-type\\">\\n <h4>Panel Events</h4>\\n <ul>\\n <li><code>PANEL_UPDATE</code> - Panel state changed</li>\\n <li><code>PANEL_MESSAGE</code> - Inter-panel communication</li>\\n <li><code>LAYOUT_CHANGED</code> - Panel layout modified</li>\\n </ul>\\n </div>\\n </div>\\n </div>\\n\\n <div class=\\"examples-section\\">\\n <h2>Example Usage</h2>\\n \\n <h3>File Operations</h3>\\n <pre><code>{\`// List files in a directory\\nconst response = await fetch('/api/files/list', {\\n method: 'POST',\\n headers: { 'Content-Type': 'application/json' },\\n body: JSON.stringify({ path: '/home/user/projects' })\\n});\\n\\nconst { data } = await response.json();\\nconsole.log('Files:', data.files);\\n\\n// Read a file\\nconst fileResponse = await fetch('/api/files/read', {\\n method: 'POST',\\n headers: { 'Content-Type': 'application/json' },\\n body: JSON.stringify({ path: '/home/user/file.txt' })\\n});\\n\\nconst { data: fileData } = await fileResponse.json();\\nconsole.log('Content:', fileData.content);\`}</code></pre>\\n\\n <h3>Panel Management</h3>\\n <pre><code>{\`// Create a new terminal panel\\nconst createResponse = await fetch('/api/panels/create', {\\n method: 'POST',\\n headers: { 'Content-Type': 'application/json' },\\n body: JSON.stringify({\\n type: 'terminal',\\n title: 'New Terminal',\\n position: { x: 0, y: 0, width: 50, height: 100 }\\n })\\n});\\n\\nconst { data: panel } = await createResponse.json();\\nconsole.log('Created panel:', panel.id);\`}</code></pre>\\n </div>\\n\\n <div class=\\"rate-limiting\\">\\n <h2>Rate Limiting</h2>\\n <p>API endpoints are rate-limited to prevent abuse:</p>\\n <ul>\\n <li>Standard endpoints: 100 requests per minute</li>\\n <li>File write operations: 20 requests per minute</li>\\n <li>WebSocket messages: 50 per second</li>\\n </ul>\\n <p>Rate limit information is included in response headers:</p>\\n <pre><code>{\`X-RateLimit-Limit: 100\\nX-RateLimit-Remaining: 95\\nX-RateLimit-Reset: 1640995200\`}</code></pre>\\n </div>\\n\\n <div class=\\"sdks\\">\\n <h2>SDKs & Libraries</h2>\\n <p>Official and community SDKs for easier integration:</p>\\n \\n <div class=\\"sdk-grid\\">\\n <div class=\\"sdk-card\\">\\n <h3>JavaScript/TypeScript</h3>\\n <code>npm install @morphbox/sdk</code>\\n <a href=\\"https://github.com/morphbox/js-sdk\\">View on GitHub</a>\\n </div>\\n \\n <div class=\\"sdk-card\\">\\n <h3>Python</h3>\\n <code>pip install morphbox</code>\\n <a href=\\"https://github.com/morphbox/python-sdk\\">View on GitHub</a>\\n </div>\\n \\n <div class=\\"sdk-card\\">\\n <h3>Go</h3>\\n <code>go get github.com/morphbox/go-sdk</code>\\n <a href=\\"https://github.com/morphbox/go-sdk\\">View on GitHub</a>\\n </div>\\n </div>\\n </div>\\n</div>\\n\\n<style>\\n .api-overview {\\n padding: 2rem;\\n max-width: 1200px;\\n margin: 0 auto;\\n }\\n\\n .page-header {\\n display: flex;\\n align-items: center;\\n gap: 1rem;\\n margin-bottom: 2rem;\\n }\\n\\n .page-header h1 {\\n margin: 0;\\n }\\n\\n .intro {\\n font-size: 1.1rem;\\n color: var(--text-secondary);\\n margin-bottom: 3rem;\\n }\\n\\n .base-info {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n margin-bottom: 2rem;\\n }\\n\\n .base-info h2 {\\n margin: 0 0 0.5rem 0;\\n }\\n\\n .base-url {\\n display: inline-block;\\n padding: 0.5rem 1rem;\\n background: var(--surface-primary);\\n border: 1px solid var(--border);\\n border-radius: 4px;\\n font-size: 1.1rem;\\n margin: 0.5rem 0;\\n }\\n\\n .auth-section {\\n margin-bottom: 3rem;\\n }\\n\\n pre {\\n background: var(--surface-primary);\\n border: 1px solid var(--border);\\n border-radius: 4px;\\n padding: 1rem;\\n overflow-x: auto;\\n margin: 1rem 0;\\n }\\n\\n code {\\n font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\\n }\\n\\n .categories {\\n margin-bottom: 3rem;\\n }\\n\\n .category-section {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n margin-bottom: 1.5rem;\\n }\\n\\n .category-header {\\n display: flex;\\n align-items: center;\\n gap: 0.75rem;\\n margin-bottom: 1rem;\\n }\\n\\n .category-header h2 {\\n margin: 0;\\n }\\n\\n .endpoints {\\n display: flex;\\n flex-direction: column;\\n gap: 0.75rem;\\n }\\n\\n .endpoint {\\n display: flex;\\n align-items: center;\\n gap: 0.75rem;\\n padding: 0.5rem 0;\\n border-bottom: 1px solid var(--border);\\n }\\n\\n .endpoint:last-child {\\n border-bottom: none;\\n }\\n\\n .method {\\n font-weight: 600;\\n font-size: 0.85rem;\\n padding: 0.25rem 0.5rem;\\n border-radius: 4px;\\n min-width: 50px;\\n text-align: center;\\n }\\n\\n .method-get {\\n background: #4CAF50;\\n color: white;\\n }\\n\\n .method-post {\\n background: #2196F3;\\n color: white;\\n }\\n\\n .method-delete {\\n background: #f44336;\\n color: white;\\n }\\n\\n .method-ws {\\n background: #9C27B0;\\n color: white;\\n }\\n\\n .path {\\n flex: 1;\\n font-size: 0.9rem;\\n }\\n\\n .desc {\\n color: var(--text-secondary);\\n font-size: 0.9rem;\\n }\\n\\n .response-format {\\n margin-bottom: 3rem;\\n }\\n\\n .response-format h3 {\\n margin: 1.5rem 0 0.5rem 0;\\n }\\n\\n .websocket-section {\\n margin-bottom: 3rem;\\n }\\n\\n .message-types {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 1.5rem;\\n margin-top: 1.5rem;\\n }\\n\\n .message-type {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1rem;\\n }\\n\\n .message-type h4 {\\n margin: 0 0 0.75rem 0;\\n }\\n\\n .message-type ul {\\n margin: 0;\\n padding-left: 1.5rem;\\n }\\n\\n .message-type li {\\n margin-bottom: 0.25rem;\\n font-size: 0.9rem;\\n }\\n\\n .examples-section h3 {\\n margin: 2rem 0 0.5rem 0;\\n }\\n\\n .rate-limiting {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n margin-bottom: 3rem;\\n }\\n\\n .rate-limiting h2 {\\n margin: 0 0 1rem 0;\\n }\\n\\n .rate-limiting ul {\\n margin: 1rem 0;\\n padding-left: 1.5rem;\\n }\\n\\n .sdks {\\n margin-bottom: 3rem;\\n }\\n\\n .sdk-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 1rem;\\n margin-top: 1rem;\\n }\\n\\n .sdk-card {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n text-align: center;\\n }\\n\\n .sdk-card h3 {\\n margin: 0 0 0.75rem 0;\\n }\\n\\n .sdk-card code {\\n display: block;\\n padding: 0.5rem;\\n background: var(--surface-primary);\\n border: 1px solid var(--border);\\n border-radius: 4px;\\n margin: 0.75rem 0;\\n font-size: 0.85rem;\\n }\\n\\n .sdk-card a {\\n color: var(--primary);\\n text-decoration: none;\\n font-size: 0.9rem;\\n }\\n\\n .sdk-card a:hover {\\n text-decoration: underline;\\n }\\n\\n @media (max-width: 768px) {\\n .api-overview {\\n padding: 1rem;\\n }\\n\\n .endpoint {\\n flex-wrap: wrap;\\n }\\n\\n .path {\\n width: 100%;\\n order: 2;\\n margin-top: 0.25rem;\\n }\\n }\\n</style>"],"names":[],"mappings":"AAiRE,yCAAc,CACZ,OAAO,CAAE,IAAI,CACb,SAAS,CAAE,MAAM,CACjB,MAAM,CAAE,CAAC,CAAC,IACZ,CAEA,wCAAa,CACX,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,GAAG,CAAE,IAAI,CACT,aAAa,CAAE,IACjB,CAEA,0BAAY,CAAC,gBAAG,CACd,MAAM,CAAE,CACV,CAEA,kCAAO,CACL,SAAS,CAAE,MAAM,CACjB,KAAK,CAAE,IAAI,gBAAgB,CAAC,CAC5B,aAAa,CAAE,IACjB,CAEA,sCAAW,CACT,UAAU,CAAE,IAAI,mBAAmB,CAAC,CACpC,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,MAAM,CACf,aAAa,CAAE,IACjB,CAEA,wBAAU,CAAC,gBAAG,CACZ,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CACrB,CAEA,qCAAU,CACR,OAAO,CAAE,YAAY,CACrB,OAAO,CAAE,MAAM,CAAC,IAAI,CACpB,UAAU,CAAE,IAAI,iBAAiB,CAAC,CAClC,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAC/B,aAAa,CAAE,GAAG,CAClB,SAAS,CAAE,MAAM,CACjB,MAAM,CAAE,MAAM,CAAC,CACjB,CAEA,yCAAc,CACZ,aAAa,CAAE,IACjB,CAEA,+BAAI,CACF,UAAU,CAAE,IAAI,iBAAiB,CAAC,CAClC,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAC/B,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,IAAI,CACb,UAAU,CAAE,IAAI,CAChB,MAAM,CAAE,IAAI,CAAC,CACf,CAEA,gCAAK,CACH,WAAW,CAAE,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,SACnD,CAEA,uCAAY,CACV,aAAa,CAAE,IACjB,CAEA,6CAAkB,CAChB,UAAU,CAAE,IAAI,mBAAmB,CAAC,CACpC,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,MAAM,CACf,aAAa,CAAE,MACjB,CAEA,4CAAiB,CACf,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,GAAG,CAAE,OAAO,CACZ,aAAa,CAAE,IACjB,CAEA,8BAAgB,CAAC,gBAAG,CAClB,MAAM,CAAE,CACV,CAEA,sCAAW,CACT,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,GAAG,CAAE,OACP,CAEA,qCAAU,CACR,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,GAAG,CAAE,OAAO,CACZ,OAAO,CAAE,MAAM,CAAC,CAAC,CACjB,aAAa,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CACvC,CAEA,qCAAS,WAAY,CACnB,aAAa,CAAE,IACjB,CAEA,mCAAQ,CACN,WAAW,CAAE,GAAG,CAChB,SAAS,CAAE,OAAO,CAClB,OAAO,CAAE,OAAO,CAAC,MAAM,CACvB,aAAa,CAAE,GAAG,CAClB,SAAS,CAAE,IAAI,CACf,UAAU,CAAE,MACd,CAEA,uCAAY,CACV,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,KACT,CAEA,wCAAa,CACX,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,KACT,CAEA,0CAAe,CACb,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,KACT,CAEA,sCAAW,CACT,UAAU,CAAE,OAAO,CACnB,KAAK,CAAE,KACT,CAEA,iCAAM,CACJ,IAAI,CAAE,CAAC,CACP,SAAS,CAAE,MACb,CAEA,iCAAM,CACJ,KAAK,CAAE,IAAI,gBAAgB,CAAC,CAC5B,SAAS,CAAE,MACb,CAEA,4CAAiB,CACf,aAAa,CAAE,IACjB,CAEA,8BAAgB,CAAC,gBAAG,CAClB,MAAM,CAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAC1B,CAEA,8CAAmB,CACjB,aAAa,CAAE,IACjB,CAEA,0CAAe,CACb,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,OAAO,QAAQ,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAC3D,GAAG,CAAE,MAAM,CACX,UAAU,CAAE,MACd,CAEA,yCAAc,CACZ,UAAU,CAAE,IAAI,mBAAmB,CAAC,CACpC,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,IACX,CAEA,2BAAa,CAAC,gBAAG,CACf,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CACtB,CAEA,2BAAa,CAAC,gBAAG,CACf,MAAM,CAAE,CAAC,CACT,YAAY,CAAE,MAChB,CAEA,2BAAa,CAAC,gBAAG,CACf,aAAa,CAAE,OAAO,CACtB,SAAS,CAAE,MACb,CAEA,+BAAiB,CAAC,gBAAG,CACnB,MAAM,CAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CACxB,CAEA,0CAAe,CACb,UAAU,CAAE,IAAI,mBAAmB,CAAC,CACpC,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,MAAM,CACf,aAAa,CAAE,IACjB,CAEA,4BAAc,CAAC,gBAAG,CAChB,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CACnB,CAEA,4BAAc,CAAC,gBAAG,CAChB,MAAM,CAAE,IAAI,CAAC,CAAC,CACd,YAAY,CAAE,MAChB,CAEA,iCAAM,CACJ,aAAa,CAAE,IACjB,CAEA,qCAAU,CACR,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,OAAO,QAAQ,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAC3D,GAAG,CAAE,IAAI,CACT,UAAU,CAAE,IACd,CAEA,qCAAU,CACR,UAAU,CAAE,IAAI,mBAAmB,CAAC,CACpC,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,MAAM,CACf,UAAU,CAAE,MACd,CAEA,uBAAS,CAAC,gBAAG,CACX,MAAM,CAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CACtB,CAEA,uBAAS,CAAC,kBAAK,CACb,OAAO,CAAE,KAAK,CACd,OAAO,CAAE,MAAM,CACf,UAAU,CAAE,IAAI,iBAAiB,CAAC,CAClC,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,CAC/B,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,OAAO,CAAC,CAAC,CACjB,SAAS,CAAE,OACb,CAEA,uBAAS,CAAC,eAAE,CACV,KAAK,CAAE,IAAI,SAAS,CAAC,CACrB,eAAe,CAAE,IAAI,CACrB,SAAS,CAAE,MACb,CAEA,uBAAS,CAAC,eAAC,MAAO,CAChB,eAAe,CAAE,SACnB,CAEA,MAAO,YAAY,KAAK,CAAE,CACxB,yCAAc,CACZ,OAAO,CAAE,IACX,CAEA,qCAAU,CACR,SAAS,CAAE,IACb,CAEA,iCAAM,CACJ,KAAK,CAAE,IAAI,CACX,KAAK,CAAE,CAAC,CACR,UAAU,CAAE,OACd,CACF"}`
};
const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const apiCategories = [
{
icon: File_json,
title: "File Operations",
path: "/api/files",
endpoints: [
{
method: "GET",
path: "/api/files/list",
desc: "List directory contents"
},
{
method: "POST",
path: "/api/files/read",
desc: "Read file contents"
},
{
method: "POST",
path: "/api/files/write",
desc: "Write to file"
},
{
method: "POST",
path: "/api/files/create",
desc: "Create new file/folder"
},
{
method: "POST",
path: "/api/files/rename",
desc: "Rename file/folder"
},
{
method: "DELETE",
path: "/api/files/delete",
desc: "Delete file/folder"
}
]
},
{
icon: Layers,
title: "Panel Management",
path: "/api/panels",
endpoints: [
{
method: "GET",
path: "/api/panels/list",
desc: "List available panels"
},
{
method: "POST",
path: "/api/panels/create",
desc: "Create new panel instance"
},
{
method: "GET",
path: "/api/panels/layout",
desc: "Get current layout"
},
{
method: "POST",
path: "/api/panels/save",
desc: "Save panel state"
},
{
method: "GET",
path: "/api/panels/templates",
desc: "Get panel templates"
}
]
},
{
icon: Code,
title: "Custom Panels",
path: "/api/custom-panels",
endpoints: [
{
method: "GET",
path: "/api/custom-panels/list",
desc: "List custom panels"
},
{
method: "POST",
path: "/api/custom-panels/create",
desc: "Create custom panel"
},
{
method: "POST",
path: "/api/custom-panels/load",
desc: "Load panel component"
},
{
method: "GET",
path: "/api/custom-panels/watch",
desc: "Watch for changes (SSE)"
}
]
},
{
icon: Settings,
title: "System",
path: "/api/system",
endpoints: [
{
method: "WS",
path: "/api/ws",
desc: "WebSocket connection"
},
{
method: "GET",
path: "/api/sessions",
desc: "List terminal sessions"
},
{
method: "POST",
path: "/api/auth/login",
desc: "Authenticate user"
},
{
method: "POST",
path: "/api/log/browser",
desc: "Browser error logging"
}
]
}
];
$$result.css.add(css);
return `${$$result.head += `<!-- HEAD_svelte-1kdeax4_START -->${$$result.title = `<title>API Reference - MorphBox Documentation</title>`, ""}<!-- HEAD_svelte-1kdeax4_END -->`, ""} <div class="api-overview svelte-1f5gjk"><div class="page-header svelte-1f5gjk">${validate_component(Code, "Code").$$render($$result, { size: 32 }, {}, {})} <h1 class="svelte-1f5gjk" data-svelte-h="svelte-19cxmhl">API Reference</h1></div> <p class="intro svelte-1f5gjk" data-svelte-h="svelte-2vdl25">Complete reference for MorphBox's REST and WebSocket APIs. Use these endpoints to interact with the system programmatically.</p> <div class="base-info svelte-1f5gjk" data-svelte-h="svelte-166zcr6"><h2 class="svelte-1f5gjk">Base URL</h2> <code class="base-url svelte-1f5gjk">http://localhost:3000</code> <p>All API endpoints are relative to this base URL. Replace with your MorphBox instance URL.</p></div> <div class="auth-section svelte-1f5gjk"><h2 data-svelte-h="svelte-19y8rry">Authentication</h2> <p data-svelte-h="svelte-1w0week">Most endpoints require authentication. Include the session token in your requests:</p> <pre class="svelte-1f5gjk"><code class="svelte-1f5gjk">${escape(`// Header authentication
fetch('/api/files/list', {
headers: {
'Authorization': 'Bearer YOUR_SESSION_TOKEN'
}
})
// Cookie authentication (automatic in browser)
fetch('/api/files/list', {
credentials: 'include'
})`)}</code></pre></div> <div class="categories svelte-1f5gjk">${each(apiCategories, (category) => {
return `<div class="category-section svelte-1f5gjk"><div class="category-header svelte-1f5gjk">${validate_component(category.icon || missing_component, "svelte:component").$$render($$result, { size: 24 }, {}, {})} <h2 class="svelte-1f5gjk">${escape(category.title)}</h2></div> <div class="endpoints svelte-1f5gjk">${each(category.endpoints, (endpoint) => {
return `<div class="endpoint svelte-1f5gjk"><span class="${"method method-" + escape(endpoint.method.toLowerCase(), true) + " svelte-1f5gjk"}">${escape(endpoint.method)}</span> <code class="path svelte-1f5gjk">${escape(endpoint.path)}</code> <span class="desc svelte-1f5gjk">${escape(endpoint.desc)}</span> </div>`;
})}</div> </div>`;
})}</div> <div class="response-format svelte-1f5gjk"><h2 data-svelte-h="svelte-rk4duk">Response Format</h2> <p data-svelte-h="svelte-1s4wcna">All API responses follow a consistent format:</p> <h3 class="svelte-1f5gjk" data-svelte-h="svelte-o2nffi">Success Response</h3> <pre class="svelte-1f5gjk"><code class="svelte-1f5gjk">${escape(`{
"success": true,
"data": {
// Response data
}
}`)}</code></pre> <h3 class="svelte-1f5gjk" data-svelte-h="svelte-12upa3d">Error Response</h3> <pre class="svelte-1f5gjk"><code class="svelte-1f5gjk">${escape(`{
"success": false,
"error": {
"code": "ERROR_CODE",
"message": "Human readable error message",
"details": {} // Optional additional information
}
}`)}</code></pre></div> <div class="websocket-section svelte-1f5gjk"><h2 data-svelte-h="svelte-7x7kqn">WebSocket API</h2> <p data-svelte-h="svelte-jvqgn7">Connect to the WebSocket endpoint for real-time communication:</p> <pre class="svelte-1f5gjk"><code class="svelte-1f5gjk">${escape(`const ws = new WebSocket('ws://localhost:3000/api/ws');
ws.onopen = () => {
console.log('Connected to MorphBox');
// Send a message
ws.send(JSON.stringify({
type: 'TERMINAL_INPUT',
payload: {
sessionId: 'abc123',
input: 'ls -la\\n'
}
}));
};
ws.onmessage = (event) => {
const message = JSON.parse(event.data);
console.log('Received:', message);
};`)}</code></pre> <h3 data-svelte-h="svelte-1lnifms">Message Types</h3> <div class="message-types svelte-1f5gjk" data-svelte-h="svelte-1vggh4p"><div class="message-type svelte-1f5gjk"><h4 class="svelte-1f5gjk">Terminal Messages</h4> <ul class="svelte-1f5gjk"><li class="svelte-1f5gjk"><code class="svelte-1f5gjk">TERMINAL_INPUT</code> - Send input to terminal</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">TERMINAL_OUTPUT</code> - Receive terminal output</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">TERMINAL_RESIZE</code> - Resize terminal</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">SESSION_CREATE</code> - Create new session</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">SESSION_ATTACH</code> - Attach to existing session</li></ul></div> <div class="message-type svelte-1f5gjk"><h4 class="svelte-1f5gjk">File System Events</h4> <ul class="svelte-1f5gjk"><li class="svelte-1f5gjk"><code class="svelte-1f5gjk">FILE_CHANGED</code> - File modification notification</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">FILE_CREATED</code> - New file created</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">FILE_DELETED</code> - File deleted</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">DIRECTORY_CHANGED</code> - Directory contents changed</li></ul></div> <div class="message-type svelte-1f5gjk"><h4 class="svelte-1f5gjk">Panel Events</h4> <ul class="svelte-1f5gjk"><li class="svelte-1f5gjk"><code class="svelte-1f5gjk">PANEL_UPDATE</code> - Panel state changed</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">PANEL_MESSAGE</code> - Inter-panel communication</li> <li class="svelte-1f5gjk"><code class="svelte-1f5gjk">LAYOUT_CHANGED</code> - Panel layout modified</li></ul></div></div></div> <div class="examples-section svelte-1f5gjk"><h2 data-svelte-h="svelte-14pa785">Example Usage</h2> <h3 class="svelte-1f5gjk" data-svelte-h="svelte-7hgrly">File Operations</h3> <pre class="svelte-1f5gjk"><code class="svelte-1f5gjk">${escape(`// List files in a directory
const response = await fetch('/api/files/list', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ path: '/home/user/projects' })
});
const { data } = await response.json();
console.log('Files:', data.files);
// Read a file
const fileResponse = await fetch('/api/files/read', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ path: '/home/user/file.txt' })
});
const { data: fileData } = await fileResponse.json();
console.log('Content:', fileData.content);`)}</code></pre> <h3 class="svelte-1f5gjk" data-svelte-h="svelte-xrwbl">Panel Management</h3> <pre class="svelte-1f5gjk"><code class="svelte-1f5gjk">${escape(`// Create a new terminal panel
const createResponse = await fetch('/api/panels/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
type: 'terminal',
title: 'New Terminal',
position: { x: 0, y: 0, width: 50, height: 100 }
})
});
const { data: panel } = await createResponse.json();
console.log('Created panel:', panel.id);`)}</code></pre></div> <div class="rate-limiting svelte-1f5gjk"><h2 class="svelte-1f5gjk" data-svelte-h="svelte-so0jaz">Rate Limiting</h2> <p data-svelte-h="svelte-iyirkg">API endpoints are rate-limited to prevent abuse:</p> <ul class="svelte-1f5gjk" data-svelte-h="svelte-11nefs5"><li>Standard endpoints: 100 requests per minute</li> <li>File write operations: 20 requests per minute</li> <li>WebSocket messages: 50 per second</li></ul> <p data-svelte-h="svelte-1vblwln">Rate limit information is included in response headers:</p> <pre class="svelte-1f5gjk"><code class="svelte-1f5gjk">${escape(`X-RateLimit-Limit: 100
X-RateLimit-Remaining: 95
X-RateLimit-Reset: 1640995200`)}</code></pre></div> <div class="sdks svelte-1f5gjk" data-svelte-h="svelte-191ko1y"><h2>SDKs & Libraries</h2> <p>Official and community SDKs for easier integration:</p> <div class="sdk-grid svelte-1f5gjk"><div class="sdk-card svelte-1f5gjk"><h3 class="svelte-1f5gjk">JavaScript/TypeScript</h3> <code class="svelte-1f5gjk">npm install @morphbox/sdk</code> <a href="https://github.com/morphbox/js-sdk" class="svelte-1f5gjk">View on GitHub</a></div> <div class="sdk-card svelte-1f5gjk"><h3 class="svelte-1f5gjk">Python</h3> <code class="svelte-1f5gjk">pip install morphbox</code> <a href="https://github.com/morphbox/python-sdk" class="svelte-1f5gjk">View on GitHub</a></div> <div class="sdk-card svelte-1f5gjk"><h3 class="svelte-1f5gjk">Go</h3> <code class="svelte-1f5gjk">go get github.com/morphbox/go-sdk</code> <a href="https://github.com/morphbox/go-sdk" class="svelte-1f5gjk">View on GitHub</a></div></div></div> </div>`;
});
export { Page as default };
//# sourceMappingURL=_page.svelte-Dwb7qokv.js.map