@sableui/react 0.4.0 → 0.6.0

package/dist/themes/meridian/meridian.css

@@ -143,14 +143,18 @@
 	--accent: oklch(57.5% 0.2 31.5);
 	--accent-foreground: oklch(99% 0.004 91.5);
 	--destructive: oklch(48% 0.2 25);
+	--destructive-text: oklch(48% 0.2 25);
 	--destructive-foreground: oklch(94.6% 0.0083 91.48);
 	--success: oklch(43% 0.1 165);
+	--success-text: oklch(43% 0.1 165);
 	--success-foreground: oklch(94.6% 0.0083 91.48);
 	--tone-standard: oklch(40% 0.07 130);
 	--tone-collectible: oklch(46% 0.14 285);
 	--tone-edition: oklch(45% 0.15 309);
 	--tone-info: oklch(48% 0.13 250);
+	--tone-info-text: oklch(48% 0.13 250);
 	--tone-warning: oklch(50% 0.12 52);
+	--tone-warning-text: oklch(50% 0.12 52);
 	--highlight: oklch(57.5% 0.2 31.5);
 	/* Ember as TEXT (eyebrow numbers, arrows). The fill ember carries white ink
 	   but is too light to be read as ink itself (4.1:1 on the sand); this is the
@@ -230,15 +234,20 @@
 	--secondary-foreground: oklch(94.3% 0.0042 91.45);
 	--accent: oklch(57.5% 0.2 31.5);
 	--accent-foreground: oklch(99% 0.004 91.5);
-	--destructive: oklch(66% 0.21 25);
-	--destructive-foreground: oklch(22.46% 0.0094 107.13);
-	--success: oklch(72% 0.12 165);
+	/* Status colours come in two: the fill carries a label (destructive sits low under white ink), and `-text` is the same colour drawn on a surface — text, borders, rings — kept light enough to read on a dark card. */
+	--destructive: oklch(55% 0.21 25);
+	--destructive-text: oklch(78.5% 0.122 25);
+	--destructive-foreground: oklch(94.6% 0.0083 91.48);
+	--success: oklch(75.5% 0.12 165);
+	--success-text: oklch(75.5% 0.12 165);
 	--success-foreground: oklch(22.46% 0.0094 107.13);
 	--tone-standard: oklch(70% 0.09 130);
 	--tone-collectible: oklch(70% 0.12 285);
 	--tone-edition: oklch(68% 0.14 309);
-	--tone-info: oklch(72% 0.11 250);
+	--tone-info: oklch(76.5% 0.11 250);
+	--tone-info-text: oklch(76.5% 0.11 250);
 	--tone-warning: oklch(78% 0.13 60);
+	--tone-warning-text: oklch(78% 0.13 60);
 	--highlight: oklch(57.5% 0.2 31.5);
 	--meridian-ember-ink: oklch(72% 0.17 33); /* 6.4:1 on the dark ground */
 	--tone-standard-foreground: oklch(22.46% 0.0094 107.13);
@@ -258,3 +267,23 @@
 	--sidebar-border: oklch(34.69% 0.0186 98.75);
 	--sidebar-ring: oklch(65.11% 0.2063 32.56);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Grainy monochrome photographic grounds (art-direction.md): soft
+   mid-grey tones, slightly lifted blacks, film grain — and none of the orange
+   accent, which belongs to typography and controls. Greys carry the ink's
+   warm cast.
+   Declared on every arm so a .dark or .light island derives from its own
+   tokens rather than inheriting this scope's resolved colours. */
+[data-sable-theme="meridian"],
+[data-sable-theme="meridian"] .dark,
+[data-sable-theme="meridian"] .light {
+	--theme-art-1: oklch(from var(--foreground) 0.88 0.008 h);
+	--theme-art-2: oklch(from var(--foreground) 0.62 0.006 h);
+	--theme-art-3: oklch(from var(--foreground) 0.38 0.008 h);
+	--theme-art-4: oklch(from var(--foreground) 0.74 0.006 h);
+	--theme-art-ground: oklch(from var(--foreground) 0.28 0.008 h);
+	--theme-art-warp: 0.4;
+	--theme-art-softness: 0.92;
+	--theme-art-grain: 0.55;
+}

package/dist/themes/poppy/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../../_contract-C2M1SjBf.js';
 
 /** Original Sable preset; no third-party artwork or reference-site code. */
 declare const poppyTheme: ThemeManifest;

package/dist/themes/poppy/poppy.css

@@ -79,14 +79,18 @@
 	--accent: oklch(87.83223% 0.046910 333.7803);
 	--accent-foreground: oklch(27.91553% 0.070219 323.8141);
 	--destructive: oklch(51.71923% 0.183122 13.5471);
+	--destructive-text: oklch(51.71923% 0.183122 13.5471);
 	--destructive-foreground: oklch(100.00000% 0.000000 89.8756);
 	--success: oklch(44.82304% 0.085811 158.9570);
+	--success-text: oklch(44.82304% 0.085811 158.9570);
 	--success-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-standard: oklch(45.04846% 0.050543 265.7140);
 	--tone-collectible: oklch(44.74226% 0.160756 301.6122);
 	--tone-edition: oklch(48.37678% 0.151106 344.8805);
 	--tone-info: oklch(47.10428% 0.117665 253.7666);
+	--tone-info-text: oklch(47.10428% 0.117665 253.7666);
 	--tone-warning: oklch(48.46763% 0.102195 75.1153);
+	--tone-warning-text: oklch(48.46763% 0.102195 75.1153);
 	--highlight: oklch(86.64637% 0.118528 86.6791);
 	--tone-standard-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-collectible-foreground: oklch(100.00000% 0.000000 89.8756);
@@ -162,14 +166,18 @@
 	--accent: oklch(45.76059% 0.076204 319.6398);
 	--accent-foreground: oklch(96.99788% 0.031195 84.5922);
 	--destructive: oklch(80.09751% 0.118613 6.8786);
+	--destructive-text: oklch(80.09751% 0.118613 6.8786);
 	--destructive-foreground: oklch(27.91553% 0.070219 323.8141);
 	--success: oklch(83.08052% 0.080357 158.1865);
+	--success-text: oklch(83.08052% 0.080357 158.1865);
 	--success-foreground: oklch(27.91553% 0.070219 323.8141);
 	--tone-standard: oklch(82.64273% 0.059760 270.2687);
 	--tone-collectible: oklch(81.83406% 0.094036 306.4836);
 	--tone-edition: oklch(82.56509% 0.096677 343.4480);
 	--tone-info: oklch(85.19509% 0.074997 252.9332);
+	--tone-info-text: oklch(85.19509% 0.074997 252.9332);
 	--tone-warning: oklch(86.64637% 0.118528 86.6791);
+	--tone-warning-text: oklch(86.64637% 0.118528 86.6791);
 	--highlight: oklch(86.64637% 0.118528 86.6791);
 	--highlight-foreground: oklch(27.91553% 0.070219 323.8141);
 	--overlay: oklch(13.55719% 0.032037 309.1234);
@@ -188,3 +196,23 @@
 	--tone-info-foreground: oklch(27.91553% 0.070219 323.8141);
 	--tone-warning-foreground: oklch(27.91553% 0.070219 323.8141);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Playful: candy colours in crisp, wobbly blobs — sunny yellow,
+   bubblegum, grape, sky and a mint the palette lacks. Low softness keeps each
+   blob its own colour instead of melting into one.
+   Declared on every arm so a .dark or .light island derives from its own
+   tokens rather than inheriting this scope's resolved colours. */
+[data-sable-theme="poppy"],
+[data-sable-theme="poppy"] .dark,
+[data-sable-theme="poppy"] .light {
+	--theme-art-1: oklch(from var(--highlight) 0.88 0.15 h);
+	--theme-art-2: oklch(from var(--tone-edition) 0.72 0.19 h);
+	--theme-art-3: oklch(from var(--tone-collectible) 0.64 0.2 h);
+	--theme-art-4: oklch(from var(--tone-info) 0.76 0.13 h);
+	--theme-art-5: oklch(0.85 0.12 168);
+	--theme-art-ground: oklch(from var(--tone-collectible) 0.45 0.16 h);
+	--theme-art-warp: 1;
+	--theme-art-softness: 0.5;
+	--theme-art-grain: 0;
+}

package/dist/themes/prism/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../../_contract-C2M1SjBf.js';
 
 /** Original Sable preset; no third-party artwork or reference-site code. */
 declare const prismTheme: ThemeManifest;

package/dist/themes/prism/prism.css

@@ -79,14 +79,18 @@
 	--accent: oklch(90.43693% 0.027753 253.2434);
 	--accent-foreground: oklch(26.55994% 0.047330 255.4106);
 	--destructive: oklch(51.62734% 0.183834 19.4551);
+	--destructive-text: oklch(51.62734% 0.183834 19.4551);
 	--destructive-foreground: oklch(100.00000% 0.000000 89.8756);
 	--success: oklch(45.54384% 0.081395 166.9049);
