morphbox/build/server/chunks/_page.svelte-BlK1q9un.js

Docker-based AI sandbox for development with Claude integration

import { c as create_ssr_component, v as validate_component, f as each, e as escape } from './ssr-Bi8A3Ffq.js';

const css = {
  code: ".code-block.svelte-9c7ku2.svelte-9c7ku2{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;padding:16px;overflow-x:auto;margin:16px 0}.code-block.svelte-9c7ku2 code.svelte-9c7ku2{font-family:'Monaco', 'Menlo', 'Ubuntu Mono', monospace;font-size:14px;line-height:1.5}",
  map: `{"version":3,"file":"CodeBlock.svelte","sources":["CodeBlock.svelte"],"sourcesContent":["<script>\\n  export let code = '';\\n  export let language = 'javascript';\\n<\/script>\\n\\n<pre class=\\"code-block language-{language}\\"><code>{code}</code></pre>\\n\\n<style>\\n  .code-block {\\n    background: var(--bg-secondary);\\n    border: 1px solid var(--border-color);\\n    border-radius: 4px;\\n    padding: 16px;\\n    overflow-x: auto;\\n    margin: 16px 0;\\n  }\\n  \\n  .code-block code {\\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\\n    font-size: 14px;\\n    line-height: 1.5;\\n  }\\n</style>"],"names":[],"mappings":"AAQE,uCAAY,CACV,UAAU,CAAE,IAAI,cAAc,CAAC,CAC/B,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,CACrC,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,IAAI,CACb,UAAU,CAAE,IAAI,CAChB,MAAM,CAAE,IAAI,CAAC,CACf,CAEA,yBAAW,CAAC,kBAAK,CACf,WAAW,CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,SAAS,CACxD,SAAS,CAAE,IAAI,CACf,WAAW,CAAE,GACf"}`
};
const CodeBlock = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let { code = "" } = $$props;
  let { language = "javascript" } = $$props;
  if ($$props.code === void 0 && $$bindings.code && code !== void 0) $$bindings.code(code);
  if ($$props.language === void 0 && $$bindings.language && language !== void 0) $$bindings.language(language);
  $$result.css.add(css);
  return `<pre class="${"code-block language-" + escape(language, true) + " svelte-9c7ku2"}"><code class="svelte-9c7ku2">${escape(code)}</code></pre>`;
});
const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  const templates = [
    {
      name: "basic",
      description: "Simple panel with data display"
    },
    {
      name: "api",
      description: "Panel that fetches data from APIs"
    },
    {
      name: "chart",
      description: "Data visualization panel"
    },
    {
      name: "form",
      description: "Interactive form panel"
    }
  ];
  const examplePanel = `<!--
@panel-name: My Panel
@panel-description: A simple counter panel
@panel-icon: 🎯
@panel-category: Tools
-->

&lt;script&gt;
  export let panelId;
  export let data = {};
  
  let count = 0;
&lt;/script&gt;

<div class="custom-panel">
  <h2>My Custom Panel</h2>
  <p>Count: {count}</p>
  <button on:click={() => count++}>Increment</button>
</div>

<style>
  .custom-panel {
    padding: 20px;
    height: 100%;
  }
</style>`;
  const apiExample = `// Access panel store
import { panelStore } from '$lib/stores/panels';

// Use WebSocket
import { websocket } from '$lib/websocket';

// File operations
const response = await fetch('/api/files/read', {
  method: 'POST',
  body: JSON.stringify({ path: '/some/file' })
});`;
  const communicationExample = `// Dispatch events
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();

dispatch('open', { file: 'example.txt' });`;
  const persistenceExample = `import { browser } from '$app/environment';

// Save state
if (browser) {
  localStorage.setItem(\`panel-\${panelId}\`, JSON.stringify(state));
}

// Restore state
onMount(() => {
  const saved = localStorage.getItem(\`panel-\${panelId}\`);
  if (saved) state = JSON.parse(saved);
});`;
  const externalLibsExample = `// Chart.js example
import Chart from 'chart.js/auto';

onMount(() => {
  new Chart(canvas, config);
});`;
  const websocketExample = `websocket.subscribe(msg => {
  if (msg.type === 'update') {
    // Handle real-time updates
  }
});`;
  return `${$$result.head += `<!-- HEAD_svelte-1iyaexs_START -->${$$result.title = `<title>Custom Panels - MorphBox Documentation</title>`, ""}<meta name="description" content="Learn how to create custom panels for MorphBox"><!-- HEAD_svelte-1iyaexs_END -->`, ""}

# Custom Panels

Create reusable UI components that integrate seamlessly with MorphBox.

## Overview

Custom panels are single \`.morph\` files containing:
- HTML/JavaScript code
- Panel metadata
- Prompt history (for AI-generated panels)

Panels are stored in \`~/morphbox/panels/\` and hot-reload automatically.

## Quick Start

### Creating Your First Panel

1. Open Panel Manager (+ button in UI)
2. Click &quot;Create Custom Panel&quot;
3. Enter name and description
4. Select a template
5. Claude will generate the panel code

### Panel Example

${validate_component(CodeBlock, "CodeBlock").$$render($$result, { code: examplePanel, language: "svelte" }, {}, {})}

## Panel Structure

### Metadata (Required)
Embedded in HTML comments at the top:
- \`@panel-name\`: Display name in Panel Manager
- \`@panel-description\`: Brief description
- \`@panel-icon\`: Emoji or icon
- \`@panel-category\`: Panel category

### Props
Standard props passed to all panels:
- \`panelId\`: Unique panel instance ID
- \`data\`: Panel-specific data

### Styling
- Use scoped styles
- Panel container handles sizing
- Set \`height: 100%\` for full panel

## Available Templates

${each(templates, (template) => {
    return `### ${escape(template.name)} ${escape(template.description)}

Use: \`morphbox-panel\` and select &quot;${escape(template.name)}&quot;`;
  })}

## Development Workflow

### Hot Reloading
- Save changes to see updates instantly
- No need to restart MorphBox
- Errors shown in browser console

### Using MorphBox APIs

${validate_component(CodeBlock, "CodeBlock").$$render($$result, { code: apiExample, language: "javascript" }, {}, {})}

### Panel Communication

${validate_component(CodeBlock, "CodeBlock").$$render(
    $$result,
    {
      code: communicationExample,
      language: "javascript"
    },
    {},
    {}
  )}

## Best Practices

### Performance
- Minimize re-renders
- Use stores for shared state
- Lazy load heavy components

### Accessibility
- Add ARIA labels
- Support keyboard navigation
- Maintain focus management

### Error Handling
- Wrap async operations in try/catch
- Show user-friendly error messages
- Log errors for debugging

## Advanced Features

### State Persistence

${validate_component(CodeBlock, "CodeBlock").$$render(
    $$result,
    {
      code: persistenceExample,
      language: "javascript"
    },
    {},
    {}
  )}

### External Libraries

${validate_component(CodeBlock, "CodeBlock").$$render(
    $$result,
    {
      code: externalLibsExample,
      language: "javascript"
    },
    {},
    {}
  )}

### WebSocket Integration

${validate_component(CodeBlock, "CodeBlock").$$render(
    $$result,
    {
      code: websocketExample,
      language: "javascript"
    },
    {},
    {}
  )}

## AI Panel Generation

### Using Claude
- Describe functionality clearly
- Specify UI requirements
- Include data sources
- Request specific features

### Editing Generated Panels
1. Open panel in Panel Manager
2. Click &quot;Edit&quot;
3. Modify code and metadata
4. Save to apply changes

## .morph File Format

### Export Panels
- Click export button in Panel Manager
- Creates portable \`.morph\` file
- Includes code, metadata, and history

### Import Panels
- Click import button in Panel Manager
- Select \`.morph\` file
- Auto-handles ID conflicts

## Troubleshooting

### Panel Not Appearing
1. Check file location: \`~/morphbox/panels/\`
2. Verify metadata format
3. Check browser console for errors
4. Refresh Panel Manager

### Styling Issues
- Use scoped styles
- Check theme variables
- Test on mobile
- Verify height: 100%

### Performance Problems
- Profile with browser DevTools
- Reduce re-renders
- Optimize data fetching
- Use virtual scrolling for lists`;
});

export { Page as default };
//# sourceMappingURL=_page.svelte-BlK1q9un.js.map