create-middag-ui 0.18.0 → 0.20.0

package/cli.js

@@ -30,11 +30,9 @@ import {
   scaffoldDevShell,
   scaffoldEslintConfig,
   scaffoldGitignore,
-  scaffoldInjectPlaceholders,
   scaffoldFreeAdapters,
   scaffoldFreeApp,
   scaffoldFreeRegister,
-  scaffoldProAdapters,
   scaffoldHostEntry,
   scaffoldHostThemeCSS,
   scaffoldHostViteConfig,
@@ -171,12 +169,23 @@ if (!dirCreated) {
 heading(5, TOTAL_STEPS, "Scaffolding config files");
 
 const isPro = registryPath === "github";
-scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey);
+
+// PRO only: @middag-io/licensing is a build-time delivery manifest, not a
+// runtime gate. Not every PRO product needs it, so make it opt-in (default no).
+const withLicensing =
+  isPro && !nonInteractive
+    ? await confirm(
+        "Include @middag-io/licensing (build-time delivery manifest)?",
+        false,
+      )
+    : false;
+
+scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey, withLicensing);
 scaffoldTsconfig(targetDir);
 scaffoldViteConfig(targetDir, host, registryPath);
-scaffoldEslintConfig(targetDir, isPro);
+scaffoldEslintConfig(targetDir);
 scaffoldPrettierConfig(targetDir);
-scaffoldGitignore(targetDir, isPro);
+scaffoldGitignore(targetDir);
 scaffoldIndexHtml(targetDir);
 
 // ── Step 6: Scaffold ~/.npmrc (GitHub path only) ─────────────────────────
@@ -223,11 +232,7 @@ if (isPro) {
     pro.scaffoldMockEntities(targetDir);
     pro.scaffoldMockPageContracts(targetDir);
     pro.scaffoldMockRoutes(targetDir);
-    // PRO Inertia adapters — re-export from @middag-io/react/mock so usePage()
-    // shares the same React context as MockPageProvider (no context mismatch).
-    scaffoldProAdapters(targetDir);
-    scaffoldInjectPlaceholders(targetDir);
-    success("PRO: using MockProductShell from @middag-io/react/mock");
+    success("PRO: host-sim dev harness inherited from @middag-io/react-demo");
   } catch {
     // npm version — PRO file excluded, fall back to FREE
     info("PRO scaffold not available — using FREE path");
@@ -247,7 +252,7 @@ if (isPro) {
 
 // Host-specific production files (entry, vite config, theme CSS)
 scaffoldHostEntry(targetDir, hostKey);
-scaffoldHostViteConfig(targetDir, hostKey, host);
+scaffoldHostViteConfig(targetDir, hostKey, host, withLicensing);
 scaffoldHostThemeCSS(targetDir, hostKey, host);
 
 // Moodle-specific: AMD plugin + Moodle adapters (ajax, strings, notification)

package/lib/scaffold.js

@@ -91,7 +91,7 @@ export function createTargetDir(targetDir) {
  * @param {string} registryPath - "github" (PRO) or "public" (FREE)
  * @param {string} [hostKey] - 'wordpress' | 'moodle' | 'custom' (adds host build scripts)
  */
-export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey) {
+export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey, withLicensing = false) {
   const filePath = join(targetDir, "package.json");
   if (skipIfExists(filePath, "package.json")) return;
 
@@ -103,7 +103,12 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey)
     "react-router": "^7.0.0",
   };
   if (isPro) {
+    deps["@middag-io/react-pro"] = `^${getLibVersion()}`;
     deps["sonner"] = "^2.0.0";
+    // Opt-in: build-time delivery manifest, not every PRO product needs it.
+    if (withLicensing) {
+      deps["@middag-io/licensing"] = "^0.1.0";
+    }
   }
 
   // Moodle AMD build needs Tailwind Vite plugin for CSS processing
@@ -113,6 +118,13 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey)
     moodleDevDeps["tailwindcss"] = "^4.0.0";
   }
 
+  // PRO: dev harness (host-sim shell, Inertia mocks, i18n) inherited at dev time
+  // from @middag-io/react-demo. Dev-only — production entry-*.tsx never imports it.
+  const proDevDeps = {};
+  if (isPro) {
+    proDevDeps["@middag-io/react-demo"] = `^${getLibVersion()}`;
+  }
+
   const scripts = {
     dev: "vite",
     build: "vite build",
@@ -127,24 +139,12 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey)
   if (hostKey === "wordpress") {
     scripts["build:wp"] = "vite build --config vite.config.wordpress.ts";
     scripts["watch:wp"] = "vite build --config vite.config.wordpress.ts --watch";
-    if (isPro) {
-      scripts["build:licensed"] =
-        "vite build --config vite.config.wordpress.ts && node scripts/inject-placeholders.mjs";
-    }
   } else if (hostKey === "moodle") {
     scripts["build:moodle"] = "vite build --config vite.config.moodle.ts";
     scripts["watch:moodle"] = "vite build --config vite.config.moodle.ts --watch";
-    if (isPro) {
-      scripts["build:licensed"] =
-        "vite build --config vite.config.moodle.ts && node scripts/inject-placeholders.mjs";
-    }
   } else if (hostKey === "custom") {
     scripts["build:host"] = "vite build --config vite.config.custom.ts";
     scripts["watch:host"] = "vite build --config vite.config.custom.ts --watch";
-    if (isPro) {
-      scripts["build:licensed"] =
-        "vite build --config vite.config.custom.ts && node scripts/inject-placeholders.mjs";
-    }
   }
 
   const pkg = {
@@ -173,6 +173,7 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey)
       prettier: "^3.0.0",
       "prettier-plugin-tailwindcss": "^0.6.0",
       ...moodleDevDeps,
+      ...proDevDeps,
     },
   };
 
@@ -220,9 +221,19 @@ export function scaffoldViteConfig(targetDir, host, registryPath) {
   const filePath = join(targetDir, "vite.config.ts");
   if (skipIfExists(filePath, "vite.config.ts")) return;
 
-  const adapterComment = registryPath === "github"
-    ? "// PRO: Inertia mocks re-exported from @middag-io/react/mock (same context)"
-    : "// FREE: Inertia mocks from local adapters";
+  const optimizeInclude = registryPath === "github"
+    ? '["@middag-io/react", "@middag-io/react-pro", "@middag-io/react-demo"]'
+    : '["@middag-io/react"]';
+
+  // PRO inherits the dev harness (host-sim shell + Inertia mocks) from
+  // @middag-io/react-demo, so @inertiajs/* alias to it. FREE: local adapters.
+  const inertiaAlias = registryPath === "github"
+    ? '// PRO: Inertia mocks inherited from @middag-io/react-demo (dev harness)\n' +
+      '      "@inertiajs/react": "@middag-io/react-demo",\n' +
+      '      "@inertiajs/core": "@middag-io/react-demo",'
+    : '// FREE: Inertia mocks from local self-contained adapters\n' +
+      '      "@inertiajs/react": resolve(__dirname, "mock/adapters/inertia-react.ts"),\n' +
+      '      "@inertiajs/core": resolve(__dirname, "mock/adapters/inertia-core.ts"),';
 
   const content = `/**
  * Vite config \u2014 used by \`npm run dev\` and \`npm run build\`.
@@ -239,15 +250,13 @@ export default defineConfig({
   plugins: [react()],
   server: { port: ${host.port} },
   optimizeDeps: {
-    include: ["@middag-io/react", "@middag-io/react/mock"],
+    include: ${optimizeInclude},
   },
   resolve: {
     alias: {
       "@/": resolve(__dirname, "src") + "/",
       "@mock/": resolve(__dirname, "mock") + "/",
-      ${adapterComment}
-      "@inertiajs/react": resolve(__dirname, "mock/adapters/inertia-react.ts"),
-      "@inertiajs/core": resolve(__dirname, "mock/adapters/inertia-core.ts"),
+      ${inertiaAlias}
     },
   },
 });
@@ -259,11 +268,11 @@ export default defineConfig({
 /**
  * Scaffold eslint.config.js.
  */
-export function scaffoldEslintConfig(targetDir, isPro = false) {
+export function scaffoldEslintConfig(targetDir) {
   const filePath = join(targetDir, "eslint.config.js");
   if (skipIfExists(filePath, "eslint.config.js")) return;
 
-  const ignores = ["dist/", "node_modules/", "scripts/", ...(isPro ? ["dist-licensed/"] : [])];
+  const ignores = ["dist/", "node_modules/", "scripts/"];
   const ignoresStr = ignores.map((i) => `"${i}"`).join(", ");
 
   writeFile(
@@ -328,14 +337,13 @@ export function scaffoldPrettierConfig(targetDir) {
 /**
  * Scaffold .gitignore with UI-specific dist patterns.
  */
-export function scaffoldGitignore(targetDir, isPro = false) {
+export function scaffoldGitignore(targetDir) {
   const filePath = join(targetDir, ".gitignore");
   if (skipIfExists(filePath, ".gitignore")) return;
 
   const lines = [
     "node_modules/",
     "dist/",
-    ...(isPro ? ["dist-licensed/"] : []),
     "dist-master/",
     "dist-mock/",
     "dist-lib/",
@@ -345,79 +353,6 @@ export function scaffoldGitignore(targetDir, isPro = false) {
   writeFile(filePath, lines.join("\n") + "\n", ".gitignore");
 }
 
-/**
- * Scaffold scripts/inject-placeholders.mjs (PRO only).
- * Injects opaque placeholder variables into middag-* bundles for CDN delivery.
- * The Cloudflare Worker replaces placeholders with per-installation values.
- */
-export function scaffoldInjectPlaceholders(targetDir) {
-  const scriptsDir = join(targetDir, "scripts");
-  mkdirSync(scriptsDir, { recursive: true });
-  const filePath = join(scriptsDir, "inject-placeholders.mjs");
-  if (skipIfExists(filePath, "scripts/inject-placeholders.mjs")) return;
-
-  writeFile(
-    filePath,
-    `/**
- * inject-placeholders — generate licensed bundles for CDN delivery.
- *
- * Takes compiled Vite output from dist/ and produces dist-licensed/ with
- * placeholder variables injected into middag-* bundles. The Cloudflare
- * Worker replaces these placeholders with real values per installation.
- *
- * Usage: node scripts/inject-placeholders.mjs
- * Called by: npm run build:licensed
- */
-import fs from "node:fs";
-import path from "node:path";
-
-const DIST_DIR = path.resolve(import.meta.dirname, "../dist");
-const LICENSED_DIR = path.resolve(import.meta.dirname, "../dist-licensed");
-
-// Variable names are intentionally opaque to discourage reverse engineering.
-// The mapping is documented only here and in the Worker source:
-//   _0x7a3f → wwwroot        (replaced by Worker with installation URL)
-//   _0x9b1e → expiry         (replaced by Worker with unix timestamp)
-//   _0x4d2c → tier           (replaced by Worker with license tier)
-//   _0x6e8a → domain hash    (replaced by Worker with HMAC of wwwroot)
-const PLACEHOLDER_HEADER = [
-  'var _0x7a3f="__PH_0x7a3f__";',
-  "var _0x9b1e=0;",
-  'var _0x4d2c="__PH_0x4d2c__";',
-  'var _0x6e8a="__PH_0x6e8a__";',
-].join("") + "\\n";
-
-if (fs.existsSync(LICENSED_DIR)) fs.rmSync(LICENSED_DIR, { recursive: true });
-fs.mkdirSync(LICENSED_DIR, { recursive: true });
-
-const files = fs.readdirSync(DIST_DIR).filter((f) => f.endsWith(".js"));
-let injected = 0;
-let copied = 0;
-
-for (const file of files) {
-  const srcPath = path.join(DIST_DIR, file);
-  const destPath = path.join(LICENSED_DIR, file);
-  const content = fs.readFileSync(srcPath, "utf-8");
-
-  if (file.startsWith("middag-")) {
-    fs.writeFileSync(destPath, PLACEHOLDER_HEADER + content);
-    injected++;
-    console.log(\`[licensed] \${file} — placeholders injected\`);
-  } else {
-    fs.copyFileSync(srcPath, destPath);
-    copied++;
-    console.log(\`[licensed] \${file} — copied (vendor/shared)\`);
-  }
-}
-
-console.log(\`\\nLicensed bundles ready in \${LICENSED_DIR}/\`);
-console.log(\`  \${injected} bundle(s) with placeholders\`);
-console.log(\`  \${copied} bundle(s) copied as-is\`);
-`,
-    "scripts/inject-placeholders.mjs",
-  );
-}
-
 /**
  * Scaffold index.html at project root.
  */
@@ -1043,132 +978,6 @@ export const settingsContract: PageContract = {
   }
 }
 
-// ── App files — PRO path (GitHub Packages) ─────────────────────────────
-
-/**
- * Scaffold PRO app: src/main.tsx + src/app.tsx.
- * Uses mock barrel from @middag-io/react/mock. No local adapters/shell.
- */
-export function scaffoldProApp(targetDir) {
-  ensureDir(join(targetDir, "src"));
-  ensureDir(join(targetDir, "mock", "adapters"));
-
-  // Inertia adapter shims — re-export from pre-built mock bundle
-  // so usePage() shares the same MockPageContext as MockPageProvider.
-  const adapterReactPath = join(targetDir, "mock", "adapters", "inertia-react.ts");
-  if (!skipIfExists(adapterReactPath, "mock/adapters/inertia-react.ts")) {
-    writeFile(adapterReactPath, `/**
- * Mock @inertiajs/react — re-exports from pre-built @middag-io/react/mock.
- *
- * This ensures usePage() reads from the same MockPageContext as
- * MockPageProvider (both live in the pre-built ESM bundle).
- */
-export { usePage, Head, Link, router } from "@middag-io/react/mock";
-`, "mock/adapters/inertia-react.ts");
-  }
-
-  const adapterCorePath = join(targetDir, "mock", "adapters", "inertia-core.ts");
-  if (!skipIfExists(adapterCorePath, "mock/adapters/inertia-core.ts")) {
-    writeFile(adapterCorePath, `/**
- * Mock @inertiajs/core — re-exports from pre-built @middag-io/react/mock.
- */
-export { router, setMockNavigate } from "@middag-io/react/mock";
-`, "mock/adapters/inertia-core.ts");
-  }
-
-  const mainPath = join(targetDir, "src", "main.tsx");
-  if (!skipIfExists(mainPath, "src/main.tsx")) {
-    writeFile(mainPath, `import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { registerDefaults, registerShell } from "@middag-io/react";
-import { MockProductShell } from "@middag-io/react/mock";
-import "@middag-io/react/style.css";
-import "./theme.css";
-import "@fontsource-variable/figtree";
-import { App } from "./app";
-
-registerDefaults();
-registerShell("product", MockProductShell);
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode><App /></StrictMode>,
-);
-`, "src/main.tsx");
-  }
-
-  const appPath = join(targetDir, "src", "app.tsx");
-  if (!skipIfExists(appPath, "src/app.tsx")) {
-    writeFile(appPath, `import { useEffect } from "react";
-import { BrowserRouter, Routes, Route, useNavigate } from "react-router";
-import { ContractPage, I18nProvider } from "@middag-io/react";
-import { MockPageProvider, MockI18nProvider } from "@middag-io/react/mock";
-import type { PageContract } from "@middag-io/react";
-import { dashboardContract } from "./pages/dashboard";
-import { connectorsContract } from "./pages/connectors";
-import { settingsContract } from "./pages/settings";
-
-let _navigate: ((to: string) => void) | null = null;
-function NavigateBridge() {
-  const navigate = useNavigate();
-  useEffect(() => { _navigate = (to: string) => navigate(to); }, [navigate]);
-  return null;
-}
-if (typeof window !== "undefined") {
-  (window as any).__MIDDAG_MOCK_NAVIGATE__ = (to: string) => { if (_navigate) _navigate(to); };
-}
-
-const sharedProps = {
-  auth: { id: 1, name: "Dev User", email: "dev@localhost", capabilities: [] },
-  theme: { appearance: "light" as const, strings: {} as Record<string, string> },
-  flash: {},
-  locale: "en",
-  version: "0.0.0-dev",
-  scope: { extension: null, context: "global" },
-};
-
-function buildNavigation(activeKey: string) {
-  return {
-    tree: [
-      { key: "overview.dashboard", label: "Dashboard", icon: "home", href: "/", children: [] },
-      { key: "integration.connectors", label: "Connectors", icon: "plug", href: "/connectors", children: [] },
-    ],
-    footer: [
-      { key: "system.settings", label: "Settings", icon: "settings", href: "/settings", children: [] },
-    ],
-    activeKey,
-  };
-}
-
-function MockRoute({ contract, activeKey }: { contract: PageContract; activeKey: string }) {
-  return (
-    <MockPageProvider value={{ props: { ...sharedProps, contract, navigation: buildNavigation(activeKey) }, url: window.location.pathname }}>
-      <ContractPage contract={contract} />
-    </MockPageProvider>
-  );
-}
-
-export function App() {
-  return (
-    <MockI18nProvider>
-      <MockPageProvider value={{ props: { ...sharedProps, contract: null, navigation: buildNavigation("") }, url: "/" }}>
-        <I18nProvider>
-          <BrowserRouter>
-            <NavigateBridge />
-            <Routes>
-              <Route path="/" element={<MockRoute contract={dashboardContract} activeKey="overview.dashboard" />} />
-              <Route path="/connectors" element={<MockRoute contract={connectorsContract} activeKey="integration.connectors" />} />
-              <Route path="/settings" element={<MockRoute contract={settingsContract} activeKey="system.settings" />} />
-            </Routes>
-          </BrowserRouter>
-        </I18nProvider>
-      </MockPageProvider>
-    </MockI18nProvider>
-  );
-}
-`, "src/app.tsx");
-  }
-}
-
 /**
  * Scaffold FREE adapters: mock/adapters/ with react-router.
  */
@@ -1248,39 +1057,6 @@ export { router };
   }
 }
 
-/**
- * Scaffold PRO adapters: thin re-exports from @middag-io/react/mock.
- *
- * PRO uses MockPageProvider from the lib, so usePage() must read from the
- * same React context. These adapters delegate to the lib mock instead of
- * defining their own context (which would cause context mismatch).
- */
-export function scaffoldProAdapters(targetDir) {
-  ensureDir(join(targetDir, "mock", "adapters"));
-
-  const corePath = join(targetDir, "mock", "adapters", "inertia-core.ts");
-  if (!skipIfExists(corePath, "mock/adapters/inertia-core.ts")) {
-    writeFile(corePath, `/**
- * Mock @inertiajs/core — PRO re-export from @middag-io/react/mock.
- * Shares the same navigate function as MockProductShell.
- */
-export { router, setMockNavigate } from "@middag-io/react/mock";
-`, "mock/adapters/inertia-core.ts (PRO)");
-  }
-
-  const reactPath = join(targetDir, "mock", "adapters", "inertia-react.ts");
-  if (!skipIfExists(reactPath, "mock/adapters/inertia-react.ts")) {
-    writeFile(reactPath, `/**
- * Mock @inertiajs/react — PRO re-export from @middag-io/react/mock.
- * Shares the same React context as MockPageProvider so usePage()
- * returns the data set by the mock shell.
- */
-export { usePage, Head, Link } from "@middag-io/react/mock";
-export { router } from "./inertia-core";
-`, "mock/adapters/inertia-react.ts (PRO)");
-  }
-}
-
 /**
  * Scaffold FREE DevShell: src/shells/DevShell.tsx.
  */
@@ -1622,13 +1398,20 @@ ${postMountCode}
  * @param {string} targetDir - Absolute path to UI dir
  * @param {string} hostKey - 'wordpress' | 'moodle' | 'custom'
  * @param {object} host - HOSTS[hostKey] object
+ * @param {boolean} withLicensing - Whether to emit @middag-io/licensing delivery manifest plugin
  */
-export function scaffoldHostViteConfig(targetDir, hostKey, host) {
+export function scaffoldHostViteConfig(targetDir, hostKey, host, withLicensing = false) {
   const filePath = join(targetDir, `vite.config.${hostKey}.ts`);
   const label = `vite.config.${hostKey}.ts`;
   if (skipIfExists(filePath, label)) return;
 
   let outDir, formats, libName, fileName, extraRollup;
+  const licensingImport = withLicensing
+    ? `import { licensingPlugin } from "@middag-io/licensing/build";\n`
+    : "";
+  const licensingPluginEntry = withLicensing
+    ? `,\n    licensingPlugin({\n      product: process.env.MIDDAG_PRODUCT ?? "middag-ui",\n      release: process.env.MIDDAG_RELEASE ?? "local",\n      buildId: process.env.MIDDAG_BUILD_ID ?? "local",\n      modules: [],\n    })`
+    : "";
 
   if (hostKey === "wordpress") {
     outDir = `resolve(__dirname, "../assets/dist")`;
@@ -1662,10 +1445,11 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import moodleAmd from "./plugins/vite-plugin-moodle-amd";
+${licensingImport.trimEnd()}
 import { resolve } from "path";
 
 export default defineConfig({
-  plugins: [react(), tailwindcss(), moodleAmd()],
+  plugins: [react(), tailwindcss(), moodleAmd()${licensingPluginEntry}],
   define: { "process.env.NODE_ENV": JSON.stringify("production") },
   resolve: { alias: { "@/": resolve(__dirname, "src") + "/" } },
   build: {
@@ -1734,10 +1518,11 @@ export default defineConfig({
  */
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+${licensingImport.trimEnd()}
 import { resolve } from "path";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react()${licensingPluginEntry}],
   define: { "process.env.NODE_ENV": JSON.stringify("production") },
   resolve: { alias: { "@/": resolve(__dirname, "src") + "/" } },
   build: {

package/lib/templates/pro/app.tsx

@@ -5,11 +5,15 @@
  *   mock/routes.tsx      — route definitions
  *   mock/navigation.ts   — sidebar structure
  *   mock/data.ts         — synthetic page props
+ *
+ * The dev harness (host-sim shell, Inertia mocks, i18n) is inherited from
+ * @middag-io/react-demo — not generated locally. Vite aliases @inertiajs/*
+ * to it (see vite.config.ts).
  */
 import {useEffect} from "react";
 import {BrowserRouter, Routes, useNavigate} from "react-router";
 import {I18nProvider} from "@middag-io/react";
-import {MockI18nProvider, MockPageProvider, setMockNavigate} from "@middag-io/react/mock";
+import {MockI18nProvider, MockPageProvider, setMockNavigate} from "@middag-io/react-demo";
 import {buildNavigation} from "../mock/navigation";
 import {sharedProps} from "../mock/data";
 import {AppRoutes} from "../mock/routes";

package/lib/templates/pro/main.tsx

@@ -1,19 +1,24 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { registerDefaults, registerShell } from "@middag-io/react";
-import { MockProductShell } from "@middag-io/react/mock";
+import { registerProDefaults } from "@middag-io/react-pro/runtime";
+import { MockProductShell } from "@middag-io/react-demo";
 import "@middag-io/react/style.css";
 import "@middag-io/react/themes/classic.css";
-import "@middag-io/react/themes/enterprise.css";
-import "@middag-io/react/themes/soft.css";
-import "@middag-io/react/themes/midnight.css";
+import "@middag-io/react-pro/themes/enterprise.css";
+import "@middag-io/react-pro/themes/soft.css";
+import "@middag-io/react-pro/themes/midnight.css";
 import "./theme.css";
 import "@fontsource-variable/figtree";
 import { App } from "./app";
 
-// Dev mode: register all blocks from the lib (19 blocks + fields + icons + cells).
-// In production, entry-*.tsx uses the selective register from ./app/register.
+// Dev mode: register the free engine defaults (12 standard blocks + fields +
+// icons + cells) plus the premium runtime (the 7 heavy blocks). Then override
+// the "product" shell with the host-sim MockProductShell inherited from
+// @middag-io/react-demo (Moodle/WP chrome, host switcher, theme/locale toggles).
+// Dev-only — in production, entry-*.tsx uses the selective register from ./app/register.
 registerDefaults();
+registerProDefaults();
 registerShell("product", MockProductShell);
 
 createRoot(document.getElementById("root")!).render(

package/lib/templates/pro/mock-routes.tsx

@@ -6,7 +6,7 @@
 import { Route } from "react-router";
 import { type ReactNode } from "react";
 import { ContractPage, resolveShell, EntityRoutesProvider } from "@middag-io/react";
-import { MockPageProvider } from "@middag-io/react/mock";
+import { MockPageProvider } from "@middag-io/react-demo";
 import type { PageContract } from "@middag-io/react";
 import { mockEntities } from "./entities";
 import { buildNavigation } from "./navigation";

package/lib/templates/shared/register-free.ts

@@ -1,12 +1,14 @@
 /**
- * register — selective registration for this plugin's UI.
+ * register — registration for this plugin's UI.
  *
- * Registers only the shells, layouts, blocks, cell renderers, form fields,
- * and icons this plugin uses. For IIFE bundles (WordPress/Moodle), selective
- * registration avoids pulling in heavy lazy-loaded blocks that bloat the bundle.
+ * Registers all 13 standard blocks plus shells, layouts, cell renderers, form
+ * fields and icons. Every block in @middag-io/react is free to use — there is no
+ * tiered block gating. The 6 heavy lazy-loaded blocks (chart_panel, kanban_board,
+ * flow_editor, form_builder, condition_tree, sentence_builder) are NOT registered
+ * here to keep the bundle lean; deep-import + registerBlock() them when a page
+ * needs one, or call registerDefaults() from @middag-io/react to register all 19.
  *
- * When adding a new page that needs a block not listed here,
- * add the import + registerBlock call.
+ * For lean IIFE bundles (WordPress/Moodle), trim the blocks you don't use.
  *
  * Full catalog: https://docs.middag.io/blocks
  */
@@ -31,10 +33,14 @@ import {
   MetricCardBlock,
   EmptyStateBlock,
   DetailPanelBlock,
-  FormPanelBlock,
-  CardGridBlock,
   StatusStripBlock,
+  FormPanelBlock,
   TabbedPanelBlock,
+  ActivityTimelineBlock,
+  WorkflowProgressBlock,
+  MarkdownPanelBlock,
+  CardGridBlock,
+  ActionGridBlock,
   LinkListBlock,
 } from "@middag-io/react";
 
@@ -59,10 +65,14 @@ export function registerDefaults(): void {
   registerBlock("metric_card", MetricCardBlock);
   registerBlock("empty_state", EmptyStateBlock);
   registerBlock("detail_panel", DetailPanelBlock);
-  registerBlock("form_panel", FormPanelBlock);
-  registerBlock("card_grid", CardGridBlock);
   registerBlock("status_strip", StatusStripBlock);
+  registerBlock("form_panel", FormPanelBlock);
   registerBlock("tabbed_panel", TabbedPanelBlock);
+  registerBlock("activity_timeline", ActivityTimelineBlock);
+  registerBlock("workflow_progress", WorkflowProgressBlock);
+  registerBlock("markdown_panel", MarkdownPanelBlock);
+  registerBlock("card_grid", CardGridBlock);
+  registerBlock("action_grid", ActionGridBlock);
   registerBlock("link_list", LinkListBlock);
 
   // Cell renderers (status, timestamp, link, boolean, etc.)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-middag-ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
   "bin": {