@gradeui/ui 0.6.0 → 0.8.0

package/dist/index.d.mts

@@ -31,6 +31,56 @@ declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HT
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
+/**
+ * AppShell — top-level page scaffold for an app-like layout.
+ *
+ * The Studio was missing a named "app layout" primitive — without one,
+ * agent-generated pages either freestyle grids or reinvent the nav-plus-
+ * content structure every time. AppShell gives them one component with a
+ * small, bounded set of layout variants so vibe-coded prototypes land in a
+ * recognisable shape: a nav region (top, side, or none) plus a main region
+ * that optionally constrains its content width.
+ *
+ * It is deliberately *just* structure: no collapse state, no context, no
+ * runtime JS. Nav content is whatever the caller drops in — a SideMenu,
+ * a TopMenu, or a hand-rolled `<nav>`. Keeping it dumb means it renders
+ * fine on the server and can be styled by consumers without fighting a
+ * behaviour model.
+ *
+ * Variants:
+ * - `nav`       — "none" | "top" | "side". Chooses the grid structure.
+ * - `maxWidth`  — "full" | "container". Caps the main region width for
+ *                 marketing-style pages without the caller having to wrap
+ *                 their content in a max-w-* div.
+ * - `sticky`    — boolean. Sticks top nav to the viewport top / side nav
+ *                 to the viewport when the page scrolls. Sensible default
+ *                 for app chrome.
+ */
+declare const shellVariants: (props?: ({
+    nav?: "none" | "top" | "side" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const navVariants: (props?: ({
+    placement?: "none" | "top" | "side" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const mainVariants: (props?: ({
+    maxWidth?: "full" | "container" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AppShellProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof shellVariants> {
+    /** Render as the single child element via Radix Slot — lets you stamp the
+     *  shell layout onto an existing root tag without an extra wrapper. */
+    asChild?: boolean;
+}
+declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
+interface AppShellNavProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof navVariants> {
+    asChild?: boolean;
+}
+declare const AppShellNav: React$1.ForwardRefExoticComponent<AppShellNavProps & React$1.RefAttributes<HTMLElement>>;
+interface AppShellMainProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof mainVariants> {
+    asChild?: boolean;
+}
+declare const AppShellMain: React$1.ForwardRefExoticComponent<AppShellMainProps & React$1.RefAttributes<HTMLElement>>;
+
 declare const badgeVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | "secondary" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
     rounded?: "default" | "full" | null | undefined;
@@ -211,6 +261,76 @@ interface RowProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<
 }
 declare const Row: React$1.ForwardRefExoticComponent<RowProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Grid — 2D layout primitive. The partner to Stack and Row.
+ *
+ * Stack handles vertical, Row handles horizontal, Grid handles the
+ * responsive 2D case — most commonly a set of equal-width tiles (stat
+ * cards, feature cards, pricing columns) that needs to collapse
+ * gracefully on narrow viewports. Without this primitive, every
+ * vibe-coded dashboard reinvents `grid grid-cols-1 md:grid-cols-2
+ * lg:grid-cols-4` and the settings panel has nothing to mutate.
+ *
+ * `cols` names the DESIRED desktop column count. Each value is a
+ * baked-in responsive ladder that matches the standard pattern for that
+ * count (1→2→N for small counts, 2→3→N for denser grids) so the model
+ * just writes `<Grid cols="4">` and gets the same behaviour it would
+ * hand-roll. If you need bespoke breakpoints, override via `className`.
+ *
+ * Sharing the `gap` / `align` scale with Stack and Row is deliberate:
+ * when the Studio panel offers a "switch layout type" control between
+ * Stack / Row / Grid, those props transfer cleanly — only `cols`
+ * (Grid-only) and `justify` / `wrap` (Row-only) are lost.
+ */
+declare const gridVariants: (props?: ({
+    cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Grid's layout classes onto an existing semantic tag
+     *  without nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Flex — the unopinionated flexbox primitive.
+ *
+ * The CSS-aligned partner to Stack / Row / Grid. Where Stack and Row bake in
+ * a direction and a sensible gap/align default, Flex exposes the raw CSS
+ * knobs and ships with CSS's own defaults — direction=row, gap=none,
+ * justify=start, align=stretch, wrap=nowrap. Nothing is opinionated; you pay
+ * for exactly the props you set.
+ *
+ * Use Flex when:
+ *   - You need `direction="col-reverse"` or `"row-reverse"` — Stack and Row
+ *     can't express either without falling back to className.
+ *   - You want CSS defaults (stretch alignment, no baked-in gap) rather than
+ *     Row's "items-center gap-md" starting point.
+ *   - You're reaching for `className="flex …"` and want the settings-panel
+ *     editability you lose when hand-rolling utility classes.
+ *
+ * Otherwise prefer Stack (vertical) / Row (horizontal) / Grid (2D) —
+ * they're easier to read at a glance and have defaults tuned for the 95%
+ * case. Flex is the escape hatch, not the default.
+ */
+declare const flexVariants: (props?: ({
+    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FlexProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Flex's layout classes onto an existing semantic tag without
+     *  nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -233,7 +353,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "top" | "left" | "right" | "bottom" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -1323,4 +1443,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AppShell, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, flexVariants, generateTheme, getTheme, gridVariants, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };

package/dist/index.d.ts

@@ -31,6 +31,56 @@ declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HT
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
+/**
+ * AppShell — top-level page scaffold for an app-like layout.
+ *
+ * The Studio was missing a named "app layout" primitive — without one,
+ * agent-generated pages either freestyle grids or reinvent the nav-plus-
+ * content structure every time. AppShell gives them one component with a
+ * small, bounded set of layout variants so vibe-coded prototypes land in a
+ * recognisable shape: a nav region (top, side, or none) plus a main region
+ * that optionally constrains its content width.
+ *
+ * It is deliberately *just* structure: no collapse state, no context, no
+ * runtime JS. Nav content is whatever the caller drops in — a SideMenu,
+ * a TopMenu, or a hand-rolled `<nav>`. Keeping it dumb means it renders
+ * fine on the server and can be styled by consumers without fighting a
+ * behaviour model.
+ *
+ * Variants:
+ * - `nav`       — "none" | "top" | "side". Chooses the grid structure.
+ * - `maxWidth`  — "full" | "container". Caps the main region width for
+ *                 marketing-style pages without the caller having to wrap
+ *                 their content in a max-w-* div.
+ * - `sticky`    — boolean. Sticks top nav to the viewport top / side nav
+ *                 to the viewport when the page scrolls. Sensible default
+ *                 for app chrome.
+ */
+declare const shellVariants: (props?: ({
+    nav?: "none" | "top" | "side" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const navVariants: (props?: ({
+    placement?: "none" | "top" | "side" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const mainVariants: (props?: ({
+    maxWidth?: "full" | "container" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AppShellProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof shellVariants> {
+    /** Render as the single child element via Radix Slot — lets you stamp the
+     *  shell layout onto an existing root tag without an extra wrapper. */
+    asChild?: boolean;
+}
+declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
+interface AppShellNavProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof navVariants> {
+    asChild?: boolean;
+}
+declare const AppShellNav: React$1.ForwardRefExoticComponent<AppShellNavProps & React$1.RefAttributes<HTMLElement>>;
+interface AppShellMainProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof mainVariants> {
+    asChild?: boolean;
+}
+declare const AppShellMain: React$1.ForwardRefExoticComponent<AppShellMainProps & React$1.RefAttributes<HTMLElement>>;
+
 declare const badgeVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | "secondary" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
     rounded?: "default" | "full" | null | undefined;
@@ -211,6 +261,76 @@ interface RowProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<
 }
 declare const Row: React$1.ForwardRefExoticComponent<RowProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Grid — 2D layout primitive. The partner to Stack and Row.
+ *
+ * Stack handles vertical, Row handles horizontal, Grid handles the
+ * responsive 2D case — most commonly a set of equal-width tiles (stat
+ * cards, feature cards, pricing columns) that needs to collapse
+ * gracefully on narrow viewports. Without this primitive, every
+ * vibe-coded dashboard reinvents `grid grid-cols-1 md:grid-cols-2
+ * lg:grid-cols-4` and the settings panel has nothing to mutate.
+ *
+ * `cols` names the DESIRED desktop column count. Each value is a
+ * baked-in responsive ladder that matches the standard pattern for that
+ * count (1→2→N for small counts, 2→3→N for denser grids) so the model
+ * just writes `<Grid cols="4">` and gets the same behaviour it would
+ * hand-roll. If you need bespoke breakpoints, override via `className`.
+ *
+ * Sharing the `gap` / `align` scale with Stack and Row is deliberate:
+ * when the Studio panel offers a "switch layout type" control between
+ * Stack / Row / Grid, those props transfer cleanly — only `cols`
+ * (Grid-only) and `justify` / `wrap` (Row-only) are lost.
+ */
+declare const gridVariants: (props?: ({
+    cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Grid's layout classes onto an existing semantic tag
+     *  without nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Flex — the unopinionated flexbox primitive.
+ *
+ * The CSS-aligned partner to Stack / Row / Grid. Where Stack and Row bake in
+ * a direction and a sensible gap/align default, Flex exposes the raw CSS
+ * knobs and ships with CSS's own defaults — direction=row, gap=none,
+ * justify=start, align=stretch, wrap=nowrap. Nothing is opinionated; you pay
+ * for exactly the props you set.
+ *
+ * Use Flex when:
+ *   - You need `direction="col-reverse"` or `"row-reverse"` — Stack and Row
+ *     can't express either without falling back to className.
+ *   - You want CSS defaults (stretch alignment, no baked-in gap) rather than
+ *     Row's "items-center gap-md" starting point.
+ *   - You're reaching for `className="flex …"` and want the settings-panel
+ *     editability you lose when hand-rolling utility classes.
+ *
+ * Otherwise prefer Stack (vertical) / Row (horizontal) / Grid (2D) —
+ * they're easier to read at a glance and have defaults tuned for the 95%
+ * case. Flex is the escape hatch, not the default.
+ */
+declare const flexVariants: (props?: ({
+    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FlexProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Flex's layout classes onto an existing semantic tag without
+     *  nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -233,7 +353,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "top" | "left" | "right" | "bottom" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -1323,4 +1443,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AppShell, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, flexVariants, generateTheme, getTheme, gridVariants, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };