# Quick Start Guide - DAM WordPress Svelte UI

## Installation

1. **Install NPM dependencies**:
   ```bash
   npm install
   ```

2. **Start development server**:
   ```bash
   npm run dev
   ```
   This starts Vite on http://localhost:5173

3. **Enable WordPress debug mode** (wp-config.php):
   ```php
   define('WP_DEBUG', true);
   ```

4. **Navigate to WordPress admin**:
   - Go to your WordPress admin panel
   - Click "DAM Assets" in the sidebar
   - You should see the Svelte UI load from the dev server

## Manual PHP Edits Required

Edit `/includes/class-plugin.php`:

### 1. Fix the container div (line 89):
```php
// Change from:
echo '<div id="dam-admin-app"></div>';

// To:
echo '<div id="dam-app"></div>';
```

### 2. Fix the config variable (line 147):
```php
// Change 'apiUrl' to 'restUrl':
'restUrl' => rest_url('dam/v1'),
```

### 3. Add missing config parameters (after line 151):
```php
wp_localize_script('dam-admin-app', 'damConfig', [
    'restUrl' => rest_url('dam/v1'),
    'nonce' => wp_create_nonce('wp_rest'),
    'ajaxUrl' => admin_url('admin-ajax.php'),
    'pluginUrl' => DAM_PLUGIN_URL,
    'cdnUrl' => $this->get_settings()['cdn_url'] ?? '',
    'maxFileSize' => 100 * 1024 * 1024, // 100MB
    'allowedMimeTypes' => [
        'image/jpeg',
        'image/png',
        'image/gif',
        'image/webp',
        'video/mp4',
        'video/webm',
        'audio/mpeg',
        'audio/wav',
        'application/pdf'
    ],
]);
```

## Building for Production

1. **Build the production bundle**:
   ```bash
   npm run build
   ```

2. **Disable debug mode** (wp-config.php):
   ```php
   define('WP_DEBUG', false);
   ```

3. **Test the production build**:
   - Navigate to DAM Assets in WordPress admin
   - The plugin will now load the built files from `assets/js/`

## File Structure

```
dam-wordpress/
├── src/                        # Svelte source files
│   ├── main.ts                # Entry point
│   ├── App.svelte             # Root component
│   ├── app.css                # Global styles
│   └── lib/
│       ├── types.ts           # TypeScript types
│       ├── api.ts             # API service
│       └── components/        # Svelte components
├── assets/
│   ├── js/                    # Build output (JS)
│   └── css/                   # Build output (CSS)
├── includes/                   # PHP backend
├── package.json               # NPM dependencies
├── vite.config.ts            # Build configuration
├── tsconfig.json             # TypeScript config
└── svelte.config.js          # Svelte config
```

## Available Components

- **AssetBrowser** - Main asset library with grid/list views
- **AssetCard** - Individual asset display
- **AssetUpload** - Drag & drop file upload
- **AssetEditor** - Metadata editor modal
- **AssetPicker** - Asset selection modal (for Gutenberg, ACF)
- **FilterPanel** - Sidebar filtering
- **FocalPointPicker** - Visual focal point selector for images

## NPM Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run check` - TypeScript type checking

## Troubleshooting

**UI not loading?**
- Check dev server is running on port 5173
- Verify WP_DEBUG is true
- Check browser console for errors

**Type errors?**
- Run `npm run check`
- Ensure all dependencies are installed

**Build fails?**
- Delete node_modules and reinstall
- Check Node.js version (16+ required)

## Next Steps

1. Install dependencies
2. Make the PHP edits above
3. Start dev server
4. Test in WordPress admin
5. Build for production when ready

For more details, see README-SVELTE-UI.md
