@mmapp/react-compiler 0.1.0-alpha.18 → 0.1.0-alpha.20

package/dist/cli/index.js

@@ -6469,7 +6469,8 @@ function convertOnEvent(sub) {
   };
 }
 function emitIR(extracted) {
-  const { slug, name, version, description, category, fields, states, transitions } = extracted;
+  const { slug, name, version, description, category: rawCategory, fields, states, transitions } = extracted;
+  const category = Array.isArray(rawCategory) ? rawCategory : [rawCategory];
   const stateArray = Array.from(states.values());
   if (stateArray.length === 0) {
     stateArray.push({
@@ -6857,13 +6858,15 @@ function emitCanonical(extracted, sourceFilename) {
       }
     ]
   });
-  const category = extracted.category;
+  const rawCat = extracted.category;
   let categoryArray;
-  if (category.includes("/")) {
-    const [primary, ...tags] = category.split("/");
+  if (Array.isArray(rawCat)) {
+    categoryArray = rawCat;
+  } else if (rawCat.includes("/")) {
+    const [primary, ...tags] = rawCat.split("/");
     categoryArray = (0, import_player_core.normalizeCategory)(primary, ...tags);
   } else {
-    categoryArray = [category];
+    categoryArray = [rawCat];
   }
   return {
     slug: ir.slug,
@@ -7010,7 +7013,7 @@ function compilerStateToWorkflow(state, metadata) {
     name: metadata.name || "Workflow",
     version: metadata.version || "0.1.0",
     description: metadata.description,
-    category: metadata.category || "workflow",
+    category: metadata.categoryArray ? metadata.categoryArray : [metadata.category || "workflow"],
     fields: state.fields || [],
     states: state.states || /* @__PURE__ */ new Map(),
     transitions: state.transitions || [],
@@ -7954,7 +7957,7 @@ function extractRouterWorkflow(pages, options = {}) {
     name: "Router",
     version: "1.0.0",
     description: "Auto-derived router workflow from file-based routing",
-    category: "router",
+    category: ["router"],
     fields,
     states,
     transitions,
@@ -8053,7 +8056,8 @@ function compileModel(filename, source, options = {}) {
     parserOpts: { plugins: parserPlugins, attachComment: true }
   });
   const ir = babelResult?.metadata?.mindmatrixIR ?? createEmptyModelIR(interfaceName);
-  ir.category = options.categoryOverride || annotation.category || "data";
+  const catOverride = options.categoryOverride || annotation.category || "data";
+  ir.category = Array.isArray(catOverride) ? catOverride : [catOverride];
   if (options.slugOverride) {
     ir.slug = options.slugOverride;
   }
@@ -8117,7 +8121,7 @@ function createEmptyModelIR(interfaceName) {
     name: interfaceName,
     version: "1.0.0",
     description: "Data model: " + interfaceName,
-    category: "data",
+    category: ["data"],
     fields: [],
     states: [{
       name: "draft",
@@ -8285,7 +8289,7 @@ function buildRouterIR(routes, layouts, allParams, slugPrefix) {
     name: "Router",
     version: "1.0.0",
     description: "Auto-generated router from app/ directory structure",
-    category: "router",
+    category: ["router"],
     fields,
     states,
     transitions,
@@ -8534,7 +8538,7 @@ function extractAction(source, filename) {
         slug,
         name: humanName,
         version: "0.1.0",
-        category: "action",
+        category: ["action"],
         fields,
         states: states2,
         transitions: transitions2,
@@ -8586,7 +8590,7 @@ function extractAction(source, filename) {
     slug,
     name: humanName,
     version: "0.1.0",
-    category: "action",
+    category: ["action"],
     fields,
     states,
     transitions,
@@ -10023,7 +10027,7 @@ function applyConfig(ir, config) {
   if (config.name) ir.name = config.name;
   if (config.version) ir.version = config.version;
   if (config.description !== void 0) ir.description = config.description;
-  if (config.category) ir.category = config.category;
+  if (config.category) ir.category = Array.isArray(config.category) ? config.category : [config.category];
   if (!ir.metadata) ir.metadata = {};
   ir.metadata.stable_id = "def-" + ir.slug;
   ir.metadata.provenance = {
@@ -10039,7 +10043,7 @@ function createEmptyIR(config) {
     name: config.name || "Project",
     version: config.version || "0.1.0",
     description: config.description,
-    category: config.category || "workflow",
+    category: Array.isArray(config.category) ? config.category : [config.category || "workflow"],
     fields: [],
     states: [{
       name: "draft",
@@ -10197,8 +10201,10 @@ function buildComposedResult(files, fileIRs, config, errors, warnings, options =
     if (isWorkflowFile(filename)) {
       workflowIRs.push(ir);
     } else if (isModelFile2(filename)) {
-      if (!ir.category || ir.category === "workflow") {
-        ir.category = "data";
+      const cat = ir.category;
+      const isDefault = !cat || cat === "workflow" || Array.isArray(cat) && cat.length === 1 && cat[0] === "workflow";
+      if (isDefault) {
+        ir.category = ["data"];
       }
       modelIRs.push(ir);
     } else if (isServerActionFile2(filename)) {
@@ -12187,7 +12193,8 @@ function determineSplitStrategy(def) {
   const stateCount = def.states.length;
   const hasExperience = !!def.experience || !!def.views?.default;
   const hasChildren = Array.isArray(def.metadata?.childSlugs) && def.metadata.childSlugs.length > 0;
-  if (def.category === "blueprint" || hasChildren) {
+  const catArr = Array.isArray(def.category) ? def.category : [def.category];
+  if (catArr.includes("blueprint") || hasChildren) {
     return {
       tier: "large",
       emitModels: fieldCount > 0,
@@ -12474,6 +12481,10 @@ var project_decompiler_exports = {};
 __export(project_decompiler_exports, {
   decompileProjectEnhanced: () => decompileProjectEnhanced
 });
+function hasCategory(cat, target) {
+  if (!cat) return false;
+  return Array.isArray(cat) ? cat.includes(target) : cat === target;
+}
 function pascalCase3(slug) {
   return slug.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join("");
 }
@@ -12945,7 +12956,7 @@ function generateLayoutFile(slug, roles) {
 function extractRouteTable(childDefinitions) {
   if (!childDefinitions) return [];
   const router = childDefinitions.find(
-    (c) => c.slug.endsWith("-router") || c.category === "router"
+    (c) => c.slug.endsWith("-router") || hasCategory(c.category, "router")
   );
   if (!router?.states) return [];
   return router.states.filter((s) => s.description?.startsWith("Route:")).map((s) => {
@@ -13073,7 +13084,7 @@ function extractPageSections(experience, childDefinitions) {
   if (routerExtracted) return routerExtracted;
   const routeTable = extractRouteTable(childDefinitions);
   const childSlugs = new Set(
-    (childDefinitions || []).filter((c) => !c.slug.endsWith("-router") && c.category !== "router").map((c) => c.slug)
+    (childDefinitions || []).filter((c) => !c.slug.endsWith("-router") && !hasCategory(c.category, "router")).map((c) => c.slug)
   );
   const pages = [];
   const childViews = [];
@@ -13242,7 +13253,7 @@ function generatePageFileFromSection(page, modelSlugToPath) {
     slug: page.slug,
     name: page.componentName,
     version: "1.0.0",
-    category: "page",
+    category: ["view"],
     states: [],
     transitions: [],
     fields,
@@ -13497,7 +13508,7 @@ function generateComponentFromDefinition(name, experience, props) {
     slug: name.toLowerCase(),
     name,
     version: "1.0.0",
-    category: "component",
+    category: ["component"],
     states: [],
     transitions: [],
     fields: [],
@@ -13734,7 +13745,7 @@ function decompileProjectEnhanced(definition) {
       if (definition.childDefinitions) {
         for (const child of definition.childDefinitions) {
           const cs = child.slug;
-          if (!cs.endsWith("-router") && child.category !== "router") {
+          if (!cs.endsWith("-router") && !hasCategory(child.category, "router")) {
             modelSlugToPath.set(cs, `models/${cs}.ts`);
           }
         }
@@ -13755,7 +13766,7 @@ function decompileProjectEnhanced(definition) {
     for (const child of definition.childDefinitions) {
       const childSlug = child.slug;
       if (childSlug === slug) continue;
-      const isRouter = childSlug.endsWith("-router") || child.category === "router";
+      const isRouter = childSlug.endsWith("-router") || hasCategory(child.category, "router");
       if (isRouter && routerIsCompilerGenerated) continue;
       if (!mergedChildren.has(childSlug)) {
         mergedChildren.set(childSlug, { ...child });
@@ -13810,7 +13821,7 @@ function decompileProjectEnhanced(definition) {
         if (child.version && child.version !== "0.1.0" && (!existing.version || existing.version === "0.1.0")) {
           existing.version = child.version;
         }
-        if (child.category && child.category !== "data" && (!existing.category || existing.category === "data")) {
+        if (child.category && !hasCategory(child.category, "data") && (!existing.category || hasCategory(existing.category, "data"))) {
           existing.category = child.category;
         }
         if (child.description && !existing.description) {
@@ -13820,8 +13831,8 @@ function decompileProjectEnhanced(definition) {
     }
   }
   for (const [childSlug, child] of mergedChildren) {
-    const isRouter = childSlug.endsWith("-router") || child.category === "router";
-    const isAction = child.category === "action";
+    const isRouter = childSlug.endsWith("-router") || hasCategory(child.category, "router");
+    const isAction = hasCategory(child.category, "action");
     const childTransitions = isRouter ? reduceRouterTransitions(child.transitions, child.states) : child.transitions;
     if (isAction) {
       const actionFilePath = `actions/${childSlug}.ts`;
@@ -14078,14 +14089,12 @@ async function deploy(options) {
 }
 async function fetchExistingDefinition(apiUrl, token, slug) {
   try {
-    const res = await fetch(`${apiUrl}/workflow/definitions?slug=${encodeURIComponent(slug)}`, {
+    const res = await fetch(`${apiUrl}/workflow/definitions/${encodeURIComponent(slug)}`, {
       headers: { Authorization: `Bearer ${token}` }
     });
     if (!res.ok) return null;
-    const data = await res.json();
-    const definitions = Array.isArray(data) ? data : data.items ?? data.data;
-    if (!definitions || definitions.length === 0) return null;
-    const def = definitions[0];
+    const def = await res.json();
+    if (!def || !def.id) return null;
     return {
       id: def.id,
       slug: def.slug,
@@ -14103,7 +14112,7 @@ async function createDefinition(apiUrl, token, ir) {
       "Content-Type": "application/json",
       Authorization: `Bearer ${token}`
     },
-    body: JSON.stringify(ir)
+    body: JSON.stringify({ ...ir, visibility: "PUBLIC" })
   });
   if (!res.ok) {
     const errorText = await res.text();
@@ -14883,7 +14892,7 @@ function mindmatrixReact(options) {
         slug: ir.slug,
         name: ir.name,
         version: ir.version,
-        category: ir.category || "workflow",
+        category: ir.category || ["workflow"],
         fields: ir.fields || [],
         states: ir.states || [],
         transitions: ir.transitions || [],
@@ -15033,431 +15042,6 @@ var init_vite = __esm({
   }
 });
 
-// src/cli/local-server.ts
-async function startLocalServer(options = {}) {
-  const { port = 4200, noAuth = true } = options;
-  const store = new MemoryStore();
-  const startedAt = (/* @__PURE__ */ new Date()).toISOString();
-  function json(res, status, body) {
-    const data = JSON.stringify(body);
-    res.writeHead(status, {
-      "Content-Type": "application/json",
-      "Access-Control-Allow-Origin": "*",
-      "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
-      "Access-Control-Allow-Headers": "Content-Type, Authorization",
-      "Content-Length": Buffer.byteLength(data)
-    });
-    res.end(data);
-  }
-  function readBody(req) {
-    return new Promise((resolve7, reject) => {
-      const chunks = [];
-      req.on("data", (chunk) => chunks.push(chunk));
-      req.on("end", () => resolve7(Buffer.concat(chunks).toString()));
-      req.on("error", reject);
-    });
-  }
-  function parseQuery(url) {
-    const idx = url.indexOf("?");
-    if (idx === -1) return {};
-    const params = {};
-    const qs = url.slice(idx + 1);
-    for (const pair of qs.split("&")) {
-      const [k, v] = pair.split("=");
-      if (k) params[decodeURIComponent(k)] = decodeURIComponent(v ?? "");
-    }
-    return params;
-  }
-  const server = http.createServer(async (req, res) => {
-    const method = req.method?.toUpperCase() ?? "GET";
-    const rawUrl = req.url ?? "/";
-    const queryStart = rawUrl.indexOf("?");
-    const path = queryStart >= 0 ? rawUrl.slice(0, queryStart) : rawUrl;
-    const query = parseQuery(rawUrl);
-    if (method === "OPTIONS") {
-      res.writeHead(204, {
-        "Access-Control-Allow-Origin": "*",
-        "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
-        "Access-Control-Allow-Headers": "Content-Type, Authorization",
-        "Access-Control-Max-Age": "86400"
-      });
-      res.end();
-      return;
-    }
-    try {
-      if (path === "/health" && method === "GET") {
-        return json(res, 200, {
-          status: "ok",
-          service: "mm-local-dev",
-          mode: "in-memory",
-          started_at: startedAt,
-          definitions: store.definitions.size,
-          instances: store.instances.size
-        });
-      }
-      if (path === "/api/v1/auth/login" && (method === "POST" || method === "GET")) {
-        return json(res, 200, {
-          token: "dev-token-local",
-          user: {
-            id: "dev-user-001",
-            email: "dev@localhost",
-            role: "admin",
-            name: "Local Developer"
-          }
-        });
-      }
-      if (path === "/api/v1/workflow/definitions" && method === "GET") {
-        const result = store.listDefinitions({
-          category: query.category,
-          limit: query.limit ? parseInt(query.limit, 10) : void 0,
-          offset: query.offset ? parseInt(query.offset, 10) : void 0
-        });
-        if (query.slug) {
-          const def = store.getDefinition(query.slug);
-          return json(res, 200, { items: def ? [def] : [], total: def ? 1 : 0 });
-        }
-        return json(res, 200, result);
-      }
-      const defMatch = path.match(/^\/api\/v1\/workflow\/definitions\/([^/]+)$/);
-      if (defMatch && method === "GET") {
-        const def = store.getDefinition(defMatch[1]);
-        if (!def) return json(res, 404, { error: "Not found" });
-        return json(res, 200, def);
-      }
-      if (path === "/api/v1/workflow/definitions" && method === "POST") {
-        const body = JSON.parse(await readBody(req));
-        const def = store.createDefinition(body);
-        return json(res, 201, def);
-      }
-      if (defMatch && method === "PATCH") {
-        const body = JSON.parse(await readBody(req));
-        const updated = store.patchDefinition(defMatch[1], body);
-        if (!updated) return json(res, 404, { error: "Not found" });
-        return json(res, 200, updated);
-      }
-      if (defMatch && method === "DELETE") {
-        const deleted = store.deleteDefinition(defMatch[1]);
-        if (!deleted) return json(res, 404, { error: "Not found" });
-        return json(res, 204, null);
-      }
-      if (path === "/api/v1/workflow/instances" && method === "GET") {
-        const result = store.listInstances({
-          definition_id: query.definition_id,
-          limit: query.limit ? parseInt(query.limit, 10) : void 0,
-          offset: query.offset ? parseInt(query.offset, 10) : void 0
-        });
-        return json(res, 200, result);
-      }
-      if (path === "/api/v1/workflow/instances" && method === "POST") {
-        const body = JSON.parse(await readBody(req));
-        const inst = store.createInstance(body);
-        if (!inst) return json(res, 404, { error: "Definition not found" });
-        return json(res, 201, inst);
-      }
-      const instMatch = path.match(/^\/api\/v1\/workflow\/instances\/([^/]+)$/);
-      if (instMatch && method === "GET") {
-        const inst = store.getInstance(instMatch[1]);
-        if (!inst) return json(res, 404, { error: "Not found" });
-        return json(res, 200, inst);
-      }
-      if (path === "/api/v1/workflow/execute-action" && method === "POST") {
-        const body = JSON.parse(await readBody(req));
-        const result = store.executeAction(body);
-        return json(res, 200, result);
-      }
-      const dataMatch = path.match(/^\/api\/v1\/data\/([^/]+)$/);
-      if (dataMatch && method === "GET") {
-        const def = store.getDefinition(dataMatch[1]);
-        if (!def) return json(res, 404, { error: "Not found" });
-        const instances = store.listInstances({ definition_id: def.id });
-        return json(res, 200, instances);
-      }
-      if (path.startsWith("/api/v1/")) {
-        return json(res, 501, { error: "Not implemented in local dev mode", path, method });
-      }
-      return json(res, 404, { error: "Not found", path });
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      console.error(`[mm-local] ${method} ${path} \u2014 Error: ${message}`);
-      return json(res, 500, { error: message });
-    }
-  });
-  return new Promise((resolve7, reject) => {
-    server.on("error", (err) => {
-      if (err.code === "EADDRINUSE") {
-        reject(new Error(`Port ${port} is already in use. Is another server running?`));
-      } else {
-        reject(err);
-      }
-    });
-    server.listen(port, () => {
-      console.log(`[mm-local] Local API server running at http://localhost:${port}`);
-      console.log(`[mm-local] Mode: in-memory (data lost on restart)`);
-      console.log(`[mm-local] Auth: disabled (all requests accepted)`);
-      resolve7({
-        server,
-        port,
-        store,
-        async close() {
-          return new Promise((res) => {
-            server.close(() => {
-              console.log("[mm-local] Local API server stopped");
-              res();
-            });
-          });
-        }
-      });
-    });
-  });
-}
-var http, import_node_crypto, MemoryStore;
-var init_local_server = __esm({
-  "src/cli/local-server.ts"() {
-    "use strict";
-    http = __toESM(require("http"));
-    import_node_crypto = require("crypto");
-    MemoryStore = class {
-      constructor() {
-        this.definitions = /* @__PURE__ */ new Map();
-        this.instances = /* @__PURE__ */ new Map();
-        this.slugIndex = /* @__PURE__ */ new Map();
-      }
-      // slug → id
-      // ── Definitions ──────────────────────────────────────────────────────
-      createDefinition(input) {
-        if (this.slugIndex.has(input.slug)) {
-          const existing = this.definitions.get(this.slugIndex.get(input.slug));
-          if (existing) return existing;
-        }
-        const now = (/* @__PURE__ */ new Date()).toISOString();
-        const def = {
-          id: input.id ?? (0, import_node_crypto.randomUUID)(),
-          slug: input.slug,
-          name: input.name,
-          version: input.version ?? "1.0.0",
-          description: input.description ?? null,
-          category: input.category ?? "workflow",
-          fields: input.fields ?? [],
-          states: input.states ?? [],
-          transitions: input.transitions ?? [],
-          roles: input.roles ?? [],
-          experience: input.experience ?? null,
-          metadata: input.metadata ?? {},
-          child_definitions: input.child_definitions ?? [],
-          is_immutable: input.is_immutable ?? false,
-          tags: input.tags ?? [],
-          inline_tags: input.inline_tags ?? [],
-          created_at: now,
-          updated_at: now
-        };
-        this.definitions.set(def.id, def);
-        this.slugIndex.set(def.slug, def.id);
-        return def;
-      }
-      getDefinition(idOrSlug) {
-        const byId = this.definitions.get(idOrSlug);
-        if (byId) return byId;
-        const id = this.slugIndex.get(idOrSlug);
-        if (id) return this.definitions.get(id);
-        return void 0;
-      }
-      listDefinitions(opts) {
-        let items = Array.from(this.definitions.values());
-        if (opts?.category) {
-          items = items.filter((d) => d.category === opts.category);
-        }
-        const total = items.length;
-        const offset = opts?.offset ?? 0;
-        const limit = opts?.limit ?? 50;
-        items = items.slice(offset, offset + limit);
-        return { items, total };
-      }
-      patchDefinition(id, patch) {
-        const def = this.definitions.get(id);
-        if (!def) return void 0;
-        Object.assign(def, patch, { updated_at: (/* @__PURE__ */ new Date()).toISOString() });
-        return def;
-      }
-      deleteDefinition(id) {
-        const def = this.definitions.get(id);
-        if (!def) return false;
-        this.slugIndex.delete(def.slug);
-        this.definitions.delete(id);
-        return true;
-      }
-      // ── Instances ────────────────────────────────────────────────────────
-      createInstance(input) {
-        const def = this.getDefinition(input.definition_id) ?? this.getDefinition(input.definition_slug);
-        if (!def) return null;
-        const initialState = def.states.find((s) => s.type === "START" || s.type === "initial");
-        const stateName = initialState?.name ?? "initial";
-        const stateData = {};
-        for (const field of def.fields) {
-          if (field.default_value !== void 0) {
-            stateData[field.name] = field.default_value;
-          }
-        }
-        Object.assign(stateData, input.state_data ?? {});
-        const now = (/* @__PURE__ */ new Date()).toISOString();
-        const inst = {
-          id: (0, import_node_crypto.randomUUID)(),
-          definition_id: def.id,
-          definition_slug: def.slug,
-          current_state: stateName,
-          state_data: stateData,
-          execution_lock_version: 0,
-          event_log: [{
-            event_type: "transition",
-            message: `Instance created in state '${stateName}'`,
-            timestamp: now
-          }],
-          created_at: now,
-          updated_at: now
-        };
-        this.instances.set(inst.id, inst);
-        return inst;
-      }
-      getInstance(id) {
-        return this.instances.get(id);
-      }
-      listInstances(opts) {
-        let items = Array.from(this.instances.values());
-        if (opts?.definition_id) {
-          items = items.filter((i) => i.definition_id === opts.definition_id);
-        }
-        const total = items.length;
-        const offset = opts?.offset ?? 0;
-        const limit = opts?.limit ?? 50;
-        items = items.slice(offset, offset + limit);
-        return { items, total };
-      }
-      // ── Execute Action (Transition) ──────────────────────────────────────
-      executeAction(input) {
-        const def = this.getDefinition(input.definition_id);
-        if (!def) return { success: false, error: "Definition not found" };
-        let inst;
-        if (input.instance_id) {
-          const existing = this.instances.get(input.instance_id);
-          if (!existing) return { success: false, error: "Instance not found" };
-          inst = existing;
-        } else {
-          const created = this.createInstance({
-            definition_id: def.id,
-            definition_slug: def.slug,
-            state_data: input.payload
-          });
-          if (!created) return { success: false, error: "Failed to create instance" };
-          inst = created;
-        }
-        if (input.payload && input.instance_id) {
-          Object.assign(inst.state_data, input.payload);
-        }
-        const transition = def.transitions.find((t27) => t27.name === input.action_name && t27.from.includes(inst.current_state));
-        if (!transition) {
-          return {
-            success: false,
-            instance_id: inst.id,
-            from_state: inst.current_state,
-            to_state: null,
-            state_data: inst.state_data,
-            error: `No transition '${input.action_name}' from state '${inst.current_state}'`
-          };
-        }
-        const fromState = inst.current_state;
-        const now = (/* @__PURE__ */ new Date()).toISOString();
-        const events = [];
-        let lastEvalResult = null;
-        events.push({ event_type: "transition", message: `Transition '${transition.name}' started: ${fromState} \u2192 ${transition.to}`, timestamp: now });
-        for (const action of transition.actions ?? []) {
-          try {
-            if (action.type === "set_field") {
-              const field = action.config?.field;
-              if (action.config?.expression) {
-                const expr = action.config.expression;
-                const result = this.evaluateSimpleExpression(expr, inst.state_data);
-                inst.state_data[field] = result;
-              } else if (action.config?.value !== void 0) {
-                inst.state_data[field] = action.config.value;
-              }
-              events.push({ event_type: "action_executed", message: `transition action 'set_field' succeeded`, timestamp: now });
-            } else if (action.type === "eval") {
-              const expr = action.config?.expression;
-              lastEvalResult = this.evaluateSimpleExpression(expr, inst.state_data);
-              events.push({ event_type: "action_executed", message: `transition action 'eval' succeeded`, timestamp: now });
-            } else {
-              events.push({ event_type: "action_executed", message: `transition action '${action.type}' succeeded (no-op in local mode)`, timestamp: now });
-            }
-          } catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            events.push({ event_type: "action_failed", message: `transition action '${action.type}' failed: ${msg}`, timestamp: now });
-            return {
-              success: false,
-              instance_id: inst.id,
-              from_state: fromState,
-              to_state: null,
-              state_data: inst.state_data,
-              event_log: events,
-              error: `transition action failed: ${msg}`
-            };
-          }
-        }
-        inst.current_state = transition.to;
-        inst.execution_lock_version++;
-        inst.updated_at = now;
-        events.push({ event_type: "transition", message: `State changed: ${fromState} \u2192 ${transition.to}`, timestamp: now });
-        inst.event_log.push(...events);
-        return {
-          success: true,
-          instance_id: inst.id,
-          from_state: fromState,
-          to_state: transition.to,
-          state_data: inst.state_data,
-          result: lastEvalResult,
-          event_log: events
-        };
-      }
-      /**
-       * Minimal expression evaluator for local dev mode.
-       * Handles: field references, arithmetic, string literals, simple comparisons.
-       * Does NOT handle: while loops, if/else, function calls, multi-statement blocks.
-       * For full evaluation, use mm-napi when available.
-       */
-      evaluateSimpleExpression(expr, context) {
-        if (context[expr] !== void 0) return context[expr];
-        const arithMatch = expr.match(/^(\w+)\s*([+\-*/])\s*(\d+(?:\.\d+)?)$/);
-        if (arithMatch) {
-          const [, field, op, numStr] = arithMatch;
-          const left = Number(context[field] ?? 0);
-          const right = Number(numStr);
-          switch (op) {
-            case "+":
-              return left + right;
-            case "-":
-              return left - right;
-            case "*":
-              return left * right;
-            case "/":
-              return right !== 0 ? left / right : 0;
-          }
-        }
-        if (/^\d+(\.\d+)?$/.test(expr.trim())) {
-          return Number(expr.trim());
-        }
-        const strMatch = expr.match(/^["'](.*)["']$/);
-        if (strMatch) return strMatch[1];
-        try {
-          const keys = Object.keys(context);
-          const values = Object.values(context);
-          const fn = new Function(...keys, `"use strict"; return (${expr});`);
-          return fn(...values);
-        } catch {
-          return null;
-        }
-      }
-    };
-  }
-});
-
 // src/cli/seed.ts
 var seed_exports = {};
 __export(seed_exports, {
@@ -15797,34 +15381,33 @@ async function createDevServer(options = {}) {
     open = false
   } = options;
   const clients = /* @__PURE__ */ new Set();
-  let localServer = null;
   let apiUrl;
-  let isLocalMode = false;
-  if (rawApiUrl === "local") {
-    localServer = await startLocalServer({ port: 4200 });
-    apiUrl = "http://localhost:4200/api/v1";
-    isLocalMode = true;
-  } else if (rawApiUrl === "auto") {
-    const defaultRemote = "https://dev.mindmatrix.club/api/v1";
-    const remoteHealth = await checkBackendHealth(defaultRemote);
-    if (remoteHealth.ok) {
-      apiUrl = defaultRemote;
-    } else {
-      const localHealth = await checkBackendHealth("http://localhost:4200/api/v1");
-      if (localHealth.ok) {
-        apiUrl = "http://localhost:4200/api/v1";
+  if (rawApiUrl === "local" || rawApiUrl === "auto") {
+    const localHealth = await checkBackendHealth("http://localhost:4200/api/v1");
+    if (localHealth.ok) {
+      apiUrl = "http://localhost:4200/api/v1";
+    } else if (rawApiUrl === "auto") {
+      const defaultRemote = "https://dev.mindmatrix.club/api/v1";
+      const remoteHealth = await checkBackendHealth(defaultRemote);
+      if (remoteHealth.ok) {
+        apiUrl = defaultRemote;
       } else {
-        console.log("[mm-dev] No backend detected \u2014 starting local in-memory API server...");
-        localServer = await startLocalServer({ port: 4200 });
+        console.error("[mm-dev] No backend detected. Start the engine first:");
+        console.error("         mmrc dev         (auto-starts engine)");
+        console.error("         mmrc engine start (manual start)");
+        console.error("[mm-dev] Or specify a remote API: mmrc dev --api-url https://...");
         apiUrl = "http://localhost:4200/api/v1";
-        isLocalMode = true;
       }
+    } else {
+      console.error("[mm-dev] Local engine not running on port 4200.");
+      console.error("         Start it with: mmrc dev (or mmrc engine start)");
+      apiUrl = "http://localhost:4200/api/v1";
     }
   } else {
     apiUrl = rawApiUrl;
   }
-  const token = isLocalMode ? "dev-token-local" : await resolveDevToken(apiUrl, explicitToken);
-  const health = isLocalMode ? { ok: true, version: "local", db: "in-memory" } : await checkBackendHealth(apiUrl);
+  const token = await resolveDevToken(apiUrl, explicitToken);
+  const health = await checkBackendHealth(apiUrl);
   let initialSlug, initialCompiled = 0, initialDeployed = false, initialErrors = 0;
   if (token && health.ok) {
     const r = await initialBuildDeploy(src, outDir, mode, apiUrl, token);
@@ -15884,63 +15467,169 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
 `;
     }
   };
-  const devHtml = `<!DOCTYPE html>
+  const { existsSync: fsExists } = await import("fs");
+  const projectIndexPath = require("path").join(process.cwd(), "index.html");
+  const hasProjectIndex = fsExists(projectIndexPath);
+  if (!hasProjectIndex) {
+    const { writeFileSync: fsWrite } = await import("fs");
+    fsWrite(projectIndexPath, `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>MindMatrix Dev</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #fafafa; color: #111; }
-    #root { min-height: 100vh; }
-    .mm-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; flex-direction: column; gap: 12px; }
-    .mm-loading h1 { font-size: 20px; font-weight: 600; color: #333; }
-    .mm-loading p { color: #888; font-size: 14px; }
-  </style>
 </head>
 <body>
-  <div id="root">
-    <div class="mm-loading">
-      <h1>MindMatrix Dev</h1>
-      <p>Loading...</p>
-    </div>
-  </div>
-  <script>
-    async function render() {
-      const root = document.getElementById('root');
+  <div id="root"></div>
+  <script type="module" src="/__mm_dev_entry.tsx"></script>
+</body>
+</html>`, "utf-8");
+  }
+  const devEntryPlugin = {
+    name: "mindmatrix-dev-entry",
+    resolveId(id) {
+      if (id === "/__mm_dev_entry.tsx") return id;
+      return null;
+    },
+    load(id) {
+      if (id !== "/__mm_dev_entry.tsx") return null;
+      return `
+import React, { useState, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { DevPlayer } from '@mmapp/react/player';
+import { PlayerProvider, ExperienceRenderer, createApiResolver } from '@mmapp/react/player';
+
+// Detect API base URL \u2014 proxy through dev server or use direct URL
+const API_BASE = window.location.origin + '/api/v1';
+const resolver = createApiResolver({ baseUrl: API_BASE, token: () => localStorage.getItem('auth_token') });
+
+/**
+ * Prepare experience tree for rendering.
+ * Attaches metadata.dataSources to the root node and remaps
+ * dataSource slugs to use definition-relative naming.
+ *
+ * @param definition - The main blueprint definition
+ * @param allDefinitions - ALL definitions from the API (used for slug resolution)
+ */
+function prepareTree(definition, allDefinitions) {
+  const exp = definition.experience;
+  if (!exp || typeof exp !== 'object') return null;
+
+  const meta = definition.metadata || {};
+  const dataSources = meta.dataSources || [];
+  const mutationTargets = meta.mutationTargets || [];
+
+  // Build a slug map from ALL deployed definitions
+  // This resolves bare model names (e.g. "item") to full slugs (e.g. "tutorial-1-item")
+  const blueprintSlug = definition.slug || '';
+  const allSlugs = (allDefinitions || []).map(d => d.slug).filter(Boolean);
+
+  function resolveSlug(bareSlug) {
+    if (!bareSlug) return bareSlug;
+    // Already a full slug (contains hyphen matching a known definition)
+    if (allSlugs.includes(bareSlug)) return bareSlug;
+    // Try blueprint-prefixed slug: "item" \u2192 "tutorial-1-item"
+    const prefixed = blueprintSlug + '-' + bareSlug;
+    if (allSlugs.includes(prefixed)) return prefixed;
+    // Try matching by suffix across all definitions
+    const match = allSlugs.find(s => s.endsWith('-' + bareSlug));
+    if (match) return match;
+    // Return original (will attempt as-is)
+    return bareSlug;
+  }
+
+  // Clone root node and attach dataSources
+  const root = { ...exp };
+  if (dataSources.length > 0 && !root.dataSources) {
+    root.dataSources = dataSources.map(ds => ({
+      ...ds,
+      slug: resolveSlug(ds.slug),
+    }));
+  }
+
+  // Remap mutation targets the same way
+  if (mutationTargets.length > 0) {
+    const resolvedTargets = mutationTargets.map(t => resolveSlug(t));
+    root.config = { ...(root.config || {}), _mutationTargets: resolvedTargets };
+  }
+
+  return root;
+}
+
+function App() {
+  const [tree, setTree] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function loadTree() {
       try {
-        const res = await fetch('/api/v1/workflow/definitions');
+        const res = await fetch(API_BASE + '/workflow/definitions');
         const json = await res.json();
-        const items = json.items || json.data || [];
-        let html = '<div style="padding:40px;max-width:960px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,sans-serif">';
-        html += '<h1 style="margin-bottom:8px">MindMatrix Dev</h1>';
-        html += '<p style="color:#666;margin-bottom:24px">' + items.length + ' definition(s) deployed</p>';
-        if (items.length === 0) {
-          html += '<div style="text-align:center;padding:60px 20px;color:#888"><p>No definitions yet.</p><p style="margin-top:8px;font-size:13px">Edit your model files and save.</p></div>';
-        }
-        for (const def of items) {
-          html += '<div style="border:1px solid #e0e0e0;border-radius:8px;padding:16px;margin-bottom:12px;background:#fff">';
-          html += '<h3 style="margin-bottom:4px">' + (def.name || def.slug || 'Unnamed') + '</h3>';
-          html += '<p style="color:#888;font-size:13px">slug: ' + (def.slug || '?') + ' | states: ' + (def.states?.length || 0) + ' | fields: ' + (def.fields?.length || 0) + '</p>';
-          html += '</div>';
-        }
-        html += '</div>';
-        root.innerHTML = html;
+        const rawItems = json.items || json.data || [];
+        // Flatten: API returns { id, slug, definition: { experience, ... } }
+        // Merge definition fields up to the top level for easier access
+        const items = rawItems.map(d => {
+          const def = d.definition || {};
+          return { ...d, ...def, definition: undefined };
+        });
+        // Find the main blueprint definition (has experience tree)
+        const main = items.find(d => d.experience && !(Array.isArray(d.category) ? d.category.includes('data') : d.category === 'data')) || items.find(d => d.experience) || items[0];
+        if (main?.experience) {
+          const prepared = prepareTree(main, items);
+          if (prepared) {
+            setTree(prepared);
+            return;
+          }
+        }
+        if (main) {
+          // No experience tree \u2014 show definition info
+          setTree({
+            type: 'Stack',
+            props: { style: { padding: 40, gap: 16 } },
+            children: [
+              { type: 'Text', props: { children: main.name || main.slug, style: { fontSize: 24, fontWeight: 'bold' } } },
+              { type: 'Text', props: { children: (main.states?.length || 0) + ' states, ' + (main.fields?.length || 0) + ' fields', style: { color: '#666' } } },
+              ...items.map((d, i) => ({
+                type: 'Card',
+                props: { key: i, style: { padding: 16, border: '1px solid #ddd', borderRadius: 8 } },
+                children: [
+                  { type: 'Text', props: { children: d.name || d.slug, style: { fontWeight: 600 } } },
+                  { type: 'Text', props: { children: 'slug: ' + d.slug + ' | ' + (d.states?.length || 0) + ' states', style: { fontSize: 13, color: '#888' } } },
+                ],
+              })),
+            ],
+          });
+        }
       } catch (e) {
-        root.innerHTML = '<div style="padding:40px"><h1>MindMatrix Dev</h1><p style="color:#c00;margin-top:8px">API Error: ' + e.message + '</p></div>';
+        setError(e.message);
       }
     }
-    render();
-    setInterval(render, 3000);
-  </script>
-</body>
-</html>`;
-  const { mkdtempSync, writeFileSync: writeFileSync10 } = await import("fs");
-  const { join: join8 } = await import("path");
-  const { tmpdir } = await import("os");
-  const devRoot = mkdtempSync(join8(tmpdir(), "mm-dev-"));
-  writeFileSync10(join8(devRoot, "index.html"), devHtml, "utf-8");
+    loadTree();
+  }, []);
+
+  if (error) return React.createElement('div', { style: { padding: 40 } },
+    React.createElement('h1', null, 'MindMatrix Dev'),
+    React.createElement('p', { style: { color: '#c00' } }, 'Error: ' + error)
+  );
+
+  if (!tree) return React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' } },
+    React.createElement('p', null, 'Loading...')
+  );
+
+  // If tree has 'component' field, use ExperienceRenderer; otherwise legacy DevPlayer
+  if (tree.component) {
+    return React.createElement(PlayerProvider, { resolver },
+      React.createElement(ExperienceRenderer, { tree, className: 'mm-experience-root' })
+    );
+  }
+
+  return React.createElement(DevPlayer, { tree, title: document.title || 'MindMatrix Dev' });
+}
+
+createRoot(document.getElementById('root')).render(React.createElement(App));
+`;
+    }
+  };
   let deployInFlight = false;
   const compileDeployPlugin = {
     name: "mindmatrix-dev-compile-deploy",
@@ -15971,16 +15660,16 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
     }
   };
   const viteConfig = {
-    // Physical index.html lives in a temp dir so Vite serves it natively.
-    root: devRoot,
-    // Pre-bundle React so Vite doesn't warn about missing entry point.
+    // Use the blueprint directory as Vite root (has node_modules with React).
+    root: process.cwd(),
+    // Pre-bundle React and the player for fast dev startup.
     optimizeDeps: { include: ["react", "react-dom/client"] },
     server: {
       port,
       open,
       host: true,
       // Allow serving files from the real project directory (fs.allow).
-      fs: { allow: [devRoot, process.cwd(), ".."] },
+      fs: { allow: [process.cwd(), ".."] },
       proxy: {
         "/api": { target: proxyTarget, changeOrigin: true, secure: true, ws: true },
         "/health": { target: proxyTarget, changeOrigin: true, secure: true },
@@ -15990,6 +15679,7 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
     plugins: [
       mindmatrixReact(pluginOpts),
       compileDeployPlugin,
+      devEntryPlugin,
       devPlayerPlugin,
       { name: "mindmatrix-error-overlay", configureServer(server) {
         server.middlewares.use(errorOverlayMiddleware());
@@ -15997,8 +15687,8 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
     ],
     logLevel: "warn"
   };
-  const { createServer: createServer2 } = await import("vite");
-  const vite = await createServer2(viteConfig);
+  const { createServer } = await import("vite");
+  const vite = await createServer(viteConfig);
   await vite.listen();
   const resolvedPort = vite.config.server.port ?? port;
   if (enableWs && vite.httpServer) {
@@ -16016,7 +15706,7 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
     } catch {
     }
   }
-  printBanner({ port: resolvedPort, apiUrl: isLocalMode ? `${apiUrl} (local in-memory)` : apiUrl, src, include, health, token: !!token, compiled: initialCompiled, deployed: initialDeployed, slug: initialSlug, errors: initialErrors });
+  printBanner({ port: resolvedPort, apiUrl, src, include, health, token: !!token, compiled: initialCompiled, deployed: initialDeployed, slug: initialSlug, errors: initialErrors });
   return {
     vite,
     port: resolvedPort,
@@ -16048,14 +15738,6 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
       clients.clear();
       currentErrors = null;
       await vite.close();
-      if (localServer) {
-        await localServer.close();
-      }
-      try {
-        const { rmSync } = await import("fs");
-        rmSync(devRoot, { recursive: true, force: true });
-      } catch {
-      }
     }
   };
 }
@@ -16065,7 +15747,6 @@ var init_dev_server = __esm({
     "use strict";
     init_vite();
     init_build();
-    init_local_server();
     currentErrors = null;
   }
 });
@@ -16374,99 +16055,10 @@ function generateIndexHtml(name) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${title} \u2014 MindMatrix Dev</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #fafafa; color: #111; }
-    #root { min-height: 100vh; padding: 40px; max-width: 960px; margin: 0 auto; }
-    h1 { font-size: 24px; margin-bottom: 8px; }
-    .subtitle { color: #666; margin-bottom: 24px; }
-    .card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; margin-bottom: 12px; background: #fff; }
-    .card h3 { font-size: 16px; margin-bottom: 4px; }
-    .card .meta { color: #888; font-size: 13px; }
-    .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
-    .badge-state { background: #e3f2fd; color: #1565c0; }
-    .empty { text-align: center; padding: 60px 20px; color: #888; }
-    .error { color: #c62828; background: #ffebee; padding: 16px; border-radius: 8px; margin-bottom: 16px; }
-    .actions { display: flex; gap: 8px; margin-top: 8px; }
-    .btn { padding: 6px 12px; border-radius: 4px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-size: 13px; }
-    .btn:hover { background: #f5f5f5; }
-    .btn-primary { background: #1976d2; color: #fff; border-color: #1976d2; }
-    .btn-primary:hover { background: #1565c0; }
-  </style>
 </head>
 <body>
-  <div id="root">
-    <h1>${title}</h1>
-    <p class="subtitle">Loading...</p>
-  </div>
-  <script type="module">
-    const API = '/api/v1';
-
-    async function api(path, opts) {
-      const res = await fetch(API + path, {
-        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer dev-local' },
-        ...opts,
-      });
-      return res.json();
-    }
-
-    async function render() {
-      const root = document.getElementById('root');
-      try {
-        const defs = await api('/workflow/definitions');
-        const items = defs.items || defs.data || [];
-
-        let html = '<h1>${title}</h1>';
-        html += '<p class="subtitle">' + items.length + ' definition(s) deployed</p>';
-
-        if (items.length === 0) {
-          html += '<div class="empty"><p>No definitions deployed yet.</p><p style="margin-top:8px;font-size:13px">Edit your model files and save \u2014 mmrc dev will auto-compile and deploy.</p></div>';
-        }
-
-        for (const def of items) {
-          const states = def.states || [];
-          const fields = def.fields || [];
-          const transitions = def.transitions || [];
-          html += '<div class="card">';
-          html += '<h3>' + (def.name || def.slug || 'Unnamed') + '</h3>';
-          html += '<p class="meta">' + states.length + ' states \xB7 ' + fields.length + ' fields \xB7 ' + transitions.length + ' transitions</p>';
-          html += '<div class="actions">';
-          html += '<button class="btn btn-primary" onclick="createInstance(\\'' + def.slug + '\\')">+ Create Instance</button>';
-          html += '</div>';
-          html += '</div>';
-        }
-
-        // Show instances
-        const instances = await api('/workflow/instances');
-        const instItems = instances.items || instances.data || [];
-        if (instItems.length > 0) {
-          html += '<h2 style="margin-top:32px;margin-bottom:12px">Instances (' + instItems.length + ')</h2>';
-          for (const inst of instItems) {
-            html += '<div class="card">';
-            html += '<h3>' + (inst.definition_slug || '?') + ' <span class="badge badge-state">' + (inst.current_state || inst.state || '?') + '</span></h3>';
-            html += '<p class="meta">ID: ' + inst.id + '</p>';
-            html += '</div>';
-          }
-        }
-
-        root.innerHTML = html;
-      } catch (e) {
-        root.innerHTML = '<h1>${title}</h1><div class="error">API Error: ' + e.message + '</div>';
-      }
-    }
-
-    window.createInstance = async function(slug) {
-      await api('/workflow/instances', {
-        method: 'POST',
-        body: JSON.stringify({ definition_slug: slug, state_data: { title: 'New Item', priority: 'medium' } }),
-      });
-      render();
-    };
-
-    render();
-    // Auto-refresh every 3 seconds
-    setInterval(render, 3000);
-  </script>
+  <div id="root"></div>
+  <script type="module" src="/__mm_dev_entry.tsx"></script>
 </body>
 </html>`;
 }
@@ -16625,37 +16217,48 @@ function generatePage(name) {
   const title = toTitleCase(name);
   const pascal = toPascalCase2(name);
   return `/**
- * @workflow slug="${name}-home" version="1.0.0" category="page"
+ * @workflow slug="${name}-home" version="1.0.0" category="view"
  *
- * Index page \u2014 lists items with create and search.
+ * Index page \u2014 full CRUD with create form, search, transitions, and delete.
  */
 
 import { useState } from 'react';
 import itemModel from '../models/item';
 import {
   useQuery, useMutation, useRouter,
-  Stack, Row, Text, Button, Icon, Card, Show, TextInput, Badge,
+  Stack, Row, Text, Button, Icon, Card, Show, TextInput, Badge, Select,
 } from '@mmapp/react';
 
-const PRIORITY_COLORS: Record<string, string> = {
-  high: 'token:error',
-  medium: 'token:warning',
-  low: 'token:success',
-};
-
 export default function ${pascal}Home() {
   const { data: items, loading } = useQuery(itemModel);
   const mutation = useMutation(itemModel);
   const router = useRouter();
   const [search, setSearch] = useState('');
+  const [showCreate, setShowCreate] = useState(false);
+  const [newTitle, setNewTitle] = useState('');
+  const [newDescription, setNewDescription] = useState('');
+  const [newPriority, setNewPriority] = useState('medium');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editTitle, setEditTitle] = useState('');
 
-  const activeItems = items.filter(i => i.state !== 'archived');
-  const filtered = activeItems.filter(i =>
-    i.fields.title.toLowerCase().includes(search.toLowerCase())
-  );
+  const visibleItems = items.filter(i => i.state !== 'archived');
+  const filtered = search
+    ? visibleItems.filter(i => i.fields.title.toLowerCase().includes(search.toLowerCase()))
+    : visibleItems;
 
   const handleCreate = async () => {
-    await mutation.create({ title: 'New Item', priority: 'medium' });
+    if (!newTitle.trim()) return;
+    await mutation.create({ title: newTitle.trim(), description: newDescription, priority: newPriority });
+    setNewTitle('');
+    setNewDescription('');
+    setNewPriority('medium');
+    setShowCreate(false);
+  };
+
+  const handleUpdate = async (id: string) => {
+    if (!editTitle.trim()) return;
+    await mutation.update(id, { title: editTitle.trim() });
+    setEditingId(null);
   };
 
   return (
@@ -16664,9 +16267,9 @@ export default function ${pascal}Home() {
       <Row justify="space-between" align="center">
         <Stack gap={4}>
           <Text variant="h3" weight="bold" value="${title}" />
-          <Text variant="muted" size="sm" value={\`\${activeItems.length} items\`} />
+          <Text variant="muted" size="sm" value={\`\${visibleItems.length} item\${visibleItems.length !== 1 ? 's' : ''}\`} />
         </Stack>
-        <Button variant="primary" onPress={handleCreate}>
+        <Button variant="primary" onPress={() => setShowCreate(true)}>
           <Row gap={6} align="center">
             <Icon name="plus" size={16} />
             <Text value="Add Item" />
@@ -16674,6 +16277,42 @@ export default function ${pascal}Home() {
         </Button>
       </Row>
 
+      {/* Create form */}
+      <Show when={showCreate}>
+        <Card padding={16}>
+          <Stack gap={12}>
+            <Text weight="bold" value="New Item" />
+            <TextInput
+              value={newTitle}
+              onChange={setNewTitle}
+              placeholder="Item title (required)"
+            />
+            <TextInput
+              value={newDescription}
+              onChange={setNewDescription}
+              placeholder="Description (optional)"
+            />
+            <Select
+              value={newPriority}
+              onChange={setNewPriority}
+              options={[
+                { label: 'Low', value: 'low' },
+                { label: 'Medium', value: 'medium' },
+                { label: 'High', value: 'high' },
+              ]}
+            />
+            <Row gap={8} justify="flex-end">
+              <Button variant="ghost" onPress={() => setShowCreate(false)}>
+                <Text value="Cancel" />
+              </Button>
+              <Button variant="primary" onPress={handleCreate}>
+                <Text value="Create" />
+              </Button>
+            </Row>
+          </Stack>
+        </Card>
+      </Show>
+
       {/* Search */}
       <TextInput
         value={search}
@@ -16695,10 +16334,12 @@ export default function ${pascal}Home() {
         <Card padding={32}>
           <Stack align="center" gap={12}>
             <Icon name="inbox" size={40} color="token:muted" />
-            <Text variant="muted" value="No items yet" />
-            <Button variant="outline" onPress={handleCreate}>
-              <Text value="Create your first item" />
-            </Button>
+            <Text variant="muted" value={search ? 'No items match your search' : 'No items yet'} />
+            <Show when={!search}>
+              <Button variant="outline" onPress={() => setShowCreate(true)}>
+                <Text value="Create your first item" />
+              </Button>
+            </Show>
           </Stack>
         </Card>
       </Show>
@@ -16710,13 +16351,48 @@ export default function ${pascal}Home() {
             <Card key={item.id} padding={12}>
               <Row align="center" gap={12}>
                 <Stack flex={1} gap={2}>
-                  <Text weight="medium" value={item.fields.title} />
-                  <Show when={!!item.fields.description}>
-                    <Text size="sm" variant="muted" value={item.fields.description} />
+                  <Show when={editingId === item.id}>
+                    <Row gap={8}>
+                      <TextInput
+                        value={editTitle}
+                        onChange={setEditTitle}
+                        placeholder="Title"
+                      />
+                      <Button variant="primary" size="sm" onPress={() => handleUpdate(item.id)}>
+                        <Text value="Save" />
+                      </Button>
+                      <Button variant="ghost" size="sm" onPress={() => setEditingId(null)}>
+                        <Text value="Cancel" />
+                      </Button>
+                    </Row>
+                  </Show>
+                  <Show when={editingId !== item.id}>
+                    <Text
+                      weight="medium"
+                      value={item.fields.title}
+                      onPress={() => { setEditingId(item.id); setEditTitle(item.fields.title); }}
+                    />
+                    <Show when={!!item.fields.description}>
+                      <Text size="sm" variant="muted" value={item.fields.description} />
+                    </Show>
                   </Show>
                 </Stack>
                 <Badge value={item.fields.priority} />
                 <Badge value={item.state} variant={item.state === 'active' ? 'success' : 'default'} />
+                {/* Transition buttons */}
+                <Show when={item.state === 'draft'}>
+                  <Button variant="outline" size="sm" onPress={() => mutation.transition(item.id, 'activate')}>
+                    <Text value="Activate" />
+                  </Button>
+                </Show>
+                <Show when={item.state === 'active'}>
+                  <Button variant="ghost" size="sm" onPress={() => mutation.transition(item.id, 'archive')}>
+                    <Text value="Archive" />
+                  </Button>
+                </Show>
+                <Button variant="ghost" size="sm" onPress={() => mutation.remove(item.id)}>
+                  <Icon name="trash" size={14} color="token:error" />
+                </Button>
               </Row>
             </Card>
           ))}