@sableui/react 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,17 +1,19 @@
-export { DENSITY_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS } from './chunk-OQACYT2D.js';
+export { ART_TOKENS, DENSITY_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS } from './chunk-NETUFI34.js';
 export { Phone, phoneMeta } from './chunk-KFZ43RKU.js';
 import './chunk-NEQNXI2G.js';
-export { AppHeader, AppShell, BottomNav, BottomNavItem, Browser, ChatComposer, DataTable, EmptyState, Marker, MessageScroller, Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue, NotificationBadge, PageHeader, Presence, RelativeTime, Reveal, SearchInput, SettingsMenu, SettingsRow, SideNav, SideNavGroup, SideNavItem, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Skeleton, StreamingText, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, ViewTransitionName, appHeaderMeta, appShellMeta, bottomNavMeta, browserMeta, chatComposerMeta, dataTableMeta, emptyStateMeta, markerMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, pageHeaderMeta, relativeTimeMeta, searchInputMeta, settingsMenuMeta, sideNavMeta, sidebarMeta, skeletonMeta, startViewTransition, streamingTextMeta, supportsViewTransitions, tabsMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, useInView, useSidebar } from './chunk-D2ETQBHV.js';
-import { SELECTION_CARD_CHECKED, CartesianChart, resolveSeries, chartFormatters, categoryText, numberValue, niceTicks, ChartFrame, polar, riseTransition, stagger, pathStyle, morphTransition, ChartLegend, RADIO_DOT, RADIO_RING, SELECTION_CARD_TILE_HEAD, SELECTION_CARD_GLYPH, SELECTION_CARD_SHELL, SELECTION_CARD_LAYOUT, CheckboxMark, CHECK_BOX, SEGMENTED_STEP, SEGMENTED_ITEM, SEGMENTED_TRACK, ToggleGroup, Toggle, approxTextWidth, ChartTooltipContent } from './chunk-FBSL2LZQ.js';
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AreaChart, BarChart, CHART_SERIES_COUNT, Checkbox, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, DateTile, Kbd, KbdGroup, OtpField, PieChart, RadialChart, SEGMENTED_BAR_TONES, Scroller, SegmentedBar, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, Stepper, StepperItem, Toggle, ToggleGroup, Toggle as ToggleGroupItem, accordionMeta, areaChartMeta, barChartMeta, chartColor, toneColor as chartToneColor, checkboxMeta, commandMenuMeta, dateTileMeta, kbdMeta, otpFieldMeta, pieChartMeta, radialChartMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, sliderMeta, sparklineMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, toggleMeta, useCommandMenuShortcut } from './chunk-FBSL2LZQ.js';
-import { withPortalThemeScope, FIELD_SHELL_XS, useTypeTier, useDensity, FIELD_SHELL, MOBILE_FIELD_TIER, useMotion, HighlightGlide, useAnchoredDensity, anchoredScroll, useIsomorphicLayoutEffect, mergeRefs, buttonVariants, FIELD_INVALID, Select, SelectTrigger, SelectContent, SelectItem, Button, Spinner, Badge, anchoredListScroll, useResizeObserver, MENU_ITEM_DESTRUCTIVE, DensityProvider, Input, Textarea, Progress } from './chunk-CCUDFLU3.js';
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, Field, Form, Input, Label, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, inputMeta, labelMeta, menuMeta, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, useAnchoredDensity, useCopy, useDensity, useMotion, useReducedMotion, useScrollActivity, useTypeTier } from './chunk-CCUDFLU3.js';
+export { AppHeader, AppShell, BottomNav, BottomNavItem, Browser, ChatComposer, DataTable, EmptyState, Marker, MessageScroller, Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue, NotificationBadge, PageHeader, Presence, RelativeTime, Reveal, SearchInput, SettingsMenu, SettingsRow, SideNav, SideNavGroup, SideNavItem, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Skeleton, StreamingText, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, ViewTransitionName, appHeaderMeta, appShellMeta, bottomNavMeta, browserMeta, chatComposerMeta, dataTableMeta, emptyStateMeta, markerMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, pageHeaderMeta, relativeTimeMeta, searchInputMeta, settingsMenuMeta, sideNavMeta, sidebarMeta, skeletonMeta, startViewTransition, streamingTextMeta, supportsViewTransitions, tabsMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, useInView, useSidebar } from './chunk-VVW4UCDI.js';
+import { SELECTION_CARD_CHECKED, CartesianChart, resolveSeries, chartFormatters, categoryText, numberValue, niceTicks, ChartFrame, polar, riseTransition, stagger, pathStyle, morphTransition, ChartLegend, RADIO_DOT, RADIO_RING, SELECTION_CARD_TILE_HEAD, SELECTION_CARD_GLYPH, SELECTION_CARD_SHELL, SELECTION_CARD_LAYOUT, CheckboxMark, CHECK_BOX, SEGMENTED_STEP, SEGMENTED_ITEM, SEGMENTED_TRACK, ToggleGroup, Toggle, approxTextWidth, ChartTooltipContent } from './chunk-EDXLM7YL.js';
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AreaChart, BarChart, CHART_SERIES_COUNT, Checkbox, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, DateTile, Kbd, KbdGroup, OtpField, PieChart, RadialChart, SEGMENTED_BAR_TONES, Scroller, SegmentedBar, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, Stepper, StepperItem, Toggle, ToggleGroup, Toggle as ToggleGroupItem, accordionMeta, areaChartMeta, barChartMeta, chartColor, toneColor as chartToneColor, checkboxMeta, commandMenuMeta, dateTileMeta, kbdMeta, otpFieldMeta, pieChartMeta, radialChartMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, sliderMeta, sparklineMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, toggleMeta, useCommandMenuShortcut } from './chunk-EDXLM7YL.js';
+import { withPortalThemeScope, FIELD_SHELL_XS, useTypeTier, useDensity, FIELD_SHELL, MOBILE_FIELD_TIER, useMotion, HighlightGlide, useAnchoredDensity, anchoredScroll, useIsomorphicLayoutEffect, mergeRefs, buttonVariants, FIELD_INVALID, Select, SelectTrigger, SelectContent, SelectItem, Button, Spinner, Badge, anchoredListScroll, useResizeObserver, MENU_ITEM_DESTRUCTIVE, DensityProvider, Input, Textarea, Progress } from './chunk-7QSDYBXO.js';
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, Field, Form, GradientArt, Input, Label, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, gradientArtMeta, inputMeta, labelMeta, menuMeta, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, useAnchoredDensity, useCopy, useDensity, useMotion, useReducedMotion, useScrollActivity, useTypeTier } from './chunk-7QSDYBXO.js';
+import { PresentationProvider, usePresentation, StackedActionsContext } from './chunk-FKZXAFIY.js';
+export { PresentationProvider, usePresentation } from './chunk-FKZXAFIY.js';
 export { AspectBox, Bleed, Center, Col, Columns, Grid, GridOverlay, Page, Region, Row, SafeArea, Spacer, SplitPane, Stack } from './chunk-3IWZYBGH.js';
 import { cn } from './chunk-SRQWQUTW.js';
 export { cn } from './chunk-SRQWQUTW.js';
-import { Icon } from './chunk-NGBDP3BM.js';
-export { Icon, IconProvider, composeIconSets, useIconSet } from './chunk-NGBDP3BM.js';
-export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from './chunk-TH563WLW.js';
+import { Icon } from './chunk-QJ6FWTUG.js';
+export { Icon, IconProvider, composeIconSets, useIconSet } from './chunk-QJ6FWTUG.js';
+export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from './chunk-XAZGMY73.js';
 import { featuredThemeManifests, defaultThemeId } from './chunk-EFLC4NA3.js';
 export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, defaultThemeId, getThemeManifest, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from './chunk-EFLC4NA3.js';
 import './chunk-7MG4SHYX.js';
@@ -429,6 +431,7 @@ var COMPONENT_TAXONOMY = {
      a player, and it sits with the other media now. */
   Browser: ["Media & mockups", "page"],
   Carousel: ["Media & mockups", "page"],
+  GradientArt: ["Media & mockups", "either"],
   Marquee: ["Media & mockups", "page"],
   Phone: ["Media & mockups", "page"],
   Video: ["Media & mockups", "page"]
@@ -2427,7 +2430,7 @@ function PopoverContent({
             className
           ),
           ...props,
-          children
+          children: /* @__PURE__ */ jsx(PresentationProvider, { value: "page", children })
         }
       )
     }
@@ -2660,7 +2663,7 @@ function SheetContent({
         initialFocus: initialFocus === void 0 ? (type) => type === "touch" ? popupRef.current : true : initialFocus,
         className: cn(sheetVariants({ side }), className),
         ...props,
-        children: /* @__PURE__ */ jsx(Drawer.Content, { className: "contents", children })
+        children: /* @__PURE__ */ jsx(Drawer.Content, { className: "contents", children: /* @__PURE__ */ jsx(PresentationProvider, { value: resolvedSide === "bottom" ? "sheet" : "page", children }) })
       }
     ) })
   ] });
@@ -2686,12 +2689,19 @@ function SheetDescription({ className, ...props }) {
 function SheetHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ...props });
 }
-function SheetFooter({ className, ...props }) {
+function SheetFooter({ className, children, ...props }) {
+  const stacked = usePresentation() === "sheet";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("mt-auto flex items-center justify-end gap-2", className),
-      ...props
+      "data-actions": stacked ? "stack" : "row",
+      className: cn(
+        "mt-auto flex items-center justify-end gap-2",
+        className,
+        stacked && "w-full max-w-sm flex-col-reverse items-stretch justify-start self-center"
+      ),
+      ...props,
+      children: stacked ? /* @__PURE__ */ jsx(StackedActionsContext.Provider, { value: true, children }) : children
     }
   );
 }
@@ -2814,7 +2824,7 @@ var sheetMeta = {
     {
       name: "SheetFooter",
       type: 'ComponentProps<"div">',
-      description: "Bottom row for actions, pinned after the scrollable body."
+      description: "Bottom row for actions, pinned after the scrollable body. In a bottom sheet it stacks: full width, the primary on top, every button at the cta height."
     }
   ],
   variants: {
@@ -3512,7 +3522,43 @@ var ENTER_MOTION = {
   "bottom-center": "motion-slide-up",
   "bottom-right": "motion-slide-left"
 };
-var ToastPositionContext = createContext("top-right");
+var STACKED_ROOT = [
+  // design-lint-disable-next-line raw-z-index -- orders the cards inside the viewport's own stacking context (it is fixed at z-(--z-toast)); not a page layer
+  "absolute inset-x-0 z-[calc(100-var(--toast-index))] select-none",
+  "[--toast-gap:--spacing(2)] [--toast-peek:--spacing(3)]",
+  "[--toast-scale:max(0,1-var(--toast-index)*0.05)]",
+  "[--toast-h:var(--toast-frontmost-height,var(--toast-height))]",
+  "h-(--toast-h) data-expanded:h-(--toast-height)",
+  // Collapsed: shrink about the anchored edge, then lift a peek per card.
+  "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-dir)*(var(--toast-index)*var(--toast-peek)+(1-var(--toast-scale))*var(--toast-h))))_scale(var(--toast-scale))]",
+  // Fanned out: Base UI's offset is the heights in front of it; add the gaps.
+  "data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-dir)*(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap))))]",
+  // Arrive from the anchored edge and leave the same way, unless swiped or
+  // pushed out by the limit, which only fade.
+  "data-starting-style:[translate:0_calc(var(--toast-dir)*-100%)] data-starting-style:opacity-0",
+  "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[translate:0_calc(var(--toast-dir)*-100%)]",
+  "data-ending-style:opacity-0 data-limited:opacity-0",
+  // Fanned out, bridges the gap to the next card, so the pointer stays on the
+  // stack and the list does not collapse under it.
+  "after:absolute after:inset-x-0 after:h-[calc(var(--toast-gap)+1px)] not-data-expanded:after:hidden",
+  // Collapsed, the deck lifts as one: cards resting on each other barely shade
+  // each other. A full shadow on every card stacked a slab per card, and a
+  // theme with hard offset shadows (Poppy's reach 12px, past the 12px peek)
+  // painted the front card's slab over the cards behind it. So the front card
+  // steps down to shadow-md and the cards behind to shadow-sm; fanned out,
+  // each is a toast again and takes the full step back.
+  "not-data-expanded:shadow-md not-data-expanded:has-[>[data-behind]]:shadow-sm",
+  "transition-[transform,translate,opacity,height,box-shadow] duration-(--motion-duration-slow) ease-emphasized"
+].join(" ");
+var STACKED_EDGE = {
+  top: "top-0 origin-top [--toast-dir:1] after:top-full",
+  bottom: "bottom-0 origin-bottom [--toast-dir:-1] after:bottom-full"
+};
+var edgeOf = (position) => position.startsWith("top") ? "top" : "bottom";
+var ToastViewportContext = createContext({
+  position: "top-right",
+  stacked: false
+});
 function persistsByDefault(type, options) {
   return type === "loading" || type === "error" || options?.actionProps !== void 0;
 }
@@ -3548,13 +3594,16 @@ var ToastPortal = withPortalThemeScope(Toast.Portal);
 function ToastViewport({
   className,
   position = "top-right",
+  stacked = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(ToastPositionContext.Provider, { value: position, children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ToastViewportContext.Provider, { value: { position, stacked }, children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(
     Toast.Viewport,
     {
       className: cn(
-        "fixed z-(--z-toast) flex w-95 max-w-[90vw] flex-col gap-2 outline-none",
+        "fixed z-(--z-toast) w-95 max-w-[90vw] outline-none",
+        // Stacked toasts are positioned against the viewport, not laid out in it.
+        !stacked && "flex flex-col gap-2",
         POSITION[position],
         className
       ),
@@ -3563,13 +3612,27 @@ function ToastViewport({
   ) }) });
 }
 function ToastRoot({ className, ...props }) {
-  const position = useContext(ToastPositionContext);
+  const { position, stacked } = useContext(ToastViewportContext);
   return /* @__PURE__ */ jsx(
     Toast.Root,
     {
       className: cn(
         "flex w-full gap-3 rounded-md border border-border-floating bg-popover p-4 text-popover-foreground shadow-xl",
-        ENTER_MOTION[position],
+        stacked ? [STACKED_ROOT, STACKED_EDGE[edgeOf(position)]] : ENTER_MOTION[position],
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToastContent({ className, ...props }) {
+  const { stacked } = useContext(ToastViewportContext);
+  return /* @__PURE__ */ jsx(
+    Toast.Content,
+    {
+      className: cn(
+        "flex min-w-0 flex-1 gap-3",
+        stacked && "transition-opacity duration-(--motion-duration-base) ease-standard data-behind:not-data-expanded:pointer-events-none data-behind:not-data-expanded:opacity-0",
         className
       ),
       ...props
@@ -3619,6 +3682,7 @@ function ToastProvider({
   limit,
   closeIcon,
   position,
+  stacked,
   viewportClassName
 }) {
   return /* @__PURE__ */ jsxs(Toast.Provider, { timeout, limit, toastManager, children: [
@@ -3628,6 +3692,7 @@ function ToastProvider({
       {
         closeIcon,
         position,
+        stacked,
         viewportClassName
       }
     )
@@ -3642,12 +3707,13 @@ var TYPE_ACCENT = {
 function ToastList({
   closeIcon,
   position,
+  stacked,
   viewportClassName
 }) {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsx(ToastViewport, { position, className: viewportClassName, children: toasts.map((item) => {
+  return /* @__PURE__ */ jsx(ToastViewport, { position, stacked, className: viewportClassName, children: toasts.map((item) => {
     const accent = item.type ? TYPE_ACCENT[item.type] : void 0;
-    return /* @__PURE__ */ jsxs(ToastRoot, { toast: item, children: [
+    return /* @__PURE__ */ jsx(ToastRoot, { toast: item, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
       item.type === "loading" ? /* @__PURE__ */ jsx(
         Spinner,
         {
@@ -3667,7 +3733,7 @@ function ToastList({
       ] }),
       /* @__PURE__ */ jsx(ToastAction, { className: "self-center" }),
       /* @__PURE__ */ jsx(ToastClose, { children: closeIcon ?? /* @__PURE__ */ jsx(Icon, { name: "xmark", className: "text-sm" }) })
-    ] }, item.id);
+    ] }) }, item.id);
   }) });
 }
 
@@ -3753,7 +3819,7 @@ var toastMeta = {
   props: [
     {
       name: "ToastProvider",
-      type: "{ children, timeout?, limit?, closeIcon?, position?, viewportClassName? }",
+      type: "{ children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? }",
       default: "\u2014",
       description: "Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast()."
     },
@@ -3763,6 +3829,12 @@ var toastMeta = {
       default: '"top-right"',
       description: "Screen anchor for the toast stack."
     },
+    {
+      name: "stacked",
+      type: "boolean",
+      default: "false",
+      description: "Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page."
+    },
     {
       name: "viewportClassName",
       type: "string",
@@ -3811,6 +3883,11 @@ var toastMeta = {
       type: "Base UI Toast.Root props + className (requires the `toast` object)",
       description: "A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI."
     },
+    {
+      name: "ToastContent",
+      type: "Base UI Toast.Content props + className",
+      description: "The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them."
+    },
     {
       name: "ToastTitle",
       type: "Base UI Toast.Title props + className",
@@ -3866,6 +3943,12 @@ var toastMeta = {
       part: "ToastRoot",
       why: "Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause."
     },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "ToastRoot (stacked)",
+      why: "A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there."
+    },
     {
       slot: "activity",
       recipe: "none",
@@ -3902,6 +3985,10 @@ var toastMeta = {
       label: "Undo action",
       code: 'toast.message("Post archived", { actionProps: { children: "Undo", onClick: () => restorePost() } })'
     },
+    {
+      label: "Stacked",
+      code: '<ToastProvider stacked position="bottom-right">{children}</ToastProvider>'
+    },
     {
       label: "Provider with app chrome",
       code: '<ToastProvider position="bottom-right" limit={3}><AppShell><Region max="feed"><Button onClick={() => toast.success("Saved")}>Save</Button></Region></AppShell></ToastProvider>'
@@ -4181,7 +4268,7 @@ function ComboboxChips({
                 Combobox$1.Chip,
                 {
                   render: /* @__PURE__ */ jsx(Badge, { appearance: "soft", size: "sm" }),
-                  className: "pe-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  className: "gap-0.5 pe-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring",
                   children: [
                     label,
                     /* @__PURE__ */ jsx(
@@ -4192,7 +4279,7 @@ function ComboboxChips({
                           {
                             variant: "ghost",
                             size: "icon-xs",
-                            className: "-my-1"
+                            className: cn("-my-1 size-5 [--button-icon:0.875rem]", hitTargetMin)
                           }
                         ),
                         "aria-label": `Remove ${label}`,
@@ -8034,7 +8121,7 @@ function ColorField({
                 "aria-hidden": true,
                 className: (
                   // design-lint-disable-next-line raw-black-white -- handle over arbitrary user colour; no token can guarantee contrast
-                  "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white ring-inset shadow-sm"
+                  "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white ring-inset shadow-(--knob-shadow)"
                 ),
                 style: {
                   left: `${picker.hsv.s * 100}%`,
@@ -11260,6 +11347,6 @@ var carouselMeta = {
 };
 
 // src/index.ts
-var SABLE_UI_VERSION = "0.4.0";
+var SABLE_UI_VERSION = "0.6.0";
 
-export { Banner, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, Carousel, CheckboxCard, CheckboxGroup, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxPortal, ComboboxValue, ComboboxVirtualList, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DatePicker, Feedback, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, GlidingHighlight, InlineStatus, LineChart, Marquee, MiddleTruncate, Note, NumberField, PageLoader, Pagination, Panel, PanelGroup, PanelResizer, PanelSection, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PropertyPair, PropertyRow, RadarChart, Radio, RadioCard, RadioGroup, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, ScrubField, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, StatusBar, StatusBarGroup, StatusBarSeparator, TRANSPARENT, ThemeSelector, ThemeSwitcher, ThinkingOrb, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, Video, Workspace, WorkspaceBar, WorkspaceCanvas, bannerMeta, bannerVariants, breadcrumbsMeta, calendarMeta, carouselMeta, checkboxCardMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, datePickerMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, isTransparent, lineChartMeta, marqueeMeta, middleTruncateMeta, noteMeta, noteVariants, numberFieldMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, pillMeta, popoverMeta, radarChartMeta, radioCardMeta, radioMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, sheetMeta, sheetVariants, showMoreMeta, statusBarMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, treeIndent, treeMeta, useComboboxFilteredItems, usePanelWidth, useToast, useToastManager, videoMeta, workspaceMeta };
+export { Banner, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, Carousel, CheckboxCard, CheckboxGroup, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxPortal, ComboboxValue, ComboboxVirtualList, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DatePicker, Feedback, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, GlidingHighlight, InlineStatus, LineChart, Marquee, MiddleTruncate, Note, NumberField, PageLoader, Pagination, Panel, PanelGroup, PanelResizer, PanelSection, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PropertyPair, PropertyRow, RadarChart, Radio, RadioCard, RadioGroup, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, ScrubField, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, StatusBar, StatusBarGroup, StatusBarSeparator, TRANSPARENT, ThemeSelector, ThemeSwitcher, ThinkingOrb, ToastAction, ToastClose, ToastContent, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, Video, Workspace, WorkspaceBar, WorkspaceCanvas, bannerMeta, bannerVariants, breadcrumbsMeta, calendarMeta, carouselMeta, checkboxCardMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, datePickerMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, isTransparent, lineChartMeta, marqueeMeta, middleTruncateMeta, noteMeta, noteVariants, numberFieldMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, pillMeta, popoverMeta, radarChartMeta, radioCardMeta, radioMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, sheetMeta, sheetVariants, showMoreMeta, statusBarMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, treeIndent, treeMeta, useComboboxFilteredItems, usePanelWidth, useToast, useToastManager, videoMeta, workspaceMeta };

package/dist/ios/index.d.ts

@@ -56,14 +56,19 @@ declare function NavigationStack({ children, active, label }: {
  * An iOS 26 sheet. At the medium detent it floats inset from the screen edges in
  * Liquid Glass; at the large detent it is opaque and meets the bottom edge. The
  * header is a glass close button and a centered inline title.
+ *
+ * `background="opaque"` keeps the medium sheet's floating shape but fills it
+ * solid, like SwiftUI's `.presentationBackground`: for a form, whose fields
+ * would otherwise sit on whatever the glass is blurring.
  * Browser dialog owns focus trapping, Escape, inert background, and restoration.
  */
-declare function IosSheet({ open, onOpenChange, title, children, detent }: {
+declare function IosSheet({ open, onOpenChange, title, children, detent, background }: {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title: string;
     children: ReactNode;
     detent?: 'medium' | 'large';
+    background?: 'glass' | 'opaque';
 }): react.JSX.Element;
 
 /** A screen: the scrolling page under the navigation bar. Its content is Sable. */

package/dist/ios/index.js

@@ -1,4 +1,5 @@
 import { StatusIcons } from '../chunk-NEQNXI2G.js';
+import { PresentationProvider } from '../chunk-FKZXAFIY.js';
 import { App, Sheet, Button, Glass, Page, NavbarBackLink, TabbarLink, Navbar, Tabbar } from 'konsta/react';
 import { createContext, useEffect, useContext, useState, useRef, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -209,7 +210,7 @@ function NavigationStack({ children, active = true, label }) {
     }
   ) });
 }
-function IosSheet({ open, onOpenChange, title, children, detent = "medium" }) {
+function IosSheet({ open, onOpenChange, title, children, detent = "medium", background = "glass" }) {
   const dialog = useRef(null);
   const titleId = useId();
   const [shown, setShown] = useState(false);
@@ -246,7 +247,7 @@ function IosSheet({ open, onOpenChange, title, children, detent = "medium" }) {
       onClick: (event) => {
         if (event.target === event.currentTarget) onOpenChange(false);
       },
-      children: /* @__PURE__ */ jsxs(Sheet, { opened: shown, backdrop: false, className: "ios-sheet", "data-detent": expanded ? "large" : "medium", style: { height: expanded ? "90%" : "56%" }, children: [
+      children: /* @__PURE__ */ jsxs(Sheet, { opened: shown, backdrop: false, className: "ios-sheet", "data-detent": expanded ? "large" : "medium", "data-background": background, style: { height: expanded ? "90%" : "56%" }, children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -280,7 +281,7 @@ function IosSheet({ open, onOpenChange, title, children, detent = "medium" }) {
           /* @__PURE__ */ jsx(Glass, { className: "ios-sheet-close", children: /* @__PURE__ */ jsx(Button, { inline: true, rounded: true, clear: true, className: "ios-icon-action", "aria-label": "Close", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", width: "16", height: "16", children: /* @__PURE__ */ jsx("path", { d: "M3.5 3.5l9 9m0-9l-9 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none" }) }) }) }),
           /* @__PURE__ */ jsx("h2", { id: titleId, tabIndex: -1, children: title })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "ios-sheet-content", children })
+        /* @__PURE__ */ jsx("div", { className: "ios-sheet-content", children: /* @__PURE__ */ jsx(PresentationProvider, { value: "sheet", children }) })
       ] })
     }
   );

package/dist/ios/styles.css

@@ -87,6 +87,8 @@
   box-shadow: inset 0 .75px .5px rgb(255 255 255 / .6), 0 8px 40px color-mix(in srgb, var(--ios-ink) 14%, transparent);
 }
 .ios-prototype.dark .ios-sheet[data-detent='medium'], .dark .ios-sheet[data-detent='medium'] { box-shadow: inset 0 .75px .5px rgb(255 255 255 / .25), 0 8px 40px rgb(0 0 0 / .4); }
+/* Opaque: the same floating shape, filled solid (presentationBackground). */
+.ios-sheet[data-detent='medium'][data-background='opaque'] { background: var(--ios-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
 .ios-sheet-grabber { display: flex; margin-inline: auto; width: 80px; touch-action: none; }
 .ios-grabber-mark { width: 36px; height: 5px; border-radius: 4px; background: var(--ios-secondary); }
 /* A glass close button, a centered inline title, and an empty column that keeps it centered. */
@@ -97,6 +99,13 @@
    flat surface only smears pale patches into the rim. Keep the fill and highlights. */
 .ios-prototype .ios-sheet .k-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
 .ios-sheet-content { height: calc(100% - 88px); overflow-y: auto; scrollbar-width: none; padding: 16px 20px; }
+/* A stacked action bar sits at the sheet's bottom: every plain box between the content
+   and the bar becomes a column that fills the height, so the bar's margin-top: auto has
+   room to push into. A <form> or a grid keeps its own layout (a form's fields are often
+   a grid), and the bar inside it follows the content, as it would in a tall form anyway. */
+.ios-sheet-content:has([data-actions='stack']),
+.ios-sheet-content :has([data-actions='stack']):not(form, .grid, [role='group']) { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
+.ios-sheet-content :has([data-actions='stack']):not(form, .grid, [role='group']) { flex: 1 0 auto; }
 .ios-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 @keyframes ios-route-enter { from { opacity: .7; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
 @keyframes ios-route-back { from { opacity: .7; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }

package/dist/patterns/index.js

@@ -1,23 +1,13 @@
-import { TextReveal, Reveal, MessageScroller, Marker, Toolbar, ToolbarButton, StreamingText, ChatComposer, SettingsMenu, SettingsRow, AppShell, PageHeader, DataTable, Meter, RelativeTime, Sidebar, SidebarHeader, SidebarNav, SidebarItem, NotificationBadge, SidebarFooter, BottomNav, BottomNavItem, AppHeader, Tabs, TabsList, TabsTrigger, TabsPanel, Skeleton, Browser, MeterLabel, MeterValue, MeterTrack, SearchInput, EmptyState, SideNav, SideNavItem } from '../chunk-D2ETQBHV.js';
-import { Form, Field, Input, Button, Separator, Card, CardContent, Badge, Entity, Avatar, StatusDot, CardHeader, CardTitle, CardDescription, CardAction, Message, Bubble, CodeBlock, SimpleTooltip, Attachment, CardFooter, MenuRadioGroup, MenuRadioItem, CardList, OverflowMenu, MenuItem, MenuSeparator, Textarea, Code, Select, SelectTrigger, SelectContent, SelectItem, DestructiveActionModal, Switch } from '../chunk-CCUDFLU3.js';
+import { TextReveal, Reveal, MessageScroller, Marker, Toolbar, ToolbarButton, StreamingText, ChatComposer, SettingsMenu, SettingsRow, AppShell, PageHeader, DataTable, Meter, RelativeTime, Sidebar, SidebarHeader, SidebarNav, SidebarItem, NotificationBadge, SidebarFooter, BottomNav, BottomNavItem, AppHeader, Tabs, TabsList, TabsTrigger, TabsPanel, Skeleton, Browser, MeterLabel, MeterValue, MeterTrack, SearchInput, EmptyState, SideNav, SideNavItem } from '../chunk-VVW4UCDI.js';
+import { Form, Field, Input, Button, Separator, GradientArt, Card, CardContent, Badge, Entity, Avatar, StatusDot, CardHeader, CardTitle, CardDescription, CardAction, Message, Bubble, CodeBlock, SimpleTooltip, Attachment, CardFooter, MenuRadioGroup, MenuRadioItem, CardList, OverflowMenu, MenuItem, MenuSeparator, Textarea, Code, Select, SelectTrigger, SelectContent, SelectItem, DestructiveActionModal, Switch } from '../chunk-7QSDYBXO.js';
+import '../chunk-FKZXAFIY.js';
 import { Region, Stack, Row, Grid, Page, Columns, Col, AspectBox } from '../chunk-3IWZYBGH.js';
 import '../chunk-SRQWQUTW.js';
-import { Icon } from '../chunk-NGBDP3BM.js';
-import '../chunk-TH563WLW.js';
+import { Icon } from '../chunk-QJ6FWTUG.js';
+import '../chunk-XAZGMY73.js';
 import { useState, useRef, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var artwork = [
-  // design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
-  "radial-gradient(in oklab at 18% 22%, oklch(from var(--tone-info) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent 58%)",
-  // design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
-  "radial-gradient(in oklab at 82% 18%, oklch(from var(--tone-collectible) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent 55%)",
-  // design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
-  "radial-gradient(in oklab at 70% 88%, oklch(from var(--tone-edition) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent 60%)",
-  // design-lint-disable-next-line inline-color -- relative colour derived from the theme's own --tone token, so it follows every look
-  "radial-gradient(in oklab at 12% 92%, oklch(from var(--tone-standard) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent 55%)",
-  "var(--primary)"
-].join(", ");
 function AuthPage() {
   const [pending2, setPending] = useState(false);
   const [errors, setErrors] = useState({});
@@ -76,14 +66,14 @@ function AuthPage() {
         "."
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx("aside", { "aria-label": "Featured release", className: "hidden p-3 lg:flex", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col justify-end rounded-xl p-8", style: { background: artwork }, children: /* @__PURE__ */ jsx(Card, { className: "max-w-md", children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    /* @__PURE__ */ jsx("aside", { "aria-label": "Featured release", className: "hidden p-3 lg:flex", children: /* @__PURE__ */ jsx(GradientArt, { seed: "Untitled (gold rush)", className: "flex flex-1 flex-col justify-end rounded-xl p-8", children: /* @__PURE__ */ jsx(Card, { className: "max-w-md", children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
       /* @__PURE__ */ jsx(Badge, { tone: "edition", className: "self-start", children: "Edition of 50" }),
       /* @__PURE__ */ jsx("p", { className: "text-title-lg", children: "\u201CEvery edition is a conversation with whoever holds it next.\u201D" }),
       /* @__PURE__ */ jsx(
         Entity,
         {
           className: "p-0",
-          leading: /* @__PURE__ */ jsx(Avatar, { fallback: "MO" }),
+          leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: "MO" }),
           title: "Mara Okafor",
           subtitle: "Untitled (gold rush), 2026"
         }
@@ -353,7 +343,7 @@ function BrandLandingPage() {
             /* @__PURE__ */ jsx("blockquote", { className: "text-balance text-heading-3 sm:text-heading-2", children: "\u201CWe used to chase approvals across four tools. Now every request has an owner, a deadline, and a record, and our auditors stopped asking for screenshots.\u201D" })
           ] }),
           /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(Avatar, { size: "lg", fallback: "MO" }),
+            /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: "MO" }),
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "text-title-sm", children: "Maya Okafor" }),
               /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: "Head of operations, Fielddesk" })
@@ -486,6 +476,7 @@ function ChatPanel() {
   const assistant = /* @__PURE__ */ jsx(
     Avatar,
     {
+      variant: "art",
       size: "sm",
       alt: "Assistant",
       fallback: /* @__PURE__ */ jsx(Icon, { name: "sparkles", className: "text-base" })
@@ -711,7 +702,7 @@ function DashboardPage() {
             /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-xl" }),
             /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" })
           ] }),
-          actions: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "Ada Lovelace" })
+          actions: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: "AL", alt: "Ada Lovelace" })
         }
       ),
       bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
@@ -745,7 +736,7 @@ function DashboardPage() {
           Entity,
           {
             className: "[--entity-py:0]",
-            leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "" }),
+            leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: "AL", alt: "" }),
             title: "Ada Lovelace",
             subtitle: "@ada",
             action: /* @__PURE__ */ jsxs(OverflowMenu, { label: "Account", size: "icon-sm", children: [
@@ -890,7 +881,7 @@ function DashboardPage() {
               /* @__PURE__ */ jsx(CardList, { children: collectors.map((person) => /* @__PURE__ */ jsx(
                 Entity,
                 {
-                  leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: person.initials, alt: "" }),
+                  leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: person.initials, alt: "" }),
                   title: person.name,
                   subtitle: `${person.handle} \xB7 ${person.pieces} pieces`,
                   action: /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: usd.format(person.spent) })
@@ -929,7 +920,7 @@ function DashboardPage() {
             /* @__PURE__ */ jsx(CardList, { children: activity.map((item) => /* @__PURE__ */ jsx(
               Entity,
               {
-                leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: item.initials, alt: "" }),
+                leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: item.initials, alt: "" }),
                 title: item.who,
                 subtitle: item.what,
                 action: /* @__PURE__ */ jsx(RelativeTime, { date: Date.now() - item.when, className: "text-caption text-muted-foreground" })
@@ -1019,7 +1010,7 @@ var renderPost = (post) => /* @__PURE__ */ jsx("article", { children: /* @__PURE
   /* @__PURE__ */ jsx(CardList, { children: /* @__PURE__ */ jsx(
     Entity,
     {
-      leading: /* @__PURE__ */ jsx(Avatar, { fallback: post.initials, alt: post.author }),
+      leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: post.initials, alt: post.author }),
       title: post.author,
       subtitle: `${post.handle} \xB7 ${post.time}`,
       action: /* @__PURE__ */ jsxs(OverflowMenu, { label: `Post options for ${post.author}`, size: "icon-sm", children: [
@@ -1082,7 +1073,7 @@ function FeedPage() {
     /* @__PURE__ */ jsxs(Stack, { gap: 3, className: "min-w-0 max-w-(--region-feed) flex-1", children: [
       /* @__PURE__ */ jsx(PageHeader, { title: "Home" }),
       /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Row, { gap: 1.5, align: "start", children: [
-        /* @__PURE__ */ jsx(Avatar, { fallback: "AL", alt: "Ada Lovelace" }),
+        /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: "AL", alt: "Ada Lovelace" }),
         /* @__PURE__ */ jsxs(Stack, { gap: 1.5, className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx(
             Textarea,
@@ -1131,7 +1122,7 @@ function FeedPage() {
         /* @__PURE__ */ jsx(CardList, { children: suggestions.map((person) => /* @__PURE__ */ jsx(
           Entity,
           {
-            leading: /* @__PURE__ */ jsx(Avatar, { fallback: person.initials, alt: person.name }),
+            leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: person.initials, alt: person.name }),
             title: person.name,
             subtitle: person.handle,
             action: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", "aria-label": `Follow ${person.name}`, children: "Follow" })
@@ -1144,7 +1135,7 @@ function FeedPage() {
         /* @__PURE__ */ jsx(CardList, { children: upcoming2.map((drop) => /* @__PURE__ */ jsx(
           Entity,
           {
-            leading: /* @__PURE__ */ jsx(Avatar, { fallback: drop.initials, alt: drop.artist }),
+            leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: drop.initials, alt: drop.artist }),
             title: drop.title,
             subtitle: `${drop.artist} \xB7 ${drop.date}`,
             action: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Remind me about ${drop.title}`, children: /* @__PURE__ */ jsx(Icon, { name: "bell" }) })
@@ -1394,7 +1385,7 @@ function LandingPage() {
               /* @__PURE__ */ jsx(CardList, { children: deploys.map((deploy) => /* @__PURE__ */ jsx(
                 Entity,
                 {
-                  leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: deploy.initials, alt: deploy.name }),
+                  leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: deploy.initials, alt: deploy.name }),
                   title: deploy.title,
                   subtitle: deploy.meta,
                   action: /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: deploy.tone, dot: true, pulse: deploy.pulse, children: deploy.status })
@@ -1721,6 +1712,8 @@ function ListDetailPage() {
               leading: /* @__PURE__ */ jsx(
                 Avatar,
                 {
+                  variant: "art",
+                  seed: m.name,
                   fallback: m.pending ? /* @__PURE__ */ jsx(Icon, { name: "mail", className: "size-5" }) : m.initials,
                   status: m.lastActive === "Online now" ? /* @__PURE__ */ jsx(StatusDot, { tone: "success" }) : void 0,
                   "aria-hidden": true
@@ -1773,6 +1766,7 @@ function ListDetailPage() {
                 /* @__PURE__ */ jsx(
                   Avatar,
                   {
+                    variant: "art",
                     size: "lg",
                     fallback: selected.pending ? /* @__PURE__ */ jsx(Icon, { name: "mail", className: "size-6" }) : selected.initials,
                     status: selected.lastActive === "Online now" ? /* @__PURE__ */ jsx(StatusDot, { tone: "success" }) : void 0,
@@ -1928,7 +1922,7 @@ function SettingsPage() {
             /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-xl" }),
             /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" })
           ] }),
-          actions: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "Ada Lovelace" })
+          actions: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: "AL", alt: "Ada Lovelace" })
         }
       ),
       bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
@@ -1962,7 +1956,7 @@ function SettingsPage() {
           Entity,
           {
             className: "[--entity-py:0]",
-            leading: /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AL", alt: "" }),
+            leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: "AL", alt: "" }),
             title: "Ada Lovelace",
             subtitle: "@ada",
             action: /* @__PURE__ */ jsxs(OverflowMenu, { label: "Account", size: "icon-sm", children: [
@@ -2003,7 +1997,7 @@ function SettingsPage() {
                 /* @__PURE__ */ jsxs(Form, { onSubmit: (event) => event.preventDefault(), className: "gap-0", children: [
                   /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
                     /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
-                      /* @__PURE__ */ jsx(Avatar, { size: "lg", fallback: "AL", alt: "Ada Lovelace" }),
+                      /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "lg", fallback: "AL", alt: "Ada Lovelace" }),
                       /* @__PURE__ */ jsxs(Stack, { gap: 0.5, align: "start", children: [
                         /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
                           /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", children: "Upload photo" }),