@cosmicdrift/kumiko-samples 0.338.0

package/samples/apps/styleguide/src/features/gallery/web/index.ts

@@ -0,0 +1,16 @@
+import type {
+  ClientFeatureDefinition,
+  TranslationsByLocale,
+} from "@cosmicdrift/kumiko-renderer-web";
+import { Gallery } from "./Gallery";
+
+const labels: Record<string, string> = {
+  "gallery.field-error": "Enter a valid value.",
+};
+const translations: TranslationsByLocale = { en: labels, de: labels };
+
+export const galleryClient: ClientFeatureDefinition = {
+  name: "gallery",
+  translations,
+  components: { gallery: Gallery },
+};

package/samples/apps/styleguide/src/features/shared-i18n.ts

@@ -0,0 +1,16 @@
+export type LocalizedString = { readonly de: string; readonly en: string };
+
+// Derives the client { en, de } shape from the same map a feature registers
+// server-side (r.translations) — one source instead of two kept in sync by hand.
+export function toClientTranslations(map: Readonly<Record<string, LocalizedString>>): {
+  en: Record<string, string>;
+  de: Record<string, string>;
+} {
+  const en: Record<string, string> = {};
+  const de: Record<string, string> = {};
+  for (const [key, value] of Object.entries(map)) {
+    en[key] = value.en;
+    de[key] = value.de;
+  }
+  return { en, de };
+}

package/samples/apps/styleguide/src/features/widgets/ai-text-demo.ts

@@ -0,0 +1,70 @@
+// Hand-rolled stand-in for the real enterprise `ai-text` feature.
+// kumiko-framework is public NPM and must never import the private enterprise
+// package, so this demo duplicates the
+// `ai-text:query:run` wire contract by hand — canned string transforms
+// instead of a real LLM call — purely so AiTextField/AiTextArea can be
+// driven end-to-end in the styleguide. Feature name MUST stay "ai-text":
+// that's what produces the `ai-text:query:run` QN the widget's hooks call.
+
+import { defineFeature } from "@cosmicdrift/kumiko-framework/engine";
+import { z } from "zod";
+
+const runInput = z.discriminatedUnion("mode", [
+  z.object({ mode: z.literal("complete"), text: z.string() }),
+  z.object({ mode: z.literal("correct"), text: z.string().min(1) }),
+  z.object({
+    mode: z.literal("translate"),
+    text: z.string().min(1),
+    targetLanguage: z.string().min(1),
+  }),
+  z.object({
+    mode: z.literal("rewrite"),
+    text: z.string().min(1),
+    style: z.enum(["formal", "casual", "concise", "expand"]).optional(),
+  }),
+]);
+
+type RunInput = z.infer<typeof runInput>;
+
+const CORRECTIONS: ReadonlyArray<readonly [RegExp, string]> = [
+  [/\bteh\b/gi, "the"],
+  [/\bdont\b/gi, "don't"],
+  [/\brecieve\b/gi, "receive"],
+];
+
+function cannedText(payload: RunInput): string {
+  switch (payload.mode) {
+    case "complete":
+      return payload.text.endsWith(" ") ? "and it just works." : " and it just works.";
+    case "correct":
+      return CORRECTIONS.reduce((text, [pattern, fix]) => text.replace(pattern, fix), payload.text);
+    case "translate":
+      return `[${payload.targetLanguage}] ${payload.text}`;
+    case "rewrite":
+      return `[${payload.style ?? "concise"}] ${payload.text}`;
+  }
+}
+
+export const aiTextDemoFeature = defineFeature("ai-text", (r) => {
+  r.queryHandler(
+    "run",
+    runInput,
+    async ({ payload }) => {
+      const text = cannedText(payload);
+      return {
+        type: "text" as const,
+        text,
+        usage: { inputTokens: payload.text.length, outputTokens: text.length },
+      };
+    },
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo stand-in for a real LLM call: returns canned text transforms with no " +
+            "side effects or per-user data; any signed-in user may query it",
+        },
+      },
+    },
+  );
+});

