@khester/create-dynamics-app 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khester/create-dynamics-app",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "license": "MIT",
   "description": "Unified CLI to scaffold Dynamics 365 / Power Platform artifacts",
   "main": "dist/index.js",
@@ -27,7 +27,7 @@
     "check:published-templates": "node scripts/check-published-template-drift.mjs"
   },
   "dependencies": {
-    "@dataverse-kit/export-engine": "^1.38.3",
+    "@dataverse-kit/export-engine": "^1.38.6",
     "@khester/dynamics-ui-components": "^1.0.0",
     "chalk": "^5.3.0",
     "commander": "^11.1.0",

package/templates/starter-page/_variants/App.dashboard.v9.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FluentProvider, IdPrefixProvider, Text } from '@fluentui/react-components';
+import { FluentProvider, IdPrefixProvider, Text, tokens } from '@fluentui/react-components';
 import { Add20Regular, ArrowClockwise20Regular } from '@fluentui/react-icons';
 import {
   FormSurface,
@@ -44,7 +44,11 @@ export const App: React.FC = () => {
 
   return (
     <IdPrefixProvider value="{{idPrefix}}-">
-      <FluentProvider theme={dynamicsCeTheme}>
+      {/* The page canvas. FluentProvider paints colorNeutralBackground1 (white) and FormSurface look="ce"
+          paints nothing, so the Dynamics page grey (colorNeutralBackground2, #fafafa measured) is set
+          here, full height. minHeight 100vh relies on `body { margin: 0 }` in public/index.html: host
+          this bundle in your own HTML without that reset and the page overflows by 16px. */}
+      <FluentProvider theme={dynamicsCeTheme} style={{ minHeight: '100vh', backgroundColor: tokens.colorNeutralBackground2 }}>
         <FormSurface look="ce">
           <CommandSurface look="ce" items={[{ id: 'refresh', label: 'Refresh', icon: <ArrowClockwise20Regular /> }]} />
           <div style={{ padding: BODY_PADDING }}>

package/templates/starter-page/_variants/App.form.v9.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FluentProvider, IdPrefixProvider, Input } from '@fluentui/react-components';
+import { FluentProvider, IdPrefixProvider, Input, tokens } from '@fluentui/react-components';
 import { Save20Regular, Dismiss20Regular } from '@fluentui/react-icons';
 import {
   FormSurface,
@@ -46,7 +46,11 @@ export const App: React.FC = () => {
     // IdPrefixProvider: one per Fluent v9 root, so this page's ids never collide with another v9
     // root on the same form/page (and anything it portals keeps its theme).
     <IdPrefixProvider value="{{idPrefix}}-">
-      <FluentProvider theme={dynamicsCeTheme}>
+      {/* The page canvas. FluentProvider paints colorNeutralBackground1 (white) and FormSurface look="ce"
+          paints nothing, so the Dynamics page grey (colorNeutralBackground2, #fafafa measured) is set
+          here, full height. minHeight 100vh relies on `body { margin: 0 }` in public/index.html: host
+          this bundle in your own HTML without that reset and the page overflows by 16px. */}
+      <FluentProvider theme={dynamicsCeTheme} style={{ minHeight: '100vh', backgroundColor: tokens.colorNeutralBackground2 }}>
         <FormSurface look="ce">
           <CommandSurface
             look="ce"

package/templates/starter-page/_variants/App.master-detail.v9.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FluentProvider, IdPrefixProvider, Input, Text } from '@fluentui/react-components';
+import { FluentProvider, IdPrefixProvider, Input, Text, tokens } from '@fluentui/react-components';
 import { ArrowClockwise20Regular } from '@fluentui/react-icons';
 import {
   FormSurface,
@@ -40,7 +40,11 @@ export const App: React.FC = () => {
 
   return (
     <IdPrefixProvider value="{{idPrefix}}-">
-      <FluentProvider theme={dynamicsCeTheme}>
+      {/* The page canvas. FluentProvider paints colorNeutralBackground1 (white) and FormSurface look="ce"
+          paints nothing, so the Dynamics page grey (colorNeutralBackground2, #fafafa measured) is set
+          here, full height. minHeight 100vh relies on `body { margin: 0 }` in public/index.html: host
+          this bundle in your own HTML without that reset and the page overflows by 16px. */}
+      <FluentProvider theme={dynamicsCeTheme} style={{ minHeight: '100vh', backgroundColor: tokens.colorNeutralBackground2 }}>
         <FormSurface look="ce">
           <CommandSurface look="ce" items={[{ id: 'refresh', label: 'Refresh', icon: <ArrowClockwise20Regular /> }]} />
           <div style={{ padding: BODY_PADDING }}>

package/templates/starter-page/_variants/App.panel.v9.tsx

@@ -10,6 +10,7 @@ import {
   TableHeaderCell,
   TableBody,
   TableCell,
+  tokens,
 } from '@fluentui/react-components';
 import { Add20Regular } from '@fluentui/react-icons';
 import {
@@ -64,7 +65,11 @@ export const App: React.FC = () => {
 
   return (
     <IdPrefixProvider value="{{idPrefix}}-">
-      <FluentProvider theme={dynamicsCeTheme}>
+      {/* The page canvas. FluentProvider paints colorNeutralBackground1 (white) and FormSurface look="ce"
+          paints nothing, so the Dynamics page grey (colorNeutralBackground2, #fafafa measured) is set
+          here, full height. minHeight 100vh relies on `body { margin: 0 }` in public/index.html: host
+          this bundle in your own HTML without that reset and the page overflows by 16px. */}
+      <FluentProvider theme={dynamicsCeTheme} style={{ minHeight: '100vh', backgroundColor: tokens.colorNeutralBackground2 }}>
         <FormSurface look="ce">
           <CommandSurface look="ce" items={[{ id: 'new', label: 'New record', icon: <Add20Regular />, onClick: () => setOpen(true) }]} />
           <div style={{ padding: BODY_PADDING }}>

package/templates/starter-page/public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{{projectName}}</title>
+    <!-- A Dynamics page has no body margin; the browser default (8px) leaves a white edge. -->
+    <style>body { margin: 0; }</style>
   </head>
   <body>
     <div id="root"></div>