create-middag-ui 0.21.0 → 0.23.0

package/cli.js

@@ -238,13 +238,13 @@ if (isPro) {
     scaffoldFreeRegister(targetDir);
     scaffoldFreeAdapters(targetDir);
     scaffoldFreeApp(targetDir);
-    success("FREE: ImmersiveShell + local Inertia adapters");
+    success("FREE: BasicShell + local Inertia adapters");
   }
 } else {
   scaffoldFreeRegister(targetDir);
   scaffoldFreeAdapters(targetDir);
   scaffoldFreeApp(targetDir);
-  success("FREE: ImmersiveShell + local Inertia adapters");
+  success("FREE: BasicShell + local Inertia adapters");
 }
 
 // Host-specific production files (entry, vite config, theme CSS)

package/lib/scaffold.js

@@ -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>
@@ -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", variant: "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, ImmersiveShell } 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", ImmersiveShell);
+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>,

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 premium/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 premium 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,6 +1,6 @@
 {
   "name": "create-middag-ui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "type": "module",
   "description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
   "bin": {