morphbox
Version:
Docker-based AI sandbox for development with Claude integration
204 lines (201 loc) • 26.9 kB
JavaScript
import { c as create_ssr_component, v as validate_component, f as each, e as escape, m as missing_component } from './ssr-Bi8A3Ffq.js';
import { I as Icon } from './Icon-BX2G3WyD.js';
const Maximize_2 = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
["path", { "d": "M15 3h6v6" }],
["path", { "d": "m21 3-7 7" }],
["path", { "d": "m3 21 7-7" }],
["path", { "d": "M9 21H3v-6" }]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "maximize-2" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const Move = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
["path", { "d": "M12 2v20" }],
["path", { "d": "m15 19-3 3-3-3" }],
["path", { "d": "m19 9 3 3-3 3" }],
["path", { "d": "M2 12h20" }],
["path", { "d": "m5 9-3 3 3 3" }],
["path", { "d": "m9 5 3-3 3 3" }]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "move" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const Panel_left = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
[
"rect",
{
"width": "18",
"height": "18",
"x": "3",
"y": "3",
"rx": "2"
}
],
["path", { "d": "M9 3v18" }]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "panel-left" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const Smartphone = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
[
"rect",
{
"width": "14",
"height": "20",
"x": "5",
"y": "2",
"rx": "2",
"ry": "2"
}
],
["path", { "d": "M12 18h.01" }]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "smartphone" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const Tablet = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
[
"rect",
{
"width": "16",
"height": "20",
"x": "4",
"y": "2",
"rx": "2",
"ry": "2"
}
],
[
"line",
{
"x1": "12",
"x2": "12.01",
"y1": "18",
"y2": "18"
}
]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "tablet" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const Touchpad = create_ssr_component(($$result, $$props, $$bindings, slots) => {
const iconNode = [
[
"rect",
{
"width": "20",
"height": "16",
"x": "2",
"y": "4",
"rx": "2"
}
],
["path", { "d": "M2 14h20" }],
["path", { "d": "M12 20v-6" }]
];
return `${validate_component(Icon, "Icon").$$render($$result, Object.assign({}, { name: "touchpad" }, $$props, { iconNode }), {}, {
default: () => {
return `${slots.default ? slots.default({}) : ``}`;
}
})}`;
});
const css = {
code: ".mobile-guide.svelte-1idcyy9.svelte-1idcyy9{padding:2rem;max-width:1000px;margin:0 auto}.page-header.svelte-1idcyy9.svelte-1idcyy9{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.page-header.svelte-1idcyy9 h1.svelte-1idcyy9{margin:0}.intro.svelte-1idcyy9.svelte-1idcyy9{font-size:1.1rem;color:var(--text-secondary);margin-bottom:3rem}.features-grid.svelte-1idcyy9.svelte-1idcyy9{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1.5rem;margin-bottom:3rem}.feature-card.svelte-1idcyy9.svelte-1idcyy9{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;text-align:center}.feature-card.svelte-1idcyy9 h3.svelte-1idcyy9{margin:0.75rem 0 0.5rem;font-size:1.1rem}.feature-card.svelte-1idcyy9 p.svelte-1idcyy9{margin:0;color:var(--text-secondary);font-size:0.9rem}.device-section.svelte-1idcyy9.svelte-1idcyy9{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.device-section.svelte-1idcyy9 h2.svelte-1idcyy9{display:flex;align-items:center;gap:0.5rem;margin:0 0 1rem 0}.device-content.svelte-1idcyy9 ul.svelte-1idcyy9{margin:1rem 0;padding-left:1.5rem}.screenshot-placeholder.svelte-1idcyy9.svelte-1idcyy9{background:var(--surface-primary);border:1px solid var(--border);border-radius:4px;padding:3rem;text-align:center;color:var(--text-secondary);font-style:italic}.tips-container.svelte-1idcyy9.svelte-1idcyy9{margin-bottom:2rem}.tips-container.svelte-1idcyy9 h2.svelte-1idcyy9{margin-bottom:1.5rem}.tip-section.svelte-1idcyy9.svelte-1idcyy9{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;margin-bottom:1rem}.tip-section.svelte-1idcyy9 h3.svelte-1idcyy9{margin:0 0 1rem 0;color:var(--text-primary)}.tip-section.svelte-1idcyy9 ul.svelte-1idcyy9{margin:0;padding-left:1.5rem}.tip-section.svelte-1idcyy9 li.svelte-1idcyy9{margin-bottom:0.5rem;line-height:1.6}.troubleshooting.svelte-1idcyy9.svelte-1idcyy9{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.troubleshooting.svelte-1idcyy9 h2.svelte-1idcyy9{margin:0 0 1.5rem 0}.issue.svelte-1idcyy9.svelte-1idcyy9{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}.issue.svelte-1idcyy9.svelte-1idcyy9:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.issue.svelte-1idcyy9 h4.svelte-1idcyy9{margin:0 0 0.5rem 0;color:var(--text-primary)}.issue.svelte-1idcyy9 p.svelte-1idcyy9{margin:0;color:var(--text-secondary)}.optimization-tips.svelte-1idcyy9.svelte-1idcyy9,.external-keyboards.svelte-1idcyy9.svelte-1idcyy9{background:var(--surface-secondary);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.optimization-tips.svelte-1idcyy9 h2.svelte-1idcyy9,.external-keyboards.svelte-1idcyy9 h2.svelte-1idcyy9{margin:0 0 1rem 0}.optimization-tips.svelte-1idcyy9 ul.svelte-1idcyy9,.external-keyboards.svelte-1idcyy9 ul.svelte-1idcyy9{margin:1rem 0 0 0;padding-left:1.5rem}.optimization-tips.svelte-1idcyy9 li.svelte-1idcyy9,.external-keyboards.svelte-1idcyy9 li.svelte-1idcyy9{margin-bottom:0.5rem;line-height:1.6}@media(max-width: 768px){.mobile-guide.svelte-1idcyy9.svelte-1idcyy9{padding:1rem}.features-grid.svelte-1idcyy9.svelte-1idcyy9{grid-template-columns:1fr}}",
map: `{"version":3,"file":"+page.svelte","sources":["+page.svelte"],"sourcesContent":["<script>\\n import { Smartphone, Tablet, TouchpadIcon, Move, Maximize2, PanelLeft } from 'lucide-svelte';\\n \\n const features = [\\n {\\n icon: TouchpadIcon,\\n title: 'Touch-Optimized Interface',\\n description: 'Every component is designed for touch interaction with appropriately sized tap targets.'\\n },\\n {\\n icon: PanelLeft,\\n title: 'Adaptive Panels',\\n description: 'Panels automatically adjust to mobile screen sizes with collapsible sidebars.'\\n },\\n {\\n icon: Move,\\n title: 'Gesture Support',\\n description: 'Swipe to open/close panels, pinch to zoom in code editor, and more intuitive gestures.'\\n },\\n {\\n icon: Maximize2,\\n title: 'Resizable Terminal',\\n description: 'Drag the terminal height on mobile for the perfect coding setup.'\\n }\\n ];\\n\\n const tips = [\\n {\\n category: 'Terminal Usage',\\n items: [\\n 'Use the ESC and Shift+Tab buttons in the terminal header for keys not available on mobile keyboards',\\n 'Drag the resize handle at the top of the terminal to adjust height',\\n 'Long press in terminal to access copy/paste options',\\n 'Terminal sessions persist even when switching apps'\\n ]\\n },\\n {\\n category: 'Code Editor',\\n items: [\\n 'Pinch to zoom for better readability',\\n 'Double-tap to select words',\\n 'Triple-tap to select lines',\\n 'Use the toolbar for common actions like save, find, and replace',\\n 'Swipe left/right on the tab bar to switch files'\\n ]\\n },\\n {\\n category: 'Panel Navigation',\\n items: [\\n 'Tap the menu button to access all panels',\\n 'Swipe right from the left edge to open panel menu',\\n 'Swipe left to close panels',\\n 'Long press panel headers for options',\\n 'Use the color palette icon instead of individual color buttons'\\n ]\\n },\\n {\\n category: 'File Management',\\n items: [\\n 'Tap files to open, tap folders to expand',\\n 'Long press for context menu (rename, delete, etc.)',\\n 'Use the + button to create new files/folders',\\n 'Files open in new panels automatically'\\n ]\\n }\\n ];\\n<\/script>\\n\\n<svelte:head>\\n <title>Mobile Usage Guide - MorphBox Documentation</title>\\n</svelte:head>\\n\\n<div class=\\"mobile-guide\\">\\n <div class=\\"page-header\\">\\n <Smartphone size={32} />\\n <h1>Mobile Usage Guide</h1>\\n </div>\\n\\n <p class=\\"intro\\">\\n MorphBox is fully optimized for mobile devices, providing a complete development environment on your phone or tablet.\\n </p>\\n\\n <div class=\\"features-grid\\">\\n {#each features as feature}\\n <div class=\\"feature-card\\">\\n <svelte:component this={feature.icon} size={24} />\\n <h3>{feature.title}</h3>\\n <p>{feature.description}</p>\\n </div>\\n {/each}\\n </div>\\n\\n <div class=\\"device-section\\">\\n <h2>\\n <Smartphone size={20} />\\n Phone Experience\\n </h2>\\n <div class=\\"device-content\\">\\n <p>On phones, MorphBox adapts to the smaller screen with:</p>\\n <ul>\\n <li>Single panel view with quick switching</li>\\n <li>Collapsible panels to maximize screen space</li>\\n <li>Optimized touch targets for accuracy</li>\\n <li>Virtual keyboard-aware layouts</li>\\n </ul>\\n \\n <div class=\\"screenshot-placeholder\\">\\n <p>MorphBox on iPhone</p>\\n </div>\\n </div>\\n </div>\\n\\n <div class=\\"device-section\\">\\n <h2>\\n <Tablet size={20} />\\n Tablet Experience\\n </h2>\\n <div class=\\"device-content\\">\\n <p>Tablets get an enhanced experience with:</p>\\n <ul>\\n <li>Split-screen panel layouts</li>\\n <li>Desktop-like file explorer</li>\\n <li>Extended keyboard shortcuts</li>\\n <li>Multi-touch gestures</li>\\n </ul>\\n \\n <div class=\\"screenshot-placeholder\\">\\n <p>MorphBox on iPad</p>\\n </div>\\n </div>\\n </div>\\n\\n <div class=\\"tips-container\\">\\n <h2>Tips & Best Practices</h2>\\n \\n {#each tips as section}\\n <div class=\\"tip-section\\">\\n <h3>{section.category}</h3>\\n <ul>\\n {#each section.items as tip}\\n <li>{tip}</li>\\n {/each}\\n </ul>\\n </div>\\n {/each}\\n </div>\\n\\n <div class=\\"troubleshooting\\">\\n <h2>Common Issues & Solutions</h2>\\n \\n <div class=\\"issue\\">\\n <h4>Virtual keyboard covers content</h4>\\n <p>The layout automatically adjusts when the keyboard appears. If issues persist, try rotating your device or adjusting the terminal height.</p>\\n </div>\\n \\n <div class=\\"issue\\">\\n <h4>Text selection difficulties</h4>\\n <p>Use the magnifying glass gesture (long press) for precise cursor placement. Double and triple tap for word/line selection.</p>\\n </div>\\n \\n <div class=\\"issue\\">\\n <h4>Panel switching feels slow</h4>\\n <p>Use swipe gestures instead of buttons for faster navigation. Swipe from the left edge to quickly access the panel menu.</p>\\n </div>\\n \\n <div class=\\"issue\\">\\n <h4>Terminal keys missing</h4>\\n <p>Use the ESC and Shift+Tab buttons in the terminal header. For more special keys, consider using a mobile terminal keyboard app.</p>\\n </div>\\n </div>\\n\\n <div class=\\"optimization-tips\\">\\n <h2>Performance Optimization</h2>\\n <ul>\\n <li><strong>Close unused panels:</strong> Free up memory by closing panels you're not actively using</li>\\n <li><strong>Use lightweight themes:</strong> Dark themes typically use less battery on OLED screens</li>\\n <li><strong>Limit terminal scrollback:</strong> Large scrollback buffers can impact performance</li>\\n <li><strong>Enable hardware acceleration:</strong> Ensure your browser settings have this enabled</li>\\n </ul>\\n </div>\\n\\n <div class=\\"external-keyboards\\">\\n <h2>External Keyboard Support</h2>\\n <p>\\n When using an external keyboard with your mobile device, MorphBox provides a desktop-like experience:\\n </p>\\n <ul>\\n <li>All desktop keyboard shortcuts work as expected</li>\\n <li>Tab key properly functions in terminal and code editor</li>\\n <li>Cmd/Ctrl combinations for quick actions</li>\\n <li>Arrow keys for navigation</li>\\n </ul>\\n </div>\\n</div>\\n\\n<style>\\n .mobile-guide {\\n padding: 2rem;\\n max-width: 1000px;\\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 .features-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\\n gap: 1.5rem;\\n margin-bottom: 3rem;\\n }\\n\\n .feature-card {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n text-align: center;\\n }\\n\\n .feature-card h3 {\\n margin: 0.75rem 0 0.5rem;\\n font-size: 1.1rem;\\n }\\n\\n .feature-card p {\\n margin: 0;\\n color: var(--text-secondary);\\n font-size: 0.9rem;\\n }\\n\\n .device-section {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n margin-bottom: 2rem;\\n }\\n\\n .device-section h2 {\\n display: flex;\\n align-items: center;\\n gap: 0.5rem;\\n margin: 0 0 1rem 0;\\n }\\n\\n .device-content ul {\\n margin: 1rem 0;\\n padding-left: 1.5rem;\\n }\\n\\n .screenshot-placeholder {\\n background: var(--surface-primary);\\n border: 1px solid var(--border);\\n border-radius: 4px;\\n padding: 3rem;\\n text-align: center;\\n color: var(--text-secondary);\\n font-style: italic;\\n }\\n\\n .tips-container {\\n margin-bottom: 2rem;\\n }\\n\\n .tips-container h2 {\\n margin-bottom: 1.5rem;\\n }\\n\\n .tip-section {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n margin-bottom: 1rem;\\n }\\n\\n .tip-section h3 {\\n margin: 0 0 1rem 0;\\n color: var(--text-primary);\\n }\\n\\n .tip-section ul {\\n margin: 0;\\n padding-left: 1.5rem;\\n }\\n\\n .tip-section li {\\n margin-bottom: 0.5rem;\\n line-height: 1.6;\\n }\\n\\n .troubleshooting {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n margin-bottom: 2rem;\\n }\\n\\n .troubleshooting h2 {\\n margin: 0 0 1.5rem 0;\\n }\\n\\n .issue {\\n margin-bottom: 1.5rem;\\n padding-bottom: 1.5rem;\\n border-bottom: 1px solid var(--border);\\n }\\n\\n .issue:last-child {\\n margin-bottom: 0;\\n padding-bottom: 0;\\n border-bottom: none;\\n }\\n\\n .issue h4 {\\n margin: 0 0 0.5rem 0;\\n color: var(--text-primary);\\n }\\n\\n .issue p {\\n margin: 0;\\n color: var(--text-secondary);\\n }\\n\\n .optimization-tips,\\n .external-keyboards {\\n background: var(--surface-secondary);\\n border-radius: 8px;\\n padding: 1.5rem;\\n margin-bottom: 2rem;\\n }\\n\\n .optimization-tips h2,\\n .external-keyboards h2 {\\n margin: 0 0 1rem 0;\\n }\\n\\n .optimization-tips ul,\\n .external-keyboards ul {\\n margin: 1rem 0 0 0;\\n padding-left: 1.5rem;\\n }\\n\\n .optimization-tips li,\\n .external-keyboards li {\\n margin-bottom: 0.5rem;\\n line-height: 1.6;\\n }\\n\\n @media (max-width: 768px) {\\n .mobile-guide {\\n padding: 1rem;\\n }\\n\\n .features-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) => {
const features = [
{
icon: Touchpad,
title: "Touch-Optimized Interface",
description: "Every component is designed for touch interaction with appropriately sized tap targets."
},
{
icon: Panel_left,
title: "Adaptive Panels",
description: "Panels automatically adjust to mobile screen sizes with collapsible sidebars."
},
{
icon: Move,
title: "Gesture Support",
description: "Swipe to open/close panels, pinch to zoom in code editor, and more intuitive gestures."
},
{
icon: Maximize_2,
title: "Resizable Terminal",
description: "Drag the terminal height on mobile for the perfect coding setup."
}
];
const tips = [
{
category: "Terminal Usage",
items: [
"Use the ESC and Shift+Tab buttons in the terminal header for keys not available on mobile keyboards",
"Drag the resize handle at the top of the terminal to adjust height",
"Long press in terminal to access copy/paste options",
"Terminal sessions persist even when switching apps"
]
},
{
category: "Code Editor",
items: [
"Pinch to zoom for better readability",
"Double-tap to select words",
"Triple-tap to select lines",
"Use the toolbar for common actions like save, find, and replace",
"Swipe left/right on the tab bar to switch files"
]
},
{
category: "Panel Navigation",
items: [
"Tap the menu button to access all panels",
"Swipe right from the left edge to open panel menu",
"Swipe left to close panels",
"Long press panel headers for options",
"Use the color palette icon instead of individual color buttons"
]
},
{
category: "File Management",
items: [
"Tap files to open, tap folders to expand",
"Long press for context menu (rename, delete, etc.)",
"Use the + button to create new files/folders",
"Files open in new panels automatically"
]
}
];
$$result.css.add(css);
return `${$$result.head += `<!-- HEAD_svelte-9z8m6q_START -->${$$result.title = `<title>Mobile Usage Guide - MorphBox Documentation</title>`, ""}<!-- HEAD_svelte-9z8m6q_END -->`, ""} <div class="mobile-guide svelte-1idcyy9"><div class="page-header svelte-1idcyy9">${validate_component(Smartphone, "Smartphone").$$render($$result, { size: 32 }, {}, {})} <h1 class="svelte-1idcyy9" data-svelte-h="svelte-1dle8dd">Mobile Usage Guide</h1></div> <p class="intro svelte-1idcyy9" data-svelte-h="svelte-1strc4m">MorphBox is fully optimized for mobile devices, providing a complete development environment on your phone or tablet.</p> <div class="features-grid svelte-1idcyy9">${each(features, (feature) => {
return `<div class="feature-card svelte-1idcyy9">${validate_component(feature.icon || missing_component, "svelte:component").$$render($$result, { size: 24 }, {}, {})} <h3 class="svelte-1idcyy9">${escape(feature.title)}</h3> <p class="svelte-1idcyy9">${escape(feature.description)}</p> </div>`;
})}</div> <div class="device-section svelte-1idcyy9"><h2 class="svelte-1idcyy9">${validate_component(Smartphone, "Smartphone").$$render($$result, { size: 20 }, {}, {})}
Phone Experience</h2> <div class="device-content svelte-1idcyy9" data-svelte-h="svelte-16i969j"><p>On phones, MorphBox adapts to the smaller screen with:</p> <ul class="svelte-1idcyy9"><li>Single panel view with quick switching</li> <li>Collapsible panels to maximize screen space</li> <li>Optimized touch targets for accuracy</li> <li>Virtual keyboard-aware layouts</li></ul> <div class="screenshot-placeholder svelte-1idcyy9"><p>MorphBox on iPhone</p></div></div></div> <div class="device-section svelte-1idcyy9"><h2 class="svelte-1idcyy9">${validate_component(Tablet, "Tablet").$$render($$result, { size: 20 }, {}, {})}
Tablet Experience</h2> <div class="device-content svelte-1idcyy9" data-svelte-h="svelte-154cqln"><p>Tablets get an enhanced experience with:</p> <ul class="svelte-1idcyy9"><li>Split-screen panel layouts</li> <li>Desktop-like file explorer</li> <li>Extended keyboard shortcuts</li> <li>Multi-touch gestures</li></ul> <div class="screenshot-placeholder svelte-1idcyy9"><p>MorphBox on iPad</p></div></div></div> <div class="tips-container svelte-1idcyy9"><h2 class="svelte-1idcyy9" data-svelte-h="svelte-1cwgzai">Tips & Best Practices</h2> ${each(tips, (section) => {
return `<div class="tip-section svelte-1idcyy9"><h3 class="svelte-1idcyy9">${escape(section.category)}</h3> <ul class="svelte-1idcyy9">${each(section.items, (tip) => {
return `<li class="svelte-1idcyy9">${escape(tip)}</li>`;
})}</ul> </div>`;
})}</div> <div class="troubleshooting svelte-1idcyy9" data-svelte-h="svelte-chc179"><h2 class="svelte-1idcyy9">Common Issues & Solutions</h2> <div class="issue svelte-1idcyy9"><h4 class="svelte-1idcyy9">Virtual keyboard covers content</h4> <p class="svelte-1idcyy9">The layout automatically adjusts when the keyboard appears. If issues persist, try rotating your device or adjusting the terminal height.</p></div> <div class="issue svelte-1idcyy9"><h4 class="svelte-1idcyy9">Text selection difficulties</h4> <p class="svelte-1idcyy9">Use the magnifying glass gesture (long press) for precise cursor placement. Double and triple tap for word/line selection.</p></div> <div class="issue svelte-1idcyy9"><h4 class="svelte-1idcyy9">Panel switching feels slow</h4> <p class="svelte-1idcyy9">Use swipe gestures instead of buttons for faster navigation. Swipe from the left edge to quickly access the panel menu.</p></div> <div class="issue svelte-1idcyy9"><h4 class="svelte-1idcyy9">Terminal keys missing</h4> <p class="svelte-1idcyy9">Use the ESC and Shift+Tab buttons in the terminal header. For more special keys, consider using a mobile terminal keyboard app.</p></div></div> <div class="optimization-tips svelte-1idcyy9" data-svelte-h="svelte-pifvt"><h2 class="svelte-1idcyy9">Performance Optimization</h2> <ul class="svelte-1idcyy9"><li class="svelte-1idcyy9"><strong>Close unused panels:</strong> Free up memory by closing panels you're not actively using</li> <li class="svelte-1idcyy9"><strong>Use lightweight themes:</strong> Dark themes typically use less battery on OLED screens</li> <li class="svelte-1idcyy9"><strong>Limit terminal scrollback:</strong> Large scrollback buffers can impact performance</li> <li class="svelte-1idcyy9"><strong>Enable hardware acceleration:</strong> Ensure your browser settings have this enabled</li></ul></div> <div class="external-keyboards svelte-1idcyy9" data-svelte-h="svelte-1p2xj7s"><h2 class="svelte-1idcyy9">External Keyboard Support</h2> <p>When using an external keyboard with your mobile device, MorphBox provides a desktop-like experience:</p> <ul class="svelte-1idcyy9"><li class="svelte-1idcyy9">All desktop keyboard shortcuts work as expected</li> <li class="svelte-1idcyy9">Tab key properly functions in terminal and code editor</li> <li class="svelte-1idcyy9">Cmd/Ctrl combinations for quick actions</li> <li class="svelte-1idcyy9">Arrow keys for navigation</li></ul></div> </div>`;
});
export { Page as default };
//# sourceMappingURL=_page.svelte-C1ZbdQ85.js.map