@khester/create-dynamics-app 3.0.0 → 3.1.0

package/templates/pcf-dataset/tsconfig.json

@@ -4,6 +4,15 @@
     "typeRoots": ["node_modules/@types"],
     "jsx": "react",
     "esModuleInterop": true,
-    "experimentalDecorators": true
-  }
+    "experimentalDecorators": true,
+    "skipLibCheck": true
+  },
+  "//": [
+    "★ `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."
+  ],
+  "exclude": ["node_modules", "out", "dev", "vite.config.ts"]
 }

package/templates/pcf-dataset/vite.config.ts

@@ -0,0 +1,63 @@
+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:
+ * `pcf-start` hard-codes React 16 in its harness page and never loads its own
+ * `lib/react_18_3_1.js`, so a control-type="virtual" control declaring React 18.3.1 — which
+ * this one is — externalises a `Reactv18` global that the harness never defines, and shows
+ * "Error loading control". Verified against pcf-start 1.51.1 (latest) on 2026-08-01.
+ * So for THIS artifact the Vite harness is the working local loop, not a convenience.
+ *
+ * Two data sources (see `dev/main.tsx`):
+ *   - Mock — a hard-coded recordset. Default; needs no org.
+ *   - Live — real rows from Dataverse through the same-origin `/api/data` proxy. Enabled
+ *            only when VITE_DYNAMICS_URL is set in `.env.local`.
+ *
+ * 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/pcf-dataset/{{componentName}}/ControlManifest.Input.xml

@@ -0,0 +1,45 @@
+<?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">
+    <data-set name="dataset" display-name-key="Dataset_Display_Key">
+    </data-set>
+    <resources>
+      <code path="index.ts" order="1"/>
+      <!--
+        ★ These versions must EQUAL a version the PLATFORM ACTUALLY SERVES — not merely one
+        pcf-scripts accepts. The two are NOT the same list, and that gap is what kills controls:
+        pcf-scripts matches a {minVersion, maxVersion} row and remaps the bundle to that row's
+        alias, but never rewrites this file and never checks the runtime.
+
+        Measured on a live model-driven page (orge2e285aa, 2026-08-01) — these are the globals
+        the host defines:
+
+            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; the org has no React 18
+            ReactDOMv16         = present
+            ReactDOMv18         = undefined
+            FluentUIReactv81211 = present        ← Fluent 8.121.1
+            FluentUIReactv829   = undefined      ← 8.29.0 is NOT served either
+
+        This control previously declared React 18.3.1 (because pcf-scripts allows it). It built
+        green and then failed with "An error has occurred." in the org, because it externalised
+        a `Reactv18` global that does not exist. Now 16.14.0 — matching Microsoft's published
+        table ("allowed 16.14.0; version loaded: 17.0.2 (Model), 16.14.0 (Canvas)") and the
+        only React alias the runtime supplies. It is also what the canvas runtime serves, so
+        this control now works in a model-driven custom page too.
+
+        A virtual control CANNOT bundle its own React as a workaround: it returns a ReactElement
+        that the platform renders with the platform's React, so two React instances would break.
+        That is why grid-kit's peer was widened to >=16.14.0 <19 rather than pinning React 18
+        here. See src/__tests__/registry.test.ts.
+      -->
+      <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>
+    <feature-usage>
+      <uses-feature name="Utility" required="true" />
+    </feature-usage>
+  </control>
+</manifest>

package/templates/pcf-dataset/{{componentName}}/{{componentName}}App.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { initializeIcons } from '@fluentui/react/lib/Icons';
+import { ReadOnlyGrid, createCellRegistry } from '@dataverse-kit/grid-kit';
+import type { ColumnDef, GridSortState } from '@dataverse-kit/grid-kit';
+
+// Initialize Fluent UI icons — the grid toolbar / column-chooser / filter use them.
+// Lives here (not in the PCF adapter) so BOTH hosts get it: the control and the dev harness.
+initializeIcons();
+
+/** A grid row. `key` is the record id and is always present. */
+export interface Row extends Record<string, unknown> {
+    key: string;
+}
+
+export interface I{{componentName}}AppProps {
+    items: Row[];
+    columns: ColumnDef<Row>[];
+}
+
+/**
+ * HOST-AGNOSTIC grid app — plain props, no PCF and no Xrm.
+ *
+ * That is the whole point of the split: `{{componentName}}Component.tsx` adapts the PCF
+ * dataset into `items` + `columns`, and `dev/main.tsx` supplies the same shape from mock
+ * data or a live Dataverse fetch. One component, two hosts, no duplicated grid logic.
+ */
+export const {{componentName}}App: React.FC<I{{componentName}}AppProps> = ({ items, columns }) => {
+    const registry = React.useMemo(() => createCellRegistry(), []);
+    const [search, setSearch] = React.useState('');
+    const [sort, setSort] = React.useState<GridSortState | undefined>(undefined);
+
+    // grid-kit's toolbar `onSearch` only reports the term — the host owns filtering.
+    // Substring-match across every column's formatted value.
+    const q = search.trim().toLowerCase();
+    const filtered = q
+        ? items.filter((row) =>
+              columns.some((c) => String(row[c.fieldName] ?? '').toLowerCase().includes(q)),
+          )
+        : items;
+
+    // grid-kit sort is controlled — `onSortChange` reports the header click; the host
+    // reorders nothing. Sort the (filtered) rows by the formatted string.
+    const sorted = sort
+        ? [...filtered].sort(
+              (a, b) =>
+                  String(a[sort.fieldName] ?? '').localeCompare(String(b[sort.fieldName] ?? '')) *
+                  (sort.direction === 'desc' ? -1 : 1),
+          )
+        : filtered;
+
+    return (
+        <ReadOnlyGrid<Row>
+            items={sorted}
+            columns={columns}
+            registry={registry}
+            getKey={(r) => r.key}
+            sort={sort}
+            onSortChange={(fieldName, direction) => setSort({ fieldName, direction })}
+            columnChooser
+            filterBuilder
+            toolbar={{ showSearch: true, searchPlaceholder: 'Search', onSearch: setSearch }}
+        />
+    );
+};

package/templates/pcf-dataset/{{{componentName}}Component.tsx → {{componentName}}/{{componentName}}Component.tsx}

@@ -1,24 +1,18 @@
 import * as React from 'react';
-import { initializeIcons } from '@fluentui/react/lib/Icons';
-import { ReadOnlyGrid, createCellRegistry } from '@dataverse-kit/grid-kit';
-import type { ColumnDef, GridSortState } from '@dataverse-kit/grid-kit';
-
-// Initialize Fluent UI icons — the grid toolbar / column-chooser / filter use them.
-initializeIcons();
+import type { ColumnDef } from '@dataverse-kit/grid-kit';
+import { {{componentName}}App, type Row } from './{{componentName}}App';
 
 export interface I{{componentName}}ComponentProps {
     dataset: ComponentFramework.PropertyTypes.DataSet;
 }
 
-interface Row extends Record<string, unknown> {
-    key: string;
-}
-
+/**
+ * THIN PCF ADAPTER — maps the bound dataset onto the host-agnostic `<{{componentName}}App>`.
+ *
+ * All grid behaviour (search, sort, toolbar, column chooser) lives in the App so the dev
+ * harness renders the exact same component. Keep this file to dataset→props mapping only.
+ */
 export const {{componentName}}Component: React.FC<I{{componentName}}ComponentProps> = ({ dataset }) => {
-    const registry = React.useMemo(() => createCellRegistry(), []);
-    const [search, setSearch] = React.useState('');
-    const [sort, setSort] = React.useState<GridSortState | undefined>(undefined);
-
     // Map the bound dataset's columns → grid-kit ColumnDef[]. Every column renders as
     // `text` (the formatted Dataverse value), so client sort/filter is lexical on the
     // displayed string. For type-aware cells + correct numeric/date ordering, map each
@@ -54,36 +48,5 @@ export const {{componentName}}Component: React.FC<I{{componentName}}ComponentPro
         return row;
     });
 
-    // grid-kit's toolbar `onSearch` only reports the term — the host owns filtering.
-    // Substring-match across every column's formatted value.
-    const q = search.trim().toLowerCase();
-    const filtered = q
-        ? items.filter((row) =>
-              columns.some((c) => String(row[c.fieldName] ?? '').toLowerCase().includes(q)),
-          )
-        : items;
-
-    // grid-kit sort is controlled — `onSortChange` reports the header click; the host
-    // reorders nothing. Sort the (filtered) rows by the formatted string.
-    const sorted = sort
-        ? [...filtered].sort(
-              (a, b) =>
-                  String(a[sort.fieldName] ?? '').localeCompare(String(b[sort.fieldName] ?? '')) *
-                  (sort.direction === 'desc' ? -1 : 1),
-          )
-        : filtered;
-
-    return (
-        <ReadOnlyGrid<Row>
-            items={sorted}
-            columns={columns}
-            registry={registry}
-            getKey={(r) => r.key}
-            sort={sort}
-            onSortChange={(fieldName, direction) => setSort({ fieldName, direction })}
-            columnChooser
-            filterBuilder
-            toolbar={{ showSearch: true, searchPlaceholder: 'Search', onSearch: setSearch }}
-        />
-    );
+    return <{{componentName}}App items={items} columns={columns} />;
 };

package/templates/pcf-field/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/pcf-field/package.json

@@ -20,6 +20,7 @@
     "@types/node": "^18.16.9",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.17",
+    "@typescript-eslint/parser": "^6.21.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "pcf-scripts": "^1",
     "pcf-start": "^1",

package/templates/pcf-field/pcfconfig.json

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

package/templates/pcf-field/{{componentName}}/ControlManifest.Input.xml

@@ -0,0 +1,42 @@
+<?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="standard">
+    <property name="value" display-name-key="Value" description-key="Value_Desc" of-type="{{propertyType}}" usage="bound" required="true" />
+    <property name="placeholder" display-name-key="Placeholder" description-key="Placeholder_Desc" of-type="SingleLine.Text" usage="input" required="false" />
+    <property name="disabled" display-name-key="Disabled" description-key="Disabled_Desc" of-type="TwoOptions" usage="input" required="false" default-value="false" />
+    <resources>
+      <code path="index.ts" order="1"/>
+      <!--
+        ★ DELIBERATELY NO <platform-library> HERE. This is a control-type="standard" control.
+
+        Microsoft scopes <platform-library> to "React controls & platform libraries", and
+        defines that feature as control-type="virtual" PLUS the platform-library children —
+        one feature, not two. Declaring them on a standard control is a half-state that
+        builds green and dies at runtime:
+
+          - With pcfReactPlatformLibraries at its shipped default ("off"),
+            platformLibrariesHandler externalises `react` but NOT `react-dom`. So the bundle
+            ships ReactDOM 16.14 wired to a platform React the model-driven host actually
+            loads as 17.0.2 — a cross-major ReactSharedInternals/event-system mismatch.
+          - Turning the flag ON instead externalises react-dom to the `ReactDOMv16` global,
+            which the platform only contracts to supply for VIRTUAL controls. Strictly worse.
+
+        So: bundle our own React 16.14 + Fluent 8. Nothing is externalised, therefore
+        installed == compiled == runtime and no version skew is possible. The bundle grows
+        (~1-1.5 MB minified); the 5 MB cap is enforced in production mode only.
+
+        If this control is ever converted to control-type="virtual", the versions declared
+        must EQUAL a served platform version, not merely fall inside pcf-scripts' matched
+        range — an in-range-but-unequal version builds green and cannot be resolved at
+        runtime ("Error loading control" in every host). Live-diagnosed 2026-07-26 on
+        host-swap: React 18.2.0 + Fluent 8.115.6, 15/15 build gates green, loaded nowhere.
+        Supported then: React 16.14.0 | 18.3.1; @fluentui/react 8.29.0 | 8.121.1;
+        @fluentui/react-components >=9.4.0 <=9.46.2. See src/__tests__/registry.test.ts.
+      -->
+      <resx path="strings/{{componentName}}.1033.resx" version="1.0.0" />
+    </resources>
+    <feature-usage>
+      <uses-feature name="Utility" required="true" />
+    </feature-usage>
+  </control>
+</manifest>

package/templates/power-pages-island/README.md

@@ -79,3 +79,15 @@ This starter is **build-verified** (`tsc` + webpack bundle) and **localhost-mock
 (`npm run dev`). Live behavior against a real traditional portal (the web-file upload, the Liquid
 snippet, and `PortalSeamService` against live `/_api/`) is the deploy step above — verify it on your
 own portal.
+
+> **The artifact is live-verified (2026-07-26).** This template was deployed to a real traditional
+> (Liquid) Power Pages portal on the **enhanced data model** (`mspp_*` / `powerpagecomponent`): the
+> bundle mounted into a Liquid-placed `[data-dvkit-island]` node and `PortalSeamService` returned
+> **200** from `GET /_api/accounts?fetchXml=…` (the FetchXML read path the MS code-site scaffolder
+> generates none of), rendering live accounts in the DetailsList.
+>
+> **Deploy tip for enhanced-data-model portals:** after uploading the web file + placing the snippet,
+> run **⟳ Purge Cache** (Power Platform admin center → *Resources → Power Pages sites*) — traditional
+> portals serve a precompiled snapshot, so a freshly-added web file **404s** until the cache is purged.
+> The site is private until the signed-in user is a portal contact (first Entra sign-in auto-registers
+> one + attaches the Authenticated Users role).

package/templates/power-pages-island/src/App.tsx

@@ -3,6 +3,7 @@ import type { IApiService } from "./core/services/IApiService";
 import { MockApiService } from "./core/services/MockApiService";
 import { PortalSeamService } from "@dataverse-kit/portal-api-service";
 import { Component } from "./Component";
+import { useHostWidth } from "./useHostWidth";
 
 // A Power Pages island is served from the portal origin, so a same-origin `/_api`
 // fetch is authenticated by the portal session cookie + anti-forgery token —
@@ -21,5 +22,16 @@ export const App: React.FC<{ island?: string }> = () => {
     const onLocalhost = /^(localhost|127\.0\.0\.1)$/.test(window.location.hostname);
     return onLocalhost ? new MockApiService() : new PortalSeamService();
   }, []);
-  return <Component api={api} />;
+
+  // An island is mounted into a slot on a portal page, NOT a full-page iframe, so the
+  // viewport is the whole portal and would overstate the space available. Measure the
+  // island's own box instead — portals are heavily mobile, so this matters here most.
+  const hostRef = React.useRef<HTMLDivElement>(null);
+  const width = useHostWidth(hostRef);
+
+  return (
+    <div ref={hostRef}>
+      <Component api={api} width={width} />
+    </div>
+  );
 };

package/templates/power-pages-island/src/Component.tsx

@@ -17,14 +17,33 @@ initializeIcons();
 
 /**
  * The ONE host-agnostic component. It depends on nothing but an injected
- * `IApiService` — no PCF `context`, no Xrm, no lifecycle, no bundler globals — so
- * the SAME source renders unchanged inside a PCF control and a Dynamics custom
- * page. Each host's thin wrapper builds the right `IApiService` and mounts this.
+ * `IApiService` and a plain number for its width — no PCF `context`, no Xrm, no
+ * lifecycle, no bundler globals — so the SAME source renders unchanged inside a
+ * PCF control, a web resource, and a model-driven custom page. Each host's thin
+ * wrapper builds the right `IApiService` and supplies the width.
  */
 export interface ComponentProps {
   api: IApiService;
+  /**
+   * Width available to the control, in px. Hosts that can measure it should pass it
+   * (the PCF wrapper passes `context.mode.allocatedWidth`); when omitted the layout
+   * falls back to the roomy variant.
+   *
+   * ★ Deliberately a NUMBER, not a form factor. Do NOT branch on
+   * `context.client.getFormFactor()` / `getClient()`: verified live 2026-07-25 on a
+   * physical iPhone in the native Power Apps app, a custom page reports
+   * client "Web" and formFactor 1 (Desktop). Branching on those silently gives every
+   * phone the desktop layout, and passes every test not run on a real device.
+   */
+  width?: number;
 }
 
