@embeddables/cli 0.4.4 → 0.5.0

package/.prompts/custom/build-funnel.md

@@ -0,0 +1,26 @@
+We need to build the pages from the attached images. Please create a plan and highlight any decisions that need to be made on implementation / things you're unsure about, especially when it comes to deciding how to build something out of the available components and settings.
+
+Embeddable ID: <EMBEDDABLE_ID>
+
+Important: Always read the Embeddables CLI context before starting (e.g. @.cursor/rules/embeddables-cli.md or @.claudefiles/embeddables-cli.md depending on your editor).
+
+[KEEP / REMOVE]
+Use the designs from the images but use the content from the attached document instead, and build out the pages based on that content. Therefore, when using the designs from the images, for each page just find the most relevant design for the page's content and design it based on that. However, don't be confined to the provided designs - just find the closest design and modify it to fit the content required.
+
+Notes:
+
+1. The page is screenshotted on a standard MacBook.
+2. Ignore any floating widgets in the corners that would be installed separately (e.g. Intercom).
+3. Add a max width, with the content centered so that on desktop it's in the middle and mobile it's full width.
+4. Make sure the header and footer go in global components, including any brand logo, progress bar, back button, global links etc.
+5. Whenever you need to insert an image (e.g. a logo, an icon, a larger image) use one of the following (and please be consistent with your choice out of those options within a particular component or section):
+   a. `emojiIcon` with an emoji when there is an appropriate one (can be used in `imageUrl` in CustomButton, or `imageUrl` inside OptionSelector buttons)
+   b. placeholder image: https://placehold.co/600x400?text=My+Text+To+Display if there is text in the image (can't be emojis), otherwise https://placehold.co/600x400 (but with the correct size specified in the URL in either case; can be used in `src` in MediaImage, `imageUrl` in CustomButton, or `imageUrl` inside OptionSelector buttons)
+
+At the end of your work, include a short summary covering:
+
+- Decisions made – Any implementation choices where requirements, design, or instructions were not fully explicit.
+- Assumptions – Anything you assumed about behavior, structure, content, or flow.
+- Uncertainties – Anything that may need clarification or confirmation instead of being silently decided.
+
+Keep it concise and focused on reasoning, not a restatement of the instructions.

package/dist/cli.js

@@ -3,6 +3,7 @@ import pc from 'picocolors';
 import { runBranch } from './commands/branch.js';
 import { runBuild } from './commands/build.js';
 import { runDev } from './commands/dev.js';
+import { runExperimentsConnect } from './commands/experiments-connect.js';
 import { runInit } from './commands/init.js';
 import { runLogin } from './commands/login.js';
 import { runLogout } from './commands/logout.js';
@@ -99,4 +100,18 @@ program
     .action(async (opts) => {
     await runBranch(opts);
 });
+const experiments = program.command('experiments').description('Manage embeddable experiments');
+experiments
+    .command('connect')
+    .description('Connect an experiment to an embeddable')
+    .option('-i, --id <id>', 'Embeddable ID (will prompt if not provided)')
+    .option('--experiment-id <id>', 'Experiment ID (will prompt to choose from project if not provided)')
+    .option('--experiment-key <key>', 'Experiment key (required if --experiment-id is set)')
+    .action(async (opts) => {
+    await runExperimentsConnect({
+        id: opts.id,
+        experimentId: opts.experimentId,
+        experimentKey: opts.experimentKey,
+    });
+});
 await program.parseAsync(process.argv);

package/dist/commands/experiments-connect.d.ts

@@ -0,0 +1,6 @@
+export declare function runExperimentsConnect(opts: {
+    id?: string;
+    experimentId?: string;
+    experimentKey?: string;
+}): Promise<void>;
+//# sourceMappingURL=experiments-connect.d.ts.map

package/dist/commands/experiments-connect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"experiments-connect.d.ts","sourceRoot":"","sources":["../../src/commands/experiments-connect.ts"],"names":[],"mappings":"AAYA,wBAAsB,qBAAqB,CAAC,IAAI,EAAE;IAChD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,iBAcA"}

package/dist/commands/experiments-connect.js

@@ -0,0 +1,114 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import pc from 'picocolors';
+import { isLoggedIn } from '../auth/index.js';
+import { getProjectId, writeProjectConfig } from '../config/index.js';
+import { promptForProject, promptForLocalEmbeddable, promptForExperiment, } from '../prompts/index.js';
+export async function runExperimentsConnect(opts) {
+    try {
+        await runExperimentsConnectInner(opts);
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            console.error(pc.red(`Connect failed: ${error.message}`));
+        }
+        else {
+            console.error(pc.red('Connect failed with an unexpected error.'));
+        }
+        process.exit(1);
+        if (error instanceof Error && error.message === 'exit') {
+            throw error;
+        }
+    }
+}
+async function runExperimentsConnectInner(opts) {
+    // 1. Check login (needed for fetching experiments from Supabase)
+    if (!isLoggedIn()) {
+        console.error(pc.red('Not logged in.'));
+        console.log(pc.gray('Run "embeddables login" first.'));
+        process.exit(1);
+    }
+    // 2. Get project ID (needed for experiment list)
+    let projectId = getProjectId();
+    if (!projectId) {
+        console.log(pc.cyan('No project configured. Fetching projects...'));
+        const selectedProject = await promptForProject();
+        if (!selectedProject) {
+            process.exit(1);
+        }
+        projectId = selectedProject.id;
+        writeProjectConfig({
+            org_id: selectedProject.org_id || undefined,
+            org_title: selectedProject.org_title || undefined,
+            project_id: projectId,
+            project_name: selectedProject.title || undefined,
+        });
+        console.log(pc.green('✓ Saved project to embeddables.json'));
+        console.log('');
+    }
+    // 4. Get embeddable ID
+    let embeddableId = opts.id;
+    if (!embeddableId) {
+        const selected = await promptForLocalEmbeddable({
+            message: 'Select an embeddable to connect the experiment to:',
+        });
+        if (!selected) {
+            process.exit(1);
+        }
+        embeddableId = selected;
+        console.log('');
+    }
+    // 5. Get experiment_id and experiment_key (from opts or interactive prompt)
+    let experimentId = opts.experimentId;
+    let experimentKey = opts.experimentKey;
+    if (experimentId && !experimentKey) {
+        console.error(pc.red('When using --experiment-id, --experiment-key is also required.'));
+        process.exit(1);
+    }
+    if (experimentKey && !experimentId) {
+        console.error(pc.red('When using --experiment-key, --experiment-id is also required.'));
+        process.exit(1);
+    }
+    if (!experimentId || !experimentKey) {
+        console.log(pc.cyan('Fetching experiments from project...'));
+        const selected = await promptForExperiment(projectId, {
+            message: 'Select an experiment to connect:',
+            excludeConnectedTo: embeddableId,
+        });
+        if (!selected) {
+            process.exit(1);
+        }
+        experimentId = selected.experiment_id;
+        experimentKey = selected.experiment_key;
+        console.log('');
+    }
+    // 6. Read config.json
+    const configPath = path.join('embeddables', embeddableId, 'config.json');
+    if (!fs.existsSync(configPath)) {
+        console.error(pc.red(`No config.json found at ${configPath}`));
+        console.log(pc.gray('Run "embeddables pull" or "embeddables init" first.'));
+        process.exit(1);
+    }
+    let config;
+    try {
+        const content = fs.readFileSync(configPath, 'utf8');
+        config = JSON.parse(content);
+    }
+    catch {
+        console.error(pc.red('Failed to parse config.json.'));
+        process.exit(1);
+    }
+    // 7. Append to connected_experiments
+    const connectedExperiments = Array.isArray(config.connected_experiments) ? [...config.connected_experiments] : [];
+    const alreadyConnected = connectedExperiments.some((e) => e.experiment_id === experimentId && e.experiment_key === experimentKey);
+    if (alreadyConnected) {
+        console.log(pc.yellow(`Experiment "${experimentKey}" is already connected to this embeddable.`));
+        return;
+    }
+    connectedExperiments.push({ experiment_id: experimentId, experiment_key: experimentKey });
+    config.connected_experiments = connectedExperiments;
+    // 8. Write the modified config back
+    fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');
+    console.log(pc.green(`✓ Connected experiment "${experimentKey}" to embeddable (updated config.json)`));
+    console.log(pc.gray('Run "embeddables save" to persist to the cloud.'));
+}

package/dist/commands/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAuHA,wBAAsB,OAAO,CAAC,IAAI,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,iBAuMxE"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAuHA,wBAAsB,OAAO,CAAC,IAAI,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,iBAyOxE"}

package/dist/commands/init.js