+	--success-text: oklch(45.54384% 0.081395 166.9049);
 	--success-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-standard: oklch(44.17719% 0.043085 257.4210);
 	--tone-collectible: oklch(45.52411% 0.167785 299.9667);
 	--tone-edition: oklch(46.78672% 0.141265 343.5094);
 	--tone-info: oklch(46.18475% 0.139719 259.8084);
+	--tone-info-text: oklch(46.18475% 0.139719 259.8084);
 	--tone-warning: oklch(48.72795% 0.103396 73.7587);
+	--tone-warning-text: oklch(48.72795% 0.103396 73.7587);
 	--highlight: oklch(87.60451% 0.060193 266.4847);
 	--tone-standard-foreground: oklch(100.00000% 0.000000 89.8756);
 	--tone-collectible-foreground: oklch(100.00000% 0.000000 89.8756);
@@ -158,14 +162,18 @@
 	--accent: oklch(44.66150% 0.052212 253.9323);
 	--accent-foreground: oklch(96.50786% 0.016545 259.4182);
 	--destructive: oklch(79.47983% 0.122016 8.7083);
+	--destructive-text: oklch(79.47983% 0.122016 8.7083);
 	--destructive-foreground: oklch(25.20350% 0.047984 259.9119);
 	--success: oklch(82.23776% 0.085532 165.8233);
+	--success-text: oklch(82.23776% 0.085532 165.8233);
 	--success-foreground: oklch(25.20350% 0.047984 259.9119);
 	--tone-standard: oklch(82.02131% 0.046953 256.4806);
 	--tone-collectible: oklch(77.28561% 0.118760 301.0442);
 	--tone-edition: oklch(80.44093% 0.102099 341.6738);
 	--tone-info: oklch(80.57243% 0.097939 259.4939);
+	--tone-info-text: oklch(80.57243% 0.097939 259.4939);
 	--tone-warning: oklch(84.66478% 0.108333 84.1636);
+	--tone-warning-text: oklch(84.66478% 0.108333 84.1636);
 	--highlight: oklch(82.28684% 0.088371 261.1846);
 	--highlight-foreground: oklch(25.20350% 0.047984 259.9119);
 	--overlay: oklch(14.80476% 0.014876 256.6891);
@@ -184,3 +192,21 @@
 	--tone-info-foreground: oklch(25.20350% 0.047984 259.9119);
 	--tone-warning-foreground: oklch(25.20350% 0.047984 259.9119);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Long soft airbrushed fields, pink to violet to periwinkle, with one
+   vivid indigo (art-direction.md). Diffuse, sourceless glow; no grain.
+   Declared on every arm so a .dark or .light island derives from its own
+   tokens rather than inheriting this scope's resolved colours. */
+[data-sable-theme="prism"],
+[data-sable-theme="prism"] .dark,
+[data-sable-theme="prism"] .light {
+	--theme-art-1: oklch(from var(--tone-edition) 0.83 0.1 h);
+	--theme-art-2: oklch(from var(--tone-collectible) 0.68 0.16 h);
+	--theme-art-3: oklch(from var(--tone-info) 0.82 0.09 h);
+	--theme-art-4: oklch(from var(--primary) 0.55 0.2 h);
+	--theme-art-ground: oklch(from var(--primary) 0.35 0.14 h);
+	--theme-art-warp: 0.45;
+	--theme-art-softness: 1;
+	--theme-art-grain: 0;
+}

package/dist/themes/sable/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../../_contract-C2M1SjBf.js';
 
 /**
  * Sable — the default theme. Concrete token values live in

package/dist/themes/sable/sable.css

@@ -220,8 +220,12 @@
 	--tone-standard-dark: oklch(78% 0.205 168);
 	--tone-info-dark: oklch(76% 0.165 235);
 	--tone-warning-dark: oklch(82% 0.165 65);
-	--highlight-dark: oklch(70% 0.285 318);
-	--destructive-dark: oklch(68% 0.225 25);
+	/* A labelled fill: dropped to where white reads (4.8:1, Lc 72) rather than
+	   lifted to where dark ink reads muddy (Lc 46). */
+	--highlight-dark: oklch(57% 0.28 318);
+	/* Status colours come in two: the fill carries a label (destructive sits low under white ink), and `-text` is the same colour drawn on a surface — text, borders, rings — kept light enough to read on a dark card. */
+	--destructive-dark: oklch(77.5% 0.129 25);
+	--destructive-fill-dark: oklch(59% 0.225 25);
 	/* Success twins the standard tone's dark value today (same caribbean-green),
 	   but is a SEPARATE token a theme can retune independently of the post-type. */
 	--success-dark: oklch(78% 0.205 168);
