create-middag-ui 0.17.0 → 0.19.0

package/cli.js

@@ -29,15 +29,17 @@ import {
   scaffoldDemoFiles,
   scaffoldDevShell,
   scaffoldEslintConfig,
+  scaffoldGitignore,
   scaffoldFreeAdapters,
   scaffoldFreeApp,
   scaffoldFreeRegister,
-  scaffoldProAdapters,
   scaffoldHostEntry,
   scaffoldHostThemeCSS,
   scaffoldHostViteConfig,
   scaffoldIndexHtml,
   scaffoldMoodleAdapters,
+  scaffoldMoodleAdminShell,
+  scaffoldMoodlePageResolver,
   scaffoldMoodlePlugin,
   scaffoldMoodleTailwind,
   scaffoldPackageJson,
@@ -166,11 +168,24 @@ if (!dirCreated) {
 
 heading(5, TOTAL_STEPS, "Scaffolding config files");
 
-scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey);
+const isPro = registryPath === "github";
+
+// 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);
 scaffoldPrettierConfig(targetDir);
+scaffoldGitignore(targetDir);
 scaffoldIndexHtml(targetDir);
 
 // ── Step 6: Scaffold ~/.npmrc (GitHub path only) ─────────────────────────
@@ -192,13 +207,16 @@ scaffoldDemoFiles(targetDir);
 
 // ── Step 8: Scaffold app + page examples (PRO vs FREE) ─────────────────
 
-const isPro = registryPath === "github";
 heading(8, TOTAL_STEPS, `Creating ${isPro ? "PRO" : "FREE"} UI module`);
 
 scaffoldPageExamples(targetDir);
 
-// Shared files (both PRO and FREE)
-scaffoldPageResolver(targetDir);
+// Page resolver — Moodle gets AMD version (RequireJS + extension globs)
+if (hostKey === "moodle") {
+  scaffoldMoodlePageResolver(targetDir);
+} else {
+  scaffoldPageResolver(targetDir);
+}
 scaffoldDemoDirectPage(targetDir);
 // Convert frankenstyle "local_middag" → Moodle path "local/middag"
 const moodlePath = moodleComponent ? moodleComponent.replace("_", "/") : null;
@@ -214,10 +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);
-    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");
@@ -237,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)
@@ -245,7 +260,8 @@ if (hostKey === "moodle" && moodleComponent) {
   scaffoldMoodlePlugin(targetDir, moodleComponent);
   scaffoldMoodleTailwind(targetDir);
   scaffoldMoodleAdapters(targetDir, moodleComponent);
-  success(`Moodle: AMD plugin + Tailwind + adapters for ${ moodleComponent }`);
+  scaffoldMoodleAdminShell(targetDir);
+  success(`Moodle: AMD plugin + Tailwind + adapters + AdminShell for ${ moodleComponent }`);
 }
 
 // ── Step 9: npm install ──────────────────────────────────────────────────

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",
@@ -138,6 +150,7 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey)
   const pkg = {
     name: `${projectName}-ui`,
     private: true,
+    version: "0.1.0",
     type: "module",
     scripts,
     dependencies: deps,
@@ -160,6 +173,7 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey)
       prettier: "^3.0.0",
       "prettier-plugin-tailwindcss": "^0.6.0",
       ...moodleDevDeps,
+      ...proDevDeps,
     },
   };
 
@@ -190,6 +204,11 @@ export function scaffoldTsconfig(targetDir) {
   };
 
   writeFile(filePath, JSON.stringify(tsconfig, null, 2) + "\n", "tsconfig.json");
+
+  const envFilePath = join(targetDir, "src", "vite-env.d.ts");
+  if (!skipIfExists(envFilePath, "src/vite-env.d.ts")) {
+    writeFile(envFilePath, `/// <reference types="vite/client" />\n`, "src/vite-env.d.ts");
+  }
 }
 
 /**
@@ -202,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\`.
@@ -221,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}
     },
   },
 });
@@ -245,6 +272,9 @@ export function scaffoldEslintConfig(targetDir) {
   const filePath = join(targetDir, "eslint.config.js");
   if (skipIfExists(filePath, "eslint.config.js")) return;
 
+  const ignores = ["dist/", "node_modules/", "scripts/"];
+  const ignoresStr = ignores.map((i) => `"${i}"`).join(", ");
+
   writeFile(
     filePath,
     `import js from "@eslint/js";
@@ -254,7 +284,7 @@ import reactRefresh from "eslint-plugin-react-refresh";
 import prettierConfig from "eslint-config-prettier";
 
 export default tseslint.config(
-  { ignores: ["dist/", "node_modules/"] },
+  { ignores: [${ignoresStr}] },
   js.configs.recommended,
   ...tseslint.configs.recommended,
   {
@@ -264,7 +294,8 @@ export default tseslint.config(
       "react-refresh": reactRefresh,
     },
     rules: {
-      ...reactHooks.configs.recommended.rules,
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
       "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
       "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
       "@typescript-eslint/no-explicit-any": "warn",
@@ -294,6 +325,7 @@ export function scaffoldPrettierConfig(targetDir) {
         trailingComma: "all",
         printWidth: 100,
         plugins: ["prettier-plugin-tailwindcss"],
+        tailwindFunctions: ["cn", "cva"],
       },
       null,
       2,
@@ -302,6 +334,25 @@ export function scaffoldPrettierConfig(targetDir) {
   );
 }
 
+/**
+ * Scaffold .gitignore with UI-specific dist patterns.
+ */
+export function scaffoldGitignore(targetDir) {
+  const filePath = join(targetDir, ".gitignore");
+  if (skipIfExists(filePath, ".gitignore")) return;
+
+  const lines = [
+    "node_modules/",
+    "dist/",
+    "dist-master/",
+    "dist-mock/",
+    "dist-lib/",
+    "*.log",
+    ".vite/",
+  ];
+  writeFile(filePath, lines.join("\n") + "\n", ".gitignore");
+}
+
 /**
  * Scaffold index.html at project root.
  */
@@ -927,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.
  */
@@ -1132,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.
  */
@@ -1375,26 +1267,91 @@ export function scaffoldHostEntry(targetDir, hostKey) {
     });
     observer.observe(document.body, { childList: true, subtree: true });`;
   } else if (hostKey === "moodle") {
-    extraImports = `import "./tailwind.css";
-import "@fontsource-variable/figtree";`;
-    setupCode = `    document.body.classList.add("middag-active");
+    // Moodle uses a dedicated content block — see below.
+  }
+
+  // Moodle: fully separate entry (asyncResolver, full provider stack, theme init, AdminShell)
+  if (hostKey === "moodle") {
+    const moodleContent = `/**
+ * Production entry point for Moodle.
+ *
+ * AMD module loaded by Moodle's RequireJS via js_call_amd().
+ * Uses real createInertiaApp — Moodle serves the HTML and page props.
+ * This is the build target for \`npm run build\`.
+ *
+ * NOT used by \`npm run dev\` — that uses src/main.tsx with mock adapters.
+ */
+import "./tailwind.css";
+import "@fontsource-variable/figtree";
+
+import { createRoot } from "react-dom/client";
+import { createInertiaApp } from "@inertiajs/react";
+import {
+  I18nProvider,
+  ProgressProvider,
+  AuthProvider,
+  FlashProvider,
+  ScopeProvider,
+  setAppearance,
+  getStoredAppearance,
+  getEffectiveTheme,
+  onSystemThemeChange,
+} from "@middag-io/react";
+import "@middag-io/react/style.css";
+import { getString } from "./lib/moodle/strings";
+import { registerDefaults } from "./app/register";
+import { resolvePageComponent } from "./app/page-resolver";
+
+registerDefaults();
+setAppearance(getStoredAppearance());
+onSystemThemeChange();
+
+createInertiaApp({
+  id: "middag-app",
+  resolve: (name) => resolvePageComponent(name),
+  setup({ el, App, props }) {
+    el.classList.add("middag-root");
+    el.classList.add("middag-active");
+    el.setAttribute("data-theme", getEffectiveTheme(getStoredAppearance()));
 
     // Portal container for Radix UI (modals, popovers, toasts).
     // Radix portals default to document.body which is outside .middag-root,
-    // meaning scoped Tailwind styles won't apply. This creates a sibling
-    // container with .middag-root so portal content inherits design tokens.
+    // so this sibling container ensures portal content inherits design tokens.
     if (!document.getElementById("middag-portals")) {
-      const portalContainer = document.createElement("div");
-      portalContainer.id = "middag-portals";
-      portalContainer.classList.add("middag-root");
-      document.body.appendChild(portalContainer);
-    }`;
+      const portals = document.createElement("div");
+      portals.id = "middag-portals";
+      portals.classList.add("middag-root");
+      document.body.appendChild(portals);
+    }
+
+    createRoot(el).render(
+      <ProgressProvider>
+        <App {...props}>
+          {({ Component, props: pageProps, key }) => (
+            <AuthProvider>
+              <ScopeProvider>
+                <FlashProvider>
+                  <I18nProvider asyncResolver={getString}>
+                    <Component key={key} {...pageProps} />
+                  </I18nProvider>
+                </FlashProvider>
+              </ScopeProvider>
+            </AuthProvider>
+          )}
+        </App>
+      </ProgressProvider>,
+    );
+  },
+});
+`;
+    writeFile(filePath, moodleContent, label);
+    return;
   }
 
   const content = `/**
- * Production entry point for ${hostKey === "wordpress" ? "WordPress" : hostKey === "moodle" ? "Moodle" : "custom host"}.
+ * Production entry point for ${hostKey === "wordpress" ? "WordPress" : "custom host"}.
  *
- * Uses real createInertiaApp — the host platform (${hostKey === "wordpress" ? "WP" : hostKey === "moodle" ? "Moodle" : "your backend"})
+ * Uses real createInertiaApp — the host platform (${hostKey === "wordpress" ? "WP" : "your backend"})
  * serves the HTML and Inertia page props. This file is the build target
  * for \`npm run build:${hostKey === "custom" ? "host" : hostKey}\`.
  *
@@ -1441,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")`;
@@ -1481,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: {
@@ -1553,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: {
@@ -1996,6 +1962,37 @@ export function scaffoldPageResolver(targetDir) {
   writeFile(filePath, readTemplate("templates/shared/page-resolver.tsx"), "src/app/page-resolver.tsx");
 }
 
+/**
+ * Scaffold Moodle AMD page resolver: src/app/page-resolver.tsx.
+ *
+ * Overwrites the generic resolver with a Moodle-specific version that supports:
+ * - Eager core pages (../extensions/core/pages/**)
+ * - Lazy non-core extension pages (separate AMD chunks)
+ * - External plugin pages via RequireJS (frankenstyle prefix)
+ *
+ * @param {string} targetDir - Absolute path to UI project root
+ */
+export function scaffoldMoodlePageResolver(targetDir) {
+  ensureDir(join(targetDir, "src", "app"));
+  const filePath = join(targetDir, "src", "app", "page-resolver.tsx");
+  writeFile(filePath, readTemplate("templates/shared/page-resolver-moodle.tsx"), "src/app/page-resolver.tsx (Moodle AMD)");
+}
+
+/**
+ * Scaffold Moodle admin shell: src/shells/AdminShell.tsx.
+ *
+ * Moodle-specific shell that supports the admin_tabs shared prop.
+ * Registered as 'admin' shell in src/entry-moodle.tsx.
+ *
+ * @param {string} targetDir - Absolute path to UI project root
+ */
+export function scaffoldMoodleAdminShell(targetDir) {
+  ensureDir(join(targetDir, "src", "shells"));
+  const filePath = join(targetDir, "src", "shells", "AdminShell.tsx");
+  if (skipIfExists(filePath, "src/shells/AdminShell.tsx")) return;
+  writeFile(filePath, readTemplate("templates/shared/moodle-admin-shell.tsx"), "src/shells/AdminShell.tsx");
+}
+
 /**
  * Scaffold route helper: src/lib/routes.ts.
  * Abstracts host admin URL vs dev mock path.

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/moodle-admin-shell.tsx

@@ -0,0 +1,108 @@
+/**
+ * AdminShell — Moodle-specific admin shell.
+ *
+ * Extends ProductShell architecture with an optional admin tab bar
+ * rendered when the `admin_tabs` Inertia shared prop is present.
+ *
+ * Registered as 'admin' shell in src/entry-moodle.tsx.
+ * Edit this file to customise the admin sidebar header, tab bar, or layout.
+ */
+import { useCallback, type ReactElement } from "react";
+import { Link, usePage } from "@inertiajs/react";
+import {
+    Toaster,
+    Sidebar,
+    SidebarHeader,
+    SidebarProvider,
+    useSidebar,
+    SidebarNav,
+    PageHeader,
+    NavErrorBoundary,
+    type ShellProps,
+    type SharedProps,
+    type PageMeta,
+    type AdminTabsProps,
+} from "@middag-io/react";
+import { Tabs, TabsList, TabsTrigger } from "@middag-io/react/reui/tabs";
+
+// ── Inner shell (must be inside SidebarProvider) ──────────────────────────────
+
+function AdminShellInner({ children }: ShellProps): ReactElement {
+    const { setOpenMobile } = useSidebar();
+    const { props } = usePage<SharedProps>();
+
+    const page: PageMeta = (props as SharedProps & { contract?: { page?: PageMeta } }).contract
+        ?.page ?? { key: "unknown", title: "", breadcrumbs: [], actions: [] };
+
+    const adminTabs = (props as SharedProps & { admin_tabs?: AdminTabsProps }).admin_tabs;
+
+    const handleMobileMenuClick = useCallback(() => {
+        setOpenMobile(true);
+    }, [setOpenMobile]);
+
+    return (
+        <>
+            <Sidebar
+                aria-label="Navegação"
+                collapsible="icon"
+                className="border-sidebar-border bg-sidebar border-r"
+            >
+                <SidebarHeader className="border-sidebar-border border-b px-4 py-3">
+                    {/* Replace with your plugin name or logo */}
+                    <p className="text-sidebar-foreground text-sm font-semibold">Admin</p>
+                </SidebarHeader>
+
+                <NavErrorBoundary>
+                    <SidebarNav />
+                </NavErrorBoundary>
+            </Sidebar>
+
+            <div className="admin-shell__content flex min-h-screen flex-1 flex-col overflow-hidden">
+                <NavErrorBoundary>
+                    <PageHeader page={page} onMobileMenuClick={handleMobileMenuClick} />
+                </NavErrorBoundary>
+
+                {adminTabs && (
+                    <div className="border-b px-6">
+                        <Tabs value={adminTabs.active}>
+                            <TabsList variant="line" className="w-full justify-start">
+                                {adminTabs.items.map((tab) => (
+                                    <TabsTrigger key={tab.key} value={tab.key} asChild>
+                                        <Link href={tab.href} preserveState>
+                                            {tab.label}
+                                        </Link>
+                                    </TabsTrigger>
+                                ))}
+                            </TabsList>
+                        </Tabs>
+                    </div>
+                )}
+
+                <main className="flex-1 overflow-auto p-6" aria-live="polite" aria-busy="false">
+                    {children}
+                </main>
+            </div>
+
+            <Toaster position="bottom-right" richColors />
+        </>
+    );
+}
+
+// ── AdminShell — public export ──────────────────────────────────────────────
+
+export function AdminShell({ children }: ShellProps): ReactElement {
+    return (
+        <SidebarProvider
+            defaultOpen={true}
+            style={
+                {
+                    "--sidebar-width": "var(--sidebar-width)",
+                    "--sidebar-width-icon": "var(--sidebar-width-collapsed)",
+                } as React.CSSProperties
+            }
+            className="bg-background text-foreground flex min-h-screen"
+        >
+            <AdminShellInner>{children}</AdminShellInner>
+        </SidebarProvider>
+    );
+}

package/lib/templates/shared/page-resolver-moodle.tsx

@@ -0,0 +1,86 @@
+/**
+ * page-resolver — Moodle AMD page resolver.
+ *
+ * Three resolution modes:
+ *
+ * 1. Core pages (no prefix): "admin/Dashboard" resolves to
+ *    "../extensions/core/pages/admin/Dashboard.tsx" via eager glob.
+ *    Bundled into middag-app.js.
+ *
+ * 2. Extension pages (extension prefix): "ecommerce/pages/Index" resolves
+ *    to "../extensions/ecommerce/pages/Index.tsx" via lazy glob.
+ *    Each non-core extension gets its own AMD chunk.
+ *
+ * 3. External plugin pages (frankenstyle prefix): "local_yourplugin/admin/Index"
+ *    loads the AMD module via RequireJS. Any Moodle plugin can register
+ *    React pages in the MIDDAG shell using this mechanism.
+ */
+
+// Core pages — eager (bundled into middag-app.js)
+const corePages = import.meta.glob("../extensions/core/pages/**/*.tsx", { eager: true }) as Record<
+    string,
+    Record<string, unknown>
+>;
+
+// Non-core extension pages — lazy (separate AMD chunks)
+const extensionPages = import.meta.glob(
+    ["../extensions/*/pages/**/*.tsx", "!../extensions/core/**"],
+    { eager: false },
+) as Record<string, () => Promise<Record<string, unknown>>>;
+
+/**
+ * Frankenstyle pattern: type_name (e.g. local_yourplugin, mod_assign).
+ * A name like "local_yourplugin/admin/Index" is external.
+ * A name like "admin/Dashboard" is local (no underscore in first segment).
+ */
+function isExternalPage(name: string): boolean {
+    const firstSegment = name.split("/")[0];
+    return /^[a-z]+_[a-z]/.test(firstSegment);
+}
+
+/**
+ * Load an external plugin page via RequireJS (Moodle AMD).
+ *
+ * The plugin must build its page as an AMD module that exports a
+ * default React component. The module ID matches the page name directly
+ * (e.g. "local_yourplugin/admin/Index").
+ */
+function loadExternalPage(name: string): Promise<Record<string, unknown>> {
+    return new Promise((resolve, reject) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- RequireJS global
+        const req = (window as any).require;
+        if (!req) {
+            reject(new Error(`RequireJS not available. Cannot load external page: ${name}`));
+            return;
+        }
+        req(
+            [name],
+            (mod: Record<string, unknown>) => resolve(mod),
+            (err: Error) => reject(new Error(`Failed to load external page "${name}": ${err.message}`)),
+        );
+    });
+}
+
+export function resolvePageComponent(name: string) {
+    if (isExternalPage(name)) {
+        return loadExternalPage(name).then((mod) => mod.default ?? mod);
+    }
+
+    // Try core pages first (eager/sync)
+    const corePath = `../extensions/core/pages/${name}.tsx`;
+    const coreMod = corePages[corePath];
+    if (coreMod) {
+        return coreMod.default ?? coreMod;
+    }
+
+    // Try non-core extension pages (lazy/async)
+    const extPath = `../extensions/${name}.tsx`;
+    const extLoader = extensionPages[extPath];
+    if (extLoader) {
+        return extLoader().then((mod) => mod.default ?? mod);
+    }
+
+    throw new Error(
+        `Page not found: ${name}. Available: ${[...Object.keys(corePages), ...Object.keys(extensionPages)].join(", ")}`,
+    );
+}

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.17.0",
+  "version": "0.19.0",
   "type": "module",
   "description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
   "bin": {