@vsceasy/cli 0.1.8 → 0.1.10

package/dist/bin/cli.js

@@ -3738,15 +3738,26 @@ async function scaffold(opts) {
     throw new Error(`Target directory not empty: ${opts.targetDir}`);
   }
   fs2.mkdirSync(opts.targetDir, { recursive: true });
+  const type = opts.type ?? "ui";
   const vars = buildVars(opts);
   await copyTree(src, opts.targetDir, vars);
-  applyPreset(opts.targetDir, opts.preset ?? "full");
+  applyType(opts.targetDir, type, opts.preset ?? "full", opts.templatesRoot, vars);
   writeConfig(opts.targetDir, {
     publisher: opts.publisher,
     commandPrefix: vars.commandPrefix,
-    ui: opts.ui
+    type,
+    ...type === "ui" ? { ui: opts.ui } : {}
   });
 }
+function applyType(targetDir, type, preset, templatesRoot, vars) {
+  if (type === "ui") {
+    applyPreset(targetDir, preset);
+    return;
+  }
+  stripWebview(targetDir);
+  if (type === "language")
+    applyLanguage(targetDir, templatesRoot, vars);
+}
 function applyPreset(targetDir, preset) {
   if (preset === "full")
     return;
@@ -3769,15 +3780,104 @@ function applyPreset(targetDir, preset) {
 `);
   }
 }
+function stripWebview(targetDir) {
+  const removals = [
+    "src/panels",
+    "src/webview",
+    "src/commands/hello.ts",
+    "vite.config.ts"
+  ];
+  for (const rel of removals) {
+    const abs = path2.join(targetDir, rel);
+    if (fs2.existsSync(abs))
+      fs2.rmSync(abs, { recursive: true, force: true });
+  }
+  const apiPath = path2.join(targetDir, "src", "shared", "api.ts");
+  if (fs2.existsSync(apiPath)) {
+    fs2.writeFileSync(apiPath, `// RPC contracts go here (add a panel with \`vsceasy panel add\`).
+`);
+  }
+  trimReactFromPackageJson(targetDir);
+}
+function trimReactFromPackageJson(targetDir) {
+  const pkgPath = path2.join(targetDir, "package.json");
+  if (!fs2.existsSync(pkgPath))
+    return;
+  const pkg = JSON.parse(fs2.readFileSync(pkgPath, "utf8"));
+  for (const section of ["dependencies", "devDependencies"]) {
+    if (!pkg[section])
+      continue;
+    for (const dep of Object.keys(pkg[section])) {
+      if (REACT_DEPS.has(dep))
+        delete pkg[section][dep];
+    }
+    if (Object.keys(pkg[section]).length === 0)
+      delete pkg[section];
+  }
+  if (pkg.scripts) {
+    for (const key of Object.keys(pkg.scripts)) {
+      if (UI_SCRIPT_KEYS.has(key))
+        delete pkg.scripts[key];
+    }
+    if (pkg.scripts.dev) {
+      pkg.scripts.dev = "bun run gen:scan && bun run dev:ext";
+    }
+    for (const [k, v] of Object.entries(pkg.scripts)) {
+      pkg.scripts[k] = v.replace(/\s*&&\s*bun run build:ui/g, "");
+    }
+  }
+  fs2.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + `
+`);
+}
+function applyLanguage(targetDir, templatesRoot, vars) {
+  const assetsDir = path2.join(templatesRoot, "_assets", "language");
+  if (!fs2.existsSync(assetsDir)) {
+    throw new Error(`Language assets not found: ${assetsDir}`);
+  }
+  copyAssetsTree(assetsDir, targetDir, vars);
+  const langReadme = path2.join(targetDir, "README.language.md");
+  if (fs2.existsSync(langReadme)) {
+    fs2.renameSync(langReadme, path2.join(targetDir, "README.md"));
+  }
+  const pkgPath = path2.join(targetDir, "package.json");
+  if (fs2.existsSync(pkgPath)) {
+    const pkg = JSON.parse(fs2.readFileSync(pkgPath, "utf8"));
+    pkg.activationEvents = [`onLanguage:${vars.langId}`];
+    fs2.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + `
+`);
+  }
+}
+function copyAssetsTree(srcDir, destDir, vars) {
+  for (const entry of fs2.readdirSync(srcDir, { withFileTypes: true })) {
+    if (SKIP_NAMES.has(entry.name))
+      continue;
+    const srcPath = path2.join(srcDir, entry.name);
+    const destName = substitute(entry.name, vars);
+    const destPath = path2.join(destDir, destName);
+    if (entry.isDirectory()) {
+      fs2.mkdirSync(destPath, { recursive: true });
+      copyAssetsTree(srcPath, destPath, vars);
+    } else if (entry.isFile()) {
+      fs2.mkdirSync(path2.dirname(destPath), { recursive: true });
+      fs2.writeFileSync(destPath, substitute(fs2.readFileSync(srcPath, "utf8"), vars));
+    }
+  }
+}
 function buildVars(opts) {
   const simpleName = opts.name.replace(/^@[^/]+\//, "");
   const commandPrefix = simpleName.replace(/[^a-zA-Z0-9]+/g, "");
+  const langId = simpleName.toLowerCase().replace(/[^a-z0-9]+/g, "");
+  const scopeName = `source.${langId}`;
+  const langExt = langId.slice(0, 4).toUpperCase();
   return {
     name: opts.name,
     displayName: opts.displayName,
     description: opts.description,
     publisher: opts.publisher,
-    commandPrefix
+    commandPrefix,
+    langId,
+    scopeName,
+    langExt
   };
 }
 async function copyTree(srcDir, destDir, vars) {
@@ -3803,7 +3903,7 @@ async function copyTree(srcDir, destDir, vars) {
 function substitute(input, vars) {
   return input.replace(/\{\{(\w+)\}\}/g, (_m, key) => vars[key] ?? `{{${key}}}`);
 }
-var fs2, path2, PLACEHOLDER_EXTS, SKIP_NAMES;
+var fs2, path2, PLACEHOLDER_EXTS, SKIP_NAMES, REACT_DEPS, UI_SCRIPT_KEYS;
 var init_scaffold = __esm(() => {
   init_config();
   fs2 = __toESM(require("fs"));
@@ -3823,12 +3923,326 @@ var init_scaffold = __esm(() => {
     ".yaml"
   ]);
   SKIP_NAMES = new Set(["node_modules", "dist", ".DS_Store"]);
+  REACT_DEPS = new Set([
+    "react",
+    "react-dom",
+    "@types/react",
+    "@types/react-dom",
+    "@vitejs/plugin-react",
+    "vite"
+  ]);
+  UI_SCRIPT_KEYS = new Set(["dev:ui", "build:ui"]);
 });
 
 // src/lib/templatesData.ts
-var TEMPLATES_VERSION = "0.1.8", TEMPLATE_FILES;
+var TEMPLATES_VERSION = "0.1.10", TEMPLATE_FILES;
 var init_templatesData = __esm(() => {
   TEMPLATE_FILES = {
+    "_assets/language/README.language.md": "## {{displayName}} language support\n\nThis extension was scaffolded with `vsceasy create --type language`. It provides\neditor support for `.{{langId}}` files:\n\n- **Syntax highlighting** — TextMate grammar in `syntaxes/{{langId}}.tmLanguage.json`\n- **Language configuration** — comments, brackets, auto-closing pairs, folding in\n  `language-configuration.json`\n- **Snippets** — `snippets/{{langId}}.json`\n- **File icon** (opt-in) — `fileicons/{{langId}}-icon-theme.json`\n\n### How contributions are wired\n\n`vsceasy`'s `scripts/gen.ts` regenerates the generated parts of\n`package.json#contributes` (commands, views…) on every build. Language\ncontributions are **not** generated — they live in **`contributes.extra.json`**\nat the project root and are deep-merged into `package.json` by `gen.ts`. Edit\n`contributes.extra.json` to change languages / grammars / snippets / iconThemes,\nthen run `bun run gen`.\n\n### File icon is opt-in\n\nVS Code file icons are provided by an **icon theme**, which is global: activating\nit replaces *all* file icons in the workbench, not just `.{{langId}}`. This\nextension ships a `{{displayName}} Icons` theme but does **not** force it. To use\nit: `Preferences: File Icon Theme` → pick `{{displayName}} Icons`. If you don't\nwant to override every icon, leave it unselected — highlighting, config and\nsnippets work regardless.\n\n### Develop\n\n```sh\nbun install\nbun run gen        # sync package.json#contributes\nbun run package    # build a .vsix\n```\n\nPress `F5` (or run `bun run launch`) to open an Extension Development Host and\nopen a `.{{langId}}` file to see highlighting.\n",
+    "_assets/language/contributes.extra.json": `{
+  "languages": [
+    {
+      "id": "{{langId}}",
+      "aliases": ["{{displayName}}", "{{langId}}"],
+      "extensions": [".{{langId}}"],
+      "configuration": "./language-configuration.json"
+    }
+  ],
+  "grammars": [
+    {
+      "language": "{{langId}}",
+      "scopeName": "{{scopeName}}",
+      "path": "./syntaxes/{{langId}}.tmLanguage.json"
+    }
+  ],
+  "snippets": [
+    {
+      "language": "{{langId}}",
+      "path": "./snippets/{{langId}}.json"
+    }
+  ],
+  "iconThemes": [
+    {
+      "id": "{{langId}}-icons",
+      "label": "{{displayName}} Icons",
+      "path": "./fileicons/{{langId}}-icon-theme.json"
+    }
+  ],
+  "configuration": {
+    "title": "{{displayName}}",
+    "properties": {
+      "{{commandPrefix}}.colorize": {
+        "type": "boolean",
+        "default": true,
+        "markdownDescription": "Automatically apply distinct section colors to \`.{{langId}}\` files (scoped to \`{{scopeName}}\`, so other languages are unaffected). Turn off to keep your theme's default colors."
+      }
+    }
+  }
+}
+`,
+    "_assets/language/fileicons/{{langId}}-icon-theme.json": `{
+  "iconDefinitions": {
+    "{{langId}}_file": {
+      "iconPath": "../icons/{{langId}}.svg"
+    }
+  },
+  "languageIds": {
+    "{{langId}}": "{{langId}}_file"
+  },
+  "fileExtensions": {
+    "{{langId}}": "{{langId}}_file"
+  }
+}
+`,
+    "_assets/language/icons/{{langId}}.svg": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <path fill="#8a8a8a" d="M6 3h14l6 6v20a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/>
+  <path fill="#5a5a5a" d="M20 3l6 6h-6z"/>
+  <text x="16" y="22" font-family="monospace" font-size="9" font-weight="bold" fill="#fff" text-anchor="middle">{{langExt}}</text>
+</svg>
+`,
+    "_assets/language/language-configuration.json": `{
+  "comments": {
+    "lineComment": "#"
+  },
+  "brackets": [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"]
+  ],
+  "autoClosingPairs": [
+    { "open": "{", "close": "}" },
+    { "open": "[", "close": "]" },
+    { "open": "(", "close": ")" },
+    { "open": "\\"", "close": "\\"", "notIn": ["string"] },
+    { "open": "'", "close": "'", "notIn": ["string"] }
+  ],
+  "surroundingPairs": [
+    ["{", "}"],
+    ["[", "]"],
+    ["(", ")"],
+    ["\\"", "\\""],
+    ["'", "'"]
+  ],
+  "folding": {
+    "markers": {
+      "start": "^\\\\s*#\\\\s*region\\\\b",
+      "end": "^\\\\s*#\\\\s*endregion\\\\b"
+    }
+  }
+}
+`,
+    "_assets/language/snippets/{{langId}}.json": `{
+  "Section": {
+    "prefix": "section",
+    "body": ["[\${1:name}]", "$0"],
+    "description": "A {{displayName}} section"
+  },
+  "Key/Value": {
+    "prefix": "kv",
+    "body": ["\${1:key} = \${2:value}"],
+    "description": "A key/value pair"
+  }
+}
+`,
+    "_assets/language/src/colorize.ts": `import type * as vscode from 'vscode';
+import { applyTokenColors, removeTokenColors, type TokenColorRule } from './helpers/colorize';
+
+/** Root TextMate scope of this language — rules are applied only to these files. */
+export const SCOPE = '{{scopeName}}';
+
+/**
+ * Default token colors for {{displayName}}, emphasizing each construct. Edit
+ * freely — they are applied to \`[{{scopeName}}]\` only, so other languages keep
+ * the user's theme. Scope names must match your grammar
+ * (syntaxes/{{langId}}.tmLanguage.json).
+ */
+export const RULES: TokenColorRule[] = [
+  { scope: 'comment.line.number-sign.{{langId}}', settings: { foreground: '#6b7a6e', fontStyle: 'italic' } },
+  { scope: 'string.quoted.double.basic.{{langId}}', settings: { foreground: '#98c379' } },
+  { scope: 'string.quoted.single.literal.{{langId}}', settings: { foreground: '#98c379' } },
+  { scope: 'constant.numeric.{{langId}}', settings: { foreground: '#d19a66' } },
+];
+
+export async function applyColors(vscodeNs: typeof vscode): Promise<void> {
+  await applyTokenColors(SCOPE, RULES);
+}
+
+export async function removeColors(vscodeNs: typeof vscode): Promise<void> {
+  await removeTokenColors(SCOPE);
+}
+
+/** True when the user has opted in (default) to automatic coloring. */
+export function colorizeEnabled(vscodeNs: typeof vscode): boolean {
+  return vscodeNs.workspace.getConfiguration('{{commandPrefix}}').get<boolean>('colorize', true);
+}
+`,
+    "_assets/language/src/commands/applyColors.ts": `import { defineCommand } from '../shared/vsceasy';
+import { applyColors } from '../colorize';
+
+export default defineCommand({
+  id: 'applyColors',
+  title: '{{displayName}}: Apply Colors',
+  run: async (vscode) => {
+    await applyColors(vscode);
+    vscode.window.showInformationMessage('{{displayName}} colors applied.');
+  },
+});
+`,
+    "_assets/language/src/commands/removeColors.ts": `import { defineCommand } from '../shared/vsceasy';
+import { removeColors } from '../colorize';
+
+export default defineCommand({
+  id: 'removeColors',
+  title: '{{displayName}}: Remove Colors',
+  run: async (vscode) => {
+    await removeColors(vscode);
+    vscode.window.showInformationMessage('{{displayName}} colors removed.');
+  },
+});
+`,
+    "_assets/language/src/extension/extension.ts": `import { bootstrap } from '../shared/vsceasy';
+import { registry } from './_registry';
+import { applyColors, removeColors, colorizeEnabled } from '../colorize';
+
+export const activate = bootstrap(registry, {
+  onActivate: [
+    async (context, vscode) => {
+      // Auto-apply scoped token colors on activate when opted in (default).
+      // Scoped to {{scopeName}} only — other languages are untouched.
+      if (colorizeEnabled(vscode)) {
+        await applyColors(vscode);
+      }
+      // React to the user toggling \`{{commandPrefix}}.colorize\` at runtime.
+      context.subscriptions.push(
+        vscode.workspace.onDidChangeConfiguration(async (e) => {
+          if (!e.affectsConfiguration('{{commandPrefix}}.colorize')) return;
+          if (colorizeEnabled(vscode)) await applyColors(vscode);
+          else await removeColors(vscode);
+        }),
+      );
+    },
+  ],
+});
+
+export function deactivate() {}
+`,
+    "_assets/language/src/helpers/colorize.ts": `import * as vscode from 'vscode';
+
+/**
+ * Apply theme-independent token colors to a single TextMate scope (e.g. a
+ * language's root scope like \`{{scopeName}}\`), written to the user's
+ * \`editor.tokenColorCustomizations\`. Because the rules are keyed by
+ * \`[<scope>]\`, only files in that scope are recolored — every other language
+ * keeps the active theme's colors.
+ *
+ * Rules are tagged with a marker so {@link removeTokenColors} can strip exactly
+ * the ones this extension added, preserving any the user wrote by hand.
+ */
+
+export interface TokenColorRule {
+  /** Comma-separated TextMate scopes, e.g. 'entity.name.section.foo, comment.line.foo'. */
+  scope: string;
+  settings: { foreground?: string; background?: string; fontStyle?: string };
+}
+
+type TaggedRule = TokenColorRule & { [MARK]?: true };
+
+/** Marker key identifying rules this extension wrote (vs. the user's own). */
+const MARK = '{{commandPrefix}}Colorize';
+const SECTION = 'editor.tokenColorCustomizations';
+
+const blockKey = (scope: string) => \`[\${scope}]\`;
+
+/**
+ * Merge \`rules\` into \`editor.tokenColorCustomizations["[<scope>]"].textMateRules\`,
+ * preserving the user's own rules and other scope keys. Idempotent — re-applying
+ * replaces only previously-applied rules from this extension.
+ */
+export async function applyTokenColors(
+  scope: string,
+  rules: TokenColorRule[],
+  target: vscode.ConfigurationTarget = vscode.ConfigurationTarget.Global,
+): Promise<void> {
+  const cfg = vscode.workspace.getConfiguration();
+  const current = (cfg.get<Record<string, any>>(SECTION) ?? {}) as Record<string, any>;
+  const key = blockKey(scope);
+  const block = (current[key] ?? {}) as { textMateRules?: TaggedRule[] };
+  const existing = Array.isArray(block.textMateRules) ? block.textMateRules : [];
+  const userRules = existing.filter((r) => !r[MARK]);
+  const ours: TaggedRule[] = rules.map((r) => ({ ...r, [MARK]: true }));
+  const next = { ...current, [key]: { ...block, textMateRules: [...userRules, ...ours] } };
+  await cfg.update(SECTION, next, target);
+}
+
+/** Remove only the rules this extension added for \`scope\`; leave the rest intact. */
+export async function removeTokenColors(
+  scope: string,
+  target: vscode.ConfigurationTarget = vscode.ConfigurationTarget.Global,
+): Promise<void> {
+  const cfg = vscode.workspace.getConfiguration();
+  const current = cfg.get<Record<string, any>>(SECTION);
+  const key = blockKey(scope);
+  if (!current || !current[key]) return;
+  const block = current[key] as { textMateRules?: TaggedRule[] };
+  const userRules = (block.textMateRules ?? []).filter((r) => !r[MARK]);
+
+  const nextBlock: Record<string, unknown> = { ...block };
+  if (userRules.length) nextBlock.textMateRules = userRules;
+  else delete nextBlock.textMateRules;
+
+  const next = { ...current };
+  if (Object.keys(nextBlock).length) next[key] = nextBlock;
+  else delete next[key];
+
+  await cfg.update(SECTION, Object.keys(next).length ? next : undefined, target);
+}
+`,
+    "_assets/language/syntaxes/{{langId}}.tmLanguage.json": `{
+  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  "name": "{{displayName}}",
+  "scopeName": "{{scopeName}}",
+  "patterns": [
+    { "include": "#comments" },
+    { "include": "#strings" },
+    { "include": "#numbers" }
+  ],
+  "repository": {
+    "comments": {
+      "patterns": [
+        {
+          "name": "comment.line.number-sign.{{langId}}",
+          "match": "#.*$"
+        }
+      ]
+    },
+    "strings": {
+      "patterns": [
+        {
+          "name": "string.quoted.double.{{langId}}",
+          "begin": "\\"",
+          "end": "\\"",
+          "patterns": [
+            { "name": "constant.character.escape.{{langId}}", "match": "\\\\\\\\." }
+          ]
+        },
+        {
+          "name": "string.quoted.single.{{langId}}",
+          "begin": "'",
+          "end": "'"
+        }
+      ]
+    },
+    "numbers": {
+      "patterns": [
+        {
+          "name": "constant.numeric.{{langId}}",
+          "match": "\\\\b[0-9]+(\\\\.[0-9]+)?\\\\b"
+        }
+      ]
+    }
+  }
+}
+`,
     "_generators/command/command.ts.tpl": `import { defineCommand } from '../shared/vsceasy';
 
 export default defineCommand({
@@ -4038,6 +4452,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 +4490,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 +4554,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 +4576,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.
     },
   }),
@@ -4434,6 +4850,92 @@ export function createCache<V = unknown>(opts: CacheOptions = {}): Cache<V> {
 
   return cache;
 }
+`,
+    "_generators/helper/colorize.ts.tpl": `import * as vscode from 'vscode';
+
+/**
+ * Apply theme-independent token colors to a single TextMate scope (e.g. a
+ * language's root scope like \`source.toml\`), written to the user's
+ * \`editor.tokenColorCustomizations\`. Because the rules are keyed by
+ * \`[<scope>]\`, only files in that scope are recolored — every other language
+ * keeps the active theme's colors.
+ *
+ * Rules are tagged with a marker so {@link removeTokenColors} can strip exactly
+ * the ones this extension added, preserving any the user wrote by hand.
+ *
+ * Typical use — auto-apply on activate behind an opt-out setting:
+ *
+ *   // extension.ts (onActivate hook)
+ *   if (config.get<boolean>('colorize', true)) {
+ *     await applyTokenColors('source.{{commandPrefix}}', MY_RULES);
+ *   }
+ *   vscode.workspace.onDidChangeConfiguration(async (e) => {
+ *     if (!e.affectsConfiguration('{{commandPrefix}}.colorize')) return;
+ *     if (config.get<boolean>('colorize', true)) await applyTokenColors('source.{{commandPrefix}}', MY_RULES);
+ *     else await removeTokenColors('source.{{commandPrefix}}');
+ *   });
+ *
+ * Declare the opt-out in package.json#contributes.configuration:
+ *   "{{commandPrefix}}.colorize": { "type": "boolean", "default": true }
+ */
+
+export interface TokenColorRule {
+  /** Comma-separated TextMate scopes, e.g. 'entity.name.section.foo, comment.line.foo'. */
+  scope: string;
+  settings: { foreground?: string; background?: string; fontStyle?: string };
+}
+
+type TaggedRule = TokenColorRule & { [MARK]?: true };
+
+/** Marker key identifying rules this extension wrote (vs. the user's own). */
+const MARK = '{{commandPrefix}}Colorize';
+const SECTION = 'editor.tokenColorCustomizations';
+
+const blockKey = (scope: string) => \`[\${scope}]\`;
+
+/**
+ * Merge \`rules\` into \`editor.tokenColorCustomizations["[<scope>]"].textMateRules\`,
+ * preserving the user's own rules and other scope keys. Idempotent — re-applying
+ * replaces only previously-applied rules from this extension.
+ */
+export async function applyTokenColors(
+  scope: string,
+  rules: TokenColorRule[],
+  target: vscode.ConfigurationTarget = vscode.ConfigurationTarget.Global,
+): Promise<void> {
+  const cfg = vscode.workspace.getConfiguration();
+  const current = (cfg.get<Record<string, any>>(SECTION) ?? {}) as Record<string, any>;
+  const key = blockKey(scope);
+  const block = (current[key] ?? {}) as { textMateRules?: TaggedRule[] };
+  const existing = Array.isArray(block.textMateRules) ? block.textMateRules : [];
+  const userRules = existing.filter((r) => !r[MARK]);
+  const ours: TaggedRule[] = rules.map((r) => ({ ...r, [MARK]: true }));
+  const next = { ...current, [key]: { ...block, textMateRules: [...userRules, ...ours] } };
+  await cfg.update(SECTION, next, target);
+}
+
+/** Remove only the rules this extension added for \`scope\`; leave the rest intact. */
+export async function removeTokenColors(
+  scope: string,
+  target: vscode.ConfigurationTarget = vscode.ConfigurationTarget.Global,
+): Promise<void> {
+  const cfg = vscode.workspace.getConfiguration();
+  const current = cfg.get<Record<string, any>>(SECTION);
+  const key = blockKey(scope);
+  if (!current || !current[key]) return;
+  const block = current[key] as { textMateRules?: TaggedRule[] };
+  const userRules = (block.textMateRules ?? []).filter((r) => !r[MARK]);
+
+  const nextBlock: Record<string, unknown> = { ...block };
+  if (userRules.length) nextBlock.textMateRules = userRules;
+  else delete nextBlock.textMateRules;
+
+  const next = { ...current };
+  if (Object.keys(nextBlock).length) next[key] = nextBlock;
+  else delete next[key];
+
+  await cfg.update(SECTION, Object.keys(next).length ? next : undefined, target);
+}
 `,
     "_generators/helper/config.ts.tpl": `import * as vscode from 'vscode';
 
@@ -5006,7 +5508,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}}
@@ -5752,6 +6254,12 @@ bun run package   # → {{name}}-0.0.1.vsix
     "react/scripts/gen.ts": `#!/usr/bin/env bun
 // Scans src/panels, src/commands, and src/menus; writes src/extension/_registry.ts
 // and syncs package.json#contributes (commands, viewsContainers, views).
+//
+// Non-generated contributes (e.g. languages, grammars, snippets, themes,
+// iconThemes, walkthroughs) go in an optional \`contributes.extra.json\` at the
+// project root. It is deep-merged into package.json#contributes on every run —
+// the keys gen.ts owns (commands, keybindings, menus.commandPalette,
+// viewsContainers, views) always win, everything else from extra is preserved.
 
 import * as fs from 'fs';
 import * as path from 'path';
@@ -5767,6 +6275,10 @@ const TREE_VIEWS_DIR = path.join(SRC, 'treeViews');
 const JOBS_DIR = path.join(SRC, 'jobs');
 const OUT = path.join(SRC, 'extension', '_registry.ts');
 const PKG_PATH = path.join(ROOT, 'package.json');
+const EXTRA_PATH = path.join(ROOT, 'contributes.extra.json');
+
+/** Keys gen.ts owns — never overridden by contributes.extra.json. */
+const GEN_OWNED_KEYS = new Set(['commands', 'keybindings', 'viewsContainers', 'views']);
 
 interface Discovered {
   id: string;
@@ -5955,9 +6467,54 @@ function syncPackageJson(
     delete contributes.views;
   }
 
+  mergeExtraContributes(contributes);
+
   fs.writeFileSync(PKG_PATH, JSON.stringify(pkg, null, 2) + '\\n');
 }
 
+/**
+ * Deep-merge the optional \`contributes.extra.json\` (project root) into the
+ * package's \`contributes\`. Use for any contribution point gen.ts doesn't
+ * generate — languages, grammars, snippets, themes, iconThemes, walkthroughs…
+ *
+ * Rules:
+ *  - gen-owned keys (commands, keybindings, viewsContainers, views) are ignored
+ *    if present in extra — gen.ts stays authoritative for those.
+ *  - plain objects merge recursively; arrays and primitives from extra replace.
+ *
+ * NOTE: this is an inline copy of src/lib/contributesMerge.ts in the vsceasy
+ * source (the script must run standalone). Keep the two in sync.
+ */
+function mergeExtraContributes(contributes: Record<string, any>) {
+  if (!fs.existsSync(EXTRA_PATH)) return;
+  let extra: Record<string, any>;
+  try {
+    extra = JSON.parse(fs.readFileSync(EXTRA_PATH, 'utf8'));
+  } catch (err) {
+    console.warn(\`! Skipping contributes.extra.json — invalid JSON: \${(err as Error).message}\`);
+    return;
+  }
+  if (!extra || typeof extra !== 'object') return;
+  for (const [key, value] of Object.entries(extra)) {
+    if (GEN_OWNED_KEYS.has(key)) continue;
+    contributes[key] = deepMerge(contributes[key], value);
+  }
+}
+
+function isPlainObject(v: unknown): v is Record<string, any> {
+  return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+
+function deepMerge(base: any, override: any): any {
+  if (isPlainObject(base) && isPlainObject(override)) {
+    const out: Record<string, any> = { ...base };
+    for (const [k, v] of Object.entries(override)) out[k] = deepMerge(base[k], v);
+    return out;
+  }
+  // arrays and primitives: override wins
+  return override;
+}
+
 function loadDef(file: string): {
   id?: string;
   title?: string;
@@ -8114,6 +8671,12 @@ var init_interactive = __esm(() => {
 function toTitle(s) {
   return s.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
+function normalizeType(v) {
+  if (v === undefined || v === null || v === "")
+    return;
+  const s = String(v).trim().toLowerCase();
+  return EXTENSION_TYPES.includes(s) ? s : undefined;
+}
 function toBool(v) {
   if (v === undefined || v === null || v === "")
     return;
@@ -8153,7 +8716,7 @@ Installing dependencies with ${pm}...
 ! ${pm} install failed — run it manually`);
   return false;
 }
-var import_cli_maker, path4, import_child_process, createCommand, create_default;
+var import_cli_maker, path4, import_child_process, EXTENSION_TYPES, createCommand, create_default;
 var init_create = __esm(() => {
   init_scaffold();
   init_findProject();
@@ -8161,6 +8724,7 @@ var init_create = __esm(() => {
   import_cli_maker = __toESM(require_dist(), 1);
   path4 = __toESM(require("path"));
   import_child_process = require("child_process");
+  EXTENSION_TYPES = ["ui", "language", "empty"];
   createCommand = {
     name: "create",
     description: "Scaffold a new VS Code extension project",
@@ -8169,8 +8733,9 @@ var init_create = __esm(() => {
       { name: "displayName", description: "Human-readable extension name", required: false, type: import_cli_maker.ParamType.Text },
       { name: "description", description: "Short description", required: false, type: import_cli_maker.ParamType.Text },
       { name: "publisher", description: "VS Code publisher id", required: false, type: import_cli_maker.ParamType.Text },
-      { name: "ui", description: "UI framework", required: false, type: import_cli_maker.ParamType.List, options: ["react"] },
-      { name: "preset", description: "Project preset (minimal = empty extension, full = panel + RPC sample)", required: false, type: import_cli_maker.ParamType.List, options: ["minimal", "full"] },
+      { name: "type", description: "Extension type: ui (React webview + RPC), language (syntax/snippets/icon), empty (bare)", required: false, type: import_cli_maker.ParamType.List, options: ["ui", "language", "empty"] },
+      { name: "ui", description: "UI framework (only for --type ui)", required: false, type: import_cli_maker.ParamType.List, options: ["react"] },
+      { name: "preset", description: "UI preset (only for --type ui): minimal = empty extension, full = panel + RPC sample", required: false, type: import_cli_maker.ParamType.List, options: ["minimal", "full"] },
       { name: "dir", description: "Target directory (defaults to ./<name>)", required: false, type: import_cli_maker.ParamType.Text },
       { name: "git", description: "Initialize a git repository (skips the prompt)", required: false, type: import_cli_maker.ParamType.Boolean },
       { name: "install", description: "Install dependencies after scaffolding (skips the prompt)", required: false, type: import_cli_maker.ParamType.Boolean }
@@ -8178,6 +8743,15 @@ var init_create = __esm(() => {
     action: async (args) => {
       const name = args.name;
       const simpleName = name.replace(/^@[^/]+\//, "");
+      const interactiveTty = Boolean(process.stdin.isTTY && process.stdout.isTTY);
+      let type = normalizeType(args.type);
+      if (!type) {
+        type = interactiveTty ? await select("What kind of extension?", [
+          { label: "UI / webview", value: "ui", hint: "React panel + typed RPC bridge" },
+          { label: "Language support", value: "language", hint: "syntax highlighting, config, snippets, icon" },
+          { label: "Empty", value: "empty", hint: "bare activate/deactivate, no UI" }
+        ]) : "ui";
+      }
       const ui = args.ui ?? "react";
       const preset = args.preset ?? "full";
       const targetDir = path4.resolve(process.cwd(), args.dir ?? simpleName);
@@ -8188,18 +8762,18 @@ var init_create = __esm(() => {
           description: args.description ?? `${simpleName} VS Code extension`,
           publisher: args.publisher ?? "your-publisher",
           ui,
+          type,
           preset,
           targetDir,
           templatesRoot: findTemplatesRoot()
         });
         const rel = path4.relative(process.cwd(), targetDir) || ".";
         console.log(`
-✓ Created ${name} at ${rel}
+✓ Created ${name} (${type}) at ${rel}
 `);
-        const interactive = Boolean(process.stdin.isTTY && process.stdout.isTTY);
         const gitFlag = toBool(args.git);
         const installFlag = toBool(args.install);
-        const wantGit = gitFlag ?? (interactive ? await confirm("Initialize a git repository?", true) : false);
+        const wantGit = gitFlag ?? (interactiveTty ? await confirm("Initialize a git repository?", true) : false);
         if (wantGit) {
           if (which("git"))
             initGit(targetDir);
@@ -8207,7 +8781,7 @@ var init_create = __esm(() => {
             console.warn("! git not found — skipping repository init");
         }
         let pm = null;
-        const wantInstall = installFlag ?? (interactive ? await confirm("Install dependencies?", true) : false);
+        const wantInstall = installFlag ?? (interactiveTty ? await confirm("Install dependencies?", true) : false);
         let installed = false;
         if (wantInstall) {
           pm = which("bun") ? "bun" : which("npm") ? "npm" : null;
@@ -8222,9 +8796,16 @@ Next steps:`);
         console.log(`  cd ${rel}`);
         if (!installed)
           console.log(`  ${run} install`);
-        console.log(`  ${run} run launch        # builds + opens Extension Development Host`);
-        console.log(`  # or \`${run} run dev\` + F5 inside VS Code for watch mode
+        if (type === "language") {
+          console.log(`  ${run} run gen          # sync package.json#contributes from contributes.extra.json`);
+          console.log(`  ${run} run launch       # opens Extension Development Host — open a matching file to see highlighting`);
+          console.log(`  # edit syntaxes/, snippets/, language-configuration.json to refine the language
+`);
+        } else {
+          console.log(`  ${run} run launch        # builds + opens Extension Development Host`);
+          console.log(`  # or \`${run} run dev\` + F5 inside VS Code for watch mode
 `);
+        }
       } catch (err) {
         console.error(`
 ✗ Failed to scaffold: ${err.message}
@@ -8811,7 +9392,7 @@ var init_add4 = __esm(() => {
   init_config();
   fs9 = __toESM(require("fs"));
   path10 = __toESM(require("path"));
-  HELPER_KINDS = ["secrets", "config", "state", "notifications", "cache"];
+  HELPER_KINDS = ["secrets", "config", "state", "notifications", "cache", "colorize"];
 });
 
 // src/lib/db/init.ts
@@ -8863,11 +9444,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 +9483,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 +9507,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 +9545,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 +9566,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 = {}) {
@@ -9589,6 +10229,9 @@ function runDoctor(opts) {
   results.push(...checkStatusBars(root));
   results.push(...checkSubpanels(root));
   results.push(checkContributesSync(root, pkg));
+  const langCheck = checkLanguageAssets(root, pkg);
+  if (langCheck)
+    results.push(langCheck);
   results.push(checkActivationEvents(pkg));
   results.push(checkMarketplaceIcon(root, pkg));
   results.push(checkGenScript(root));
@@ -9851,6 +10494,50 @@ function checkContributesSync(root, pkg) {
     details: stale
   };
 }
+function checkLanguageAssets(root, pkg) {
+  const sources = [pkg?.contributes];
+  const extraPath = path14.join(root, "contributes.extra.json");
+  if (fs12.existsSync(extraPath)) {
+    try {
+      sources.push(JSON.parse(fs12.readFileSync(extraPath, "utf8")));
+    } catch {
+      return {
+        id: "language",
+        level: "error",
+        message: "contributes.extra.json is not valid JSON"
+      };
+    }
+  }
+  const refs = new Set;
+  for (const c of sources) {
+    if (!c)
+      continue;
+    for (const l of c.languages ?? [])
+      if (l.configuration)
+        refs.add(l.configuration);
+    for (const g of c.grammars ?? [])
+      if (g.path)
+        refs.add(g.path);
+    for (const s of c.snippets ?? [])
+      if (s.path)
+        refs.add(s.path);
+    for (const t of c.iconThemes ?? [])
+      if (t.path)
+        refs.add(t.path);
+  }
+  if (refs.size === 0)
+    return null;
+  const missing = [...refs].filter((rel) => !fs12.existsSync(path14.join(root, rel)));
+  if (missing.length === 0) {
+    return { id: "language", level: "ok", message: `language          ${refs.size} asset(s) present` };
+  }
+  return {
+    id: "language",
+    level: "error",
+    message: `language: ${missing.length} referenced asset(s) missing`,
+    details: missing
+  };
+}
 function checkGitignore(root) {
   const file = path14.join(root, ".gitignore");
   const required = ["dist", "node_modules"];
@@ -12036,7 +12723,7 @@ var init_add18 = __esm(() => {
   path33 = __toESM(require("path"));
   addHelperCommand = {
     name: "add",
-    description: "Generate a typed helper (secrets, config, state, notifications) into src/helpers/",
+    description: "Generate a typed helper (secrets, config, state, notifications, cache, colorize) into src/helpers/",
     params: [
       {
         name: "kind",
@@ -12082,6 +12769,15 @@ var init_add18 = __esm(() => {
     import { createCache } from '../helpers/cache';
     const cache = createCache<User>({ ttlMs: 60_000, max: 200 });
     const u = await cache.wrap('user:' + id, () => orm(User).findById(id));
+`);
+        } else if (args.kind === "colorize") {
+          console.log(`
+  Usage (auto-apply scoped token colors on activate):
+    import { applyTokenColors } from '../helpers/colorize';
+    await applyTokenColors('source.mylang', [
+      { scope: 'entity.name.section.mylang', settings: { foreground: '#e6c07b', fontStyle: 'bold' } },
+    ]);
+    // add a "<prefix>.colorize" boolean to contributes.configuration to opt out
 `);
         } else {
           console.log("");
@@ -12389,9 +13085,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 +13121,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 +13180,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 +13199,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 +13223,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 +13256,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 +13319,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 +13366,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 +13399,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 +13412,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 +13443,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 +13461,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 +13504,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 +13562,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 +13658,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 +13690,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 +13715,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 +13848,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 +13864,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 +14024,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.10",
     introAnimation: {
       enabled: true,
       preset: "retro-space",