@@ -193,13 +193,48 @@ export async function runInit(opts) {
     else {
         console.log(pc.gray('  ✓ embeddables/ directory exists'));
     }
-    // Copy .cursor/ folder with Cursor rules
+    // Inject .cursor/ and .claudefiles/ from source .prompts/embeddables-cli.md (or copy if pre-built dirs exist)
     const packageRoot = path.resolve(__dirname, '..', '..');
+    const promptsSource = path.join(packageRoot, '.prompts', 'embeddables-cli.md');
     const sourceCursorDir = path.join(packageRoot, '.cursor');
-    const targetCursorDir = path.join(cwd, '.cursor');
-    if (fs.existsSync(sourceCursorDir)) {
-        copyDirSync(sourceCursorDir, targetCursorDir);
+    const sourceClaudefilesDir = path.join(packageRoot, '.claudefiles');
+    if (fs.existsSync(promptsSource)) {
+        const content = fs.readFileSync(promptsSource, 'utf8');
+        const cursorFrontmatter = `---
+globs:
+alwaysApply: true
+---
+
+`;
+        const claudeIntro = `# Embeddables project (Claude Code)
+
+This is an Embeddables project managed by the Embeddables CLI. The CLI transforms Embeddable JSON into a local file structure for development, then compiles it back to JSON for saving.
+
+For full context when editing embeddables (pages, components, styles, actions, computed fields), see:
+
+- **.claudefiles/embeddables-cli.md** — Embeddables CLI structure, types, file layout, and conventions.
+
+All TypeScript types are in \`.types/\` (generated by \`embeddables init\`). Use \`embeddables dev\` to run the dev server and \`embeddables pull\` / \`embeddables save\` to sync with the project.
+`;
+        const cursorRulesDir = path.join(cwd, '.cursor', 'rules');
+        const claudefilesDir = path.join(cwd, '.claudefiles');
+        fs.mkdirSync(cursorRulesDir, { recursive: true });
+        fs.mkdirSync(claudefilesDir, { recursive: true });
+        fs.writeFileSync(path.join(cursorRulesDir, 'embeddables-cli.md'), cursorFrontmatter + content, 'utf8');
+        fs.writeFileSync(path.join(claudefilesDir, 'CLAUDE.md'), claudeIntro, 'utf8');
+        fs.writeFileSync(path.join(claudefilesDir, 'embeddables-cli.md'), content, 'utf8');
         console.log(pc.green('  ✓ Injected .cursor/ rules'));
+        console.log(pc.green('  ✓ Injected .claudefiles/'));
+    }
+    else if (fs.existsSync(sourceCursorDir) || fs.existsSync(sourceClaudefilesDir)) {
+        if (fs.existsSync(sourceCursorDir)) {
+            copyDirSync(sourceCursorDir, path.join(cwd, '.cursor'));
+            console.log(pc.green('  ✓ Injected .cursor/ rules'));
+        }
+        if (fs.existsSync(sourceClaudefilesDir)) {
+            copyDirSync(sourceClaudefilesDir, path.join(cwd, '.claudefiles'));
+            console.log(pc.green('  ✓ Injected .claudefiles/'));
+        }
     }
     // Create tsconfig.json for editor support (JSX, type checking)
     const tsconfigPath = path.join(cwd, 'tsconfig.json');

package/dist/prompts/experiments.d.ts

@@ -0,0 +1,28 @@
+export interface ExperimentInfo {
+    id: string;
+    experiment_id: string;
+    experiment_key: string;
+    name: string | null;
+    status: string;
+    flow_id: string;
+    flow_ids: string[] | null;
+}
+export interface PromptForExperimentOptions {
+    /** Custom message for the prompt */
+    message?: string;
+    /** Filter out experiments already connected to this embeddable ID */
+    excludeConnectedTo?: string;
+}
+/**
+ * Fetch experiments for a project from Supabase (using experiments_extended view)
+ */
+export declare function fetchProjectExperiments(projectId: string): Promise<ExperimentInfo[]>;
+/**
+ * Prompt the user to select an experiment from the project
+ * Returns null if no experiments found or user cancels
+ */
+export declare function promptForExperiment(projectId: string, options?: PromptForExperimentOptions): Promise<{
+    experiment_id: string;
+    experiment_key: string;
+} | null>;
+//# sourceMappingURL=experiments.d.ts.map

package/dist/prompts/experiments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"experiments.d.ts","sourceRoot":"","sources":["../../src/prompts/experiments.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,EAAE,MAAM,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,0BAA0B;IACzC,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,CA+B1F;AAED;;;GAGG;AACH,wBAAsB,mBAAmB,CACvC,SAAS,EAAE,MAAM,EACjB,OAAO,GAAE,0BAA+B,GACvC,OAAO,CAAC;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,CA4DnE"}

package/dist/prompts/experiments.js

@@ -0,0 +1,86 @@
+import pc from 'picocolors';
+import prompts from 'prompts';
+import { getAuthenticatedSupabaseClient } from '../auth/index.js';
+/**
+ * Fetch experiments for a project from Supabase (using experiments_extended view)
+ */
+export async function fetchProjectExperiments(projectId) {
+    const supabase = await getAuthenticatedSupabaseClient();
+    if (!supabase) {
+        return [];
+    }
+    try {
+        const { data, error } = await supabase
+            .from('experiments_extended')
+            .select('id, experiment_id, experiment_key, name, status, flow_id, flow_ids')
+            .eq('project_id', projectId)
+            .order('name', { ascending: true, nullsFirst: false });
+        if (error) {
+            console.warn(pc.yellow(`Could not fetch experiments: ${error.message}`));
+            return [];
+        }
+        return (data || []).map((row) => ({
+            id: row.id,
+            experiment_id: row.experiment_id,
+            experiment_key: row.experiment_key,
+            name: row.name || null,
+            status: row.status || 'draft',
+            flow_id: row.flow_id,
+            flow_ids: row.flow_ids || null,
+        }));
+    }
+    catch (err) {
+        console.warn(pc.yellow(`Could not fetch experiments: ${err}`));
+        return [];
+    }
+}
+/**
+ * Prompt the user to select an experiment from the project
+ * Returns null if no experiments found or user cancels
+ */
+export async function promptForExperiment(projectId, options = {}) {
+    const { message = 'Select an experiment to connect:', excludeConnectedTo } = options;
+    const experiments = await fetchProjectExperiments(projectId);
+    let filtered = experiments;
+    if (excludeConnectedTo) {
+        filtered = experiments.filter((e) => {
+            const connected = e.flow_ids ?? [e.flow_id];
+            return !connected.includes(excludeConnectedTo);
+        });
+    }
+    if (filtered.length === 0) {
+        if (excludeConnectedTo && experiments.length > 0) {
+            console.log(pc.yellow('All experiments in this project are already connected to this embeddable.'));
+        }
+        else {
+            console.log(pc.yellow('No experiments found in this project.'));
+        }
+        return null;
+    }
+    const choices = filtered.map((e) => ({
+        title: e.name || e.experiment_key,
+        description: `${e.experiment_key} (${e.experiment_id})`,
+        value: e,
+    }));
+    const response = await prompts({
+        type: 'autocomplete',
+        name: 'experiment',
+        message,
+        choices,
+        suggest: (input, choices) => Promise.resolve(choices.filter((c) => (c.title?.toLowerCase().includes(input.toLowerCase()) ?? false) ||
+            String(c.value.experiment_key).toLowerCase().includes(input.toLowerCase()) ||
+            String(c.value.experiment_id).toLowerCase().includes(input.toLowerCase()))),
+    }, {
+        onCancel: () => {
+            process.exit(0);
+        },
+    });
+    const selected = response.experiment;
+    if (!selected) {
+        return null;
+    }
+    return {
+        experiment_id: selected.experiment_id,
+        experiment_key: selected.experiment_key,
+    };
+}

package/dist/prompts/index.d.ts

@@ -4,4 +4,6 @@ export { fetchProjectEmbeddables, fetchEmbeddableMetadata, promptForEmbeddable,
 export type { EmbeddableInfo, EmbeddableMetadata, LocalEmbeddable, PromptForEmbeddableOptions, } from './embeddables.js';
 export { fetchBranches, promptForBranch } from './branches.js';
 export type { BranchInfo } from './branches.js';
+export { fetchProjectExperiments, promptForExperiment, } from './experiments.js';
+export type { ExperimentInfo, PromptForExperimentOptions } from './experiments.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/prompts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/prompts/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAC/D,YAAY,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AAEzE,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,kBAAkB,CAAA;AACzB,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,0BAA0B,GAC3B,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC9D,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/prompts/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAC/D,YAAY,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AAEzE,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,kBAAkB,CAAA;AACzB,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,0BAA0B,GAC3B,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC9D,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,OAAO,EACL,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,kBAAkB,CAAA;AACzB,YAAY,EAAE,cAAc,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/prompts/index.js

@@ -2,3 +2,4 @@
 export { fetchProjects, promptForProject } from './projects.js';
 export { fetchProjectEmbeddables, fetchEmbeddableMetadata, promptForEmbeddable, discoverLocalEmbeddables, promptForLocalEmbeddable, } from './embeddables.js';
 export { fetchBranches, promptForBranch } from './branches.js';
+export { fetchProjectExperiments, promptForExperiment, } from './experiments.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddables/cli",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "type": "module",
   "bin": {
     "embeddables": "./bin/embeddables.mjs"
@@ -24,7 +24,7 @@
   "files": [
     "bin",
     "dist",
-    ".cursor",
+    ".prompts",
     "README.md"
   ],
   "engines": {
@@ -43,7 +43,8 @@
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
     "test:verbose": "vitest --reporter verbose",
-    "prepack": "node scripts/readme-swap.cjs prepack",
+    "build:prompts": "node scripts/build-prompts.cjs",
+    "prepack": "node scripts/readme-swap.cjs prepack && node scripts/build-prompts.cjs",
     "postpack": "node scripts/readme-swap.cjs postpack"
   },
   "dependencies": {