@vsceasy/cli 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes follow [Keep a Changelog](https://keepachangelog.com/en/1.1.
 ## [Unreleased]
 
 ### Added
+- **Model relations — `ref(Model)` fields with populated CRUD dropdowns.** Symfony-`make:entity`-style relations.
+  - `vsceasy model add --fields "…,category:ref(Category)"` emits a `categoryId` foreign key plus a `<Name>Relations` metadata block. `ref(Category, label=name)` picks the dropdown label field. The referenced model must exist (errors otherwise, naming what to create); the interactive loop lists relatable models.
+  - `crud add` reads the relation metadata and generates a populated `<select>`: an `options()` RPC handler on the form panel loads the related rows, and the form webview renders a dropdown of them and stores the chosen id. Non-relational CRUD output is unchanged.
+  - ManyToOne only (FK on this model) — no join table or cascade. See the [Relations guide](https://vsceasy.dev/guides/relations/).
 - **Reactivity — keep a webview in sync with data.** A visual element can now track a source and update the instant it changes, no manual refresh.
   - ORM entities fire change events on every mutation; subscribe with `watchEntity(Todos, () => emit('todos:changed'))` from your generated `db.ts`.
   - `defineStore(initial)` — a framework-agnostic observable value (`get`/`set`/`update`/`subscribe`) for non-ORM state. Scaffold one with **`vsceasy store add --name X --type number|string|boolean|json`**.

package/README.md

@@ -8,6 +8,14 @@
 
 <p align="center"><em>Pronounced <strong>"vee-see-easy"</strong> in English (<code>VSC</code> + <code>easy</code>) — or <strong>"visici"</strong> for Spanish speakers.</em></p>
 
+<p align="center">
+  <video src="https://github.com/jairoFernandez/vsceasy/releases/download/promo-assets/vsceasy-promo.mp4" width="720" controls></video>
+</p>
+
+<p align="center">
+  <a href="https://github.com/jairoFernandez/vsceasy/releases/download/promo-assets/vsceasy-promo.mp4">▶ Watch the 30-second promo</a>
+</p>
+
 > Status: v0.1 — React UI. Typed RPC bridge + file-based registry + scaffolding for panels, commands, menus, tree views, subpanels, status bars.
 
 ## Install

package/dist/bin/cli.js

@@ -3826,7 +3826,7 @@ var init_scaffold = __esm(() => {
 });
 
 // src/lib/templatesData.ts
-var TEMPLATES_VERSION = "0.1.8", 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.
     },
   }),
@@ -5006,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}}
@@ -8863,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,
@@ -8876,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, "");
@@ -8899,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();
@@ -8917,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("@")) {
@@ -8934,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 = {}) {
@@ -12389,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 = [];
@@ -12414,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(`
@@ -12471,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.");
@@ -12490,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)}';
@@ -12508,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\`.`);
@@ -12541,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 = [];
@@ -12585,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 {};
@@ -12632,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"));
 });
 
@@ -12665,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,
@@ -12678,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(`
@@ -12695,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);
@@ -12713,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) {
@@ -12756,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))} />`);
@@ -12806,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);
 }
@@ -12900,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();
@@ -12908,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.",
@@ -12933,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.");
           }
