@vsceasy/cli 0.1.8 → 0.1.10

package/dist/index.js

@@ -134,15 +134,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;
@@ -165,15 +176,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) {
@@ -199,7 +299,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"));
@@ -219,6 +319,15 @@ 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/validate.ts
@@ -1580,6 +1689,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));
@@ -1842,6 +1954,50 @@ function checkContributesSync(root, pkg) {
     details: stale
   };
 }
+function checkLanguageAssets(root, pkg) {
+  const sources = [pkg?.contributes];
+  const extraPath = path12.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(path12.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 = path12.join(root, ".gitignore");
   const required = ["dist", "node_modules"];
@@ -2238,9 +2394,314 @@ var init_upgrade = __esm(() => {
 });
 
 // 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({
@@ -2450,6 +2911,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 +2949,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 +3013,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 +3035,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.
     },
   }),
@@ -2846,6 +3309,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';
 
@@ -3418,7 +3967,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}}
@@ -4164,6 +4713,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';
@@ -4179,6 +4734,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;
@@ -4367,9 +4926,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;
@@ -6535,7 +7139,7 @@ var init_add9 = __esm(() => {
   init_config();
   fs18 = __toESM(require("fs"));
   path18 = __toESM(require("path"));
-  HELPER_KINDS = ["secrets", "config", "state", "notifications", "cache"];
+  HELPER_KINDS = ["secrets", "config", "state", "notifications", "cache", "colorize"];
 });
 
 // src/lib/job/add.ts
@@ -6722,7 +7326,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 +7482,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 +7517,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 +7574,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 +7632,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 +7728,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 +7784,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 +7823,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, "");