@cosmicdrift/kumiko-renderer-web 0.1.0

package/src/primitives/combobox.tsx

@@ -0,0 +1,261 @@
+// Tier 2.1c: Searchable Select / Combobox.
+//
+// Pattern ist das shadcn-Standard-Combobox: Popover-Trigger als Button
+// (zeigt aktuellen Wert oder Placeholder), Popover-Content enthält
+// cmdk-Command mit Search-Input + filterable Item-List.
+//
+// cmdk ist Radix's Standard-Combobox (Library für Command-K + Searchable
+// Selects), client-side Fuzzy-Match via `Command.Filter` mit Default-
+// Behavior. Server-side Remote-Search (debounced query) ist nicht im
+// MVP — kommt später als zweiter Mode-Schalter.
+//
+// Multi-Mode: `multiple: true` schaltet auf Tag-Anzeige + Mehrfach-
+// Auswahl. Selected-Tags rendern als kleine entfernbare Chips, das
+// Search-Input bleibt offen für weitere Auswahl.
+
+import { REFERENCE_SEARCH_DEBOUNCE_MS, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Command } from "cmdk";
+import { Check, ChevronDown, Loader2 } from "lucide-react";
+import { type ReactNode, useEffect, useState } from "react";
+import { cn } from "../lib/cn";
+
+export type ComboboxOption = { readonly value: string; readonly label: string };
+
+// Discriminated Union per `multiple`-Flag — Single-Mode hat string-
+// value/onChange, Multi-Mode hat string[]/string[]. Caller muss den
+// Mode beim Build entscheiden, der Compiler zwingt dann die richtige
+// Signature ohne Runtime-narrow.
+type ComboboxBaseProps = {
+  readonly id: string;
+  readonly name: string;
+  readonly options: readonly ComboboxOption[];
+  readonly disabled?: boolean;
+  readonly required?: boolean;
+  readonly hasError?: boolean;
+  readonly placeholder?: string;
+  readonly searchPlaceholder?: string;
+  readonly emptyText?: string;
+  /** Tier 2.7e Remote-Search: wenn gesetzt, wechselt der Combobox in
+   *  Remote-Mode. cmdk's client-side Filter wird deaktiviert (Server
+   *  hat schon gefiltert), und der Search-Input ruft onSearchChange
+   *  debounced (300ms). Ohne diesen Callback bleibt die Local-Filter-
+   *  Variante (cmdk fuzzy-match auf den geladenen options). */
+  readonly onSearchChange?: (q: string) => void;
+  /** Spinner im Trigger + Popover-Footer wenn remote search läuft. */
+  readonly loading?: boolean;
+  /** Test-Hook: forciert den initial open-state des Popovers. In
+   *  jsdom + Radix-Popover triggert userEvent.click auf den Trigger
+   *  nicht zuverlässig PointerEvents — Tests setzen defaultOpen=true,
+   *  damit der Popover sofort gerendert ist. Production-Code lässt
+   *  den Default (false). */
+  readonly defaultOpen?: boolean;
+};
+
+export type ComboboxInputProps = ComboboxBaseProps &
+  (
+    | {
+        readonly multiple?: false;
+        readonly value: string;
+        readonly onChange: (v: string) => void;
+      }
+    | {
+        readonly multiple: true;
+        readonly value: readonly string[];
+        readonly onChange: (v: readonly string[]) => void;
+      }
+  );
+
+const triggerClass =
+  "flex h-9 w-full items-center justify-between rounded-md border border-input " +
+  "bg-transparent px-3 py-1 text-sm shadow-sm transition-colors " +
+  "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 " +
+  "focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+
+const popoverContentClass =
+  "z-50 w-[var(--radix-popover-trigger-width)] rounded-md border bg-popover " +
+  "p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in " +
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
+  "data-[state=open]:fade-in-0";
+
+const tagClass =
+  "inline-flex items-center gap-1 rounded-sm bg-muted px-2 py-0.5 text-xs " +
+  "font-medium text-muted-foreground";
+
+// Debounce-Default lebt zentral (hooks/reference-limits.ts) damit
+// app-weit ein consistentes Tipp-Window gilt.
+
+// Substring-Filter für cmdk's Local-Mode. cmdk's Default ist
+// `command-score` (fuzzy), das matcht "Ad" auch gegen "Backend" weil 'a'
+// und 'd' irgendwo enthalten sind — für Reference-Lookups irreführend
+// (User erwartet Prefix/Substring-Verhalten, nicht Subsequence-Match).
+// Returns 1 wenn search im value enthalten, 0 sonst — cmdk hidet Items
+// mit Score 0.
+function substringFilter(value: string, search: string): number {
+  return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
+}
+
+export function ComboboxInput(props: ComboboxInputProps): ReactNode {
+  const {
+    id,
+    name,
+    options,
+    disabled,
+    required,
+    hasError,
+    placeholder,
+    searchPlaceholder,
+    emptyText,
+    onSearchChange,
+    loading,
+    defaultOpen,
+  } = props;
+  // i18n-Defaults aus dem Framework-Bundle (kumikoDefaultTranslations).
+  // Caller-Override gewinnt; Bundle-Override greift wenn der Caller
+  // den Prop nicht setzt; raw-Key-Fallback wenn weder noch.
+  const t = useTranslation();
+  const effectivePlaceholder = placeholder ?? t("kumiko.combobox.placeholder");
+  const effectiveSearchPlaceholder = searchPlaceholder ?? t("kumiko.combobox.search-placeholder");
+  const effectiveEmptyText = emptyText ?? t("kumiko.combobox.empty");
+  const loadingText = t("kumiko.combobox.loading");
+  const multiple = props.multiple === true;
+  const [open, setOpen] = useState(defaultOpen === true);
+  // Local Search-Buffer für Remote-Mode. Tipps werden mit 300ms
+  // Debounce an onSearchChange weitergereicht, damit pro Tastendruck
+  // nicht ein Server-Roundtrip fliegt. Im Local-Mode ist das State
+  // ungenutzt (cmdk steuert sein Search-Input intern).
+  const [searchTerm, setSearchTerm] = useState("");
+  const isRemote = onSearchChange !== undefined;
+  useEffect(() => {
+    if (!isRemote) return;
+    const timer = setTimeout(() => onSearchChange(searchTerm), REFERENCE_SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [isRemote, searchTerm, onSearchChange]);
+  // Beim Schließen des Popovers den Suchbegriff zurücksetzen damit
+  // beim nächsten Öffnen nicht der vorherige term hängt. Würde sonst
+  // den Server-State stale halten zwischen Aufrufen.
+  useEffect(() => {
+    if (!open && searchTerm !== "") setSearchTerm("");
+  }, [open, searchTerm]);
+  // Discriminated-Union per `multiple`: TS narrowt props.value/onChange
+  // automatisch — Runtime-Cast entfällt.
+  const selectedValues = multiple ? new Set(props.value) : new Set<string>();
+  const singleValue = !multiple ? props.value : "";
+  const singleLabel = options.find((o) => o.value === singleValue)?.label ?? "";
+
+  const toggleMulti = (v: string): void => {
+    if (!multiple) return;
+    const current = [...props.value];
+    const idx = current.indexOf(v);
+    if (idx >= 0) current.splice(idx, 1);
+    else current.push(v);
+    props.onChange(current);
+  };
+
+  const triggerLabel = multiple ? null : singleLabel === "" ? placeholder : singleLabel;
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <input type="hidden" name={name} value={multiple ? props.value.join(",") : props.value} />
+      <PopoverPrimitive.Trigger
+        id={id}
+        data-testid={`combobox-${id}`}
+        type="button"
+        disabled={disabled}
+        aria-required={required}
+        aria-invalid={hasError === true ? true : undefined}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={cn(
+          triggerClass,
+          hasError === true && "border-destructive focus-visible:ring-destructive",
+        )}
+      >
+        {multiple ? (
+          <span className="flex flex-wrap items-center gap-1">
+            {selectedValues.size === 0 ? (
+              <span className="text-muted-foreground">{effectivePlaceholder}</span>
+            ) : (
+              // Tags sind read-only Anzeige (kein nested <button>
+              // möglich im Trigger-<button>). Entfernen via Re-Click
+              // im Combobox-Popup — der Item-Toggle deselektiert die
+              // entsprechende Option (analog shadcn-Standard-Combobox).
+              [...selectedValues].map((v) => {
+                const opt = options.find((o) => o.value === v);
+                return (
+                  <span key={v} className={tagClass}>
+                    {opt?.label ?? v}
+                  </span>
+                );
+              })
+            )}
+          </span>
+        ) : (
+          <span className={singleLabel === "" ? "text-muted-foreground" : ""}>{triggerLabel}</span>
+        )}
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content className={popoverContentClass} align="start" sideOffset={4}>
+          <Command shouldFilter={!isRemote} filter={substringFilter}>
+            <div className="relative">
+              <Command.Input
+                placeholder={effectiveSearchPlaceholder}
+                value={isRemote ? searchTerm : undefined}
+                onValueChange={isRemote ? setSearchTerm : undefined}
+                className="flex h-9 w-full border-0 border-b border-border bg-transparent px-3 py-1 text-sm outline-none placeholder:text-muted-foreground"
+              />
+              {loading === true && (
+                <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
+              )}
+            </div>
+            <Command.List className="max-h-64 overflow-y-auto p-1">
+              <Command.Empty className="py-3 text-center text-sm text-muted-foreground">
+                {loading === true ? loadingText : effectiveEmptyText}
+              </Command.Empty>
+              {options.map((opt) => {
+                const isSelected = multiple
+                  ? selectedValues.has(opt.value)
+                  : opt.value === singleValue;
+                return (
+                  <Command.Item
+                    key={opt.value}
+                    value={opt.label}
+                    onSelect={() => {
+                      if (props.multiple === true) {
+                        toggleMulti(opt.value);
+                      } else {
+                        props.onChange(opt.value);
+                        setOpen(false);
+                      }
+                    }}
+                    // Browser-Click-Bug-Fix: Item-className enthielt vorher
+                    // `data-[disabled]:pointer-events-none`. Im Showcase
+                    // (mit Tailwind-CSS aktiv) waren Mouse-Clicks lautlos
+                    // tot — Keyboard-Select via Pfeiltasten funktionierte.
+                    // jsdom-Tests grün, weil dort kein Tailwind-CSS greift.
+                    // Genauer Trigger-Mechanismus (welches state setzt
+                    // `data-disabled` auf das Item?) wurde nicht weiter
+                    // untersucht — Class-Removal war ausreichend, um den
+                    // Click zu reaktivieren. Defensiv: keine pointer-events-
+                    // Schalter-Klassen mehr auf dem Item, sodass auch ein
+                    // zukünftig wieder gesetztes `data-disabled` keinen
+                    // stillen Click-Verlust mehr produzieren kann.
+                    className="relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground"
+                  >
+                    {isSelected && (
+                      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                        <Check className="h-4 w-4" />
+                      </span>
+                    )}
+                    <span>{opt.label}</span>
+                  </Command.Item>
+                );
+              })}
+            </Command.List>
+          </Command>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}

package/src/primitives/date-input.tsx

@@ -0,0 +1,165 @@
+// DateInput — Radix-Popover + react-day-picker. Trigger ist ein
+// Button im Input-Style der das formatierte Datum zeigt; Popover
+// öffnet eine Calendar-Sheet zur Auswahl. Underlying-Wert bleibt
+// ISO `yyyy-mm-dd` damit Server-/Wire-Serialisierung unverändert
+// funktioniert.
+//
+// Warum nicht type=date: Native date-Inputs sehen je nach Browser/OS
+// völlig anders aus, der Picker-Overlay ist nicht stylebar, und der
+// Format-Match ist Locale-spezifisch außerhalb unserer Kontrolle.
+// Mit Popover + Calendar haben wir konsistentes Linear-Look-and-Feel.
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../lib/cn";
+
+export type DateInputProps = {
+  readonly id: string;
+  readonly name: string;
+  readonly value: string;
+  readonly onChange: (v: string | undefined) => void;
+  readonly disabled?: boolean;
+  readonly required?: boolean;
+  readonly hasError?: boolean;
+  readonly locale?: string;
+};
+
+const triggerClass =
+  "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent " +
+  "px-3 py-1 text-sm shadow-sm transition-colors text-left " +
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
+  "disabled:cursor-not-allowed disabled:opacity-50";
+
+const popoverClass =
+  "z-50 rounded-md border bg-popover p-3 text-popover-foreground shadow-md " +
+  "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";
+
+export function DateInput({
+  id,
+  name,
+  value,
+  onChange,
+  disabled,
+  required,
+  hasError,
+  locale,
+}: DateInputProps): ReactNode {
+  const [open, setOpen] = useState(false);
+  const resolvedLocale = locale ?? guessLocale();
+  const selected = parseIso(value);
+
+  const display =
+    selected !== undefined
+      ? selected.toLocaleDateString(resolvedLocale, {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        })
+      : "";
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          id={id}
+          name={name}
+          disabled={disabled}
+          // aria-required wird auf <button> nicht unterstützt — stattdessen
+          // markiert <Field>-Label das Required mit "*" für Sehende und
+          // gibt den Status über aria-invalid (bei Fehler) durch.
+          data-required={required === true ? "true" : undefined}
+          aria-invalid={hasError === true ? true : undefined}
+          className={cn(
+            triggerClass,
+            hasError === true && "border-destructive focus-visible:ring-destructive",
+          )}
+        >
+          <span className={cn(display === "" && "text-muted-foreground")}>
+            {display === "" ? "—" : display}
+          </span>
+          <CalendarIcon className="size-4 text-muted-foreground" aria-hidden="true" />
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content className={popoverClass} align="start" sideOffset={4}>
+          <DayPicker
+            mode="single"
+            selected={selected}
+            // Ohne defaultMonth zeigt DayPicker today statt selected —
+            // unintuitiv wenn der User schon ein Datum gewählt hat und
+            // den Calendar nochmal öffnet.
+            defaultMonth={selected}
+            onSelect={(d) => {
+              onChange(d !== undefined ? toIso(d) : undefined);
+              setOpen(false);
+            }}
+            classNames={dayPickerClasses}
+          />
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}
+
+// classNames-Map für react-day-picker v9 — überschreibt die default-
+// Klassen mit Tailwind/shadcn-Tokens. Nur die wichtigsten Slots; der
+// Rest erbt die rdp-Default-Styles. Padding/Größen sind klein gehalten
+// damit der Popover nicht das halbe Viewport einnimmt.
+const dayPickerClasses = {
+  root: "rdp-root",
+  months: "flex flex-col gap-2",
+  month: "flex flex-col gap-2",
+  month_caption: "flex justify-center items-center h-7 text-sm font-medium",
+  caption_label: "text-sm font-medium",
+  nav: "flex items-center gap-1 absolute right-3 top-3",
+  button_previous: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
+  button_next: "inline-flex h-7 w-7 items-center justify-center rounded-sm hover:bg-accent",
+  weekdays: "flex",
+  weekday: "w-8 text-xs font-normal text-muted-foreground",
+  week: "flex mt-1",
+  day: "w-8 h-8 p-0 text-sm",
+  day_button:
+    "inline-flex h-8 w-8 items-center justify-center rounded-sm hover:bg-accent " +
+    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+  selected:
+    "[&_button]:bg-primary [&_button]:text-primary-foreground [&_button]:hover:bg-primary/90",
+  today: "[&_button]:underline",
+  outside: "text-muted-foreground/50",
+  disabled: "text-muted-foreground/30 pointer-events-none",
+};
+
+function parseIso(v: string): Date | undefined {
+  if (v === "") return undefined;
+  // Date(yyyy-mm-dd) parses as UTC — wir wollen local damit "2026-04-25"
+  // im Calendar nicht je nach Timezone als 24. oder 25. erscheint.
+  const parts = v.split("-");
+  if (parts.length !== 3) return undefined;
+  const [y, m, d] = parts.map(Number);
+  if (
+    y === undefined ||
+    m === undefined ||
+    d === undefined ||
+    Number.isNaN(y) ||
+    Number.isNaN(m) ||
+    Number.isNaN(d)
+  )
+    return undefined;
+  return new Date(y, m - 1, d);
+}
+
+function toIso(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function guessLocale(): string {
+  if (typeof navigator !== "undefined" && navigator.language) return navigator.language;
+  return "en-US";
+}

package/src/primitives/dialog.tsx

@@ -0,0 +1,119 @@
+// shadcn-Style Dialog via @radix-ui/react-dialog. Confirm-Button-
+// Variant kommt aus dem Standard-Button-Pattern; Cancel ist immer
+// secondary. Async-onConfirm wird über loading-State gerendert
+// (Spinner im Confirm-Button bis der Promise resolved).
+//
+// Ausgelagert von primitives/index.tsx weil das Radix-Setup mehrere
+// Dependencies und Sub-Exports zieht — hält das Primitives-Hauptfile
+// schlank.
+
+import type { DialogProps } from "@cosmicdrift/kumiko-renderer";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Loader2, X } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { cn } from "../lib/cn";
+
+export function DefaultDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  variant = "default",
+  onConfirm,
+  children,
+  testId,
+}: DialogProps): ReactNode {
+  const t = useTranslation();
+  const [loading, setLoading] = useState(false);
+
+  const effectiveConfirmLabel = confirmLabel ?? t("kumiko.dialog.confirm");
+  const effectiveCancelLabel = cancelLabel ?? t("kumiko.dialog.cancel");
+
+  async function handleConfirm(): Promise<void> {
+    setLoading(true);
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const isDanger = variant === "danger";
+  const confirmClass = isDanger
+    ? "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90"
+    : "bg-primary text-primary-foreground shadow hover:bg-primary/90";
+
+  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}
+          // Wenn description fehlt, signalisieren wir Radix explizit
+          // `aria-describedby={undefined}` — sonst warnt Radix zur
+          // Laufzeit (aria-Best-Practice: Modals sollen entweder eine
+          // Description haben oder den Hinweis tragen dass keine da ist).
+          {...(description === undefined && { "aria-describedby": undefined })}
+          className={cn(
+            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg",
+            "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",
+            "rounded-lg",
+          )}
+        >
+          <div className="flex flex-col gap-1.5">
+            <DialogPrimitive.Title className="text-lg font-semibold tracking-tight">
+              {title}
+            </DialogPrimitive.Title>
+            {description !== undefined && (
+              <DialogPrimitive.Description className="text-sm text-muted-foreground">
+                {description}
+              </DialogPrimitive.Description>
+            )}
+          </div>
+          {children !== undefined && <div>{children}</div>}
+          <div className="flex items-center justify-end gap-2">
+            <DialogPrimitive.Close asChild>
+              <button
+                type="button"
+                disabled={loading}
+                data-testid={testId !== undefined ? `${testId}-cancel` : undefined}
+                className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+              >
+                {effectiveCancelLabel}
+              </button>
+            </DialogPrimitive.Close>
+            <button
+              type="button"
+              onClick={() => void handleConfirm()}
+              disabled={loading}
+              data-testid={testId !== undefined ? `${testId}-confirm` : undefined}
+              className={cn(
+                "inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
+                "disabled:pointer-events-none disabled:opacity-50",
+                confirmClass,
+              )}
+            >
+              {loading && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
+              {effectiveConfirmLabel}
+            </button>
+          </div>
+          <DialogPrimitive.Close asChild>
+            <button
+              type="button"
+              aria-label={t("kumiko.dialog.close")}
+              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/dropdown-menu.tsx

@@ -0,0 +1,103 @@
+// shadcn-style DropdownMenu auf Radix-Basis. Wrappers um
+// @radix-ui/react-dropdown-menu mit den Tailwind-Token-Klassen die
+// die anderen Primitives auch nutzen — Trigger-Button-Look kommt vom
+// Caller (asChild-Pattern), wir liefern nur Content/Item/Label/
+// Separator/CheckboxItem mit konsistenter Optik.
+//
+// Vorteile gegenüber dem self-rolled useDropdownMenu-Hook:
+//  - Click-outside, Escape, Focus-Trap, Roving-Tabindex, ARIA-Roles,
+//    Pointer-vs-Keyboard-Subtleties — alles geschenkt von Radix.
+//  - Portal'd Content rendert über Stacking-Context-Grenzen (nützlich
+//    in Dialogs/Popovers).
+//  - Keyboard-Nav (↑↓ + Home/End) funktioniert von Haus aus.
+
+import * as Primitive from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export const DropdownMenu = Primitive.Root;
+export const DropdownMenuTrigger = Primitive.Trigger;
+export const DropdownMenuPortal = Primitive.Portal;
+
+const contentClass =
+  "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 " +
+  "text-popover-foreground shadow-md " +
+  "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 " +
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2";
+
+export function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentPropsWithoutRef<typeof Primitive.Content>): ReactNode {
+  return (
+    <Primitive.Portal>
+      <Primitive.Content
+        sideOffset={sideOffset}
+        className={cn(contentClass, className)}
+        {...props}
+      />
+    </Primitive.Portal>
+  );
+}
+
+const itemClass =
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm " +
+  "outline-none transition-colors " +
+  "focus:bg-accent focus:text-accent-foreground " +
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+
+export function DropdownMenuItem({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof Primitive.Item>): ReactNode {
+  return <Primitive.Item className={cn(itemClass, className)} {...props} />;
+}
+
+// CheckboxItem mit Check-Icon links — für "ausgewählter Eintrag in
+// einer Liste"-Patterns (TenantSwitcher, LanguageSwitcher). Radix
+// rendert <ItemIndicator> nur wenn checked=true, kein eigener Branch
+// nötig.
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>): ReactNode {
+  return (
+    <Primitive.CheckboxItem
+      checked={checked}
+      className={cn(itemClass, "pl-8 pr-2", className)}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <Primitive.ItemIndicator>
+          <Check className="h-3.5 w-3.5" />
+        </Primitive.ItemIndicator>
+      </span>
+      {children}
+    </Primitive.CheckboxItem>
+  );
+}
+
+export function DropdownMenuLabel({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof Primitive.Label>): ReactNode {
+  return (
+    <Primitive.Label
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof Primitive.Separator>): ReactNode {
+  return <Primitive.Separator className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />;
+}