@gridui/grid 2.1.4 → 2.3.0

package/README.md

@@ -5,8 +5,9 @@ See the [usage handbook](../../docs/usage/README.md) and
 
 `@gridui/grid` owns Container, Grid, GridItem, Split, Stack, Row,
 PageFrame, FrameSections, FrameSection, frame chrome, rails, textures,
-and structural boundaries. It does not know website routes or domain state.
-Load its explicit `styles.css` export after theme styles and before Layout.
+FrameRegion/FrameRegionRow for composed edge geometry,
+and the public FrameBoundary primitive for structural boundaries. It does not know website routes or domain state.
+Load its explicit `styles.css` export after Theme and before styles of composed families.
 Theme supplies token values; `@gridui/style-utils/responsive` supplies the
 React-free spacing and breakpoint-value calculations.
 
@@ -17,9 +18,13 @@ controls and tables inside those regions so their own borders remain intact.
 See [linear regions](docs/README.md#linear-regions) for the full contract.
 
 FrameSection and FrameFooter accept `tone="neutral" | "brand" | "warning" | "danger"`.
-Non-neutral tones scope background, foreground, muted text, borders, controls,
-and focus colors to that region. Theme owns the paired light/dark tokens;
-Grid owns their inherited application. Nested non-neutral tones establish their own palette; neutral inherits its surroundings.
+Non-neutral tones reuse Theme's public `paletteClass` contract for background,
+foreground, muted text, borders, controls, and focus colors. Theme owns both
+palette values and their scoped semantic mapping; Grid owns region geometry.
+Nested non-neutral tones establish their own palette; `tone="neutral"` continues
+to inherit its surroundings. Use `paletteClass("neutral")` from `@gridui/theme`
+on a native content surface for an explicit reset to registered application
+neutral colors without adding a section or boundary.
 
 FrameSection owns its leading separator and inline frame edges. Use
 `boundary="none"` and `edges="none"` when an enclosing region owns them.
@@ -51,8 +56,13 @@ the final section's tone for its leading line.
 Grid `frame="cells"` owns outer and cell edges; `frame="internal"` owns seams
 inside an existing frame. Use `fillLastRow` with direct GridItem children to
 fill incomplete rows at every breakpoint. Explicit gaps are disallowed in
-framed grids. Hover/focus outlines paint above neighboring seams and page lines.
-Table cell lines remain Data-owned and control borders remain Controls-owned.
+framed grids. For wrapping lists with a container-driven track count, use
+`columns="auto"` with `minItemWidth` and optional responsive gap. The minimum is
+capped to available space. `Grid asChild` and `GridItem asChild` preserve native
+ul/ol/li hosts without wrapper elements. Adaptive mode excludes frames and
+`fillLastRow`; root `asChild` also excludes `fillLastRow`, preserving the fixed
+planner's direct-item contract. Hover/focus outlines paint above neighboring seams and page lines.
+Table cell lines belong to Table; functional control borders belong to their Core families.
 
 See the [Grid contract](docs/README.md#grid-foundation) for geometry and API.
 
@@ -61,14 +71,11 @@ See the [Grid contract](docs/README.md#grid-foundation) for geometry and API.
 The package root `src/index.ts` declares the public API, and `src/styles.css`
 imports component styles. Neither entry point contains component implementation.
 
-- `primitives/` groups Container, Grid/GridItem with track planning, Split,
-  Stack, and Row with their own styles. `responsive.ts` retains only column,
-  track, and span geometry; shared responsive spacing comes from Style-utils.
-  `geometry.css` owns the shared Container/frame-rail tracks.
-- `frame/` groups page hosts, chrome, rails, boundaries, decorations, and
-  textures with their CSS and variants. `section.tsx` composes those groups.
-  Only shared content styles and tone variants remain in `frame/style.ts`;
-  `tone.css` owns inherited region colors. Primitives never import Frame.
+Every public component owns a matching directory, such as `src/grid/`,
+`src/grid-item/`, `src/split/`, and `src/frame-section/`. Private parts, styles,
+and helpers stay beside their owner. `src/shared/` contains only collaborators
+used by multiple components: track planning, inherited frame geometry, region
+tones, and shared boundary/chrome rules. Responsive spacing comes from Style-utils.
 
 Cross-package browser fixtures live in root
 `scripts/development/preview/fixtures` and use public exports. Browser
@@ -78,9 +85,11 @@ Unit tests mirror these owners under `test/unit/primitives/` and
 `test/unit/frame/`. Tests can combine public primitives to protect their
 collaboration. Keep ordinary presentation in the owner's CVA `style.ts`. Retain
 track resolution, seams, and decorative geometry in colocated CSS imported by
-the root stylesheet. See the shared
-style organization contract.
+the root stylesheet. See the [source conventions](../../docs/development/typescript-conventions.md#component-directories).
 Consumers use the package root and explicit stylesheet export; internal file
 paths are private.
 
 See [quarterly release history](.changeset/history/) for prepared release notes and consumption records.
+
+`DashboardFrame` supplies full-height workspace gutters and structural edges without
+creating a main landmark. See [dashboard frames](docs/README.md#dashboard-frames).

package/dist/{primitives/container → container}/container.d.ts

@@ -1,10 +1,10 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Primitives_Container
+ * @namespace Container
  * @description Container
  */
-import type { ElementProps } from "../types";
+import type { ElementProps } from "../shared/types";
 import type { FC } from "react";
 export type ContainerProps = ElementProps & {
     readonly width?: "narrow" | "standard" | "wide";

package/dist/{primitives/container → container}/style.d.ts

@@ -1,9 +1,9 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Primitives_Container
+ * @namespace Container
  * @description Style
  */
 export declare const containerVariants: (props?: ({
-    width?: "standard" | "narrow" | "wide" | null | undefined;
+    width?: "narrow" | "standard" | "wide" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/dashboard-frame/dashboard-frame.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace DashboardFrame
+ * @description Dashboard Frame
+ */
+import { type FrameDecorationStyle } from "../shared/decoration";
+import { dashboardFrameVariants } from "./style";
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, FC } from "react";
+export type DashboardFrameSize = NonNullable<VariantProps<typeof dashboardFrameVariants>["startSize"]>;
+export type DashboardFrameProps = ComponentPropsWithRef<"div"> & {
+    readonly decoration?: FrameDecorationStyle;
+    readonly startDecoration?: FrameDecorationStyle;
+    readonly endDecoration?: FrameDecorationStyle;
+    readonly startSize?: DashboardFrameSize;
+    readonly endSize?: DashboardFrameSize;
+    readonly compactStartSize?: DashboardFrameSize;
+    readonly compactEndSize?: DashboardFrameSize;
+};
+export declare const DashboardFrame: FC<DashboardFrameProps>;

package/dist/dashboard-frame/style.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace DashboardFrame
+ * @description Style
+ */
+export declare const dashboardFrameVariants: (props?: ({
+    startSize?: "small" | "none" | "medium" | "large" | null | undefined;
+    endSize?: "small" | "none" | "medium" | "large" | null | undefined;
+    compactStartSize?: "small" | "none" | "medium" | "large" | null | undefined;
+    compactEndSize?: "small" | "none" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/frame-boundary/frame-boundary.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameBoundary
+ * @description Frame Boundary
+ */
+import { frameBoundaryStyles } from "./style";
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, FC } from "react";
+export type FrameBoundaryStyle = NonNullable<VariantProps<typeof frameBoundaryStyles>["boundary"]>;
+export type FrameBoundaryProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
+    readonly boundary?: FrameBoundaryStyle;
+    readonly extent?: "content" | "frame";
+};
+export declare const FrameBoundary: FC<FrameBoundaryProps>;

package/dist/frame-boundary/style.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameBoundary
+ * @description Style
+ */
+export declare const frameBoundaryStyles: (props?: ({
+    boundary?: "line" | "none" | "band" | "stripe" | "space" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/frame-footer/frame-footer.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameFooter
+ * @description Frame Footer
+ */
+import { type FrameBoundaryStyle } from "../frame-boundary/frame-boundary";
+import { type ChromeProps } from "../shared/chrome";
+import { type FrameDecorationStyle } from "../shared/decoration";
+import { type FrameTone } from "../shared/frame-style";
+import type { ComponentPropsWithRef, FC, ReactNode } from "react";
+export type FrameFooterProps = ComponentPropsWithRef<"footer"> & ChromeProps & {
+    readonly contentLayout?: "flex" | "block";
+    readonly tone?: FrameTone;
+    readonly boundary?: FrameBoundaryStyle;
+    readonly decoration?: FrameDecorationStyle;
+    readonly signature?: ReactNode;
+    readonly signatureAppearance?: "standard" | "cropped";
+};
+export declare const FrameFooter: FC<FrameFooterProps>;

package/dist/{frame/chrome → frame-footer}/style.d.ts

@@ -1,9 +1,8 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Frame_Chrome
+ * @namespace FrameFooter
  * @description Style
  */
-export declare const frameChromeStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const frameSignatureStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const frameSignatureCroppedStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/frame-header/frame-header.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameHeader
+ * @description Frame Header
+ */
+import { type ChromeProps } from "../shared/chrome";
+import { type Space } from "@gridui/style-utils/responsive";
+import type { ComponentPropsWithRef, FC } from "react";
+export type FrameHeaderProps = ComponentPropsWithRef<"header"> & ChromeProps & {
+    readonly wrap?: boolean;
+    readonly gap?: Space;
+    readonly justify?: "start" | "between";
+};
+export declare const FrameHeader: FC<FrameHeaderProps>;

package/dist/frame-rail/frame-rail.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameRail
+ * @description Frame Rail
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type FrameRailProps = ComponentPropsWithRef<"div"> & {
+    readonly placement?: "start" | "sticky-bottom";
+};
+export declare const FrameRail: FC<FrameRailProps>;

package/dist/{frame/rail → frame-rail}/style.d.ts

@@ -1,7 +1,7 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Frame_Rail
+ * @namespace FrameRail
  * @description Style
  */
 export declare const frameRailStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/{frame/rail/rail.d.ts → frame-rail-group/frame-rail-group.d.ts}

@@ -1,15 +1,11 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Frame_Rail
- * @description Rail
+ * @namespace FrameRailGroup
+ * @description Frame Rail Group
  */
-import type { Responsive, Space } from "@gridui/style-utils/responsive";
+import { type Responsive, type Space } from "@gridui/style-utils/responsive";
 import type { ComponentPropsWithRef, FC, ReactNode } from "react";
-export type FrameRailProps = ComponentPropsWithRef<"div"> & {
-    readonly placement?: "start" | "sticky-bottom";
-};
-export declare const FrameRail: FC<FrameRailProps>;
 export type FrameRailGroupProps = ComponentPropsWithRef<"div"> & {
     readonly rail?: ReactNode;
     readonly railWidth?: Responsive<Space>;

package/dist/frame-region/frame-region.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameRegion
+ * @description Frame Region
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type FrameRegionProps = ComponentPropsWithRef<"div"> & {
+    readonly asChild?: boolean;
+    readonly edge?: "none" | "left" | "right" | "both";
+};
+export declare const FrameRegion: FC<FrameRegionProps>;

package/dist/frame-region-row/frame-region-row.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameRegionRow
+ * @description Frame Region Row
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type FrameRegionRowProps = ComponentPropsWithRef<"div"> & {
+    readonly asChild?: boolean;
+    readonly contentInset?: number | string;
+};
+export declare const FrameRegionRow: FC<FrameRegionRowProps>;

package/dist/{frame/section.d.ts → frame-section/frame-section.d.ts}

@@ -1,14 +1,14 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Frame
- * @description Section
+ * @namespace FrameSection
+ * @description Frame Section
  */
-import type { FrameBoundaryStyle } from "./boundary/boundary";
-import type { FrameDecorationStyle } from "./decoration/decoration";
-import type { FrameTone } from "./style";
-import type { FrameTextureStyle } from "./texture/texture";
-import type { Responsive, Space } from "@gridui/style-utils/responsive";
+import { type FrameBoundaryStyle } from "../frame-boundary/frame-boundary";
+import { type FrameDecorationStyle } from "../shared/decoration";
+import { type FrameTone } from "../shared/frame-style";
+import type { FrameTextureStyle } from "../shared/texture-types";
+import { type Responsive, type Space } from "@gridui/style-utils/responsive";
 import type { ComponentPropsWithRef, FC } from "react";
 export type FrameSectionProps = ComponentPropsWithRef<"section"> & {
     readonly tone?: FrameTone;

package/dist/frame-sections/frame-sections.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameSections
+ * @description Frame Sections
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type FrameSectionsProps = ComponentPropsWithRef<"div">;
+export declare const FrameSections: FC<FrameSectionsProps>;

package/dist/{frame/texture/texture.d.ts → frame-texture/frame-texture.d.ts}

@@ -1,11 +1,11 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Frame_Texture
- * @description Texture
+ * @namespace FrameTexture
+ * @description Frame Texture
  */
+import type { FrameTextureStyle } from "../shared/texture-types";
 import type { FC } from "react";
-export type FrameTextureStyle = "none" | "grid" | "dots" | "lines";
 export type FrameTextureProps = {
     readonly texture: FrameTextureStyle;
 };

package/dist/grid/grid.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace Grid
+ * @description Grid
+ */
+import type { ElementProps } from "../shared/types";
+import type { GridColumns } from "./responsive";
+import { type Responsive, type Space } from "@gridui/style-utils/responsive";
+import { type FC, type ReactElement } from "react";
+type GridFrameOptions = {
+    readonly frame?: "none";
+    readonly gap?: Responsive<Space>;
+} | {
+    readonly frame: "none" | "cells" | "internal";
+    readonly gap?: never;
+};
+type GridLayoutOptions = ({
+    readonly columns?: Responsive<GridColumns>;
+    readonly minItemWidth?: never;
+} & GridFrameOptions) | {
+    readonly columns: "auto";
+    readonly minItemWidth: Responsive<string | number>;
+    readonly frame?: "none";
+    readonly gap?: Responsive<Space>;
+    readonly fillLastRow?: false;
+};
+export type GridProps = ElementProps & GridLayoutOptions & ({
+    readonly asChild?: false;
+    readonly fillLastRow?: boolean;
+} | {
+    readonly asChild: true;
+    readonly children: ReactElement;
+    readonly fillLastRow?: false;
+});
+export declare const Grid: FC<GridProps>;
+export {};

package/dist/grid/responsive.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace Grid
+ * @description Responsive
+ */
+import type { Columns } from "../shared/responsive-types";
+export type GridTrack = "1fr" | "auto";
+export type GridColumns = Columns | readonly [GridTrack, ...GridTrack[]];

package/dist/{primitives/grid → grid}/style.d.ts

@@ -1,12 +1,11 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Primitives_Grid
+ * @namespace Grid
  * @description Style
  */
 export declare const gridStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const gridCellsStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const gridItemStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const gridInternalStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const gridVariants: (props?: ({
     frame?: "none" | "cells" | "internal" | null | undefined;

package/dist/{primitives/grid → grid}/tracks.d.ts

@@ -1,10 +1,11 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Primitives_Grid
+ * @namespace Grid
  * @description Tracks
  */
-import type { GridColumns } from "../responsive";
+import type { GridColumns } from "./responsive";
 export declare const gridColumnCount: (columns: GridColumns) => number;
 export declare const gridTemplate: (columns: GridColumns) => string;
+export declare const adaptiveGridTemplate: (minItemWidth: string | number) => string;
 export declare const fillGridRowSpans: (columns: number, spans: readonly number[]) => number[];

package/dist/{primitives/grid → grid-item}/grid-item.d.ts

@@ -1,12 +1,12 @@
 /**
  * @author WMXPY
  * @package Grid
- * @namespace Primitives_Grid
+ * @namespace GridItem
  * @description Grid Item
  */
-import type { Span } from "../responsive";
-import type { ElementProps } from "../types";
-import type { Responsive, Space } from "@gridui/style-utils/responsive";
+import type { Span } from "../shared/responsive-types";
+import type { ElementProps } from "../shared/types";
+import { type Responsive, type Space } from "@gridui/style-utils/responsive";
 import type { FC } from "react";
 export type GridItemProps = ElementProps & {
     readonly asChild?: boolean;

package/dist/grid-item/responsive.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace GridItem
+ * @description Responsive
+ */
+import type { Span } from "../shared/responsive-types";
+export declare const spanValue: (value: Span) => string;

package/dist/grid-item/style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace GridItem
+ * @description Style
+ */
+export declare const gridItemStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/index.d.ts

@@ -4,5 +4,47 @@
  * @namespace Root
  * @description Index
  */
-export * from "./frame/export";
-export * from "./primitives/export";
+export type { ContainerProps } from "./container/container";
+export { Container } from "./container/container";
+export type { DashboardFrameProps, DashboardFrameSize } from "./dashboard-frame/dashboard-frame";
+export { DashboardFrame } from "./dashboard-frame/dashboard-frame";
+export type { FrameBoundaryProps, FrameBoundaryStyle } from "./frame-boundary/frame-boundary";
+export { FrameBoundary } from "./frame-boundary/frame-boundary";
+export type { FrameFooterProps } from "./frame-footer/frame-footer";
+export { FrameFooter } from "./frame-footer/frame-footer";
+export type { FrameHeaderProps } from "./frame-header/frame-header";
+export { FrameHeader } from "./frame-header/frame-header";
+export type { FrameRailProps } from "./frame-rail/frame-rail";
+export { FrameRail } from "./frame-rail/frame-rail";
+export type { FrameRailGroupProps } from "./frame-rail-group/frame-rail-group";
+export { FrameRailGroup } from "./frame-rail-group/frame-rail-group";
+export type { FrameRegionProps } from "./frame-region/frame-region";
+export { FrameRegion } from "./frame-region/frame-region";
+export type { FrameRegionRowProps } from "./frame-region-row/frame-region-row";
+export { FrameRegionRow } from "./frame-region-row/frame-region-row";
+export type { FrameSectionProps } from "./frame-section/frame-section";
+export { FrameSection } from "./frame-section/frame-section";
+export type { FrameSectionsProps } from "./frame-sections/frame-sections";
+export { FrameSections } from "./frame-sections/frame-sections";
+export type { FrameTextureProps } from "./frame-texture/frame-texture";
+export { FrameTexture } from "./frame-texture/frame-texture";
+export type { GridProps } from "./grid/grid";
+export { Grid } from "./grid/grid";
+export type { GridColumns } from "./grid/responsive";
+export type { GridTrack } from "./grid/responsive";
+export type { GridItemProps } from "./grid-item/grid-item";
+export { GridItem } from "./grid-item/grid-item";
+export type { PageFrameProps } from "./page-frame/page-frame";
+export { PageFrame } from "./page-frame/page-frame";
+export type { RowProps } from "./row/row";
+export { Row } from "./row/row";
+export type { FrameDecorationStyle } from "./shared/decoration";
+export type { FrameTone } from "./shared/frame-style";
+export type { Columns } from "./shared/responsive-types";
+export type { Span } from "./shared/responsive-types";
+export type { FrameTextureStyle } from "./shared/texture-types";
+export type { SplitDirection } from "./split/split";
+export type { SplitProps } from "./split/split";
+export { Split } from "./split/split";
+export type { StackProps } from "./stack/stack";
+export { Stack } from "./stack/stack";