@cosmicdrift/kumiko-renderer-web 1.0.0 → 2.0.0

package/src/primitives/index.tsx

@@ -9,7 +9,7 @@
 // Dropdown etc. kommen später).
 
 import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
-import { applyFormatSpec } from "@cosmicdrift/kumiko-headless";
+import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import type {
   DataTableRowAction,
   DataTableRowActionMode,
@@ -29,12 +29,14 @@ import {
   type GridProps,
   type HeadingProps,
   type InputProps,
+  type LinkProps,
   type SectionProps,
   type TextProps,
   useColumnRenderer,
   useTranslation,
   WriteFailedError,
 } from "@cosmicdrift/kumiko-renderer";
+import { cva } from "class-variance-authority";
 import {
   ArrowDown,
   ArrowUp,
@@ -58,8 +60,7 @@ import {
 } from "react";
 import { cn } from "../lib/cn";
 import { Badge } from "../ui/badge";
-import { Button as UiButton } from "../ui/button";
-import { Card, CardContent } from "../ui/card";
+import { buttonVariants, Button as UiButton } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input as UiInput } from "../ui/input";
 import { Label as UiLabel } from "../ui/label";
@@ -76,20 +77,44 @@ import {
   DropdownMenuTrigger,
 } from "./dropdown-menu";
 import { FileUploadInput } from "./file-upload";
+import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
-import { MoneyInput } from "./money-input";
+import { formatMoney, MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
 
+// ---- Card-Chrome (eine Definition für Form/Section/Card) ----
+
+// Die eine Card-Surface. Maße (Padding/Radius/Shadow) kommen aus --card-*
+// CSS-Tokens (Defaults in styles.css), damit eine App sie einmal zentral in
+// ihrer styles.css überschreiben kann — wie die Farben. Radius-Variante:
+// xl = Card/Screen-Fläche (Default, token-getrieben), lg = "innen"-Fläche.
+const cardSurface = cva(
+  "flex flex-col border bg-card text-card-foreground shadow-[var(--card-shadow)]",
+  {
+    variants: { radius: { xl: "rounded-[var(--card-radius)]", lg: "rounded-lg" } },
+    defaultVariants: { radius: "xl" },
+  },
+);
+const cardFooter = "flex items-center justify-end gap-2 px-[var(--card-padding)] py-4";
+const cardFooterBorder = "border-t bg-muted/30";
+
 // ---- Button (vendored shadcn ui/button) ----
 
 // Contract-Variant → shadcn-Variant: secondary war schon immer der
 // bordered-bg-background-Look = shadcns `outline`. primary→default,
-// danger→destructive.
+// danger→destructive, link→link (kein BG, underline on hover).
 const BUTTON_VARIANT = {
   primary: "default",
   secondary: "outline",
   danger: "destructive",
+  link: "link",
+} as const;
+
+const BUTTON_SIZE = {
+  sm: "sm",
+  md: "default",
+  icon: "icon",
 } as const;
 
 function DefaultButton({
@@ -98,9 +123,18 @@ function DefaultButton({
   disabled,
   loading,
   variant = "primary",
+  size = "md",
+  ariaLabel,
+  width = "auto",
   children,
   testId,
 }: ButtonProps): ReactNode {
+  // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner), nicht als
+  // gepolsterte Fläche; width="full" streckt CTA-Buttons in Karten/Panels.
+  const className =
+    [variant === "link" ? "h-auto px-0 py-0" : "", width === "full" ? "w-full" : ""]
+      .filter(Boolean)
+      .join(" ") || undefined;
   return (
     <UiButton
       type={type}
@@ -109,6 +143,9 @@ function DefaultButton({
       data-testid={testId}
       data-loading={loading === true ? "true" : undefined}
       variant={BUTTON_VARIANT[variant]}
+      size={BUTTON_SIZE[size]}
+      aria-label={ariaLabel}
+      className={className}
     >
       {loading === true ? <Loader2 className="size-4 animate-spin" aria-hidden="true" /> : children}
     </UiButton>
@@ -230,6 +267,8 @@ function DefaultInput(props: InputProps): ReactNode {
         <UiInput
           type="text"
           {...common}
+          data-testid={props.testId}
+          readOnly={props.readOnly}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(e.target.value)}
           {...(props.placeholder !== undefined && { placeholder: props.placeholder })}
@@ -241,6 +280,7 @@ function DefaultInput(props: InputProps): ReactNode {
         <UiInput
           type="email"
           {...common}
+          data-testid={props.testId}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(e.target.value)}
           {...(props.placeholder !== undefined && { placeholder: props.placeholder })}
@@ -252,6 +292,7 @@ function DefaultInput(props: InputProps): ReactNode {
         <UiInput
           type="password"
           {...common}
+          data-testid={props.testId}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(e.target.value)}
           autoComplete={props.autoComplete ?? "current-password"}
@@ -262,6 +303,7 @@ function DefaultInput(props: InputProps): ReactNode {
         <UiInput
           type="number"
           {...common}
+          data-testid={props.testId}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLInputElement>) => {
             const v = e.target.value;
@@ -270,6 +312,19 @@ function DefaultInput(props: InputProps): ReactNode {
           className="text-right tabular-nums"
         />
       );
+    case "range":
+      return (
+        <input
+          type="range"
+          {...common}
+          min={props.min}
+          max={props.max}
+          step={props.step ?? 1}
+          value={props.value}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(Number(e.target.value))}
+          className="w-full accent-primary"
+        />
+      );
     case "boolean":
       return (
         <Checkbox
@@ -501,9 +556,11 @@ function DefaultDataTable({
         {emptyState ?? <span>No entries.</span>}
       </div>
     ) : (
-      // dashboard-01-Muster: schlichter `rounded-lg border`-Rahmen (kein
-      // bg-card/shadow), die Header-Zeile trägt den bg-muted-Grauton.
-      <div className="overflow-hidden rounded-lg border">
+      // dashboard-01-Muster: `rounded-lg border`-Rahmen, die Header-Zeile
+      // trägt den bg-muted-Grauton. `bg-card` (statt transparent) → die Liste
+      // sitzt auf derselben Card-Fläche wie Forms; auf Themes mit farbigem
+      // Page-Background (z.B. Cream) matchen Listen sonst nicht die Cards.
+      <div className="overflow-hidden rounded-lg border bg-card">
         <Table data-testid={testId}>
           {tableInner(columns, rows, onRowClick, sort, onSortChange, rowActions, rowActionMode)}
         </Table>
@@ -754,7 +811,7 @@ function useRowActionTrigger(row: ListRowViewModel) {
       toast({
         title: t("kumiko.rowAction.failed"),
         description: e instanceof Error ? e.message : String(e),
-        variant: "destructive",
+        variant: "bad",
         ...(docsUrl !== undefined && { docsUrl }),
       });
     } finally {
@@ -1199,6 +1256,16 @@ export function isComponentRendererRef(renderer: unknown): { readonly name: stri
 // applyFormatSpec re-exported from headless (platform-agnostic).
 export { applyFormatSpec };
 
+function isMoneyValue(value: unknown): value is { amount: number; currency: string } {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    typeof (value as Record<string, unknown>)["amount"] === "number" &&
+    typeof (value as Record<string, unknown>)["currency"] === "string" &&
+    /^[A-Za-z]{3}$/.test((value as Record<string, unknown>)["currency"] as string)
+  );
+}
+
 // Type-spezifische Default-Cell-Renderer. Author kann pro Spalte einen
 // expliziten renderer setzen (FormatSpec oder PlatformComponent); ohne
 // expliziten renderer fällt DataTableCell hier durch.
@@ -1206,6 +1273,7 @@ export { applyFormatSpec };
 //   - boolean → ✓ / leer
 //   - timestamp/date → locale-formatiert (kein roher ISO-String)
 //   - select → human-lesbar (kebab-case → Title Case)
+//   - money → { amount, currency } formatted via Intl (not "[object Object]")
 //   - text/number/sonst → toString
 export function defaultCellRender(
   value: unknown,
@@ -1215,6 +1283,16 @@ export function defaultCellRender(
   if (value === null || value === undefined || value === "") return "";
   if (type === "boolean") return value === true ? "✓" : "";
   if (type === "timestamp" || type === "date") return applyFormatSpec({ format: type }, value);
+  if (type === "money") {
+    if (!isMoneyValue(value)) return String(value);
+    // No `locale` param here: DataTableCell has no app-locale context to
+    // thread through (unlike the form path — see MoneyInput/RenderField in
+    // packages/renderer, which pins the LocaleProvider locale). formatMoney
+    // falls back to guessLocale() (navigator.language), so the same amount
+    // can render differently in a table vs. a form on the same screen.
+    // Mid-term: pass the app locale down here too, analogous to render-field.
+    return formatMoney(value.amount, value.currency);
+  }
   if (type === "select") {
     const raw = String(value);
     // Translated Label aus dem ViewModel-Builder (Convention-Key
@@ -1354,7 +1432,9 @@ function DefaultForm({
   // OHNE Trennlinie darunter (Titel fließt in die erste Section). Sections
   // sind divide-y-getrennt (Linien nur ZWISCHEN ihnen). Action-Footer mit
   // bg-muted/30 als Farb-Trenner statt harter Linie. main hat kein Padding;
-  // der max-w-3xl-Body rahmt die Card.
+  // der max-w-3xl-Body rahmt die Card, mx-auto zentriert ihn im Main statt
+  // linksbündig (sonst „eingesperrt" mit leerer rechter Hälfte auf breiten
+  // Screens).
   return (
     <form
       onSubmit={(e) => {
@@ -1364,8 +1444,8 @@ function DefaultForm({
       data-testid={testId}
       className="flex flex-col w-full"
     >
-      <div className="px-6 pt-6 pb-12 max-w-3xl w-full">
-        <div className="bg-card overflow-hidden rounded-xl border shadow-sm">
+      <FormScreenShell>
+        <div className={cn(cardSurface(), "overflow-hidden")}>
           {(title !== undefined || subtitle !== undefined) && (
             <div className="px-6 pb-2 pt-5">
               {title !== undefined && (
@@ -1402,18 +1482,62 @@ function DefaultForm({
           {actions !== undefined && (
             <div
               data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-              className="flex items-center justify-end gap-2 border-t bg-muted/30 px-6 py-4"
+              className={cn(cardFooter, cardFooterBorder)}
             >
               {actions}
             </div>
           )}
         </div>
-      </div>
+      </FormScreenShell>
     </form>
   );
 }
 
-function DefaultSection({ title, subtitle, children, actions, testId }: SectionProps): ReactNode {
+// Kanonische Form/Settings-Shell: zentrierte Spalte mit Standard-Screen-
+// Padding. DefaultForm (configEdit/entityEdit) UND custom Settings-Screens
+// (url-settings, privacy-center) teilen sie → einheitliche Breite +
+// Zentrierung statt per-Screen-Wildwuchs. Breite über `maxWidth`-Intent statt
+// beliebiger max-w-*-Overrides: sm=schmale Auth-Forms, 3xl=Standard-Detail,
+// 4xl=tabellen-nahe Forms, full=volle Breite. Inhalt nutzt Card-Primitives;
+// `className` (z.B. "flex flex-col gap-6") für Multi-Card-Stacks.
+export type FormScreenShellWidth = "sm" | "3xl" | "4xl" | "full";
+
+const formScreenShellWidth: Record<FormScreenShellWidth, string> = {
+  sm: "max-w-sm mx-auto",
+  "3xl": "max-w-3xl mx-auto",
+  "4xl": "max-w-4xl mx-auto",
+  full: "max-w-full",
+};
+
+export function FormScreenShell({
+  children,
+  className,
+  testId,
+  maxWidth = "3xl",
+}: {
+  readonly children: ReactNode;
+  readonly className?: string;
+  readonly testId?: string;
+  readonly maxWidth?: FormScreenShellWidth;
+}): ReactNode {
+  return (
+    <div
+      data-testid={testId}
+      className={cn("px-6 pt-6 pb-12 w-full", formScreenShellWidth[maxWidth], className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+function DefaultSection({
+  title,
+  subtitle,
+  children,
+  actions,
+  variant = "default",
+  testId,
+}: SectionProps): ReactNode {
   const insideForm = useContext(InsideFormContext);
 
   // h3 statt CardTitle (= div): erhält die Heading-Semantik für
@@ -1446,7 +1570,13 @@ function DefaultSection({ title, subtitle, children, actions, testId }: SectionP
   // actions hier = rechtsbündige Reihe (das Form trägt den eigenen Footer).
   if (insideForm) {
     return (
-      <section data-testid={testId} className="flex flex-col gap-4 px-6 py-6">
+      <section
+        data-testid={testId}
+        className={cn(
+          "flex flex-col gap-4 px-6 py-6",
+          variant === "destructive" && "border-l-2 border-destructive/40",
+        )}
+      >
         {header}
         {children}
         {actions !== undefined && (
@@ -1469,20 +1599,27 @@ function DefaultSection({ title, subtitle, children, actions, testId }: SectionP
   // `children`) WOULD get silently clipped — verify this against any new
   // standalone-section content that renders its own non-portaled overlay.
   return (
-    <Card data-testid={testId} className="gap-0 overflow-hidden rounded-lg py-0">
-      <CardContent className="flex flex-col gap-4 px-6 py-6">
+    <div
+      data-testid={testId}
+      className={cn(
+        cardSurface(),
+        "overflow-hidden",
+        variant === "destructive" && "border-destructive/40",
+      )}
+    >
+      <div className="flex flex-col gap-4 px-6 py-6">
         {header}
         {children}
-      </CardContent>
+      </div>
       {actions !== undefined && (
         <div
           data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-          className="flex items-center justify-end gap-2 border-t bg-muted/30 px-6 py-4"
+          className={cn(cardFooter, cardFooterBorder)}
         >
           {actions}
         </div>
       )}
-    </Card>
+    </div>
   );
 }
 
@@ -1532,11 +1669,54 @@ function DefaultText({ variant = "body", children, testId }: TextProps): ReactNo
           {children}
         </span>
       );
+    case "muted":
+      return (
+        <span data-testid={testId} className="text-sm text-muted-foreground">
+          {children}
+        </span>
+      );
     default:
       return <span data-testid={testId}>{children}</span>;
   }
 }
 
+// ---- Link (anchor mit Button-/Muted-Optik) ----
+
+// isSafeHref lives in @cosmicdrift/kumiko-headless — shared with
+// page-render's server-side markdown renderer, both take untrusted
+// tenant-authored hrefs.
+
+// `button` nutzt die Primary-Buttonfläche auf einem semantischen <a> —
+// der Standard für „weiter zu"-Navigationen nach Success-States (ehem.
+// authButtonClass), `muted` der dezente Sekundär-Link (ehem.
+// authMutedLinkClass).
+function DefaultLink({
+  href,
+  variant = "default",
+  target,
+  className,
+  children,
+  testId,
+}: LinkProps): ReactNode {
+  const variantClass =
+    variant === "button"
+      ? buttonVariants({ variant: "default" })
+      : variant === "muted"
+        ? "text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+        : "text-primary underline-offset-4 hover:underline";
+  return (
+    <a
+      href={isSafeHref(href) ? href : "#"}
+      target={target}
+      rel={target === "_blank" ? "noreferrer" : undefined}
+      data-testid={testId}
+      className={cn(variantClass, className)}
+    >
+      {children}
+    </a>
+  );
+}
+
 function DefaultHeading({ variant = "page", children, testId }: HeadingProps): ReactNode {
   // Page-Heading = h1, sehr selten in einer App (max 1 pro Screen).
   // Section-Heading = h2 mit uppercase + muted-foreground — derselbe
@@ -1564,14 +1744,14 @@ import { ConfigSourceBadge as DefaultConfigSourceBadge } from "../components/con
 
 // Generische Card-Chrome (rounded-xl wie die Entity-Card) — slot- + options-
 // basiert, damit der Contract additiv wächst und Consumer nie migriert werden.
-function DefaultCard({ slots, options, className, testId, children }: CardProps): ReactNode {
+export function DefaultCard({ slots, options, className, testId, children }: CardProps): ReactNode {
   const padded = options?.padded ?? true;
   const radius = options?.radius ?? "xl";
   const footerBordered = options?.footerBordered ?? true;
   const s = slots ?? {};
   const defaultHeader =
     s.title !== undefined || s.subtitle !== undefined || s.headerActions !== undefined ? (
-      <div className="flex flex-wrap items-start justify-between gap-3 px-6 pt-6 pb-4">
+      <div className="flex flex-wrap items-start justify-between gap-3 px-[var(--card-padding)] pt-6 pb-4">
         <div className="flex flex-col gap-1">
           {s.title !== undefined && (
             <h3 className="text-base font-semibold leading-none tracking-tight">{s.title}</h3>
@@ -1586,30 +1766,26 @@ function DefaultCard({ slots, options, className, testId, children }: CardProps)
   const header = s.header ?? defaultHeader;
   const hasHeader = header !== null && header !== undefined;
   return (
-    <div
-      data-testid={testId}
-      className={cn(
-        "flex flex-col overflow-hidden border bg-card text-card-foreground shadow-sm",
-        radius === "xl" ? "rounded-xl" : "rounded-lg",
-        className,
-      )}
-    >
+    <div data-testid={testId} className={cn(cardSurface({ radius }), "overflow-hidden", className)}>
       {header}
       {/* != null covers undefined AND explicit null; a `false` child (from
           `cond && <El/>`) still renders no visible content either way. */}
       {children != null && (
-        <div className={cn("grow", padded && (hasHeader ? "px-6 pb-6" : "p-6"))}>{children}</div>
-      )}
-      {s.footer !== undefined && (
         <div
           className={cn(
-            "flex items-center justify-end gap-2 px-6 py-4",
-            footerBordered && "border-t bg-muted/30",
+            "grow",
+            padded &&
+              (hasHeader
+                ? "px-[var(--card-padding)] pb-[var(--card-padding)]"
+                : "p-[var(--card-padding)]"),
           )}
         >
-          {s.footer}
+          {children}
         </div>
       )}
+      {s.footer !== undefined && (
+        <div className={cn(cardFooter, footerBordered && cardFooterBorder)}>{s.footer}</div>
+      )}
     </div>
   );
 }
@@ -1628,6 +1804,8 @@ export const defaultPrimitives: CorePrimitives = {
   Text: DefaultText,
   Heading: DefaultHeading,
   Dialog: DefaultDialog,
+  Lightbox: DefaultLightbox,
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,
+  Link: DefaultLink,
 };

package/src/primitives/layout.tsx

@@ -0,0 +1,39 @@
+// Layout-Primitives für Custom-Screens: ein Ort für vertikale Abstände und
+// Screen-Padding, damit Consumer nicht `flex flex-col gap-*` / `p-6` per Hand
+// streuen. Bewusst dünn — kein generisches Box-mit-20-props-System.
+
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+const STACK_GAP = { sm: "gap-2", md: "gap-4", lg: "gap-6" } as const;
+
+type StackGap = keyof typeof STACK_GAP;
+
+type StackProps = {
+  readonly gap?: StackGap;
+  readonly className?: string;
+  readonly children?: ReactNode;
+  readonly testId?: string;
+};
+
+export function Stack({ gap = "md", className, children, testId }: StackProps): ReactNode {
+  return (
+    <div data-testid={testId} className={cn("flex flex-col", STACK_GAP[gap], className)}>
+      {children}
+    </div>
+  );
+}
+
+type PageSectionProps = {
+  readonly className?: string;
+  readonly children?: ReactNode;
+  readonly testId?: string;
+};
+
+export function PageSection({ className, children, testId }: PageSectionProps): ReactNode {
+  return (
+    <div data-testid={testId} className={cn("p-6", className)}>
+      {children}
+    </div>
+  );
+}

package/src/primitives/lightbox.tsx

@@ -0,0 +1,39 @@
+// Full-size image overlay — ModalShell without confirm/cancel actions.
+
+import type { LightboxProps } from "@cosmicdrift/kumiko-renderer";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { ModalShell } from "./modal-shell";
+
+export function DefaultLightbox({
+  open,
+  onOpenChange,
+  src,
+  alt,
+  testId,
+}: LightboxProps): ReactNode {
+  const t = useTranslation();
+
+  return (
+    <ModalShell
+      open={open}
+      onOpenChange={onOpenChange}
+      testId={testId}
+      closeLabel={t("kumiko.dialog.close")}
+      noAriaDescription
+      contentClassName={cn(
+        "border-0 bg-transparent p-0 shadow-none",
+        "max-w-[95vw] max-h-[90vh] w-auto",
+      )}
+    >
+      <DialogPrimitive.Title className="sr-only">{alt}</DialogPrimitive.Title>
+      <img
+        src={src}
+        alt={alt}
+        className="block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg"
+      />
+    </ModalShell>
+  );
+}

package/src/primitives/modal-shell.tsx

@@ -0,0 +1,62 @@
+// Shared Radix dialog chrome for confirm Dialog + image Lightbox.
+// Not exported from the package — only an internal building block.
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type ModalShellProps = {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly children: ReactNode;
+  readonly testId?: string;
+  readonly contentClassName?: string;
+  /** Radix wants aria-describedby={undefined} when there is no Description. */
+  readonly noAriaDescription?: boolean;
+  readonly closeLabel?: string;
+  readonly showCloseButton?: boolean;
+};
+
+export function ModalShell({
+  open,
+  onOpenChange,
+  children,
+  testId,
+  contentClassName,
+  noAriaDescription,
+  closeLabel,
+  showCloseButton = true,
+}: ModalShellProps): ReactNode {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          data-testid={testId}
+          {...(noAriaDescription && { "aria-describedby": undefined })}
+          className={cn(
+            "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+            contentClassName,
+          )}
+        >
+          {children}
+          {showCloseButton && closeLabel !== undefined && (
+            <DialogPrimitive.Close asChild>
+              <button
+                type="button"
+                aria-label={closeLabel}
+                className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+              >
+                <X className="size-4" />
+              </button>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}

package/src/primitives/money-input.tsx

@@ -64,16 +64,7 @@ export function MoneyInput({
   const [draft, setDraft] = useState<string>("");
 
   const major = value === "" ? null : value / factor;
-
-  const formatted =
-    major === null
-      ? ""
-      : new Intl.NumberFormat(resolvedLocale, {
-          style: "currency",
-          currency,
-          minimumFractionDigits: decimals,
-          maximumFractionDigits: decimals,
-        }).format(major);
+  const formatted = value === "" ? "" : formatMoney(value, currency, resolvedLocale);
 
   // Edit-Mode: Decimal-String ohne Tausender-Trenner. Konsistente Helper-
   // Funktion damit Focus-Init und Render-Fallback nicht auseinanderdriften.
@@ -170,6 +161,25 @@ function guessLocale(): string {
   return "en-US";
 }
 
+// Shared with defaultCellRender (index.tsx) so both formatting paths stay
+// identical instead of drifting. currency is validated against the
+// 3-letter-alpha shape Intl.NumberFormat requires — a non-conforming
+// value (e.g. from a JSONB custom field that never ran through
+// rehydrateMoney) throws a RangeError inside Intl.NumberFormat, and with
+// no ErrorBoundary in this render tree that would take down the whole
+// page instead of just this cell.
+export function formatMoney(amountMinor: number, currency: string, locale?: string): string {
+  if (!/^[A-Za-z]{3}$/.test(currency)) return String(amountMinor);
+  const decimals = currencyDecimals(currency);
+  const resolvedLocale = locale ?? guessLocale();
+  return new Intl.NumberFormat(resolvedLocale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(amountMinor / 10 ** decimals);
+}
+
 // Locale-Decimal-Parse: erkennt automatisch ob Komma oder Punkt der
 // Decimal-Separator ist. Intl.NumberFormat liefert die Trenner für
 // das Locale, daraus bauen wir den Reverse-Parser. Strict beim