@lovett/ui 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, CSSProperties, RefObject, ComponentProps, ComponentType, FormHTMLAttributes, FormEvent } from 'react';
 import { Toaster as Toaster$1 } from 'sonner';
@@ -34,21 +33,21 @@ interface CardProps extends DivProps {
     interactive?: boolean;
 }
 declare const CardRoot: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
-declare function Head({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
-declare function Body({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
-declare function Tray$1({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
-declare function Foot({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
-declare function Title({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function Head({ className, ...rest }: DivProps): react.JSX.Element;
+declare function Body({ className, ...rest }: DivProps): react.JSX.Element;
+declare function Tray$1({ className, ...rest }: DivProps): react.JSX.Element;
+declare function Foot({ className, ...rest }: DivProps): react.JSX.Element;
+declare function Title({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 declare function Desc({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
     clamp?: 2 | 3;
-}): react_jsx_runtime.JSX.Element;
-declare function Meta({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
+declare function Meta({ className, ...rest }: DivProps): react.JSX.Element;
 declare function MetaItem({ icon, children, className, }: {
     icon?: ReactNode;
     children: ReactNode;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function Actions({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
+declare function Actions({ className, ...rest }: DivProps): react.JSX.Element;
 interface ActionButtonProps$1 extends HTMLAttributes<HTMLButtonElement> {
     danger?: boolean;
 }
@@ -63,13 +62,13 @@ declare function IconTile({ bg, fg, size, className, children, }: {
     size?: number;
     className?: string;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 /** Tag row helper — reads `--tag-bg`/`--border` automatically. */
 declare function TagRow({ tags, max, className, }: {
     tags: string[];
     max?: number;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 type CardComponent = typeof CardRoot & {
     Head: typeof Head;
     Body: typeof Body;
@@ -86,6 +85,22 @@ type CardComponent = typeof CardRoot & {
 };
 declare const Card: CardComponent;
 
+interface CollapsibleCardProps {
+    title: ReactNode;
+    /** Optional leading icon (rendered before the title). */
+    icon?: ReactNode;
+    /** Optional header content after the title (e.g. a count or subtitle). */
+    meta?: ReactNode;
+    /** Right-aligned header controls, kept outside the collapse toggle. */
+    actions?: ReactNode;
+    /** Start expanded (default) or collapsed. */
+    defaultOpen?: boolean;
+    /** Body padding utility; pass '' for full-bleed bodies (e.g. tables). */
+    contentClassName?: string;
+    children: ReactNode;
+}
+declare function CollapsibleCard({ title, icon, meta, actions, defaultOpen, contentClassName, children, }: CollapsibleCardProps): react.JSX.Element;
+
 type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'destructive-soft' | 'icon' | 'toolbar';
 type ButtonSize = 'sm' | 'md' | 'lg';
 type ButtonShape = 'default' | 'circle';
@@ -107,7 +122,7 @@ interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** One or more `<Button>` elements. */
     children: ReactNode;
 }
-declare function ButtonGroup({ children, className, role, ...rest }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonGroup({ children, className, role, ...rest }: ButtonGroupProps): react.JSX.Element;
 
 type InputSize = 'sm' | 'md' | 'lg';
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
@@ -179,10 +194,10 @@ interface ModalProps {
     children: ReactNode;
     className?: string;
 }
-declare function Modal({ isOpen, onClose, title, children, className }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, children, className }: ModalProps): react.JSX.Element | null;
 declare namespace Modal {
-    var Tray: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
-    var Footer: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    var Tray: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+    var Footer: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
 }
 
 type Side$1 = 'right' | 'bottom';
@@ -245,7 +260,7 @@ interface FloatingDrawerProps {
      * the right-drawer's body padding so the action bar feels integrated. */
     headerClassName?: string;
 }
-declare function FloatingDrawer({ isOpen, onClose, side, size, resizable, onResize, title, titleSlot, footer, children, className, panelClassName, modal, anchor, showClose, headerClassName, collapsed, }: FloatingDrawerProps): react_jsx_runtime.JSX.Element;
+declare function FloatingDrawer({ isOpen, onClose, side, size, resizable, onResize, title, titleSlot, footer, children, className, panelClassName, modal, anchor, showClose, headerClassName, collapsed, }: FloatingDrawerProps): react.JSX.Element;
 /**
  * DetailSection — small label/value layout for drawer body content.
  * Ports verbatim from brand-ai-extension's detail-drawer.tsx.
@@ -254,7 +269,7 @@ declare function DetailSection({ label, children, className, }: {
     label: string;
     children: ReactNode;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 type BrandLogoTileSize = 'xs' | 'sm' | 'md' | 'lg' | number;
 interface BrandLogoTileProps {
@@ -300,12 +315,12 @@ interface BrandLogoTileProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function BrandLogoTile({ size, url, name, isFavicon, accentGlow, fallbackChar, background, color, borderless, className, style, }: BrandLogoTileProps): react_jsx_runtime.JSX.Element;
+declare function BrandLogoTile({ size, url, name, isFavicon, accentGlow, fallbackChar, background, color, borderless, className, style, }: BrandLogoTileProps): react.JSX.Element;
 
 interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     label: string;
 }
-declare function ActionButton({ label, className, children, ...rest }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+declare function ActionButton({ label, className, children, ...rest }: ActionButtonProps): react.JSX.Element;
 interface FootProps {
     meta?: ReactNode;
     link?: {
@@ -317,7 +332,7 @@ interface FootProps {
 /** FootItem — a single icon+text item inside the foot. */
 declare function FootItem({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 interface BaseProps {
     /** DOM id and `data-section-id` for ChipNav scroll-spy. */
     id: string;
@@ -331,6 +346,20 @@ interface BaseProps {
     foot?: FootProps;
     /** Extra padding tweak. */
     className?: string;
+    /**
+     * Render as a SINGLE flat surface — header, divider, body — instead of
+     * the default frame-plus-inner-tray.
+     *
+     * Use this when the section is already inside a <FrameStack>. A framed
+     * section nested in a frame gives you three surface tiers (group frame →
+     * section frame → tray), which reads as boxes inside boxes. Flat is the
+     * shape <SectionCard> uses in the Social Spec builder, and it is what
+     * makes a group of sections read as one contained unit rather than as a
+     * stack of independent cards.
+     *
+     * Default (false) is unchanged, so every existing consumer is unaffected.
+     */
+    flat?: boolean;
 }
 interface StaticSectionProps extends BaseProps {
     /** Right-side header actions (override default pencil/generate). */
@@ -355,7 +384,7 @@ interface EditableSectionProps extends BaseProps {
     actions?: undefined;
 }
 type ProfileSectionProps = StaticSectionProps | EditableSectionProps;
-declare function ProfileSection(props: ProfileSectionProps): react_jsx_runtime.JSX.Element;
+declare function ProfileSection(props: ProfileSectionProps): react.JSX.Element;
 type ProfileSectionComponent = typeof ProfileSection & {
     ActionButton: typeof ActionButton;
     FootItem: typeof FootItem;
@@ -435,7 +464,7 @@ interface ChipNavProps {
      */
     density?: 'comfortable' | 'compact';
 }
-declare function ChipNav({ items, scrollContainer, stickyTop, scrollOffset, actions, className, style, surface, activeId: activeIdProp, onItemClick, position, density, }: ChipNavProps): react_jsx_runtime.JSX.Element;
+declare function ChipNav({ items, scrollContainer, stickyTop, scrollOffset, actions, className, style, surface, activeId: activeIdProp, onItemClick, position, density, }: ChipNavProps): react.JSX.Element;
 
 interface CompletionRingProps {
     /** 0–100. Values outside the range are clamped. */
@@ -460,7 +489,7 @@ interface CompletionRingProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function CompletionRing({ percent, size, strokeWidth, label, showLabel, trackColor, fillColor, className, style, }: CompletionRingProps): react_jsx_runtime.JSX.Element;
+declare function CompletionRing({ percent, size, strokeWidth, label, showLabel, trackColor, fillColor, className, style, }: CompletionRingProps): react.JSX.Element;
 
 /**
  * MicrosoftLogo — the Microsoft four-square brand mark, for "Sign in with
@@ -476,7 +505,64 @@ interface MicrosoftLogoProps {
     size?: number;
     className?: string;
 }
-declare function MicrosoftLogo({ size, className }: MicrosoftLogoProps): react_jsx_runtime.JSX.Element;
+declare function MicrosoftLogo({ size, className }: MicrosoftLogoProps): react.JSX.Element;
+
+/**
+ * Brand platform glyphs — real mono (currentColor) marks for the ad platforms
+ * the Social Spec builds for, replacing approximate Lucide stand-ins (Ghost for
+ * Snapchat, Home for Nextdoor, Music for TikTok, Megaphone for Meta). ADR-135.
+ *
+ * `@lovett/ui` is the one allowed home for bespoke SVG definitions (CLAUDE.md
+ * §2/§6) — same rationale as `MicrosoftLogo`. Path data is extracted from the
+ * owner's MIT-licensed fork github.com/edwinlov3tt/logos-apps (upstream: the
+ * ln-dev7 "logos" collection); each glyph is normalized to a single-colour
+ * `currentColor` silhouette so it adapts to its context (active pill = white,
+ * inactive tab = grey) — full-colour marks would clash inside the red pill.
+ * Extraction choices were picked by visual review; Facebook, Messenger and
+ * TikTok silhouettes are true path-boolean derivations of the official marks
+ * (disc⊖f, bubble⊖bolt, glitch-layer union — computed offline with paper.js,
+ * baked here as static path data).
+ *
+ * Marks are trademarks of their platforms — used nominatively to refer to the
+ * platforms themselves, exactly like the platform-chrome in the ad previews.
+ */
+interface BrandIconProps {
+    /** Square box size in px; the glyph letterboxes inside (non-square viewBoxes
+     *  centre via preserveAspectRatio). Default 16 — a tab/affix glyph. */
+    size?: number;
+    className?: string;
+}
+/** Meta brand glyph (mono, currentColor). */
+declare function BrandMeta({ size, className }: BrandIconProps): react.JSX.Element;
+/** Facebook brand glyph (mono, currentColor). */
+declare function BrandFacebook({ size, className }: BrandIconProps): react.JSX.Element;
+/** Instagram brand glyph (mono, currentColor). */
+declare function BrandInstagram({ size, className }: BrandIconProps): react.JSX.Element;
+/** Messenger brand glyph (mono, currentColor). */
+declare function BrandMessenger({ size, className }: BrandIconProps): react.JSX.Element;
+/** LinkedIn brand glyph (mono, currentColor). */
+declare function BrandLinkedIn({ size, className }: BrandIconProps): react.JSX.Element;
+/** Nextdoor brand glyph (mono, currentColor). */
+declare function BrandNextdoor({ size, className }: BrandIconProps): react.JSX.Element;
+/** Pinterest brand glyph (mono, currentColor). */
+declare function BrandPinterest({ size, className }: BrandIconProps): react.JSX.Element;
+/** Snapchat brand glyph (mono, currentColor). */
+declare function BrandSnapchat({ size, className }: BrandIconProps): react.JSX.Element;
+/** TikTok brand glyph (mono, currentColor). */
+declare function BrandTikTok({ size, className }: BrandIconProps): react.JSX.Element;
+/** Keyed map for registry-style resolution (e.g. the Social Spec tactic icons). */
+declare const BRAND_ICONS: {
+    readonly meta: typeof BrandMeta;
+    readonly facebook: typeof BrandFacebook;
+    readonly instagram: typeof BrandInstagram;
+    readonly messenger: typeof BrandMessenger;
+    readonly linkedin: typeof BrandLinkedIn;
+    readonly nextdoor: typeof BrandNextdoor;
+    readonly pinterest: typeof BrandPinterest;
+    readonly snapchat: typeof BrandSnapchat;
+    readonly tiktok: typeof BrandTikTok;
+};
+type BrandIconKey = keyof typeof BRAND_ICONS;
 
 interface ChoroplethProps {
     /** `radius` → concentric circles; `isochrone` → concentric polygons. */
@@ -484,7 +570,7 @@ interface ChoroplethProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function Choropleth({ mode, className, style }: ChoroplethProps): react_jsx_runtime.JSX.Element;
+declare function Choropleth({ mode, className, style }: ChoroplethProps): react.JSX.Element;
 
 type Crumb = {
     label: string;
@@ -520,7 +606,7 @@ interface PageShellProps {
 }
 declare function PageHeaderSlotProvider({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 /**
  * Page shell — promoted from brand-ai-extension Phase 2a (ADR-009 Decision 7).
  *
@@ -533,7 +619,7 @@ declare function PageHeaderSlotProvider({ children }: {
  * rendering its own bar — the workspace uses this to merge the lens crumbs
  * onto the same row as the workspace sidebar toggle.
  */
-declare function PageShell({ crumbs, breadcrumb, title, actions, headerCenter, children, contentClassName, }: PageShellProps): react_jsx_runtime.JSX.Element;
+declare function PageShell({ crumbs, breadcrumb, title, actions, headerCenter, children, contentClassName, }: PageShellProps): react.JSX.Element;
 
 /**
  * PageHeaderHost — single workspace-level header bar that the active
@@ -570,7 +656,7 @@ declare function PageHeaderHost({ leading, center, trailing, padX, }: {
      */
     center?: ReactNode;
     trailing?: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 /**
  * Scrollable wrapper that exposes its scrollRef via a render prop so
  * the consuming header (PageShell's internal PageHeader) can subscribe
@@ -579,7 +665,7 @@ declare function PageHeaderHost({ leading, center, trailing, padX, }: {
 declare function AppScroll({ children, className, }: {
     children: (scrollRef: RefObject<HTMLDivElement | null>) => ReactNode;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 type SonnerToasterProps = ComponentProps<typeof Toaster$1>;
 /**
@@ -592,18 +678,18 @@ type SonnerToasterProps = ComponentProps<typeof Toaster$1>;
  * Apps can override any prop (position, duration, theme, etc.) by
  * passing it through.
  */
-declare function Toaster(props: SonnerToasterProps): react_jsx_runtime.JSX.Element;
+declare function Toaster(props: SonnerToasterProps): react.JSX.Element;
 
 declare function SectionLabel({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function IdentityLabel({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function IdentityValue({ children, className, }: {
     children: ReactNode;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function TextInput({ value, onChange, placeholder, autoFocus, autoComplete, name, }: {
     value: string;
     onChange: (v: string) => void;
@@ -613,7 +699,7 @@ declare function TextInput({ value, onChange, placeholder, autoFocus, autoComple
     autoComplete?: string | undefined;
     /** Forwarded so the field participates in form submission / autofill heuristics. */
     name?: string | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function TextareaInput({ value, onChange, placeholder, autoFocus, autoComplete, name, rows, }: {
     value: string;
     onChange: (v: string) => void;
@@ -622,15 +708,15 @@ declare function TextareaInput({ value, onChange, placeholder, autoFocus, autoCo
     autoComplete?: string | undefined;
     name?: string | undefined;
     rows?: number | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function EmptyPlaceholder({ label, description, onAdd, }: {
     label: string;
     description?: string | undefined;
     onAdd?: (() => void) | undefined;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function ListItem({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 type Strategy = 'vertical' | 'horizontal' | 'grid';
 declare function SortableList<T>({ items, getId, onReorder, strategy, children, }: {
@@ -639,7 +725,7 @@ declare function SortableList<T>({ items, getId, onReorder, strategy, children,
     onReorder: (items: T[]) => void;
     strategy?: Strategy;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function SortableItem({ id, children, }: {
     id: string;
     children: (props: {
@@ -648,11 +734,11 @@ declare function SortableItem({ id, children, }: {
         style: CSSProperties;
         isDragging: boolean;
     }) => ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function DragHandle({ dragHandleProps, className, }: {
     dragHandleProps: HTMLAttributes<HTMLElement>;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 interface EmptyStateProps {
     /** Lucide icon (or any ReactNode) rendered inside the 56×56 tile.
@@ -668,7 +754,7 @@ interface EmptyStateProps {
      *  (e.g. when the parent already provides vertical padding). */
     className?: string;
 }
-declare function EmptyState({ icon, title, description, actions, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+declare function EmptyState({ icon, title, description, actions, className, }: EmptyStateProps): react.JSX.Element;
 
 interface RadioGroupProps<T extends string = string> {
     /** Form name — required for proper radio semantics + form submission. */
@@ -688,7 +774,7 @@ interface RadioGroupProps<T extends string = string> {
     /** Disable every child radio. */
     disabled?: boolean;
 }
-declare function RadioGroup<T extends string = string>({ name, value, onChange, children, ariaLabel, orientation, className, disabled, }: RadioGroupProps<T>): react_jsx_runtime.JSX.Element;
+declare function RadioGroup<T extends string = string>({ name, value, onChange, children, ariaLabel, orientation, className, disabled, }: RadioGroupProps<T>): react.JSX.Element;
 interface RadioProps {
     /** Value emitted to the group's onChange when picked. */
     value: string;
@@ -714,7 +800,7 @@ interface OptionTileProps {
     disabled: boolean | undefined;
     className: string | undefined;
 }
-declare function OptionTile({ selected, onSelect, inputType, inputName, label, description, disabled, className, }: OptionTileProps): react_jsx_runtime.JSX.Element;
+declare function OptionTile({ selected, onSelect, inputType, inputName, label, description, disabled, className, }: OptionTileProps): react.JSX.Element;
 interface OptionTileGroupOption<T extends string> {
     value: T;
     label: ReactNode;
@@ -741,7 +827,7 @@ type OptionTileGroupProps<T extends string = string> = {
     /** Optional shared `name` attr on the underlying checkboxes (rarely needed). */
     name?: string;
 };
-declare function OptionTileGroup<T extends string = string>(props: OptionTileGroupProps<T>): react_jsx_runtime.JSX.Element;
+declare function OptionTileGroup<T extends string = string>(props: OptionTileGroupProps<T>): react.JSX.Element;
 
 type MetricCardTone = 'neutral' | 'accent' | 'success' | 'warning' | 'destructive' | 'info';
 interface MetricCardProps {
@@ -765,7 +851,7 @@ interface MetricCardProps {
     /** Optional className override for the outer container. */
     className?: string;
 }
-declare function MetricCard({ value, label, tone, icon, labelPosition, className, }: MetricCardProps): react_jsx_runtime.JSX.Element;
+declare function MetricCard({ value, label, tone, icon, labelPosition, className, }: MetricCardProps): react.JSX.Element;
 
 /**
  * ProgressBar — labeled fill bar.
@@ -789,7 +875,7 @@ interface ProgressBarProps {
     /** Track height in px (default 8). */
     height?: number;
 }
-declare function ProgressBar({ label, percent, status, height }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+declare function ProgressBar({ label, percent, status, height }: ProgressBarProps): react.JSX.Element;
 
 /**
  * StepLoader — a sequential, multi-step loading indicator (3-5 steps). Each step
@@ -821,7 +907,7 @@ interface StepLoaderProps {
     minLastStepMs?: number;
     className?: string;
 }
-declare function StepLoader({ steps, done, onComplete, defaultStepMs, minLastStepMs, className, }: StepLoaderProps): react_jsx_runtime.JSX.Element;
+declare function StepLoader({ steps, done, onComplete, defaultStepMs, minLastStepMs, className, }: StepLoaderProps): react.JSX.Element;
 
 type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'destructive' | 'info';
 interface BadgeProps {
@@ -838,7 +924,7 @@ interface BadgeProps {
     /** Extra classes merged onto the outer span (no longer replaces base). */
     className?: string;
 }
-declare function Badge({ tone, children, icon, dot, size, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ tone, children, icon, dot, size, className, }: BadgeProps): react.JSX.Element;
 
 interface TokenBadgeProps {
     /** Public token name to tint from, e.g. `--folder-teal`, `--accent`,
@@ -860,7 +946,79 @@ interface TokenBadgeProps {
     uppercase?: boolean;
     className?: string;
 }
-declare function TokenBadge({ colorVar, children, variant, dot, icon, size, shape, uppercase, className, }: TokenBadgeProps): react_jsx_runtime.JSX.Element;
+declare function TokenBadge({ colorVar, children, variant, dot, icon, size, shape, uppercase, className, }: TokenBadgeProps): react.JSX.Element;
+
+interface ValueChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    children: ReactNode;
+    /** Makes the chip copyable. The toast reads "Copied <copyLabel>". */
+    copyValue?: string;
+    copyLabel?: string;
+    /** `sm` for dense rows (10px), `md` default (11px). */
+    size?: 'sm' | 'md';
+    /** Stretch to fill a flex row — the equal-thirds hex/rgb/hsl layout. */
+    fill?: boolean;
+}
+declare const ValueChip: react.ForwardRefExoticComponent<ValueChipProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface MetaCellProps extends HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    children: ReactNode;
+    /** Optional leading glyph in the label row. */
+    icon?: ReactNode;
+}
+declare const MetaCell: react.ForwardRefExoticComponent<MetaCellProps & react.RefAttributes<HTMLDivElement>>;
+
+declare function copyText(value: string, label?: string): Promise<void>;
+
+/**
+ * Colour maths for brand-palette surfaces — hex to rgb/hsl, WCAG contrast.
+ *
+ * Promoted from `apps/extension/src/sidepanel/color-utils.ts` when the
+ * workspace's Brand Profile grew the same colour cards the extension's
+ * Colors tab already had. Two consumers, one implementation — the same
+ * rule the platform-chrome tokens were consolidated under.
+ *
+ * Pure functions, no deps, no DOM.
+ */
+type RgbTuple = [number, number, number];
+/** Parse `#abc` or `#aabbcc` (with or without the hash) into an rgb tuple. */
+declare function hexToRgbTuple(hex: string): RgbTuple;
+/** `"24, 119, 242"` — display form, the inside of an `rgb()`. */
+declare function rgbString(hex: string): string;
+/**
+ * `"rgb(24, 119, 242)"` — a complete CSS value, for copying.
+ *
+ * Lives here rather than being assembled at the call site because the
+ * token-boundary lint reads `rgb(...)` in app code as a raw colour
+ * literal — correctly, since it cannot tell a clipboard string from a
+ * style. packages/ui is the exempt substrate, so this is its job.
+ */
+declare function rgbCss(hex: string): string;
+/** `"217° 89% 52%"` — display form, not a CSS value. */
+declare function hslString(hex: string): string;
+/** WCAG 2.1 relative luminance (sRGB). */
+declare function relativeLuminance(hex: string): number;
+/** Contrast ratio between two relative luminances. */
+declare function contrastRatio(a: number, b: number): number;
+/**
+ * Whether black or white text reads better ON this colour, and at what
+ * ratio. Used to pick a legible foreground for a swatch banner.
+ */
+declare function bestTextOn(hex: string): {
+    onLight: boolean;
+    ratio: number;
+};
+interface WcagBadge {
+    label: string;
+    pass: boolean;
+}
+/**
+ * The three standard thresholds, scored against the BEST of black-or-white
+ * text on this swatch. It answers "can any text sit on this colour", which
+ * is the useful question for a brand palette — not "is this colour itself
+ * readable", which depends on a background the palette doesn't know.
+ */
+declare function wcagBadges(hex: string): WcagBadge[];
 
 /**
  * AllocationSparkbar — a compact per-period bar strip.
@@ -890,7 +1048,7 @@ interface AllocationSparkbarProps {
     height?: number;
     className?: string;
 }
-declare function AllocationSparkbar({ values, baseColorVar, colorVars, labels, titles, height, className, }: AllocationSparkbarProps): react_jsx_runtime.JSX.Element;
+declare function AllocationSparkbar({ values, baseColorVar, colorVars, labels, titles, height, className, }: AllocationSparkbarProps): react.JSX.Element;
 
 type FloatingStatusTone = 'neutral' | 'accent' | 'success' | 'warning' | 'destructive' | 'info';
 interface FloatingStatusBarProps {
@@ -908,7 +1066,7 @@ interface FloatingStatusBarProps {
      *  bottom-center. */
     className?: string;
 }
-declare function FloatingStatusBar({ tone, label, meta, summary, action, className, }: FloatingStatusBarProps): react_jsx_runtime.JSX.Element;
+declare function FloatingStatusBar({ tone, label, meta, summary, action, className, }: FloatingStatusBarProps): react.JSX.Element;
 
 interface StatsGridProps {
     children: ReactNode;
@@ -918,7 +1076,7 @@ interface StatsGridProps {
     /** Optional className override for the outer container. */
     className?: string;
 }
-declare function StatsGrid({ children, minColumnWidth, className, }: StatsGridProps): react_jsx_runtime.JSX.Element;
+declare function StatsGrid({ children, minColumnWidth, className, }: StatsGridProps): react.JSX.Element;
 
 interface Column<T> {
     /** Unique id; doubles as the sort key. Use a `keyof T` string or
@@ -957,7 +1115,7 @@ interface SortableTableProps<T> {
     /** Compact density (smaller padding). Default false. */
     compact?: boolean;
 }
-declare function SortableTable<T>({ columns, rows, rowKey, initialSort, onRowClick, emptyState, zebra, compact, }: SortableTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function SortableTable<T>({ columns, rows, rowKey, initialSort, onRowClick, emptyState, zebra, compact, }: SortableTableProps<T>): react.JSX.Element;
 
 /**
  * Pagination — "Showing X-Y of Z" + prev/next buttons.
@@ -979,7 +1137,7 @@ interface PaginationProps {
     totalItems: number;
     onPageChange: (page: number) => void;
 }
-declare function Pagination({ currentPage, pageSize, totalItems, onPageChange, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+declare function Pagination({ currentPage, pageSize, totalItems, onPageChange, }: PaginationProps): react.JSX.Element | null;
 
 interface Tab {
     id: string;
@@ -989,6 +1147,9 @@ interface Tab {
     /** Optional count badge rendered after the label. */
     count?: number;
     disabled?: boolean;
+    /** Accessible name for ICON-ONLY tabs (label rendered empty) — e.g. the
+     *  responsive platform switcher's compact tier (ADR-135). */
+    ariaLabel?: string;
 }
 interface TabsProps {
     tabs: Tab[];
@@ -1002,7 +1163,7 @@ interface TabsProps {
     stretch?: boolean;
     className?: string;
 }
-declare function Tabs({ tabs, activeTabId, onTabChange, size, variant, stretch, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function Tabs({ tabs, activeTabId, onTabChange, size, variant, stretch, className, }: TabsProps): react.JSX.Element;
 
 interface PillButtonProps {
     active: boolean;
@@ -1016,7 +1177,7 @@ interface PillButtonProps {
     icon?: ReactNode;
     disabled?: boolean;
 }
-declare function PillButton({ active, onClick, children, size, tone, icon, disabled, }: PillButtonProps): react_jsx_runtime.JSX.Element;
+declare function PillButton({ active, onClick, children, size, tone, icon, disabled, }: PillButtonProps): react.JSX.Element;
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'checked'> {
     checked?: boolean;
@@ -1035,7 +1196,7 @@ interface DropdownMenuProps {
     defaultOpen?: boolean;
     children: ReactNode;
 }
-declare function DropdownMenu({ open: controlledOpen, onOpenChange, defaultOpen, children, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenu({ open: controlledOpen, onOpenChange, defaultOpen, children, }: DropdownMenuProps): react.JSX.Element;
 interface DropdownMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Skip the default secondary-Button styling. Useful when wrapping
      * an existing Button primitive. */
@@ -1046,7 +1207,7 @@ interface DropdownMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElemen
  * secondary Button visual (rounded-xl + `--bg-card` fill + 1px
  * `--border`). Set `unstyled` to wrap your own button shape.
  */
-declare function DropdownMenuTrigger({ unstyled, className, onClick, children, ...rest }: DropdownMenuTriggerProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ unstyled, className, onClick, children, ...rest }: DropdownMenuTriggerProps): react.JSX.Element;
 interface DropdownMenuContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     children: ReactNode;
     /** Horizontal alignment relative to the trigger. Default `start`. */
@@ -1065,18 +1226,18 @@ interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement>
      * items that have one. */
     inset?: boolean;
 }
-declare function DropdownMenuItem({ variant, inset, className, onClick, children, ...rest }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ variant, inset, className, onClick, children, ...rest }: DropdownMenuItemProps): react.JSX.Element;
 interface DropdownMenuCheckboxItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
     checked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
 }
-declare function DropdownMenuCheckboxItem({ checked, onCheckedChange, className, children, onClick, disabled, ...rest }: DropdownMenuCheckboxItemProps): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuCheckboxItem({ checked, onCheckedChange, className, children, onClick, disabled, ...rest }: DropdownMenuCheckboxItemProps): react.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 interface DropdownMenuLabelProps extends HTMLAttributes<HTMLDivElement> {
     inset?: boolean;
 }
-declare function DropdownMenuLabel({ inset, className, ...rest }: DropdownMenuLabelProps): react_jsx_runtime.JSX.Element;
-declare function DropdownMenuGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuLabel({ inset, className, ...rest }: DropdownMenuLabelProps): react.JSX.Element;
+declare function DropdownMenuGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 
 /**
  * DataGrid public types.
@@ -1213,7 +1374,7 @@ type EditingCell<ColumnId extends string> = {
     };
 };
 
-declare function DataGrid<Row extends DataGridRowBase, ColumnId extends string>({ rows, columns, getRowLabel, renderCell, isEditableColumn, getCellEditValue, applyCellEdit, getDrawerCellValue, canOpenDrawer, renderSummary, renderDrawerPanel, renderToolbar, onToolbarPropsChange, onOpenDrawerCell, drawerModal, drawerSize, stickySummaryFooter, stickyHeader, fillWidth, fillAvailableHeight, tableContainerClassName, onRowsChange, sort, onSortChange, }: DataGridProps<Row, ColumnId>): react_jsx_runtime.JSX.Element;
+declare function DataGrid<Row extends DataGridRowBase, ColumnId extends string>({ rows, columns, getRowLabel, renderCell, isEditableColumn, getCellEditValue, applyCellEdit, getDrawerCellValue, canOpenDrawer, renderSummary, renderDrawerPanel, renderToolbar, onToolbarPropsChange, onOpenDrawerCell, drawerModal, drawerSize, stickySummaryFooter, stickyHeader, fillWidth, fillAvailableHeight, tableContainerClassName, onRowsChange, sort, onSortChange, }: DataGridProps<Row, ColumnId>): react.JSX.Element;
 
 interface DataGridToolbarProps {
     /** Left slot — typically a <SearchBar>. Stretches up to a comfortable
@@ -1223,19 +1384,19 @@ interface DataGridToolbarProps {
     children?: ReactNode;
     className?: string;
 }
-declare function DataGridToolbar({ search, children, className, }: DataGridToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DataGridToolbar({ search, children, className, }: DataGridToolbarProps): react.JSX.Element;
 
 type DataGridColumnOptionsMenuProps<ColumnId extends string> = Pick<DataGridToolbarRenderProps<ColumnId>, 'showSummaries' | 'onShowSummariesChange' | 'visibleColumns' | 'visibleColumnIds' | 'hiddenColumns' | 'toggleColumnVisibility' | 'optionsSensors' | 'onOptionColumnDragEnd' | 'optionsDndContextId'> & {
     triggerLabel?: string;
 };
-declare function DataGridColumnOptionsMenu<ColumnId extends string>({ showSummaries, onShowSummariesChange, visibleColumns, visibleColumnIds, hiddenColumns, toggleColumnVisibility, optionsSensors, onOptionColumnDragEnd, optionsDndContextId, triggerLabel, }: DataGridColumnOptionsMenuProps<ColumnId>): react_jsx_runtime.JSX.Element;
+declare function DataGridColumnOptionsMenu<ColumnId extends string>({ showSummaries, onShowSummariesChange, visibleColumns, visibleColumnIds, hiddenColumns, toggleColumnVisibility, optionsSensors, onOptionColumnDragEnd, optionsDndContextId, triggerLabel, }: DataGridColumnOptionsMenuProps<ColumnId>): react.JSX.Element;
 
 type DataGridDragOverlayProps<ColumnId extends string> = {
     dragOverlayColumn: DataGridColumn<ColumnId> | null;
     columnWidths: Record<ColumnId, number>;
     dragOverlayHeight: number;
 };
-declare function DataGridDragOverlay<ColumnId extends string>({ dragOverlayColumn, columnWidths, dragOverlayHeight, }: DataGridDragOverlayProps<ColumnId>): react_jsx_runtime.JSX.Element | null;
+declare function DataGridDragOverlay<ColumnId extends string>({ dragOverlayColumn, columnWidths, dragOverlayHeight, }: DataGridDragOverlayProps<ColumnId>): react.JSX.Element | null;
 type DataGridDropIndicatorProps = {
     dropIndicatorLeft: number | null;
     dragTableRect: {
@@ -1243,7 +1404,7 @@ type DataGridDropIndicatorProps = {
         height: number;
     } | null;
 };
-declare function DataGridDropIndicator({ dropIndicatorLeft, dragTableRect, }: DataGridDropIndicatorProps): react_jsx_runtime.JSX.Element | null;
+declare function DataGridDropIndicator({ dropIndicatorLeft, dragTableRect, }: DataGridDropIndicatorProps): react.JSX.Element | null;
 
 interface DropdownButtonItem {
     /** Stable id for keying. If omitted, the index is used (avoid for
@@ -1299,7 +1460,7 @@ interface DropdownButtonProps {
      *  an engaged filter. Pair with `activeId` for filter-chip use. */
     active?: boolean;
 }
-declare function DropdownButton({ label, variant, size, leadingIcon, trailingIcon, items, disabled, loading, className, align, side, sideOffset, menuWidth, triggerAriaLabel, activeId, active, }: DropdownButtonProps): react_jsx_runtime.JSX.Element;
+declare function DropdownButton({ label, variant, size, leadingIcon, trailingIcon, items, disabled, loading, className, align, side, sideOffset, menuWidth, triggerAriaLabel, activeId, active, }: DropdownButtonProps): react.JSX.Element;
 
 interface AccordionProps {
     /** Ids of the currently-open sections. */
@@ -1309,7 +1470,7 @@ interface AccordionProps {
     children: ReactNode;
     className?: string;
 }
-declare function Accordion({ openIds, onToggle, children, className }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function Accordion({ openIds, onToggle, children, className }: AccordionProps): react.JSX.Element;
 interface AccordionSectionProps {
     /** Stable id — matched against the Accordion's `openIds`. */
     id: string;
@@ -1323,7 +1484,7 @@ interface AccordionSectionProps {
     complete?: boolean;
     children: ReactNode;
 }
-declare function AccordionSection({ id, title, summary, badge, complete, children, }: AccordionSectionProps): react_jsx_runtime.JSX.Element;
+declare function AccordionSection({ id, title, summary, badge, complete, children, }: AccordionSectionProps): react.JSX.Element;
 declare const AccordionCompound: typeof Accordion & {
     Section: typeof AccordionSection;
 };
@@ -1365,7 +1526,7 @@ interface MenuButtonProps {
     /** aria-label for the trigger when the visible label is ambiguous. */
     triggerAriaLabel?: string;
 }
-declare function MenuButton({ label, items, leadingIcon, disabled, align, menuWidth, className, triggerAriaLabel, }: MenuButtonProps): react_jsx_runtime.JSX.Element;
+declare function MenuButton({ label, items, leadingIcon, disabled, align, menuWidth, className, triggerAriaLabel, }: MenuButtonProps): react.JSX.Element;
 
 /**
  * CopyField — an input/output field with a copy button pinned to the
@@ -1407,7 +1568,7 @@ interface CopyFieldProps {
     copyToastMessage?: string;
     className?: string;
 }
-declare function CopyField({ value, onChange, multiline, rows, placeholder, readOnly, label, hideLabel, id, copyToastMessage, className, }: CopyFieldProps): react_jsx_runtime.JSX.Element;
+declare function CopyField({ value, onChange, multiline, rows, placeholder, readOnly, label, hideLabel, id, copyToastMessage, className, }: CopyFieldProps): react.JSX.Element;
 
 /**
  * TagChipInput — type-to-create chips with autocomplete.
@@ -1450,7 +1611,7 @@ interface TagChipInputProps {
     error?: boolean;
     className?: string;
 }
-declare function TagChipInput({ value, onChange, suggestions, placeholder, max, maxLength, disabled, id, error, className, }: TagChipInputProps): react_jsx_runtime.JSX.Element;
+declare function TagChipInput({ value, onChange, suggestions, placeholder, max, maxLength, disabled, id, error, className, }: TagChipInputProps): react.JSX.Element;
 
 /**
  * FolderTreePicker — dropdown picker for a nestable folder tree.
@@ -1503,7 +1664,7 @@ interface FolderTreePickerProps {
     /** Apply error styling to the trigger. */
     error?: boolean;
 }
-declare function FolderTreePicker({ folders, value, onChange, onCreateFolder, placeholder, disabled, id, className, error, }: FolderTreePickerProps): react_jsx_runtime.JSX.Element;
+declare function FolderTreePicker({ folders, value, onChange, onCreateFolder, placeholder, disabled, id, className, error, }: FolderTreePickerProps): react.JSX.Element;
 
 interface HeroFormCardProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'title' | 'onSubmit'> {
     /** Small accent text above the title, e.g. "Brand · Research". */
@@ -1543,7 +1704,7 @@ interface HeroFormCardSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'ti
     trailing?: ReactNode;
     children: ReactNode;
 }
-declare function Section({ title, icon, description, trailing, children, className, ...rest }: HeroFormCardSectionProps): react_jsx_runtime.JSX.Element;
+declare function Section({ title, icon, description, trailing, children, className, ...rest }: HeroFormCardSectionProps): react.JSX.Element;
 interface HeroFormCardFieldProps {
     /** Visible field label. */
     label: ReactNode;
@@ -1558,8 +1719,8 @@ interface HeroFormCardFieldProps {
     children: ReactNode;
     className?: string;
 }
-declare function Field({ label, htmlFor, required, optional, error, hint, children, className, }: HeroFormCardFieldProps): react_jsx_runtime.JSX.Element;
-declare function FieldRow({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function Field({ label, htmlFor, required, optional, error, hint, children, className, }: HeroFormCardFieldProps): react.JSX.Element;
+declare function FieldRow({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 interface HeroFormCardBannerProps {
     /** Optional leading icon. */
     icon?: ReactNode;
@@ -1569,7 +1730,7 @@ interface HeroFormCardBannerProps {
     tone?: 'info' | 'accent' | 'success' | 'warning' | 'destructive';
     className?: string;
 }
-declare function Banner({ icon, children, tone, className, }: HeroFormCardBannerProps): react_jsx_runtime.JSX.Element;
+declare function Banner({ icon, children, tone, className, }: HeroFormCardBannerProps): react.JSX.Element;
 interface HeroFormCardAdvancedProps {
     summary?: ReactNode;
     /** Optional icon node next to the summary. */
@@ -1578,8 +1739,8 @@ interface HeroFormCardAdvancedProps {
     children: ReactNode;
     className?: string;
 }
-declare function Advanced({ summary, icon, defaultOpen, children, className, }: HeroFormCardAdvancedProps): react_jsx_runtime.JSX.Element;
-declare function Footer({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function Advanced({ summary, icon, defaultOpen, children, className, }: HeroFormCardAdvancedProps): react.JSX.Element;
+declare function Footer({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 declare const HeroFormCardCompound: react.ForwardRefExoticComponent<HeroFormCardProps & react.RefAttributes<HTMLFormElement>> & {
     Section: typeof Section;
     Field: typeof Field;
@@ -1609,7 +1770,7 @@ interface RangeSliderProps {
     disabled?: boolean;
     className?: string;
 }
-declare function RangeSlider({ min, max, value, onChange, step, label, formatValue, id, disabled, className, }: RangeSliderProps): react_jsx_runtime.JSX.Element;
+declare function RangeSlider({ min, max, value, onChange, step, label, formatValue, id, disabled, className, }: RangeSliderProps): react.JSX.Element;
 
 interface SegmentedPillItem<Id extends string = string> {
     id: Id;
@@ -1633,7 +1794,7 @@ interface SegmentedPillProps<Id extends string = string> {
     stretch?: boolean;
     className?: string;
 }
-declare function SegmentedPill<Id extends string = string>({ items, value, onChange, ariaLabel, size, stretch, className, }: SegmentedPillProps<Id>): react_jsx_runtime.JSX.Element;
+declare function SegmentedPill<Id extends string = string>({ items, value, onChange, ariaLabel, size, stretch, className, }: SegmentedPillProps<Id>): react.JSX.Element;
 
 interface ShellProps extends HTMLAttributes<HTMLDivElement> {
     /** Max-width for the auto-centered page-level wrapper, in pixels.
@@ -1665,7 +1826,7 @@ interface ShellTrayHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'
     /** Tighter padding for dense layouts. */
     compact?: boolean;
 }
-declare function TrayHeader({ title, meta, index, description, compact, className, style, ...rest }: ShellTrayHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TrayHeader({ title, meta, index, description, compact, className, style, ...rest }: ShellTrayHeaderProps): react.JSX.Element;
 interface ShellTrayBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Vertical gap between children. Default `form` (16px). `grid`
      *  (14px) is for tighter sub-card grids. `flush` (0) lets the
@@ -1674,7 +1835,7 @@ interface ShellTrayBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Tighter padding for dense layouts. */
     compact?: boolean;
 }
-declare function TrayBody({ spacing, compact, className, style, children, ...rest }: ShellTrayBodyProps): react_jsx_runtime.JSX.Element;
+declare function TrayBody({ spacing, compact, className, style, children, ...rest }: ShellTrayBodyProps): react.JSX.Element;
 interface ShellTrayFooterProps extends HTMLAttributes<HTMLDivElement> {
     /** Tighter padding for dense layouts. */
     compact?: boolean;
@@ -1685,12 +1846,12 @@ interface ShellTrayFooterProps extends HTMLAttributes<HTMLDivElement> {
      *  the right edge via `margin-left: auto`. */
     right?: ReactNode;
 }
-declare function TrayFooter({ compact, left, right, className, style, children, ...rest }: ShellTrayFooterProps): react_jsx_runtime.JSX.Element;
+declare function TrayFooter({ compact, left, right, className, style, children, ...rest }: ShellTrayFooterProps): react.JSX.Element;
 interface ShellSubCardProps extends HTMLAttributes<HTMLDivElement> {
     /** Optional header content rendered above the body. */
     header?: ReactNode;
 }
-declare function SubCard({ header, className, style, children, ...rest }: ShellSubCardProps): react_jsx_runtime.JSX.Element;
+declare function SubCard({ header, className, style, children, ...rest }: ShellSubCardProps): react.JSX.Element;
 /** Value-text tone for <ShellStat>. Semantic tones map to the public
  *  status tokens — handy for traffic-light KPIs (e.g. competition). */
 type ShellStatTone = 'default' | 'accent' | 'success' | 'warning' | 'destructive';
@@ -1707,7 +1868,7 @@ interface ShellStatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
      *  color (`success` / `warning` / `destructive`). */
     valueTone?: ShellStatTone;
 }
-declare function ShellStat({ label, value, icon, hint, valueTone, className, ...rest }: ShellStatProps): react_jsx_runtime.JSX.Element;
+declare function ShellStat({ label, value, icon, hint, valueTone, className, ...rest }: ShellStatProps): react.JSX.Element;
 type ShellComponent = typeof ShellRoot & {
     Tray: typeof Tray;
     TrayHeader: typeof TrayHeader;
@@ -1740,7 +1901,7 @@ interface FolderCardProps {
     menuSlot?: ReactNode;
     className?: string;
 }
-declare function FolderCard({ name, colorKey, assetCount, folderCount, selected, selectable, onOpen, onSelect, menuSlot, className, }: FolderCardProps): react_jsx_runtime.JSX.Element;
+declare function FolderCard({ name, colorKey, assetCount, folderCount, selected, selectable, onOpen, onSelect, menuSlot, className, }: FolderCardProps): react.JSX.Element;
 
 interface BulkActionBarProps {
     /** Selection count shown in the accent badge. */
@@ -1752,7 +1913,7 @@ interface BulkActionBarProps {
     children: ReactNode;
     onClear: () => void;
 }
-declare function BulkActionBar({ count, summary, children, onClear, }: BulkActionBarProps): react_jsx_runtime.JSX.Element;
+declare function BulkActionBar({ count, summary, children, onClear, }: BulkActionBarProps): react.JSX.Element;
 
 /**
  * FileUploadButton — paperclip trigger that opens a native file picker.
@@ -1766,7 +1927,7 @@ interface FileUploadButtonProps {
     fileCount?: number;
     maxFiles?: number;
 }
-declare function FileUploadButton({ onFilesSelected, disabled, fileCount, maxFiles, }: FileUploadButtonProps): react_jsx_runtime.JSX.Element;
+declare function FileUploadButton({ onFilesSelected, disabled, fileCount, maxFiles, }: FileUploadButtonProps): react.JSX.Element;
 
 interface FileDropZoneProps {
     children: ReactNode;
@@ -1774,7 +1935,7 @@ interface FileDropZoneProps {
     disabled?: boolean;
     className?: string;
 }
-declare function FileDropZone({ children, onFilesDropped, disabled, className, }: FileDropZoneProps): react_jsx_runtime.JSX.Element;
+declare function FileDropZone({ children, onFilesDropped, disabled, className, }: FileDropZoneProps): react.JSX.Element;
 
 /**
  * useFileUpload — stateful file-selection, validation, text-extraction, and
@@ -1847,13 +2008,13 @@ interface FilePreviewGridProps {
     onRemove: (id: string) => void;
     className?: string;
 }
-declare function FilePreviewGrid({ files, onRemove, className }: FilePreviewGridProps): react_jsx_runtime.JSX.Element | null;
+declare function FilePreviewGrid({ files, onRemove, className }: FilePreviewGridProps): react.JSX.Element | null;
 
 interface FilePreviewItemProps {
     pendingFile: PendingFile;
     onRemove: (id: string) => void;
 }
-declare function FilePreviewItem({ pendingFile, onRemove }: FilePreviewItemProps): react_jsx_runtime.JSX.Element;
+declare function FilePreviewItem({ pendingFile, onRemove }: FilePreviewItemProps): react.JSX.Element;
 
 /**
  * FileThumbnail — icon-based preview tile for non-image files; renders the
@@ -1873,7 +2034,7 @@ interface FileThumbnailProps {
     previewUrl?: string;
     className?: string;
 }
-declare function FileThumbnail({ file, previewUrl, className }: FileThumbnailProps): react_jsx_runtime.JSX.Element;
+declare function FileThumbnail({ file, previewUrl, className }: FileThumbnailProps): react.JSX.Element;
 
 interface CodeBlockProps {
     /** Lowercased language identifier, e.g. "typescript" or "json". */
@@ -1881,7 +2042,7 @@ interface CodeBlockProps {
     /** Raw source text. */
     children: string;
 }
-declare function CodeBlock({ language, children }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+declare function CodeBlock({ language, children }: CodeBlockProps): react.JSX.Element;
 /**
  * MarkdownCode — react-markdown code element adapter.
  *
@@ -1889,7 +2050,7 @@ declare function CodeBlock({ language, children }: CodeBlockProps): react_jsx_ru
  * Fenced code (triple backtick, className="language-xxx") delegates to
  * CodeBlock for syntax highlighting + copy button.
  */
-declare function MarkdownCode({ className, children }: HTMLAttributes<HTMLElement>): react_jsx_runtime.JSX.Element;
+declare function MarkdownCode({ className, children }: HTMLAttributes<HTMLElement>): react.JSX.Element;
 
 interface MarkdownRendererProps {
     /** Raw markdown string to render. */
@@ -1902,7 +2063,7 @@ interface MarkdownRendererProps {
  * Renders headings, lists, code (via CodeBlock), tables, task lists,
  * strikethrough, blockquotes, and links with workspace token styling.
  */
-declare function MarkdownRenderer({ children, className }: MarkdownRendererProps): react_jsx_runtime.JSX.Element;
+declare function MarkdownRenderer({ children, className }: MarkdownRendererProps): react.JSX.Element;
 
 interface ResizableHandleProps {
     /** Which edge of the parent the handle decorates. */
@@ -1927,12 +2088,12 @@ interface ResizableHandleProps {
     disabled?: boolean;
     className?: string;
 }
-declare function ResizableHandle({ side, value, onChange, onCommit, min, max, defaultValue, step, 'aria-label': ariaLabel, disabled, className, }: ResizableHandleProps): react_jsx_runtime.JSX.Element;
+declare function ResizableHandle({ side, value, onChange, onCommit, min, max, defaultValue, step, 'aria-label': ariaLabel, disabled, className, }: ResizableHandleProps): react.JSX.Element;
 interface ResizablePaneProps extends ResizableHandleProps {
     children: ReactNode;
     paneClassName?: string;
 }
-declare function ResizablePane({ children, paneClassName, ...handleProps }: ResizablePaneProps): react_jsx_runtime.JSX.Element;
+declare function ResizablePane({ children, paneClassName, ...handleProps }: ResizablePaneProps): react.JSX.Element;
 
 interface KbdProps {
     /** Child text — typically a single key glyph or short string. */
@@ -1940,13 +2101,16 @@ interface KbdProps {
     /** Optional size — defaults to 'md'. */
     size?: 'sm' | 'md';
 }
-declare function Kbd({ children, size }: KbdProps): react_jsx_runtime.JSX.Element;
+declare function Kbd({ children, size }: KbdProps): react.JSX.Element;
 
 interface FrameStackProps extends HTMLAttributes<HTMLDivElement> {
     /** Visual gap between child cards. Defaults to 10 px to match the
      *  prototype's spec. Override only with a token value
      *  (e.g. `'var(--space-3)'` for 12 px) — never a literal. */
     gap?: string;
+    /** Outer padding. Defaults to `--tray-inset`, the same inset <Card>
+     *  uses, so a framed group and a framed card share one edge. */
+    padding?: string;
 }
 declare const FrameStack: react.ForwardRefExoticComponent<FrameStackProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -1990,7 +2154,7 @@ interface CalculatorShellProps {
  * CalculatorShell — the layout primitive. See file-level JSDoc for the
  * locked layout / interaction / token rules.
  */
-declare function CalculatorShell({ title, subtitle, inputs, result, formula, secondaryStats, onReset, copyValue, shareUrl, }: CalculatorShellProps): react_jsx_runtime.JSX.Element;
+declare function CalculatorShell({ title, subtitle, inputs, result, formula, secondaryStats, onReset, copyValue, shareUrl, }: CalculatorShellProps): react.JSX.Element;
 
 type CalcLayout = 'shell' | 'open';
 /**
@@ -2041,7 +2205,7 @@ interface CalculatorShellV2Props {
      *  "Benchmark unavailable in manual mode" placeholder (Amendment 1 E). */
     benchmarkSlot?: ReactNode;
 }
-declare function CalculatorShellV2({ eyebrow, title, icon, layout, inputs, result, footerNote, actions, assumptions, copyReport, benchmarkSlot, }: CalculatorShellV2Props): react_jsx_runtime.JSX.Element;
+declare function CalculatorShellV2({ eyebrow, title, icon, layout, inputs, result, footerNote, actions, assumptions, copyReport, benchmarkSlot, }: CalculatorShellV2Props): react.JSX.Element;
 
 interface StatRowStep {
     /** Lucide glyph (~16px). Inherits the dark-frame label colour. */
@@ -2058,7 +2222,7 @@ interface StatRowProps {
     steps: StatRowStep[];
     className?: string;
 }
-declare function StatRow({ steps, className }: StatRowProps): react_jsx_runtime.JSX.Element;
+declare function StatRow({ steps, className }: StatRowProps): react.JSX.Element;
 
 /**
  * Slider — single-value numeric slider (ADR-076 D8).
@@ -2087,7 +2251,7 @@ interface SliderProps {
     disabled?: boolean;
     className?: string;
 }
-declare function Slider({ value, min, max, step, onChange, 'aria-label': ariaLabel, disabled, className, }: SliderProps): react_jsx_runtime.JSX.Element;
+declare function Slider({ value, min, max, step, onChange, 'aria-label': ariaLabel, disabled, className, }: SliderProps): react.JSX.Element;
 
 /**
  * Number-formatting helpers — small set of pure, zero-dep utilities
@@ -2197,7 +2361,7 @@ interface PageHeroProps {
     leading?: ReactNode;
     className?: string;
 }
-declare function PageHero({ eyebrow, title, subtitle, actions, leading, className, }: PageHeroProps): react_jsx_runtime.JSX.Element;
+declare function PageHero({ eyebrow, title, subtitle, actions, leading, className, }: PageHeroProps): react.JSX.Element;
 
 interface SearchBarProps {
     value: string;
@@ -2206,7 +2370,7 @@ interface SearchBarProps {
     width?: number | string;
     className?: string;
 }
-declare function SearchBar({ value, onChange, placeholder, width, className, }: SearchBarProps): react_jsx_runtime.JSX.Element;
+declare function SearchBar({ value, onChange, placeholder, width, className, }: SearchBarProps): react.JSX.Element;
 
 interface FilterBarProps {
     /**
@@ -2220,7 +2384,7 @@ interface FilterBarProps {
     className?: string;
     children: ReactNode;
 }
-declare function FilterBarRoot({ variant, 'aria-label': ariaLabel, className, children, }: FilterBarProps): react_jsx_runtime.JSX.Element;
+declare function FilterBarRoot({ variant, 'aria-label': ariaLabel, className, children, }: FilterBarProps): react.JSX.Element;
 interface FilterBarSearchProps {
     value: string;
     onChange: (next: string) => void;
@@ -2231,15 +2395,15 @@ interface FilterBarSearchProps {
     className?: string;
 }
 /** Standardized search field: small `Input` with a leading magnifier. */
-declare function FilterBarSearch({ value, onChange, placeholder, 'aria-label': ariaLabel, className, }: FilterBarSearchProps): react_jsx_runtime.JSX.Element;
+declare function FilterBarSearch({ value, onChange, placeholder, 'aria-label': ariaLabel, className, }: FilterBarSearchProps): react.JSX.Element;
 /** Flexible spacer — everything after it is pushed to the right edge. */
-declare function FilterBarSpacer(): react_jsx_runtime.JSX.Element;
+declare function FilterBarSpacer(): react.JSX.Element;
 interface FilterBarCountProps {
     shown: number;
     total: number;
 }
 /** Right-aligned "{shown} of {total}" result count, tabular-nums. */
-declare function FilterBarCount({ shown, total }: FilterBarCountProps): react_jsx_runtime.JSX.Element;
+declare function FilterBarCount({ shown, total }: FilterBarCountProps): react.JSX.Element;
 declare const FilterBar: typeof FilterBarRoot & {
     Search: typeof FilterBarSearch;
     Spacer: typeof FilterBarSpacer;
@@ -2267,7 +2431,7 @@ interface FilterDropdownProps<T extends string = string> {
     className?: string;
     align?: 'left' | 'right';
 }
-declare function FilterDropdown<T extends string = string>({ label, value, onChange, options, neutralValue, triggerValueLabel, className, align, }: FilterDropdownProps<T>): react_jsx_runtime.JSX.Element;
+declare function FilterDropdown<T extends string = string>({ label, value, onChange, options, neutralValue, triggerValueLabel, className, align, }: FilterDropdownProps<T>): react.JSX.Element;
 
 interface DeviceFrameProps {
     /** Which device bezel to render. */
@@ -2283,7 +2447,7 @@ interface DeviceFrameProps {
     /** Optional className on the outer frame element. */
     className?: string;
 }
-declare function DeviceFrame({ device, url, children, className }: DeviceFrameProps): react_jsx_runtime.JSX.Element;
+declare function DeviceFrame({ device, url, children, className }: DeviceFrameProps): react.JSX.Element;
 
 interface CreativeMediaProps {
     src: string;
@@ -2492,4 +2656,4 @@ declare namespace index {
   export { type index_CarouselCardView as CarouselCardView, type index_CarouselViewProps as CarouselViewProps, index_CreativeMedia as CreativeMedia, index_InstagramExplorePreview as InstagramExplorePreview, index_InstagramFeedCarousel as InstagramFeedCarousel, index_InstagramFeedPreview as InstagramFeedPreview, index_MetaFeedCarousel as MetaFeedCarousel, index_MetaFeedPreview as MetaFeedPreview, index_MetaInstreamPreview as MetaInstreamPreview, index_MetaMessengerPreview as MetaMessengerPreview, index_MetaReelPreview as MetaReelPreview, index_MetaRightColumnPreview as MetaRightColumnPreview, index_MetaSearchPreview as MetaSearchPreview, index_MetaStoryPreview as MetaStoryPreview, index_PLACEMENT_CONFIGS as PLACEMENT_CONFIGS, type index_PlacementPreview as PlacementPreview, type index_PreviewAdData as PreviewAdData, type index_PreviewConfiguration as PreviewConfiguration, type index_PreviewDevice as PreviewDevice, type index_PreviewPlacement as PreviewPlacement, type index_PreviewPlatform as PreviewPlatform };
 }
 
-export { AccordionCompound as Accordion, type AccordionProps, type AccordionSectionProps, AllocationSparkbar, type AllocationSparkbarProps, AppScroll, Badge, type BadgeProps, type BadgeTone, BrandLogoTile, type BrandLogoTileProps, type BrandLogoTileSize, BulkActionBar, type BulkActionBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CalcLayout, type CalcPrefill, CalculatorShell, type CalculatorShellProps, CalculatorShellV2, type CalculatorShellV2Props, Card, Checkbox, type CheckboxProps, ChipNav, type ChipNavItem, Choropleth, type ChoroplethProps, CodeBlock, type CodeBlockProps, CompletionRing, type CompletionRingProps, CopyField, type CopyFieldProps, type Crumb, DataGrid, type DataGridColumn, DataGridColumnOptionsMenu, DataGridDragOverlay, type DataGridDrawerPanelProps, DataGridDropIndicator, type DataGridIcon, type DataGridProps, type DataGridRowBase, type DataGridSortState, DataGridToolbar, type DataGridToolbarProps, type DataGridToolbarRenderProps, DetailSection, DeviceFrame, type DeviceFrameProps, DragHandle, DropdownButton, type DropdownButtonItem, type DropdownButtonProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, DropdownMenuTrigger, type DropdownMenuTriggerProps, type EditingCell, EmptyPlaceholder, EmptyState, type EmptyStateProps, FOLDER_COLOR_KEYS, FileDropZone, FilePreviewGrid, FilePreviewItem, FileThumbnail, FileUploadButton, FilterBar, type FilterBarCountProps, type FilterBarProps, type FilterBarSearchProps, FilterDropdown, type FilterDropdownProps, type FilterOption, FloatingDrawer, type FloatingDrawerProps, FloatingStatusBar, type FloatingStatusBarProps, type FloatingStatusTone, FolderCard, type FolderCardProps, type FolderColorKey, type FolderTreeNode, FolderTreePicker, type FolderTreePickerProps, FrameStack, type FrameStackProps, HEADER_HEIGHT, HeroFormCardCompound as HeroFormCard, type HeroFormCardAdvancedProps, type HeroFormCardBannerProps, type HeroFormCardFieldProps, type HeroFormCardProps, type HeroFormCardSectionProps, IconTile, IdentityLabel, IdentityValue, Input, type InputProps, type InputSize, Kbd, type KbdProps, ListItem, MarkdownCode, MarkdownRenderer, type MarkdownRendererProps, MenuButton, type MenuButtonEntry, type MenuButtonItem, type MenuButtonProps, type MenuButtonSeparator, index as MetaPreviews, MetricCard, type MetricCardProps, type MetricCardTone, MicrosoftLogo, type MicrosoftLogoProps, Modal, OptionTile, OptionTileGroup, type OptionTileGroupProps, type OptionTileProps, PLACEMENT_CONFIGS, PageHeaderHost, PageHeaderSlotProvider, PageHero, type PageHeroProps, PageShell, Pagination, type PaginationProps, type PendingFile, PillButton, type PillButtonProps, type PlacementPreview, type PreviewAdData, type PreviewConfiguration, type PreviewDevice, type PreviewPlacement, type PreviewPlatform, PS as ProfileSection, type ProfileSectionProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeSlider, type RangeSliderProps, ResizableHandle, type ResizableHandleProps, ResizablePane, type ResizablePaneProps, SECTION_SCROLL_OFFSET, SearchBar, type SearchBarProps, SectionLabel, SegmentedPill, type SegmentedPillItem, type SegmentedPillProps, Shell, type ShellProps, ShellStat, type ShellStatProps, type ShellStatTone, type ShellSubCardProps, type ShellTrayBodyProps, type ShellTrayFooterProps, type ShellTrayHeaderProps, type ShellTrayProps, Slider, type SliderProps, SortableItem, SortableList, SortableTable, type Column as SortableTableColumn, type SortableTableProps, StatRow, type StatRowProps, type StatRowStep, StatsGrid, type StatsGridProps, StepLoader, type StepLoaderProps, type StepLoaderStep, type Tab, Tabs, type TabsProps, TagChipInput, type TagChipInputProps, TagRow, TextInput, Textarea, TextareaInput, type TextareaProps, Toaster, TokenBadge, type TokenBadgeProps, type UploadResult, type UseFileUploadOptions, cn, folderColorVar, formatCurrency, formatNumber, formatPercent, formatRatio, useFileUpload };
+export { AccordionCompound as Accordion, type AccordionProps, type AccordionSectionProps, AllocationSparkbar, type AllocationSparkbarProps, AppScroll, BRAND_ICONS, Badge, type BadgeProps, type BadgeTone, BrandFacebook, type BrandIconKey, type BrandIconProps, BrandInstagram, BrandLinkedIn, BrandLogoTile, type BrandLogoTileProps, type BrandLogoTileSize, BrandMessenger, BrandMeta, BrandNextdoor, BrandPinterest, BrandSnapchat, BrandTikTok, BulkActionBar, type BulkActionBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CalcLayout, type CalcPrefill, CalculatorShell, type CalculatorShellProps, CalculatorShellV2, type CalculatorShellV2Props, Card, Checkbox, type CheckboxProps, ChipNav, type ChipNavItem, Choropleth, type ChoroplethProps, CodeBlock, type CodeBlockProps, CollapsibleCard, type CollapsibleCardProps, CompletionRing, type CompletionRingProps, CopyField, type CopyFieldProps, type Crumb, DataGrid, type DataGridColumn, DataGridColumnOptionsMenu, DataGridDragOverlay, type DataGridDrawerPanelProps, DataGridDropIndicator, type DataGridIcon, type DataGridProps, type DataGridRowBase, type DataGridSortState, DataGridToolbar, type DataGridToolbarProps, type DataGridToolbarRenderProps, DetailSection, DeviceFrame, type DeviceFrameProps, DragHandle, DropdownButton, type DropdownButtonItem, type DropdownButtonProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, DropdownMenuTrigger, type DropdownMenuTriggerProps, type EditingCell, EmptyPlaceholder, EmptyState, type EmptyStateProps, FOLDER_COLOR_KEYS, FileDropZone, FilePreviewGrid, FilePreviewItem, FileThumbnail, FileUploadButton, FilterBar, type FilterBarCountProps, type FilterBarProps, type FilterBarSearchProps, FilterDropdown, type FilterDropdownProps, type FilterOption, FloatingDrawer, type FloatingDrawerProps, FloatingStatusBar, type FloatingStatusBarProps, type FloatingStatusTone, FolderCard, type FolderCardProps, type FolderColorKey, type FolderTreeNode, FolderTreePicker, type FolderTreePickerProps, FrameStack, type FrameStackProps, HEADER_HEIGHT, HeroFormCardCompound as HeroFormCard, type HeroFormCardAdvancedProps, type HeroFormCardBannerProps, type HeroFormCardFieldProps, type HeroFormCardProps, type HeroFormCardSectionProps, IconTile, IdentityLabel, IdentityValue, Input, type InputProps, type InputSize, Kbd, type KbdProps, ListItem, MarkdownCode, MarkdownRenderer, type MarkdownRendererProps, MenuButton, type MenuButtonEntry, type MenuButtonItem, type MenuButtonProps, type MenuButtonSeparator, MetaCell, type MetaCellProps, index as MetaPreviews, MetricCard, type MetricCardProps, type MetricCardTone, MicrosoftLogo, type MicrosoftLogoProps, Modal, OptionTile, OptionTileGroup, type OptionTileGroupProps, type OptionTileProps, PLACEMENT_CONFIGS, PageHeaderHost, PageHeaderSlotProvider, PageHero, type PageHeroProps, PageShell, Pagination, type PaginationProps, type PendingFile, PillButton, type PillButtonProps, type PlacementPreview, type PreviewAdData, type PreviewConfiguration, type PreviewDevice, type PreviewPlacement, type PreviewPlatform, PS as ProfileSection, type ProfileSectionProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeSlider, type RangeSliderProps, ResizableHandle, type ResizableHandleProps, ResizablePane, type ResizablePaneProps, type RgbTuple, SECTION_SCROLL_OFFSET, SearchBar, type SearchBarProps, SectionLabel, SegmentedPill, type SegmentedPillItem, type SegmentedPillProps, Shell, type ShellProps, ShellStat, type ShellStatProps, type ShellStatTone, type ShellSubCardProps, type ShellTrayBodyProps, type ShellTrayFooterProps, type ShellTrayHeaderProps, type ShellTrayProps, Slider, type SliderProps, SortableItem, SortableList, SortableTable, type Column as SortableTableColumn, type SortableTableProps, StatRow, type StatRowProps, type StatRowStep, StatsGrid, type StatsGridProps, StepLoader, type StepLoaderProps, type StepLoaderStep, type Tab, Tabs, type TabsProps, TagChipInput, type TagChipInputProps, TagRow, TextInput, Textarea, TextareaInput, type TextareaProps, Toaster, TokenBadge, type TokenBadgeProps, type UploadResult, type UseFileUploadOptions, ValueChip, type ValueChipProps, type WcagBadge, bestTextOn, cn, contrastRatio, copyText, folderColorVar, formatCurrency, formatNumber, formatPercent, formatRatio, hexToRgbTuple, hslString, relativeLuminance, rgbCss, rgbString, useFileUpload, wcagBadges };