@gradeui/ui 2.1.0 → 3.1.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _gradeui_contracts from '@gradeui/contracts';
 import { ComponentContract } from '@gradeui/contracts';
 import { z } from 'zod';
-import * as React$1 from 'react';
+import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -33,8 +33,8 @@ import * as RechartsPrimitive from 'recharts';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { M as MapProps, a as MapHandle, b as MapMarkerProps } from './types-BxywIwvG.mjs';
-export { C as Coords, c as MapAppearance, d as MapError, e as MapErrorCode } from './types-BxywIwvG.mjs';
+import { M as MapProps, a as MapHandle, b as MapMarkerProps } from './types-B45Uirkp.mjs';
+export { C as Coords, c as MapAppearance, d as MapError, e as MapErrorCode } from './types-B45Uirkp.mjs';
 import * as THREE from 'three';
 import { ClassValue } from 'clsx';
 
@@ -113,6 +113,14 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
         label: string;
         description: string;
     };
+    instanceId: {
+        schema: z.ZodOptional<z.ZodString>;
+        design: "content";
+        group: string;
+        control: "text";
+        label: string;
+        description: string;
+    };
     source: {
         schema: z.ZodOptional<z.ZodUnion<[z.ZodObject<{
             kind: z.ZodLiteral<"album">;
@@ -362,10 +370,10 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
     };
 }>;
 
-declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Callout — inline, ambient, non-blocking status/feedback surface.
@@ -391,11 +399,11 @@ declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const calloutVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Callout: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+declare const Callout: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CalloutTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
-declare const CalloutDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const CalloutTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CalloutDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 
 /**
  * AppShell — top-level page scaffold for an app-like or marketing layout.
@@ -448,32 +456,32 @@ declare const mainVariants: (props?: ({
     maxWidth?: "full" | "container" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const footerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-interface AppShellProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof shellVariants> {
+interface AppShellProps extends React.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 AppShellHeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof headerVariants> {
+declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
+interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof headerVariants> {
     asChild?: boolean;
 }
-declare const AppShellHeader: React$1.ForwardRefExoticComponent<AppShellHeaderProps & React$1.RefAttributes<HTMLElement>>;
-interface AppShellNavProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof navVariants> {
+declare const AppShellHeader: React.ForwardRefExoticComponent<AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
+interface AppShellNavProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof navVariants> {
     asChild?: boolean;
 }
-declare const AppShellNav: React$1.ForwardRefExoticComponent<AppShellNavProps & React$1.RefAttributes<HTMLElement>>;
-interface AppShellAsideProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof asideVariants> {
+declare const AppShellNav: React.ForwardRefExoticComponent<AppShellNavProps & React.RefAttributes<HTMLElement>>;
+interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof asideVariants> {
     asChild?: boolean;
 }
-declare const AppShellAside: React$1.ForwardRefExoticComponent<AppShellAsideProps & React$1.RefAttributes<HTMLElement>>;
-interface AppShellMainProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof mainVariants> {
+declare const AppShellAside: React.ForwardRefExoticComponent<AppShellAsideProps & React.RefAttributes<HTMLElement>>;
+interface AppShellMainProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof mainVariants> {
     asChild?: boolean;
 }
-declare const AppShellMain: React$1.ForwardRefExoticComponent<AppShellMainProps & React$1.RefAttributes<HTMLElement>>;
-interface AppShellFooterProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof footerVariants> {
+declare const AppShellMain: React.ForwardRefExoticComponent<AppShellMainProps & React.RefAttributes<HTMLElement>>;
+interface AppShellFooterProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof footerVariants> {
     asChild?: boolean;
 }
-declare const AppShellFooter: React$1.ForwardRefExoticComponent<AppShellFooterProps & React$1.RefAttributes<HTMLElement>>;
+declare const AppShellFooter: React.ForwardRefExoticComponent<AppShellFooterProps & React.RefAttributes<HTMLElement>>;
 
 /**
  * Avatar — circular user/entity glyph. Wraps Radix's avatar primitive
@@ -496,25 +504,25 @@ declare const AppShellFooter: React$1.ForwardRefExoticComponent<AppShellFooterPr
 declare const avatarSizes: (props?: ({
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface AvatarProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarSizes> {
+interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarSizes> {
 }
-declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 declare const avatarFallbackTones: (props?: ({
     tone?: "muted" | "primary" | "violet" | "amber" | "emerald" | "sky" | "rose" | "plum" | "lime" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AvatarTone = NonNullable<VariantProps<typeof avatarFallbackTones>["tone"]>;
-interface AvatarFallbackProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, VariantProps<typeof avatarFallbackTones> {
+interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, VariantProps<typeof avatarFallbackTones> {
 }
-declare const AvatarFallback: React$1.ForwardRefExoticComponent<AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "destructive" | "outline" | "highlight" | "success" | "warning" | "info" | "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> {
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
-declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
+declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React.JSX.Element;
 
 /**
  * Surface — what a container is *made of*.
@@ -579,7 +587,7 @@ declare const bannerVariants: (props?: ({
     align?: "between" | "start" | "center" | null | undefined;
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface BannerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof bannerVariants> {
+interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof bannerVariants> {
     /**
      * Material the banner is *made of*. Defaults to `solid` (the
      * variant's tinted bg). `glass` is useful when the banner sits over
@@ -603,14 +611,14 @@ interface BannerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
      * Leading slot — typically a single Lucide icon. The status icon
      * is NOT inferred from variant; pass the one that fits your message.
      */
-    icon?: React$1.ReactNode;
+    icon?: React.ReactNode;
     /**
      * Optional trailing action — usually a Button or anchor. Sits to the
      * left of the dismiss button.
      */
-    action?: React$1.ReactNode;
+    action?: React.ReactNode;
 }
-declare const Banner: React$1.ForwardRefExoticComponent<BannerProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Button — primary action primitive.
@@ -635,15 +643,23 @@ declare const buttonVariants: (props?: ({
     variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "raised" | null | undefined;
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    /** Presence TRAIT: tactile elevation (bevel + drop + hover glow +
+     *  pressed sink) layered onto WHATEVER variant the button wears —
+     *  a raised primary, raised outline, etc. Glow tone reads
+     *  --btn-glow → --accent-glow → --selected-glow; override
+     *  per-button via style={{ "--btn-glow": "var(--warning)" }}.
+     *  variant="raised" remains the neutral-key alias (trait +
+     *  secondary surface). */
+    raised?: boolean;
 }
-declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
-}): React$1.JSX.Element;
-declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): React$1.JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
 
 /**
  * Carousel — token-driven slideshow primitive built on embla-carousel.
@@ -688,7 +704,7 @@ declare function CalendarDayButton({ className, day, modifiers, ...props }: Reac
  */
 
 type EmblaApi = NonNullable<UseEmblaCarouselType[1]>;
-interface CarouselProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Loop back to slide 0 after the last one. Default true. */
     loop?: boolean;
     /** Slide alignment within the viewport when not all slides are full-width.
@@ -722,7 +738,7 @@ interface AutoplayConfig {
      *  matches the MediaSurface "play when visible" convention. Default true. */
     pauseWhenOffscreen?: boolean;
 }
-interface CarouselRootComponent extends React$1.ForwardRefExoticComponent<CarouselProps & React$1.RefAttributes<HTMLDivElement>> {
+interface CarouselRootComponent extends React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>> {
     Slide: typeof CarouselSlide;
     VideoSlide: typeof CarouselVideoSlide;
     Dots: typeof CarouselDots;
@@ -730,13 +746,13 @@ interface CarouselRootComponent extends React$1.ForwardRefExoticComponent<Carous
     Prev: typeof CarouselPrev;
     Next: typeof CarouselNext;
 }
-interface CarouselSlideProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Per-slide autoplay duration in ms. Overrides the carousel's default
      *  delay for this slide only. e.g. `duration={15000}` keeps a hero
      *  still on screen for 15s while the rest cycle at 5s. */
     duration?: number;
 }
-declare const CarouselSlide: React$1.ForwardRefExoticComponent<CarouselSlideProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CarouselSlide: React.ForwardRefExoticComponent<CarouselSlideProps & React.RefAttributes<HTMLDivElement>>;
 interface CarouselVideoSlideProps extends Omit<CarouselSlideProps, "children"> {
     src: string;
     /** Poster shown until the slide becomes active. Reuses the
@@ -753,8 +769,8 @@ interface CarouselVideoSlideProps extends Omit<CarouselSlideProps, "children"> {
     /** Object-fit for the video. Default `"cover"`. */
     fit?: "cover" | "contain";
 }
-declare const CarouselVideoSlide: React$1.ForwardRefExoticComponent<CarouselVideoSlideProps & React$1.RefAttributes<HTMLDivElement>>;
-interface CarouselDotsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+declare const CarouselVideoSlide: React.ForwardRefExoticComponent<CarouselVideoSlideProps & React.RefAttributes<HTMLDivElement>>;
+interface CarouselDotsProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Position the dots relative to the viewport. Default `"below"` puts
      *  them in flow underneath; `"overlay"` floats them at the bottom of
      *  the carousel area on top of the slides. */
@@ -766,25 +782,25 @@ interface CarouselDotsProps extends React$1.HTMLAttributes<HTMLDivElement> {
         index: number;
         active: boolean;
         onClick: () => void;
-    }) => React$1.ReactNode;
+    }) => React.ReactNode;
 }
-declare const CarouselDots: React$1.ForwardRefExoticComponent<CarouselDotsProps & React$1.RefAttributes<HTMLDivElement>>;
-interface CarouselArrowsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+declare const CarouselDots: React.ForwardRefExoticComponent<CarouselDotsProps & React.RefAttributes<HTMLDivElement>>;
+interface CarouselArrowsProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Position relative to the viewport. `"overlay"` (default) floats the
      *  arrows over the slides; `"outside"` places them in flow alongside
      *  the carousel (useful when the viewport is full-bleed). */
     position?: "overlay" | "outside";
 }
-declare const CarouselArrows: React$1.ForwardRefExoticComponent<CarouselArrowsProps & React$1.RefAttributes<HTMLDivElement>>;
-interface CarouselNavButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+declare const CarouselArrows: React.ForwardRefExoticComponent<CarouselArrowsProps & React.RefAttributes<HTMLDivElement>>;
+interface CarouselNavButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
-declare const CarouselPrev: React$1.ForwardRefExoticComponent<CarouselNavButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const CarouselNext: React$1.ForwardRefExoticComponent<CarouselNavButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const CarouselPrev: React.ForwardRefExoticComponent<CarouselNavButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<CarouselNavButtonProps & React.RefAttributes<HTMLButtonElement>>;
 declare const Carousel: CarouselRootComponent;
 
 declare function useCarouselApi(): EmblaApi | undefined;
 
-interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * What the card surface is *made of*. Composes with `shadow-elevation-*`
      * (depth) and `gds-aura-*` (state signal) — see PRESENCE.md.
@@ -799,14 +815,14 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
      */
     surface?: Surface;
 }
-declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
-declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Field — the inline composition primitive for a control + its caption.
@@ -839,17 +855,17 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive
  * RadioCard / CheckboxCard / SwitchCard instead — see `selection-card.tsx`.
  */
 type FieldLayout = "option" | "setting";
-declare const FieldLabel: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
-declare const FieldDescription: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
-declare const FieldTrailing: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
-interface FieldProps extends React$1.HTMLAttributes<HTMLDivElement> {
+declare const FieldLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FieldDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FieldTrailing: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
     /** `option` (control leads) or `setting` (text leads, control trailing). */
     layout?: FieldLayout;
 }
-declare const Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefAttributes<HTMLDivElement>> & {
-    Label: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
-    Description: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
-    Trailing: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>> & {
+    Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Trailing: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 };
 
 /**
@@ -884,30 +900,30 @@ declare const Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefA
 type IndicatorPosition = "leading" | "trailing";
 interface SelectionCardOwnProps {
     /** Title line. Omit and pass `children` for fully custom content. */
-    label?: React$1.ReactNode;
+    label?: React.ReactNode;
     /** Secondary line under the label. */
-    description?: React$1.ReactNode;
+    description?: React.ReactNode;
     /** Optional slot rendered between the content and the indicator
      *  (a Badge, price, kbd hint, …). */
-    aside?: React$1.ReactNode;
+    aside?: React.ReactNode;
     /** Hide the dot/check/switch glyph — selection is then conveyed purely by
      *  the card's selected border + background. Semantics stay intact. */
     hideIndicator?: boolean;
     /** Which side the indicator sits on. Default `trailing`. */
     indicatorPosition?: IndicatorPosition;
 }
-interface RadioCardProps extends Omit<React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "children">, SelectionCardOwnProps {
-    children?: React$1.ReactNode;
+interface RadioCardProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "children">, SelectionCardOwnProps {
+    children?: React.ReactNode;
 }
-declare const RadioCard: React$1.ForwardRefExoticComponent<RadioCardProps & React$1.RefAttributes<HTMLButtonElement>>;
-interface CheckboxCardProps extends Omit<React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "children">, SelectionCardOwnProps {
-    children?: React$1.ReactNode;
+declare const RadioCard: React.ForwardRefExoticComponent<RadioCardProps & React.RefAttributes<HTMLButtonElement>>;
+interface CheckboxCardProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "children">, SelectionCardOwnProps {
+    children?: React.ReactNode;
 }
-declare const CheckboxCard: React$1.ForwardRefExoticComponent<CheckboxCardProps & React$1.RefAttributes<HTMLButtonElement>>;
-interface SwitchCardProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, "children">, SelectionCardOwnProps {
-    children?: React$1.ReactNode;
+declare const CheckboxCard: React.ForwardRefExoticComponent<CheckboxCardProps & React.RefAttributes<HTMLButtonElement>>;
+interface SwitchCardProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, "children">, SelectionCardOwnProps {
+    children?: React.ReactNode;
 }
-declare const SwitchCard: React$1.ForwardRefExoticComponent<SwitchCardProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SwitchCard: React.ForwardRefExoticComponent<SwitchCardProps & React.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Code — syntax-highlighted code surface with diff, line-emphasis, and
@@ -969,7 +985,7 @@ interface CodeDiff {
     /** 1-indexed line numbers marked as removed (red bg + `-` gutter). */
     removed?: number[];
 }
-interface CodeProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+interface CodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Source code to render. Optional when `steps` is provided — the
      * scripted machine builds its own buffer and ignores `source`. When
@@ -1084,7 +1100,7 @@ interface CodeProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "childr
      */
     maxLines?: number;
 }
-declare const Code: React$1.ForwardRefExoticComponent<CodeProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Message — the canonical "avatar + author + timestamp + body" row.
@@ -1122,26 +1138,26 @@ declare const Code: React$1.ForwardRefExoticComponent<CodeProps & React$1.RefAtt
  *   - Don't use Message for non-people activity (system events,
  *     log lines). Reach for Callout or a plain Row.
  */
-interface MessageProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Display name of the message author. */
     author: string;
     /**
      * Timestamp string ("11:24", "2 hours ago") OR any node for custom
      * formatting (tooltip-wrapped time, link to permalink, etc).
      */
-    timestamp?: React$1.ReactNode;
+    timestamp?: React.ReactNode;
     /**
      * Avatar slot. Pass any `<Avatar>` composition. When omitted, the
      * row renders without an avatar column — handy for grouped messages
      * from the same author where only the first row shows the avatar.
      */
-    avatar?: React$1.ReactNode;
+    avatar?: React.ReactNode;
     /**
      * Small chip(s) next to the author name. Use for "OP", "Bot",
      * "Admin", or any role/state badge that belongs in the header
      * rhythm rather than the body.
      */
-    badge?: React$1.ReactNode;
+    badge?: React.ReactNode;
     /**
      * Editing state — renders an "(edited)" hint next to the timestamp.
      * Pass a string to customise the label (e.g. "(edited 2 minutes ago)").
@@ -1157,12 +1173,12 @@ interface MessageProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "tit
      * icon buttons (reply / react / pin / more). Pushed to the right
      * with `ml-auto`.
      */
-    actions?: React$1.ReactNode;
+    actions?: React.ReactNode;
     /**
      * Reactions slot — renders below the body. Typically a Row of
      * reaction chips (emoji + count). Hidden when no node is passed.
      */
-    reactions?: React$1.ReactNode;
+    reactions?: React.ReactNode;
     /**
      * Thread / reply count — renders a "N replies" link affordance
      * below the body. Click handler is the consumer's responsibility.
@@ -1192,9 +1208,9 @@ interface MessageProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "tit
      * can embed rich content — Markdown-rendered prose, images,
      * embedded cards, etc. Plain text is the common case.
      */
-    children: React$1.ReactNode;
+    children: React.ReactNode;
 }
-declare const Message: React$1.ForwardRefExoticComponent<MessageProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Shared types + presets for scripted component demos.
@@ -1343,7 +1359,7 @@ interface UseScriptedDemoOptions<TStep> {
      */
     loopDelay?: number;
     /** Container ref for inView detection. Required when `trigger="inView"`. */
-    containerRef?: React$1.RefObject<HTMLElement | null>;
+    containerRef?: React.RefObject<HTMLElement | null>;
     /**
      * Fires when one loop iteration completes (or the whole run, when
      * `loop` is false). Consumers can use this to reset their buffer or
@@ -1395,7 +1411,7 @@ declare function useScriptedDemo<TStep>(opts: UseScriptedDemoOptions<TStep>): Sc
  * than motion / framer keeps the cursor available in environments
  * that disable JS animation but still render the page.
  */
-interface BlinkingCursorProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+interface BlinkingCursorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
      * Visual variant. `inline` (default) is for caret-in-text demos
      * (Code, Composer). `block` is for terminal-style square cursors
@@ -1403,7 +1419,7 @@ interface BlinkingCursorProps extends Omit<React$1.HTMLAttributes<HTMLSpanElemen
      */
     variant?: "inline" | "block";
 }
-declare const BlinkingCursor: React$1.ForwardRefExoticComponent<BlinkingCursorProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const BlinkingCursor: React.ForwardRefExoticComponent<BlinkingCursorProps & React.RefAttributes<HTMLSpanElement>>;
 
 /**
  * DemoStage + Reveal — staged appearance for whole-interface demos.
@@ -1461,9 +1477,9 @@ interface DemoStageProps {
      */
     visibleWhenIdle?: boolean;
     className?: string;
-    children: React$1.ReactNode;
+    children: React.ReactNode;
 }
-declare function DemoStage({ steps, speed, trigger, play, loop, defaultAnimation, visibleWhenIdle, className, children, }: DemoStageProps): React$1.JSX.Element;
+declare function DemoStage({ steps, speed, trigger, play, loop, defaultAnimation, visibleWhenIdle, className, children, }: DemoStageProps): React.JSX.Element;
 interface RevealProps {
     /** Stage target id. The matching `{ type: "reveal", target: id }` step shows this. */
     id: string;
@@ -1492,9 +1508,9 @@ interface RevealProps {
      */
     onHide?: () => void;
     className?: string;
-    children: React$1.ReactNode;
+    children: React.ReactNode;
 }
-declare function Reveal({ id, animation, durationMs, hideOutsideStage, onReveal, onHide, className, children, }: RevealProps): React$1.JSX.Element;
+declare function Reveal({ id, animation, durationMs, hideOutsideStage, onReveal, onHide, className, children, }: RevealProps): React.JSX.Element;
 
 /**
  * Composer — the generic text composition surface for the design system.
@@ -1701,13 +1717,13 @@ interface ComposerProps {
      * Custom content for the left action slot. Replaces the default
      * paperclip button when `attachments` is enabled.
      */
-    leftActions?: React$1.ReactNode;
+    leftActions?: React.ReactNode;
     /**
      * Custom content for the right action slot. Replaces the default
      * Send / Stop button. Use the `useComposer()` hook inside to access
      * imperative methods.
      */
-    rightActions?: React$1.ReactNode;
+    rightActions?: React.ReactNode;
     /** Hide the default Send button without replacing it. */
     hideSend?: boolean;
     /** Scripted demo steps. */
@@ -1750,8 +1766,8 @@ interface ComposerProps {
     readOnly?: boolean;
     className?: string;
 }
-declare const Composer: React$1.ForwardRefExoticComponent<ComposerProps & React$1.RefAttributes<ComposerHandle>>;
-declare const ComposerReply: React$1.ForwardRefExoticComponent<ComposerProps & React$1.RefAttributes<ComposerHandle>>;
+declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<ComposerHandle>>;
+declare const ComposerReply: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<ComposerHandle>>;
 
 /**
  * DatePicker + DateRangePicker
@@ -1795,9 +1811,9 @@ interface DatePickerBaseProps {
      */
     format?: string;
     /** Forwarded to the underlying `react-day-picker` Calendar. */
-    captionLayout?: React$1.ComponentProps<typeof Calendar>["captionLayout"];
+    captionLayout?: React.ComponentProps<typeof Calendar>["captionLayout"];
     /** Icon shown in the trigger. Defaults to lucide's CalendarIcon. */
-    icon?: React$1.ReactNode;
+    icon?: React.ReactNode;
     /** Accessible label for screen readers when no date is selected. */
     "aria-label"?: string;
 }
@@ -1815,15 +1831,15 @@ interface DateRangePickerProps extends DatePickerBaseProps {
     /** Number of months to show side-by-side. Defaults to 2. */
     numberOfMonths?: number;
 }
-declare function DatePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, "aria-label": ariaLabel, }: DatePickerProps): React$1.JSX.Element;
-declare function DateRangePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, numberOfMonths, "aria-label": ariaLabel, }: DateRangePickerProps): React$1.JSX.Element;
+declare function DatePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, "aria-label": ariaLabel, }: DatePickerProps): React.JSX.Element;
+declare function DateRangePicker({ value, onChange, placeholder, disabled, className, contentClassName, align, side, format, captionLayout, icon, numberOfMonths, "aria-label": ariaLabel, }: DateRangePickerProps): React.JSX.Element;
 
-declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
-declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
-declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     /**
      * What the dialog surface is *made of*. Composes with the overlay
      * scrim — see PRESENCE.md and dialog.md for scenarios.
@@ -1837,20 +1853,20 @@ interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof Dia
      */
     surface?: Surface;
 }
-declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
 declare const DialogFooter: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
-declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 
-declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
-declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 /**
  * Menu density. Set `size` on `<DropdownMenuContent>` (or
  * `<DropdownMenuSubContent>`) and every item inside — Item, Checkbox,
@@ -1860,21 +1876,21 @@ declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMen
  * tool-panel density (the Studio inspector).
  */
 type DropdownMenuSize = "default" | "sm" | "xs";
-declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
-declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
-declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
-interface DropdownMenuSubContentProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
+} & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
     /** What the submenu surface is *made of*. See dropdown-menu.md. */
     surface?: Surface;
     /** Menu density — cascades to items via context. */
     size?: DropdownMenuSize;
 }
-declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
-interface DropdownMenuContentProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
     /**
      * What the menu surface is *made of*. `solid` (default) is `bg-popover`.
      * `translucent` matches Apple HIG / iOS menu sheets. `glass` for menus
@@ -1884,18 +1900,18 @@ interface DropdownMenuContentProps extends React$1.ComponentPropsWithoutRef<type
     /** Menu density — cascades to items via context. */
     size?: DropdownMenuSize;
 }
-declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuShortcut: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
     displayName: string;
 };
 
@@ -1913,30 +1929,33 @@ declare const DropdownMenuShortcut: {
  */
 declare const inputVariants: (props?: ({
     size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
+    variant?: "default" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
-type InputProps = Omit<React$1.ComponentProps<"input">, "size"> & {
+type InputVariant = NonNullable<VariantProps<typeof inputVariants>["variant"]>;
+type InputProps = Omit<React.ComponentProps<"input">, "size"> & {
     size?: InputSize;
+    variant?: InputVariant;
     /** Adornment rendered inside the field on the leading edge — an icon,
      *  a unit, a prefix. Non-interactive by default (clicks pass through
      *  to focus the input); pass an element with its own pointer-events
      *  if you need it clickable. */
-    startSlot?: React$1.ReactNode;
+    startSlot?: React.ReactNode;
     /** Adornment rendered inside the field on the trailing edge — a unit
      *  ("px"), a clear button, a stepper. Same pointer rules as
      *  `startSlot`. */
-    endSlot?: React$1.ReactNode;
+    endSlot?: React.ReactNode;
 };
-declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
     size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
 
-declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
-interface PopoverContentProps extends React$1.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
     /**
      * What the popover surface is *made of*. Defaults to `solid`
      * (`bg-popover`). `translucent` is the Apple HIG menu-sheet feel.
@@ -1944,9 +1963,9 @@ interface PopoverContentProps extends React$1.ComponentPropsWithoutRef<typeof Po
      */
     surface?: Surface;
 }
-declare const PopoverContent: React$1.ForwardRefExoticComponent<PopoverContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 
-declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * MultiSelect — multi-pick combobox.
@@ -1988,7 +2007,7 @@ interface MultiSelectOption {
     /** Optional lucide-style icon component (or any React component
      *  accepting a className). Rendered both in the dropdown row and
      *  on the badge. */
-    icon?: React$1.ComponentType<{
+    icon?: React.ComponentType<{
         className?: string;
     }>;
     /** Disables the row in the dropdown — selection is locked in
@@ -2031,10 +2050,10 @@ interface MultiSelectProps {
     id?: string;
     "aria-label"?: string;
 }
-declare const MultiSelect: React$1.ForwardRefExoticComponent<MultiSelectProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
 
-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>>;
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Resizable — drag-to-adjust panel groups.
@@ -2073,8 +2092,8 @@ declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupP
  *     </ResizablePanel>
  *   </ResizablePanelGroup>
  */
-declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLSelectElement | HTMLTextAreaElement | HTMLMapElement | HTMLTitleElement | HTMLVideoElement | HTMLButtonElement | HTMLLinkElement | HTMLLabelElement | HTMLStyleElement | HTMLSourceElement | HTMLHtmlElement | HTMLOptionElement | HTMLTableColElement | HTMLAudioElement | HTMLEmbedElement | HTMLProgressElement | HTMLHRElement | HTMLTableElement | HTMLAnchorElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLFieldSetElement | HTMLHeadElement | HTMLIFrameElement | HTMLLegendElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOutputElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React.JSX.Element;
+declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLSelectElement | HTMLTextAreaElement | HTMLMapElement | HTMLTitleElement | HTMLVideoElement | HTMLButtonElement | HTMLLinkElement | HTMLLabelElement | HTMLStyleElement | HTMLSourceElement | HTMLHtmlElement | HTMLOptionElement | HTMLTableColElement | HTMLAudioElement | HTMLEmbedElement | HTMLProgressElement | HTMLHRElement | HTMLTableElement | HTMLAnchorElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLFieldSetElement | HTMLHeadElement | HTMLIFrameElement | HTMLLegendElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOutputElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -2089,14 +2108,14 @@ declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTM
     style?: object | undefined;
     tagName?: keyof HTMLElementTagNameMap | undefined;
 } & {
-    children?: React$1.ReactNode;
-} & React$1.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
-declare const ResizableHandle: ({ withHandle, className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
+declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
     /** When true, render a visible grip handle in the middle of the divider
      *  for affordance. Without this, the handle is just a 1px hit area —
      *  fine for power-user tools, harder to discover for everyone else. */
     withHandle?: boolean;
-}) => React$1.JSX.Element;
+}) => React.JSX.Element;
 
 /**
  * Row — horizontal layout primitive.
@@ -2118,13 +2137,13 @@ declare const rowVariants: (props?: ({
     justify?: "between" | "start" | "center" | "end" | "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> {
+interface RowProps extends React.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 Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Grid — 2D layout primitive. The partner to Stack and Row.
@@ -2152,13 +2171,13 @@ declare const gridVariants: (props?: ({
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
     align?: "start" | "center" | "end" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
     /** When true, render as the single child element via Radix Slot — lets
      *  you stamp Grid's layout classes onto an existing semantic tag
      *  without nesting an extra `<div>`. */
     asChild?: boolean;
 }
-declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Flex — the unopinionated flexbox primitive.
@@ -2188,20 +2207,20 @@ declare const flexVariants: (props?: ({
     justify?: "between" | "start" | "center" | "end" | "around" | "evenly" | null | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface FlexProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+interface FlexProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
     /** When true, render as the single child element via Radix Slot — lets
      *  you stamp Flex's layout classes onto an existing semantic tag without
      *  nesting an extra `<div>`. */
     asChild?: boolean;
 }
-declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.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>>;
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
-declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 /**
  * Menu density. Set `size` on `<SelectContent>` and every `<SelectItem>`
  * inside it picks up matching padding / text-size / check-indicator
@@ -2222,43 +2241,116 @@ declare const selectTriggerVariants: (props?: ({
     size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectTriggerSize = NonNullable<VariantProps<typeof selectTriggerVariants>["size"]>;
-declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     size?: SelectTriggerSize;
     /** Adornment rendered inside the trigger on the leading edge — a
      *  property glyph, a unit. Mirrors Input's startSlot. Grouped with
      *  the value in a div (NOT a bare span: the trigger's
      *  `[&>span]:line-clamp-1` would stack a span's children
      *  vertically). */
-    startSlot?: React$1.ReactNode;
+    startSlot?: React.ReactNode;
     /** Hide the dropdown chevron — Figma-style token fields keep the
      *  right edge for their own affordances (detach/attach). */
     chevron?: boolean;
-} & React$1.RefAttributes<HTMLButtonElement>>;
-declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: SelectMenuSize;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     /** Optional right-aligned secondary text (e.g. a token's resolved
      *  value). Rendered in the menu row only — NOT inside ItemText, so
      *  it never mirrors into the trigger via SelectValue. */
-    hint?: React$1.ReactNode;
-} & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    hint?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-declare const Sheet: React$1.FC<DialogPrimitive.DialogProps>;
-declare const SheetTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-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>>;
+/**
+ * Swatch — a single colour chip.
+ *
+ * THE primitive for showing a colour: brand-pop strips, palette pickers,
+ * theme previews, token galleries, "pick an accent" rows. A swatch reads a
+ * value from one of two places, in priority order:
+ *
+ *   - `color`  — any raw CSS colour (`#1f6feb`, `oklch(...)`, `rgb(...)`,
+ *                even `var(--whatever)`). Use for one-off / external colours.
+ *   - `token`  — a Grade colour token NAME (no `--` and no `oklch()` wrap),
+ *                resolved to `oklch(var(--<token>))`. This is the design-system
+ *                path: `token="brand-3"`, `token="primary"`, `token="chart-2"`.
+ *                Because it points at the live CSS variable, the swatch
+ *                re-voices automatically when the theme changes.
+ *
+ * A transparency checkerboard sits behind the fill (shared with the rest of
+ * the system via `--gds-media-checker-*`), so semi-transparent values read
+ * honestly instead of compositing against an opaque tile.
+ *
+ * Pass `onSelect` to make it pickable — it renders a real <button> with
+ * `aria-pressed`, a focus ring, and a hover lift. `selected` draws the
+ * 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-*`
+ * 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;
+    shape?: "rounded" | "square" | "circle" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SwatchSize = NonNullable<VariantProps<typeof swatchVariants>["size"]>;
+type SwatchShape = NonNullable<VariantProps<typeof swatchVariants>["shape"]>;
+interface SwatchProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof swatchVariants> {
+    /** Any raw CSS colour. Takes precedence over `token`. */
+    color?: string;
+    /** A Grade colour token name (no `--`), resolved as `oklch(var(--<token>))`. */
+    token?: string;
+    /** Optional caption rendered beneath the chip; also the accessible name. */
+    label?: React.ReactNode;
+    /** Draws the shared selection ring (`--selected`). */
+    selected?: boolean;
+    /** Makes the swatch a pickable <button> and fires on activation. */
+    onSelect?: () => void;
+    /** Makes the swatch an editable colour well: hosts a native
+     *  `<input type="color">` (the OS picker) behind the chip and fires with
+     *  the new `#rrggbb`. The presentation stays the DS chip; the interaction
+     *  stays native. Takes precedence over `onSelect`. */
+    onColorChange?: (value: string) => void;
+}
+declare const Swatch: React.ForwardRefExoticComponent<SwatchProps & React.RefAttributes<HTMLElement>>;
+interface SwatchGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `row` spaces them out; `stack` overlaps into a coin-stack. Default row. */
+    layout?: "row" | "stack";
+    /** Cascades to every child Swatch. */
+    size?: SwatchSize;
+    /** Cascades to every child Swatch. */
+    shape?: SwatchShape;
+    /** Spacing between chips in `row` layout. Default sm. */
+    gap?: "xs" | "sm" | "md" | "lg";
+}
+declare const SwatchGroup: React.ForwardRefExoticComponent<SwatchGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
     side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    /** Extra classes for the backdrop overlay. e.g. `bg-transparent`
+     *  keeps click-outside-to-close while removing the dimming — useful
+     *  when the whole point is watching the page behind the sheet
+     *  change (the embed theme playground). */
+    overlayClassName?: string;
+    /** Extra classes for the built-in close button — reposition it or
+     *  restyle it as a full icon button (the default is a bare X at
+     *  right-4 top-4 with an opacity hover). */
+    closeClassName?: string;
     /**
      * What the sheet panel is *made of*. `solid` is the default opaque
      * `bg-background`. `glass` lets the page show through with a 14px
@@ -2267,21 +2359,29 @@ interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof Dial
      */
     surface?: Surface;
 }
-declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
 declare const SheetFooter: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
     displayName: string;
 };
-declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
-declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 
-declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * `size` controls the visual weight. `default` is the standard control;
+ * `sm` is the dense, subtle track for tool panels / inspectors (thin
+ * muted track, small thumb) so a panel of sliders reads quietly.
+ */
+type SliderSize = "default" | "sm";
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    size?: SliderSize;
+} & React.RefAttributes<HTMLSpanElement>>;
 
 /**
  * Sortable — compound drag-to-reorder primitive built on dnd-kit.
@@ -2326,12 +2426,12 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
  */
 
 type SortableStrategy = "vertical" | "horizontal" | "grid";
-interface SortableGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface SortableGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Disable drag for every container inside the Group. */
     disabled?: boolean;
 }
-declare const SortableGroup: React$1.ForwardRefExoticComponent<SortableGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-interface SortableProps<T extends UniqueIdentifier = UniqueIdentifier> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange" | "id"> {
+declare const SortableGroup: React.ForwardRefExoticComponent<SortableGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface SortableProps<T extends UniqueIdentifier = UniqueIdentifier> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "id"> {
     /** Ordered list of unique ids — strings or numbers. Source of truth
      *  for the order; reorder fires `onReorder(newValues)` and the
      *  consumer updates their state. */
@@ -2354,12 +2454,12 @@ interface SortableProps<T extends UniqueIdentifier = UniqueIdentifier> extends O
      *  Sortable; auto-generated via React.useId when omitted. */
     id?: string;
 }
-interface SortableRootComponent extends React$1.ForwardRefExoticComponent<SortableProps & React$1.RefAttributes<HTMLDivElement>> {
+interface SortableRootComponent extends React.ForwardRefExoticComponent<SortableProps & React.RefAttributes<HTMLDivElement>> {
     Item: typeof SortableItem;
     Handle: typeof SortableHandle;
     Group: typeof SortableGroup;
 }
-interface SortableItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface SortableItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Must match one of the parent `<Sortable values>` entries.
      *  Identity, not React key. */
     value: UniqueIdentifier;
@@ -2370,13 +2470,13 @@ interface SortableItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** Disable drag for THIS item without disabling the whole Sortable. */
     disabled?: boolean;
 }
-declare const SortableItem: React$1.ForwardRefExoticComponent<SortableItemProps & React$1.RefAttributes<HTMLDivElement>>;
-interface SortableHandleProps extends React$1.HTMLAttributes<HTMLElement> {
+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>`. */
     asChild?: boolean;
 }
-declare const SortableHandle: React$1.ForwardRefExoticComponent<SortableHandleProps & React$1.RefAttributes<HTMLElement>>;
+declare const SortableHandle: React.ForwardRefExoticComponent<SortableHandleProps & React.RefAttributes<HTMLElement>>;
 declare const Sortable: SortableRootComponent;
 
 /**
@@ -2398,13 +2498,13 @@ declare const stackVariants: (props?: ({
     align?: "start" | "center" | "end" | "stretch" | null | undefined;
     justify?: "between" | "start" | "center" | "end" | "around" | "evenly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface StackProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
+interface StackProps extends React.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 Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Switch — track + thumb scale together via the shared control size
@@ -2417,45 +2517,45 @@ declare const switchTrackVariants: (props?: ({
     size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SwitchSize = NonNullable<VariantProps<typeof switchTrackVariants>["size"]>;
-declare const Switch: React$1.ForwardRefExoticComponent<Omit<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
+declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
     size?: SwitchSize;
-} & React$1.RefAttributes<HTMLButtonElement>>;
+} & React.RefAttributes<HTMLButtonElement>>;
 
-declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableRowElement> & React$1.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
-declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
-declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 
-interface BreadcrumbProps extends React$1.ComponentPropsWithoutRef<"nav"> {
+interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> {
     /** Default separator node for every <BreadcrumbSeparator/> inside this
      *  tree. Pass a string ("/", "›", "•"), a lucide icon (<Slash />,
      *  <ChevronRight />), or any ReactNode. Default: <ChevronRight />.
      *  Per-instance `<BreadcrumbSeparator>children</BreadcrumbSeparator>`
      *  still overrides. */
-    separator?: React$1.ReactNode;
+    separator?: React.ReactNode;
 }
-declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
-declare const BreadcrumbList: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React$1.RefAttributes<HTMLOListElement>>;
-declare const BreadcrumbItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
-interface BreadcrumbLinkProps extends React$1.HTMLAttributes<HTMLElement> {
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkProps extends React.HTMLAttributes<HTMLElement> {
     /** Anchor href. When set, renders an <a>; otherwise renders a <button>. */
     href?: string;
     /** Use a <span> instead of <a>/<button> — useful when wrapping in a
      *  framework-specific Link component yourself. */
     asChild?: boolean;
 }
-declare const BreadcrumbLink: React$1.ForwardRefExoticComponent<BreadcrumbLinkProps & React$1.RefAttributes<HTMLElement>>;
-declare const BreadcrumbPage: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare const BreadcrumbSeparator: {
-    ({ children, className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+    ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
     displayName: string;
 };
 declare const BreadcrumbEllipsis: {
-    ({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
     displayName: string;
 };
 /** One row inside a BreadcrumbMenuTrigger's popover. The dropdown
@@ -2506,9 +2606,9 @@ interface BreadcrumbMenuTriggerProps {
  *     />
  *   </BreadcrumbItem>
  */
-declare const BreadcrumbMenuTrigger: React$1.ForwardRefExoticComponent<BreadcrumbMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const BreadcrumbMenuTrigger: React.ForwardRefExoticComponent<BreadcrumbMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 
-declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
 declare const tabsListVariants: (props?: ({
     variant?: "pill" | "underlined" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -2517,10 +2617,10 @@ declare const tabsTriggerVariants: (props?: ({
     variant?: "pill" | "underlined" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TabsListProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
+interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
 }
-declare const TabsList: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
-interface TabsTriggerProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, VariantProps<typeof tabsTriggerVariants> {
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, VariantProps<typeof tabsTriggerVariants> {
     /**
      * Tooltip text shown on hover / focus. Designed for icon-only
      * triggers: pass `<TabsTrigger value="preview" tooltip="Preview">`
@@ -2531,10 +2631,10 @@ interface TabsTriggerProps extends React$1.ComponentPropsWithoutRef<typeof TabsP
      * Requires a `<TooltipProvider>` somewhere above the tabs. The
      * design system's root layout mounts one app-wide.
      */
-    tooltip?: React$1.ReactNode;
+    tooltip?: React.ReactNode;
 }
-declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare const THEMES: {
     readonly light: "";
@@ -2542,8 +2642,8 @@ declare const THEMES: {
 };
 type ChartConfig = {
     [k in string]: {
-        label?: React$1.ReactNode;
-        icon?: React$1.ComponentType;
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
     } & ({
         color?: string;
         theme?: never;
@@ -2552,16 +2652,16 @@ type ChartConfig = {
         theme: Record<keyof typeof THEMES, string>;
     });
 };
-declare const ChartContainer: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     config: ChartConfig;
-    children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ChartStyle: ({ id, config }: {
     id: string;
     config: ChartConfig;
-}) => React$1.JSX.Element | null;
+}) => React.JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-declare const ChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> & {
+declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> & {
     accessibilityLayer?: boolean;
     active?: boolean | undefined;
     includeHidden?: boolean | undefined;
@@ -2570,7 +2670,7 @@ declare const ChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<Rechar
     animationEasing?: recharts_types_util_types.AnimationTiming;
     content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
     coordinate?: Partial<recharts_types_util_types.Coordinate>;
-    cursor?: boolean | React$1.ReactElement | React$1.SVGProps<SVGElement>;
+    cursor?: boolean | React.ReactElement | React.SVGProps<SVGElement>;
     filterNull?: boolean;
     defaultIndex?: number;
     isAnimationActive?: boolean;
@@ -2582,19 +2682,19 @@ declare const ChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<Rechar
     trigger?: "hover" | "click";
     useTranslate3d?: boolean;
     viewBox?: recharts_types_util_types.CartesianViewBox;
-    wrapperStyle?: React$1.CSSProperties;
-} & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    wrapperStyle?: React.CSSProperties;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
-}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "verticalAlign" | "payload"> & {
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "verticalAlign" | "payload"> & {
     hideIcon?: boolean;
     nameKey?: string;
-}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Textarea variants — `size` mirrors Input so the whole form-control
@@ -2605,53 +2705,37 @@ declare const textareaVariants: (props?: ({
     size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["size"]>;
-type TextareaProps = Omit<React$1.ComponentProps<"textarea">, "size"> & {
+type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
     size?: TextareaSize;
 };
-declare const Textarea: React$1.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "segmented" | null | undefined;
     size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Toggle: React$1.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | "segmented" | null | undefined;
     size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 
-declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
-declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-declare const toggleGroupVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ToggleGroupProps = React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleGroupVariants>;
-declare const ToggleGroup: React$1.ForwardRefExoticComponent<ToggleGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
+    variant?: "default" | "outline" | "segmented" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | "segmented" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
-    /** Tooltip content. When set, the item is wrapped in a Tooltip
-     *  so icon-only items keep an accessible label without bloating
-     *  the chrome with text. Pass a string for the common case;
-     *  pass a node for richer content (key hint, badge, etc.).
-     *
-     *  Assumes a `TooltipProvider` exists somewhere upstream — in
-     *  apps/docs the root layout already mounts one, which is the
-     *  pattern most consumers should follow. If no provider is
-     *  present, the tooltip is silently ignored at runtime (Radix
-     *  no-ops) — pass `tooltip={undefined}` to be sure of plain
-     *  behavior. */
-    tooltip?: React$1.ReactNode;
-    /** Which side of the item the tooltip renders on. Defaults to
-     *  "top" — matches the Tabs primitive's convention. */
-    tooltipSide?: React$1.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
-    /** Tooltip delay override. The provider's `delayDuration` is
-     *  the default; pass a per-item value if a specific control
-     *  needs a snappier or quieter feel. */
+    tooltip?: React.ReactNode;
+    tooltipSide?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
     tooltipDelay?: number;
-} & React$1.RefAttributes<HTMLButtonElement>>;
+} & React.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Toolbar — slot-based chrome bar for the leading/center/trailing
@@ -2706,32 +2790,32 @@ declare const toolbarVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ToolbarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toolbarVariants> {
+interface ToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toolbarVariants> {
     /** Left-aligned content. Usually a logo + primary nav links. */
-    leading?: React$1.ReactNode;
+    leading?: React.ReactNode;
     /** Center-aligned content. Usually a search input, a page title,
      *  or a segmented control. The center column stretches via `1fr`
      *  so it stays visually centered relative to the bar. */
-    center?: React$1.ReactNode;
+    center?: React.ReactNode;
     /** Right-aligned content. Usually action icons + user avatar. */
-    trailing?: React$1.ReactNode;
+    trailing?: React.ReactNode;
     /** When using `children` directly (advanced custom layout), the
      *  slot props are ignored. Most callers should prefer the slot
      *  props — they give the canonical grid layout for free. */
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
     /** Required by WAI-ARIA toolbar pattern. Falls back to "Toolbar". */
     "aria-label"?: string;
 }
-declare const Toolbar: React$1.ForwardRefExoticComponent<ToolbarProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * ToolbarSlot — escape-hatch piece for the rare case a consumer
  * wants to compose a custom inner layout with children but still
  * get the slot styling. Use the slot props on Toolbar where you can.
  */
-interface ToolbarSlotProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface ToolbarSlotProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "leading" | "center" | "trailing";
 }
-declare const ToolbarSlot: React$1.ForwardRefExoticComponent<ToolbarSlotProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const ToolbarSlot: React.ForwardRefExoticComponent<ToolbarSlotProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Sidebar — compound layout primitive for vertical app navigation.
@@ -2781,7 +2865,7 @@ declare const ToolbarSlot: React$1.ForwardRefExoticComponent<ToolbarSlotProps &
  * Sidebar is the navigation content for that chrome.
  */
 
-interface SidebarProps extends React$1.HTMLAttributes<HTMLElement> {
+interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
     /** Controlled collapsed state. When set, `onCollapsedChange` MUST be
      *  wired or the toggle button becomes a no-op. */
     collapsed?: boolean;
@@ -2808,7 +2892,7 @@ interface SidebarProps extends React$1.HTMLAttributes<HTMLElement> {
      */
     variant?: "rail" | "panel";
 }
-interface SidebarRootComponent extends React$1.ForwardRefExoticComponent<SidebarProps & React$1.RefAttributes<HTMLElement>> {
+interface SidebarRootComponent extends React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>> {
     Header: typeof SidebarHeader;
     Content: typeof SidebarContent;
     Footer: typeof SidebarFooter;
@@ -2817,21 +2901,21 @@ interface SidebarRootComponent extends React$1.ForwardRefExoticComponent<Sidebar
     TreeItem: typeof SidebarTreeItem;
 }
 declare const Sidebar: SidebarRootComponent;
-interface SidebarHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-declare const SidebarHeader: React$1.ForwardRefExoticComponent<SidebarHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
-interface SidebarContentProps extends React$1.HTMLAttributes<HTMLElement> {
+declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarContentProps extends React.HTMLAttributes<HTMLElement> {
 }
-declare const SidebarContent: React$1.ForwardRefExoticComponent<SidebarContentProps & React$1.RefAttributes<HTMLElement>>;
-interface SidebarFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+declare const SidebarContent: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLElement>>;
+interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-declare const SidebarFooter: React$1.ForwardRefExoticComponent<SidebarFooterProps & React$1.RefAttributes<HTMLDivElement>>;
-interface SidebarSectionProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Group label shown above the items. Hidden when sidebar is collapsed
      *  (children render flat under the icon strip). */
-    title?: React$1.ReactNode;
+    title?: React.ReactNode;
     /** Optional icon next to the title. */
-    icon?: React$1.ReactNode;
+    icon?: React.ReactNode;
     /** Action(s) rendered on the right edge of the section header — the
      *  canonical "+ add to this group" or "..." menu slot. Common in Notion
      *  (+ next to Pages), Linear (+ next to Favorites), Slack (+ next to
@@ -2840,19 +2924,29 @@ interface SidebarSectionProps extends Omit<React$1.HTMLAttributes<HTMLDivElement
      *  Pointer events on the trailing content are isolated from the
      *  collapse toggle, so a Button inside `trailing` won't also flip the
      *  expanded state. */
-    trailing?: React$1.ReactNode;
+    trailing?: React.ReactNode;
     /** Allow the section to toggle open/closed via clicking the title.
      *  Default true when `title` is set; ignored otherwise (no header to click). */
     collapsible?: boolean;
     /** Initial open state for collapsible sections. Default true. */
     defaultExpanded?: boolean;
+    /** Title casing. The component should not silently dictate case
+     *  (Ali, 2026-06-11) — but the HISTORIC defaults differ per variant
+     *  and existing surfaces depend on them, so when unset, legacy
+     *  behaviour is preserved exactly: static headers render UPPERCASE
+     *  (the Notion/Linear treatment), collapsible headers render the
+     *  authored case (a long-standing `normal-case` override). Set
+     *  explicitly to get the same treatment from both variants:
+     *  `"uppercase"` for the shouty group label, `"none"` for
+     *  sentence-case headers like a "Recents" list. */
+    titleTransform?: "uppercase" | "none";
 }
-declare const SidebarSection: React$1.ForwardRefExoticComponent<SidebarSectionProps & React$1.RefAttributes<HTMLDivElement>>;
-interface SidebarItemProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "title"> {
+declare const SidebarSection: React.ForwardRefExoticComponent<SidebarSectionProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "title"> {
     /** Leading icon. Sized to fit both expanded + collapsed states. */
-    icon?: React$1.ReactNode;
+    icon?: React.ReactNode;
     /** Trailing badge — count, status label. Hidden when collapsed. */
-    badge?: React$1.ReactNode;
+    badge?: React.ReactNode;
     /** Marks the current page / route. Drives the highlighted style + sets
      *  `aria-current="page"`. */
     active?: boolean;
@@ -2866,10 +2960,10 @@ interface SidebarItemProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorE
     disabled?: boolean;
     /** Visible label. Use `children` so the JSX reads naturally — the
      *  prop name is `children` not `label`. */
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
     /** Tooltip override shown when sidebar is collapsed. Defaults to the
      *  item's text content (children, when it's a string). */
-    collapsedLabel?: React$1.ReactNode;
+    collapsedLabel?: React.ReactNode;
     /**
      * Row size.
      *
@@ -2889,17 +2983,17 @@ interface SidebarItemProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorE
      * badge anchored to the trailing edge as usual. Hidden when the
      * sidebar is collapsed (only the icon + tooltip remain).
      */
-    description?: React$1.ReactNode;
+    description?: React.ReactNode;
 }
-declare const SidebarItem: React$1.ForwardRefExoticComponent<SidebarItemProps & React$1.RefAttributes<HTMLAnchorElement>>;
-interface SidebarTreeItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "title"> {
+declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLAnchorElement>>;
+interface SidebarTreeItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "title"> {
     /** Row label. Required — without it the row has nothing to show. */
-    label: React$1.ReactNode;
+    label: React.ReactNode;
     /** Leading icon (folder, file, custom emoji). Shown to the right
      *  of the chevron column. */
-    icon?: React$1.ReactNode;
+    icon?: React.ReactNode;
     /** Trailing badge — count, status. Hidden when sidebar is collapsed. */
-    badge?: React$1.ReactNode;
+    badge?: React.ReactNode;
     /** Marks the branch as the current route. Adds aria-current="page"
      *  on the row. */
     active?: boolean;
@@ -2913,7 +3007,7 @@ interface SidebarTreeItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLBut
     /** Disabled state. */
     disabled?: boolean;
     /** Nested children — SidebarItem or more SidebarTreeItem. */
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
     /**
      * Secondary line shown beneath the label — same shape as
      * SidebarItem's `description`. Useful when a branch needs more
@@ -2921,7 +3015,7 @@ interface SidebarTreeItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLBut
      * Layout adapts to stack label + description; chevron and icon
      * stay vertically centered against the stack.
      */
-    description?: React$1.ReactNode;
+    description?: React.ReactNode;
     /**
      * Right-edge action slot — settings cog, more-actions overflow,
      * "+ add child" affordance. Rendered as a sibling of the branch
@@ -2937,13 +3031,13 @@ interface SidebarTreeItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLBut
      * Hovering nested children rows does NOT trigger the group hover
      * — the named group is scoped to the branch row alone.
      */
-    trailing?: React$1.ReactNode;
+    trailing?: React.ReactNode;
 }
-declare const SidebarTreeItem: React$1.ForwardRefExoticComponent<SidebarTreeItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarTreeItem: React.ForwardRefExoticComponent<SidebarTreeItemProps & React.RefAttributes<HTMLButtonElement>>;
 
-declare const Map: React$1.ForwardRefExoticComponent<MapProps & React$1.RefAttributes<MapHandle>>;
+declare const Map: React.ForwardRefExoticComponent<MapProps & React.RefAttributes<MapHandle>>;
 
-declare const MapMarker: React$1.NamedExoticComponent<MapMarkerProps>;
+declare const MapMarker: React.NamedExoticComponent<MapMarkerProps>;
 
 /**
  * lib/motion — the global motion control for gradeui.
@@ -3205,7 +3299,7 @@ declare global {
         __gradeMediaPending?: Record<string, true>;
     }
 }
-interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+interface MediaSurfaceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     aspect?: MediaAspect;
     radius?: MediaRadius;
     border?: boolean;
@@ -3213,7 +3307,7 @@ interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
     /** Callback fires when the surface enters / leaves the viewport. */
     onVisibilityChange?: (visible: boolean) => void;
     /** Fallback shown before `onReady` is signalled by the child. */
-    fallback?: React$1.ReactNode;
+    fallback?: React.ReactNode;
     /**
      * Controls the empty-state placeholder shown when no `src`, `children`,
      * and no `loading` state are provided. Default `"auto"` renders the
@@ -3225,7 +3319,7 @@ interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
      * Legacy `"icon"` is kept as an alias for `"auto"` so the previous API
      * doesn't break.
      */
-    emptyState?: "auto" | "icon" | "none" | React$1.ReactNode;
+    emptyState?: "auto" | "icon" | "none" | React.ReactNode;
     /**
      * What kind of media is intended for this slot — drives the placeholder
      * glyph, the default `aspect` when unset, and the future generator's
@@ -3260,7 +3354,7 @@ interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
      * should pick a `hint` and let the map decide; this is the escape
      * hatch for special slots that don't fit the canonical set.
      */
-    glyph?: React$1.ReactNode;
+    glyph?: React.ReactNode;
     /**
      * Stable identifier for this specific MediaSurface instance, stamped
      * on the root as `data-gds-instance-id`. When the JSX renders a list
@@ -3288,10 +3382,10 @@ interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
      * `children` for content that REPLACES the media (custom canvas/video);
      * use `overlay` for content that DECORATES it.
      */
-    overlay?: React$1.ReactNode;
-    children?: React$1.ReactNode;
+    overlay?: React.ReactNode;
+    children?: React.ReactNode;
 }
-declare const MediaSurface: React$1.ForwardRefExoticComponent<MediaSurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const MediaSurface: React.ForwardRefExoticComponent<MediaSurfaceProps & React.RefAttributes<HTMLDivElement>>;
 /** Shared prop interface extended by each media primitive. */
 interface BaseMediaProps {
     /** src for the media — url or path. */
@@ -3315,7 +3409,7 @@ interface BaseMediaProps {
     /** Accessible label — used as `aria-label` on the surface. */
     label?: string;
     className?: string;
-    style?: React$1.CSSProperties;
+    style?: React.CSSProperties;
 }
 
 /**
@@ -3334,7 +3428,7 @@ interface VideoPlayerProps extends BaseMediaProps {
     /** Object-fit. Defaults to "cover" — matches typical hero/background use. */
     objectFit?: "cover" | "contain" | "fill";
 }
-declare const VideoPlayer: React$1.ForwardRefExoticComponent<VideoPlayerProps & React$1.RefAttributes<HTMLVideoElement>>;
+declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<HTMLVideoElement>>;
 
 /**
  * RivePlayer — Rive runtime wrapped in a MediaSurface.
@@ -3358,7 +3452,7 @@ interface RivePlayerProps extends BaseMediaProps {
     /** Inputs to pass to the state machine. */
     stateMachineInputs?: Record<string, number | boolean | string>;
 }
-declare const RivePlayer: React$1.ForwardRefExoticComponent<RivePlayerProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const RivePlayer: React.ForwardRefExoticComponent<RivePlayerProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * Logo — a brand mark with lockup, background-mode, and monochrome
@@ -3387,9 +3481,9 @@ type LogoSize = "sm" | "md" | "lg" | "xl";
  *  light or dark background; `mono` is a single-colour treatment that
  *  inherits `currentColor` and works on any background. */
 interface LogoVariant {
-    light?: React$1.ReactNode;
-    dark?: React$1.ReactNode;
-    mono?: React$1.ReactNode;
+    light?: React.ReactNode;
+    dark?: React.ReactNode;
+    mono?: React.ReactNode;
 }
 /** The brand artwork set, keyed by lockup then appearance. */
 interface LogoSources {
@@ -3397,7 +3491,7 @@ interface LogoSources {
     horizontal?: LogoVariant;
     icon?: LogoVariant;
 }
-interface LogoProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "children"> {
+interface LogoProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
     /** The brand artwork. Supply only the slots you have. Optional — with
      *  no artwork at all the neutral placeholder renders, which keeps
      *  layout intact (and keeps a model-emitted bare `<Logo />` from
@@ -3425,10 +3519,10 @@ interface LogoProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "children"
     /** Optional link target — renders the logo as an `<a>` (logo-links-home). */
     href?: string;
 }
-declare const Logo: React$1.ForwardRefExoticComponent<LogoProps & React$1.RefAttributes<HTMLElement>>;
+declare const Logo: React.ForwardRefExoticComponent<LogoProps & React.RefAttributes<HTMLElement>>;
 
 type GradeLoaderSize = "sm" | "md" | "lg" | "xl";
-interface GradeLoaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+interface GradeLoaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /** Mark size — token or exact pixels. Default `"md"` (24px). */
     size?: GradeLoaderSize | number;
     /** Accessible status text (and the optional visible caption).
@@ -3437,7 +3531,7 @@ interface GradeLoaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
     /** Show the label visually under the mark (it's always announced). */
     showLabel?: boolean;
 }
-declare const GradeLoader: React$1.ForwardRefExoticComponent<GradeLoaderProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const GradeLoader: React.ForwardRefExoticComponent<GradeLoaderProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * ScreenAnimator — wrap any content in a directed camera.
@@ -3499,12 +3593,12 @@ interface ScreenAnimatorProps {
     /** A live backdrop rendered BEHIND the content, filling the stage — an
      *  image, a gradient, or a `<ThreeScene>` shader. Shows around the screen
      *  while it's small (fly in/out) and behind any padding. */
-    backdrop?: React$1.ReactNode;
+    backdrop?: React.ReactNode;
     className?: string;
-    style?: React$1.CSSProperties;
-    children: React$1.ReactNode;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
 }
-declare function ScreenAnimator({ shots, autoplay, loop, maxLoops, controls, paused, onEnded, spotlight, cursor, enter, captionPosition, stage, backdrop, className, style, children, }: ScreenAnimatorProps): React$1.JSX.Element;
+declare function ScreenAnimator({ shots, autoplay, loop, maxLoops, controls, paused, onEnded, spotlight, cursor, enter, captionPosition, stage, backdrop, className, style, children, }: ScreenAnimatorProps): React.JSX.Element;
 
 /**
  * Motion — a directed sequence of scenes on one persistent stage.
@@ -3579,10 +3673,10 @@ interface MotionScreenProps {
      *  render; read by tooling (the dock, future live-reference scenes). */
     screenId?: string;
     className?: string;
-    style?: React$1.CSSProperties;
-    children: React$1.ReactNode;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
 }
-declare function MotionScreen({ device, shots, virtualWidth, spotlight, cursor, enter, animate, screenId: _screenId, className, style, children, }: MotionScreenProps): React$1.JSX.Element;
+declare function MotionScreen({ device, shots, virtualWidth, spotlight, cursor, enter, animate, screenId: _screenId, className, style, children, }: MotionScreenProps): React.JSX.Element;
 type MotionTextTemplate = "title" | "lower-third" | "section-break" | "broadcast" | "ticker" | "stat" | "quote";
 interface MotionTextProps {
     /** Which Motion Template. Default "title". */
@@ -3602,9 +3696,9 @@ interface MotionTextProps {
      */
     lift?: "none" | "shadow" | "scrim";
     className?: string;
-    style?: React$1.CSSProperties;
+    style?: React.CSSProperties;
 }
-declare function MotionText({ template, heading, text, durationMs, tone, lift, className, style, }: MotionTextProps): React$1.JSX.Element;
+declare function MotionText({ template, heading, text, durationMs, tone, lift, className, style, }: MotionTextProps): React.JSX.Element;
 type MotionOverlayZone = "top-left" | "top" | "top-right" | "center" | "bottom-left" | "bottom" | "bottom-right" | "lower-third";
 interface MotionOverlayProps {
     /** Anchor zone. Default "top-right" (the classic network-bug corner). */
@@ -3617,10 +3711,10 @@ interface MotionOverlayProps {
     /** Re-enable pointer events for interactive overlays. Default false. */
     interactive?: boolean;
     className?: string;
-    style?: React$1.CSSProperties;
-    children: React$1.ReactNode;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
 }
-declare function MotionOverlay({ zone, fromScene: _fromScene, toScene: _toScene, interactive, className, style, children, }: MotionOverlayProps): React$1.JSX.Element;
+declare function MotionOverlay({ zone, fromScene: _fromScene, toScene: _toScene, interactive, className, style, children, }: MotionOverlayProps): React.JSX.Element;
 /** How a scene ARRIVES on the stage. Entrance-only by design — the
  *  outgoing scene cuts; the incoming one performs. (True cross-fades
  *  need both scenes mounted; that rides the seekable-clock work.) */
@@ -3648,8 +3742,8 @@ interface MotionSceneProps {
      *  SCENE_TRANSITION_DEFAULT_MS. */
     transitionMs?: number;
     className?: string;
-    style?: React$1.CSSProperties;
-    children: React$1.ReactNode;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
 }
 /**
  * One stage moment in a `<Motion>`. Holds arbitrary content; advances by
@@ -3657,7 +3751,7 @@ interface MotionSceneProps {
  * (active, looping nothing) so a scene can be previewed in isolation —
  * each scene is independently editable.
  */
-declare function MotionScene(props: MotionSceneProps): React$1.JSX.Element;
+declare function MotionScene(props: MotionSceneProps): React.JSX.Element;
 interface MotionProps {
     /** "play" runs the film; "strip" lays the scenes out left-to-right as
      *  labelled cards (the arrangement / edit view). Default "play". */
@@ -3670,7 +3764,7 @@ interface MotionProps {
     /** The persistent stage behind every scene (CSS background). */
     stage?: string;
     /** A live layer behind all scenes (image, gradient, <ThreeScene>). */
-    backdrop?: React$1.ReactNode;
+    backdrop?: React.ReactNode;
     /** Start playing on mount. Default true. */
     autoplay?: boolean;
     /** Return to scene 1 and keep going at the end. Default false — a
@@ -3679,10 +3773,10 @@ interface MotionProps {
     /** Show the transport (play/pause, restart, scene dots). Default true. */
     controls?: boolean;
     className?: string;
-    style?: React$1.CSSProperties;
-    children: React$1.ReactNode;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
 }
-declare function Motion({ view, aspect, stage, backdrop, autoplay, loop, controls, className, style, children, }: MotionProps): React$1.JSX.Element;
+declare function Motion({ view, aspect, stage, backdrop, autoplay, loop, controls, className, style, children, }: MotionProps): React.JSX.Element;
 
 /**
  * Control schema — the canonical, UI-agnostic descriptor for a shader's
@@ -3710,6 +3804,12 @@ type NumberControl = {
     default: number;
     /** Display unit appended in the readout (e.g. "px", "°", "%"). */
     unit?: string;
+    /** Readout normalisation. "percent" shows the value as 0–100% of its
+     *  [min,max] range (the slider still drives the real value) — for the
+     *  abstract 0.3753-style knobs where a percentage reads far clearer.
+     *  Omit for the raw number. A panel-level `format` setting can opt every
+     *  eligible slider into percent without per-control flags. */
+    display?: "percent";
 };
 type ColorControl = {
     type: "color";
@@ -3800,6 +3900,11 @@ interface SceneHandle {
     resize?: (width: number, height: number) => void;
     /** Called when palette changes at runtime. */
     setPalette?: (palette: Palette) => void;
+    /** Called when contract-driven params change at runtime (no remount).
+     *  Values are pre-resolved by the host: colours as THREE-parseable
+     *  strings (rgb()/hex), colour lists as string[], numbers/bools/selects
+     *  as their raw DemoState values. Keyed by ControlSpec.key. */
+    setParams?: (params: Record<string, number | string | boolean | string[]>) => void;
     /** Release GPU + CPU resources. */
     dispose?: () => void;
 }
@@ -3897,7 +4002,11 @@ declare class ShaderCompileError extends Error {
  * the GLSL doesn't compile. ThreeScene catches this and falls back to
  * `preset="space"` so the UI stays populated.
  */
-declare function buildFragmentShaderScene(userFragment: string): SceneFactory;
+declare function buildFragmentShaderScene(userFragment: string, 
+/** Optional param contract — each non-divider control becomes a uniform
+ *  the shader can read (see paramUniformName) and `setParams` can drive
+ *  live without a remount. */
+controls?: readonly ControlSpec[]): SceneFactory;
 
 /**
  * ThreeScene — the WebGL media primitive.
@@ -3923,7 +4032,7 @@ declare function buildFragmentShaderScene(userFragment: string): SceneFactory;
  * an explicit `palette.background` always wins over both.
  */
 type SceneTone = "auto" | "dark" | "light";
-interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster">, Omit<React$1.HTMLAttributes<HTMLDivElement>, keyof BaseMediaProps> {
+interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster">, Omit<React.HTMLAttributes<HTMLDivElement>, keyof BaseMediaProps> {
     /** Preset id from the shader preset registry. */
     preset?: string;
     /**
@@ -3966,36 +4075,54 @@ interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster">, Omit<R
      * hover" thumbnails. Reduced-motion still forces paused.
      */
     play?: boolean;
+    /**
+     * Release the WebGL context entirely while the scene is scrolled out of
+     * view (and rebuild it when it returns), instead of merely pausing the
+     * render loop. A live `WebGLRenderer` holds a real GL context for its
+     * whole lifetime, and browsers cap simultaneous contexts (~16 Chrome,
+     * ~8 Safari) — so a gallery of many `ThreeScene`s blows the budget and
+     * the browser silently evicts the OLDEST (those cards go blank with a
+     * "Context Lost" log). Galleries / thumbnail grids should set this so
+     * only the on-screen scenes hold a context; a global budget (below) caps
+     * the live total. Default `false` — single hero shaders keep their context.
+     */
+    releaseOffscreen?: boolean;
 }
-declare const ThreeScene: React$1.ForwardRefExoticComponent<ThreeSceneProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const ThreeScene: React.ForwardRefExoticComponent<ThreeSceneProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
- * ShaderControls — renders a `ControlSpec[]` schema into a live controls
- * panel using the DS control primitives. One component drives every
- * shader's params, the universal post stack (POST_CONTROLS), and any
- * effect layer — because they all describe themselves as ControlSpec[].
- *
- * Controlled: parent owns the `DemoState` and gets `onChange(key, value)`
- * on every edit. UI-only; it knows nothing about WebGL.
- *
- * Mapping:
- *   slider     → Slider + editable number (with optional unit)
- *   segmented  → ToggleGroup (single)
- *   select     → Select (compact)
- *   toggle     → Switch
- *   color      → swatch + hex field (with optional "→ slot" binding hint)
- *   colorList  → N swatches + add/remove (Paper's colorCount)
- *   divider    → section heading + rule
+ * ShaderControls — renders a `ControlSpec[]` schema into a DS-native control
+ * panel. The single renderer behind every shader's params, the universal
+ * post stack, and any effect layer (they all describe themselves as
+ * ControlSpec[]).
+ *
+ * DS-consistent by construction: it composes the design-system primitives at
+ * tool-panel density (Label size="xs", Slider size="sm", Input size="2xs"
+ * variant="ghost", ToggleGroup size="sm", Select size="xs", Switch) — no
+ * bespoke markup, so it reads identically to the Studio inspector and the
+ * homepage tweaker.
+ *
+ * `labelPosition` switches between the dense inline layout (label left,
+ * control + value right) and label-above (label + value on top, control
+ * below). Controlled: parent owns `DemoState`, gets `onChange(key, value)`.
  */
 
+type ControlLabelPosition = "inline" | "above";
 interface ShaderControlsProps {
     controls: readonly ControlSpec[];
     state: DemoState;
     onChange: (key: string, value: number | string | boolean | string[]) => void;
     disabled?: boolean;
+    /** Label placement: dense inline (default) or stacked above the control. */
+    labelPosition?: ControlLabelPosition;
+    /** Number-readout format. "percent" normalises every eligible slider (no
+     *  unit, fractional step, non-negative range) to 0–100%, killing the
+     *  abstract 0.3753 readouts. A control's own `display: "percent"` always
+     *  wins. Default "raw". */
+    format?: "raw" | "percent";
     className?: string;
 }
-declare function ShaderControls({ controls, state, onChange, disabled, className, }: ShaderControlsProps): React$1.JSX.Element;
+declare function ShaderControls({ controls, state, onChange, disabled, labelPosition, format, className, }: ShaderControlsProps): React.JSX.Element;
 
 /**
  * BackgroundFill — a frame's background *paint*, as a layer.
@@ -4072,13 +4199,13 @@ interface BackgroundFillProps {
     /** Layer opacity (0–1). */
     opacity?: number;
     /** CSS mix-blend-mode against the frame behind it. */
-    blendMode?: React$1.CSSProperties["mixBlendMode"];
+    blendMode?: React.CSSProperties["mixBlendMode"];
     /** Corner radius — match the frame's so the paint clips cleanly. */
     radius?: MediaRadius;
     className?: string;
-    style?: React$1.CSSProperties;
+    style?: React.CSSProperties;
 }
-declare const BackgroundFill: React$1.ForwardRefExoticComponent<BackgroundFillProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const BackgroundFill: React.ForwardRefExoticComponent<BackgroundFillProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * FillPicker — Grade's paint picker, modelled on Figma's fill popover.
@@ -4121,7 +4248,7 @@ interface FillPickerProps {
     onChange: (value: FillValue) => void;
     className?: string;
 }
-declare function FillPicker({ value, onChange, className }: FillPickerProps): React$1.JSX.Element;
+declare function FillPicker({ value, onChange, className }: FillPickerProps): React.JSX.Element;
 declare namespace FillPicker {
     var displayName: string;
 }
@@ -4153,7 +4280,7 @@ interface ShaderPresetPreviewProps {
     hideLabel?: boolean;
     onClick?: () => void;
 }
-declare const ShaderPresetPreview: React$1.ForwardRefExoticComponent<ShaderPresetPreviewProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const ShaderPresetPreview: React.ForwardRefExoticComponent<ShaderPresetPreviewProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * ShaderPresetPicker — runtime preset gallery + selection.
@@ -4184,7 +4311,7 @@ interface ShaderPresetPickerProps {
     columns?: 2 | 3 | 4;
     className?: string;
 }
-declare function ShaderPresetPicker({ value, onChange, filterTags, live, postPreset, palette, columns, className, }: ShaderPresetPickerProps): React$1.JSX.Element;
+declare function ShaderPresetPicker({ value, onChange, filterTags, live, postPreset, palette, columns, className, }: ShaderPresetPickerProps): React.JSX.Element;
 
 /**
  * Shader preset registry — maps semantic preset ids to scene factories
@@ -4220,7 +4347,7 @@ declare function cn(...inputs: ClassValue[]): string;
 interface LenisProviderProps {
     children: React.ReactNode;
 }
-declare function LenisProvider({ children }: LenisProviderProps): React$1.JSX.Element;
+declare function LenisProvider({ children }: LenisProviderProps): React.JSX.Element;
 
 /**
  * OKLCH ramp generation.
@@ -4287,6 +4414,34 @@ declare const FONTS: {
     readonly mono: "ui-monospace, Menlo, monospace";
 };
 type FontKey = keyof typeof FONTS;
+/** One uploaded font face a theme carries. Stored on
+ *  `ThemeInput.typography.customFonts` and emitted as an @font-face rule
+ *  by `fontFaceCSS` (apply.ts) wherever the theme is applied. */
+interface CustomFontFace {
+    /** CSS font-family name, e.g. "Pebble Sans". Doubles as the display
+     *  label and as the reference target for `custom:<family>` selections. */
+    family: string;
+    /** Permanent public URL for the font file (user-assets bucket). Must be
+     *  publicly resolvable so cross-origin embeds can load it. */
+    url: string;
+    /** @font-face `format()` hint. Derived from the file extension. */
+    format?: "woff2" | "woff" | "truetype" | "opentype";
+    /** font-weight descriptor: "400", "700", or a variable range "100 900". */
+    weight?: string;
+    /** font-stretch descriptor range, e.g. "75% 125%" for a wdth axis.
+     *  Defaults to a generous "50% 200%" (browsers clamp to the font's
+     *  real range) so width-variable fonts respond to font-stretch. */
+    stretch?: string;
+    style?: "normal" | "italic";
+    /** Drives the generic fallback stack appended after the family. */
+    category?: "sans" | "serif" | "mono";
+    /** Provenance: the `assets` row this face came from (optional — a theme
+     *  must stay renderable even if the library row is gone). */
+    assetId?: string;
+}
+/** What `typography.display/body/mono` accept: a registry key, or a
+ *  reference to an entry in `typography.customFonts` ("custom:<family>"). */
+type FontSelection = FontKey | `custom:${string}`;
 /** Type scale preset — controls how generous the size ladder is. */
 type TypeScalePreset = "compact" | "default" | "spacious";
 /** Modular (musical-interval) scale ids — mirror GDS_MODULAR_SCALES in
@@ -4349,6 +4504,21 @@ interface ThemeInput {
     };
     /** If true, the neutral ramp is pure gray regardless of neutral hue. */
     neutralPureGray?: boolean;
+    /**
+     * Focus ring colour. By default the ring (`--ring`) rides the PRIMARY
+     * ramp at a mode-tuned step (500 light / 400 dark / 300 superDark).
+     * `source` re-points it at another ramp; `hue` (0–360) gives the ring
+     * its own dedicated ramp at primary chroma — for brands whose focus
+     * colour is deliberately independent of primary/accent (e.g. a blue
+     * a11y ring on a warm-toned brand). `hue` wins over `source` when both
+     * are set. The mode-tuned step is preserved either way, so contrast
+     * behaviour per mode doesn't change. Deterministic + portable like
+     * every other ThemeInput field.
+     */
+    ring?: {
+        source?: "primary" | "accent" | "neutral";
+        hue?: number;
+    };
     /**
      * Global chroma intensity. Multiplies every ramp's chroma — a quick way to
      * flip the whole theme between muted / default / vibrant without touching
@@ -4356,9 +4526,9 @@ interface ThemeInput {
      */
     intensity?: ColorIntensity;
     typography: {
-        display: FontKey;
-        body: FontKey;
-        mono: FontKey;
+        display: FontSelection;
+        body: FontSelection;
+        mono: FontSelection;
         scale: TypeScale;
         /** Override heading weight. Defaults to 600 for sans, 500 for serif. */
         headingWeight?: number;
@@ -4366,6 +4536,18 @@ interface ThemeInput {
         bodyWeight?: number;
         /** Letter-spacing applied to headings. Default "-0.01em". */
         headingTracking?: string;
+        /** CSS font-stretch for body text (spans, paragraphs, component
+         *  text — it inherits everywhere). Meaningful for fonts with a
+         *  wdth axis, e.g. "90%" = TT Commons' Compact cut. Default
+         *  "normal". Fonts without the axis ignore it. */
+        bodyStretch?: string;
+        /** CSS font-stretch for display/heading text. Defaults to
+         *  bodyStretch so one knob re-cuts the whole theme. */
+        displayStretch?: string;
+        /** Uploaded faces this theme carries. A `custom:<family>` selection
+         *  above must have a matching entry here; unreferenced entries are
+         *  harmless (kept so switching back is instant). */
+        customFonts?: CustomFontFace[];
     };
     spacing: {
         density: SpacingDensity;
@@ -4430,9 +4612,17 @@ interface GeneratedTypography {
     fontSans: string;
     fontMono: string;
     fontDisplay: string;
+    /** Custom @font-face sources carried through from the input. Whoever
+     *  applies the theme (apply.ts, Fast Frame, Sandpack, embed) is
+     *  responsible for injecting these — the font-family vars above already
+     *  reference the family names. Absent/empty for registry-only themes. */
+    fontFaces?: CustomFontFace[];
     headingWeight: number;
     bodyWeight: number;
     headingTracking: string;
+    /** Resolved CSS font-stretch values ("normal" when unset). */
+    bodyStretch: string;
+    displayStretch: string;
     /** Explicit font-size for each step in the scale. */
     scale: {
         display: string;
@@ -4445,6 +4635,17 @@ interface GeneratedTypography {
         body: string;
         bodySm: string;
     };
+    /**
+     * The full named Tailwind ladder (2xs…7xl), present ONLY when
+     * `typography.scale` is a modular ratio id (THEME-MIGRATION.md B2).
+     * Emitted as `--text-<name>` / `--text-<name>--line-height` so every
+     * text-* utility re-pitches when the ratio changes. Presets leave this
+     * undefined — the static ladder in the stylesheet stays untouched.
+     */
+    namedScale?: Record<string, {
+        size: string;
+        lineHeight: string;
+    }>;
 }
 /** Concrete resolved CSS values for radius. */
 interface GeneratedRadius {
@@ -4460,6 +4661,14 @@ interface GeneratedRadius {
 interface GeneratedSpacing {
     baseUnit: string;
     densityFactor: number;
+    /**
+     * The Tailwind v4 `--spacing` base unit (e.g. "0.2125rem" for tight,
+     * "0.25rem" for default, "0.3rem" for roomy). Every spacing utility is
+     * calc(var(--spacing) * N), so this single variable re-scales padding,
+     * gaps, margins and sizes across every generated screen — retroactively
+     * (THEME-MIGRATION.md B1).
+     */
+    unit: string;
 }
 /** Concrete resolved effects values. */
 interface GeneratedEffects {
@@ -4511,6 +4720,21 @@ interface GeneratedTheme {
         primary: Ramp;
         accent: Ramp;
     };
+    /**
+     * Role ramp families (THEME-MIGRATION.md B4) — every status alias is a
+     * whole ramp because status displays many ways (soft 100 bg, solid 600
+     * fill, 800 text). Seeded from the fixed status hues; emitted as
+     * `--gds-<role>-<step>` triplets alongside primary/accent/neutral
+     * (which reuse `ramps`). Optional so partially-constructed themes stay
+     * valid; generator output always includes it.
+     */
+    roleRamps?: {
+        success: Ramp;
+        warning: Ramp;
+        info: Ramp;
+        highlight: Ramp;
+        destructive: Ramp;
+    };
     /** Semantic tokens for all four modes. */
     colors: Record<ModeName, GeneratedColorsMode>;
     /** 5-stop palette for chart series. */
@@ -4664,11 +4888,11 @@ type GradeThemeContextValue = {
     refresh: () => void;
 };
 interface GradeThemeProviderProps {
-    children: React$1.ReactNode;
+    children: React.ReactNode;
     defaultTheme?: string;
     defaultMode?: ModeName;
 }
-declare function GradeThemeProvider({ children, defaultTheme, defaultMode, }: GradeThemeProviderProps): React$1.JSX.Element;
+declare function GradeThemeProvider({ children, defaultTheme, defaultMode, }: GradeThemeProviderProps): React.JSX.Element;
 /** Read the active theme + mode. Must be used inside <GradeThemeProvider>. */
 declare function useGradeTheme(): GradeThemeContextValue;
 /** Safe variant — returns null outside a provider instead of throwing. */
@@ -4683,7 +4907,7 @@ declare function useMaybeGradeTheme(): GradeThemeContextValue | null;
  */
 declare function GradeThemeSwitcher({ className }: {
     className?: string;
-}): React$1.JSX.Element | null;
+}): React.JSX.Element | null;
 
 /**
  * 4-way mode switcher. Segmented control: super-light / light / dark / super-dark.
@@ -4696,13 +4920,13 @@ interface GradeModeSwitcherProps {
     className?: string;
     variant?: "icons" | "labeled";
 }
-declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProps): React$1.JSX.Element | null;
+declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProps): React.JSX.Element | null;
 
 /**
  * Binary light/dark toggle — flips between `light` and `dark` modes.
  * For the full 4-way picker (including super-light / super-dark), use
  * <GradeModeSwitcher /> instead.
  */
-declare function ThemeToggle(): React$1.JSX.Element;
+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, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, DEMO_SPEED_PRESETS, 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, 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, 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 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, themeToCSSVars, toggleVariants, useCarouselApi, 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, 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, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, DEMO_SPEED_PRESETS, 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, 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 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, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };