@gradeui/ui 0.5.3 → 0.7.0

package/dist/index.d.mts

@@ -26,13 +26,63 @@ declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | null | undefined;
+    variant?: "destructive" | "success" | "warning" | "info" | "highlight" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 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?: "container" | "full" | 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;
+    variant?: "secondary" | "destructive" | "success" | "warning" | "info" | "highlight" | "default" | "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;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
@@ -40,8 +90,8 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
+    size?: "lg" | "sm" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -183,6 +233,34 @@ declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive
 declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Row — horizontal layout primitive.
+ *
+ * The partner to Stack. Use for button groups, inline form layouts,
+ * split hero/logo rows, anything on one line. The default `align="center"`
+ * matches what most real rows want — vertically-centred icon-plus-text,
+ * centred button groups. `justify` covers the main-axis distribution
+ * explicitly so the agent doesn't reach for `ml-auto` to push things
+ * apart.
+ *
+ * Distinct from a two-pane Split: Row is for evenly flowing children
+ * with a shared gap; Split enforces an explicit pane ratio (1/3 + 2/3
+ * etc.) and is a separate primitive.
+ */
+declare const rowVariants: (props?: ({
+    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface RowProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Row's layout classes onto an existing semantic tag without
+     *  nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Row: React$1.ForwardRefExoticComponent<RowProps & 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>>;
 
@@ -205,7 +283,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> {
 }
@@ -225,6 +303,32 @@ declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivE
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Stack — vertical layout primitive.
+ *
+ * Reach for this as the default top-level wrapper inside the Studio main
+ * slot when composing multiple regions (hero + content + footer). The
+ * point is to stop the agent from freestyling `flex flex-col gap-6`
+ * inline on every generation — a named layout component with a bounded
+ * gap scale gives the Studio settings panel something to mutate, and
+ * keeps vertical rhythm consistent across designs.
+ *
+ * Cross-axis default is `stretch` so Sections/Cards fill the container
+ * width, which is what 95% of callers want. Override with `align="center"`
+ * for a centred narrow column (auth cards, marketing copy).
+ */
+declare const stackVariants: (props?: ({
+    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StackProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Stack's layout classes onto an existing semantic tag
+     *  (`<section>`, `<main>`, `<nav>`) without nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
@@ -1269,4 +1373,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, 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, 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, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, 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, 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, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };

package/dist/index.d.ts

@@ -26,13 +26,63 @@ declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | null | undefined;
+    variant?: "destructive" | "success" | "warning" | "info" | "highlight" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 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?: "container" | "full" | 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;
+    variant?: "secondary" | "destructive" | "success" | "warning" | "info" | "highlight" | "default" | "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;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
@@ -40,8 +90,8 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
+    size?: "lg" | "sm" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -183,6 +233,34 @@ declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive
 declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Row — horizontal layout primitive.
+ *
+ * The partner to Stack. Use for button groups, inline form layouts,
+ * split hero/logo rows, anything on one line. The default `align="center"`
+ * matches what most real rows want — vertically-centred icon-plus-text,
+ * centred button groups. `justify` covers the main-axis distribution
+ * explicitly so the agent doesn't reach for `ml-auto` to push things
+ * apart.
+ *
+ * Distinct from a two-pane Split: Row is for evenly flowing children
+ * with a shared gap; Split enforces an explicit pane ratio (1/3 + 2/3
+ * etc.) and is a separate primitive.
+ */
+declare const rowVariants: (props?: ({
+    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface RowProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Row's layout classes onto an existing semantic tag without
+     *  nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Row: React$1.ForwardRefExoticComponent<RowProps & 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>>;
 
@@ -205,7 +283,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> {
 }
@@ -225,6 +303,32 @@ declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivE
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Stack — vertical layout primitive.
+ *
+ * Reach for this as the default top-level wrapper inside the Studio main
+ * slot when composing multiple regions (hero + content + footer). The
+ * point is to stop the agent from freestyling `flex flex-col gap-6`
+ * inline on every generation — a named layout component with a bounded
+ * gap scale gives the Studio settings panel something to mutate, and
+ * keeps vertical rhythm consistent across designs.
+ *
+ * Cross-axis default is `stretch` so Sections/Cards fill the container
+ * width, which is what 95% of callers want. Override with `align="center"`
+ * for a centred narrow column (auth cards, marketing copy).
+ */
+declare const stackVariants: (props?: ({
+    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface StackProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Stack's layout classes onto an existing semantic tag
+     *  (`<section>`, `<main>`, `<nav>`) without nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
@@ -1269,4 +1373,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, 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, 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, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, 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, 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, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };