@cosmicdrift/kumiko-renderer-web 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @cosmicdrift/kumiko-renderer-web
 
+## 0.4.1
+
+### Patch Changes
+
+- 010b410: feat(auth-email-password): "Bestätigungs-Mail erneut senden" im LoginScreen
+
+  LoginScreen bietet bei reason=email_not_verified jetzt einen Resend-Link
+  im Fehler-Banner — der existierende `requestEmailVerification`-Endpoint
+  wird direkt aufgerufen, der Banner wechselt nach Erfolg zum Info-Variant
+  ("Wir haben dir eine neue Bestätigungs-Mail geschickt.").
+
+  UX-Details:
+
+  - Bei 429 → inline-Hint "Bitte warte kurz und versuche es erneut."
+  - Bei Netzwerk/sonstigen Fehlern → inline-Hint "Konnte nicht senden."
+  - Anti-Typo-Gate: ändert der User die Email-Eingabe nach dem Login-Fail,
+    verschwindet der Resend-Link — sonst würde Resend silent-success an die
+    geänderte (potentiell typoed) Adresse gehen ohne User-Feedback.
+  - Andere Failure-Codes (invalid_credentials etc.) zeigen weiterhin keinen
+    Resend-Link.
+
+  i18n: 4 neue Keys (DE+EN) im `auth.login.resend*`-Namespace, additive.
+  Apps die ihre Translations override-en müssen nichts ändern.
+
+  Additive UI-Feature — keine API-Breaks, keine Schema-Migration.
+
+- Updated dependencies [010b410]
+  - @cosmicdrift/kumiko-dispatcher-live@0.4.1
+  - @cosmicdrift/kumiko-headless@0.4.1
+  - @cosmicdrift/kumiko-renderer@0.4.1
+
 ## 0.4.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.4.0",
-    "@cosmicdrift/kumiko-headless": "0.4.0",
-    "@cosmicdrift/kumiko-renderer": "0.4.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.4.1",
+    "@cosmicdrift/kumiko-headless": "0.4.1",
+    "@cosmicdrift/kumiko-renderer": "0.4.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/components/config-cascade.tsx

