create-middag-ui 0.24.0 → 0.26.0

package/README.md

@@ -43,7 +43,7 @@ Then start developing:
 
 ```bash
 cd ui
-npm run dev:mock
+npm run dev
 ```
 
 Your mock opens at `http://localhost:5174` (Moodle), `5175` (WordPress), or `5176` (Custom).

package/cli.js

@@ -257,8 +257,12 @@ if (hostKey === "moodle" && moodleComponent) {
   scaffoldMoodlePlugin(targetDir, moodleComponent);
   scaffoldMoodleTailwind(targetDir);
   scaffoldMoodleAdapters(targetDir, moodleComponent);
-  scaffoldMoodleAdminShell(targetDir);
-  success(`Moodle: AMD plugin + Tailwind + adapters + AdminShell for ${ moodleComponent }`);
+  // AdminShell uses Pro-only chrome (SidebarNav/PageHeader from @middag-io/react-pro);
+  // only scaffold it for PRO. FREE Moodle uses BasicShell via registerDefaults().
+  if (isPro) {
+    scaffoldMoodleAdminShell(targetDir);
+  }
+  success(`Moodle: AMD plugin + Tailwind + adapters${isPro ? " + AdminShell" : ""} for ${ moodleComponent }`);
 }
 
 // ── Step 9: npm install ──────────────────────────────────────────────────
@@ -296,11 +300,12 @@ if (installOk) {
 
 blank();
 console.log("  Your scaffold includes:");
-console.log("    src/pages/dashboard.ts       \u2190 starter: metric_card + dense_table");
-console.log("    src/pages/connectors.ts      \u2190 intermediate: card_grid + status_strip");
-console.log("    src/pages/settings.ts        \u2190 advanced: tabbed_panel + form_panel");
+console.log("    src/pages/tasks.ts            \u2190 list: metric_card + dense_table + row actions");
+console.log("    src/pages/task-form.ts        \u2190 create/edit: schema-driven form_panel");
+console.log("    src/pages/task-detail.ts      \u2190 detail: field/value via dense_table");
+console.log("    src/pages/login.ts            \u2190 login: basic shell + form_panel");
 console.log("    src/blocks/hello-block.tsx    \u2190 custom block example (rename me!)");
-console.log("    src/app.tsx                   \u2190 hash-based page router");
+console.log("    src/app.tsx                   \u2190 page router (mirrors middag-php-demo-standalone)");
 
 blank();
 console.log(`  Production build for ${host.name}:`);

package/lib/scaffold.js

@@ -198,7 +198,7 @@ export function scaffoldTsconfig(targetDir) {
       noUnusedLocals: true,
       noUnusedParameters: true,
       skipLibCheck: true,
-      paths: { "@/*": ["./src/*"] },
+      paths: { "@/*": ["./src/*"], "@mock/*": ["./mock/*"] },
       baseUrl: ".",
     },
     include: ["src", "mock"],
@@ -634,100 +634,132 @@ export type { PageContract, BlockDescriptor, SharedProps } from "@middag-io/reac
 // ── Page contract examples ──────────────────────────────────────────────
 
 /**
- * Scaffold 3 progressive page contract examples in src/pages/.
+ * Scaffold the Tasks CRUD page contracts in src/pages/.
+ *
+ * These mirror the PageContracts emitted by the middag-php-demo-standalone
+ * backend (a contract-driven Tasks CRUD): login, list, create/edit form and
+ * detail. The mock dev server renders them with the free engine; a real host
+ * sends the same contracts over Inertia.
  */
 export function scaffoldPageExamples(targetDir) {
   ensureDir(join(targetDir, "src", "pages"));
 
-  // ── Starter: dashboard.ts (metric_card + dense_table) ───────────────
-  const dashboardPath = join(targetDir, "src", "pages", "dashboard.ts");
-  if (!skipIfExists(dashboardPath, "src/pages/dashboard.ts")) {
+  // ── login.ts (basic shell + form_panel) ─────────────────────────────
+  const loginPath = join(targetDir, "src", "pages", "login.ts");
+  if (!skipIfExists(loginPath, "src/pages/login.ts")) {
     writeFile(
-      dashboardPath,
+      loginPath,
       `/**
- * Dashboard page contract \u2014 STARTER example.
- *
- * Demonstrates the "dashboard" layout with two block types:
- *   - metric_card (KPI indicators in the metrics region)
- *   - dense_table (data table in the content region)
+ * Login page contract.
  *
- * Layout regions used: metrics, content
+ * Uses the "basic" shell and a form_panel block. form_panel ships in the free
+ * @middag-io/react engine; its heavy deps (react-hook-form + zod) load on demand.
  */
 import type { PageContract } from "@middag-io/react";
 
-export const dashboardContract: PageContract = {
+export const loginContract: PageContract = {
   version: "1",
-  shell: "product",
-  page: {
-    key: "dashboard",
-    title: "Dashboard",
-    breadcrumbs: [{ label: "Home", href: "#/" }],
-  },
+  shell: "basic",
+  page: { key: "demo.login", title: "Sign in", subtitle: "Use any credentials, this is a mock." },
   layout: {
-    template: "dashboard",
+    template: "stack",
     regions: {
-      metrics: [
-        {
-          key: "total_users",
-          type: "metric_card",
-          data: {
-            label: "Total Users",
-            value: "1,284",
-            delta: "+12%",
-            deltaDirection: "positive",
-            icon: "users",
-          },
-        },
-        {
-          key: "active_sessions",
-          type: "metric_card",
-          data: {
-            label: "Active Sessions",
-            value: "342",
-            delta: "+5%",
-            deltaDirection: "positive",
-            icon: "activity",
-          },
-        },
+      content: [
         {
-          key: "completion_rate",
-          type: "metric_card",
+          key: "login",
+          type: "form_panel",
           data: {
-            label: "Completion Rate",
-            value: "87%",
-            delta: "-2%",
-            deltaDirection: "negative",
-            icon: "chart-line",
+            action: "/login",
+            method: "post",
+            schema: [
+              { kind: "field", key: "email", component: "email", props: { label: "Email", required: true, placeholder: "you@example.com" } },
+              { kind: "field", key: "password", component: "password", props: { label: "Password", required: true } },
+            ],
+            values: {},
+            errors: {},
+            meta: { submitLabel: "Sign in" },
           },
         },
       ],
+    },
+  },
+};
+`,
+      "src/pages/login.ts",
+    );
+  }
+
+  // ── tasks.ts (metric_card + dense_table with row actions) ────────────
+  const tasksPath = join(targetDir, "src", "pages", "tasks.ts");
+  if (!skipIfExists(tasksPath, "src/pages/tasks.ts")) {
+    writeFile(
+      tasksPath,
+      `/**
+ * Tasks list page contract, the dashboard after login.
+ *
+ * Demonstrates two free blocks plus row-level actions:
+ *   - metric_card (task count)
+ *   - dense_table (rows, rowHref for navigation, rowActions for edit/delete)
+ */
+import type { PageContract } from "@middag-io/react";
+
+export const tasksContract: PageContract = {
+  version: "1",
+  shell: "product",
+  page: {
+    key: "demo.tasks",
+    title: "Tasks",
+    subtitle: "A contract-driven CRUD, mirroring the middag-php-demo-standalone backend.",
+    actions: [
+      { id: "new", label: "New task", intent: "primary", icon: "plus", target: { kind: "link", href: "/tasks/new" } },
+    ],
+  },
+  layout: {
+    template: "stack",
+    regions: {
       content: [
         {
-          key: "welcome",
-          type: "hello_block",
-          data: { greeting: "Hello from a custom block!", name: "Developer", role: "MIDDAG UI" },
+          key: "task_count",
+          type: "metric_card",
+          data: { label: "Tasks", value: 3, icon: "list-check" },
         },
         {
-          key: "recent_activity",
+          key: "tasks",
           type: "dense_table",
-          title: "Recent Activity",
+          title: "All tasks",
           data: {
             columns: [
-              { key: "user", label: "User", sortable: true },
-              { key: "action", label: "Action" },
-              { key: "date", label: "Date", sortable: true },
+              { key: "title", label: "Title" },
               { key: "status", label: "Status", variant: "badge" },
+              { key: "priority", label: "Priority" },
+              { key: "created", label: "Created", variant: "timestamp" },
             ],
             rows: [
-              { 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" },
+              { id: 1, title: "Write onboarding docs", status: "open", priority: "high", created: "2024-05-30" },
+              { id: 2, title: "Review pull request", status: "open", priority: "normal", created: "2024-05-29" },
+              { id: 3, title: "Ship the release", status: "done", priority: "low", created: "2024-05-28" },
             ],
-            pagination: { page: 1, perPage: 10, total: 5, lastPage: 1 },
-            sort: { column: "date", direction: "desc" },
+            pagination: { page: 1, perPage: 10, total: 3, lastPage: 1 },
+            sort: { column: "created", direction: "desc" },
             filters: { available: [], applied: {} },
+            rowHref: "/tasks/{id}",
+            rowActions: [
+              { id: "edit", label: "Edit", intent: "secondary", icon: "pencil", target: { kind: "link", href: "/tasks/{id}/edit" } },
+              {
+                id: "delete",
+                label: "Delete",
+                intent: "danger",
+                icon: "trash",
+                target: { kind: "request", endpoint: "/tasks/{id}", method: "delete" },
+                confirmation: {
+                  title: "Delete task",
+                  message: "Remove this task? This cannot be undone.",
+                  variant: "danger",
+                  confirmLabel: "Delete",
+                  cancelLabel: "Cancel",
+                },
+              },
+            ],
           },
         },
       ],
@@ -735,99 +767,133 @@ export const dashboardContract: PageContract = {
   },
 };
 `,
-      "src/pages/dashboard.ts",
+      "src/pages/tasks.ts",
     );
   }
 
-  // ── Intermediate: connectors.ts (card_grid + status_strip + detail_panel)
-  const connectorsPath = join(targetDir, "src", "pages", "connectors.ts");
-  if (!skipIfExists(connectorsPath, "src/pages/connectors.ts")) {
+  // ── task-form.ts (form_panel, create + edit share one schema) ────────
+  const taskFormPath = join(targetDir, "src", "pages", "task-form.ts");
+  if (!skipIfExists(taskFormPath, "src/pages/task-form.ts")) {
     writeFile(
-      connectorsPath,
+      taskFormPath,
       `/**
- * Connectors page contract \u2014 INTERMEDIATE example.
+ * Task create/edit page contracts, schema-driven form_panel.
  *
- * 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)
- *
- * Layout regions used: main, aside
+ * One field schema drives both create (empty values, POST) and edit (prefilled
+ * values, PUT). Shows text, textarea, select, radio, date, int, switch,
+ * entity_picker and a conditional field (done_reason appears when status = done).
  */
-import type { PageContract } from "@middag-io/react";
+import type { PageContract, FormSchemaNode } from "@middag-io/react";
 
-export const connectorsContract: PageContract = {
+const taskFormSchema: FormSchemaNode[] = [
+  { kind: "field", key: "title", component: "text", props: { label: "Title", required: true, placeholder: "What needs doing?" } },
+  { kind: "field", key: "notes", component: "textarea", props: { label: "Notes", rows: 4 } },
+  {
+    kind: "field",
+    key: "priority",
+    component: "select",
+    props: {
+      label: "Priority",
+      required: true,
+      options: [
+        { value: "low", label: "Low" },
+        { value: "normal", label: "Normal" },
+        { value: "high", label: "High" },
+      ],
+    },
+  },
+  {
+    kind: "field",
+    key: "status",
+    component: "radio",
+    props: {
+      label: "Status",
+      required: true,
+      options: [
+        { value: "open", label: "Open" },
+        { value: "done", label: "Done" },
+      ],
+    },
+  },
+  {
+    kind: "field",
+    key: "done_reason",
+    component: "text",
+    props: {
+      label: "Done reason",
+      helpText: "Shown only when status is Done.",
+      visible_when: { field: "status", operator: "equals", value: "done" },
+      required_when: { field: "status", operator: "equals", value: "done" },
+    },
+  },
+  { kind: "field", key: "due_on", component: "date", props: { label: "Due date" } },
+  { kind: "field", key: "estimate_minutes", component: "int", props: { label: "Estimate (minutes)", min: 0, max: 100000 } },
+  {
+    kind: "field",
+    key: "parent_task",
+    component: "entity_picker",
+    props: {
+      label: "Parent task",
+      options: [
+        { value: "1", label: "Write onboarding docs" },
+        { value: "2", label: "Review pull request" },
+      ],
+    },
+  },
+  { kind: "field", key: "notify", component: "switch", props: { label: "Notify on change" } },
+];
+
+export const newTaskContract: PageContract = {
   version: "1",
   shell: "product",
   page: {
-    key: "connectors",
-    title: "Connectors",
-    breadcrumbs: [
-      { label: "Home", href: "#/" },
-      { label: "Connectors" },
-    ],
-    actions: [
-      { id: "add", label: "Add Connector", intent: "primary", icon: "plus" },
-    ],
+    key: "demo.tasks.create",
+    title: "New task",
+    breadcrumbs: [{ label: "Tasks", href: "/" }, { label: "New task" }],
   },
   layout: {
-    template: "sidebar",
+    template: "stack",
     regions: {
-      main: [
+      content: [
         {
-          key: "connector_grid",
-          type: "card_grid",
-          title: "Available Connectors",
+          key: "task_form",
+          type: "form_panel",
           data: {
-            variant: "connector",
-            columns: [
-              { key: "name", label: "Name" },
-              { key: "type", label: "Type" },
-              { key: "status", label: "Status", kind: "status" },
-            ],
-            rows: [
-              { id: 1, name: "Moodle LMS", type: "LMS", status: "Active", icon: "graduation-cap", href: "#/connectors" },
-              { id: 2, name: "Google Workspace", type: "SSO", status: "Active", icon: "shield", href: "#/connectors" },
-              { id: 3, name: "Stripe", type: "Payment", status: "Inactive", icon: "credit-card", href: "#/connectors" },
-              { id: 4, name: "Mailchimp", type: "Email", status: "Active", icon: "mail", href: "#/connectors" },
-            ],
+            action: "/tasks",
+            method: "post",
+            schema: taskFormSchema,
+            values: { priority: "normal", status: "open", notify: true },
+            errors: {},
+            meta: { submitLabel: "Create task", cancelHref: "/" },
           },
         },
       ],
-      aside: [
-        {
-          key: "connector_health",
-          type: "status_strip",
-          title: "Health Overview",
-          data: {
-            score: 75,
-            tone: "success",
-            items: [
-              { key: "uptime", label: "Uptime", value: "99.9%", appearance: "success" },
-              { key: "sync", label: "Last Sync", value: "2 min ago", appearance: "success" },
-              { key: "errors", label: "Errors (24h)", value: "3", appearance: "warning" },
-              { key: "queue", label: "Queue", value: "0", appearance: "success" },
-            ],
-          },
-        },
+    },
+  },
+};
+
+export const editTaskContract: PageContract = {
+  version: "1",
+  shell: "product",
+  page: {
+    key: "demo.tasks.edit",
+    title: "Edit task",
+    breadcrumbs: [{ label: "Tasks", href: "/" }, { label: "Edit task" }],
+  },
+  layout: {
+    template: "stack",
+    regions: {
+      content: [
         {
-          key: "connector_detail",
-          type: "detail_panel",
-          title: "Selected Connector",
+          key: "task_form",
+          type: "form_panel",
           data: {
-            sections: [
-              {
-                id: "overview",
-                title: "Overview",
-                fields: [
-                  { key: "provider", label: "Provider", value: "Moodle LMS" },
-                  { key: "version", label: "API Version", value: "4.3.2" },
-                  { key: "connected", label: "Connected Since", value: "2024-01-01", kind: "timestamp" },
-                  { key: "status", label: "Status", value: "Active", kind: "status" },
-                  { key: "endpoint", label: "Endpoint", value: "https://moodle.example.com/webservice/rest", kind: "code", copyable: true },
-                ],
-              },
-            ],
+            action: "/tasks/1",
+            method: "put",
+            schema: taskFormSchema,
+            values: { title: "Write onboarding docs", priority: "high", status: "open", notify: true },
+            errors: {},
+            meta: { submitLabel: "Save changes", cancelHref: "/" },
           },
         },
       ],
@@ -835,36 +901,32 @@ export const connectorsContract: PageContract = {
   },
 };
 `,
-      "src/pages/connectors.ts",
+      "src/pages/task-form.ts",
     );
   }
 
-  // ── Advanced: settings.ts (tabbed_panel + form_panel + link_list) ────
-  const settingsPath = join(targetDir, "src", "pages", "settings.ts");
-  if (!skipIfExists(settingsPath, "src/pages/settings.ts")) {
+  // ── task-detail.ts (dense_table as a field/value detail view) ────────
+  const taskDetailPath = join(targetDir, "src", "pages", "task-detail.ts");
+  if (!skipIfExists(taskDetailPath, "src/pages/task-detail.ts")) {
     writeFile(
-      settingsPath,
+      taskDetailPath,
       `/**
- * Settings page contract \u2014 ADVANCED example.
- *
- * Demonstrates the "stack" layout with nested block types:
- *   - tabbed_panel (tabs that contain other blocks)
- *   - form_panel (schema-driven form inside a tab)
- *   - link_list (navigation links inside a tab)
+ * Task detail page contract, a read-only field/value view.
  *
- * Layout regions used: content
+ * Reuses dense_table as a two-column key/value display (the demo backend does
+ * the same), plus an Edit action in the page header.
  */
 import type { PageContract } from "@middag-io/react";
 
-export const settingsContract: PageContract = {
+export const taskDetailContract: PageContract = {
   version: "1",
   shell: "product",
   page: {
-    key: "settings",
-    title: "Settings",
-    breadcrumbs: [
-      { label: "Home", href: "#/" },
-      { label: "Settings" },
+    key: "demo.tasks.show",
+    title: "Task detail",
+    breadcrumbs: [{ label: "Tasks", href: "/" }, { label: "Task detail" }],
+    actions: [
+      { id: "edit", label: "Edit", intent: "secondary", icon: "pencil", target: { kind: "link", href: "/tasks/1/edit" } },
     ],
   },
   layout: {
@@ -872,115 +934,23 @@ export const settingsContract: PageContract = {
     regions: {
       content: [
         {
-          key: "settings_tabs",
-          type: "tabbed_panel",
+          key: "task",
+          type: "dense_table",
+          title: "Write onboarding docs",
           data: {
-            defaultTab: "general",
-            tabs: [
-              {
-                key: "general",
-                label: "General",
-                icon: "settings",
-                blocks: [
-                  {
-                    key: "general_form",
-                    type: "form_panel",
-                    data: {
-                      action: "/api/settings/general",
-                      method: "put",
-                      schema: [
-                        {
-                          kind: "section",
-                          id: "site",
-                          label: "Site Settings",
-                          children: [
-                            {
-                              kind: "field",
-                              key: "site_name",
-                              component: "text",
-                              props: { label: "Site Name", placeholder: "My Platform", required: true },
-                            },
-                            {
-                              kind: "field",
-                              key: "site_url",
-                              component: "url",
-                              props: { label: "Site URL", placeholder: "https://example.com" },
-                            },
-                            {
-                              kind: "field",
-                              key: "timezone",
-                              component: "select",
-                              props: {
-                                label: "Timezone",
-                                options: [
-                                  { value: "UTC", label: "UTC" },
-                                  { value: "America/Sao_Paulo", label: "S\\u00e3o Paulo (BRT)" },
-                                  { value: "America/New_York", label: "New York (EST)" },
-                                  { value: "Europe/London", label: "London (GMT)" },
-                                ],
-                              },
-                            },
-                          ],
-                        },
-                        {
-                          kind: "section",
-                          id: "features",
-                          label: "Features",
-                          children: [
-                            {
-                              kind: "field",
-                              key: "enable_notifications",
-                              component: "switch",
-                              props: { label: "Enable Notifications", helpText: "Send email notifications for important events" },
-                            },
-                            {
-                              kind: "field",
-                              key: "enable_analytics",
-                              component: "switch",
-                              props: { label: "Enable Analytics", helpText: "Track user activity and generate reports" },
-                            },
-                            {
-                              kind: "field",
-                              key: "maintenance_mode",
-                              component: "switch",
-                              props: { label: "Maintenance Mode", helpText: "Show maintenance page to non-admin users" },
-                            },
-                          ],
-                        },
-                      ],
-                      values: {
-                        site_name: "My Platform",
-                        site_url: "https://example.com",
-                        timezone: "UTC",
-                        enable_notifications: true,
-                        enable_analytics: true,
-                        maintenance_mode: false,
-                      },
-                      errors: {},
-                      meta: { submitLabel: "Save Changes", cancelHref: "#/" },
-                    },
-                  },
-                ],
-              },
-              {
-                key: "notifications",
-                label: "Notifications",
-                icon: "bell",
-                blocks: [
-                  {
-                    key: "notification_links",
-                    type: "link_list",
-                    data: {
-                      items: [
-                        { label: "Email Templates", href: "#/settings", icon: "mail", description: "Customize email notification templates" },
-                        { label: "Webhook Endpoints", href: "#/settings", icon: "webhook", description: "Configure webhook delivery endpoints" },
-                        { label: "Notification Rules", href: "#/settings", icon: "filter", description: "Set up conditional notification routing" },
-                      ],
-                    },
-                  },
-                ],
-              },
+            columns: [
+              { key: "field", label: "Field" },
+              { key: "value", label: "Value" },
+            ],
+            rows: [
+              { id: "title", field: "Title", value: "Write onboarding docs" },
+              { id: "status", field: "Status", value: "open" },
+              { id: "priority", field: "Priority", value: "high" },
+              { id: "due_on", field: "Due date", value: "2024-06-10" },
             ],
+            pagination: { page: 1, perPage: 10, total: 4, lastPage: 1 },
+            sort: { column: null, direction: null },
+            filters: { available: [], applied: {} },
           },
         },
       ],
@@ -988,7 +958,7 @@ export const settingsContract: PageContract = {
   },
 };
 `,
-      "src/pages/settings.ts",
+      "src/pages/task-detail.ts",
     );
   }
 }
@@ -1009,15 +979,33 @@ let _navigate: ((to: string) => void) | null = null;
 
 export function setMockNavigate(fn: (to: string) => void) { _navigate = fn; }
 
+type MockOpts = {
+  only?: string[];
+  preserveState?: boolean;
+  preserveScroll?: boolean;
+  onSuccess?: () => void;
+  onFinish?: () => void;
+  onError?: (errors: Record<string, string>) => void;
+};
+
+// A synchronous mock resolves instantly — fire the lifecycle callbacks the
+// engine expects (e.g. useLazyTabs marks a tab loaded in onSuccess; blocks
+// reset loading flags in onFinish), else those UI states stick forever.
+const settle = (o?: MockOpts) => { o?.onSuccess?.(); o?.onFinish?.(); };
+
 export const router = {
-  get: (url: string) => { _navigate ? _navigate(url) : console.log("[mock] GET", url); },
-  post: (url: string) => { console.log("[mock] POST", url); },
-  put: (url: string) => { console.log("[mock] PUT", url); },
-  patch: (url: string) => { console.log("[mock] PATCH", url); },
-  delete: (url: string) => { console.log("[mock] DELETE", url); },
-  reload: () => { window.location.reload(); },
-  visit: (url: string) => { _navigate ? _navigate(url) : console.log("[mock] VISIT", url); },
-  on: () => () => {},
+  get: (url: string, _params?: Record<string, unknown>, opts?: MockOpts) => {
+    if (_navigate) _navigate(url); else console.log("[mock] GET", url);
+    settle(opts);
+  },
+  post: (url: string, _data?: unknown, opts?: MockOpts) => { console.log("[mock] POST", url); settle(opts); },
+  put: (url: string, _data?: unknown, opts?: MockOpts) => { console.log("[mock] PUT", url); settle(opts); },
+  patch: (url: string, _data?: unknown, opts?: MockOpts) => { console.log("[mock] PATCH", url); settle(opts); },
+  delete: (url: string, opts?: MockOpts) => { console.log("[mock] DELETE", url); settle(opts); },
+  reload: (opts?: MockOpts) => { settle(opts); },
+  visit: (url: string) => { if (_navigate) _navigate(url); else console.log("[mock] VISIT", url); },
+  on: (_event?: string, _cb?: (event: unknown) => void) => () => {},
+  poll: (_intervalMs?: number, _reload?: unknown, _opts?: unknown) => ({ stop: () => {}, start: () => {}, destroy: () => {} }),
 };
 `, "mock/adapters/inertia-core.ts");
   }
@@ -1067,6 +1055,35 @@ export const Link = React.forwardRef<HTMLAnchorElement, MockLinkProps>(function
   return React.createElement("a", { ...rest, href: href ?? "#", ref, onClick: handleClick }, children);
 });
 
+// ── Inertia v3 primitives the engine imports ──────────────────────────
+// @middag-io/react imports Deferred/WhenVisible (lazy blocks) and useRemember
+// (DataTable view-prefs) from @inertiajs/react. In the no-server mock the data
+// is already present, so render children immediately; useRemember = useState.
+
+export function Deferred({ children }: {
+  data: string | string[];
+  fallback?: React.ReactNode;
+  rescue?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return children;
+}
+
+export function WhenVisible({ children }: {
+  data?: string | string[];
+  buffer?: number;
+  as?: string;
+  always?: boolean;
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return children;
+}
+
+export function useRemember<T>(initialState: T, _key?: string): [T, React.Dispatch<React.SetStateAction<T>>] {
+  return React.useState(initialState);
+}
+
 export { router };
 `, "mock/adapters/inertia-react.ts");
   }
@@ -1182,9 +1199,10 @@ import { ContractPage, I18nProvider } from "@middag-io/react";
 import type { PageContract } from "@middag-io/react";
 import { PageProvider } from "@mock/adapters/inertia-react";
 import { setMockNavigate } from "@mock/adapters/inertia-core";
-import { dashboardContract } from "./pages/dashboard";
-import { connectorsContract } from "./pages/connectors";
-import { settingsContract } from "./pages/settings";
+import { loginContract } from "./pages/login";
+import { tasksContract } from "./pages/tasks";
+import { newTaskContract, editTaskContract } from "./pages/task-form";
+import { taskDetailContract } from "./pages/task-detail";
 
 function NavigateBridge() {
   const navigate = useNavigate();
@@ -1204,12 +1222,10 @@ const sharedProps = {
 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: [] },
+      { key: "tasks", label: "Tasks", icon: "list-check", href: "/", children: [] },
+      { key: "tasks.new", label: "New task", icon: "plus", href: "/tasks/new", children: [] },
     ],
+    footer: [],
     activeKey,
   };
 }
@@ -1229,9 +1245,11 @@ export function App() {
         <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" />} />
+            <Route path="/login" element={<MockRoute contract={loginContract} activeKey="" />} />
+            <Route path="/" element={<MockRoute contract={tasksContract} activeKey="tasks" />} />
+            <Route path="/tasks/new" element={<MockRoute contract={newTaskContract} activeKey="tasks.new" />} />
+            <Route path="/tasks/:id/edit" element={<MockRoute contract={editTaskContract} activeKey="tasks" />} />
+            <Route path="/tasks/:id" element={<MockRoute contract={taskDetailContract} activeKey="tasks" />} />
           </Routes>
         </BrowserRouter>
       </I18nProvider>
@@ -1759,9 +1777,10 @@ createRoot(document.getElementById("root")!).render(
       `import { useState, useEffect } from "react";
 import { ContractPage, I18nProvider } from "@middag-io/react";
 import type { PageContract } from "@middag-io/react";
-import { dashboardContract } from "./pages/dashboard";
-import { connectorsContract } from "./pages/connectors";
-import { settingsContract } from "./pages/settings";
+import { loginContract } from "./pages/login";
+import { tasksContract } from "./pages/tasks";
+import { newTaskContract, editTaskContract } from "./pages/task-form";
+import { taskDetailContract } from "./pages/task-detail";
 
 /**
  * Route map \u2014 hash fragment to PageContract.
@@ -1771,9 +1790,11 @@ import { settingsContract } from "./pages/settings";
  * you build them.
  */
 const routes: Record<string, PageContract> = {
-  "/": dashboardContract,
-  "/connectors": connectorsContract,
-  "/settings": settingsContract,
+  "/": tasksContract,
+  "/login": loginContract,
+  "/tasks/new": newTaskContract,
+  "/tasks/edit": editTaskContract,
+  "/tasks/show": taskDetailContract,
 };
 
 function getRoute(): string {
@@ -1789,7 +1810,7 @@ export function App() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, []);
 
-  const contract = routes[route] || dashboardContract;
+  const contract = routes[route] || tasksContract;
 
   // Expose contract for usePage() mock adapter
   (window as any).__MIDDAG_MOCK_CONTRACT__ = contract;
@@ -1824,41 +1845,23 @@ import { router } from "./inertia-core";
 function getActiveKey(): string {
   const hash = window.location.hash.replace("#", "") || "/";
   const map: Record<string, string> = {
-    "/": "overview.dashboard",
-    "/connectors": "integration.connectors",
-    "/settings": "system.settings",
+    "/": "tasks",
+    "/tasks/new": "tasks.new",
   };
-  return map[hash] || "overview.dashboard";
+  return map[hash] || "tasks";
 }
 
 function buildNavigation() {
   const activeKey = getActiveKey();
   const sections = [
     {
-      key: "overview",
-      label: "Overview",
-      icon: "house",
+      key: "tasks",
+      label: "Tasks",
+      icon: "list-check",
       group: "main" as const,
       items: [
-        { key: "overview.dashboard", label: "Dashboard", href: "#/", active: activeKey === "overview.dashboard", children: [] },
-      ],
-    },
-    {
-      key: "integration",
-      label: "Integration",
-      icon: "plug",
-      group: "main" as const,
-      items: [
-        { key: "integration.connectors", label: "Connectors", href: "#/connectors", active: activeKey === "integration.connectors", children: [] },
-      ],
-    },
-    {
-      key: "system",
-      label: "System",
-      icon: "settings",
-      group: "system" as const,
-      items: [
-        { key: "system.settings", label: "Settings", href: "#/settings", active: activeKey === "system.settings", children: [] },
+        { key: "tasks", label: "Tasks", href: "#/", active: activeKey === "tasks", children: [] },
+        { key: "tasks.new", label: "New task", href: "#/tasks/new", active: activeKey === "tasks.new", children: [] },
       ],
     },
   ];
@@ -1916,6 +1919,34 @@ export const Link = React.forwardRef<HTMLAnchorElement, MockLinkProps>(function
   return React.createElement("a", { ...rest, href: href ?? "#", ref, onClick: handleClick }, children);
 });
 
+// ── Inertia v3 primitives the engine imports ──────────────────────────
+// @middag-io/react imports Deferred/WhenVisible + useRemember from
+// @inertiajs/react; mock renders children eagerly, useRemember = useState.
+
+export function Deferred({ children }: {
+  data: string | string[];
+  fallback?: React.ReactNode;
+  rescue?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return children;
+}
+
+export function WhenVisible({ children }: {
+  data?: string | string[];
+  buffer?: number;
+  as?: string;
+  always?: boolean;
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return children;
+}
+
+export function useRemember<T>(initialState: T, _key?: string): [T, React.Dispatch<React.SetStateAction<T>>] {
+  return React.useState(initialState);
+}
+
 export { router };
 `,
       "mock/adapters/inertia-react.ts",
@@ -1933,15 +1964,27 @@ export { router };
  * Vite alias redirects @inertiajs/core imports here.
  * In production, the real Inertia package handles this.
  */
+type MockOpts = {
+  only?: string[];
+  preserveState?: boolean;
+  preserveScroll?: boolean;
+  onSuccess?: () => void;
+  onFinish?: () => void;
+  onError?: (errors: Record<string, string>) => void;
+};
+
+const settle = (o?: MockOpts) => { o?.onSuccess?.(); o?.onFinish?.(); };
+
 export const router = {
-  get: (url: string) => { window.location.hash = url; },
-  post: (url: string) => { console.log("[mock] POST", url); },
-  put: (url: string) => { console.log("[mock] PUT", url); },
-  patch: (url: string) => { console.log("[mock] PATCH", url); },
-  delete: (url: string) => { console.log("[mock] DELETE", url); },
-  reload: () => { window.location.reload(); },
+  get: (url: string, _params?: Record<string, unknown>, opts?: MockOpts) => { window.location.hash = url; settle(opts); },
+  post: (url: string, _data?: unknown, opts?: MockOpts) => { console.log("[mock] POST", url); settle(opts); },
+  put: (url: string, _data?: unknown, opts?: MockOpts) => { console.log("[mock] PUT", url); settle(opts); },
+  patch: (url: string, _data?: unknown, opts?: MockOpts) => { console.log("[mock] PATCH", url); settle(opts); },
+  delete: (url: string, opts?: MockOpts) => { console.log("[mock] DELETE", url); settle(opts); },
+  reload: (opts?: MockOpts) => { settle(opts); },
   visit: (url: string) => { window.location.hash = url; },
-  on: () => () => {},
+  on: (_event?: string, _cb?: (event: unknown) => void) => () => {},
+  poll: (_intervalMs?: number, _reload?: unknown, _opts?: unknown) => ({ stop: () => {}, start: () => {}, destroy: () => {} }),
 };
 `,
       "mock/adapters/inertia-core.ts",

package/lib/scaffoldPRO.js

@@ -171,7 +171,7 @@ export function scaffoldMockEntities(targetDir) {
 /**
  * Move page contract examples to `mock/page-contracts/` for PRO path.
  *
- * In PRO, the 3 demo contracts (dashboard, connectors, settings) live
+ * In PRO, the demo contracts (login, tasks, task-form, task-detail) live
  * in mock/page-contracts/ instead of src/pages/ because they are dev-only
  * mock data, not production React components.
  *
@@ -186,7 +186,7 @@ export function scaffoldMockPageContracts(targetDir) {
   const destDir = join(targetDir, "mock", "page-contracts");
   ensureDir(destDir);
 
-  const files = ["dashboard.ts", "connectors.ts", "settings.ts"];
+  const files = ["login.ts", "tasks.ts", "task-form.ts", "task-detail.ts"];
 
   for (const file of files) {
     const src = join(srcDir, file);

package/lib/templates/pro/mock-navigation.ts

@@ -9,29 +9,21 @@ export function buildNavigation(activeKey: string) {
   return {
     tree: [
       {
-        key: "overview.dashboard",
-        label: "Dashboard",
-        icon: "home",
+        key: "tasks",
+        label: "Tasks",
+        icon: "list-check",
         href: "/",
         children: [],
       },
       {
-        key: "integration.connectors",
-        label: "Connectors",
-        icon: "plug",
-        href: "/connectors",
-        children: [],
-      },
-    ],
-    footer: [
-      {
-        key: "system.settings",
-        label: "Settings",
-        icon: "settings",
-        href: "/settings",
+        key: "tasks.new",
+        label: "New task",
+        icon: "plus",
+        href: "/tasks/new",
         children: [],
       },
     ],
+    footer: [],
     activeKey,
   };
 }

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

@@ -11,9 +11,10 @@ import type { PageContract } from "@middag-io/react";
 import { mockEntities } from "./entities";
 import { buildNavigation } from "./navigation";
 import { sharedProps, mockDemoPageProps } from "./data";
-import { dashboardContract } from "./page-contracts/dashboard";
-import { connectorsContract } from "./page-contracts/connectors";
-import { settingsContract } from "./page-contracts/settings";
+import { loginContract } from "./page-contracts/login";
+import { tasksContract } from "./page-contracts/tasks";
+import { newTaskContract, editTaskContract } from "./page-contracts/task-form";
+import { taskDetailContract } from "./page-contracts/task-detail";
 import DemoPage from "../src/pages/DemoPage";
 
 // Resolve shell at module level (not inside render — avoids react-hooks/static-components)
@@ -63,24 +64,26 @@ export function AppRoutes() {
   return (
     <>
       {/* Contract pages (rendered by lib ContractPage) */}
+      <Route path="/login" element={<MockRoute contract={loginContract} activeKey="" />} />
+      <Route path="/" element={<MockRoute contract={tasksContract} activeKey="tasks" />} />
       <Route
-        path="/"
-        element={<MockRoute contract={dashboardContract} activeKey="overview.dashboard" />}
+        path="/tasks/new"
+        element={<MockRoute contract={newTaskContract} activeKey="tasks.new" />}
       />
       <Route
-        path="/connectors"
-        element={<MockRoute contract={connectorsContract} activeKey="integration.connectors" />}
+        path="/tasks/:id/edit"
+        element={<MockRoute contract={editTaskContract} activeKey="tasks" />}
       />
       <Route
-        path="/settings"
-        element={<MockRoute contract={settingsContract} activeKey="system.settings" />}
+        path="/tasks/:id"
+        element={<MockRoute contract={taskDetailContract} activeKey="tasks" />}
       />
 
       {/* Direct page (custom React component) */}
       <Route
         path="/demo"
         element={
-          <MockDirectRoute activeKey="overview.demo" pageProps={mockDemoPageProps}>
+          <MockDirectRoute activeKey="tasks" pageProps={mockDemoPageProps}>
             <DemoPage />
           </MockDirectRoute>
         }

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

@@ -15,6 +15,8 @@ import { usePage } from "@inertiajs/react";
 interface DemoPageProps {
   title: string;
   items: Array<{ id: number; name: string; status: string }>;
+  // Inertia v3 usePage<T> constrains T to PageProps (string index signature).
+  [key: string]: unknown;
 }
 
 export default function DemoPage() {

package/lib/templates/shared/moodle-admin-shell.tsx

@@ -15,14 +15,16 @@ import {
     SidebarHeader,
     SidebarProvider,
     useSidebar,
-    SidebarNav,
-    PageHeader,
     NavErrorBoundary,
     type ShellProps,
     type SharedProps,
     type PageMeta,
     type AdminTabsProps,
 } from "@middag-io/react";
+// SidebarNav/PageHeader are Pro chrome — exported from the react-pro runtime
+// subpath (see react-demo MockProductShell). This shell is PRO-only (scaffolded
+// only when isPro in cli.js); FREE Moodle uses BasicShell via registerDefaults().
+import { SidebarNav, PageHeader } from "@middag-io/react-pro/runtime";
 import { Tabs, TabsList, TabsTrigger } from "@middag-io/react/reui/tabs";
 
 // ── Inner shell (must be inside SidebarProvider) ──────────────────────────────

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

@@ -1,11 +1,12 @@
-import type {ContractPageProps, PageContract} from "@middag-io/react";
+import type {PageContract} from "@middag-io/react";
 import {ContractPage} from "@middag-io/react";
 import {usePage} from "@inertiajs/react";
+import type {ComponentType} from "react";
 
 // Direct pages — eager loaded (custom React pages in pages/)
 const directPages = import.meta.glob("../pages/**/*.tsx", { eager: true }) as Record<
   string,
-  Record<string, unknown>
+  { default: ComponentType }
 >;
 
 /**
@@ -14,15 +15,11 @@ const directPages = import.meta.glob("../pages/**/*.tsx", { eager: true }) as Re
  */
 // eslint-disable-next-line react-refresh/only-export-components
 function InertiaContractPage() {
-  const { props } = usePage<{
-    contract: PageContract;
-    help?: ContractPageProps["help"];
-    inspector?: ContractPageProps["inspector"];
-  }>();
-  return <ContractPage contract={props.contract} help={props.help} inspector={props.inspector} />;
+  const { props } = usePage<{ contract: PageContract }>();
+  return <ContractPage contract={props.contract} />;
 }
 
-const contractPageModule = { default: InertiaContractPage };
+const contractPageModule: { default: ComponentType } = { default: InertiaContractPage };
 
 /**
  * Resolve an Inertia page name to a React component module.
@@ -38,7 +35,7 @@ const contractPageModule = { default: InertiaContractPage };
  *
  * Direct pages can also use ContractPage internally (hybrid pattern).
  */
-export function resolvePageComponent(name: string): Record<string, unknown> {
+export function resolvePageComponent(name: string): { default: ComponentType } {
   // Direct page: matching .tsx file in pages/
   const path = `../pages/${name}.tsx`;
   const page = directPages[path];

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

@@ -1,10 +1,10 @@
 /**
  * register — registration for this plugin's UI.
  *
- * 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().
+ * Registers the 13 standard blocks plus shells, layouts, cell renderers, form
+ * fields and icons. The 6 Pro/interactive blocks (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.
  *
@@ -39,6 +39,7 @@ import {
   CardGridBlock,
   ActionGridBlock,
   LinkListBlock,
+  FormPanelBlock,
 } from "@middag-io/react";
 
 let registered = false;
@@ -71,6 +72,8 @@ export function registerDefaults(): void {
   registerBlock("card_grid", CardGridBlock);
   registerBlock("action_grid", ActionGridBlock);
   registerBlock("link_list", LinkListBlock);
+  // form_panel pulls react-hook-form + zod; drop it if this bundle has no forms.
+  registerBlock("form_panel", FormPanelBlock);
 
   // Cell renderers (status, timestamp, link, boolean, etc.)
   registerDefaultCells();

package/package.json

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