package/samples/apps/styleguide/src/features/widgets/feature.ts

@@ -0,0 +1,314 @@
+// Widgets-Feature (server). Zwei Screens:
+//   widgets           — custom Katalog-Screen (alle Widgets mit statischen Daten)
+//   widgets-dashboard — deklarativer dashboard-Screen (stat/chart/list-Panels
+//                       aus Demo-Queries) — der Schema-getriebene Gegenpart.
+
+import { defineFeature } from "@cosmicdrift/kumiko-framework/engine";
+import { z } from "zod";
+import { WIDGETS_I18N } from "./i18n";
+
+// Statische Demo-Zeitreihe (48 Punkte à 30 Minuten) — kein Date-API,
+// das Fenster ist relativ zu 0 definiert.
+const RESPONSE_POINTS = Array.from({ length: 48 }, (_, i) => ({
+  atMs: i * 30 * 60 * 1000,
+  value: i === 20 ? null : 120 + Math.round(80 * Math.abs(Math.sin(i / 5))),
+}));
+
+const SENDERS = ["William Smith", "Alice Smith", "Bob Johnson", "Emily Davis"] as const;
+const SUBJECTS = ["Meeting Tomorrow", "Re: Project Update", "Weekend Plans", "Re: Budget"] as const;
+
+// Statische Demo-Inbox (18 Nachrichten) für die InfinityList-Demo — genug
+// Rows, um über pageSize=6 hinweg mehrere Seiten nachzuladen.
+const INBOX_MESSAGES = Array.from({ length: 18 }, (_, i) => ({
+  id: `m${i + 1}`,
+  // Cast is sound: `i % SENDERS.length` is always in [0, SENDERS.length) —
+  // noUncheckedIndexedAccess can't see that from a computed index, unlike
+  // the removed `as string` this replaces (which had no such guarantee).
+  sender: SENDERS[i % SENDERS.length] as (typeof SENDERS)[number],
+  subject: SUBJECTS[i % SUBJECTS.length] as (typeof SUBJECTS)[number],
+  snippet: "Hi team, just a reminder about our meeting tomorrow at 10 AM.",
+  // % 4 statt % 3: bleibt an der sender/subject-Rotation ausgerichtet, sonst
+  // ist irgendwann jede Kombination mal unread und der Filter zeigt visuell
+  // keinen Unterschied.
+  unread: i % 4 === 0,
+}));
+
+export const widgetsFeature = defineFeature("widgets", (r) => {
+  r.screen({ id: "widgets", type: "custom", renderer: { react: { __component: "widgets" } } });
+  r.screen({
+    id: "widgets-forms",
+    type: "custom",
+    renderer: { react: { __component: "widgets-forms" } },
+  });
+
+  r.screen({
+    id: "widgets-dashboard",
+    type: "dashboard",
+    filter: {
+      id: "region",
+      label: "widgets:dashboard:filter-region",
+      kind: "select",
+      options: [
+        { value: "eu", label: "widgets:dashboard:filter-region-eu" },
+        { value: "us", label: "widgets:dashboard:filter-region-us" },
+      ],
+    },
+    panels: [
+      {
+        kind: "stat",
+        id: "portfolio",
+        label: "widgets:dashboard:portfolio",
+        query: "widgets:query:metrics:portfolio-stat",
+        valueField: "value",
+        subField: "sub",
+        toneField: "tone",
+        deltaField: "delta",
+        deltaDirectionField: "deltaDirection",
+        deltaToneField: "deltaTone",
+        icon: { react: { __component: "widgets-dashboard-kpi-icon" } },
+        accentColor: "var(--color-primary)",
+      },
+      {
+        kind: "stat-group",
+        id: "net-worth",
+        label: "widgets:dashboard:net-worth",
+        stats: [
+          {
+            kind: "stat",
+            id: "net-worth-assets",
+            label: "widgets:dashboard:net-worth-assets",
+            query: "widgets:query:metrics:net-worth-assets",
+            valueField: "value",
+          },
+          {
+            kind: "stat",
+            id: "net-worth-debts",
+            label: "widgets:dashboard:net-worth-debts",
+            query: "widgets:query:metrics:net-worth-debts",
+            valueField: "value",
+          },
+        ],
+      },
+      {
+        kind: "chart",
+        id: "response-times",
+        label: "widgets:dashboard:response-times",
+        chart: "timeseries",
+        query: "widgets:query:metrics:response-times",
+      },
+      {
+        kind: "list",
+        id: "latest",
+        label: "widgets:dashboard:latest",
+        query: "widgets:query:metrics:latest-items",
+        columns: [
+          { field: "name", label: "widgets:dashboard:col-name" },
+          { field: "status", label: "widgets:dashboard:col-status" },
+        ],
+      },
+      {
+        kind: "feed",
+        id: "upcoming",
+        label: "widgets:dashboard:upcoming",
+        query: "widgets:query:metrics:upcoming-events",
+      },
+      {
+        kind: "progress-list",
+        id: "goal-progress",
+        label: "widgets:dashboard:goal-progress",
+        query: "widgets:query:metrics:goal-progress",
+      },
+      {
+        kind: "custom",
+        id: "filter-echo",
+        component: { react: { __component: "widgets-dashboard-filter-echo" } },
+      },
+    ],
+  });
+
+  r.queryHandler(
+    "metrics:portfolio-stat",
+    z.object({ region: z.string().optional() }),
+    async ({ payload: { region } }) => ({
+      value: region === "us" ? "38.120 $" : region === "eu" ? "54.630 €" : "92.753 €",
+      sub: "über 4 Konten",
+      tone: "positive",
+      delta: "12 %",
+      deltaDirection: "up",
+      deltaTone: "positive",
+    }),
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo dashboard widget: returns static canned data with no per-user or " +
+            "tenant scoping; any signed-in user may query it",
+        },
+      },
+    },
+  );
+  r.queryHandler(
+    "metrics:net-worth-assets",
+    z.object({ region: z.string().optional() }),
+    async () => ({ value: "120.000 €" }),
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo dashboard widget: returns static canned data with no per-user or " +
+            "tenant scoping; any signed-in user may query it",
+        },
+      },
+    },
+  );
+  r.queryHandler(
+    "metrics:net-worth-debts",
+    z.object({ region: z.string().optional() }),
+    async () => ({ value: "65.370 €" }),
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo dashboard widget: returns static canned data with no per-user or " +
+            "tenant scoping; any signed-in user may query it",
+        },
+      },
+    },
+  );
+  r.queryHandler(
+    "metrics:response-times",
+    z.object({}),
+    async () => ({
+      points: RESPONSE_POINTS,
+      windowStartMs: 0,
+      windowEndMs: 24 * 60 * 60 * 1000,
+    }),
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo dashboard widget: returns static canned data with no per-user or " +
+            "tenant scoping; any signed-in user may query it",
+        },
+      },
+    },
+  );
+  r.queryHandler(
+    "metrics:latest-items",
+    z.object({}),
+    async () => ({
+      rows: [
+        { id: "i1", name: "API-Timeout eu-central", status: "resolved" },
+        { id: "i2", name: "Zertifikat erneuert", status: "done" },
+      ],
+      nextCursor: null,
+    }),
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo dashboard widget: returns static canned data with no per-user or " +
+            "tenant scoping; any signed-in user may query it",
+        },
+      },
+    },
+  );
+  r.queryHandler(
+    "metrics:inbox-messages",
+    z.object({
+      cursor: z.coerce.number().int().min(0).optional(),
+      limit: z.number().int().min(1).max(100).optional(),
+      unreadOnly: z.boolean().optional(),
+      search: z.string().optional(),
+    }),
+    async ({ payload: { cursor, limit, unreadOnly, search } }) => {
+      const term = search?.trim().toLowerCase() ?? "";
+      const filtered = INBOX_MESSAGES.filter(
+        (m) =>
+          (unreadOnly !== true || m.unread) &&
+          (term === "" ||
+            m.sender.toLowerCase().includes(term) ||
+            m.subject.toLowerCase().includes(term)),
+      );
+      const start = cursor ?? 0;
+      const pageSize = limit ?? 6;
+      const rows = filtered.slice(start, start + pageSize);
+      const nextCursor = start + pageSize < filtered.length ? String(start + pageSize) : null;
+      return { rows, nextCursor };
+    },
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo dashboard widget: returns static canned data with no per-user or " +
+            "tenant scoping; any signed-in user may query it",
+        },
+      },
+    },
+  );
+  r.queryHandler(
+    "metrics:upcoming-events",
+    z.object({}),
+    async () => ({
+      rows: [
+        { primary: "Zinsanpassung Baudarlehen", trailing: "Aug 2026" },
+        { primary: "Bausparvertrag zuteilungsreif", trailing: "Okt 2026" },
+      ],
+    }),
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo dashboard widget: returns static canned data with no per-user or " +
+            "tenant scoping; any signed-in user may query it",
+        },
+      },
+    },
+  );
+  r.queryHandler(
+    "metrics:goal-progress",
+    z.object({}),
+    async () => ({
+      rows: [
+        { label: "Baudarlehen", value: "42.000 € offen", fraction: 0.71 },
+        { label: "Autokredit", value: "3.200 € offen", fraction: 0.92 },
+      ],
+    }),
+    {
+      access: {
+        openToAll: {
+          reason:
+            "demo dashboard widget: returns static canned data with no per-user or " +
+            "tenant scoping; any signed-in user may query it",
+        },
+      },
+    },
+  );
+
+  r.translations({ keys: WIDGETS_I18N });
+
+  r.nav({
+    id: "widgets",
+    label: "widgets:nav.widgets",
+    parent: "gallery:nav:styleguide",
+    screen: "widgets:screen:widgets",
+    icon: "layout-grid",
+    order: 20,
+  });
+  r.nav({
+    id: "widgets-forms",
+    label: "widgets:nav.widgetsForms",
+    parent: "gallery:nav:styleguide",
+    screen: "widgets:screen:widgets-forms",
+    icon: "clipboard-list",
+    order: 21,
+  });
+  r.nav({
+    id: "widgets-dashboard",
+    label: "widgets:nav.widgetsDashboard",
+    parent: "gallery:nav:styleguide",
+    screen: "widgets:screen:widgets-dashboard",
+    icon: "gauge",
+    order: 22,
+  });
+});

