@cosmicdrift/kumiko-renderer-web 0.123.0 → 0.123.2

package/package.json

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

package/src/index.ts

@@ -124,7 +124,12 @@ export type { WorkspaceSwitcherProps } from "./layout/workspace-switcher";
 export { WorkspaceSwitcher } from "./layout/workspace-switcher";
 export { cn } from "./lib/cn";
 export { postWithDownload } from "./lib/download";
-export { BareFormProvider, DefaultCard as Card, defaultPrimitives } from "./primitives";
+export {
+  BareFormProvider,
+  DefaultCard as Card,
+  defaultPrimitives,
+  FormScreenShell,
+} from "./primitives";
 export type { ActionMenuProps, MenuItemDef } from "./primitives/action-menu";
 export { ActionMenu } from "./primitives/action-menu";
 export {

package/src/primitives/index.tsx

@@ -517,9 +517,11 @@ function DefaultDataTable({
         {emptyState ?? <span>No entries.</span>}
       </div>
     ) : (
-      // dashboard-01-Muster: schlichter `rounded-lg border`-Rahmen (kein
-      // bg-card/shadow), die Header-Zeile trägt den bg-muted-Grauton.
-      <div className="overflow-hidden rounded-lg border">
+      // dashboard-01-Muster: `rounded-lg border`-Rahmen, die Header-Zeile
+      // trägt den bg-muted-Grauton. `bg-card` (statt transparent) → die Liste
+      // sitzt auf derselben Card-Fläche wie Forms; auf Themes mit farbigem
+      // Page-Background (z.B. Cream) matchen Listen sonst nicht die Cards.
+      <div className="overflow-hidden rounded-lg border bg-card">
         <Table data-testid={testId}>
           {tableInner(columns, rows, onRowClick, sort, onSortChange, rowActions, rowActionMode)}
         </Table>
@@ -1382,7 +1384,7 @@ function DefaultForm({
       data-testid={testId}
       className="flex flex-col w-full"
     >
-      <div className="px-6 pt-6 pb-12 max-w-3xl w-full mx-auto">
+      <FormScreenShell>
         <div className={cn(cardSurface(), "overflow-hidden")}>
           {(title !== undefined || subtitle !== undefined) && (
             <div className="px-6 pb-2 pt-5">
@@ -1426,11 +1428,32 @@ function DefaultForm({
             </div>
           )}
         </div>
-      </div>
+      </FormScreenShell>
     </form>
   );
 }
 
+// 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;
+// `className` (z.B. "flex flex-col gap-6") für Multi-Card-Stacks.
+export function FormScreenShell({
+  children,
+  className,
+  testId,
+}: {
+  readonly children: ReactNode;
+  readonly className?: string;
+  readonly testId?: string;
+}): ReactNode {
+  return (
+    <div data-testid={testId} className={cn("px-6 pt-6 pb-12 max-w-3xl w-full mx-auto", className)}>
+      {children}
+    </div>
+  );
+}
+
 function DefaultSection({ title, subtitle, children, actions, testId }: SectionProps): ReactNode {
   const insideForm = useContext(InsideFormContext);