canvas-ui-sdk 0.1.7 → 0.3.0

package/dist/index.d.ts

@@ -4670,6 +4670,8 @@ interface ThemeContextValue {
 interface PreviewBrandingContextValue {
     previewBranding: ThemeBranding | null;
     setPreviewBranding: (branding: ThemeBranding | null) => void;
+    previewImages: ThemeImages | null;
+    setPreviewImages: (images: ThemeImages | null) => void;
 }
 declare const ThemeContext: React$1.Context<ThemeContextValue>;
 declare const PreviewBrandingContext: React$1.Context<PreviewBrandingContextValue>;
@@ -4704,16 +4706,82 @@ interface ThemeProviderProps {
  */
 declare function ThemeProvider({ children, images, branding, brandAssets, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-type PanelId = "colors" | "typography" | "buttons" | "inputs" | "export";
+interface BrandingState {
+    iconShape: IconShapeId$1;
+    iconName: string;
+    bgColor: string;
+    iconColor: string;
+    wordmark: string;
+}
+interface ThemeState {
+    variables: Record<string, string>;
+    overrides: Record<string, string>;
+    isDirty: boolean;
+    unsavedChangesCount: number;
+    setVariable: (name: string, value: string) => void;
+    resetCategory: (prefix: string) => void;
+    resetAll: () => void;
+    exportCSS: () => string;
+    exportJSON: () => string;
+    importJSON: (json: string) => boolean;
+    save: () => void;
+    discard: () => void;
+    branding: BrandingState;
+    setBranding: (updates: Partial<BrandingState>) => void;
+    images: Record<ImageKey, string>;
+    setImage: (key: ImageKey, url: string) => void;
+    deleteImage: (key: ImageKey) => void;
+    customButtonStyles: CustomButtonStyle[];
+    addCustomButtonStyle: () => void;
+    updateCustomButtonStyle: (id: string, updates: Partial<CustomButtonStyle>) => void;
+    deleteCustomButtonStyle: (id: string) => void;
+    brandHue: number;
+    brandVibrancy: number;
+    syncRelatedColors: boolean;
+    setBrandHue: (hue: number) => void;
+    setBrandVibrancy: (vibrancy: number) => void;
+    setSyncRelatedColors: (sync: boolean) => void;
+    applyBrandHueVibrancy: (hue: number, vibrancy: number, skipPrimary?: boolean) => void;
+}
+
+type PanelId = "colors" | "images" | "typography" | "buttons" | "inputs" | "export";
 interface ThemeDrawerProps {
     devOnly?: boolean;
     triggerPosition?: "bottom-right" | "bottom-left";
     defaultOpen?: boolean;
     panels?: PanelId[];
     onThemeChange?: (overrides: Record<string, string>) => void;
+    onBrandingChange?: (branding: BrandingState) => void;
+    onImagesChange?: (images: Record<ImageKey, string>) => void;
+    onImageUpload?: (key: ImageKey, file: File) => Promise<string>;
     initialOverrides?: Record<string, string>;
     storageKey?: string;
+    title?: string;
+    width?: number;
+}
+declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, onBrandingChange, onImagesChange, onImageUpload, initialOverrides, storageKey, title, width, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
+
+interface HslColorPickerProps {
+    value: string;
+    onChange: (hex: string) => void;
+}
+declare function HslColorPicker({ value, onChange }: HslColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface VariableOption {
+    value: string;
+    label: string;
 }
-declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, initialOverrides, storageKey, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
+interface ColorInputRowProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    variableOptions?: VariableOption[];
+}
+/**
+ * Reusable color row: swatch (opens HSL picker) + label + hex input.
+ * When variableOptions is provided, shows a dropdown for CSS variable references
+ * with a "Custom Color" option that enables the HSL picker.
+ */
+declare function ColorInputRow({ label, value, onChange, variableOptions, }: ColorInputRowProps): 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, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, 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, 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, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, 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 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, ThemeDrawer, type ThemeImages, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, 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, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
+export { AccountSettingsShell, type AccountTab, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, type BrandAsset, type BrandingState, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ColorInputRow, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, type CustomButtonStyle, CustomComponentHelper, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, 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, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, HslColorPicker, type IconNavItemConfig, type IconShapeId, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, type ImageKey, ImageUploader, InfoCard, type InfoCardProps, Input, Label, LargeImageLabelsList, Sidebar as LayoutSidebar, type LineTab, LineTabs, type LinkItem, LinksCard, type LinksCardProps, Loader, LoginBrandingPanel, MenuSection, type MenufocusItem, MenufocusTemplate, type MenufocusTemplateProps, MessengerInput, MessengerSidebar, 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 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, ThemeDrawer, type ThemeImages, ThemeProvider, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, UpvotingPostsTable, type VariableOption, 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, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };