@khester/create-dynamics-app 3.1.0 → 3.3.0

package/templates/grid-customizer/dev/main.tsx

@@ -0,0 +1,260 @@
+import * as React from 'react';
+// ReactDOM.render, NOT createRoot — this control is pinned to React 16.14.0 to match the
+// `Reactv16` platform global it externalises, and `react-dom/client` does not exist there.
+import * as ReactDOM from 'react-dom';
+import {
+  HarnessShell,
+  usePersistedState,
+  type ThemeChoice,
+  type DataSource,
+  type HarnessField,
+} from '@dataverse-kit/pcf-dev-harness/shell';
+import { createCellRendererOverrides } from '../{{componentName}}/customizers/CellRendererOverrides';
+import { MockGrid, type HarnessColumn, type HarnessRow } from './harness/MockGrid';
+import { fetchGridData, type HttpError } from './harness/dataverse';
+
+/**
+ * Dev harness for {{componentName}}.
+ *
+ * ★ It renders the customizer's REAL override map (`createCellRendererOverrides`) through a
+ * stand-in grid that follows the same call contract as PowerAppsOneGrid — see
+ * `harness/MockGrid.tsx`. `npm start` cannot do this: the stock PCF harness has no grid, so
+ * the overrides are never invoked and the canvas is simply blank.
+ *
+ * Two data sources:
+ *   - Mock — the recordset below, one column per overridden data type. Needs no org.
+ *   - Live — real rows and, critically, real column DATA TYPES read from entity metadata.
+ *            Enabled only when VITE_DYNAMICS_URL is set in `.env.local`.
+ */
+
+/** Live-org binding: entity set + columns + page size. */
+interface GridBinding {
+  entitySetName: string;
+  select: string;
+  top: string;
+}
+
+/** One column per data type this template overrides, plus a Text column to show fall-through. */
+const MOCK_COLUMNS: HarnessColumn[] = [
+  { name: 'name', displayName: 'Name', dataType: 'Text', width: 200 },
+  { name: 'statuscode', displayName: 'Status', dataType: 'OptionSet', width: 150 },
+  { name: 'revenue', displayName: 'Revenue', dataType: 'Currency', width: 150 },
+  { name: 'percentcomplete', displayName: 'Complete', dataType: 'Decimal', width: 200 },
+  { name: 'donotemail', displayName: 'Email OK', dataType: 'TwoOptions', width: 130 },
+];
+
+function cell(raw: unknown, formatted: string): { raw: unknown; formatted: string } {
+  return { raw, formatted };
+}
+
+const MOCK_ROWS: HarnessRow[] = [
+  {
+    name: cell('Contoso Ltd', 'Contoso Ltd'),
+    statuscode: cell(1, 'Active'),
+    revenue: cell(5200000, '$5,200,000.00'),
+    percentcomplete: cell(82, '82'),
+    donotemail: cell(true, 'Yes'),
+  },
+  {
+    name: cell('Fabrikam Inc', 'Fabrikam Inc'),
+    statuscode: cell(2, 'Pending'),
+    revenue: cell(-18500, '-$18,500.00'),
+    percentcomplete: cell(35, '35'),
+    donotemail: cell(false, 'No'),
+  },
+  {
+    name: cell('Adventure Works', 'Adventure Works'),
+    statuscode: cell(3, 'Blocked'),
+    revenue: cell(920000, '$920,000.00'),
+    percentcomplete: cell(0, '0'),
+    donotemail: cell(false, 'No'),
+  },
+  {
+    name: cell('Northwind Traders', 'Northwind Traders'),
+    statuscode: cell(4, 'Completed'),
+    revenue: cell(3400000, '$3,400,000.00'),
+    percentcomplete: cell(100, '100'),
+    donotemail: cell(true, 'Yes'),
+  },
+  {
+    name: cell('Tailspin Toys', 'Tailspin Toys'),
+    // An option label absent from config.STATUS_COLORS — proves the derived-colour fallback.
+    statuscode: cell(5, 'Awaiting Review'),
+    revenue: cell(undefined, ''),
+    percentcomplete: cell(58, '58'),
+    donotemail: cell(false, 'No'),
+  },
+  {
+    // ★ The null row. Dataverse columns are nullable — a Boolean added to a table with
+    // existing rows is null on all of them — and a renderer that coerces null would paint
+    // this as a definite "No". Every cell here must fall through to the DEFAULT renderer
+    // (blank), not to a custom one. If a badge, tick or bar appears on this row, a handler
+    // is missing its empty check.
+    name: cell('Wingtip Toys (empty row)', 'Wingtip Toys (empty row)'),
+    statuscode: cell(null, ''),
+    revenue: cell(null, ''),
+    percentcomplete: cell(null, ''),
+    donotemail: cell(null, ''),
+  },
+];
+
+// VITE_-prefixed vars reach client code; this one only GATES Live mode. The token is
+// deliberately not read here — it would be inlined into the bundle. The proxy injects it.
+const LIVE_ENABLED = !!import.meta.env.VITE_DYNAMICS_URL;
+
+/** Turn a failed live fetch into a red status line, calling out auth failures specifically. */
+function describeLoadError(e: unknown): React.ReactNode {
+  const err = e as HttpError;
+  // The dev server refreshes the token in the background, so a 401/403 that survives the
+  // client retry means the `az login` session itself lapsed — not just the short-lived token.
+  const msg =
+    err.status === 401 || err.status === 403
+      ? 'Not authorized — your `az login` session has expired. Run `az login`, then Load again.'
+      : `Failed to load: ${err.message}`;
+  return <span style={{ color: '#a4262c' }}>{msg}</span>;
+}
+
+const Harness: React.FC = () => {
+  // Panel CONFIG persists across reloads (localStorage); fetched DATA does not.
+  const [width, setWidth] = usePersistedState('width', 0); // 0 => fill the canvas
+  const [height, setHeight] = usePersistedState('height', 0); // 0 => auto
+  const [theme, setTheme] = usePersistedState<ThemeChoice>('theme', 'light');
+  const [dataSource, setDataSource] = usePersistedState<DataSource>('dataSource', 'mock');
+  const [binding, setBinding] = usePersistedState<GridBinding>('binding', {
+    entitySetName: 'accounts',
+    select: 'name,statuscode,revenue,donotemail',
+    top: '25',
+  });
+  // Seeded with the mock decimal column so the progress renderer is visible on first run.
+  // The SHIPPED default (config.PROGRESS_COLUMNS) is deliberately empty — see that file.
+  const [progressColumns, setProgressColumns] = usePersistedState(
+    'progressColumns',
+    'percentcomplete',
+  );
+
+  const [columns, setColumns] = React.useState<HarnessColumn[]>(MOCK_COLUMNS);
+  const [rows, setRows] = React.useState<HarnessRow[]>(MOCK_ROWS);
+  const [liveStatus, setLiveStatus] = React.useState<React.ReactNode>(null);
+
+  // The real override map, rebuilt only when the progress-column list changes. This is the
+  // same factory index.ts calls — the harness never forks the renderers.
+  const overrides = React.useMemo(
+    () =>
+      createCellRendererOverrides({
+        progressColumns: progressColumns
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean),
+      }),
+    [progressColumns],
+  );
+
+  // On reload with a restored Live selection: clear and prompt for Load — or fall back to
+  // Mock when this session has no org configured. Runs once on mount.
+  React.useEffect(() => {
+    if (dataSource !== 'live') return;
+    if (!LIVE_ENABLED) {
+      setDataSource('mock');
+      return;
+    }
+    setColumns([]);
+    setRows([]);
+    setLiveStatus(<span style={{ color: '#605e5c' }}>Binding restored — click Load.</span>);
+    // Mount-only by design: `[]` deliberately omits dataSource/LIVE_ENABLED, because this
+    // reconciles the RESTORED selection once and must not re-run when it later changes.
+    // (No eslint-disable here: this template's .eslintrc loads no react-hooks plugin, and a
+    // disable naming an unresolvable rule is an ESLint ERROR the moment anything lints it —
+    // the failure mode gated by "PCF templates never disable an unresolvable ESLint rule".)
+  }, []);
+
+  const onDataSourceChange = (next: DataSource): void => {
+    setDataSource(next);
+    if (next === 'mock') {
+      setColumns(MOCK_COLUMNS);
+      setRows(MOCK_ROWS);
+      setLiveStatus(null);
+    } else {
+      setColumns([]);
+      setRows([]);
+      setLiveStatus(<span style={{ color: '#605e5c' }}>Enter a binding and click Load.</span>);
+    }
+  };
+
+  const onLoadLive = (): void => {
+    void (async () => {
+      setLiveStatus(<span style={{ color: '#605e5c' }}>Loading…</span>);
+      try {
+        const result = await fetchGridData(binding.entitySetName, binding.select, binding.top);
+        setColumns(result.columns);
+        setRows(result.rows);
+        const typed = result.columns.map((c) => `${c.name}:${c.dataType}`).join(', ');
+        setLiveStatus(
+          <span style={{ color: '#107c10' }}>
+            Loaded {result.rows.length} row{result.rows.length === 1 ? '' : 's'} — {typed}
+          </span>,
+        );
+      } catch (e) {
+        setLiveStatus(describeLoadError(e));
+      }
+    })();
+  };
+
+  const bindingFields: HarnessField[] = [
+    {
+      kind: 'text',
+      label: 'Entity set (plural)',
+      placeholder: 'accounts',
+      value: binding.entitySetName,
+      onChange: (v) => setBinding((b) => ({ ...b, entitySetName: v })),
+    },
+    {
+      kind: 'text',
+      label: 'Columns ($select, comma-separated)',
+      placeholder: 'name,statuscode,revenue',
+      value: binding.select,
+      onChange: (v) => setBinding((b) => ({ ...b, select: v })),
+    },
+    {
+      kind: 'text',
+      label: 'Top (max rows)',
+      placeholder: '25',
+      value: binding.top,
+      onChange: (v) => setBinding((b) => ({ ...b, top: v })),
+    },
+  ];
+
+  return (
+    <HarnessShell
+      title="{{componentName}} — dev harness"
+      subtitle="Grid customizer · cell renderer overrides against a stand-in OneGrid"
+      width={width}
+      onWidthChange={setWidth}
+      height={height}
+      onHeightChange={setHeight}
+      theme={theme}
+      onThemeChange={setTheme}
+      dataSource={dataSource}
+      onDataSourceChange={onDataSourceChange}
+      liveEnabled={LIVE_ENABLED}
+      bindingFields={bindingFields}
+      onLoadLive={onLoadLive}
+      liveStatus={liveStatus}
+      // ★ NOT manifest input properties — a grid customizer cannot have any (see the
+      // manifest). This is the compile-time config from customizers/config.ts, exposed here
+      // so you can find the right column list before hard-coding it and redeploying.
+      fields={[
+        {
+          kind: 'text',
+          label: 'Progress columns (config.PROGRESS_COLUMNS)',
+          placeholder: 'dvk_percentcomplete',
+          value: progressColumns,
+          onChange: setProgressColumns,
+        },
+      ]}
+    >
+      <MockGrid columns={columns} rows={rows} overrides={overrides} />
+    </HarnessShell>
+  );
+};
+
+ReactDOM.render(<Harness />, document.getElementById('root'));

package/templates/grid-customizer/dev/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/grid-customizer/env.local.example

@@ -0,0 +1,24 @@
+# Live-org dev harness config. Copy to `.env.local` (gitignored) and fill in your org.
+#
+#   cp env.local.example .env.local
+#   az login
+#   npm run dev          # http://localhost:8182
+#
+# `az login` alone is enough: the Vite dev server acquires the bearer token in-process and
+# refreshes it before expiry. DYNAMICS_TOKEN below is only an optional static fallback.
+
+# The ONLY var exposed to the browser bundle. Setting it enables the harness "Live" toggle;
+# leave it blank to run against mock data only.
+VITE_DYNAMICS_URL=
+
+# Optional. Set for a CDX / cross-tenant org — passed to `az --tenant`.
+DYNAMICS_TENANT=
+
+# Optional static token fallback, used only if the in-process `az` acquisition fails.
+# ★ NO `VITE_` PREFIX, deliberately: a VITE_-prefixed var is inlined into the client bundle,
+# which would ship your bearer token to the browser. Server-side only.
+#
+# ★ Do NOT populate this with the workspace's `msft/04-dynamics/scripts/get-token.sh` — its
+# detect_env_prefix writes REACT_APP_/VITE_-prefixed names, and this harness looks up a bare
+# `DYNAMICS_TOKEN`. Use `npm run auth:token` (the pcf-dev-token bin) instead.
+DYNAMICS_TOKEN=

