@khester/create-dynamics-app 1.1.0 → 2.1.0

package/dist/utils/updatePackageJson.js

@@ -2,23 +2,25 @@ import fs from 'fs-extra';
 import path from 'path';
 import chalk from 'chalk';
 import ora from 'ora';
-export async function updatePackageJson(projectPath, projectName, clientName) {
+export async function updatePackageJson(projectPath, projectName, options = {}) {
     const spinner = ora('Updating package.json...').start();
+    const { provenance } = options;
     try {
         const packageJsonPath = path.join(projectPath, 'package.json');
         if (await fs.pathExists(packageJsonPath)) {
             const packageJson = await fs.readJson(packageJsonPath);
             // Update the name
             packageJson.name = projectName;
-            // Add client information if provided
-            if (clientName) {
-                packageJson.description = `${packageJson.description || 'Dynamics 365 application'} - Built for ${clientName}`;
-                packageJson.client = clientName;
-                packageJson.keywords = packageJson.keywords || [];
-                if (!packageJson.keywords.includes(clientName.toLowerCase())) {
-                    packageJson.keywords.push(clientName.toLowerCase());
-                }
-                packageJson.keywords.push('consulting', 'enterprise');
+            // Stamp provenance so we can detect the generating CLI/template later.
+            if (provenance) {
+                packageJson.dynamicsKit = {
+                    cliVersion: provenance.cliVersion,
+                    artifact: provenance.artifact,
+                    ...(provenance.componentLibrary
+                        ? { componentLibrary: provenance.componentLibrary }
+                        : {}),
+                    templateVersion: provenance.templateVersion,
+                };
             }
             // Remove any template-specific fields that shouldn't be in final package
             delete packageJson.template;

package/dist/utils/updatePackageJson.js.map

@@ -1 +1 @@
-{"version":3,"file":"updatePackageJson.js","sourceRoot":"","sources":["../../src/utils/updatePackageJson.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACrC,WAAmB,EACnB,WAAmB,EACnB,UAAmB;IAEnB,MAAM,OAAO,GAAG,GAAG,CAAC,0BAA0B,CAAC,CAAC,KAAK,EAAE,CAAC;IAExD,IAAI,CAAC;QACH,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;QAE/D,IAAI,MAAM,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;YACzC,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAEvD,kBAAkB;YAClB,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC;YAE/B,qCAAqC;YACrC,IAAI,UAAU,EAAE,CAAC;gBACf,WAAW,CAAC,WAAW,GAAG,GAAG,WAAW,CAAC,WAAW,IAAI,0BAA0B,gBAAgB,UAAU,EAAE,CAAC;gBAC/G,WAAW,CAAC,MAAM,GAAG,UAAU,CAAC;gBAChC,WAAW,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,IAAI,EAAE,CAAC;gBAClD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;oBAC7D,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;gBACtD,CAAC;gBACD,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;YACxD,CAAC;YAED,yEAAyE;YACzE,OAAO,WAAW,CAAC,QAAQ,CAAC;YAE5B,MAAM,EAAE,CAAC,SAAS,CAAC,eAAe,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC;IACvD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC,CAAC;QACzD,MAAM,KAAK,CAAC;IACd,CAAC;AACH,CAAC"}
+{"version":3,"file":"updatePackageJson.js","sourceRoot":"","sources":["../../src/utils/updatePackageJson.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,KAAK,CAAC;AActB,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACrC,WAAmB,EACnB,WAAmB,EACnB,UAAoC,EAAE;IAEtC,MAAM,OAAO,GAAG,GAAG,CAAC,0BAA0B,CAAC,CAAC,KAAK,EAAE,CAAC;IACxD,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAE/B,IAAI,CAAC;QACH,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;QAE/D,IAAI,MAAM,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;YACzC,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAEvD,kBAAkB;YAClB,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC;YAE/B,uEAAuE;YACvE,IAAI,UAAU,EAAE,CAAC;gBACf,WAAW,CAAC,WAAW,GAAG;oBACxB,UAAU,EAAE,UAAU,CAAC,UAAU;oBACjC,QAAQ,EAAE,UAAU,CAAC,QAAQ;oBAC7B,GAAG,CAAC,UAAU,CAAC,gBAAgB;wBAC7B,CAAC,CAAC,EAAE,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAAE;wBACnD,CAAC,CAAC,EAAE,CAAC;oBACP,eAAe,EAAE,UAAU,CAAC,eAAe;iBAC5C,CAAC;YACJ,CAAC;YAED,yEAAyE;YACzE,OAAO,WAAW,CAAC,QAAQ,CAAC;YAE5B,MAAM,EAAE,CAAC,SAAS,CAAC,eAAe,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC;IACvD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC,CAAC;QACzD,MAAM,KAAK,CAAC;IACd,CAAC;AACH,CAAC"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@khester/create-dynamics-app",
-  "version": "1.1.0",
-  "description": "CLI tool to scaffold new Dynamics UI Kit projects",
+  "version": "2.1.0",
+  "description": "Unified CLI to scaffold Dynamics 365 / Power Platform artifacts",
   "main": "dist/index.js",
   "type": "module",
   "bin": {
-    "create-dynamics-app": "./bin/create-dynamics-app.js"
+    "create-dynamics-app": "bin/create-dynamics-app.js"
   },
   "files": [
     "dist",
@@ -13,15 +13,18 @@
     "templates"
   ],
   "scripts": {
+    "prebuild": "rimraf dist tsconfig.tsbuildinfo",
     "build": "tsc",
     "dev": "tsc --watch",
     "prepublishOnly": "npm run build",
-    "test": "jest --passWithNoTests",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist tsconfig.tsbuildinfo"
   },
   "dependencies": {
+    "@dataverse-kit/export-engine": "^1.0.0",
     "@khester/dynamics-ui-components": "^1.0.0",
     "chalk": "^5.3.0",
     "commander": "^11.1.0",
@@ -44,9 +47,9 @@
     "create-app"
   ],
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   }
 }

package/templates/_shared/dev-tools/auth/get-token.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+/**
+ * Acquire a Dataverse bearer token via the Azure CLI and write it to `.env`
+ * (DYNAMICS_URL + DYNAMICS_TOKEN — the exact names @dataverse-kit/dataverse-codegen's
+ * resolveConnection reads). Tokens are short-lived; re-run before a codegen/smoke run.
+ *
+ * Usage:
+ *   node tools/auth/get-token.js --url https://org.crm.dynamics.com
+ *   (or set DYNAMICS_URL in the environment / .env)
+ */
+const { spawnSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+function arg(name) {
+  const i = process.argv.indexOf(name);
+  return i !== -1 ? process.argv[i + 1] : undefined;
+}
+
+function readEnv(file) {
+  if (!fs.existsSync(file)) return {};
+  const out = {};
+  for (const line of fs.readFileSync(file, 'utf8').split(/\r?\n/)) {
+    const m = line.match(/^([A-Z0-9_]+)=(.*)$/);
+    if (m) out[m[1]] = m[2];
+  }
+  return out;
+}
+
+function writeEnv(file, env) {
+  const body = Object.entries(env)
+    .map(([k, v]) => `${k}=${v}`)
+    .join('\n');
+  fs.writeFileSync(file, body + '\n', 'utf8');
+}
+
+const envPath = path.join(process.cwd(), '.env');
+const env = readEnv(envPath);
+const url = arg('--url') || process.env.DYNAMICS_URL || env.DYNAMICS_URL;
+
+if (!url) {
+  console.error(
+    '✗ No Dataverse URL. Pass --url https://org.crm.dynamics.com or set DYNAMICS_URL in .env.'
+  );
+  process.exit(1);
+}
+
+console.log(`→ Acquiring token for ${url} via Azure CLI...`);
+const res = spawnSync(
+  'az',
+  ['account', 'get-access-token', '--resource', url, '--query', 'accessToken', '-o', 'tsv'],
+  { encoding: 'utf8' }
+);
+
+if (res.status !== 0) {
+  console.error('✗ az account get-access-token failed. Run `az login` first.');
+  if (res.stderr) console.error(res.stderr.trim());
+  process.exit(1);
+}
+
+const token = (res.stdout || '').trim();
+if (!token) {
+  console.error('✗ Azure CLI returned an empty token.');
+  process.exit(1);
+}
+
+// Merge keys — never clobber an existing .env wholesale.
+env.DYNAMICS_URL = url;
+env.DYNAMICS_TOKEN = token;
+writeEnv(envPath, env);
+console.log('✓ Wrote DYNAMICS_URL + DYNAMICS_TOKEN to .env');

package/templates/_shared/dev-tools/dev/mock-xrm.js

@@ -0,0 +1,42 @@
+/**
+ * Minimal mock of the Dynamics `Xrm` global for local development. Lets an
+ * artifact that talks to `Xrm.WebApi` run in a plain browser/dev-server without a
+ * model-driven host. Pair with a ServiceFactory that flips to a mock service on
+ * localhost (see the React Custom Page template's ServiceFactory.isMockEnvironment).
+ *
+ * Usage (entry HTML or dev bootstrap):
+ *   import { installMockXrm } from './tools/dev/mock-xrm.js';
+ *   if (location.hostname === 'localhost') installMockXrm();
+ */
+export function installMockXrm(seed = {}) {
+  const store = new Map(Object.entries(seed));
+  const ok = (data) => Promise.resolve(data);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  globalThis.Xrm = {
+    WebApi: {
+      retrieveRecord: (entity, id) => ok(store.get(`${entity}:${id}`) ?? { [`${entity}id`]: id }),
+      retrieveMultipleRecords: () => ok({ entities: [...store.values()] }),
+      createRecord: (entity, data) => {
+        const id = `mock-${store.size + 1}`;
+        store.set(`${entity}:${id}`, { ...data, [`${entity}id`]: id });
+        return ok({ id });
+      },
+      updateRecord: (entity, id, data) => {
+        store.set(`${entity}:${id}`, { ...(store.get(`${entity}:${id}`) || {}), ...data });
+        return ok(undefined);
+      },
+      deleteRecord: (entity, id) => {
+        store.delete(`${entity}:${id}`);
+        return ok(undefined);
+      },
+    },
+    Utility: {
+      getGlobalContext: () => ({
+        getClientUrl: () => 'http://localhost',
+        userSettings: { userId: 'mock-user', userName: 'Mock User' },
+      }),
+    },
+  };
+  return globalThis.Xrm;
+}

package/templates/_shared/dev-tools/metadata-sync/index.js

@@ -0,0 +1,152 @@
+#!/usr/bin/env node
+
+/**
+ * Metadata Sync — thin wrapper around @dataverse-kit/dataverse-codegen (dvgen).
+ *
+ * Pulls REAL entity metadata from a live Dataverse org and generates field
+ * constants + typed models (and, optionally, the IApiService CRUD layer) into
+ * `src/`. All org connection + auth is delegated to dvgen, which resolves, in
+ * order: --url/--token/--env-file flags, the DYNAMICS_* / VITE_DYNAMICS_* /
+ * REACT_APP_DYNAMICS_* env vars, then the Azure CLI (`az account get-access-token`).
+ *
+ * This replaces the previous mock pipeline (which returned hard-coded metadata).
+ * dvgen is the same tool the rest of the toolkit uses, so output stays consistent
+ * with `dvgen design`/`constants`/`models` everywhere.
+ */
+
+const { program } = require('commander');
+const { spawnSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+const DVGEN_CLI = path.join(
+  process.cwd(),
+  'node_modules',
+  '@dataverse-kit',
+  'dataverse-codegen',
+  'dist',
+  'cli.cjs'
+);
+
+function ensureDvgen() {
+  if (!fs.existsSync(DVGEN_CLI)) {
+    console.error(
+      '✗ dvgen not found. Install it first:\n' +
+        '  npm install -D @dataverse-kit/dataverse-codegen'
+    );
+    process.exit(1);
+  }
+}
+
+function dvgen(args) {
+  const result = spawnSync(process.execPath, [DVGEN_CLI, ...args], {
+    stdio: 'inherit',
+  });
+  return result.status === 0;
+}
+
+function resolveEntities(opts) {
+  if (opts.entities) {
+    return opts.entities
+      .split(',')
+      .map((e) => e.trim())
+      .filter(Boolean);
+  }
+  return ['account', 'contact'];
+}
+
+function connectionArgs(opts) {
+  const args = [];
+  if (opts.url) args.push('--url', opts.url);
+  if (opts.token) args.push('--token', opts.token);
+  if (opts.envFile) args.push('--env-file', opts.envFile);
+  return args;
+}
+
+function run(opts, { diff = false } = {}) {
+  ensureDvgen();
+  const entities = resolveEntities(opts);
+  const out = opts.out || 'src';
+  const conn = connectionArgs(opts);
+  const extra = diff ? ['--diff'] : [];
+  if (opts.force && !diff) extra.push('--force');
+  // The starter's shipped models import IApiService from
+  // @khester/dynamics-ui-api-client, so point generated models at the same
+  // module. When the dvgen-local CRUD layer is generated (--api), use that.
+  const apiServiceImport = opts.api ? '../services/IApiService' : opts.apiService;
+
+  console.log(
+    `${diff ? '🔍 Diffing' : '🔄 Generating'} ${entities.join(
+      ', '
+    )} via dvgen → ${out}/\n`
+  );
+
+  // Shared CRUD layer once (offline; only when explicitly requested).
+  if (opts.api && !diff) {
+    if (!dvgen(['api', '--out', out])) process.exit(1);
+  }
+
+  let ok = true;
+  for (const entity of entities) {
+    console.log(`\n→ ${entity}`);
+    if (
+      !dvgen(['constants', '--entity', entity, '--out', out, ...conn, ...extra])
+    ) {
+      ok = false;
+    }
+    const modelArgs = ['models', '--entity', entity, '--out', out, ...conn, ...extra];
+    if (apiServiceImport) modelArgs.push('--api-service', apiServiceImport);
+    if (opts.withRetrieve) modelArgs.push('--with-retrieve');
+    if (!dvgen(modelArgs)) ok = false;
+  }
+
+  if (!ok) {
+    console.error('\n✗ One or more entities failed.');
+    process.exit(1);
+  }
+  console.log('\n✓ Done.');
+}
+
+function withCommon(cmd) {
+  return cmd
+    .option(
+      '-e, --entities <list>',
+      'comma-separated entities (default: account,contact)'
+    )
+    .option('--url <url>', 'Dataverse org URL (else dvgen resolves env / Azure CLI)')
+    .option('--token <token>', 'bearer token (else dvgen resolves env / Azure CLI)')
+    .option('--env-file <path>', '.env file with DYNAMICS_URL / DYNAMICS_TOKEN')
+    .option('-o, --out <dir>', 'output base dir', 'src')
+    .option('--force', 'overwrite existing generated files (default: skip)')
+    .option('--with-retrieve', 'include retrieveWithRelated() FetchXML scaffolds')
+    .option(
+      '--api-service <import>',
+      'IApiService module specifier for generated models',
+      '@khester/dynamics-ui-api-client'
+    )
+    .option('--api', 'also (re)generate the IApiService CRUD layer');
+}
+
+program
+  .name('metadata-sync')
+  .description(
+    'Live Dataverse metadata → TypeScript (constants + models) via dvgen'
+  );
+
+withCommon(program.command('sync'))
+  .description('Pull live metadata and generate constants + models')
+  .action((o) => run(o));
+
+withCommon(program.command('pull'))
+  .description('Alias of sync (pull live metadata + generate)')
+  .action((o) => run(o));
+
+withCommon(program.command('generate'))
+  .description('Alias of sync (generate constants + models from the live org)')
+  .action((o) => run(o));
+
+withCommon(program.command('validate'))
+  .description('Diff generated code against the live org (no writes)')
+  .action((o) => run(o, { diff: true }));
+
+program.parse();

package/templates/_shared/dev-tools/smoke/test-retrieve.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+
+/**
+ * Live-org smoke test: retrieve a few rows of an entity to confirm the generated
+ * data layer + token work end-to-end before deploy. Delegates to dvgen's
+ * `test-retrieve --live`, which resolves the connection (flag/env/Azure CLI).
+ *
+ * Usage:  node tools/smoke/test-retrieve.js --entity account
+ */
+const { spawnSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+function arg(name, fallback) {
+  const i = process.argv.indexOf(name);
+  return i !== -1 ? process.argv[i + 1] : fallback;
+}
+
+const DVGEN = path.join(
+  process.cwd(),
+  'node_modules',
+  '@dataverse-kit',
+  'dataverse-codegen',
+  'dist',
+  'cli.cjs'
+);
+
+if (!fs.existsSync(DVGEN)) {
+  console.error('✗ dvgen not found. Install @dataverse-kit/dataverse-codegen first.');
+  process.exit(1);
+}
+
+const entity = arg('--entity');
+if (!entity) {
+  console.error('✗ Pass --entity <logicalName> (e.g. --entity account).');
+  process.exit(1);
+}
+
+const res = spawnSync(
+  process.execPath,
+  [DVGEN, 'test-retrieve', '--entity', entity, '--live'],
+  { stdio: 'inherit' }
+);
+process.exit(res.status ?? 1);

package/templates/dialog-form/README.md

@@ -0,0 +1,27 @@
+# {{projectName}}
+
+A Dynamics 365 **dialog form** — a single React form (Fluent UI {{componentLibrary}}) you host as a
+web resource and open as a dialog (e.g. via `Xrm.Navigation.navigateTo` / `openWebResource`).
+
+## Develop
+
+```bash
+npm install
+npm run dev        # webpack dev server on http://localhost:8080
+npm run build      # production bundle → dist/{{projectName}}.js
+npm run typecheck  # tsc --noEmit
+```
+
+The form (`src/App.tsx`) saves via `src/services/dataverse.ts` (`Xrm.WebApi`). Outside a host, stub
+Xrm with the `serve` dev-tool's `tools/dev/mock-xrm.js`.
+
+## Dev-tools
+
+```bash
+npm run auth:token -- --url https://YOUR_ORG.crm.dynamics.com   # token → .env
+npm run metadata:pull -- --entities contact                     # typed entities
+```
+
+## Deploy
+
+Upload `dist/{{projectName}}.js` as a web resource and open it as a dialog from a form/ribbon command.

package/templates/dialog-form/_variants/App.v8.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ThemeProvider } from '@fluentui/react/lib/Theme';
+import { Stack } from '@fluentui/react/lib/Stack';
+import { Text } from '@fluentui/react/lib/Text';
+import { TextField } from '@fluentui/react/lib/TextField';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
+import { createRecord } from './services/dataverse';
+
+export const App: React.FC = () => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [saving, setSaving] = React.useState(false);
+
+  const onSave = async () => {
+    setSaving(true);
+    try {
+      await createRecord('contact', { fullname: name, emailaddress1: email });
+      alert('Saved.');
+    } catch (e) {
+      alert(`Save failed (Xrm not available here?): ${String(e)}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <ThemeProvider>
+      <Stack tokens={{ childrenGap: 12, padding: 16 }} styles={{ root: { maxWidth: 480 } }}>
+        <Text variant="xLarge">{{projectName}}</Text>
+        <TextField label="Full name" value={name} onChange={(_, v) => setName(v ?? '')} required />
+        <TextField label="Email" value={email} onChange={(_, v) => setEmail(v ?? '')} />
+        <Stack horizontal tokens={{ childrenGap: 8 }}>
+          <PrimaryButton text="Save" onClick={onSave} disabled={saving} />
+          <DefaultButton text="Cancel" onClick={() => window.history.back()} />
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+};

package/templates/dialog-form/_variants/App.v9.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { FluentProvider, webLightTheme, Text, Input, Button, Field } from '@fluentui/react-components';
+import { createRecord } from './services/dataverse';
+
+export const App: React.FC = () => {
+  const [name, setName] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [saving, setSaving] = React.useState(false);
+
+  const onSave = async () => {
+    setSaving(true);
+    try {
+      await createRecord('contact', { fullname: name, emailaddress1: email });
+      alert('Saved.');
+    } catch (e) {
+      alert(`Save failed (Xrm not available here?): ${String(e)}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 16, maxWidth: 480 }}>
+        <Text size={600} weight="semibold">{{projectName}}</Text>
+        <Field label="Full name" required>
+          <Input value={name} onChange={(_, d) => setName(d.value)} />
+        </Field>
+        <Field label="Email">
+          <Input value={email} onChange={(_, d) => setEmail(d.value)} />
+        </Field>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Button appearance="primary" onClick={onSave} disabled={saving}>
+            Save
+          </Button>
+          <Button onClick={() => window.history.back()}>Cancel</Button>
+        </div>
+      </div>
+    </FluentProvider>
+  );
+};

package/templates/dialog-form/gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.env
+.env.local
+*.log

package/templates/dialog-form/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "description": "{{projectName}} — Dynamics 365 dialog form (React, Fluent {{componentLibrary}})",
+  "private": true,
+  "scripts": {
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/xrm": "^9.0.74",
+    "html-webpack-plugin": "^5.5.3",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

package/templates/dialog-form/public/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/templates/dialog-form/src/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+// On localhost, `tools/dev/mock-xrm.js` (from the `serve` dev-tool) can be loaded
+// to stub the Xrm global so this resource runs outside a model-driven host.
+const container = document.getElementById('root');
+if (container) {
+  createRoot(container).render(<App />);
+}

package/templates/dialog-form/src/services/dataverse.ts

@@ -0,0 +1,30 @@
+/**
+ * Thin wrapper over Xrm.WebApi for this web resource's data access. The Xrm global
+ * is typed via @types/xrm; on localhost, stub it with tools/dev/mock-xrm.js.
+ */
+
+export type DataverseRecord = Record<string, unknown>;
+
+export async function retrieveMultiple(
+  entityLogicalName: string,
+  options = ''
+): Promise<DataverseRecord[]> {
+  const result = await Xrm.WebApi.retrieveMultipleRecords(entityLogicalName, options);
+  return result.entities;
+}
+
+export async function retrieveRecord(
+  entityLogicalName: string,
+  id: string,
+  options = ''
+): Promise<DataverseRecord> {
+  return Xrm.WebApi.retrieveRecord(entityLogicalName, id, options);
+}
+
+export async function createRecord(
+  entityLogicalName: string,
+  data: Record<string, unknown>
+): Promise<string> {
+  const res = await Xrm.WebApi.createRecord(entityLogicalName, data);
+  return res.id;
+}

package/templates/dialog-form/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2018"],
+    "types": ["xrm"]
+  },
+  "include": ["src"]
+}

package/templates/dialog-form/webpack.config.js

@@ -0,0 +1,17 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '{{projectName}}.js',
+    clean: true,
+  },
+  resolve: { extensions: ['.ts', '.tsx', '.js'] },
+  module: {
+    rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }],
+  },
+  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
+  devServer: { static: './dist', port: 8080, hot: true },
+};

package/templates/grid-customizer/README.md

@@ -0,0 +1,28 @@
+# {{componentName}} (grid customizer)
+
+A Dynamics 365 **editable-grid customizer** — maps column data types / logical names to custom Fluent
+UI v9 cell renderers (status badge, currency, date, progress).
+
+## Develop
+
+```bash
+npm install
+npm run build      # webpack → dist/{{projectName}}.js (UMD)
+npm run typecheck  # tsc --noEmit
+```
+
+## Customize
+
+Edit `src/GridCustomizer.ts` to map columns to renderers, and add renderers in
+`src/cell-renderers.tsx`:
+
+```ts
+cellRendererOverrides = {
+  OptionSet: StatusBadgeRenderer,   // by data type
+  prioritycode: StatusBadgeRenderer // by column logical name
+};
+```
+
+## Deploy
+
+Bundle and register `dist/{{projectName}}.js` on the grid control's customizer property.