@gradeui/ui 3.2.0 → 3.3.0

package/dist/index.d.mts

@@ -628,21 +628,28 @@ declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAtt
  * heights so a button placed next to a tab strip lines up without
  * any per-call className overrides:
  *
+ *   2xs: h-5 (20px)  — densest tool-panel size; matches Figma Button size=2xs
+ *   xs:  h-6 (24px)  — tool-panel density; matches Figma Button size=xs
  *   sm:  h-7 (28px)  — matches `<TabsList size="sm">` height
  *   md:  h-8 (32px)  — matches `<TabsList size="md">` height (default)
  *   lg:  h-10 (40px) — matches `<TabsList size="lg">` height
- *   icon: h-8 w-8    — square variant, md height
  *
  * `default` is preserved as an alias for `md` so existing call sites
  * keep working through the rename.
  *
+ * `iconOnly` squares the button at WHATEVER `size` it has (2xs=20, sm=28,
+ * md=32, lg=40) by dropping horizontal padding and matching width to
+ * height. It's a boolean modifier on top of the height ramp — there is no
+ * separate icon size value — and the icon you pass as the child is centered.
+ *
  * Type and icon sizes also follow the Tabs scale (text-xs + size-3.5
  * at sm/md, text-sm + size-4 at lg) so the visual rhythm reads
  * consistent across primitives.
  */
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "raised" | null | undefined;
-    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "icon" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | null | undefined;
+    iconOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -657,6 +664,54 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Section + Container — the page scaffold (STUDIO-SECTIONS.md).
+ *
+ * A page is an ordered stack of Sections. `Section` is the FULL-WIDTH band: it
+ * owns a colour `scope` (subtheme) + vertical `pad` rhythm, and nothing else —
+ * it never constrains width. `Container` is the measure: a centred max-width +
+ * gutters you drop INSIDE a section to contain content; omit it for a full-bleed
+ * band. The content is FREE; Section never bakes a title/CTA (that's
+ * `SectionBlock`'s opinionated job). The known composable parts (Eyebrow /
+ * Title / Subtitle / Description / Actions / Media) give the common shape
+ * design intent without constraining it.
+ */
+type SectionScope = "default" | "inverse" | "brand" | "accent" | "muted" | "card";
+type ContainerMaxW = "sm" | "md" | "lg" | "xl" | "prose" | "full";
+declare const bandVariants: (props?: ({
+    pad?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bandVariants> {
+    /** Colour subtheme — applies the `scope-*` class (STUDIO-COLOR.md). Unset =
+     *  the page surface (transparent). */
+    scope?: SectionScope;
+    /** Visual band background — image / video / gradient / shader (e.g.
+     *  `<BackgroundFill>`). Renders BEHIND the content; Section owns the
+     *  relative + overflow-hidden + z-layering. Works with `scope`, which
+     *  re-tones the content tokens so text stays legible over the media. */
+    background?: React.ReactNode;
+    /** Semantic element. */
+    as?: "section" | "header" | "footer" | "div";
+}
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+declare const containerVariants: (props?: ({
+    maxW?: "sm" | "md" | "lg" | "xl" | "full" | "prose" | null | undefined;
+    grid?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
+    as?: "div" | "section";
+}
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+declare const SectionEyebrow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const SectionTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SectionSubtitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SectionDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SectionActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** SectionMedia — a SLOT. Holds any media: a single image (MediaSurface),
+ *  a Carousel, a VideoPlayer, an embed, or a whole app UI. The section
+ *  doesn't care what's inside; the media frames itself. */
+declare const SectionMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): React.JSX.Element;
@@ -2590,12 +2645,12 @@ declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive
  * shared selection ring (`--selected`). Pass `label` to caption it (the
  * caption also becomes the accessible name / tooltip).
  *
- * Sizing is the t-shirt scale (xs → xl); reach for `size` over `h-*`/`w-*`
+ * Sizing is the t-shirt scale (2xs → xl, 16px → 56px); reach for `size` over `h-*`/`w-*`
  * utilities so the scale stays on tokens. Shape is square / rounded (rides
  * `--radius`) / circle.
  */
 declare const swatchVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     shape?: "rounded" | "square" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SwatchSize = NonNullable<VariantProps<typeof swatchVariants>["size"]>;
@@ -2605,6 +2660,13 @@ interface SwatchProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">,
     color?: string;
     /** A Grade colour token name (no `--`), resolved as `oklch(var(--<token>))`. */
     token?: string;
+    /** Fill kind. Defaults to "solid", or is inferred from `image` / `gradient`
+     *  when omitted. Drives what the chip renders in place. */
+    type?: "solid" | "gradient" | "image";
+    /** CSS gradient for `type="gradient"` — e.g. `"linear-gradient(135deg,#6366f1,#ec4899)"`. */
+    gradient?: string;
+    /** Image URL for `type="image"` — rendered cover-fit behind the chip. */
+    image?: string;
     /** Optional caption rendered beneath the chip; also the accessible name. */
     label?: React.ReactNode;
     /** Draws the shared selection ring (`--selected`). */
@@ -2770,7 +2832,7 @@ interface SortableItemProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;
 interface SortableHandleProps extends React.HTMLAttributes<HTMLElement> {
     /** Render as the child element via Slot — typical pattern is
-     *  `<Sortable.Handle asChild><Button variant="ghost" size="icon">…</Button></Sortable.Handle>`. */
+     *  `<Sortable.Handle asChild><Button variant="ghost" iconOnly>…</Button></Sortable.Handle>`. */
     asChild?: boolean;
 }
 declare const SortableHandle: React.ForwardRefExoticComponent<SortableHandleProps & React.RefAttributes<HTMLElement>>;
@@ -4549,6 +4611,133 @@ declare function FillPicker({ value, onChange, className }: FillPickerProps): Re
 declare namespace FillPicker {
     var displayName: string;
 }
+interface FillSectionProps {
+    /** The ordered list of fills (top-most last, Figma-style — but the list
+     *  renders in array order; the consumer owns z-ordering semantics). */
+    value: FillValue[];
+    /** Fired with the next list on any add / edit / remove / reorder. */
+    onChange: (value: FillValue[]) => void;
+    /** Section heading. Default "Fills". */
+    title?: string;
+    className?: string;
+}
+declare function FillSection({ value, onChange, title, className, }: FillSectionProps): React.JSX.Element;
+declare namespace FillSection {
+    var displayName: string;
+}
+
+/**
+ * ColorPicker — a token-led, grouped, searchable colour picker. The
+ * single-select sibling of FillPicker's solid tab: where FillPicker is the
+ * full Figma paint popover (solid / gradient / image / …), ColorPicker is
+ * the focused "pick one colour token" control.
+ *
+ * Two exports:
+ *   - <ColorPickerPanel> — the popover BODY (header + search + grouped
+ *     list). Reusable: the inspector's colour fields host it inside their
+ *     own TokenField-chrome popover so every colour control shares ONE
+ *     panel. Matches the Figma "Color Picker" frame: a "Color" title with
+ *     a ghost close button, a search input, then DropdownMenuItem-style
+ *     rows (Swatch + token name + check) grouped by family.
+ *   - <ColorPicker> — panel + a self-contained trigger (swatch + name or,
+ *     with `triggerVariant="inline"`, just the swatch).
+ *
+ * Grade is token-led, so the value is a token NAME ("action/primary"), the
+ * literal "transparent", or null. The Swatch resolves the live CSS variable,
+ * so every chip re-voices when the theme changes.
+ */
+
+/** A named family of colour tokens, rendered as one group in the list. */
+interface ColorTokenGroup {
+    /** Group heading (e.g. "action"). */
+    group: string;
+    /** Token NAMES in this group (e.g. "action/primary"). */
+    tokens: string[];
+}
+/** Default token groups — the Grade semantic colour families. */
+declare const DEFAULT_COLOR_TOKEN_GROUPS: ColorTokenGroup[];
+/** The literal value for "no fill". */
+declare const TRANSPARENT = "transparent";
+type ColorPickerTriggerVariant = "default" | "inline";
+interface ColorPickerProps {
+    /** A Grade colour token NAME ("action/primary"), the literal "transparent",
+     *  or null when nothing is picked. */
+    value?: string | null;
+    /** Fired with the next value (token name, "transparent", or null). */
+    onValueChange?: (value: string | null) => void;
+    /** Token families offered in the list. Defaults to the Grade semantic set. */
+    tokens?: ColorTokenGroup[];
+    /** Show the search input. Default true. */
+    searchable?: boolean;
+    /** `default` (form-control surface, swatch + name) or `inline` (just a
+     *  clickable swatch — the inspector / fill-row affordance). */
+    triggerVariant?: ColorPickerTriggerVariant;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    /** Search-input placeholder. */
+    searchPlaceholder?: string;
+    /** Message rendered when search returns no rows. */
+    emptyMessage?: string;
+    /** Include a "Transparent" option at the top. Default true. */
+    allowTransparent?: boolean;
+    /** Popover header title. Default "Color"; pass null to drop the header. */
+    title?: string | null;
+    /** PopoverContent alignment. Default "start". */
+    align?: "start" | "center" | "end";
+    /** Lock the control to a display of its current value. */
+    disabled?: boolean;
+    /** Extra classes on the trigger. */
+    className?: string;
+    /** Forwarded to the trigger for tests / Studio selection. */
+    id?: string;
+    "aria-label"?: string;
+}
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * GradientEditor — edit a multi-stop CSS gradient with token-led stops.
+ *
+ * A type Select (Linear / Radial / Angular) with reverse + rotate actions, a
+ * live full-width preview bar (a <Swatch type="gradient">), then a "Stops"
+ * list: each stop is a position %, a colour (token via <ColorPicker>, or a
+ * raw colour), an opacity %, and a remove button. An add button in the Stops
+ * header appends a stop.
+ *
+ * The CSS gradient string is computed from type + angle + stops; token stops
+ * resolve to `oklch(var(--<token>))` so the preview re-voices with the theme.
+ * It emits the structured `GradientValue` (NOT a string) so the value stays
+ * editable and serialisable — the caller renders the string via
+ * `gradientToCss(value)` (exported alongside).
+ */
+
+type GradientType = "linear" | "radial" | "angular";
+/** A single colour stop. `token` wins over `color`; `opacity` is 0–1. */
+interface GradientStop {
+    /** Stable key for list rendering / edits. */
+    id: string;
+    /** Position along the gradient, 0–100 (%). */
+    position: number;
+    /** A Grade colour token NAME ("action/primary"). Takes precedence. */
+    token?: string;
+    /** A raw CSS colour, used when no `token`. */
+    color?: string;
+    /** Stop opacity, 0–1. */
+    opacity: number;
+}
+interface GradientValue {
+    type: GradientType;
+    /** Angle in degrees for linear / angular gradients. */
+    angle?: number;
+    stops: GradientStop[];
+}
+/** Compute the CSS gradient string from a structured value. */
+declare function gradientToCss(value: GradientValue): string;
+interface GradientEditorProps {
+    value: GradientValue;
+    onChange: (value: GradientValue) => void;
+    className?: string;
+}
+declare const GradientEditor: React.ForwardRefExoticComponent<GradientEditorProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * ShaderPresetPreview — a thumbnail-sized preview of a shader preset.
@@ -5226,4 +5415,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, Combobox, type ComboboxOption, type ComboboxProps, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DemoSpeed, DemoStage, type DemoStageProps, type DemoTrigger, 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, FILL_TOKENS, FRAGMENT_HEADER, Field, FieldDescription, FieldLabel, type FieldProps, FieldTrailing, FillPicker, type FillPickerProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, TRANSPARENT as COLOR_PICKER_TRANSPARENT, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, ColorPicker, type ColorPickerProps, type ColorTokenGroup, Combobox, type ComboboxOption, type ComboboxProps, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, Container, type ContainerMaxW, type ContainerProps, DEFAULT_COLOR_TOKEN_GROUPS, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DemoSpeed, DemoStage, type DemoStageProps, type DemoTrigger, 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, FILL_TOKENS, FRAGMENT_HEADER, Field, FieldDescription, FieldLabel, type FieldProps, FieldTrailing, FillPicker, type FillPickerProps, FillSection, type FillSectionProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, GradientEditor, type GradientEditorProps, type GradientStop, type GradientType, type GradientValue, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Section, SectionActions, SectionDescription, SectionEyebrow, SectionMedia, type SectionProps, type SectionScope, SectionSubtitle, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, containerVariants, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gradientToCss, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, bandVariants as sectionBandVariants, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };

package/dist/index.d.ts

@@ -628,21 +628,28 @@ declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAtt
  * heights so a button placed next to a tab strip lines up without
  * any per-call className overrides:
  *
+ *   2xs: h-5 (20px)  — densest tool-panel size; matches Figma Button size=2xs
+ *   xs:  h-6 (24px)  — tool-panel density; matches Figma Button size=xs
  *   sm:  h-7 (28px)  — matches `<TabsList size="sm">` height
  *   md:  h-8 (32px)  — matches `<TabsList size="md">` height (default)
  *   lg:  h-10 (40px) — matches `<TabsList size="lg">` height
- *   icon: h-8 w-8    — square variant, md height
  *
  * `default` is preserved as an alias for `md` so existing call sites
  * keep working through the rename.
  *
+ * `iconOnly` squares the button at WHATEVER `size` it has (2xs=20, sm=28,
+ * md=32, lg=40) by dropping horizontal padding and matching width to
+ * height. It's a boolean modifier on top of the height ramp — there is no
+ * separate icon size value — and the icon you pass as the child is centered.
+ *
  * Type and icon sizes also follow the Tabs scale (text-xs + size-3.5
  * at sm/md, text-sm + size-4 at lg) so the visual rhythm reads
  * consistent across primitives.
  */
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "raised" | null | undefined;
-    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "icon" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | null | undefined;
+    iconOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -657,6 +664,54 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Section + Container — the page scaffold (STUDIO-SECTIONS.md).
+ *
+ * A page is an ordered stack of Sections. `Section` is the FULL-WIDTH band: it
+ * owns a colour `scope` (subtheme) + vertical `pad` rhythm, and nothing else —
+ * it never constrains width. `Container` is the measure: a centred max-width +
+ * gutters you drop INSIDE a section to contain content; omit it for a full-bleed
+ * band. The content is FREE; Section never bakes a title/CTA (that's
+ * `SectionBlock`'s opinionated job). The known composable parts (Eyebrow /
+ * Title / Subtitle / Description / Actions / Media) give the common shape
+ * design intent without constraining it.
+ */
+type SectionScope = "default" | "inverse" | "brand" | "accent" | "muted" | "card";
+type ContainerMaxW = "sm" | "md" | "lg" | "xl" | "prose" | "full";
+declare const bandVariants: (props?: ({
+    pad?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bandVariants> {
+    /** Colour subtheme — applies the `scope-*` class (STUDIO-COLOR.md). Unset =
+     *  the page surface (transparent). */
+    scope?: SectionScope;
+    /** Visual band background — image / video / gradient / shader (e.g.
+     *  `<BackgroundFill>`). Renders BEHIND the content; Section owns the
+     *  relative + overflow-hidden + z-layering. Works with `scope`, which
+     *  re-tones the content tokens so text stays legible over the media. */
+    background?: React.ReactNode;
+    /** Semantic element. */
+    as?: "section" | "header" | "footer" | "div";
+}
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+declare const containerVariants: (props?: ({
+    maxW?: "sm" | "md" | "lg" | "xl" | "full" | "prose" | null | undefined;
+    grid?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
+    as?: "div" | "section";
+}
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+declare const SectionEyebrow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const SectionTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SectionSubtitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SectionDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SectionActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** SectionMedia — a SLOT. Holds any media: a single image (MediaSurface),
+ *  a Carousel, a VideoPlayer, an embed, or a whole app UI. The section
+ *  doesn't care what's inside; the media frames itself. */
+declare const SectionMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): React.JSX.Element;
@@ -2590,12 +2645,12 @@ declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive
  * shared selection ring (`--selected`). Pass `label` to caption it (the
  * caption also becomes the accessible name / tooltip).
  *
- * Sizing is the t-shirt scale (xs → xl); reach for `size` over `h-*`/`w-*`
+ * Sizing is the t-shirt scale (2xs → xl, 16px → 56px); reach for `size` over `h-*`/`w-*`
  * utilities so the scale stays on tokens. Shape is square / rounded (rides
  * `--radius`) / circle.
  */
 declare const swatchVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     shape?: "rounded" | "square" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SwatchSize = NonNullable<VariantProps<typeof swatchVariants>["size"]>;
@@ -2605,6 +2660,13 @@ interface SwatchProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">,
     color?: string;
     /** A Grade colour token name (no `--`), resolved as `oklch(var(--<token>))`. */
     token?: string;
+    /** Fill kind. Defaults to "solid", or is inferred from `image` / `gradient`
+     *  when omitted. Drives what the chip renders in place. */
+    type?: "solid" | "gradient" | "image";
+    /** CSS gradient for `type="gradient"` — e.g. `"linear-gradient(135deg,#6366f1,#ec4899)"`. */
+    gradient?: string;
+    /** Image URL for `type="image"` — rendered cover-fit behind the chip. */
+    image?: string;
     /** Optional caption rendered beneath the chip; also the accessible name. */
     label?: React.ReactNode;
     /** Draws the shared selection ring (`--selected`). */
@@ -2770,7 +2832,7 @@ interface SortableItemProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;
 interface SortableHandleProps extends React.HTMLAttributes<HTMLElement> {
     /** Render as the child element via Slot — typical pattern is
-     *  `<Sortable.Handle asChild><Button variant="ghost" size="icon">…</Button></Sortable.Handle>`. */
+     *  `<Sortable.Handle asChild><Button variant="ghost" iconOnly>…</Button></Sortable.Handle>`. */
     asChild?: boolean;
 }
 declare const SortableHandle: React.ForwardRefExoticComponent<SortableHandleProps & React.RefAttributes<HTMLElement>>;
@@ -4549,6 +4611,133 @@ declare function FillPicker({ value, onChange, className }: FillPickerProps): Re
 declare namespace FillPicker {
     var displayName: string;
 }
+interface FillSectionProps {
+    /** The ordered list of fills (top-most last, Figma-style — but the list
+     *  renders in array order; the consumer owns z-ordering semantics). */
+    value: FillValue[];
+    /** Fired with the next list on any add / edit / remove / reorder. */
+    onChange: (value: FillValue[]) => void;
+    /** Section heading. Default "Fills". */
+    title?: string;
+    className?: string;
+}
+declare function FillSection({ value, onChange, title, className, }: FillSectionProps): React.JSX.Element;
+declare namespace FillSection {
+    var displayName: string;
+}
+
+/**
+ * ColorPicker — a token-led, grouped, searchable colour picker. The
+ * single-select sibling of FillPicker's solid tab: where FillPicker is the
+ * full Figma paint popover (solid / gradient / image / …), ColorPicker is
+ * the focused "pick one colour token" control.
+ *
+ * Two exports:
+ *   - <ColorPickerPanel> — the popover BODY (header + search + grouped
+ *     list). Reusable: the inspector's colour fields host it inside their
+ *     own TokenField-chrome popover so every colour control shares ONE
+ *     panel. Matches the Figma "Color Picker" frame: a "Color" title with
+ *     a ghost close button, a search input, then DropdownMenuItem-style
+ *     rows (Swatch + token name + check) grouped by family.
+ *   - <ColorPicker> — panel + a self-contained trigger (swatch + name or,
+ *     with `triggerVariant="inline"`, just the swatch).
+ *
+ * Grade is token-led, so the value is a token NAME ("action/primary"), the
+ * literal "transparent", or null. The Swatch resolves the live CSS variable,
+ * so every chip re-voices when the theme changes.
+ */
+
+/** A named family of colour tokens, rendered as one group in the list. */
+interface ColorTokenGroup {
+    /** Group heading (e.g. "action"). */
+    group: string;
+    /** Token NAMES in this group (e.g. "action/primary"). */
+    tokens: string[];
+}
+/** Default token groups — the Grade semantic colour families. */
+declare const DEFAULT_COLOR_TOKEN_GROUPS: ColorTokenGroup[];
+/** The literal value for "no fill". */
+declare const TRANSPARENT = "transparent";
+type ColorPickerTriggerVariant = "default" | "inline";
+interface ColorPickerProps {
+    /** A Grade colour token NAME ("action/primary"), the literal "transparent",
+     *  or null when nothing is picked. */
+    value?: string | null;
+    /** Fired with the next value (token name, "transparent", or null). */
+    onValueChange?: (value: string | null) => void;
+    /** Token families offered in the list. Defaults to the Grade semantic set. */
+    tokens?: ColorTokenGroup[];
+    /** Show the search input. Default true. */
+    searchable?: boolean;
+    /** `default` (form-control surface, swatch + name) or `inline` (just a
+     *  clickable swatch — the inspector / fill-row affordance). */
+    triggerVariant?: ColorPickerTriggerVariant;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    /** Search-input placeholder. */
+    searchPlaceholder?: string;
+    /** Message rendered when search returns no rows. */
+    emptyMessage?: string;
+    /** Include a "Transparent" option at the top. Default true. */
+    allowTransparent?: boolean;
+    /** Popover header title. Default "Color"; pass null to drop the header. */
+    title?: string | null;
+    /** PopoverContent alignment. Default "start". */
+    align?: "start" | "center" | "end";
+    /** Lock the control to a display of its current value. */
+    disabled?: boolean;
+    /** Extra classes on the trigger. */
+    className?: string;
+    /** Forwarded to the trigger for tests / Studio selection. */
+    id?: string;
+    "aria-label"?: string;
+}
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * GradientEditor — edit a multi-stop CSS gradient with token-led stops.
+ *
+ * A type Select (Linear / Radial / Angular) with reverse + rotate actions, a
+ * live full-width preview bar (a <Swatch type="gradient">), then a "Stops"
+ * list: each stop is a position %, a colour (token via <ColorPicker>, or a
+ * raw colour), an opacity %, and a remove button. An add button in the Stops
+ * header appends a stop.
+ *
+ * The CSS gradient string is computed from type + angle + stops; token stops
+ * resolve to `oklch(var(--<token>))` so the preview re-voices with the theme.
+ * It emits the structured `GradientValue` (NOT a string) so the value stays
+ * editable and serialisable — the caller renders the string via
+ * `gradientToCss(value)` (exported alongside).
+ */
+
+type GradientType = "linear" | "radial" | "angular";
+/** A single colour stop. `token` wins over `color`; `opacity` is 0–1. */
+interface GradientStop {
+    /** Stable key for list rendering / edits. */
+    id: string;
+    /** Position along the gradient, 0–100 (%). */
+    position: number;
+    /** A Grade colour token NAME ("action/primary"). Takes precedence. */
+    token?: string;
+    /** A raw CSS colour, used when no `token`. */
+    color?: string;
+    /** Stop opacity, 0–1. */
+    opacity: number;
+}
+interface GradientValue {
+    type: GradientType;
+    /** Angle in degrees for linear / angular gradients. */
+    angle?: number;
+    stops: GradientStop[];
+}
+/** Compute the CSS gradient string from a structured value. */
+declare function gradientToCss(value: GradientValue): string;
+interface GradientEditorProps {
+    value: GradientValue;
+    onChange: (value: GradientValue) => void;
+    className?: string;
+}
+declare const GradientEditor: React.ForwardRefExoticComponent<GradientEditorProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * ShaderPresetPreview — a thumbnail-sized preview of a shader preset.
@@ -5226,4 +5415,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, Combobox, type ComboboxOption, type ComboboxProps, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DemoSpeed, DemoStage, type DemoStageProps, type DemoTrigger, 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, FILL_TOKENS, FRAGMENT_HEADER, Field, FieldDescription, FieldLabel, type FieldProps, FieldTrailing, FillPicker, type FillPickerProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, TRANSPARENT as COLOR_PICKER_TRANSPARENT, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, ColorPicker, type ColorPickerProps, type ColorTokenGroup, Combobox, type ComboboxOption, type ComboboxProps, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, Container, type ContainerMaxW, type ContainerProps, DEFAULT_COLOR_TOKEN_GROUPS, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DemoSpeed, DemoStage, type DemoStageProps, type DemoTrigger, 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, FILL_TOKENS, FRAGMENT_HEADER, Field, FieldDescription, FieldLabel, type FieldProps, FieldTrailing, FillPicker, type FillPickerProps, FillSection, type FillSectionProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, GradientEditor, type GradientEditorProps, type GradientStop, type GradientType, type GradientValue, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Section, SectionActions, SectionDescription, SectionEyebrow, SectionMedia, type SectionProps, type SectionScope, SectionSubtitle, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, containerVariants, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gradientToCss, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, bandVariants as sectionBandVariants, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };