@cosmicdrift/kumiko-renderer-web 0.129.0 → 0.130.1

package/package.json

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

package/src/primitives/index.tsx

@@ -1434,22 +1434,38 @@ function DefaultForm({
   );
 }
 
-// Kanonische Form/Settings-Shell: zentrierte max-w-3xl-Spalte mit Standard-
-// Screen-Padding. DefaultForm (configEdit/entityEdit) UND custom Settings-
-// Screens (url-settings, privacy-center) teilen sie → einheitliche Breite +
-// Zentrierung statt per-Screen-Wildwuchs. Inhalt nutzt Card-Primitives;
+// Kanonische Form/Settings-Shell: zentrierte Spalte mit Standard-Screen-
+// Padding. DefaultForm (configEdit/entityEdit) UND custom Settings-Screens
+// (url-settings, privacy-center) teilen sie → einheitliche Breite +
+// Zentrierung statt per-Screen-Wildwuchs. Breite über `maxWidth`-Intent statt
+// 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";
+
+const formScreenShellWidth: Record<FormScreenShellWidth, string> = {
+  sm: "max-w-sm mx-auto",
+  "3xl": "max-w-3xl mx-auto",
+  "4xl": "max-w-4xl mx-auto",
+  full: "max-w-full",
+};
+
 export function FormScreenShell({
   children,
   className,
   testId,
+  maxWidth = "3xl",
 }: {
   readonly children: ReactNode;
   readonly className?: string;
   readonly testId?: string;
+  readonly maxWidth?: FormScreenShellWidth;
 }): ReactNode {
   return (
-    <div data-testid={testId} className={cn("px-6 pt-6 pb-12 max-w-3xl w-full mx-auto", className)}>
+    <div
+      data-testid={testId}
+      className={cn("px-6 pt-6 pb-12 w-full", formScreenShellWidth[maxWidth], className)}
+    >
       {children}
     </div>
   );