@entrinsik/vite-plugin-informer 1.0.4 → 1.0.5

package/bin/init.js

@@ -1,12 +1,10 @@
 #!/usr/bin/env node
 
-import { readFile, writeFile, mkdir, cp, access, readdir } from 'node:fs/promises';
-import { resolve, dirname, join, basename } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { readFile, writeFile, mkdir, access } from 'node:fs/promises';
+import { resolve, basename } from 'node:path';
 import { createInterface } from 'node:readline';
 import { randomUUID } from 'node:crypto';
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
 const cwd = process.cwd();
 
 /**
@@ -279,10 +277,7 @@ INFORMER_API_KEY=your-api-key
         console.log('Created data-access.yaml (configure API access for your report)');
     }
 
-    // 10. Copy Claude skill files
-    await copySkillFiles();
-
-    // 11. Add .env to .gitignore if not present
+    // 10. Add .env to .gitignore if not present
     await updateGitignore();
 
     console.log('\nSetup complete!\n');
@@ -291,8 +286,8 @@ INFORMER_API_KEY=your-api-key
     console.log('  2. Update data-access.yaml with the datasets/APIs your report needs');
     console.log('  3. Run: npm install');
     console.log('  4. Run: npm run dev');
-    console.log('  5. Open a terminal and run: claude');
-    console.log('     The informer skill is available in .claude/skills/');
+    console.log('  5. Install the Claude skill: /plugin marketplace add entrinsik-org/claude-plugins');
+    console.log('  6. Then: /plugin install magic-reports@entrinsik-plugins');
     console.log('');
 }
 
@@ -364,34 +359,6 @@ export default defineConfig({
     console.log(`Updated ${configPath.split('/').pop()} with informer plugin`);
 }
 
-async function copySkillFiles() {
-    const skillSrc = resolve(__dirname, '..', 'templates', 'skill');
-    const skillDest = resolve(cwd, '.claude', 'skills', 'informer');
-
-    // Create destination directory
-    await mkdir(skillDest, { recursive: true });
-
-    // Copy files recursively
-    await copyDir(skillSrc, skillDest);
-    console.log('Copied Claude skill files to .claude/skills/informer/');
-}
-
-async function copyDir(src, dest) {
-    const entries = await readdir(src, { withFileTypes: true });
-
-    for (const entry of entries) {
-        const srcPath = join(src, entry.name);
-        const destPath = join(dest, entry.name);
-
-        if (entry.isDirectory()) {
-            await mkdir(destPath, { recursive: true });
-            await copyDir(srcPath, destPath);
-        } else {
-            await cp(srcPath, destPath);
-        }
-    }
-}
-
 async function updateGitignore() {
     const gitignorePath = resolve(cwd, '.gitignore');
     let content = '';

package/index.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export default function informer(): Plugin;

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@entrinsik/vite-plugin-informer",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Vite plugin and publish tool for local Magic Report development",
   "type": "module",
   "types": "index.d.ts",
   "main": "./src/index.js",
   "exports": {
-    ".": "./src/index.js",
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./src/index.js"
+    },
     "./deploy": "./src/deploy.js"
   },
   "bin": {
@@ -17,7 +20,7 @@
   "files": [
     "src",
     "bin",
-    "templates"
+    "index.d.ts"
   ],
   "peerDependencies": {
     "vite": ">=5.0.0"

package/templates/skill/SKILL.md

@@ -1,436 +0,0 @@
----
-name: informer
-description: Building Magic Reports with local Vite development. Covers the dev/publish workflow and key Informer APIs for datasets, queries, and integrations.
----
-
-# Magic Report Development
-
-## What is a Magic Report?
-
-A Magic Report is a custom HTML/JS/CSS application that runs inside Informer. It can:
-- Query Informer datasets (Elasticsearch-indexed data)
-- Execute saved queries
-- Make authenticated requests to external APIs via integrations (Salesforce, etc.)
-- Render charts, tables, and interactive visualizations
-
-Reports are stored in Informer libraries and served through the Informer UI.
-
-## Local Development Workflow
-
-### Development Mode (`npm run dev`)
-
-The Vite plugin proxies `/api/*` requests to your Informer server with Basic auth. This means:
-- Your code makes fetch calls to `/api/...` (no host needed)
-- The plugin adds authentication headers automatically
-- You get hot reload while working against real Informer data
-
-Configuration is in `.env`:
-```
-INFORMER_URL=http://localhost:3000
-INFORMER_API_KEY=your-api-key
-```
-
-Or use basic auth:
-```
-INFORMER_URL=http://localhost:3000
-INFORMER_USER=admin
-INFORMER_PASS=yourpassword
-```
-
-### Deploying (`npm run deploy`)
-
-Builds your project and uploads to an Informer library:
-1. Creates/finds a Magic Report by slug (from package.json `name`)
-2. Snapshots the library for rollback
-3. Clears existing files
-4. Uploads all built assets from `dist/`
-5. Uploads `data-access.yaml` from project root (if it exists)
-6. Report is viewable at `/reports/r/{owner}:{slug}`
-
-### Package.json Configuration
-
-The `informer` section in `package.json` controls deploy metadata:
-
-```json
-{
-  "informer": {
-    "name": "Sales Dashboard",
-    "description": "Regional sales performance overview",
-    "icon": "BarChart",
-    "id": "a1b2c3d4-..."
-  }
-}
-```
-
-| Field | Description |
-|-------|-------------|
-| `name` | Display name in Informer (falls back to package `name`) |
-| `description` | Report description |
-| `icon` | Material Icons name in PascalCase (e.g. `"TrendingUp"`, `"PieChart"`, `"Assessment"`) |
-| `id` | Report UUID (auto-saved after first deploy) |
-
-## Discovering Resources
-
-Once `.env` is configured, Claude can query the Informer API directly to help you find available resources. Ask Claude to look up:
-
-- **Integrations**: `curl -u $USER:$PASS "$INFORMER_URL/api/integrations"` - Find integration slugs for QuickBooks, Salesforce, etc.
-- **Datasets**: `curl -u $USER:$PASS "$INFORMER_URL/api/datasets-list"` - Find dataset IDs and field names
-- **Queries**: `curl -u $USER:$PASS "$INFORMER_URL/api/queries-list"` - Find saved query IDs
-- **Datasources**: `curl -u $USER:$PASS "$INFORMER_URL/api/datasources"` - Find SQL datasource IDs
-
-This helps you find the correct IDs/slugs to use in your code and `data-access.yaml`. Just ask Claude to "show me available integrations" or "find the QuickBooks integration slug".
-
-## Key APIs
-
-All endpoints are relative to `/api`. In dev mode, the Vite proxy handles auth.
-
-### List Datasets
-
-```javascript
-const response = await fetch('/api/datasets-list');
-const datasets = await response.json();
-// Returns: [{ id, name, description, records, size, ... }, ...]
-```
-
-Use this to discover available datasets. Each dataset has:
-- `id` - UUID or natural ID like `admin:sales-data`
-- `name` - Display name
-- `records` - Approximate record count
-
-### Search Dataset (Elasticsearch)
-
-```javascript
-const response = await fetch(`/api/datasets/${datasetId}/_search`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        query: { match_all: {} },
-        size: 100,
-        from: 0,
-        _source: ['field1', 'field2'],  // Optional: limit fields returned
-        sort: [{ field1: 'desc' }],      // Optional: sort order
-        aggs: {                          // Optional: aggregations
-            total: { sum: { field: 'amount' } }
-        }
-    })
-});
-const result = await response.json();
-
-// Response structure:
-// result.hits.total - total matching records
-// result.hits.hits - array of { _source: { field1, field2, ... } }
-// result.aggregations - aggregation results (if requested)
-```
-
-**Common query patterns:**
-
-```javascript
-// Filter by exact value
-{ query: { bool: { filter: [{ term: { status: 'active' } }] } } }
-
-// Filter by range
-{ query: { bool: { filter: [{ range: { amount: { gte: 1000 } } }] } } }
-
-// Date range
-{ query: { bool: { filter: [{ range: { date: { gte: '2024-01-01', lte: '2024-12-31' } } }] } } }
-
-// Multiple filters (AND)
-{ query: { bool: { filter: [
-    { term: { region: 'North' } },
-    { range: { amount: { gte: 1000 } } }
-] } } }
-```
-
-**Common aggregations:**
-
-```javascript
-// Sum, avg, min, max
-{ aggs: { total: { sum: { field: 'amount' } } } }
-
-// Group by field
-{ aggs: { by_region: { terms: { field: 'region', size: 50 } } } }
-
-// Group with nested metric
-{ aggs: {
-    by_region: {
-        terms: { field: 'region', size: 50 },
-        aggs: { total: { sum: { field: 'amount' } } }
-    }
-} }
-
-// Date histogram
-{ aggs: {
-    by_month: {
-        date_histogram: { field: 'date', calendar_interval: 'month' },
-        aggs: { total: { sum: { field: 'amount' } } }
-    }
-} }
-```
-
-### List Queries
-
-```javascript
-const response = await fetch('/api/queries-list');
-const queries = await response.json();
-// Returns: [{ id, name, description, ... }, ...]
-```
-
-### Execute Query
-
-```javascript
-const response = await fetch(`/api/queries/${queryId}/_execute`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        parameters: { param1: 'value1' }  // Optional query parameters
-    })
-});
-const result = await response.json();
-```
-
-### List Integrations
-
-```javascript
-const response = await fetch('/api/integrations');
-const result = await response.json();
-// result.items = [{ id, name, slug, type, ... }, ...]
-```
-
-Integrations are authenticated connections to external APIs (Salesforce, REST APIs, etc.).
-
-### Make Integration Request
-
-```javascript
-const response = await fetch(`/api/integrations/${slugOrId}/request`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        url: '/data/v59.0/query',           // Path relative to integration's base URL
-        method: 'GET',                       // HTTP method
-        params: { q: 'SELECT Id FROM Account' },  // Query params
-        data: { /* body for POST/PUT */ },   // Request body
-        headers: { /* extra headers */ }     // Additional headers
-    })
-});
-const result = await response.json();
-
-// Response structure:
-// result.status - HTTP status code
-// result.data - response body from the external API
-// result.error - true if upstream returned an error status
-```
-
-**Salesforce example:**
-```javascript
-const response = await fetch('/api/integrations/salesforce/request', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        url: '/data/v59.0/query',
-        method: 'GET',
-        params: {
-            q: "SELECT Id, Name, Amount FROM Opportunity WHERE StageName = 'Closed Won'"
-        }
-    })
-});
-const result = await response.json();
-const records = result.data.records;
-```
-
-## Data Access Configuration
-
-When your report is published and shared, you must declare which APIs it needs access to. Create a `data-access.yaml` file in your project root (it will be published with your report).
-
-**Important:** Without this file, all API access is blocked when the report runs in Informer.
-
-### Basic Example
-
-```yaml
-# data-access.yaml
-
-datasets:
-  - admin:sales-data
-  - admin:customers
-
-queries:
-  - admin:monthly-summary
-
-integrations:
-  - salesforce
-```
-
-### With Row-Level Security
-
-Restrict data based on the viewing user's profile:
-
-```yaml
-datasets:
-  # Users only see their region's data
-  - id: admin:orders
-    filter:
-      region: $user.custom.region
-
-  # Users only see their own records
-  - id: admin:sales
-    filter:
-      sales_rep: $user.username
-```
-
-### Integration with Credentials
-
-Pass user-specific credentials to external APIs:
-
-```yaml
-integrations:
-  - id: partner-api
-    headers:
-      Authorization: Bearer $user.custom.partnerToken
-    params:
-      client_id: $tenant.id
-```
-
-### Available Variables
-
-| Variable | Description |
-|----------|-------------|
-| `$user.username` | Login name |
-| `$user.email` | Email address |
-| `$user.displayName` | Full name |
-| `$user.custom.xxx` | Custom user field |
-| `$tenant.id` | Tenant ID |
-| `$report.id` | Report UUID |
-
-### Resource Types
-
-| Type | API Access Granted |
-|------|-------------------|
-| `datasets` | `_search`, `fields` |
-| `queries` | `_execute` |
-| `datasources` | `_query` |
-| `integrations` | `request` |
-| `libraries` | `contents/*` |
-
-For edge cases, you can also whitelist raw API paths:
-
-```yaml
-apis:
-  - POST /api/custom/endpoint
-```
-
-## Report Context
-
-When running inside Informer (not dev mode), the report receives context:
-
-```javascript
-const reportId = window.__INFORMER__?.report?.id;
-const reportName = window.__INFORMER__?.report?.name;
-const theme = window.__INFORMER__?.theme; // 'light' or 'dark'
-```
-
-In dev mode, the Vite plugin mocks this with placeholder values (theme defaults to `'light'`).
-
-### Responding to Theme
-
-Use the theme value to adapt your report's appearance:
-
-```javascript
-const theme = window.__INFORMER__?.theme || 'light';
-document.documentElement.setAttribute('data-theme', theme);
-```
-
-```css
-:root { --bg: #ffffff; --text: #1a1a1a; }
-[data-theme="dark"] { --bg: #1e1e1e; --text: #e0e0e0; }
-body { background: var(--bg); color: var(--text); }
-```
-
-To override the theme in dev mode, pass `mock.theme` in `vite.config.js`:
-
-```javascript
-import informer from 'vite-plugin-informer';
-
-export default {
-    plugins: [informer({ mock: { theme: 'dark' } })]
-};
-```
-
-## PDF Export
-
-Reports can be exported to PDF via `POST /api/reports/{id}/_print`.
-
-### How it works
-
-1. Informer opens your report in a headless browser (Puppeteer)
-2. Waits for network requests to complete
-3. Waits for `window.informerReady` to become `true`
-4. Adds `.print` class to `<html>`
-5. Captures the page as PDF using print media
-
-### Signal when ready
-
-Set `window.informerReady` to signal when your report is fully rendered:
-
-```javascript
-// Start of app
-window.informerReady = false;
-
-// After all charts/content rendered
-window.informerReady = true;
-```
-
-### Rendering details
-
-- **Print media is used** - Standard `@media print` CSS rules apply
-- **`.print` class added** - Informer adds a `.print` class to `<html>` for additional targeting
-- **Viewport is 1200px** by default (configurable via `viewportWidth` option)
-- **Box shadows are removed** - They render as grey boxes in PDFs
-- **Colors are preserved** - `print-color-adjust: exact` is applied automatically
-
-### Print CSS
-
-Use standard `@media print` rules or the `.print` class:
-
-```css
-/* Standard print media query */
-@media print {
-    body {
-        background: white;
-        color: black;
-    }
-
-    .no-print {
-        display: none;
-    }
-}
-
-/* Or use the .print class (added by Informer) */
-.print .no-print {
-    display: none;
-}
-
-/* Avoid page breaks inside elements */
-.chart-container {
-    break-inside: avoid;
-}
-```
-
-### Print API options
-
-```javascript
-await fetch(`/api/reports/${reportId}/_print`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        format: 'Letter',        // Letter, Legal, Tabloid, A3, A4, A5
-        landscape: false,
-        viewportWidth: 1200,     // 400-2400, affects responsive layouts
-        waitForReady: true,      // Wait for window.informerReady
-        save: false              // true = save to downloads, false = return PDF
-    })
-});
-```
-
-## Reference Files
-
-- `references/api-reference.md` - Detailed API documentation
-- `references/report-templates.md` - HTML/CSS/JS starter templates

package/templates/skill/references/api-reference.md

@@ -1,242 +0,0 @@
-# API Quick Reference
-
-All endpoints are relative to `/api`. The Vite plugin handles authentication in dev mode.
-
-## Datasets
-
-### GET /api/datasets-list
-List all datasets the user can access.
-
-```javascript
-const datasets = await fetch('/api/datasets-list').then(r => r.json());
-// [{ id, name, description, records, size, tags, sharing }, ...]
-```
-
-### POST /api/datasets/{id}/_search
-Query dataset data using Elasticsearch DSL.
-
-```javascript
-const result = await fetch(`/api/datasets/${id}/_search`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        query: { match_all: {} },
-        size: 100,
-        from: 0,
-        _source: ['field1', 'field2'],
-        sort: [{ field1: 'desc' }],
-        aggs: { total: { sum: { field: 'amount' } } }
-    })
-}).then(r => r.json());
-
-// result.hits.total - count
-// result.hits.hits - [{ _source: { ... } }, ...]
-// result.aggregations - { total: { value: 12345 } }
-```
-
-**Query patterns:**
-```javascript
-// All records
-{ query: { match_all: {} } }
-
-// Exact match
-{ query: { bool: { filter: [{ term: { status: 'active' } }] } } }
-
-// Range
-{ query: { bool: { filter: [{ range: { amount: { gte: 1000 } } }] } } }
-
-// Date range
-{ query: { bool: { filter: [{ range: { date: { gte: '2024-01-01', lte: '2024-12-31' } } }] } } }
-
-// Multiple filters
-{ query: { bool: { filter: [
-    { term: { region: 'North' } },
-    { range: { amount: { gte: 1000 } } }
-] } } }
-
-// Text search
-{ query: { bool: { must: [{ match: { name: 'search text' } }] } } }
-```
-
-**Aggregation patterns:**
-```javascript
-// Metrics
-{ aggs: { total: { sum: { field: 'amount' } } } }
-{ aggs: { average: { avg: { field: 'amount' } } } }
-{ aggs: { minimum: { min: { field: 'amount' } } } }
-{ aggs: { maximum: { max: { field: 'amount' } } } }
-{ aggs: { count: { value_count: { field: 'id' } } } }
-{ aggs: { unique: { cardinality: { field: 'customer' } } } }
-
-// Group by
-{ aggs: { by_status: { terms: { field: 'status', size: 50 } } } }
-
-// Group with metric
-{ aggs: {
-    by_region: {
-        terms: { field: 'region', size: 50 },
-        aggs: { total: { sum: { field: 'amount' } } }
-    }
-} }
-
-// Date histogram
-{ aggs: {
-    by_month: {
-        date_histogram: { field: 'date', calendar_interval: 'month' },
-        aggs: { total: { sum: { field: 'amount' } } }
-    }
-} }
-```
-
-## Queries
-
-### GET /api/queries-list
-List saved queries.
-
-```javascript
-const queries = await fetch('/api/queries-list').then(r => r.json());
-// [{ id, name, description, tags, sharing }, ...]
-```
-
-### POST /api/queries/{id}/_execute
-Execute a saved query.
-
-```javascript
-const result = await fetch(`/api/queries/${id}/_execute`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        parameters: { startDate: '2024-01-01' }
-    })
-}).then(r => r.json());
-```
-
-## Integrations
-
-### GET /api/integrations
-List configured integrations.
-
-```javascript
-const result = await fetch('/api/integrations').then(r => r.json());
-// result.items = [{ id, name, slug, type, description }, ...]
-```
-
-### POST /api/integrations/{id}/request
-Make an authenticated request through an integration.
-
-```javascript
-const result = await fetch(`/api/integrations/${slugOrId}/request`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        url: '/path/to/endpoint',
-        method: 'GET',              // GET, POST, PUT, PATCH, DELETE
-        params: { key: 'value' },   // Query parameters
-        data: { key: 'value' },     // Request body (POST/PUT/PATCH)
-        headers: {}                 // Additional headers
-    })
-}).then(r => r.json());
-
-// result.status - HTTP status
-// result.data - Response body
-// result.error - true if error status
-```
-
-**Salesforce examples:**
-
-```javascript
-// SOQL query
-await fetch('/api/integrations/salesforce/request', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        url: '/data/v59.0/query',
-        method: 'GET',
-        params: { q: "SELECT Id, Name FROM Account LIMIT 10" }
-    })
-});
-
-// Get record
-await fetch('/api/integrations/salesforce/request', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        url: '/data/v59.0/sobjects/Account/001xxxxxxxxxxxx',
-        method: 'GET'
-    })
-});
-
-// Create record
-await fetch('/api/integrations/salesforce/request', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-        url: '/data/v59.0/sobjects/Contact',
-        method: 'POST',
-        data: { FirstName: 'John', LastName: 'Doe', Email: 'john@example.com' }
-    })
-});
-```
-
-## Data Access Configuration
-
-Create `data-access.yaml` in your project root to declare which APIs your report needs. Without this file, all API access is blocked when published.
-
-```yaml
-# data-access.yaml
-
-datasets:
-  - admin:sales-data
-
-queries:
-  - admin:summary
-
-integrations:
-  - salesforce
-```
-
-### Row-Level Security
-
-```yaml
-datasets:
-  - id: admin:orders
-    filter:
-      region: $user.custom.region
-      owner: $user.username
-```
-
-### Integration Credentials
-
-```yaml
-integrations:
-  - id: partner-api
-    headers:
-      Authorization: Bearer $user.custom.apiToken
-    params:
-      tenant: $tenant.id
-```
-
-### Variables
-
-- `$user.username`, `$user.email`, `$user.displayName`
-- `$user.custom.xxx` - Custom user fields
-- `$tenant.id`
-- `$report.id`, `$report.name`
-
-## Error Handling
-
-API errors return:
-```javascript
-{
-    statusCode: 400,
-    error: 'Bad Request',
-    message: 'Description of error'
-}
-```
-
-Common status codes:
-- `400` - Bad request / validation error
-- `401` - Not authenticated
-- `403` - Not authorized
-- `404` - Not found
-- `502` - Upstream error (integration request failed)

package/templates/skill/references/report-templates.md

@@ -1,299 +0,0 @@
-# Report Templates
-
-## Minimal Starter
-
-### index.html
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Report</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div id="app">
-        <h1>Report Title</h1>
-        <div id="content"></div>
-    </div>
-    <script type="module" src="main.js"></script>
-</body>
-</html>
-```
-
-### styles.css
-```css
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-    font-family: system-ui, sans-serif;
-    background: #0f172a;
-    color: #f1f5f9;
-    padding: 24px;
-}
-
-#app {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-h1 {
-    font-size: 24px;
-    margin-bottom: 24px;
-}
-```
-
-### main.js
-```javascript
-window.informerReady = false;
-
-async function init() {
-    // List available datasets
-    const datasets = await fetch('/api/datasets-list').then(r => r.json());
-    console.log('Available datasets:', datasets);
-
-    // Query a dataset
-    if (datasets.length > 0) {
-        const result = await fetch(`/api/datasets/${datasets[0].id}/_search`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query: { match_all: {} }, size: 10 })
-        }).then(r => r.json());
-
-        const records = result.hits.hits.map(h => h._source);
-        console.log('Records:', records);
-
-        // Render your content here
-        document.getElementById('content').innerHTML = `
-            <p>Found ${result.hits.total} records</p>
-            <pre>${JSON.stringify(records, null, 2)}</pre>
-        `;
-    }
-
-    window.informerReady = true;
-}
-
-init();
-```
-
-## Dashboard Layout
-
-### index.html
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dashboard</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div class="dashboard">
-        <header>
-            <h1>Dashboard Title</h1>
-            <p class="subtitle">Description of this dashboard</p>
-        </header>
-
-        <div class="metrics">
-            <div class="metric-card">
-                <span class="metric-value" id="metric1">--</span>
-                <span class="metric-label">Metric 1</span>
-            </div>
-            <div class="metric-card">
-                <span class="metric-value" id="metric2">--</span>
-                <span class="metric-label">Metric 2</span>
-            </div>
-            <div class="metric-card">
-                <span class="metric-value" id="metric3">--</span>
-                <span class="metric-label">Metric 3</span>
-            </div>
-            <div class="metric-card">
-                <span class="metric-value" id="metric4">--</span>
-                <span class="metric-label">Metric 4</span>
-            </div>
-        </div>
-
-        <div class="content">
-            <!-- Add your charts, tables, or other visualizations here -->
-            <div id="visualization"></div>
-        </div>
-    </div>
-
-    <script type="module" src="main.js"></script>
-</body>
-</html>
-```
-
-### styles.css
-```css
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-:root {
-    --bg: #0f172a;
-    --bg-card: #1e293b;
-    --border: #334155;
-    --text: #f1f5f9;
-    --text-muted: #94a3b8;
-    --primary: #6366f1;
-}
-
-body {
-    font-family: system-ui, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    line-height: 1.5;
-}
-
-.dashboard {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 32px 24px;
-}
-
-header {
-    margin-bottom: 32px;
-}
-
-header h1 {
-    font-size: 28px;
-    font-weight: 700;
-}
-
-.subtitle {
-    color: var(--text-muted);
-    margin-top: 4px;
-}
-
-.metrics {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 16px;
-    margin-bottom: 24px;
-}
-
-.metric-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 20px;
-    text-align: center;
-}
-
-.metric-value {
-    display: block;
-    font-size: 32px;
-    font-weight: 700;
-    color: var(--primary);
-}
-
-.metric-label {
-    display: block;
-    font-size: 13px;
-    color: var(--text-muted);
-    margin-top: 4px;
-}
-
-.content {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 24px;
-}
-
-@media (max-width: 768px) {
-    .metrics { grid-template-columns: repeat(2, 1fr); }
-}
-
-@media (max-width: 480px) {
-    .metrics { grid-template-columns: 1fr; }
-}
-```
-
-### main.js
-```javascript
-window.informerReady = false;
-
-async function init() {
-    try {
-        await loadData();
-        window.informerReady = true;
-    } catch (err) {
-        console.error('Failed to load:', err);
-    }
-}
-
-async function loadData() {
-    // Replace with your dataset ID
-    const datasetId = 'admin:your-dataset';
-
-    const result = await fetch(`/api/datasets/${datasetId}/_search`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-            query: { match_all: {} },
-            size: 0,
-            aggs: {
-                total: { sum: { field: 'amount' } },
-                count: { value_count: { field: 'id' } },
-                avg: { avg: { field: 'amount' } },
-                by_category: {
-                    terms: { field: 'category', size: 10 },
-                    aggs: { total: { sum: { field: 'amount' } } }
-                }
-            }
-        })
-    }).then(r => r.json());
-
-    // Update metrics
-    const aggs = result.aggregations;
-    document.getElementById('metric1').textContent = formatCurrency(aggs.total.value);
-    document.getElementById('metric2').textContent = aggs.count.value.toLocaleString();
-    document.getElementById('metric3').textContent = formatCurrency(aggs.avg.value);
-    document.getElementById('metric4').textContent = result.hits.total.toLocaleString();
-
-    // Use aggs.by_category.buckets for visualization
-    // Each bucket has: { key: 'Category Name', doc_count: 123, total: { value: 456 } }
-    console.log('Category data:', aggs.by_category.buckets);
-}
-
-function formatCurrency(val) {
-    return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumFractionDigits: 0
-    }).format(val);
-}
-
-init();
-```
-
-## PDF Export Tips
-
-The PDF renderer uses **print media** and adds a `.print` class to `<html>`.
-
-```css
-/* Standard @media print works */
-@media print {
-    body {
-        background: white;
-        color: black;
-    }
-
-    .no-print {
-        display: none;
-    }
-
-    /* Avoid page breaks inside charts/cards */
-    .chart-container,
-    .metric-card {
-        break-inside: avoid;
-    }
-}
-
-/* Or use the .print class */
-.print .no-print {
-    display: none;
-}
-```