canvas-ui-sdk 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,4810 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import { ReactNode } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { DayPicker } from 'react-day-picker';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { LucideIcon } from 'lucide-react';
+import { ClassValue } from 'clsx';
+
+declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "primary-outline" | "primary-neutral" | "neutral" | "neutral-delete" | "delete" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "mini" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, style, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
+}): react_jsx_runtime.JSX.Element;
+
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface CheckboxWithLabelProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    children: React$1.ReactNode;
+    size?: "default" | "sm";
+}
+declare const CheckboxWithLabel: React$1.ForwardRefExoticComponent<CheckboxWithLabelProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface DateInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    inputSize?: "sm" | "default" | "lg";
+    value?: string;
+    onChange?: (value: string) => void;
+}
+declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
+
+interface UploadedFile {
+    id: string;
+    name: string;
+    size: number;
+    type?: string;
+}
+interface FileUploaderProps {
+    files?: UploadedFile[];
+    onFilesChange?: (files: UploadedFile[]) => void;
+    placeholder?: string;
+    accept?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const FileUploader: React$1.ForwardRefExoticComponent<FileUploaderProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface UploadedImage {
+    id: string;
+    url: string;
+    name?: string;
+}
+interface ImageUploaderProps {
+    images?: UploadedImage[];
+    selectedImageId?: string;
+    onImagesChange?: (images: UploadedImage[]) => void;
+    onSelectImage?: (imageId: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const ImageUploader: React$1.ForwardRefExoticComponent<ImageUploaderProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+
+declare function Label({ className, style, ...props }: React$1.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+interface LineTab {
+    id: string;
+    label: string;
+}
+interface LineTabsProps {
+    /** Array of tab items */
+    tabs: LineTab[];
+    /** ID of the currently active tab */
+    activeTab?: string;
+    /** Callback when a tab is clicked */
+    onTabChange?: (tabId: string) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Line Tabs Component
+ *
+ * Horizontal underline-style tabs for page navigation.
+ * Active tab has blue text with 2px blue bottom border.
+ * Inactive tabs have gray text with 1px gray bottom border.
+ *
+ * @example
+ * ```tsx
+ * <LineTabs
+ *   tabs={[
+ *     { id: "tab1", label: "Tab 1" },
+ *     { id: "tab2", label: "Tab 2" },
+ *   ]}
+ *   activeTab="tab1"
+ *   onTabChange={(id) => console.log(id)}
+ * />
+ * ```
+ */
+declare function LineTabs({ tabs, activeTab: controlledActiveTab, onTabChange, className, }: LineTabsProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxOption {
+    id: string;
+    label: string;
+}
+interface MultiselectCheckboxFieldProps {
+    options?: CheckboxOption[];
+    selectedValues?: string[];
+    onChange?: (values: string[]) => void;
+    inputSize?: "sm" | "default" | "lg";
+    disabled?: boolean;
+    className?: string;
+}
+declare const MultiselectCheckboxField: React$1.ForwardRefExoticComponent<MultiselectCheckboxFieldProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface MultiselectTagsProps {
+    tags?: string[];
+    placeholder?: string;
+    inputSize?: "sm" | "default" | "lg";
+    onAdd?: (tag: string) => void;
+    onRemove?: (tag: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const MultiselectTags: React$1.ForwardRefExoticComponent<MultiselectTagsProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare function Popover({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
+
+declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Item>): react_jsx_runtime.JSX.Element;
+
+interface RangeInputProps {
+    inputSize?: "sm" | "default" | "lg";
+    minValue?: string;
+    maxValue?: string;
+    onMinChange?: (value: string) => void;
+    onMaxChange?: (value: string) => void;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const RangeInput: React$1.ForwardRefExoticComponent<RangeInputProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare function ScrollArea({ className, children, ...props }: React$1.ComponentProps<typeof ScrollAreaPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React$1.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+
+interface SearchboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    inputSize?: "sm" | "default" | "lg";
+    value?: string;
+    onChange?: (value: string) => void;
+}
+declare const Searchbox: React$1.ForwardRefExoticComponent<SearchboxProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const selectTriggerVariants: (props?: ({
+    inputSize?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Select({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectGroup({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
+declare function SelectTrigger({ className, inputSize, children, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Trigger> & VariantProps<typeof selectTriggerVariants>): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, position, sideOffset, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React$1.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+interface PillOption {
+    id: string;
+    label: string;
+}
+interface SelectablePillsProps {
+    inputSize?: "sm" | "default" | "lg";
+    options: PillOption[];
+    selected: string[];
+    onSelectionChange: (selected: string[]) => void;
+    allowMultiple?: boolean;
+    className?: string;
+    disabled?: boolean;
+}
+declare const SelectablePills: React$1.ForwardRefExoticComponent<SelectablePillsProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Sheet({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SheetTrigger({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SheetClose({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function SheetPortal({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function SheetOverlay({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, overlayClassName, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+    overlayClassName?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SheetHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SheetFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SheetTitle({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function SheetDescription({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): react_jsx_runtime.JSX.Element;
+declare function Sidebar$1({ side, variant, collapsible, className, children, ...props }: React$1.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
+declare function SidebarRail({ className, ...props }: React$1.ComponentProps<"button">): react_jsx_runtime.JSX.Element;
+declare function SidebarInset({ className, ...props }: React$1.ComponentProps<"main">): react_jsx_runtime.JSX.Element;
+declare function SidebarInput({ className, ...props }: React$1.ComponentProps<typeof Input>): react_jsx_runtime.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+declare function SidebarContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React$1.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React$1.ComponentProps<"div"> & {
+    showIcon?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React$1.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+interface SliderProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "value" | "onValueChange"> {
+    inputSize?: "sm" | "default" | "lg";
+    value?: number[];
+    onValueChange?: (value: number[]) => void;
+    showLabel?: boolean;
+    labelFormatter?: (value: number[]) => string;
+}
+declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+declare function Switch({ className, ...props }: React$1.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Tabs({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.List>): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    inputSize?: "sm" | "default" | "lg";
+}
+declare const TextInput: React$1.ForwardRefExoticComponent<TextInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const textareaVariants: (props?: ({
+    inputSize?: "default" | "sm" | "lg" | "expandable" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
+}
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body-xl" | "body-l" | "body-m" | "body-s" | "body-xs";
+type TypographyColor = "default" | "muted";
+type TypographyElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label";
+interface TypographyProps extends React$1.HTMLAttributes<HTMLElement> {
+    /** Typography style variant */
+    variant?: TypographyVariant;
+    /** Color variant */
+    color?: TypographyColor;
+    /** Override the rendered HTML element */
+    as?: TypographyElement;
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: React$1.ReactNode;
+}
+/**
+ * Typography component that renders text with design system styling.
+ *
+ * @example
+ * // Headings
+ * <Typography variant="h1">Page Title</Typography>
+ * <Typography variant="h2" color="muted">Subtitle</Typography>
+ *
+ * // Body text
+ * <Typography variant="body-m">Paragraph text</Typography>
+ * <Typography variant="body-s" color="muted">Caption</Typography>
+ *
+ * // Override element
+ * <Typography variant="body-m" as="span">Inline text</Typography>
+ */
+declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
+
+interface CartItem {
+    id: string;
+    name: string;
+    price: number;
+    image: string;
+}
+interface Message {
+    id: string;
+    senderName: string;
+    senderAvatar: string;
+    timestamp: string;
+}
+interface Notification {
+    id: string;
+    userName: string;
+    userAvatar: string;
+    action: string;
+    timestamp: string;
+}
+interface NavItem$1 {
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    href?: string;
+    onClick?: () => void;
+}
+interface HeaderProps {
+    /** Callback when mobile menu button is clicked */
+    onMenuClick?: () => void;
+    /** Whether to show the logo on desktop (for no-sidebar pages) */
+    showDesktopLogo?: boolean;
+    /** Visual variant - light (default) or dark mode */
+    variant?: "light" | "dark";
+    /** Callback when "My Account" is clicked */
+    onAccountClick?: () => void;
+    /** Callback when "Logout" is clicked */
+    onLogout?: () => void;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Cart items to display */
+    cartItems?: CartItem[];
+    /** Callback when checkout button is clicked */
+    onCheckout?: () => void;
+    /** Callback when remove item is clicked */
+    onRemoveCartItem?: (id: string) => void;
+    /** Messages to display */
+    messages?: Message[];
+    /** Callback when "Mark as read" is clicked for messages */
+    onMarkAsRead?: () => void;
+    /** Callback when "view more" is clicked for messages */
+    onViewMoreMessages?: () => void;
+    /** Notifications to display */
+    notifications?: Notification[];
+    /** Callback when "Mark as read" is clicked for notifications */
+    onMarkNotificationsAsRead?: () => void;
+    /** Callback when "view more" is clicked for notifications */
+    onViewMoreNotifications?: () => void;
+    /** Navigation items for header and mobile menu */
+    navItems?: NavItem$1[];
+    /** Callback when Login button is clicked */
+    onLogin?: () => void;
+    /** Callback when Sign up button is clicked */
+    onSignUp?: () => void;
+    /** Whether to show auth buttons (Login/Sign up) */
+    showAuthButtons?: boolean;
+}
+/**
+ * Canvas Design System - Header/Navbar Component
+ *
+ * Desktop (lg+): Full logo with wordmark, icon cluster, avatar
+ * Mobile/Tablet: Favicon only, avatar, hamburger menu
+ *
+ * For pages without a sidebar, set showDesktopLogo={true} to display
+ * the logo in the header on desktop.
+ *
+ * Set variant="dark" for a dark themed header that matches the sidebar.
+ */
+declare function Header({ onMenuClick, showDesktopLogo, variant, onAccountClick, onLogout, avatarUrl, cartItems, onCheckout, onRemoveCartItem, messages, onMarkAsRead, onViewMoreMessages, notifications, onMarkNotificationsAsRead, onViewMoreNotifications, navItems, onLogin, onSignUp, showAuthButtons, }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+interface NavItem {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    href?: string;
+    isActive?: boolean;
+    /** Nested subtabs - when present, the item becomes expandable */
+    children?: Omit<NavItem, "children" | "icon">[];
+}
+interface NavSection {
+    id: string;
+    title: string;
+    items: NavItem[];
+}
+interface SidebarNavProps {
+    sections: NavSection[];
+    variant?: "dark" | "light";
+    onItemClick?: (item: NavItem | Omit<NavItem, "children" | "icon">) => void;
+}
+/**
+ * Canvas Design System - Sidebar Navigation
+ *
+ * Renders navigation sections with collapsible groups and nav items.
+ * Supports dark (desktop) and light (mobile sheet) variants.
+ * Items with children become expandable with nested subtabs.
+ */
+declare function SidebarNav({ sections, variant, onItemClick }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarProps {
+    /** Navigation sections to display */
+    sections: NavSection[];
+    /** Visual variant - dark for desktop, light for mobile sheet */
+    variant?: "dark" | "light";
+    /** Callback when a nav item or subtab is clicked */
+    onItemClick?: (item: NavItem | Omit<NavItem, "children" | "icon">) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Sidebar Component
+ *
+ * Desktop: Fixed dark sidebar (320px width) on the left
+ * Mobile: Light theme sidebar rendered inside a Sheet
+ */
+declare function Sidebar({ sections, variant, onItemClick, className }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardShellProps {
+    /** Navigation sections for the sidebar */
+    navigation: NavSection[];
+    /** Optional page header content (e.g., breadcrumbs, page title) */
+    pageHeader?: React.ReactNode;
+    /** Main content - the modular blocks */
+    children: React.ReactNode;
+    /** Callback when a nav item or subtab is clicked */
+    onNavItemClick?: (item: NavItem | Omit<NavItem, "children" | "icon">) => void;
+    /** Callback when app menu (hamburger) is clicked - for future app-level menu */
+    onAppMenuClick?: () => void;
+    /** Additional class name for the main content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Dashboard Shell
+ *
+ * A composable page layout that provides:
+ * - Fixed header (80px)
+ * - Fixed dark sidebar on desktop (320px, hidden on mobile)
+ * - Floating sidebar toggle button on mobile (left edge)
+ * - Mobile sheet navigation for dashboard sidebar
+ * - Hamburger menu in header for app-level menu (future)
+ * - Main content area with pageHeader slot and children slot for blocks
+ *
+ * @example
+ * ```tsx
+ * <DashboardShell
+ *   navigation={navSections}
+ *   pageHeader={<Breadcrumbs />}
+ * >
+ *   <StatsBlock />
+ *   <ChartBlock />
+ *   <TableBlock />
+ * </DashboardShell>
+ * ```
+ */
+declare function DashboardShell({ navigation, pageHeader, children, onNavItemClick, onAppMenuClick, contentClassName, }: DashboardShellProps): react_jsx_runtime.JSX.Element;
+
+interface IconNavItemConfig {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    href?: string;
+    isActive?: boolean;
+    hasNotification?: boolean;
+}
+declare const defaultIconNavItems: IconNavItemConfig[];
+interface IconSidebarProps {
+    /** Navigation items to display */
+    items?: IconNavItemConfig[];
+    /** Visual variant - dark for desktop, light for mobile sheet */
+    variant?: "dark" | "light";
+    /** Callback when a nav item is clicked */
+    onItemClick?: (item: IconNavItemConfig) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Icon Sidebar Component
+ *
+ * A narrow sidebar (96px) with vertically stacked icon navigation.
+ * Desktop: Fixed dark sidebar on the left
+ * Mobile: Light theme sidebar rendered inside a Sheet
+ */
+declare function IconSidebar({ items, variant, onItemClick, className }: IconSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface IconSidebarShellProps {
+    /** Navigation items for the icon sidebar */
+    navigation?: IconNavItemConfig[];
+    /** Optional page header content (e.g., breadcrumbs, page title) */
+    pageHeader?: React.ReactNode;
+    /** Main content - the modular blocks */
+    children: React.ReactNode;
+    /** Callback when a nav item is clicked */
+    onNavItemClick?: (item: IconNavItemConfig) => void;
+    /** Callback when app menu (hamburger) is clicked - for future app-level menu */
+    onAppMenuClick?: () => void;
+    /** Additional class name for the main content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Icon Sidebar Shell
+ *
+ * A composable page layout with a narrow icon sidebar that provides:
+ * - Fixed header (80px)
+ * - Fixed narrow dark icon sidebar on desktop (96px, hidden on mobile)
+ * - Floating sidebar toggle button on mobile (left edge)
+ * - Mobile sheet navigation for icon sidebar
+ * - Hamburger menu in header for app-level menu (future)
+ * - Main content area with pageHeader slot and children slot for blocks
+ *
+ * Uses the same styling and spacing as DashboardShell for non-sidebar content.
+ *
+ * @example
+ * ```tsx
+ * <IconSidebarShell navigation={iconNavItems}>
+ *   <ContentDropzone label="Main content area" />
+ * </IconSidebarShell>
+ * ```
+ */
+declare function IconSidebarShell({ navigation, pageHeader, children, onNavItemClick, onAppMenuClick, contentClassName, }: IconSidebarShellProps): react_jsx_runtime.JSX.Element;
+
+interface NavTab {
+    id: string;
+    label: string;
+    isActive?: boolean;
+}
+interface DoubleSidebarSection {
+    id: string;
+    icon: LucideIcon;
+    label: string;
+    badge?: boolean;
+    tabs: NavTab[];
+}
+declare const defaultDoubleSidebarSections: DoubleSidebarSection[];
+interface DoubleSidebarProps {
+    /** Navigation sections - each section maps to an icon and has tabs */
+    sections?: DoubleSidebarSection[];
+    /** Visual variant for the icon column */
+    iconVariant?: "dark" | "light";
+    /** Visual variant for the navigation column */
+    navVariant?: "dark" | "light";
+    /** Callback when a tab is clicked */
+    onTabClick?: (section: DoubleSidebarSection, tab: NavTab) => void;
+    /** Callback when closing (for mobile sheet) */
+    onClose?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Double Sidebar Component
+ *
+ * A two-column sidebar where:
+ * - Left column (96px): Icon buttons that switch the active section
+ * - Right column (280px): Text-based navigation tabs for the active section
+ *
+ * Each column can be independently themed (light/dark).
+ */
+declare function DoubleSidebar({ sections, iconVariant, navVariant, onTabClick, onClose, className }: DoubleSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface DoubleSidebarShellProps {
+    /** Navigation sections for the double sidebar */
+    sections?: DoubleSidebarSection[];
+    /** Visual variant for the icon column */
+    iconVariant?: "dark" | "light";
+    /** Visual variant for the navigation column */
+    navVariant?: "dark" | "light";
+    /** Optional page header content (e.g., breadcrumbs, page title) */
+    pageHeader?: React.ReactNode;
+    /** Main content - the modular blocks */
+    children: React.ReactNode;
+    /** Callback when a tab is clicked */
+    onTabClick?: (section: DoubleSidebarSection, tab: NavTab) => void;
+    /** Callback when app menu (hamburger) is clicked - for future app-level menu */
+    onAppMenuClick?: () => void;
+    /** Additional class name for the main content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Double Sidebar Shell
+ *
+ * A composable page layout with a two-column sidebar that provides:
+ * - Fixed header (80px)
+ * - Fixed double sidebar on desktop (96px icons + 280px nav = 376px total)
+ * - Floating sidebar toggle button on mobile (left edge)
+ * - Mobile sheet navigation with both sidebar columns
+ * - Each sidebar column can be independently themed (light/dark)
+ * - Main content area with pageHeader slot and children slot for blocks
+ *
+ * Uses the same styling and spacing as DashboardShell for non-sidebar content.
+ *
+ * @example
+ * ```tsx
+ * <DoubleSidebarShell
+ *   sections={sections}
+ *   iconVariant="light"
+ *   navVariant="light"
+ * >
+ *   <ContentDropzone label="Main content area" />
+ * </DoubleSidebarShell>
+ * ```
+ */
+declare function DoubleSidebarShell({ sections, iconVariant, navVariant, pageHeader, children, onTabClick, onAppMenuClick, contentClassName, }: DoubleSidebarShellProps): react_jsx_runtime.JSX.Element;
+
+interface StandardPageShellProps {
+    /** Flair banner title */
+    bannerTitle?: string;
+    /** Flair banner description */
+    bannerDescription?: string;
+    /** Whether to show the flair banner */
+    showBanner?: boolean;
+    /** Page title */
+    pageTitle?: string;
+    /** Page description */
+    pageDescription?: string;
+    /** Array of tab items */
+    tabs?: LineTab[];
+    /** ID of the currently active tab */
+    activeTab?: string;
+    /** Callback when a tab is clicked */
+    onTabChange?: (tabId: string) => void;
+    /** Whether to show the tabs */
+    showTabs?: boolean;
+    /** Whether to show the page header section */
+    showPageHeader?: boolean;
+    /** Main content - the modular blocks */
+    children: React.ReactNode;
+    /** Callback when app menu (hamburger) is clicked - for future app-level menu */
+    onAppMenuClick?: () => void;
+    /** Additional class name for the main content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Standard Page Shell
+ *
+ * A no-sidebar layout with:
+ * - Fixed header with logo (no sidebar)
+ * - Optional flair banner (dark blue hero section)
+ * - Optional page header section with title, description, and tabs
+ * - Centered content area (max-width 992px)
+ *
+ * @example
+ * ```tsx
+ * <StandardPageShell
+ *   bannerTitle="Large title"
+ *   bannerDescription="Description"
+ *   pageTitle="Page title"
+ *   pageDescription="Description"
+ *   tabs={[{ id: "tab1", label: "Tab 1" }]}
+ * >
+ *   <ContentDropzone />
+ * </StandardPageShell>
+ * ```
+ */
+declare function StandardPageShell({ bannerTitle, bannerDescription, showBanner, pageTitle, pageDescription, tabs, activeTab, onTabChange, showTabs, showPageHeader, children, onAppMenuClick, contentClassName, }: StandardPageShellProps): react_jsx_runtime.JSX.Element;
+
+interface MobileNavTabConfig {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    isActive?: boolean;
+}
+interface MobileBottomNavProps {
+    /** Navigation tabs to display */
+    tabs?: MobileNavTabConfig[];
+    /** Visual variant - dark or light theme */
+    variant?: "dark" | "light";
+    /** Callback when a tab is clicked */
+    onTabClick?: (tab: MobileNavTabConfig) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Mobile Bottom Navigation
+ *
+ * A sticky bottom navigation bar with icon tabs.
+ * Styling matches the icon-sidebar for consistency.
+ * Supports both dark and light themes via the variant prop.
+ *
+ * @example
+ * ```tsx
+ * <MobileBottomNav
+ *   variant="light"
+ *   tabs={defaultMobileNavTabs}
+ *   onTabClick={(tab) => console.log(tab.id)}
+ * />
+ * ```
+ */
+declare function MobileBottomNav({ tabs, variant, onTabClick, className, }: MobileBottomNavProps): react_jsx_runtime.JSX.Element;
+
+interface MobileMenuShellProps {
+    /** Navigation tabs for the bottom nav */
+    tabs?: MobileNavTabConfig[];
+    /** Visual variant for the bottom nav - dark or light theme */
+    variant?: "dark" | "light";
+    /** ID of the currently active tab */
+    activeTab?: string;
+    /** Callback when a tab is clicked */
+    onTabChange?: (tabId: string) => void;
+    /** Main content */
+    children: React.ReactNode;
+    /** Additional class name for the main content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Mobile Menu Shell
+ *
+ * A layout with:
+ * - Fixed header with logo (no sidebar)
+ * - Main scrollable content area
+ * - Sticky bottom navigation bar (supports dark/light themes)
+ *
+ * @example
+ * ```tsx
+ * <MobileMenuShell variant="light">
+ *   <ContentDropzone />
+ * </MobileMenuShell>
+ * ```
+ */
+declare function MobileMenuShell({ tabs, variant, activeTab, onTabChange, children, contentClassName, }: MobileMenuShellProps): react_jsx_runtime.JSX.Element;
+
+interface FilterOption$c {
+    id: string;
+    label: string;
+}
+interface FilterDropdownConfig {
+    id: string;
+    label: string;
+    placeholder: string;
+    options: FilterOption$c[];
+}
+interface FilterCheckboxGroupConfig {
+    id: string;
+    label: string;
+    options: FilterOption$c[];
+}
+interface FilterDateRangeConfig {
+    id: string;
+    label: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+}
+interface FilterState {
+    dropdowns: Record<string, string>;
+    checkboxes: Record<string, boolean>;
+    dateRange: {
+        start: string;
+        end: string;
+    };
+}
+interface FilterPopoverProps {
+    /** Dropdown filter configurations */
+    dropdowns?: FilterDropdownConfig[];
+    /** Checkbox group configuration */
+    checkboxGroup?: FilterCheckboxGroupConfig;
+    /** Date range configuration */
+    dateRange?: FilterDateRangeConfig;
+    /** Current filter state */
+    filterState?: FilterState;
+    /** Callback when filters are applied */
+    onApply?: (state: FilterState) => void;
+    /** Callback when filters are cleared */
+    onClear?: () => void;
+    /** Trigger style variant - "button" for button style, "dropdown" for select-like style */
+    triggerVariant?: "button" | "dropdown";
+    /** Placeholder text shown in the trigger (used for both variants) */
+    triggerPlaceholder?: string;
+    /** Additional class names for the trigger */
+    className?: string;
+}
+/**
+ * Canvas Design System - Filter Popover Component
+ *
+ * A filter button that opens a popover with various filter options.
+ * Inspired by shadcnstudio Category Filter 6 structure.
+ *
+ * @example
+ * ```tsx
+ * // Button variant (default)
+ * <FilterPopover
+ *   onApply={(filters) => console.log(filters)}
+ *   onClear={() => console.log("Cleared")}
+ * />
+ *
+ * // Dropdown variant
+ * <FilterPopover
+ *   triggerVariant="dropdown"
+ *   triggerPlaceholder="Filter"
+ *   onApply={(filters) => console.log(filters)}
+ * />
+ * ```
+ */
+declare function FilterPopover({ dropdowns, checkboxGroup, dateRange, filterState, onApply, onClear, triggerVariant, triggerPlaceholder, className, }: FilterPopoverProps): react_jsx_runtime.JSX.Element;
+
+interface SearchBarShellProps {
+    /** Flair banner title */
+    bannerTitle?: string;
+    /** Flair banner description */
+    bannerDescription?: string;
+    /** Page title */
+    pageTitle?: string;
+    /** Page description */
+    pageDescription?: string;
+    /** Search bar placeholder */
+    searchPlaceholder?: string;
+    /** Callback when search is triggered */
+    onSearch?: (query: string) => void;
+    /** Callback when filters are applied */
+    onFilterApply?: (filters: FilterState) => void;
+    /** Main content */
+    children: React.ReactNode;
+    /** Additional class name for the main content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Search Bar Shell
+ *
+ * A layout with:
+ * - Fixed header with logo (no sidebar)
+ * - Page header section with title and description
+ * - Search bar with filter button
+ * - Content area for search results
+ *
+ * @example
+ * ```tsx
+ * <SearchBarShell
+ *   pageTitle="Page title"
+ *   pageDescription="Description"
+ *   onSearch={(query) => console.log(query)}
+ * >
+ *   <ContentDropzone />
+ * </SearchBarShell>
+ * ```
+ */
+declare function SearchBarShell({ bannerTitle, bannerDescription, pageTitle, pageDescription, searchPlaceholder, onSearch, onFilterApply, children, contentClassName, }: SearchBarShellProps): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    id: string;
+    label: string;
+    /** Optional description for the step content area */
+    description?: string;
+}
+interface StepTrackerProps {
+    /** Array of step objects with id and label */
+    steps: Step[];
+    /** Current active step (0-indexed) */
+    currentStep: number;
+    /** Optional callback when a step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Canvas Design System - Step Tracker
+ *
+ * A horizontal multi-step progress tracker showing:
+ * - Numbered circles for each step (36px)
+ * - Connecting lines between steps
+ * - Completed steps show checkmark
+ * - Active step has primary border
+ * - Inactive steps have gray background
+ */
+declare function StepTracker({ steps, currentStep, onStepClick, className, }: StepTrackerProps): react_jsx_runtime.JSX.Element;
+/** Default steps for demo/placeholder purposes */
+declare const defaultSteps: Step[];
+
+interface MultistepShellProps {
+    /** Array of step objects */
+    steps?: Step[];
+    /** Current active step (0-indexed) */
+    currentStep?: number;
+    /** Callback when a step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Main content */
+    children: React.ReactNode;
+    /** Callback when Cancel/Back is clicked */
+    onCancel?: () => void;
+    /** Callback when Continue/Submit is clicked */
+    onContinue?: () => void;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Continue button text */
+    continueText?: string;
+    /** Whether Continue button is disabled */
+    continueDisabled?: boolean;
+    /** Callback when app menu (hamburger) is clicked */
+    onAppMenuClick?: () => void;
+    /** Additional class name for the main content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Multistep Shell
+ *
+ * A layout for multi-step processes/wizards with:
+ * - Fixed header with logo
+ * - Horizontal step tracker below header
+ * - Step title and description
+ * - Centered content area (max-width 768px)
+ * - Navigation buttons (Cancel, Continue)
+ *
+ * @example
+ * ```tsx
+ * <MultistepShell
+ *   steps={[
+ *     { id: "step1", label: "Step 1", description: "First step" },
+ *     { id: "step2", label: "Step 2", description: "Second step" },
+ *   ]}
+ *   currentStep={0}
+ *   onCancel={() => router.back()}
+ *   onContinue={() => setStep(step + 1)}
+ * >
+ *   <ContentDropzone />
+ * </MultistepShell>
+ * ```
+ */
+declare function MultistepShell({ steps, currentStep, onStepClick, children, onCancel, onContinue, cancelText, continueText, continueDisabled, onAppMenuClick, contentClassName, }: MultistepShellProps): react_jsx_runtime.JSX.Element;
+
+interface InfoCardProps {
+    /** Card title (displayed as uppercase header) */
+    title?: string;
+    /** Card description text */
+    description?: string;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Canvas Design System - Info Card
+ *
+ * A sidebar card displaying a title and descriptive text.
+ * Used for "About Us" style content.
+ */
+declare function InfoCard({ title, description, className, }: InfoCardProps): react_jsx_runtime.JSX.Element;
+interface LinkItem {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    href?: string;
+    onClick?: () => void;
+}
+interface LinksCardProps {
+    /** Card title (displayed as uppercase header) */
+    title?: string;
+    /** Array of link items */
+    links?: LinkItem[];
+    /** Additional class name */
+    className?: string;
+}
+/** Default support links */
+declare const defaultSupportLinks: LinkItem[];
+/**
+ * Canvas Design System - Links Card
+ *
+ * A sidebar card displaying a title and a list of icon links.
+ * Used for "Support" style contact links.
+ */
+declare function LinksCard({ title, links, className, }: LinksCardProps): react_jsx_runtime.JSX.Element;
+
+interface MultistepSidebarShellProps {
+    /** Array of step objects */
+    steps?: Step[];
+    /** Current active step (0-indexed) */
+    currentStep?: number;
+    /** Callback when a step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Info card title */
+    infoTitle?: string;
+    /** Info card description */
+    infoDescription?: string;
+    /** Links card title */
+    linksTitle?: string;
+    /** Links card items */
+    links?: LinkItem[];
+    /** Main content */
+    children: React.ReactNode;
+    /** Callback when Cancel/Back is clicked */
+    onCancel?: () => void;
+    /** Callback when Continue/Submit is clicked */
+    onContinue?: () => void;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Continue button text */
+    continueText?: string;
+    /** Whether Continue button is disabled */
+    continueDisabled?: boolean;
+    /** Callback when app menu (hamburger) is clicked */
+    onAppMenuClick?: () => void;
+    /** Additional class name for the main content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Multistep Sidebar Shell
+ *
+ * A layout for multi-step processes with a sidebar:
+ * - Fixed header with logo
+ * - Horizontal step tracker below header
+ * - Step title and description
+ * - Two-column layout:
+ *   - Left: Main content with navigation buttons
+ *   - Right: Sidebar (320px) with Info and Links cards
+ *
+ * @example
+ * ```tsx
+ * <MultistepSidebarShell
+ *   steps={defaultSteps}
+ *   currentStep={0}
+ *   onCancel={() => router.back()}
+ *   onContinue={() => setStep(step + 1)}
+ * >
+ *   <ContentDropzone />
+ * </MultistepSidebarShell>
+ * ```
+ */
+declare function MultistepSidebarShell({ steps, currentStep, onStepClick, infoTitle, infoDescription, linksTitle, links, children, onCancel, onContinue, cancelText, continueText, continueDisabled, onAppMenuClick, contentClassName, }: MultistepSidebarShellProps): react_jsx_runtime.JSX.Element;
+
+interface MultistepProgressBarStep {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface MultistepProgressBarShellProps {
+    /** Flair banner title */
+    bannerTitle?: string;
+    /** Flair banner description */
+    bannerDescription?: string;
+    /** Page title shown below the flair banner */
+    pageTitle?: string;
+    /** Page description shown below the flair banner */
+    pageDescription?: string;
+    /** Array of step objects */
+    steps?: MultistepProgressBarStep[];
+    /** Current active step (0-indexed) */
+    currentStep?: number;
+    /** Main content */
+    children: React.ReactNode;
+    /** Callback when Cancel is clicked */
+    onCancel?: () => void;
+    /** Callback when Continue is clicked */
+    onContinue?: () => void;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Continue button text */
+    continueText?: string;
+    /** Whether Continue button is disabled */
+    continueDisabled?: boolean;
+    /** Callback when app menu (hamburger) is clicked */
+    onAppMenuClick?: () => void;
+    /** Additional class name for the content area */
+    contentClassName?: string;
+}
+/** Default steps for demo/placeholder purposes */
+declare const defaultProgressBarSteps: MultistepProgressBarStep[];
+/**
+ * Canvas Design System - Multistep Progress Bar Shell
+ *
+ * A layout for multi-step processes/wizards featuring:
+ * - Fixed header with logo
+ * - Page title and description section
+ * - Horizontal progress bar showing completion
+ * - Step-specific title and description
+ * - Centered content area (max-width 992px)
+ * - Navigation buttons (Cancel, Continue)
+ *
+ * @example
+ * ```tsx
+ * <MultistepProgressBarShell
+ *   pageTitle="Page title"
+ *   pageDescription="Description"
+ *   steps={[
+ *     { id: "step1", title: "Step 1", description: "First step" },
+ *     { id: "step2", title: "Step 2", description: "Second step" },
+ *   ]}
+ *   currentStep={0}
+ *   onCancel={() => router.back()}
+ *   onContinue={() => setStep(step + 1)}
+ * >
+ *   <ContentDropzone />
+ * </MultistepProgressBarShell>
+ * ```
+ */
+declare function MultistepProgressBarShell({ bannerTitle, bannerDescription, pageTitle, pageDescription, steps, currentStep, children, onCancel, onContinue, cancelText, continueText, continueDisabled, onAppMenuClick, contentClassName, }: MultistepProgressBarShellProps): react_jsx_runtime.JSX.Element;
+
+interface VerticalMultistepShellProps {
+    /** Array of step objects */
+    steps?: Step[];
+    /** Current active step (0-indexed) */
+    currentStep?: number;
+    /** Callback when a step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Section title for the step tracker (e.g., "REGISTRATION") */
+    sectionTitle?: string;
+    /** Flair banner title */
+    bannerTitle?: string;
+    /** Flair banner description */
+    bannerDescription?: string;
+    /** Page title */
+    pageTitle?: string;
+    /** Page description */
+    pageDescription?: string;
+    /** Main content */
+    children: React.ReactNode;
+    /** Callback when Cancel/Back is clicked */
+    onCancel?: () => void;
+    /** Callback when Continue/Submit is clicked */
+    onContinue?: () => void;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Continue button text */
+    continueText?: string;
+    /** Whether Continue button is disabled */
+    continueDisabled?: boolean;
+    /** Callback when app menu (hamburger) is clicked */
+    onAppMenuClick?: () => void;
+    /** Additional class name for the content area */
+    contentClassName?: string;
+}
+/**
+ * Canvas Design System - Vertical Multistep Shell
+ *
+ * A layout for multi-step processes with vertical step tracker:
+ *
+ * **Desktop**: Two-column layout
+ * - Left: Sidebar card (320px) with vertical step tracker
+ * - Right: Content area with step title, description, content, and navigation
+ *
+ * **Mobile**: Stacked layout
+ * - Header with hamburger menu
+ * - Page title and description
+ * - Vertical step list (no card)
+ * - Content area with navigation
+ *
+ * @example
+ * ```tsx
+ * <VerticalMultistepShell
+ *   steps={defaultVerticalSteps}
+ *   currentStep={0}
+ *   sectionTitle="REGISTRATION"
+ *   onCancel={() => router.back()}
+ *   onContinue={() => setStep(step + 1)}
+ * >
+ *   <ContentDropzone />
+ * </VerticalMultistepShell>
+ * ```
+ */
+declare function VerticalMultistepShell({ steps, currentStep, onStepClick, sectionTitle, bannerTitle, bannerDescription, pageTitle, pageDescription, children, onCancel, onContinue, cancelText, continueText, continueDisabled, onAppMenuClick, contentClassName, }: VerticalMultistepShellProps): react_jsx_runtime.JSX.Element;
+
+type AccountTab = "profile" | "security" | "payments" | "notifications";
+interface AccountTabConfig {
+    id: AccountTab;
+    label: string;
+    icon: LucideIcon;
+}
+declare const accountTabs: AccountTabConfig[];
+interface AccountSettingsShellProps {
+    /** Currently active tab */
+    activeTab?: AccountTab;
+    /** Callback when tab changes */
+    onTabChange?: (tab: AccountTab) => void;
+    /** Main content - renders based on active tab */
+    children: React.ReactNode;
+    /** Page title */
+    pageTitle?: string;
+}
+/**
+ * Canvas Design System - Account Settings Shell
+ *
+ * A layout for account/settings pages with:
+ * - Fixed header with logo (no sidebar)
+ * - Page title section with bottom border
+ * - Two-column layout: sidebar navigation (320px) + content area
+ * - Mobile responsive: sidebar stacks above content
+ *
+ * @example
+ * ```tsx
+ * <AccountSettingsShell
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * >
+ *   {activeTab === "profile" && <ProfileContent />}
+ *   {activeTab === "security" && <SecurityContent />}
+ * </AccountSettingsShell>
+ * ```
+ */
+declare function AccountSettingsShell({ activeTab: controlledActiveTab, onTabChange, children, pageTitle, }: AccountSettingsShellProps): react_jsx_runtime.JSX.Element;
+
+type ProjectContextTab = "scope" | "personas" | "screens" | "prompts";
+interface ProjectContextShellProps {
+    children: ReactNode;
+    activeTab: ProjectContextTab;
+    onTabChange: (tab: ProjectContextTab) => void;
+}
+declare function ProjectContextShell({ children, activeTab, onTabChange, }: ProjectContextShellProps): react_jsx_runtime.JSX.Element;
+
+interface ChatBubbleMessage {
+    id: string;
+    content: string;
+    timestamp: string;
+    isSent: boolean;
+    senderName?: string;
+    senderAvatar?: string;
+}
+interface ChatBubbleProps {
+    message: ChatBubbleMessage;
+}
+declare function ChatBubble({ message }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
+interface ChatDateSeparatorProps {
+    date: string;
+}
+declare function ChatDateSeparator({ date }: ChatDateSeparatorProps): react_jsx_runtime.JSX.Element;
+interface AttachmentPill {
+    id: string;
+    name: string;
+    type: "image" | "file";
+    url?: string;
+}
+interface MessengerInputProps {
+    attachments?: AttachmentPill[];
+    onRemoveAttachment?: (id: string) => void;
+    onSend?: () => void;
+}
+declare function MessengerInput({ attachments, onRemoveAttachment, onSend, }: MessengerInputProps): react_jsx_runtime.JSX.Element;
+declare const ChatInput: typeof MessengerInput;
+interface ChatMessageListProps {
+    messages?: ChatBubbleMessage[];
+    className?: string;
+}
+declare function ChatMessageList({ messages, className }: ChatMessageListProps): react_jsx_runtime.JSX.Element;
+
+interface MessengerSidebarProps {
+    selectedThreadId?: string;
+    onSelectThread?: (threadId: string) => void;
+    className?: string;
+}
+declare function MessengerSidebar({ selectedThreadId, onSelectThread, className, }: MessengerSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface ChatThread {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    preview: string;
+    unreadCount?: number;
+}
+interface ChatMessageData {
+    id: string;
+    senderName: string;
+    senderAvatar?: string;
+    content: string;
+    timestamp: string;
+}
+interface BottomInputChatWidgetProps {
+    variant?: "threads" | "conversation";
+    title?: string;
+    threads?: ChatThread[];
+    messages?: ChatMessageData[];
+    conversationName?: string;
+    onThreadClick?: (threadId: string) => void;
+    onBackClick?: () => void;
+    onSend?: (message: string) => void;
+    className?: string;
+}
+declare function BottomInputChatWidget({ variant, title, threads, messages, conversationName, onThreadClick, onBackClick, onSend, className, }: BottomInputChatWidgetProps): react_jsx_runtime.JSX.Element;
+
+interface ContentDropzoneProps {
+    /** Height of the dropzone (only applies when empty) */
+    height?: string;
+    /** Additional class names */
+    className?: string;
+    /** Content elements */
+    children?: ReactNode;
+}
+/**
+ * Canvas Design System - Content Dropzone
+ *
+ * A placeholder component representing where content blocks would be inserted.
+ * When empty, shows a dashed border placeholder.
+ * When children are added, becomes a flex column with 40px gap spacing.
+ */
+declare function ContentDropzone({ height, className, children, }: ContentDropzoneProps): react_jsx_runtime.JSX.Element;
+
+interface FlairBannerProps {
+    /** Large title text */
+    title?: string;
+    /** Additional class names */
+    className?: string;
+    /** Optional background image URL */
+    backgroundImage?: string;
+    /** Opacity of the flair color overlay when using background image (0-1, default 0.7) */
+    overlayOpacity?: number;
+}
+/**
+ * Canvas Design System - Flair Banner Component
+ *
+ * A hero banner with centered title. Supports solid flair color background
+ * or an image background with a semi-transparent flair color overlay.
+ * Typically used at the top of standard pages below the header.
+ *
+ * @example
+ * ```tsx
+ * // Solid color background (default)
+ * <FlairBanner title="Large title" />
+ *
+ * // Image background with flair overlay
+ * <FlairBanner
+ *   title="Large title"
+ *   backgroundImage="/brand-assets/bg.jpg"
+ *   overlayOpacity={0.6}
+ * />
+ * ```
+ */
+declare function FlairBanner({ title, className, backgroundImage, overlayOpacity, }: FlairBannerProps): react_jsx_runtime.JSX.Element;
+
+interface GradientBannerProps {
+    /** Height of the banner */
+    height?: string;
+    /** Additional class names */
+    className?: string;
+    /** Children to render inside the banner */
+    children?: React.ReactNode;
+}
+/**
+ * Canvas Design System - Gradient Banner Component
+ *
+ * A dynamic gradient banner that generates analogous colors
+ * based on the primary theme color. Updates live when the
+ * primary color changes.
+ */
+declare function GradientBanner({ height, className, children, }: GradientBannerProps): react_jsx_runtime.JSX.Element;
+
+interface LoginBrandingPanelProps {
+    /** Background image URL */
+    backgroundImage?: string;
+    /** Title text */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Opacity of the flair color overlay (0-1, default 0.7) */
+    overlayOpacity?: number;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Login Branding Panel Component
+ *
+ * A right-side branding panel for login/signup pages featuring:
+ * - Full-height background image with semi-transparent flair color overlay
+ * - Title and description text at the bottom
+ *
+ * The overlay uses the flair background CSS variable for live theming.
+ */
+declare function LoginBrandingPanel({ backgroundImage, title, description, overlayOpacity, className, }: LoginBrandingPanelProps): react_jsx_runtime.JSX.Element;
+
+interface PageHeaderSectionProps {
+    /** Page title */
+    title?: string;
+    /** Page description */
+    description?: string;
+    /** Array of tab items */
+    tabs?: LineTab[];
+    /** ID of the currently active tab */
+    activeTab?: string;
+    /** Callback when a tab is clicked */
+    onTabChange?: (tabId: string) => void;
+    /** Whether to show the tabs */
+    showTabs?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Page Header Section Component
+ *
+ * A section combining page title, description, and line tabs.
+ * Centered with max-width constraint.
+ *
+ * @example
+ * ```tsx
+ * <PageHeaderSection
+ *   title="Page title"
+ *   description="Description"
+ *   tabs={[
+ *     { id: "tab1", label: "Tab 1" },
+ *     { id: "tab2", label: "Tab 2" },
+ *   ]}
+ * />
+ * ```
+ */
+declare function PageHeaderSection({ title, description, tabs, activeTab, onTabChange, showTabs, className, }: PageHeaderSectionProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    icon: string;
+    title: string;
+    description?: string;
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface MenuSectionProps {
+    /** Array of menu items */
+    items: Array<{
+        id: string;
+        label: string;
+        children?: React.ReactNode;
+        defaultExpanded?: boolean;
+    }>;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Menu Section Component
+ *
+ * A group of expandable menu items with border separators.
+ *
+ * @example
+ * ```tsx
+ * <MenuSection
+ *   items={[
+ *     { id: "1", label: "Menu tab" },
+ *     { id: "2", label: "Another menu tab" },
+ *   ]}
+ * />
+ * ```
+ */
+declare function MenuSection({ items, className, }: MenuSectionProps): react_jsx_runtime.JSX.Element;
+
+type TabIconType = "briefcase" | "star" | "user";
+interface PillTab {
+    id: string;
+    label: string;
+    icon?: TabIconType;
+}
+interface PillTabsProps {
+    tabs: PillTab[];
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+    className?: string;
+}
+/**
+ * Canvas Design System - Pill Tabs Component
+ *
+ * A horizontal tab navigation with pill-shaped tabs.
+ * Each tab can have an optional icon.
+ */
+declare function PillTabs({ tabs, activeTab, onTabChange, className, }: PillTabsProps): react_jsx_runtime.JSX.Element;
+
+interface SearchBarProps {
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Current search value */
+    value?: string;
+    /** Callback when the input value changes */
+    onChange?: (value: string) => void;
+    /** Callback when search is triggered (button click or Enter key) */
+    onSearch?: () => void;
+    /** Search button label */
+    buttonLabel?: string;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Search Bar Component
+ *
+ * A search input with a search icon on the left and a conditional search button.
+ * The button appears only when the input has content.
+ * Uses standard input sizing variables for consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <SearchBar
+ *   placeholder="Search"
+ *   value={searchValue}
+ *   onChange={setSearchValue}
+ *   onSearch={handleSearch}
+ * />
+ * ```
+ */
+declare function SearchBar({ placeholder, value, onChange, onSearch, buttonLabel, className, }: SearchBarProps): react_jsx_runtime.JSX.Element;
+
+interface SearchSidebarState {
+    specials: string[];
+    languages: string[];
+    priceMin: string;
+    priceMax: string;
+    starRating: string;
+    distance: number[];
+    membershipDeals: boolean;
+}
+interface SearchSidebarProps {
+    className?: string;
+    state: SearchSidebarState;
+    onStateChange: (state: SearchSidebarState) => void;
+}
+declare function SearchSidebar({ className, state, onStateChange, }: SearchSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface TableColumn {
+    id: string;
+    label: string;
+    /** Width class or style for the column */
+    width?: string;
+}
+interface TableRow {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    email: string;
+    title: string;
+    role: string;
+}
+interface SortOption$b {
+    id: string;
+    label: string;
+}
+interface FilterOption$b {
+    id: string;
+    label: string;
+}
+interface StandardDataTableProps {
+    /** Table title */
+    title?: string;
+    /** Number of results to display */
+    resultCount?: number;
+    /** Custom result count text (overrides default "{count} results") */
+    resultCountText?: string;
+    /** Column definitions */
+    columns?: TableColumn[];
+    /** Table data rows */
+    data?: TableRow[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$b[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$b[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Callback when add/action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when row action is clicked */
+    onRowAction?: (action: string, row: TableRow) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Standard Data Table Block
+ *
+ * A configurable data table with header section including title,
+ * sort/filter dropdowns, and action button. Displays tabular data
+ * with avatar support in the name column.
+ *
+ * @example
+ * ```tsx
+ * <StandardDataTable
+ *   title="Teammates"
+ *   data={[
+ *     { id: "1", name: "John", email: "john@example.com", title: "Engineer", role: "Admin" }
+ *   ]}
+ *   onAddNew={() => console.log("Add new")}
+ * />
+ * ```
+ */
+declare function StandardDataTable({ title, resultCount, resultCountText, columns, data, sortOptions, filterOptions, actionButtonText, onAddNew, onSort, onFilter, onRowAction, className, }: StandardDataTableProps): react_jsx_runtime.JSX.Element;
+
+type FixedColumnTableStatus = "pending" | "paid" | "overdue";
+interface FixedColumnTableRow {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    amount: string;
+    status: FixedColumnTableStatus;
+    logoUrl?: string;
+    company: string;
+    dateSent: string;
+}
+interface SortOption$a {
+    id: string;
+    label: string;
+}
+interface FilterOption$a {
+    id: string;
+    label: string;
+}
+interface FixedColumnDataTableProps {
+    /** Table title */
+    title?: string;
+    /** Number of results to display */
+    resultCount?: number;
+    /** Custom result count text (overrides default "{count} results") */
+    resultCountText?: string;
+    /** Table data rows */
+    data?: FixedColumnTableRow[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$a[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$a[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Callback when add/action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when row action is clicked */
+    onRowAction?: (action: string, row: FixedColumnTableRow) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Fixed Column Data Table Block
+ *
+ * A data table with a fixed first column (Name with avatar) that stays
+ * visible during horizontal scrolling. Ideal for invoice-style tables
+ * with many columns that need horizontal scrolling on smaller screens.
+ *
+ * @example
+ * ```tsx
+ * <FixedColumnDataTable
+ *   title="Invoices"
+ *   data={[
+ *     { id: "1", name: "John", amount: "$1,000", status: "paid", company: "Acme", dateSent: "1/1/2024" }
+ *   ]}
+ *   onAddNew={() => console.log("Add new")}
+ * />
+ * ```
+ */
+declare function FixedColumnDataTable({ title, resultCount, resultCountText, data, sortOptions, filterOptions, actionButtonText, onAddNew, onSort, onFilter, onRowAction, className, }: FixedColumnDataTableProps): react_jsx_runtime.JSX.Element;
+
+interface ChildRow {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    email: string;
+    phone: string;
+}
+interface ParentRow {
+    id: string;
+    location: string;
+    ftes: number;
+    contractors: number;
+    hrContact: {
+        name: string;
+        phone: string;
+    };
+    children: ChildRow[];
+}
+interface SortOption$9 {
+    id: string;
+    label: string;
+}
+interface FilterOption$9 {
+    id: string;
+    label: string;
+}
+interface NestedDataTableProps {
+    /** Table title */
+    title?: string;
+    /** Number of results to display */
+    resultCount?: number;
+    /** Custom result count text (overrides default "{count} results") */
+    resultCountText?: string;
+    /** Table data rows */
+    data?: ParentRow[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$9[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$9[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Callback when add/action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when parent row action is clicked */
+    onRowAction?: (action: string, row: ParentRow) => void;
+    /** Callback when child row action is clicked */
+    onChildAction?: (action: string, child: ChildRow, parent: ParentRow) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Nested Data Table Block
+ *
+ * An expandable data table with parent rows that reveal nested child tables.
+ * Ideal for displaying hierarchical data like locations with employees,
+ * departments with team members, or categories with items.
+ *
+ * @example
+ * ```tsx
+ * <NestedDataTable
+ *   title="FTEs & Contractors by Location"
+ *   data={locationData}
+ *   onAddNew={() => console.log("Add new")}
+ * />
+ * ```
+ */
+declare function NestedDataTable({ title, resultCount, resultCountText, data, sortOptions, filterOptions, actionButtonText, onAddNew, onSort, onFilter, onRowAction, onChildAction, className, }: NestedDataTableProps): react_jsx_runtime.JSX.Element;
+
+interface ReviewItem {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    rating: number;
+    date: string;
+    reviewText: string;
+}
+interface SortOption$8 {
+    id: string;
+    label: string;
+}
+interface FilterOption$8 {
+    id: string;
+    label: string;
+}
+interface ReviewsTableProps {
+    /** Table title */
+    title?: string;
+    /** Number of reviews to display in subtitle */
+    reviewCount?: number;
+    /** Custom review count text (overrides default "{count} customer reviews") */
+    reviewCountText?: string;
+    /** Review data */
+    reviews?: ReviewItem[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$8[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$8[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Callback when add/action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when "More" is clicked on a review */
+    onReadMore?: (review: ReviewItem) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Reviews Table Block
+ *
+ * A configurable reviews listing with header section including title,
+ * sort/filter dropdowns, and action button. Displays review items
+ * with avatar, star rating, date, and expandable text.
+ *
+ * @example
+ * ```tsx
+ * <ReviewsTable
+ *   title="Reviews"
+ *   reviews={[
+ *     { id: "1", name: "John Doe", rating: 5, date: "Jul 22, 2024", reviewText: "Great experience!" }
+ *   ]}
+ *   onAddNew={() => console.log("Add new")}
+ * />
+ * ```
+ */
+declare function ReviewsTable({ title, reviewCount, reviewCountText, reviews, sortOptions, filterOptions, actionButtonText, onAddNew, onSort, onFilter, onReadMore, className, }: ReviewsTableProps): react_jsx_runtime.JSX.Element;
+
+interface PostAuthor$2 {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
+interface PostComment {
+    id: string;
+    author: PostAuthor$2;
+    content: string;
+    timestamp: string;
+    likes: number;
+    isLiked?: boolean;
+    replies?: PostComment[];
+}
+interface Post {
+    id: string;
+    author: PostAuthor$2;
+    date: string;
+    title: string;
+    content: string;
+    imageUrl?: string;
+    upvotes: number;
+    isUpvoted?: boolean;
+    comments?: PostComment[];
+}
+interface SortOption$7 {
+    id: string;
+    label: string;
+}
+interface FilterOption$7 {
+    id: string;
+    label: string;
+}
+interface UpvotingPostsTableProps {
+    /** Table title */
+    title?: string;
+    /** Subtitle text */
+    subtitle?: string;
+    /** Posts data */
+    posts?: Post[];
+    /** Current user for comment input avatars */
+    currentUser?: PostAuthor$2;
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$7[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$7[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Callback when add/action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when upvote is clicked */
+    onUpvote?: (postId: string) => void;
+    /** Callback when comment is submitted */
+    onComment?: (postId: string, content: string) => void;
+    /** Callback when reply is submitted */
+    onReply?: (postId: string, commentId: string, content: string) => void;
+    /** Callback when like is clicked */
+    onLike?: (postId: string, commentId: string) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Upvoting Posts Table Block
+ *
+ * A social feed component with upvoting, comments, and nested replies.
+ * Features header with sort/filter controls and action button.
+ *
+ * @example
+ * ```tsx
+ * <UpvotingPostsTable
+ *   title="My posts"
+ *   subtitle="In the past year"
+ *   posts={[...]}
+ *   onUpvote={(postId) => console.log("Upvoted", postId)}
+ * />
+ * ```
+ */
+declare function UpvotingPostsTable({ title, subtitle, posts, currentUser, sortOptions, filterOptions, actionButtonText, onAddNew, onSort, onFilter, onUpvote, onComment, onReply, onLike, className, }: UpvotingPostsTableProps): react_jsx_runtime.JSX.Element;
+
+interface CommentAuthor {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
+interface Comment {
+    id: string;
+    author: CommentAuthor;
+    content: string;
+    timestamp: string;
+    likes: number;
+    isLiked?: boolean;
+    replies?: Comment[];
+}
+interface NestedCommentsTableProps {
+    /** Section title */
+    title?: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** Comments data */
+    comments?: Comment[];
+    /** Current user for comment input avatars */
+    currentUser?: CommentAuthor;
+    /** Callback when main comment is submitted */
+    onComment?: (content: string) => void;
+    /** Callback when reply is submitted */
+    onReply?: (commentId: string, content: string) => void;
+    /** Callback when like is clicked */
+    onLike?: (commentId: string) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Nested Comments Table Block
+ *
+ * A threaded discussion component with nested comments, reply/like actions,
+ * and collapsible threads. Perfect for discussion sections, comment threads,
+ * or messaging interfaces.
+ *
+ * @example
+ * ```tsx
+ * <NestedCommentsTable
+ *   title="My discussions"
+ *   subtitle="In the past year"
+ *   comments={[...]}
+ *   onComment={(content) => console.log("Comment:", content)}
+ * />
+ * ```
+ */
+declare function NestedCommentsTable({ title, subtitle, comments, currentUser, onComment, onReply, onLike, className, }: NestedCommentsTableProps): react_jsx_runtime.JSX.Element;
+
+interface FAQItem {
+    id: string;
+    question: string;
+    answer: string;
+}
+interface FaqsTableProps {
+    /** Table title */
+    title?: string;
+    /** FAQ items to display */
+    items?: FAQItem[];
+    /** ID of the item that should be expanded by default */
+    defaultExpandedId?: string;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - FAQs Table Block
+ *
+ * An expandable FAQ list with plus/minus toggle icons.
+ * Displays one item expanded at a time (accordion behavior).
+ *
+ * @example
+ * ```tsx
+ * <FaqsTable
+ *   title="Common questions"
+ *   items={[
+ *     { id: "1", question: "What is Canvas?", answer: "..." }
+ *   ]}
+ * />
+ * ```
+ */
+declare function FaqsTable({ title, items, defaultExpandedId, className, }: FaqsTableProps): react_jsx_runtime.JSX.Element;
+
+interface ProfileStat {
+    value: string;
+    label: string;
+}
+interface ProfileTag {
+    label: string;
+}
+interface SocialLink {
+    type: "website" | "facebook" | "twitter" | "linkedin" | "instagram";
+    label: string;
+    href?: string;
+}
+interface ProfileCardProps {
+    /** Profile avatar image URL */
+    avatarUrl?: string;
+    /** Avatar fallback initials */
+    avatarFallback?: string;
+    /** Whether to show online status indicator */
+    showStatus?: boolean;
+    /** User's display name */
+    name: string;
+    /** User's username (with @) */
+    username: string;
+    /** Star rating (0-5) */
+    rating?: number;
+    /** Location text */
+    location?: string;
+    /** Join date text */
+    joinDate?: string;
+    /** Stats to display */
+    stats?: ProfileStat[];
+    /** Bio text */
+    bio?: string;
+    /** Tags/skills */
+    tags?: ProfileTag[];
+    /** Social links */
+    socialLinks?: SocialLink[];
+    /** Additional class names */
+    className?: string;
+    /** Show menu button */
+    showMenu?: boolean;
+    /** Menu click handler */
+    onMenuClick?: () => void;
+}
+/**
+ * Canvas Design System - Profile Card Component
+ *
+ * A centered profile card with avatar overlapping banner, stats, tags, and social links.
+ * Uses CSS variables for theming to support live preview.
+ */
+declare function ProfileCard({ avatarUrl, avatarFallback, showStatus, name, username, rating, location, joinDate, stats, bio, tags, socialLinks, className, showMenu, onMenuClick, }: ProfileCardProps): react_jsx_runtime.JSX.Element;
+
+interface InfoRow {
+    icon: "location" | "education" | "sessions" | "earnings";
+    label: string;
+    value: string;
+}
+interface SidebarProfileCardProps {
+    /** Profile avatar image URL */
+    avatarUrl?: string;
+    /** Avatar fallback initials */
+    avatarFallback?: string;
+    /** Whether to show online status indicator */
+    showStatus?: boolean;
+    /** User's display name */
+    name: string;
+    /** User's role/title */
+    role?: string;
+    /** Star rating value */
+    rating?: number;
+    /** Number of reviews */
+    reviewCount?: string;
+    /** Certification text */
+    certification?: string;
+    /** Info rows (location, education, sessions, earnings) */
+    infoRows?: InfoRow[];
+    /** Contact button click handler */
+    onContactClick?: () => void;
+    /** Hire button click handler */
+    onHireClick?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Sidebar Profile Card Component
+ *
+ * A profile card designed for sidebar placement with avatar,
+ * name, rating, action buttons, info rows, and social icons.
+ */
+declare function SidebarProfileCard({ avatarUrl, avatarFallback, showStatus, name, role, rating, reviewCount, certification, infoRows, onContactClick, onHireClick, className, }: SidebarProfileCardProps): react_jsx_runtime.JSX.Element;
+
+interface Stat {
+    value: string;
+    label: string;
+}
+interface StatsCardProps {
+    stats: Stat[];
+    className?: string;
+}
+declare function StatsCard({ stats, className }: StatsCardProps): react_jsx_runtime.JSX.Element;
+interface PortfolioImage {
+    src: string;
+    alt?: string;
+}
+interface PortfolioCardProps {
+    title?: string;
+    viewAllHref?: string;
+    images: PortfolioImage[];
+    className?: string;
+}
+declare function PortfolioCard({ title, viewAllHref, images, className, }: PortfolioCardProps): react_jsx_runtime.JSX.Element;
+interface DescriptionCardProps {
+    title?: string;
+    content: string;
+    className?: string;
+}
+declare function DescriptionCard({ title, content, className, }: DescriptionCardProps): react_jsx_runtime.JSX.Element;
+interface Skill {
+    label: string;
+}
+interface SkillsCardProps {
+    title?: string;
+    skills: Skill[];
+    className?: string;
+}
+declare function SkillsCard({ title, skills, className, }: SkillsCardProps): react_jsx_runtime.JSX.Element;
+interface Badge {
+    icon: "zap" | "star" | "check";
+    title: string;
+    description: string;
+    iconColor?: string;
+}
+interface BadgesCardProps {
+    badges: Badge[];
+    className?: string;
+}
+declare function BadgesCard({ badges, className }: BadgesCardProps): react_jsx_runtime.JSX.Element;
+
+interface ProfileImageUploaderProps {
+    /** Current image URL */
+    imageUrl?: string;
+    /** Callback when image is selected */
+    onImageChange?: (file: File) => void;
+    /** Size of the uploader */
+    size?: number;
+    /** Class name for customization */
+    className?: string;
+}
+/**
+ * Profile Image Uploader
+ *
+ * A circular avatar with upload functionality.
+ * Shows a placeholder user icon when no image is set.
+ * Hover state shows camera overlay for upload interaction.
+ */
+declare function ProfileImageUploader({ imageUrl, onImageChange, size, className, }: ProfileImageUploaderProps): react_jsx_runtime.JSX.Element;
+
+interface Participant {
+    id: string;
+    name: string;
+    role: string;
+    avatarUrl?: string;
+}
+interface ParticipantListProps {
+    /** Array of participants */
+    participants: Participant[];
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Participant List Component
+ *
+ * Displays a list of video chat participants with avatars.
+ *
+ * @example
+ * ```tsx
+ * <ParticipantList
+ *   participants={[
+ *     { id: "1", name: "John Doe", role: "Developer", avatarUrl: "/avatar.jpg" },
+ *   ]}
+ * />
+ * ```
+ */
+declare function ParticipantList({ participants, className, }: ParticipantListProps): react_jsx_runtime.JSX.Element;
+
+interface Tag {
+    id: string;
+    label: string;
+}
+interface ListItem$1 {
+    id: string;
+    title: string;
+    author: string;
+    date: string;
+    description: string;
+    imageUrl: string;
+    tags?: Tag[];
+}
+interface SortOption$6 {
+    id: string;
+    label: string;
+}
+interface FilterOption$6 {
+    id: string;
+    label: string;
+}
+interface StandardListWithImageProps {
+    /** Block title */
+    title?: string;
+    /** Block subtitle/description */
+    subtitle?: string;
+    /** List items to display */
+    items?: ListItem$1[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$6[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$6[];
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when an item is clicked */
+    onItemClick?: (item: ListItem$1) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Standard List with Image Block
+ *
+ * A configurable list block with image thumbnails, commonly used for
+ * blog posts, articles, or any content with featured images.
+ * Includes header section with title, subtitle, and sort/filter controls.
+ *
+ * @example
+ * ```tsx
+ * <StandardListWithImage
+ *   title="Blog"
+ *   subtitle="Read our latest articles"
+ *   items={blogPosts}
+ *   onItemClick={(item) => console.log("Clicked:", item.title)}
+ * />
+ * ```
+ */
+declare function StandardListWithImage({ title, subtitle, items, sortOptions, filterOptions, onSort, onFilter, onItemClick, className, }: StandardListWithImageProps): react_jsx_runtime.JSX.Element;
+
+interface IconLabelConfig {
+    id: string;
+    icon: "heart" | "users" | "zap" | "map-pin" | "briefcase";
+    label: string;
+}
+interface ListItem {
+    id: string;
+    imageUrl: string;
+    title: string;
+    price: string;
+    priceUnit?: string;
+    rating: number;
+    reviewCount: number;
+    location: string;
+    description: string;
+    labels: IconLabelConfig[];
+    tag?: string;
+    isFavorite?: boolean;
+}
+interface SortOption$5 {
+    id: string;
+    label: string;
+}
+interface FilterOption$5 {
+    id: string;
+    label: string;
+}
+interface LargeImageLabelsListProps {
+    /** Section title */
+    title?: string;
+    /** Number of results (defaults to items.length) */
+    resultCount?: number;
+    /** Custom result count text (overrides default "{count} results") */
+    resultCountText?: string;
+    /** List items to display */
+    items?: ListItem[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$5[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$5[];
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when favorite button is clicked */
+    onFavorite?: (item: ListItem) => void;
+    /** Callback when item is clicked */
+    onItemClick?: (item: ListItem) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Large Image Labels List Block
+ *
+ * A property-style listing component with large images, ratings, prices,
+ * and icon labels. Includes a header section with title, result count,
+ * and sort/filter controls.
+ *
+ * @example
+ * ```tsx
+ * <LargeImageLabelsList
+ *   title="Properties"
+ *   items={[
+ *     {
+ *       id: "1",
+ *       imageUrl: "https://example.com/image.jpg",
+ *       title: "Beach Apartment",
+ *       price: "$140",
+ *       priceUnit: "/night",
+ *       rating: 5,
+ *       reviewCount: 210,
+ *       location: "Honolulu, HI",
+ *       description: "Beautiful beachfront property...",
+ *       labels: [{ id: "1", icon: "heart", label: "Popular" }],
+ *       tag: "Popular",
+ *     }
+ *   ]}
+ *   onFavorite={(item) => console.log("Favorited:", item.title)}
+ * />
+ * ```
+ */
+declare function LargeImageLabelsList({ title, resultCount, resultCountText, items, sortOptions, filterOptions, onSort, onFilter, onFavorite, onItemClick, className, }: LargeImageLabelsListProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressListItem {
+    id: string;
+    title: string;
+    description: string;
+    /** Progress percentage (0-100) */
+    progress: number;
+}
+interface SortOption$4 {
+    id: string;
+    label: string;
+}
+interface FilterOption$4 {
+    id: string;
+    label: string;
+}
+interface CircularProgressBarProps {
+    /** Progress percentage (0-100) */
+    progress: number;
+    /** Size of the progress bar in pixels */
+    size?: number;
+    /** Stroke width of the progress arc */
+    strokeWidth?: number;
+    /** Additional class names */
+    className?: string;
+}
+interface CircularProgressBarListProps {
+    /** List title */
+    title?: string;
+    /** Number of results to display */
+    resultCount?: number;
+    /** Custom result count text (overrides default "{count} results") */
+    resultCountText?: string;
+    /** List items data */
+    items?: ProgressListItem[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$4[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$4[];
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when item action is clicked */
+    onItemAction?: (action: string, item: ProgressListItem) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Circular Progress Bar
+ *
+ * An SVG-based circular progress indicator that displays a percentage.
+ * Uses CSS variables for theming support.
+ */
+declare function CircularProgressBar({ progress, size, strokeWidth, className, }: CircularProgressBarProps): react_jsx_runtime.JSX.Element;
+/**
+ * Canvas Design System - Circular Progress Bar List Block
+ *
+ * A list block displaying items with circular progress indicators.
+ * Features a header section with title, result count, and sort/filter controls.
+ * Each item shows a progress bar, title, description, and action menu.
+ *
+ * @example
+ * ```tsx
+ * <CircularProgressBarList
+ *   title="Courses"
+ *   items={[
+ *     { id: "1", title: "Design 101", description: "Learn design basics", progress: 50 }
+ *   ]}
+ * />
+ * ```
+ */
+declare function CircularProgressBarList({ title, resultCount, resultCountText, items, sortOptions, filterOptions, onSort, onFilter, onItemAction, className, }: CircularProgressBarListProps): react_jsx_runtime.JSX.Element;
+
+interface ActivityAuthor {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
+interface ActivityAttachment {
+    id: string;
+    name: string;
+    size: string;
+    type?: "document" | "image" | "other";
+}
+interface BaseActivityItem {
+    id: string;
+    author: ActivityAuthor;
+    timestamp: string;
+}
+interface StatusChangeActivity extends BaseActivityItem {
+    type: "status_change";
+    action: "completed" | "updated" | "started" | "archived";
+    projectName: string;
+}
+interface CommentActivity extends BaseActivityItem {
+    type: "comment";
+    projectName: string;
+    content: string;
+    likes: number;
+    replies: number;
+    isLiked?: boolean;
+}
+interface AttachmentActivity extends BaseActivityItem {
+    type: "attachment";
+    action: "completed" | "uploaded" | "shared";
+    projectName: string;
+    attachment: ActivityAttachment;
+}
+type ActivityItem = StatusChangeActivity | CommentActivity | AttachmentActivity;
+interface ActivityFeedProps {
+    /** Section title */
+    title?: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** Activity items to display */
+    items?: ActivityItem[];
+    /** Callback when like button is clicked */
+    onLike?: (itemId: string) => void;
+    /** Callback when reply button is clicked */
+    onReply?: (itemId: string) => void;
+    /** Callback when attachment is clicked */
+    onAttachmentClick?: (itemId: string, attachmentId: string) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Activity Feed Block
+ *
+ * A timeline-style activity feed showing user actions, comments, and file
+ * attachments with connecting lines. Useful for project updates, notifications,
+ * and collaboration views.
+ *
+ * @example
+ * ```tsx
+ * <ActivityFeed
+ *   title="Project status"
+ *   subtitle="Last updated today"
+ *   items={activityItems}
+ *   onLike={(id) => console.log("Liked", id)}
+ * />
+ * ```
+ */
+declare function ActivityFeed({ title, subtitle, items, onLike, onReply, onAttachmentClick, className, }: ActivityFeedProps): react_jsx_runtime.JSX.Element;
+
+interface PostAuthor$1 {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
+interface LinkPreview {
+    url: string;
+    domain: string;
+    title: string;
+    description?: string;
+    imageUrl?: string;
+}
+interface VideoMedia {
+    thumbnailUrl: string;
+    videoUrl?: string;
+}
+interface RepostContent {
+    author: PostAuthor$1;
+    date: string;
+    content: string;
+    images?: string[];
+}
+interface SocialFeedPost {
+    id: string;
+    author: PostAuthor$1;
+    date: string;
+    content: string;
+    /** Image URLs for the post */
+    images?: string[];
+    /** Video media */
+    video?: VideoMedia;
+    /** Link preview card */
+    linkPreview?: LinkPreview;
+    /** Reposted/quoted content */
+    repost?: RepostContent;
+    likesCount: number;
+    repliesCount: number;
+    isLiked?: boolean;
+    /** Nested replies */
+    replies?: SocialFeedPost[];
+    /** Whether this is a reply (for indentation) */
+    isReply?: boolean;
+}
+interface SocialFeedProps {
+    /** Section title */
+    title?: string;
+    /** Posts data */
+    posts?: SocialFeedPost[];
+    /** Current user for composer */
+    currentUser?: PostAuthor$1;
+    /** Placeholder text for composer */
+    composerPlaceholder?: string;
+    /** Image preview in composer */
+    composerImagePreview?: string;
+    /** Callback when post is submitted */
+    onPost?: (content: string) => void;
+    /** Callback when like is clicked */
+    onLike?: (postId: string) => void;
+    /** Callback when comment is clicked */
+    onComment?: (postId: string) => void;
+    /** Callback when repost is clicked */
+    onRepost?: (postId: string) => void;
+    /** Callback when share is clicked */
+    onShare?: (postId: string) => void;
+    /** Callback when menu is clicked */
+    onMenuClick?: (postId: string) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Social Feed Block
+ *
+ * A social media-style feed component with post composer, posts with various
+ * content types (text, images, video, reposts, link cards), social interactions,
+ * and threaded replies.
+ *
+ * @example
+ * ```tsx
+ * <SocialFeed
+ *   title="Social Feed"
+ *   posts={[...]}
+ *   onLike={(postId) => console.log("Liked", postId)}
+ *   onPost={(content) => console.log("Posted", content)}
+ * />
+ * ```
+ */
+declare function SocialFeed({ title, posts, currentUser, composerPlaceholder, composerImagePreview, onPost, onLike, onComment, onRepost, onShare, onMenuClick, className, }: SocialFeedProps): react_jsx_runtime.JSX.Element;
+
+interface PostAuthor {
+    id: string;
+    name: string;
+    username?: string;
+    avatarUrl?: string;
+}
+interface ImagePost {
+    id: string;
+    author: PostAuthor;
+    date: string;
+    imageUrl: string;
+    caption?: string;
+    likesCount: number;
+    likedByText?: string;
+    commentsCount: number;
+    isLiked?: boolean;
+    isBookmarked?: boolean;
+    comments?: Comment[];
+}
+interface ImageFeedWithNestedCommentsProps {
+    /** Section title */
+    title?: string;
+    /** Section subtitle */
+    subtitle?: string;
+    /** Posts data */
+    posts?: ImagePost[];
+    /** Current user for comment avatars */
+    currentUser?: CommentAuthor;
+    /** Callback when post like is clicked */
+    onLike?: (postId: string) => void;
+    /** Callback when new comment is submitted */
+    onComment?: (postId: string, content: string) => void;
+    /** Callback when share is clicked */
+    onShare?: (postId: string) => void;
+    /** Callback when bookmark is clicked */
+    onBookmark?: (postId: string) => void;
+    /** Callback when reply is submitted */
+    onReply?: (postId: string, commentId: string, content: string) => void;
+    /** Callback when comment like is clicked */
+    onCommentLike?: (postId: string, commentId: string) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Image Feed with Nested Comments Block
+ *
+ * An Instagram-style image feed component with large images, social interactions
+ * (like/comment/share/bookmark), and nested comment threads. Uses NestedCommentsTable
+ * internally for the comments section.
+ *
+ * @example
+ * ```tsx
+ * <ImageFeedWithNestedComments
+ *   title="My posts"
+ *   subtitle="In the past year"
+ *   posts={[...]}
+ *   onLike={(postId) => console.log("Liked", postId)}
+ * />
+ * ```
+ */
+declare function ImageFeedWithNestedComments({ title, subtitle, posts, currentUser, onLike, onComment, onShare, onBookmark, onReply, onCommentLike, className, }: ImageFeedWithNestedCommentsProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressBarProps {
+    /** Progress value (0-100) */
+    progress?: number;
+    /** Total number of steps */
+    totalSteps?: number;
+    /** Current step (0-indexed) - alternative to progress */
+    currentStep?: number;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Canvas Design System - Progress Bar
+ *
+ * A horizontal progress indicator with:
+ * - 8px height
+ * - Pill-shaped (fully rounded)
+ * - Background: --canvas-border
+ * - Fill: --canvas-primary
+ *
+ * Can be controlled via either:
+ * - `progress` prop (0-100 percentage)
+ * - `currentStep` and `totalSteps` props (calculates percentage automatically)
+ *
+ * @example
+ * ```tsx
+ * // Using percentage
+ * <ProgressBar progress={33} />
+ *
+ * // Using steps
+ * <ProgressBar currentStep={1} totalSteps={3} />
+ * ```
+ */
+declare function ProgressBar({ progress, totalSteps, currentStep, className, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+interface VerticalStepTrackerProps {
+    /** Array of step objects with id, label, and optional description */
+    steps: Step[];
+    /** Current active step (0-indexed) */
+    currentStep: number;
+    /** Optional callback when a step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Optional section title (e.g., "REGISTRATION") */
+    title?: string;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Canvas Design System - Vertical Step Tracker
+ *
+ * A vertical step progress indicator with:
+ * - 24px circles with 8px white inner dot
+ * - Vertical connecting lines between steps
+ * - Active step: primary background + white dot + primary text
+ * - Inactive steps: border background + white dot + placeholder text
+ * - Optional section title (uppercase)
+ *
+ * @example
+ * ```tsx
+ * <VerticalStepTracker
+ *   steps={[
+ *     { id: "step1", label: "Step 1" },
+ *     { id: "step2", label: "Step 2" },
+ *   ]}
+ *   currentStep={0}
+ *   title="REGISTRATION"
+ * />
+ * ```
+ */
+declare function VerticalStepTracker({ steps, currentStep, onStepClick, title, className, }: VerticalStepTrackerProps): react_jsx_runtime.JSX.Element;
+/** Default steps for vertical tracker demo */
+declare const defaultVerticalSteps: Step[];
+
+interface VideoChatControlsProps {
+    /** Whether the video is currently on */
+    isVideoOn?: boolean;
+    /** Whether the mic is currently on */
+    isMicOn?: boolean;
+    /** Callback when video toggle is clicked */
+    onToggleVideo?: () => void;
+    /** Callback when mic toggle is clicked */
+    onToggleMic?: () => void;
+    /** Callback when cast button is clicked */
+    onCast?: () => void;
+    /** Callback when leave button is clicked */
+    onLeave?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Video Chat Controls Component
+ *
+ * Row of circular control buttons for video chat: Camera, Mic, Cast, Leave.
+ *
+ * @example
+ * ```tsx
+ * <VideoChatControls
+ *   isVideoOn={true}
+ *   isMicOn={true}
+ *   onToggleVideo={() => setVideoOn(!videoOn)}
+ *   onToggleMic={() => setMicOn(!micOn)}
+ *   onLeave={() => router.push('/')}
+ * />
+ * ```
+ */
+declare function VideoChatControls({ isVideoOn, isMicOn, onToggleVideo, onToggleMic, onCast, onLeave, className, }: VideoChatControlsProps): react_jsx_runtime.JSX.Element;
+
+interface VideoContentSectionProps {
+    /** Section title */
+    title: string;
+    /** Content (can be text or React nodes) */
+    children: ReactNode;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Video Content Section Component
+ *
+ * A reusable section with a title and flexible content area.
+ * Used for Overview, Notes, and similar text sections.
+ *
+ * @example
+ * ```tsx
+ * <VideoContentSection title="Overview">
+ *   <p>Lorem ipsum...</p>
+ * </VideoContentSection>
+ * ```
+ */
+declare function VideoContentSection({ title, children, className, }: VideoContentSectionProps): react_jsx_runtime.JSX.Element;
+
+interface VideoPlaylistItemData {
+    id: string;
+    title: string;
+    duration: string;
+    thumbnail?: string;
+}
+interface VideoPlaylistItemProps {
+    /** Item index (1-based for display) */
+    index: number;
+    /** Item data */
+    item: VideoPlaylistItemData;
+    /** Whether this item is currently active/playing */
+    isActive?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+}
+/**
+ * Individual lesson row in the playlist
+ */
+declare function VideoPlaylistItem({ index, item, isActive, onClick, }: VideoPlaylistItemProps): react_jsx_runtime.JSX.Element;
+interface VideoPlaylistCardProps {
+    /** Card title */
+    title?: string;
+    /** Playlist items */
+    items: VideoPlaylistItemData[];
+    /** Currently active item ID */
+    activeId?: string;
+    /** Callback when an item is clicked */
+    onItemClick?: (id: string) => void;
+    /** Whether the playlist starts collapsed (mobile only) */
+    defaultCollapsed?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Video Playlist Card Component
+ *
+ * A card container showing lesson list with collapsible behavior.
+ * Features shadow, border, and hover states.
+ *
+ * @example
+ * ```tsx
+ * <VideoPlaylistCard
+ *   title="Lessons in this course"
+ *   items={lessons}
+ *   activeId="lesson-2"
+ *   onItemClick={(id) => setActiveLesson(id)}
+ * />
+ * ```
+ */
+declare function VideoPlaylistCard({ title, items, activeId, onItemClick, defaultCollapsed, className, }: VideoPlaylistCardProps): react_jsx_runtime.JSX.Element;
+
+interface WebcamPreviewProps {
+    /** Additional class names */
+    className?: string;
+    /** Whether the video should be muted (default true for self-view) */
+    muted?: boolean;
+    /** Whether the video should be mirrored (default true for self-view) */
+    mirrored?: boolean;
+    /** Fallback content when camera is not available */
+    fallbackText?: string;
+}
+/**
+ * Canvas Design System - Webcam Preview Component
+ *
+ * Displays live webcam feed using the browser's MediaDevices API.
+ * Handles permission denied and unavailable camera gracefully.
+ *
+ * @example
+ * ```tsx
+ * <WebcamPreview className="w-full h-full rounded-[20px]" />
+ * ```
+ */
+declare function WebcamPreview({ className, muted, mirrored, fallbackText, }: WebcamPreviewProps): react_jsx_runtime.JSX.Element;
+
+interface YouTubePlayerProps {
+    /** YouTube video ID (e.g., "dQw4w9WgXcQ") */
+    videoId: string;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - YouTube Player Component
+ *
+ * A responsive YouTube video embed with 16:9 aspect ratio.
+ * Rounded corners are larger on desktop (20px) and smaller on mobile (8px).
+ *
+ * @example
+ * ```tsx
+ * <YouTubePlayer videoId="dQw4w9WgXcQ" />
+ * ```
+ */
+declare function YouTubePlayer({ videoId, className, }: YouTubePlayerProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsListRowProps {
+    /** Label for the setting */
+    label: string;
+    /** Value or description text */
+    value?: string;
+    /** Type of action on the right side */
+    actionType?: "edit" | "toggle" | "more" | "none";
+    /** For toggle: whether it's checked */
+    checked?: boolean;
+    /** For toggle: callback when changed */
+    onCheckedChange?: (checked: boolean) => void;
+    /** For edit/more: callback when clicked */
+    onActionClick?: () => void;
+    /** Whether this is the first row (has top border) */
+    isFirst?: boolean;
+    /** Whether this is the last row (no bottom border) */
+    isLast?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Settings List Row
+ *
+ * A reusable row for settings lists with:
+ * - Label on the left
+ * - Value/description in the middle
+ * - Action on the right (edit icon, toggle, or more menu)
+ */
+declare function SettingsListRow({ label, value, actionType, checked, onCheckedChange, onActionClick, isFirst, isLast, className, }: SettingsListRowProps): react_jsx_runtime.JSX.Element;
+
+interface CreditCardDisplayProps {
+    /** Card type (visa, mastercard, amex, etc.) */
+    cardType?: "visa" | "mastercard" | "amex" | "discover";
+    /** Last 4 digits of card number */
+    lastFourDigits?: string;
+    /** Cardholder name */
+    cardholderName?: string;
+    /** Expiry date (MM/YY format) */
+    expiryDate?: string;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Credit Card Display
+ *
+ * A visual credit card representation for payment settings.
+ * Shows card type, masked number, cardholder name, and expiry.
+ * Uses the flair background color with a subtle lighting gradient.
+ */
+declare function CreditCardDisplay({ cardType, lastFourDigits, cardholderName, expiryDate, className, }: CreditCardDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface CanvasItemData {
+    id: string;
+    componentType: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+interface CanvasItemProps {
+    item: CanvasItemData;
+    isSelected: boolean;
+    onSelect: (id: string) => void;
+    onDelete: (id: string) => void;
+    onDragStart: (id: string, startX: number, startY: number, itemX: number, itemY: number) => void;
+    scale: number;
+    children: React.ReactNode;
+}
+/**
+ * Canvas Item - Wrapper for components placed on the infinity canvas
+ *
+ * Handles:
+ * - Absolute positioning based on x, y coordinates
+ * - Selection state with visual border
+ * - Drag handle for repositioning
+ * - Delete button when selected
+ */
+declare function CanvasItem({ item, isSelected, onSelect, onDelete, onDragStart, scale, children, }: CanvasItemProps): react_jsx_runtime.JSX.Element;
+
+interface ComponentPaletteProps {
+    className?: string;
+}
+/**
+ * Component Palette - Sidebar with draggable components
+ *
+ * Features:
+ * - Organized by category (Page Templates, Blocks, Components)
+ * - Collapsible sections
+ * - Drag to add to canvas
+ */
+declare function ComponentPalette({ className }: ComponentPaletteProps): react_jsx_runtime.JSX.Element;
+
+interface ComponentOption {
+    id: string;
+    name: string;
+    category: string;
+    path: string;
+    description: string;
+}
+interface ComponentSearchProps {
+    selectedComponents: ComponentOption[];
+    onSelectionChange: (components: ComponentOption[]) => void;
+    className?: string;
+}
+declare function ComponentSearch({ selectedComponents, onSelectionChange, className, }: ComponentSearchProps): react_jsx_runtime.JSX.Element;
+
+interface CustomComponentHelperProps {
+    className?: string;
+}
+declare function CustomComponentHelper({ className }: CustomComponentHelperProps): react_jsx_runtime.JSX.Element;
+
+interface SlideshowTileItem {
+    id: string;
+    /** Array of image URLs for the slideshow */
+    images: string[];
+    /** User/creator info */
+    user: {
+        name: string;
+        avatarUrl?: string;
+        location: string;
+    };
+    /** Like/upvote count */
+    likes: number | string;
+    /** View count */
+    views: number | string;
+}
+interface SortOption$3 {
+    id: string;
+    label: string;
+}
+interface FilterOption$3 {
+    id: string;
+    label: string;
+}
+interface SlideshowGridTilesProps {
+    /** Block title */
+    title?: string;
+    /** Subtitle text (e.g., "Showing 20 designs") */
+    subtitle?: string;
+    /** Array of tile items */
+    items?: SlideshowTileItem[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$3[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$3[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Callback when action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when save button is clicked on a tile */
+    onSave?: (item: SlideshowTileItem) => void;
+    /** Callback when a tile is clicked */
+    onItemClick?: (item: SlideshowTileItem) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Slideshow Grid Tiles Block
+ *
+ * A 2-column grid of portfolio/slideshow tiles with hover states
+ * showing navigation arrows and save button. Each tile displays
+ * a large image, user info, and engagement stats.
+ *
+ * @example
+ * ```tsx
+ * <SlideshowGridTiles
+ *   title="Portfolios"
+ *   subtitle="Showing 20 designs"
+ *   onSave={(item) => console.log("Saved", item)}
+ * />
+ * ```
+ */
+declare function SlideshowGridTiles({ title, subtitle, items, sortOptions, filterOptions, actionButtonText, onAddNew, onSort, onFilter, onSave, onItemClick, className, }: SlideshowGridTilesProps): react_jsx_runtime.JSX.Element;
+
+interface GridTileItem {
+    id: string;
+    /** Image URL for the tile */
+    imageUrl: string;
+    /** Tile title */
+    title: string;
+    /** Rating from 1-5 */
+    rating: number;
+    /** Location text */
+    location: string;
+    /** Price (e.g., "$205") */
+    price: string;
+    /** Price unit (e.g., "night") */
+    priceUnit?: string;
+    /** Optional tag badge (e.g., "Popular") */
+    tag?: string;
+    /** Whether item is favorited */
+    isFavorite?: boolean;
+}
+interface SortOption$2 {
+    id: string;
+    label: string;
+}
+interface FilterOption$2 {
+    id: string;
+    label: string;
+}
+interface GridTilesListProps {
+    /** Block title */
+    title?: string;
+    /** Subtitle text (e.g., "20 listings") */
+    subtitle?: string;
+    /** Array of tile items */
+    items?: GridTileItem[];
+    /** Number of grid columns (2, 3, 4, or 5) */
+    columns?: 2 | 3 | 4 | 5;
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$2[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$2[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Callback when action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when favorite button is clicked on a tile */
+    onFavorite?: (item: GridTileItem) => void;
+    /** Callback when a tile is clicked */
+    onItemClick?: (item: GridTileItem) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Grid Tiles List Block
+ *
+ * A responsive grid of property/listing tiles with configurable columns,
+ * images, star ratings, prices, and favorite buttons. Includes header
+ * section with title, subtitle, and sort/filter controls.
+ *
+ * @example
+ * ```tsx
+ * <GridTilesList
+ *   title="Properties"
+ *   columns={4}
+ *   onFavorite={(item) => console.log("Favorited:", item.title)}
+ * />
+ * ```
+ */
+declare function GridTilesList({ title, subtitle, items, columns, sortOptions, filterOptions, actionButtonText, onAddNew, onSort, onFilter, onFavorite, onItemClick, className, }: GridTilesListProps): react_jsx_runtime.JSX.Element;
+
+interface ProfileTileItem {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    isOnline?: boolean;
+    subject: string;
+    pricePerHour: number;
+    rating: number;
+    reviewCount: string;
+    certification?: string;
+    location: string;
+    education: string;
+    sessionsCount: string;
+    earnings: string;
+}
+interface SortOption$1 {
+    id: string;
+    label: string;
+}
+interface FilterOption$1 {
+    id: string;
+    label: string;
+}
+interface ProfileGridTilesListProps {
+    /** Block title */
+    title?: string;
+    /** Subtitle text (e.g., "23 english tutors near you") */
+    subtitle?: string;
+    /** Array of profile tile items */
+    items?: ProfileTileItem[];
+    /** Number of columns in the grid (2-5) */
+    columns?: 2 | 3 | 4 | 5;
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption$1[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption$1[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Callback when action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when a profile is clicked */
+    onItemClick?: (item: ProfileTileItem) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Profile Grid Tiles List Block
+ *
+ * A responsive grid of profile cards with avatar, ratings, certifications,
+ * and metadata. Supports 2-5 column layouts that adapt to screen size.
+ *
+ * @example
+ * ```tsx
+ * <ProfileGridTilesList
+ *   title="Tutors near you"
+ *   subtitle="23 english tutors near you"
+ *   columns={4}
+ *   onItemClick={(item) => console.log("Clicked", item)}
+ * />
+ * ```
+ */
+declare function ProfileGridTilesList({ title, subtitle, items, columns, sortOptions, filterOptions, actionButtonText, onAddNew, onSort, onFilter, onItemClick, className, }: ProfileGridTilesListProps): react_jsx_runtime.JSX.Element;
+
+interface MetricCardData {
+    id: string;
+    label: string;
+    value: string;
+    change?: {
+        value: string;
+        direction: "up" | "down";
+    };
+}
+interface MetricListItem {
+    id: string;
+    date?: string;
+    label: string;
+    value: string;
+}
+interface DonutChartLegendItem {
+    id: string;
+    label: string;
+    value: string;
+    color: string;
+}
+interface ProgressBarItem {
+    id: string;
+    label: string;
+    sublabel?: string;
+    value?: string;
+    progress: number;
+    imageUrl?: string;
+    color?: string;
+}
+interface MetricCardProps {
+    label: string;
+    value: string;
+    change?: {
+        value: string;
+        direction: "up" | "down";
+    };
+    className?: string;
+}
+declare function MetricCard({ label, value, change, className }: MetricCardProps): react_jsx_runtime.JSX.Element;
+interface MetricCardsRowProps {
+    metrics: MetricCardData[];
+    columns?: 2 | 3 | 4;
+    className?: string;
+}
+declare function MetricCardsRow({ metrics, columns, className }: MetricCardsRowProps): react_jsx_runtime.JSX.Element;
+interface LineChartWidgetProps {
+    label: string;
+    value: string;
+    description?: string;
+    chartData?: number[];
+    chartLabels?: string[];
+    className?: string;
+    onMenuClick?: () => void;
+    onManageClick?: () => void;
+    onViewDetailsClick?: () => void;
+}
+declare function LineChartWidget({ label, value, description, chartData, chartLabels, className, onMenuClick, onManageClick, onViewDetailsClick, }: LineChartWidgetProps): react_jsx_runtime.JSX.Element;
+interface DonutChartWidgetProps {
+    label: string;
+    value: string;
+    description?: string;
+    legendItems?: DonutChartLegendItem[];
+    className?: string;
+    onMenuClick?: () => void;
+    onManageClick?: () => void;
+    onViewDetailsClick?: () => void;
+}
+declare function DonutChartWidget({ label, value, description, legendItems, className, onMenuClick, onManageClick, onViewDetailsClick, }: DonutChartWidgetProps): react_jsx_runtime.JSX.Element;
+interface MetricListCardProps {
+    headerLabel: string;
+    title: string;
+    subtitle?: string;
+    items: MetricListItem[];
+    viewDetailsLabel?: string;
+    className?: string;
+    onMenuClick?: () => void;
+    onManageClick?: () => void;
+    onViewDetailsClick?: () => void;
+}
+declare function MetricListCard({ headerLabel, title, subtitle, items, viewDetailsLabel, className, onMenuClick, onManageClick, onViewDetailsClick, }: MetricListCardProps): react_jsx_runtime.JSX.Element;
+interface ProgressMetricCardProps {
+    headerLabel: string;
+    title: string;
+    subtitle?: string;
+    items: ProgressBarItem[];
+    className?: string;
+    onMenuClick?: () => void;
+    onManageClick?: () => void;
+    onViewDetailsClick?: () => void;
+}
+declare function ProgressMetricCard({ headerLabel, title, subtitle, items, className, onMenuClick, onManageClick, onViewDetailsClick, }: ProgressMetricCardProps): react_jsx_runtime.JSX.Element;
+interface TwoColumnWidgetsProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TwoColumnWidgets({ children, className }: TwoColumnWidgetsProps): react_jsx_runtime.JSX.Element;
+interface DashboardHeaderProps {
+    title: string;
+    subtitle?: string;
+    className?: string;
+}
+declare function DashboardHeader({ title, subtitle, className }: DashboardHeaderProps): react_jsx_runtime.JSX.Element;
+interface GraphMetricTilesDemoProps {
+    className?: string;
+}
+declare function GraphMetricTilesDemo({ className }: GraphMetricTilesDemoProps): react_jsx_runtime.JSX.Element;
+
+interface FormFieldConfig {
+    id: string;
+    label: string;
+    type: "text" | "textarea" | "select" | "date" | "multiselect-checkbox" | "checkbox-group" | "radio-group" | "multiselect-tags" | "image-uploader" | "file-uploader" | "slider";
+    placeholder?: string;
+    options?: {
+        id: string;
+        label: string;
+    }[];
+    value?: string | string[] | number[] | UploadedImage[] | UploadedFile[];
+    min?: number;
+    max?: number;
+    step?: number;
+    fullWidth?: boolean;
+    disabled?: boolean;
+}
+interface FormRowConfig {
+    id: string;
+    fields: FormFieldConfig[];
+}
+interface SortOption {
+    id: string;
+    label: string;
+}
+interface FilterOption {
+    id: string;
+    label: string;
+}
+interface FormGroupProps {
+    /** Form title */
+    title?: string;
+    /** Form description */
+    description?: string;
+    /** Row configurations containing field definitions */
+    rows?: FormRowConfig[];
+    /** Sort options for the sort dropdown */
+    sortOptions?: SortOption[];
+    /** Filter options for the filter dropdown */
+    filterOptions?: FilterOption[];
+    /** Primary action button text */
+    actionButtonText?: string;
+    /** Cancel button text */
+    cancelButtonText?: string;
+    /** Save button text */
+    saveButtonText?: string;
+    /** Input size variant */
+    inputSize?: "sm" | "default" | "lg";
+    /** Callback when action button is clicked */
+    onAddNew?: () => void;
+    /** Callback when sort value changes */
+    onSort?: (value: string) => void;
+    /** Callback when filter value changes */
+    onFilter?: (value: string) => void;
+    /** Callback when cancel button is clicked */
+    onCancel?: () => void;
+    /** Callback when save button is clicked */
+    onSave?: () => void;
+    /** Callback when a field value changes */
+    onFieldChange?: (fieldId: string, value: unknown) => void;
+    /** Show header section */
+    showHeader?: boolean;
+    /** Show footer section */
+    showFooter?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Form Group Block
+ *
+ * A comprehensive form layout block with various input types arranged
+ * in responsive rows. Includes header section with title, description,
+ * sort/filter controls, and footer with action buttons.
+ *
+ * @example
+ * ```tsx
+ * <FormGroup
+ *   title="Create Entry"
+ *   description="Fill in the details below"
+ *   onSave={() => console.log("Save")}
+ *   onCancel={() => console.log("Cancel")}
+ * />
+ * ```
+ */
+declare function FormGroup({ title, description, rows, sortOptions, filterOptions, actionButtonText, cancelButtonText, saveButtonText, inputSize, onAddNew, onSort, onFilter, onCancel, onSave, onFieldChange, showHeader, showFooter, className, }: FormGroupProps): react_jsx_runtime.JSX.Element;
+
+interface PricedDate {
+    date: Date;
+    price: string;
+}
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface MonthlyCalendarWidgetProps {
+    /** Widget title */
+    title?: string;
+    /** Widget subtitle */
+    subtitle?: string;
+    /** Initial month to display (defaults to current month) */
+    initialMonth?: Date;
+    /** Currently selected date range */
+    selectedRange?: DateRange;
+    /** Array of dates that should be disabled/unavailable */
+    disabledDates?: Date[];
+    /** Array of dates with prices to display */
+    pricedDates?: PricedDate[];
+    /** Override for "today" (useful for demos) */
+    todayDate?: Date;
+    /** Callback when a date is selected */
+    onDateSelect?: (date: Date) => void;
+    /** Callback when the date range changes */
+    onRangeChange?: (range: DateRange) => void;
+    /** Callback when Confirm button is clicked */
+    onConfirm?: () => void;
+    /** Callback when Cancel button is clicked */
+    onCancel?: () => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Monthly Calendar Widget Block
+ *
+ * A dual-month calendar widget for date range selection with support for
+ * disabled dates, price labels, and today indicator. Commonly used for
+ * booking and scheduling interfaces.
+ *
+ * @example
+ * ```tsx
+ * <MonthlyCalendarWidget
+ *   title="Browse availability"
+ *   subtitle="Book your stay"
+ *   onRangeChange={(range) => console.log(range)}
+ *   onConfirm={() => console.log("Confirmed")}
+ * />
+ * ```
+ */
+declare function MonthlyCalendarWidget({ title, subtitle, initialMonth, selectedRange: controlledRange, disabledDates, pricedDates, todayDate, onDateSelect, onRangeChange, onConfirm, onCancel, className, }: MonthlyCalendarWidgetProps): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    /** Current active page (1-indexed) */
+    currentPage?: number;
+    /** Total number of pages */
+    totalPages?: number;
+    /** Total number of items (for results text) */
+    totalItems?: number;
+    /** Items displayed per page */
+    itemsPerPage?: number;
+    /** Available items per page options */
+    itemsPerPageOptions?: number[];
+    /** Callback when page changes */
+    onPageChange?: (page: number) => void;
+    /** Callback when items per page changes */
+    onItemsPerPageChange?: (itemsPerPage: number) => void;
+    /** Show "Viewing X-Y of Z results" text (desktop only) */
+    showResultsText?: boolean;
+    /** Show "Show per page" dropdown (desktop only) */
+    showItemsPerPage?: boolean;
+    /** Maximum number of visible page buttons on desktop */
+    maxVisiblePages?: number;
+    /** Maximum number of visible page buttons on mobile (default: 3) */
+    mobileMaxVisiblePages?: number;
+    /** Force compact mode (fewer visible pages) regardless of viewport */
+    compact?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Canvas Design System - Pagination Component
+ *
+ * A responsive pagination component with results text, items per page dropdown,
+ * and page navigation. Automatically adjusts layout for mobile screens.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Pagination
+ *   currentPage={1}
+ *   totalPages={10}
+ *   onPageChange={(page) => setPage(page)}
+ * />
+ *
+ * // With all features
+ * <Pagination
+ *   currentPage={1}
+ *   totalPages={50}
+ *   totalItems={2500}
+ *   itemsPerPage={50}
+ *   itemsPerPageOptions={[30, 50, 100]}
+ *   showResultsText
+ *   showItemsPerPage
+ *   onPageChange={(page) => setPage(page)}
+ *   onItemsPerPageChange={(perPage) => setPerPage(perPage)}
+ * />
+ * ```
+ */
+declare function Pagination({ currentPage, totalPages, totalItems, itemsPerPage, itemsPerPageOptions, onPageChange, onItemsPerPageChange, showResultsText, showItemsPerPage, maxVisiblePages, mobileMaxVisiblePages, compact, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+interface PromptTemplateProps {
+    prompt: string;
+    title?: string;
+    className?: string;
+}
+declare function PromptTemplate({ prompt, title, className }: PromptTemplateProps): react_jsx_runtime.JSX.Element;
+interface PromptChip {
+    label: string;
+    prompt: string;
+}
+interface PromptChipsRowProps {
+    chips: PromptChip[];
+    label?: string;
+}
+declare function PromptChipsRow({ chips, label }: PromptChipsRowProps): react_jsx_runtime.JSX.Element;
+
+declare function ScreenPromptTemplate(): react_jsx_runtime.JSX.Element;
+
+interface ScreenPromptBuilderProps {
+    className?: string;
+}
+declare function ScreenPromptBuilder({ className }: ScreenPromptBuilderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Project Context Type Definitions
+ *
+ * These types define the structure for project data that Cursor AI
+ * generates and maintains based on the scope document.
+ */
+interface Persona {
+    id: string;
+    name: string;
+    role: string;
+    avatar?: string;
+    goals: string[];
+    painPoints: string[];
+    quote: string;
+}
+type ScreenType = "page" | "tab" | "modal" | "drawer" | "state";
+type ScreenStatus = "draft" | "review" | "approved";
+interface Screen {
+    id: string;
+    name: string;
+    slug: string;
+    type: ScreenType;
+    icon?: string;
+    description?: string;
+    parentId?: string | null;
+    position: {
+        x: number;
+        y: number;
+    };
+    status: ScreenStatus;
+    template?: string;
+}
+interface ScreenConnection {
+    id: string;
+    sourceId: string;
+    targetId: string;
+    label?: string;
+    type?: "navigation" | "modal" | "redirect" | "back";
+}
+interface ProjectContext {
+    name: string;
+    description?: string;
+    personas: Persona[];
+    screens: Screen[];
+    connections: ScreenConnection[];
+    designGoals: string[];
+    tone: string[];
+}
+/**
+ * Get the full URL path for a screen, accounting for parent hierarchy
+ */
+declare function getScreenUrl(screen: Screen, allScreens: Screen[]): string;
+/**
+ * Get child screens for a given parent
+ */
+declare function getChildScreens(parentId: string, allScreens: Screen[]): Screen[];
+/**
+ * Get top-level screens (no parent)
+ */
+declare function getTopLevelScreens(allScreens: Screen[]): Screen[];
+
+interface ScreenFlowchartProps {
+    screens: Screen[];
+    connections: ScreenConnection[];
+    className?: string;
+    onOpenFullscreen?: () => void;
+}
+declare function ScreenFlowchart({ screens, connections, className, onOpenFullscreen, }: ScreenFlowchartProps): react_jsx_runtime.JSX.Element | null;
+
+interface PersonaCardProps {
+    persona: Persona;
+    className?: string;
+}
+declare function PersonaCard({ persona, className }: PersonaCardProps): react_jsx_runtime.JSX.Element;
+interface PersonaGridProps {
+    personas: Persona[];
+}
+declare function PersonaGrid({ personas }: PersonaGridProps): react_jsx_runtime.JSX.Element | null;
+
+interface LoaderProps {
+    /** The current state of the loader */
+    state?: "loading" | "success";
+    /** Title text displayed below the icon */
+    title?: string;
+    /** Description text displayed below the title */
+    description?: string;
+    /** Text for the action button (success state only) */
+    buttonText?: string;
+    /** Callback when the action button is clicked */
+    onButtonClick?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Canvas Design System - Loader Component
+ *
+ * A loading feedback component with two states:
+ * - Loading: Animated spinner with title and description
+ * - Success: Green checkmark with title, description, and optional action button
+ *
+ * Uses CSS variables for theming:
+ * - --loader-spinner-size: Size of the spinner (default: 64px)
+ * - --loader-spinner-stroke: Background stroke color
+ * - --loader-spinner-fill: Animated arc color
+ * - --loader-success-size: Size of success checkmark (default: 48px)
+ * - --loader-success-bg: Background color of success circle
+ * - --loader-gap: Gap between elements
+ *
+ * @example
+ * ```tsx
+ * // Loading state
+ * <Loader
+ *   state="loading"
+ *   title="Please wait..."
+ *   description="We are processing your request"
+ * />
+ *
+ * // Success state with button
+ * <Loader
+ *   state="success"
+ *   title="Success!"
+ *   description="Your payment has been processed"
+ *   buttonText="Go to portal"
+ *   onButtonClick={() => router.push('/portal')}
+ * />
+ * ```
+ */
+declare function Loader({ state, title, description, buttonText, onButtonClick, className, }: LoaderProps): react_jsx_runtime.JSX.Element;
+
+interface MenufocusItem {
+    /** Unique identifier for the menu item */
+    id: string;
+    /** Display label for the menu item */
+    label: string;
+    /** Callback when item is clicked */
+    onClick?: () => void;
+    /** Visual variant - use "destructive" for delete actions */
+    variant?: "default" | "destructive";
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+interface MenufocusTemplateProps {
+    /** Array of menu items to display */
+    items?: MenufocusItem[];
+    /** Accessible label for the trigger button */
+    ariaLabel?: string;
+    /** Size of the trigger button */
+    size?: "sm" | "default";
+    /** Additional class names for the trigger button */
+    className?: string;
+    /** Alignment of the dropdown menu */
+    align?: "start" | "center" | "end";
+}
+/**
+ * Canvas Design System - Menufocus Template
+ *
+ * A reusable ellipsis menu component with configurable menu items.
+ * Commonly used for row actions in tables, card actions, or any
+ * context where a compact action menu is needed.
+ *
+ * @example
+ * ```tsx
+ * <MenufocusTemplate
+ *   items={[
+ *     { id: "edit", label: "Edit", onClick: handleEdit },
+ *     { id: "delete", label: "Delete", variant: "destructive", onClick: handleDelete },
+ *   ]}
+ * />
+ * ```
+ */
+declare function MenufocusTemplate({ items, ariaLabel, size, className, align, }: MenufocusTemplateProps): react_jsx_runtime.JSX.Element;
+
+interface HeroSectionProps {
+    title: string;
+    subtitle: string;
+    searchPlaceholder?: string;
+    backgroundImage?: string;
+}
+declare function HeroSection({ title, subtitle, searchPlaceholder, backgroundImage }: HeroSectionProps): react_jsx_runtime.JSX.Element;
+
+interface HeroDarkWithImageProps {
+    title?: string;
+    subtitle?: string;
+    searchPlaceholder?: string;
+    image?: string;
+}
+declare function HeroDarkWithImage({ title, subtitle, searchPlaceholder, image }: HeroDarkWithImageProps): react_jsx_runtime.JSX.Element;
+
+interface HeroDarkCenteredProps {
+    title?: string;
+    subtitle?: string;
+}
+declare function HeroDarkCentered({ title, subtitle, }: HeroDarkCenteredProps): react_jsx_runtime.JSX.Element;
+
+interface HeroFullwidthImageProps {
+    title?: string;
+    subtitle?: string;
+    backgroundImage?: string;
+}
+declare function HeroFullwidthImage({ title, subtitle, backgroundImage }: HeroFullwidthImageProps): react_jsx_runtime.JSX.Element;
+
+interface DestinationCard {
+    id: string;
+    name: string;
+    count: string;
+    price: string;
+    image: string;
+}
+interface DestinationCardsProps {
+    title: string;
+    destinations: DestinationCard[];
+    onExploreMore?: () => void;
+}
+declare function DestinationCards({ title, destinations, onExploreMore }: Partial<DestinationCardsProps>): react_jsx_runtime.JSX.Element;
+
+declare function FeaturedPlaces(): react_jsx_runtime.JSX.Element;
+
+interface FeatureItem {
+    id: string;
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+}
+interface HowItWorksProps {
+    variant?: "light" | "dark";
+    features?: FeatureItem[];
+}
+declare function HowItWorks({ variant, features }: HowItWorksProps): react_jsx_runtime.JSX.Element;
+
+interface CategoryItem {
+    id: string;
+    title: string;
+    count: string;
+    icon: React.ReactNode;
+}
+interface CategoryGridProps {
+    title?: string;
+    categories?: CategoryItem[];
+}
+declare function CategoryGrid({ title, categories }: CategoryGridProps): react_jsx_runtime.JSX.Element;
+
+interface Testimonial {
+    id: string;
+    quote: string;
+    highlightedWords?: string[];
+    author: string;
+    location: string;
+    image: string;
+}
+interface TestimonialCarouselProps {
+    testimonials?: Testimonial[];
+}
+declare function TestimonialCarousel({ testimonials }: TestimonialCarouselProps): react_jsx_runtime.JSX.Element;
+
+interface StepItem {
+    id: string;
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+}
+interface VerticalHowItWorksProps {
+    variant?: "light" | "dark";
+    subtitle?: string;
+    title?: string;
+    description?: string;
+    steps?: StepItem[];
+    image?: string;
+}
+declare function VerticalHowItWorks({ variant, subtitle, title, description, steps, image }: VerticalHowItWorksProps): react_jsx_runtime.JSX.Element;
+
+interface GallerySectionProps {
+    variant?: "light" | "dark";
+    subtitle?: string;
+    title?: string;
+    description1?: string;
+    description2?: string;
+    images?: string[];
+}
+declare function GallerySection({ variant, subtitle, title, description1, description2, images, }: GallerySectionProps): react_jsx_runtime.JSX.Element;
+
+interface FeatureBenefit {
+    id: string;
+    text: string;
+}
+interface FeatureWithImageProps {
+    title?: string;
+    description?: string;
+    benefits?: FeatureBenefit[];
+    ctaText?: string;
+    onCtaClick?: () => void;
+    image?: string;
+    imagePosition?: "left" | "right";
+}
+declare function FeatureWithImage({ title, description, benefits, ctaText, onCtaClick, image, imagePosition, }: FeatureWithImageProps): react_jsx_runtime.JSX.Element;
+
+interface SocialProofProps {
+    label?: string;
+    logos?: {
+        name: string;
+        width: number;
+    }[];
+}
+declare function SocialProof({ label, logos, }: SocialProofProps): react_jsx_runtime.JSX.Element;
+
+interface Review {
+    id: string;
+    quote: string;
+    author: string;
+    location: string;
+    avatar: string;
+}
+interface ReviewsGridProps {
+    title?: string;
+    subtitle?: string;
+    reviews?: Review[];
+}
+declare function ReviewsGrid({ title, subtitle, reviews }: ReviewsGridProps): react_jsx_runtime.JSX.Element;
+
+interface BlogPost {
+    id: string;
+    title: string;
+    description: string;
+    image: string;
+}
+interface BlogCardsProps {
+    subtitle?: string;
+    title?: string;
+    posts?: BlogPost[];
+}
+declare function BlogCards({ subtitle, title, posts, }: BlogCardsProps): react_jsx_runtime.JSX.Element;
+
+interface CtaBannerProps {
+    title?: string;
+    buttonText?: string;
+    onButtonClick?: () => void;
+}
+declare function CtaBanner({ title, buttonText, onButtonClick }: CtaBannerProps): react_jsx_runtime.JSX.Element;
+
+interface FooterNavbarProps {
+    companyName?: string;
+}
+declare function FooterNavbar({ companyName }: FooterNavbarProps): react_jsx_runtime.JSX.Element;
+
+interface CenteredHeroProps {
+    title?: string;
+    subtitle?: string;
+    image?: string;
+}
+declare function CenteredHero({ title, subtitle, image, }: CenteredHeroProps): react_jsx_runtime.JSX.Element;
+
+interface Metric {
+    value: string;
+    label: string;
+}
+interface MetricsSectionProps {
+    subtitle?: string;
+    title?: string;
+    metrics?: Metric[];
+}
+declare function MetricsSection({ subtitle, title, metrics, }: MetricsSectionProps): react_jsx_runtime.JSX.Element;
+
+interface Value {
+    icon: ReactNode;
+    title: string;
+    description: string;
+}
+interface CoreValuesGridProps {
+    variant?: "light" | "dark";
+    subtitle?: string;
+    title?: string;
+    description?: string;
+    values?: Value[];
+}
+declare function CoreValuesGrid({ variant, subtitle, title, description, values, }: CoreValuesGridProps): react_jsx_runtime.JSX.Element;
+
+interface ContentWithImageProps {
+    subtitle?: string;
+    title?: string;
+    description?: string;
+    image?: string;
+    imagePosition?: "left" | "right";
+}
+declare function ContentWithImage({ subtitle, title, description, image, imagePosition, }: ContentWithImageProps): react_jsx_runtime.JSX.Element;
+
+interface TeamMember$1 {
+    name: string;
+    role: string;
+    image: string;
+    linkedIn?: string;
+    twitter?: string;
+}
+interface TeamCardsGridProps {
+    subtitle?: string;
+    title?: string;
+    description?: string;
+    members?: TeamMember$1[];
+}
+declare function TeamCardsGrid({ subtitle, title, description, members, }: TeamCardsGridProps): react_jsx_runtime.JSX.Element;
+
+interface TeamMember {
+    name: string;
+    role: string;
+    image: string;
+    linkedIn?: string;
+    twitter?: string;
+}
+interface TeamCircularGridProps {
+    subtitle?: string;
+    title?: string;
+    description?: string;
+    members?: TeamMember[];
+}
+declare function TeamCircularGrid({ subtitle, title, description, members, }: TeamCircularGridProps): react_jsx_runtime.JSX.Element;
+
+interface NewsItem {
+    title: string;
+    description: string;
+    image: string;
+    href?: string;
+}
+interface FeaturedNewsCardsProps {
+    variant?: "light" | "dark";
+    subtitle?: string;
+    title?: string;
+    description?: string;
+    items?: NewsItem[];
+}
+declare function FeaturedNewsCards({ variant, subtitle, title, description, items, }: FeaturedNewsCardsProps): react_jsx_runtime.JSX.Element;
+
+interface Office {
+    city: string;
+    address: string[];
+}
+interface OfficeLocationsProps {
+    subtitle?: string;
+    title?: string;
+    description?: string;
+    offices?: Office[];
+}
+declare function OfficeLocations({ subtitle, title, description, offices, }: OfficeLocationsProps): react_jsx_runtime.JSX.Element;
+
+declare function PricingCards(): react_jsx_runtime.JSX.Element;
+
+declare function FeaturesComparison(): react_jsx_runtime.JSX.Element;
+
+declare function FaqAccordion(): react_jsx_runtime.JSX.Element;
+
+interface PricingCtaProps {
+    title?: string;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+    onPrimaryClick?: () => void;
+    onSecondaryClick?: () => void;
+}
+declare function PricingCta({ title, primaryButtonText, secondaryButtonText, onPrimaryClick, onSecondaryClick, }: PricingCtaProps): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Canvas Design System - Theme Defaults
+ *
+ * This file contains all default values for the design system.
+ * These are used by:
+ * - The Reset button in the Design Variables drawer
+ * - Initial state when no saved theme exists
+ *
+ * Keep these in sync with globals.css CSS variable defaults.
+ */
+declare const colorVariables: {
+    category: string;
+    variables: {
+        name: string;
+        default: string;
+        label: string;
+    }[];
+}[];
+declare const allColorVariables: {
+    name: string;
+    default: string;
+    label: string;
+}[];
+declare const defaultColors: Record<string, string>;
+type IconShapeId$1 = "rounded" | "circle" | "square";
+declare const defaultBranding: {
+    iconShape: IconShapeId$1;
+    iconName: string;
+    bgColor: string;
+    iconColor: string;
+    wordmark: string;
+};
+type ImageKey = "logoLight" | "logoDark" | "faviconLight" | "faviconDark";
+declare const defaultImages: Record<ImageKey, string>;
+declare const defaultTypography: Record<string, string>;
+declare const defaultButtonSizes: Record<string, string>;
+declare const defaultButtonColorStyles: {
+    id: string;
+    label: string;
+    description: string;
+    isDefault: boolean;
+}[];
+interface CustomButtonStyle {
+    id: string;
+    label: string;
+    description: string;
+    bg: string;
+    text: string;
+    border: string;
+    bgHover: string;
+    textHover: string;
+    borderHover: string;
+}
+declare const defaultCustomButtonStyles: CustomButtonStyle[];
+declare const defaultButtonColors: Record<string, string>;
+declare const defaultInputSizes: Record<string, string>;
+
+/**
+ * Component Registry
+ *
+ * A lightweight reference for AI assistants to understand available components
+ * without reading all source files. Check this file first when working on
+ * page templates, blocks, or layouts.
+ *
+ * Each component entry includes:
+ * - path: Import path for the component
+ * - description: Brief explanation of what the component does
+ * - props: Key props (not exhaustive, see source for full interface)
+ */
+declare const layoutShells: {
+    readonly DashboardShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Main dashboard layout with dark sidebar (320px) and fixed header. Sidebar has collapsible sections with nav items.";
+        readonly props: readonly ["navigation: NavSection[]", "pageHeader?", "children", "onNavItemClick?"];
+    };
+    readonly IconSidebarShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Layout with narrow icon-only sidebar (96px). Good for apps with few main sections.";
+        readonly props: readonly ["navigation?: IconNavItemConfig[]", "pageHeader?", "children", "onNavItemClick?"];
+    };
+    readonly DoubleSidebarShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Two-column sidebar layout (96px icons + 280px nav). Each column can be light/dark themed independently.";
+        readonly props: readonly ["sections?: DoubleSidebarSection[]", "iconVariant?", "navVariant?", "children", "onTabClick?"];
+    };
+    readonly StandardPageShell: {
+        readonly path: "@/components/layout";
+        readonly description: "No-sidebar layout with centered content (max 992px). Has optional flair banner and page header with tabs.";
+        readonly props: readonly ["bannerTitle?", "pageTitle?", "tabs?", "activeTab?", "showBanner?", "showTabs?", "children"];
+    };
+    readonly AccountSettingsShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Settings page layout with left sidebar navigation (Profile, Security, Payments, Notifications tabs).";
+        readonly props: readonly ["activeTab?: AccountTab", "onTabChange?", "pageTitle?", "children"];
+    };
+    readonly MultistepShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Multi-step wizard layout with horizontal step tracker, step title/description, and navigation buttons.";
+        readonly props: readonly ["steps?: Step[]", "currentStep?", "onStepClick?", "onCancel?", "onContinue?", "children"];
+    };
+    readonly MultistepSidebarShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Multi-step wizard with sidebar step list instead of horizontal tracker.";
+        readonly props: readonly ["steps?: Step[]", "currentStep?", "children"];
+    };
+    readonly MultistepProgressBarShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Multi-step wizard with a horizontal progress bar at top.";
+        readonly props: readonly ["steps?: MultistepProgressBarStep[]", "currentStep?", "children"];
+    };
+    readonly VerticalMultistepShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Multi-step wizard with vertical step tracker on the left side.";
+        readonly props: readonly ["steps?: Step[]", "currentStep?", "children"];
+    };
+    readonly MobileMenuShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Mobile-first layout with bottom navigation bar. Good for mobile app-like experiences.";
+        readonly props: readonly ["children", "bottomNavItems?"];
+    };
+    readonly SearchBarShell: {
+        readonly path: "@/components/layout";
+        readonly description: "Layout with prominent search bar in header area.";
+        readonly props: readonly ["children", "onSearch?"];
+    };
+};
+declare const layoutPrimitives: {
+    readonly Header: {
+        readonly path: "@/components/layout";
+        readonly description: "Top navigation bar with logo, nav links, icon cluster (search, notifications, messages, cart), and avatar dropdown.";
+        readonly props: readonly ["onMenuClick?", "showDesktopLogo?", "variant?: 'light' | 'dark'", "navItems?", "showAuthButtons?"];
+    };
+    readonly Sidebar: {
+        readonly path: "@/components/layout";
+        readonly description: "Dark or light sidebar with logo and collapsible nav sections. Used inside DashboardShell.";
+        readonly props: readonly ["sections: NavSection[]", "variant?: 'dark' | 'light'", "onItemClick?"];
+    };
+    readonly SidebarNav: {
+        readonly path: "@/components/layout";
+        readonly description: "Navigation items component used inside Sidebar. Handles section titles and item rendering.";
+        readonly props: readonly ["sections: NavSection[]", "variant?", "onItemClick?"];
+    };
+    readonly IconSidebar: {
+        readonly path: "@/components/layout";
+        readonly description: "Narrow sidebar with only icons and tooltips. Used inside IconSidebarShell.";
+        readonly props: readonly ["items?: IconNavItemConfig[]", "variant?", "onItemClick?"];
+    };
+    readonly DoubleSidebar: {
+        readonly path: "@/components/layout";
+        readonly description: "Two-column sidebar with icon strip and nav panel. Used inside DoubleSidebarShell.";
+        readonly props: readonly ["sections?", "iconVariant?", "navVariant?", "onTabClick?"];
+    };
+};
+declare const blocks: {
+    readonly ActivityFeed: {
+        readonly path: "@/components/blocks";
+        readonly description: "Timeline-style activity feed showing user actions, comments, and file attachments with connecting lines. Supports status changes, comments with reactions, and file attachments.";
+        readonly props: readonly ["title?", "subtitle?", "items?: ActivityItem[]", "onLike?", "onReply?", "onAttachmentClick?"];
+    };
+    readonly CircularProgressBarList: {
+        readonly path: "@/components/blocks";
+        readonly description: "List block with circular progress indicators showing completion percentages. Features header with sort/filter controls and item action menus.";
+        readonly props: readonly ["title?", "items?: ProgressListItem[]", "sortOptions?", "filterOptions?", "onSort?", "onFilter?", "onItemAction?"];
+    };
+    readonly CircularProgressBar: {
+        readonly path: "@/components/blocks";
+        readonly description: "SVG-based circular progress indicator showing a percentage value. Can be used standalone or within CircularProgressBarList.";
+        readonly props: readonly ["progress: number", "size?", "strokeWidth?", "className?"];
+    };
+    readonly FaqsTable: {
+        readonly path: "@/components/blocks";
+        readonly description: "Expandable FAQ list with accordion behavior. Shows questions with plus/minus toggle icons, revealing answers one at a time.";
+        readonly props: readonly ["title?", "items?: FAQItem[]", "defaultExpandedId?", "className?"];
+    };
+    readonly StandardDataTable: {
+        readonly path: "@/components/blocks";
+        readonly description: "Data table with title, result count, sort/filter dropdowns, and action button. Rows have avatar + name/email/title/role columns.";
+        readonly props: readonly ["title?", "data?: TableRow[]", "columns?", "sortOptions?", "filterOptions?", "actionButtonText?", "onAddNew?"];
+    };
+    readonly FixedColumnDataTable: {
+        readonly path: "@/components/blocks";
+        readonly description: "Data table with fixed first column (Name with avatar) that stays visible during horizontal scroll. Ideal for invoice-style tables with columns: Amount, Status badge, Logo, Company, Date Sent.";
+        readonly props: readonly ["title?", "data?: FixedColumnTableRow[]", "sortOptions?", "filterOptions?", "actionButtonText?", "onAddNew?", "onRowAction?"];
+    };
+    readonly NestedDataTable: {
+        readonly path: "@/components/blocks";
+        readonly description: "Expandable data table with parent rows that reveal nested child tables. Shows hierarchical data like locations with employees.";
+        readonly props: readonly ["title?", "data?: ParentRow[]", "sortOptions?", "filterOptions?", "actionButtonText?", "onAddNew?", "onRowAction?", "onChildAction?"];
+    };
+    readonly ReviewsTable: {
+        readonly path: "@/components/blocks";
+        readonly description: "Review listing with user avatars, star ratings, dates, and expandable text. Includes sort/filter dropdowns and action button.";
+        readonly props: readonly ["title?", "reviews?: ReviewItem[]", "sortOptions?", "filterOptions?", "actionButtonText?", "onAddNew?", "onReadMore?"];
+    };
+    readonly MessengerSidebar: {
+        readonly path: "@/components/blocks";
+        readonly description: "Thread list sidebar for messaging with search, avatars, timestamps, and unread badges.";
+        readonly props: readonly ["selectedThreadId?", "onSelectThread?", "className?"];
+    };
+    readonly ChatBubble: {
+        readonly path: "@/components/blocks";
+        readonly description: "Single chat message bubble. Sent messages align right with primary color, received align left with avatar.";
+        readonly props: readonly ["message: ChatBubbleMessage"];
+    };
+    readonly ChatDateSeparator: {
+        readonly path: "@/components/blocks";
+        readonly description: "Date separator line between chat messages (e.g., 'Jan 25, 2024').";
+        readonly props: readonly ["date: string"];
+    };
+    readonly MessengerInput: {
+        readonly path: "@/components/blocks";
+        readonly description: "Chat input with textarea, attachment pills, file upload button, and send button.";
+        readonly props: readonly ["attachments?", "onRemoveAttachment?", "onSend?"];
+    };
+    readonly ProfileCard: {
+        readonly path: "@/components/blocks";
+        readonly description: "Centered profile card with avatar overlapping banner, stats, bio, tags, and social links.";
+        readonly props: readonly ["name", "username", "avatarUrl?", "rating?", "location?", "stats?", "bio?", "tags?", "socialLinks?"];
+    };
+    readonly StepTracker: {
+        readonly path: "@/components/blocks";
+        readonly description: "Horizontal multi-step progress indicator with numbered circles and connecting lines.";
+        readonly props: readonly ["steps: Step[]", "currentStep: number", "onStepClick?"];
+    };
+    readonly VerticalStepTracker: {
+        readonly path: "@/components/blocks";
+        readonly description: "Vertical step tracker for sidebar placement in multi-step flows.";
+        readonly props: readonly ["steps: Step[]", "currentStep: number", "onStepClick?"];
+    };
+    readonly ProgressBar: {
+        readonly path: "@/components/blocks";
+        readonly description: "Horizontal progress bar. Can use percentage or currentStep/totalSteps.";
+        readonly props: readonly ["progress?", "currentStep?", "totalSteps?"];
+    };
+    readonly FlairBanner: {
+        readonly path: "@/components/blocks";
+        readonly description: "Dark blue hero banner with large title text. Used at top of pages.";
+        readonly props: readonly ["title: string"];
+    };
+    readonly Loader: {
+        readonly path: "@/components/blocks";
+        readonly description: "Loading feedback component with animated spinner (loading state) and checkmark (success state). Includes title, description, and optional action button.";
+        readonly props: readonly ["state?: 'loading' | 'success'", "title?", "description?", "buttonText?", "onButtonClick?", "className?"];
+    };
+    readonly GradientBanner: {
+        readonly path: "@/components/blocks";
+        readonly description: "Banner with gradient background. Alternative to FlairBanner.";
+        readonly props: readonly ["title?", "subtitle?"];
+    };
+    readonly PageHeaderSection: {
+        readonly path: "@/components/blocks";
+        readonly description: "Page title, description, and optional line tabs. Used below banners.";
+        readonly props: readonly ["title", "description?", "tabs?", "activeTab?", "onTabChange?", "showTabs?"];
+    };
+    readonly SearchBar: {
+        readonly path: "@/components/blocks";
+        readonly description: "Prominent search input with icon.";
+        readonly props: readonly ["placeholder?", "value?", "onChange?", "onSearch?"];
+    };
+    readonly SearchSidebar: {
+        readonly path: "@/components/blocks";
+        readonly description: "Sidebar with search results or filters.";
+        readonly props: readonly ["results?", "onResultClick?"];
+    };
+    readonly FilterPopover: {
+        readonly path: "@/components/blocks";
+        readonly description: "Popover with filter controls (checkboxes, date ranges, etc.).";
+        readonly props: readonly ["filters?", "onApply?", "onReset?"];
+    };
+    readonly MenuSection: {
+        readonly path: "@/components/blocks";
+        readonly description: "Section within sidebar navigation with title and items.";
+        readonly props: readonly ["title?", "items: NavItem[]"];
+    };
+    readonly MenufocusTemplate: {
+        readonly path: "@/components/blocks";
+        readonly description: "Dropdown menu with trigger button (three dots). Used for row actions in tables.";
+        readonly props: readonly ["items: MenuItem[]", "ariaLabel?"];
+    };
+    readonly SidebarCards: {
+        readonly path: "@/components/blocks";
+        readonly description: "Card list for sidebar showing items with images/titles.";
+        readonly props: readonly ["cards: SidebarCard[]", "onCardClick?"];
+    };
+    readonly SidebarProfileCard: {
+        readonly path: "@/components/blocks";
+        readonly description: "Compact profile card for sidebar with avatar and key info.";
+        readonly props: readonly ["name", "role?", "avatarUrl?"];
+    };
+    readonly ProfileInfoCards: {
+        readonly path: "@/components/blocks";
+        readonly description: "Grid of info cards for profile pages (contact, stats, etc.).";
+        readonly props: readonly ["cards: InfoCard[]"];
+    };
+    readonly ProfileImageUploader: {
+        readonly path: "@/components/blocks";
+        readonly description: "Avatar upload component with preview and edit button.";
+        readonly props: readonly ["currentImage?", "onUpload?"];
+    };
+    readonly SettingsListRow: {
+        readonly path: "@/components/blocks";
+        readonly description: "Row item for settings lists with label, value, and edit action.";
+        readonly props: readonly ["label", "value?", "onEdit?"];
+    };
+    readonly CreditCardDisplay: {
+        readonly path: "@/components/blocks";
+        readonly description: "Visual credit card display showing card details.";
+        readonly props: readonly ["cardNumber?", "cardHolder?", "expiry?", "type?"];
+    };
+    readonly PillTabs: {
+        readonly path: "@/components/blocks";
+        readonly description: "Horizontal pill-style tab navigation.";
+        readonly props: readonly ["tabs: Tab[]", "activeTab?", "onTabChange?"];
+    };
+    readonly LoginBrandingPanel: {
+        readonly path: "@/components/blocks";
+        readonly description: "Branding side panel for login/signup pages with logo and background.";
+        readonly props: readonly ["backgroundImage?", "logo?"];
+    };
+    readonly ContentDropzone: {
+        readonly path: "@/components/blocks";
+        readonly description: "Placeholder dropzone for content areas during development.";
+        readonly props: readonly ["label?", "className?"];
+    };
+    readonly UpvotingPostsTable: {
+        readonly path: "@/components/blocks";
+        readonly description: "Social feed with upvoting posts, comments, and nested replies. Features header with sort/filter controls.";
+        readonly props: readonly ["title?", "subtitle?", "posts?: Post[]", "currentUser?", "sortOptions?", "filterOptions?", "actionButtonText?", "onUpvote?", "onComment?", "onReply?", "onLike?"];
+    };
+    readonly NestedCommentsTable: {
+        readonly path: "@/components/blocks";
+        readonly description: "Threaded discussion component with nested comments, reply/like actions, and collapsible threads.";
+        readonly props: readonly ["title?", "subtitle?", "comments?: Comment[]", "currentUser?", "onComment?", "onReply?", "onLike?"];
+    };
+    readonly ImageFeedWithNestedComments: {
+        readonly path: "@/components/blocks";
+        readonly description: "Instagram-style image feed with large images, social interactions (like/comment/share/bookmark), and nested comment threads.";
+        readonly props: readonly ["title?", "subtitle?", "posts?: ImagePost[]", "currentUser?", "onLike?", "onComment?", "onShare?", "onBookmark?", "onReply?", "onCommentLike?"];
+    };
+    readonly MobileBottomNav: {
+        readonly path: "@/components/blocks";
+        readonly description: "Fixed bottom navigation bar for mobile layouts.";
+        readonly props: readonly ["items: BottomNavItem[]", "activeItem?", "onItemClick?"];
+    };
+    readonly MonthlyCalendarWidget: {
+        readonly path: "@/components/blocks";
+        readonly description: "Dual-month calendar for date range selection with price labels, disabled dates, and today indicator. Used for booking and scheduling interfaces.";
+        readonly props: readonly ["title?", "subtitle?", "initialMonth?", "selectedRange?", "disabledDates?", "pricedDates?", "todayDate?", "onDateSelect?", "onRangeChange?", "onConfirm?", "onCancel?"];
+    };
+    readonly BottomInputChatWidget: {
+        readonly path: "@/components/blocks";
+        readonly description: "Slack-style chat widget with message threads list and conversation view. Features bottom input bar with attachment support.";
+        readonly props: readonly ["variant?: 'threads' | 'conversation'", "title?", "threads?", "messages?", "conversationName?", "onThreadClick?", "onBackClick?", "onSend?"];
+    };
+    readonly LargeImageLabelsList: {
+        readonly path: "@/components/blocks";
+        readonly description: "Property-style listing with large images, ratings, prices, and icon labels. Includes header with sort/filter controls.";
+        readonly props: readonly ["title?", "items?: ListItem[]", "sortOptions?", "filterOptions?", "onFavorite?", "onItemClick?"];
+    };
+    readonly SocialFeed: {
+        readonly path: "@/components/blocks";
+        readonly description: "Social media-style feed with post composer, various content types (text, images, video, reposts, link cards), social interactions (like/comment/repost/share), and threaded replies.";
+        readonly props: readonly ["title?", "posts?: SocialFeedPost[]", "currentUser?", "composerPlaceholder?", "composerImagePreview?", "onPost?", "onLike?", "onComment?", "onRepost?", "onShare?"];
+    };
+    readonly StandardListWithImage: {
+        readonly path: "@/components/blocks";
+        readonly description: "Blog/article-style list block with image thumbnails, title, author, date, description, and tags. Includes header with sort/filter controls.";
+        readonly props: readonly ["title?", "subtitle?", "items?: ListItem[]", "sortOptions?", "filterOptions?", "onSort?", "onFilter?", "onItemClick?"];
+    };
+    readonly SlideshowGridTiles: {
+        readonly path: "@/components/blocks";
+        readonly description: "2-column grid of portfolio/slideshow tiles with hover states. Features large images with slideshow navigation, save button, user info with avatar, and engagement stats (likes/views).";
+        readonly props: readonly ["title?", "subtitle?", "items?: SlideshowTileItem[]", "sortOptions?", "filterOptions?", "actionButtonText?", "onAddNew?", "onSort?", "onFilter?", "onSave?", "onItemClick?"];
+    };
+    readonly ProfileGridTilesList: {
+        readonly path: "@/components/blocks";
+        readonly description: "Responsive grid of profile cards with avatar, ratings, certifications, and metadata. Configurable 2-5 columns with mobile responsiveness. Ideal for tutors, team members, or user directories.";
+        readonly props: readonly ["title?", "subtitle?", "items?: ProfileTileItem[]", "columns?: 2|3|4|5", "sortOptions?", "filterOptions?", "actionButtonText?", "onAddNew?", "onSort?", "onFilter?", "onItemClick?"];
+    };
+    readonly GridTilesList: {
+        readonly path: "@/components/blocks";
+        readonly description: "Responsive grid of property/listing tiles with configurable 2-5 columns. Features images, star ratings, prices, favorite buttons, and optional tags. Includes header with sort/filter controls.";
+        readonly props: readonly ["title?", "subtitle?", "columns?: 2|3|4|5", "items?: GridTileItem[]", "sortOptions?", "filterOptions?", "actionButtonText?", "onAddNew?", "onFavorite?", "onItemClick?"];
+    };
+    readonly Pagination: {
+        readonly path: "@/components/blocks";
+        readonly description: "Responsive pagination with results summary, items per page dropdown, and page navigation. Shows 'Viewing X-Y of Z results' on desktop, compact navigation on mobile.";
+        readonly props: readonly ["currentPage?", "totalPages?", "totalItems?", "itemsPerPage?", "itemsPerPageOptions?", "onPageChange?", "onItemsPerPageChange?", "showResultsText?", "showItemsPerPage?", "maxVisiblePages?"];
+    };
+    readonly MetricCard: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Single KPI card displaying a large value with label and optional change indicator (up/down arrow with color).";
+        readonly props: readonly ["label: string", "value: string", "change?: { value: string, direction: 'up' | 'down' }", "className?"];
+    };
+    readonly MetricCardsRow: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Horizontal row of 2-4 MetricCard components with automatic flex layout and spacing.";
+        readonly props: readonly ["metrics: MetricCardData[]", "columns?: 2|3|4", "className?"];
+    };
+    readonly LineChartWidget: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Full-width widget with Chart.js line/area chart. Includes header, value display, and footer actions. Chart colors update live with CSS variables.";
+        readonly props: readonly ["label: string", "value: string", "description?", "chartData?: number[]", "chartLabels?: string[]", "onMenuClick?", "onManageClick?", "onViewDetailsClick?"];
+    };
+    readonly DonutChartWidget: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Widget with Chart.js doughnut chart and legend metrics grid. Colors mapped to --chart-color-1 through --chart-color-5 CSS variables.";
+        readonly props: readonly ["label: string", "value: string", "description?", "legendItems?: DonutChartLegendItem[]", "onMenuClick?", "onManageClick?", "onViewDetailsClick?"];
+    };
+    readonly MetricListCard: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Card displaying a list of transactions or metrics with optional date, label, and value columns.";
+        readonly props: readonly ["headerLabel: string", "title: string", "subtitle?", "items: MetricListItem[]", "viewDetailsLabel?", "onMenuClick?", "onManageClick?", "onViewDetailsClick?"];
+    };
+    readonly ProgressMetricCard: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Card with horizontal progress bars, optional images/sublabels, and value display. Uses --canvas-primary for bar color by default.";
+        readonly props: readonly ["headerLabel: string", "title: string", "subtitle?", "items: ProgressBarItem[]", "onMenuClick?", "onManageClick?", "onViewDetailsClick?"];
+    };
+    readonly TwoColumnWidgets: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Simple flex layout wrapper for arranging two widget cards side by side with proper gap spacing.";
+        readonly props: readonly ["children: React.ReactNode", "className?"];
+    };
+    readonly DashboardHeader: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Page header for dashboards with title and optional subtitle.";
+        readonly props: readonly ["title: string", "subtitle?", "className?"];
+    };
+    readonly GraphMetricTilesDemo: {
+        readonly path: "@/components/blocks/graph-metric-tiles";
+        readonly description: "Complete dashboard demo composing all metric tile components together. Use as reference for dashboard layouts.";
+        readonly props: readonly ["className?"];
+    };
+};
+declare const groupModalDrawerBlocks: {
+    readonly FormGroup: {
+        readonly path: "@/components/blocks";
+        readonly description: "Comprehensive form layout with header, responsive 2-column rows, and footer. Supports text inputs, selects, date pickers, checkboxes, radio buttons, multiselect tags, image/file uploaders, and sliders.";
+        readonly props: readonly ["title?", "description?", "rows?: FormRowConfig[]", "sortOptions?", "filterOptions?", "inputSize?: 'sm' | 'default' | 'lg'", "onAddNew?", "onCancel?", "onSave?", "onFieldChange?", "showHeader?", "showFooter?"];
+    };
+};
+declare const canvasBlocks: {
+    readonly InfinityCanvas: {
+        readonly path: "@/components/blocks";
+        readonly description: "Pannable, zoomable infinite canvas for placing components. Supports drag-and-drop from palette.";
+        readonly props: readonly ["items: CanvasItemData[]", "onItemsChange", "selectedId", "onSelectItem"];
+    };
+    readonly ComponentPalette: {
+        readonly path: "@/components/blocks";
+        readonly description: "Sidebar listing draggable components grouped by category. Used with InfinityCanvas.";
+        readonly props: readonly ["className?"];
+    };
+    readonly CanvasItem: {
+        readonly path: "@/components/blocks";
+        readonly description: "Wrapper for components placed on the infinity canvas. Handles positioning and selection.";
+        readonly props: readonly ["item: CanvasItemData", "isSelected", "onSelect", "onDelete", "children"];
+    };
+};
+declare const videoBlocks: {
+    readonly VideoChatControls: {
+        readonly path: "@/components/blocks";
+        readonly description: "Row of circular buttons for video calls: camera, mic, cast, leave.";
+        readonly props: readonly ["isVideoOn?", "isMicOn?", "onToggleVideo?", "onToggleMic?", "onCast?", "onLeave?"];
+    };
+    readonly WebcamPreview: {
+        readonly path: "@/components/blocks";
+        readonly description: "Live webcam preview component with optional overlay controls.";
+        readonly props: readonly ["className?", "showControls?"];
+    };
+    readonly ParticipantList: {
+        readonly path: "@/components/blocks";
+        readonly description: "List of video call participants with avatars and status.";
+        readonly props: readonly ["participants: Participant[]"];
+    };
+    readonly VideoPlaylist: {
+        readonly path: "@/components/blocks";
+        readonly description: "Sidebar playlist for video content with thumbnails.";
+        readonly props: readonly ["videos: Video[]", "currentVideo?", "onVideoSelect?"];
+    };
+    readonly VideoContentSection: {
+        readonly path: "@/components/blocks";
+        readonly description: "Video player area with metadata and description.";
+        readonly props: readonly ["video: Video", "onPlay?"];
+    };
+    readonly YouTubePlayer: {
+        readonly path: "@/components/blocks";
+        readonly description: "Embedded YouTube player component.";
+        readonly props: readonly ["videoId: string", "autoplay?"];
+    };
+};
+declare const marketingBlocks: {
+    readonly HeroSection: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Hero with background image and simple search bar overlay.";
+        readonly props: readonly ["title", "subtitle", "searchPlaceholder?", "backgroundImage?"];
+    };
+    readonly HeroDarkWithImage: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Dark hero section with text on left and image on right.";
+        readonly props: readonly ["title", "subtitle", "image"];
+    };
+    readonly HeroDarkCentered: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Dark centered hero with multi-field search (location, dates, guests).";
+        readonly props: readonly ["title", "subtitle"];
+    };
+    readonly HeroFullwidthImage: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Full-width hero image with centered content and multi-field search.";
+        readonly props: readonly ["title", "subtitle", "backgroundImage"];
+    };
+    readonly CenteredHero: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Simple centered hero for about/landing pages.";
+        readonly props: readonly ["title", "subtitle?"];
+    };
+    readonly DestinationCards: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Grid of destination cards with images and titles.";
+        readonly props: readonly ["title?", "destinations?"];
+    };
+    readonly FeaturedPlaces: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Featured places section with filter pills and card grid.";
+        readonly props: readonly ["title?", "filters?", "places?"];
+    };
+    readonly CategoryGrid: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Grid of category cards with icons/images.";
+        readonly props: readonly ["categories?"];
+    };
+    readonly GallerySection: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Image gallery with title and grid layout.";
+        readonly props: readonly ["title?", "subtitle?", "images?"];
+    };
+    readonly BlogCards: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Grid of blog post cards with images, titles, dates.";
+        readonly props: readonly ["title?", "subtitle?", "posts?"];
+    };
+    readonly HowItWorks: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Horizontal 3-step how it works section.";
+        readonly props: readonly ["steps?"];
+    };
+    readonly VerticalHowItWorks: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Vertical how it works with large numbers. Has light/dark variants.";
+        readonly props: readonly ["variant?: 'light' | 'dark'", "title", "description", "steps?"];
+    };
+    readonly TestimonialCarousel: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Dark testimonial carousel with quote, author, and navigation arrows.";
+        readonly props: readonly ["testimonials?"];
+    };
+    readonly ReviewsGrid: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Grid of review cards with ratings and text.";
+        readonly props: readonly ["title?", "subtitle?", "reviews?"];
+    };
+    readonly SocialProof: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Logo bar showing 'as featured on' brands.";
+        readonly props: readonly ["label?", "logos?"];
+    };
+    readonly MetricsSection: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Row of large metric numbers with labels.";
+        readonly props: readonly ["metrics?"];
+    };
+    readonly FeatureWithImage: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Feature highlight with image and text side by side.";
+        readonly props: readonly ["title", "description", "ctaText?", "imagePosition?: 'left' | 'right'"];
+    };
+    readonly ContentWithImage: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Generic content section with image. Similar to FeatureWithImage.";
+        readonly props: readonly ["title", "content", "image", "imagePosition?"];
+    };
+    readonly CoreValuesGrid: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Grid of value cards with icons and descriptions.";
+        readonly props: readonly ["values?"];
+    };
+    readonly TeamCardsGrid: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Grid of team member cards with photos and roles.";
+        readonly props: readonly ["title?", "members?"];
+    };
+    readonly TeamCircularGrid: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Team grid with circular avatar photos.";
+        readonly props: readonly ["title?", "members?"];
+    };
+    readonly CtaBanner: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Call to action banner with title and button.";
+        readonly props: readonly ["title", "buttonText", "onButtonClick?"];
+    };
+    readonly FooterNavbar: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Footer with logo, nav links, and social icons.";
+        readonly props: readonly ["companyName?", "links?", "socialLinks?"];
+    };
+    readonly FeaturedNewsCards: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Featured news/press cards section.";
+        readonly props: readonly ["title?", "articles?"];
+    };
+    readonly OfficeLocations: {
+        readonly path: "@/components/blocks/marketing";
+        readonly description: "Grid of office location cards with addresses.";
+        readonly props: readonly ["title?", "locations?"];
+    };
+};
+declare const pricingBlocks: {
+    readonly PricingCards: {
+        readonly path: "@/components/blocks/pricing";
+        readonly description: "Three-tier pricing cards with monthly/annual toggle, features list, and CTA buttons.";
+        readonly props: readonly ["plans?"];
+    };
+    readonly FaqAccordion: {
+        readonly path: "@/components/blocks/pricing";
+        readonly description: "Expandable FAQ accordion for pricing pages.";
+        readonly props: readonly ["faqs?: FAQ[]"];
+    };
+    readonly FeaturesComparison: {
+        readonly path: "@/components/blocks/pricing";
+        readonly description: "Feature comparison table across pricing tiers.";
+        readonly props: readonly ["features?", "plans?"];
+    };
+    readonly PricingCta: {
+        readonly path: "@/components/blocks/pricing";
+        readonly description: "CTA section for pricing page (contact sales, etc.).";
+        readonly props: readonly ["title?", "description?", "buttonText?"];
+    };
+};
+declare const pageTemplates: {
+    readonly "page-admin-portal": {
+        readonly path: "/page-admin-portal";
+        readonly description: "Admin dashboard with dark sidebar, collapsible nav sections, and data table.";
+        readonly shell: "DashboardShell";
+        readonly blocks: readonly ["StandardDataTable", "Header"];
+    };
+    readonly "page-messenger": {
+        readonly path: "/page-messenger";
+        readonly description: "Full messaging interface with thread sidebar and chat area.";
+        readonly shell: "custom (no shell)";
+        readonly blocks: readonly ["MessengerSidebar", "ChatBubble", "ChatDateSeparator", "MessengerInput"];
+    };
+    readonly "page-product-homepage": {
+        readonly path: "/page-product-homepage";
+        readonly description: "Marketing landing page with multiple hero variations and content blocks.";
+        readonly shell: "custom (no shell)";
+        readonly blocks: readonly ["Header", "HeroSection", "HeroDarkWithImage", "DestinationCards", "TestimonialCarousel", "FooterNavbar"];
+    };
+    readonly "page-pricing": {
+        readonly path: "/page-pricing";
+        readonly description: "Pricing page with tier cards, FAQ, and feature comparison.";
+        readonly shell: "custom (no shell)";
+        readonly blocks: readonly ["Header", "PricingCards", "FaqAccordion", "FeaturesComparison"];
+    };
+    readonly "page-about": {
+        readonly path: "/page-about";
+        readonly description: "About page with hero, metrics, values, team, and locations.";
+        readonly shell: "custom (no shell)";
+        readonly blocks: readonly ["Header", "CenteredHero", "MetricsSection", "CoreValuesGrid", "TeamCardsGrid"];
+    };
+    readonly "page-account": {
+        readonly path: "/page-account";
+        readonly description: "Account settings with tabbed sidebar navigation.";
+        readonly shell: "AccountSettingsShell";
+        readonly blocks: readonly ["ProfileImageUploader", "SettingsListRow", "CreditCardDisplay"];
+    };
+    readonly "page-centered-profile": {
+        readonly path: "/page-centered-profile";
+        readonly description: "Profile page with centered layout and banner.";
+        readonly shell: "StandardPageShell";
+        readonly blocks: readonly ["ProfileCard", "FlairBanner"];
+    };
+    readonly "page-double-sidebar": {
+        readonly path: "/page-double-sidebar";
+        readonly description: "Dashboard with two-column sidebar navigation.";
+        readonly shell: "DoubleSidebarShell";
+        readonly blocks: readonly ["StandardDataTable"];
+    };
+    readonly "page-icon-sidebar": {
+        readonly path: "/page-icon-sidebar";
+        readonly description: "Dashboard with narrow icon-only sidebar.";
+        readonly shell: "IconSidebarShell";
+        readonly blocks: readonly ["StandardDataTable"];
+    };
+    readonly "page-login": {
+        readonly path: "/page-login";
+        readonly description: "Login page with form and branding panel.";
+        readonly shell: "custom (split layout)";
+        readonly blocks: readonly ["LoginBrandingPanel"];
+    };
+    readonly "page-standard": {
+        readonly path: "/page-standard";
+        readonly description: "Standard centered page with banner and tabs.";
+        readonly shell: "StandardPageShell";
+        readonly blocks: readonly ["FlairBanner", "PageHeaderSection"];
+    };
+    readonly "page-standard-multistep": {
+        readonly path: "/page-standard-multistep";
+        readonly description: "Multi-step form wizard with horizontal step tracker.";
+        readonly shell: "MultistepShell";
+        readonly blocks: readonly ["StepTracker", "ContentDropzone"];
+    };
+    readonly "page-video-chat": {
+        readonly path: "/page-video-chat";
+        readonly description: "Video conferencing interface with webcam, participants, and chat.";
+        readonly shell: "custom (no shell)";
+        readonly blocks: readonly ["WebcamPreview", "VideoChatControls", "ParticipantList", "ChatMessageList"];
+    };
+    readonly "page-video-list": {
+        readonly path: "/page-video-list";
+        readonly description: "Video content page with player and playlist sidebar.";
+        readonly shell: "custom (no shell)";
+        readonly blocks: readonly ["VideoContentSection", "VideoPlaylist", "YouTubePlayer"];
+    };
+    readonly "page-canvas": {
+        readonly path: "/page-canvas";
+        readonly description: "Figma-style infinite canvas whiteboard. Drag components from sidebar palette onto a pannable, zoomable canvas.";
+        readonly shell: "custom (no shell)";
+        readonly blocks: readonly ["InfinityCanvas", "ComponentPalette", "CanvasItem", "Header"];
+    };
+};
+
+/**
+ * CSS Variable Sync Utility
+ *
+ * Provides functions to set CSS variables and broadcast them to iframes
+ * for live preview synchronization.
+ */
+/**
+ * Sets a CSS variable on the document and broadcasts it to all iframes
+ */
+declare function setCSSVariable(name: string, value: string): void;
+/**
+ * Sets multiple CSS variables and broadcasts them to all iframes
+ */
+declare function setCSSVariables(variables: Record<string, string>): void;
+/**
+ * Broadcasts CSS variable changes to all iframes via postMessage
+ */
+declare function broadcastCSSVariables(variables: Record<string, string>): void;
+/**
+ * Hook for pages to listen for CSS variable updates from parent window
+ * Call this in page layouts that might be rendered in iframes
+ */
+declare function setupCSSVariableListener(): () => void;
+
+/**
+ * Hook that listens for CSS variable updates from parent window.
+ * Use this in page layouts that might be rendered in iframes.
+ *
+ * @example
+ * ```tsx
+ * export function MyPageLayout() {
+ *   useCSSVariableSync();
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+declare function useCSSVariableSync(): void;
+
+declare function useIsMobile(): boolean;
+
+type IconShapeId = "rounded" | "circle" | "square";
+interface ThemeBranding {
+    iconShape: IconShapeId;
+    iconName: string;
+    bgColor: string;
+    iconColor: string;
+    wordmark: string;
+}
+interface ThemeImages {
+    logoLight: string;
+    logoDark: string;
+    faviconLight: string;
+    faviconDark: string;
+}
+interface BrandAsset {
+    id: string;
+    name: string;
+    url: string;
+    storedInPublic?: boolean;
+}
+interface ThemeContextValue {
+    images: ThemeImages;
+    branding: ThemeBranding;
+    brandAssets: BrandAsset[];
+    isMounted: boolean;
+}
+interface PreviewBrandingContextValue {
+    previewBranding: ThemeBranding | null;
+    setPreviewBranding: (branding: ThemeBranding | null) => void;
+}
+declare const ThemeContext: React$1.Context<ThemeContextValue>;
+declare const PreviewBrandingContext: React$1.Context<PreviewBrandingContextValue>;
+declare function useThemeImages(): ThemeImages;
+declare function useThemeBranding(): {
+    branding: ThemeBranding;
+    isMounted: boolean;
+};
+declare function usePreviewBranding(): PreviewBrandingContextValue;
+declare function useThemeBrandAssets(): BrandAsset[];
+interface ThemeProviderProps {
+    children: ReactNode;
+    images?: ThemeImages;
+    branding?: ThemeBranding;
+    brandAssets?: BrandAsset[];
+}
+/**
+ * ThemeProvider for the SDK
+ *
+ * This provider allows parent applications to pass in theme values.
+ * If no values are provided, sensible defaults are used.
+ *
+ * Usage in your app:
+ * ```tsx
+ * <ThemeProvider
+ *   images={{ logoLight: "/logo.png", ... }}
+ *   branding={{ wordmark: "MyApp", ... }}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare function ThemeProvider({ children, images, branding, brandAssets, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+export { AccountSettingsShell, type AccountTab, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, type BrandAsset, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, type CustomButtonStyle, CustomComponentHelper, DashboardHeader, type DashboardHeaderProps, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DonutChartLegendItem, DonutChartWidget, type DonutChartWidgetProps, DoubleSidebar, type DoubleSidebarSection, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, type FilterCheckboxGroupConfig, type FilterDateRangeConfig, type FilterDropdownConfig, type FilterOption$c as FilterOption, FilterPopover, type FilterState, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GraphMetricTilesDemo, type GraphMetricTilesDemoProps, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, type IconNavItemConfig, type IconShapeId, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, type ImageKey, ImageUploader, InfoCard, type InfoCardProps, Input, Label, LargeImageLabelsList, Sidebar as LayoutSidebar, LineChartWidget, type LineChartWidgetProps, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, MetricCard, type MetricCardData, type MetricCardProps, MetricCardsRow, type MetricCardsRowProps, MetricListCard, type MetricListCardProps, type MetricListItem, MetricsSection, MobileBottomNav, MobileMenuShell, type MobileNavTabConfig, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, type MultistepProgressBarShellProps, type MultistepProgressBarStep, MultistepShell, MultistepSidebarShell, type NavItem, type NavSection, type NavTab, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, type Persona, PersonaCard, PersonaGrid, PillTabs, type PillTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, type ProgressBarItem, ProgressMetricCard, type ProgressMetricCardProps, type ProjectContext, ProjectContextShell, type ProjectContextTab, PromptChipsRow, PromptTemplate, RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, type Screen, type ScreenConnection, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, type ScreenStatus, type ScreenType, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar$1 as Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, type SortOption$b as SortOption, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, type Step, StepTracker, Switch, type TableColumn, type TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, type ThemeBranding, ThemeContext, type ThemeImages, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoColumnWidgets, type TwoColumnWidgetsProps, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };