@entrinsik/vite-plugin-informer 1.0.2 → 1.0.4

package/bin/deploy.js

@@ -29,14 +29,16 @@ let pkg;
 let displayName;
 let description;
 let savedId;
+let icon;
 
 try {
     pkg = JSON.parse(await readFile(pkgPath, 'utf8'));
 
-    // Read display name, description, and saved ID from informer config section
+    // Read display name, description, icon, and saved ID from informer config section
     displayName = pkg.informer?.name;
     description = pkg.informer?.description;
     savedId = pkg.informer?.id;
+    icon = pkg.informer?.icon;
 } catch {
     console.error('Could not read package.json in current directory.');
     process.exit(1);
@@ -66,6 +68,7 @@ try {
         distDir,
         name: displayName,
         description,
+        icon,
         id: savedId
     });
 

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@entrinsik/vite-plugin-informer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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",

package/src/deploy.js

@@ -16,10 +16,10 @@ const ROOT_CONFIG_FILES = ['data-access.yaml'];
 /**
  * Deploy a built Vite project to Informer as a Magic Report.
  *
- * @param {{ baseUrl: string, apiKey?: string, user?: string, pass?: string, distDir: string, name: string, description?: string, id?: string }} opts
+ * @param {{ baseUrl: string, apiKey?: string, user?: string, pass?: string, distDir: string, name: string, description?: string, icon?: string, id?: string }} opts
  * @returns {Promise<{ id: string, url: string }>} The report's natural ID and URL
  */
-export async function deploy({ baseUrl, apiKey, user, pass, distDir, name, description, id }) {
+export async function deploy({ baseUrl, apiKey, user, pass, distDir, name, description, icon, id }) {
     const api = createClient({ baseUrl, apiKey, user, pass });
 
     let report = null;
@@ -57,10 +57,16 @@ export async function deploy({ baseUrl, apiKey, user, pass, distDir, name, descr
         console.log(`Created report: ${naturalId}`);
     }
 
-    // 3. Update name/description if provided (for existing reports)
+    // 3. Update name/description/icon if provided (for existing reports)
     const updates = {};
     if (name && report.name !== name) updates.name = name;
     if (description !== undefined && report.description !== description) updates.description = description;
+    if (icon) {
+        const currentDefn = report.defn || {};
+        if (currentDefn.icon !== icon) {
+            updates.defn = { ...currentDefn, icon };
+        }
+    }
     if (Object.keys(updates).length > 0) {
         await api.put(`reports/${naturalId}`, updates);
     }

package/src/index.js

@@ -63,6 +63,7 @@ export default function informer(options = {}) {
                         id: 'dev-local',
                         name: 'Local Development'
                     },
+                    theme: 'light',
                     ...options.mock
                 };
 

package/templates/skill/SKILL.md

@@ -47,6 +47,28 @@ Builds your project and uploads to an Informer library:
 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:
@@ -302,9 +324,35 @@ 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.
+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