@devfellowship/components 1.4.0 → 2.0.0

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import * as React$1 from 'react';
-import { ReactNode } from 'react';
+import React__default, { ReactNode } 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';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -17,7 +16,6 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -43,7 +41,7 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { LucideIcon } from 'lucide-react';
 export { c as cn } from './utils-Cbsgs0XP.js';
 export { ToastProps, ToastVariant, toast, useIframeAuth, useIframeNavigate, useIsMobile, useToast } from './hooks.js';
-export { A as AuthContextType, a as AuthProvider, b as AuthProviderProps, U as UserProfile, u as useAuth, c as useSession } from './use-auth-DdapDv2H.js';
+export { A as AuthContextType, a as AuthProvider, b as AuthProviderProps, U as UserProfile, u as useAuth, c as useSession } from './use-auth-t8aJ9mx7.js';
 export { FeatureFlagProvider, FeatureFlagProviderProps, FeatureFlags, useFeatureFlag, useFeatureFlags } from './providers.js';
 import 'clsx';
 import '@supabase/supabase-js';
@@ -54,41 +52,146 @@ declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "default" | "info" | "success" | "warning" | "danger" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
+/**
+ * AlertDialog — DFL Design System v0
+ *
+ * Organism-level modal requiring explicit confirmation before a consequential
+ * action. Two semantic action variants:
+ *
+ *   <AlertDialogAction>           — neutral (amber primary)
+ *   <AlertDialogAction variant="destructive"> — danger ghost-outline
+ *
+ * Tokens consumed (Layer 3):
+ *   --c-alert-dialog-bg, --c-alert-dialog-border, --c-alert-dialog-radius,
+ *   --c-alert-dialog-shadow, --c-alert-dialog-scrim,
+ *   --c-alert-dialog-title-fg, --c-alert-dialog-desc-fg
+ *
+ * Focus ring: uniform 2px-gap + 1px-amber box-shadow on every focusable
+ * element (Cancel, Action, Trigger). Applied via focus-visible: override that
+ * replaces the generic button ring-3 approach.
+ */
 declare const AlertDialog: React$1.FC<AlertDialogPrimitive.AlertDialogProps>;
 declare const AlertDialogTrigger: React$1.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogPortal: React$1.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
 declare const AlertDialogOverlay: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogContent: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogHeader: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
 declare const AlertDialogFooter: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
 declare const AlertDialogTitle: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
 declare const AlertDialogDescription: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
-declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/** Props for AlertDialogAction — extends Radix Action with a semantic variant. */
+interface AlertDialogActionProps extends React$1.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> {
+    /**
+     * "default"     — amber primary (neutral confirmation, e.g. "Continue")
+     * "destructive" — danger ghost-outline (irreversible action, e.g. "Delete account")
+     *
+     * @default "default"
+     */
+    variant?: "default" | "destructive";
+}
+declare const AlertDialogAction: React$1.ForwardRefExoticComponent<AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare function AspectRatio({ ...props }: React$1.ComponentProps<typeof AspectRatioPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function AspectRatio({ ...props }: React$1.ComponentProps<typeof AspectRatioPrimitive.Root>): React$1.JSX.Element;
 
-declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+/** Size scale for Avatar — drives both the circle dimensions and fallback font-size. */
+type AvatarSize = "sm" | "md" | "default" | "lg" | "xl";
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & {
+    /**
+     * Circle diameter preset.
+     * sm=24px · md=32px · default=40px · lg=48px · xl=64px
+     *
+     * For stacked avatar groups, add a separator ring via outline:
+     *   `outline: 2px solid var(--c-avatar-ring)`
+     */
+    size?: AvatarSize;
+} & React$1.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & {
+    /** Background tone — default | brand (amber) | member (hashed). */
+    tone?: AvatarTone;
+    /** Seed for deterministic member colour (only used when tone="member"). */
+    seed?: string;
+} & React$1.RefAttributes<HTMLSpanElement>>;
+/** Fallback background tone.
+ *   default — neutral elevated surface (--c-avatar-fallback-bg).
+ *   brand   — DFL amber (--c-avatar-brand-bg), the "branded" avatar.
+ *   member  — deterministic colour hashed from `seed` (member palette).
+ */
+type AvatarTone = "default" | "brand" | "member";
+/** Number of colours in the deterministic member palette (--c-avatar-member-N). */
+declare const AVATAR_MEMBER_PALETTE_SIZE = 12;
+/**
+ * Deterministic member colour — hashes a seed (name / initials / id) into a
+ * stable `var(--c-avatar-member-N)` token so a given person is ALWAYS the same
+ * colour across the app.
+ */
+declare function avatarMemberColor(seed: string): string;
+type AvatarStatusValue = "online" | "away" | "offline";
+/**
+ * Presence indicator — a coloured dot pinned to the bottom-right of the Avatar,
+ * ringed in the page colour. Render as a sibling of AvatarImage/AvatarFallback
+ * INSIDE <Avatar> (which is `position: relative`).
+ */
+declare const AvatarStatus: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & {
+    status?: AvatarStatusValue;
+} & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * Overlapping avatar stack. Each child avatar gets a page-coloured separator
+ * ring (box-shadow) and a negative left margin so they tuck under the previous
+ * one. `max` truncates and appends a "+N" fallback avatar.
+ */
+declare const AvatarGroup: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+    /** Overlap amount in px (negative margin). Default 8. */
+    spacing?: number;
+    /** Show at most `max` avatars; the rest collapse into a "+N" chip. */
+    max?: number;
+} & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Badge — DFL Design System v0
+ *
+ * Tokens consumed (all pre-existing):
+ *   Shape:    --c-pill-radius (999px, default), --c-badge-radius (4px, square)
+ *   Brand:    --s-brand-subtle / --s-brand-fg / --s-brand-border
+ *   Danger:   --s-danger-subtle / --s-danger-fg / --s-danger-border
+ *   Success:  --s-success-subtle / --s-success-fg / --s-success-border
+ *   Warning:  --s-warning-subtle / --s-warning-fg / --s-warning-border
+ *   Info:     --s-info-subtle / --s-info-fg / --s-info-border
+ *   Surface:  --s-surface-raised / --s-ink-secondary / --s-border-subtle
+ *   Outline:  --s-border-strong
+ *
+ * Variants: default | secondary | danger | outline | success | warning | info
+ *   (`destructive` kept as legacy alias → same styles as `danger`)
+ * Shapes:   pill (default) | square
+ *
+ * Focus ring: DS-uniform amber box-shadow via :focus-visible (badge must
+ *   receive tabIndex={0} + role when used as a filter chip / interactive element).
+ */
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
+    variant?: "default" | "info" | "success" | "warning" | "danger" | "destructive" | "secondary" | "outline" | null | undefined;
+    shape?: "pill" | "square" | null | undefined;
+    fill?: "solid" | "subtle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /**
+     * Render a leading status dot (coloured with the badge's own text/intent
+     * colour via currentColor). For presence/status chips — "● Active".
+     */
+    dot?: boolean;
 }
-declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ className, variant, shape, fill, dot, children, ...props }: BadgeProps): React$1.JSX.Element;
 
 declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React$1.ReactNode;
@@ -100,11 +203,11 @@ declare const BreadcrumbLink: React$1.ForwardRefExoticComponent<Omit<React$1.Det
 } & React$1.RefAttributes<HTMLAnchorElement>>;
 declare const BreadcrumbPage: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 declare const BreadcrumbSeparator: {
-    ({ children, className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+    ({ children, className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
     displayName: string;
 };
 declare const BreadcrumbEllipsis: {
-    ({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: React$1.ComponentProps<"button">): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -114,19 +217,27 @@ declare const BreadcrumbEllipsis: {
  * Tokens consumed:
  *   --c-button-radius, --c-button-font-weight
  *   --c-button-{primary,secondary,ghost,destructive,success}-{bg,fg,border,bg-hover,border-hover,bg-active}
- *   --s-brand-ring (focus ring)
+ *
+ * Focus ring (brand spec ch.5.2):
+ *   box-shadow: 0 0 0 2px var(--s-surface-page), 0 0 0 3px #E07A4A
+ *   2px page-bg gap + 1px solid amber — no alpha bleed on dark bg.
+ *   (Replaces the old `--s-brand-ring: rgba(224,122,74,.45)` ring which had no
+ *   gap and alpha-diluted amber into a glow instead of a crisp indicator.)
  *
  * Variants: primary (default), secondary, outline, ghost, destructive, success, link
  * Sizes:    sm (28px), default (34px — DS v0 spec), lg (40px), icon (square 34)
+ * Shape:    rounded (default: --c-button-radius md), pill (--p-radius-pill 999px)
  *
  * Additive props (v1.0.0):
  *   loading   — disables button + shows spinner + keeps width
  *   kbd       — renders <kbd> hint at the right (e.g. ⌘K)
+ *   rounded   — "default" | "pill" shape modifier (token-driven, not raw Tailwind)
  *   asChild   — render as a child Slot (Radix pattern, kept from shadcn)
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "primary" | "secondary" | "outline" | "ghost" | "success" | null | undefined;
+    variant?: "link" | "default" | "success" | "destructive" | "primary" | "secondary" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    rounded?: "default" | "pill" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -135,19 +246,87 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, V
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Calendar — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3 — component knobs):
+ *   --c-cal-{bg,border,radius,padding}
+ *   --c-cal-nav-btn-{bg,bg-hover,fg,fg-hover,border,border-hover,radius}
+ *   --c-cal-{caption-fg,head-fg}
+ *   --c-cal-day-{radius,fg,bg-hover,fg-outside}
+ *   --c-cal-day-today-{bg,fg,border}    ← tinted, NOT filled (distinct from selected)
+ *   --c-cal-day-selected-{bg,fg,bg-hover}
+ *   --c-cal-range-{mid,end}-{bg,fg}
+ *   --c-cal-day-disabled-fg
+ *
+ * Focus ring: box-shadow 0 0 0 2px --c-cal-bg, 0 0 0 3px #E07A4A applied to
+ * nav buttons and day cells via :focus-visible (uniform DS amber spec).
+ *
+ * Key fixes vs. vanilla shadcn:
+ *   - Today uses tinted bg + border, NOT the same solid fill as selected.
+ *   - Nav buttons use surface-elevation tokens, NOT raw opacity tricks.
+ *   - Disabled days use --s-ink-disabled at 0.45, cursor:not-allowed.
+ *   - Range mid uses amber-14% tint with zero radius; start/end have
+ *     half-rounded corners per DS radius spec.
+ */
 type CalendarProps = React$1.ComponentProps<typeof DayPicker>;
-declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React$1.JSX.Element;
 declare namespace Calendar {
     var displayName: string;
 }
 
+/**
+ * Card — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3 → Layer 2 → Layer 1):
+ *   --c-card-bg           background surface  (→ --s-surface-panel)
+ *   --c-card-border       default border       (→ --s-border-subtle)
+ *   --c-card-border-hover hover / focus lift   (→ --s-border-strong)
+ *   --c-card-radius       corner radius        (→ --p-radius-lg = 10px)
+ *   --c-card-padding      inner section pad    (→ --p-space-5  = 20px)
+ *   --c-card-shadow       resting shadow       (→ --p-shadow-sm)
+ *
+ * Ink:
+ *   --s-ink-primary   CardTitle text
+ *   --s-ink-muted     CardDescription text
+ *
+ * Focus ring (DS uniform spec — a11y):
+ *   Applied via focus-visible on any focusable card (role="button" + tabIndex).
+ *   Renders: box-shadow 0 0 0 2px --s-surface-page (gap), 0 0 0 3px #E07A4A (ring).
+ *
+ * Hover (clickable cards):
+ *   Consumers add className="hover:border-[var(--c-card-border-hover)] hover:shadow-[var(--p-shadow)]"
+ *   transition already included on the base element.
+ */
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & 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<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+/**
+ * CardTitle — DS spec: 16px / 600 / −0.2px tracking / --s-ink-primary
+ * Replaces the shadcn default of text-2xl (24px) which is oversized for card context.
+ */
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLHeadingElement>>;
 declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 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>>;
 
+/**
+ * Carousel — DFL Design System v0
+ *
+ * Tokens consumed:
+ *   --c-carousel-nav-{bg,border,fg}            default nav button state
+ *   --c-carousel-nav-{bg,border,fg}-hover      hover + focus state
+ *   --c-carousel-nav-fg-disabled               disabled arrow color (no opacity hack)
+ *   --c-carousel-dot-{bg,active}               pagination indicator
+ *   --c-carousel-{dot-radius,radius}            shape knobs
+ *   backed by --s-surface-elevated, --s-ink-*, --s-brand-*, --s-border-*
+ *
+ * New in this revision:
+ *   • Nav buttons styled with --c-carousel-nav-* tokens (amber hover/focus, no generic outline)
+ *   • Carousel region receives tabIndex={0} + ds-focus-ring for keyboard users
+ *   • Nav buttons receive ds-focus-ring for uniform DFL amber outline on :focus-visible
+ *   • CarouselDots — pagination indicators that auto-detect scroll-snap count
+ *   • Vertical orientation: ArrowUp/ArrowDown navigation (horizontal: ArrowLeft/ArrowRight)
+ */
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -158,11 +337,38 @@ type CarouselProps = {
     orientation?: "horizontal" | "vertical";
     setApi?: (api: CarouselApi) => void;
 };
-declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React$1.ComponentProps<"div"> & CarouselProps): react_jsx_runtime.JSX.Element;
-declare function CarouselContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function CarouselItem({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function CarouselPrevious({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
-declare function CarouselNext({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React$1.ComponentProps<"div"> & CarouselProps): React$1.JSX.Element;
+declare function CarouselContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CarouselItem({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+/**
+ * CarouselPrevious
+ *
+ * Styled with --c-carousel-nav-* tokens (not the generic Button variant="outline").
+ * States:
+ *   default  → elevated bg, subtle border, secondary ink
+ *   hover    → brand-subtle bg, brand-border, amber-hover ink
+ *   focus    → same as hover + ds-focus-ring outline
+ *   disabled → transparent bg, subtle border, ink-disabled (no opacity hack)
+ */
+declare const CarouselPrevious: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * CarouselNext
+ *
+ * Mirror of CarouselPrevious. Disabled when no more slides to scroll.
+ */
+declare const CarouselNext: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * CarouselDots
+ *
+ * Pagination indicators. Auto-detects scroll-snap count from the embla API
+ * so it reflects "page count" in multi-item views (e.g. 6 slides / 3-per-page = 2 dots),
+ * not raw slide count. Hidden (returns null) when there is only 1 snap.
+ *
+ * Tokens: --c-carousel-dot-{bg,active,radius}
+ */
+declare function CarouselDots({ className }: {
+    className?: string;
+}): React$1.JSX.Element | null;
 
 declare const THEMES: {
     readonly light: "";
@@ -180,14 +386,21 @@ type ChartConfig = {
         theme: Record<keyof typeof THEMES, string>;
     });
 };
-declare function ChartContainer({ id, className, children, config, ...props }: React$1.ComponentProps<"div"> & {
+declare function ChartContainer({ id, className, children, config, isEmpty, emptyState, ...props }: React$1.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-}): react_jsx_runtime.JSX.Element;
+    /**
+     * When true, renders `emptyState` instead of the Recharts ResponsiveContainer.
+     * Use this when `data.length === 0` to show the muted no-data UI.
+     */
+    isEmpty?: boolean;
+    /** Node to render in place of the chart when `isEmpty` is true. */
+    emptyState?: React$1.ReactNode;
+}): React$1.JSX.Element;
 declare const ChartStyle: ({ id, config }: {
     id: string;
     config: ChartConfig;
-}) => react_jsx_runtime.JSX.Element | null;
+}) => React$1.JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React$1.ComponentProps<typeof RechartsPrimitive.Tooltip> & React$1.ComponentProps<"div"> & {
     hideLabel?: boolean;
@@ -195,82 +408,242 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
-}): react_jsx_runtime.JSX.Element | null;
+}): React$1.JSX.Element | null;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
 declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React$1.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
     hideIcon?: boolean;
     nameKey?: string;
-}): react_jsx_runtime.JSX.Element | null;
+}): React$1.JSX.Element | null;
 
+/**
+ * Checkbox — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3 → --c-checkbox-*):
+ *   size, radius, border-width, bg, border, border-hover,
+ *   checked-bg, checked-border, checked-fg,
+ *   focus-ring, disabled-opacity,
+ *   danger-border, danger-bg, danger-checked-bg
+ *   (all backed by --s-surface-*, --s-border-*, --s-brand-*, --s-danger-*)
+ *
+ * Focus ring — uniform DFL two-layer amber ring, replaces shadcn ring utilities:
+ *   box-shadow: 0 0 0 2px var(--s-surface-page), 0 0 0 3px var(--c-checkbox-focus-ring)
+ *
+ * Checked/indeterminate state: use the Radix `checked` prop
+ *   (true | false | "indeterminate"). Indeterminate renders a Minus dash icon
+ *   with the same amber fill as checked.
+ *
+ * Error state: pass `aria-invalid={true}` — mirrors the Input/Textarea pattern.
+ */
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare function Collapsible({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function CollapsibleTrigger({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): react_jsx_runtime.JSX.Element;
-declare function CollapsibleContent({ ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): react_jsx_runtime.JSX.Element;
+/**
+ * Collapsible — DFL Design System v0
+ *
+ * Tokens consumed:
+ *   --c-collapsible-{bg, bg-hover, border, border-hover, radius}
+ *   --c-collapsible-header-fg
+ *   --c-collapsible-content-{bg, border}
+ *   --c-collapsible-item-fg
+ *   --c-collapsible-trigger-{fg, fg-hover, ring}
+ *   backed by --s-{surface-*, border-*, ink-*, brand-*} semantic tokens
+ *
+ * Subcomponents:
+ *   <Collapsible>         — Root (w-[320px] flex col gap-1.5; Radix open/disabled control)
+ *   <CollapsibleHeader>   — Header row: label slot + CollapsibleTrigger
+ *   <CollapsibleTrigger>  — 28×28 ghost icon button; amber focus ring + hover affordance
+ *   <CollapsibleContent>  — Animated content area (Radix animated reveal)
+ *   <CollapsibleItem>     — Individual content row with elevated surface bg
+ *
+ * Reference: Alert pilot pattern (merged) for token-wire approach.
+ */
+declare function Collapsible({ className, ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.Root>): React$1.JSX.Element;
+/**
+ * CollapsibleHeader — the header row.
+ *
+ * Provides the panel bg (--c-collapsible-bg), border, radius, and a
+ * subtle hover lift (border-hover, bg-hover). Slot the label + trigger inside.
+ */
+declare function CollapsibleHeader({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+/**
+ * CollapsibleTrigger — 28×28 ghost icon button.
+ *
+ * Focus ring: double-layer box-shadow via --c-collapsible-trigger-ring
+ *   (0 0 0 2px var(--s-surface-page), 0 0 0 3px #E07A4A)
+ * Hover: amber fg shift (--c-collapsible-trigger-fg-hover) + brand-subtle bg chip.
+ * Disabled: 45% opacity, pointer-events-none (propagated from Radix root `disabled`).
+ */
+declare function CollapsibleTrigger({ className, ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): React$1.JSX.Element;
+/**
+ * CollapsibleContent — animated reveal, items stacked with gap.
+ * Surface is transparent; individual CollapsibleItems carry the elevation.
+ */
+declare function CollapsibleContent({ className, ...props }: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): React$1.JSX.Element;
+/**
+ * CollapsibleItem — individual content row inside CollapsibleContent.
+ * Elevated surface bg (--c-collapsible-content-bg) + subtle border + muted ink.
+ */
+declare function CollapsibleItem({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
 
+/**
+ * Dialog — DFL Design System v0
+ *
+ * Token changes vs vanilla shadcn (v1.1.0):
+ *   - Overlay: bg-[var(--c-dialog-scrim)] — warm rgba(10,9,8,0.72) vs cold bg-black/80
+ *   - Panel bg:     bg-[var(--c-dialog-bg)]       (--s-surface-raised)
+ *   - Panel border: border-[var(--c-dialog-border)] (--s-border-subtle)
+ *   - Panel radius: rounded-[var(--c-dialog-radius)] (--p-radius-xl = 14px) vs sm:rounded-lg (8px)
+ *   - Panel shadow: shadow-[var(--c-dialog-shadow)] (--p-shadow-overlay) vs shadow-lg
+ *   - Close button focus ring: 0 0 0 2px --c-dialog-bg, 0 0 0 3px #E07A4A (uniform DFL ring)
+ *
+ * Added props on DialogContent:
+ *   showClose?:      false hides the close button (e.g. loading / in-progress states)
+ *   autoFocusClose?: true auto-focuses the close button on mount (focus-ring stories)
+ */
 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>>;
-declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * When false the close button is not rendered.
+     * Use for in-progress / loading states where dismissal must be prevented.
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * When true the close button receives autoFocus on mount so the focus ring is
+     * immediately visible (useful for focus-ring stories / a11y demos).
+     * @default false
+     */
+    autoFocusClose?: boolean;
+}
+declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
 declare const DialogFooter: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.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 function Command({ className, ...props }: React$1.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
+declare function Command({ className, ...props }: React$1.ComponentProps<typeof Command$1>): React$1.JSX.Element;
 declare function CommandDialog({ title, description, children, ...props }: React$1.ComponentProps<typeof Dialog> & {
     title?: string;
     description?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function CommandInput({ className, ...props }: React$1.ComponentProps<typeof Command$1.Input>): react_jsx_runtime.JSX.Element;
-declare function CommandList({ className, ...props }: React$1.ComponentProps<typeof Command$1.List>): react_jsx_runtime.JSX.Element;
-declare function CommandEmpty({ ...props }: React$1.ComponentProps<typeof Command$1.Empty>): react_jsx_runtime.JSX.Element;
-declare function CommandGroup({ className, ...props }: React$1.ComponentProps<typeof Command$1.Group>): react_jsx_runtime.JSX.Element;
-declare function CommandSeparator({ className, ...props }: React$1.ComponentProps<typeof Command$1.Separator>): react_jsx_runtime.JSX.Element;
-declare function CommandItem({ className, ...props }: React$1.ComponentProps<typeof Command$1.Item>): react_jsx_runtime.JSX.Element;
-declare function CommandShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
-
-declare function ContextMenu({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuTrigger({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuGroup({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuPortal({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuSub({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function CommandInput({ className, ...props }: React$1.ComponentProps<typeof Command$1.Input>): React$1.JSX.Element;
+declare function CommandList({ className, ...props }: React$1.ComponentProps<typeof Command$1.List>): React$1.JSX.Element;
+declare function CommandEmpty({ ...props }: React$1.ComponentProps<typeof Command$1.Empty>): React$1.JSX.Element;
+declare function CommandGroup({ className, ...props }: React$1.ComponentProps<typeof Command$1.Group>): React$1.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React$1.ComponentProps<typeof Command$1.Separator>): React$1.JSX.Element;
+declare function CommandItem({ className, ...props }: React$1.ComponentProps<typeof Command$1.Item>): React$1.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+
+/**
+ * ContextMenu — DS v0 token-aligned right-click menu.
+ *
+ * Token layer: --c-contextmenu-* (Layer 3) → --s-* → --p-*
+ *
+ * Key fixes vs. vanilla shadcn:
+ *   • bg-accent (solid amber fill) → --c-contextmenu-item-hover-bg (brand-subtle 10%)
+ *   • accent-foreground (sand-950 on orange) → --c-contextmenu-item-hover-fg (amber-300)
+ *   • Keyboard-focus: same hover bg + inset ring (--c-contextmenu-item-focus-ring)
+ *     via focus-visible — distinguishes keyboard from pointer-hover.
+ *   • ContextMenuShortcut gets font-mono (JetBrains Mono) per DS kbd/code spec.
+ *   • Destructive items: --s-danger-fg text, --s-danger-subtle hover bg.
+ *   • CheckIcon + CircleIcon indicators tinted with --s-brand-solid (amber).
+ *   • ContextMenuLabel: uppercase, tracking-wider, font-mono, muted — per DS spec.
+ */
+declare function ContextMenu({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Root>): React$1.JSX.Element;
+declare function ContextMenuTrigger({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Trigger>): React$1.JSX.Element;
+declare function ContextMenuGroup({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Group>): React$1.JSX.Element;
+declare function ContextMenuPortal({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Portal>): React$1.JSX.Element;
+declare function ContextMenuSub({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Sub>): React$1.JSX.Element;
+declare function ContextMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): React$1.JSX.Element;
 declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function ContextMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.SubContent>): React$1.JSX.Element;
+declare function ContextMenuContent({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Content>): React$1.JSX.Element;
 declare function ContextMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
-}): react_jsx_runtime.JSX.Element;
-declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): React$1.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.RadioItem>): React$1.JSX.Element;
 declare function ContextMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Label> & {
     inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function ContextMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
-declare function ContextMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
-
-declare function Drawer({ ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
-declare function DrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawer$1.Trigger>): react_jsx_runtime.JSX.Element;
-declare function DrawerPortal({ ...props }: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
-declare function DrawerClose({ ...props }: React$1.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
-declare function DrawerOverlay({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React$1.ComponentProps<typeof Drawer$1.Content>): react_jsx_runtime.JSX.Element;
-declare function DrawerHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function DrawerFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function DrawerTitle({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
-declare function DrawerDescription({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof ContextMenuPrimitive.Separator>): React$1.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+
+/**
+ * Drawer — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3 — already defined in tokens.css):
+ *   --c-dialog-bg     → --s-surface-raised (#1a1714) — elevated overlay, NOT page bg
+ *   --c-dialog-border → --s-border-subtle
+ *   --c-dialog-radius → --p-radius-xl (14px)
+ *   --c-dialog-shadow → --p-shadow-overlay
+ *   --c-dialog-scrim  → --s-surface-scrim (rgba(10,9,8,0.72))
+ *
+ * Focus ring (uniform DS spec, all interactive children):
+ *   box-shadow: 0 0 0 2px var(--background), 0 0 0 3px #E07A4A
+ *   Applied via `focus-visible:` on DrawerClose; footer buttons use Button's ring.
+ *
+ * Direction rounding (leading corners only, matching the spec):
+ *   bottom → top corners rounded   (border-radius on tl + tr)
+ *   top    → bottom corners rounded (border-radius on bl + br)
+ *   right  → left corners rounded   (border-radius on tl + bl)
+ *   left   → right corners rounded  (border-radius on tr + br)
+ */
+
+declare function Drawer({ ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): React$1.JSX.Element;
+declare function DrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawer$1.Trigger>): React$1.JSX.Element;
+declare function DrawerPortal({ ...props }: React$1.ComponentProps<typeof Drawer$1.Portal>): React$1.JSX.Element;
+declare function DrawerClose({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Close>): React$1.JSX.Element;
+declare function DrawerOverlay({ className, style, ...props }: React$1.ComponentProps<typeof Drawer$1.Overlay>): React$1.JSX.Element;
+declare function DrawerContent({ className, children, style, ...props }: React$1.ComponentProps<typeof Drawer$1.Content>): React$1.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Title>): React$1.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Description>): React$1.JSX.Element;
+
+/**
+ * DropdownMenu — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3 — all defined in tokens.css):
+ *   --c-dropdownmenu-bg               popover surface (--s-surface-raised, #1a1714)
+ *   --c-dropdownmenu-border           panel border (--s-border-subtle, #2a2622)
+ *   --c-dropdownmenu-radius           panel corner radius (--p-radius-md, 6px)
+ *   --c-dropdownmenu-item-radius      item corner radius (--p-radius-sm, 4px)
+ *   --c-dropdownmenu-shadow           panel drop-shadow (multi-layer)
+ *   --c-dropdownmenu-item-fg          default item text (--s-ink-secondary, #e8e0d0)
+ *   --c-dropdownmenu-item-bg-hover    item hover/highlight bg (--s-surface-elevated, #1f1c18)
+ *   --c-dropdownmenu-item-fg-hover    item hover/highlight text (--s-ink-primary, #f6f1e7)
+ *   --c-dropdownmenu-label-fg         section-label colour (--s-ink-muted, #7d7568)
+ *   --c-dropdownmenu-separator        separator hairline (--s-border-subtle, #2a2622)
+ *   --c-dropdownmenu-shortcut-fg      shortcut key colour (--s-ink-muted, #7d7568)
+ *   --c-dropdownmenu-check-color      checkbox checkmark (--s-brand-solid, #E07A4A)
+ *   --c-dropdownmenu-destructive-fg   danger item text (--s-danger-fg, #e89898)
+ *   --c-dropdownmenu-destructive-bghov danger item hover bg (--s-danger-subtle)
+ *   --c-dropdownmenu-focus-ring       uniform DS ring: 2px bg-gap + 1px amber
+ *
+ * Brand fixes vs vanilla shadcn:
+ *   - Focus ring: replaced amber bg-flood (focus:bg-accent) with uniform DS ring.
+ *     data-[highlighted] drives the bg/text shift for BOTH pointer and keyboard;
+ *     focus-visible:shadow-[...] drives the amber ring for keyboard ONLY.
+ *   - Separator: was bg-muted (#1a1714 == popover bg, zero contrast, invisible).
+ *     Now bg-[var(--c-dropdownmenu-separator)] (#2a2622, visible hairline).
+ *   - Label: was full ink-secondary (no visual hierarchy vs item text).
+ *     Now --c-dropdownmenu-label-fg (muted) + uppercase + tight tracking.
+ *   - Shortcut: added [font-family:var(--p-font-mono)] (JetBrains Mono per brand spec).
+ *     Removed opacity-60 — muted ink colour meets contrast floor without it.
+ */
 
 declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -293,12 +666,26 @@ declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<Dropdown
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuShortcut: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
     displayName: string;
 };
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+/**
+ * Form — DFL Design System v0
+ *
+ * Thin React Hook Form wrapper (FormProvider + Controller). Composes
+ * FormItem, FormLabel, FormControl, FormDescription, FormMessage.
+ *
+ * Tokens consumed (Layer 3 → Layer 2 → Layer 1):
+ *   --c-form-gap              (8px, p-space-2)  — gap between label/control/hint/message
+ *   --c-form-section-gap      (20px, p-space-5) — gap between FormItems in a <form>
+ *   --c-form-label-fg         (s-ink-secondary) — label default colour
+ *   --c-form-label-error-fg   (s-danger-fg)     — label colour when field has error
+ *   --c-form-description-fg   (s-ink-muted)     — helper text below the control
+ *   --c-form-message-error-fg (s-danger-fg)     — validation-error message colour
+ */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React$1.JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;
     isDirty: boolean;
@@ -311,15 +698,51 @@ declare const useFormField: () => {
     formDescriptionId: string;
     formMessageId: string;
 };
+/**
+ * FormItem — vertical flex stack.
+ * Gap is driven by --c-form-gap (replaces the Tailwind `space-y-2` utility).
+ */
 declare const FormItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * FormLabel — wraps the DS Label.
+ * Error state switches colour from --c-form-label-fg (→ --s-ink-secondary)
+ * to --c-form-label-error-fg (→ --s-danger-fg, #e89898 — the softer danger-fg
+ * tint) instead of leaking the Tailwind alias `text-destructive`
+ * (→ --destructive → --s-danger-solid, full-saturation #e07a7a).
+ */
 declare const FormLabel: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
-declare const FormControl: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
+declare const FormControl: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLElement> & {
+    children?: React$1.ReactNode;
+} & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
+/**
+ * FormDescription — helper text below the control.
+ * Uses --c-form-description-fg (→ --s-ink-muted) instead of the Tailwind
+ * alias `text-muted-foreground`.
+ */
 declare const FormDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+/**
+ * FormMessage — validation-error text.
+ * Uses --c-form-message-error-fg (→ --s-danger-fg, #e89898) instead of the
+ * Tailwind alias `text-destructive` (→ --s-danger-solid, #e07a7a).
+ */
 declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
-declare function HoverCard({ ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function HoverCardTrigger({ ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function HoverCardContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Content>): react_jsx_runtime.JSX.Element;
+/**
+ * HoverCard — DFL Design System v0
+ *
+ * Tokens consumed:
+ *   --c-hovercard-{bg,border,radius,padding,shadow,focus-ring}
+ *   backed by --s-surface-raised, --s-border-subtle, --p-radius-lg (10px),
+ *   --p-space-4, --p-shadow, and a double box-shadow focus ring
+ *   (0 0 0 2px page-bg + 0 0 0 3px amber — DS uniform ring).
+ *
+ * Panel radius: --p-radius-lg = 10px (overlay/card tier).
+ *   NOT --p-radius-md = 6px (input/button tier).
+ * Trigger focus ring: DS uniform ring via --c-hovercard-focus-ring.
+ */
+declare function HoverCard({ ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Root>): React$1.JSX.Element;
+declare function HoverCardTrigger({ className, ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Trigger>): React$1.JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof HoverCardPrimitive.Content>): React$1.JSX.Element;
 
 /**
  * IconButton — DFL Design System v0 (NEW in v1.0.0).
@@ -334,13 +757,23 @@ declare function HoverCardContent({ className, align, sideOffset, ...props }: Re
  *   <IconButton aria-label="Search"><SearchIcon /></IconButton>
  *
  * Tokens consumed:
- *   --c-button-radius, --s-brand-subtle, --s-brand-fg, --s-brand-ring,
+ *   --c-button-radius, --s-brand-subtle, --s-brand-fg,
+ *   --s-surface-page (focus ring bg-gap), --s-border-focus (focus ring outline),
  *   --c-button-ghost-fg, --c-button-ghost-bg-hover, --s-ink-primary,
- *   --s-surface-raised, --s-border-subtle, --s-border-strong.
+ *   --s-surface-raised, --s-border-subtle, --s-border-strong,
+ *   --c-button-primary-bg, --c-button-primary-fg, --c-button-primary-bg-hover,
+ *   --c-button-destructive-fg, --c-button-destructive-bg-hover.
+ *
+ * Focus ring: DFL uniform two-layer box-shadow — 2px page-color gap +
+ * 1px solid amber. Applied via box-shadow (not Tailwind ring utilities)
+ * to preserve border-radius on all variants.
+ * ⚠️ DO NOT revert to `focus-visible:ring-[3px] focus-visible:ring-[var(--s-brand-ring)]`
+ *    — that produces a single semi-transparent halo (rgba 0.45), not the
+ *    mandated crisp two-layer ring (brand spec: box-shadow 0 0 0 2px page, 0 0 0 3px amber).
  */
 declare const iconButtonVariants: (props?: ({
     variant?: "destructive" | "outline" | "ghost" | "solid" | null | undefined;
-    size?: "default" | "sm" | "lg" | "xs" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     asChild?: boolean;
@@ -360,26 +793,48 @@ declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & Re
  */
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare function InputOTP({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
+/**
+ * Visual validation status for the OTP widget.
+ *
+ * - default: idle / filling — warm sand borders, no tint
+ * - error:   rejected code — --s-danger-solid border, --s-danger-subtle bg
+ * - success: verified code — --s-success-solid border, --s-success-subtle bg
+ *
+ * Provided to all child InputOTPSlots via InputOTPStatusContext so the caller
+ * sets it once on the <InputOTP> root, not on every slot.
+ */
+type OTPStatus = "default" | "error" | "success";
+declare function InputOTP({ className, containerClassName, status, ...props }: React$1.ComponentProps<typeof OTPInput> & {
     containerClassName?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function InputOTPGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function InputOTPSlot({ index, className, ...props }: React$1.ComponentProps<"div"> & {
+    /** Visual validation status applied uniformly to all slots. */
+    status?: OTPStatus;
+}): React$1.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function InputOTPSlot({ index, className, style, ...props }: React$1.ComponentProps<"div"> & {
     index: number;
-}): react_jsx_runtime.JSX.Element;
-declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function InputOTPSeparator({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
 
 /**
  * Kbd — DFL Design System v0 (NEW in v1.0.0).
  *
  * Single-key chip. Combine like:
- *   <Kbd>⌘</Kbd><Kbd>K</Kbd>
+ *   <Kbd>⌘</Kbd><span aria-hidden="true">+</span><Kbd>K</Kbd>
  *
  * Also exposed as the `kbd` prop on <Button /> for inline shortcut hints.
  *
- * Tokens consumed:
- *   --s-surface-raised, --s-border-subtle, --s-ink-muted, --p-radius-sm,
- *   --s-font-mono.
+ * Tokens consumed (Layer 3 → Layer 2 → Layer 1):
+ *   --c-kbd-bg         → --s-surface-raised   (#1a1714)
+ *   --c-kbd-bg-depth   → --s-surface-panel    (#141210) — bottom shadow ridge
+ *   --c-kbd-border     → --s-border-subtle    (#2a2622)
+ *   --c-kbd-fg         → --s-ink-primary      (#f6f1e7) — upgraded from ink-secondary for legibility
+ *   --c-kbd-shine      rgba(255,255,255,0.055) — top inset highlight
+ *   --c-kbd-radius     → --p-radius-sm        (4px)
+ *
+ * Size specs (per DS v0 spec):
+ *   sm      9.5px mono  · 17px height · 3px radius
+ *   default 10.5px mono · 20px height · 4px radius
+ *   lg      12px mono   · 24px height · 4px radius
  */
 declare const kbdVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
@@ -391,86 +846,289 @@ declare const Kbd: React$1.ForwardRefExoticComponent<KbdProps & React$1.RefAttri
 /**
  * Label — DFL Design System v0
  *
- * DS v0 spec: 12px, weight 500, leading 1.4. Two variants:
- *   default — Inter, sentence case for form fields.
- *   mono    — JetBrains Mono uppercase, used for "meta about meta" (KeyValueList keys, table headers).
+ * Tokens consumed (Layer 3 → Layer 2 → Layer 1):
+ *   --c-label-fg             → --s-ink-secondary   (default variant)
+ *   --c-label-fg-muted       → --s-ink-muted        (mono variant)
+ *   --c-label-fg-error       → --s-danger-fg        (error state; #e89898)
+ *   --c-label-fg-disabled    → --s-ink-disabled     (explicit disabled state)
+ *   --c-label-required-color → --s-brand-solid      (required asterisk)
+ *   --c-label-font-size      → --p-text-12          (12px default)
+ *   --c-label-mono-font-size → 10.5px               (mono; no p-text primitive)
+ *   --c-label-mono-tracking  → 0.06em               (mono letter-spacing)
+ *
+ * Two shape variants:
+ *   default — Inter 12px/500, sentence case for form fields.
+ *   mono    — JetBrains Mono uppercase, for "meta about meta" (table headers, key lists).
+ *
+ * Three explicit states (peer-disabled also propagates automatically via CSS):
+ *   default  — no additional override.
+ *   error    — label adopts --c-label-fg-error when its paired field is invalid.
+ *   disabled — reduced opacity + cursor:not-allowed (for label-first layouts where
+ *              peer-disabled cannot propagate via DOM sibling order).
  */
 declare const labelVariants: (props?: ({
     variant?: "default" | "mono" | null | undefined;
+    state?: "disabled" | "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "mono" | null | undefined;
+    state?: "disabled" | "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
-declare function Menubar({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function MenubarMenu({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Menu>): react_jsx_runtime.JSX.Element;
-declare function MenubarGroup({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Group>): react_jsx_runtime.JSX.Element;
-declare function MenubarPortal({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Portal>): react_jsx_runtime.JSX.Element;
-declare function MenubarRadioGroup({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
-declare function MenubarTrigger({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Content>): react_jsx_runtime.JSX.Element;
+/**
+ * Menubar — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3 → Layer 2 → Layer 1):
+ *   --c-menubar-bar-bg, --c-menubar-bar-border, --c-menubar-bar-radius
+ *   --c-menubar-trigger-fg, --c-menubar-trigger-bg-hover, --c-menubar-trigger-bg-open, --c-menubar-trigger-radius
+ *   --c-menubar-content-bg, --c-menubar-item-fg, --c-menubar-item-bg-hover, --c-menubar-item-radius
+ *   --c-menubar-shortcut-font, --c-menubar-shortcut-fg
+ *   --c-menubar-indicator-color
+ *   --c-menubar-dest-fg, --c-menubar-dest-bg-hover
+ *   --c-menubar-ring-trigger, --c-menubar-ring-item  (DS 2-layer amber focus ring)
+ *
+ * Focus ring spec: box-shadow: 0 0 0 2px <surface-bg>, 0 0 0 3px #E07A4A
+ *   Triggers sit on bar bg → ring uses --c-menubar-bar-bg as inner layer.
+ *   Items sit inside the dropdown → ring uses --c-menubar-content-bg.
+ *
+ * Item hover: brand-subtle tint (rgba(224,122,74,0.10)) — NOT solid accent fill.
+ * CheckboxItem/RadioItem indicators: --c-menubar-indicator-color (#E07A4A amber).
+ * Shortcuts: JetBrains Mono via --c-menubar-shortcut-font.
+ */
+declare function Menubar({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Root>): React$1.JSX.Element;
+declare function MenubarMenu({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Menu>): React$1.JSX.Element;
+declare function MenubarGroup({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Group>): React$1.JSX.Element;
+declare function MenubarPortal({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Portal>): React$1.JSX.Element;
+declare function MenubarRadioGroup({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.RadioGroup>): React$1.JSX.Element;
+declare function MenubarTrigger({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Trigger>): React$1.JSX.Element;
+declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Content>): React$1.JSX.Element;
 declare function MenubarItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Item> & {
     inset?: boolean;
     variant?: "default" | "destructive";
-}): react_jsx_runtime.JSX.Element;
-declare function MenubarCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
-declare function MenubarRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): React$1.JSX.Element;
+declare function MenubarRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.RadioItem>): React$1.JSX.Element;
 declare function MenubarLabel({ className, inset, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Label> & {
     inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function MenubarSeparator({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Separator>): react_jsx_runtime.JSX.Element;
-declare function MenubarShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
-declare function MenubarSub({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Sub>): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function MenubarSeparator({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Separator>): React$1.JSX.Element;
+declare function MenubarShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function MenubarSub({ ...props }: React$1.ComponentProps<typeof MenubarPrimitive.Sub>): React$1.JSX.Element;
 declare function MenubarSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
     inset?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function MenubarSubContent({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function MenubarSubContent({ className, ...props }: React$1.ComponentProps<typeof MenubarPrimitive.SubContent>): React$1.JSX.Element;
 
 declare function NavigationMenu({ className, children, viewport, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
     viewport?: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuList({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.List>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuItem({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Item>): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.List>): React$1.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Item>): React$1.JSX.Element;
+/**
+ * DS-token-aware trigger style.
+ *
+ * Fixes vs previous shadcn generic:
+ *  • hover:bg-accent (= --accent = amber #E07A4A full-fill) → surface-elevated
+ *    lift via --c-nav-trigger-hover-bg (#1f1c18). Amber is reserved for CTA only.
+ *  • focus ring: was ring-[3px] ring-ring/50 (wrong width + opacity) →
+ *    DS uniform ring: 2px gap + 1px amber ring via ring-1 / ring-offset-2,
+ *    with transition-none so it appears instantly.
+ *  • open state: amber-subtle bg tint (--c-nav-trigger-open-bg) + amber-300
+ *    text + amber border — NOT a full amber fill.
+ */
 declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-declare function NavigationMenuTrigger({ className, children, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuContent({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuViewport({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuLink({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Link>): react_jsx_runtime.JSX.Element;
-declare function NavigationMenuIndicator({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): react_jsx_runtime.JSX.Element;
-
-declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
-declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
-declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuTrigger({ className, children, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): React$1.JSX.Element;
+/**
+ * NavigationMenuContent — dropdown panel content.
+ *
+ * Fix: removed `**:data-[slot=navigation-menu-link]:focus:ring-0` and
+ * `**:data-[slot=navigation-menu-link]:focus:outline-none` which were
+ * silencing all focus rings inside the open dropdown (keyboard a11y regression).
+ * Content panel now uses --c-nav-content-* tokens instead of generic popover vars.
+ */
+declare function NavigationMenuContent({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Content>): React$1.JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): React$1.JSX.Element;
+/**
+ * NavigationMenuLink — top-level direct links AND content panel items.
+ *
+ * Fixes:
+ *  • hover:bg-accent (amber full-fill) → --c-nav-item-hover-bg (surface-elevated)
+ *  • focus:bg-accent → removed; replaced with DS ring on focus-visible
+ *  • focus ring now visible (parent Content no longer suppresses it)
+ *  • active state: brand-subtle bg + brand-fg text
+ *    For content items with left-border indicator, add
+ *    `border-l-2 border-l-[var(--c-nav-item-active-border)]` via className.
+ */
+declare function NavigationMenuLink({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Link>): React$1.JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): React$1.JSX.Element;
+
+declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
 type PaginationLinkProps = {
     isActive?: boolean;
-} & Pick<React$1.ComponentProps<typeof Button>, "size"> & React$1.ComponentProps<"a">;
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
-declare function PaginationPrevious({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
-declare function PaginationNext({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
-declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+} & React$1.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, ...props }: PaginationLinkProps): React$1.JSX.Element;
+type PaginationNavProps = {
+    disabled?: boolean;
+} & React$1.ComponentProps<"a">;
+declare function PaginationPrevious({ className, disabled, ...props }: PaginationNavProps): React$1.JSX.Element;
+declare function PaginationNext({ className, disabled, ...props }: PaginationNavProps): React$1.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
 
+/**
+ * Popover — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3):
+ *   --c-popover-bg      background surface (--s-surface-elevated #1f1c18)
+ *   --c-popover-fg      primary text (--s-ink-primary)
+ *   --c-popover-border  border color (--s-border-subtle)
+ *   --c-popover-radius  10px (--p-radius-lg) — overlays use lg, not md
+ *   --c-popover-shadow  DS shadow token (--p-shadow 0 4px 12px…)
+ *   --c-popover-padding interior padding (--p-space-4 = 16px)
+ *
+ * Focus ring on the trigger — apply via className on the wrapped element:
+ *   focus-visible:ring-0
+ *   focus-visible:[box-shadow:0_0_0_2px_var(--s-surface-page),_0_0_0_3px_#E07A4A]
+ *
+ * sideOffset default raised to 6 (was 4) — breathing room per DS spec.
+ */
 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>>;
 declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Progress — DFL Design System v0
+ *
+ * Tokens consumed:
+ *   --c-progress-{track-bg,radius,h-sm,h-md,h-lg,duration,easing}
+ *   --c-progress-fill-{default,success,danger,warning,info}
+ *   backed by --s-brand-solid, --s-{success,danger,warning,info}-solid
+ *
+ * Props:
+ *   size:    sm (4px) | md (8px, default) | lg (12px)
+ *   variant: default (amber) | success | danger | warning | info
+ *   value:   0–100
+ */
+declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const progressFillVariants: (props?: ({
+    variant?: "default" | "info" | "success" | "warning" | "danger" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ProgressProps extends React$1.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, VariantProps<typeof progressTrackVariants>, VariantProps<typeof progressFillVariants> {
+}
+declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * RadioGroup — DS v0 token-native refactor.
+ *
+ * Changes from vanilla shadcn:
+ *   - Border on unselected items uses --c-radio-border (→ --s-border-strong, #3a3530)
+ *     instead of border-primary (amber) which leaked the brand accent onto neutral state.
+ *   - Focus ring is the uniform DFL ring: box-shadow 0 0 0 2px page-bg, 0 0 0 3px #E07A4A
+ *     (instant — box-shadow not in transition-colors, appears/disappears without animation).
+ *   - Indicator is a pure CSS div (8px filled circle) replacing the Lucide <Circle> icon
+ *     which required SVG fill/color coupling via fill-current text-current.
+ *   - All knobs resolve through --c-radio-* component tokens → --s-* semantic tokens.
+ */
 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>>;
+/**
+ * RadioGroupRow — convenience compound: RadioGroupItem + Label with correct
+ * disabled handling. Disabled propagates to both the circle (opacity/cursor via
+ * the item) and the label (--c-radio-label-fg-disabled, cursor not-allowed).
+ *
+ * Use for typical radio list rows. Use RadioGroupItem directly when you need
+ * finer composition control (e.g. custom label markup).
+ */
+interface RadioGroupRowProps {
+    value: string;
+    id: string;
+    disabled?: boolean;
+    children: React$1.ReactNode;
+    className?: string;
+}
+declare const RadioGroupRow: {
+    ({ value, id, disabled, children, className, }: RadioGroupRowProps): React$1.JSX.Element;
+    displayName: string;
+};
 
-declare function ResizablePanelGroup({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>): react_jsx_runtime.JSX.Element;
-declare function ResizablePanel({ ...props }: React$1.ComponentProps<typeof ResizablePrimitive.Panel>): react_jsx_runtime.JSX.Element;
+/**
+ * ResizablePanelGroup / ResizablePanel / ResizableHandle
+ *
+ * DS v0 token adoption — Layer 3 component tokens (--c-resizable-*):
+ *   --c-resizable-handle-track          → --s-border-subtle  (1px divider, idle)
+ *   --c-resizable-handle-track-hover    → --s-border-strong  (divider on hover)
+ *   --c-resizable-handle-track-focus    → --s-brand-solid    (divider on keyboard focus)
+ *   --c-resizable-handle-track-drag     → --s-brand-solid    (divider while dragging)
+ *   --c-resizable-grip-bg               → --s-surface-elevated
+ *   --c-resizable-grip-border           → --s-border-subtle
+ *   --c-resizable-grip-border-hover     → --s-border-strong
+ *   --c-resizable-grip-border-focus     → --s-brand-solid
+ *   --c-resizable-grip-border-drag      → --s-brand-solid
+ *   --c-resizable-grip-icon             → --s-ink-muted
+ *   --c-resizable-grip-icon-drag        → --s-brand-solid
+ *
+ * Focus ring: DFL uniform ring (2px surface-page gap + 1px amber) applied as
+ *   box-shadow on the grip widget when the handle has :focus-visible.
+ * Drag state: react-resizable-panels emits data-resize-handle-active on
+ *   PanelResizeHandle during drag — drives amber track + amber-tinted grip +
+ *   amber dot icons.
+ */
+declare function ResizablePanelGroup({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>): React$1.JSX.Element;
+declare function ResizablePanel({ ...props }: React$1.ComponentProps<typeof ResizablePrimitive.Panel>): React$1.JSX.Element;
 declare function ResizableHandle({ withHandle, className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
     withHandle?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}): React$1.JSX.Element;
 
-declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * ScrollArea — Radix custom-scrollbar container with DS v0 token adoption.
+ *
+ * DS tokens consumed (Layer 3 → Layer 2 chain):
+ *   --c-scroll-area-thumb        rest   → --s-ink-muted    (#7d7568)
+ *   --c-scroll-area-thumb-hover  hover  → --s-brand-solid  (#E07A4A)
+ *   --c-scroll-area-thumb-active active → --s-brand-pressed (#c2663b)
+ *   --c-scroll-area-track-hover  track bg on container hover
+ *   --c-scroll-area-width        8px scrollbar rail width
+ *   --c-scroll-area-radius       999px pill thumb
+ *
+ * Focus: the Viewport receives keyboard focus when children are non-focusable
+ * (plain-text lists). The DS uniform amber ring is applied via focus-visible:
+ *   box-shadow: 0 0 0 2px var(--s-surface-page), 0 0 0 3px #E07A4A
+ * When children ARE focusable (buttons, links), the ring belongs on those
+ * elements — not on the scroll container.
+ */
+type ScrollAreaScrollbars = "vertical" | "horizontal" | "both";
+interface ScrollAreaProps extends React$1.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    /** Which scrollbar orientations to render. @default "vertical" */
+    scrollbars?: ScrollAreaScrollbars;
+}
+declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.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 SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * SelectTrigger — DFL Design System v0
+ *
+ * Design changes vs shadcn baseline:
+ *  - Focus ring: canonical DFL `outline: 1px solid #E07A4A; outline-offset: 3px`
+ *    via `.ds-focus-ring` class (no shadcn `ring-*` utilities).
+ *  - bg: --c-select-bg (sand-850), border: --c-select-border (sand-700)
+ *  - Hover: border escalates to --c-select-border-hover (sand-600)
+ *  - Open state: amber border + amber outline ring + chevron rotates 180° to amber
+ *  - Disabled: opacity 0.45 (spec), cursor not-allowed
+ *  - Error: border switches to --c-select-border-error (danger-solid)
+ *  - Chevron: --c-select-icon-color (sand-400); escalates on hover/open
+ */
+interface SelectTriggerProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    /** When true, the trigger displays the error border (--c-select-border-error). */
+    error?: boolean;
+}
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & 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$1.RefAttributes<HTMLDivElement>>;
@@ -478,7 +1136,34 @@ declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitiv
 declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Separator — Radix UI primitive, 1-pixel rule consuming DS component tokens.
+ *
+ * Component tokens consumed (defined in tokens.css Layer 3):
+ *   --c-separator-color     : line fill (default → --s-border-subtle → #2a2622)
+ *   --c-separator-thickness : line width/height (default → 1px)
+ *
+ * Override per-use via inline style:
+ *   style={{ "--c-separator-color": "var(--s-border-strong)" } as React.CSSProperties}
+ *
+ * Non-interactive — no focus ring needed.
+ */
 declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * SeparatorWithLabel — composite: two separator lines flanking a centered label.
+ *
+ * Additional component tokens consumed:
+ *   --c-separator-label-fg   : label text color (default → --s-ink-muted → #7d7568)
+ *   --c-separator-label-size : label font size  (default → 11px)
+ *
+ * Usage:
+ *   <SeparatorWithLabel label="ou continue com" />
+ *   <SeparatorWithLabel label="Módulo 3" />
+ */
+interface SeparatorWithLabelProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    label: string;
+}
+declare const SeparatorWithLabel: React$1.ForwardRefExoticComponent<SeparatorWithLabelProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Sheet: React$1.FC<DialogPrimitive.DialogProps>;
 declare const SheetTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -486,25 +1171,56 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "top" | "bottom" | "right" | "left" | null | undefined;
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
 declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
 };
 declare const SheetFooter: {
-    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.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>>;
 
+/**
+ * Tooltip — DFL Design System v0
+ *
+ * Tokens consumed:
+ *   --c-tooltip-bg, --c-tooltip-fg, --c-tooltip-border,
+ *   --c-tooltip-radius, --c-tooltip-shadow
+ *
+ * Anatomy:
+ *   TooltipProvider  — wrap page / section once (controls delayDuration etc.)
+ *   Tooltip          — root (open state machine)
+ *   TooltipTrigger   — the interactive element; carries the DS uniform focus ring
+ *   TooltipContent   — the floating bubble; includes a directional Radix Arrow
+ *
+ * Focus ring:
+ *   TooltipTrigger adds the `.ds-focus-ring` class, which resolves to
+ *   `outline: 1px solid var(--s-border-focus); outline-offset: 3px` on
+ *   :focus-visible. When used with `asChild` + a Button, the class merges
+ *   into the child via Radix Slot.
+ *
+ * Arrow / caret:
+ *   TooltipPrimitive.Arrow is wired inside TooltipContent.
+ *   fill = --c-tooltip-bg  (same as bubble bg)
+ *   stroke = --c-tooltip-border  (matches bubble border)
+ *
+ * sideOffset default raised 4 → 6 for breathing room between bubble and trigger.
+ */
 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>>;
+/**
+ * TooltipTrigger — wraps Radix Trigger and injects the DS uniform focus ring.
+ * The `.ds-focus-ring` class is defined in tokens.css and applies
+ * `outline: 1px solid var(--s-border-focus); outline-offset: 3px` on :focus-visible.
+ */
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 type SidebarContext = {
@@ -570,14 +1286,86 @@ declare const SidebarMenuSubButton: React$1.ForwardRefExoticComponent<Omit<React
     isActive?: boolean;
 }, "ref"> & React$1.RefAttributes<HTMLAnchorElement>>;
 
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/**
+ * Skeleton — loading placeholder block.
+ *
+ * Renders a directional warm shimmer (sand-800 → sand-700 sweep) driven by
+ * `--c-skeleton-*` component tokens defined in tokens.css. Animates via
+ * `@keyframes skeleton-shimmer`; automatically static under
+ * `prefers-reduced-motion: reduce` (WCAG 2.3.3).
+ *
+ * Radius defaults to `--c-skeleton-radius-sm` (4px). Override via `style`:
+ *   borderRadius: "var(--c-skeleton-radius-lg)"     — hero / media blocks
+ *   borderRadius: "var(--c-skeleton-radius-circle)" — circular avatars
+ *   borderRadius: "var(--p-radius-pill)"            — pill / badge shapes
+ */
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
 
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React$1.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime.JSX.Element;
+/**
+ * Slider — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3 — see tokens.css → --c-slider-*):
+ *   --c-slider-track-h             track height              4px
+ *   --c-slider-track-bg            empty track fill          → --s-border-subtle
+ *   --c-slider-range-bg            filled range fill         → --s-brand-solid
+ *   --c-slider-thumb-size          thumb diameter            20px
+ *   --c-slider-thumb-bg            thumb fill                → --s-surface-page
+ *   --c-slider-thumb-border        thumb border color        → --s-brand-solid
+ *   --c-slider-thumb-shadow        base drop shadow
+ *   --c-slider-thumb-hover-shadow  hover halo (7px amber rgba)
+ *   --c-slider-thumb-focus-shadow  DS uniform ring (0 0 0 2px bg + 0 0 0 3px amber)
+ *
+ * States:
+ *   hover    → amber-400 border + soft 7px rgba halo via --c-slider-thumb-hover-shadow
+ *   focus    → DS uniform box-shadow ring, transition:none (instant per DS spec)
+ *   disabled → opacity-50, pointer-events-none, not-allowed cursor
+ *
+ * @param showTicks  Render tick marks below the track at each step boundary.
+ *                   Ticks before the current value are amber-tinted.
+ */
+declare function Slider({ className, defaultValue, value, min, max, step, showTicks, ...props }: React$1.ComponentProps<typeof SliderPrimitive.Root> & {
+    showTicks?: boolean;
+}): React$1.JSX.Element;
 
-declare const SonnerToaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+declare const SonnerToaster: ({ ...props }: ToasterProps) => React$1.JSX.Element;
 
+/**
+ * Switch — Radix UI primitive wired to DS v0 component tokens.
+ *
+ * Fixes vs original shadcn output:
+ *   1. Thumb was `bg-background` → `--s-surface-page` (#0a0908, near-black) — invisible
+ *      on the dark unchecked track. Now uses `--c-switch-thumb-bg` (#f6f1e7, warm off-white).
+ *   2. Focus ring was shadcn `ring-2 ring-ring ring-offset-2` (CSS outline approach).
+ *      Now uses the uniform DS box-shadow ring via `--c-switch-focus-ring`
+ *      (0 0 0 2px page-bg gap + 0 0 0 3px amber — box-shadow only, no outline property).
+ *   3. Component token layer added: all values flow through `--c-switch-*` knobs
+ *      (appended to tokens.css Layer 3), making the component theme-overridable
+ *      at the per-component level without touching global alias chains.
+ */
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Table — DFL Design System v0 (token-native refactor)
+ *
+ * Tokens consumed (Layer 3 → Layer 2):
+ *   --c-table-header-fg           → --s-ink-muted         header cell text
+ *   --c-table-header-bg           → transparent            header cell bg
+ *   --c-table-divider             → --s-border-subtle      row separator lines
+ *   --c-table-row-hover-bg        → --s-surface-raised     tbody row hover bg
+ *   --c-table-row-selected-bg     → --s-brand-subtle       selected row amber wash
+ *   --c-table-row-selected-border → --s-brand-border       selected row 2px left signal
+ *   --c-table-caption-fg          → --s-ink-muted          caption / empty-state text
+ *
+ * Body cell default ink: --s-ink-secondary (#c9c0b4)
+ *
+ * Numeric / ID cell conventions (applied by consumer via className):
+ *   font-mono text-[var(--s-ink-primary)]            — ID cells  (JetBrains Mono)
+ *   font-mono text-[var(--s-ink-primary)] text-right — amount cells (JetBrains Mono)
+ *
+ * Focus ring for interactive table elements (sort buttons, row-action icons):
+ *   Use <Button variant="ghost"> or <IconButton variant="ghost"> — both carry
+ *   the uniform DS amber double-shadow ring on :focus-visible automatically.
+ */
 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>>;
@@ -587,6 +1375,24 @@ declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttribu
 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>>;
 
+/**
+ * Tabs — DFL Design System v0
+ *
+ * Tokens consumed (underline-indicator pattern):
+ *   --c-tabs-fg           inactive trigger text  → --s-ink-muted
+ *   --c-tabs-fg-active    active trigger text     → --s-ink-primary
+ *   --c-tabs-indicator    active 2 px bottom border → --s-brand-solid (#E07A4A)
+ *   --c-tabs-divider      list 1 px bottom border  → --s-border-subtle
+ *
+ * Layout:
+ *   - TabsList: transparent container, 1 px --c-tabs-divider bottom border.
+ *     No pill bg, no card-bg affordance, no border-radius container.
+ *   - TabsTrigger: 2 px transparent bottom border that becomes --c-tabs-indicator
+ *     when active. Overlaps list divider by 1 px so indicator sits on the line.
+ *   - Hover: secondary ink + faint rgba wash (rgba 255 255 255 / 0.035).
+ *   - Focus: uniform DFL ring via `.ds-focus-ring` (1 px amber, 3 px offset).
+ *   - Disabled: ink-disabled, pointer-events-none, opacity-50.
+ */
 declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
@@ -597,14 +1403,36 @@ interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaEleme
 /**
  * Textarea — DFL Design System v0
  *
- * Shares Input tokens (--c-input-*). Multi-line, 80px min height.
+ * Shares Input tokens (--c-input-*). Multi-line, 80px min height. Resizable.
+ *
+ * Focus ring (DS v0 ch.5.2 uniform spec):
+ *   --c-textarea-ring-focus       = 0 0 0 2px page-bg, 0 0 0 3px amber
+ *   --c-textarea-ring-focus-error = 0 0 0 2px page-bg, 0 0 0 3px danger-red
  */
 declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * Toast — DFL Design System v0
+ *
+ * Tokens consumed (Layer 3 → Layer 2 → Layer 1):
+ *   --c-toast-{bg,border,fg,fg-desc,radius,shadow,close-fg,close-fg-hover,accent-w,action-border}
+ *   --c-toast-{success,warning,danger,info}-{bg,border}
+ *   backed by --s-{success,warning,danger,info}-{subtle,border,fg,solid}
+ *
+ * Variants: default | success | warning | danger | info
+ *   `destructive` is kept as a backward-compat alias of `danger`.
+ *
+ * A11y fixes vs vanilla shadcn:
+ *   - ToastClose always visible at opacity-60 (was opacity-0 until group-hover)
+ *   - Focus ring uses the uniform DFL box-shadow ring instead of raw ring-2/ring-offset
+ *   - Semantic close-fg / title accent inherit per-variant colour via group selectors
+ *
+ * Left accent stripe rendered as ::before pseudo-element, coloured per variant.
+ */
 declare const ToastProvider: React$1.FC<ToastPrimitives.ToastProviderProps>;
 declare const ToastViewport: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React$1.RefAttributes<HTMLOListElement>, "ref"> & React$1.RefAttributes<HTMLOListElement>>;
 declare const Toast: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React$1.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "default" | "info" | "success" | "warning" | "danger" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLLIElement>>;
 declare const ToastAction: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const ToastClose: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
@@ -613,16 +1441,57 @@ declare const ToastDescription: React$1.ForwardRefExoticComponent<Omit<ToastPrim
 type ToastComponentProps = React$1.ComponentPropsWithoutRef<typeof Toast>;
 type ToastActionElement = React$1.ReactElement<typeof ToastAction>;
 
-declare function Toaster(): react_jsx_runtime.JSX.Element;
+declare function Toaster(): React$1.JSX.Element;
 
+/**
+ * toggleVariants — DFL DS v0
+ *
+ * Token hierarchy consumed:
+ *   --c-toggle-{bg,bg-hover,bg-active,bg-active-hover}
+ *   --c-toggle-{fg,fg-hover,fg-active}
+ *   --c-toggle-border
+ *   --c-toggle-focus-ring  (uniform 2px-gap + 1px-amber spec, ch.5.2)
+ *
+ * Active state: amber wash (--s-brand-subtle) + amber-300 fg (--s-brand-fg),
+ * NOT the generic --accent alias. Hover on active: slightly stronger amber wash.
+ *
+ * Focus ring: box-shadow 0 0 0 2px page-bg + 0 0 0 3px #E07A4A, z-index:10
+ * so the ring is NOT clipped by siblings in a group.
+ *
+ * Disabled: 40% opacity + pointer-events:none (active state still visible at
+ * reduced opacity to preserve context).
+ */
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: React$1.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+declare function Toggle({ className, variant, size, ...props }: React$1.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): React$1.JSX.Element;
 
-declare function ToggleGroup({ className, variant, size, children, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+/**
+ * ToggleGroup — DFL DS v0
+ *
+ * Tokens consumed (via toggleVariants in toggle.tsx):
+ *   --c-toggle-{bg,bg-hover,bg-active,bg-active-hover,fg,fg-hover,fg-active}
+ *   --c-toggle-{border,focus-ring,outline-active-shadow}
+ *   --c-toggle-group-radius
+ *
+ * Variant "outline":
+ *   • Group container gets --p-shadow-sm depth shadow
+ *   • Each item's border is `border-[var(--c-toggle-border)]` (--s-border-subtle)
+ *   • Non-first items have `border-l-0` (left removed) so only item-1's right
+ *     border acts as the internal divider — no double lines
+ *   • Active item gets an inset top-highlight shadow (--c-toggle-outline-active-shadow)
+ *
+ * Focus ring: see toggle.tsx — z-10 ensures ring renders above siblings.
+ */
+declare function ToggleGroup({ className, variant, size, children, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): React$1.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React$1.JSX.Element;
+
+/**
+ * ProtectedRoute — auth guard component.
+ * Renders children only when authenticated; calls onUnauthenticated otherwise.
+ * Identical pattern across all 4 audited apps (~25-40 lines each).
+ */
 
 interface ProtectedRouteProps {
     children: ReactNode;
@@ -631,7 +1500,7 @@ interface ProtectedRouteProps {
     /** Rendered while auth state is loading. Defaults to null. */
     loadingFallback?: ReactNode;
 }
-declare const ProtectedRoute: ({ children, onUnauthenticated, loadingFallback, }: ProtectedRouteProps) => react_jsx_runtime.JSX.Element;
+declare const ProtectedRoute: ({ children, onUnauthenticated, loadingFallback, }: ProtectedRouteProps) => React__default.JSX.Element;
 
 interface DflRemoteProps {
     src: string;
@@ -650,13 +1519,13 @@ interface DflRemoteProps {
     style?: React.CSSProperties;
     allow?: string;
 }
-declare function DflRemote({ src, title, authToken, supabaseSession, onNavigate, onReady, fallback, className, style, allow, }: DflRemoteProps): react_jsx_runtime.JSX.Element;
+declare function DflRemote({ src, title, authToken, supabaseSession, onNavigate, onReady, fallback, className, style, allow, }: DflRemoteProps): React$1.JSX.Element;
 
 interface IframeAwareProps {
     children: React.ReactNode;
     allowedOrigins?: RegExp[];
 }
-declare function IframeAware({ children, allowedOrigins }: IframeAwareProps): react_jsx_runtime.JSX.Element;
+declare function IframeAware({ children, allowedOrigins }: IframeAwareProps): React$1.JSX.Element;
 
 interface IframeContextValue {
     token: string | null;
@@ -686,6 +1555,60 @@ interface DflResizeMessage {
 type DflIframeMessage = DflSetTokenMessage | DflNavigateMessage | DflReadyMessage | DflResizeMessage;
 declare function isAllowedOrigin(origin: string): boolean;
 
+/**
+ * PasswordInput — DFL Design System v0 (Molecule)
+ *
+ * Opinionated password field: Input atom + reveal toggle (Eye/EyeOff).
+ * Accepts optional label, help text, and error message.
+ *
+ * Tokens consumed (Layer 3 component tokens):
+ *   --c-input-{bg,fg,placeholder,border,border-hover,border-focus,ring-focus,border-error,radius}
+ *   --c-passwordinput-toggle-fg          — toggle idle color (--s-ink-muted)
+ *   --c-passwordinput-toggle-fg-hover    — toggle hover color (--s-ink-primary)
+ *
+ * WCAG 2.1 SC 2.1.1: toggle button is keyboard-reachable (tabIndex=0, default
+ * for <button>). The DS uniform focus ring (2px bg gap + 1px amber) is applied
+ * via focus-visible ring utilities.
+ *
+ * Error border: delegated to the Input atom's aria-invalid styles which resolve
+ * to --c-input-border-error (= --s-danger-solid, #e07a7a). No raw hex fallbacks.
+ *
+ * ATOMIC TIER: Molecule (Input atom + Eye/EyeOff icons + optional label/help/error)
+ * Moved from organisms/ to molecules/ to match the atomic-tier map.
+ */
+
+interface PasswordInputProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Input>, "type"> {
+    /** Optional field label rendered above the input. */
+    label?: React$1.ReactNode;
+    /** Error text — also flips the border to danger via aria-invalid. */
+    error?: string;
+    /** Helper text shown when there is no error. */
+    helpText?: string;
+    /** Convenience callback receiving the raw string value. */
+    onValueChange?: (value: string) => void;
+}
+declare const PasswordInput: React$1.ForwardRefExoticComponent<PasswordInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+/**
+ * LoginPage organism
+ * Ported from dfl-learn's Login + AuthForm components.
+ * Self-contained: uses @dfl/components primitives + useAuth hook.
+ * No framer-motion dependency — plain CSS transitions.
+ *
+ * v1.1 — DS token hygiene pass:
+ *   - Removed raw hex overrides (#E07A4A); CTA consumes --c-button-primary-bg
+ *     via the Button primary variant. Mode-switch <button> and terms <a> use
+ *     --s-brand-solid via CSS var class.
+ *   - Uniform DS focus ring (box-shadow: 0 0 0 2px --s-surface-page, 0 0 0 3px
+ *     --s-border-focus) on mode-switch button and terms link via
+ *     --c-loginpage-focus-ring; Input + Button components carry their own rings.
+ *   - Inputs consume --c-input-* tokens natively (bg-secondary/border-secondary
+ *     compatibility aliases removed); aria-invalid drives error-border + bg.
+ *   - Error state: error banner (--c-loginpage-error-*), inputs get aria-invalid.
+ *   - Disabled CTA (signup + no terms) shows --s-surface-elevated bg +
+ *     --s-ink-disabled fg via inline style override.
+ */
+
 interface LoginPageProps {
     /** Logo element or image src string. Defaults to DFL logo. */
     logo?: ReactNode | string;
@@ -703,8 +1626,42 @@ interface LoginPageProps {
     termsUrl?: string;
     /** Custom CSS class for the outer wrapper. */
     className?: string;
+    /**
+     * Pre-seed an error message for Storybook / SSR error hand-off.
+     * Renders the component in the post-submit error state (banner + input borders).
+     */
+    initialErrorMessage?: string;
+    /** Pre-seed the submitting/loading state (Storybook). */
+    initialIsSubmitting?: boolean;
+    /** Pre-seed accepted-terms for signup stories (Storybook). */
+    initialAcceptedTerms?: boolean;
+    /**
+     * Auto-focus a specific field on mount.
+     * Used by the LoginInputFocused story to demonstrate the DS focus ring.
+     */
+    focusField?: "email" | "password";
 }
-declare function LoginPage({ logo, title, redirectUrl, onSuccess, onError, defaultMode, termsUrl, className, }: LoginPageProps): react_jsx_runtime.JSX.Element;
+declare function LoginPage({ logo, title, redirectUrl, onSuccess, onError, defaultMode, termsUrl, className, initialErrorMessage, initialIsSubmitting, initialAcceptedTerms, focusField, }: LoginPageProps): React__default.JSX.Element;
+
+/**
+ * LoginScreen organism
+ * Shared, behavior-agnostic auth UI. Renders branding + email/password fields
+ * (the password field is the canonical PasswordInput with a reveal toggle) and
+ * calls `onSubmit(email, password)`. NO supabase/auth logic lives here — the
+ * consuming app wires its existing handler to `onSubmit` and drives `error` /
+ * `loading` from its own state.
+ *
+ * NOTE: this is the prop-driven login. The legacy `LoginPage` (which embeds the
+ * `useAuth` hook) is kept for existing consumers; new apps should adopt
+ * `LoginScreen`.
+ *
+ * DS token fixes applied (v1.5.x):
+ *   • Title: Barlow Condensed 700 via --c-loginscreen-title-font (--s-font-display)
+ *   • Outer wrapper: explicit background: var(--c-loginscreen-bg) (--s-surface-page)
+ *   • Card: border-radius via --c-card-radius (10px), not rounded-xl (12px)
+ *   • Error: color via --c-loginscreen-error-fg (--s-danger-fg), no raw hex fallback
+ *   • Focus ring: DS uniform 2px gap + 1px amber ring on all focusable elements
+ */
 
 interface LoginScreenProps {
     /** Logo element or image src. Defaults to the DFL logomark. */
@@ -730,37 +1687,7 @@ interface LoginScreenProps {
     /** Outer wrapper class. */
     className?: string;
 }
-declare function LoginScreen({ logo, title, subtitle, emailLabel, passwordLabel, submitLabel, onSubmit, error, loading, footer, className, }: LoginScreenProps): react_jsx_runtime.JSX.Element;
-
-/**
- * PasswordInput organism
- * Canonical password field with a show/hide reveal toggle.
- * Generalised from dfl-reviews' atoms/password-input. Optional label/error/help.
- * Uncontrolled-friendly: spreads native input props; `onValueChange` is a
- * convenience on top of the standard `onChange`.
- */
-
-interface PasswordInputProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Input>, "type"> {
-    /** Optional field label rendered above the input. */
-    label?: React$1.ReactNode;
-    /** Error text — also flips the border to danger. */
-    error?: string;
-    /** Helper text shown when there's no error. */
-    helpText?: string;
-    /** Convenience callback receiving the raw string value. */
-    onValueChange?: (value: string) => void;
-}
-declare const PasswordInput: React$1.ForwardRefExoticComponent<PasswordInputProps & React$1.RefAttributes<HTMLInputElement>>;
-
-/**
- * UserAvatar organism
- * Avatar with a deterministic member-palette fallback hue.
- *
- * Behavior-agnostic: pass `name` (and optional `src`). When no image loads,
- * the initials are shown on one of the 10 `--member-*` hues, picked
- * deterministically from a stable hash of `id ?? name`. The same person
- * therefore always gets the same colour across every DFL app.
- */
+declare function LoginScreen({ logo, title, subtitle, emailLabel, passwordLabel, submitLabel, onSubmit, error, loading, footer, className, }: LoginScreenProps): React$1.JSX.Element;
 
 /** Number of member hues defined as `--member-1..N` in tokens.css. */
 declare const MEMBER_PALETTE_SIZE = 10;
@@ -773,22 +1700,63 @@ declare function getInitials(name: string): string;
 declare function memberHueIndex(seed: string, paletteSize?: number): number;
 /** The CSS var() expression for a seed's member hue (e.g. `var(--member-3)`). */
 declare function memberHueVar(seed: string): string;
-interface UserAvatarProps extends React$1.ComponentPropsWithoutRef<typeof Avatar> {
+/** CVA for the avatar root (width/height). */
+declare const avatarSizeVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface UserAvatarProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Avatar>, "size">, VariantProps<typeof avatarSizeVariants> {
     /** Display name — drives the initials and (by default) the hue. */
     name: string;
-    /** Avatar image URL. Falls back to the coloured initials if absent/broken. */
+    /** Avatar image URL. Falls back to coloured initials if absent/broken. */
     src?: string | null;
     /**
      * Stable identity used to pick the hue (e.g. user id). Defaults to `name`.
      * Pass a sticky id so the colour survives display-name changes.
      */
     colorSeed?: string;
+    /**
+     * Size variant (xs=24 / sm=32 / md=40 / lg=56 / xl=72 px).
+     * Defaults to `md`. Replaces the previous workaround of passing raw className.
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
 /**
- * <UserAvatar name="Ada Lovelace" src={url} colorSeed={userId} />
+ * <UserAvatar name="Ada Lovelace" src={url} colorSeed={userId} size="md" />
+ *
+ * Interactive usage — wrap in a button/link for clickable profile targets:
+ *   <button
+ *     className="rounded-full outline-none
+ *       focus-visible:shadow-[0_0_0_2px_var(--background),0_0_0_3px_#E07A4A]"
+ *   >
+ *     <UserAvatar name="Ada Lovelace" />
+ *   </button>
+ *
+ * The focus ring MUST live on the outer wrapper, NOT on UserAvatar itself,
+ * because overflow:hidden on the circle clips any box-shadow.
  */
 declare const UserAvatar: React$1.ForwardRefExoticComponent<UserAvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * UserMenu organism
+ * UserAvatar trigger + dropdown menu. Fully prop-driven and
+ * behavior-agnostic — the consuming app passes its own handlers/items;
+ * no routing or auth logic lives here.
+ *
+ * Tokens consumed (Layer 3 — --c-usermenu-*):
+ *   --c-usermenu-panel-bg              dropdown panel background
+ *   --c-usermenu-panel-width           panel fixed width (replaces hardcoded w-52)
+ *   --c-usermenu-item-hover-bg         item hover/highlighted surface (#2a2622)
+ *   --c-usermenu-danger-fg             destructive item fg (--s-danger-fg, no inline fallback)
+ *   --c-usermenu-danger-hover-bg       destructive item hover bg (--s-danger-subtle)
+ *   --c-usermenu-item-focus-ring       DS uniform focus ring for regular items
+ *   --c-usermenu-item-danger-focus-ring danger-fg ring for destructive items
+ *
+ * Trigger focus ring: inherited from Button variant="ghost" via
+ *   --c-button-focus-gap + --c-button-focus-brand (atoms-button refactor, 2026-07-02).
+ *   box-shadow: 0 0 0 2px var(--c-button-focus-gap), 0 0 0 3px var(--c-button-focus-brand).
+ *   No additional trigger-level override required in UserMenu.
+ */
+
 interface UserMenuItem {
     /** Visible label. */
     label: string;
@@ -825,9 +1793,23 @@ interface UserMenuProps {
     onSignOut?: () => void;
     /** Dropdown alignment. Defaults to "end". */
     align?: "start" | "center" | "end";
+    /**
+     * Open the dropdown on mount (uncontrolled). Useful for stories / tests
+     * that need to show the open panel without user interaction.
+     */
+    defaultOpen?: boolean;
     className?: string;
 }
-declare function UserMenu({ name, email, avatarUrl, colorSeed, showName, items, onProfile, onSettings, onSignOut, align, className, }: UserMenuProps): react_jsx_runtime.JSX.Element;
+declare function UserMenu({ name, email, avatarUrl, colorSeed, showName, items, onProfile, onSettings, onSignOut, align, defaultOpen, className, }: UserMenuProps): React$1.JSX.Element;
+
+/**
+ * ConfirmDialog organism
+ * Generic confirm/delete dialog built on the AlertDialog primitive.
+ * Replaces the per-app Confirm/Delete re-wraps — pass title/body/labels
+ * and an onConfirm handler. Behavior-agnostic: the consumer owns the action.
+ *
+ * Controlled (`open` + `onOpenChange`) or trigger-driven (`trigger`).
+ */
 
 interface ConfirmDialogProps {
     /** Dialog heading. */
@@ -856,7 +1838,14 @@ interface ConfirmDialogProps {
     /** Disable the confirm button (e.g. while a parent validates). */
     confirmDisabled?: boolean;
 }
-declare function ConfirmDialog({ title, body, confirmLabel, cancelLabel, variant, onConfirm, onCancel, open, onOpenChange, trigger, confirmDisabled, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmDialog({ title, body, confirmLabel, cancelLabel, variant, onConfirm, onCancel, open, onOpenChange, trigger, confirmDisabled, }: ConfirmDialogProps): React$1.JSX.Element;
+
+/**
+ * AppSidebar organism
+ * Generic collapsible sidebar for DFL apps.
+ * Based on João's AppSidebar (dfl-notifications) + DFL design tokens.
+ * Uses the Sidebar primitive from @dfl/components.
+ */
 
 interface NavItem {
     title: string;
@@ -899,10 +1888,44 @@ interface AppSidebarProps {
 }
 /**
  * AppSidebar wraps the Sidebar primitive with SidebarProvider.
- * Renders an optional trigger button + the sidebar itself.
  * Pass `children` to render the main content area next to the sidebar.
+ *
+ * The SidebarTrigger (collapse toggle) MUST live inside an AppNavbar `leftSlot`
+ * that is passed as part of `children` — this keeps the unified 56px topbar as
+ * the only top chrome (no separate 48px trigger strip stacking above it).
+ *
+ * Example:
+ *   <AppSidebar navGroups={...}>
+ *     <AppNavbar leftSlot={<SidebarTrigger />} ... />
+ *     <main>...</main>
+ *   </AppSidebar>
+ */
+declare function AppSidebar({ defaultOpen, children, ...props }: AppSidebarProps): React__default.JSX.Element;
+
+/**
+ * AppNavbar organism
+ * Top navigation bar with optional left slot (e.g. SidebarTrigger), breadcrumb,
+ * user menu, and theme toggle. Works standalone — no router dependency.
+ *
+ * DS v0 tokens consumed (Layer 3 → Layer 2):
+ *   --c-navbar-bg        → --s-surface-panel  (#141210 — elevated panel, NOT page flush)
+ *   --c-navbar-border    → --s-border-subtle
+ *   --c-navbar-h         → 56px               (same as --c-header-h)
+ *   --c-navbar-px        → --p-space-4
+ *   --c-navbar-breadcrumb-fg         → --s-ink-muted
+ *   --c-navbar-breadcrumb-fg-current → --s-ink-primary
+ *
+ * leftSlot: embed a SidebarTrigger here so the sidebar toggle lives in the unified
+ * 56px topbar rather than in a separate 48px strip (which would create 104px of dead
+ * chrome). Pass <SidebarTrigger /> as leftSlot in the AppShell template.
+ *
+ * Focus ring: all interactive elements carry `.ds-focus-ring` (outline form, from
+ * tokens.css) or `.c-appshell-focus` (box-shadow form, preferred in AppShell context).
+ * The button's built-in `focus-visible:ring-*` is zeroed so only the DS ring shows.
+ *
+ * Sign-out item: uses --s-danger-fg / --s-danger-subtle directly — never
+ * the raw `text-destructive` shadcn alias which breaks if compat mapping drifts.
  */
-declare function AppSidebar({ defaultOpen, children, ...props }: AppSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface BreadcrumbEntry {
     label: string;
@@ -919,7 +1942,12 @@ interface AppNavbarProps {
     breadcrumbs?: BreadcrumbEntry[];
     /** User info for the avatar menu. */
     userInfo?: NavbarUserInfo;
-    /** Current theme. Toggles between "light" and "dark". */
+    /**
+     * Current theme — controls the toggle icon only (Moon ↔ Sun).
+     * The navbar surface is ALWAYS --c-navbar-bg (--s-surface-page, #0a0908),
+     * dark-first regardless of this prop. "light" mode is editorial-only in DFL DS v0.
+     * Default is "dark" (dark-first per DFL DS v0).
+     */
     theme?: "light" | "dark";
     /** Called when user clicks the theme toggle button. */
     onThemeToggle?: () => void;
@@ -929,12 +1957,39 @@ interface AppNavbarProps {
     onSettingsClick?: () => void;
     /** Called when user clicks Sign Out menu item. */
     onSignOut?: () => void;
-    /** Extra action buttons rendered to the right of breadcrumbs. */
+    /** Extra action elements rendered to the right of breadcrumbs (8px gap). */
     actions?: ReactNode;
+    /**
+     * Optional slot rendered to the LEFT of the breadcrumb row.
+     * Embed a `<SidebarTrigger />` here so the sidebar toggle lives inside the
+     * unified 56px topbar, replacing the redundant 48px trigger strip above it.
+     */
+    leftSlot?: ReactNode;
     /** Custom CSS class for the navbar wrapper. */
     className?: string;
 }
-declare function AppNavbar({ breadcrumbs, userInfo, theme, onThemeToggle, onProfileClick, onSettingsClick, onSignOut, actions, className, }: AppNavbarProps): react_jsx_runtime.JSX.Element;
+declare function AppNavbar({ breadcrumbs, userInfo, theme, onThemeToggle, onProfileClick, onSettingsClick, onSignOut, actions, leftSlot, className, }: AppNavbarProps): React__default.JSX.Element;
+
+/**
+ * Gantt organism — a real roadmap Gantt (rows × week columns).
+ *
+ * Ported from João's cohort Gantt (joao.devfellowship.com home) to the DFL
+ * design system: dark surfaces, amber single-accent, Barlow/Inter/JBMono,
+ * 4px grid, rounded (radius-lg) cards. ~90% visual parity, on-brand.
+ *
+ * Anatomy (matches the reference):
+ *   ┌ STAGE / TASK ┬ W1 │ W2 │ W3 │ … │ Wn ┐   ← week axis header (mono-uppercase)
+ *   │ ▸ Stage 1 ●  │ ▓▓▓▓▓▓░░░░░  40%       │   ← stage row: bar across its week-span,
+ *   │   milestone  │      ▓▓▓               │     amber-filled to progress
+ *   │   milestone  │         ░░░            │   ← milestone sub-bars positioned by week
+ *   │ ▸ Stage 2 ●  │            ░░░░░  0%   │
+ *   └──────────────┴───────────────────────┘
+ *   Dependencies (predecessor → successor) render as connector links between
+ *   stage bars, NOT plain arrows between cards.
+ *
+ * Pure (no data fetching). Consumer maps its model into GanttStage[] and the
+ * derived week axis. Self-contained: only depends on cn + DS tokens/utilities.
+ */
 
 interface GanttMilestone {
     id: string;
@@ -999,6 +2054,14 @@ interface GanttProps extends React$1.HTMLAttributes<HTMLDivElement> {
     nameColWidth?: number;
     /** Min px width of a single week column. Defaults to 64. */
     weekMinWidth?: number;
+    /**
+     * Optional click handler for a milestone. When provided, each milestone's
+     * name-column cell becomes a keyboard-accessible button that invokes this
+     * callback with the milestone and its parent stage. When omitted, milestone
+     * rows render exactly as before (a non-interactive cell) — fully
+     * backward-compatible, so existing consumers are unaffected.
+     */
+    onMilestoneClick?: (milestone: GanttMilestone, stage: GanttStage) => void;
 }
 /** Default width of the sticky name column. ~2× the original 240 → readable. */
 declare const DEFAULT_NAME_COL_WIDTH = 320;
@@ -1020,7 +2083,40 @@ declare function barGridColumn(weekStart: number, weekSpan: number, weekCount: n
     start: number;
     span: number;
 };
-declare function Gantt({ stages, weeks, dependencies, rowsHeader, stagesOnly, header, labelWidth, nameColWidth, weekMinWidth, className, style, ...rest }: GanttProps): react_jsx_runtime.JSX.Element;
+declare function Gantt({ stages, weeks, dependencies, rowsHeader, stagesOnly, header, labelWidth, nameColWidth, weekMinWidth, onMilestoneClick, className, style, ...rest }: GanttProps): React$1.JSX.Element;
+
+/**
+ * PublishDrawer organism — the central node of the DFL content-creation machine.
+ *
+ * A shared, app-agnostic publish widget (ADR-6 of plan
+ * `20260501-content-creation-machine`). Any DFL creator app (Lesson Studio,
+ * Course Shaper, …) imports it, hands it a recorded `videoUrl` plus a Supabase
+ * client, and it orchestrates the existing `dfl-publisher-*` edge functions to
+ * publish the piece cross-platform via Zernio + register the lesson.
+ *
+ * v1 scope (Q3=B, locked TG 2026-05-31): **YouTube only**. IG / TikTok are v2.
+ * v1 SEO (Q4=B): the creator types title / keyword manually — no dfl-seo call.
+ *
+ * Self-contained: composes @dfl/components primitives. The `SupabaseClient` is
+ * injected (never hardcoded) — same convention as AuthProvider/LoginPage. The
+ * caller's session JWT rides along automatically via `supabase.functions.invoke`,
+ * which the edge fns require for `auth.getUser()`.
+ *
+ * Edge-fn contracts (dfl-schema/supabase/functions):
+ *   - dfl-publisher-list-accounts   GET  → { ok, accounts: PublisherAccount[] }
+ *   - render-design-template        POST → { output_url }            (Thumbify)
+ *   - dfl-publisher-create-post     POST → { ok, zernio_post_id, post_url, status, log_id }
+ *   - dfl-publisher-register-lesson POST → { ok, lesson_id, ... }
+ *
+ * DS token corrections (v1.1.0):
+ *   - Youtube icon:  text-red-600   → color: var(--c-publish-drawer-platform-fg)
+ *   - CheckCircle2:  text-green-600 → color: var(--c-publish-drawer-success-fg)
+ *   - Error message: bare text-destructive <p> → styled box via --s-danger-* tokens
+ *   - Zernio post ID: bare text → JetBrains Mono chip via --c-publish-drawer-postid-font
+ *   - SelectTrigger: shadcn legacy focus:ring-2 → DS focus ring via --c-input-ring-focus
+ *   - RenderingThumb: added indeterminate progress bar + brand status note
+ *   - Publishing:    added inline brand status note
+ */
 
 /** Minimal subset of `@supabase/supabase-js` SupabaseClient we rely on.
  * Kept structural so the package never hard-depends on supabase-js. */
@@ -1083,6 +2179,15 @@ interface PublishDrawerProps {
     /** Called on error. */
     onError?: (error: Error) => void;
     className?: string;
+    /**
+     * @internal Storybook-only props — bypass async effects to pin a specific
+     * visual state without needing mock supabase timing tricks.
+     * Never pass these in production code.
+     */
+    _storyStatus?: PublishStatus;
+    _storyResult?: PublishResult | null;
+    _storyAccounts?: PublisherAccount[];
+    _storyErrorMsg?: string | null;
 }
 /** Parse a comma/space-separated tag/keyword string into a clean array. */
 declare function parseTags(raw: string): string[];
@@ -1095,6 +2200,6 @@ declare function validatePublishForm(input: {
     description: string;
     accountId: string | null;
 }): string | null;
-declare function PublishDrawer({ open, onOpenChange, supabase, videoUrl, transcript, suggestedTitle, suggestedDescription, suggestedThumbnailUrl, thumbnailTemplateId, buId, registerLesson, onPublished, onError, className, }: PublishDrawerProps): react_jsx_runtime.JSX.Element;
+declare function PublishDrawer({ open, onOpenChange, supabase, videoUrl, transcript, suggestedTitle, suggestedDescription, suggestedThumbnailUrl, thumbnailTemplateId, buId, registerLesson, onPublished, onError, className, _storyStatus, _storyResult, _storyAccounts, _storyErrorMsg, }: PublishDrawerProps): React$1.JSX.Element;
 
-export { ALLOWED_ORIGINS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppNavbar, type AppNavbarProps, AppSidebar, type AppSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_NAME_COL_WIDTH, type DflIframeMessage, type DflNavigateMessage, type DflReadyMessage, DflRemote, type DflRemoteProps, type DflResizeMessage, type DflSetTokenMessage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, type GanttDependency, type GanttMilestone, type GanttProps, type GanttStage, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IframeAware, type IframeAwareProps, IframeContext, type IframeContextValue, type IframeMessageType, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, type KbdProps, Label, LoginPage, type LoginPageProps, LoginScreen, type LoginScreenProps, MEMBER_PALETTE_SIZE, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavGroup, type NavItem, type NavbarUserInfo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, Progress, ProtectedRoute, type ProtectedRouteProps, PublishDrawer, type PublishDrawerProps, type PublishDrawerSupabase, type PublishResult, type PublishStatus, type PublisherAccount, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionElement, ToastClose, type ToastComponentProps, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatar, type UserAvatarProps, type UserInfo, UserMenu, type UserMenuItem, type UserMenuProps, badgeVariants, barGridColumn, buttonVariants, clampPct, filterPublishableAccounts, getInitials, iconButtonVariants, isAllowedOrigin, kbdVariants, labelVariants, memberHueIndex, memberHueVar, navigationMenuTriggerStyle, parseTags, resolveNameColWidth, resolveWeekCount, resolveWeekLabels, stageProgress, toggleVariants, useFormField, useSidebar, validatePublishForm };
+export { ALLOWED_ORIGINS, AVATAR_MEMBER_PALETTE_SIZE, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppNavbar, type AppNavbarProps, AppSidebar, type AppSidebarProps, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, type AvatarSize, AvatarStatus, type AvatarStatusValue, type AvatarTone, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEntry, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleHeader, CollapsibleItem, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_NAME_COL_WIDTH, type DflIframeMessage, type DflNavigateMessage, type DflReadyMessage, DflRemote, type DflRemoteProps, type DflResizeMessage, type DflSetTokenMessage, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gantt, type GanttDependency, type GanttMilestone, type GanttProps, type GanttStage, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IframeAware, type IframeAwareProps, IframeContext, type IframeContextValue, type IframeMessageType, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, type KbdProps, Label, LoginPage, type LoginPageProps, LoginScreen, type LoginScreenProps, MEMBER_PALETTE_SIZE, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavGroup, type NavItem, type NavbarUserInfo, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type OTPStatus, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, type PasswordInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, type ProgressProps, ProtectedRoute, type ProtectedRouteProps, PublishDrawer, type PublishDrawerProps, type PublishDrawerSupabase, type PublishResult, type PublishStatus, type PublisherAccount, RadioGroup, RadioGroupItem, RadioGroupRow, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, type ScrollAreaScrollbars, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeparatorWithLabel, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SonnerToaster, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionElement, ToastClose, type ToastComponentProps, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserAvatar, type UserAvatarProps, type UserInfo, UserMenu, type UserMenuItem, type UserMenuProps, avatarMemberColor, badgeVariants, barGridColumn, buttonVariants, clampPct, filterPublishableAccounts, getInitials, iconButtonVariants, isAllowedOrigin, kbdVariants, labelVariants, memberHueIndex, memberHueVar, navigationMenuTriggerStyle, parseTags, resolveNameColWidth, resolveWeekCount, resolveWeekLabels, stageProgress, toggleVariants, useFormField, useSidebar, validatePublishForm };