@cosmicdrift/kumiko-samples 0.338.0

package/samples/apps/showcase/src/features/demos/web/pages/toast.tsx

@@ -0,0 +1,71 @@
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import { useToast } from "@cosmicdrift/kumiko-renderer-web";
+import { type ReactNode, useState } from "react";
+import { DemoPage, DemoSection } from "../components/page";
+
+// Toast-Demo. useToast() ist die einzige Public-API — der ToastProvider
+// ist im createKumikoApp gemountet, jeder Component innerhalb darf
+// toasts pushen ohne sich um State/Mounting zu kümmern.
+
+export function ToastDemo(): ReactNode {
+  const { toast } = useToast();
+  const { Button } = usePrimitives();
+  const [counter, setCounter] = useState(0);
+
+  return (
+    <DemoPage
+      title="Toast"
+      description="Auto-dismissende Notifications via @radix-ui/react-toast. Zwei Variants (default / bad), optional description. Swipe-to-dismiss + 5s Auto-close."
+    >
+      <DemoSection title="Default-Variant">
+        <Button
+          onClick={() =>
+            toast({
+              title: "Gespeichert",
+              description: "Änderungen wurden persistiert.",
+            })
+          }
+        >
+          Default-Toast triggern
+        </Button>
+      </DemoSection>
+
+      <DemoSection title="Destructive-Variant (Fehler)">
+        <Button
+          variant="danger"
+          onClick={() =>
+            toast({
+              title: "Fehler beim Speichern",
+              description: "Network-Timeout. Bitte erneut versuchen.",
+              variant: "bad",
+            })
+          }
+        >
+          Error-Toast triggern
+        </Button>
+      </DemoSection>
+
+      <DemoSection title="Stacking — mehrere Toasts gleichzeitig">
+        <Button
+          variant="secondary"
+          onClick={() => {
+            const next = counter + 1;
+            setCounter(next);
+            toast({
+              title: `Toast #${next}`,
+              description: "Mehrere Toasts stapeln vertikal — pro Toast eigene Auto-dismiss-Timer.",
+            });
+          }}
+        >
+          Toast #{counter + 1} hinzufügen
+        </Button>
+      </DemoSection>
+
+      <DemoSection title="Nur Title (ohne Description)">
+        <Button variant="secondary" onClick={() => toast({ title: "Kopiert" })}>
+          Mini-Toast triggern
+        </Button>
+      </DemoSection>
+    </DemoPage>
+  );
+}

package/samples/apps/showcase/src/features/items/feature.ts

@@ -0,0 +1,109 @@
+// Items-Feature — Server-Side. defineFeature() registriert die Entity,
+// die Standard-CRUD-Handler und die Schema-Items aus schema.ts. KEIN
+// Custom-Server-Code (keine Hooks/Projections); das Feature ist
+// bewusst minimal und zeigt den "kitchen-sink Entity"-Pfad ohne
+// Domain-Logik.
+//
+// Beidseitig benutzte Schema-Definitionen leben in schema.ts. Server
+// hängt hier die Handler dran und ruft r.screen/r.nav.
+
+import { defineFeature } from "@cosmicdrift/kumiko-framework/engine";
+import { itemsTranslations } from "./i18n";
+import {
+  itemActiveScreen,
+  itemEditScreen,
+  itemEntity,
+  itemFeedScreen,
+  itemListScreen,
+  itemQuickAddScreen,
+} from "./schema";
+
+const open = {
+  access: {
+    openToAll: {
+      reason:
+        "demo app: any signed-in user manages every showcase item; there is no per-user ownership in this sample",
+    },
+  },
+} as const;
+
+// The boot validator checks server-registered keys, while the client bundle is
+// locale-first — flip it rather than maintaining the same strings twice.
+function keyFirst(byLocale: typeof itemsTranslations): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = {};
+  for (const [locale, entries] of Object.entries(byLocale)) {
+    for (const [key, value] of Object.entries(entries)) {
+      out[key] ??= {};
+      out[key][locale] = value;
+    }
+  }
+  return out;
+}
+
+export const itemsFeature = defineFeature("showcase", (r) => {
+  r.translations({ keys: keyFirst(itemsTranslations) });
+  r.crud("item", itemEntity, {
+    write: open,
+    read: open,
+    descriptions: {
+      create:
+        "Creates one showcase item from title, notes, priority, done flag, due date, status and its parent/related item references; used by the item edit screen and by the quick-add action form, which supplies only title and priority and leaves the rest on their defaults.",
+      update:
+        "Applies changed item fields to one existing row, addressed by id plus the version the client last read; used when the item edit screen saves.",
+      delete:
+        "Removes one item row for good, addressed by id; used by the danger row action on the item list, and there is no restore because the entity is not soft-deleted.",
+      list: "Returns one page of items with search, sorting, an optional fixed status filter and the parent/related references already resolved to their titles; used by the paged item list, the infinite-scroll feed, the active-items screen and the reference comboboxes on the edit form.",
+      detail:
+        "Returns one item by id with its parent and related references resolved; used when the item edit screen loads an existing row.",
+    },
+  });
+
+  r.screen(itemEditScreen);
+  r.screen(itemListScreen);
+  r.screen(itemFeedScreen);
+  r.screen(itemActiveScreen);
+  r.screen(itemQuickAddScreen);
+
+  // Section "Data" — clickbar zum Auf/Zuklappen weil parent ohne screen.
+  r.nav({ id: "data", label: "showcase:nav.data", icon: "table", order: 100 });
+  r.nav({
+    id: "item-list",
+    icon: "table",
+    label: "showcase:nav.list",
+    parent: "showcase:nav:data",
+    screen: "showcase:screen:item-list",
+    order: 10,
+  });
+  r.nav({
+    id: "item-feed",
+    icon: "list",
+    label: "showcase:nav.feed",
+    parent: "showcase:nav:data",
+    screen: "showcase:screen:item-feed",
+    order: 15,
+  });
+  r.nav({
+    id: "item-active",
+    icon: "gauge",
+    label: "showcase:nav.active-items",
+    parent: "showcase:nav:data",
+    screen: "showcase:screen:item-active",
+    order: 17,
+  });
+  r.nav({
+    id: "item-new",
+    icon: "plus",
+    label: "showcase:nav.new",
+    parent: "showcase:nav:data",
+    screen: "showcase:screen:item-edit",
+    order: 20,
+  });
+  r.nav({
+    id: "item-quick-add",
+    icon: "sparkles",
+    label: "showcase:nav.quick-add",
+    parent: "showcase:nav:data",
+    screen: "showcase:screen:item-quick-add",
+    order: 25,
+  });
+});

package/samples/apps/showcase/src/features/items/i18n.ts

@@ -0,0 +1,79 @@
+// Items-Feature i18n-Bundle. Convention: feature-prefix per
+// `showcase:` + `entity:item:field:<name>` für Field-Labels. Plus
+// die zwei Nav-Labels die in feature.ts referenziert werden.
+
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+
+export const itemsTranslations: TranslationsByLocale = {
+  de: {
+    "showcase:nav.data": "Daten",
+    "showcase:nav.list": "Items (Pages)",
+    "showcase:nav.feed": "Items (Feed)",
+    "showcase:nav.active-items": "Items (Active)",
+    "showcase:nav.new": "Neuer Eintrag",
+    "showcase:nav.quick-add": "Quick Add",
+    "showcase:entity:item:field:title": "Titel",
+    "showcase:entity:item:field:priority": "Priorität",
+    "showcase:entity:item:field:isDone": "Erledigt?",
+    "showcase:entity:item:field:status": "Status",
+    "showcase:entity:item:field:notes": "Notizen",
+    "showcase:entity:item:field:dueDate": "Fällig am",
+    "showcase:entity:item:field:parentId": "Parent-Task",
+    "showcase:entity:item:field:relatedIds": "Verwandte Items",
+    "screen:item-list.title": "Items (Pages)",
+    "screen:item-feed.title": "Items (Feed)",
+    "screen:item-active.title": "Items (Active)",
+    // actionForm fields live under the renderer's pseudo-entity, not `item`.
+    "showcase:entity:__action-form__:field:title": "Titel",
+    "showcase:entity:__action-form__:field:priority": "Priorität",
+    // Facet options of the filterable boolean/select fields.
+    "showcase:entity:item:field:isDone:option:true": "Erledigt",
+    "showcase:entity:item:field:isDone:option:false": "Offen",
+    "showcase:entity:item:field:status:option:draft": "Entwurf",
+    "showcase:entity:item:field:status:option:active": "Aktiv",
+    "showcase:entity:item:field:status:option:blocked": "Blockiert",
+    "showcase:entity:item:field:status:option:done": "Fertig",
+    "screen:item-quick-add.title": "Schnell-Anlage",
+    "screen:item-edit.title": "Eintrag bearbeiten",
+    "showcase:actions.edit": "Bearbeiten",
+    "showcase:actions.delete": "Löschen",
+    "showcase:actions.delete-confirm":
+      "Eintrag wird unwiderruflich entfernt. Diese Aktion lässt sich nicht rückgängig machen.",
+    "showcase:actions.quick-add": "Schnell anlegen",
+    "showcase:actions.duplicate": "Duplizieren",
+  },
+  en: {
+    "showcase:nav.data": "Data",
+    "showcase:nav.list": "Items (Pages)",
+    "showcase:nav.feed": "Items (Feed)",
+    "showcase:nav.active-items": "Items (Active)",
+    "showcase:nav.new": "New item",
+    "showcase:nav.quick-add": "Quick Add",
+    "showcase:entity:item:field:title": "Title",
+    "showcase:entity:item:field:priority": "Priority",
+    "showcase:entity:item:field:isDone": "Done?",
+    "showcase:entity:item:field:status": "Status",
+    "showcase:entity:item:field:notes": "Notes",
+    "showcase:entity:item:field:dueDate": "Due date",
+    "showcase:entity:item:field:parentId": "Parent task",
+    "showcase:entity:item:field:relatedIds": "Related items",
+    "screen:item-list.title": "Items (Pages)",
+    "screen:item-feed.title": "Items (Feed)",
+    "screen:item-active.title": "Items (Active)",
+    "showcase:entity:__action-form__:field:title": "Title",
+    "showcase:entity:__action-form__:field:priority": "Priority",
+    "showcase:entity:item:field:isDone:option:true": "Done",
+    "showcase:entity:item:field:isDone:option:false": "Open",
+    "showcase:entity:item:field:status:option:draft": "Draft",
+    "showcase:entity:item:field:status:option:active": "Active",
+    "showcase:entity:item:field:status:option:blocked": "Blocked",
+    "showcase:entity:item:field:status:option:done": "Done",
+    "screen:item-quick-add.title": "Quick add",
+    "screen:item-edit.title": "Edit item",
+    "showcase:actions.edit": "Edit",
+    "showcase:actions.delete": "Delete",
+    "showcase:actions.delete-confirm": "Item will be removed permanently. This cannot be undone.",
+    "showcase:actions.quick-add": "Quick add",
+    "showcase:actions.duplicate": "Duplicate",
+  },
+};

package/samples/apps/showcase/src/features/items/index.ts

@@ -0,0 +1,6 @@
+// Public-Surface des Items-Features. Server importiert `itemsFeature`,
+// Web-Client importiert `itemsClient`. schema/ ist intern, wird nicht
+// re-exported — nur feature.ts und web/index.ts dürfen darauf zugreifen.
+
+export { itemsFeature } from "./feature";
+export { itemsClient } from "./web";

package/samples/apps/showcase/src/features/items/schema/index.ts

@@ -0,0 +1,13 @@
+// Re-exports — eine Datei pro Entity, Index sammelt sie. So kann
+// das Feature später weitere Entities (z.B. tag.ts, comment.ts)
+// hinzufügen ohne dass feature.ts oder web/index.ts ihre Imports
+// ändern müssen.
+
+export {
+  itemActiveScreen,
+  itemEditScreen,
+  itemEntity,
+  itemFeedScreen,
+  itemListScreen,
+  itemQuickAddScreen,
+} from "./item";

package/samples/apps/showcase/src/features/items/schema/item.ts

@@ -0,0 +1,215 @@
+// Items-Feature — Schema (beidseitig importierbar). Entity-Fields plus
+// Edit/List-Screen-Definitionen. KEIN Server-Code (keine Drizzle-,
+// kein Handler-Import) — feature.ts (Server) UND client.ts (Client)
+// importieren das hier.
+//
+// Kitchen-Sink: deckt alle Field-Types ab die DefaultInput rendert
+// (text, number, boolean, date, select), plus Layout-Features
+// (Section, columns, span, conditional visibility/required, custom
+// column renderer).
+
+import type {
+  ActionFormScreenDefinition,
+  EntityDefinition,
+  EntityEditScreenDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+
+export const itemEntity = {
+  description:
+    "A showcase task item carrying a title, free-text notes, a numeric priority, a done flag, a due date and a draft/active/blocked/done status, plus an optional parent item and a list of related items.",
+  fields: {
+    title: { type: "text", required: true, sortable: true, searchable: true },
+    notes: { type: "text", multiline: { rows: 4 } },
+    priority: { type: "number", default: 1, sortable: true, filterable: true },
+    isDone: { type: "boolean", default: false, sortable: true, filterable: true },
+    dueDate: { type: "date", sortable: true, filterable: true },
+    status: {
+      type: "select",
+      options: ["draft", "active", "blocked", "done"],
+      default: "draft",
+      sortable: true,
+      filterable: true,
+    },
+    // Tier 2.7e-3 Demo — Self-Reference: jedes Item kann optional ein
+    // anderes Item als "parent task" referenzieren. Renderer zeigt im
+    // Edit-Form ein Combobox-Dropdown mit Search (Tier 2.1c), List-
+    // Spalte resolvet die UUID via Bulk-Lookup zum title.
+    parentId: { type: "reference", entity: "item", labelField: "title" },
+    // Tier 2.7e-Multi Demo — Multi-Reference: ein Item kann mehrere
+    // verwandte Items haben. Storage als jsonb-Array<uuid>. UI rendert
+    // Multi-Combobox mit Tag-Anzeige.
+    relatedIds: {
+      type: "reference",
+      entity: "item",
+      labelField: "title",
+      multiple: true,
+    },
+  },
+} as unknown as EntityDefinition;
+
+export const itemEditScreen: EntityEditScreenDefinition = {
+  id: "item-edit",
+  type: "entityEdit",
+  entity: "item",
+  layout: {
+    width: "3xl",
+    sections: [
+      {
+        title: "Basics",
+        columns: 2,
+        fields: [{ field: "title", span: 2 }, "priority", "isDone", { field: "status", span: 2 }],
+      },
+      {
+        title: "References (Tier 2.7e Remote-Combobox-Demo)",
+        columns: 1,
+        fields: [
+          // Single + Remote — Bug-Test-Surface 1: Click auf Dropdown-Item
+          // muss onChange feuern (selektiert das Item, schließt das Popup).
+          "parentId",
+          // Multi + Remote — Bug-Test-Surface 2: Tippen filtert die Liste
+          // serverseitig. Mit ~200 seed-Items echte Search-Last.
+          "relatedIds",
+        ],
+      },
+      {
+        title: "Details",
+        columns: 1,
+        fields: [
+          {
+            field: "notes",
+            visible: { field: "isDone", eq: true },
+            required: { field: "isDone", eq: true },
+          },
+          "dueDate",
+        ],
+      },
+    ],
+  },
+};
+
+export const itemListScreen: EntityListScreenDefinition = {
+  id: "item-list",
+  type: "entityList",
+  entity: "item",
+  columns: [
+    "title",
+    "status",
+    "isDone",
+    {
+      field: "priority",
+      renderer: { format: "priority", prefix: "P" },
+    },
+    "dueDate",
+    // Tier 2.7e-4 Demo — Reference-Spalte. Renderer macht Bulk-Lookup
+    // auf item:list (limit:200), zeigt parentId als parent.title.
+    "parentId",
+  ],
+  // Server-side Pagination Demo — Showcase seedet ~200 items, der
+  // Pager hat 4 Seiten zum Durchklicken bei pageSize: 50.
+  pagination: "pages",
+  pageSize: 50,
+  defaultSort: { field: "title", dir: "asc" },
+  searchable: true,
+  // RowActions-Demo. Default-Payload ist `{ id: row.id }` — reicht für
+  // delete. Confirm-Dialog wegen style="danger" automatisch.
+  // Tier 2.7e-1 zeigt "navigate"-kind: ein zweiter Action-Button der
+  // statt Server-Call zu einem actionForm springt + die row.id als
+  // URL-Param übergibt (das actionForm liest sie via searchParams als
+  // initial value für ein title-Feld).
+  rowActions: [
+    { kind: "navigate", id: "edit", label: "showcase:actions.edit", screen: "item-edit" },
+    {
+      kind: "navigate",
+      id: "duplicate",
+      label: "showcase:actions.duplicate",
+      screen: "item-quick-add",
+      // DSL-Limit: kein "Copy of"-Prefix darstellbar → server-side im Handler lösen.
+      params: { pick: ["title", "priority"] },
+    },
+    {
+      id: "delete",
+      label: "showcase:actions.delete",
+      handler: "showcase:write:item:delete",
+      confirm: "showcase:actions.delete-confirm",
+      style: "danger",
+    },
+  ],
+};
+
+// Zweiter Screen auf derselben Entity, aber im Infinite-Scroll-Modus.
+// Demonstriert dass beide Pagination-Stile (Pager + Infinite) auf
+// denselben Daten funktionieren — Author-Choice pro Screen.
+export const itemFeedScreen: EntityListScreenDefinition = {
+  id: "item-feed",
+  type: "entityList",
+  entity: "item",
+  columns: [
+    "title",
+    "status",
+    {
+      field: "priority",
+      renderer: { format: "priority", prefix: "P" },
+    },
+    "dueDate",
+  ],
+  pagination: "infinite",
+  pageSize: 30, // kleinere Pages damit Scroll-Effekt häufiger triggert
+  defaultSort: { field: "title", dir: "asc" },
+  searchable: true,
+  rowActions: [
+    { kind: "navigate", id: "edit", label: "showcase:actions.edit", screen: "item-edit" },
+  ],
+};
+
+// Tier 2.7c Demo — Screen-Level Filter. Selbe Entity, gleicher Query-
+// Handler wie itemListScreen, aber mit fixem WHERE: nur Items mit
+// status="active". Klassisches Bucketing-Pattern (z.B. "Active Tasks"
+// vs "All Tasks") ohne Custom-Page schreiben zu müssen.
+export const itemActiveScreen: EntityListScreenDefinition = {
+  id: "item-active",
+  type: "entityList",
+  entity: "item",
+  columns: ["title", "status", "isDone", "dueDate"],
+  pagination: "pages",
+  pageSize: 50,
+  defaultSort: { field: "title", dir: "asc" },
+  searchable: true,
+  filter: { field: "status", op: "eq", value: "active" },
+  rowActions: [
+    { kind: "navigate", id: "edit", label: "showcase:actions.edit", screen: "item-edit" },
+  ],
+};
+
+// Tier 2.7d Demo — actionForm Screen-Typ. Non-CRUD Write-Handler-
+// driven Form, hier mit dem existing item:create-Handler aber
+// reduzierter Field-Auswahl (nur title + priority). Demonstriert dass
+// eine actionForm:
+//   - keine Entity-Reference braucht (fields sind inline)
+//   - einen beliebigen Write-Handler-QN triggert (hier item:create,
+//     üblich wäre auch sowas wie item:archive-batch oder
+//     invoice:approve mit dedizierten Handlern)
+//   - nach Submit redirecten kann (hier zur Liste)
+//
+// Default-Werte greifen für nicht-Form-Felder: status=draft, isDone=
+// false, priority kommt aus dem Form, notes/dueDate optional.
+export const itemQuickAddScreen: ActionFormScreenDefinition = {
+  id: "item-quick-add",
+  type: "actionForm",
+  handler: "showcase:write:item:create",
+  fields: {
+    title: { type: "text", required: true },
+    priority: { type: "number", default: 1 },
+  },
+  layout: {
+    sections: [
+      {
+        title: "Quick Add",
+        columns: 2,
+        fields: [{ field: "title", span: 2 }, "priority"],
+      },
+    ],
+  },
+  submitLabel: "showcase:actions.quick-add",
+  redirect: "item-list",
+};

package/samples/apps/showcase/src/features/items/web/index.ts

@@ -0,0 +1,15 @@
+// Items-Feature — Web-Plattform-Plugin. ClientFeatureDefinition mit
+// Translations. Items hat heute keine Custom-Screen-Components
+// (rendert über Standard-RenderEdit/RenderList), entsprechend keine
+// `components`-Map.
+//
+// Native-Plattform würde parallel dazu in features/items/native/
+// liegen — translations werden geteilt, components/UI nicht.
+
+import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
+import { itemsTranslations } from "../i18n";
+
+export const itemsClient: ClientFeatureDefinition = {
+  name: "showcase",
+  translations: itemsTranslations,
+};

package/samples/apps/styleguide/README.md

@@ -0,0 +1,47 @@
+# Styleguide
+
+Visueller Katalog der Kumiko-UI-Fläche: Foundations (Farben, Radius,
+Elevation, Spacing), atomare Primitives (Buttons, Cards, Inputs) und das
+**Mid-Level-Widget-Kit** (StatCard, SectionCard, StatusBadge, Charts,
+ModeSwitch, …). Zugleich die e2e-Renderfläche der Widgets — wer ein
+Widget ändert, sieht hier sofort, ob es überall noch stimmt.
+
+## The UI catalog to open before you design a screen
+
+The styleguide is Kumiko's visual design reference. It shows the pieces an app
+can reuse, the states they support, and how the same visual language works in a
+custom screen and in a declarative dashboard.
+
+The catalog covers foundations, primitives, widgets, forms, and complete
+composition examples. Use it as a design guild: choose an existing primitive
+or widget before inventing a new one, then compare the custom and declarative
+implementations. App UI guards enforce the same discipline in app repositories.
+
+The declarative board recreations (list, detail, drawer, form, wizard, mobile) live in `samples/apps/ui-walkthrough`, see its section "Design-Abnahme #3381".
+
+Zwei Widget-Seiten zeigen dieselben Bausteine auf beiden Wegen:
+
+- **`/widgets`** — der Katalog als Custom-Screen: jedes Widget direkt
+  komponiert (StatCard-Raster, Uptime-/Timeseries-Charts, Status-Tones,
+  ModeSwitch + DetailList, CollapsibleSection + EmptyState).
+- **`/widgets-dashboard`** — derselbe Inhalt **deklarativ** als
+  `r.screen({ type: "dashboard" })` mit stat/chart/list-Panels aus
+  Demo-Queries: kein JSX, Labels als i18n-Keys, Boot-Validator prüft
+  die Key-Abdeckung.
+
+## Run
+
+```bash
+bun kumiko dev                    # Postgres + Redis
+cd samples/apps/styleguide && bun dev
+# → http://localhost:4180
+```
+
+## Tests
+
+```bash
+cd samples/apps/styleguide && bunx --bun playwright test
+```
+
+`e2e/widgets.spec.ts` prüft beide Widget-Seiten (Rendern aller Sektionen,
+ModeSwitch-Interaktion, Dashboard-Panels aus den Demo-Queries).

package/samples/apps/styleguide/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@cosmicdrift/kumiko-sample-styleguide",
+  "dependencies": {
+    "@cosmicdrift/kumiko-bundled-features": "workspace:*",
+    "@cosmicdrift/kumiko-dev-server": "workspace:*",
+    "@cosmicdrift/kumiko-dispatcher-live": "workspace:*",
+    "@cosmicdrift/kumiko-framework": "workspace:*",
+    "@cosmicdrift/kumiko-headless": "workspace:*",
+    "@cosmicdrift/kumiko-renderer-web": "workspace:*",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "@cosmicdrift/kumiko-locale-de": "workspace:*"
+  },
+  "description": "Styleguide-Gallery: rendert die Auto-UI-Bausteine, Screenshot-Runner schießt sie in 3 Themes für die Doku",
+  "private": true,
+  "scripts": {
+    "dev": "PORT=4180 bun --env-file=../../../.env run kumiko-dev src/app/server.ts",
+    "build": "bun kumiko-build",
+    "screenshots": "bun x playwright test --config=playwright.config.ts"
+  },
+  "type": "module"
+}

package/samples/apps/styleguide/playwright.config.ts

@@ -0,0 +1,11 @@
+// @runtime test
+import { defineAppE2eConfig, PLAYWRIGHT_DEMO_ENV } from "@cosmicdrift/kumiko-testing/e2e";
+import { E2E_PORTS } from "../../e2e/e2e-ports";
+
+const PORT = E2E_PORTS["framework/styleguide"];
+
+export default defineAppE2eConfig({
+  port: PORT,
+  serverEntry: "src/app/server.ts",
+  env: PLAYWRIGHT_DEMO_ENV,
+});

package/samples/apps/styleguide/src/app/client.tsx

@@ -0,0 +1,28 @@
+import { configClient } from "@cosmicdrift/kumiko-bundled-features/config/web";
+import { localeDeClient } from "@cosmicdrift/kumiko-locale-de/web";
+import { createKumikoApp } from "@cosmicdrift/kumiko-renderer-web";
+import { aiSettingsClient } from "../features/ai-settings/web";
+import { contentClient } from "../features/content/web";
+import { styleguideClient } from "../features/demo/web";
+import { examplesClient } from "../features/examples/web";
+import { galleryClient } from "../features/gallery/web";
+import { widgetsClient } from "../features/widgets/web";
+import { AppShell } from "./shell";
+
+// createKumikoApp fetches the schema itself from the authenticated
+// GET /api/schema. styleguideClient supplies the field-label translations,
+// galleryClient the custom gallery screen, widgetsClient the widget-kit
+// catalog, examplesClient the config-stresstest screens (shipping etc.).
+createKumikoApp({
+  shell: AppShell,
+  clientFeatures: [
+    localeDeClient(),
+    configClient(),
+    aiSettingsClient,
+    styleguideClient,
+    galleryClient,
+    widgetsClient,
+    examplesClient,
+    contentClient(),
+  ],
+});