morphbox
Version:
Docker-based AI sandbox for development with Claude integration
89 lines (86 loc) • 31.1 kB
JavaScript
import { c as create_ssr_component, e as escape, f as each, d as add_attribute } from './ssr-Bi8A3Ffq.js';
const css = {
code: ".docs-home.svelte-9xnjp.svelte-9xnjp{max-width:1200px;margin:0 auto}.hero.svelte-9xnjp.svelte-9xnjp{text-align:center;padding:60px 0;border-bottom:1px solid var(--border-color, #3e3e42);margin-bottom:60px}.hero.svelte-9xnjp h1.svelte-9xnjp{font-size:3rem;font-weight:700;margin:0 0 16px 0;background:linear-gradient(135deg, var(--accent-color, #4ec9b0), #007acc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle.svelte-9xnjp.svelte-9xnjp{font-size:1.25rem;color:var(--text-secondary, #cccccc);margin:0 0 40px 0;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.5}.hero-stats.svelte-9xnjp.svelte-9xnjp{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}.stat.svelte-9xnjp.svelte-9xnjp{text-align:center}.stat.svelte-9xnjp strong.svelte-9xnjp{display:block;font-size:1.125rem;color:var(--text-primary, #d4d4d4);margin-bottom:4px}.stat.svelte-9xnjp span.svelte-9xnjp{font-size:0.875rem;color:var(--text-tertiary, #858585)}.quick-links.svelte-9xnjp.svelte-9xnjp{margin-bottom:80px}.quick-links.svelte-9xnjp h2.svelte-9xnjp{font-size:2rem;margin:0 0 32px 0;color:var(--text-primary, #d4d4d4)}.links-grid.svelte-9xnjp.svelte-9xnjp{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px}.quick-link-card.svelte-9xnjp.svelte-9xnjp{display:block;padding:24px;background-color:var(--bg-secondary, #252526);border:1px solid var(--border-color, #3e3e42);border-radius:8px;text-decoration:none;transition:all 0.2s;position:relative;overflow:hidden}.quick-link-card.svelte-9xnjp.svelte-9xnjp:hover{border-color:var(--accent-color, #4ec9b0);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.3)}.link-icon.svelte-9xnjp.svelte-9xnjp{font-size:2rem;margin-bottom:12px}.quick-link-card.svelte-9xnjp h3.svelte-9xnjp{font-size:1.25rem;margin:0 0 8px 0;color:var(--text-primary, #d4d4d4)}.quick-link-card.svelte-9xnjp p.svelte-9xnjp{margin:0;color:var(--text-tertiary, #858585);line-height:1.5}.link-arrow.svelte-9xnjp.svelte-9xnjp{position:absolute;top:24px;right:24px;color:var(--accent-color, #4ec9b0);font-size:1.5rem;opacity:0;transition:opacity 0.2s}.quick-link-card.svelte-9xnjp:hover .link-arrow.svelte-9xnjp{opacity:1}.features.svelte-9xnjp.svelte-9xnjp{margin-bottom:80px}.features.svelte-9xnjp h2.svelte-9xnjp{font-size:2rem;margin:0 0 32px 0;color:var(--text-primary, #d4d4d4)}.features-grid.svelte-9xnjp.svelte-9xnjp{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px}.feature-card.svelte-9xnjp.svelte-9xnjp{padding:24px;background-color:var(--bg-secondary, #252526);border:1px solid var(--border-color, #3e3e42);border-radius:8px}.feature-icon.svelte-9xnjp.svelte-9xnjp{font-size:2rem;margin-bottom:12px}.feature-card.svelte-9xnjp h3.svelte-9xnjp{font-size:1.125rem;margin:0 0 8px 0;color:var(--text-primary, #d4d4d4)}.feature-card.svelte-9xnjp p.svelte-9xnjp{margin:0;color:var(--text-tertiary, #858585);line-height:1.5}.getting-started.svelte-9xnjp.svelte-9xnjp{margin-bottom:80px}.getting-started.svelte-9xnjp h2.svelte-9xnjp{font-size:2rem;margin:0 0 32px 0;color:var(--text-primary, #d4d4d4)}.steps.svelte-9xnjp.svelte-9xnjp{display:flex;flex-direction:column;gap:24px}.step.svelte-9xnjp.svelte-9xnjp{display:flex;gap:24px;align-items:flex-start}.step-number.svelte-9xnjp.svelte-9xnjp{width:48px;height:48px;background-color:var(--accent-color, #4ec9b0);color:var(--bg-primary, #1e1e1e);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;flex-shrink:0}.step-content.svelte-9xnjp h3.svelte-9xnjp{font-size:1.25rem;margin:0 0 8px 0;color:var(--text-primary, #d4d4d4)}.step-content.svelte-9xnjp p.svelte-9xnjp{margin:0 0 12px 0;color:var(--text-secondary, #cccccc);line-height:1.5}.step-link.svelte-9xnjp.svelte-9xnjp{color:var(--accent-color, #4ec9b0);text-decoration:none;font-weight:500}.step-link.svelte-9xnjp.svelte-9xnjp:hover{text-decoration:underline}.support.svelte-9xnjp h2.svelte-9xnjp{font-size:2rem;margin:0 0 32px 0;color:var(--text-primary, #d4d4d4)}.support-grid.svelte-9xnjp.svelte-9xnjp{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:24px}.support-card.svelte-9xnjp.svelte-9xnjp{padding:24px;background-color:var(--bg-secondary, #252526);border:1px solid var(--border-color, #3e3e42);border-radius:8px}.support-card.svelte-9xnjp h3.svelte-9xnjp{font-size:1.125rem;margin:0 0 8px 0;color:var(--text-primary, #d4d4d4)}.support-card.svelte-9xnjp p.svelte-9xnjp{margin:0 0 16px 0;color:var(--text-tertiary, #858585);line-height:1.5}.support-card.svelte-9xnjp a.svelte-9xnjp{color:var(--accent-color, #4ec9b0);text-decoration:none;font-weight:500}.support-card.svelte-9xnjp a.svelte-9xnjp:hover{text-decoration:underline}@media(max-width: 768px){.hero.svelte-9xnjp h1.svelte-9xnjp{font-size:2rem}.hero-subtitle.svelte-9xnjp.svelte-9xnjp{font-size:1.125rem}.hero-stats.svelte-9xnjp.svelte-9xnjp{gap:24px}.links-grid.svelte-9xnjp.svelte-9xnjp{grid-template-columns:1fr}.features-grid.svelte-9xnjp.svelte-9xnjp{grid-template-columns:1fr}.step.svelte-9xnjp.svelte-9xnjp{flex-direction:column;gap:16px}.support-grid.svelte-9xnjp.svelte-9xnjp{grid-template-columns:1fr}}",
map: `{"version":3,"file":"+page.svelte","sources":["+page.svelte"],"sourcesContent":["<script lang=\\"ts\\">import { onMount } from \\"svelte\\";\\nlet currentTime = (/* @__PURE__ */ new Date()).toLocaleString();\\nonMount(() => {\\n const interval = setInterval(() => {\\n currentTime = (/* @__PURE__ */ new Date()).toLocaleString();\\n }, 1e3);\\n return () => clearInterval(interval);\\n});\\nconst quickLinks = [\\n {\\n title: \\"Installation\\",\\n description: \\"Get MorphBox up and running in minutes\\",\\n href: \\"/docs/getting-started/installation\\",\\n icon: \\"\\\\u{1F680}\\"\\n },\\n {\\n title: \\"Quick Start\\",\\n description: \\"Your first steps with MorphBox\\",\\n href: \\"/docs/getting-started/quick-start\\",\\n icon: \\"\\\\u26A1\\"\\n },\\n {\\n title: \\"Custom Panels\\",\\n description: \\"Create, share, and import panels with .morph files\\",\\n href: \\"/docs/user-guide/custom-panels\\",\\n icon: \\"\\\\u{1F3A8}\\"\\n },\\n {\\n title: \\"API Reference\\",\\n description: \\"Complete API documentation for panel development\\",\\n href: \\"/docs/api-reference/overview\\",\\n icon: \\"\\\\u{1F527}\\"\\n },\\n {\\n title: \\"Terminal Sessions\\",\\n description: \\"Persistent terminal sessions that survive browser restarts\\",\\n href: \\"/docs/user-guide/terminal-persistence\\",\\n icon: \\"\\\\u{1F5A5}\\\\uFE0F\\"\\n },\\n {\\n title: \\"Mobile Usage\\",\\n description: \\"Use MorphBox on tablets and phones with touch support\\",\\n href: \\"/docs/user-guide/mobile-usage\\",\\n icon: \\"\\\\u{1F4F1}\\"\\n }\\n];\\nconst features = [\\n {\\n title: \\".morph File Format\\",\\n description: \\"Portable custom panels in a single file. Export and import panels with complete history. Share with the community easily.\\",\\n icon: \\"\\\\u{1F4E6}\\"\\n },\\n {\\n title: \\"AI Panel Generation\\",\\n description: \\"Create custom panels using natural language. Claude generates complete HTML/CSS/JS panels. Modify existing panels with AI assistance.\\",\\n icon: \\"\\\\u{1F916}\\"\\n },\\n {\\n title: \\"Persistent Sessions\\",\\n description: \\"Terminal sessions survive disconnections and browser restarts. Multiple independent terminals with full PTY support.\\",\\n icon: \\"\\\\u{1F504}\\"\\n },\\n {\\n title: \\"Mobile Support\\",\\n description: \\"Touch-friendly interface with virtual keyboard. Bottom sheet panel manager. Responsive design for all devices.\\",\\n icon: \\"\\\\u{1F4F1}\\"\\n },\\n {\\n title: \\"NPM Distribution\\",\\n description: \\"Install globally with npm or use npx. Cross-platform support for macOS, Linux, and Windows.\\",\\n icon: \\"\\\\u{1F4E6}\\"\\n },\\n {\\n title: \\"Secure Sandbox\\",\\n description: \\"VM isolation with network filtering. Whitelist-based domain access. Clean snapshots with --reset.\\",\\n icon: \\"\\\\u{1F512}\\"\\n }\\n];\\n<\/script>\\n\\n<svelte:head>\\n <title>MorphBox Documentation</title>\\n <meta name=\\"description\\" content=\\"Complete documentation for MorphBox - a fast-loading safe AI sandbox for development\\" />\\n</svelte:head>\\n\\n<div class=\\"docs-home\\">\\n <!-- Hero Section -->\\n <section class=\\"hero\\">\\n <div class=\\"hero-content\\">\\n <h1>MorphBox Documentation</h1>\\n <p class=\\"hero-subtitle\\">\\n Complete guide to using MorphBox - a fast-loading safe AI sandbox for development with Claude AI integration.\\n </p>\\n <div class=\\"hero-stats\\">\\n <div class=\\"stat\\">\\n <strong>Version 0.7.1</strong>\\n <span>Latest Release</span>\\n </div>\\n <div class=\\"stat\\">\\n <strong>Apache 2.0</strong>\\n <span>Open Source License</span>\\n </div>\\n <div class=\\"stat\\">\\n <strong>{currentTime}</strong>\\n <span>Documentation Generated</span>\\n </div>\\n </div>\\n </div>\\n </section>\\n\\n <!-- Quick Links -->\\n <section class=\\"quick-links\\">\\n <h2>Quick Start</h2>\\n <div class=\\"links-grid\\">\\n {#each quickLinks as link}\\n <a href={link.href} class=\\"quick-link-card\\">\\n <div class=\\"link-icon\\">{link.icon}</div>\\n <h3>{link.title}</h3>\\n <p>{link.description}</p>\\n <div class=\\"link-arrow\\">→</div>\\n </a>\\n {/each}\\n </div>\\n </section>\\n\\n <!-- Features Overview -->\\n <section class=\\"features\\">\\n <h2>Key Features</h2>\\n <div class=\\"features-grid\\">\\n {#each features as feature}\\n <div class=\\"feature-card\\">\\n <div class=\\"feature-icon\\">{feature.icon}</div>\\n <h3>{feature.title}</h3>\\n <p>{feature.description}</p>\\n </div>\\n {/each}\\n </div>\\n </section>\\n\\n <!-- Getting Started -->\\n <section class=\\"getting-started\\">\\n <h2>Get Started in Minutes</h2>\\n <div class=\\"steps\\">\\n <div class=\\"step\\">\\n <div class=\\"step-number\\">1</div>\\n <div class=\\"step-content\\">\\n <h3>Install MorphBox</h3>\\n <p>Download and install MorphBox using our simple installation script</p>\\n <a href=\\"/docs/getting-started/installation\\" class=\\"step-link\\">Installation Guide →</a>\\n </div>\\n </div>\\n <div class=\\"step\\">\\n <div class=\\"step-number\\">2</div>\\n <div class=\\"step-content\\">\\n <h3>Authenticate with Claude</h3>\\n <p>Set up Claude authentication once and enjoy persistent sessions</p>\\n <a href=\\"/docs/user-guide/authentication\\" class=\\"step-link\\">Auth Setup →</a>\\n </div>\\n </div>\\n <div class=\\"step\\">\\n <div class=\\"step-number\\">3</div>\\n <div class=\\"step-content\\">\\n <h3>Start Building</h3>\\n <p>Use MorphBox's powerful features to enhance your development workflow</p>\\n <a href=\\"/docs/user-guide\\" class=\\"step-link\\">User Guide →</a>\\n </div>\\n </div>\\n </div>\\n </section>\\n\\n <!-- Help & Support -->\\n <section class=\\"support\\">\\n <h2>Need Help?</h2>\\n <div class=\\"support-grid\\">\\n <div class=\\"support-card\\">\\n <h3>📖 User Guide</h3>\\n <p>Comprehensive documentation covering all MorphBox features</p>\\n <a href=\\"/docs/user-guide\\">Browse User Guide</a>\\n </div>\\n <div class=\\"support-card\\">\\n <h3>🐛 Troubleshooting</h3>\\n <p>Common issues and their solutions</p>\\n <a href=\\"/docs/support/troubleshooting\\">Get Help</a>\\n </div>\\n <div class=\\"support-card\\">\\n <h3>💬 Community</h3>\\n <p>Connect with other MorphBox users and contributors</p>\\n <a href=\\"/docs/support/community\\">Join Community</a>\\n </div>\\n <div class=\\"support-card\\">\\n <h3>🚀 Contributing</h3>\\n <p>Help improve MorphBox by contributing code or documentation</p>\\n <a href=\\"/docs/contributing\\">Start Contributing</a>\\n </div>\\n </div>\\n </section>\\n</div>\\n\\n<style>\\n .docs-home {\\n max-width: 1200px;\\n margin: 0 auto;\\n }\\n\\n /* Hero Section */\\n .hero {\\n text-align: center;\\n padding: 60px 0;\\n border-bottom: 1px solid var(--border-color, #3e3e42);\\n margin-bottom: 60px;\\n }\\n\\n .hero h1 {\\n font-size: 3rem;\\n font-weight: 700;\\n margin: 0 0 16px 0;\\n background: linear-gradient(135deg, var(--accent-color, #4ec9b0), #007acc);\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n background-clip: text;\\n }\\n\\n .hero-subtitle {\\n font-size: 1.25rem;\\n color: var(--text-secondary, #cccccc);\\n margin: 0 0 40px 0;\\n max-width: 600px;\\n margin-left: auto;\\n margin-right: auto;\\n line-height: 1.5;\\n }\\n\\n .hero-stats {\\n display: flex;\\n justify-content: center;\\n gap: 40px;\\n flex-wrap: wrap;\\n }\\n\\n .stat {\\n text-align: center;\\n }\\n\\n .stat strong {\\n display: block;\\n font-size: 1.125rem;\\n color: var(--text-primary, #d4d4d4);\\n margin-bottom: 4px;\\n }\\n\\n .stat span {\\n font-size: 0.875rem;\\n color: var(--text-tertiary, #858585);\\n }\\n\\n /* Quick Links */\\n .quick-links {\\n margin-bottom: 80px;\\n }\\n\\n .quick-links h2 {\\n font-size: 2rem;\\n margin: 0 0 32px 0;\\n color: var(--text-primary, #d4d4d4);\\n }\\n\\n .links-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\\n gap: 24px;\\n }\\n\\n .quick-link-card {\\n display: block;\\n padding: 24px;\\n background-color: var(--bg-secondary, #252526);\\n border: 1px solid var(--border-color, #3e3e42);\\n border-radius: 8px;\\n text-decoration: none;\\n transition: all 0.2s;\\n position: relative;\\n overflow: hidden;\\n }\\n\\n .quick-link-card:hover {\\n border-color: var(--accent-color, #4ec9b0);\\n transform: translateY(-2px);\\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\\n }\\n\\n .link-icon {\\n font-size: 2rem;\\n margin-bottom: 12px;\\n }\\n\\n .quick-link-card h3 {\\n font-size: 1.25rem;\\n margin: 0 0 8px 0;\\n color: var(--text-primary, #d4d4d4);\\n }\\n\\n .quick-link-card p {\\n margin: 0;\\n color: var(--text-tertiary, #858585);\\n line-height: 1.5;\\n }\\n\\n .link-arrow {\\n position: absolute;\\n top: 24px;\\n right: 24px;\\n color: var(--accent-color, #4ec9b0);\\n font-size: 1.5rem;\\n opacity: 0;\\n transition: opacity 0.2s;\\n }\\n\\n .quick-link-card:hover .link-arrow {\\n opacity: 1;\\n }\\n\\n /* Features */\\n .features {\\n margin-bottom: 80px;\\n }\\n\\n .features h2 {\\n font-size: 2rem;\\n margin: 0 0 32px 0;\\n color: var(--text-primary, #d4d4d4);\\n }\\n\\n .features-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\\n gap: 24px;\\n }\\n\\n .feature-card {\\n padding: 24px;\\n background-color: var(--bg-secondary, #252526);\\n border: 1px solid var(--border-color, #3e3e42);\\n border-radius: 8px;\\n }\\n\\n .feature-icon {\\n font-size: 2rem;\\n margin-bottom: 12px;\\n }\\n\\n .feature-card h3 {\\n font-size: 1.125rem;\\n margin: 0 0 8px 0;\\n color: var(--text-primary, #d4d4d4);\\n }\\n\\n .feature-card p {\\n margin: 0;\\n color: var(--text-tertiary, #858585);\\n line-height: 1.5;\\n }\\n\\n /* Getting Started */\\n .getting-started {\\n margin-bottom: 80px;\\n }\\n\\n .getting-started h2 {\\n font-size: 2rem;\\n margin: 0 0 32px 0;\\n color: var(--text-primary, #d4d4d4);\\n }\\n\\n .steps {\\n display: flex;\\n flex-direction: column;\\n gap: 24px;\\n }\\n\\n .step {\\n display: flex;\\n gap: 24px;\\n align-items: flex-start;\\n }\\n\\n .step-number {\\n width: 48px;\\n height: 48px;\\n background-color: var(--accent-color, #4ec9b0);\\n color: var(--bg-primary, #1e1e1e);\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n font-weight: 700;\\n font-size: 1.25rem;\\n flex-shrink: 0;\\n }\\n\\n .step-content h3 {\\n font-size: 1.25rem;\\n margin: 0 0 8px 0;\\n color: var(--text-primary, #d4d4d4);\\n }\\n\\n .step-content p {\\n margin: 0 0 12px 0;\\n color: var(--text-secondary, #cccccc);\\n line-height: 1.5;\\n }\\n\\n .step-link {\\n color: var(--accent-color, #4ec9b0);\\n text-decoration: none;\\n font-weight: 500;\\n }\\n\\n .step-link:hover {\\n text-decoration: underline;\\n }\\n\\n /* Support */\\n .support h2 {\\n font-size: 2rem;\\n margin: 0 0 32px 0;\\n color: var(--text-primary, #d4d4d4);\\n }\\n\\n .support-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 24px;\\n }\\n\\n .support-card {\\n padding: 24px;\\n background-color: var(--bg-secondary, #252526);\\n border: 1px solid var(--border-color, #3e3e42);\\n border-radius: 8px;\\n }\\n\\n .support-card h3 {\\n font-size: 1.125rem;\\n margin: 0 0 8px 0;\\n color: var(--text-primary, #d4d4d4);\\n }\\n\\n .support-card p {\\n margin: 0 0 16px 0;\\n color: var(--text-tertiary, #858585);\\n line-height: 1.5;\\n }\\n\\n .support-card a {\\n color: var(--accent-color, #4ec9b0);\\n text-decoration: none;\\n font-weight: 500;\\n }\\n\\n .support-card a:hover {\\n text-decoration: underline;\\n }\\n\\n /* Mobile Responsive */\\n @media (max-width: 768px) {\\n .hero h1 {\\n font-size: 2rem;\\n }\\n\\n .hero-subtitle {\\n font-size: 1.125rem;\\n }\\n\\n .hero-stats {\\n gap: 24px;\\n }\\n\\n .links-grid {\\n grid-template-columns: 1fr;\\n }\\n\\n .features-grid {\\n grid-template-columns: 1fr;\\n }\\n\\n .step {\\n flex-direction: column;\\n gap: 16px;\\n }\\n\\n .support-grid {\\n grid-template-columns: 1fr;\\n }\\n }\\n</style>"],"names":[],"mappings":"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"}`
};
const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
let currentTime = /* @__PURE__ */ (/* @__PURE__ */ new Date()).toLocaleString();
const quickLinks = [
{
title: "Installation",
description: "Get MorphBox up and running in minutes",
href: "/docs/getting-started/installation",
icon: "🚀"
},
{
title: "Quick Start",
description: "Your first steps with MorphBox",
href: "/docs/getting-started/quick-start",
icon: "⚡"
},
{
title: "Custom Panels",
description: "Create, share, and import panels with .morph files",
href: "/docs/user-guide/custom-panels",
icon: "🎨"
},
{
title: "API Reference",
description: "Complete API documentation for panel development",
href: "/docs/api-reference/overview",
icon: "🔧"
},
{
title: "Terminal Sessions",
description: "Persistent terminal sessions that survive browser restarts",
href: "/docs/user-guide/terminal-persistence",
icon: "🖥️"
},
{
title: "Mobile Usage",
description: "Use MorphBox on tablets and phones with touch support",
href: "/docs/user-guide/mobile-usage",
icon: "📱"
}
];
const features = [
{
title: ".morph File Format",
description: "Portable custom panels in a single file. Export and import panels with complete history. Share with the community easily.",
icon: "📦"
},
{
title: "AI Panel Generation",
description: "Create custom panels using natural language. Claude generates complete HTML/CSS/JS panels. Modify existing panels with AI assistance.",
icon: "🤖"
},
{
title: "Persistent Sessions",
description: "Terminal sessions survive disconnections and browser restarts. Multiple independent terminals with full PTY support.",
icon: "🔄"
},
{
title: "Mobile Support",
description: "Touch-friendly interface with virtual keyboard. Bottom sheet panel manager. Responsive design for all devices.",
icon: "📱"
},
{
title: "NPM Distribution",
description: "Install globally with npm or use npx. Cross-platform support for macOS, Linux, and Windows.",
icon: "📦"
},
{
title: "Secure Sandbox",
description: "VM isolation with network filtering. Whitelist-based domain access. Clean snapshots with --reset.",
icon: "🔒"
}
];
$$result.css.add(css);
return `${$$result.head += `<!-- HEAD_svelte-1vtt3t4_START -->${$$result.title = `<title>MorphBox Documentation</title>`, ""}<meta name="description" content="Complete documentation for MorphBox - a fast-loading safe AI sandbox for development"><!-- HEAD_svelte-1vtt3t4_END -->`, ""} <div class="docs-home svelte-9xnjp"> <section class="hero svelte-9xnjp"><div class="hero-content"><h1 class="svelte-9xnjp" data-svelte-h="svelte-jy2g19">MorphBox Documentation</h1> <p class="hero-subtitle svelte-9xnjp" data-svelte-h="svelte-l731da">Complete guide to using MorphBox - a fast-loading safe AI sandbox for development with Claude AI integration.</p> <div class="hero-stats svelte-9xnjp"><div class="stat svelte-9xnjp" data-svelte-h="svelte-9mso67"><strong class="svelte-9xnjp">Version 0.7.1</strong> <span class="svelte-9xnjp">Latest Release</span></div> <div class="stat svelte-9xnjp" data-svelte-h="svelte-80pi3r"><strong class="svelte-9xnjp">Apache 2.0</strong> <span class="svelte-9xnjp">Open Source License</span></div> <div class="stat svelte-9xnjp"><strong class="svelte-9xnjp">${escape(currentTime)}</strong> <span class="svelte-9xnjp" data-svelte-h="svelte-1pqokjb">Documentation Generated</span></div></div></div></section> <section class="quick-links svelte-9xnjp"><h2 class="svelte-9xnjp" data-svelte-h="svelte-7tv6tr">Quick Start</h2> <div class="links-grid svelte-9xnjp">${each(quickLinks, (link) => {
return `<a${add_attribute("href", link.href, 0)} class="quick-link-card svelte-9xnjp"><div class="link-icon svelte-9xnjp">${escape(link.icon)}</div> <h3 class="svelte-9xnjp">${escape(link.title)}</h3> <p class="svelte-9xnjp">${escape(link.description)}</p> <div class="link-arrow svelte-9xnjp" data-svelte-h="svelte-1xcvs1n">→</div> </a>`;
})}</div></section> <section class="features svelte-9xnjp"><h2 class="svelte-9xnjp" data-svelte-h="svelte-2kla1g">Key Features</h2> <div class="features-grid svelte-9xnjp">${each(features, (feature) => {
return `<div class="feature-card svelte-9xnjp"><div class="feature-icon svelte-9xnjp">${escape(feature.icon)}</div> <h3 class="svelte-9xnjp">${escape(feature.title)}</h3> <p class="svelte-9xnjp">${escape(feature.description)}</p> </div>`;
})}</div></section> <section class="getting-started svelte-9xnjp" data-svelte-h="svelte-16b3ebu"><h2 class="svelte-9xnjp">Get Started in Minutes</h2> <div class="steps svelte-9xnjp"><div class="step svelte-9xnjp"><div class="step-number svelte-9xnjp">1</div> <div class="step-content svelte-9xnjp"><h3 class="svelte-9xnjp">Install MorphBox</h3> <p class="svelte-9xnjp">Download and install MorphBox using our simple installation script</p> <a href="/docs/getting-started/installation" class="step-link svelte-9xnjp">Installation Guide →</a></div></div> <div class="step svelte-9xnjp"><div class="step-number svelte-9xnjp">2</div> <div class="step-content svelte-9xnjp"><h3 class="svelte-9xnjp">Authenticate with Claude</h3> <p class="svelte-9xnjp">Set up Claude authentication once and enjoy persistent sessions</p> <a href="/docs/user-guide/authentication" class="step-link svelte-9xnjp">Auth Setup →</a></div></div> <div class="step svelte-9xnjp"><div class="step-number svelte-9xnjp">3</div> <div class="step-content svelte-9xnjp"><h3 class="svelte-9xnjp">Start Building</h3> <p class="svelte-9xnjp">Use MorphBox's powerful features to enhance your development workflow</p> <a href="/docs/user-guide" class="step-link svelte-9xnjp">User Guide →</a></div></div></div></section> <section class="support svelte-9xnjp" data-svelte-h="svelte-1xf5d5h"><h2 class="svelte-9xnjp">Need Help?</h2> <div class="support-grid svelte-9xnjp"><div class="support-card svelte-9xnjp"><h3 class="svelte-9xnjp">📖 User Guide</h3> <p class="svelte-9xnjp">Comprehensive documentation covering all MorphBox features</p> <a href="/docs/user-guide" class="svelte-9xnjp">Browse User Guide</a></div> <div class="support-card svelte-9xnjp"><h3 class="svelte-9xnjp">🐛 Troubleshooting</h3> <p class="svelte-9xnjp">Common issues and their solutions</p> <a href="/docs/support/troubleshooting" class="svelte-9xnjp">Get Help</a></div> <div class="support-card svelte-9xnjp"><h3 class="svelte-9xnjp">💬 Community</h3> <p class="svelte-9xnjp">Connect with other MorphBox users and contributors</p> <a href="/docs/support/community" class="svelte-9xnjp">Join Community</a></div> <div class="support-card svelte-9xnjp"><h3 class="svelte-9xnjp">🚀 Contributing</h3> <p class="svelte-9xnjp">Help improve MorphBox by contributing code or documentation</p> <a href="/docs/contributing" class="svelte-9xnjp">Start Contributing</a></div></div></section> </div>`;
});
export { Page as default };
//# sourceMappingURL=_page.svelte-Bgh2BoeI.js.map