canvas-ui-sdk 0.3.17 → 0.3.19

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import { ReactNode } from 'react';
+import React__default, { 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';
@@ -1370,7 +1370,7 @@ interface ContentDropzoneProps {
  *
  * 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.
+ * When children are added, becomes a flex column with 32px (--spacing-4xl) gap between blocks.
  */
 declare function ContentDropzone({ height, className, children, }: ContentDropzoneProps): react_jsx_runtime.JSX.Element;
 
@@ -2966,47 +2966,6 @@ interface CreditCardDisplayProps {
  */
 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;
@@ -4228,8 +4187,8 @@ declare const blocks: {
     };
     readonly ContentDropzone: {
         readonly path: "@/components/blocks";
-        readonly description: "Placeholder dropzone for content areas during development.";
-        readonly props: readonly ["label?", "className?"];
+        readonly description: "Placeholder dropzone for content areas. Shows dashed placeholder when empty; arranges children in a flex column with 32px (--spacing-4xl) gap between blocks. Within a block, use 12px (--spacing-lg) gap between title groups and their content.";
+        readonly props: readonly ["height?", "className?", "children?"];
     };
     readonly UpvotingPostsTable: {
         readonly path: "@/components/blocks";
@@ -4349,23 +4308,6 @@ declare const groupModalDrawerBlocks: {
         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";
@@ -4632,12 +4574,6 @@ declare const pageTemplates: {
         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"];
-    };
 };
 
 /**
@@ -4663,13 +4599,24 @@ declare function removeCSSVariables(names: string[]): void;
  */
 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
+ * Broadcasts branding changes to all iframes via postMessage
+ */
+declare function broadcastBranding(branding: Record<string, string> | null): void;
+/**
+ * Broadcasts image changes to all iframes via postMessage
+ */
+declare function broadcastImages(images: Record<string, string> | null): void;
+/**
+ * Sets up a listener for CSS variable, branding, and image updates from parent window.
+ * Call this in page layouts that might be rendered in iframes.
  */
-declare function setupCSSVariableListener(): () => void;
+declare function setupCSSVariableListener(options?: {
+    onBrandingUpdate?: (branding: Record<string, string> | null) => void;
+    onImagesUpdate?: (images: Record<string, string> | null) => void;
+}): () => void;
 
 /**
- * Hook that listens for CSS variable updates from parent window.
+ * Hook that listens for CSS variable, branding, and image updates from parent window.
  * Use this in page layouts that might be rendered in iframes.
  *
  * @example
@@ -4680,7 +4627,10 @@ declare function setupCSSVariableListener(): () => void;
  * }
  * ```
  */
-declare function useCSSVariableSync(): void;
+declare function useCSSVariableSync(options?: {
+    onBrandingUpdate?: (branding: Record<string, string> | null) => void;
+    onImagesUpdate?: (images: Record<string, string> | null) => void;
+}): void;
 
 declare function useIsMobile(): boolean;
 
@@ -4785,6 +4735,7 @@ interface ThemeState {
     setBrandVibrancy: (vibrancy: number) => void;
     setSyncRelatedColors: (sync: boolean) => void;
     applyBrandHueVibrancy: (hue: number, vibrancy: number, skipPrimary?: boolean) => void;
+    hasCustomizations: boolean;
 }
 
 type PanelId = "colors" | "images" | "typography" | "buttons" | "inputs" | "export";
@@ -4811,8 +4762,12 @@ interface ThemeDrawerProps {
     title?: string;
     width?: number;
     readOnly?: boolean;
+    hideSave?: boolean;
+    docked?: boolean;
+    stickyTopOffset?: number;
+    children?: React__default.ReactNode;
 }
-declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, onBrandingChange, onImagesChange, onImageUpload, onSave, initialOverrides, initialBranding, initialImages, initialCustomButtonStyles, storageKey, title, width, readOnly, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
+declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, onBrandingChange, onImagesChange, onImageUpload, onSave, initialOverrides, initialBranding, initialImages, initialCustomButtonStyles, storageKey, title, width, readOnly, hideSave, docked, stickyTopOffset, children, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
 
 interface HslColorPickerProps {
     value: string;
@@ -4837,4 +4792,4 @@ interface ColorInputRowProps {
  */
 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, 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, 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, TitleGroup, type TitleGroupProps, 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 };
+export { AccountSettingsShell, type AccountTab, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, type BrandAsset, type BrandingState, Button, Calendar, CategoryGrid, CenteredHero, ChatBubble, type ChatBubbleMessage, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, type CircularProgressBarListProps, type CircularProgressBarProps, ColorInputRow, 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, 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, TitleGroup, type TitleGroupProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, UpvotingPostsTable, type VariableOption, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastBranding, broadcastCSSVariables, broadcastImages, buttonVariants, 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 };