+/**
+ * Below this the Fluent `DetailsList` stops being usable — columns collapse and
+ * horizontal scrolling takes over — so narrow hosts get a stacked card list instead.
+ */
+const NARROW_BREAKPOINT_PX = 480;
+
 const ACCOUNTS_FETCHXML = [
   '<fetch top="25">',
   '  <entity name="account">',
@@ -47,10 +66,14 @@ const COLUMNS: IColumn[] = [
   { key: "telephone1", name: "Phone", fieldName: "telephone1", minWidth: 140, isResizable: true },
 ];
 
-export const Component: React.FC<ComponentProps> = ({ api }) => {
+export const Component: React.FC<ComponentProps> = ({ api, width }) => {
   const [rows, setRows] = React.useState<AccountRow[] | null>(null);
   const [error, setError] = React.useState<string | null>(null);
 
+  // `width === undefined` means the host cannot measure itself; prefer the roomy
+  // layout rather than guessing narrow.
+  const isNarrow = width !== undefined && width < NARROW_BREAKPOINT_PX;
+
   React.useEffect(() => {
     let cancelled = false;
     api
@@ -70,12 +93,13 @@ export const Component: React.FC<ComponentProps> = ({ api }) => {
     <Stack tokens={{ childrenGap: 12 }} styles={{ root: { padding: 16 } }}>
       <Text variant="xLarge">Accounts</Text>
       <Text variant="small">
-        One host-agnostic component — the same source renders in a PCF control and a
-        Dynamics custom page; only the thin host wrapper changes.
+        One host-agnostic component — the same source renders in a PCF control, a web
+        resource and a model-driven custom page; only the thin host wrapper changes.
+        {width !== undefined && ` (${isNarrow ? "narrow" : "wide"} layout · ${width}px)`}
       </Text>
       {error && <MessageBar messageBarType={MessageBarType.error}>{error}</MessageBar>}
       {!rows && !error && <Spinner label="Loading accounts…" />}
-      {rows && (
+      {rows && !isNarrow && (
         <DetailsList
           items={rows}
           columns={COLUMNS}
@@ -84,6 +108,29 @@ export const Component: React.FC<ComponentProps> = ({ api }) => {
           selectionMode={SelectionMode.none}
         />
       )}
+      {rows && isNarrow && (
+        <Stack tokens={{ childrenGap: 8 }}>
+          {rows.map((row) => (
+            <Stack
+              key={row.accountid}
+              tokens={{ childrenGap: 2 }}
+              styles={{
+                root: {
+                  padding: 12,
+                  border: "1px solid #edebe9",
+                  borderRadius: 4,
+                  // Long account names must wrap rather than force the card wider
+                  // than the phone — the failure mode DetailsList has here.
+                  wordBreak: "break-word",
+                },
+              }}
+            >
+              <Text variant="mediumPlus">{row.name ?? "(no name)"}</Text>
+              <Text variant="small">{row.telephone1 ?? "—"}</Text>
+            </Stack>
+          ))}
+        </Stack>
+      )}
     </Stack>
   );
 };

package/templates/power-pages-island/src/useHostWidth.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+/**
+ * Width available to the component, in px, kept live as the host resizes.
+ *
+ * Two modes, because the browser hosts are not all shaped the same:
+ *
+ *  - **Pass a ref** when the component is mounted into an element on a larger page
+ *    (a Power Pages island). The viewport is then the whole portal page, which may be
+ *    far wider than the slot the island occupies, so it must measure its own box.
+ *  - **Pass nothing** when the component owns a full-page iframe (web resource /
+ *    Vite host). There the viewport *is* the control's width.
+ *
+ * The PCF host uses neither — it gets a properly scoped measurement from
+ * `context.mode.allocatedWidth` after opting in with `trackContainerResize(true)`.
+ *
+ * ★ Why measure at all rather than ask the platform what device this is: verified
+ * live 2026-07-25 on a physical iPhone in the native Power Apps app, a model-driven
+ * custom page reports `client: "Web"` and `formFactor: 1` (Desktop). Form-factor
+ * branching therefore hands every phone the desktop layout — and passes every test
+ * that is not run on a real device.
+ */
+export function useHostWidth(ref?: React.RefObject<HTMLElement | null>): number {
+  const [width, setWidth] = React.useState<number>(() =>
+    typeof window === "undefined" ? 0 : window.innerWidth,
+  );
+
+  React.useEffect(() => {
+    const el = ref?.current;
+
+    if (el && typeof ResizeObserver !== "undefined") {
+      const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) setWidth(entry.contentRect.width);
+      });
+      ro.observe(el);
+      setWidth(el.getBoundingClientRect().width);
+      return () => ro.disconnect();
+    }
+
+    // Viewport fallback: no ref, or an environment without ResizeObserver.
+    const onResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", onResize);
+    // iOS Safari does not reliably fire `resize` on rotation, so listen for both.
+    window.addEventListener("orientationchange", onResize);
+    onResize();
+    return () => {
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("orientationchange", onResize);
+    };
+  }, [ref]);
+
+  return width;
+}

package/templates/react-custom-page/tools/deploy/deploy-webresource.cjs

@@ -107,8 +107,14 @@ async function main() {
   await req("POST", "PublishXml", { ParameterXml: paramXml });
   console.log("✓ Published.");
 
-  console.log(`\nOpen it:  ${url}/WebResources/${name}`);
-  console.log("Or host it on a model-driven custom page / open via Xrm.Navigation.navigateTo.");
+  // Surfacing guidance. NOTE: this app reads window.parent.Xrm / Xrm.Page — a model-driven FORM
+  // context. It therefore needs a host that provides one. It CANNOT run in a Power Apps custom page
+  // (that is a canvasapp; Xrm.Page does not exist there), and opening the raw /WebResources/ URL
+  // standalone gives it no parent Xrm either, so ServiceFactory throws.
+  console.log(`\nSurface it via a sitemap SubArea:  $webresource:${name}`);
+  console.log("Or embed it on a model-driven form, or open it with Xrm.Navigation.navigateTo.");
+  console.log(`\nDirect URL (dev only — no parent Xrm, so production mode will fail):`);
+  console.log(`  ${url}/WebResources/${name}`);
 }
 
 main().catch((e) => {

package/templates/pcf-dataset/ControlManifest.Input.xml

@@ -1,16 +0,0 @@
-<?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">
-    <data-set name="dataset" display-name-key="Dataset_Display_Key">
-    </data-set>
-    <resources>
-      <code path="index.ts" order="1"/>
-      <platform-library name="React" version="18.2.0" />
-      <platform-library name="Fluent" version="8.115.6" />
-      <resx path="strings/{{componentName}}.1033.resx" version="1.0.0" />
-    </resources>
-    <feature-usage>
-      <uses-feature name="Utility" required="true" />
-    </feature-usage>
-  </control>
-</manifest>

package/templates/pcf-field/ControlManifest.Input.xml

@@ -1,17 +0,0 @@
-<?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="standard">
-    <property name="value" display-name-key="Value" description-key="Value_Desc" of-type="{{propertyType}}" usage="bound" required="true" />
-    <property name="placeholder" display-name-key="Placeholder" description-key="Placeholder_Desc" of-type="SingleLine.Text" usage="input" required="false" />
-    <property name="disabled" display-name-key="Disabled" description-key="Disabled_Desc" of-type="TwoOptions" usage="input" required="false" default-value="false" />
-    <resources>
-      <code path="index.ts" order="1"/>
-      <platform-library name="React" version="16.8.6" />
-      <platform-library name="Fluent" version="8.29.0" />
-      <resx path="strings/{{componentName}}.1033.resx" version="1.0.0" />
-    </resources>
-    <feature-usage>
-      <uses-feature name="Utility" required="true" />
-    </feature-usage>
-  </control>
-</manifest>