@@ -0,0 +1,132 @@
+import type {
+  ConfigCascade,
+  ConfigCascadeLevel,
+  ConfigScope,
+  ConfigValueSource,
+} from "@cosmicdrift/kumiko-framework/engine";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+const SOURCE_I18N_KEY: Record<ConfigValueSource, string> = {
+  "user-row": "config.source.user",
+  "tenant-row": "config.source.tenant",
+  "system-row": "config.source.system",
+  "app-override": "config.source.appOverride",
+  computed: "config.source.computed",
+  default: "config.source.default",
+  missing: "config.source.missing",
+};
+
+const SOURCE_COLORS: Record<ConfigValueSource, string> = {
+  "user-row": "text-blue-600 bg-blue-50 border-blue-200",
+  "tenant-row": "text-green-600 bg-green-50 border-green-200",
+  "system-row": "text-purple-600 bg-purple-50 border-purple-200",
+  "app-override": "text-orange-600 bg-orange-50 border-orange-200",
+  computed: "text-teal-600 bg-teal-50 border-teal-200",
+  default: "text-gray-500 bg-gray-50 border-gray-200",
+  missing: "text-red-500 bg-red-50 border-red-200",
+};
+
+function SourceBadge({ source }: { source: ConfigValueSource }): ReactNode {
+  const t = useTranslation();
+  return (
+    <span
+      className={`inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium ${SOURCE_COLORS[source]}`}
+    >
+      {t(SOURCE_I18N_KEY[source])}
+    </span>
+  );
+}
+
+function formatValue(value: string | number | boolean | undefined, hasValue: boolean): string {
+  if (!hasValue || value === undefined) return "—";
+  return String(value);
+}
+
+function scopeToSource(scope: ConfigScope): ConfigValueSource {
+  if (scope === "user") return "user-row";
+  if (scope === "tenant") return "tenant-row";
+  return "system-row";
+}
+
+type ConfigCascadeViewProps = {
+  readonly cascade: ConfigCascade;
+  readonly screenScope: ConfigScope;
+  readonly onReset?: (key: string, scope: ConfigScope) => void;
+  readonly qualifiedKey?: string;
+};
+
+export function ConfigCascadeView({
+  cascade,
+  screenScope,
+  onReset,
+  qualifiedKey,
+}: ConfigCascadeViewProps): ReactNode {
+  const t = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  // Safety net: callers should already filter malformed cascades, but
+  // a missing levels-array (e.g. from a partial mock) shouldn't crash
+  // the screen.
+  if (!Array.isArray(cascade?.levels)) return null;
+
+  const activeLevel = cascade.levels.find((l) => l.isActive);
+  const screenScopeSource = scopeToSource(screenScope);
+  const hasOverride = activeLevel?.source === screenScopeSource;
+
+  return (
+    <div className="mt-1 text-xs">
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1 text-gray-500 hover:text-gray-700 cursor-pointer"
+      >
+        <span className="text-[10px]">{expanded ? "▼" : "▶"}</span>
+        {activeLevel ? (
+          <>
+            <SourceBadge source={activeLevel.source} />
+            <span className="text-gray-400">
+              {formatValue(activeLevel.value, activeLevel.hasValue)}
+            </span>
+          </>
+        ) : (
+          <span className="text-gray-400">{t("config.cascade.noValue")}</span>
+        )}
+      </button>
+
+      {expanded ? (
+        <div className="mt-1 flex flex-col gap-0.5 pl-3 border-l-2 border-gray-100">
+          {cascade.levels.map((level) => (
+            <CascadeLevelRow key={level.source} level={level} />
+          ))}
+
+          {hasOverride && onReset && qualifiedKey ? (
+            <button
+              type="button"
+              onClick={() => onReset(qualifiedKey, screenScope)}
+              className="mt-1 self-start text-[10px] text-orange-500 hover:text-orange-700 cursor-pointer underline"
+            >
+              {t("config.cascade.resetTo", { scope: t(SOURCE_I18N_KEY[screenScopeSource]) })}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function CascadeLevelRow({ level }: { level: ConfigCascadeLevel }): ReactNode {
+  const t = useTranslation();
+  return (
+    <div
+      className={`flex items-center gap-1.5 ${level.isActive ? "font-medium" : "text-gray-400"}`}
+    >
+      <SourceBadge source={level.source} />
+      <span>{formatValue(level.value, level.hasValue)}</span>
+      {level.isActive ? (
+        <span className="text-[10px] text-gray-400">{t("config.cascade.activeMarker")}</span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/config-source-badge.tsx

@@ -0,0 +1,36 @@
+import type { ConfigValueSource } from "@cosmicdrift/kumiko-framework/engine";
+import type { ReactNode } from "react";
+
+const SOURCE_CONFIG: Record<ConfigValueSource, { label: string; bg: string; text: string }> = {
+  "user-row": { label: "User", bg: "#dbeafe", text: "#1e40af" },
+  "tenant-row": { label: "Tenant", bg: "#dcfce7", text: "#166534" },
+  "system-row": { label: "System", bg: "#f3e8ff", text: "#6b21a8" },
+  "app-override": { label: "Override", bg: "#ffedd5", text: "#9a3412" },
+  computed: { label: "Computed", bg: "#ccfbf1", text: "#115e59" },
+  default: { label: "Default", bg: "#f3f4f6", text: "#4b5563" },
+  missing: { label: "Missing", bg: "#fee2e2", text: "#991b1b" },
+};
+
+export function ConfigSourceBadge({ source }: { readonly source: ConfigValueSource }): ReactNode {
+  const cfg = SOURCE_CONFIG[source];
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "0 6px",
+        fontSize: "11px",
+        fontWeight: 500,
+        lineHeight: "18px",
+        borderRadius: "4px",
+        backgroundColor: cfg.bg,
+        color: cfg.text,
+        marginLeft: "6px",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {cfg.label}
+    </span>
+  );
+}

package/src/primitives/index.tsx

@@ -130,7 +130,16 @@ function DefaultBanner({
 
 // ---- Field (Label + Error) ----
 
-function DefaultField({ id, label, required, issues, children, testId }: FieldProps): ReactNode {
+function DefaultField({
+  id,
+  label,
+  required,
+  issues,
+  labelAppendix,
+  fieldAppendix,
+  children,
+  testId,
+}: FieldProps): ReactNode {
   const t = useTranslation();
   const hasError = issues !== undefined && issues.length > 0;
   return (
@@ -148,9 +157,11 @@ function DefaultField({ id, label, required, issues, children, testId }: FieldPr
         )}
       >
         {label}
+        {labelAppendix !== undefined && <>{labelAppendix}</>}
         {required === true && <span className="ml-0.5 text-destructive">*</span>}
       </LabelPrimitive.Root>
       {children}
+      {fieldAppendix !== undefined && <div className="mt-1">{fieldAppendix}</div>}
       {hasError && (
         <div
           role="alert"
@@ -1255,6 +1266,9 @@ function DefaultHeading({ variant = "page", children, testId }: HeadingProps): R
   );
 }
 
+import { ConfigCascadeView as DefaultConfigCascadeView } from "../components/config-cascade";
+import { ConfigSourceBadge as DefaultConfigSourceBadge } from "../components/config-source-badge";
+
 export const defaultPrimitives: CorePrimitives = {
   Button: DefaultButton,
   Banner: DefaultBanner,
@@ -1268,4 +1282,6 @@ export const defaultPrimitives: CorePrimitives = {
   Text: DefaultText,
   Heading: DefaultHeading,
   Dialog: DefaultDialog,
+  ConfigSourceBadge: DefaultConfigSourceBadge,
+  ConfigCascadeView: DefaultConfigCascadeView,
 };