@snowcone-app/ui 0.8.1 → 0.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/index.cjs +78 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +46 -3
- package/dist/index.d.ts +46 -3
- package/dist/index.js +103 -45
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/composed/PlacementTabs.tsx +117 -19
- package/src/composed/__tests__/PlacementTabs.linked.test.tsx +144 -0
- package/src/patterns/RealtimeProvider.tsx +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -2306,7 +2306,31 @@ interface PlacementTabsProps {
|
|
|
2306
2306
|
toolbarSize?: number;
|
|
2307
2307
|
/** Additional className for the container */
|
|
2308
2308
|
className?: string;
|
|
2309
|
-
|
|
2309
|
+
/**
|
|
2310
|
+
* Linked placements (ADR-0101): one design on every print area.
|
|
2311
|
+
*
|
|
2312
|
+
* - `true` — LINKED. Renders one non-interactive pill naming the set
|
|
2313
|
+
* ("Both sides" for two placements, "All N areas" otherwise; the labels
|
|
2314
|
+
* in its `title`) plus a single **Customize separately** action
|
|
2315
|
+
* (`onSplitAll`). No per-placement tabs: there is one design to edit.
|
|
2316
|
+
* - `false` — SPLIT. Renders the per-placement tabs plus one
|
|
2317
|
+
* **Use one design for all** action (`onLinkAll`).
|
|
2318
|
+
* - `undefined` (default) — no link model: plain tabs, exactly as before.
|
|
2319
|
+
*/
|
|
2320
|
+
linked?: boolean;
|
|
2321
|
+
/** Linked → split: every placement gets its own copy of the design. */
|
|
2322
|
+
onSplitAll?: () => void;
|
|
2323
|
+
/** Split → linked: drop the per-placement copies, back to one design. */
|
|
2324
|
+
onLinkAll?: () => void;
|
|
2325
|
+
/** Override the linked pill's copy (localisation). */
|
|
2326
|
+
linkedLabel?: string;
|
|
2327
|
+
/** Override the "Customize separately" action copy. */
|
|
2328
|
+
splitAllLabel?: string;
|
|
2329
|
+
/** Override the "Use one design for all" action copy. */
|
|
2330
|
+
linkAllLabel?: string;
|
|
2331
|
+
}
|
|
2332
|
+
/** Default pill copy for a linked set of `count` placements. */
|
|
2333
|
+
declare function linkedPlacementsLabel(count: number): string;
|
|
2310
2334
|
/**
|
|
2311
2335
|
* PlacementTabs - Renders placement tabs with optional floating toolbar placeholder.
|
|
2312
2336
|
*
|
|
@@ -2314,6 +2338,11 @@ interface PlacementTabsProps {
|
|
|
2314
2338
|
* to flow around the toolbar placeholder. On desktop, renders simple tabs
|
|
2315
2339
|
* without the toolbar placeholder (toolbar is typically in header).
|
|
2316
2340
|
*
|
|
2341
|
+
* The container carries `data-placement-tabs` and, when the link model is in
|
|
2342
|
+
* play, `data-linked="true" | "false"`; the pill is `data-placement-pill`
|
|
2343
|
+
* and the actions are `data-action="split-all" | "link-all"` so hosts and
|
|
2344
|
+
* agents can assert the state instead of reading pixels.
|
|
2345
|
+
*
|
|
2317
2346
|
* @example
|
|
2318
2347
|
* ```tsx
|
|
2319
2348
|
* // Basic usage
|
|
@@ -2333,9 +2362,19 @@ interface PlacementTabsProps {
|
|
|
2333
2362
|
* onPlacementChange={setSelected}
|
|
2334
2363
|
* isDesktop
|
|
2335
2364
|
* />
|
|
2365
|
+
*
|
|
2366
|
+
* // Linked by default (ADR-0101): one design on every area
|
|
2367
|
+
* <PlacementTabs
|
|
2368
|
+
* placements={placements}
|
|
2369
|
+
* selectedPlacement={selected}
|
|
2370
|
+
* onPlacementChange={setSelected}
|
|
2371
|
+
* linked={linked}
|
|
2372
|
+
* onSplitAll={splitAll}
|
|
2373
|
+
* onLinkAll={linkAll}
|
|
2374
|
+
* />
|
|
2336
2375
|
* ```
|
|
2337
2376
|
*/
|
|
2338
|
-
declare function PlacementTabs({ placements, selectedPlacement, onPlacementChange, isDesktop, toolbarPlaceholderId, toolbarSize, className, }: PlacementTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
2377
|
+
declare function PlacementTabs({ placements, selectedPlacement, onPlacementChange, isDesktop, toolbarPlaceholderId, toolbarSize, className, linked, onSplitAll, onLinkAll, linkedLabel, splitAllLabel, linkAllLabel, }: PlacementTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
2339
2378
|
|
|
2340
2379
|
/**
|
|
2341
2380
|
* usePlacementsProcessor - Process placement prop to separate colors from images
|
|
@@ -2952,6 +2991,10 @@ interface RealtimeContextValue {
|
|
|
2952
2991
|
y: number;
|
|
2953
2992
|
width: number;
|
|
2954
2993
|
height: number;
|
|
2994
|
+
part?: {
|
|
2995
|
+
index: number;
|
|
2996
|
+
count: number;
|
|
2997
|
+
};
|
|
2955
2998
|
}>;
|
|
2956
2999
|
}> | undefined) => void;
|
|
2957
3000
|
getMockupResultsImmediate: () => MockupResult[];
|
|
@@ -5595,4 +5638,4 @@ declare function normalizeHex(color: string): string;
|
|
|
5595
5638
|
*/
|
|
5596
5639
|
declare function scrollInputAboveKeyboard(input: HTMLElement): void;
|
|
5597
5640
|
|
|
5598
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddToCart, type AddToCartProps, ArtAlignment, type ArtAlignmentProps, ArtSelector, type ArtSelectorProps, type Artwork, ArtworkCustomizer, type ArtworkCustomizerProps, Badge, type BadgeProps, BrandLogo, type BrandLogoProps, BrandName, type BrandNameProps, Button, type ButtonProps, CanvasEditor, type CanvasExportServiceConfig, CanvasIsolationBoundary, CanvasIsolationConfigurator, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CarouselImage, type CarouselRenderProps, Checkbox, Chip, type ClipShape, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ColorPalette, ColorPicker, type ColorPickerProps, ColorRow, ColorSwatch, type ColorSwatchChoice, type ColorSwatchProps, ColorTokenSwatch, type ContentRenderProps, CurrentRefinements, CurrentSelectionDisplay, type CurrentSelectionDisplayProps, DEFAULT_HERO_ZOOM_CONFIG, DEFAULT_IMAGE_CONFIG, DEFAULT_VISIBILITY_OPTIONS, DesignSystemPage, type DeviceDetectionResult, Disclosure, DisclosureContent, DisclosureTrigger, DragHintAnimation, type DragHintAnimationProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EdgeBlurBox, type EdgeBlurBoxProps, EdgeSwipeGuards, type EdgeSwipeGuardsProps, EnhancedImageViewer, FACET_SECTIONS, type FacetSection, type FacetType, Fieldset, type FieldsetProps, Filters, FiltersButton, type FiltersButtonProps, FiltersDrawer, type FiltersProps, FloatingActionGroup, type FloatingActionGroupProps, type FloatingActionItem, type FormatCurrencyOptions, HeroCarousel, type HeroCarouselProps, type HeroImage, type HeroImageRenderProps, HeroProductImage, type HeroProductImageProps, type HeroShrinkConfig, HeroShrinkLayout, type HeroShrinkLayoutProps, type HeroZoomConfig, HeroZoomLayout, type HeroZoomLayoutProps, type HeroZoomScales, HorizontalProgressiveBlur, type HorizontalProgressiveBlurProps, Drawer as IOSDrawer, DrawerClose as IOSDrawerClose, DrawerContent as IOSDrawerContent, DrawerDescription as IOSDrawerDescription, DrawerFooter as IOSDrawerFooter, DrawerHeader as IOSDrawerHeader, DrawerTitle as IOSDrawerTitle, DrawerTrigger as IOSDrawerTrigger, ImageBlurExtension, type ImageBlurExtensionProps, ImageEdgeBlur, type ImageEdgeBlurProps, type ImageLayer, type ImageUpdateRequest, Input, type InputProps, Kbd, type KbdProps, Label, Legend, type LegendProps, Lightbox, type LightboxProps, Link, LinkIcon, type LinkProps, LoadingOverlayPrism, LoadingOverlayPrismCandy, LoadingOverlayPrismCandyInline, type LoadingOverlayPrismCandyProps, type LoadingOverlayPrismProps, MasonryGrid, type MasonryGridProps, MobileProductCarousel, type MobileProductCarouselProps, MockupBackground, type MockupBackgroundProps, type MockupPriorityContextValue, MockupPriorityProvider, type MockupPriorityProviderProps, type MockupResult, PDPLayout, type PDPLayoutProps, PersonalizationField, PersonalizationInputs, PersonalizationProvider, PersonalizationValues, PlacementClipShapeSelector, type PlacementConfig, type PlacementDesign, PlacementTabs, type PlacementTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, type PriorityLevel, Product, ProductCard, type ProductCardProps, ProductContext, type ProductDataMode, ProductGallery, type ProductGalleryProps, ProductGrid, type ProductGridProps, type ProductHit, ProductHitComponent, ProductImage, type Artwork$1 as ProductImageArtwork, type ProductImageProps, ProductList, type ProductListProps, ProductOptions, type ProductPageContext, ProductPageProvider, ProductPageProviderMinimal, type ProductPageProviderMinimalProps, type ProductPageProviderProps, ProductPrice, type ProductPriceProps, type ProductProviderProps, ProgressiveBlur, type ProgressiveBlurProps, type ProviderStatus, Radio, RadioGroup, RadioGroupItem, RadiusScale, type ReactProductContext, type RealtimeContextValue, RealtimeMockup, type RealtimeMockupProps, RealtimeProvider, type RealtimeProviderProps, type RealtimeState, type RegularArtwork$1 as RegularArtwork, type ResponsiveColumns, type ResponsiveImageCapInfo, type ResponsiveImageCapOptions, ResponsiveZoom, RightToLeftProgressiveBlur, type RightToLeftProgressiveBlurProps, SafeImg, type SafeImgProps, type ScrollDirection, ScrollFade, type ScrollFadeProps, type ScrollState, type SeamlessPattern$1 as SeamlessPattern, SearchBox, SearchProvider, type SearchProviderProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Shop, ShopContext, type ShopContextValue, type ShopProps, SimpleImageBlur, type SimpleImageBlurProps, Slider, SliderFill, SliderOutput, SliderThumb, SliderTrack, Spinner, type SpinnerProps, Surface, SurfaceContext, type SurfaceProps, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, TextArea, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeSwitcher, ThemeToggle, type ThemeToggleProps, TileCount, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, TypographyScale, type UiRouter, UiRouterProvider, type UseBrandResult, type UseImagePreloaderOptions, type UseImagePreloaderReturn, type UseImageTransitionOptions, type UseImageTransitionReturn, type UsePersonalizationShimmerReturn, type UseProductGalleryOptions, type UseProductGalleryReturn, VISIBILITY_THRESHOLDS, type ViewportDimensions, type ZoomImage, ZoomOverlay, badgeVariants, brandAssets, buttonVariants, canvasExportService, checkComponentStyles, checkTailwindConfig, checkThemeTokens, createScrollDirectionTracker, formatCurrency, formatDate, formatDateTime, getBrand, getObservedElementCount, getObserverCount, hasEdgeBlur, isObserved, isWideMonitor, kbdVariants, linkVariants, normalizeHex, observe, runConfigChecks, scrollInputAboveKeyboard, searchClient, spinnerVariants, surfaceVariants, useArtworkAlignment, useBrand, useCanvasContext, useCanvasContextStatic, useCurrentPlacements, useDesign, useDesignOptional, useDeviceDetection, useFocusTrap, useHeroZoomScales, useImagePreloader, useImageTransition, useIsolatedCanvas, useLoadingOverlay, useMediaQuery, useMockupBackgroundOptional, useMockupPriority, useMockupPriorityOptional, usePersonalization, usePersonalizationOptional, usePersonalizationShimmer, usePlacementClipShape, usePlacementsProcessor, useProduct, useProductGallery, useProductOptional, useProductPage, useProductPageOptional, useProductSelection, useProviderStatus, useRealtime, useRealtimeOptional, useRenderCount, useRenderGuard, useResponsiveImageCap, useScrollDirection, useSelectedArtwork, useSetArtworkAlignment, useShop, useShopOptional, useSurface, useViewportDimensions, useWideMonitorMode };
|
|
5641
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddToCart, type AddToCartProps, ArtAlignment, type ArtAlignmentProps, ArtSelector, type ArtSelectorProps, type Artwork, ArtworkCustomizer, type ArtworkCustomizerProps, Badge, type BadgeProps, BrandLogo, type BrandLogoProps, BrandName, type BrandNameProps, Button, type ButtonProps, CanvasEditor, type CanvasExportServiceConfig, CanvasIsolationBoundary, CanvasIsolationConfigurator, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CarouselImage, type CarouselRenderProps, Checkbox, Chip, type ClipShape, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ColorPalette, ColorPicker, type ColorPickerProps, ColorRow, ColorSwatch, type ColorSwatchChoice, type ColorSwatchProps, ColorTokenSwatch, type ContentRenderProps, CurrentRefinements, CurrentSelectionDisplay, type CurrentSelectionDisplayProps, DEFAULT_HERO_ZOOM_CONFIG, DEFAULT_IMAGE_CONFIG, DEFAULT_VISIBILITY_OPTIONS, DesignSystemPage, type DeviceDetectionResult, Disclosure, DisclosureContent, DisclosureTrigger, DragHintAnimation, type DragHintAnimationProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EdgeBlurBox, type EdgeBlurBoxProps, EdgeSwipeGuards, type EdgeSwipeGuardsProps, EnhancedImageViewer, FACET_SECTIONS, type FacetSection, type FacetType, Fieldset, type FieldsetProps, Filters, FiltersButton, type FiltersButtonProps, FiltersDrawer, type FiltersProps, FloatingActionGroup, type FloatingActionGroupProps, type FloatingActionItem, type FormatCurrencyOptions, HeroCarousel, type HeroCarouselProps, type HeroImage, type HeroImageRenderProps, HeroProductImage, type HeroProductImageProps, type HeroShrinkConfig, HeroShrinkLayout, type HeroShrinkLayoutProps, type HeroZoomConfig, HeroZoomLayout, type HeroZoomLayoutProps, type HeroZoomScales, HorizontalProgressiveBlur, type HorizontalProgressiveBlurProps, Drawer as IOSDrawer, DrawerClose as IOSDrawerClose, DrawerContent as IOSDrawerContent, DrawerDescription as IOSDrawerDescription, DrawerFooter as IOSDrawerFooter, DrawerHeader as IOSDrawerHeader, DrawerTitle as IOSDrawerTitle, DrawerTrigger as IOSDrawerTrigger, ImageBlurExtension, type ImageBlurExtensionProps, ImageEdgeBlur, type ImageEdgeBlurProps, type ImageLayer, type ImageUpdateRequest, Input, type InputProps, Kbd, type KbdProps, Label, Legend, type LegendProps, Lightbox, type LightboxProps, Link, LinkIcon, type LinkProps, LoadingOverlayPrism, LoadingOverlayPrismCandy, LoadingOverlayPrismCandyInline, type LoadingOverlayPrismCandyProps, type LoadingOverlayPrismProps, MasonryGrid, type MasonryGridProps, MobileProductCarousel, type MobileProductCarouselProps, MockupBackground, type MockupBackgroundProps, type MockupPriorityContextValue, MockupPriorityProvider, type MockupPriorityProviderProps, type MockupResult, PDPLayout, type PDPLayoutProps, PersonalizationField, PersonalizationInputs, PersonalizationProvider, PersonalizationValues, PlacementClipShapeSelector, type PlacementConfig, type PlacementDesign, PlacementTabs, type PlacementTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, type PriorityLevel, Product, ProductCard, type ProductCardProps, ProductContext, type ProductDataMode, ProductGallery, type ProductGalleryProps, ProductGrid, type ProductGridProps, type ProductHit, ProductHitComponent, ProductImage, type Artwork$1 as ProductImageArtwork, type ProductImageProps, ProductList, type ProductListProps, ProductOptions, type ProductPageContext, ProductPageProvider, ProductPageProviderMinimal, type ProductPageProviderMinimalProps, type ProductPageProviderProps, ProductPrice, type ProductPriceProps, type ProductProviderProps, ProgressiveBlur, type ProgressiveBlurProps, type ProviderStatus, Radio, RadioGroup, RadioGroupItem, RadiusScale, type ReactProductContext, type RealtimeContextValue, RealtimeMockup, type RealtimeMockupProps, RealtimeProvider, type RealtimeProviderProps, type RealtimeState, type RegularArtwork$1 as RegularArtwork, type ResponsiveColumns, type ResponsiveImageCapInfo, type ResponsiveImageCapOptions, ResponsiveZoom, RightToLeftProgressiveBlur, type RightToLeftProgressiveBlurProps, SafeImg, type SafeImgProps, type ScrollDirection, ScrollFade, type ScrollFadeProps, type ScrollState, type SeamlessPattern$1 as SeamlessPattern, SearchBox, SearchProvider, type SearchProviderProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Shop, ShopContext, type ShopContextValue, type ShopProps, SimpleImageBlur, type SimpleImageBlurProps, Slider, SliderFill, SliderOutput, SliderThumb, SliderTrack, Spinner, type SpinnerProps, Surface, SurfaceContext, type SurfaceProps, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, TextArea, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeSwitcher, ThemeToggle, type ThemeToggleProps, TileCount, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, TypographyScale, type UiRouter, UiRouterProvider, type UseBrandResult, type UseImagePreloaderOptions, type UseImagePreloaderReturn, type UseImageTransitionOptions, type UseImageTransitionReturn, type UsePersonalizationShimmerReturn, type UseProductGalleryOptions, type UseProductGalleryReturn, VISIBILITY_THRESHOLDS, type ViewportDimensions, type ZoomImage, ZoomOverlay, badgeVariants, brandAssets, buttonVariants, canvasExportService, checkComponentStyles, checkTailwindConfig, checkThemeTokens, createScrollDirectionTracker, formatCurrency, formatDate, formatDateTime, getBrand, getObservedElementCount, getObserverCount, hasEdgeBlur, isObserved, isWideMonitor, kbdVariants, linkVariants, linkedPlacementsLabel, normalizeHex, observe, runConfigChecks, scrollInputAboveKeyboard, searchClient, spinnerVariants, surfaceVariants, useArtworkAlignment, useBrand, useCanvasContext, useCanvasContextStatic, useCurrentPlacements, useDesign, useDesignOptional, useDeviceDetection, useFocusTrap, useHeroZoomScales, useImagePreloader, useImageTransition, useIsolatedCanvas, useLoadingOverlay, useMediaQuery, useMockupBackgroundOptional, useMockupPriority, useMockupPriorityOptional, usePersonalization, usePersonalizationOptional, usePersonalizationShimmer, usePlacementClipShape, usePlacementsProcessor, useProduct, useProductGallery, useProductOptional, useProductPage, useProductPageOptional, useProductSelection, useProviderStatus, useRealtime, useRealtimeOptional, useRenderCount, useRenderGuard, useResponsiveImageCap, useScrollDirection, useSelectedArtwork, useSetArtworkAlignment, useShop, useShopOptional, useSurface, useViewportDimensions, useWideMonitorMode };
|
package/dist/index.d.ts
CHANGED
|
@@ -2306,7 +2306,31 @@ interface PlacementTabsProps {
|
|
|
2306
2306
|
toolbarSize?: number;
|
|
2307
2307
|
/** Additional className for the container */
|
|
2308
2308
|
className?: string;
|
|
2309
|
-
|
|
2309
|
+
/**
|
|
2310
|
+
* Linked placements (ADR-0101): one design on every print area.
|
|
2311
|
+
*
|
|
2312
|
+
* - `true` — LINKED. Renders one non-interactive pill naming the set
|
|
2313
|
+
* ("Both sides" for two placements, "All N areas" otherwise; the labels
|
|
2314
|
+
* in its `title`) plus a single **Customize separately** action
|
|
2315
|
+
* (`onSplitAll`). No per-placement tabs: there is one design to edit.
|
|
2316
|
+
* - `false` — SPLIT. Renders the per-placement tabs plus one
|
|
2317
|
+
* **Use one design for all** action (`onLinkAll`).
|
|
2318
|
+
* - `undefined` (default) — no link model: plain tabs, exactly as before.
|
|
2319
|
+
*/
|
|
2320
|
+
linked?: boolean;
|
|
2321
|
+
/** Linked → split: every placement gets its own copy of the design. */
|
|
2322
|
+
onSplitAll?: () => void;
|
|
2323
|
+
/** Split → linked: drop the per-placement copies, back to one design. */
|
|
2324
|
+
onLinkAll?: () => void;
|
|
2325
|
+
/** Override the linked pill's copy (localisation). */
|
|
2326
|
+
linkedLabel?: string;
|
|
2327
|
+
/** Override the "Customize separately" action copy. */
|
|
2328
|
+
splitAllLabel?: string;
|
|
2329
|
+
/** Override the "Use one design for all" action copy. */
|
|
2330
|
+
linkAllLabel?: string;
|
|
2331
|
+
}
|
|
2332
|
+
/** Default pill copy for a linked set of `count` placements. */
|
|
2333
|
+
declare function linkedPlacementsLabel(count: number): string;
|
|
2310
2334
|
/**
|
|
2311
2335
|
* PlacementTabs - Renders placement tabs with optional floating toolbar placeholder.
|
|
2312
2336
|
*
|
|
@@ -2314,6 +2338,11 @@ interface PlacementTabsProps {
|
|
|
2314
2338
|
* to flow around the toolbar placeholder. On desktop, renders simple tabs
|
|
2315
2339
|
* without the toolbar placeholder (toolbar is typically in header).
|
|
2316
2340
|
*
|
|
2341
|
+
* The container carries `data-placement-tabs` and, when the link model is in
|
|
2342
|
+
* play, `data-linked="true" | "false"`; the pill is `data-placement-pill`
|
|
2343
|
+
* and the actions are `data-action="split-all" | "link-all"` so hosts and
|
|
2344
|
+
* agents can assert the state instead of reading pixels.
|
|
2345
|
+
*
|
|
2317
2346
|
* @example
|
|
2318
2347
|
* ```tsx
|
|
2319
2348
|
* // Basic usage
|
|
@@ -2333,9 +2362,19 @@ interface PlacementTabsProps {
|
|
|
2333
2362
|
* onPlacementChange={setSelected}
|
|
2334
2363
|
* isDesktop
|
|
2335
2364
|
* />
|
|
2365
|
+
*
|
|
2366
|
+
* // Linked by default (ADR-0101): one design on every area
|
|
2367
|
+
* <PlacementTabs
|
|
2368
|
+
* placements={placements}
|
|
2369
|
+
* selectedPlacement={selected}
|
|
2370
|
+
* onPlacementChange={setSelected}
|
|
2371
|
+
* linked={linked}
|
|
2372
|
+
* onSplitAll={splitAll}
|
|
2373
|
+
* onLinkAll={linkAll}
|
|
2374
|
+
* />
|
|
2336
2375
|
* ```
|
|
2337
2376
|
*/
|
|
2338
|
-
declare function PlacementTabs({ placements, selectedPlacement, onPlacementChange, isDesktop, toolbarPlaceholderId, toolbarSize, className, }: PlacementTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
2377
|
+
declare function PlacementTabs({ placements, selectedPlacement, onPlacementChange, isDesktop, toolbarPlaceholderId, toolbarSize, className, linked, onSplitAll, onLinkAll, linkedLabel, splitAllLabel, linkAllLabel, }: PlacementTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
2339
2378
|
|
|
2340
2379
|
/**
|
|
2341
2380
|
* usePlacementsProcessor - Process placement prop to separate colors from images
|
|
@@ -2952,6 +2991,10 @@ interface RealtimeContextValue {
|
|
|
2952
2991
|
y: number;
|
|
2953
2992
|
width: number;
|
|
2954
2993
|
height: number;
|
|
2994
|
+
part?: {
|
|
2995
|
+
index: number;
|
|
2996
|
+
count: number;
|
|
2997
|
+
};
|
|
2955
2998
|
}>;
|
|
2956
2999
|
}> | undefined) => void;
|
|
2957
3000
|
getMockupResultsImmediate: () => MockupResult[];
|
|
@@ -5595,4 +5638,4 @@ declare function normalizeHex(color: string): string;
|
|
|
5595
5638
|
*/
|
|
5596
5639
|
declare function scrollInputAboveKeyboard(input: HTMLElement): void;
|
|
5597
5640
|
|
|
5598
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddToCart, type AddToCartProps, ArtAlignment, type ArtAlignmentProps, ArtSelector, type ArtSelectorProps, type Artwork, ArtworkCustomizer, type ArtworkCustomizerProps, Badge, type BadgeProps, BrandLogo, type BrandLogoProps, BrandName, type BrandNameProps, Button, type ButtonProps, CanvasEditor, type CanvasExportServiceConfig, CanvasIsolationBoundary, CanvasIsolationConfigurator, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CarouselImage, type CarouselRenderProps, Checkbox, Chip, type ClipShape, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ColorPalette, ColorPicker, type ColorPickerProps, ColorRow, ColorSwatch, type ColorSwatchChoice, type ColorSwatchProps, ColorTokenSwatch, type ContentRenderProps, CurrentRefinements, CurrentSelectionDisplay, type CurrentSelectionDisplayProps, DEFAULT_HERO_ZOOM_CONFIG, DEFAULT_IMAGE_CONFIG, DEFAULT_VISIBILITY_OPTIONS, DesignSystemPage, type DeviceDetectionResult, Disclosure, DisclosureContent, DisclosureTrigger, DragHintAnimation, type DragHintAnimationProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EdgeBlurBox, type EdgeBlurBoxProps, EdgeSwipeGuards, type EdgeSwipeGuardsProps, EnhancedImageViewer, FACET_SECTIONS, type FacetSection, type FacetType, Fieldset, type FieldsetProps, Filters, FiltersButton, type FiltersButtonProps, FiltersDrawer, type FiltersProps, FloatingActionGroup, type FloatingActionGroupProps, type FloatingActionItem, type FormatCurrencyOptions, HeroCarousel, type HeroCarouselProps, type HeroImage, type HeroImageRenderProps, HeroProductImage, type HeroProductImageProps, type HeroShrinkConfig, HeroShrinkLayout, type HeroShrinkLayoutProps, type HeroZoomConfig, HeroZoomLayout, type HeroZoomLayoutProps, type HeroZoomScales, HorizontalProgressiveBlur, type HorizontalProgressiveBlurProps, Drawer as IOSDrawer, DrawerClose as IOSDrawerClose, DrawerContent as IOSDrawerContent, DrawerDescription as IOSDrawerDescription, DrawerFooter as IOSDrawerFooter, DrawerHeader as IOSDrawerHeader, DrawerTitle as IOSDrawerTitle, DrawerTrigger as IOSDrawerTrigger, ImageBlurExtension, type ImageBlurExtensionProps, ImageEdgeBlur, type ImageEdgeBlurProps, type ImageLayer, type ImageUpdateRequest, Input, type InputProps, Kbd, type KbdProps, Label, Legend, type LegendProps, Lightbox, type LightboxProps, Link, LinkIcon, type LinkProps, LoadingOverlayPrism, LoadingOverlayPrismCandy, LoadingOverlayPrismCandyInline, type LoadingOverlayPrismCandyProps, type LoadingOverlayPrismProps, MasonryGrid, type MasonryGridProps, MobileProductCarousel, type MobileProductCarouselProps, MockupBackground, type MockupBackgroundProps, type MockupPriorityContextValue, MockupPriorityProvider, type MockupPriorityProviderProps, type MockupResult, PDPLayout, type PDPLayoutProps, PersonalizationField, PersonalizationInputs, PersonalizationProvider, PersonalizationValues, PlacementClipShapeSelector, type PlacementConfig, type PlacementDesign, PlacementTabs, type PlacementTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, type PriorityLevel, Product, ProductCard, type ProductCardProps, ProductContext, type ProductDataMode, ProductGallery, type ProductGalleryProps, ProductGrid, type ProductGridProps, type ProductHit, ProductHitComponent, ProductImage, type Artwork$1 as ProductImageArtwork, type ProductImageProps, ProductList, type ProductListProps, ProductOptions, type ProductPageContext, ProductPageProvider, ProductPageProviderMinimal, type ProductPageProviderMinimalProps, type ProductPageProviderProps, ProductPrice, type ProductPriceProps, type ProductProviderProps, ProgressiveBlur, type ProgressiveBlurProps, type ProviderStatus, Radio, RadioGroup, RadioGroupItem, RadiusScale, type ReactProductContext, type RealtimeContextValue, RealtimeMockup, type RealtimeMockupProps, RealtimeProvider, type RealtimeProviderProps, type RealtimeState, type RegularArtwork$1 as RegularArtwork, type ResponsiveColumns, type ResponsiveImageCapInfo, type ResponsiveImageCapOptions, ResponsiveZoom, RightToLeftProgressiveBlur, type RightToLeftProgressiveBlurProps, SafeImg, type SafeImgProps, type ScrollDirection, ScrollFade, type ScrollFadeProps, type ScrollState, type SeamlessPattern$1 as SeamlessPattern, SearchBox, SearchProvider, type SearchProviderProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Shop, ShopContext, type ShopContextValue, type ShopProps, SimpleImageBlur, type SimpleImageBlurProps, Slider, SliderFill, SliderOutput, SliderThumb, SliderTrack, Spinner, type SpinnerProps, Surface, SurfaceContext, type SurfaceProps, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, TextArea, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeSwitcher, ThemeToggle, type ThemeToggleProps, TileCount, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, TypographyScale, type UiRouter, UiRouterProvider, type UseBrandResult, type UseImagePreloaderOptions, type UseImagePreloaderReturn, type UseImageTransitionOptions, type UseImageTransitionReturn, type UsePersonalizationShimmerReturn, type UseProductGalleryOptions, type UseProductGalleryReturn, VISIBILITY_THRESHOLDS, type ViewportDimensions, type ZoomImage, ZoomOverlay, badgeVariants, brandAssets, buttonVariants, canvasExportService, checkComponentStyles, checkTailwindConfig, checkThemeTokens, createScrollDirectionTracker, formatCurrency, formatDate, formatDateTime, getBrand, getObservedElementCount, getObserverCount, hasEdgeBlur, isObserved, isWideMonitor, kbdVariants, linkVariants, normalizeHex, observe, runConfigChecks, scrollInputAboveKeyboard, searchClient, spinnerVariants, surfaceVariants, useArtworkAlignment, useBrand, useCanvasContext, useCanvasContextStatic, useCurrentPlacements, useDesign, useDesignOptional, useDeviceDetection, useFocusTrap, useHeroZoomScales, useImagePreloader, useImageTransition, useIsolatedCanvas, useLoadingOverlay, useMediaQuery, useMockupBackgroundOptional, useMockupPriority, useMockupPriorityOptional, usePersonalization, usePersonalizationOptional, usePersonalizationShimmer, usePlacementClipShape, usePlacementsProcessor, useProduct, useProductGallery, useProductOptional, useProductPage, useProductPageOptional, useProductSelection, useProviderStatus, useRealtime, useRealtimeOptional, useRenderCount, useRenderGuard, useResponsiveImageCap, useScrollDirection, useSelectedArtwork, useSetArtworkAlignment, useShop, useShopOptional, useSurface, useViewportDimensions, useWideMonitorMode };
|
|
5641
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddToCart, type AddToCartProps, ArtAlignment, type ArtAlignmentProps, ArtSelector, type ArtSelectorProps, type Artwork, ArtworkCustomizer, type ArtworkCustomizerProps, Badge, type BadgeProps, BrandLogo, type BrandLogoProps, BrandName, type BrandNameProps, Button, type ButtonProps, CanvasEditor, type CanvasExportServiceConfig, CanvasIsolationBoundary, CanvasIsolationConfigurator, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CarouselImage, type CarouselRenderProps, Checkbox, Chip, type ClipShape, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, ColorPalette, ColorPicker, type ColorPickerProps, ColorRow, ColorSwatch, type ColorSwatchChoice, type ColorSwatchProps, ColorTokenSwatch, type ContentRenderProps, CurrentRefinements, CurrentSelectionDisplay, type CurrentSelectionDisplayProps, DEFAULT_HERO_ZOOM_CONFIG, DEFAULT_IMAGE_CONFIG, DEFAULT_VISIBILITY_OPTIONS, DesignSystemPage, type DeviceDetectionResult, Disclosure, DisclosureContent, DisclosureTrigger, DragHintAnimation, type DragHintAnimationProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EdgeBlurBox, type EdgeBlurBoxProps, EdgeSwipeGuards, type EdgeSwipeGuardsProps, EnhancedImageViewer, FACET_SECTIONS, type FacetSection, type FacetType, Fieldset, type FieldsetProps, Filters, FiltersButton, type FiltersButtonProps, FiltersDrawer, type FiltersProps, FloatingActionGroup, type FloatingActionGroupProps, type FloatingActionItem, type FormatCurrencyOptions, HeroCarousel, type HeroCarouselProps, type HeroImage, type HeroImageRenderProps, HeroProductImage, type HeroProductImageProps, type HeroShrinkConfig, HeroShrinkLayout, type HeroShrinkLayoutProps, type HeroZoomConfig, HeroZoomLayout, type HeroZoomLayoutProps, type HeroZoomScales, HorizontalProgressiveBlur, type HorizontalProgressiveBlurProps, Drawer as IOSDrawer, DrawerClose as IOSDrawerClose, DrawerContent as IOSDrawerContent, DrawerDescription as IOSDrawerDescription, DrawerFooter as IOSDrawerFooter, DrawerHeader as IOSDrawerHeader, DrawerTitle as IOSDrawerTitle, DrawerTrigger as IOSDrawerTrigger, ImageBlurExtension, type ImageBlurExtensionProps, ImageEdgeBlur, type ImageEdgeBlurProps, type ImageLayer, type ImageUpdateRequest, Input, type InputProps, Kbd, type KbdProps, Label, Legend, type LegendProps, Lightbox, type LightboxProps, Link, LinkIcon, type LinkProps, LoadingOverlayPrism, LoadingOverlayPrismCandy, LoadingOverlayPrismCandyInline, type LoadingOverlayPrismCandyProps, type LoadingOverlayPrismProps, MasonryGrid, type MasonryGridProps, MobileProductCarousel, type MobileProductCarouselProps, MockupBackground, type MockupBackgroundProps, type MockupPriorityContextValue, MockupPriorityProvider, type MockupPriorityProviderProps, type MockupResult, PDPLayout, type PDPLayoutProps, PersonalizationField, PersonalizationInputs, PersonalizationProvider, PersonalizationValues, PlacementClipShapeSelector, type PlacementConfig, type PlacementDesign, PlacementTabs, type PlacementTabsProps, Popover, PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, type PriorityLevel, Product, ProductCard, type ProductCardProps, ProductContext, type ProductDataMode, ProductGallery, type ProductGalleryProps, ProductGrid, type ProductGridProps, type ProductHit, ProductHitComponent, ProductImage, type Artwork$1 as ProductImageArtwork, type ProductImageProps, ProductList, type ProductListProps, ProductOptions, type ProductPageContext, ProductPageProvider, ProductPageProviderMinimal, type ProductPageProviderMinimalProps, type ProductPageProviderProps, ProductPrice, type ProductPriceProps, type ProductProviderProps, ProgressiveBlur, type ProgressiveBlurProps, type ProviderStatus, Radio, RadioGroup, RadioGroupItem, RadiusScale, type ReactProductContext, type RealtimeContextValue, RealtimeMockup, type RealtimeMockupProps, RealtimeProvider, type RealtimeProviderProps, type RealtimeState, type RegularArtwork$1 as RegularArtwork, type ResponsiveColumns, type ResponsiveImageCapInfo, type ResponsiveImageCapOptions, ResponsiveZoom, RightToLeftProgressiveBlur, type RightToLeftProgressiveBlurProps, SafeImg, type SafeImgProps, type ScrollDirection, ScrollFade, type ScrollFadeProps, type ScrollState, type SeamlessPattern$1 as SeamlessPattern, SearchBox, SearchProvider, type SearchProviderProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Shop, ShopContext, type ShopContextValue, type ShopProps, SimpleImageBlur, type SimpleImageBlurProps, Slider, SliderFill, SliderOutput, SliderThumb, SliderTrack, Spinner, type SpinnerProps, Surface, SurfaceContext, type SurfaceProps, Switch, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, TextArea, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeSwitcher, ThemeToggle, type ThemeToggleProps, TileCount, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, TypographyScale, type UiRouter, UiRouterProvider, type UseBrandResult, type UseImagePreloaderOptions, type UseImagePreloaderReturn, type UseImageTransitionOptions, type UseImageTransitionReturn, type UsePersonalizationShimmerReturn, type UseProductGalleryOptions, type UseProductGalleryReturn, VISIBILITY_THRESHOLDS, type ViewportDimensions, type ZoomImage, ZoomOverlay, badgeVariants, brandAssets, buttonVariants, canvasExportService, checkComponentStyles, checkTailwindConfig, checkThemeTokens, createScrollDirectionTracker, formatCurrency, formatDate, formatDateTime, getBrand, getObservedElementCount, getObserverCount, hasEdgeBlur, isObserved, isWideMonitor, kbdVariants, linkVariants, linkedPlacementsLabel, normalizeHex, observe, runConfigChecks, scrollInputAboveKeyboard, searchClient, spinnerVariants, surfaceVariants, useArtworkAlignment, useBrand, useCanvasContext, useCanvasContextStatic, useCurrentPlacements, useDesign, useDesignOptional, useDeviceDetection, useFocusTrap, useHeroZoomScales, useImagePreloader, useImageTransition, useIsolatedCanvas, useLoadingOverlay, useMediaQuery, useMockupBackgroundOptional, useMockupPriority, useMockupPriorityOptional, usePersonalization, usePersonalizationOptional, usePersonalizationShimmer, usePlacementClipShape, usePlacementsProcessor, useProduct, useProductGallery, useProductOptional, useProductPage, useProductPageOptional, useProductSelection, useProviderStatus, useRealtime, useRealtimeOptional, useRenderCount, useRenderGuard, useResponsiveImageCap, useScrollDirection, useSelectedArtwork, useSetArtworkAlignment, useShop, useShopOptional, useSurface, useViewportDimensions, useWideMonitorMode };
|
package/dist/index.js
CHANGED
|
@@ -5383,7 +5383,12 @@ function PlacementClipShapeSelector() {
|
|
|
5383
5383
|
|
|
5384
5384
|
// src/composed/PlacementTabs.tsx
|
|
5385
5385
|
import { useRef as useRef10, useState as useState16, useLayoutEffect as useLayoutEffect2 } from "react";
|
|
5386
|
-
import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
5386
|
+
import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
5387
|
+
function linkedPlacementsLabel(count) {
|
|
5388
|
+
return count === 2 ? "Both sides" : `All ${count} areas`;
|
|
5389
|
+
}
|
|
5390
|
+
var ACTION_CLASS = "transition-colors duration-200 cursor-pointer text-muted-foreground hover:text-foreground underline underline-offset-4 decoration-muted-foreground/40 hover:decoration-foreground";
|
|
5391
|
+
var PILL_CLASS = "inline-flex items-center rounded-full bg-foreground/[0.08] px-3 py-1 font-medium text-foreground";
|
|
5387
5392
|
function PlacementTabs({
|
|
5388
5393
|
placements,
|
|
5389
5394
|
selectedPlacement,
|
|
@@ -5391,7 +5396,13 @@ function PlacementTabs({
|
|
|
5391
5396
|
isDesktop = false,
|
|
5392
5397
|
toolbarPlaceholderId = "toolbar-placeholder",
|
|
5393
5398
|
toolbarSize = 120,
|
|
5394
|
-
className = ""
|
|
5399
|
+
className = "",
|
|
5400
|
+
linked,
|
|
5401
|
+
onSplitAll,
|
|
5402
|
+
onLinkAll,
|
|
5403
|
+
linkedLabel,
|
|
5404
|
+
splitAllLabel = "Customize separately",
|
|
5405
|
+
linkAllLabel = "Use one design for all"
|
|
5395
5406
|
}) {
|
|
5396
5407
|
const containerRef = useRef10(null);
|
|
5397
5408
|
const [lineHeight, setLineHeight] = useState16(24);
|
|
@@ -5408,7 +5419,7 @@ function PlacementTabs({
|
|
|
5408
5419
|
if (isDesktop) {
|
|
5409
5420
|
return null;
|
|
5410
5421
|
}
|
|
5411
|
-
return /* @__PURE__ */ jsx50("div", { className: `flex justify-end w-full ${className}`, children: /* @__PURE__ */ jsx50(
|
|
5422
|
+
return /* @__PURE__ */ jsx50("div", { className: `flex justify-end w-full ${className}`, "data-placement-tabs": true, children: /* @__PURE__ */ jsx50(
|
|
5412
5423
|
"span",
|
|
5413
5424
|
{
|
|
5414
5425
|
id: toolbarPlaceholderId,
|
|
@@ -5417,16 +5428,68 @@ function PlacementTabs({
|
|
|
5417
5428
|
}
|
|
5418
5429
|
) });
|
|
5419
5430
|
}
|
|
5431
|
+
const dataLinked = linked === void 0 ? void 0 : linked ? "true" : "false";
|
|
5432
|
+
const labels = placements.map((p) => p.label);
|
|
5433
|
+
const renderItems = (tabClass) => {
|
|
5434
|
+
if (linked === true) {
|
|
5435
|
+
return /* @__PURE__ */ jsxs32(Fragment9, { children: [
|
|
5436
|
+
/* @__PURE__ */ jsx50(
|
|
5437
|
+
"span",
|
|
5438
|
+
{
|
|
5439
|
+
className: `${tabClass} ${PILL_CLASS}`,
|
|
5440
|
+
"data-placement-pill": true,
|
|
5441
|
+
title: labels.join(" \xB7 "),
|
|
5442
|
+
"aria-label": `One design on ${labels.join(", ")}`,
|
|
5443
|
+
children: linkedLabel ?? linkedPlacementsLabel(placements.length)
|
|
5444
|
+
}
|
|
5445
|
+
),
|
|
5446
|
+
onSplitAll && /* @__PURE__ */ jsx50(
|
|
5447
|
+
"button",
|
|
5448
|
+
{
|
|
5449
|
+
type: "button",
|
|
5450
|
+
onClick: onSplitAll,
|
|
5451
|
+
className: `${tabClass} ${ACTION_CLASS}`,
|
|
5452
|
+
"data-action": "split-all",
|
|
5453
|
+
children: splitAllLabel
|
|
5454
|
+
}
|
|
5455
|
+
)
|
|
5456
|
+
] });
|
|
5457
|
+
}
|
|
5458
|
+
return /* @__PURE__ */ jsxs32(Fragment9, { children: [
|
|
5459
|
+
placements.map((p) => /* @__PURE__ */ jsx50(
|
|
5460
|
+
"button",
|
|
5461
|
+
{
|
|
5462
|
+
type: "button",
|
|
5463
|
+
onClick: () => onPlacementChange(p.label),
|
|
5464
|
+
"data-placement-tab": p.label,
|
|
5465
|
+
"aria-pressed": selectedPlacement === p.label,
|
|
5466
|
+
className: `${tabClass} transition-all duration-200 cursor-pointer border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
|
|
5467
|
+
children: p.label
|
|
5468
|
+
},
|
|
5469
|
+
p.label
|
|
5470
|
+
)),
|
|
5471
|
+
linked === false && onLinkAll && /* @__PURE__ */ jsx50(
|
|
5472
|
+
"button",
|
|
5473
|
+
{
|
|
5474
|
+
type: "button",
|
|
5475
|
+
onClick: onLinkAll,
|
|
5476
|
+
className: `${tabClass} ${ACTION_CLASS}`,
|
|
5477
|
+
"data-action": "link-all",
|
|
5478
|
+
children: linkAllLabel
|
|
5479
|
+
}
|
|
5480
|
+
)
|
|
5481
|
+
] });
|
|
5482
|
+
};
|
|
5420
5483
|
if (isDesktop) {
|
|
5421
|
-
return /* @__PURE__ */ jsx50(
|
|
5422
|
-
"
|
|
5484
|
+
return /* @__PURE__ */ jsx50(
|
|
5485
|
+
"div",
|
|
5423
5486
|
{
|
|
5424
|
-
|
|
5425
|
-
|
|
5426
|
-
|
|
5427
|
-
|
|
5428
|
-
|
|
5429
|
-
)
|
|
5487
|
+
className: `flex flex-wrap items-center gap-x-3 gap-y-1 text-sm leading-relaxed w-full ${className}`,
|
|
5488
|
+
"data-placement-tabs": true,
|
|
5489
|
+
"data-linked": dataLinked,
|
|
5490
|
+
children: renderItems("")
|
|
5491
|
+
}
|
|
5492
|
+
);
|
|
5430
5493
|
}
|
|
5431
5494
|
const linesForToolbar = Math.ceil(toolbarSize / lineHeight);
|
|
5432
5495
|
const shapeInsetPx = linesForToolbar * lineHeight;
|
|
@@ -5435,6 +5498,8 @@ function PlacementTabs({
|
|
|
5435
5498
|
{
|
|
5436
5499
|
ref: containerRef,
|
|
5437
5500
|
className: `flex overflow-hidden text-sm leading-relaxed w-full ${className}`,
|
|
5501
|
+
"data-placement-tabs": true,
|
|
5502
|
+
"data-linked": dataLinked,
|
|
5438
5503
|
children: /* @__PURE__ */ jsxs32("p", { className: "m-0 w-full", children: [
|
|
5439
5504
|
/* @__PURE__ */ jsx50(
|
|
5440
5505
|
"span",
|
|
@@ -5453,15 +5518,7 @@ function PlacementTabs({
|
|
|
5453
5518
|
)
|
|
5454
5519
|
}
|
|
5455
5520
|
),
|
|
5456
|
-
|
|
5457
|
-
"button",
|
|
5458
|
-
{
|
|
5459
|
-
onClick: () => onPlacementChange(p.label),
|
|
5460
|
-
className: `inline transition-all duration-200 cursor-pointer mr-3 border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
|
|
5461
|
-
children: p.label
|
|
5462
|
-
},
|
|
5463
|
-
p.label
|
|
5464
|
-
))
|
|
5521
|
+
renderItems("inline mr-3")
|
|
5465
5522
|
] })
|
|
5466
5523
|
}
|
|
5467
5524
|
);
|
|
@@ -8735,7 +8792,7 @@ var canvasExportService = new CanvasExportService();
|
|
|
8735
8792
|
|
|
8736
8793
|
// src/components/CanvasIsolationBoundary.tsx
|
|
8737
8794
|
import React41, { useEffect as useEffect26 } from "react";
|
|
8738
|
-
import { Fragment as
|
|
8795
|
+
import { Fragment as Fragment10, jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
8739
8796
|
function CanvasIsolationConfigurator({
|
|
8740
8797
|
placementName: placementNameProp,
|
|
8741
8798
|
onArtworkChange,
|
|
@@ -8788,7 +8845,7 @@ function CanvasIsolationConfigurator({
|
|
|
8788
8845
|
}
|
|
8789
8846
|
var IsolatedChildren = React41.memo(
|
|
8790
8847
|
function IsolatedChildren2({ children }) {
|
|
8791
|
-
return /* @__PURE__ */ jsx54(
|
|
8848
|
+
return /* @__PURE__ */ jsx54(Fragment10, { children });
|
|
8792
8849
|
},
|
|
8793
8850
|
// Custom comparison: ALWAYS return true (never re-render due to parent changes)
|
|
8794
8851
|
// This is intentional - children should use refs/services for updates that need to bypass this
|
|
@@ -8801,7 +8858,7 @@ function CanvasIsolationBoundary({
|
|
|
8801
8858
|
clearImageBitmapCache,
|
|
8802
8859
|
serializeStateForServer
|
|
8803
8860
|
}) {
|
|
8804
|
-
return /* @__PURE__ */ jsxs33(
|
|
8861
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
8805
8862
|
/* @__PURE__ */ jsx54(
|
|
8806
8863
|
CanvasIsolationConfigurator,
|
|
8807
8864
|
{
|
|
@@ -9049,7 +9106,7 @@ import {
|
|
|
9049
9106
|
useCallback as useCallback17
|
|
9050
9107
|
} from "react";
|
|
9051
9108
|
import { createPortal as createPortal2 } from "react-dom";
|
|
9052
|
-
import { Fragment as
|
|
9109
|
+
import { Fragment as Fragment11, jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
9053
9110
|
var BANDS = [
|
|
9054
9111
|
{ rgb: "230, 45, 55", delay: "-0.0s" },
|
|
9055
9112
|
// red
|
|
@@ -9296,7 +9353,7 @@ var LoadingOverlayPrismCandy = memo2(function LoadingOverlayPrismCandy2({
|
|
|
9296
9353
|
let fadeClass = "";
|
|
9297
9354
|
if (!visible) fadeClass = "candy-fade-out";
|
|
9298
9355
|
else if (mounted) fadeClass = "candy-fade-in";
|
|
9299
|
-
return /* @__PURE__ */ jsxs35(
|
|
9356
|
+
return /* @__PURE__ */ jsxs35(Fragment11, { children: [
|
|
9300
9357
|
/* @__PURE__ */ jsx56(
|
|
9301
9358
|
"div",
|
|
9302
9359
|
{
|
|
@@ -9445,7 +9502,7 @@ import {
|
|
|
9445
9502
|
describeProductArtAlignment,
|
|
9446
9503
|
getSnapPoints
|
|
9447
9504
|
} from "@snowcone-app/sdk";
|
|
9448
|
-
import { Fragment as
|
|
9505
|
+
import { Fragment as Fragment12, jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
9449
9506
|
function ArtAlignment({
|
|
9450
9507
|
src: propSrc,
|
|
9451
9508
|
artworkAspectRatio: propAspectRatio,
|
|
@@ -9818,7 +9875,7 @@ function ArtAlignment({
|
|
|
9818
9875
|
loading: "eager"
|
|
9819
9876
|
}
|
|
9820
9877
|
),
|
|
9821
|
-
isReady && maskDimensions.width > 0 && /* @__PURE__ */ jsxs36(
|
|
9878
|
+
isReady && maskDimensions.width > 0 && /* @__PURE__ */ jsxs36(Fragment12, { children: [
|
|
9822
9879
|
/* @__PURE__ */ jsx58("div", { style: overlayStyle }),
|
|
9823
9880
|
/* @__PURE__ */ jsx58(
|
|
9824
9881
|
"img",
|
|
@@ -10654,14 +10711,14 @@ var HeroProductImage = memo3(function HeroProductImage2({
|
|
|
10654
10711
|
|
|
10655
10712
|
// src/composed/SafeImg.tsx
|
|
10656
10713
|
import React45, { useEffect as useEffect33, useState as useState32 } from "react";
|
|
10657
|
-
import { Fragment as
|
|
10714
|
+
import { Fragment as Fragment13, jsx as jsx62 } from "react/jsx-runtime";
|
|
10658
10715
|
var SafeImg = React45.forwardRef(
|
|
10659
10716
|
function SafeImg2({ fallback = null, onError, src, ...rest }, ref) {
|
|
10660
10717
|
const [failed, setFailed] = useState32(false);
|
|
10661
10718
|
useEffect33(() => {
|
|
10662
10719
|
setFailed(false);
|
|
10663
10720
|
}, [src]);
|
|
10664
|
-
if (failed) return /* @__PURE__ */ jsx62(
|
|
10721
|
+
if (failed) return /* @__PURE__ */ jsx62(Fragment13, { children: fallback });
|
|
10665
10722
|
return /* @__PURE__ */ jsx62(
|
|
10666
10723
|
"img",
|
|
10667
10724
|
{
|
|
@@ -10990,7 +11047,7 @@ import { useRefinementList, useRange, useStats as useStats2 } from "react-instan
|
|
|
10990
11047
|
import { X as LucideX2, SlidersHorizontal as LucideSlidersHorizontal2 } from "lucide-react";
|
|
10991
11048
|
import { useState as useState35, useEffect as useEffect37 } from "react";
|
|
10992
11049
|
import * as Slider2 from "@radix-ui/react-slider";
|
|
10993
|
-
import { Fragment as
|
|
11050
|
+
import { Fragment as Fragment14, jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
10994
11051
|
var XIcon2 = LucideX2;
|
|
10995
11052
|
function FiltersDrawer({ isOpen, onClose }) {
|
|
10996
11053
|
const [showCounts, setShowCounts] = useState35(false);
|
|
@@ -11015,7 +11072,7 @@ function FiltersDrawer({ isOpen, onClose }) {
|
|
|
11015
11072
|
document.addEventListener("keydown", handleEscape);
|
|
11016
11073
|
return () => document.removeEventListener("keydown", handleEscape);
|
|
11017
11074
|
}, [isOpen, onClose]);
|
|
11018
|
-
return /* @__PURE__ */ jsxs44(
|
|
11075
|
+
return /* @__PURE__ */ jsxs44(Fragment14, { children: [
|
|
11019
11076
|
/* @__PURE__ */ jsx68(
|
|
11020
11077
|
"div",
|
|
11021
11078
|
{
|
|
@@ -11308,10 +11365,10 @@ function PriceSection() {
|
|
|
11308
11365
|
}
|
|
11309
11366
|
|
|
11310
11367
|
// src/composed/search/Filters.tsx
|
|
11311
|
-
import { Fragment as
|
|
11368
|
+
import { Fragment as Fragment15, jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
11312
11369
|
function Filters({ buttonClassName, buttonText }) {
|
|
11313
11370
|
const [isOpen, setIsOpen] = useState36(false);
|
|
11314
|
-
return /* @__PURE__ */ jsxs45(
|
|
11371
|
+
return /* @__PURE__ */ jsxs45(Fragment15, { children: [
|
|
11315
11372
|
/* @__PURE__ */ jsx69(
|
|
11316
11373
|
FiltersButton,
|
|
11317
11374
|
{
|
|
@@ -11410,7 +11467,7 @@ import { useState as useState39, useEffect as useEffect39 } from "react";
|
|
|
11410
11467
|
// src/composed/zoom/ZoomOverlay.tsx
|
|
11411
11468
|
import { useState as useState37, useCallback as useCallback20 } from "react";
|
|
11412
11469
|
import { Plus as LucidePlus2, Minus as LucideMinus2 } from "lucide-react";
|
|
11413
|
-
import { Fragment as
|
|
11470
|
+
import { Fragment as Fragment16, jsx as jsx71, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
11414
11471
|
var PlusIcon2 = LucidePlus2;
|
|
11415
11472
|
var MinusIcon2 = LucideMinus2;
|
|
11416
11473
|
function ZoomOverlay({
|
|
@@ -11469,7 +11526,7 @@ function ZoomOverlay({
|
|
|
11469
11526
|
const isZoomed = zoomedImageIndex === imageIndex;
|
|
11470
11527
|
const isHovered = hoveredImageIndex === imageIndex;
|
|
11471
11528
|
const cursorStyle = isLargeTouchDevice ? "pointer" : isTouchDevice ? "default" : "none";
|
|
11472
|
-
return /* @__PURE__ */ jsxs47(
|
|
11529
|
+
return /* @__PURE__ */ jsxs47(Fragment16, { children: [
|
|
11473
11530
|
/* @__PURE__ */ jsx71("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
|
|
11474
11531
|
/* @__PURE__ */ jsx71(
|
|
11475
11532
|
"div",
|
|
@@ -11564,7 +11621,7 @@ import {
|
|
|
11564
11621
|
TransformComponent as OriginalTransformComponent
|
|
11565
11622
|
} from "react-zoom-pan-pinch";
|
|
11566
11623
|
import { X as X2 } from "lucide-react";
|
|
11567
|
-
import { Fragment as
|
|
11624
|
+
import { Fragment as Fragment17, jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
11568
11625
|
var TransformWrapper = OriginalTransformWrapper;
|
|
11569
11626
|
var TransformComponent = OriginalTransformComponent;
|
|
11570
11627
|
var EnhancedImageViewer = ({
|
|
@@ -11883,7 +11940,7 @@ var EnhancedImageViewer = ({
|
|
|
11883
11940
|
};
|
|
11884
11941
|
const nextIndex = findNextAvailableIndex(currentIndex, 1);
|
|
11885
11942
|
const prevIndex = findNextAvailableIndex(currentIndex, -1);
|
|
11886
|
-
return /* @__PURE__ */ jsxs48(
|
|
11943
|
+
return /* @__PURE__ */ jsxs48(Fragment17, { children: [
|
|
11887
11944
|
/* @__PURE__ */ jsx72(
|
|
11888
11945
|
"button",
|
|
11889
11946
|
{
|
|
@@ -11985,7 +12042,7 @@ var EnhancedImageViewer = ({
|
|
|
11985
12042
|
};
|
|
11986
12043
|
|
|
11987
12044
|
// src/composed/zoom/ResponsiveZoom.tsx
|
|
11988
|
-
import { Fragment as
|
|
12045
|
+
import { Fragment as Fragment18, jsx as jsx73, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
11989
12046
|
function ResponsiveZoom({
|
|
11990
12047
|
imageIndex,
|
|
11991
12048
|
children,
|
|
@@ -12026,7 +12083,7 @@ function ResponsiveZoom({
|
|
|
12026
12083
|
}
|
|
12027
12084
|
}
|
|
12028
12085
|
};
|
|
12029
|
-
return /* @__PURE__ */ jsxs49(
|
|
12086
|
+
return /* @__PURE__ */ jsxs49(Fragment18, { children: [
|
|
12030
12087
|
isTouchDevice ? /* @__PURE__ */ jsx73(
|
|
12031
12088
|
"div",
|
|
12032
12089
|
{
|
|
@@ -12967,7 +13024,7 @@ function HeroCarousel({
|
|
|
12967
13024
|
|
|
12968
13025
|
// src/composed/grids/MasonryGrid.tsx
|
|
12969
13026
|
import { useState as useState42, useEffect as useEffect42, useMemo as useMemo16 } from "react";
|
|
12970
|
-
import { Fragment as
|
|
13027
|
+
import { Fragment as Fragment19, jsx as jsx76 } from "react/jsx-runtime";
|
|
12971
13028
|
var BREAKPOINTS = {
|
|
12972
13029
|
sm: 640,
|
|
12973
13030
|
md: 768,
|
|
@@ -13039,7 +13096,7 @@ function MasonryGrid({
|
|
|
13039
13096
|
);
|
|
13040
13097
|
if (items.length === 0) {
|
|
13041
13098
|
if (emptyContent) {
|
|
13042
|
-
return /* @__PURE__ */ jsx76(
|
|
13099
|
+
return /* @__PURE__ */ jsx76(Fragment19, { children: emptyContent });
|
|
13043
13100
|
}
|
|
13044
13101
|
return null;
|
|
13045
13102
|
}
|
|
@@ -14208,7 +14265,7 @@ function RadiusScale({ className = "" }) {
|
|
|
14208
14265
|
|
|
14209
14266
|
// src/design-system/ThemeSwitcher.tsx
|
|
14210
14267
|
import { useState as useState45, useEffect as useEffect46 } from "react";
|
|
14211
|
-
import { Fragment as
|
|
14268
|
+
import { Fragment as Fragment20, jsx as jsx87, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
14212
14269
|
function readThemeFromDOM() {
|
|
14213
14270
|
if (typeof document === "undefined") {
|
|
14214
14271
|
return { themeName: "Linear", isDark: false };
|
|
@@ -14282,7 +14339,7 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
|
|
|
14282
14339
|
]
|
|
14283
14340
|
}
|
|
14284
14341
|
),
|
|
14285
|
-
isOpen && /* @__PURE__ */ jsxs60(
|
|
14342
|
+
isOpen && /* @__PURE__ */ jsxs60(Fragment20, { children: [
|
|
14286
14343
|
/* @__PURE__ */ jsx87(
|
|
14287
14344
|
"div",
|
|
14288
14345
|
{
|
|
@@ -14406,7 +14463,7 @@ function usePersonalizationContext() {
|
|
|
14406
14463
|
}
|
|
14407
14464
|
|
|
14408
14465
|
// src/personalization/PersonalizationProvider.tsx
|
|
14409
|
-
import { Fragment as
|
|
14466
|
+
import { Fragment as Fragment21, jsx as jsx89, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
14410
14467
|
function createBridgeFromCanvas(canvasModule) {
|
|
14411
14468
|
const { useEditor, useCommands, useImageBinding } = canvasModule;
|
|
14412
14469
|
function TextBinder({ name, value }) {
|
|
@@ -14494,7 +14551,7 @@ function createBridgeFromCanvas(canvasModule) {
|
|
|
14494
14551
|
return null;
|
|
14495
14552
|
}
|
|
14496
14553
|
return function PersonalizationBridge({ fields = [], values = {} } = {}) {
|
|
14497
|
-
return /* @__PURE__ */ jsx89(
|
|
14554
|
+
return /* @__PURE__ */ jsx89(Fragment21, { children: fields.map((field) => {
|
|
14498
14555
|
if (field.type === "text") {
|
|
14499
14556
|
return /* @__PURE__ */ jsx89(TextBinder, { name: field.name, value: values[field.name] ?? "" }, `text-${field.name}`);
|
|
14500
14557
|
}
|
|
@@ -15046,6 +15103,7 @@ export {
|
|
|
15046
15103
|
isWideMonitor,
|
|
15047
15104
|
kbdVariants,
|
|
15048
15105
|
linkVariants,
|
|
15106
|
+
linkedPlacementsLabel,
|
|
15049
15107
|
listProducts4 as listProducts,
|
|
15050
15108
|
normalizeHex,
|
|
15051
15109
|
observe,
|