@sableui/react 0.5.0 → 0.6.0

package/dist/patterns/index.js

@@ -1,5 +1,6 @@
-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-ZBZMKOO7.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-RCLKXF2N.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-QJ6FWTUG.js';
@@ -7,17 +8,6 @@ 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" }),

package/dist/presets/index.d.ts

@@ -1,4 +1,81 @@
-import { T as ThemeManifest } from '../_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from '../_contract-C2M1SjBf.js';
+
+/** An OKLCH colour, lightness 0–1. Extra fields (alpha) ride along untouched. */
+interface OklchColor {
+    l: number;
+    c: number;
+    h: number;
+}
+/** Ratio and Lc of a label on a fill, and whether it clears both floors. */
+declare function labelContrast(ink: OklchColor, fill: OklchColor): {
+    ratio: number;
+    lc: number;
+    reads: boolean;
+};
+/**
+ * The ink for a fill that cannot move (a status colour, a decorative tone).
+ * One that reads; of two, the stronger. Of none, the one meeting the ratio,
+ * because APCA cannot waive it; failing that, the stronger.
+ */
+declare function inkFor<T extends OklchColor>(fill: OklchColor, inks: readonly T[]): T;
+/**
+ * The fill nearest `fill` on which `ink` reads: lightness moves away from the
+ * ink in small steps, hue holds, and chroma is kept unless the new lightness
+ * cannot show it. Returns `fill` itself when the ink already reads, and the
+ * furthest step tried when nothing in range does.
+ */
+declare function fitFillToInk<T extends OklchColor>(fill: T, ink: OklchColor): T;
+/**
+ * Which ink a colour takes: the one that reads on it with the least change to
+ * it — none, when one already reads (the stronger, when both do). Decide this
+ * once, on the colour as picked, then `fitFillToInk` each mode's fill to it.
+ */
+declare function inkPolarity<T extends OklchColor>(color: OklchColor, inks: readonly T[]): T;
+/** Fills a theme or preset authors from its brand. Their ink follows the colour as picked. */
+declare const BRAND_FILLS: readonly ["primary", "sidebar-primary", "highlight"];
+/**
+ * Status fills. Each has a separate `-text` token for the colour drawn on a
+ * surface (`text-destructive` reads `--destructive-text`), so the fill is free to
+ * sit where its label reads — a dark-mode red under white ink — without taking
+ * the page's error text down with it.
+ */
+declare const STATUS_FILLS: readonly ["destructive", "success", "tone-warning", "tone-info"];
+/**
+ * Every fill a label sits on that the rule measures. Sable's own themes are held
+ * to it (themes.test.ts); a preset or an app is told, offered a fix, and may keep
+ * its choice on the record.
+ */
+declare const LABELLED_FILLS: readonly ["primary", "sidebar-primary", "highlight", "destructive", "success", "tone-warning", "tone-info"];
+/** The rule's id, shared by `sable-lint`, `sable preset --check` and preset `exceptions`. */
+declare const LABEL_CONTRAST_RULE = "label-contrast";
+interface LabelFinding {
+    mode: "light" | "dark";
+    /** The fill token, without `--`; its ink is `${fill}-foreground`. */
+    fill: string;
+    ratio: number;
+    lc: number;
+    /** The nearest pair that reads, decided as the customizer decides it. */
+    suggestion: {
+        fill: string;
+        ink: string;
+    };
+}
+/**
+ * Check each labelled fill against its ink, in both modes.
+ *
+ * Takes resolved values (`oklch(…)` or hex; anything else is counted as
+ * unmeasured, never guessed). Which ink a fix uses is decided on the LIGHT-mode
+ * fill — the colour as picked — so a dark-mode failure on a colour that takes
+ * white is fixed by bringing the fill down, not by flipping the label dark.
+ */
+declare function checkLabelledFills(tokens: {
+    light: Record<string, string | undefined>;
+    dark: Record<string, string | undefined>;
+}): {
+    findings: LabelFinding[];
+    measured: number;
+    unmeasured: string[];
+};
 
 /** The public theme vocabulary. Presets never need component overrides. */
 declare const PRESET_TOKEN_NAMES: readonly string[];
@@ -26,12 +103,38 @@ interface SablePreset {
         light: Record<string, string>;
         dark: Record<string, string>;
     };
+    /**
+     * Sable's opinions the preset declines, on the record. A check reports an
+     * accepted finding with its reason instead of failing on it.
+     */
+    exceptions?: PresetException[];
+}
+/** A deliberate departure from a Sable check — e.g. a brand that requires dark ink on its primary. */
+interface PresetException {
+    rule: typeof LABEL_CONTRAST_RULE;
+    mode: "light" | "dark";
+    /** The fill token, e.g. `primary`. */
+    token: (typeof LABELLED_FILLS)[number];
+    reason: string;
 }
-/** Structural/contract validation; visual contrast and brief fit still need review. */
-declare function validatePreset(input: unknown): string[];
-declare function parsePreset(input: unknown): SablePreset;
+declare function validatePreset(raw: unknown): string[];
+declare function parsePreset(raw: unknown): SablePreset;
 declare function presetManifest(input: SablePreset): ThemeManifest;
 /** Scoped CSS can coexist with built-in presets. Never changes :root globally. */
 declare function presetCss(input: SablePreset): string;
+/**
+ * Labels on the preset's brand and status fills (contrast.ts, "Labels on fills"): each
+ * failing pair with the nearest pair that reads. Findings the preset accepts in
+ * `exceptions` come back under `accepted` with their reason — reported, not
+ * failed, because the choice is the preset author's to make.
+ */
+declare function presetLabelContrast(input: SablePreset): {
+    open: LabelFinding[];
+    accepted: (LabelFinding & {
+        reason: string;
+    })[];
+    measured: number;
+    unmeasured: string[];
+};
 
-export { PRESET_TOKEN_NAMES, type SablePreset, parsePreset, presetCss, presetManifest, validatePreset };
+export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, type LabelFinding, type OklchColor, PRESET_TOKEN_NAMES, type PresetException, STATUS_FILLS, type SablePreset, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };

package/dist/presets/index.js

@@ -1,10 +1,193 @@
-import { SEMANTIC_TOKENS, WORKSPACE_SURFACE_TOKENS, DERIVED_EDGE_TOKENS, RADIUS_TOKENS, MOTION_TOKENS, TYPE_SCALE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_OVERLINE_TOKENS, DENSITY_TOKENS, LAYERING_TOKENS, TYPE_UI_TOKENS } from '../chunk-OQACYT2D.js';
+import { SEMANTIC_TOKENS, WORKSPACE_SURFACE_TOKENS, DERIVED_EDGE_TOKENS, RADIUS_TOKENS, MOTION_TOKENS, TYPE_SCALE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_OVERLINE_TOKENS, DENSITY_TOKENS, LAYERING_TOKENS, TYPE_UI_TOKENS, ART_TOKENS } from '../chunk-NETUFI34.js';
+
+// src/themes/contrast.ts
+function oklchToLinearRgb(L, C, H) {
+  const h = H * Math.PI / 180;
+  const a = C * Math.cos(h);
+  const b = C * Math.sin(h);
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+function hexToLinearRgb(hex) {
+  const m = hex.trim().match(/^#([0-9a-f]{6})$/i);
+  if (!m) return null;
+  const n = Number.parseInt(m[1], 16);
+  const toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  return [
+    toLinear((n >> 16 & 255) / 255),
+    toLinear((n >> 8 & 255) / 255),
+    toLinear((n & 255) / 255)
+  ];
+}
+var clamp01 = (x) => Math.min(1, Math.max(0, x));
+function linearToSrgb(c) {
+  const v = clamp01(c);
+  return v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+}
+function parseColorWithAlpha(value) {
+  const v = value.trim();
+  if (v.startsWith("#")) {
+    const rgb2 = hexToLinearRgb(v.length === 9 ? v.slice(0, 7) : v);
+    if (!rgb2) return null;
+    const alpha2 = v.length === 9 ? Number.parseInt(v.slice(7), 16) / 255 : 1;
+    return { rgb: rgb2, alpha: Number.isNaN(alpha2) ? 1 : alpha2 };
+  }
+  const m = v.match(
+    /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+)(%?))?\s*\)/i
+  );
+  if (!m) return null;
+  const rgb = oklchToLinearRgb(
+    m[2] === "%" ? Number(m[1]) / 100 : Number(m[1]),
+    Number(m[3]),
+    Number(m[4])
+  );
+  const alpha = m[5] === void 0 ? 1 : m[6] === "%" ? Number(m[5]) / 100 : Number(m[5]);
+  return { rgb, alpha };
+}
+function luminance([r, g, b]) {
+  return 0.2126 * clamp01(r) + 0.7152 * clamp01(g) + 0.0722 * clamp01(b);
+}
+function contrastRatio(a, b) {
+  const [l1, l2] = [luminance(a), luminance(b)];
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+var CONTRAST_FLOOR = 4.5;
+var toSrgb = linearToSrgb;
+function apcaLc(ink, surface) {
+  const Y = (rgb) => {
+    const [r, g, b] = rgb.map(toSrgb);
+    const y = 0.2126729 * r ** 2.4 + 0.7151522 * g ** 2.4 + 0.072175 * b ** 2.4;
+    return y < 0.022 ? y + (0.022 - y) ** 1.414 : y;
+  };
+  const Yt = Y(ink);
+  const Yb = Y(surface);
+  if (Math.abs(Yb - Yt) < 5e-4) return 0;
+  let out;
+  if (Yb > Yt) {
+    const s = (Yb ** 0.56 - Yt ** 0.57) * 1.14;
+    out = s < 0.035 ? 0 : s - 0.027;
+  } else {
+    const s = (Yb ** 0.65 - Yt ** 0.62) * 1.14;
+    out = s > -0.035 ? 0 : s + 0.027;
+  }
+  return out * 100;
+}
+var PERCEPTUAL_FLOOR = 60;
+var GAMUT_EPSILON = 1e-4;
+function isInSrgbGamut(rgb, epsilon = GAMUT_EPSILON) {
+  return rgb.every((c) => c >= -epsilon && c <= 1 + epsilon);
+}
+var linearOf = ({ l, c, h }) => oklchToLinearRgb(l, c, h);
+function maxChromaAt(l, h) {
+  if (l <= 0 || l >= 1) return 0;
+  let lo = 0;
+  let hi = 0.4;
+  for (let i = 0; i < 24; i++) {
+    const mid = (lo + hi) / 2;
+    if (isInSrgbGamut(oklchToLinearRgb(l, mid, h))) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
+function labelContrast(ink, fill) {
+  const a = linearOf(ink);
+  const b = linearOf(fill);
+  const ratio = contrastRatio(a, b);
+  const lc = apcaLc(a, b);
+  return { ratio, lc, reads: ratio >= CONTRAST_FLOOR && Math.abs(lc) >= PERCEPTUAL_FLOOR };
+}
+function inkFor(fill, inks) {
+  const rank = (ink) => {
+    const v = labelContrast(ink, fill);
+    return (v.reads ? 2 : v.ratio >= CONTRAST_FLOOR ? 1 : 0) * 1e3 + Math.abs(v.lc);
+  };
+  return inks.reduce((best, ink) => rank(ink) > rank(best) ? ink : best);
+}
+var FILL_GAMUT_SAFETY = 0.98;
+function fitFillToInk(fill, ink) {
+  if (labelContrast(ink, fill).reads) return fill;
+  const step = ink.l > fill.l ? -5e-3 : 5e-3;
+  let candidate = fill;
+  for (let l = fill.l + step; l > 0.05 && l < 0.98; l += step) {
+    candidate = { ...fill, l, c: Math.min(fill.c, maxChromaAt(l, fill.h) * FILL_GAMUT_SAFETY) };
+    if (labelContrast(ink, candidate).reads) return candidate;
+  }
+  return candidate;
+}
+function inkPolarity(color, inks) {
+  const cost = (ink) => {
+    const fitted = fitFillToInk(color, ink);
+    const v = labelContrast(ink, fitted);
+    return (v.reads ? 0 : 10) + Math.abs(fitted.l - color.l) - Math.abs(v.lc) / 1e4;
+  };
+  return inks.reduce((best, ink) => cost(ink) < cost(best) ? ink : best);
+}
+function linearRgbToOklch([r, g, b]) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const c = Math.hypot(A, B);
+  return { l: L, c, h: c < 1e-4 ? 0 : (Math.atan2(B, A) * 180 / Math.PI + 360) % 360 };
+}
+var formatOklchColor = ({ l, c, h }) => `oklch(${(l * 100).toFixed(1)}% ${c.toFixed(3)} ${h.toFixed(1)})`;
+var BRAND_FILLS = ["primary", "sidebar-primary", "highlight"];
+var STATUS_FILLS = ["destructive", "success", "tone-warning", "tone-info"];
+var LABELLED_FILLS = [...BRAND_FILLS, ...STATUS_FILLS];
+var LABEL_CONTRAST_RULE = "label-contrast";
+function checkLabelledFills(tokens) {
+  const findings = [];
+  const unmeasured = [];
+  let measured = 0;
+  const read = (value) => {
+    const parsed = value ? parseColorWithAlpha(value) : null;
+    return parsed && parsed.alpha >= 1 ? linearRgbToOklch(parsed.rgb) : null;
+  };
+  for (const mode of ["light", "dark"]) {
+    for (const fill of LABELLED_FILLS) {
+      const rawFill = tokens[mode][fill];
+      const rawInk = tokens[mode][`${fill}-foreground`];
+      if (!rawFill && !rawInk) continue;
+      const fillColor = read(rawFill);
+      const ink = read(rawInk);
+      if (!fillColor || !ink) {
+        unmeasured.push(`${mode}.${fill}`);
+        continue;
+      }
+      measured++;
+      const verdict = labelContrast(ink, fillColor);
+      if (verdict.reads) continue;
+      const opposite = ink.l > 0.5 ? { l: 0.2, c: 0.03, h: fillColor.h } : { l: 0.985, c: 0.01, h: fillColor.h };
+      const reference = read(tokens.light[fill]) ?? fillColor;
+      const chosen = inkPolarity(reference, [ink, { ...opposite, h: reference.h }]);
+      const nextInk = chosen === ink ? ink : opposite;
+      findings.push({
+        mode,
+        fill,
+        ratio: verdict.ratio,
+        lc: verdict.lc,
+        suggestion: { fill: formatOklchColor(fitFillToInk(fillColor, nextInk)), ink: formatOklchColor(nextInk) }
+      });
+    }
+  }
+  return { findings, measured, unmeasured };
+}
 
 // src/presets/index.ts
 var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   ...SEMANTIC_TOKENS,
   ...WORKSPACE_SURFACE_TOKENS.map((name) => `theme-${name}`),
   ...DERIVED_EDGE_TOKENS.map((name) => `theme-${name}`),
+  // Art direction: optional hooks — a preset without them paints the default art.
+  ...ART_TOKENS.map((name) => `theme-${name}`),
   ...WORKSPACE_SURFACE_TOKENS,
   ...DERIVED_EDGE_TOKENS,
   ...RADIUS_TOKENS,
@@ -38,7 +221,31 @@ var tokenNames = new Set(PRESET_TOKEN_NAMES);
 var record = (value) => !!value && typeof value === "object" && !Array.isArray(value);
 var text = (value) => typeof value === "string" && value.trim().length > 0;
 var safeCss = (value) => value.length <= 2048 && !/[;{}<>\\@]|\/\*|\*\/|!important|url\s*\(|expression\s*\(|REPLACE/i.test(value);
-function validatePreset(input) {
+var STATUS_TEXT_FROM_FILL = {
+  "destructive-text": "destructive",
+  "success-text": "success",
+  "tone-warning-text": "tone-warning",
+  "tone-info-text": "tone-info"
+};
+function upgradePreset(input) {
+  if (!record(input) || !record(input.tokens)) return input;
+  const tokens = input.tokens;
+  const shared = record(tokens.shared) ? tokens.shared : {};
+  const upgraded = { ...tokens };
+  for (const mode of ["light", "dark"]) {
+    const values = tokens[mode];
+    if (!record(values)) continue;
+    const next = { ...values };
+    for (const [name, fill] of Object.entries(STATUS_TEXT_FROM_FILL)) {
+      const value = values[fill] ?? shared[fill];
+      if (!text(values[name]) && !text(shared[name]) && text(value)) next[name] = value;
+    }
+    upgraded[mode] = next;
+  }
+  return { ...input, tokens: upgraded };
+}
+function validatePreset(raw) {
+  const input = upgradePreset(raw);
   if (!record(input)) return ["Preset must be a JSON object."];
   const issues = [];
   if (input.schemaVersion !== 1) issues.push("Unsupported preset schemaVersion; expected 1.");
@@ -58,6 +265,13 @@ function validatePreset(input) {
       if (!record(item) || !text(item.source) || !text(item.observation) || !["measured", "estimated", "derived", "user-edited"].includes(String(item.method))) issues.push(`Invalid reference observation ${index + 1}.`);
     });
   }
+  if (input.exceptions !== void 0) {
+    if (!Array.isArray(input.exceptions) || input.exceptions.length > 50) issues.push("exceptions must be an array of at most 50 entries.");
+    else input.exceptions.forEach((item, index) => {
+      if (!record(item) || item.rule !== LABEL_CONTRAST_RULE || !["light", "dark"].includes(String(item.mode)) || !LABELLED_FILLS.includes(item.token) || !text(item.reason) || item.reason.length > 500)
+        issues.push(`Invalid exception ${index + 1}: needs rule "${LABEL_CONTRAST_RULE}", mode light|dark, token (${LABELLED_FILLS.join(", ")}) and a reason.`);
+    });
+  }
   if (!record(input.tokens)) return [...issues, "tokens must contain shared, light, and dark objects."];
   const groups = input.tokens;
   for (const group of ["shared", "light", "dark"]) {
@@ -92,10 +306,10 @@ function validatePreset(input) {
   }
   return issues;
 }
-function parsePreset(input) {
-  const issues = validatePreset(input);
+function parsePreset(raw) {
+  const issues = validatePreset(raw);
   if (issues.length) throw new Error(issues.join("\n"));
-  return input;
+  return upgradePreset(raw);
 }
 function presetManifest(input) {
   const preset = parsePreset(input);
@@ -122,5 +336,24 @@ ${declarations(preset.tokens.light)}
 }
 `;
 }
+function presetLabelContrast(input) {
+  const preset = parsePreset(input);
+  const values = (mode) => {
+    const all = { ...preset.tokens.shared, ...preset.tokens[mode] };
+    const resolve = (value, depth = 0) => depth > 10 ? value : value.replace(/^var\(\s*--([\w-]+)\s*\)$/, (m, name) => all[name] ? resolve(all[name], depth + 1) : m);
+    return Object.fromEntries(Object.entries(all).map(([name, value]) => [name, resolve(value)]));
+  };
+  const { findings, measured, unmeasured } = checkLabelledFills({ light: values("light"), dark: values("dark") });
+  const reasonFor = (f) => preset.exceptions?.find((e) => e.rule === LABEL_CONTRAST_RULE && e.mode === f.mode && e.token === f.fill)?.reason;
+  return {
+    open: findings.filter((f) => !reasonFor(f)),
+    accepted: findings.flatMap((f) => {
+      const reason = reasonFor(f);
+      return reason ? [{ ...f, reason }] : [];
+    }),
+    measured,
+    unmeasured
+  };
+}
 
-export { PRESET_TOKEN_NAMES, parsePreset, presetCss, presetManifest, validatePreset };
+export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, PRESET_TOKEN_NAMES, STATUS_FILLS, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };

package/dist/styles.css

@@ -109,6 +109,39 @@
 	--color-tone-edition-foreground: var(--tone-edition-foreground);
 	--color-tone-warning-foreground: var(--tone-warning-foreground);
 	--color-tone-info-foreground: var(--tone-info-foreground);
+	/* Status text: a status colour drawn on a surface. Tailwind resolves each
+	   property's own namespace before --color-*, so `text-destructive`,
+	   `border-destructive`, `ring-destructive` (and outline, decoration, fill,
+	   stroke) read --destructive-text while `bg-destructive` keeps the fill.
+	   Same class names; the value fits the job. */
+	--text-color-destructive: var(--destructive-text);
+	--border-color-destructive: var(--destructive-text);
+	--ring-color-destructive: var(--destructive-text);
+	--outline-color-destructive: var(--destructive-text);
+	--text-decoration-color-destructive: var(--destructive-text);
+	--fill-destructive: var(--destructive-text);
+	--stroke-destructive: var(--destructive-text);
+	--text-color-success: var(--success-text);
+	--border-color-success: var(--success-text);
+	--ring-color-success: var(--success-text);
+	--outline-color-success: var(--success-text);
+	--text-decoration-color-success: var(--success-text);
+	--fill-success: var(--success-text);
+	--stroke-success: var(--success-text);
+	--text-color-tone-warning: var(--tone-warning-text);
+	--border-color-tone-warning: var(--tone-warning-text);
+	--ring-color-tone-warning: var(--tone-warning-text);
+	--outline-color-tone-warning: var(--tone-warning-text);
+	--text-decoration-color-tone-warning: var(--tone-warning-text);
+	--fill-tone-warning: var(--tone-warning-text);
+	--stroke-tone-warning: var(--tone-warning-text);
+	--text-color-tone-info: var(--tone-info-text);
+	--border-color-tone-info: var(--tone-info-text);
+	--ring-color-tone-info: var(--tone-info-text);
+	--outline-color-tone-info: var(--tone-info-text);
+	--text-decoration-color-tone-info: var(--tone-info-text);
+	--fill-tone-info: var(--tone-info-text);
+	--stroke-tone-info: var(--tone-info-text);
 	--color-highlight-foreground: var(--highlight-foreground);
 
 	/* Overlay — fixed dark scrim/media surface + its light ink (bg-overlay,
@@ -352,6 +385,23 @@
 	   are hard 3–12px drops); on a 20px knob inside its track that drop escaped
 	   the track. A knob only sits on its rail, so it keeps one small shadow. */
 	--knob-shadow: var(--theme-knob-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+
+	/* Art direction for generated imagery (GradientArt; see ART_TOKENS in
+	   themes/_contract.ts). The default paints the four decorative tones,
+	   lifted from their text strength to an art strength, glowing over the brand
+	   steeped in the first tone; a theme overrides any of it through the
+	   --theme-art-* hooks. Declared here, on every scope, so a .dark island or a
+	   preset-scoped preview paints from its own tokens. */
+	--art-1: var(--theme-art-1, oklch(from var(--tone-info) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-2: var(--theme-art-2, oklch(from var(--tone-collectible) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-3: var(--theme-art-3, oklch(from var(--tone-edition) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-4: var(--theme-art-4, oklch(from var(--tone-standard) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-5: var(--theme-art-5, transparent);
+	--art-6: var(--theme-art-6, transparent);
+	--art-ground: var(--theme-art-ground, color-mix(in oklab, var(--primary) 55%, oklch(from var(--tone-info) 0.3 c h)));
+	--art-warp: var(--theme-art-warp, 0.8);
+	--art-softness: var(--theme-art-softness, 0.88);
+	--art-grain: var(--theme-art-grain, 0);
 }
 
 /* ==========================================================================

package/dist/{theme-provider-CGeiusgu.d.ts → theme-provider-kQszHYji.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { T as ThemeManifest } from './_contract-Cn3lUpih.js';
+import { T as ThemeManifest } from './_contract-C2M1SjBf.js';
 
 declare const SABLE_THEME_ATTRIBUTE: "data-sable-theme";
 declare const DEFAULT_THEME_ID: string;