create-ec-app 1.2.0 → 1.4.0

package/templates/base/package.json

@@ -16,28 +16,28 @@
 		"lint:fix": "biome lint --apply ."
 	},
 	"dependencies": {
-		"@tailwindcss/vite": "^4.2.1",
-		"tailwindcss": "^4.2.1",
-		"@tanstack/react-query": "^5.90.21",
-		"@types/xrm": "^9.0.88",
-		"react": "^19.2.4",
-		"react-dom": "^19.2.4",
-		"zod": "^4.3.6",
-		"zustand": "^5.0.11"
+		"@tailwindcss/vite": "^4.3.0",
+		"tailwindcss": "^4.3.0",
+		"@tanstack/react-query": "^5.100.14",
+		"@types/xrm": "^9.0.94",
+		"react": "^19.2.7",
+		"react-dom": "^19.2.7",
+		"zod": "^4.4.3",
+		"zustand": "^5.0.14"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.39.3",
-		"@tanstack/eslint-plugin-query": "^5.91.4",
-		"@types/node": "^24.11.0",
-		"@types/react": "^19.2.14",
+		"@eslint/js": "^10.0.1",
+		"@tanstack/eslint-plugin-query": "^5.100.14",
+		"@types/node": "^24.12.4",
+		"@types/react": "^19.2.16",
 		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^5.1.4",
-		"eslint": "^9.39.3",
-		"eslint-plugin-react-hooks": "^7.0.1",
+		"@vitejs/plugin-react": "^6.0.2",
+		"eslint": "^10.4.1",
+		"eslint-plugin-react-hooks": "^7.1.1",
 		"eslint-plugin-react-refresh": "^0.5.2",
-		"globals": "^16.5.0",
-		"typescript": "~5.9.3",
-		"typescript-eslint": "^8.56.1",
-		"vite": "^7.3.1"
+		"globals": "^17.6.0",
+		"typescript": "~6.0.3",
+		"typescript-eslint": "^8.60.1",
+		"vite": "^8.0.16"
 	}
 }

package/templates/base/src/App.tsx

@@ -2,7 +2,7 @@ import "./App.css";
 
 function App() {
 	return (
-		<div className="flex flex-col h-screen items-center justify-center">
+		<div className="ec:flex ec:flex-col ec:h-screen ec:items-center ec:justify-center">
 			<p>Hello, world!</p>
 		</div>
 	);

package/templates/base/src/index.css

@@ -1,3 +1,6 @@
-@import "tailwindcss";
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme) prefix(ec);
+@import "tailwindcss/utilities.css" layer(utilities) prefix(ec);
 
 @custom-variant hover (&:hover);

package/templates/base/src/main.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import "./index.css";
 import App from "./App.tsx";
+import { EcAppShell } from "./runtime/EcAppShell.tsx";
 
 const queryClient = new QueryClient({
 	defaultOptions: {
@@ -23,7 +24,9 @@ const root = createRoot(document.getElementById("root")!);
 root.render(
 	<StrictMode>
 		<QueryClientProvider client={queryClient}>
-			<App />
+			<EcAppShell>
+				<App />
+			</EcAppShell>
 		</QueryClientProvider>
 	</StrictMode>
 );

package/templates/base/src/runtime/EcAppShell.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export const EC_APP_SCOPE_CLASS = "ec-app";
+export const EC_APP_ID = "{{APP_NAME}}";
+export const EC_PCF_SCOPE_CLASS = "ec-pcf-shell-control";
+
+const EcPortalContainerContext = React.createContext<HTMLElement | null>(null);
+
+export function useEcPortalContainer() {
+	return React.useContext(EcPortalContainerContext);
+}
+
+export function EcAppShell({ children }: { children: React.ReactNode }) {
+	const [portalContainer, setPortalContainer] =
+		React.useState<HTMLDivElement | null>(null);
+
+	return (
+		<div
+			className={EC_APP_SCOPE_CLASS}
+			data-ec-app-id={EC_APP_ID}
+			data-ec-app-root=""
+		>
+			<EcPortalContainerContext.Provider value={portalContainer}>
+				{children}
+				<div data-ec-portal-root="" ref={setPortalContainer} />
+			</EcPortalContainerContext.Provider>
+		</div>
+	);
+}

package/templates/base/tsconfig.app.json

@@ -22,7 +22,6 @@
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedSideEffectImports": true,
 
-		"baseUrl": ".",
 		"paths": {
 			"@/*": ["./src/*"]
 		}

package/templates/base/tsconfig.json

@@ -9,11 +9,10 @@
         }
     ],
     "compilerOptions": {
-        "baseUrl": ".",
         "paths": {
             "@/*": [
                 "./src/*"
             ]
         }
     }
-}
+}

package/templates/pcf/base/README.md

@@ -21,3 +21,16 @@ npm run build
 - The wrapper imports `src/App` directly and reuses the built `dist/main.css`.
 - Regenerate this folder after rebuilding the webresource whenever the app changes.
 - The project includes both `pcf-scripts` build support and a `.pcfproj` for Dataverse solution packaging flows.
+
+## CSS scoping
+
+This PCF control renders the app inside `.ec-app` and keeps the PCF host container class `.ec-pcf-shell-control`.
+
+Generated Tailwind/shadcn styles are scoped for embeddability:
+
+- Tailwind Preflight is not imported globally.
+- Tailwind utilities use the `ec:` prefix.
+- shadcn theme variables are defined under `.ec-app`.
+- Radix/shadcn portals render into the app-local portal root where supported.
+
+If this PCF was generated from an older app whose `dist/main.css` contains global Tailwind/shadcn styles, those styles may still leak into the model-driven app form. Regenerate or migrate the source app to the scoped CSS template.

package/templates/pcf/base/index.ts

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import App from "{{PROJECT_APP_IMPORT}}";
 import "{{PROJECT_CSS_IMPORT}}";
+import { EcAppShell } from "{{PROJECT_EC_APP_SHELL_IMPORT}}";
 import type { IInputs, IOutputs } from "./control/generated/ManifestTypes";
 import type {
 	PcfRuntimeContext,
@@ -112,6 +113,7 @@ export class {{PCF_CONSTRUCTOR}}
 		container: HTMLDivElement,
 	): void {
 		container.classList.add("ec-pcf-shell-control");
+		container.dataset.ecPcfControl = "{{PCF_CONSTRUCTOR}}";
 		this.runtime = createRuntime(context);
 		this.root = createRoot(container);
 		this.render();
@@ -142,9 +144,13 @@ export class {{PCF_CONSTRUCTOR}}
 				StrictMode,
 				null,
 				React.createElement(
-					QueryClientProvider,
-					{ client: this.queryClient },
-					React.createElement(App, { runtime: this.runtime }),
+					EcAppShell,
+					null,
+					React.createElement(
+						QueryClientProvider,
+						{ client: this.queryClient },
+						React.createElement(App, { runtime: this.runtime }),
+					),
 				),
 			),
 		);