@cosmicdrift/kumiko-samples 0.338.0

package/samples/apps/showcase/src/app/shell.tsx

@@ -0,0 +1,110 @@
+// AppShell — wrappt DefaultAppShell mit Brand + Sidebar-Actions. Custom-
+// Screen-Routing macht das Framework jetzt automatisch (clientFeatures.
+// components → CustomScreensProvider → KumikoScreen-Lookup), entsprechend
+// keine eigene DEMO_PAGES-Map mehr im Shell.
+
+import {
+  type AppSchema,
+  DefaultAppShell,
+  ProfileMenu,
+  type ProfileMenuItem,
+  ThemeToggle,
+} from "@cosmicdrift/kumiko-renderer-web";
+import { MoonStar, Sun } from "lucide-react";
+import type { ReactNode } from "react";
+
+// Logo-Kachel + Wortmarke — wie SidebarBrand (sidebar-brand.tsx). Die
+// Kachel bleibt collapsed stehen (liest sich als Logo, nicht als
+// zufaelliger Buchstabe), nur die Wortmarke daneben blendet aus.
+const Brand = (): ReactNode => (
+  <div className="flex items-center gap-2 group-data-[collapsible=icon]:justify-center">
+    <div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+      <span className="text-sm font-semibold">K</span>
+    </div>
+    <strong className="truncate text-foreground tracking-tight group-data-[collapsible=icon]:hidden">
+      Kumiko Showcase
+    </strong>
+  </div>
+);
+
+// Linear-Style Profile-Menu Demo. items sind App-spezifisch — Caller
+// definiert was clickbar ist + ggf. Keyboard-Shortcuts. Hier ein
+// realistischer set mit View-Profile, Settings, Sign-out.
+const PROFILE_USER = { id: "showcase-admin-1", label: "Showcase Admin" } as const;
+const PROFILE_ITEMS: ReadonlyArray<ProfileMenuItem> = [
+  {
+    kind: "item",
+    id: "view-profile",
+    label: "View profile",
+    shortcut: "O then M",
+    onSelect: () => {
+      // biome-ignore lint/suspicious/noConsole: showcase demo
+      console.log("[showcase] view profile");
+    },
+  },
+  {
+    kind: "item",
+    id: "settings",
+    label: "Settings",
+    shortcut: "G then S",
+    onSelect: () => {
+      // biome-ignore lint/suspicious/noConsole: showcase demo
+      console.log("[showcase] settings");
+    },
+  },
+  { kind: "separator" },
+  {
+    kind: "item",
+    id: "help",
+    label: "Help",
+    onSelect: () => {
+      // biome-ignore lint/suspicious/noConsole: showcase demo
+      console.log("[showcase] help");
+    },
+  },
+  {
+    kind: "item",
+    id: "changelog",
+    label: "Changelog",
+    onSelect: () => {
+      // biome-ignore lint/suspicious/noConsole: showcase demo
+      console.log("[showcase] changelog");
+    },
+  },
+  { kind: "separator" },
+  {
+    kind: "item",
+    id: "sign-out",
+    label: "Sign out",
+    shortcut: "Alt + Q",
+    variant: "danger",
+    onSelect: () => {
+      // biome-ignore lint/suspicious/noConsole: showcase demo
+      console.log("[showcase] sign out");
+    },
+  },
+];
+
+const SidebarActions = (): ReactNode => (
+  <>
+    <ThemeToggle
+      lightIcon={<Sun className="h-4 w-4" />}
+      darkIcon={<MoonStar className="h-4 w-4" />}
+    />
+    <ProfileMenu user={PROFILE_USER} items={PROFILE_ITEMS} />
+  </>
+);
+
+export function AppShell({
+  children,
+  schema,
+}: {
+  readonly children: ReactNode;
+  readonly schema: AppSchema;
+}): ReactNode {
+  return (
+    <DefaultAppShell brand={<Brand />} schema={schema} sidebarActions={<SidebarActions />}>
+      {children}
+    </DefaultAppShell>
+  );
+}

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

@@ -0,0 +1,168 @@
+// Demos-Feature — Server-Side. Registriert custom-Screens für die UI-
+// Demo-Pages (Buttons, Inputs, Banner, Text, Layout) und ihre Nav-
+// Einträge. Kein Entity, keine Handler — pure Custom-Screen-Showcase.
+//
+// FeatureName "showcase-demos" (nicht "showcase"): zwei defineFeature-
+// Aufrufe mit gleichem Namen würden in createRegistry mit
+// `Duplicate feature` werfen. Der Trennstrich zur items-Feature ist
+// also nicht Konvention-Geschmack, sondern technische Notwendigkeit.
+//
+// Die React-Components für die custom-Screens leben in pages/ und
+// werden client-side via clientFeatures.components zugeordnet (siehe
+// client.ts).
+
+import { defineFeature } from "@cosmicdrift/kumiko-framework/engine";
+
+// r.translations() wants key-first shape — same screen titles already in
+// ./i18n's client (locale-first) bundle.
+const REQUIRED_I18N = {
+  "showcase-demos:nav.primitives": { de: "Primitives", en: "Primitives" },
+  "showcase-demos:nav.layout": { de: "Layout", en: "Layout" },
+  "showcase-demos:nav.buttons": { de: "Buttons", en: "Buttons" },
+  "showcase-demos:nav.inputs": { de: "Inputs", en: "Inputs" },
+  "showcase-demos:nav.banner": { de: "Banner", en: "Banner" },
+  "showcase-demos:nav.dialog": { de: "Dialog & Lightbox", en: "Dialog & Lightbox" },
+  "showcase-demos:nav.toast": { de: "Toast", en: "Toast" },
+  "showcase-demos:nav.text": { de: "Text", en: "Text" },
+  "showcase-demos:nav.sidebarPanel": { de: "Sidebar-Panel", en: "Sidebar panel" },
+  "screen:demo-layout.title": { de: "Layout", en: "Layout" },
+  "screen:demo-buttons.title": { de: "Buttons", en: "Buttons" },
+  "screen:demo-inputs.title": { de: "Inputs", en: "Inputs" },
+  "screen:demo-banner.title": { de: "Banner", en: "Banner" },
+  "screen:demo-dialog.title": { de: "Dialog & Lightbox", en: "Dialog & Lightbox" },
+  "screen:demo-toast.title": { de: "Toast", en: "Toast" },
+  "screen:demo-text.title": { de: "Text", en: "Text" },
+  "screen:demo-sidebar-panel.title": { de: "Sidebar-Panel", en: "Sidebar panel" },
+} as const;
+
+export const demosFeature = defineFeature("showcase-demos", (r) => {
+  r.translations({ keys: REQUIRED_I18N });
+
+  r.screen({
+    id: "demo-layout",
+    type: "custom",
+    renderer: { react: { __component: "demo-layout" } },
+    description:
+      "Shows where each named slot of the app shell, form, data table, section, banner and heading primitives lands, as a sketch next to the JSX call that fills it.",
+  });
+  r.screen({
+    id: "demo-buttons",
+    type: "custom",
+    renderer: { react: { __component: "demo-buttons" } },
+    description:
+      "Shows the Button primitive in its primary, secondary and danger variants, each in the normal, disabled and loading (spinner) state.",
+  });
+  r.screen({
+    id: "demo-inputs",
+    type: "custom",
+    renderer: { react: { __component: "demo-inputs" } },
+    description:
+      "Shows every Input kind of the primitives contract (text, number, money in three currency locales, boolean, date, timestamp, select, textarea and locally or remotely filtered single and multi comboboxes) plus a Field rendering a validation error.",
+  });
+  r.screen({
+    id: "demo-banner",
+    type: "custom",
+    renderer: { react: { __component: "demo-banner" } },
+    description:
+      "Shows the Banner primitive in its info and error variants, including an error banner that carries a Button in its right-hand action slot.",
+  });
+  r.screen({
+    id: "demo-dialog",
+    type: "custom",
+    renderer: { react: { __component: "demo-dialog" } },
+    description:
+      "Shows the Dialog primitive as a default confirm, a danger confirm and an async confirm with spinner, plus the Lightbox full-screen image preview that shares the same overlay shell.",
+  });
+  r.screen({
+    id: "demo-toast",
+    type: "custom",
+    renderer: { react: { __component: "demo-toast" } },
+    description:
+      "Shows the useToast hook pushing auto-dismissing notifications: a default toast, an error toast, several stacked at once and one with a title only.",
+  });
+  r.screen({
+    id: "demo-text",
+    type: "custom",
+    renderer: { react: { __component: "demo-text" } },
+    description:
+      "Shows the Text primitive in its body, small, code and required-mark variants, including code and required-mark nested inside body text.",
+  });
+  r.screen({
+    id: "demo-sidebar-panel",
+    type: "custom",
+    renderer: { react: { __component: "demo-sidebar-panel" } },
+    description:
+      "Shows the SidebarPanel shell slot as a mail-client inbox: a resizable message list beside the navigation over the full window height, with the selected message read in the content area.",
+  });
+
+  // Section "Primitives" — clickbar-collapsible weil parent ohne screen.
+  //
+  // Jeder Eintrag traegt ein Icon: auf Icon-Breite ist es das Einzige, was
+  // von ihm uebrig bleibt. Ohne Icon steht dort nur ein Punkt, und eine Rail
+  // aus gleichen Punkten sagt nicht, wo man hinklickt.
+  r.nav({ id: "primitives", label: "showcase-demos:nav.primitives", icon: "layers", order: 10 });
+  r.nav({
+    id: "demo-layout",
+    label: "showcase-demos:nav.layout",
+    icon: "layout-grid",
+    parent: "showcase-demos:nav:primitives",
+    screen: "showcase-demos:screen:demo-layout",
+    order: 5,
+  });
+  r.nav({
+    id: "demo-buttons",
+    label: "showcase-demos:nav.buttons",
+    icon: "wand",
+    parent: "showcase-demos:nav:primitives",
+    screen: "showcase-demos:screen:demo-buttons",
+    order: 10,
+  });
+  r.nav({
+    id: "demo-inputs",
+    label: "showcase-demos:nav.inputs",
+    icon: "list",
+    parent: "showcase-demos:nav:primitives",
+    screen: "showcase-demos:screen:demo-inputs",
+    order: 20,
+  });
+  r.nav({
+    id: "demo-banner",
+    label: "showcase-demos:nav.banner",
+    icon: "bell",
+    parent: "showcase-demos:nav:primitives",
+    screen: "showcase-demos:screen:demo-banner",
+    order: 30,
+  });
+  r.nav({
+    id: "demo-dialog",
+    label: "showcase-demos:nav.dialog",
+    icon: "layers",
+    parent: "showcase-demos:nav:primitives",
+    screen: "showcase-demos:screen:demo-dialog",
+    order: 35,
+  });
+  r.nav({
+    id: "demo-toast",
+    label: "showcase-demos:nav.toast",
+    icon: "sparkles",
+    parent: "showcase-demos:nav:primitives",
+    screen: "showcase-demos:screen:demo-toast",
+    order: 38,
+  });
+  r.nav({
+    id: "demo-text",
+    label: "showcase-demos:nav.text",
+    icon: "file",
+    parent: "showcase-demos:nav:primitives",
+    screen: "showcase-demos:screen:demo-text",
+    order: 40,
+  });
+  r.nav({
+    id: "demo-sidebar-panel",
+    label: "showcase-demos:nav.sidebarPanel",
+    icon: "mail",
+    parent: "showcase-demos:nav:primitives",
+    screen: "showcase-demos:screen:demo-sidebar-panel",
+    order: 42,
+  });
+});

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

@@ -0,0 +1,45 @@
+// Demos-Feature i18n-Bundle. Nur die Screen-Titles für die
+// Top-Action-Bars der Demo-Pages.
+
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+
+export const demosTranslations: TranslationsByLocale = {
+  de: {
+    "showcase-demos:nav.primitives": "Primitives",
+    "showcase-demos:nav.layout": "Layout",
+    "showcase-demos:nav.buttons": "Buttons",
+    "showcase-demos:nav.inputs": "Inputs",
+    "showcase-demos:nav.banner": "Banner",
+    "showcase-demos:nav.dialog": "Dialog & Lightbox",
+    "showcase-demos:nav.toast": "Toast",
+    "showcase-demos:nav.text": "Text",
+    "showcase-demos:nav.sidebarPanel": "Sidebar-Panel",
+    "screen:demo-layout.title": "Layout",
+    "screen:demo-buttons.title": "Buttons",
+    "screen:demo-inputs.title": "Inputs",
+    "screen:demo-banner.title": "Banner",
+    "screen:demo-dialog.title": "Dialog & Lightbox",
+    "screen:demo-toast.title": "Toast",
+    "screen:demo-text.title": "Text",
+    "screen:demo-sidebar-panel.title": "Sidebar-Panel",
+  },
+  en: {
+    "showcase-demos:nav.primitives": "Primitives",
+    "showcase-demos:nav.layout": "Layout",
+    "showcase-demos:nav.buttons": "Buttons",
+    "showcase-demos:nav.inputs": "Inputs",
+    "showcase-demos:nav.banner": "Banner",
+    "showcase-demos:nav.dialog": "Dialog & Lightbox",
+    "showcase-demos:nav.toast": "Toast",
+    "showcase-demos:nav.text": "Text",
+    "showcase-demos:nav.sidebarPanel": "Sidebar-Panel",
+    "screen:demo-layout.title": "Layout",
+    "screen:demo-buttons.title": "Buttons",
+    "screen:demo-inputs.title": "Inputs",
+    "screen:demo-banner.title": "Banner",
+    "screen:demo-dialog.title": "Dialog & Lightbox",
+    "screen:demo-toast.title": "Toast",
+    "screen:demo-text.title": "Text",
+    "screen:demo-sidebar-panel.title": "Sidebar-Panel",
+  },
+};

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

@@ -0,0 +1,5 @@
+// Public-Surface des Demos-Features. Server importiert `demosFeature`,
+// Web-Client importiert `demosClient` (lebt in web/index.ts).
+
+export { demosFeature } from "./feature";
+export { demosClient } from "./web";

package/samples/apps/showcase/src/features/demos/web/components/page.tsx

@@ -0,0 +1,50 @@
+// Shared Page-Layout für die Demo-Custom-Screens. Kein Framework-
+// Konzept — reines Sample-Layout, das die Top-Action-Bar Convention
+// (h-12, bg-muted/30, border-b) konsistent mit Form/Liste hält.
+
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+
+export function DemoPage({
+  title,
+  description,
+  children,
+}: {
+  readonly title: string;
+  readonly description?: string;
+  readonly children: ReactNode;
+}): ReactNode {
+  return (
+    <div className="flex flex-col w-full">
+      <div
+        data-testid="demo-page-header"
+        className="h-12 px-6 bg-muted/30 border-b flex items-center gap-3"
+      >
+        <div className="text-base font-semibold tracking-tight truncate">{title}</div>
+      </div>
+      <div className="px-6 pt-6 pb-12 max-w-4xl flex flex-col gap-6">
+        {description !== undefined && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Section innerhalb einer Demo-Page: Card-Primitive (Standard-Chrome). Samples
+// sind Copy-Vorlage für Agenten → dieselbe Card wie überall, kein Sonder-Layout.
+export function DemoSection({
+  title,
+  children,
+}: {
+  readonly title: string;
+  readonly children: ReactNode;
+}): ReactNode {
+  const { Card } = usePrimitives();
+  return (
+    <Card slots={{ title }}>
+      <div className="flex flex-col gap-3">{children}</div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,30 @@
+// Demos-Feature — Web-Plattform-Plugin. ClientFeatureDefinition mit
+// den React-DOM-Components für die custom-Screens. createKumikoApp
+// merged das in den CustomScreens-Context, KumikoScreen schaut darin
+// nach wenn ein Schema-Screen `type: "custom"` hat.
+
+import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
+import { demosTranslations } from "../i18n";
+import { BannerDemo } from "./pages/banner";
+import { ButtonsDemo } from "./pages/buttons";
+import { DialogDemo } from "./pages/dialog";
+import { InputsDemo } from "./pages/inputs";
+import { LayoutDemo } from "./pages/layout";
+import { SidebarPanelDemo } from "./pages/sidebar-panel";
+import { TextDemo } from "./pages/text";
+import { ToastDemo } from "./pages/toast";
+
+export const demosClient: ClientFeatureDefinition = {
+  name: "showcase-demos",
+  translations: demosTranslations,
+  components: {
+    "demo-layout": LayoutDemo,
+    "demo-buttons": ButtonsDemo,
+    "demo-inputs": InputsDemo,
+    "demo-banner": BannerDemo,
+    "demo-dialog": DialogDemo,
+    "demo-toast": ToastDemo,
+    "demo-sidebar-panel": SidebarPanelDemo,
+    "demo-text": TextDemo,
+  },
+};

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

@@ -0,0 +1,36 @@
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { DemoPage, DemoSection } from "../components/page";
+
+export function BannerDemo(): ReactNode {
+  const { Banner, Button, Text } = usePrimitives();
+  return (
+    <DemoPage
+      title="Banner"
+      description="Variants info / error, mit optionalem Action-Slot rechts."
+    >
+      <DemoSection title="Info">
+        <Banner variant="info">
+          <Text>Das ist eine Info-Nachricht.</Text>
+        </Banner>
+      </DemoSection>
+      <DemoSection title="Error">
+        <Banner variant="error">
+          <Text>Etwas ist schiefgegangen.</Text>
+        </Banner>
+      </DemoSection>
+      <DemoSection title="Error mit Action">
+        <Banner
+          variant="error"
+          actions={
+            <Button variant="secondary" onClick={() => undefined}>
+              Neu laden
+            </Button>
+          }
+        >
+          <Text>Optimistic Lock — Datensatz wurde geändert.</Text>
+        </Banner>
+      </DemoSection>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+import { DemoPage, DemoSection } from "../components/page";
+
+export function ButtonsDemo(): ReactNode {
+  const { Button } = usePrimitives();
+  const [loading, setLoading] = useState(false);
+
+  async function simulateAsync(): Promise<void> {
+    setLoading(true);
+    await new Promise((r) => setTimeout(r, 1500));
+    setLoading(false);
+  }
+
+  return (
+    <DemoPage
+      title="Buttons"
+      description="Drei Variants — primary, secondary, danger — plus disabled- und loading-State."
+    >
+      <DemoSection title="Variants">
+        <div className="flex flex-wrap items-center gap-2">
+          <Button variant="primary">Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="danger">Danger</Button>
+        </div>
+      </DemoSection>
+      <DemoSection title="Disabled">
+        <div className="flex flex-wrap items-center gap-2">
+          <Button variant="primary" disabled>
+            Primary
+          </Button>
+          <Button variant="secondary" disabled>
+            Secondary
+          </Button>
+          <Button variant="danger" disabled>
+            Danger
+          </Button>
+        </div>
+      </DemoSection>
+      <DemoSection title="Loading (Spinner)">
+        <div className="flex flex-wrap items-center gap-2">
+          <Button variant="primary" onClick={() => void simulateAsync()} loading={loading}>
+            {loading ? "Speichere…" : "Async-Action (1.5s)"}
+          </Button>
+          <Button variant="secondary" loading>
+            Secondary loading
+          </Button>
+          <Button variant="danger" loading>
+            Danger loading
+          </Button>
+        </div>
+      </DemoSection>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,89 @@
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+import { DemoPage, DemoSection } from "../components/page";
+
+export function DialogDemo(): ReactNode {
+  const { Button, Dialog, Lightbox, Text } = usePrimitives();
+  const [defaultOpen, setDefaultOpen] = useState(false);
+  const [dangerOpen, setDangerOpen] = useState(false);
+  const [asyncOpen, setAsyncOpen] = useState(false);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [confirmedAction, setConfirmedAction] = useState<string>("(noch nichts bestätigt)");
+
+  return (
+    <DemoPage
+      title="Dialog & Lightbox"
+      description="Dialog für Bestätigungen; Lightbox für Vollbild-Bildvorschau. Beide teilen dieselbe Radix-Overlay-Shell (Focus-Trap, Esc, Backdrop-Click)."
+    >
+      <DemoSection title="Default-Variant">
+        <div className="flex flex-wrap items-center gap-2">
+          <Button onClick={() => setDefaultOpen(true)}>Dialog öffnen</Button>
+          <Text variant="small">Letzte Aktion: {confirmedAction}</Text>
+        </div>
+        <Dialog
+          open={defaultOpen}
+          onOpenChange={setDefaultOpen}
+          title="Bist du dir sicher?"
+          description="Diese Aktion sendet eine E-Mail an alle Kunden. Bitte vorher prüfen."
+          onConfirm={() => setConfirmedAction("Default-Confirm")}
+          testId="dialog-default"
+        />
+      </DemoSection>
+
+      <DemoSection title="Danger-Variant">
+        <Button variant="danger" onClick={() => setDangerOpen(true)}>
+          Eintrag löschen…
+        </Button>
+        <Dialog
+          open={dangerOpen}
+          onOpenChange={setDangerOpen}
+          title="Wirklich löschen?"
+          description="Der Datensatz wird unwiderruflich entfernt. Diese Aktion kann nicht rückgängig gemacht werden."
+          confirmLabel="Löschen"
+          variant="danger"
+          onConfirm={() => setConfirmedAction("Danger-Confirm (delete)")}
+          testId="dialog-danger"
+        />
+      </DemoSection>
+
+      <DemoSection title="Async onConfirm (Spinner)">
+        <Button onClick={() => setAsyncOpen(true)}>Async-Dialog öffnen</Button>
+        <Dialog
+          open={asyncOpen}
+          onOpenChange={setAsyncOpen}
+          title="Speichern dauert kurz"
+          description="onConfirm ist async (1.5s). Confirm-Button zeigt während der Promise-Resolution einen Spinner; Dialog schließt automatisch danach."
+          onConfirm={async () => {
+            await new Promise((r) => setTimeout(r, 1500));
+            setConfirmedAction("Async-Confirm (1.5s)");
+          }}
+          testId="dialog-async"
+        />
+      </DemoSection>
+
+      <DemoSection title="Lightbox">
+        {/* kumiko-lint-ignore primitives-discipline clickable image thumbnail (Lightbox-Trigger) — kein Text-Button, <Button> kann kein Full-Bleed-<img> wrappen */}
+        <button
+          type="button"
+          onClick={() => setLightboxOpen(true)}
+          className="cursor-zoom-in overflow-hidden rounded-lg border border-border shadow-sm"
+          data-testid="lightbox-trigger"
+        >
+          <img
+            src="/screenshots/hero-app.png"
+            alt="Tasklane planning board — click to enlarge"
+            className="block h-auto w-full max-w-md"
+          />
+        </button>
+        <Text variant="small">Klick auf das Bild öffnet die Vollbild-Vorschau.</Text>
+        <Lightbox
+          open={lightboxOpen}
+          onOpenChange={setLightboxOpen}
+          src="/screenshots/hero-app.png"
+          alt="Tasklane planning board — click to enlarge"
+          testId="lightbox-demo"
+        />
+      </DemoSection>
+    </DemoPage>
+  );
+}