package/samples/apps/styleguide/src/features/widgets/i18n.ts

@@ -0,0 +1,208 @@
+// Widgets-Feature i18n-Bundle. Key-first (server r.translations() shape) —
+// web/index.ts pivots this into the client TranslationsByLocale shape.
+
+export const WIDGETS_I18N = {
+  "widgets:nav.widgets": { de: "Widgets", en: "Widgets" },
+  "widgets:nav.widgetsForms": { de: "Formulare (Beispiele)", en: "Forms (examples)" },
+  "widgets:nav.widgetsDashboard": { de: "Dashboard (deklarativ)", en: "Dashboard (declarative)" },
+  "screen:widgets.title": { de: "Widgets", en: "Widgets" },
+  "screen:widgets-dashboard.title": {
+    de: "Dashboard (deklarativ)",
+    en: "Dashboard (declarative)",
+  },
+  "screen:widgets-forms.title": {
+    de: "Formulare (Beispiele)",
+    en: "Forms (examples)",
+  },
+  "widgets:dashboard:portfolio": { de: "Portfolio", en: "Portfolio" },
+  "widgets:dashboard:net-worth": { de: "Netto-Vermögen", en: "Net worth" },
+  "widgets:dashboard:net-worth-assets": { de: "Vermögen", en: "Assets" },
+  "widgets:dashboard:net-worth-debts": { de: "Schulden", en: "Debts" },
+  "widgets:dashboard:response-times": { de: "Antwortzeit", en: "Response time" },
+  "widgets:dashboard:latest": { de: "Neueste Ereignisse", en: "Latest events" },
+  "widgets:dashboard:col-name": { de: "Name", en: "Name" },
+  "widgets:dashboard:col-status": { de: "Status", en: "Status" },
+  "widgets:dashboard:upcoming": { de: "Nächste Termine", en: "Upcoming" },
+  "widgets:dashboard:goal-progress": { de: "Tilgungsfortschritt", en: "Payoff progress" },
+  "widgets:dashboard:filter-region": { de: "Region", en: "Region" },
+  "widgets:dashboard:filter-region-eu": { de: "Europa", en: "Europe" },
+  "widgets:dashboard:filter-region-us": { de: "USA", en: "USA" },
+  "widgets:catalog:portfolio": { de: "Portfolio", en: "Portfolio" },
+  "widgets:catalog:portfolio-sub": { de: "über 4 Konten", en: "across 4 accounts" },
+  "widgets:catalog:remaining-debt": { de: "Restschuld", en: "Remaining debt" },
+  "widgets:catalog:remaining-debt-trend": {
+    de: "−1.200 €/Monat",
+    en: "−1,200 €/month",
+  },
+  "widgets:catalog:interest-rate": { de: "Zins p.a.", en: "Interest p.a." },
+  "widgets:catalog:rate": { de: "Rate", en: "Rate" },
+  "widgets:catalog:uptime": { de: "Uptime", en: "Uptime" },
+  "widgets:catalog:uptime-subtitle": { de: "Letzte 90 Tage", en: "Last 90 days" },
+  "widgets:catalog:operational": { de: "Operational", en: "Operational" },
+  "widgets:catalog:uptime-aria": {
+    de: "Uptime der letzten 90 Tage",
+    en: "Uptime for the last 90 days",
+  },
+  "widgets:catalog:uptime-start": { de: "90 Tage", en: "90 days" },
+  "widgets:catalog:uptime-end": { de: "heute", en: "today" },
+  "widgets:catalog:uptime-day": { de: "Tag {n}", en: "Day {n}" },
+  "widgets:catalog:response-time": { de: "Antwortzeit", en: "Response time" },
+  "widgets:catalog:response-time-subtitle": {
+    de: "Letzte 24 Stunden",
+    en: "Last 24 hours",
+  },
+  "widgets:catalog:response-time-aria": {
+    de: "Antwortzeit-Verlauf",
+    en: "Response time history",
+  },
+  "widgets:catalog:24h-ago": { de: "vor 24h", en: "24h ago" },
+  "widgets:catalog:12h-ago": { de: "vor 12h", en: "12h ago" },
+  "widgets:catalog:now": { de: "jetzt", en: "now" },
+  "widgets:catalog:status-tones": { de: "Status-Tones", en: "Status tones" },
+  "widgets:catalog:status-operational": { de: "operational", en: "operational" },
+  "widgets:catalog:status-degraded": { de: "degraded", en: "degraded" },
+  "widgets:catalog:status-partial-outage": { de: "partial outage", en: "partial outage" },
+  "widgets:catalog:status-major-outage": { de: "major outage", en: "major outage" },
+  "widgets:catalog:status-maintenance": { de: "maintenance", en: "maintenance" },
+  "widgets:catalog:repayment-model": { de: "Tilgungsmodell", en: "Repayment model" },
+  "widgets:catalog:mode-annuity": { de: "Annuität", en: "Annuity" },
+  "widgets:catalog:mode-fixed": { de: "Feste Rate", en: "Fixed rate" },
+  "widgets:catalog:model": { de: "Modell", en: "Model" },
+  "widgets:catalog:nominal-rate": { de: "Sollzins", en: "Nominal rate" },
+  "widgets:catalog:status": { de: "Status", en: "Status" },
+  "widgets:catalog:active": { de: "aktiv", en: "active" },
+  "widgets:catalog:advanced-settings": {
+    de: "Erweiterte Einstellungen",
+    en: "Advanced settings",
+  },
+  "widgets:catalog:no-extra-repayments-title": {
+    de: "Noch keine Sondertilgungen",
+    en: "No extra repayments yet",
+  },
+  "widgets:catalog:no-extra-repayments-description": {
+    de: "Lege die erste an, um den Plan zu verkürzen.",
+    en: "Add the first one to shorten the plan.",
+  },
+  "widgets:catalog:drawer": { de: "Drawer", en: "Drawer" },
+  "widgets:catalog:open": { de: "Öffnen", en: "Open" },
+  "widgets:catalog:cancel": { de: "Abbrechen", en: "Cancel" },
+  "widgets:catalog:save": { de: "Speichern", en: "Save" },
+  "widgets:catalog:open-status": { de: "offen", en: "open" },
+  "widgets:catalog:closed-status": { de: "geschlossen", en: "closed" },
+  "widgets:catalog:drawer-below-header": {
+    de: "Drawer (unter dem Header)",
+    en: "Drawer (below header)",
+  },
+  "widgets:catalog:open-below-header": { de: "Unter dem Header öffnen", en: "Open below header" },
+  "widgets:catalog:drawer-below-header-title": {
+    de: "Unter dem Header angedockt",
+    en: "Docked below the header",
+  },
+  "widgets:catalog:drawer-message-title": { de: "Nachricht", en: "Message" },
+  "widgets:catalog:floating-panel": { de: "Floating Panel", en: "Floating panel" },
+  "widgets:catalog:floating-panel-open": { de: "Panel öffnen", en: "Open panel" },
+  "widgets:catalog:floating-panel-close": { de: "Panel schließen", en: "Close panel" },
+  "widgets:catalog:floating-panel-body": {
+    de: "Verschiebbar per Kopfzeile, Größe über Kanten und Ecken. Die Seite dahinter bleibt bedienbar.",
+    en: "Drag the header to move it, resize from the edges and corners. The page behind stays usable.",
+  },
+  "widgets:catalog:inbox": { de: "Inbox (InfinityList)", en: "Inbox (InfinityList)" },
+  "widgets:catalog:filter-all": { de: "Alle", en: "All" },
+  "widgets:catalog:filter-unread": { de: "Ungelesen", en: "Unread" },
+  "widgets:catalog:mark-all-read": {
+    de: "Alle als gelesen markieren",
+    en: "Mark all as read",
+  },
+  "widgets:catalog:search": { de: "Suchen", en: "Search" },
+  "widgets:catalog:search-placeholder": {
+    de: "Absender oder Betreff…",
+    en: "Sender or subject…",
+  },
+  "widgets:catalog:archive": { de: "Archivieren", en: "Archive" },
+  "widgets:catalog:no-message-selected-title": {
+    de: "Keine Nachricht ausgewählt",
+    en: "No message selected",
+  },
+  "widgets:catalog:no-message-selected-description": {
+    de: "Zeile links anklicken.",
+    en: "Click a row on the left.",
+  },
+  "widgets:catalog:ai-text": { de: "AI-Text", en: "AI text" },
+  "widgets:catalog:ai-text-subtitle": {
+    de: "Ghost-Text-Completion, Correct, Translate, Rewrite",
+    en: "Ghost-text completion, correct, translate, rewrite",
+  },
+  "widgets:catalog:title": { de: "Titel", en: "Title" },
+  "widgets:catalog:note": { de: "Notiz", en: "Note" },
+  "widgets:catalog:form-fields": { de: "Feld-Widgets", en: "Field widgets" },
+  "widgets:catalog:name": { de: "Name", en: "Name" },
+  "widgets:catalog:name-placeholder": { de: "z. B. Variante A", en: "e.g. variant A" },
+  "widgets:catalog:state": { de: "Bundesland", en: "State" },
+  "widgets:catalog:state-nw": { de: "Nordrhein-Westfalen", en: "North Rhine-Westphalia" },
+  "widgets:catalog:state-by": { de: "Bayern", en: "Bavaria" },
+  "widgets:catalog:date": { de: "Datum", en: "Date" },
+  "widgets:catalog:include-broker": { de: "Makler einbeziehen", en: "Include broker" },
+  "widgets:catalog:call-rate": { de: "Abruf: {n} %", en: "Draw: {n}%" },
+  "widgets:catalog:small": { de: "Klein", en: "Small" },
+  "widgets:catalog:standard": { de: "Standard", en: "Standard" },
+  "widgets:catalog:comparison": { de: "Vergleich", en: "Comparison" },
+  "widgets:catalog:metric": { de: "Kennzahl", en: "Metric" },
+  "widgets:catalog:monthly-rate": { de: "Monatsrate", en: "Monthly rate" },
+  "widgets:catalog:total-interest": { de: "Gesamtzins", en: "Total interest" },
+  "widgets:catalog:financing": { de: "Finanzierung", en: "Financing" },
+  "widgets:catalog:loan": { de: "Darlehen", en: "Loan" },
+  "widgets:catalog:repayment": { de: "Tilgung", en: "Repayment" },
+  "widgets:catalog:result": { de: "Ergebnis", en: "Result" },
+  "widgets:catalog:enter-loan-and-interest": {
+    de: "Darlehen und Zins eingeben.",
+    en: "Enter loan and interest.",
+  },
+  "widgets:catalog:tranche": { de: "Tranche", en: "Tranche" },
+  "widgets:catalog:bank-loan": { de: "Bankdarlehen", en: "Bank loan" },
+  "widgets:catalog:long-title-demo": {
+    de: "Ein Titel, der bewusst deutlich breiter ist als das Eingabefeld, damit horizontales Scrollen den Ghost-Text testet",
+    en: "A title deliberately much wider than the input field, so horizontal scrolling exercises the ghost text",
+  },
+  "widgets:catalog:long-note-line": {
+    de: "Zeile {n} der Notiz — Lorem ipsum dolor sit amet.",
+    en: "Note line {n} — Lorem ipsum dolor sit amet.",
+  },
+  "widgets:catalog:plans": { de: "Tarife", en: "Plans" },
+  "widgets:catalog:plans-subtitle": {
+    de: "Aktueller Tarif, ein kaufbarer Tarif und ein Tarif mit fehlgeschlagenem Preis, plus ein kompakter Einmalkauf",
+    en: "Current plan, a purchasable plan and a plan with a failed price lookup, plus a compact one-off purchase",
+  },
+  "widgets:catalog:plan-starter": { de: "Starter", en: "Starter" },
+  "widgets:catalog:plan-starter-description": {
+    de: "Für den Einstieg",
+    en: "For getting started",
+  },
+  "widgets:catalog:plan-per-month": { de: "/Monat", en: "/month" },
+  "widgets:catalog:plan-feature-projects": { de: "3 Projekte", en: "3 projects" },
+  "widgets:catalog:plan-feature-support": { de: "E-Mail-Support", en: "Email support" },
+  "widgets:catalog:plan-pro": { de: "Pro", en: "Pro" },
+  "widgets:catalog:plan-pro-description": {
+    de: "Für wachsende Teams",
+    en: "For growing teams",
+  },
+  "widgets:catalog:plan-feature-projects-unlimited": {
+    de: "Unbegrenzte Projekte",
+    en: "Unlimited projects",
+  },
+  "widgets:catalog:plan-feature-support-priority": {
+    de: "Priorisierter Support",
+    en: "Priority support",
+  },
+  "widgets:catalog:plan-feature-analytics": { de: "Erweiterte Analysen", en: "Advanced analytics" },
+  "widgets:catalog:plan-choose": { de: "Auswählen", en: "Choose" },
+  "widgets:catalog:plan-enterprise": { de: "Enterprise", en: "Enterprise" },
+  "widgets:catalog:plan-enterprise-description": {
+    de: "Für große Organisationen",
+    en: "For large organizations",
+  },
+  "widgets:catalog:plan-feature-sso": { de: "Single Sign-On", en: "Single sign-on" },
+  "widgets:catalog:plan-feature-sla": { de: "SLA-Garantie", en: "SLA guarantee" },
+  "widgets:catalog:plan-contact-sales": { de: "Vertrieb kontaktieren", en: "Contact sales" },
+  "widgets:catalog:plan-credits": { de: "Credit-Paket", en: "Credit pack" },
+  "widgets:catalog:plan-buy": { de: "Kaufen", en: "Buy" },
+} as const;

