@cosmicdrift/kumiko-renderer-web 0.55.0 → 0.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "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.50.0",
-    "@cosmicdrift/kumiko-headless": "0.50.0",
-    "@cosmicdrift/kumiko-renderer": "0.50.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.55.1",
+    "@cosmicdrift/kumiko-headless": "0.55.1",
+    "@cosmicdrift/kumiko-renderer": "0.55.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -32,7 +32,7 @@
     "cmdk": "^1.1.1",
     "lucide-react": "^1.14.0",
     "react": "^19.2.6",
-    "react-day-picker": "^9.14.0",
+    "react-day-picker": "^10.0.0",
     "react-dom": "^19.2.6",
     "tailwind-merge": "^3.6.0"
   },

package/src/__tests__/config-edit.test.tsx

@@ -219,10 +219,12 @@ describe("KumikoScreen / configEdit", () => {
     await waitFor(() =>
       expect(field.querySelectorAll('[data-testid="config-cascade"]')).toHaveLength(1),
     );
-    expect(field.querySelectorAll('[data-testid="config-source-badge"]')).toHaveLength(1);
-    // Badge inline am Label, Disclosure unter dem Input — nicht umgekehrt.
+    // Eine einzige Status-Stelle pro Feld: die Cascade-Disclosure unter dem
+    // Input trägt Quelle + Wert. Das frühere Label-Badge war redundant und
+    // wurde entfernt (User-Feedback "2× Fehlt").
+    expect(field.querySelectorAll('[data-testid="config-source-badge"]')).toHaveLength(0);
     const label = field.querySelector("label");
-    expect(label?.querySelector('[data-testid="config-source-badge"]')).toBeTruthy();
+    expect(label?.querySelector('[data-testid="config-source-badge"]')).toBeNull();
     expect(label?.querySelector('[data-testid="config-cascade"]')).toBeNull();
   });
 });

package/src/primitives/calendar-popover.tsx

@@ -11,8 +11,8 @@
 
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Calendar as CalendarIcon } from "lucide-react";
-import type { ReactNode } from "react";
-import { DayPicker } from "react-day-picker";
+import type { ReactElement, ReactNode } from "react";
+import { DayPicker, type DropdownProps } from "react-day-picker";
 import { cn } from "../lib/cn";
 
 export type CalendarPopoverProps = {
@@ -89,6 +89,7 @@ export function CalendarPopover({
             {...(disabledMatchers.length > 0 && { disabled: disabledMatchers })}
             onSelect={(d) => onSelect(d)}
             classNames={dayPickerClasses}
+            components={{ Dropdown: SelectDropdown }}
           />
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
@@ -96,20 +97,37 @@ export function CalendarPopover({
   );
 }
 
+const dropdownSelectClass =
+  "rounded-sm border border-input bg-transparent px-1.5 py-0.5 text-sm font-medium " +
+  "cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
+
+// rdp v9s Default-Dropdown rendert NEBEN dem <select> ein aria-hidden
+// <span> mit demselben Label — sichtbar nur, wenn rdps eigene style.css
+// das <select> transparent darüberlegt. Da wir die rdp-Klassen mit eigenen
+// Tokens überschreiben, greift diese Positionierung nicht → Label doppelt
+// (#369-Folgebug). Ein nacktes <select> ohne Begleit-Span vermeidet das
+// CSS-unabhängig — eine Quelle für den sichtbaren Wert.
+function SelectDropdown({ options, className, ...selectProps }: DropdownProps): ReactElement {
+  return (
+    <select className={cn(dropdownSelectClass, className)} {...selectProps}>
+      {options?.map((opt) => (
+        <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
 // classNames-Map für react-day-picker v9 — überschreibt die default-
-// Klassen mit Tailwind/shadcn-Tokens. dropdowns/dropdown decken den
-// captionLayout="dropdown"-Modus ab (Monat-/Jahr-Selects).
+// Klassen mit Tailwind/shadcn-Tokens. Die Monat-/Jahr-Selects rendert
+// SelectDropdown (components-Prop), daher hier nur der dropdowns-Container.
 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",
   dropdowns: "flex items-center gap-1 text-sm font-medium",
-  dropdown_root: "relative inline-flex items-center",
-  dropdown:
-    "rounded-sm border border-input bg-transparent px-1.5 py-0.5 text-sm " +
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
   nav: "flex items-center gap-1 absolute right-1 top-2",
   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",