Centralize shared WebUI structural primitives

webui/src/components/ContentGrid.tsx

@@ -2,12 +2,14 @@ import type { FormHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 
 export type ContentGridColumns = 1 | 2 | 3 | 4;
 export type ContentGridGap = "compact" | "small" | "default" | "loose";
+export type ContentGridSpacing = "none" | "block";
 export type ContentGridCollapseAt = "narrow" | "workspace" | "standard" | "wide" | "never";
 
 export type ContentGridProps = HTMLAttributes<HTMLDivElement> & {
   children: ReactNode;
   columns?: ContentGridColumns;
   gap?: ContentGridGap;
+  spacing?: ContentGridSpacing;
   collapseAt?: ContentGridCollapseAt;
   align?: "start" | "stretch";
 };
@@ -16,6 +18,7 @@ export default function ContentGrid({
   children,
   columns = 2,
   gap = "default",
+  spacing = "none",
   collapseAt = "workspace",
   align = "start",
   className = "",
@@ -28,6 +31,7 @@ export default function ContentGrid({
         "content-grid-layout",
         `content-grid-columns-${columns}`,
         `content-grid-gap-${gap}`,
+        `content-grid-spacing-${spacing}`,
         `content-grid-collapse-${collapseAt}`,
         `content-grid-align-${align}`,
         className
@@ -66,6 +70,7 @@ export type FormLayoutProps = FormHTMLAttributes<HTMLFormElement> & {
   children: ReactNode;
   columns?: ContentGridColumns;
   gap?: ContentGridGap;
+  spacing?: ContentGridSpacing;
   collapseAt?: ContentGridCollapseAt;
 };
 
@@ -73,6 +78,7 @@ export function FormLayout({
   children,
   columns = 1,
   gap = "default",
+  spacing = "none",
   collapseAt = "standard",
   className = "",
   ...props
@@ -85,6 +91,7 @@ export function FormLayout({
         "form-grid-layout",
         `content-grid-columns-${columns}`,
         `content-grid-gap-${gap}`,
+        `content-grid-spacing-${spacing}`,
         `content-grid-collapse-${collapseAt}`,
         "content-grid-align-start",
         className