@gridui/grid 2.1.4 → 2.2.1

package/dist/index.js

@@ -1,44 +1,212 @@
-// src/frame/boundary/boundary.tsx
+// src/container/style.ts
+import { cva } from "class-variance-authority";
+var containerVariants = cva("gridui-container", {
+  variants: {
+    width: {
+      narrow: "gridui-container-narrow",
+      standard: "gridui-container-standard",
+      wide: "gridui-container-wide"
+    }
+  },
+  defaultVariants: { width: "standard" }
+});
+
+// src/container/container.tsx
 import { cn } from "@gridui/style-utils";
 import { jsx } from "react/jsx-runtime";
-var FrameBoundary = (props) => {
-  const { boundary } = props;
-  return boundary === "none" ? null : /* @__PURE__ */ jsx(
+var Container = (props) => {
+  const { width = "standard", className, ...restProps } = props;
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
-        "gridui-frame-boundary",
-        (boundary === "band" || boundary === "stripe") && "gridui-frame-divider",
-        boundary === "stripe" && "gridui-frame-stripe",
-        boundary === "space" && "gridui-frame-space"
-      ),
-      "aria-hidden": "true"
+      ...restProps,
+      className: cn(containerVariants({ width }), className)
     }
   );
 };
 
-// src/frame/decoration/decoration.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+// src/shared/decoration.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var resolveFrameDecoration = (boundary, decoration) => {
   return decoration ?? (boundary === "band" ? "nodes" : "none");
 };
 var FrameDecoration = (props) => {
-  const { decoration } = props;
-  return decoration === "none" ? null : /* @__PURE__ */ jsx2(
+  const { decoration, side } = props;
+  if (decoration === "none") {
+    return null;
+  }
+  if (!side) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        FrameDecoration,
+        {
+          decoration,
+          side: "start"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        FrameDecoration,
+        {
+          decoration,
+          side: "end"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       className: "gridui-frame-decoration",
       "data-decoration": decoration,
+      "data-side": side,
       "aria-hidden": "true",
       inert: true
     }
   );
 };
 
-// src/frame/style.ts
+// src/dashboard-frame/style.ts
+import { cva as cva2 } from "class-variance-authority";
+var dashboardFrameVariants = cva2("gridui-dashboard-frame", {
+  variants: {
+    startSize: {
+      none: "[--gridui-dashboard-start:0px] [--gridui-dashboard-start-minimum:0px]",
+      small: "[--gridui-dashboard-start:var(--gridui-space-8)]",
+      medium: "[--gridui-dashboard-start:var(--gridui-space-16)]",
+      large: "[--gridui-dashboard-start:var(--gridui-space-24)]"
+    },
+    endSize: {
+      none: "[--gridui-dashboard-end:0px] [--gridui-dashboard-end-minimum:0px]",
+      small: "[--gridui-dashboard-end:var(--gridui-space-8)]",
+      medium: "[--gridui-dashboard-end:var(--gridui-space-16)]",
+      large: "[--gridui-dashboard-end:var(--gridui-space-24)]"
+    },
+    compactStartSize: {
+      none: "[--gridui-dashboard-compact-start:0px] [--gridui-dashboard-compact-start-minimum:0px]",
+      small: "[--gridui-dashboard-compact-start:var(--gridui-space-8)]",
+      medium: "[--gridui-dashboard-compact-start:var(--gridui-space-16)]",
+      large: "[--gridui-dashboard-compact-start:var(--gridui-space-24)]"
+    },
+    compactEndSize: {
+      none: "[--gridui-dashboard-compact-end:0px] [--gridui-dashboard-compact-end-minimum:0px]",
+      small: "[--gridui-dashboard-compact-end:var(--gridui-space-8)]",
+      medium: "[--gridui-dashboard-compact-end:var(--gridui-space-16)]",
+      large: "[--gridui-dashboard-compact-end:var(--gridui-space-24)]"
+    }
+  },
+  defaultVariants: {
+    startSize: "medium",
+    endSize: "medium",
+    compactStartSize: "small",
+    compactEndSize: "small"
+  }
+});
+
+// src/dashboard-frame/dashboard-frame.tsx
 import { cn as cn2 } from "@gridui/style-utils";
-import { cva } from "class-variance-authority";
-var frameToneStyles = cva("", {
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DashboardFrame = (props) => {
+  const {
+    startSize,
+    endSize,
+    compactStartSize,
+    compactEndSize,
+    decoration = "none",
+    startDecoration = decoration,
+    endDecoration = decoration,
+    children,
+    className,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...restProps,
+      className: cn2(dashboardFrameVariants({
+        startSize,
+        endSize,
+        compactStartSize,
+        compactEndSize
+      }), className),
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: "gridui-dashboard-frame-body",
+          children: [
+            children,
+            /* @__PURE__ */ jsx3(
+              FrameDecoration,
+              {
+                decoration: startDecoration,
+                side: "start"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              FrameDecoration,
+              {
+                decoration: endDecoration,
+                side: "end"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/frame-boundary/style.ts
+import { cva as cva3 } from "class-variance-authority";
+var frameBoundaryStyles = cva3("gridui-frame-boundary", {
+  variants: {
+    boundary: {
+      none: "",
+      line: "",
+      band: "gridui-frame-divider",
+      stripe: "gridui-frame-divider gridui-frame-stripe",
+      space: "gridui-frame-space"
+    }
+  },
+  defaultVariants: { boundary: "line" }
+});
+
+// src/frame-boundary/frame-boundary.tsx
+import { cn as cn3 } from "@gridui/style-utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FrameBoundary = (props) => {
+  const { boundary = "line", extent = "content", className, ...restProps } = props;
+  return boundary === "none" ? null : /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ...restProps,
+      className: cn3(frameBoundaryStyles({ boundary }), className),
+      "data-boundary": boundary,
+      "data-boundary-extent": extent,
+      "aria-hidden": "true",
+      inert: true
+    }
+  );
+};
+
+// src/shared/chrome.ts
+import { resolveResponsive, spaceValue } from "@gridui/style-utils/responsive";
+var chromeStyle = (padding) => {
+  const values = resolveResponsive(padding);
+  return {
+    "--gridui-chrome-padding": spaceValue(values.base),
+    "--gridui-chrome-padding-md": spaceValue(values.md),
+    "--gridui-chrome-padding-lg": spaceValue(values.lg)
+  };
+};
+
+// src/shared/chrome-style.ts
+import { cva as cva4 } from "class-variance-authority";
+var frameChromeStyles = cva4("gridui-frame-chrome");
+
+// src/shared/frame-style.ts
+import { cn as cn4 } from "@gridui/style-utils";
+import { cva as cva5 } from "class-variance-authority";
+var frameToneStyles = cva5("", {
   variants: {
     tone: {
       neutral: "",
@@ -48,87 +216,51 @@ var frameToneStyles = cva("", {
     }
   }
 });
-var frameContentStyles = cva(cn2(
+var frameContentStyles = cva5(cn4(
   "gridui-frame-content",
   "border-x border-solid border-border wrap-anywhere"
 ));
 
-// src/frame/chrome/style.ts
-import { cn as cn3 } from "@gridui/style-utils";
-import { cva as cva2 } from "class-variance-authority";
-var frameChromeStyles = cva2("gridui-frame-chrome");
-var frameSignatureStyles = cva2(cn3(
+// src/frame-footer/style.ts
+import { cn as cn5 } from "@gridui/style-utils";
+import { cva as cva6 } from "class-variance-authority";
+var frameSignatureStyles = cva6(cn5(
   "gridui-frame-signature flex min-w-0 items-center justify-center gap-gridui-24 py-gridui-32 px-gridui-24 overflow-hidden border-t border-solid border-border bg-transparent",
   "[&>svg]:h-auto [&>svg]:opacity-30 [&>span]:font-display [&>span]:leading-none [&>span]:text-transparent"
 ));
-var frameSignatureCroppedStyles = cva2("gridui-frame-signature-cropped block pb-0 @container [&>span]:block [&>span]:text-center [&>span]:whitespace-nowrap");
+var frameSignatureCroppedStyles = cva6("gridui-frame-signature-cropped block pb-0 @container [&>span]:block [&>span]:text-center [&>span]:whitespace-nowrap");
 
-// src/frame/chrome/chrome.tsx
-import { cn as cn4 } from "@gridui/style-utils";
-import { resolveResponsive, spaceValue } from "@gridui/style-utils/responsive";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var chromeStyle = (padding) => {
-  const values = resolveResponsive(padding);
-  return {
-    "--gridui-chrome-padding": spaceValue(values.base),
-    "--gridui-chrome-padding-md": spaceValue(values.md),
-    "--gridui-chrome-padding-lg": spaceValue(values.lg)
-  };
-};
-var FrameHeader = (props) => {
-  const { padding = {
-    base: 16,
-    md: 24
-  }, wrap = true, gap = 16, justify = "between", className, children, ...restProps } = props;
-  return /* @__PURE__ */ jsx3(
-    "header",
-    {
-      ...restProps,
-      className: cn4("gridui-container gridui-frame-header", className),
-      children: /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: cn4(frameContentStyles(), frameChromeStyles()),
-          "data-justify": justify,
-          style: {
-            ...chromeStyle(padding),
-            flexWrap: wrap ? "wrap" : "nowrap",
-            gap: spaceValue(gap)
-          },
-          children
-        }
-      )
-    }
-  );
-};
+// src/frame-footer/frame-footer.tsx
+import { cn as cn6 } from "@gridui/style-utils";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FrameFooter = (props) => {
   const { padding = {
     base: 16,
     md: 24
   }, contentLayout = "flex", tone = "neutral", boundary = "line", decoration, signature, signatureAppearance = "standard", className, children, ...restProps } = props;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "footer",
     {
       ...restProps,
-      className: cn4("gridui-container gridui-frame-footer", frameToneStyles({
+      className: cn6("gridui-container gridui-frame-footer", frameToneStyles({
         tone
       }), className),
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           FrameBoundary,
           {
             boundary
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs3(
           "div",
           {
-            className: cn4(frameContentStyles(), frameChromeStyles(), "gridui-frame-surface"),
+            className: cn6(frameContentStyles(), frameChromeStyles(), "gridui-frame-surface"),
             "data-content-layout": contentLayout,
             style: chromeStyle(padding),
             children: [
               children,
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx5(
                 FrameDecoration,
                 {
                   decoration: resolveFrameDecoration(boundary, decoration)
@@ -137,10 +269,10 @@ var FrameFooter = (props) => {
             ]
           }
         ),
-        signature ? /* @__PURE__ */ jsx3(
+        signature ? /* @__PURE__ */ jsx5(
           "div",
           {
-            className: cn4(frameContentStyles(), frameSignatureStyles(), signatureAppearance === "cropped" && frameSignatureCroppedStyles()),
+            className: cn6(frameContentStyles(), frameSignatureStyles(), signatureAppearance === "cropped" && frameSignatureCroppedStyles()),
             "aria-hidden": "true",
             inert: true,
             children: signature
@@ -151,16 +283,46 @@ var FrameFooter = (props) => {
   );
 };
 
-// src/frame/rail/style.ts
-import { cva as cva3 } from "class-variance-authority";
-var frameRailStyles = cva3("gridui-frame-rail flex h-full box-border flex-col py-gridui-24 text-muted");
-var frameRailContentStyles = cva3("gridui-frame-rail-content relative z-(--gridui-z-interaction) min-w-0 type-eyebrow bg-inherit");
-var frameRailStickyBottomStyles = cva3("gridui-frame-rail-sticky-bottom justify-end [&>.gridui-frame-rail-content]:sticky");
+// src/frame-header/frame-header.tsx
+import { cn as cn7 } from "@gridui/style-utils";
+import { spaceValue as spaceValue2 } from "@gridui/style-utils/responsive";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FrameHeader = (props) => {
+  const { padding = {
+    base: 16,
+    md: 24
+  }, wrap = true, gap = 16, justify = "between", className, children, ...restProps } = props;
+  return /* @__PURE__ */ jsx6(
+    "header",
+    {
+      ...restProps,
+      className: cn7("gridui-container gridui-frame-header", className),
+      children: /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: cn7(frameContentStyles(), frameChromeStyles()),
+          "data-justify": justify,
+          style: {
+            ...chromeStyle(padding),
+            flexWrap: wrap ? "wrap" : "nowrap",
+            gap: spaceValue2(gap)
+          },
+          children
+        }
+      )
+    }
+  );
+};
 
-// src/frame/rail/rail.tsx
-import { cn as cn5 } from "@gridui/style-utils";
-import { resolveResponsive as resolveResponsive2, spaceValue as spaceValue2 } from "@gridui/style-utils/responsive";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/frame-rail/style.ts
+import { cva as cva7 } from "class-variance-authority";
+var frameRailStyles = cva7("gridui-frame-rail flex h-full box-border flex-col py-gridui-24 text-muted");
+var frameRailContentStyles = cva7("gridui-frame-rail-content relative z-(--gridui-z-interaction) min-w-0 type-eyebrow bg-inherit");
+var frameRailStickyBottomStyles = cva7("gridui-frame-rail-sticky-bottom justify-end [&>.gridui-frame-rail-content]:sticky");
+
+// src/frame-rail/frame-rail.tsx
+import { cn as cn8 } from "@gridui/style-utils";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var FrameRail = (props) => {
   const {
     placement = "start",
@@ -168,12 +330,12 @@ var FrameRail = (props) => {
     className,
     ...restProps
   } = props;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       ...restProps,
-      className: cn5(frameRailStyles(), placement === "sticky-bottom" && frameRailStickyBottomStyles(), className),
-      children: /* @__PURE__ */ jsx4(
+      className: cn8(frameRailStyles(), placement === "sticky-bottom" && frameRailStickyBottomStyles(), className),
+      children: /* @__PURE__ */ jsx7(
         "div",
         {
           className: frameRailContentStyles(),
@@ -183,6 +345,11 @@ var FrameRail = (props) => {
     }
   );
 };
+
+// src/frame-rail-group/frame-rail-group.tsx
+import { cn as cn9 } from "@gridui/style-utils";
+import { resolveResponsive as resolveResponsive2, spaceValue as spaceValue3 } from "@gridui/style-utils/responsive";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var FrameRailGroup = (props) => {
   const { rail, railWidth = {
     base: 0,
@@ -191,29 +358,29 @@ var FrameRailGroup = (props) => {
   const hasRail = rail !== void 0 && rail !== null && rail !== false;
   const width = resolveResponsive2(hasRail ? railWidth : 0);
   const layoutStyle = {
-    "--gridui-rail-width-base": spaceValue2(width.base),
-    "--gridui-rail-width-md": spaceValue2(width.md),
-    "--gridui-rail-width-lg": spaceValue2(width.lg),
+    "--gridui-rail-width-base": spaceValue3(width.base),
+    "--gridui-rail-width-md": spaceValue3(width.md),
+    "--gridui-rail-width-lg": spaceValue3(width.lg),
     "--gridui-rail-display-base": width.base === 0 ? "none" : "block",
     "--gridui-rail-display-md": width.md === 0 ? "none" : "block",
     "--gridui-rail-display-lg": width.lg === 0 ? "none" : "block",
     ...style
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ...restProps,
-      className: cn5("gridui-frame-rail-group", className),
+      className: cn9("gridui-frame-rail-group", className),
       style: layoutStyle,
       children: [
-        hasRail ? /* @__PURE__ */ jsx4(
+        hasRail ? /* @__PURE__ */ jsx8(
           "div",
           {
             className: "gridui-frame-rail-track",
             children: rail
           }
         ) : null,
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             className: "gridui-frame-rail-body",
@@ -225,111 +392,48 @@ var FrameRailGroup = (props) => {
   );
 };
 
-// src/frame/page/style.ts
-import { cva as cva4 } from "class-variance-authority";
-var pageFrameVariants = cva4("gridui-page-frame min-h-svh", {
-  variants: {
-    width: {
-      narrow: "gridui-container-narrow",
-      standard: "gridui-container-standard",
-      wide: "gridui-container-wide"
-    }
-  },
-  defaultVariants: { width: "standard" }
-});
-
-// src/frame/page/page.tsx
-import { cn as cn6 } from "@gridui/style-utils";
-import { spacingVariables } from "@gridui/style-utils/responsive";
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var FrameSections = (props) => {
-  const { className, ...restProps } = props;
-  return /* @__PURE__ */ jsx5(
-    "div",
+// src/frame-region/frame-region.tsx
+import { cn as cn10 } from "@gridui/style-utils";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var FrameRegion = (props) => {
+  const { asChild = false, edge = "none", className, ...restProps } = props;
+  const Component = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx9(
+    Component,
     {
       ...restProps,
-      className: cn6("gridui-frame-sections", className)
+      className: cn10("gridui-frame-region", className),
+      "data-frame-edge": edge
     }
   );
 };
-var PageFrame = (props) => {
-  const {
-    width = "standard",
-    header,
-    footer,
-    rail,
-    railWidth,
-    railScope = "page",
-    mainGutterStart,
-    children,
-    className,
-    ...restProps
-  } = props;
-  const railOptions = railWidth === void 0 ? {} : { railWidth };
-  const content = /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx5(FrameSections, { children }),
-    /* @__PURE__ */ jsx5(
-      "div",
-      {
-        className: "gridui-container gridui-frame-fill",
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx5(
-          "div",
-          {
-            className: cn6(frameContentStyles())
-          }
-        )
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsxs3(
-    FrameRailGroup,
+
+// src/frame-region-row/frame-region-row.tsx
+import { cn as cn11 } from "@gridui/style-utils";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var FrameRegionRow = (props) => {
+  const { asChild = false, contentInset = 0, className, style, ...restProps } = props;
+  const Component = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx10(
+    Component,
     {
       ...restProps,
-      rail: railScope === "page" ? rail : void 0,
-      ...railOptions,
-      className: cn6(pageFrameVariants({ width }), className),
-      children: [
-        header ? /* @__PURE__ */ jsx5(
-          "div",
-          {
-            className: "gridui-frame-page-header",
-            children: header
-          }
-        ) : null,
-        /* @__PURE__ */ jsx5(
-          "main",
-          {
-            className: "gridui-frame-main",
-            style: mainGutterStart === void 0 ? void 0 : spacingVariables("main-gutter-start", mainGutterStart),
-            children: railScope === "main" && rail !== void 0 && rail !== null && rail !== false ? /* @__PURE__ */ jsx5(
-              FrameRailGroup,
-              {
-                rail,
-                ...railOptions,
-                className: "gridui-frame-main-rail-group",
-                children: content
-              }
-            ) : content
-          }
-        ),
-        footer ? /* @__PURE__ */ jsx5(
-          "div",
-          {
-            className: "gridui-frame-page-footer",
-            children: footer
-          }
-        ) : null
-      ]
+      className: cn11("gridui-frame-region-row", className),
+      style: {
+        "--gridui-frame-region-inset": typeof contentInset === "number" ? `${contentInset}px` : contentInset,
+        ...style
+      }
     }
   );
 };
 
-// src/frame/texture/texture.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+// src/frame-texture/frame-texture.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
 var FrameTexture = (props) => {
   const { texture } = props;
-  return texture === "none" ? null : /* @__PURE__ */ jsx6(
+  return texture === "none" ? null : /* @__PURE__ */ jsx11(
     "div",
     {
       className: "gridui-frame-texture",
@@ -340,10 +444,10 @@ var FrameTexture = (props) => {
   );
 };
 
-// src/frame/section.tsx
-import { cn as cn7 } from "@gridui/style-utils";
-import { spacingVariables as spacingVariables2 } from "@gridui/style-utils/responsive";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/frame-section/frame-section.tsx
+import { cn as cn12 } from "@gridui/style-utils";
+import { spacingVariables } from "@gridui/style-utils/responsive";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var FrameSection = (props) => {
   const {
     tone = "neutral",
@@ -357,36 +461,36 @@ var FrameSection = (props) => {
     children,
     ...restProps
   } = props;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "section",
     {
       ...restProps,
-      className: cn7("gridui-container gridui-frame-section", frameToneStyles({ tone }), className),
+      className: cn12("gridui-container gridui-frame-section", frameToneStyles({ tone }), className),
       "data-edges": edges,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx12(
           FrameBoundary,
           {
             boundary
           }
         ),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "div",
           {
-            className: cn7(frameContentStyles(), "gridui-frame-surface", edges === "none" && "border-x-0"),
+            className: cn12(frameContentStyles(), "gridui-frame-surface", edges === "none" && "border-x-0"),
             style: {
-              ...spacingVariables2("section-padding-inline", paddingInline),
-              ...spacingVariables2("section-padding-block", paddingBlock)
+              ...spacingVariables("section-padding-inline", paddingInline),
+              ...spacingVariables("section-padding-block", paddingBlock)
             },
             children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx12(
                 FrameTexture,
                 {
                   texture
                 }
               ),
               children,
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx12(
                 FrameDecoration,
                 {
                   decoration: resolveFrameDecoration(boundary, decoration)
@@ -400,73 +504,38 @@ var FrameSection = (props) => {
   );
 };
 
-// src/primitives/container/style.ts
-import { cva as cva5 } from "class-variance-authority";
-var containerVariants = cva5("gridui-container", {
-  variants: {
-    width: {
-      narrow: "gridui-container-narrow",
-      standard: "gridui-container-standard",
-      wide: "gridui-container-wide"
-    }
-  },
-  defaultVariants: { width: "standard" }
-});
-
-// src/primitives/container/container.tsx
-import { cn as cn8 } from "@gridui/style-utils";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Container = (props) => {
-  const { width = "standard", className, ...restProps } = props;
-  return /* @__PURE__ */ jsx8(
+// src/frame-sections/frame-sections.tsx
+import { cn as cn13 } from "@gridui/style-utils";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var FrameSections = (props) => {
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ...restProps,
-      className: cn8(containerVariants({ width }), className)
+      className: cn13("gridui-frame-sections", className)
     }
   );
 };
 
-// src/primitives/responsive.ts
+// src/grid-item/responsive.ts
 var spanValue = (value) => {
   return value === "full" ? "1 / -1" : `span ${value} / span ${value}`;
 };
 
-// src/primitives/grid/style.ts
-import { cn as cn9 } from "@gridui/style-utils";
-import { cva as cva6 } from "class-variance-authority";
-var gridStyles = cva6(cn9(
-  "gridui-grid",
-  "grid min-w-0"
-));
-var gridCellsStyles = cva6(cn9(
-  "gridui-grid-cells",
-  "border-t border-solid border-border border-l border-solid border-border"
-));
-var gridItemStyles = cva6(cn9(
+// src/grid-item/style.ts
+import { cn as cn14 } from "@gridui/style-utils";
+import { cva as cva8 } from "class-variance-authority";
+var gridItemStyles = cva8(cn14(
   "gridui-grid-item",
   "min-w-0 wrap-anywhere"
 ));
-var gridInternalStyles = cva6(cn9(
-  "gridui-grid-internal",
-  "bg-border"
-));
-var gridVariants = cva6(gridStyles(), {
-  variants: {
-    frame: {
-      none: "",
-      cells: gridCellsStyles(),
-      internal: gridInternalStyles()
-    }
-  },
-  defaultVariants: { frame: "none" }
-});
 
-// src/primitives/grid/grid-item.tsx
-import { cn as cn10 } from "@gridui/style-utils";
-import { resolveResponsive as resolveResponsive3, spaceValue as spaceValue3 } from "@gridui/style-utils/responsive";
-import { Slot } from "@radix-ui/react-slot";
-import { jsx as jsx9 } from "react/jsx-runtime";
+// src/grid-item/grid-item.tsx
+import { cn as cn15 } from "@gridui/style-utils";
+import { resolveResponsive as resolveResponsive3, spaceValue as spaceValue4 } from "@gridui/style-utils/responsive";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var GridItem = (props) => {
   const {
     asChild = false,
@@ -483,27 +552,53 @@ var GridItem = (props) => {
     "--gridui-span": spanValue(size.base),
     "--gridui-span-md": spanValue(size.md),
     "--gridui-span-lg": spanValue(size.lg),
-    "--gridui-padding": spaceValue3(inset.base),
-    "--gridui-padding-md": spaceValue3(inset.md),
-    "--gridui-padding-lg": spaceValue3(inset.lg),
+    "--gridui-padding": spaceValue4(inset.base),
+    "--gridui-padding-md": spaceValue4(inset.md),
+    "--gridui-padding-lg": spaceValue4(inset.lg),
     ...align ? {
       display: "flex",
       alignItems: align
     } : {},
     ...style
   };
-  const Component = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx9(
+  const Component = asChild ? Slot3 : "div";
+  return /* @__PURE__ */ jsx14(
     Component,
     {
       ...restProps,
-      className: cn10(gridItemStyles(), className),
+      className: cn15(gridItemStyles(), className),
       style: layoutStyle
     }
   );
 };
 
-// src/primitives/grid/tracks.ts
+// src/grid/style.ts
+import { cn as cn16 } from "@gridui/style-utils";
+import { cva as cva9 } from "class-variance-authority";
+var gridStyles = cva9(cn16(
+  "gridui-grid",
+  "grid min-w-0"
+));
+var gridCellsStyles = cva9(cn16(
+  "gridui-grid-cells",
+  "border-t border-solid border-border border-l border-solid border-border"
+));
+var gridInternalStyles = cva9(cn16(
+  "gridui-grid-internal",
+  "bg-border"
+));
+var gridVariants = cva9(gridStyles(), {
+  variants: {
+    frame: {
+      none: "",
+      cells: gridCellsStyles(),
+      internal: gridInternalStyles()
+    }
+  },
+  defaultVariants: { frame: "none" }
+});
+
+// src/grid/tracks.ts
 var gridColumnCount = (columns) => {
   return typeof columns === "number" ? columns : columns.length;
 };
@@ -538,11 +633,11 @@ var fillGridRowSpans = (columns, spans) => {
   });
 };
 
-// src/primitives/grid/grid.tsx
-import { cn as cn11 } from "@gridui/style-utils";
-import { resolveResponsive as resolveResponsive4, spaceValue as spaceValue4 } from "@gridui/style-utils/responsive";
+// src/grid/grid.tsx
+import { cn as cn17 } from "@gridui/style-utils";
+import { resolveResponsive as resolveResponsive4, spaceValue as spaceValue5 } from "@gridui/style-utils/responsive";
 import { Children, cloneElement, isValidElement } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Grid = (props) => {
   const {
     columns = 1,
@@ -568,9 +663,9 @@ var Grid = (props) => {
     "--gridui-grid-template": gridTemplate(tracks.base),
     "--gridui-grid-template-md": gridTemplate(tracks.md),
     "--gridui-grid-template-lg": gridTemplate(tracks.lg),
-    "--gridui-gap": frame === "internal" ? "1px" : spaceValue4(spacing.base),
-    "--gridui-gap-md": frame === "internal" ? "1px" : spaceValue4(spacing.md),
-    "--gridui-gap-lg": frame === "internal" ? "1px" : spaceValue4(spacing.lg),
+    "--gridui-gap": frame === "internal" ? "1px" : spaceValue5(spacing.base),
+    "--gridui-gap-md": frame === "internal" ? "1px" : spaceValue5(spacing.md),
+    "--gridui-gap-lg": frame === "internal" ? "1px" : spaceValue5(spacing.lg),
     ...style
   };
   let content = children;
@@ -607,29 +702,119 @@ var Grid = (props) => {
       });
     });
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ...restProps,
-      className: cn11(gridVariants({ frame }), className),
+      className: cn17(gridVariants({ frame }), className),
       style: layoutStyle,
       children: content
     }
   );
 };
 
-// src/primitives/row/style.ts
-import { cn as cn12 } from "@gridui/style-utils";
-import { cva as cva7 } from "class-variance-authority";
-var rowStyles = cva7(cn12(
+// src/page-frame/style.ts
+import { cva as cva10 } from "class-variance-authority";
+var pageFrameVariants = cva10("gridui-page-frame min-h-svh", {
+  variants: {
+    width: {
+      narrow: "gridui-container-narrow",
+      standard: "gridui-container-standard",
+      wide: "gridui-container-wide"
+    }
+  },
+  defaultVariants: { width: "standard" }
+});
+
+// src/page-frame/page-frame.tsx
+import { cn as cn18 } from "@gridui/style-utils";
+import { spacingVariables as spacingVariables2 } from "@gridui/style-utils/responsive";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+var PageFrame = (props) => {
+  const {
+    width = "standard",
+    header,
+    footer,
+    rail,
+    railWidth,
+    railScope = "page",
+    mainGutterStart,
+    children,
+    className,
+    ...restProps
+  } = props;
+  const railOptions = railWidth === void 0 ? {} : { railWidth };
+  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx16(FrameSections, { children }),
+    /* @__PURE__ */ jsx16(
+      "div",
+      {
+        className: "gridui-container gridui-frame-fill",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: cn18(frameContentStyles())
+          }
+        )
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs6(
+    FrameRailGroup,
+    {
+      ...restProps,
+      rail: railScope === "page" ? rail : void 0,
+      ...railOptions,
+      className: cn18(pageFrameVariants({ width }), className),
+      children: [
+        header ? /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: "gridui-frame-page-header",
+            children: header
+          }
+        ) : null,
+        /* @__PURE__ */ jsx16(
+          "main",
+          {
+            className: "gridui-frame-main",
+            style: mainGutterStart === void 0 ? void 0 : spacingVariables2("main-gutter-start", mainGutterStart),
+            children: railScope === "main" && rail !== void 0 && rail !== null && rail !== false ? /* @__PURE__ */ jsx16(
+              FrameRailGroup,
+              {
+                rail,
+                ...railOptions,
+                className: "gridui-frame-main-rail-group",
+                children: content
+              }
+            ) : content
+          }
+        ),
+        footer ? /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: "gridui-frame-page-footer",
+            children: footer
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/row/style.ts
+import { cn as cn19 } from "@gridui/style-utils";
+import { cva as cva11 } from "class-variance-authority";
+var rowStyles = cva11(cn19(
   "gridui-row",
   "min-w-0"
 ));
 
-// src/primitives/row/row.tsx
-import { cn as cn13 } from "@gridui/style-utils";
-import { spaceValue as spaceValue5 } from "@gridui/style-utils/responsive";
-import { jsx as jsx11 } from "react/jsx-runtime";
+// src/row/row.tsx
+import { cn as cn20 } from "@gridui/style-utils";
+import { spaceValue as spaceValue6 } from "@gridui/style-utils/responsive";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Row = (props) => {
   const {
     gap = 16,
@@ -642,37 +827,38 @@ var Row = (props) => {
     style,
     ...restProps
   } = props;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       ...restProps,
-      className: cn13(rowStyles(), className),
+      className: cn20(rowStyles(), className),
       "data-inline": inline,
       style: {
         display: inline ? "inline-flex" : "flex",
         alignItems: align,
         justifyContent: justify === "between" ? "space-between" : "flex-start",
         flexWrap: wrap ? "wrap" : "nowrap",
-        gap: `${spaceValue5(rowGap)} ${spaceValue5(gap)}`,
+        gap: `${spaceValue6(rowGap)} ${spaceValue6(gap)}`,
         ...style
       }
     }
   );
 };
 
-// src/primitives/split/split.tsx
-import { cn as cn14 } from "@gridui/style-utils";
+// src/split/split.tsx
+import { cn as cn21 } from "@gridui/style-utils";
 import { resolveResponsive as resolveResponsive5 } from "@gridui/style-utils/responsive";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Split = (props) => {
-  const { direction = "row", seam = "line", className, ...restProps } = props;
+  const { direction = "row", order = "logical", seam = "line", className, ...restProps } = props;
   const directions = resolveResponsive5(direction);
   const seams = resolveResponsive5(seam);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ...restProps,
-      className: cn14("gridui-split", className),
+      className: cn21("gridui-split", className),
+      "data-order": order,
       "data-direction": directions.base,
       "data-direction-md": directions.md,
       "data-direction-lg": directions.lg,
@@ -683,18 +869,18 @@ var Split = (props) => {
   );
 };
 
-// src/primitives/stack/style.ts
-import { cn as cn15 } from "@gridui/style-utils";
-import { cva as cva8 } from "class-variance-authority";
-var stackStyles = cva8(cn15(
+// src/stack/style.ts
+import { cn as cn22 } from "@gridui/style-utils";
+import { cva as cva12 } from "class-variance-authority";
+var stackStyles = cva12(cn22(
   "gridui-stack",
   "flex min-w-0 flex-col"
 ));
 
-// src/primitives/stack/stack.tsx
-import { cn as cn16 } from "@gridui/style-utils";
-import { resolveResponsive as resolveResponsive6, spaceValue as spaceValue6 } from "@gridui/style-utils/responsive";
-import { jsx as jsx13 } from "react/jsx-runtime";
+// src/stack/stack.tsx
+import { cn as cn23 } from "@gridui/style-utils";
+import { resolveResponsive as resolveResponsive6, spaceValue as spaceValue7 } from "@gridui/style-utils/responsive";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Stack = (props) => {
   const {
     gap = 16,
@@ -707,29 +893,33 @@ var Stack = (props) => {
   } = props;
   const spacing = resolveResponsive6(gap);
   const layoutStyle = {
-    "--gridui-gap": spaceValue6(spacing.base),
-    "--gridui-gap-md": spaceValue6(spacing.md),
-    "--gridui-gap-lg": spaceValue6(spacing.lg),
+    "--gridui-gap": spaceValue7(spacing.base),
+    "--gridui-gap-md": spaceValue7(spacing.md),
+    "--gridui-gap-lg": spaceValue7(spacing.lg),
     width: width === "full" ? "100%" : void 0,
     maxWidth,
-    paddingTop: paddingStart === void 0 ? void 0 : spaceValue6(paddingStart),
+    paddingTop: paddingStart === void 0 ? void 0 : spaceValue7(paddingStart),
     ...style
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       ...restProps,
-      className: cn16(stackStyles(), className),
+      className: cn23(stackStyles(), className),
       style: layoutStyle
     }
   );
 };
 export {
   Container,
+  DashboardFrame,
+  FrameBoundary,
   FrameFooter,
   FrameHeader,
   FrameRail,
   FrameRailGroup,
+  FrameRegion,
+  FrameRegionRow,
   FrameSection,
   FrameSections,
   FrameTexture,