package/templates/grid-customizer/eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": { "jsx": true }
+  },
+  "env": { "browser": true, "es2021": true },
+  "ignorePatterns": ["out/**", "node_modules/**", "**/generated/**"]
+}

package/templates/grid-customizer/featureconfig.json

@@ -0,0 +1,3 @@
+{
+  "pcfReactPlatformLibraries": "on"
+}

package/templates/grid-customizer/gitignore

@@ -1,4 +1,7 @@
 node_modules/
+out/
 dist/
+generated/
 *.log
 .env
+.env.local

package/templates/grid-customizer/package.json

@@ -1,25 +1,39 @@
 {
   "name": "{{projectName}}",
   "version": "1.0.0",
-  "description": "{{componentName}} — Dynamics 365 editable-grid customizer (Fluent v9)",
-  "private": true,
+  "description": "{{componentName}} — Power Apps OneGrid cell-renderer customizer (PCF, Fluent v8)",
+  "_comment_versions": "react/react-dom are pinned EXACTLY to 16.14.0 and @fluentui/react to 8.121.1 because this is a control-type=\"virtual\" control: both are externalised to the platform globals Reactv16 / FluentUIReactv81211, so the compiled-against version MUST equal the served version. Measured live 2026-08-02 on orge2e285aa: the model-driven host serves React 17.0.2 under the Reactv16 alias and defines NO Reactv18. Fluent 8.121.1 AND 9.68.0 (FluentUIReactv940) are both served, but a customizer's cells are rendered inside Microsoft's v8 OneGrid tree — see the manifest for why that makes v8 the right contract here.",
   "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack --mode development --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts,.tsx"
+    "build": "pcf-scripts build",
+    "clean": "pcf-scripts clean",
+    "rebuild": "pcf-scripts rebuild",
+    "start": "pcf-scripts start",
+    "refreshTypes": "pcf-scripts refreshTypes",
+    "dev": "vite --config vite.config.ts",
+    "dev:token": "npm run auth:token && npm run dev",
+    "auth:token": "pcf-dev-token",
+    "typecheck:dev": "tsc -p tsconfig.dev.json --noEmit",
+    "harness:check": "npm run typecheck:dev && vite build --config vite.config.ts"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@fluentui/react-components": "^9.46.2"
+    "@fluentui/react": "8.121.1",
+    "@types/powerapps-component-framework": "^1.3.18",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4"
-  }
+    "@dataverse-kit/pcf-dev-harness": "^0.2.0",
+    "@types/node": "^18.16.9",
+    "@types/react": "^16.14.34",
+    "@types/react-dom": "^16.9.17",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "pcf-scripts": "^1",
+    "pcf-start": "^1",
+    "typescript": "^5.3.0",
+    "vite": "^5.4.0"
+  },
+  "browserslist": [
+    "last 2 versions"
+  ]
 }

package/templates/grid-customizer/pcfconfig.json

@@ -0,0 +1,3 @@
+{
+  "outDir": "./out/controls"
+}

package/templates/grid-customizer/tsconfig.dev.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "//": [
+    "★ `exclude` is INHERITED through `extends`, so it MUST be overridden here — otherwise",
+    "dev/ stays excluded from its own project, `include` resolves to nothing, and",
+    "`npm run typecheck:dev` passes while checking zero files: a green gate gating nothing.",
+    "dev/main.tsx imports the real cellRendererOverrides, so this also typechecks the",
+    "customizer against the grid contract."
+  ],
+  "exclude": ["node_modules", "out"],
+  "include": ["dev", "vite.config.ts"]
+}

package/templates/grid-customizer/tsconfig.json

@@ -1,15 +1,22 @@
 {
+  "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
   "compilerOptions": {
-    "target": "ES2018",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "jsx": "react-jsx",
-    "strict": true,
+    "typeRoots": ["node_modules/@types"],
+    "jsx": "react",
     "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "declaration": false,
-    "lib": ["DOM", "DOM.Iterable", "ES2018"]
+    "experimentalDecorators": true,
+    "skipLibCheck": true
   },
-  "include": ["src"]
+  "//": [
+    "★ `exclude` REPLACES the base's [\"./node_modules\"] — node_modules MUST be re-listed here.",
+    "pcf-scripts runs ts-loader in full (non-transpileOnly) mode, and ts-loader seeds its file",
+    "list from EVERY file the tsconfig resolves — not just what webpack reaches from the entry.",
+    "So without this exclude the Vite harness under dev/ would be typechecked as part of the",
+    "control build and could fail it. dev/ has its own project: tsconfig.dev.json.",
+    "",
+    "`jsx: react` (classic) rather than `react-jsx`: the automatic runtime emits imports of",
+    "`react/jsx-runtime`, which does not exist in React 16 — the version this control is pinned",
+    "to so it matches the platform's Reactv16 global."
+  ],
+  "exclude": ["node_modules", "out", "dev", "vite.config.ts"]
 }

package/templates/grid-customizer/vite.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
+import { dataverseProxy } from '@dataverse-kit/pcf-dev-harness/node';
+
+/**
+ * Live-org dev harness for {{componentName}} — `npm run dev` → http://localhost:8182
+ *
+ * WHY THIS EXISTS, given `npm start` already runs the Microsoft PCF harness:
+ * a grid customizer renders NOTHING of its own. `pcf-scripts start` will load this control
+ * happily and show an empty canvas, because the thing being customized — Microsoft's
+ * PowerAppsOneGrid — is not present in that harness and never calls the overrides. So the
+ * stock harness can tell you the control instantiates, and nothing else.
+ *
+ * `dev/harness/MockGrid.tsx` fills that gap: a minimal grid that calls the SAME
+ * `cellRendererOverrides` map, with the same `(props, params)` arguments and the same
+ * fall-through-on-undefined rule as OneGrid. Two data sources (see `dev/main.tsx`):
+ *   - Mock — a hard-coded recordset covering each overridden data type. Needs no org.
+ *   - Live — real rows AND real column data types from Dataverse metadata, through the
+ *            same-origin `/api/data` proxy. Enabled when VITE_DYNAMICS_URL is set.
+ *
+ * The proxy and its in-process Azure-CLI token refresh come from
+ * `@dataverse-kit/pcf-dev-harness/node`: the bearer token is injected SERVER-SIDE and never
+ * reaches the browser. `az login` + `npm run dev` is enough — `npm run auth:token` only
+ * writes an optional static fallback.
+ */
+export default defineConfig(({ mode }) => {
+  // Read .env* from the PROJECT root (__dirname), not `root: 'dev'`. The empty prefix loads
+  // every var server-side (URL + tenant + any static token); `envPrefix` below still limits
+  // what can reach the client bundle.
+  const env = loadEnv(mode, __dirname, '');
+  const live = dataverseProxy({
+    dynamicsUrl: env.VITE_DYNAMICS_URL || '',
+    tenant: env.DYNAMICS_TENANT,
+    // Array: `.env.local` is the documented file, `.env` is tolerated as a fallback so a
+    // token written by a different tool still works. First file defining DYNAMICS_TOKEN wins.
+    envFile: [path.resolve(__dirname, '.env.local'), path.resolve(__dirname, '.env')],
+    pluginName: '{{componentName}}-live-token',
+  });
+
+  return {
+    root: 'dev',
+    // .env* live at the project root, not the `dev` root, so client code still sees
+    // import.meta.env.VITE_DYNAMICS_URL (which gates Live mode).
+    envDir: __dirname,
+    // SECURITY: the bearer token is acquired server-side by dataverseProxy and is never put
+    // in a VITE_-prefixed var, so Vite cannot inline it into the client bundle. envPrefix
+    // narrows client exposure to VITE_DYNAMICS_URL alone; the static fallback DYNAMICS_TOKEN
+    // is deliberately unprefixed for the same reason.
+    envPrefix: 'VITE_DYNAMICS_URL',
+    // jsxRuntime: 'classic' — the automatic runtime emits `react/jsx-runtime`, which does not
+    // exist in React 16. This control is pinned to 16.14.0 to match the platform's Reactv16
+    // global, and tsconfig sets `"jsx": "react"` (classic) for the same reason.
+    plugins: [react({ jsxRuntime: 'classic' }), live.plugin],
+    server: {
+      // 8182, because `pcf-scripts start` owns 8181 — the two harnesses can run side by side.
+      // strictPort so a clash fails loudly instead of silently moving to another port.
+      port: 8182,
+      strictPort: true,
+      open: true,
+      proxy: live.proxy,
+    },
+  };
+});

package/templates/grid-customizer/{{componentName}}/ControlManifest.Input.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <control namespace="{{namespace}}" constructor="{{componentName}}" version="1.0.0" display-name-key="{{namespace}}_{{componentName}}" description-key="{{namespace}}_{{componentName}}_Desc" control-type="virtual">
+    <!--
+      ★ A GRID CUSTOMIZER IS NOT A GRID. It renders nothing of its own.
+
+      It is bound to Microsoft's PowerAppsOneGrid via that grid's
+      `GridCustomizerControlFullName` parameter. On init the platform hands it an event
+      name through the BOUND `EventName` property below; the control answers by calling
+      `context.factory.fireEvent(eventName, customizer)` with an object of cell renderer /
+      editor overrides. OneGrid then calls those overrides while painting its own cells.
+
+      Consequences that shape this whole template:
+        • `EventName` is the ONLY property. It must be `usage="bound"` and `required="true"`.
+        • `updateView` returns an empty Fragment — see index.ts.
+        • ★ A customizer CANNOT receive maker-set `usage="input"` properties. The grid's
+          "Customizer control" field references this control by NAME only, with nowhere to
+          pass a value, so any input property is `undefined` at runtime — and reading `.raw`
+          off it throws inside init, which the host SWALLOWS (you get a silently missing
+          customizer, not an error). Configure via customizers/config.ts, or read a Dataverse
+          environment variable at runtime (see README).
+    -->
+    <property name="EventName" display-name-key="EventName" description-key="EventName_Desc" of-type="SingleLine.Text" usage="bound" required="true" />
+    <resources>
+      <code path="index.ts" order="1"/>
+      <!--
+        ★ These versions must EQUAL a version the PLATFORM ACTUALLY SERVES — not merely one
+        pcf-scripts accepts. pcf-scripts matches a {minVersion, maxVersion} row in its
+        PlatformLibraryVersions.json and remaps the bundle to that row's global alias, but it
+        never checks the runtime. Trusting the tool produces a green build and a dead control.
+
+        Measured on live model-driven pages (orge2e285aa, 2026-08-02):
+
+            Reactv16            = React 17.0.2   ← the alias says 16; the served React is 17.0.2
+            Reactv17            = undefined
+            Reactv18            = undefined      ← pcf-scripts HAS an 18.3.1 row; no org serves it
+            ReactDOMv16         = present
+            ReactDOMv18         = undefined
+            FluentUIReactv81211 = present        ← Fluent 8.121.1, loaded on every page
+            FluentUIReactv940   = present        ← Fluent 9.68.0 IS served (see below)
+            FluentUIReactv8290  = loaded ON DEMAND — appears only on a page hosting a control
+                                  that declares Fluent 8.29.0, which is how the injection works
+
+        16.14.0, not 17.0.2, is deliberate: the model-driven host serves 17.0.2 but the canvas
+        host serves 16.14.0, so 16.14.0 is the floor both satisfy.
+
+        ★ WHY v8 AND NOT v9, given the platform serves both. A customizer's elements are
+        rendered by OneGrid INSIDE OneGrid's own React tree, and OneGrid is Fluent v8. A v8
+        cell inherits the host's theme for free. A v9 cell would need its own <FluentProvider>
+        wrapper per cell to get Griffel styles + tokens, and would then be themed
+        independently of the grid it sits in. v8 is the contract here.
+
+        A virtual control CANNOT bundle its own React: it returns a ReactElement that the
+        PLATFORM renders with the PLATFORM's React, so a second React instance breaks it.
+        That is why react/react-dom and @fluentui/react are pinned EXACTLY in package.json to
+        the versions declared here — compiled-against must equal served.
+      -->
+      <platform-library name="React" version="16.14.0" />
+      <platform-library name="Fluent" version="8.121.1" />
+      <resx path="strings/{{componentName}}.1033.resx" version="1.0.0" />
+    </resources>
+  </control>
+</manifest>

package/templates/grid-customizer/{{componentName}}/customizers/CellEditorOverrides.tsx

@@ -0,0 +1,38 @@
+import type { CellEditorOverrides } from '../types';
+
+/**
+ * Cell EDITOR overrides — what a cell becomes when the user starts editing it.
+ *
+ * Empty by default: OneGrid's built-in editors already handle every column type correctly,
+ * including the lookup search and option-set pickers that are genuinely hard to reimplement.
+ * Override only where the default is wrong for your data.
+ *
+ * The keys and the fall-through rule are identical to `CellRendererOverrides`: key by
+ * `ColumnDataType`, narrow to a column with `editorParams.colDefs[editorParams.columnIndex]`,
+ * and return `undefined` to keep the platform editor.
+ *
+ * A worked example — clamp a percentage column to 0–100:
+ *
+ * ```tsx
+ * import * as React from 'react';
+ * import { SpinButton } from '@fluentui/react';
+ *
+ * export const cellEditorOverrides: CellEditorOverrides = {
+ *   Decimal: (defaultProps, editorParams) => {
+ *     const name = editorParams.colDefs[editorParams.columnIndex]?.name;
+ *     if (name !== 'dvk_percentcomplete') return undefined;
+ *     return (
+ *       <SpinButton
+ *         min={0}
+ *         max={100}
+ *         step={5}
+ *         defaultValue={String(defaultProps.value ?? 0)}
+ *         // Commit through onChange; the grid writes the value back to the record.
+ *         onChange={(_e, v) => defaultProps.onChange(Number(v ?? 0))}
+ *       />
+ *     );
+ *   },
+ * };
+ * ```
+ */
+export const cellEditorOverrides: CellEditorOverrides = {};