create-middag-ui 0.22.0 → 0.24.0

package/lib/scaffold.js

@@ -160,8 +160,8 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey,
       "@types/react-dom": "^19.0.0",
       react: "^19.0.0",
       "react-dom": "^19.0.0",
-      "@inertiajs/react": "^2.0.0",
-      "@inertiajs/core": "^2.0.0",
+      "@inertiajs/react": "^3.0.0",
+      "@inertiajs/core": "^3.0.0",
       typescript: "^5.7.0",
       vite: "^6.0.0",
       "@vitejs/plugin-react": "^4.0.0",
@@ -222,9 +222,14 @@ export function scaffoldViteConfig(targetDir, host, registryPath) {
   const filePath = join(targetDir, "vite.config.ts");
   if (skipIfExists(filePath, "vite.config.ts")) return;
 
-  const optimizeInclude = registryPath === "github"
-    ? '["@middag-io/react", "@middag-io/react-pro", "@middag-io/react-demo"]'
-    : '["@middag-io/react"]';
+  // PRO inherits the dev harness from @middag-io/react-demo, so pre-bundle the
+  // suite. FREE aliases @inertiajs/* to local source adapters; pre-bundling
+  // @middag-io/react would inline a second copy of those adapters (a duplicate
+  // React context), so the shell's usePage() reads empty nav/contract. Exclude
+  // it so the lib and the app share one adapter instance.
+  const optimizeDepsBlock = registryPath === "github"
+    ? 'include: ["@middag-io/react", "@middag-io/react-pro", "@middag-io/react-demo"],'
+    : 'exclude: ["@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.
@@ -251,7 +256,7 @@ export default defineConfig({
   plugins: [react()],
   server: { port: ${host.port} },
   optimizeDeps: {
-    include: ${optimizeInclude},
+    ${optimizeDepsBlock}
   },
   resolve: {
     alias: {
@@ -419,10 +424,13 @@ export function scaffoldDemoFiles(targetDir) {
 
 import type { BlockProps } from "@middag-io/react";
 
+import { Greeting } from "../components/greeting";
+
 /** Data shape for this block \u2014 define what the backend sends. */
 export interface HelloBlockData {
   greeting: string;
   name: string;
+  role?: string;
 }
 
 /** Custom block component. Receives block descriptor from the PageContract. */
@@ -432,9 +440,10 @@ export function HelloBlock({ block }: BlockProps<HelloBlockData>) {
       <h2 className="text-lg font-semibold text-foreground">
         {block.data.greeting}
       </h2>
-      <p className="mt-2 text-muted-foreground">
-        Welcome, {block.data.name}! This is a custom block.
+      <p className="mt-2 mb-4 text-muted-foreground">
+        This is a custom block rendering a standalone component:
       </p>
+      <Greeting name={block.data.name} role={block.data.role} />
       <p className="mt-4 text-sm text-muted-foreground">
         Edit this file at <code className="text-xs bg-muted px-1 py-0.5 rounded">src/blocks/hello-block.tsx</code>
       </p>
@@ -517,8 +526,8 @@ 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:
+ * \u2500\u2500 Built-in themes \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
+ * classic ships with Community; PRO adds enterprise/soft/midnight (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
@@ -693,6 +702,11 @@ export const dashboardContract: PageContract = {
         },
       ],
       content: [
+        {
+          key: "welcome",
+          type: "hello_block",
+          data: { greeting: "Hello from a custom block!", name: "Developer", role: "MIDDAG UI" },
+        },
         {
           key: "recent_activity",
           type: "dense_table",
@@ -702,14 +716,14 @@ export const dashboardContract: PageContract = {
               { key: "user", label: "User", sortable: true },
               { key: "action", label: "Action" },
               { key: "date", label: "Date", sortable: true },
-              { key: "status", label: "Status", type: "status" },
+              { key: "status", label: "Status", variant: "badge" },
             ],
             rows: [
-              { id: 1, user: "Alice Johnson", action: "Completed module", date: "2024-01-15", status: { label: "Complete", appearance: "success" } },
-              { id: 2, user: "Bob Smith", action: "Started course", date: "2024-01-15", status: { label: "In Progress", appearance: "info" } },
-              { id: 3, user: "Carol Davis", action: "Failed quiz", date: "2024-01-14", status: { label: "Failed", appearance: "danger" } },
-              { id: 4, user: "Dave Wilson", action: "Enrolled", date: "2024-01-14", status: { label: "New", appearance: "neutral" } },
-              { id: 5, user: "Eve Brown", action: "Completed course", date: "2024-01-13", status: { label: "Complete", appearance: "success" } },
+              { id: 1, user: "Alice Johnson", action: "Completed module", date: "2024-01-15", status: "Completed" },
+              { id: 2, user: "Bob Smith", action: "Started course", date: "2024-01-15", status: "Pending" },
+              { id: 3, user: "Carol Davis", action: "Failed quiz", date: "2024-01-14", status: "Failed" },
+              { id: 4, user: "Dave Wilson", action: "Enrolled", date: "2024-01-14", status: "Active" },
+              { id: 5, user: "Eve Brown", action: "Completed course", date: "2024-01-13", status: "Completed" },
             ],
             pagination: { page: 1, perPage: 10, total: 5, lastPage: 1 },
             sort: { column: "date", direction: "desc" },
@@ -1142,14 +1156,17 @@ export function scaffoldFreeApp(targetDir) {
   if (!skipIfExists(mainPath, "src/main.tsx")) {
     writeFile(mainPath, `import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { registerDefaults, registerShell, BasicShell } from "@middag-io/react";
+import { registerDefaults, registerShell, registerBlock, BasicShell } from "@middag-io/react";
 import "@middag-io/react/style.css";
 import "./theme.css";
 import "@fontsource-variable/figtree";
+import { HelloBlock } from "./blocks/hello-block";
 import { App } from "./app";
 
 registerDefaults();
 registerShell("product", BasicShell);
+// Example: register your custom block so the contract can render it by type.
+registerBlock("hello_block", HelloBlock);
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode><App /></StrictMode>,
@@ -1942,7 +1959,7 @@ function readTemplate(relativePath) {
 // ── Shared: register, page-resolver, route helper, demo page ────────────
 
 /**
- * Scaffold FREE register: src/app/register.ts — minimal (5 blocks).
+ * Scaffold FREE register: src/app/register.ts — the 12 standard blocks.
  */
 export function scaffoldFreeRegister(targetDir) {
   ensureDir(join(targetDir, "src", "app"));

package/lib/scaffoldPRO.js

@@ -5,7 +5,7 @@
  * Only available when installed from GitHub Packages.
  *
  * Generates the extended mock harness (mock/, src/app/register.ts)
- * with 9+ blocks, extracted navigation/data/entities/routes files,
+ * with 19 blocks (12 standard + 7 premium), extracted navigation/data/entities/routes files,
  * and the slim app.tsx that delegates to mock/.
  */
 
@@ -51,10 +51,10 @@ function skipIfExists(filePath, label) {
   return false;
 }
 
-// ── 1. PRO register (9+ blocks) ────────────────────────────────────────
+// ── 1. PRO register (19 blocks) ────────────────────────────────────────
 
 /**
- * Scaffold `src/app/register.ts` — PRO version with 9+ blocks.
+ * Scaffold `src/app/register.ts` — PRO version with 19 blocks (12 standard + 7 premium).
  * Overrides any FREE register that may have been scaffolded.
  *
  * @param {string} targetDir - Absolute path to UI project root

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

@@ -1,13 +1,13 @@
 /**
  * register — selective registration for this plugin's UI (PRO).
  *
- * Registers shells, layouts, blocks, cell renderers, form fields, and icons
- * that this plugin uses. All 13 standard blocks are included.
+ * Registers the 12 standard blocks (plus shells, layouts, cell renderers, form
+ * fields and icons) from @middag-io/react, then calls registerProDefaults()
+ * from @middag-io/react-pro to add the premium runtime: the rich ProductShell
+ * + chrome panels and the 7 interactive blocks (form_panel, chart_panel,
+ * kanban_board, flow_editor, form_builder, condition_tree, sentence_builder).
  *
- * 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.
+ * Total: 19 blocks (12 standard + 7 premium).
  *
  * Full catalog: https://docs.middag.io/blocks
  */
@@ -20,20 +20,18 @@ import {
   registerDefaultFields,
   registerDefaultIcons,
   // Shells
-  ProductShell,
   ImmersiveShell,
   // Layouts
   StackLayout,
   SidebarLayout,
   DashboardLayout,
   WizardLayout,
-  // Blocks (all 13 standard barrel exports)
+  // Blocks (the 12 standard barrel exports)
   DenseTableBlock,
   MetricCardBlock,
   EmptyStateBlock,
   DetailPanelBlock,
   StatusStripBlock,
-  FormPanelBlock,
   TabbedPanelBlock,
   ActivityTimelineBlock,
   WorkflowProgressBlock,
@@ -42,6 +40,7 @@ import {
   ActionGridBlock,
   LinkListBlock,
 } from "@middag-io/react";
+import { registerProDefaults } from "@middag-io/react-pro/runtime";
 
 let registered = false;
 
@@ -49,8 +48,7 @@ export function registerDefaults(): void {
   if (registered) return;
   registered = true;
 
-  // Shells
-  registerShell("product", ProductShell);
+  // Shells — the rich "product" shell is registered by registerProDefaults() below.
   registerShell("immersive", ImmersiveShell);
 
   // Layouts
@@ -59,14 +57,12 @@ export function registerDefaults(): void {
   registerLayout("dashboard", DashboardLayout);
   registerLayout("wizard", WizardLayout);
 
-  // Blocks — all 13 standard blocks from the barrel
-  // See: https://docs.middag.io/blocks for the full catalog
+  // Blocks — the 12 standard blocks from the barrel
   registerBlock("dense_table", DenseTableBlock);
   registerBlock("metric_card", MetricCardBlock);
   registerBlock("empty_state", EmptyStateBlock);
   registerBlock("detail_panel", DetailPanelBlock);
   registerBlock("status_strip", StatusStripBlock);
-  registerBlock("form_panel", FormPanelBlock);
   registerBlock("tabbed_panel", TabbedPanelBlock);
   registerBlock("activity_timeline", ActivityTimelineBlock);
   registerBlock("workflow_progress", WorkflowProgressBlock);
@@ -75,7 +71,7 @@ export function registerDefaults(): void {
   registerBlock("action_grid", ActionGridBlock);
   registerBlock("link_list", LinkListBlock);
 
-  // Cell renderers (status, timestamp, link, boolean, rich_status, etc.)
+  // Cell renderers (status, timestamp, link, boolean, etc.)
   registerDefaultCells();
 
   // Form field components (text, select, switch, entity_picker, etc.)
@@ -83,4 +79,8 @@ export function registerDefaults(): void {
 
   // Icons (navigation, block, entity type icons)
   registerDefaultIcons();
+
+  // Premium runtime — the rich ProductShell + chrome and the 7 interactive
+  // blocks. Ships in @middag-io/react-pro (GitHub Packages, PRO tier).
+  registerProDefaults();
 }

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

@@ -1,12 +1,10 @@
 /**
  * register — registration for this plugin's UI.
  *
- * 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.
+ * Registers the 12 standard blocks plus shells, layouts, cell renderers, form
+ * fields and icons. The 7 Pro/interactive blocks (form_panel, chart_panel,
+ * kanban_board, flow_editor, form_builder, condition_tree, sentence_builder)
+ * ship in @middag-io/react-pro and register via its registerProDefaults().
  *
  * For lean IIFE bundles (WordPress/Moodle), trim the blocks you don't use.
  *
@@ -21,7 +19,7 @@ import {
   registerDefaultFields,
   registerDefaultIcons,
   // Shells
-  ProductShell,
+  BasicShell,
   ImmersiveShell,
   // Layouts
   StackLayout,
@@ -34,7 +32,6 @@ import {
   EmptyStateBlock,
   DetailPanelBlock,
   StatusStripBlock,
-  FormPanelBlock,
   TabbedPanelBlock,
   ActivityTimelineBlock,
   WorkflowProgressBlock,
@@ -50,8 +47,9 @@ export function registerDefaults(): void {
   if (registered) return;
   registered = true;
 
-  // Shells
-  registerShell("product", ProductShell);
+  // Shells — BasicShell (free) handles the "product" shell key used by pages.
+  // The Pro ProductShell ships in @middag-io/react-pro.
+  registerShell("product", BasicShell);
   registerShell("immersive", ImmersiveShell);
 
   // Layouts
@@ -66,7 +64,6 @@ export function registerDefaults(): void {
   registerBlock("empty_state", EmptyStateBlock);
   registerBlock("detail_panel", DetailPanelBlock);
   registerBlock("status_strip", StatusStripBlock);
-  registerBlock("form_panel", FormPanelBlock);
   registerBlock("tabbed_panel", TabbedPanelBlock);
   registerBlock("activity_timeline", ActivityTimelineBlock);
   registerBlock("workflow_progress", WorkflowProgressBlock);

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "create-middag-ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "type": "module",
   "description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
+  "scripts": {
+    "test": "vitest run"
+  },
   "bin": {
     "create-middag-ui": "cli.js"
   },