@bonnard/cli 0.3.0 → 0.3.2

package/dist/bin/{api-DqgY-30K.mjs → api-CirD2MoX.mjs}

@@ -67,9 +67,12 @@ function get(path) {
 function post(path, body) {
 	return request("POST", path, body);
 }
+function put(path, body) {
+	return request("PUT", path, body);
+}
 function del(path) {
 	return request("DELETE", path);
 }
 
 //#endregion
-export { loadCredentials as a, clearCredentials as i, get as n, saveCredentials as o, post as r, del as t };
+export { clearCredentials as a, put as i, get as n, loadCredentials as o, post as r, saveCredentials as s, del as t };

package/dist/bin/api-DZ1Xj0_d.mjs

@@ -0,0 +1,3 @@
+import { i as put, n as get, r as post, t as del } from "./api-CirD2MoX.mjs";
+
+export { del, get };

package/dist/bin/bon.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { n as getProjectPaths, t as BONNARD_DIR } from "./project-Dj085D_B.mjs";
-import { a as loadCredentials, i as clearCredentials, n as get, o as saveCredentials, r as post, t as del } from "./api-DqgY-30K.mjs";
+import { a as clearCredentials, i as put, n as get, o as loadCredentials, r as post, s as saveCredentials, t as del } from "./api-CirD2MoX.mjs";
 import { i as ensureBonDir, n as addLocalDatasource, o as loadLocalDatasources, r as datasourceExists, s as removeLocalDatasource, t as isDatasourcesTrackedByGit } from "./local-ByvuW3eV.mjs";
 import { createRequire } from "node:module";
 import { program } from "commander";
@@ -9,7 +9,7 @@ import path from "node:path";
 import os from "node:os";
 import pc from "picocolors";
 import { fileURLToPath } from "node:url";
-import YAML from "yaml";
+import YAML, { parse, stringify } from "yaml";
 import http from "node:http";
 import crypto from "node:crypto";
 import { encode } from "@toon-format/toon";
@@ -1601,7 +1601,7 @@ async function listRemoteDatasources() {
 		return;
 	}
 	try {
-		const { get } = await import("./api-B7cdKn9j.mjs");
+		const { get } = await import("./api-DZ1Xj0_d.mjs");
 		const result = await get("/api/datasources");
 		if (result.dataSources.length === 0) {
 			console.log(pc.dim("No remote data sources found."));
@@ -1662,7 +1662,7 @@ async function removeRemote(name) {
 		process.exit(1);
 	}
 	try {
-		const { del } = await import("./api-B7cdKn9j.mjs");
+		const { del } = await import("./api-DZ1Xj0_d.mjs");
 		await del(`/api/datasources/${encodeURIComponent(name)}`);
 		console.log(pc.green(`✓ Removed "${name}" from remote server`));
 	} catch (err) {
@@ -1825,7 +1825,7 @@ async function deployCommand(options = {}) {
 async function testAndSyncDatasources(cwd, options = {}) {
 	const { extractDatasourcesFromCubes } = await import("./cubes-BvtwNBUG.mjs");
 	const { loadLocalDatasources } = await import("./local-BkK5XL7T.mjs");
-	const { pushDatasource } = await import("./push-BOkUmRL8.mjs");
+	const { pushDatasource } = await import("./push-BRq4Yy0V.mjs");
 	const references = extractDatasourcesFromCubes(cwd);
 	if (references.length === 0) return false;
 	console.log();
@@ -4093,7 +4093,7 @@ async function dashboardListCommand() {
 
 //#endregion
 //#region src/commands/dashboard/remove.ts
-async function confirm(message) {
+async function confirm$1(message) {
 	const rl = createInterface({
 		input: process.stdin,
 		output: process.stdout
@@ -4107,7 +4107,7 @@ async function confirm(message) {
 }
 async function dashboardRemoveCommand(slug, options) {
 	if (!options.force) {
-		if (!await confirm(`Remove dashboard "${slug}"? This cannot be undone.`)) {
+		if (!await confirm$1(`Remove dashboard "${slug}"? This cannot be undone.`)) {
 			console.log(pc.dim("Cancelled."));
 			return;
 		}
@@ -4148,6 +4148,26 @@ function loadViewer() {
 	}
 	return fs.readFileSync(viewerPath, "utf-8");
 }
+function loadThemeFile(filePath) {
+	try {
+		const parsed = parse(fs.readFileSync(filePath, "utf-8"));
+		if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) return parsed;
+		console.error(pc.yellow(`Warning: Theme file is not a valid object, ignoring.`));
+		return null;
+	} catch (err) {
+		console.error(pc.yellow(`Warning: Could not load theme file: ${err instanceof Error ? err.message : err}`));
+		return null;
+	}
+}
+async function fetchOrgTheme() {
+	try {
+		const result = await get("/api/org/theme");
+		if (result.theme && typeof result.theme === "object") return result.theme;
+		return null;
+	} catch {
+		return null;
+	}
+}
 async function dashboardDevCommand(file, options) {
 	const filePath = path.resolve(file);
 	if (!fs.existsSync(filePath)) {
@@ -4161,6 +4181,24 @@ async function dashboardDevCommand(file, options) {
 	}
 	const viewerHtml = loadViewer();
 	const sseClients = /* @__PURE__ */ new Set();
+	let orgTheme = null;
+	if (options.theme) {
+		const themePath = path.resolve(options.theme);
+		if (!fs.existsSync(themePath)) {
+			console.error(pc.red(`Theme file not found: ${options.theme}`));
+			process.exit(1);
+		}
+		orgTheme = loadThemeFile(themePath);
+		if (orgTheme) console.log(pc.dim(`Using local theme from ${path.basename(themePath)}`));
+		fs.watch(themePath, () => {
+			orgTheme = loadThemeFile(themePath);
+			for (const client of sseClients) client.write("data: reload\n\n");
+		});
+	} else {
+		console.log(pc.dim("Fetching org theme..."));
+		orgTheme = await fetchOrgTheme();
+		if (orgTheme) console.log(pc.dim("Using org theme from Bonnard."));
+	}
 	let debounce = null;
 	fs.watch(filePath, () => {
 		if (debounce) clearTimeout(debounce);
@@ -4190,7 +4228,8 @@ async function dashboardDevCommand(file, options) {
 			});
 			res.end(JSON.stringify({
 				token: creds.token,
-				baseUrl: APP_URL
+				baseUrl: APP_URL,
+				orgTheme
 			}));
 			return;
 		}
@@ -4216,6 +4255,107 @@ async function dashboardDevCommand(file, options) {
 	});
 }
 
+//#endregion
+//#region src/commands/theme/get.ts
+async function themeGetCommand() {
+	try {
+		const result = await get("/api/org/theme");
+		if (!result.theme) {
+			console.log(pc.dim("No org theme set. Using defaults."));
+			return;
+		}
+		console.log(pc.bold("Organization theme:\n"));
+		console.log(stringify(result.theme).trimEnd());
+	} catch (err) {
+		console.error(pc.red(`Error: ${err instanceof Error ? err.message : err}`));
+		process.exit(1);
+	}
+}
+
+//#endregion
+//#region src/commands/theme/set.ts
+const VALID_TOP_LEVEL_KEYS = new Set([
+	"palette",
+	"chartHeight",
+	"colors"
+]);
+async function themeSetCommand(file, options) {
+	const filePath = path.resolve(file);
+	if (!fs.existsSync(filePath)) {
+		console.error(pc.red(`File not found: ${file}`));
+		process.exit(1);
+	}
+	let theme;
+	try {
+		theme = parse(fs.readFileSync(filePath, "utf-8"));
+	} catch (err) {
+		console.error(pc.red(`Failed to parse ${file}: ${err instanceof Error ? err.message : err}`));
+		process.exit(1);
+	}
+	if (!theme || typeof theme !== "object" || Array.isArray(theme)) {
+		console.error(pc.red("Theme file must contain a YAML/JSON object."));
+		process.exit(1);
+	}
+	const unknownKeys = Object.keys(theme).filter((k) => !VALID_TOP_LEVEL_KEYS.has(k));
+	if (unknownKeys.length > 0) {
+		console.error(pc.red(`Unknown top-level keys: ${unknownKeys.join(", ")}\nAllowed: ${[...VALID_TOP_LEVEL_KEYS].join(", ")}`));
+		process.exit(1);
+	}
+	if (options.dryRun) {
+		console.log(pc.bold("Theme to be set (dry run):\n"));
+		console.log(stringify(theme).trimEnd());
+		return;
+	}
+	try {
+		await put("/api/org/theme", { theme });
+		console.log(pc.green("Organization theme updated.\n"));
+		const summary = [];
+		if (theme.palette) {
+			const p = theme.palette;
+			summary.push(`  palette: ${typeof p === "string" ? p : `[${p.length} colors]`}`);
+		}
+		if (theme.chartHeight) summary.push(`  chartHeight: ${theme.chartHeight}`);
+		if (theme.colors) {
+			const count = Object.keys(theme.colors).length;
+			summary.push(`  colors: ${count} override${count !== 1 ? "s" : ""}`);
+		}
+		if (summary.length > 0) console.log(summary.join("\n"));
+	} catch (err) {
+		console.error(pc.red(`Failed to set theme: ${err instanceof Error ? err.message : err}`));
+		process.exit(1);
+	}
+}
+
+//#endregion
+//#region src/commands/theme/reset.ts
+async function confirm(message) {
+	const rl = createInterface({
+		input: process.stdin,
+		output: process.stdout
+	});
+	return new Promise((resolve) => {
+		rl.question(`${message} (y/N) `, (answer) => {
+			rl.close();
+			resolve(answer.toLowerCase() === "y");
+		});
+	});
+}
+async function themeResetCommand(options) {
+	if (!options.force) {
+		if (!await confirm("Reset org theme to defaults?")) {
+			console.log(pc.dim("Cancelled."));
+			return;
+		}
+	}
+	try {
+		await put("/api/org/theme", { theme: null });
+		console.log(pc.green("Org theme reset to defaults."));
+	} catch (err) {
+		console.error(pc.red(`Failed to reset theme: ${err instanceof Error ? err.message : err}`));
+		process.exit(1);
+	}
+}
+
 //#endregion
 //#region src/bin/bon.ts
 const { version } = createRequire(import.meta.url)("../../package.json");
@@ -4242,11 +4382,15 @@ keys.command("list").description("List all API keys for your organization").acti
 keys.command("create").description("Create a new API key").requiredOption("--name <name>", "Key name (e.g. 'Production SDK')").requiredOption("--type <type>", "Key type: publishable or secret").action(keysCreateCommand);
 keys.command("revoke").description("Revoke an API key by name or prefix").argument("<name-or-prefix>", "Key name or key prefix to revoke").action(keysRevokeCommand);
 const dashboard = program.command("dashboard").description("Manage hosted dashboards");
-dashboard.command("dev").description("Preview a markdown dashboard locally with live reload").argument("<file>", "Path to dashboard .md file").option("--port <port>", "Server port (default: random available port)").action(dashboardDevCommand);
+dashboard.command("dev").description("Preview a markdown dashboard locally with live reload").argument("<file>", "Path to dashboard .md file").option("--port <port>", "Server port (default: random available port)").option("--theme <file>", "Path to a local theme YAML/JSON file").action(dashboardDevCommand);
 dashboard.command("deploy").description("Deploy an HTML or markdown file as a hosted dashboard").argument("<file>", "Path to HTML or markdown file").option("--slug <slug>", "Dashboard slug (defaults to filename)").option("--title <title>", "Dashboard title (defaults to <title> tag or slug)").action(dashboardDeployCommand);
 dashboard.command("list").description("List deployed dashboards").action(dashboardListCommand);
 dashboard.command("remove").description("Remove a deployed dashboard").argument("<slug>", "Dashboard slug to remove").option("--force", "Skip confirmation prompt").action(dashboardRemoveCommand);
 dashboard.command("open").description("Open a deployed dashboard in the browser").argument("<slug>", "Dashboard slug to open").action(dashboardOpenCommand);
+const theme = program.command("theme").description("Manage organization dashboard theme");
+theme.command("get").description("Show the current organization theme").action(themeGetCommand);
+theme.command("set").description("Set the organization theme from a YAML or JSON file").argument("<file>", "Path to theme YAML or JSON file").option("--dry-run", "Validate and preview without uploading").action(themeSetCommand);
+theme.command("reset").description("Reset the organization theme to defaults").option("--force", "Skip confirmation prompt").action(themeResetCommand);
 const metabase = program.command("metabase").description("Connect to and explore Metabase content");
 metabase.command("connect").description("Configure Metabase API connection").option("--url <url>", "Metabase instance URL").option("--api-key <key>", "Metabase API key").option("--force", "Overwrite existing configuration").action(metabaseConnectCommand);
 metabase.command("explore").description("Browse Metabase databases, collections, cards, and dashboards").argument("[resource]", "databases, collections, cards, dashboards, card, dashboard, database, table, collection").argument("[id]", "Resource ID (e.g. card <id>, dashboard <id>, database <id>, table <id>, collection <id>)").action(metabaseExploreCommand);

package/dist/bin/{push-BOkUmRL8.mjs → push-BRq4Yy0V.mjs}

@@ -1,4 +1,4 @@
-import { r as post } from "./api-DqgY-30K.mjs";
+import { r as post } from "./api-CirD2MoX.mjs";
 import { a as getLocalDatasource, c as resolveEnvVarsInCredentials } from "./local-ByvuW3eV.mjs";
 import pc from "picocolors";
 import "@inquirer/prompts";

package/dist/docs/topics/dashboards.md

@@ -55,6 +55,7 @@ description: Monthly trends     # Optional
 |-------|----------|-------------|
 | `title` | Yes | Dashboard title displayed in the viewer and listings |
 | `description` | No | Short description shown in dashboard listings |
+| `theme` | No | Theme overrides for this dashboard (palette, colors, chartHeight) |
 
 ## Local Preview
 
@@ -109,4 +110,5 @@ Dashboard queries respect the same governance policies as all other queries. Whe
 - [Queries](dashboards.queries) — query syntax and properties
 - [Components](dashboards.components) — chart and display components
 - [Inputs](dashboards.inputs) — interactive filters
+- [Theming](dashboards.theming) — customize colors, palettes, and styles
 - [Examples](dashboards.examples) — complete dashboard examples

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

@@ -0,0 +1,152 @@
+# Theming
+
+> Customize dashboard colors, chart palettes, and visual styles at the org or dashboard level.
+
+## Overview
+
+Dashboards support two levels of theming:
+
+- **Organization theme** — applies to all dashboards in the org
+- **Dashboard theme** — per-file override via frontmatter
+
+The cascade order is: defaults → org theme → dashboard frontmatter theme. Each level deep-merges into the previous, so you only need to specify the properties you want to change.
+
+## Theme Properties
+
+A theme object can include any combination of these properties:
+
+### `palette`
+
+The color palette used for chart series. Can be a named palette or an array of hex colors.
+
+**Named palettes:**
+
+| Name | Colors | Best for |
+|------|--------|----------|
+| `tableau` | 10 balanced colors | General use (default) |
+| `default` | 8 saturated Tailwind colors | Bold dashboards |
+| `observable` | 10 modern vibrant colors | Data-heavy visualizations |
+| `metabase` | 8 soft muted colors | Friendly reports |
+
+**Custom palette:**
+
+```yaml
+palette: ["#2563eb", "#dc2626", "#16a34a", "#ca8a04"]
+```
+
+### `chartHeight`
+
+Height of chart components in pixels. Default: `320`.
+
+```yaml
+chartHeight: 400
+```
+
+### `colors`
+
+Override individual color tokens that control the dashboard UI. Only specify the tokens you want to change — unspecified tokens keep their defaults.
+
+| Token | Description |
+|-------|-------------|
+| `bg` | Page background |
+| `bgMuted` | Muted/secondary background |
+| `bgCard` | Card background |
+| `border` | Default border color |
+| `text` | Primary text |
+| `textMuted` | Secondary/muted text |
+| `textTitle` | Heading text |
+| `textLabel` | Label text (axes, legends) |
+| `shadow` | Card shadow |
+| `radius` | Border radius |
+| `gridLine` | Chart grid lines |
+| `legendText` | Chart legend text |
+| `tooltip.bg` | Tooltip background |
+| `tooltip.border` | Tooltip border |
+| `tooltip.text` | Tooltip text |
+| `tooltip.shadow` | Tooltip shadow |
+| `table.headerBg` | Data table header background |
+| `table.hoverBg` | Data table row hover |
+
+## Organization Theme
+
+Set a theme that applies to all dashboards in your organization.
+
+```bash
+# View current theme
+bon theme get
+
+# Set theme from a file
+bon theme set theme.yml
+
+# Validate without uploading
+bon theme set theme.yml --dry-run
+
+# Reset to defaults
+bon theme reset
+```
+
+### Example `theme.yml`
+
+```yaml
+palette: observable
+chartHeight: 360
+colors:
+  bgCard: "#1e293b"
+  border: "#334155"
+  gridLine: "#334155"
+  tooltip:
+    bg: "#1e293b"
+    border: "#475569"
+```
+
+### Example with custom palette
+
+```yaml
+palette:
+  - "#2563eb"
+  - "#dc2626"
+  - "#16a34a"
+  - "#ca8a04"
+  - "#9333ea"
+chartHeight: 300
+```
+
+## Dashboard Theme (Frontmatter Override)
+
+Override the org theme for a specific dashboard by adding `theme` to the frontmatter:
+
+```yaml
+---
+title: Revenue Dashboard
+theme:
+  palette: metabase
+  colors:
+    bgCard: "#f0f9ff"
+---
+```
+
+This overrides the org theme for this dashboard only. Properties not specified in the dashboard theme inherit from the org theme (or defaults if no org theme is set).
+
+### Combining org and dashboard themes
+
+If your org theme uses the Observable palette and a dashboard specifies `palette: metabase`, that dashboard uses Metabase colors while keeping all other org theme settings (chartHeight, colors, etc.).
+
+## Local Preview
+
+Preview dashboards with theming applied locally:
+
+```bash
+# Uses deployed org theme (fetched from API)
+bon dashboard dev revenue.md
+
+# Uses a local theme file instead
+bon dashboard dev revenue.md --theme theme.yml
+```
+
+The `--theme` flag watches the theme file for changes — edit and save to see updates live.
+
+## See Also
+
+- [Dashboards](dashboards) — format and deployment
+- [Components](dashboards.components) — chart reference
+- [Examples](dashboards.examples) — complete examples

package/dist/docs/topics/sdk.browser.md

@@ -17,7 +17,7 @@ Alternative CDN:
 
 Pin a specific version:
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@bonnard/sdk@0.4.2/dist/bonnard.iife.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@bonnard/sdk@latest/dist/bonnard.iife.js"></script>
 ```
 
 ## First query

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

@@ -119,6 +119,16 @@ Options:
 - `--slug <slug>` — custom URL slug (default: derived from filename)
 - `--title <title>` — override frontmatter title
 
+## Theming (Optional)
+
+Customize colors and palettes:
+
+- **Per-dashboard**: Add `theme:` to frontmatter (e.g. `theme: { palette: observable }`)
+- **Org-wide**: Create a `theme.yml` and run `bon theme set theme.yml`
+- **Preview locally**: `bon dashboard dev dashboard.md --theme theme.yml`
+
+See `bon docs dashboards.theming` for palette names, color tokens, and examples.
+
 ## Phase 6: View Live
 
 Open the deployed dashboard in the browser:

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

@@ -118,6 +118,16 @@ Options:
 - `--slug <slug>` — custom URL slug (default: derived from filename)
 - `--title <title>` — override frontmatter title
 
+## Theming (Optional)
+
+Customize colors and palettes:
+
+- **Per-dashboard**: Add `theme:` to frontmatter (e.g. `theme: { palette: observable }`)
+- **Org-wide**: Create a `theme.yml` and run `bon theme set theme.yml`
+- **Preview locally**: `bon dashboard dev dashboard.md --theme theme.yml`
+
+See `bon docs dashboards.theming` for palette names, color tokens, and examples.
+
 ## Phase 6: View Live
 
 Open the deployed dashboard in the browser:

package/dist/templates/shared/bonnard.md

@@ -78,6 +78,9 @@ All tables are in the `contoso` schema. The datasource is named `contoso_demo`.
 | `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 theme get` | Show current org dashboard theme |
+| `bon theme set <file>` | Set org theme from YAML/JSON file |
+| `bon theme reset` | Reset org theme to defaults |
 | `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 |