@@ -13066,14 +13213,14 @@ function addStore(opts) {
   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(fs29.readFileSync(tplPath, "utf8"), {
+  const body = substitute(fs30.readFileSync(tplPath, "utf8"), {
     name,
     type: TS_TYPE[type],
     initial,
     example: EXAMPLE[type]
   });
-  fs29.mkdirSync(path44.dirname(storeTs), { recursive: true });
-  fs29.writeFileSync(storeTs, body);
+  fs30.mkdirSync(path44.dirname(storeTs), { recursive: true });
+  fs30.writeFileSync(storeTs, body);
   return { created: [storeTs] };
 }
 function normalizeCamel9(s) {
@@ -13082,11 +13229,11 @@ function normalizeCamel9(s) {
     return "";
   return cleaned.charAt(0).toLowerCase() + cleaned.slice(1);
 }
-var fs29, path44, DEFAULT_INITIAL, TS_TYPE, EXAMPLE;
+var fs30, path44, DEFAULT_INITIAL, TS_TYPE, EXAMPLE;
 var init_add25 = __esm(() => {
   init_scaffold();
   init_validate();
-  fs29 = __toESM(require("fs"));
+  fs30 = __toESM(require("fs"));
   path44 = __toESM(require("path"));
   DEFAULT_INITIAL = {
     number: "0",
@@ -13242,7 +13389,7 @@ var init_cli = __esm(() => {
   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.8",
+    version: "0.1.9",
     introAnimation: {
       enabled: true,
       preset: "retro-space",

package/dist/index.js

@@ -2238,7 +2238,7 @@ var init_upgrade = __esm(() => {
 });
 
 // src/lib/templatesData.ts
-var TEMPLATES_VERSION = "0.1.8", 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';
@@ -2450,6 +2450,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
@@ -2487,6 +2488,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 }));
@@ -2550,7 +2552,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',
@@ -2572,7 +2574,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.
     },
   }),
@@ -3418,7 +3420,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}}
@@ -6722,7 +6724,26 @@ function parseModelFile(file) {
       indexes.push(m[1]);
   }
   const id = path22.basename(file).replace(/\.(ts|tsx)$/, "");
-  return { name, id, plural, 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, 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 = [];
@@ -6859,12 +6880,26 @@ function addCrud(opts) {
     formId,
     prefix
   };
+  const modelsDir = path24.dirname(modelFile);
+  const relations = visible.filter((f) => f.relation).map((f) => {
+    const r = f.relation;
+    const related = parseModelFile(path24.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(path24.join(opts.templatesRoot, "_generators", "crud", "service.ts.tpl"), servicePath, baseVars, created);
   writeFromTpl(path24.join(opts.templatesRoot, "_generators", "crud", "formNav.ts.tpl"), path24.join(opts.projectRoot, "src", "services", `${camelLower(model.name)}FormNav.ts`), baseVars, created);
   writeFromTpl(path24.join(opts.templatesRoot, "_generators", "crud", "listPanel.ts.tpl"), listPanelPath, baseVars, created);
-  writeFromTpl(path24.join(opts.templatesRoot, "_generators", "crud", "formPanel.ts.tpl"), formPanelPath, baseVars, created);
+  writeFromTpl(path24.join(opts.templatesRoot, "_generators", "crud", "formPanel.ts.tpl"), formPanelPath, { ...baseVars, ...relVars }, created);
   fs24.mkdirSync(listWebDir, { recursive: true });
   const listVars = {
     ...baseVars,
@@ -6880,10 +6915,10 @@ function addCrud(opts) {
   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(path24.join(opts.templatesRoot, "_generators", "crud", "formApp.tsx.tpl"), path24.join(formWebDir, "App.tsx"), { ...baseVars, formFieldInputs: formInputs, emptyFormLiteral: emptyLit }, created);
+  writeFromTpl(path24.join(opts.templatesRoot, "_generators", "crud", "formApp.tsx.tpl"), path24.join(formWebDir, "App.tsx"), { ...baseVars, ...relVars, formFieldInputs: formInputs, emptyFormLiteral: emptyLit }, created);
   writeFromTpl(path24.join(opts.templatesRoot, "_generators", "crud", "main.tsx.tpl"), path24.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);
@@ -6937,6 +6972,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))} />`);
@@ -6987,13 +7030,15 @@ 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);
@@ -7081,6 +7126,30 @@ function runGen11(cwd) {
 function which11(cmd) {
   return import_child_process12.spawnSync(process.platform === "win32" ? "where" : "which", [cmd], { stdio: "ignore" }).status === 0;
 }
+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 fs24, path24, import_child_process12;
 var init_add11 = __esm(() => {
   init_scaffold();
@@ -7113,11 +7182,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 = path25.join(opts.projectRoot, "src", "models", `${Name}.ts`);
+  const modelsDir = path25.join(opts.projectRoot, "src", "models");
+  for (const f of opts.fields) {
+    if (!f.relation)
+      continue;
+    if (f.relation.model === Name) {} else if (!fs25.existsSync(path25.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 = path25.join(modelsDir, `${Name}.ts`);
   assertNoOverwrite(opts.projectRoot, target, "Model");
   const tpl = path25.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,
@@ -7126,11 +7221,12 @@ function addModel(opts) {
     primaryKey,
     fieldLines,
     indexesLine: indexes.length ? `
-  indexes: [${indexes.map((i) => `'${i}'`).join(", ")}],` : ""
+  indexes: [${indexes.map((i) => `'${i}'`).join(", ")}],` : "",
+    relationsBlock
   };
   fs25.mkdirSync(path25.dirname(target), { recursive: true });
   fs25.writeFileSync(target, substitute(fs25.readFileSync(tpl, "utf8"), vars));
-  return { created: [target], primaryKey, indexes };
+  return { created: [target], primaryKey, indexes, relations: relFields.map((f) => ({ field: fkName(f), ...f.relation })) };
 }
 function normalizeCamel8(s) {
   const cleaned = s.trim().replace(/[^a-zA-Z0-9]+(.)/g, (_m, c) => c.toUpperCase()).replace(/[^a-zA-Z0-9]/g, "");

package/dist/lib/crud/parseModel.d.ts

@@ -1,8 +1,18 @@
+export interface ParsedRelation {
+    /** FK field on this model (e.g. `categoryId`). */
+    field: string;
+    /** Related model name (e.g. `Category`). */
+    model: string;
+    /** Field on the related model to show in the picker. */
+    label?: string;
+}
 export interface ParsedField {
     name: string;
     /** Raw TS type as written in the interface (e.g. `string`, `number`, `'a' | 'b'`, `Date`). */
     type: string;
     optional: boolean;
+    /** Set when this field is a foreign key declared via `<Name>Relations`. */
+    relation?: ParsedRelation;
 }
 export interface ParsedModel {
     /** PascalCase interface name. */
@@ -19,6 +29,8 @@ export interface ParsedModel {
     indexes: string[];
     /** Ordered field list from the interface body. */
     fields: ParsedField[];
+    /** FK field → relation metadata, keyed by FK field name. */
+    relations: Record<string, ParsedRelation>;
     /** Absolute path the model was read from. */
     path: string;
 }

package/dist/lib/model/add.d.ts

@@ -1,3 +1,9 @@
+export interface FieldRelation {
+    /** PascalCase name of the related model (e.g. `Category`). */
+    model: string;
+    /** Field on the related model to show in pickers. Default: first string field, else its pk. */
+    label?: string;
+}
 export interface ModelField {
     name: string;
     /** Raw TS type. e.g. `string`, `number`, `string | null`, `Date`, `'a' | 'b'`. */
@@ -8,6 +14,12 @@ export interface ModelField {
     primaryKey?: boolean;
     /** Add to entity `indexes` (speeds up findOne by this field). */
     indexed?: boolean;
+    /**
+     * ManyToOne relation. When set, the field is emitted as a `<name>Id: string`
+     * foreign key and recorded in the model's relation metadata so `crud add`
+     * renders a populated dropdown. Authored as `name:ref(Model)` in the spec.
+     */
+    relation?: FieldRelation;
 }
 export interface AddModelOptions {
     name: string;
@@ -23,5 +35,11 @@ export interface AddModelResult {
     created: string[];
     primaryKey: string;
     indexes: string[];
+    /** Foreign-key fields and the models they point at. */
+    relations: Array<{
+        field: string;
+        model: string;
+        label?: string;
+    }>;
 }
 export declare function addModel(opts: AddModelOptions): AddModelResult;

package/dist/lib/model/parseFields.d.ts

@@ -1,4 +1,4 @@
-import type { ModelField } from './add';
+import type { ModelField, FieldRelation } from './add';
 /**
  * Parse a compact model field spec into `ModelField[]`.
  *
@@ -7,8 +7,14 @@ import type { ModelField } from './add';
  *   `!` after type → primaryKey
  *   `@` after type → indexed
  *
- * Example: `id:string!,name:string,email?:string@,score:number`
+ * Relations use `name:ref(Model)` or `name:ref(Model, label=field)`:
+ *   category:ref(Category)             → FK categoryId, dropdown of Category rows
+ *   category:ref(Category, label=name) → show Category.name in the dropdown
+ *
+ * Example: `id:string!,name:string,email?:string@,category:ref(Category)`
  */
 export declare function parseFieldsSpec(spec: string): ModelField[];
-/** Parse a single `name[?]:type[!][@]` line. Throws on malformed input. */
+/** Parse a single `name[?]:type[!][@]` line (or `name:ref(Model)`). Throws on malformed input. */
 export declare function parseFieldLine(raw: string): ModelField;
+/** Parse `ref(Model)` / `ref(Model, label=field)`. Returns null when not a ref. */
+export declare function parseRef(type: string): FieldRelation | null;

package/dist/lib/templatesData.d.ts

@@ -1,2 +1,2 @@
-export declare const TEMPLATES_VERSION = "0.1.8";
+export declare const TEMPLATES_VERSION = "0.1.9";
 export declare const TEMPLATE_FILES: Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsceasy/cli",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Build VS Code extensions fast — React UI + typed RPC bridge between extension and webview + file-based routing for panels, commands, menus, tree views, and subpanels.",
   "main": "dist/index.js",
   "scripts": {

package/templates/_generators/crud/formApp.tsx.tpl

@@ -22,6 +22,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
@@ -59,6 +60,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 }));

package/templates/_generators/crud/formPanel.ts.tpl

@@ -3,7 +3,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',
@@ -25,7 +25,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.
     },
   }),

package/templates/_generators/model/model.ts.tpl

@@ -14,4 +14,4 @@ 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}}