@cosmicdrift/kumiko-renderer-web 0.193.1 → 0.194.0

package/src/primitives/embedded-list-input.tsx

@@ -11,6 +11,12 @@
 // viewport, so the `hidden md:block` / `md:hidden` classes stay on the
 // wrapper divs too: on a phone that first (wrong) render is desktop but
 // CSS-hidden, not a visible flash of the wrong layout.
+//
+// ponytail: crossing the mobile/desktop breakpoint unmounts the active
+// layout and mounts the other, so an in-progress cell draft (uncommitted
+// MoneyInput text, IME composition) and focus are lost — accepted trade-off
+// for the single-mount-per-side fix above. Upgrade: lift per-cell draft
+// state into a `draftsByCellId` map here that survives the layout swap.
 
 import type { FieldIssue } from "@cosmicdrift/kumiko-headless";
 import type {
@@ -19,7 +25,7 @@ import type {
   EmbeddedListInputProps,
   EmbeddedListTotal,
 } from "@cosmicdrift/kumiko-renderer";
-import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { useLocale, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { ArrowDown, ArrowUp, Copy, Plus, Trash2 } from "lucide-react";
 import {
   type ClipboardEvent,
@@ -94,10 +100,11 @@ function formatTotalValue(
   total: EmbeddedListTotal,
   columns: readonly EmbeddedListColumn[],
   currency: string,
+  locale: string,
 ): string {
   const column = columns.find((c) => c.field === total.field);
-  if (column?.type === "money") return formatMoney(total.value, currency);
-  return total.value.toLocaleString();
+  if (column?.type === "money") return formatMoney(total.value, currency, locale);
+  return total.value.toLocaleString(locale);
 }
 
 // Tab/newline-delimited clipboard text → 2D string grid. Not a regex
@@ -375,6 +382,7 @@ export function EmbeddedListInput({
   // callers/tests that predate #1839) keep getting the same "EUR" this
   // component always hardcoded.
   const effectiveCurrency = currency ?? "EUR";
+  const resolvedLocale = useLocale().locale();
   const isMobile = useIsMobile();
   const containerRef = useRef<HTMLDivElement>(null);
   const [pendingFocusCellId, setPendingFocusCellId] = useState<string | undefined>(undefined);
@@ -419,6 +427,7 @@ export function EmbeddedListInput({
   const handlePaste = (rowIndex: number, columnIndex: number) => {
     return (event: ClipboardEvent<HTMLElement>): void => {
       if (onPasteCells === undefined) return;
+      if (disabled === true) return;
       const text = event.clipboardData?.getData("text") ?? "";
       const grid = parsePasteGrid(text);
       const isMultiCell = grid.length > 1 || (grid[0]?.length ?? 0) > 1;
@@ -596,7 +605,7 @@ export function EmbeddedListInput({
                   <div key={total.field} className="flex items-baseline gap-2">
                     <span className="text-muted-foreground">{total.label}</span>
                     <span className="font-medium tabular-nums">
-                      {formatTotalValue(total, columns, effectiveCurrency)}
+                      {formatTotalValue(total, columns, effectiveCurrency, resolvedLocale)}
                     </span>
                   </div>
                 ))}
@@ -699,7 +708,7 @@ export function EmbeddedListInput({
                 <div key={total.field} className="flex items-center justify-between">
                   <span className="text-muted-foreground">{total.label}</span>
                   <span className="font-medium tabular-nums">
-                    {formatTotalValue(total, columns, effectiveCurrency)}
+                    {formatTotalValue(total, columns, effectiveCurrency, resolvedLocale)}
                   </span>
                 </div>
               ))}

package/src/primitives/file-upload.tsx

@@ -19,6 +19,7 @@ export type FileUploadInputProps = {
   readonly entityType?: string;
   readonly fieldName?: string;
   readonly imageVariant?: string;
+  readonly capture?: "environment" | "user";
 };
 
 // "jpg" → ".jpg", "image/png" bleibt. Leere Liste → kein accept-Attribut.
@@ -37,6 +38,7 @@ export function FileUploadInput({
   entityType,
   fieldName,
   imageVariant,
+  capture,
 }: FileUploadInputProps): ReactNode {
   const inputRef = useRef<HTMLInputElement>(null);
   const [uploading, setUploading] = useState(false);
@@ -105,6 +107,7 @@ export function FileUploadInput({
         type="file"
         className="hidden"
         {...(acceptAttr !== undefined && { accept: acceptAttr })}
+        {...(capture !== undefined && { capture })}
         onChange={(e) => void onPick(e)}
         disabled={disabled}
       />

package/src/primitives/index.tsx

@@ -37,6 +37,7 @@ import {
   type TextProps,
   useColumnRenderer,
   useTranslation,
+  type WizardStepGroupProps,
   WriteFailedError,
 } from "@cosmicdrift/kumiko-renderer";
 import { cva } from "class-variance-authority";
@@ -188,11 +189,16 @@ function DefaultBanner({
   id,
 }: BannerProps): ReactNode {
   const isError = variant === "error";
+  // `id` is set when a <Field> wraps this Banner as its control (see
+  // BannerProps.id). A <div> isn't labelable, so a <label htmlFor> pointing
+  // at it is inert for screen readers — role="group" + aria-labelledby is
+  // the actual mechanism, pointed at the label id Field emits (fieldLabelId).
+  const bannerRole = id !== undefined ? "group" : isError ? "alert" : undefined;
   const banner = (
     <div
-      id={id}
+      role={bannerRole}
+      {...(id !== undefined && { "aria-labelledby": fieldLabelId(id) })}
       data-testid={testId}
-      role={isError ? "alert" : undefined}
       data-variant={variant}
       className={cn(
         "relative w-full rounded-lg border px-4 py-3 text-sm flex items-center gap-3",
@@ -213,6 +219,13 @@ function DefaultBanner({
 
 // ---- Field (Label + Error) ----
 
+// Matches DefaultBanner's aria-labelledby target: a non-labelable control
+// (e.g. Banner's <div>) can't take a real htmlFor, so Field always also
+// gives its label a stable id that such controls can point to.
+function fieldLabelId(id: string): string {
+  return `${id}-label`;
+}
+
 function DefaultField({
   id,
   label,
@@ -229,6 +242,7 @@ function DefaultField({
   const hasError = issues !== undefined && issues.length > 0;
   const labelEl = (
     <UiLabel
+      id={fieldLabelId(id)}
       htmlFor={id}
       className={cn(
         hasError ? "text-destructive" : "text-foreground",
@@ -236,7 +250,11 @@ function DefaultField({
       )}
     >
       {label}
-      {required === true && <span className="ml-0.5 text-destructive">*</span>}
+      {required === true && (
+        <span data-required className="ml-0.5 text-destructive">
+          *
+        </span>
+      )}
     </UiLabel>
   );
   const errorsEl = hasError ? (
@@ -435,6 +453,7 @@ function DefaultInput(props: InputProps): ReactNode {
           {...(props.entityType !== undefined && { entityType: props.entityType })}
           {...(props.fieldName !== undefined && { fieldName: props.fieldName })}
           {...(props.imageVariant !== undefined && { imageVariant: props.imageVariant })}
+          {...(props.capture !== undefined && { capture: props.capture })}
         />
       );
     case "date":
@@ -554,6 +573,7 @@ function DefaultInput(props: InputProps): ReactNode {
       return (
         <Textarea
           {...common}
+          readOnly={props.readOnly}
           value={props.value}
           onChange={(e: ChangeEvent<HTMLTextAreaElement>) => props.onChange(e.target.value)}
           rows={props.rows ?? 4}
@@ -650,6 +670,7 @@ function DefaultDataTable({
   // beide visuell zusammengehören. Toolbar ist NICHT sticky — Lists
   // scrollen typischerweise mit dem Page-Container, nicht intern.
   // Sticky würde mit der Topbar konkurrieren.
+  const hasTableActions = rowActions !== undefined && rowActions.length > 0;
   const tableContent =
     rows.length === 0 ? (
       <div
@@ -665,18 +686,86 @@ function DefaultDataTable({
       // 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,
-            onCellChange,
-            getRowTestId,
-            getCellTestId,
-          )}
+          <TableHeader className="bg-muted">
+            <TableRow className="hover:bg-transparent">
+              {columns.map((col) => (
+                <SortableHeader
+                  key={col.field}
+                  field={col.field}
+                  label={col.label}
+                  sortable={col.sortable === true}
+                  highlighted={col.highlighted === true}
+                  {...(sort !== undefined && sort !== null && { sort })}
+                  {...(onSortChange !== undefined && { onSortChange })}
+                />
+              ))}
+              {hasTableActions && (
+                <TableHead
+                  data-testid="column-actions"
+                  // sticky right-0 + bg-muted (= header tone) so the action
+                  // column stays at the right edge during horizontal scroll.
+                  // No border-l: a permanent divider looks heavy; the sticky
+                  // bg already sets the column apart during scroll anyway.
+                  className="sticky right-0 z-10 w-px bg-muted text-right text-muted-foreground"
+                  aria-label="Actions"
+                />
+              )}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-testid={getRowTestId?.(row) ?? `row-${row.id}`}
+                onClick={onRowClick !== undefined ? () => onRowClick(row) : undefined}
+                className={cn(onRowClick !== undefined && "cursor-pointer")}
+              >
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.field}
+                    data-testid={getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`}
+                    data-highlighted={col.highlighted === true ? "true" : undefined}
+                    // Cells truncate long values with ellipsis instead of
+                    // wrapping — lists stay single-line + scannable (Linear
+                    // pattern). max-w-xs gives a sensible default upper
+                    // bound; the table container scrolls horizontally
+                    // if the sum of the columns gets too wide.
+                    className={cn("max-w-xs truncate", col.highlighted === true && "bg-accent/40")}
+                    title={cellTitle(row.values[col.field])}
+                  >
+                    <DataTableCell
+                      value={row.values[col.field]}
+                      row={row.values}
+                      field={col.field}
+                      type={col.type}
+                      renderer={col.renderer}
+                      {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
+                      {...(onCellChange !== undefined && {
+                        onChange: (value: unknown) => onCellChange(row.id, col.field, value),
+                      })}
+                    />
+                  </TableCell>
+                ))}
+                {hasTableActions && (
+                  <TableCell
+                    data-testid={getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`}
+                    // Sticky-right so the actions stay visible on the right
+                    // edge during horizontal scroll. bg-background sets the
+                    // column apart during scroll — no border-l (divider too heavy).
+                    className="sticky right-0 z-10 bg-background text-right"
+                    // Action-cell events must not trigger the row click/activation
+                    // (typically "Open Detail" — the user wanted the action,
+                    // not navigation). We stopPropagation for mouse and
+                    // keyboard so a11y stays consistent.
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  >
+                    <RowActionsCell row={row} actions={rowActions} mode={rowActionMode} />
+                  </TableCell>
+                )}
+              </TableRow>
+            ))}
+          </TableBody>
         </Table>
       </div>
     );
@@ -767,105 +856,6 @@ function DefaultDataTable({
   );
 }
 
-function tableInner(
-  columns: DataTableProps["columns"],
-  rows: DataTableProps["rows"],
-  onRowClick?: DataTableProps["onRowClick"],
-  sort?: DataTableProps["sort"],
-  onSortChange?: DataTableProps["onSortChange"],
-  rowActions?: DataTableProps["rowActions"],
-  rowActionMode?: DataTableProps["rowActionMode"],
-  onCellChange?: DataTableProps["onCellChange"],
-  getRowTestId?: DataTableProps["getRowTestId"],
-  getCellTestId?: DataTableProps["getCellTestId"],
-): ReactNode {
-  const hasActions = rowActions !== undefined && rowActions.length > 0;
-  return (
-    <>
-      <TableHeader className="bg-muted">
-        <TableRow className="hover:bg-transparent">
-          {columns.map((col) => (
-            <SortableHeader
-              key={col.field}
-              field={col.field}
-              label={col.label}
-              sortable={col.sortable === true}
-              highlighted={col.highlighted === true}
-              {...(sort !== undefined && sort !== null && { sort })}
-              {...(onSortChange !== undefined && { onSortChange })}
-            />
-          ))}
-          {hasActions && (
-            <TableHead
-              data-testid="column-actions"
-              // sticky right-0 + bg-muted (= Header-Ton) damit die Action-
-              // Spalte beim horizontalen Scroll am rechten Rand bleibt. Kein
-              // border-l: der ständige Trenner wirkt schwer; die sticky-bg
-              // grenzt die Spalte beim Scroll ohnehin ab.
-              className="sticky right-0 z-10 w-px bg-muted text-right text-muted-foreground"
-              aria-label="Actions"
-            />
-          )}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {rows.map((row) => (
-          <TableRow
-            key={row.id}
-            data-testid={getRowTestId?.(row) ?? `row-${row.id}`}
-            onClick={onRowClick !== undefined ? () => onRowClick(row) : undefined}
-            className={cn(onRowClick !== undefined && "cursor-pointer")}
-          >
-            {columns.map((col) => (
-              <TableCell
-                key={col.field}
-                data-testid={getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`}
-                data-highlighted={col.highlighted === true ? "true" : undefined}
-                // Cells truncaten lange Werte mit ellipsis statt umzu-
-                // brechen — Lists bleiben einzeilig + scannbar (Linear-
-                // Pattern). max-w-xs gibt eine vernünftige Default-
-                // Obergrenze; der Table-Container scrollt horizontal
-                // falls die Summe der Spalten zu breit wird.
-                className={cn("max-w-xs truncate", col.highlighted === true && "bg-accent/40")}
-                title={cellTitle(row.values[col.field])}
-              >
-                <DataTableCell
-                  value={row.values[col.field]}
-                  row={row.values}
-                  field={col.field}
-                  type={col.type}
-                  renderer={col.renderer}
-                  {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
-                  {...(onCellChange !== undefined && {
-                    onChange: (value: unknown) => onCellChange(row.id, col.field, value),
-                  })}
-                />
-              </TableCell>
-            ))}
-            {hasActions && (
-              <TableCell
-                data-testid={`cell-${row.id}-actions`}
-                // Sticky-right damit beim horizontalen Scroll die Actions
-                // am rechten Rand sichtbar bleiben. bg-background grenzt die
-                // Spalte beim Scroll ab — kein border-l (Trenner zu schwer).
-                className="sticky right-0 z-10 bg-background text-right"
-                // Action-Cell-Events dürfen nicht den Row-Click/Activation
-                // triggern (typisch "Open Detail" — der User wollte ja die
-                // Action, nicht navigieren). Wir stopPropagation für Mouse
-                // UND Keyboard, damit a11y konsistent ist.
-                onClick={(e) => e.stopPropagation()}
-                onKeyDown={(e) => e.stopPropagation()}
-              >
-                <RowActionsCell row={row} actions={rowActions} mode={rowActionMode} />
-              </TableCell>
-            )}
-          </TableRow>
-        ))}
-      </TableBody>
-    </>
-  );
-}
-
 // RowActionsCell — rendert die Row-Actions je nach mode:
 //   - "adaptive" (Default): ≤2 sichtbare Actions inline (rechtsbündig),
 //     >2 als Kebab-Dropdown.
@@ -1666,7 +1656,7 @@ function DefaultForm({
                 // `overflow-hidden` (only transform/filter/contain ancestors trap
                 // it, confirmed against AppLayout/SidebarInset — neither sets those).
                 stickyActions === true &&
-                  "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-[max(1rem,env(safe-area-inset-bottom))]",
+                  "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)] max-sm:pb-4",
               )}
             >
               {actions}
@@ -1722,7 +1712,6 @@ function DefaultSection({
   actions,
   variant = "default",
   testId,
-  hidden,
 }: SectionProps): ReactNode {
   const insideForm = useContext(InsideFormContext);
 
@@ -1758,11 +1747,9 @@ function DefaultSection({
     return (
       <section
         data-testid={testId}
-        hidden={hidden}
         className={cn(
           "flex flex-col gap-4 px-6 py-6",
           variant === "destructive" && "border-l-2 border-destructive/40",
-          hidden && "hidden",
         )}
       >
         {header}
@@ -1789,12 +1776,10 @@ function DefaultSection({
   return (
     <div
       data-testid={testId}
-      hidden={hidden}
       className={cn(
         cardSurface(),
         "overflow-hidden",
         variant === "destructive" && "border-destructive/40",
-        hidden && "hidden",
       )}
     >
       <div className="flex flex-col gap-4 px-6 py-6">
@@ -1929,6 +1914,14 @@ function DefaultStepBar({
   );
 }
 
+function DefaultWizardStepGroup({ hidden, children }: WizardStepGroupProps): ReactNode {
+  return (
+    <fieldset disabled={hidden} hidden={hidden} className={hidden ? undefined : "contents"}>
+      {children}
+    </fieldset>
+  );
+}
+
 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
@@ -2024,4 +2017,5 @@ export const defaultPrimitives: CorePrimitives = {
   Link: DefaultLink,
   Progress: DefaultProgress,
   StepBar: DefaultStepBar,
+  WizardStepGroup: DefaultWizardStepGroup,
 };

package/src/primitives/money-input.tsx

@@ -16,7 +16,7 @@
 
 import { currencyDecimals } from "@cosmicdrift/kumiko-headless";
 import { Minus, Plus } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 
 // Re-exported for backward compat — callers used to import this from here
@@ -72,8 +72,7 @@ export function MoneyInput({
   const major = value === "" ? null : value / factor;
   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.
+  // Edit-Mode: Decimal-String ohne Tausender-Trenner.
   const toEditable = (m: number | null): string =>
     m === null
       ? ""
@@ -83,8 +82,6 @@ export function MoneyInput({
           useGrouping: false,
         });
 
-  const editable = focused ? draft : toEditable(major);
-
   const handleFocus = (): void => {
     setDraft(toEditable(major));
     setFocused(true);
@@ -102,7 +99,7 @@ export function MoneyInput({
   // click position from the formatted view to the editable one, which has
   // no well-defined equivalent once separators and the currency symbol
   // are stripped.
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (focused) inputRef.current?.select();
   }, [focused]);
 
@@ -134,7 +131,7 @@ export function MoneyInput({
         disabled={disabled}
         aria-required={required}
         aria-invalid={hasError === true ? true : undefined}
-        value={focused ? editable : formatted}
+        value={focused ? draft : formatted}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onChange={(e) => setDraft(e.target.value)}

package/src/ui/sheet.tsx

@@ -48,6 +48,7 @@ function SheetOverlay({
 function SheetContent({
   className,
   overlayClassName,
+  overlayStyle,
   children,
   side = "right",
   showCloseButton = true,
@@ -56,10 +57,11 @@ function SheetContent({
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
   overlayClassName?: string
+  overlayStyle?: React.CSSProperties
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay className={overlayClassName} />
+      <SheetOverlay className={overlayClassName} style={overlayStyle} />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(