@bonnard/cli 0.2.15 → 0.2.16

package/dist/templates/claude/skills/bonnard-build-dashboard/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: bonnard-build-dashboard
+description: Guide a user through building and deploying a data dashboard using the Bonnard SDK and Chart.js. Use when user says "build a dashboard", "create a chart", "visualize data", or wants to deploy an HTML dashboard.
+allowed-tools: Bash(bon *)
+---
+
+# Build & Deploy a Dashboard
+
+This skill guides you through creating an HTML dashboard powered by the
+Bonnard SDK and deploying it as a hosted dashboard.
+
+## Phase 1: Get the Starter Template
+
+Fetch the SDK + Chart.js starter template:
+
+```bash
+bon docs sdk.chartjs
+```
+
+This shows a working HTML template with `@bonnard/sdk` loaded from CDN and
+a Chart.js example. Copy this as your starting point.
+
+## Phase 2: Explore Available Data
+
+Discover what measures and dimensions are available to query:
+
+```bash
+# List all views and their fields
+bon docs schema
+
+# Query a specific view to see what data looks like
+bon query '{"measures": ["view_name.measure"], "dimensions": ["view_name.dimension"], "limit": 5}'
+
+# Or use SQL format
+bon query --sql "SELECT MEASURE(total_revenue), date FROM sales_performance LIMIT 5"
+```
+
+Ask the user what data they want to visualize. Match their request to
+available views and measures.
+
+## Phase 3: Build the HTML File
+
+Create an HTML file that:
+1. Loads `@bonnard/sdk` from CDN (see the template from Phase 1)
+2. Initializes the SDK with a publishable key placeholder
+3. Queries the semantic layer for the data the user wants
+4. Renders charts using Chart.js (or another chart library)
+
+Key points:
+- The SDK uses `Bonnard.query()` to fetch data from the deployed semantic layer
+- Use the view names and measure/dimension names from Phase 2
+- The publishable key will be provided by the user or can be created with `bon keys create`
+- Keep the HTML self-contained (inline CSS/JS, load libraries from CDN)
+
+Save the file (e.g., `dashboard.html`).
+
+## Phase 4: Preview Locally
+
+Let the user preview the file in their browser before deploying.
+They'll need to set a valid publishable key in the HTML first.
+
+```bash
+# Create a publishable key if needed
+bon keys create --name "Dashboard" --type publishable
+```
+
+## Phase 5: Deploy
+
+Deploy the HTML file as a hosted dashboard on Bonnard:
+
+```bash
+bon dashboard deploy dashboard.html
+```
+
+This will:
+- Upload the HTML content
+- Assign a slug (derived from filename, or use `--slug`)
+- Print the public URL where the dashboard is accessible
+
+Options:
+- `--slug <slug>` — custom URL slug (default: derived from filename)
+- `--title <title>` — dashboard title (default: from `<title>` tag)
+
+## Phase 6: View Live
+
+Open the deployed dashboard in the browser:
+
+```bash
+bon dashboard open dashboard
+```
+
+## Iteration
+
+To update the dashboard, edit the HTML file and redeploy:
+
+```bash
+bon dashboard deploy dashboard.html
+```
+
+Each deploy increments the version. Use `bon dashboard list` to see all
+deployed dashboards with their versions and URLs.
+
+To remove a dashboard:
+
+```bash
+bon dashboard remove dashboard
+```

package/dist/templates/claude/skills/bonnard-get-started/SKILL.md

@@ -30,7 +30,7 @@ bon datasource add --name my_warehouse --type postgres \
 bon datasource add
 ```
 
-Supported types: `postgres`, `redshift`, `snowflake`, `bigquery`, `databricks`.
+Supported types: `postgres`, `redshift`, `snowflake`, `bigquery`, `databricks`, `duckdb`.
 
 The demo option adds a read-only Contoso retail dataset with tables like
 `fact_sales`, `dim_product`, `dim_store`, and `dim_customer`.

package/dist/templates/claude/skills/bonnard-metabase-migrate/SKILL.md

@@ -65,7 +65,7 @@ bon datasource add --from-dbt
 bon datasource add
 ```
 
-Supported types: `postgres`, `redshift`, `snowflake`, `bigquery`, `databricks`.
+Supported types: `postgres`, `redshift`, `snowflake`, `bigquery`, `databricks`, `duckdb`.
 
 The connection will be tested automatically during `bon deploy`.
 

package/dist/templates/cursor/rules/bonnard-build-dashboard.mdc

@@ -0,0 +1,106 @@
+---
+description: "Guide for building and deploying data dashboards using the Bonnard SDK and Chart.js. Use when user says 'build a dashboard', 'create a chart', 'visualize data', or wants to deploy an HTML dashboard."
+alwaysApply: false
+---
+
+# Build & Deploy a Dashboard
+
+This guide walks through creating an HTML dashboard powered by the
+Bonnard SDK and deploying it as a hosted dashboard.
+
+## Phase 1: Get the Starter Template
+
+Fetch the SDK + Chart.js starter template:
+
+```bash
+bon docs sdk.chartjs
+```
+
+This shows a working HTML template with `@bonnard/sdk` loaded from CDN and
+a Chart.js example. Copy this as your starting point.
+
+## Phase 2: Explore Available Data
+
+Discover what measures and dimensions are available to query:
+
+```bash
+# List all views and their fields
+bon docs schema
+
+# Query a specific view to see what data looks like
+bon query '{"measures": ["view_name.measure"], "dimensions": ["view_name.dimension"], "limit": 5}'
+
+# Or use SQL format
+bon query --sql "SELECT MEASURE(total_revenue), date FROM sales_performance LIMIT 5"
+```
+
+Ask the user what data they want to visualize. Match their request to
+available views and measures.
+
+## Phase 3: Build the HTML File
+
+Create an HTML file that:
+1. Loads `@bonnard/sdk` from CDN (see the template from Phase 1)
+2. Initializes the SDK with a publishable key placeholder
+3. Queries the semantic layer for the data the user wants
+4. Renders charts using Chart.js (or another chart library)
+
+Key points:
+- The SDK uses `Bonnard.query()` to fetch data from the deployed semantic layer
+- Use the view names and measure/dimension names from Phase 2
+- The publishable key will be provided by the user or can be created with `bon keys create`
+- Keep the HTML self-contained (inline CSS/JS, load libraries from CDN)
+
+Save the file (e.g., `dashboard.html`).
+
+## Phase 4: Preview Locally
+
+Let the user preview the file in their browser before deploying.
+They'll need to set a valid publishable key in the HTML first.
+
+```bash
+# Create a publishable key if needed
+bon keys create --name "Dashboard" --type publishable
+```
+
+## Phase 5: Deploy
+
+Deploy the HTML file as a hosted dashboard on Bonnard:
+
+```bash
+bon dashboard deploy dashboard.html
+```
+
+This will:
+- Upload the HTML content
+- Assign a slug (derived from filename, or use `--slug`)
+- Print the public URL where the dashboard is accessible
+
+Options:
+- `--slug <slug>` — custom URL slug (default: derived from filename)
+- `--title <title>` — dashboard title (default: from `<title>` tag)
+
+## Phase 6: View Live
+
+Open the deployed dashboard in the browser:
+
+```bash
+bon dashboard open dashboard
+```
+
+## Iteration
+
+To update the dashboard, edit the HTML file and redeploy:
+
+```bash
+bon dashboard deploy dashboard.html
+```
+
+Each deploy increments the version. Use `bon dashboard list` to see all
+deployed dashboards with their versions and URLs.
+
+To remove a dashboard:
+
+```bash
+bon dashboard remove dashboard
+```

package/dist/templates/cursor/rules/bonnard-get-started.mdc

@@ -29,7 +29,7 @@ bon datasource add --name my_warehouse --type postgres \
 bon datasource add
 ```
 
-Supported types: `postgres`, `redshift`, `snowflake`, `bigquery`, `databricks`.
+Supported types: `postgres`, `redshift`, `snowflake`, `bigquery`, `databricks`, `duckdb`.
 
 The demo option adds a read-only Contoso retail dataset with tables like
 `fact_sales`, `dim_product`, `dim_store`, and `dim_customer`.

package/dist/templates/cursor/rules/bonnard-metabase-migrate.mdc

@@ -64,7 +64,7 @@ bon datasource add --from-dbt
 bon datasource add
 ```
 
-Supported types: `postgres`, `redshift`, `snowflake`, `bigquery`, `databricks`.
+Supported types: `postgres`, `redshift`, `snowflake`, `bigquery`, `databricks`, `duckdb`.
 
 The connection will be tested automatically during `bon deploy`.
 

package/dist/templates/shared/bonnard.md

