Designer Demo

Designer-driven feature — live schema edits via the UI skeleton.

What it shows

• Patterns from the three hand-rolled view categories the designer targets
• A minimal feature surface the designer can open and mutate

Source

Feature entry point: src/feature.ts.

Tests

No dedicated automated tests in this folder yet — use it as a composition sample.

---

Source code

The feature entry point — embedded straight from the source file, so the code here is exactly what runs. Multi-file samples keep their remaining files next to it on GitHub (link below):

// kumiko-feature-version: 1
// Demo-Feature für den Designer-Skeleton (C5).
// Enthält bewusst Patterns aus den 3 hand-rollten View-Kategorien:
//   - entity      → Tabelle der Fields
//   - writeHandler → Header + Code-Blocks (schema + handler)
//   - nav         → ID/Label/Screen-Card
// Plus optionalRequires + metric als JSON-Dump-Fallback.

import { defineFeature } from "@cosmicdrift/kumiko-framework/engine";
import { z } from "zod";

defineFeature("designerDemo", (r) => {
  r.optionalRequires("analytics");

  r.entity("task", {
    fields: {
      title: { type: "text", required: true },
      done: { type: "boolean", default: false },
      priority: { type: "select", options: ["low", "medium", "high"], default: "medium" },
    },
  });

  r.writeHandler({
    name: "task:create",
    schema: z.object({ title: z.string(), priority: z.string().optional() }),
    handler: async (_event, _ctx) => {
      return { isSuccess: true, data: { id: "x" } };
    },
    access: { roles: ["user", "admin"] },
  });

  r.writeHandler({
    name: "task:complete",
    schema: z.object({ id: z.string() }),
    handler: async (_event, _ctx) => {
      return { isSuccess: true, data: {} };
    },
    access: { openToAll: true },
  });

  r.nav({
    id: "tasks",
    label: "Tasks",
    icon: "list",
    screen: "designerDemo:screen:task-list",
  });

  r.metric("tasks_created", { type: "counter" });
});

📄 On GitHub: samples/recipes/designer-demo/src/feature.ts