@@ -245,8 +249,10 @@
 	--accent: var(--zinc-100);
 	--accent-foreground: var(--zinc-950);
 	--destructive: var(--torch-red-600);
+	--destructive-text: var(--torch-red-600);
 	--destructive-foreground: var(--white);
 	--success: var(--caribbean-green-600);
+	--success-text: var(--caribbean-green-600);
 	--success-foreground: var(--zinc-50);
 
 	--border: var(--zinc-200);
@@ -263,7 +269,9 @@
 	--tone-collectible: var(--blue-gem-600);
 	--tone-edition: var(--purple-heart-700);
 	--tone-warning: var(--flush-orange-700);
+	--tone-warning-text: var(--flush-orange-700);
 	--tone-info: var(--azure-radiance-600);
+	--tone-info-text: var(--azure-radiance-700); /* a step under the fill: 600 is 4.46:1 as text on muted */
 	--highlight: var(--purple-heart-700);
 
 	/* Tone ink — light mode the tone fills resolve to dark 600/700 steps, so the
@@ -422,15 +430,18 @@
 	--muted-foreground: var(--zinc-400);
 	--accent: var(--zinc-800);
 	--accent-foreground: var(--zinc-50);
-	--destructive: var(--destructive-dark);
-	/* Dark `--destructive` is a light, vibrant red (so `text-destructive` reads on
-	   the near-black canvas). White ink on that fill is only ~3.3:1 (fails AA), so
-	   the legible ink flips to the dark neutral — exactly like the tone fills below.
-	   Dark ink on the light-red fill is ~5.9:1. */
-	--destructive-foreground: var(--zinc-950);
-	/* Like the tone fills, dark `--success` is a light, vibrant green, so the
-	   legible ink flips to the dark neutral (same model as --destructive above). */
+	--destructive: var(--destructive-fill-dark);
+	--destructive-text: var(--destructive-dark);
+	/* Dark destructive is two colours. The fill is a saturated red low enough for
+	   white (4.6:1, Lc 75); dark ink on the old light-red fill passed the ratio but
+	   read muddy (Lc 44). `text-destructive` and its borders and rings read
+	   `--destructive-text`, the light, vibrant red that reads on the near-black
+	   canvas. */
+	--destructive-foreground: var(--white);
+	/* Dark `--success` is a light, vibrant green that works as both fill and text,
+	   so the legible ink flips to the dark neutral. */
 	--success: var(--success-dark);
+	--success-text: var(--success-dark);
 	--success-foreground: var(--zinc-950);
 
 	--border: oklch(from var(--zinc-700) l c h / 0.4);
@@ -444,7 +455,9 @@
 	--tone-collectible: var(--tone-collectible-dark);
 	--tone-edition: var(--tone-edition-dark);
 	--tone-warning: var(--tone-warning-dark);
+	--tone-warning-text: var(--tone-warning-dark);
 	--tone-info: var(--tone-info-dark);
+	--tone-info-text: var(--tone-info-dark);
 	--highlight: var(--highlight-dark);
 
 	/* Tone ink — dark mode the tone fills resolve to lighter dark-tuned values,
@@ -455,7 +468,7 @@
 	--tone-edition-foreground: var(--zinc-950);
 	--tone-warning-foreground: var(--zinc-950);
 	--tone-info-foreground: var(--zinc-950);
-	--highlight-foreground: var(--zinc-950);
+	--highlight-foreground: var(--zinc-50);
 	--overlay: var(--zinc-950);
 	--overlay-foreground: var(--zinc-50);
 

package/dist/themes/verdant/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../../_contract-C2M1SjBf.js';
 
 /**
  * Verdant — a Sable theme. Concrete token values live in

package/dist/themes/verdant/verdant.css

@@ -111,8 +111,10 @@
 	--accent: oklch(91.5% 0.014 170);
 	--accent-foreground: oklch(24% 0.035 175);
 	--destructive: oklch(51% 0.19 22);
+	--destructive-text: oklch(51% 0.19 22);
 	--destructive-foreground: oklch(98.6% 0.004 106);
 	--success: oklch(50% 0.11 173);
+	--success-text: oklch(50% 0.11 173);
 	--success-foreground: oklch(98.6% 0.004 106);
 	--tone-standard: oklch(49% 0.018 175);
 	--tone-standard-foreground: oklch(98.6% 0.004 106);
@@ -121,8 +123,10 @@
 	--tone-edition: oklch(50% 0.11 173);
 	--tone-edition-foreground: oklch(98.6% 0.004 106);
 	--tone-info: oklch(51% 0.12 250);
+	--tone-info-text: oklch(51% 0.12 250);
 	--tone-info-foreground: oklch(98.6% 0.004 106);
 	--tone-warning: oklch(53% 0.12 65);
+	--tone-warning-text: oklch(51% 0.12 65); /* a step under the fill: 53% is 4.44:1 as text on muted */
 	--tone-warning-foreground: oklch(98.6% 0.004 106);
 	--highlight: oklch(90% 0.05 100);
 	--highlight-foreground: oklch(24% 0.035 175);
@@ -186,9 +190,12 @@
 	--secondary-foreground: oklch(98.6% 0.004 106);
 	--accent: oklch(33% 0.045 175); /* above --popover: a hover row or chip inside a menu/dialog must still read */
 	--accent-foreground: oklch(98.6% 0.004 106);
-	--destructive: oklch(64% 0.19 22);
-	--destructive-foreground: oklch(16% 0.03 175);
-	--success: oklch(72% 0.13 173);
+	/* Status colours come in two: the fill carries a label (destructive sits low under white ink), and `-text` is the same colour drawn on a surface — text, borders, rings — kept light enough to read on a dark card. */
+	--destructive: oklch(57.5% 0.19 22);
+	--destructive-text: oklch(78% 0.125 22);
+	--destructive-foreground: oklch(98.6% 0.004 106);
+	--success: oklch(74% 0.13 173);
+	--success-text: oklch(74% 0.13 173);
 	--success-foreground: oklch(16% 0.03 175);
 	--tone-standard: oklch(72% 0.015 175);
 	--tone-standard-foreground: oklch(16% 0.03 175);
@@ -196,9 +203,11 @@
 	--tone-collectible-foreground: oklch(16% 0.03 175);
 	--tone-edition: oklch(76% 0.12 173);
 	--tone-edition-foreground: oklch(16% 0.03 175);
-	--tone-info: oklch(74% 0.11 250);
+	--tone-info: oklch(76% 0.11 250);
+	--tone-info-text: oklch(76% 0.11 250);
 	--tone-info-foreground: oklch(16% 0.03 175);
 	--tone-warning: oklch(80% 0.13 75);
+	--tone-warning-text: oklch(80% 0.13 75);
 	--tone-warning-foreground: oklch(16% 0.03 175);
 	--highlight: oklch(40% 0.06 90);
 	--highlight-foreground: oklch(98.6% 0.004 106);
@@ -213,3 +222,24 @@
 	--sidebar-border: oklch(30% 0.03 175);
 	--sidebar-ring: oklch(85% 0.015 170);
 }
+
+/* Art direction for generated imagery (GradientArt; ART_TOKENS in
+   themes/_contract.ts). Out-of-focus stained glass (art-direction.md): saturated teal,
+   orange, magenta, blue and green zones melting into each other, glowing from
+   within, each zone keeping its own colour. Colour lives in imagery only, so the art is far brighter than the
+   two-tone chrome. No grain.
+   Declared on every arm so a .dark or .light island derives from its own
+   tokens rather than inheriting this scope's resolved colours. */
+[data-sable-theme="verdant"],
+[data-sable-theme="verdant"] .dark,
+[data-sable-theme="verdant"] .light {
+	--theme-art-1: oklch(from var(--tone-edition) 0.76 0.15 h);
+	--theme-art-2: oklch(from var(--tone-warning) 0.76 0.16 h);
+	--theme-art-3: oklch(0.66 0.24 355);
+	--theme-art-4: oklch(from var(--tone-info) 0.62 0.17 h);
+	--theme-art-5: oklch(0.8 0.19 140);
+	--theme-art-ground: oklch(from var(--tone-collectible) 0.24 0.05 h);
+	--theme-art-warp: 0.9;
+	--theme-art-softness: 0.62;
+	--theme-art-grain: 0;
+}

package/llms/blocks/danger-zone-block.md

@@ -44,7 +44,7 @@ export function DangerZoneBlock({ className, framed = true, onDelete }: DangerZo
 						Permanently remove your profile, editions, and sales history. Collectors keep the editions they own.
 					</CardDescription>
 				</CardHeader>
-				<CardFooter className="justify-end">
+				<CardFooter actions className="justify-end">
 					<Button variant="destructive" onClick={() => setOpen(true)}>
 						Delete account
 					</Button>

package/llms/blocks/event-card-block.md

@@ -66,7 +66,7 @@ export function EventCardBlock({ className, framed = true, onRespond }: EventCar
 			<CardFooter className="flex-wrap justify-between gap-3">
 				<AvatarGroup aria-label={`${event.total} attendees`} total={event.total} size="sm" surface={framed ? "card" : undefined} fit>
 					{event.attendees.map((initials) => (
-						<Avatar key={initials} fallback={initials} alt={initials} />
+						<Avatar variant="art" key={initials} fallback={initials} alt={initials} />
 					))}
 				</AvatarGroup>
 				<div className="flex gap-2">

package/llms/blocks/feedback-form-block.md

@@ -52,7 +52,7 @@ export function FeedbackFormBlock({ className, framed = true, onDone }: Feedback
 				</ToggleGroup>
 				<Textarea placeholder="What worked, what didn’t…" aria-label="Notes" rows={3} value={notes} onChange={(e) => setNotes(e.target.value)} />
 			</CardContent>
-			<CardFooter className="justify-end">
+			<CardFooter actions className="justify-end">
 				<Button variant="ghost" size="sm" onClick={() => onDone?.(false)}>
 					Skip
 				</Button>

package/llms/blocks/invite-team-block.md

@@ -41,7 +41,7 @@ export function InviteTeamBlock({ className, framed = true, onSend }: InviteTeam
 			<CardContent className="flex flex-col gap-4">
 				<AvatarGroup aria-label={`${collaborators.length} collaborators`} size="sm" surface={framed ? "card" : undefined}>
 					{collaborators.map((initials) => (
-						<Avatar key={initials} fallback={initials} alt={initials} />
+						<Avatar variant="art" key={initials} fallback={initials} alt={initials} />
 					))}
 				</AvatarGroup>
 				<form

package/llms/blocks/media-player-block.md

@@ -21,24 +21,10 @@ A now-playing card: cover, title and artist as an Entity with a Like action, a p
 
 ```tsx
 import { useState } from "react"
-import { Button, Card, CardContent, cn, Entity, Icon, Slider } from "@sableui/react"
+import { Button, Card, CardContent, cn, Entity, GradientArt, Icon, Slider } from "@sableui/react"
 
 const track = { title: "Low tide, high noon", artist: "Juno Avery", position: 38, elapsed: "1:24", remaining: "-2:16" }
 
-/**
- * Placeholder cover painted from the palette — the theme's decorative tones
- * over the brand, so it follows every look. Replace with the cover image.
- */
-const ART_TONES = ["info", "collectible", "edition"]
-const ART_SPOTS = [[20, 20, 70], [85, 30, 60], [60, 90, 65]]
-const cover = [
-	...ART_SPOTS.map(
-		([x, y, reach], i) =>
-			// 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 ${x}% ${y}%, oklch(from var(--tone-${ART_TONES[i % ART_TONES.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`,
-	),
-	"var(--primary)",
-].join(", ")
 
 export interface MediaPlayerBlockProps {
 	className?: string
@@ -59,7 +45,8 @@ export function MediaPlayerBlock({ className, framed = true, onPlayingChange, on
 				    card already pads it. */}
 				<Entity
 					className="p-0"
-					leading={<div aria-hidden className="size-14 rounded-md" style={{ background: cover }} />}
+					// Placeholder cover painted from the theme. Replace with the cover image.
+					leading={<GradientArt aria-hidden seed={track.title} className="size-14 rounded-md" />}
 					title={track.title}
 					subtitle={track.artist}
 					action={

package/llms/blocks/notification-list-block.md

@@ -9,7 +9,7 @@ An activity list: Entity rows with the actor's Avatar, who did what, and a compa
 ## Notes
 
 - Rows are Card + CardList + Entity, inset from the card's padding at any density.
-- Unread is a quiet info dot after the time — the list stays calm when most items are unread.
+- Unread is a quiet info dot before the time, so the times keep one right edge — the list stays calm when most items are unread.
 - framed={false} drops the surface for a Popover, which already is one.
 
 ## Accessibility
@@ -40,7 +40,7 @@ export function NotificationListBlock({ className, framed = true }: Notification
 				{notifications.map((n) => (
 					<Entity
 						key={n.name}
-						leading={<Avatar size="sm" fallback={n.initials} alt={n.name} />}
+						leading={<Avatar variant="art" size="sm" fallback={n.initials} alt={n.name} />}
 						title={
 							<>
 								{n.name}
@@ -50,8 +50,8 @@ export function NotificationListBlock({ className, framed = true }: Notification
 						subtitle={n.what}
 						action={
 							<span className="flex items-center gap-1.5 text-caption text-muted-foreground">
-								{n.when}
 								{n.unread ? <StatusDot tone="info" /> : null}
+								{n.when}
 							</span>
 						}
 					/>

package/llms/blocks/product-card-block.md

@@ -20,25 +20,10 @@ A product card: edge-to-edge artwork, title and maker, an edition Badge, and the
 ## Source
 
 ```tsx
-import { Badge, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, cn } from "@sableui/react"
+import { Badge, Button, Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle, cn, GradientArt } from "@sableui/react"
 
 const product = { title: "Untitled (gold rush)", maker: "Mara Okafor", edition: "12 of 50", price: "0.42 SOL" }
 
-/**
- * Placeholder artwork painted from the palette — a soft mesh of the theme's
- * decorative tones over the brand, so it follows every look. Replace the art
- * <div> with your product's image.
- */
-const ART_TONES = ["info", "collectible", "edition", "standard"]
-const ART_SPOTS = [[18, 22, 58], [82, 18, 55], [70, 88, 60], [12, 92, 55]]
-const artwork = [
-	...ART_SPOTS.map(
-		([x, y, reach], i) =>
-			// 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 ${x}% ${y}%, oklch(from var(--tone-${ART_TONES[i % ART_TONES.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`,
-	),
-	"var(--primary)",
-].join(", ")
 
 export interface ProductCardBlockProps {
 	className?: string
@@ -51,7 +36,8 @@ export interface ProductCardBlockProps {
 export function ProductCardBlock({ className, framed = true, onCollect }: ProductCardBlockProps) {
 	return (
 		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs overflow-hidden", className)}>
-			<div aria-hidden className="aspect-[4/3]" style={{ background: artwork }} />
+			{/* Placeholder art painted from the theme, so it follows every look. Replace with the product image. */}
+			<GradientArt aria-hidden seed={product.title} className="aspect-[4/3]" />
 			<CardHeader>
 				<CardTitle>{product.title}</CardTitle>
 				<CardDescription>{product.maker}</CardDescription>

package/llms/blocks/profile-card-block.md

@@ -21,7 +21,7 @@ A profile card: a cover banner, an avatar rising into it, Share and Follow, the
 
 ```tsx
 import { useState } from "react"
-import { Avatar, Button, Card, CardContent, CardDescription, CardTitle, cn, Icon } from "@sableui/react"
+import { Avatar, Button, Card, CardContent, CardDescription, CardTitle, cn, GradientArt, Icon } from "@sableui/react"
 
 const profile = {
 	name: "Juno Avery",
@@ -34,20 +34,6 @@ const profile = {
 	],
 }
 
-/**
- * Placeholder banner painted from the palette — the theme's decorative tones
- * over the brand, so it follows every look. Replace with the person's cover image.
- */
-const ART_TONES = ["info", "collectible", "edition", "standard"]
-const ART_SPOTS = [[10, 50, 60], [50, 0, 55], [90, 60, 60], [40, 100, 50]]
-const banner = [
-	...ART_SPOTS.map(
-		([x, y, reach], i) =>
-			// 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 ${x}% ${y}%, oklch(from var(--tone-${ART_TONES[i % ART_TONES.length]}) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h), transparent ${reach}%)`,
-	),
-	"var(--primary)",
-].join(", ")
 
 export interface ProfileCardBlockProps {
 	className?: string
@@ -62,12 +48,13 @@ export function ProfileCardBlock({ className, framed = true, onFollowChange, onS
 	const [following, setFollowing] = useState(false)
 	return (
 		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-xs overflow-hidden", className)}>
-			<div aria-hidden className="h-20" style={{ background: banner }} />
+			{/* Placeholder banner painted from the theme, so it follows every look. Replace with the person's cover image. */}
+			<GradientArt aria-hidden seed={profile.handle} className="h-20" />
 			{/* pt-0: the avatar rises into the banner above, so the content
 			    starts at the banner's edge rather than a full pad below it. */}
 			<CardContent className="flex flex-col gap-3 pt-0">
 				<div className="flex items-start justify-between">
-					<Avatar size="lg" fallback={profile.initials} alt={profile.name} className="-mt-6 ring-4 ring-card" />
+					<Avatar variant="art" size="lg" fallback={profile.initials} alt={profile.name} className="-mt-6 ring-4 ring-card" />
 					<div className="flex gap-1.5 pt-3">
 						<Button variant="ghost" size="icon-sm" aria-label="Share profile" onClick={onShare}>
 							<Icon name="share" />

package/llms/blocks/profile-form-block.md

@@ -64,7 +64,7 @@ export function ProfileFormBlock({ className, framed = true, onSave }: ProfileFo
 				<CardContent>
 					<Stack gap={3}>
 						<Row gap={2}>
-							<Avatar size="lg" fallback={profile.initials} alt={profile.name} />
+							<Avatar variant="art" size="lg" fallback={profile.initials} alt={profile.name} />
 							<Stack gap={0.5} align="start">
 								<Row gap={1}>
 									<Button type="button" variant="outline" size="sm">
@@ -104,7 +104,7 @@ export function ProfileFormBlock({ className, framed = true, onSave }: ProfileFo
 						</Grid>
 					</Stack>
 				</CardContent>
-				<CardFooter className="justify-end">
+				<CardFooter actions className="justify-end">
 					<Button type="submit">Save profile</Button>
 				</CardFooter>
 			</Form>

package/llms/blocks/team-members-block.md

@@ -54,7 +54,7 @@ export function TeamMembersBlock({ className, framed = true, onInvite, onMemberA
 				{members.map((m) => (
 					<Entity
 						key={m.id}
-						leading={<Avatar size="sm" fallback={m.initials} alt={m.name} />}
+						leading={<Avatar variant="art" size="sm" fallback={m.initials} alt={m.name} />}
 						title={m.name}
 						subtitle={m.email}
 						action={

package/llms/blocks/testimonial-block.md

@@ -50,7 +50,7 @@ export function TestimonialBlock({ className }: TestimonialBlockProps) {
 							<blockquote className="text-balance text-heading-3 sm:text-heading-2">“{story.quote}”</blockquote>
 						</Stack>
 						<figcaption className="flex items-center gap-3">
-							<Avatar size="lg" fallback={story.initials} alt={story.name} />
+							<Avatar variant="art" size="lg" fallback={story.initials} alt={story.name} />
 							<div>
 								<p className="text-title-sm">{story.name}</p>
 								<p className="text-body-sm text-muted-foreground">{story.role}</p>

package/llms/components/avatar.md

@@ -12,6 +12,7 @@ Use Avatar to represent a person, team, or account with a compact visual identit
 
 ### Best practices
 
+- Do: Use `variant="art"` where people without photos sit side by side — a member list, an activity feed, a chat. Seeded by the person, each gets their own colour, so faces stay tellable apart at a glance; the neutral fallback makes everyone the same grey circle.
 - Do: Provide meaningful alt text for profile images, or an empty alt when the adjacent text already names the person.
 - Do: Use initials or a simple glyph fallback so missing images still communicate identity.
 - Do: Use consistent sizes within a group; reserve lg for profile headers or major identity moments.
@@ -50,14 +51,17 @@ Use Avatar to represent a person, team, or account with a compact visual identit
 | fallbackDelay | number | — | Delay before showing the fallback, in ms — avoids a flash on fast loads. |
 | status | ReactNode | — | A presence indicator pinned to the bottom-end edge, usually <StatusDot tone="success" />. It sits outside the clipped circle and wears a ring in the surface colour (--avatar-group-ring, else the page background). Use this instead of absolutely positioning a dot over an Avatar. |
 | size | "sm" \| "md" \| "lg" | "md" | Square footprint: 32px / 40px / 48px. |
+| variant | "neutral" \| "art" | "neutral" | What the fallback looks like. neutral: initials on the muted surface. art: initials over GradientArt seeded by the person, so each person without a photo gets their own stable colour from the theme. |
+| seed | string \| number | — | The art variant's seed. Defaults to the fallback text, then `alt`, so a person keeps one colour wherever they appear; pass a user id to tell apart two people who share initials. |
 
 ## Variants
 
 - **size**: sm, md, lg
+- **variant**: neutral, art
 
 ## Tokens used
 
-`muted`, `muted-foreground`, `background`, `card`, `popover`
+`muted`, `muted-foreground`, `background`, `card`, `popover`, `overlay`, `overlay-foreground`
 
 ## Accessibility
 
@@ -90,6 +94,14 @@ import { Avatar } from "@sableui/react"
 <Avatar fallback="AM" alt="Alex Morgan" />
 ```
 
+### Art fallback
+
+```tsx
+import { Avatar } from "@sableui/react"
+
+<Avatar variant="art" fallback="AM" alt="Alex Morgan" />
+```
+
 ### Sizes
 
 ```tsx