create-middag-ui 0.12.0 → 0.13.0

package/README.md

@@ -86,7 +86,7 @@ npx @middag-io/react upgrade        # Check for updates
 
 ## Documentation
 
-- **[Live Demo](https://middag-react-mock.pages.dev)** — 24 screens showing all block types
+- **[Live Demo](https://ui-demo.middag.io)** — 24 screens showing all block types
 - **[Full Documentation](https://ui-docs.middag.io)** — Getting started, host guides, API reference
 - **[GitHub](https://github.com/middag-io/middag-react)** — Source code and issues
 

package/cli.js

@@ -20,32 +20,35 @@
  */
 
 import { join } from "node:path";
-import { detectHost, HOSTS } from "./lib/detect.js";
-import { ask, select, confirm } from "./lib/prompts.js";
+import { detectHost, detectMoodleComponent, HOSTS } from "./lib/detect.js";
+import { ask, confirm, select } from "./lib/prompts.js";
 import { runTokenFlow } from "./lib/auth.js";
 import {
   createTargetDir,
-  scaffoldPackageJson,
-  scaffoldTsconfig,
-  scaffoldViteConfig,
-  scaffoldEslintConfig,
-  scaffoldPrettierConfig,
-  scaffoldIndexHtml,
+  scaffoldDemoDirectPage,
   scaffoldDemoFiles,
-  scaffoldPageExamples,
-  scaffoldFreeApp,
-  scaffoldFreeAdapters,
   scaffoldDevShell,
+  scaffoldEslintConfig,
+  scaffoldFreeAdapters,
+  scaffoldFreeApp,
+  scaffoldFreeRegister,
   scaffoldHostEntry,
-  scaffoldHostViteConfig,
   scaffoldHostThemeCSS,
-  scaffoldFreeRegister,
+  scaffoldHostViteConfig,
+  scaffoldIndexHtml,
+  scaffoldMoodleAdapters,
+  scaffoldMoodlePlugin,
+  scaffoldMoodleTailwind,
+  scaffoldPackageJson,
+  scaffoldPageExamples,
   scaffoldPageResolver,
+  scaffoldPrettierConfig,
   scaffoldRouteHelper,
-  scaffoldDemoDirectPage,
+  scaffoldTsconfig,
+  scaffoldViteConfig,
 } from "./lib/scaffold.js";
 import { runNpmInstall } from "./lib/install.js";
-import { log, success, heading, blank, info } from "./lib/ui.js";
+import { blank, heading, info, log, success } from "./lib/ui.js";
 
 const TOTAL_STEPS = 10;
 const cwd = process.cwd();
@@ -73,6 +76,20 @@ if (hostKey) {
 
 const host = HOSTS[hostKey];
 
+// Moodle: detect frankenstyle component name (e.g. "local_middag", "mod_assign")
+let moodleComponent = null;
+if (hostKey === "moodle") {
+  moodleComponent = detectMoodleComponent(cwd);
+  if (moodleComponent) {
+    success(`Moodle component: ${ moodleComponent }`);
+  } else {
+    info("Could not detect Moodle component from version.php");
+    const answer = await ask("  Frankenstyle component (e.g. local_yourplugin): ");
+    moodleComponent = answer || "local_myplugin";
+    success(`Component: ${ moodleComponent }`);
+  }
+}
+
 // ── Step 2: Ask directory ────────────────────────────────────────────────
 
 heading(2, TOTAL_STEPS, "Target directory");
@@ -156,7 +173,9 @@ scaffoldPageExamples(targetDir);
 // Shared files (both PRO and FREE)
 scaffoldPageResolver(targetDir);
 scaffoldDemoDirectPage(targetDir);
-scaffoldRouteHelper(targetDir, hostKey);
+// Convert frankenstyle "local_middag" → Moodle path "local/middag"
+const moodlePath = moodleComponent ? moodleComponent.replace("_", "/") : null;
+scaffoldRouteHelper(targetDir, hostKey, moodlePath);
 
 if (isPro) {
   try {
@@ -191,6 +210,14 @@ scaffoldHostEntry(targetDir, hostKey);
 scaffoldHostViteConfig(targetDir, hostKey, host);
 scaffoldHostThemeCSS(targetDir, hostKey, host);
 
+// Moodle-specific: AMD plugin + Moodle adapters (ajax, strings, notification)
+if (hostKey === "moodle" && moodleComponent) {
+  scaffoldMoodlePlugin(targetDir, moodleComponent);
+  scaffoldMoodleTailwind(targetDir);
+  scaffoldMoodleAdapters(targetDir, moodleComponent);
+  success(`Moodle: AMD plugin + Tailwind + adapters for ${ moodleComponent }`);
+}
+
 // ── Step 9: npm install ──────────────────────────────────────────────────
 
 heading(9, TOTAL_STEPS, "Installing dependencies");
@@ -237,6 +264,16 @@ console.log(`  Production build for ${host.name}:`);
 console.log(`    npm run ${hostBuildScript}            \u2192 build for ${host.name}`);
 console.log(`    npm run ${hostWatchScript}            \u2192 rebuild on change`);
 
+if (hostKey === "moodle" && moodleComponent) {
+  blank();
+  console.log(`  Moodle integration (${ moodleComponent }):`);
+  console.log("    AMD chunks       \u2192 amd/src/ + amd/build/");
+  console.log("    CSS              \u2192 styles/middag-app.css");
+  console.log("    AMD plugin:       plugins/vite-plugin-moodle-amd.ts");
+  console.log("    Moodle adapters:  src/lib/moodle/ (ajax, strings, notification)");
+  console.log("    Tailwind entry:   src/tailwind.css");
+}
+
 blank();
 console.log(`  Integrate with your ${host.name} plugin:`);
 console.log("    1. Import { ContractPage } from '@middag-io/react'");

package/lib/detect.js

@@ -10,7 +10,7 @@
  */
 
 import { existsSync, readFileSync } from "node:fs";
-import { join, dirname } from "node:path";
+import { dirname, join } from "node:path";
 
 /** Max ancestor levels to walk when searching for platform markers. */
 const MAX_DEPTH = 5;
@@ -54,6 +54,26 @@ function isMoodleRootVersion(filePath) {
   }
 }
 
+/**
+ * Extract Moodle plugin frankenstyle component name from version.php.
+ * Returns e.g. "local_middag", "mod_assign", or null if not found.
+ *
+ * @param {string} cwd - Directory to check (should be the Moodle plugin root)
+ * @returns {string|null} Frankenstyle component name
+ */
+export function detectMoodleComponent(cwd) {
+  const versionFile = join(cwd, "version.php");
+  if (!existsSync(versionFile)) return null;
+
+  try {
+    const content = readFileSync(versionFile, "utf-8");
+    const match = content.match(/\$plugin\s*->\s*component\s*=\s*['"]([^'"]+)['"]/);
+    return match ? match[1] : null;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Detect host platform by checking cwd and ancestor directories.
  *

package/lib/scaffold.js

@@ -8,9 +8,9 @@
  */
 
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { join, basename, dirname } from "node:path";
+import { basename, dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { success, warn, error } from "./ui.js";
+import { error, success, warn } from "./ui.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -94,6 +94,13 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey)
     deps["sonner"] = "^2.0.0";
   }
 
+  // Moodle AMD build needs Tailwind Vite plugin for CSS processing
+  const moodleDevDeps = {};
+  if (hostKey === "moodle") {
+    moodleDevDeps["@tailwindcss/vite"] = "^4.0.0";
+    moodleDevDeps["tailwindcss"] = "^4.0.0";
+  }
+
   const scripts = {
     dev: "vite",
     build: "vite build",
@@ -140,6 +147,7 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey)
       eslint: "^9.0.0",
       prettier: "^3.0.0",
       "prettier-plugin-tailwindcss": "^0.6.0",
+      ...moodleDevDeps,
     },
   };
 
@@ -166,7 +174,7 @@ export function scaffoldTsconfig(targetDir) {
       paths: { "@/*": ["./src/*"] },
       baseUrl: ".",
     },
-    include: ["src"],
+    include: ["src", "mock"],
   };
 
   writeFile(filePath, JSON.stringify(tsconfig, null, 2) + "\n", "tsconfig.json");
@@ -443,6 +451,22 @@ export type { PageContract, BlockDescriptor, SharedProps } from "@middag-io/reac
  *
  * Import order matters \u2014 this file is loaded AFTER @middag-io/react/style.css
  * so overrides here take precedence.
+ *
+ * \u2500\u2500 Built-in themes (PRO) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * PRO users: 4 built-in themes are imported in main.tsx:
+ *   classic (Maia) \u2014 default, warm neutral, shadcn/ui feel
+ *   enterprise     \u2014 Jira/Linear, dense, corporate blue
+ *   soft           \u2014 Notion/Craft, friendly, rose/pink
+ *   midnight       \u2014 GitHub Dark/Vercel, dev-tools
+ *
+ * Switch via: document.body.classList.add("theme-enterprise")
+ * See: https://ui-docs.middag.io/guides/theme#built-in-themes
+ *
+ * \u2500\u2500 Custom themes (all users) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Override :root for global changes, or create a .theme-{name} class
+ * for a switchable theme. Both Community and PRO users can create
+ * unlimited custom themes.
+ * See: https://ui-docs.middag.io/guides/theme#custom-themes
  */
 
 /* \u2500\u2500 Global token overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -461,13 +485,13 @@ export type { PageContract, BlockDescriptor, SharedProps } from "@middag-io/reac
 }
 */
 
-/* \u2500\u2500 Example theme: Ocean \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+/* \u2500\u2500 Example custom theme: Ocean \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
  *
- * A complete theme override scoped to a CSS class.
- * Apply with: <div id="root" class="middag-root theme-ocean">
+ * A complete custom theme scoped to a CSS class.
+ * Apply with: document.body.classList.add("theme-ocean")
  *
- * This is how MIDDAG themes work \u2014 redefine tokens in a scope.
- * The scoped class overrides :root values for everything inside it.
+ * Override colors, radius, density, shadows, and layout in one class.
+ * Dark mode: use :root.dark .theme-ocean for dark overrides.
  */
 
 .theme-ocean {
@@ -483,6 +507,13 @@ export type { PageContract, BlockDescriptor, SharedProps } from "@middag-io/reac
   --info: oklch(0.55 0.14 200);
   --info-foreground: oklch(0.98 0 0);
 
+  /* Shape \u2014 tighter corners, denser rows */
+  --radius: 0.5rem;
+  --radius-sm: 4px;
+  --radius-lg: 8px;
+  --size-table-row: 44px;
+  --size-button-md: 34px;
+
   /* Sidebar */
   --sidebar: oklch(0.15 0.03 230);
   --sidebar-foreground: oklch(0.75 0.02 230);
@@ -494,6 +525,16 @@ export type { PageContract, BlockDescriptor, SharedProps } from "@middag-io/reac
   --sidebar-border: oklch(0.25 0.03 230);
 }
 
+/* Dark mode for custom theme */
+:root.dark .theme-ocean,
+[data-theme="dark"] .theme-ocean {
+  --primary: oklch(0.65 0.14 230);
+  --primary-foreground: oklch(0.1 0.01 230);
+  --background: oklch(0.12 0.01 230);
+  --sidebar: oklch(0.10 0.02 230);
+  --sidebar-foreground: oklch(0.70 0.01 230);
+}
+
 /* \u2500\u2500 Custom project styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
  *
  * Add project-specific styles below. These can target MIDDAG components
@@ -507,17 +548,9 @@ export type { PageContract, BlockDescriptor, SharedProps } from "@middag-io/reac
  *   Radius:  var(--radius-sm|md|lg|xl|2xl|full)
  *   Shadows: var(--shadow-xs|sm|md|lg|xl|2xl)
  *   Motion:  var(--duration-fast|normal|moderate|slow)
+ *   Sizing:  var(--size-button-sm|md|lg), var(--size-table-row),
+ *            var(--size-input), var(--sidebar-width)
  */
-
-/* Example: branded page header */
-/*
-.my-page-header {
-  background: linear-gradient(135deg, var(--primary) 0%, var(--info) 100%);
-  color: var(--primary-foreground);
-  padding: var(--space-6) var(--space-8);
-  border-radius: var(--radius-lg);
-}
-*/
 `,
       "src/theme.css",
     );
@@ -635,7 +668,7 @@ export const dashboardContract: PageContract = {
       `/**
  * Connectors page contract \u2014 INTERMEDIATE example.
  *
- * Demonstrates the "split" layout with three block types:
+ * Demonstrates the "sidebar" layout with three block types:
  *   - card_grid (connector cards in the main region)
  *   - status_strip (health indicators in the aside)
  *   - detail_panel (metadata in the aside)
@@ -659,7 +692,7 @@ export const connectorsContract: PageContract = {
     ],
   },
   layout: {
-    template: "split",
+    template: "sidebar",
     regions: {
       main: [
         {
@@ -1266,7 +1299,8 @@ export function scaffoldHostEntry(targetDir, hostKey) {
   const label = `src/entry-${hostKey}.tsx`;
   if (skipIfExists(filePath, label)) return;
 
-  // Host-specific setup and post-mount code
+  // Host-specific imports, setup, and post-mount code
+  let extraImports = "";
   let setupCode = "";
   let postMountCode = "";
 
@@ -1291,7 +1325,20 @@ export function scaffoldHostEntry(targetDir, hostKey) {
     });
     observer.observe(document.body, { childList: true, subtree: true });`;
   } else if (hostKey === "moodle") {
-    setupCode = `    document.body.classList.add("middag-active");`;
+    extraImports = `import "./tailwind.css";
+import "@fontsource-variable/figtree";`;
+    setupCode = `    document.body.classList.add("middag-active");
+
+    // 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.
+    if (!document.getElementById("middag-portals")) {
+      const portalContainer = document.createElement("div");
+      portalContainer.id = "middag-portals";
+      portalContainer.classList.add("middag-root");
+      document.body.appendChild(portalContainer);
+    }`;
   }
 
   const content = `/**
@@ -1308,7 +1355,7 @@ import { createInertiaApp } from "@inertiajs/react";
 import { I18nProvider, ProgressProvider } from "@middag-io/react";
 import "@middag-io/react/style.css";
 import "./theme.css";
-import { registerDefaults } from "./app/register";
+${ extraImports }import { registerDefaults } from "./app/register";
 import { resolvePageComponent } from "./app/page-resolver";
 
 registerDefaults();
@@ -1365,17 +1412,71 @@ export function scaffoldHostViteConfig(targetDir, hostKey, host) {
         },
       },`;
   } else if (hostKey === "moodle") {
-    outDir = `resolve(__dirname, "../amd/build")`;
-    formats = `["iife"]`;
-    libName = `"MiddagUI"`;
-    fileName = `() => "app.js"`;
-    extraRollup = `
+    // Moodle uses AMD format with vite-plugin-moodle-amd.
+    // Generate a dedicated AMD config instead of the shared lib template.
+    const content = `/**
+ * Vite build config for Moodle — AMD production build.
+ *
+ * Usage:
+ *   npm run build:moodle     \u2192 AMD chunks to dist/ + amd/
+ *   npm run watch:moodle     \u2192 rebuild on change
+ *
+ * Output: AMD modules compatible with Moodle's RequireJS loader.
+ * vite-plugin-moodle-amd rewrites chunk paths and copies to amd/.
+ * CSS is copied to styles/middag-app.css (Moodle auto-discovers it).
+ *
+ * The dev server (\`npm run dev\`) uses vite.config.ts instead.
+ */
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import moodleAmd from "./plugins/vite-plugin-moodle-amd";
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), moodleAmd()],
+  define: { "process.env.NODE_ENV": JSON.stringify("production") },
+  resolve: { alias: { "@/": resolve(__dirname, "src") + "/" } },
+  build: {
+    outDir: resolve(__dirname, "dist"),
+    emptyOutDir: true,
+    minify: "esbuild",
+    cssCodeSplit: false,
+    rollupOptions: {
+      input: { "middag-app": resolve(__dirname, "src/entry-moodle.tsx") },
+      external: ["core/ajax", "core/str", "core/notification", "jquery"],
       output: {
-        assetFileNames: (assetInfo) => {
-          if (assetInfo.name?.endsWith(".css")) return "style.css";
-          return assetInfo.name || "[name]-[hash][extname]";
+        format: "amd",
+        dir: resolve(__dirname, "dist"),
+        entryFileNames: "[name].js",
+        chunkFileNames: "[name].js",
+        manualChunks(id) {
+          if (
+            id.includes("node_modules/react/") ||
+            id.includes("node_modules/react-dom/") ||
+            id.includes("node_modules/scheduler/") ||
+            id.includes("node_modules/@inertiajs/")
+          ) {
+            return "react-vendor-lazy";
+          }
+          if (
+            id.includes("node_modules/@radix-ui/") ||
+            id.includes("node_modules/@base-ui/") ||
+            id.includes("node_modules/class-variance-authority/")
+          ) {
+            return "react-ui-lazy";
+          }
+          if (id.includes("node_modules/@tanstack/")) {
+            return "react-table-lazy";
+          }
         },
-      },`;
+      },
+    },
+  },
+});
+`;
+    writeFile(filePath, content, label);
+    return;
   } else {
     outDir = `resolve(__dirname, "../dist")`;
     formats = `["es"]`;
@@ -1498,8 +1599,18 @@ body.middag-active {
   } else if (hostKey === "moodle") {
     hostSection = `
 
-/* \u2500\u2500 Moodle Boost integration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
- * Active when MIDDAG mounts inside Moodle admin (body.middag-active).
+/* ── Moodle Boost integration ────────────────────────────────────────────
+ * Active when MIDDAG mounts inside Moodle (body.middag-active).
+ *
+ * CSS Isolation Strategy:
+ *
+ * OUTWARD (MIDDAG → Moodle):
+ *   Tailwind utility classes only match elements that carry them.
+ *   Known collisions with Bootstrap are neutralized below.
+ *
+ * INWARD (Moodle → MIDDAG):
+ *   .middag-root blocks inherited Moodle/Bootstrap styles.
+ *   Portals render inside #middag-portals (also .middag-root).
  */
 
 body.middag-active {
@@ -1508,7 +1619,31 @@ body.middag-active {
 
 body.middag-active [data-slot="sidebar-container"] {
   left: 0 !important;
-}`;
+}
+
+/* ── Outward isolation: Tailwind ↔ Bootstrap collision fixes ─────────────
+ *
+ * .collapse — Bootstrap uses display:none/block for collapsible fieldsets.
+ *   Tailwind emits \`.collapse { visibility: collapse }\` which breaks them.
+ *   Neutralize outside the React tree (.middag-root).
+ *
+ * Add new entries here as collisions are discovered.
+ */
+.collapse:not(.middag-root .collapse, .middag-root.collapse) {
+  visibility: visible !important;
+}
+
+/* ── Theme bridge: inherit Moodle Boost primary color ────────────────────
+ *
+ * If Boost defines --bs-primary, map it to --middag-brand so the
+ * MIDDAG UI inherits the institution's brand color automatically.
+ * Uncomment and adjust if your Moodle theme uses a different variable.
+ */
+/*
+:root {
+  --middag-brand: var(--bs-primary);
+}
+*/`;
   } else {
     hostSection = `
 
@@ -1817,7 +1952,12 @@ export function scaffoldPageResolver(targetDir) {
  *
  * @param {string} hostKey - 'wordpress' | 'moodle' | 'custom'
  */
-export function scaffoldRouteHelper(targetDir, hostKey) {
+/**
+ * @param {string} targetDir
+ * @param {string} hostKey - 'wordpress' | 'moodle' | 'custom'
+ * @param {string} [pluginSlug] - For Moodle: slug portion of frankenstyle (e.g. "middag" from "local_middag")
+ */
+export function scaffoldRouteHelper(targetDir, hostKey, pluginSlug) {
   ensureDir(join(targetDir, "src", "lib"));
   const filePath = join(targetDir, "src", "lib", "routes.ts");
   if (skipIfExists(filePath, "src/lib/routes.ts")) return;
@@ -1830,7 +1970,13 @@ export function scaffoldRouteHelper(targetDir, hostKey) {
   const template = templateMap[hostKey] || templateMap.wordpress;
 
   try {
-    writeFile(filePath, readTemplate(template), "src/lib/routes.ts");
+    let content = readTemplate(template);
+    if (hostKey === "moodle" && pluginSlug) {
+      // Convert frankenstyle slug to Moodle path: "middag" with type prefix "local" → "local/middag"
+      // pluginSlug is the name part; the full frankenstyle comes from cli.js
+      content = content.replace(/__PLUGIN_PATH__/g, pluginSlug);
+    }
+    writeFile(filePath, content, "src/lib/routes.ts");
   } catch {
     // Fallback to WP template if host-specific one doesn't exist
     writeFile(filePath, readTemplate("templates/shared/route-helper-wp.ts"), "src/lib/routes.ts");
@@ -1847,3 +1993,58 @@ export function scaffoldDemoDirectPage(targetDir) {
   if (skipIfExists(filePath, "src/pages/DemoPage.tsx")) return;
   writeFile(filePath, readTemplate("templates/shared/demo-page.tsx"), "src/pages/DemoPage.tsx");
 }
+
+// ── Moodle-specific scaffold functions ────────────────────────────────────
+
+/**
+ * Scaffold vite-plugin-moodle-amd: plugins/vite-plugin-moodle-amd.ts.
+ * Converts Rollup AMD output to Moodle's RequireJS format and copies
+ * built files to amd/src/ + amd/build/ + styles/.
+ *
+ * @param {string} targetDir - Absolute path to UI dir
+ * @param {string} pluginPrefix - Moodle frankenstyle (e.g. "local_middag")
+ */
+export function scaffoldMoodlePlugin(targetDir, pluginPrefix) {
+  ensureDir(join(targetDir, "plugins"));
+  const filePath = join(targetDir, "plugins", "vite-plugin-moodle-amd.ts");
+  if (skipIfExists(filePath, "plugins/vite-plugin-moodle-amd.ts")) return;
+  const content = readTemplate("templates/shared/vite-plugin-moodle-amd.ts")
+      .replace(/__PLUGIN_PREFIX__/g, pluginPrefix);
+  writeFile(filePath, content, "plugins/vite-plugin-moodle-amd.ts");
+}
+
+/**
+ * Scaffold Tailwind CSS entry for Moodle AMD build: src/tailwind.css.
+ * Brings in the Tailwind engine so local pages get their utilities compiled.
+ */
+export function scaffoldMoodleTailwind(targetDir) {
+  ensureDir(join(targetDir, "src"));
+  const filePath = join(targetDir, "src", "tailwind.css");
+  if (skipIfExists(filePath, "src/tailwind.css")) return;
+  writeFile(filePath, readTemplate("templates/shared/tailwind.css"), "src/tailwind.css");
+}
+
+/**
+ * Scaffold Moodle AMD adapters: src/lib/moodle/.
+ * Typed wrappers for core/ajax, core/str, core/notification.
+ *
+ * @param {string} targetDir - Absolute path to UI dir
+ * @param {string} pluginPrefix - Moodle frankenstyle (e.g. "local_middag")
+ */
+export function scaffoldMoodleAdapters(targetDir, pluginPrefix) {
+  ensureDir(join(targetDir, "src", "lib", "moodle"));
+
+  const files = [
+    { template: "templates/shared/moodle-ajax.ts", dest: "src/lib/moodle/ajax.ts" },
+    { template: "templates/shared/moodle-strings.ts", dest: "src/lib/moodle/strings.ts" },
+    { template: "templates/shared/moodle-notification.ts", dest: "src/lib/moodle/notification.ts" },
+  ];
+
+  for (const { template, dest } of files) {
+    const filePath = join(targetDir, dest);
+    if (skipIfExists(filePath, dest)) continue;
+    const content = readTemplate(template)
+        .replace(/__PLUGIN_PREFIX__/g, pluginPrefix);
+    writeFile(filePath, content, dest);
+  }
+}

package/lib/templates/pro/app.tsx

@@ -6,13 +6,13 @@
  *   mock/navigation.ts   — sidebar structure
  *   mock/data.ts         — synthetic page props
  */
-import { useEffect } from "react";
-import { BrowserRouter, Routes, useNavigate } from "react-router";
-import { I18nProvider } from "@middag-io/react";
-import { MockPageProvider, MockI18nProvider, setMockNavigate } from "@middag-io/react/mock";
-import { buildNavigation } from "../mock/navigation";
-import { sharedProps } from "../mock/data";
-import { AppRoutes } from "../mock/routes";
+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 {buildNavigation} from "../mock/navigation";
+import {sharedProps} from "../mock/data";
+import {AppRoutes} from "../mock/routes";
 
 let _navigate: ((to: string) => void) | null = null;
 function NavigateBridge() {
@@ -24,7 +24,7 @@ function NavigateBridge() {
   return null;
 }
 if (typeof window !== "undefined") {
-  (window as any).__MIDDAG_MOCK_NAVIGATE__ = (to: string) => {
+  (window as Record<string, unknown>).__MIDDAG_MOCK_NAVIGATE__ = (to: string) => {
     if (_navigate) _navigate(to);
   };
 }

package/lib/templates/pro/main.tsx

@@ -1,13 +1,18 @@
 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 { registerShell } from "@middag-io/react";
 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 "./theme.css";
 import "@fontsource-variable/figtree";
-import { registerDefaults } from "./app/register";
 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.
 registerDefaults();
 registerShell("product", MockProductShell);
 

package/lib/templates/pro/register-pro.ts

@@ -2,8 +2,14 @@
  * register — selective registration for this plugin's UI (PRO).
  *
  * Registers shells, layouts, and blocks this plugin uses.
+ * All 13 standard blocks (exported from the barrel) are included.
  * Add or remove registrations as your pages need them.
  *
+ * Heavy lazy-loaded blocks (chart_panel, kanban_board, flow_editor,
+ * form_builder, condition_tree, sentence_builder) are NOT included here.
+ * To use them, import via deep path and registerBlock() individually,
+ * or call registerDefaults() from @middag-io/react instead.
+ *
  * Full catalog: https://docs.middag.io/blocks
  */
 
@@ -12,12 +18,14 @@ import {
   registerLayout,
   registerBlock,
   // Shells
-  HostProductShell,
+  ProductShell,
+  ImmersiveShell,
   // Layouts
   StackLayout,
-  SplitLayout,
+  SidebarLayout,
   DashboardLayout,
-  // Blocks
+  WizardLayout,
+  // Blocks (all 13 standard barrel exports)
   DenseTableBlock,
   MetricCardBlock,
   EmptyStateBlock,
@@ -27,6 +35,10 @@ import {
   TabbedPanelBlock,
   ActivityTimelineBlock,
   WorkflowProgressBlock,
+  MarkdownPanelBlock,
+  CardGridBlock,
+  ActionGridBlock,
+  LinkListBlock,
 } from "@middag-io/react";
 
 let registered = false;
@@ -36,14 +48,16 @@ export function registerDefaults(): void {
   registered = true;
 
   // Shells
-  registerShell("product", HostProductShell);
+  registerShell("product", ProductShell);
+  registerShell("immersive", ImmersiveShell);
 
   // Layouts
   registerLayout("stack", StackLayout);
-  registerLayout("split", SplitLayout);
+  registerLayout("sidebar", SidebarLayout);
   registerLayout("dashboard", DashboardLayout);
+  registerLayout("wizard", WizardLayout);
 
-  // Blocks — add more as your pages need them
+  // Blocks — all 13 standard blocks from the barrel
   // See: https://docs.middag.io/blocks for the full catalog
   registerBlock("dense_table", DenseTableBlock);
   registerBlock("metric_card", MetricCardBlock);
@@ -54,4 +68,8 @@ export function registerDefaults(): void {
   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);
 }

package/lib/templates/shared/moodle-ajax.ts

@@ -0,0 +1,33 @@
+/**
+ * Typed adapter for Moodle's core/ajax AMD module.
+ *
+ * Wraps Ajax.call() with generics for type-safe web service calls.
+ * React components use this instead of importing core/ajax directly.
+ */
+
+// @ts-expect-error AMD external — resolved by Moodle's RequireJS at runtime
+import Ajax from "core/ajax";
+
+export interface WebServiceCall {
+  methodname: string;
+  args: Record<string, unknown>;
+}
+
+/**
+ * Call a single Moodle web service and return the typed result.
+ */
+export async function callWebService<T = unknown>(
+  call: WebServiceCall,
+): Promise<T> {
+  const [result] = await Ajax.call([call]);
+  return result as T;
+}
+
+/**
+ * Call multiple Moodle web services in a single request.
+ */
+export async function callWebServices(
+  calls: WebServiceCall[],
+): Promise<unknown[]> {
+  return Ajax.call(calls);
+}

package/lib/templates/shared/moodle-notification.ts

@@ -0,0 +1,23 @@
+/**
+ * Typed adapter for Moodle's core/notification AMD module.
+ *
+ * Centralises error reporting so React components never import
+ * Moodle AMD externals directly.
+ */
+
+// @ts-expect-error AMD external — resolved by Moodle's RequireJS at runtime
+import Notification from "core/notification";
+
+/**
+ * Report an exception to Moodle's notification system.
+ */
+export function reportException(error: Error): void {
+  Notification.exception(error);
+}
+
+/**
+ * Show an alert dialog via Moodle's notification system.
+ */
+export function alert(title: string, message: string): void {
+  Notification.alert(title, message);
+}

package/lib/templates/shared/moodle-strings.ts

@@ -0,0 +1,62 @@
+/**
+ * Typed adapter for Moodle's core/str AMD module.
+ *
+ * Wraps the native `get_strings` function with TypeScript types
+ * and returns a key→value Record for convenient consumption.
+ *
+ * Can be used as the asyncResolver for I18nProvider:
+ *
+ *   import { getString } from "@/lib/moodle/strings";
+ *   <I18nProvider asyncResolver={getString}>
+ *
+ * Change the default component below to match your plugin's frankenstyle.
+ */
+
+// @ts-expect-error AMD external — resolved by Moodle's RequireJS at runtime
+import {get_strings} from "core/str";
+
+export interface StringRequest {
+  key: string;
+  component?: string;
+  param?: string | number;
+}
+
+// ── CHANGE THIS to your plugin's frankenstyle name ──
+const DEFAULT_COMPONENT = "__PLUGIN_PREFIX__";
+
+/**
+ * Load translated strings from Moodle's string manager.
+ *
+ * @param requests - Array of string requests (key + optional component/param)
+ * @returns Record mapping each key to its translated string
+ */
+export async function getStrings(
+  requests: StringRequest[],
+): Promise<Record<string, string>> {
+  const moodleRequests = requests.map((r) => ({
+    key: r.key,
+    component: r.component ?? DEFAULT_COMPONENT,
+    param: r.param,
+  }));
+
+  const results: string[] = await get_strings(moodleRequests);
+
+  const out: Record<string, string> = {};
+  results.forEach((translated, index) => {
+    out[requests[index].key] = translated;
+  });
+
+  return out;
+}
+
+/**
+ * Load a single translated string.
+ * Compatible with I18nProvider's AsyncStringResolver signature.
+ */
+export async function getString(
+  key: string,
+  component = DEFAULT_COMPONENT,
+): Promise<string> {
+  const result = await getStrings([{key, component}]);
+  return result[key] ?? key;
+}

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

@@ -1,6 +1,6 @@
-import { ContractPage } from "@middag-io/react";
-import { usePage } from "@inertiajs/react";
-import type { PageContract, ContractPageProps } from "@middag-io/react";
+import type {ContractPageProps, PageContract} from "@middag-io/react";
+import {ContractPage} from "@middag-io/react";
+import {usePage} from "@inertiajs/react";
 
 // Direct pages — eager loaded (custom React pages in pages/)
 const directPages = import.meta.glob("../pages/**/*.tsx", { eager: true }) as Record<
@@ -12,6 +12,7 @@ const directPages = import.meta.glob("../pages/**/*.tsx", { eager: true }) as Re
  * Fallback component — reads PageContract from Inertia props and renders
  * it via the lib's ContractPage. Used when no direct page matches.
  */
+// eslint-disable-next-line react-refresh/only-export-components
 function InertiaContractPage() {
   const { props } = usePage<{
     contract: PageContract;

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

@@ -16,17 +16,23 @@ import {
   registerLayout,
   registerBlock,
   // Shells
-  HostProductShell,
+  ProductShell,
+  ImmersiveShell,
   // Layouts
   StackLayout,
-  SplitLayout,
+  SidebarLayout,
   DashboardLayout,
+  WizardLayout,
   // Blocks
   DenseTableBlock,
   MetricCardBlock,
   EmptyStateBlock,
   DetailPanelBlock,
   FormPanelBlock,
+  CardGridBlock,
+  StatusStripBlock,
+  TabbedPanelBlock,
+  LinkListBlock,
 } from "@middag-io/react";
 
 let registered = false;
@@ -36,12 +42,14 @@ export function registerDefaults(): void {
   registered = true;
 
   // Shells
-  registerShell("product", HostProductShell);
+  registerShell("product", ProductShell);
+  registerShell("immersive", ImmersiveShell);
 
   // Layouts
   registerLayout("stack", StackLayout);
-  registerLayout("split", SplitLayout);
+  registerLayout("sidebar", SidebarLayout);
   registerLayout("dashboard", DashboardLayout);
+  registerLayout("wizard", WizardLayout);
 
   // Blocks — add more as your pages need them
   registerBlock("dense_table", DenseTableBlock);
@@ -49,4 +57,8 @@ export function registerDefaults(): void {
   registerBlock("empty_state", EmptyStateBlock);
   registerBlock("detail_panel", DetailPanelBlock);
   registerBlock("form_panel", FormPanelBlock);
+  registerBlock("card_grid", CardGridBlock);
+  registerBlock("status_strip", StatusStripBlock);
+  registerBlock("tabbed_panel", TabbedPanelBlock);
+  registerBlock("link_list", LinkListBlock);
 }

package/lib/templates/shared/route-helper-custom.ts

@@ -0,0 +1,44 @@
+/**
+ * Route helper — custom host URL builder.
+ *
+ * Abstracts away the difference between:
+ *   - Dev server (mock navigate via react-router)
+ *   - Production (your host platform's URL scheme)
+ *
+ * Adjust the production URL pattern below to match your backend routing.
+ */
+
+declare global {
+  interface Window {
+    __MIDDAG_MOCK_NAVIGATE__?: (to: string) => void;
+  }
+}
+
+/**
+ * Build a URL for a given path.
+ *
+ * @param path - Route path (e.g. "/connectors", "/settings/general")
+ * @param params - Optional query parameters
+ * @returns Full URL string
+ *
+ * @example
+ *   route("/connectors")
+ *   // dev  → navigates via react-router
+ *   // prod → "/app/connectors"
+ *
+ *   route("/settings", { tab: "general" })
+ *   // prod → "/app/settings?tab=general"
+ */
+export function route(path: string, params?: Record<string, string>): string {
+  // Dev mode — mock navigate (react-router)
+  if (typeof window !== "undefined" && window.__MIDDAG_MOCK_NAVIGATE__) {
+    const url = path + (params ? "?" + new URLSearchParams(params).toString() : "");
+    window.__MIDDAG_MOCK_NAVIGATE__(url);
+    return url;
+  }
+
+  // Production — adjust base path to match your backend routing
+  const base = "/app";
+  const query = params ? "?" + new URLSearchParams(params).toString() : "";
+  return `${base}${path}${query}`;
+}

package/lib/templates/shared/route-helper-moodle.ts

@@ -0,0 +1,66 @@
+/**
+ * Route helper — generates correct URLs for Moodle production vs dev mock.
+ *
+ * Moodle routing modes:
+ *
+ *   Classic (Moodle ≤ 5.0):
+ *     /local/{plugin}/index.php/{path}
+ *
+ *   New router (Moodle 5.1+, opt-in):
+ *     /r.php/{frankenstyle}/{path}
+ *
+ *   Dev mock (BrowserRouter):
+ *     /{path} directly
+ *
+ * In production, most navigation URLs come from PHP via Inertia shared props
+ * (navigation payload, PageContract actions). Use this helper only when
+ * the React side needs to build a URL programmatically (e.g. router.visit).
+ *
+ * Detection: window.__MIDDAG_MOCK_NAVIGATE__ → dev mock
+ *            window.__MIDDAG_ROUTE_BASE__    → production base (set by PHP)
+ */
+
+/** Base path set by the Moodle bootstrap. Falls back to classic format. */
+const CLASSIC_BASE = "/__PLUGIN_PATH__/index.php";
+
+function getBase(): string {
+  if (typeof window !== "undefined") {
+    // Dev mock — no base prefix
+    if ("__MIDDAG_MOCK_NAVIGATE__" in window) return "";
+
+    // Production — PHP sets the base in the bootstrap HTML
+    // Supports both classic (/local/plugin/index.php) and r.php (/r.php/frankenstyle)
+    const custom = (window as Record<string, unknown>).__MIDDAG_ROUTE_BASE__;
+    if (typeof custom === "string") return custom;
+  }
+
+  return CLASSIC_BASE;
+}
+
+/**
+ * Build a URL for a route within this Moodle plugin.
+ *
+ * @param path   - Route path (e.g. "/admin/dashboard", "/connectors/1")
+ * @param params - Optional URL search params (e.g. { courseid: "5" })
+ *
+ * @example
+ *   route("/admin/dashboard")
+ *   // dev:  /admin/dashboard
+ *   // prod: /local/myplugin/index.php/admin/dashboard
+ *   // 5.1:  /r.php/local_myplugin/admin/dashboard
+ *
+ *   route("/admin/logs", { level: "error" })
+ *   // → .../admin/logs?level=error
+ */
+export function route(
+  path: string,
+  params?: Record<string, string>,
+): string {
+  const base = getBase();
+  const url = `${base}${path}`;
+
+  if (!params) return url;
+
+  const search = new URLSearchParams(params).toString();
+  return `${url}?${search}`;
+}

package/lib/templates/shared/route-helper-wp.ts

@@ -1,26 +1,58 @@
 /**
  * Route helper — generates correct URLs for WordPress production vs dev mock.
  *
- * In production (Inertia): /wp-admin/admin.php?page=middag-{slug}
- * In dev mock (BrowserRouter): /{slug} directly
+ * Production (Inertia):
+ *   /wp-admin/admin.php?page=middag-{slug}
+ *   /wp-admin/admin.php?page=middag-{slug}&route={path}
  *
- * Detection: if window.__MIDDAG_MOCK_NAVIGATE__ exists, we're in dev mock.
+ * Dev mock (BrowserRouter):
+ *   /{path} directly
+ *
+ * Detection: window.__MIDDAG_MOCK_NAVIGATE__ → dev mock
  */
 
+function isMock(): boolean {
+  return typeof window !== "undefined" && "__MIDDAG_MOCK_NAVIGATE__" in window;
+}
+
 /**
  * Build a URL for a MIDDAG admin page.
  *
- * Detection is lazy (checked per call) because module evaluation order
- * means the mock flag may not be set when this module first loads.
- *
  * @param slug  - Domain slug (e.g. "entitlements", "organizations")
- * @param path  - Optional sub-path (e.g. "/entitlements/1/edit")
+ * @param path  - Optional sub-path for router dispatch (e.g. "/entitlements/1/edit")
+ * @param params - Optional extra query params (e.g. { tab: "billing" })
+ *
+ * @example
+ *   route("dashboard")
+ *   // dev:  /dashboard
+ *   // prod: /wp-admin/admin.php?page=middag-dashboard
+ *
+ *   route("entitlements", "/entitlements/1/edit")
+ *   // dev:  /entitlements/1/edit
+ *   // prod: /wp-admin/admin.php?page=middag-entitlements&route=/entitlements/1/edit
+ *
+ *   route("entitlements", "/entitlements/1", { tab: "billing" })
+ *   // dev:  /entitlements/1?tab=billing
+ *   // prod: /wp-admin/admin.php?page=middag-entitlements&route=/entitlements/1&tab=billing
  */
-export function route(slug: string, path?: string): string {
-  if (typeof window !== "undefined" && "__MIDDAG_MOCK_NAVIGATE__" in window) {
-    return path ?? `/${slug}`;
+export function route(
+  slug: string,
+  path?: string,
+  params?: Record<string, string>,
+): string {
+  if (isMock()) {
+    const url = path ?? `/${slug}`;
+    if (!params) return url;
+    return `${url}?${new URLSearchParams(params).toString()}`;
   }
 
   const base = `/wp-admin/admin.php?page=middag-${slug}`;
-  return path ? `${base}&route=${path}` : base;
+  const parts = [base];
+  if (path) parts.push(`route=${encodeURIComponent(path)}`);
+  if (params) {
+    for (const [k, v] of Object.entries(params)) {
+      parts.push(`${encodeURIComponent(k)}=${encodeURIComponent(v)}`);
+    }
+  }
+  return parts.join("&");
 }

package/lib/templates/shared/tailwind.css

@@ -0,0 +1,12 @@
+/*
+ * Tailwind CSS entry — processed by @tailwindcss/vite during AMD build.
+ *
+ * This file brings in the Tailwind engine so that any utility classes
+ * used in your local pages (src/pages/) and components (src/blocks/,
+ * src/components/) are compiled into the final CSS.
+ *
+ * The lib's pre-compiled style.css covers all @middag-io/react components.
+ * This file covers YOUR custom code. Both are merged into a single
+ * styles/middag-app.css by the Moodle build.
+ */
+@import "tailwindcss";

package/lib/templates/shared/vite-plugin-moodle-amd.ts

@@ -0,0 +1,122 @@
+/**
+ * vite-plugin-moodle-amd — Rewrites Rollup AMD output for Moodle's RequireJS.
+ *
+ * Rollup's AMD format with code splitting uses relative paths between chunks
+ * (e.g. './react-vendor-lazy'). Moodle's RequireJS can resolve these relative
+ * to the plugin prefix, but only when the module namespace is correct.
+ *
+ * This plugin:
+ * 1. Rewrites relative inter-chunk paths to absolute `{PLUGIN_PREFIX}/{name}` format
+ * 2. Adds named define IDs for better debuggability
+ * 3. Copies built JS to amd/src/ (dev) and amd/build/ (prod .min.js)
+ * 4. Copies CSS to styles/ so Moodle auto-discovers it
+ *
+ * Change PLUGIN_PREFIX below to match your plugin's frankenstyle name
+ * (e.g. 'local_yourplugin', 'mod_yourmod').
+ */
+
+import type {Plugin, ResolvedConfig} from "vite";
+import {copyFileSync, existsSync, mkdirSync, readdirSync} from "node:fs";
+import {basename, resolve} from "node:path";
+
+// ── CHANGE THIS to your Moodle plugin's frankenstyle name ──
+const PLUGIN_PREFIX = "__PLUGIN_PREFIX__";
+
+export default function moodleAmd(): Plugin {
+  let config: ResolvedConfig;
+
+  return {
+    name: "vite-plugin-moodle-amd",
+    apply: "build",
+
+    configResolved(resolved) {
+      config = resolved;
+    },
+
+    /**
+     * Post-process each AMD chunk to rewrite paths.
+     *
+     * Rollup generates: define(['./react-vendor-lazy', ...], function(...) { ... })
+     * We rewrite to:     define('PLUGIN_PREFIX/middag-app', ['PLUGIN_PREFIX/react-vendor-lazy', ...], function(...) { ... })
+     */
+    generateBundle(_, bundle) {
+      for (const [fileName, chunk] of Object.entries(bundle)) {
+        if (chunk.type !== "chunk") continue;
+
+        let code = chunk.code;
+        const moduleName = fileName.replace(/\.js$/, "");
+
+        // Rewrite relative AMD dependencies to absolute Moodle paths.
+        code = code.replace(
+          /define\(\[([\s\S]*?)\]/,
+          (match, deps: string) => {
+            const rewritten = deps.replace(
+              /(["'])\.\/([^"']+)\1/g,
+              `$1${PLUGIN_PREFIX}/$2$1`,
+            );
+            return `define([${rewritten}]`;
+          },
+        );
+
+        // Add named module ID.
+        if (!code.includes(`define('${PLUGIN_PREFIX}/${moduleName}'`)) {
+          code = code.replace(
+            /define\(\[/,
+            `define('${PLUGIN_PREFIX}/${moduleName}',[`,
+          );
+        }
+
+        chunk.code = code;
+      }
+    },
+
+    /**
+     * After each build, copy chunks to amd/src/ and amd/build/.
+     * Makes `npm run watch:moodle` auto-update both directories.
+     */
+    closeBundle() {
+      const outDir = config.build.outDir;
+      const pluginRoot = resolve(config.root, "..");
+      const amdSrc = resolve(pluginRoot, "amd/src");
+      const amdBuild = resolve(pluginRoot, "amd/build");
+
+      if (!existsSync(outDir)) return;
+      if (!existsSync(amdSrc)) mkdirSync(amdSrc, {recursive: true});
+      if (!existsSync(amdBuild)) mkdirSync(amdBuild, {recursive: true});
+
+      const jsFiles = readdirSync(outDir).filter((f) => f.endsWith(".js"));
+
+      for (const file of jsFiles) {
+        const src = resolve(outDir, file);
+        const name = basename(file, ".js");
+
+        copyFileSync(src, resolve(amdSrc, file));
+        copyFileSync(src, resolve(amdBuild, `${name}.min.js`));
+      }
+
+      if (jsFiles.length > 0) {
+        console.log(
+          `[moodle-amd] ${jsFiles.length} chunk(s) → amd/src/ + amd/build/`,
+        );
+      }
+
+      // Copy CSS to styles/ so Moodle auto-discovers it.
+      const assetsDir = resolve(outDir, "assets");
+      if (existsSync(assetsDir)) {
+        const stylesDir = resolve(pluginRoot, "styles");
+        if (!existsSync(stylesDir)) mkdirSync(stylesDir, {recursive: true});
+
+        const cssFiles = readdirSync(assetsDir).filter((f) =>
+          f.endsWith(".css"),
+        );
+        for (const file of cssFiles) {
+          copyFileSync(
+            resolve(assetsDir, file),
+            resolve(stylesDir, "middag-app.css"),
+          );
+          console.log(`[moodle-amd] ${file} → styles/middag-app.css`);
+        }
+      }
+    },
+  };
+}

package/package.json

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