@@ -5,7 +5,7 @@ Bonnard is a semantic layer platform that sits between your data warehouse and e
 ## How It Works
 
 ```
-Data Warehouse (Snowflake, Postgres, BigQuery, Databricks)
+Data Warehouse (Snowflake, Postgres, BigQuery, Databricks, DuckDB)
         ↓
    Cubes (measures, dimensions, joins)
         ↓
@@ -73,6 +73,10 @@ All tables are in the `contoso` schema. The datasource is named `contoso_demo`.
 | `bon query '{...}'` | Query the deployed semantic layer (requires `bon deploy` first, not for raw DB access) |
 | `bon mcp` | Show MCP setup instructions for AI agents |
 | `bon docs` | Browse documentation |
+| `bon dashboard deploy <file>` | Deploy an HTML file as a hosted dashboard |
+| `bon dashboard list` | List deployed dashboards with URLs |
+| `bon dashboard remove <slug>` | Remove a deployed dashboard |
+| `bon dashboard open <slug>` | Open a deployed dashboard in the browser |
 | `bon metabase connect` | Connect to a Metabase instance (API key) |
 | `bon metabase analyze` | Generate analysis report for semantic layer planning |
 | `bon metabase explore` | Browse Metabase databases, collections, cards, dashboards |
@@ -110,6 +114,7 @@ Topics follow dot notation (e.g., `cubes.dimensions.time`). Use `--recursive` to
 For a guided walkthrough: `/bonnard-get-started`
 For projects migrating from Metabase: `/bonnard-metabase-migrate`
 For design principles: `/bonnard-design-guide`
+For building dashboards with SDK + charts: `/bonnard-build-dashboard`
 
 ## Deployment & Change Tracking
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonnard/cli",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "type": "module",
   "bin": {
     "bon": "./dist/bin/bon.mjs"
@@ -9,7 +9,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsdown src/bin/bon.ts --format esm --out-dir dist/bin && cp -r src/templates dist/ && mkdir -p dist/docs/topics dist/docs/schemas && cp ./content/index.md dist/docs/_index.md && cp ./content/overview.md ./content/getting-started.md dist/docs/topics/ && cp ./content/modeling/*.md dist/docs/topics/ && cp ./content/dashboards/*.md dist/docs/topics/",
+    "build": "tsdown src/bin/bon.ts --format esm --out-dir dist/bin && cp -r src/templates dist/ && mkdir -p dist/docs/topics dist/docs/schemas && cp ./content/index.md dist/docs/_index.md && cp ./content/overview.md ./content/getting-started.md dist/docs/topics/ && cp ./content/modeling/*.md dist/docs/topics/ && cp ./content/sdk/*.md dist/docs/topics/",
     "dev": "tsdown src/bin/bon.ts --format esm --out-dir dist/bin --watch",
     "test": "vitest run"
   },

package/dist/docs/topics/dashboards.components.md

@@ -1,246 +0,0 @@
-# Components
-
-> Chart and display components for rendering query results in dashboards.
-
-## Overview
-
-Components are self-closing HTML-style tags that render query results as charts, tables, or KPI cards. Each component takes a `data` prop referencing a named query.
-
-Choose the component that best fits your data:
-
-- **BigValue** — single KPI number (total revenue, order count)
-- **LineChart** — trends over time
-- **BarChart** — comparing categories (vertical or horizontal)
-- **AreaChart** — cumulative or stacked trends
-- **PieChart** — proportional breakdown (best with 5-7 slices)
-- **DataTable** — detailed rows for drilling into data
-
-## Syntax
-
-```markdown
-<ComponentName data={query_name} prop="value" />
-```
-
-- Components are self-closing (`/>`)
-- `data` uses curly braces: `data={query_name}`
-- Other props use quotes: `x="orders.city"`
-- Boolean props can be shorthand: `horizontal`
-
-## Component Reference
-
-### BigValue
-
-Displays a single KPI metric as a large number.
-
-```markdown
-<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" />
-```
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `data` | query ref | Yes | Query name (should return a single row) |
-| `value` | string | Yes | Fully qualified measure field name to display |
-| `title` | string | No | Label above the value |
-| `fmt` | string | No | Format preset or Excel code (e.g. `fmt="eur2"`, `fmt="$#,##0.00"`) |
-
-### LineChart
-
-Renders a line chart, typically for time series. Supports multiple y columns and series splitting.
-
-```markdown
-<LineChart data={monthly_revenue} x="orders.created_at" y="orders.total_revenue" title="Revenue Trend" />
-<LineChart data={trend} x="orders.created_at" y="orders.total_revenue,orders.count" />
-<LineChart data={revenue_by_type} x="orders.created_at" y="orders.total_revenue" series="orders.type" />
-```
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `data` | query ref | Yes | Query name |
-| `x` | string | Yes | Field for x-axis (typically a time dimension) |
-| `y` | string | Yes | Field(s) for y-axis. Comma-separated for multiple (e.g. `y="orders.total_revenue,orders.count"`) |
-| `title` | string | No | Chart title |
-| `series` | string | No | Column to split data into separate colored lines |
-| `type` | string | No | `"stacked"` for stacked lines (default: no stacking) |
-| `yFmt` | string | No | Format preset or Excel code for tooltip values (e.g. `yFmt="eur2"`) |
-
-### BarChart
-
-Renders a vertical bar chart. Add `horizontal` for horizontal bars. Supports multi-series with stacked or grouped display.
-
-```markdown
-<BarChart data={revenue_by_city} x="orders.city" y="orders.total_revenue" />
-<BarChart data={revenue_by_city} x="orders.city" y="orders.total_revenue" horizontal />
-<BarChart data={revenue_by_type} x="orders.created_at" y="orders.total_revenue" series="orders.type" />
-<BarChart data={revenue_by_type} x="orders.created_at" y="orders.total_revenue" series="orders.type" type="grouped" />
-```
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `data` | query ref | Yes | Query name |
-| `x` | string | Yes | Field for category axis |
-| `y` | string | Yes | Field(s) for value axis. Comma-separated for multiple (e.g. `y="orders.total_revenue,orders.count"`) |
-| `title` | string | No | Chart title |
-| `horizontal` | boolean | No | Render as horizontal bar chart |
-| `series` | string | No | Column to split data into separate colored bars |
-| `type` | string | No | `"stacked"` (default) or `"grouped"` for multi-series display |
-| `yFmt` | string | No | Format preset or Excel code for tooltip values (e.g. `yFmt="usd"`) |
-
-### AreaChart
-
-Renders a filled area chart. Supports series splitting and stacked areas.
-
-```markdown
-<AreaChart data={monthly_revenue} x="orders.created_at" y="orders.total_revenue" />
-<AreaChart data={revenue_by_source} x="orders.created_at" y="orders.total_revenue" series="orders.source" type="stacked" />
-```
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `data` | query ref | Yes | Query name |
-| `x` | string | Yes | Field for x-axis |
-| `y` | string | Yes | Field(s) for y-axis. Comma-separated for multiple (e.g. `y="orders.total_revenue,orders.count"`) |
-| `title` | string | No | Chart title |
-| `series` | string | No | Column to split data into separate colored areas |
-| `type` | string | No | `"stacked"` for stacked areas (default: no stacking) |
-| `yFmt` | string | No | Format preset or Excel code for tooltip values (e.g. `yFmt="pct1"`) |
-
-### PieChart
-
-Renders a pie/donut chart.
-
-```markdown
-<PieChart data={by_status} name="orders.status" value="orders.count" title="Order Status" />
-```
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `data` | query ref | Yes | Query name |
-| `name` | string | Yes | Field for slice labels |
-| `value` | string | Yes | Field for slice values |
-| `title` | string | No | Chart title |
-
-### DataTable
-
-Renders query results as a sortable, paginated table. Click any column header to sort ascending/descending.
-
-```markdown
-<DataTable data={top_products} />
-<DataTable data={top_products} columns="orders.category,orders.total_revenue,orders.count" />
-<DataTable data={top_products} rows="25" />
-<DataTable data={top_products} rows="all" />
-```
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `data` | query ref | Yes | Query name |
-| `columns` | string | No | Comma-separated list of columns to show (default: all) |
-| `title` | string | No | Table title |
-| `fmt` | string | No | Column format map: `fmt="orders.total_revenue:eur2,orders.created_at:shortdate"` |
-| `rows` | string | No | Rows per page. Default `10`. Use `rows="all"` to disable pagination. |
-
-**Sorting:** Click a column header to sort ascending. Click again to sort descending. Null values always sort to the end. Numbers sort numerically, strings sort case-insensitively.
-
-**Formatting:** Numbers right-align with tabular figures. Dates auto-detect and won't wrap. Use `fmt` for explicit formatting per column.
-
-## Layout
-
-### Auto BigValue Grouping
-
-Consecutive `<BigValue>` components are automatically wrapped in a responsive grid — no `<Grid>` tag needed:
-
-```markdown
-<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" />
-<BigValue data={order_count} value="orders.count" title="Orders" />
-<BigValue data={avg_order} value="orders.avg_order_value" title="Avg Order" />
-```
-
-This renders as a 3-column row. The grid auto-sizes up to 4 columns based on the number of consecutive BigValues. For more control, use an explicit `<Grid>` tag.
-
-### Grid
-
-Wrap components in a `<Grid>` tag to arrange them in columns:
-
-```markdown
-<Grid cols="3">
-<BigValue data={total_orders} value="orders.count" title="Orders" />
-<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" />
-<BigValue data={avg_order} value="orders.avg_order_value" title="Avg Order" />
-</Grid>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `cols` | string | `"2"` | Number of columns in the grid |
-
-### Layout Best Practices
-
-**Use `##` for sections, not `#`.** The `#` heading renders very large and wastes vertical space. Use `##` for section titles and `###` for subsections. Reserve `#` for the dashboard title only (which is set in frontmatter, not in the body).
-
-**Group related charts side by side.** Wrap pairs of charts in `<Grid cols="2">` to avoid long vertical scrolling:
-
-```markdown
-<Grid cols="2">
-<BarChart data={by_channel} x="orders.channel" y="orders.total_revenue" title="By Channel" />
-<BarChart data={by_city} x="orders.city" y="orders.total_revenue" title="By City" horizontal />
-</Grid>
-```
-
-**Start each section with KPIs.** Place `<BigValue>` cards at the top of a section for at-a-glance metrics, then follow with charts for detail.
-
-**Only Grid together components of similar height.** Don't mix a `<BigValue>` with a chart in the same `<Grid>` row — the grid stretches both cells to the tallest item, leaving the BigValue card with a large empty area. Instead, place KPIs in their own row (consecutive BigValues auto-group) and pair charts with other charts of similar size.
-
-**Keep it compact.** A good dashboard fits key information in 2-3 screens of scrolling. Use Grids, concise titles, and avoid unnecessary headings between every chart.
-
-## Formatting
-
-Values are auto-formatted by default — numbers get locale grouping (1,234.56), dates display as "13 Jan 2025", and nulls show as "—". Override with named presets for common currencies and percentages, or use raw Excel format codes for full control.
-
-### Format Presets
-
-| Preset | Excel code | Example output |
-|--------|-----------|---------------|
-| `num0` | `#,##0` | 1,234 |
-| `num1` | `#,##0.0` | 1,234.6 |
-| `num2` | `#,##0.00` | 1,234.56 |
-| `usd` | `$#,##0` | $1,234 |
-| `usd2` | `$#,##0.00` | $1,234.56 |
-| `eur` | `#,##0 "€"` | 1,234 € |
-| `eur2` | `#,##0.00 "€"` | 1,234.56 € |
-| `gbp` | `£#,##0` | £1,234 |
-| `gbp2` | `£#,##0.00` | £1,234.56 |
-| `chf` | `"CHF "#,##0` | CHF 1,234 |
-| `chf2` | `"CHF "#,##0.00` | CHF 1,234.56 |
-| `pct` | `0%` | 45% |
-| `pct1` | `0.0%` | 45.1% |
-| `pct2` | `0.00%` | 45.12% |
-| `shortdate` | `d mmm yyyy` | 13 Jan 2025 |
-| `longdate` | `d mmmm yyyy` | 13 January 2025 |
-| `monthyear` | `mmm yyyy` | Jan 2025 |
-
-Any string that isn't a preset name is treated as a raw Excel format code (ECMA-376). For example: `fmt="orders.total_revenue:$#,##0.00"`.
-
-Note: Percentage presets (`pct`, `pct1`, `pct2`) multiply by 100 per Excel convention — 0.45 displays as "45%".
-
-### Usage Examples
-
-```markdown
-<!-- BigValue with currency -->
-<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" fmt="eur2" />
-
-<!-- DataTable with per-column formatting -->
-<DataTable data={sales} fmt="orders.total_revenue:usd2,orders.created_at:shortdate,orders.margin:pct1" />
-
-<!-- Chart with formatted tooltips -->
-<BarChart data={monthly} x="orders.created_at" y="orders.total_revenue" yFmt="usd" />
-<LineChart data={trend} x="orders.created_at" y="orders.growth" yFmt="pct1" />
-```
-
-## Field Names
-
-All field names in component props must be **fully qualified** with the view or cube name — the same format used in query blocks. For example, use `value="orders.total_revenue"` not `value="total_revenue"`.
-
-## See Also
-
-- [Queries](dashboards.queries) — query syntax and properties
-- [Examples](dashboards.examples) — complete dashboard examples
-- [Dashboards](dashboards) — overview and deployment