@cosmicdrift/kumiko-renderer-web 0.188.0 → 0.190.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.188.0",
+  "version": "0.190.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.188.0",
-    "@cosmicdrift/kumiko-headless": "0.188.0",
-    "@cosmicdrift/kumiko-renderer": "0.188.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.190.0",
+    "@cosmicdrift/kumiko-headless": "0.190.0",
+    "@cosmicdrift/kumiko-renderer": "0.190.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/entity-edit-redirect.test.tsx

@@ -0,0 +1,166 @@
+// Issue #1942: entityEdit had no post-save redirect (only actionForm did) —
+// RenderEdit only exposed onSubmit/onCancel, unreachable from a declarative
+// screen. This exercises the real create/update submit path through
+// KumikoScreen → EntityEditCreateBody/EntityEditUpdateForm, not just the
+// type/boot-validator layer, proving a successful save actually calls
+// nav.navigate(redirect) instead of the default "back to list", and that
+// omitting redirect keeps the existing list-navigation behavior.
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  FeatureSchema,
+  ScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { NavTarget } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen, NavProvider } from "@cosmicdrift/kumiko-renderer";
+import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+
+const productEntity: EntityDefinition = {
+  fields: { name: { type: "text", required: false, searchable: false, sortable: false } },
+};
+
+function buildSchema(redirect?: string): FeatureSchema {
+  const editScreen: ScreenDefinition = {
+    id: "product-edit",
+    type: "entityEdit",
+    entity: "product",
+    layout: { sections: [{ fields: ["name"] }] },
+    ...(redirect !== undefined && { redirect }),
+  };
+  const listScreen: ScreenDefinition = {
+    id: "product-list",
+    type: "entityList",
+    entity: "product",
+    columns: ["name"],
+  };
+  return {
+    featureName: "shop",
+    entities: { product: productEntity },
+    screens: [editScreen, listScreen],
+  } as FeatureSchema;
+}
+
+function fillNameAndSubmit(): void {
+  const nameInput = screen.getByTestId("field-name").querySelector("input") as HTMLInputElement;
+  fireEvent.change(nameInput, { target: { value: "Widget" } });
+  const form = screen.getByTestId("render-edit-form");
+  fireEvent.submit(form);
+}
+
+describe("entityEdit redirect (#1942)", () => {
+  test("create: successful save with redirect set navigates there, not to the list", async () => {
+    const navigated: NavTarget[] = [];
+    render(
+      <DispatcherProvider dispatcher={createMockDispatcher()}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen schema={buildSchema("product-detail")} qn="shop:screen:product-edit" />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    fillNameAndSubmit();
+
+    await waitFor(() => expect(navigated).toEqual([{ screenId: "product-detail" }]));
+  });
+
+  test("create: no redirect set falls back to the entity's list screen", async () => {
+    const navigated: NavTarget[] = [];
+    render(
+      <DispatcherProvider dispatcher={createMockDispatcher()}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen schema={buildSchema()} qn="shop:screen:product-edit" />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    fillNameAndSubmit();
+
+    await waitFor(() => expect(navigated).toEqual([{ screenId: "product-list" }]));
+  });
+
+  test("create: redirect as fully-qualified cross-feature QN navigates via its short id (#1946)", async () => {
+    // redirect may name a screen in ANOTHER feature via `<feature>:screen:<id>`
+    // (boot-validator accepts the QN directly) — the renderer must strip it
+    // down to the short id before calling nav.navigate, since the runtime
+    // router resolves bare short ids app-wide, not raw QNs (see nav.tsx).
+    const navigated: NavTarget[] = [];
+    render(
+      <DispatcherProvider dispatcher={createMockDispatcher()}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen
+            schema={buildSchema("statements:screen:statement-upload-list")}
+            qn="shop:screen:product-edit"
+          />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    fillNameAndSubmit();
+
+    await waitFor(() => expect(navigated).toEqual([{ screenId: "statement-upload-list" }]));
+  });
+
+  test("update: successful save with redirect set navigates there, not to the list", async () => {
+    const navigated: NavTarget[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { id: "42", version: 1, name: "Existing" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <NavProvider
+          value={{
+            route: { screenId: "shop:screen:product-edit", entityId: "42" },
+            navigate: (target) => navigated.push(target),
+            replace: () => {},
+            hrefFor: () => "",
+            searchParams: {},
+            setSearchParams: () => {},
+          }}
+        >
+          <KumikoScreen
+            schema={buildSchema("product-detail")}
+            qn="shop:screen:product-edit"
+            entityId="42"
+          />
+        </NavProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByTestId("field-name")).toBeTruthy());
+    fillNameAndSubmit();
+
+    await waitFor(() => expect(navigated).toEqual([{ screenId: "product-detail" }]));
+  });
+});

package/src/__tests__/kumiko-screen.test.tsx

@@ -1404,6 +1404,50 @@ describe("KumikoScreen", () => {
     expect(navigateCalls[0]).toEqual({ screenId: "task-list" });
   });
 
+  test("actionForm mit Cross-Feature-QN als redirect: navigiert per Short-Id (#1946)", async () => {
+    const navigateCalls: { screenId: string }[] = [];
+    const dispatcher = makeDispatcher({
+      write: (async () => ({
+        isSuccess: true,
+        data: { id: "x" },
+      })) as unknown as Dispatcher["write"],
+    });
+    const memoryNav = {
+      route: { screenId: "quick-add" },
+      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      replace: () => undefined,
+      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      searchParams: {},
+      setSearchParams: () => undefined,
+    };
+    const actionScreen: ActionFormScreenDefinition = {
+      id: "quick-add",
+      type: "actionForm",
+      handler: "tasks:write:task:quick-add",
+      fields: { title: { type: "text", required: true } },
+      layout: { sections: [{ title: "x", fields: ["title"] }] },
+      redirect: "statements:screen:statement-upload-list",
+    };
+
+    const { NavProvider } = await import("@cosmicdrift/kumiko-renderer");
+    render(
+      <NavProvider value={memoryNav}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [actionScreen, listScreen] }}
+            qn="tasks:screen:quick-add"
+          />
+        </DispatcherProvider>
+      </NavProvider>,
+    );
+
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "go" } });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+    await waitFor(() => expect(navigateCalls.length).toBe(1));
+    expect(navigateCalls[0]).toEqual({ screenId: "statement-upload-list" });
+  });
+
   // cancelTarget (Bug-Bash 2026-06-07, Bug 9): redirect erzeugte
   // automatisch einen Abbrechen-Button mit demselben Ziel wie der
   // Submit-Redirect — auf Single-Action-Screens ("Test-Mail senden")
@@ -1814,6 +1858,106 @@ describe("KumikoScreen: update-only entityEdit (allowCreate/allowDelete)", () =>
   });
 });
 
+// --- singleton entityEdit (fw#1941) ---
+// Singleton entities (exactly one record per tenant) have no nav path
+// that supplies an entityId. `singleton: true` resolves the existing
+// record via list(limit:1) before deciding create vs update.
+describe("KumikoScreen: singleton entityEdit", () => {
+  const singletonEdit: EntityEditScreenDefinition = {
+    id: "task-edit",
+    type: "entityEdit",
+    entity: "task",
+    singleton: true,
+    layout: { sections: [{ title: "Basics", fields: ["title"] }] },
+  };
+  const singletonSchema: FeatureSchema = {
+    featureName: "tasks",
+    entities: { task: taskEntity },
+    screens: [singletonEdit],
+  };
+
+  test("kein vorhandener Record → rendert leeres Create-Form", async () => {
+    const queryCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        queryCalls.push({ type, payload });
+        return { isSuccess: true, data: { rows: [], nextCursor: null } };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    expect(titleInput.value).toBe("");
+    expect(queryCalls).toEqual([{ type: "tasks:query:task:list", payload: { limit: 1 } }]);
+  });
+
+  test("vorhandener Record → lädt ihn (Update-Form, prefilled) statt Create", async () => {
+    const queryCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        queryCalls.push({ type, payload });
+        if (type.endsWith(":list")) {
+          return {
+            isSuccess: true,
+            data: { rows: [{ id: "task-1", title: "loaded-title" }], nextCursor: null },
+          };
+        }
+        return {
+          isSuccess: true,
+          data: { id: "task-1", version: 1, title: "loaded-title", count: 0, done: false },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    // Two sequential loading cycles (list, then detail once the singleton
+    // wrapper hands off to EntityEditUpdateBody) — default waitFor timeout
+    // can be too tight under CI's shared-process test load.
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull(), {
+      timeout: 5000,
+    });
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    expect(titleInput.value).toBe("loaded-title");
+    // Anchor: the id resolved from list(limit:1) reaches the detail query —
+    // otherwise the form would render empty/create-mode instead of loading it.
+    expect(queryCalls).toContainEqual({
+      type: "tasks:query:task:detail",
+      payload: { id: "task-1" },
+    });
+  });
+
+  test("allowCreate:false + leere Tabelle → Fehler-Banner statt Create-Form", async () => {
+    const disabledSchema: FeatureSchema = {
+      featureName: "tasks",
+      entities: { task: taskEntity },
+      screens: [{ ...singletonEdit, allowCreate: false }],
+    };
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={disabledSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    expect(screen.getByTestId("kumiko-screen-create-disabled")).toBeTruthy();
+    expect(screen.queryByTestId("render-edit-form")).toBeNull();
+  });
+});
+
 // --- actionForm extension-section (Wave J: Incident-Update-Timeline) ---
 // actionForm hat keinen record — Extension-Sections bekommen stattdessen
 // die initialen Form-Values (inkl. searchParams-Prefill) als initialValues.

package/src/__tests__/primitives.test.tsx

@@ -1040,6 +1040,29 @@ describe("Form", () => {
     );
     expect(screen.queryByTestId("form-actions")).toBeNull();
   });
+
+  test("stickyActions: Footer bekommt mobile-fixed-Klassen (fw#1918)", () => {
+    render(
+      <Form
+        onSubmit={() => undefined}
+        actions={<button type="submit">Next</button>}
+        testId="form"
+        stickyActions
+      >
+        <div>content</div>
+      </Form>,
+    );
+    expect(screen.getByTestId("form-actions").className).toContain("max-sm:fixed");
+  });
+
+  test("ohne stickyActions: Footer bleibt im normalen Dokumentfluss", () => {
+    render(
+      <Form onSubmit={() => undefined} actions={<button type="submit">Save</button>} testId="form">
+        <div>content</div>
+      </Form>,
+    );
+    expect(screen.getByTestId("form-actions").className).not.toContain("max-sm:fixed");
+  });
 });
 
 describe("Banner padded", () => {

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

@@ -1303,6 +1303,143 @@ describe("RenderEdit wizard draft", () => {
     expect(screen.getByTestId("field-count")).toBeTruthy();
     expect(calls.some((c) => c.startsWith("form-draft:"))).toBe(false);
   });
+
+  // Issue #1914: patch() (controlled mode / extension sections) previously
+  // never triggered a draft save — only handleWizardNext/Back did. A patch()
+  // on the last step (no further Next click coming) or on a step abandoned
+  // without Next/Back was silently lost, forcing e.g. a repeat of a paid
+  // VIN-decode round-trip on resume (#1908).
+  test("controls.patch() on the last step persists into the draft blob (debounced)", async () => {
+    const { dispatcher, store } = makeDraftDispatcher();
+    let controls: RenderEditControls<TestValues> | undefined;
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <RenderEdit<TestValues>
+          screen={makeDraftWizardScreen(true)}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0 }}
+          writeCommand="order:create"
+          onControlsReady={(c) => {
+            controls = c;
+          }}
+        />
+      </DispatcherProvider>,
+    );
+
+    // Reach the last step first (handleWizardNext's own saveDraft mints the
+    // draftId) — the bug is specifically about a patch() AFTER that, with no
+    // further Next/Back to piggyback a save on.
+    fireEvent.click(screen.getByTestId("render-edit-wizard-next"));
+    expect(screen.getByTestId("field-count")).toBeTruthy();
+
+    act(() => {
+      controls?.patch({ count: 7 });
+    });
+
+    await waitFor(
+      () => {
+        const values = store.current?.values as { count?: number } | undefined;
+        expect(values?.count).toBe(7);
+      },
+      { timeout: 3000 },
+    );
+  });
+
+  test("remount after patch() without a Next/Back click shows the patched value", async () => {
+    const { dispatcher, store } = makeDraftDispatcher();
+    const draftStorage = createFakeDraftStorage();
+    let controls: RenderEditControls<TestValues> | undefined;
+
+    const first = render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DraftStorageProvider value={draftStorage}>
+          <RenderEdit<TestValues>
+            screen={makeDraftWizardScreen(true)}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0 }}
+            writeCommand="order:create"
+            onControlsReady={(c) => {
+              controls = c;
+            }}
+          />
+        </DraftStorageProvider>
+      </DispatcherProvider>,
+    );
+
+    // No Next/Back click anywhere in this test — patch() alone, on the
+    // first step, must still mint a draftId and persist (proves there is
+    // no second, blob-bypassing write path for patch()'d data either: this
+    // writes exclusively via patch(), the remount below reads exclusively
+    // via form-draft:query:get).
+    act(() => {
+      controls?.patch({ title: "Patched" });
+    });
+
+    await waitFor(() => expect(store.current).not.toBeNull(), { timeout: 3000 });
+
+    first.unmount();
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DraftStorageProvider value={draftStorage}>
+          <RenderEdit<TestValues>
+            screen={makeDraftWizardScreen(true)}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0 }}
+            writeCommand="order:create"
+          />
+        </DraftStorageProvider>
+      </DispatcherProvider>,
+    );
+
+    await waitFor(
+      () => {
+        const titleInput = screen
+          .getByTestId("field-title")
+          .querySelector("input") as HTMLInputElement;
+        expect(titleInput.value).toBe("Patched");
+      },
+      { timeout: 3000 },
+    );
+  });
+
+  test("a burst of patch() calls collapses into a single debounced draft save", async () => {
+    const { dispatcher, calls } = makeDraftDispatcher();
+    let controls: RenderEditControls<TestValues> | undefined;
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <RenderEdit<TestValues>
+          screen={makeDraftWizardScreen(true)}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0 }}
+          writeCommand="order:create"
+          onControlsReady={(c) => {
+            controls = c;
+          }}
+        />
+      </DispatcherProvider>,
+    );
+
+    const savesSoFar = () => calls.filter((c) => c === "form-draft:write:save").length;
+    const before = savesSoFar();
+
+    // Each patch() resets the same debounce timer — three patches in one
+    // burst must still land as exactly one form-draft:write:save, not three.
+    act(() => {
+      controls?.patch({ count: 1 });
+      controls?.patch({ count: 2 });
+      controls?.patch({ count: 3 });
+    });
+
+    await waitFor(() => expect(savesSoFar()).toBe(before + 1), { timeout: 3000 });
+    expect(savesSoFar()).toBe(before + 1);
+  });
 });
 
 describe("RenderEdit create-mode draftId (issue #1913)", () => {

package/src/primitives/index.tsx

@@ -100,6 +100,7 @@ import { DefaultModal } from "./modal";
 import { formatMoney, MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
+import { TzInput } from "./tz-input";
 
 // ---- Card-Chrome (eine Definition für Form/Section/Card) ----
 
@@ -555,6 +556,18 @@ function DefaultInput(props: InputProps): ReactNode {
           className="resize-y"
         />
       );
+    case "tz":
+      return (
+        <TzInput
+          id={props.id}
+          name={props.name}
+          value={props.value}
+          onChange={props.onChange}
+          {...(props.disabled !== undefined && { disabled: props.disabled })}
+          {...(props.required !== undefined && { required: props.required })}
+          {...(props.hasError !== undefined && { hasError: props.hasError })}
+        />
+      );
   }
 }
 
@@ -1558,6 +1571,7 @@ function DefaultForm({
   actions,
   testId,
   width,
+  stickyActions,
 }: FormProps): ReactNode {
   // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
   // der Container trägt Card/Titel selbst, sonst Card-in-Card.
@@ -1626,6 +1640,9 @@ function DefaultForm({
               "[&>section:not(:first-child)]:border-t",
               "[&>:not(section)]:px-6 [&>:not(section)]:py-3",
               "[&>:not(section):first-child]:pt-6 [&>:not(section):last-child]:pb-6",
+              // ponytail: fixed footer height is a guess (button row + safe-area) —
+              // widen if a wizard step's last field ever renders visibly clipped.
+              stickyActions === true && "max-sm:pb-24",
             )}
           >
             <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
@@ -1633,7 +1650,17 @@ function DefaultForm({
           {actions !== undefined && (
             <div
               data-testid={testId !== undefined ? `${testId}-actions` : undefined}
-              className={cn(cardFooter, cardFooterBorder)}
+              className={cn(
+                cardFooter,
+                cardFooterBorder,
+                // Below sm (640px): pin to the viewport bottom instead of normal
+                // flow, so a virtual keyboard shrinking the viewport can't push
+                // this out of reach (fw#1918). `fixed` escapes the card's
+                // `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))]",
+              )}
             >
               {actions}
             </div>

package/src/primitives/located-timestamp-input.tsx

@@ -9,27 +9,7 @@ import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 import { ComboboxInput } from "./combobox";
 import { TimestampInput } from "./timestamp-input";
-
-// Kuratierte Notliste falls die Runtime Intl.supportedValuesOf nicht kennt
-// (vor ES2022). Reicht für die häufigsten Zonen; moderne Browser + Bun liefern
-// die volle Liste.
-const FALLBACK_ZONES: readonly string[] = [
-  "UTC",
-  "Europe/Berlin",
-  "Europe/London",
-  "Europe/Paris",
-  "Europe/Madrid",
-  "America/New_York",
-  "America/Los_Angeles",
-  "America/Sao_Paulo",
-  "Asia/Tokyo",
-  "Asia/Singapore",
-  "Australia/Sydney",
-];
-
-const TZ_OPTIONS: readonly { readonly value: string; readonly label: string }[] = (
-  typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : FALLBACK_ZONES
-).map((zone) => ({ value: zone, label: zone }));
+import { TZ_OPTIONS } from "./tz-options";
 
 export type LocatedTimestampValue = {
   readonly at: string;

package/src/primitives/tz-input.tsx

@@ -0,0 +1,43 @@
+// TzInput (kind:"tz") — standalone IANA-zone picker for `tz`-typed fields
+// (#1925). Same searchable-combobox UX as the zone half of
+// LocatedTimestampInput, shared TZ_OPTIONS source.
+
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { ComboboxInput } from "./combobox";
+import { TZ_OPTIONS } from "./tz-options";
+
+export type TzInputProps = {
+  readonly id: string;
+  readonly name: string;
+  readonly value: string;
+  readonly onChange: (v: string | undefined) => void;
+  readonly disabled?: boolean;
+  readonly required?: boolean;
+  readonly hasError?: boolean;
+};
+
+export function TzInput({
+  id,
+  name,
+  value,
+  onChange,
+  disabled,
+  required,
+  hasError,
+}: TzInputProps): ReactNode {
+  const t = useTranslation();
+  return (
+    <ComboboxInput
+      id={id}
+      name={name}
+      options={TZ_OPTIONS}
+      value={value}
+      onChange={(v) => onChange(v === "" ? undefined : v)}
+      placeholder={t("kumiko.field.timezone")}
+      {...(disabled !== undefined && { disabled })}
+      {...(required !== undefined && { required })}
+      {...(hasError !== undefined && { hasError })}
+    />
+  );
+}

package/src/primitives/tz-options.ts

@@ -0,0 +1,20 @@
+// Curated fallback list for runtimes without Intl.supportedValuesOf (pre
+// ES2022). Covers the most common zones; modern browsers + Bun return the
+// full IANA list.
+const FALLBACK_ZONES: readonly string[] = [
+  "UTC",
+  "Europe/Berlin",
+  "Europe/London",
+  "Europe/Paris",
+  "Europe/Madrid",
+  "America/New_York",
+  "America/Los_Angeles",
+  "America/Sao_Paulo",
+  "Asia/Tokyo",
+  "Asia/Singapore",
+  "Australia/Sydney",
+];
+
+export const TZ_OPTIONS: readonly { readonly value: string; readonly label: string }[] = (
+  typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : FALLBACK_ZONES
+).map((zone) => ({ value: zone, label: zone }));

package/src/ui/sheet.tsx

@@ -47,6 +47,7 @@ function SheetOverlay({
 
 function SheetContent({
   className,
+  overlayClassName,
   children,
   side = "right",
   showCloseButton = true,
@@ -54,10 +55,11 @@ function SheetContent({
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
+  overlayClassName?: string
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay />
+      <SheetOverlay className={overlayClassName} />
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
@@ -100,7 +102,13 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      // Matches the card footer convention (primitives/index.tsx cardFooter
+      // + cardFooterBorder) — same padding/border/button-row shape as
+      // SectionCard/DefaultCard so a drawer footer reads like a card footer.
+      className={cn(
+        "mt-auto flex items-center justify-end gap-2 border-t bg-muted/30 px-[var(--card-padding)] py-4",
+        className,
+      )}
       {...props}
     />
   )

package/src/widgets/__tests__/widgets.test.tsx

@@ -42,6 +42,17 @@ describe("ProgressBar", () => {
     render(<ProgressBar value={-3} testId="bar" />);
     expect(screen.getByTestId("bar").getAttribute("aria-valuenow")).toBe("0");
   });
+
+  test("Füll-Element bildet den Wert über Breite ab und erbt die Höhe nicht vom Elternteil", () => {
+    render(<ProgressBar value={0.5} testId="bar" />);
+    const bar = screen.getByTestId("bar");
+    const fill = bar.firstElementChild as HTMLElement;
+    expect(fill.style.width).toBe("50%");
+    expect(fill.className).not.toContain("h-full");
+    expect(fill.className).toContain("absolute");
+    expect(fill.className).toContain("inset-y-0");
+    expect(bar.className).toContain("relative");
+  });
 });
 
 describe("ModeSwitch", () => {

package/src/widgets/drawer.tsx

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import { type ReactNode, useRef, useState } from "react";
+import { cn } from "../lib/cn";
 import {
   Sheet,
   SheetContent,
@@ -17,8 +19,40 @@ export type DrawerProps = {
   readonly footer?: ReactNode;
   readonly children: ReactNode;
   readonly testId?: string;
+  /** Opt-in drag-to-resize + maximize toggle (left/right sides only). */
+  readonly resizable?: boolean;
+  readonly defaultWidthPx?: number;
+  readonly minWidthPx?: number;
+  readonly maxWidthPx?: number;
 };
 
+const DEFAULT_WIDTH_PX = 420;
+const MIN_WIDTH_PX = 320;
+const MAX_WIDTH_PX = 800;
+
+// Floating panel with a clearly visible margin on every edge, rounded on
+// all four corners — replaces the sheet primitive's flush-to-viewport-edge
+// per-side classes. twMerge resolves each utility group against the base
+// (inset/width/height/border/rounding), so this fully overrides rather than
+// stacking with it. 32px margin + 32px radius so the detachment from the
+// viewport edge reads clearly at a glance, not just on close 1:1 inspection.
+function floatingSideClass(side: "left" | "right" | "top" | "bottom"): string {
+  switch (side) {
+    case "left":
+      return "inset-y-8 left-8 h-auto w-[420px] max-w-[85vw] sm:max-w-[420px] rounded-[2rem] border shadow-2xl";
+    case "top":
+      return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
+    case "bottom":
+      return "inset-x-8 bottom-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl";
+    default:
+      return "inset-y-8 right-8 h-auto w-[420px] max-w-[85vw] sm:max-w-[420px] rounded-[2rem] border shadow-2xl";
+  }
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
 /** Slide-in panel beside a list (e.g. mail reader next to the inbox) —
  *  thin wrapper over the Sheet primitive with header/body/footer slots
  *  so screens skip per-route Radix boilerplate. */
@@ -31,10 +65,72 @@ export function Drawer({
   footer,
   children,
   testId,
+  resizable = false,
+  defaultWidthPx = DEFAULT_WIDTH_PX,
+  minWidthPx = MIN_WIDTH_PX,
+  maxWidthPx = MAX_WIDTH_PX,
 }: DrawerProps): ReactNode {
+  const canResize = resizable && (side === "left" || side === "right");
+  const [width, setWidth] = useState(defaultWidthPx);
+  const [maximized, setMaximized] = useState(false);
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
+
+  const effectiveMaxWidthPx = () =>
+    typeof window === "undefined"
+      ? maxWidthPx
+      : Math.min(maxWidthPx, Math.round(window.innerWidth * 0.9));
+  const effectiveWidthPx = maximized ? effectiveMaxWidthPx() : width;
+
+  const onHandlePointerDown = (event: React.PointerEvent<HTMLDivElement>): void => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = { startX: event.clientX, startWidth: effectiveWidthPx };
+    setMaximized(false);
+  };
+  const onHandlePointerMove = (event: React.PointerEvent<HTMLDivElement>): void => {
+    if (dragRef.current === null) return;
+    const deltaX = event.clientX - dragRef.current.startX;
+    const signedDelta = side === "right" ? -deltaX : deltaX;
+    setWidth(clamp(dragRef.current.startWidth + signedDelta, minWidthPx, effectiveMaxWidthPx()));
+  };
+  const onHandlePointerUp = (event: React.PointerEvent<HTMLDivElement>): void => {
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    dragRef.current = null;
+  };
+  const onHandleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    const step = event.shiftKey ? 40 : 16;
+    const grow = side === "right" ? "ArrowLeft" : "ArrowRight";
+    const shrink = side === "right" ? "ArrowRight" : "ArrowLeft";
+    if (event.key !== grow && event.key !== shrink) return;
+    event.preventDefault();
+    setMaximized(false);
+    const delta = event.key === grow ? step : -step;
+    setWidth((current) => clamp(current + delta, minWidthPx, effectiveMaxWidthPx()));
+  };
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side={side} data-testid={testId}>
+      <SheetContent
+        side={side}
+        data-testid={testId}
+        overlayClassName="bg-black/20 backdrop-blur-[2px]"
+        className={floatingSideClass(side)}
+        style={canResize ? { width: effectiveWidthPx, maxWidth: "none" } : undefined}
+      >
+        {canResize && (
+          <button
+            type="button"
+            onClick={() => setMaximized((m) => !m)}
+            aria-pressed={maximized}
+            aria-label={maximized ? "Restore drawer width" : "Maximize drawer width"}
+            className="absolute top-4 right-14 z-10 rounded-xs p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden"
+          >
+            {maximized ? (
+              <Minimize2Icon className="size-4" />
+            ) : (
+              <Maximize2Icon className="size-4" />
+            )}
+          </button>
+        )}
         {(title !== undefined || description !== undefined) && (
           <SheetHeader>
             {title !== undefined && <SheetTitle>{title}</SheetTitle>}
@@ -43,6 +139,26 @@ export function Drawer({
         )}
         <div className="flex-1 overflow-y-auto px-4">{children}</div>
         {footer !== undefined && <SheetFooter>{footer}</SheetFooter>}
+        {canResize && (
+          // biome-ignore lint/a11y/useSemanticElements: <hr> can't carry pointer/keyboard drag interaction or a live width value — a draggable separator needs a div with the ARIA role.
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize drawer"
+            aria-valuenow={effectiveWidthPx}
+            aria-valuemin={minWidthPx}
+            aria-valuemax={effectiveMaxWidthPx()}
+            tabIndex={0}
+            onPointerDown={onHandlePointerDown}
+            onPointerMove={onHandlePointerMove}
+            onPointerUp={onHandlePointerUp}
+            onKeyDown={onHandleKeyDown}
+            className={cn(
+              "absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-border",
+              side === "right" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2",
+            )}
+          />
+        )}
       </SheetContent>
     </Sheet>
   );

package/src/widgets/progress-bar.tsx

@@ -19,9 +19,12 @@ export function ProgressBar({
       aria-valuenow={Math.round(pct * 100)}
       aria-valuemin={0}
       aria-valuemax={100}
-      className={cn("h-2 w-full overflow-hidden rounded-full bg-muted", className)}
+      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className)}
     >
-      <div className="h-full rounded-full bg-primary" style={{ width: `${pct * 100}%` }} />
+      <div
+        className="absolute inset-y-0 left-0 rounded-full bg-primary"
+        style={{ width: `${pct * 100}%` }}
+      />
     </div>
   );
 }