create-ec-app 1.4.0 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "create-ec-app",
-	"version": "1.4.0",
-	"description": "Unified CLI tool to create different types of EC applications: Webresource, Portal, Power Pages",
+	"version": "1.6.0",
+	"description": "Unified CLI tool to create different types of EC applications: Webresource, Portal, Power Pages, Power Apps Code Apps",
 	"bin": {
 		"create-ec-app": "./dist/index.js"
 	},
@@ -20,6 +20,8 @@
 		"tailwind",
 		"cli",
 		"powerpages",
+		"code-apps",
+		"power-apps-code-apps",
 		"portal",
 		"webresource",
 		"dynamics",
@@ -38,7 +40,8 @@
 	"type": "module",
 	"dependencies": {
 		"@clack/prompts": "^0.11.0",
-		"fs-extra": "^11.3.2"
+		"fs-extra": "^11.3.2",
+		"postcss": "^8.5.15"
 	},
 	"devDependencies": {
 		"@semantic-release/commit-analyzer": "^13.0.1",

package/scripts/check-generated-css-scope.mjs

@@ -2,60 +2,100 @@
 
 import fs from "node:fs";
 import path from "node:path";
+import postcss from "postcss";
 
-const appPath = process.argv[2];
+const pcfPath = process.argv[2];
 
-if (!appPath) {
-	console.error("Usage: node scripts/check-generated-css-scope.mjs <generated-app>");
+if (!pcfPath) {
+	console.error("Usage: node scripts/check-generated-css-scope.mjs <generated-pcf-control>");
 	process.exit(1);
 }
 
-const cssPath = path.join(path.resolve(appPath), "dist", "main.css");
+const cssPath = path.join(path.resolve(pcfPath), "pcf-scoped.css");
 
 if (!fs.existsSync(cssPath)) {
-	console.error(`Could not find ${cssPath}. Build the generated app first.`);
+	console.error(`Could not find ${cssPath}. Generate the PCF control first.`);
 	process.exit(1);
 }
 
 const css = fs.readFileSync(cssPath, "utf8");
+const root = postcss.parse(css, { from: cssPath });
+const failures = [];
 
-const forbidden = [
-	{ name: "global body rule", pattern: /(^|})\s*body\s*\{/ },
-	{
-		name: "global shadcn :root token rule",
-		pattern: /(^|})\s*:root\s*\{[^}]*--background\s*:/,
-	},
-	{
-		name: "global shadcn dark token rule",
-		pattern: /(^|})\s*\.dark\s*\{[^}]*--background\s*:/,
-	},
-	{ name: "unprefixed flex utility", pattern: /(^|})\s*\.flex\s*\{/ },
-	{ name: "unprefixed grid utility", pattern: /(^|})\s*\.grid\s*\{/ },
-	{ name: "unprefixed hidden utility", pattern: /(^|})\s*\.hidden\s*\{/ },
-	{
-		name: "unprefixed bg-background utility",
-		pattern: /(^|})\s*\.bg-background\s*\{/,
-	},
-];
-
-const required = [
-	{ name: "ec app scope", pattern: /\.ec-app\b/ },
-	{ name: "prefixed flex utility", pattern: /\.ec\\:flex\b/ },
-];
-
-const failures = [
-	...forbidden.filter((check) => check.pattern.test(css)).map((check) => check.name),
-	...required
-		.filter((check) => !check.pattern.test(css))
-		.map((check) => `missing ${check.name}`),
-];
+root.walkRules((rule) => {
+	if (!rule.nodes?.some((node) => node.type === "decl" && node.prop.startsWith("--"))) {
+		return;
+	}
+
+	for (const selector of splitSelectorList(rule.selector)) {
+		if (!selector.includes(".ec-pcf-shell-control")) {
+			failures.push(`unscoped custom-property rule: ${selector}`);
+		}
+	}
+});
+
+if (!css.includes("[data-ec-pcf-control=")) {
+	failures.push("missing PCF control data attribute scope");
+}
 
 if (failures.length > 0) {
-	console.error("CSS scope check failed:");
+	console.error("PCF CSS variable scope check failed:");
 	for (const failure of failures) {
 		console.error(`- ${failure}`);
 	}
 	process.exit(1);
 }
 
-console.log("CSS scope check passed.");
+console.log("PCF CSS variable scope check passed.");
+
+function splitSelectorList(selectorList) {
+	const selectors = [];
+	let start = 0;
+	let nesting = 0;
+	let quote = null;
+	let escaped = false;
+
+	for (let index = 0; index < selectorList.length; index += 1) {
+		const char = selectorList[index];
+
+		if (escaped) {
+			escaped = false;
+			continue;
+		}
+
+		if (char === "\\") {
+			escaped = true;
+			continue;
+		}
+
+		if (quote) {
+			if (char === quote) {
+				quote = null;
+			}
+			continue;
+		}
+
+		if (char === '"' || char === "'") {
+			quote = char;
+			continue;
+		}
+
+		if (char === "(" || char === "[") {
+			nesting += 1;
+			continue;
+		}
+
+		if (char === ")" || char === "]") {
+			nesting = Math.max(0, nesting - 1);
+			continue;
+		}
+
+		if (char === "," && nesting === 0) {
+			selectors.push(selectorList.slice(start, index).trim());
+			start = index + 1;
+		}
+	}
+
+	selectors.push(selectorList.slice(start).trim());
+	return selectors.filter(Boolean);
+}

package/templates/base/src/App.tsx

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

package/templates/base/src/index.css

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

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