package/samples/apps/styleguide/src/features/widgets/lib/format.ts

@@ -0,0 +1,32 @@
+import { formatMoney } from "@cosmicdrift/kumiko-renderer-web";
+
+// `locale` comes from useLocale(), whose default resolver reads it
+// unvalidated from localStorage/navigator.language — a structurally invalid
+// tag (e.g. "de_DE") throws a RangeError out of toLocaleString with no
+// ErrorBoundary in this render tree. Same failure mode formatMoney guards
+// against (money-input.tsx); fall back to "en" instead of crashing the page.
+function safeLocale(locale: string): string {
+  try {
+    Intl.getCanonicalLocales(locale);
+    return locale;
+  } catch {
+    return "en";
+  }
+}
+
+// Static catalog demo values — reuses formatMoney (money-input.tsx) instead
+// of hand-rolling a second currency formatter, so symbol placement (prefix
+// in en, suffix in de) follows Intl's own locale data instead of a bespoke
+// template string. `n` is EUR in major units (catalog demo values like
+// 92753 read as €92,753), formatMoney wants minor units (cents).
+export function euro(n: number, locale: string): string {
+  return formatMoney(Math.round(n * 100), "EUR", safeLocale(locale));
+}
+
+export function percent(n: number, locale: string): string {
+  return new Intl.NumberFormat(safeLocale(locale), {
+    style: "percent",
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(n / 100);
+}

package/samples/apps/styleguide/src/features/widgets/web/DashboardFilterEcho.tsx

@@ -0,0 +1,21 @@
+// Demo-Komponente für den `custom`-Dashboard-Panel-Typ: zeigt, dass eine
+// eingehängte App-Komponente ihre Daten selbst holt und den aktuell
+// gewählten Screen-Filter-Wert über `filterParams` sieht (siehe
+// DashboardFilterDefinition in feature.ts).
+
+import type { ExtensionSectionProps } from "@cosmicdrift/kumiko-renderer";
+import { SectionCard } from "@cosmicdrift/kumiko-renderer-web";
+import type { ReactNode } from "react";
+
+export function DashboardFilterEcho({ filterParams }: ExtensionSectionProps): ReactNode {
+  const region = filterParams?.["region"];
+  return (
+    <SectionCard title="Custom-Panel">
+      <p className="text-sm text-muted-foreground">
+        {typeof region === "string"
+          ? `Gefiltert nach Region: ${region}`
+          : "Ungefiltert (alle Regionen)"}
+      </p>
+    </SectionCard>
+  );
+}