@cosmicdrift/kumiko-renderer-web 0.170.0 → 0.171.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.170.0",
+  "version": "0.171.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.170.0",
-    "@cosmicdrift/kumiko-headless": "0.170.0",
-    "@cosmicdrift/kumiko-renderer": "0.170.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.171.0",
+    "@cosmicdrift/kumiko-headless": "0.171.0",
+    "@cosmicdrift/kumiko-renderer": "0.171.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -36,6 +36,7 @@
     "react": "^19.2.6",
     "react-day-picker": "^10.0.0",
     "react-dom": "^19.2.6",
+    "react-resizable-panels": "^4.12.2",
     "tailwind-merge": "^3.6.0",
     "temporal-polyfill": "^0.3.2"
   },

package/src/__tests__/combobox.test.tsx

@@ -236,4 +236,47 @@ describe("ComboboxInput (Tier 2.1c)", () => {
     );
     expect(screen.getByTestId("combobox-combo").getAttribute("aria-invalid")).toBe("true");
   });
+
+  // #1681: "+ Create" must stay visible even with zero matching options —
+  // that's the most common case (a freshly seeded system has no
+  // referenceable rows yet), not the edge case. The footer deliberately
+  // lives OUTSIDE Command.List/cmdk's filter+empty machinery so it never
+  // competes with it for visibility.
+  test("onCreate: Footer bleibt sichtbar wenn keine Optionen matchen, klick feuert onCreate + schließt Popover", async () => {
+    const user = userEvent.setup();
+    let created = 0;
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value=""
+        onChange={() => {}}
+        options={[]}
+        onCreate={() => {
+          created += 1;
+        }}
+        createLabel="Neuen Kontakt anlegen"
+        defaultOpen
+      />,
+    );
+    const createButton = await screen.findByTestId("combobox-combo-create");
+    expect(createButton.textContent).toContain("Neuen Kontakt anlegen");
+    await user.click(createButton);
+    expect(created).toBe(1);
+  });
+
+  test("ohne onCreate: kein Footer-Item im Popover", async () => {
+    render(
+      <ComboboxInput
+        id="combo"
+        name="combo"
+        value=""
+        onChange={() => {}}
+        options={[{ value: "a", label: "Alpha" }]}
+        defaultOpen
+      />,
+    );
+    await screen.findByText("Alpha");
+    expect(screen.queryByTestId("combobox-combo-create")).toBeNull();
+  });
 });

package/src/__tests__/primitives.test.tsx

@@ -166,6 +166,30 @@ describe("Input kind mapping", () => {
     render(<Input id="i" name="i" kind="text" value="" hasError onChange={() => {}} />);
     expect(screen.getByRole("textbox").getAttribute("aria-invalid")).toBe("true");
   });
+
+  test('kind="text" icon="mail": renders prefix icon + pads the input', () => {
+    render(<Input id="i" name="i" kind="text" value="" icon="mail" onChange={() => {}} />);
+    const input = screen.getByRole("textbox");
+    expect(input.className).toContain("pl-8");
+    expect(document.querySelector("svg[aria-hidden='true']")).not.toBeNull();
+  });
+
+  test('kind="text" icon="not-a-real-key": unknown key → no icon, no padding', () => {
+    render(
+      <Input id="i" name="i" kind="text" value="" icon="not-a-real-key" onChange={() => {}} />,
+    );
+    const input = screen.getByRole("textbox");
+    expect(input.className).not.toContain("pl-8");
+    expect(document.querySelector("svg[aria-hidden='true']")).toBeNull();
+  });
+
+  test('kind="number" icon="hash": renders prefix icon alongside existing right-align classes', () => {
+    render(<Input id="i" name="i" kind="number" value={0} icon="hash" onChange={() => {}} />);
+    const input = screen.getByRole("spinbutton");
+    expect(input.className).toContain("pl-8");
+    expect(input.className).toContain("text-right");
+    expect(document.querySelector("svg[aria-hidden='true']")).not.toBeNull();
+  });
 });
 
 describe("DataTable", () => {
@@ -447,7 +471,8 @@ describe("DataTable", () => {
   });
 
   // Infinite-Scroll Sentinel: rendert sentinel-div, zeigt Spinner wenn
-  // loadingMore, "End of list" wenn !hasMore. IntersectionObserver
+  // loadingMore, den i18n End-of-list-Marker (kumiko.list.end-of-list)
+  // wenn !hasMore. IntersectionObserver
   // selbst ist in jsdom unmocked — wir testen nur die Marker, der
   // Observer-Fire-Pfad ist im KumikoScreen.EntityListBody.
   describe("InfiniteSentinel", () => {
@@ -505,6 +530,27 @@ describe("DataTable", () => {
       expect(screen.getByTestId("dt-sentinel-end")).not.toBeNull();
       expect(screen.getByTestId("dt-sentinel-end").textContent).toContain("End of list");
     });
+
+    test("hasMore=false + de-Locale: Marker kommt aus i18n statt hartcodiert", async () => {
+      const { LocaleProvider, createStaticLocaleResolver, kumikoDefaultTranslations } =
+        await import("@cosmicdrift/kumiko-renderer");
+      render(
+        <LocaleProvider
+          resolver={createStaticLocaleResolver({ locale: "de" })}
+          fallbackBundles={[kumikoDefaultTranslations]}
+        >
+          <DataTable
+            columns={cols}
+            rows={oneRow}
+            testId="dt"
+            onReachEnd={mock()}
+            loadingMore={false}
+            hasMore={false}
+          />
+        </LocaleProvider>,
+      );
+      expect(screen.getByTestId("dt-sentinel-end").textContent).toBe("— Ende der Liste —");
+    });
   });
 
   // RowActions: pinst die Inline-vs-Kebab-Entscheidung, Confirm-Dialog

package/src/__tests__/projection-detail.test.tsx

@@ -59,6 +59,36 @@ describe("KumikoScreen / projectionDetail", () => {
     expect(screen.queryByTestId("render-edit-submit")).toBeNull();
   });
 
+  // synthesizeProjectionDetailScreen rebuilds `layout` from `sections` alone
+  // (structural readOnly:true proof) — a naive rebuild would drop sibling
+  // layout fields like `width` (#1676).
+  test("layout.width survives the projectionDetail → entityEdit shim", async () => {
+    const wideDetailScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: { ...detailScreen.layout, width: "full" },
+    };
+    const wideSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [wideDetailScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={wideSchema} qn="sessions:screen:session-detail" entityId="sess-1" />
+      </DispatcherProvider>,
+    );
+
+    const form = await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(form.firstElementChild?.className).toContain("max-w-full");
+  });
+
   test("missing entityId shows an error banner instead of crashing", async () => {
     let resolveQuery: (value: unknown) => void = () => {};
     const dispatcher: Dispatcher = createMockDispatcher({

package/src/__tests__/reference-create.test.tsx

@@ -0,0 +1,181 @@
+// #1681: a reference field can create a missing target record right from
+// the combobox. Covers the full chain in one test — every link (screen
+// resolution across features, dialog host, create dispatch, returning the
+// new id, refetching the lookup list) fails the test if it breaks.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import {
+  AppFeaturesProvider,
+  DispatcherProvider,
+  type FeatureSchema,
+  KumikoScreen,
+} from "@cosmicdrift/kumiko-renderer";
+import userEvent from "@testing-library/user-event";
+import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
+
+const taskEntity = {
+  fields: {
+    title: { type: "text", required: true },
+    assignee: { type: "reference", entity: "catalog:widget" },
+    tags: { type: "reference", entity: "catalog:widget", multiple: true },
+  },
+} as unknown as EntityDefinition;
+
+const taskEditScreen: EntityEditScreenDefinition = {
+  id: "task-edit",
+  type: "entityEdit",
+  entity: "task",
+  layout: { sections: [{ title: "Basics", fields: ["title", "assignee", "tags"] }] },
+};
+
+const tasksSchema: FeatureSchema = {
+  featureName: "tasks",
+  entities: { task: taskEntity },
+  screens: [taskEditScreen],
+};
+
+const widgetEntity = {
+  fields: { name: { type: "text", required: true } },
+} as unknown as EntityDefinition;
+
+const widgetCreateScreen: EntityEditScreenDefinition = {
+  id: "widget-edit",
+  type: "entityEdit",
+  entity: "widget",
+  layout: { sections: [{ title: "Basics", fields: ["name"] }] },
+};
+
+const catalogSchema: FeatureSchema = {
+  featureName: "catalog",
+  entities: { widget: widgetEntity },
+  screens: [widgetCreateScreen],
+};
+
+function makeDispatcher(): Dispatcher & { readonly writes: string[] } {
+  const writes: string[] = [];
+  // The lookup query only knows about newly created widgets AFTER the
+  // create-write — pins the refetch: without it, the options list (and
+  // thus the label of the newly selected value) would stay empty.
+  const createdIds: string[] = [];
+  const dispatcher = createMockDispatcher({
+    query: (async () => ({
+      isSuccess: true,
+      data: { rows: createdIds.map((id) => ({ id })) },
+    })) as unknown as Dispatcher["query"],
+    write: (async (type: string) => {
+      writes.push(type);
+      const id = `widget-${createdIds.length + 1}`;
+      createdIds.push(id);
+      return { isSuccess: true, data: { kind: "save", id } };
+    }) as unknown as Dispatcher["write"],
+  });
+  return { ...dispatcher, writes };
+}
+
+describe("Reference-field create-in-place (#1681)", () => {
+  test("+ Create öffnet den Create-Screen des Zielfeatures, Submit wählt die neue id + refetcht die Liste", async () => {
+    const user = userEvent.setup();
+    const dispatcher = makeDispatcher();
+
+    render(
+      <AppFeaturesProvider features={[tasksSchema, catalogSchema]}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen schema={tasksSchema} qn="tasks:screen:task-edit" />
+        </DispatcherProvider>
+      </AppFeaturesProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    await user.click(screen.getByTestId("combobox-kumiko-edit-assignee"));
+    const createButton = await screen.findByTestId("combobox-kumiko-edit-assignee-create");
+    await user.click(createButton);
+
+    // The "widget" create-dialog is mounted — its own form field ("name")
+    // is visible. Two "render-edit-submit" buttons now exist (the host
+    // form behind it + the dialog form) — the dialog portal mounts last,
+    // so its button is the last one in the DOM.
+    const nameInput = (await screen.findByTestId("field-name")).querySelector("input");
+    if (!nameInput) throw new Error("expected name input in create dialog");
+    await user.type(nameInput, "Widget A");
+    const submitButtons = screen.getAllByTestId("render-edit-submit");
+    await user.click(submitButtons[submitButtons.length - 1] as HTMLElement);
+
+    // Dispatch went to the TARGET feature's ("catalog") qualified create
+    // handler, not the host feature's ("tasks").
+    await waitFor(() => expect(dispatcher.writes.length).toBe(1));
+    expect(dispatcher.writes[0]).toBe("catalog:write:widget:create");
+
+    // Dialog closes, the reference field shows the newly created id as
+    // the selected value — the trigger text is the id (no labelField set
+    // → fallback label = id, see ReferenceInput.options).
+    await waitFor(() => expect(screen.queryByTestId("field-name")).toBeNull());
+    expect(screen.getByTestId("combobox-kumiko-edit-assignee").textContent).toContain("widget-1");
+  });
+
+  // multi-mode's handleCreated appends to a value it reads from the
+  // `field.value` closure — pins that the SECOND create doesn't drop the
+  // first id (stale closure would overwrite instead of append).
+  test("multi-mode: zwei Creates hintereinander behalten beide ids", async () => {
+    const user = userEvent.setup();
+    const dispatcher = makeDispatcher();
+
+    render(
+      <AppFeaturesProvider features={[tasksSchema, catalogSchema]}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen schema={tasksSchema} qn="tasks:screen:task-edit" />
+        </DispatcherProvider>
+      </AppFeaturesProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+
+    for (const expectedId of ["widget-1", "widget-2"]) {
+      await user.click(screen.getByTestId("combobox-kumiko-edit-tags"));
+      const createButton = await screen.findByTestId("combobox-kumiko-edit-tags-create");
+      await user.click(createButton);
+      const nameInput = (await screen.findByTestId("field-name")).querySelector("input");
+      if (!nameInput) throw new Error("expected name input in create dialog");
+      await user.type(nameInput, `Widget ${expectedId}`);
+      const submitButtons = screen.getAllByTestId("render-edit-submit");
+      await user.click(submitButtons[submitButtons.length - 1] as HTMLElement);
+      await waitFor(() => expect(screen.queryByTestId("field-name")).toBeNull());
+      await waitFor(() =>
+        expect(screen.getByTestId("combobox-kumiko-edit-tags").textContent).toContain(expectedId),
+      );
+    }
+
+    expect(screen.getByTestId("combobox-kumiko-edit-tags").textContent).toContain("widget-1");
+    expect(screen.getByTestId("combobox-kumiko-edit-tags").textContent).toContain("widget-2");
+  });
+
+  test("Cancel im Create-Dialog schließt ohne write, Reference-Feld bleibt leer", async () => {
+    const user = userEvent.setup();
+    const dispatcher = makeDispatcher();
+
+    render(
+      <AppFeaturesProvider features={[tasksSchema, catalogSchema]}>
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen schema={tasksSchema} qn="tasks:screen:task-edit" />
+        </DispatcherProvider>
+      </AppFeaturesProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    await user.click(screen.getByTestId("combobox-kumiko-edit-assignee"));
+    const createButton = await screen.findByTestId("combobox-kumiko-edit-assignee-create");
+    await user.click(createButton);
+    await screen.findByTestId("field-name");
+
+    const cancelButtons = screen.getAllByTestId("render-edit-cancel");
+    await user.click(cancelButtons[cancelButtons.length - 1] as HTMLElement);
+
+    await waitFor(() => expect(screen.queryByTestId("field-name")).toBeNull());
+    expect(dispatcher.writes).toHaveLength(0);
+    expect(screen.getByTestId("combobox-kumiko-edit-assignee").textContent).not.toContain("widget");
+  });
+});

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

@@ -85,6 +85,46 @@ describe("RenderEdit", () => {
     expect(screen.queryByTestId("field-notes")).toBeNull();
   });
 
+  // Issue #1677: a section's optional `description` renders as the
+  // Section's subtitle slot underneath the block heading, and a field's
+  // `icon` reaches the DOM as a prefix icon on its input.
+  test("section.description renders as the section subtitle; field.icon renders a prefix icon", () => {
+    const entity = {
+      fields: { email: { type: "text", required: true } },
+    } as unknown as EntityDefinition;
+    const screenDef: EntityEditScreenDefinition = {
+      id: "orders:screen:order-edit",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        sections: [
+          {
+            title: "Contact",
+            description: "How we'll reach you.",
+            columns: 1,
+            fields: [{ field: "email", icon: "mail" }],
+          },
+        ],
+      },
+    };
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit
+          screen={screenDef}
+          entity={entity}
+          featureName="orders"
+          initial={{ email: "" } as never}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("section-Contact-subtitle").textContent).toBe("How we'll reach you.");
+    const fieldEl = screen.getByTestId("field-email");
+    expect(fieldEl.querySelector("svg[aria-hidden='true']")).not.toBeNull();
+    expect(fieldEl.querySelector("input")?.className).toContain("pl-8");
+  });
+
   // End-to-end-Routing: ein `type:"locatedTimestamp"`-Entity-Feld muss durch
   // computeEditViewModel → render-field → DefaultInput auf den Located-Picker
   // laufen (Datum + Uhrzeit + Zone), NICHT auf den Klartext-Fallthrough. Vor
@@ -203,6 +243,43 @@ describe("RenderEdit", () => {
     expect(seenResults[0]?.isSuccess).toBe(true);
   });
 
+  test("layout.width defaults the form shell to max-w-3xl when unset", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    const shell = screen.getByTestId("render-edit-form").firstElementChild;
+    expect(shell?.className).toContain("max-w-3xl");
+    expect(shell?.className).not.toContain("max-w-full");
+  });
+
+  test("layout.width: 'full' widens the form shell to max-w-full (#1676)", () => {
+    const screenDef = makeScreen();
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={{ ...screenDef, layout: { ...screenDef.layout, width: "full" } }}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    const shell = screen.getByTestId("render-edit-form").firstElementChild;
+    expect(shell?.className).toContain("max-w-full");
+    expect(shell?.className).not.toContain("max-w-3xl");
+  });
+
   test("title resolved aus i18n-Key `screen:<id>.title` mit screenId als Fallback", () => {
     const dispatcher = makeDispatcher();
     render(

package/src/app/create-app.tsx

@@ -7,6 +7,7 @@ import type {
   Translate,
 } from "@cosmicdrift/kumiko-headless";
 import {
+  AppFeaturesProvider,
   type AppSchema,
   type ColumnRendererComponent,
   ColumnRenderersProvider,
@@ -328,26 +329,28 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
     <TokensBoot>
       <LocaleProvider resolver={localeResolver} fallbackBundles={fallbackBundles}>
         <PrimitivesProvider value={primitives}>
-          <DispatcherProvider dispatcher={dispatcher}>
-            <LiveEventsProvider value={liveEvents}>
-              <DashboardBodyProvider value={WebDashboardBody}>
-                <CustomScreensProvider value={customScreens}>
-                  <ColumnRenderersProvider value={columnRenderers}>
-                    <ExtensionSectionsProvider value={extensionSectionComponents}>
-                      <NavProvidersProvider value={navProviders} entities={navEntities}>
-                        <ResolversProvider resolvers={resolvers}>
-                          <ToastProvider>
-                            <UpdateChecker />
-                            {stackWrappers(providers, stackWrappers(gates, screenNode))}
-                          </ToastProvider>
-                        </ResolversProvider>
-                      </NavProvidersProvider>
-                    </ExtensionSectionsProvider>
-                  </ColumnRenderersProvider>
-                </CustomScreensProvider>
-              </DashboardBodyProvider>
-            </LiveEventsProvider>
-          </DispatcherProvider>
+          <AppFeaturesProvider features={app.features}>
+            <DispatcherProvider dispatcher={dispatcher}>
+              <LiveEventsProvider value={liveEvents}>
+                <DashboardBodyProvider value={WebDashboardBody}>
+                  <CustomScreensProvider value={customScreens}>
+                    <ColumnRenderersProvider value={columnRenderers}>
+                      <ExtensionSectionsProvider value={extensionSectionComponents}>
+                        <NavProvidersProvider value={navProviders} entities={navEntities}>
+                          <ResolversProvider resolvers={resolvers}>
+                            <ToastProvider>
+                              <UpdateChecker />
+                              {stackWrappers(providers, stackWrappers(gates, screenNode))}
+                            </ToastProvider>
+                          </ResolversProvider>
+                        </NavProvidersProvider>
+                      </ExtensionSectionsProvider>
+                    </ColumnRenderersProvider>
+                  </CustomScreensProvider>
+                </DashboardBodyProvider>
+              </LiveEventsProvider>
+            </DispatcherProvider>
+          </AppFeaturesProvider>
         </PrimitivesProvider>
       </LocaleProvider>
     </TokensBoot>

package/src/index.ts

@@ -156,6 +156,7 @@ export {
   lightTokens,
   useBrowserTokensApi,
 } from "./tokens";
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
 export type {
   AiTextAreaProps,

package/src/layout/nav-tree.tsx

@@ -48,6 +48,7 @@ import {
   KeyRound,
   Layers,
   LayoutDashboard,
+  LayoutGrid,
   LineChart,
   Link,
   List,
@@ -107,6 +108,7 @@ import { parseTargetFromSearchParams } from "./target-url";
 // Keys; Erweiterung = neuer Eintrag hier (eine Quelle, alle Apps).
 const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   dashboard: LayoutDashboard,
+  "layout-grid": LayoutGrid,
   gauge: Gauge,
   list: List,
   table: Table,

package/src/primitives/combobox.tsx

@@ -16,7 +16,7 @@
 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 { Check, ChevronDown, Loader2, Plus } from "lucide-react";
 import { type ReactNode, useEffect, useState } from "react";
 import { cn } from "../lib/cn";
 
@@ -44,6 +44,14 @@ type ComboboxBaseProps = {
   readonly onSearchChange?: (q: string) => void;
   /** Spinner im Trigger + Popover-Footer wenn remote search läuft. */
   readonly loading?: boolean;
+  /** Fixed footer row below the option list ("+ createLabel"). Rendered
+   *  unfiltered — stays visible even when the search matches nothing,
+   *  which is the most common case for reference-lookups on a freshly
+   *  seeded system (kumiko-framework#1681). Omit for the plain
+   *  select-existing combobox. */
+  readonly onCreate?: () => void;
+  /** Label for the create-footer row. Default: i18n `kumiko.actions.create`. */
+  readonly createLabel?: string;
   /** 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,
@@ -109,6 +117,8 @@ export function ComboboxInput(props: ComboboxInputProps): ReactNode {
     onSearchChange,
     loading,
     defaultOpen,
+    onCreate,
+    createLabel,
   } = props;
   // i18n-Defaults aus dem Framework-Bundle (kumikoDefaultTranslations).
   // Caller-Override gewinnt; Bundle-Override greift wenn der Caller
@@ -118,6 +128,7 @@ export function ComboboxInput(props: ComboboxInputProps): ReactNode {
   const effectiveSearchPlaceholder = searchPlaceholder ?? t("kumiko.combobox.search-placeholder");
   const effectiveEmptyText = emptyText ?? t("kumiko.combobox.empty");
   const loadingText = t("kumiko.combobox.loading");
+  const effectiveCreateLabel = createLabel ?? t("kumiko.actions.create");
   const multiple = props.multiple === true;
   const [open, setOpen] = useState(defaultOpen === true);
   // Local Search-Buffer für Remote-Mode. Tipps werden mit 300ms
@@ -253,6 +264,20 @@ export function ComboboxInput(props: ComboboxInputProps): ReactNode {
                 );
               })}
             </Command.List>
+            {onCreate !== undefined && (
+              <button
+                type="button"
+                data-testid={`combobox-${id}-create`}
+                onClick={() => {
+                  setOpen(false);
+                  onCreate();
+                }}
+                className="flex w-full cursor-pointer select-none items-center gap-2 border-t border-border px-3 py-1.5 text-left text-sm text-primary outline-none hover:bg-accent hover:text-accent-foreground"
+              >
+                <Plus className="h-4 w-4" />
+                <span>{effectiveCreateLabel}</span>
+              </button>
+            )}
           </Command>
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>

package/src/primitives/index.tsx

@@ -25,6 +25,7 @@ import {
   type DataTableProps,
   type FieldProps,
   type FormProps,
+  type FormWidth,
   type GridCellProps,
   type GridProps,
   type HeadingProps,
@@ -41,11 +42,24 @@ import {
   ArrowDown,
   ArrowUp,
   ArrowUpDown,
+  Building,
+  CalendarDays,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  Globe,
+  Hash,
+  KeyRound,
+  Link,
   Loader2,
+  Lock,
+  Mail,
+  MapPin,
   MoreHorizontal,
+  Phone,
+  Search,
+  Tag,
+  User,
   X,
 } from "lucide-react";
 import {
@@ -79,6 +93,7 @@ import {
 import { FileUploadInput } from "./file-upload";
 import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
+import { DefaultModal } from "./modal";
 import { formatMoney, MoneyInput } from "./money-input";
 import { TimestampInput } from "./timestamp-input";
 import { useToast } from "./toast";
@@ -251,6 +266,46 @@ function DefaultField({
 
 // ---- Input ----
 
+// Field-icon registry: `EditFieldSpec.icon`/`InputProps.icon` sets a
+// symbolic key, mapped here to a lucide component. Unknown keys → no
+// icon (clean fallback, no boot-fail). Mirrors NAV_ICONS' pattern
+// (nav-tree.tsx) — a separate, smaller registry instead of a shared
+// import, because field icons cover a different use case (email, phone,
+// location, …) than nav icons (dashboard, tables, …).
+const FIELD_ICONS: Readonly<Record<string, typeof Mail>> = {
+  mail: Mail,
+  lock: Lock,
+  hash: Hash,
+  search: Search,
+  user: User,
+  phone: Phone,
+  calendar: CalendarDays,
+  link: Link,
+  tag: Tag,
+  building: Building,
+  globe: Globe,
+  key: KeyRound,
+  "map-pin": MapPin,
+};
+
+// Wraps a text/number input with a left-positioned prefix icon when
+// `icon` carries a known FIELD_ICONS key. `pl-8` overrides (via
+// tailwind-merge) only the left padding of the vendored ui/input.tsx —
+// right padding and other defaults stay untouched.
+function withFieldIcon(icon: string | undefined, input: ReactNode): ReactNode {
+  const Icon = icon !== undefined ? FIELD_ICONS[icon] : undefined;
+  if (Icon === undefined) return input;
+  return (
+    <div className="relative">
+      <Icon
+        aria-hidden="true"
+        className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+      />
+      {input}
+    </div>
+  );
+}
+
 function DefaultInput(props: InputProps): ReactNode {
   // Vendored ui/input + ui/checkbox stylen Fehler über `aria-invalid`
   // selbst — kein manuelles border-destructive mehr nötig.
@@ -263,7 +318,8 @@ function DefaultInput(props: InputProps): ReactNode {
   } as const;
   switch (props.kind) {
     case "text":
-      return (
+      return withFieldIcon(
+        props.icon,
         <UiInput
           type="text"
           {...common}
@@ -273,7 +329,8 @@ function DefaultInput(props: InputProps): ReactNode {
           onChange={(e: ChangeEvent<HTMLInputElement>) => props.onChange(e.target.value)}
           {...(props.placeholder !== undefined && { placeholder: props.placeholder })}
           {...(props.autoComplete !== undefined && { autoComplete: props.autoComplete })}
-        />
+          className={cn(props.icon !== undefined && FIELD_ICONS[props.icon] ? "pl-8" : undefined)}
+        />,
       );
     case "email":
       return (
@@ -299,7 +356,8 @@ function DefaultInput(props: InputProps): ReactNode {
         />
       );
     case "number":
-      return (
+      return withFieldIcon(
+        props.icon,
         <UiInput
           type="number"
           {...common}
@@ -309,8 +367,11 @@ function DefaultInput(props: InputProps): ReactNode {
             const v = e.target.value;
             props.onChange(v === "" ? undefined : Number(v));
           }}
-          className="text-right tabular-nums"
-        />
+          className={cn(
+            "text-right tabular-nums",
+            props.icon !== undefined && FIELD_ICONS[props.icon] ? "pl-8" : undefined,
+          )}
+        />,
       );
     case "range":
       return (
@@ -409,6 +470,8 @@ function DefaultInput(props: InputProps): ReactNode {
         ...(props.emptyText !== undefined && { emptyText: props.emptyText }),
         ...(props.onSearchChange !== undefined && { onSearchChange: props.onSearchChange }),
         ...(props.loading !== undefined && { loading: props.loading }),
+        ...(props.onCreate !== undefined && { onCreate: props.onCreate }),
+        ...(props.createLabel !== undefined && { createLabel: props.createLabel }),
       } as const;
       if (props.multiple === true) {
         return (
@@ -966,6 +1029,7 @@ function InfiniteSentinel({
   readonly hasMore: boolean;
   readonly testId?: string;
 }): ReactNode {
+  const t = useTranslation();
   const ref = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -1001,7 +1065,7 @@ function InfiniteSentinel({
     >
       {!hasMore ? (
         <span data-testid={testId !== undefined ? `${testId}-end` : undefined}>
-          — End of list —
+          {t("kumiko.list.end-of-list")}
         </span>
       ) : loadingMore ? (
         <Loader2 className="size-4 animate-spin" aria-hidden="true" />
@@ -1407,6 +1471,7 @@ function DefaultForm({
   subtitle,
   actions,
   testId,
+  width,
 }: FormProps): ReactNode {
   // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
   // der Container trägt Card/Titel selbst, sonst Card-in-Card.
@@ -1444,7 +1509,7 @@ function DefaultForm({
       data-testid={testId}
       className="flex flex-col w-full"
     >
-      <FormScreenShell>
+      <FormScreenShell {...(width !== undefined && { maxWidth: width })}>
         <div className={cn(cardSurface(), "overflow-hidden")}>
           {(title !== undefined || subtitle !== undefined) && (
             <div className="px-6 pb-2 pt-5">
@@ -1500,7 +1565,7 @@ function DefaultForm({
 // 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";
+export type FormScreenShellWidth = FormWidth;
 
 const formScreenShellWidth: Record<FormScreenShellWidth, string> = {
   sm: "max-w-sm mx-auto",
@@ -1804,6 +1869,7 @@ export const defaultPrimitives: CorePrimitives = {
   Text: DefaultText,
   Heading: DefaultHeading,
   Dialog: DefaultDialog,
+  Modal: DefaultModal,
   Lightbox: DefaultLightbox,
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,

package/src/primitives/modal.tsx

@@ -0,0 +1,39 @@
+// Bare content shell for hosting self-contained widgets (own submit/cancel
+// buttons) in a modal overlay — same Radix chrome as DefaultDialog, no
+// footer buttons of its own.
+
+import type { ModalProps } 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 DefaultModal({
+  open,
+  onOpenChange,
+  title,
+  children,
+  testId,
+}: ModalProps): ReactNode {
+  const t = useTranslation();
+  return (
+    <ModalShell
+      open={open}
+      onOpenChange={onOpenChange}
+      testId={testId}
+      closeLabel={t("kumiko.dialog.close")}
+      noAriaDescription
+      contentClassName={cn("grid w-full max-w-lg gap-4 border bg-card p-6 shadow-lg rounded-lg")}
+    >
+      <DialogPrimitive.Title className="sr-only">{title}</DialogPrimitive.Title>
+      {/* React re-parents portal content into the enclosing React tree for
+          event bubbling (it only escapes the DOM tree, not the fiber tree) —
+          without stopping it here, submitting a form hosted in this modal
+          would also bubble into an ancestor <form>'s onSubmit if the modal
+          was opened from inside one (e.g. a reference field's create dialog
+          nested in the host entity's own form, kumiko-framework#1681). */}
+      <div onSubmit={(e) => e.stopPropagation()}>{children}</div>
+    </ModalShell>
+  );
+}

package/src/ui/resizable.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck — vendored shadcn, regenerate via scripts/sync-shadcn.ts
+"use client"
+
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../lib/cn"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }