> ## Documentation Index
> Fetch the complete documentation index at: https://artifactuse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte

> Use Artifactuse with Svelte and SvelteKit

## Installation

```bash theme={null}
npm install artifactuse
```

## Setup

Initialize Artifactuse with `setArtifactuseContext` in your layout:

```svelte theme={null}
<!-- +layout.svelte -->
<script>
  import { setArtifactuseContext } from 'artifactuse/svelte'
  import 'artifactuse/styles'
  
  setArtifactuseContext({ 
    theme: 'dark',
    // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
  })
</script>

<slot />
```

## Syntax Highlighting (Optional)

For code syntax highlighting, add Prism.js:

```bash theme={null}
npm install prismjs
```

```svelte theme={null}
<!-- +layout.svelte -->
<script>
  import Prism from 'prismjs'
  import 'prismjs/components/prism-javascript'
  import 'prismjs/components/prism-typescript'
  import 'prismjs/components/prism-python'
  import 'prismjs/themes/prism-tomorrow.css' // or any theme
  
  import { setArtifactuseContext } from 'artifactuse/svelte'
  import 'artifactuse/styles'
  
  setArtifactuseContext({ theme: 'dark' })
</script>

<slot />
```

## Components

<CardGroup cols={3}>
  <Card title="ArtifactuseAgentMessage" icon="message-square" href="/docs/components/agent-message">
    Render AI messages with artifact detection
  </Card>

  <Card title="ArtifactusePanel" icon="panel-right" href="/docs/components/panel">
    Side panel for previews and code
  </Card>

  <Card title="ArtifactusePanelToggle" icon="toggle-right" href="/docs/components/panel-toggle">
    Toggle button with badge
  </Card>
</CardGroup>

### Quick Reference

```svelte theme={null}
<script>
  import { 
    ArtifactuseAgentMessage, 
    ArtifactusePanel, 
    ArtifactusePanelToggle 
  } from 'artifactuse/svelte'
</script>

<ArtifactuseAgentMessage 
  content={message.content}
  messageId={message.id}
  typing={isStreaming}
  on:formSubmit={handleFormSubmit}
  on:socialCopy={handleSocialCopy}
  on:mediaOpen={handleMediaOpen}
/>

<ArtifactusePanel
  on:aiRequest={handleAIRequest}
  on:save={handleSave}
  on:export={handleExport}
  externalPreview={true}
/>

<ArtifactusePanelToggle />
```

## Context

### getArtifactuseContext

Access Artifactuse state and methods:

```svelte theme={null}
<script>
  import { getArtifactuseContext } from 'artifactuse/svelte'
  
  const {
    // Stores (reactive)
    state,
    activeArtifact,
    artifactCount,
    hasArtifacts,
    
    // Methods
    processMessage,
    openArtifact,
    openPanel,
    closePanel,
    togglePanel,
    toggleFullscreen,
    setViewMode,      // 'preview' | 'code' | 'split' | 'edit'
    getPanelUrl,
    getTheme,
    setTheme,

    // Programmatic API
    openFile,          // Open file in panel (auto-detect language)
    openCode,          // Open code in panel (explicit language)
    updateFile,        // Update existing artifact in place
    clearArtifacts,    // Clear all artifacts

    // Events
    on,
    off,
  } = getArtifactuseContext()
</script>

<button on:click={togglePanel}>
  Artifacts ({$artifactCount})
</button>
```

## Events

```svelte theme={null}
<script>
  import { getArtifactuseContext } from 'artifactuse/svelte'
  import { onMount } from 'svelte'
  
  const { on } = getArtifactuseContext()
  
  onMount(() => {
    on('ai:request', async ({ prompt, context }) => {
      const response = await yourAI.chat(prompt)
    })
    
    on('form:submit', ({ formId, values }) => {
      console.log('Form submitted:', values)
    })
    
    on('social:copy', ({ platform, text }) => {
      console.log('Copied:', platform, text)
    })
    
    on('media:open', ({ type, src }) => {
      console.log('Media opened:', type, src)
    })

    on('edit:save', ({ artifactId, artifact, code }) => {
      console.log('Code saved:', code)
    })

    // Panel lifecycle events
    on('panel:opened', () => {
      console.log('Panel opened')
    })

    on('panel:closed', () => {
      console.log('Panel closed')
    })

    on('panel:toggled', ({ isOpen }) => {
      console.log('Panel toggled:', isOpen)
    })
  })
</script>
```

## Full Example

```svelte theme={null}
<!-- +page.svelte -->
<script>
  import { 
    ArtifactuseAgentMessage, 
    ArtifactusePanel, 
    ArtifactusePanelToggle,
    getArtifactuseContext
  } from 'artifactuse/svelte'
  import { onMount } from 'svelte'
  
  // Optional: Prism.js for syntax highlighting
  import Prism from 'prismjs'
  import 'prismjs/components/prism-javascript'
  import 'prismjs/themes/prism-tomorrow.css'
  
  let messages = []
  
  const { on } = getArtifactuseContext()
  
  onMount(() => {
    on('form:submit', ({ formId, values }) => {
      sendMessage(`Form submitted: ${JSON.stringify(values)}`)
    })
  })
  
  function handleFormSubmit(event) {
    console.log('Form:', event.detail)
  }
  
  function handleSocialCopy(event) {
    console.log('Copied:', event.detail)
  }
  
  function handleMediaOpen(event) {
    console.log('Media opened:', event.detail)
  }
  
  async function handleAIRequest(event) {
    const { prompt, context } = event.detail
    const response = await yourAI.chat(prompt)
  }
</script>

<div class="app-container">
  <div class="chat">
    {#each messages as msg (msg.id)}
      <ArtifactuseAgentMessage 
        content={msg.content}
        messageId={msg.id}
        typing={msg.isStreaming}
        on:formSubmit={handleFormSubmit}
        on:socialCopy={handleSocialCopy}
        on:mediaOpen={handleMediaOpen}
      />
    {/each}
    
    <ArtifactusePanelToggle />
  </div>
  
  <ArtifactusePanel on:aiRequest={handleAIRequest} />
</div>

<style>
  .app-container {
    display: flex;
    height: 100%;
    overflow: hidden;
  }
  
  .chat {
    flex: 1;
    padding: 20px;
    min-width: 0;
    overflow-y: auto;
  }
</style>
```