@@ -1,9 +1,5 @@
 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() {
@@ -15,11 +11,7 @@ export function EcAppShell({ children }: { children: React.ReactNode }) {
 		React.useState<HTMLDivElement | null>(null);
 
 	return (
-		<div
-			className={EC_APP_SCOPE_CLASS}
-			data-ec-app-id={EC_APP_ID}
-			data-ec-app-root=""
-		>
+		<div data-ec-app-root="">
 			<EcPortalContainerContext.Provider value={portalContainer}>
 				{children}
 				<div data-ec-portal-root="" ref={setPortalContainer} />

package/templates/pcf/base/README.md

@@ -18,19 +18,14 @@ npm run build
 
 ## Notes
 
-- The wrapper imports `src/App` directly and reuses the built `dist/main.css`.
+- The wrapper imports `src/App` directly and uses generated `pcf-scoped.css` derived from the webresource build.
 - 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`.
+This PCF control renders the app inside the PCF host container class `.ec-pcf-shell-control`.
 
-Generated Tailwind/shadcn styles are scoped for embeddability:
+During PCF generation, `create-ec-app` reads the webresource's built `dist/main.css`, scopes CSS custom-property rules to this control's `.ec-pcf-shell-control[data-ec-pcf-control="{{PCF_CONSTRUCTOR}}"]` host selector, and writes the result to `pcf-scoped.css`.
 
-- 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.
+Tailwind utilities remain unprefixed, while shadcn/Tailwind theme variables are local to the generated PCF control. Radix/shadcn portals render into the app-local portal root where supported.

package/templates/targets/code-apps/README.md

@@ -0,0 +1,246 @@
+# EC Power Apps Code App
+
+React + TypeScript template for Power Apps code apps. Generated by `create-ec-app`, it keeps the EC base app structure, Tailwind setup, TanStack Query provider, and selected UI layer, then adds Microsoft Power Apps code app support through `@microsoft/power-apps` and `@microsoft/power-apps-vite`.
+
+## Features
+
+- React + TypeScript with Vite
+- Tailwind CSS
+- UI library choice: Kendo UI or shadcn/ui
+- TanStack Query provider pre-wired in `src/main.tsx`
+- Power Apps SDK dependency for code app APIs and generated connector services
+- Power Apps Vite plugin for local play URLs, Power Apps CORS support, and `base: "./"` build output
+
+## Prerequisites
+
+- Node.js LTS and npm
+- Git
+- A Power Platform environment with Power Apps code apps enabled
+- A Power Apps Premium license for users who run the code app
+
+Admins enable code apps in Power Platform admin center by opening the target environment, then Settings > Product > Features, and turning on **Power Apps code apps**.
+
+## Getting Started
+
+Install dependencies if they were not installed during scaffolding:
+
+```bash
+npm install
+```
+
+Initialize the code app metadata and authenticate against your Power Platform environment:
+
+```bash
+npx power-apps init --display-name "{{APP_NAME}}" --environment-id <environment-id> --app-url http://localhost:5173
+```
+
+You can omit the options and run `npx power-apps init` to answer the interactive prompts instead. The command creates `power.config.json`, which the Power Apps SDK, Vite plugin, and deployment commands use.
+
+This template includes `power.config.example.json` only as a reference. Do not rename it before running `npx power-apps init`; the Microsoft CLI refuses to initialize when a real `power.config.json` already exists. The generated `power.config.json` includes your environment ID, app metadata, build settings, and connection/data references. It does not contain authentication tokens, but it is environment-specific, so decide whether to commit it based on your ALM flow.
+
+## Local Development
+
+Start the app locally:
+
+```bash
+npm run dev
+```
+
+The Power Apps Vite plugin prints a **Local Play** URL. Open that URL in the same browser profile you use for your Power Platform tenant so authentication and connector calls work as expected.
+
+If browser local network access restrictions appear, allow the browser prompt for the local endpoint. For iframe embedding scenarios, Microsoft recommends adding `allow="local-network-access"` to the iframe.
+
+## Data Access
+
+Code apps should not use the Dynamics webresource `AuthService`/`token.json` pattern. In a code app, the Power Apps host manages end-user authentication, and `@microsoft/power-apps` plus generated services perform data requests through Power Platform connectors and Dataverse references.
+
+The normal flow is:
+
+1. Create or identify the connection in [Power Apps](https://make.powerapps.com).
+2. Add the data source to this project with the Power Apps CLI.
+3. Import the generated model and service files from `src/generated`.
+4. Build and push the app with `npx power-apps push`.
+
+### Connect to Dataverse
+
+After `npx power-apps init`, add a Dataverse table by logical name:
+
+```bash
+npx power-apps add-data-source --api-id dataverse --resource-name <table-logical-name>
+```
+
+Example:
+
+```bash
+npx power-apps add-data-source --api-id dataverse --resource-name account
+```
+
+The CLI updates `power.config.json` and generates typed files under `src/generated/models` and `src/generated/services`. For example, after adding Accounts you can use the generated service:
+
+```ts
+import { AccountsService } from "./generated/services/AccountsService";
+import type { Accounts } from "./generated/models/AccountsModel";
+
+export async function listAccounts() {
+	const result = await AccountsService.getAll({
+		select: ["name", "accountnumber"],
+		top: 50,
+	});
+
+	return result.data ?? [];
+}
+
+export async function createAccount(name: string) {
+	const account = { name } satisfies Partial<Accounts>;
+	const result = await AccountsService.create(
+		account as Omit<Accounts, "accountid">,
+	);
+
+	return result.data;
+}
+```
+
+For Dataverse CRUD, use the generated service methods such as `create`, `get`, `getAll`, `update`, and `delete`. Prefer `select` when reading data so the app retrieves only the columns it needs.
+
+### Connect to Other Power Platform Connectors
+
+For non-Dataverse connectors, first create or locate the connection in Power Apps, then get the API name and connection ID. You can use the Power Apps maker portal or:
+
+```bash
+pac connection list
+```
+
+Add a non-tabular connector data source:
+
+```bash
+npx power-apps add-data-source --api-id <api-name> --connection-id <connection-id>
+```
+
+Add a tabular connector data source such as SQL or SharePoint:
+
+```bash
+npx power-apps add-data-source \
+	--api-id <api-name> \
+	--connection-id <connection-id> \
+	--resource-name <table-or-list-name> \
+	--dataset <dataset-name>
+```
+
+You can discover datasets and tables through the npm CLI:
+
+```bash
+npx power-apps list-datasets --api-id <api-name> --connection-id <connection-id>
+npx power-apps list-tables --api-id <api-name> --connection-id <connection-id> --dataset <dataset-name>
+```
+
+For ALM-friendly apps, prefer connection references instead of binding directly to a maker's connection:
+
+```bash
+npx power-apps list-connection-references --solution-id <solution-id>
+npx power-apps add-data-source \
+	--api-id <api-name> \
+	--connection-ref <connection-reference-logical-name> \
+	--solution-id <solution-id>
+```
+
+For tabular connectors, environment variable references can be used for dataset and table values:
+
+```bash
+npx power-apps add-data-source \
+	--api-id shared_sharepointonline \
+	--connection-id <connection-id> \
+	--dataset "@envvar:<site-environment-variable-schema-name>" \
+	--resource-name "@envvar:<list-environment-variable-schema-name>"
+```
+
+### Dataverse Actions and Functions
+
+Dataverse actions and functions use the newer npm-only commands:
+
+```bash
+npx power-apps find-dataverse-api --search "WhoAmI"
+npx power-apps add-dataverse-api --api-name WhoAmI
+```
+
+The command updates `power.config.json`, writes schema files, and generates a service such as:
+
+```ts
+import { WhoAmIService } from "./generated/services/WhoAmIService";
+
+const result = await WhoAmIService.WhoAmI();
+```
+
+### Runtime Context
+
+Use `getContext` from the Power Apps SDK when you need app, environment, user, query parameter, or session details:
+
+```ts
+import { getContext } from "@microsoft/power-apps/app";
+
+const context = await getContext();
+
+console.log(context.app.environmentId);
+console.log(context.user.userPrincipalName);
+console.log(context.host.sessionId);
+```
+
+This replaces most webresource-style assumptions about `window.Xrm`, parent frame context, or manually loaded local tokens.
+
+## Code Apps vs Webresources
+
+This target is intentionally different from the `webresource` target:
+
+- Webresources run inside Dynamics 365/model-driven app pages and can use `window.Xrm`; Code Apps run in the Power Apps host.
+- Webresources in this repo use `src/services/AuthService.ts` and `token.json` for local Dataverse Web API calls; Code Apps should use `@microsoft/power-apps`, `power.config.json`, and generated services.
+- The Code Apps scaffold removes webresource/Power Pages auth artifacts if they are present during generation.
+- Webresource builds are tuned for web resource upload with deterministic `main.css`/JS files; Code Apps builds are published with `npx power-apps push`.
+- Code Apps can use Power Platform connectors, connection references, environment variables, generated Dataverse CRUD services, and generated Dataverse action/function services as part of the platform hosting model.
+
+## Build and Deploy
+
+Build the production assets:
+
+```bash
+npm run build
+```
+
+Publish a new version to the environment configured in `power.config.json`:
+
+```bash
+npx power-apps push
+```
+
+When the push succeeds, the command returns a Power Apps URL where you can run the app. You can also open [Power Apps](https://make.powerapps.com) to play, share, or review the app details.
+
+## Solution and ALM Notes
+
+For healthy ALM, use a non-default solution. If your environment has a preferred solution, new code apps are saved there by default when deployed. To target a specific solution with the PAC CLI path, use:
+
+```bash
+pac code push --solutionName <solution-name>
+```
+
+If you already deployed the app and need to add it to a solution manually, open Power Apps, go to Solutions, choose the solution, then select Add existing > App > Code app.
+
+Microsoft's current npm CLI is the preferred path for new code app work. Older docs still show the PAC CLI flow:
+
+```bash
+pac auth create
+pac env select --environment <environment-id>
+pac code init --displayname "{{APP_NAME}}"
+npm run build | pac code push
+```
+
+Use the npm CLI unless you specifically need a PAC CLI option that has not moved yet.
+
+## Related Microsoft Documentation
+
+- [Power Apps code apps overview](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/overview)
+- [Quickstart with npm CLI](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/npm-quickstart)
+- [Code apps architecture](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/architecture)
+- [Connect your code app to data](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/connect-to-data)
+- [Connect your code app to Dataverse](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/connect-to-dataverse)
+- [Add a Dataverse action or function](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/add-dataverse-action-function)
+- [Get context data](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/retrieve-context)
+- [Use environment variables in data sources](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/use-environment-variables)
+- [Application lifecycle management for code apps](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/alm)

package/templates/targets/code-apps/package.patch.json

@@ -0,0 +1,8 @@
+{
+	"dependencies": {
+		"@microsoft/power-apps": "^1.1.9"
+	},
+	"devDependencies": {
+		"@microsoft/power-apps-vite": "^1.0.2"
+	}
+}

package/templates/targets/code-apps/power.config.example.json

@@ -0,0 +1,14 @@
+{
+	"version": "1.0",
+	"appId": null,
+	"appDisplayName": "{{APP_NAME}}",
+	"region": "prod",
+	"environmentId": "<environment-id>",
+	"description": " ",
+	"buildPath": "./dist",
+	"buildEntryPoint": "index.html",
+	"localAppUrl": "http://localhost:5173",
+	"logoPath": "Default",
+	"connectionReferences": {},
+	"databaseReferences": {}
+}

package/templates/targets/code-apps/vite.config.patch.ts

@@ -0,0 +1,15 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { powerApps } from "@microsoft/power-apps-vite/plugin";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [react(), tailwindcss(), powerApps()],
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./src"),
+		},
+	},
+});

package/templates/targets/power-pages/src/App.patch.tsx

@@ -4,7 +4,7 @@ function App() {
 	const { isAuthenticated, user } = useAuth(); //INFO: User is where the token information is stored (user?.idToken)
 
 	return (
-		<div className="ec:flex ec:flex-col ec:items-center ec:justify-center ec:h-screen ec:gap-4">
+		<div className="flex h-screen flex-col items-center justify-center gap-4">
 			{isAuthenticated ? (
 				<div>You are logged in</div>
 			) : (

package/templates/targets/webresource/AGENTS.md

@@ -3,6 +3,8 @@
 This is a Dynamics 365 / Dataverse web resource template using React + TypeScript + Vite.
 Treat it as a **Dynamics-hosted frontend** — not a generic SPA. Do not modernise it into something else unless explicitly asked.
 
+The default philosophy is: keep the app small, readable, and easy to ship into Dynamics. Prefer obvious code, existing components, and the template's established runtime patterns over broad abstractions or clever defensive layers.
+
 ---
 
 ## Hard Constraints
@@ -43,10 +45,13 @@ Never mix the two modes or duplicate their logic — reuse `authService.ts`.
 - Always reuse `getApiUrl()` and `getAuthHeaders()` — never duplicate them
 - Use narrow `$select` queries; throw on non-OK responses
 - No raw fetch calls scattered across UI components
+- Use Zod for validation where data crosses a boundary: form inputs, URL/search params, config, and Dataverse/API responses that the UI depends on
+- Keep service functions boring and explicit: one fetch function, one hook, one mutation where needed
+- Do not add repository/client layers unless the app has enough repeated API logic to justify them
 
 **Preferred pattern:**
 ```ts
-// service.ts — fetch function + TanStack Query hook
+// {entity}Service.ts — fetch function + TanStack Query hook
 // invalidate relevant queryKey on mutation success
 ```
 
@@ -65,21 +70,24 @@ See the example at the bottom of this file.
 
 ## UI & Styling
 
-- Kendo UI or Shadcn/ui — stay consistent with whichever the project uses; don't mix
-- Tailwind is the default styling approach; preserve `main.css` output
-- Reuse existing components and utilities before building new ones
+- Kendo UI or Shadcn/ui — stay consistent with whichever the project uses; don't mix UI systems unless explicitly asked.
+- If the project uses Shadcn/ui, use Shadcn components from `@/components/ui` and style them with Tailwind utility classes.
+- If the project uses Kendo UI, use Kendo React components for controls, grids, menus, dialogs, inputs, and other rich UI. Use Tailwind for layout, spacing, and local composition around those components.
+- Tailwind is the default styling approach for both Shadcn/ui and Kendo projects; preserve `main.css` output.
+- Do not hand-roll component styling or custom CSS unless Tailwind/component props cannot reasonably express the requirement.
+- Prefer existing component APIs, theme tokens, variants, and utility helpers before creating new wrappers.
+- Keep screen layouts practical for embedded Dynamics use: compact, scannable, responsive, and not marketing-page styled.
 
 ---
 
-## Planning Rule
-
-For changes touching multiple files, auth, build config, or new service patterns — write a short plan first:
-- current state
-- intended change
-- files to touch
-- risks / compatibility concerns
+## Code Shape
 
-For large or risky changes, write an `ExecPlan` in `PLANS.md` before implementing.
+- Keep code simple and readable. A future maintainer should understand the main path quickly.
+- Avoid over-engineering: no generic frameworks, broad factories, speculative abstractions, or excessive configuration for small features.
+- Avoid being overly defensive. Validate real external inputs and API responses where useful, but don't wrap every local value in ceremony.
+- Prefer direct, typed functions over classes unless the existing code already uses classes for that concern.
+- Keep React components focused: UI in components, reusable data access in services, shared client state in Zustand only when local state is no longer enough.
+- Make the smallest change that solves the request cleanly.
 
 ---
 
@@ -120,4 +128,4 @@ export const useUpdateAccount = () => {
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["accounts"] }),
   });
 };
-```
+```

package/templates/targets/webresource/README.md

@@ -286,7 +286,7 @@ npm install
 This writes a standalone PCF project to the `--pcf-dir` folder. The generated control:
 
 - imports `src/App.tsx` directly instead of wrapping built HTML in an iframe
-- reuses the built stylesheet from `dist/main.css`
+- creates and imports `pcf-scoped.css` from the built `dist/main.css`
 - creates `src/runtime/types.ts` only if that file does not already exist
 - provides a runtime object with record context and `context.webAPI` access inside the generated PCF shell, following the `PcfBase` pattern
 - mounts your React app directly into the PCF container
@@ -302,32 +302,12 @@ npm install
 npm run build
 ```
 
-Useful options:
-
-- `--dist dist` to point at a different build folder
-- `--output pcf/MyControl` to choose the target folder
-- `--template /path/to/create-ec-app/templates/pcf/base` to swap the base shell
-- `--layer path/to/layer` to apply one or more patch layers after the base copy
-
-Build the generated PCF project from inside the generated folder:
-
-```bash
-cd pcf/FusionNotebookHost
-npm install
-npm run build
-```
-
 What gets generated:
 
 - a minimal PCF wrapper project under `pcf/<ConstructorName>`
 - a checked-in PCF shell stamped out from `create-ec-app/templates/pcf/base`
-- direct imports back to your webresource source and built CSS
-
-What does not happen:
-
-- your existing webresource project is not converted in place
-- your React source is not moved into the PCF project
-- the generated PCF project does not automatically get added to a Dataverse solution
+- direct imports back to your webresource source
+- a generated `pcf-scoped.css` file with CSS custom properties scoped to the PCF control
 
 ## Notes
 

package/templates/ui/shadcn-ui/components.json

@@ -8,7 +8,7 @@
 		"css": "src/index.css",
 		"baseColor": "neutral",
 		"cssVariables": true,
-		"prefix": "ec"
+		"prefix": ""
 	},
 	"iconLibrary": "lucide",
 	"rtl": false,