@vsceasy/cli 0.1.7 → 0.1.9

package/dist/bin/cli.js

@@ -3826,7 +3826,7 @@ var init_scaffold = __esm(() => {
 });
 
 // src/lib/templatesData.ts
-var TEMPLATES_VERSION = "0.1.7", TEMPLATE_FILES;
+var TEMPLATES_VERSION = "0.1.9", TEMPLATE_FILES;
 var init_templatesData = __esm(() => {
   TEMPLATE_FILES = {
     "_generators/command/command.ts.tpl": `import { defineCommand } from '../shared/vsceasy';
@@ -4038,6 +4038,7 @@ export function App() {
   const [editingId, setEditingId] = useState<{{Name}}['{{primaryKey}}'] | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
+{{relationOptionsState}}
 
   const load = useCallback(async (initial: boolean) => {
     // The list stashes a row id before revealing this panel. Pull it (the host
@@ -4075,6 +4076,7 @@ export function App() {
       document.removeEventListener('visibilitychange', onVisible);
     };
   }, [load]);
+{{relationOptionsLoad}}
 
   const onChange = <K extends keyof FormState>(k: K, v: FormState[K]) => {
     setForm((f) => ({ ...f, [k]: v }));
@@ -4138,7 +4140,7 @@ import { {{Name}}Service } from '../services/{{Name}}Service';
 import { takePending{{Name}}Id } from '../services/{{name}}FormNav';
 import type { {{Name}}FormApi } from '../shared/api';
 import type { {{Name}} } from '../models/{{Name}}';
-
+{{relationImports}}
 export default definePanel<{{Name}}FormApi>({
   title: '{{title}}',
   column: 'beside',
@@ -4160,7 +4162,7 @@ export default definePanel<{{Name}}FormApi>({
       void vscode.commands.executeCommand('{{prefix}}.open{{Plural}}List');
       return saved;
     },
-    async cancel() {
+{{relationOptionsHandler}}    async cancel() {
       // No-op — webview closes itself.
     },
   }),
@@ -4538,6 +4540,35 @@ export interface Repository<T> {
   clear(): Promise<void>;
 }
 
+// ── Change notifications (reactivity) ────────────────────────────────────────
+
+/**
+ * Per-entity change listeners. Any mutation (insert/upsert/update/delete/...) on
+ * an entity fires its listeners with the entity name. This is the host-side hook
+ * the \`watch()\` helper builds on to push updates to webviews.
+ */
+const entityListeners = new Map<string, Set<(entity: string) => void>>();
+
+function emitChange(entity: string): void {
+  entityListeners.get(entity)?.forEach((cb) => {
+    try { cb(entity); } catch { /* a bad listener must not break a write */ }
+  });
+}
+
+/**
+ * Subscribe to changes on an entity. Returns an unsubscribe function.
+ *
+ *   watchEntity(Todos, () => server.emit('todos:changed'));
+ *
+ * Prefer the higher-level \`watch()\` helper, which wires this to an RPC emit.
+ */
+export function watchEntity<T>(entity: Entity<T>, cb: (entity: string) => void): () => void {
+  let set = entityListeners.get(entity.name);
+  if (!set) entityListeners.set(entity.name, (set = new Set()));
+  set.add(cb);
+  return () => { set!.delete(cb); };
+}
+
 // ── Provider interface (future-proof for sqlite/etc.) ────────────────────────
 
 export interface Provider {
@@ -4708,6 +4739,7 @@ function makeDb(provider: Provider): Db {
         }
         rows.push(row);
         await save(rows);
+        emitChange(entity.name);
         return row;
       },
       async upsert(row) {
@@ -4715,6 +4747,7 @@ function makeDb(provider: Provider): Db {
         const i = rows.findIndex((r) => r[pk] === row[pk]);
         if (i >= 0) rows[i] = row; else rows.push(row);
         await save(rows);
+        emitChange(entity.name);
         return row;
       },
       async update(id, patch) {
@@ -4723,6 +4756,7 @@ function makeDb(provider: Provider): Db {
         if (i < 0) return null;
         rows[i] = { ...rows[i], ...patch };
         await save(rows);
+        emitChange(entity.name);
         return rows[i];
       },
       async delete(id) {
@@ -4731,17 +4765,19 @@ function makeDb(provider: Provider): Db {
         const next = rows.filter((r) => r[pk] !== id);
         if (next.length === before) return false;
         await save(next);
+        emitChange(entity.name);
         return true;
       },
       async deleteMany(where) {
         const rows = await load();
         const next = rows.filter((r) => !match(r, where));
         const removed = rows.length - next.length;
-        if (removed > 0) await save(next);
+        if (removed > 0) { await save(next); emitChange(entity.name); }
         return removed;
       },
       async clear() {
         await save([]);
+        emitChange(entity.name);
       },
     };
   };
@@ -4972,7 +5008,7 @@ export const {{Plural}} = defineEntity<{{Name}}>('{{collection}}', {
  *   import { {{Plural}}Repo } from '../models/{{Name}}';
  *   await {{Plural}}Repo().insert({ ... });
  */
-export const {{Plural}}Repo = () => db()({{Plural}});
+export const {{Plural}}Repo = () => db()({{Plural}});{{relationsBlock}}
 `,
     "_generators/panel/App.tsx.tpl": `import React from 'react';
 {{apiBlock}}
@@ -5166,6 +5202,30 @@ export default defineStatusBar({
   alignment: '{{alignment}}',
   priority: {{priority}},{{commandLine}}{{panelLine}}
 });
+`,
+    "_generators/store/store.ts.tpl": `import { defineStore } from '../shared/vsceasy';
+
+/**
+ * Reactive store: a single observable value. Mutate it with \`.set()\` / \`.update()\`
+ * and anything subscribed reacts.
+ *
+ *   import { {{name}} } from '../stores/{{name}}';
+ *   {{name}}.set({{example}});
+ *   {{name}}.update((v) => v);
+ *
+ * To push changes to a webview, watch it on the host and emit over RPC:
+ *
+ *   // inside a panel/subpanel rpc():
+ *   import { watch } from '../shared/vsceasy';
+ *   import { {{name}} } from '../stores/{{name}}';
+ *   watch({{name}}, () => server.emit('{{name}}:changed', {{name}}.get()));
+ *
+ * Then listen in the webview:
+ *
+ *   import { listen } from '../shared/vsceasy/client';
+ *   listen(api, '{{name}}:changed', (v) => render(v));
+ */
+export const {{name}} = defineStore<{{type}}>({{initial}});
 `,
     "_generators/subpanel/App.tsx.tpl": `import React from 'react';
 {{apiBlock}}
@@ -6362,6 +6422,13 @@ function registerTreeView(
     vscode.commands.registerCommand(refreshCmd, () => provider.refresh()),
   );
 
+  // Keep the tree live: let the def subscribe to a data source and re-run
+  // getChildren on change. The unsubscribe is disposed on deactivate.
+  if (def.watch) {
+    const off = def.watch(() => provider.refresh(), vscode, context);
+    if (off) context.subscriptions.push({ dispose: off });
+  }
+
   const dispatchCmd = \`\${registry.prefix}._tree.\${def.id ?? id}.run\`;
   context.subscriptions.push(
     vscode.commands.registerCommand(dispatchCmd, async (node: TreeNode) => {
@@ -6438,9 +6505,11 @@ function registerSubpanel(
       const ui = def.ui ?? \`subpanels/\${def.id ?? id}\`;
       view.webview.html = renderHtml(view.webview, context, ui, def.title);
       if (def.rpc) {
-        const handlers = def.rpc(vscode, context);
-        const server = createRpcServer(webviewTransport(view.webview), handlers);
-        view.onDidDispose(() => server.dispose());
+        let server: ReturnType<typeof createRpcServer> | undefined;
+        const emit = (topic: string, payload?: unknown) => server?.emit(topic, payload);
+        const handlers = def.rpc(vscode, context, emit);
+        server = createRpcServer(webviewTransport(view.webview), handlers);
+        view.onDidDispose(() => server!.dispose());
       }
     },
   };
@@ -6676,9 +6745,13 @@ function openPanel(context: vscode.ExtensionContext, prefix: string, id: string,
   panel.webview.html = renderHtml(panel.webview, context, ui, def.title);
 
   if (def.rpc) {
-    const handlers = def.rpc(vscode, context);
-    const server = createRpcServer(webviewTransport(panel.webview), handlers);
-    panel.onDidDispose(() => server.dispose());
+    // \`emit\` is wired lazily: the rpc factory may call watch()/watchEntity()
+    // immediately, but the server (and thus the real emit) only exists after.
+    let server: ReturnType<typeof createRpcServer> | undefined;
+    const emit = (topic: string, payload?: unknown) => server?.emit(topic, payload);
+    const handlers = def.rpc(vscode, context, emit);
+    server = createRpcServer(webviewTransport(panel.webview), handlers);
+    panel.onDidDispose(() => server!.dispose());
   }
 
   openPanels.set(key, panel);
@@ -6796,6 +6869,33 @@ export {
   webviewState,
 } from './rpc';
 export type { RpcClient, Handlers, Transport, RpcClientOptions, WebviewApi } from './rpc';
+
+export { defineStore } from './store';
+export type { Store } from './store';
+
+import type { RpcClient, Handlers } from './rpc';
+
+/**
+ * Listen for a change pushed from the host over the RPC event channel, and run a
+ * callback when it arrives. This is the webview side of the reactivity model —
+ * the host emits with \`server.emit(topic, …)\` (usually wired via \`watch()\` /
+ * \`watchEntity()\`), and your visual element reacts here. Returns an unsubscribe
+ * function; call it on unmount.
+ *
+ *   const api = connectWebview<TodoStatsViewApi>();
+ *   // re-read + re-render whenever todos change on the host:
+ *   const off = listen(api, 'todos:changed', () => refresh());
+ *
+ * It's a thin, named wrapper over \`api.on(topic, handler)\` so the place you
+ * listen reads clearly in the UI code. The payload (if any) is passed through.
+ */
+export function listen<H extends Handlers>(
+  api: RpcClient<H>,
+  topic: string,
+  handler: (payload?: unknown) => void,
+): () => void {
+  return api.on(topic, handler);
+}
 `,
     "react/src/shared/vsceasy/codiconNames.ts": `/**
  * AUTO-GENERATED by scripts/genCodiconTypes.ts — do not edit.
@@ -6998,6 +7098,18 @@ export type CodiconName =
 import type { Handlers } from './rpc';
 import type { CodiconName } from './codiconNames';
 
+/**
+ * Push a change to this webview over the RPC event channel. The webview reacts
+ * with \`listen(api, topic, …)\`. Wire it to a data source with \`watch()\` /
+ * \`watchEntity()\` inside \`rpc()\`:
+ *
+ *   rpc: (vscode, ctx, emit) => {
+ *     watchEntity(Todos, () => emit('todos:changed'));
+ *     return { stats: () => … };
+ *   }
+ */
+export type RpcEmit = (topic: string, payload?: unknown) => void;
+
 export interface PanelDef<H extends Handlers = Handlers> {
   /** Stable id. Default: file basename. Used as command suffix and webview key. */
   id?: string;
@@ -7009,8 +7121,11 @@ export interface PanelDef<H extends Handlers = Handlers> {
   column?: 'active' | 'beside' | 'one' | 'two' | 'three';
   /** Keep DOM alive when hidden. Default: true. */
   retainContext?: boolean;
-  /** RPC handlers — receives vscode namespace + extension context. */
-  rpc?: (vscode: typeof import('vscode'), ctx: vscode.ExtensionContext) => H;
+  /**
+   * RPC handlers — receives the vscode namespace, the extension context, and
+   * \`emit\` for pushing change events to this webview (see {@link RpcEmit}).
+   */
+  rpc?: (vscode: typeof import('vscode'), ctx: vscode.ExtensionContext, emit: RpcEmit) => H;
   /** Optional command palette entry that opens this panel. Default: true. */
   command?:
     | boolean
@@ -7121,8 +7236,11 @@ export interface SubpanelDef<H extends Handlers = Handlers> {
   ui?: string;
   /** Keep DOM alive when hidden. Default: true. */
   retainContext?: boolean;
-  /** RPC handlers — receives vscode namespace + extension context. */
-  rpc?: (vscode: typeof import('vscode'), ctx: vscode.ExtensionContext) => H;
+  /**
+   * RPC handlers — receives the vscode namespace, the extension context, and
+   * \`emit\` for pushing change events to this webview (see {@link RpcEmit}).
+   */
+  rpc?: (vscode: typeof import('vscode'), ctx: vscode.ExtensionContext, emit: RpcEmit) => H;
 }
 
 export function defineSubpanel<H extends Handlers = Handlers>(def: SubpanelDef<H>): SubpanelDef<H> {
@@ -7224,6 +7342,18 @@ export interface TreeViewDef {
     vscode: typeof import('vscode'),
     ctx: vscode.ExtensionContext,
   ) => TreeNode[] | Promise<TreeNode[]>;
+  /**
+   * Keep the tree live. Receives \`refresh\` — call it (directly or as a callback)
+   * to re-run \`getChildren\`. Subscribe to a data source here so the tree updates
+   * itself; return an unsubscribe to clean up.
+   *
+   *   watch: (refresh) => watchEntity(Todos, refresh),
+   */
+  watch?: (
+    refresh: () => void,
+    vscode: typeof import('vscode'),
+    ctx: vscode.ExtensionContext,
+  ) => (() => void) | void;
 }
 
 export function defineTreeView(def: TreeViewDef): TreeViewDef {
@@ -7265,7 +7395,7 @@ export function defineJob(def: JobDef): JobDef {
 }
 `,
     "react/src/shared/vsceasy/index.ts": `export { definePanel, defineCommand, defineMenu, defineStatusBar, defineSubpanel, defineTreeView, defineJob } from './define';
-export type { PanelDef, CommandDef, MenuDef, MenuItem, MenuIcon, StatusBarDef, StatusBarMenuItem, KeybindingDef, SubpanelDef, TreeViewDef, TreeNode, JobDef, JobSchedule, CodiconName } from './define';
+export type { PanelDef, CommandDef, MenuDef, MenuItem, MenuIcon, StatusBarDef, StatusBarMenuItem, KeybindingDef, SubpanelDef, TreeViewDef, TreeNode, JobDef, JobSchedule, CodiconName, RpcEmit } from './define';
 export { bootstrap } from './bootstrap';
 export type { Registry, BootstrapOptions, ActivateHook } from './bootstrap';
 export {
@@ -7277,6 +7407,9 @@ export {
   webviewState,
 } from './rpc';
 export type { Transport, RpcClient, Handlers, RpcClientOptions, WebviewApi } from './rpc';
+export { defineStore, watch } from './store';
+export type { Store, Watchable } from './store';
+export { listen } from './client';
 `,
     "react/src/shared/vsceasy/rpc.ts": `// Typed RPC bridge — webview <-> extension.
 // Used by both sides. Transport-agnostic core + thin adapters.
@@ -7492,6 +7625,80 @@ export function webviewState<T>(defaults: T): {
     },
   };
 }
+`,
+    "react/src/shared/vsceasy/store.ts": `/**
+ * Reactive stores — a tiny, framework-agnostic observable value.
+ *
+ * A store holds one value and notifies subscribers when it changes. It's the
+ * non-ORM half of the reactivity model: use it for arbitrary state (a counter,
+ * a flag, a selection) that a visual element should track.
+ *
+ *   const counter = defineStore(0);
+ *   counter.subscribe((v) => console.log('now', v));
+ *   counter.set(1);          // logs: now 1
+ *   counter.update((n) => n + 1);
+ *
+ * Pair it with \`watch()\` on the host to push changes to a webview, and
+ * \`listen()\` on the webview to react — see those helpers below and in client.ts.
+ */
+export interface Store<T> {
+  /** Read the current value. */
+  get(): T;
+  /** Replace the value and notify subscribers (no-op if \`Object.is\`-equal). */
+  set(next: T): void;
+  /** Derive the next value from the current one, then \`set\` it. */
+  update(fn: (current: T) => T): void;
+  /** Subscribe to changes. Returns an unsubscribe function. */
+  subscribe(cb: (value: T) => void): () => void;
+}
+
+export function defineStore<T>(initial: T): Store<T> {
+  let value = initial;
+  const subs = new Set<(value: T) => void>();
+
+  return {
+    get: () => value,
+    set(next) {
+      if (Object.is(value, next)) return;
+      value = next;
+      subs.forEach((cb) => {
+        try { cb(value); } catch { /* a bad subscriber must not break a set */ }
+      });
+    },
+    update(fn) {
+      this.set(fn(value));
+    },
+    subscribe(cb) {
+      subs.add(cb);
+      return () => { subs.delete(cb); };
+    },
+  };
+}
+
+/**
+ * Anything that can be watched: it exposes a \`subscribe(cb)\` returning an
+ * unsubscribe function. Stores satisfy this directly. (ORM entities are watched
+ * with \`watchEntity\` from your generated \`db.ts\`, which has the same shape.)
+ */
+export interface Watchable {
+  subscribe(cb: (...args: any[]) => void): () => void;
+}
+
+/**
+ * Bridge a watchable source to a side-effect — typically an RPC emit that pushes
+ * the change to a subscribed webview. Runs \`effect\` on every change. Returns an
+ * unsubscribe function; register it on the panel's \`ctx.subscriptions\` (wrapped
+ * in \`{ dispose }\`) so it's cleaned up when the extension deactivates.
+ *
+ *   // host side, in a panel's rpc():
+ *   watch(badgeCount, () => server.emit('badge:changed'));
+ *
+ * For ORM entities, use \`watchEntity(Todos, () => server.emit('todos:changed'))\`
+ * from your generated db.ts — same idea, same return.
+ */
+export function watch(source: Watchable, effect: () => void): () => void {
+  return source.subscribe(() => effect());
+}
 `,
     "react/src/webview/panels/dashboard/App.tsx": `import React, { useEffect, useState } from 'react';
 import { connectWebview } from '../../../shared/vsceasy/client';
@@ -8658,11 +8865,37 @@ function addModel(opts) {
   const pkField = explicitPk[0] ?? opts.fields.find((f) => f.name === "id") ?? opts.fields[0];
   const primaryKey = pkField.name;
   const indexes = opts.fields.filter((f) => f.indexed && f.name !== primaryKey).map((f) => f.name);
-  const target = path12.join(opts.projectRoot, "src", "models", `${Name}.ts`);
+  const modelsDir = path12.join(opts.projectRoot, "src", "models");
+  for (const f of opts.fields) {
+    if (!f.relation)
+      continue;
+    if (f.relation.model === Name) {} else if (!fs11.existsSync(path12.join(modelsDir, `${f.relation.model}.ts`))) {
+      throw new Error(`Field "${f.name}" references model "${f.relation.model}", but src/models/${f.relation.model}.ts does not exist. ` + `Run \`vsceasy model add --name ${f.relation.model}\` first.`);
+    }
+  }
+  const target = path12.join(modelsDir, `${Name}.ts`);
   assertNoOverwrite(opts.projectRoot, target, "Model");
   const tpl = path12.join(opts.templatesRoot, "_generators", "model", "model.ts.tpl");
-  const fieldLines = opts.fields.map((f) => `  ${f.name}${f.optional ? "?" : ""}: ${f.type};`).join(`
-`);
+  const fkName = (f) => f.relation ? `${f.name}Id` : f.name;
+  const fieldLines = opts.fields.map((f) => {
+    const ts = f.relation ? "string" : f.type;
+    const note = f.relation ? `  // → ${f.relation.model}` : "";
+    return `  ${fkName(f)}${f.optional ? "?" : ""}: ${ts};${note}`;
+  }).join(`
+`);
+  const relFields = opts.fields.filter((f) => f.relation);
+  const relationsBlock = relFields.length ? `
+
+/** Relation metadata — used by \`vsceasy crud add\` to populate pickers. */
+` + `export const ${Name}Relations = {
+` + relFields.map((f) => {
+    const r = f.relation;
+    const lbl = r.label ? `, label: '${r.label}'` : "";
+    return `  ${fkName(f)}: { model: '${r.model}'${lbl} },`;
+  }).join(`
+`) + `
+} as const;
+` : "";
   const vars = {
     name,
     Name,
@@ -8671,11 +8904,12 @@ function addModel(opts) {
     primaryKey,
     fieldLines,
     indexesLine: indexes.length ? `
-  indexes: [${indexes.map((i) => `'${i}'`).join(", ")}],` : ""
+  indexes: [${indexes.map((i) => `'${i}'`).join(", ")}],` : "",
+    relationsBlock
   };
   fs11.mkdirSync(path12.dirname(target), { recursive: true });
   fs11.writeFileSync(target, substitute(fs11.readFileSync(tpl, "utf8"), vars));
-  return { created: [target], primaryKey, indexes };
+  return { created: [target], primaryKey, indexes, relations: relFields.map((f) => ({ field: fkName(f), ...f.relation })) };
 }
 function normalizeCamel3(s) {
   const cleaned = s.trim().replace(/[^a-zA-Z0-9]+(.)/g, (_m, c) => c.toUpperCase()).replace(/[^a-zA-Z0-9]/g, "");
@@ -8694,7 +8928,27 @@ var init_add5 = __esm(() => {
 
 // src/lib/model/parseFields.ts
 function parseFieldsSpec(spec) {
-  return spec.split(",").map((s) => s.trim()).filter(Boolean).map(parseFieldLine);
+  return splitTopLevel(spec).map((s) => s.trim()).filter(Boolean).map(parseFieldLine);
+}
+function splitTopLevel(spec) {
+  const out = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of spec) {
+    if (ch === "(")
+      depth++;
+    else if (ch === ")")
+      depth = Math.max(0, depth - 1);
+    if (ch === "," && depth === 0) {
+      out.push(cur);
+      cur = "";
+      continue;
+    }
+    cur += ch;
+  }
+  if (cur.trim())
+    out.push(cur);
+  return out;
 }
 function parseFieldLine(raw) {
   const line = raw.trim();
@@ -8712,6 +8966,10 @@ function parseFieldLine(raw) {
     optional = true;
     name = name.slice(0, -1);
   }
+  const relation = parseRef(type);
+  if (relation) {
+    return { name, type: "ref", optional, relation };
+  }
   let primaryKey = false;
   let indexed = false;
   while (type.endsWith("!") || type.endsWith("@")) {
@@ -8729,6 +8987,14 @@ function parseFieldLine(raw) {
     throw new Error(`Field "${raw}" has no type after flags.`);
   return { name, type, optional, primaryKey, indexed };
 }
+function parseRef(type) {
+  const m = /^ref\s*\(\s*([A-Za-z][A-Za-z0-9_]*)\s*(?:,\s*label\s*=\s*([A-Za-z][A-Za-z0-9_]*)\s*)?\)$/.exec(type.trim());
+  if (!m)
+    return null;
+  const model = m[1];
+  const label = m[2];
+  return label ? { model, label } : { model };
+}
 
 // src/lib/wizard/run.ts
 async function runWizard(opts = {}) {
@@ -12184,9 +12450,20 @@ var init_init4 = __esm(() => {
 });
 
 // src/commands/model/add.ts
-async function promptFieldsLoop() {
+function existingModels(projectRoot) {
+  const dir = path38.join(projectRoot, "src", "models");
+  if (!fs25.existsSync(dir))
+    return [];
+  return fs25.readdirSync(dir).filter((f) => /\.ts$/.test(f) && !f.endsWith(".crud.ts")).map((f) => f.replace(/\.ts$/, "")).sort();
+}
+async function promptFieldsLoop(projectRoot) {
   console.log("\n  Field syntax: `name:type` — flags: `!` (primary) `@` (indexed) `?` after name (optional)");
   console.log("  Examples: `id:string!`, `email?:string@`, `score:number`");
+  console.log("  Relation: `category:ref(Category)` — FK + dropdown of the related model.");
+  const models = existingModels(projectRoot);
+  if (models.length) {
+    console.log(`  Models you can relate to: ${models.join(", ")}`);
+  }
   console.log(`  Empty line finishes.
 `);
   const fields = [];
@@ -12209,24 +12486,26 @@ function pascal4(s) {
 function plural(s) {
   return `${pascal4(s)}s`;
 }
-var import_cli_maker17, path38, FIELD_HELP, addModelCommand, add_default10;
+var import_cli_maker17, fs25, path38, FIELD_HELP, addModelCommand, add_default10;
 var init_add21 = __esm(() => {
   init_add5();
   init_init();
   init_findProject();
   import_cli_maker17 = __toESM(require_dist(), 1);
+  fs25 = __toESM(require("fs"));
   path38 = __toESM(require("path"));
   FIELD_HELP = [
     "",
     "Interactive field loop: enter `name:type` per line, empty line to finish.",
     "  Examples:",
-    "    id:string!         — `!` after type = primary key",
-    "    name:string        — required field",
-    "    email?:string      — `?` after name = optional",
-    "    createdAt:number   — number type",
-    '    role:"a"|"b"       — literal union',
-    "    tag:string@        — `@` after type = indexed",
-    "    score:number!@     — primary key + indexed",
+    "    id:string!            — `!` after type = primary key",
+    "    name:string           — required field",
+    "    email?:string         — `?` after name = optional",
+    "    createdAt:number      — number type",
+    '    role:"a"|"b"          — literal union',
+    "    tag:string@           — `@` after type = indexed",
+    "    score:number!@        — primary key + indexed",
+    "    category:ref(Category) — relation → FK categoryId + dropdown of Category",
     "",
     "If no `!` is set, `id` (or first field) becomes the primary key."
   ].join(`
@@ -12266,7 +12545,7 @@ var init_add21 = __esm(() => {
         if (args.fields) {
           fields = parseFieldsSpec(String(args.fields));
         } else {
-          fields = await promptFieldsLoop();
+          fields = await promptFieldsLoop(projectRoot);
         }
         if (fields.length === 0) {
           throw new Error("At least one field is required.");
@@ -12285,6 +12564,12 @@ var init_add21 = __esm(() => {
 `);
         for (const f of result.created)
           console.log(`  + ${rel(f)}`);
+        if (result.relations.length) {
+          console.log("");
+          for (const r of result.relations) {
+            console.log(`  ↪ ${r.field} → ${r.model}${r.label ? ` (label: ${r.label})` : ""}  — crud will render a dropdown`);
+          }
+        }
         console.log(`
   Usage:
     import { ${plural(args.name)}Repo } from '../models/${pascal4(args.name)}';
@@ -12303,9 +12588,9 @@ var init_add21 = __esm(() => {
 
 // src/lib/crud/parseModel.ts
 function parseModelFile(file) {
-  if (!fs25.existsSync(file))
+  if (!fs26.existsSync(file))
     throw new Error(`Model file not found: ${file}`);
-  const src = fs25.readFileSync(file, "utf8");
+  const src = fs26.readFileSync(file, "utf8");
   const ifaceMatch = /export\s+interface\s+([A-Z][A-Za-z0-9_]*)\s*\{([\s\S]*?)\n\}/.exec(src);
   if (!ifaceMatch) {
     throw new Error(`Model "${path39.basename(file)}" does not declare \`export interface\`.`);
@@ -12336,7 +12621,26 @@ function parseModelFile(file) {
       indexes.push(m[1]);
   }
   const id = path39.basename(file).replace(/\.(ts|tsx)$/, "");
-  return { name, id, plural: plural2, collection, primaryKey: pk, indexes, fields, path: file };
+  const relations = parseRelations(src, name);
+  for (const f of fields) {
+    const r = relations[f.name];
+    if (r)
+      f.relation = r;
+  }
+  return { name, id, plural: plural2, collection, primaryKey: pk, indexes, fields, relations, path: file };
+}
+function parseRelations(src, name) {
+  const out = {};
+  const block = new RegExp(`export\\s+const\\s+${name}Relations\\s*=\\s*\\{([\\s\\S]*?)\\}\\s*as\\s+const`, "m").exec(src);
+  if (!block)
+    return out;
+  const body = block[1];
+  const re = /([A-Za-z_][A-Za-z0-9_]*)\s*:\s*\{\s*model\s*:\s*['"`]([^'"`]+)['"`]\s*(?:,\s*label\s*:\s*['"`]([^'"`]+)['"`]\s*)?\}/g;
+  let m;
+  while (m = re.exec(body)) {
+    out[m[1]] = { field: m[1], model: m[2], label: m[3] };
+  }
+  return out;
 }
 function parseInterfaceBody(body) {
   const fields = [];
@@ -12380,19 +12684,19 @@ function inferInputSpec(type) {
     return { kind: "text" };
   return { kind: "text" };
 }
-var fs25, path39;
+var fs26, path39;
 var init_parseModel = __esm(() => {
-  fs25 = __toESM(require("fs"));
+  fs26 = __toESM(require("fs"));
   path39 = __toESM(require("path"));
 });
 
 // src/lib/crud/crudConfig.ts
 function readCrudConfig(projectRoot, modelName) {
   const file = path40.join(projectRoot, "src", "models", `${modelName}.crud.ts`);
-  if (!fs26.existsSync(file))
+  if (!fs27.existsSync(file))
     return {};
   try {
-    const src = fs26.readFileSync(file, "utf8");
+    const src = fs27.readFileSync(file, "utf8");
     return parseConfigSource(src);
   } catch {
     return {};
@@ -12427,9 +12731,9 @@ function parseConfigSource(src) {
     return {};
   }
 }
-var fs26, path40;
+var fs27, path40;
 var init_crudConfig = __esm(() => {
-  fs26 = __toESM(require("fs"));
+  fs27 = __toESM(require("fs"));
   path40 = __toESM(require("path"));
 });
 
@@ -12460,7 +12764,7 @@ function addCrud(opts) {
   assertNoOverwrite(opts.projectRoot, formPanelPath, "Form panel");
   assertNoOverwrite(opts.projectRoot, listWebDir, "List webview dir");
   assertNoOverwrite(opts.projectRoot, formWebDir, "Form webview dir");
-  const pkg = JSON.parse(fs27.readFileSync(path41.join(opts.projectRoot, "package.json"), "utf8"));
+  const pkg = JSON.parse(fs28.readFileSync(path41.join(opts.projectRoot, "package.json"), "utf8"));
   const prefix = pkg.vsceasy?.commandPrefix ?? pkg.name?.replace(/^@[^/]+\//, "").replace(/[^a-zA-Z0-9]+/g, "") ?? "ext";
   const baseVars = {
     Name: model.name,
@@ -12473,13 +12777,27 @@ function addCrud(opts) {
     formId,
     prefix
   };
+  const modelsDir = path41.dirname(modelFile);
+  const relations = visible.filter((f) => f.relation).map((f) => {
+    const r = f.relation;
+    const related = parseModelFile(path41.join(modelsDir, `${r.model}.ts`));
+    const labelField = r.label ?? firstStringField(related) ?? related.primaryKey;
+    return {
+      field: f.name,
+      model: r.model,
+      plural: related.plural,
+      pk: related.primaryKey,
+      labelField
+    };
+  });
+  const relVars = buildRelationVars(relations);
   const created = [];
   const modified = [];
   writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "service.ts.tpl"), servicePath, baseVars, created);
   writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "formNav.ts.tpl"), path41.join(opts.projectRoot, "src", "services", `${camelLower(model.name)}FormNav.ts`), baseVars, created);
   writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "listPanel.ts.tpl"), listPanelPath, baseVars, created);
-  writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "formPanel.ts.tpl"), formPanelPath, baseVars, created);
-  fs27.mkdirSync(listWebDir, { recursive: true });
+  writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "formPanel.ts.tpl"), formPanelPath, { ...baseVars, ...relVars }, created);
+  fs28.mkdirSync(listWebDir, { recursive: true });
   const listVars = {
     ...baseVars,
     listHeaderCells: visible.map((f) => `              <th style={{ padding: '6px 8px' }}>${escapeJsx(label(f, cfg))}</th>`).join(`
@@ -12490,14 +12808,14 @@ function addCrud(opts) {
   };
   writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "listApp.tsx.tpl"), path41.join(listWebDir, "App.tsx"), listVars, created);
   writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "main.tsx.tpl"), path41.join(listWebDir, "main.tsx"), baseVars, created);
-  fs27.mkdirSync(formWebDir, { recursive: true });
+  fs28.mkdirSync(formWebDir, { recursive: true });
   const formInputs = visible.filter((f) => !cfg.fields?.[f.name]?.hideInForm).map((f) => renderInput(f, cfg.fields?.[f.name])).join(`
 `);
   const emptyLit = buildEmptyFormLiteral(visible, cfg);
-  writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "formApp.tsx.tpl"), path41.join(formWebDir, "App.tsx"), { ...baseVars, formFieldInputs: formInputs, emptyFormLiteral: emptyLit }, created);
+  writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "formApp.tsx.tpl"), path41.join(formWebDir, "App.tsx"), { ...baseVars, ...relVars, formFieldInputs: formInputs, emptyFormLiteral: emptyLit }, created);
   writeFromTpl(path41.join(opts.templatesRoot, "_generators", "crud", "main.tsx.tpl"), path41.join(formWebDir, "main.tsx"), baseVars, created);
   appendApi3(apiPath, listApiName, model, created, modified);
-  appendApiForm(apiPath, formApiName, model, created, modified);
+  appendApiForm(apiPath, formApiName, model, created, modified, relations.length > 0);
   let menuInfo;
   if (opts.menu && opts.menu !== "none") {
     menuInfo = wireMenu(opts, model, cfg, listId, formId);
@@ -12508,10 +12826,10 @@ function addCrud(opts) {
   return { created, modified, menu: menuInfo, genRan };
 }
 function writeFromTpl(tpl, target, vars, created) {
-  if (!fs27.existsSync(tpl))
+  if (!fs28.existsSync(tpl))
     throw new Error(`CRUD template missing: ${tpl}`);
-  fs27.mkdirSync(path41.dirname(target), { recursive: true });
-  fs27.writeFileSync(target, substitute(fs27.readFileSync(tpl, "utf8"), vars));
+  fs28.mkdirSync(path41.dirname(target), { recursive: true });
+  fs28.writeFileSync(target, substitute(fs28.readFileSync(tpl, "utf8"), vars));
   created.push(target);
 }
 function orderFields(fields, order) {
@@ -12551,6 +12869,14 @@ function renderInput(field, override) {
 ` + `        <span style={{ opacity: 0.8 }}>${labelText}</span>
 ` + `${input}
 ` + `      </label>`;
+  if (field.relation) {
+    return wrap(`        <select${required} value={(form.${name} as any) ?? ''} onChange={(e) => onChange('${name}', e.target.value as any)}>
+` + `          <option value=""></option>
+` + `          {(relOptions['${name}'] ?? []).map((o) => (
+` + `            <option key={o.value} value={o.value}>{o.label}</option>
+` + `          ))}
+` + `        </select>`);
+  }
   switch (spec.kind) {
     case "number":
       return wrap(`        <input type="number"${placeholderAttr}${required} value={form.${name} as any ?? ''} onChange={(e) => onChange('${name}', e.target.value === '' ? undefined : Number(e.target.value))} />`);
@@ -12601,45 +12927,47 @@ export interface ${apiName} {
   ensureImport(apiPath, model.name);
   appendIfMissing(apiPath, apiName, sig, created, modified);
 }
-function appendApiForm(apiPath, apiName, model, created, modified) {
+function appendApiForm(apiPath, apiName, model, created, modified, hasRelations) {
+  const optionsLine = hasRelations ? `  options(): Promise<Record<string, { value: string; label: string }[]>>;
+` : "";
   const sig = `
 export interface ${apiName} {
 ` + `  pendingId(): Promise<${model.name}['${model.primaryKey}'] | null>;
 ` + `  get(id: ${model.name}['${model.primaryKey}'] | null): Promise<${model.name} | null>;
 ` + `  save(row: ${model.name}): Promise<${model.name}>;
-` + `  cancel(): Promise<void>;
+` + optionsLine + `  cancel(): Promise<void>;
 ` + `}
 `;
   ensureImport(apiPath, model.name);
   appendIfMissing(apiPath, apiName, sig, created, modified);
 }
 function ensureImport(apiPath, modelName) {
-  if (!fs27.existsSync(apiPath)) {
-    fs27.mkdirSync(path41.dirname(apiPath), { recursive: true });
-    fs27.writeFileSync(apiPath, `import type { ${modelName} } from '../models/${modelName}';
+  if (!fs28.existsSync(apiPath)) {
+    fs28.mkdirSync(path41.dirname(apiPath), { recursive: true });
+    fs28.writeFileSync(apiPath, `import type { ${modelName} } from '../models/${modelName}';
 `);
     return;
   }
-  let src = fs27.readFileSync(apiPath, "utf8");
+  let src = fs28.readFileSync(apiPath, "utf8");
   if (new RegExp(`from\\s+['"]\\.\\./models/${modelName}['"]`).test(src))
     return;
   src = `import type { ${modelName} } from '../models/${modelName}';
 ` + src;
-  fs27.writeFileSync(apiPath, src);
+  fs28.writeFileSync(apiPath, src);
 }
 function appendIfMissing(apiPath, apiName, block, created, modified) {
-  if (!fs27.existsSync(apiPath)) {
-    fs27.writeFileSync(apiPath, block.trimStart());
+  if (!fs28.existsSync(apiPath)) {
+    fs28.writeFileSync(apiPath, block.trimStart());
     created.push(apiPath);
     return;
   }
-  const src = fs27.readFileSync(apiPath, "utf8");
+  const src = fs28.readFileSync(apiPath, "utf8");
   if (new RegExp(`\\bexport\\s+interface\\s+${apiName}\\b`).test(src))
     return;
   const sep = src.endsWith(`
 `) ? "" : `
 `;
-  fs27.writeFileSync(apiPath, src + sep + block);
+  fs28.writeFileSync(apiPath, src + sep + block);
   if (!modified.includes(apiPath))
     modified.push(apiPath);
 }
@@ -12695,7 +13023,31 @@ function runGen11(cwd) {
 function which12(cmd) {
   return import_child_process13.spawnSync(process.platform === "win32" ? "where" : "which", [cmd], { stdio: "ignore" }).status === 0;
 }
-var fs27, path41, import_child_process13;
+function firstStringField(model) {
+  return model.fields.find((f) => f.type.trim() === "string" && f.name !== model.primaryKey)?.name;
+}
+function buildRelationVars(relations) {
+  if (relations.length === 0) {
+    return { relationImports: "", relationOptionsHandler: "", relationOptionsState: "", relationOptionsLoad: "" };
+  }
+  const uniqueRepos = [...new Map(relations.map((r) => [r.plural, r])).values()];
+  const relationImports = uniqueRepos.map((r) => `import { ${r.plural}Repo } from '../models/${r.model}';`).join(`
+`) + `
+`;
+  const handlerLines = relations.map((r) => `      ${r.field}: (await ${r.plural}Repo().findMany()).map((x) => ({ value: String(x.${r.pk}), label: String(x.${r.labelField}) })),`).join(`
+`);
+  const relationOptionsHandler = `    async options() {
+` + `      return {
+` + `${handlerLines}
+` + `      };
+` + `    },
+`;
+  const relationOptionsState = `  const [relOptions, setRelOptions] = useState<Record<string, { value: string; label: string }[]>>({});`;
+  const relationOptionsLoad = `
+  useEffect(() => { void api.options().then(setRelOptions); }, []);`;
+  return { relationImports, relationOptionsHandler, relationOptionsState, relationOptionsLoad };
+}
+var fs28, path41, import_child_process13;
 var init_add22 = __esm(() => {
   init_scaffold();
   init_validate();
@@ -12703,20 +13055,20 @@ var init_add22 = __esm(() => {
   init_crudConfig();
   init_add7();
   init_edit();
-  fs27 = __toESM(require("fs"));
+  fs28 = __toESM(require("fs"));
   path41 = __toESM(require("path"));
   import_child_process13 = require("child_process");
 });
 
 // src/commands/crud/add.ts
-var import_cli_maker18, path42, fs28, NONE_SENTINEL2 = "(no menu)", NEW_SENTINEL = "(create new menu)", addCrudCommand, add_default11;
+var import_cli_maker18, path42, fs29, NONE_SENTINEL2 = "(no menu)", NEW_SENTINEL = "(create new menu)", addCrudCommand, add_default11;
 var init_add23 = __esm(() => {
   init_add22();
   init_edit();
   init_findProject();
   import_cli_maker18 = __toESM(require_dist(), 1);
   path42 = __toESM(require("path"));
-  fs28 = __toESM(require("fs"));
+  fs29 = __toESM(require("fs"));
   addCrudCommand = {
     name: "add",
     description: "Generate full CRUD (service + list panel + form panel + RPC + optional menu) for an existing model. Rails-style scaffolding.",
@@ -12728,10 +13080,10 @@ var init_add23 = __esm(() => {
         type: import_cli_maker18.ParamType.List,
         optionsLoader: () => {
           const dir = path42.join(findProjectRoot(), "src", "models");
-          if (!fs28.existsSync(dir)) {
+          if (!fs29.existsSync(dir)) {
             throw new Error("No models found. Run `vsceasy db init && vsceasy model add --name User` first.");
           }
-          const names = fs28.readdirSync(dir).filter((f) => f.endsWith(".ts") && !f.endsWith(".crud.ts")).map((f) => f.replace(/\.ts$/, "")).sort();
+          const names = fs29.readdirSync(dir).filter((f) => f.endsWith(".ts") && !f.endsWith(".crud.ts")).map((f) => f.replace(/\.ts$/, "")).sort();
           if (names.length === 0) {
             throw new Error("No models found in src/models/. Run `vsceasy model add --name User` first.");
           }
@@ -12853,6 +13205,122 @@ var init_add24 = __esm(() => {
   add_default12 = addComponentsCommand;
 });
 
+// src/lib/store/add.ts
+function addStore(opts) {
+  const name = assertId("store name", normalizeCamel9(opts.name));
+  const type = opts.type ?? "number";
+  const initial = opts.initial?.trim() || DEFAULT_INITIAL[type];
+  const storeTs = path44.join(opts.projectRoot, "src", "stores", `${name}.ts`);
+  assertNoOverwrite(opts.projectRoot, storeTs, "Store");
+  const tplPath = path44.join(opts.templatesRoot, "_generators", "store", "store.ts.tpl");
+  const body = substitute(fs30.readFileSync(tplPath, "utf8"), {
+    name,
+    type: TS_TYPE[type],
+    initial,
+    example: EXAMPLE[type]
+  });
+  fs30.mkdirSync(path44.dirname(storeTs), { recursive: true });
+  fs30.writeFileSync(storeTs, body);
+  return { created: [storeTs] };
+}
+function normalizeCamel9(s) {
+  const cleaned = s.trim().replace(/[^a-zA-Z0-9]+(.)/g, (_m, c) => c.toUpperCase()).replace(/[^a-zA-Z0-9]/g, "");
+  if (!cleaned)
+    return "";
+  return cleaned.charAt(0).toLowerCase() + cleaned.slice(1);
+}
+var fs30, path44, DEFAULT_INITIAL, TS_TYPE, EXAMPLE;
+var init_add25 = __esm(() => {
+  init_scaffold();
+  init_validate();
+  fs30 = __toESM(require("fs"));
+  path44 = __toESM(require("path"));
+  DEFAULT_INITIAL = {
+    number: "0",
+    string: "''",
+    boolean: "false",
+    json: "null"
+  };
+  TS_TYPE = {
+    number: "number",
+    string: "string",
+    boolean: "boolean",
+    json: "any"
+  };
+  EXAMPLE = {
+    number: "1",
+    string: "'hello'",
+    boolean: "true",
+    json: "{ open: true }"
+  };
+});
+
+// src/commands/store/add.ts
+var import_cli_maker20, path45, addStoreCommand, add_default13;
+var init_add26 = __esm(() => {
+  init_add25();
+  init_findProject();
+  import_cli_maker20 = __toESM(require_dist(), 1);
+  path45 = __toESM(require("path"));
+  addStoreCommand = {
+    name: "add",
+    description: "Add a reactive store (an observable value) under src/stores/. Watch it on the host and listen in a webview to keep UI in sync.",
+    params: [
+      { name: "name", description: "Store name (camelCase, e.g. badgeCount)", required: true, type: import_cli_maker20.ParamType.Text },
+      {
+        name: "type",
+        description: "Value type",
+        required: false,
+        type: import_cli_maker20.ParamType.List,
+        options: ["number", "string", "boolean", "json"]
+      },
+      {
+        name: "initial",
+        description: "Initial value expression (default per type: 0 / '' / false / null)",
+        required: false,
+        type: import_cli_maker20.ParamType.Text
+      }
+    ],
+    action: async (args) => {
+      try {
+        const projectRoot = findProjectRoot();
+        const templatesRoot = findTemplatesRoot();
+        const result = addStore({
+          name: String(args.name).trim(),
+          type: args.type ? String(args.type) : undefined,
+          initial: args.initial ? String(args.initial) : undefined,
+          projectRoot,
+          templatesRoot
+        });
+        const rel = (p) => path45.relative(projectRoot, p);
+        const name = String(args.name).trim();
+        console.log(`
+✓ Store "${name}" created.
+`);
+        for (const f of result.created)
+          console.log(`  + ${rel(f)}`);
+        console.log(`
+  Use it:
+    import { ${name} } from '../stores/${name}';
+    ${name}.set(...);  ${name}.update((v) => v);
+`);
+        console.log(`  Push changes to a webview — host side, in a panel rpc():
+    watch(${name}, () => server.emit('${name}:changed', ${name}.get()));
+`);
+        console.log(`  React in the webview:
+    listen(api, '${name}:changed', (v) => render(v));
+`);
+      } catch (err) {
+        console.error(`
+✗ ${err.message}
+`);
+        process.exitCode = 1;
+      }
+    }
+  };
+  add_default13 = addStoreCommand;
+});
+
 // src/commands/groups.ts
 function group(name, description, subcommands) {
   return {
@@ -12869,7 +13337,7 @@ Use one of: ${subcommands.map((s) => s.name).join(", ")}
     }
   };
 }
-var PanelGroup, MenuGroup, CommandGroup, RpcGroup, StatusBarGroup, SubpanelGroup, TreeViewGroup, TestGroup, PublishGroup, HelperGroup, JobGroup, DbGroup, ModelGroup, CrudGroup, ComponentsGroup;
+var PanelGroup, MenuGroup, CommandGroup, RpcGroup, StatusBarGroup, SubpanelGroup, TreeViewGroup, TestGroup, PublishGroup, HelperGroup, JobGroup, DbGroup, ModelGroup, CrudGroup, ComponentsGroup, StoreGroup;
 var init_groups = __esm(() => {
   init_add6();
   init_add8();
@@ -12887,6 +13355,7 @@ var init_groups = __esm(() => {
   init_add21();
   init_add23();
   init_add24();
+  init_add26();
   PanelGroup = group("panel", "Manage panels (webview + RPC bridge)", [add_default]);
   MenuGroup = group("menu", "Manage sidebar menus (activity bar tree views)", [add_default2, edit_default]);
   CommandGroup = group("command", "Manage palette commands", [add_default3]);
@@ -12902,6 +13371,7 @@ var init_groups = __esm(() => {
   ModelGroup = group("model", "Manage typed models (entities + repos) under src/models/", [add_default10]);
   CrudGroup = group("crud", "Scaffold full CRUD UI (service + list panel + form panel + RPC) for a model", [add_default11]);
   ComponentsGroup = group("components", "Generate a theme-aware React component library for webviews", [add_default12]);
+  StoreGroup = group("store", "Manage reactive stores (observable values) under src/stores/", [add_default13]);
 });
 
 // src/cli.ts
@@ -12909,17 +13379,17 @@ var exports_cli = {};
 __export(exports_cli, {
   cli: () => cli
 });
-var import_cli_maker20, cli;
+var import_cli_maker21, cli;
 var init_cli = __esm(() => {
   init_create();
   init_wizard();
   init_doctor2();
   init_upgrade2();
   init_groups();
-  import_cli_maker20 = __toESM(require_dist(), 1);
-  cli = new import_cli_maker20.CLI("vsceasy", "Build VS Code extensions fast — React UI + typed RPC bridge + zero-config build.", {
+  import_cli_maker21 = __toESM(require_dist(), 1);
+  cli = new import_cli_maker21.CLI("vsceasy", "Build VS Code extensions fast — React UI + typed RPC bridge + zero-config build.", {
     interactive: true,
-    version: "0.1.7",
+    version: "0.1.9",
     introAnimation: {
       enabled: true,
       preset: "retro-space",
@@ -12957,6 +13427,7 @@ var init_cli = __esm(() => {
   cli.command(ModelGroup);
   cli.command(CrudGroup);
   cli.command(ComponentsGroup);
+  cli.command(StoreGroup);
   cli.command(doctor_default);
   cli.command(upgrade_default);
   cli.parse(process.argv);