@sableui/react 0.6.1 → 0.7.0

package/dist/patterns/settings-page.js

@@ -0,0 +1,268 @@
+// src/patterns/settings-page.tsx
+import { useState } from "react";
+import { Icon } from "../icon/index.js";
+import { AppHeader } from "../components/app-header/index.js";
+import { AppShell } from "../components/app-shell/index.js";
+import { Avatar } from "../components/avatar/index.js";
+import { BottomNav, BottomNavItem } from "../components/bottom-nav/index.js";
+import { Button } from "../components/button/index.js";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardList,
+  CardTitle
+} from "../components/card/index.js";
+import { DestructiveActionModal } from "../components/destructive-action-modal/index.js";
+import { OverflowMenu } from "../components/overflow-menu/index.js";
+import { Entity } from "../components/entity/index.js";
+import { Field, Form } from "../components/form/index.js";
+import { Input } from "../components/input/index.js";
+import { MenuItem, MenuSeparator } from "../components/menu/index.js";
+import { NotificationBadge } from "../components/notification-badge/index.js";
+import { PageHeader } from "../components/page-header/index.js";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../components/select/index.js";
+import { SideNav, SideNavItem } from "../components/side-nav/index.js";
+import {
+  Sidebar,
+  SidebarFooter,
+  SidebarBrand,
+  SidebarHeader,
+  SidebarItem,
+  SidebarNav
+} from "../components/sidebar/index.js";
+import { Switch } from "../components/switch/index.js";
+import { Textarea } from "../components/textarea/index.js";
+import { Col, Columns, Grid, Page, Row, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sections = [
+  { id: "profile", label: "Profile" },
+  { id: "notifications", label: "Notifications" },
+  { id: "payouts", label: "Payouts" },
+  { id: "account", label: "Account" }
+];
+var timezones = [
+  { value: "europe-london", label: "London (GMT+1)" },
+  { value: "europe-paris", label: "Paris (GMT+2)" },
+  { value: "america-new-york", label: "New York (GMT\u22124)" },
+  { value: "america-los-angeles", label: "Los Angeles (GMT\u22127)" },
+  { value: "asia-tokyo", label: "Tokyo (GMT+9)" }
+];
+var notifications = [
+  { name: "notifyCollects", title: "New collects", description: "When someone collects your work", on: true },
+  { name: "notifySoldOut", title: "Sold out", description: "When an edition sells its last copy", on: true },
+  { name: "notifyFollowers", title: "New followers", description: "When a collector follows you", on: false },
+  { name: "notifyDigest", title: "Weekly digest", description: "Sales and collectors, every Monday", on: true },
+  { name: "notifyProduct", title: "Product updates", description: "New Atelier features", on: false }
+];
+var payouts = [
+  { label: "Next payout", value: "$1,284.60", note: "Friday, Oct 16" },
+  { label: "Pending", value: "$412.00", note: "Clears in 7 days" },
+  { label: "Paid this year", value: "$18,920.00", note: "Across 214 collects" }
+];
+function SettingsPage() {
+  const [activeSection, setActiveSection] = useState("profile");
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    AppShell,
+    {
+      header: /* @__PURE__ */ jsx(
+        AppHeader,
+        {
+          title: /* @__PURE__ */ jsxs(Row, { gap: 1, align: "center", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid", className: "text-xl" }),
+            /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: "Atelier" })
+          ] }),
+          actions: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: "AL", alt: "Ada Lovelace" })
+        }
+      ),
+      bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Collectors", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/collectors" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }), label: "Activity", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/activity" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", showLabel: true, active: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
+      ] }),
+      sidebar: /* @__PURE__ */ jsxs(Sidebar, { children: [
+        /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(SidebarBrand, { mark: /* @__PURE__ */ jsx(Icon, { name: "gem", variant: "solid" }), label: "Atelier", render: /* @__PURE__ */ jsx("a", { href: "/" }) }) }),
+        /* @__PURE__ */ jsxs(SidebarNav, { children: [
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", render: /* @__PURE__ */ jsx("a", { href: "/" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }), label: "Editions", render: /* @__PURE__ */ jsx("a", { href: "/editions" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Collectors", render: /* @__PURE__ */ jsx("a", { href: "/collectors" }) }),
+          /* @__PURE__ */ jsx(
+            SidebarItem,
+            {
+              icon: /* @__PURE__ */ jsx(Icon, { name: "bell" }),
+              label: "Activity",
+              badge: /* @__PURE__ */ jsx(NotificationBadge, { count: 4, tone: "neutral" }),
+              render: /* @__PURE__ */ jsx("a", { href: "/activity" })
+            }
+          ),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), label: "Settings", active: true, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
+        ] }),
+        /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(
+          Entity,
+          {
+            className: "[--entity-py:0]",
+            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: [
+              /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/@ada" }), children: "View profile" }),
+              /* @__PURE__ */ jsx(MenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/settings" }), children: "Settings" }),
+              /* @__PURE__ */ jsx(MenuSeparator, {}),
+              /* @__PURE__ */ jsx(MenuItem, { children: "Sign out" })
+            ] })
+          }
+        ) })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs(Page, { max: "wide", gap: 4, className: "py-6", children: [
+          /* @__PURE__ */ jsx(
+            PageHeader,
+            {
+              title: "Settings",
+              description: "Manage your profile, notifications, and payouts."
+            }
+          ),
+          /* @__PURE__ */ jsxs(Columns, { gap: 4, children: [
+            /* @__PURE__ */ jsx(Col, { span: { base: 12, lg: 3 }, className: "hidden lg:block", children: /* @__PURE__ */ jsx(SideNav, { "aria-label": "Settings sections", className: "sticky top-6", children: sections.map((section) => /* @__PURE__ */ jsx(
+              SideNavItem,
+              {
+                label: section.label,
+                active: activeSection === section.id,
+                onClick: () => setActiveSection(section.id),
+                render: /* @__PURE__ */ jsx("a", { href: `#${section.id}` })
+              },
+              section.id
+            )) }) }),
+            /* @__PURE__ */ jsx(Col, { span: { base: 12, lg: 9 }, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+              /* @__PURE__ */ jsxs(Card, { id: "profile", className: "scroll-mt-6", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Profile" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "How collectors see you on Atelier." })
+                ] }),
+                /* @__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, { 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" }),
+                          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", children: "Remove" })
+                        ] }),
+                        /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: "Square PNG or JPG, at least 400 px." })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Grid, { cols: { base: 1, sm: 2 }, gap: 3, children: [
+                      /* @__PURE__ */ jsx(Field, { label: "Display name", name: "displayName", required: true, children: /* @__PURE__ */ jsx(Input, { defaultValue: "Ada Lovelace", autoComplete: "name" }) }),
+                      /* @__PURE__ */ jsx(Field, { label: "Handle", name: "handle", description: "atelier.com/@ada", required: true, children: /* @__PURE__ */ jsx(Input, { defaultValue: "ada", autoComplete: "username", spellCheck: false }) })
+                    ] }),
+                    /* @__PURE__ */ jsx(Field, { label: "Bio", name: "bio", description: "Shown on your profile and edition pages.", children: /* @__PURE__ */ jsx(
+                      Textarea,
+                      {
+                        rows: 3,
+                        defaultValue: "Generative artist working in plotted ink and code. New editions of 25 to 100 every month."
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 2 }, gap: 3, children: /* @__PURE__ */ jsx(Field, { label: "Timezone", name: "timezone", description: "Release times use this zone.", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "europe-london", items: timezones, children: [
+                      /* @__PURE__ */ jsx(SelectTrigger, {}),
+                      /* @__PURE__ */ jsx(SelectContent, { children: timezones.map((zone) => /* @__PURE__ */ jsx(SelectItem, { value: zone.value, children: zone.label }, zone.value)) })
+                    ] }) }) })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(CardFooter, { className: "justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save profile" }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { id: "notifications", className: "scroll-mt-6", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Notifications" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Email updates about your editions. Changes save automatically." })
+                ] }),
+                /* @__PURE__ */ jsx(CardList, { children: notifications.map((item) => /* @__PURE__ */ jsx(
+                  Entity,
+                  {
+                    title: item.title,
+                    subtitle: item.description,
+                    action: /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        name: item.name,
+                        defaultChecked: item.on,
+                        "aria-label": item.title
+                      }
+                    )
+                  },
+                  item.name
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { id: "payouts", className: "scroll-mt-6", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Payouts" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Paid in USD every Friday to Chase checking \u2022\u20224821." }),
+                  /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/settings/payouts" }), children: "Manage payouts" }) })
+                ] }),
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Grid, { cols: { base: 1, sm: 3 }, gap: 3, children: payouts.map((stat) => /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: stat.label }),
+                  /* @__PURE__ */ jsx("p", { className: "text-mono-lg text-foreground", children: stat.value }),
+                  /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: stat.note })
+                ] }, stat.label)) }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { id: "account", className: "scroll-mt-6", children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Account" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Sign-in details and your data." })
+                ] }),
+                /* @__PURE__ */ jsxs(CardList, { children: [
+                  /* @__PURE__ */ jsx(
+                    Entity,
+                    {
+                      leading: /* @__PURE__ */ jsx(Icon, { name: "mail", className: "text-lg text-muted-foreground" }),
+                      title: "Email",
+                      subtitle: "ada@atelier.art",
+                      action: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Change" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Entity,
+                    {
+                      leading: /* @__PURE__ */ jsx(Icon, { name: "download", className: "text-lg text-muted-foreground" }),
+                      title: "Export data",
+                      subtitle: "Editions, sales, and collectors",
+                      action: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Export" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Card, { children: [
+                /* @__PURE__ */ jsxs(CardHeader, { children: [
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Delete account" }),
+                  /* @__PURE__ */ jsx(CardDescription, { children: "Permanently remove your profile, editions, and sales history. Collectors keep the editions they own." })
+                ] }),
+                /* @__PURE__ */ jsx(CardFooter, { className: "justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => setDeleteOpen(true), children: "Delete account" }) })
+              ] })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          DestructiveActionModal,
+          {
+            open: deleteOpen,
+            onOpenChange: setDeleteOpen,
+            title: "Delete your account?",
+            description: "This permanently removes your profile, 12 editions, and sales history. Pending payouts are still sent. This can't be undone.",
+            confirmLabel: "Delete account",
+            confirmingLabel: "Deleting\u2026",
+            confirmText: "ada",
+            onConfirm: () => setDeleteOpen(false)
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SettingsPage
+};

package/dist/patterns/settings-page.meta.js

@@ -0,0 +1,27 @@
+// src/patterns/settings-page.meta.ts
+var settingsPageMeta = {
+  name: "SettingsPage",
+  summary: "Account settings inside the app shell: a sticky SideNav section rail beside a column of section Cards \u2014 a Profile form with the page's one explicit save, Card + CardList + Entity rows with Switches that apply instantly, a read-only payouts summary, account rows, and a delete card confirmed through DestructiveActionModal.",
+  intent: "Reach for this for account/profile/workspace settings and any 'edit a handful of grouped preferences' route. Not for a single short form (use AuthPage's centered form shape) or bulk record editing (use DashboardPage + DataTable).",
+  notes: [
+    "Region cap is `wide`, split on a 12-column track: a 3-column SideNav rail and a 9-column section column. The rail fills the space a lone content-width column would leave empty and gives the page its table of contents.",
+    "The rail is `SideNav` (the documented settings sub-nav), sticky, with in-page anchor items; it hides below lg, where the sections simply stack and the shell's BottomNav carries app navigation.",
+    "One save model, stated in the copy: drafted text (the Profile form) commits through its single footer save; toggles apply the moment they change, and the Notifications description says so. Never pair a Switch with a Save button.",
+    "Settings rows are Card + CardList + Entity with the Switch in `action` \u2014 the row owns its title and one-line description; keep descriptions short, because Entity truncates its subtitle.",
+    "Each section is a Card whose CardTitle holds an h2, so the page has a real heading outline under PageHeader's h1; Cards carry the anchor id and `scroll-mt-*` so anchor jumps clear the top edge.",
+    "Field wires label/description/error a11y automatically; never hand-roll <label> + <input> pairs. Pair fields side by side with Grid cols={{ base: 1, sm: 2 }}.",
+    "The destructive action is last and isolated in its own Card, and it never acts directly: it opens DestructiveActionModal with type-to-confirm on the handle.",
+    "Lives in the same AppShell as DashboardPage: Sidebar from lg up, AppHeader + BottomNav below it, with Settings marked active in both."
+  ],
+  a11y: [
+    'AppShell provides the skip link and <main id="main-content"> landmark; the active SidebarItem and BottomNavItem carry aria-current.',
+    'The section rail is a labelled <nav> ("Settings sections") distinct from the primary navigation; its active item carries aria-current.',
+    "Every section has an h2, so screen-reader heading navigation mirrors the rail.",
+    "Each Switch takes its row title as aria-label, since the Entity title is not a <label>.",
+    "Field auto-wires htmlFor/id, aria-describedby (description + error), aria-invalid, and required.",
+    "DestructiveActionModal is an alertdialog: focus opens on Cancel, the backdrop does not dismiss, and the confirm stays disabled until the handle is typed."
+  ]
+};
+export {
+  settingsPageMeta
+};

package/dist/presets/index.js

@@ -1,187 +1,30 @@
-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
+import {
+  SEMANTIC_TOKENS,
+  MOTION_TOKENS,
+  RADIUS_TOKENS,
+  TYPE_SCALE_TOKENS,
+  TYPE_REFINEMENT_TOKENS,
+  TYPE_OVERLINE_TOKENS,
+  DENSITY_TOKENS,
+  LAYERING_TOKENS,
+  WORKSPACE_SURFACE_TOKENS,
+  DERIVED_EDGE_TOKENS,
+  TYPE_UI_TOKENS,
+  ART_TOKENS
+} from "../themes/_contract.js";
+import { LABEL_CONTRAST_RULE, LABELLED_FILLS, checkLabelledFills } from "../themes/contrast.js";
+import {
+  BRAND_FILLS,
+  LABEL_CONTRAST_RULE as LABEL_CONTRAST_RULE2,
+  LABELLED_FILLS as LABELLED_FILLS2,
+  STATUS_FILLS,
+  checkLabelledFills as checkLabelledFills2,
+  fitFillToInk,
+  inkFor,
+  inkPolarity,
+  labelContrast
+} from "../themes/contrast.js";
 var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   ...SEMANTIC_TOKENS,
   ...WORKSPACE_SURFACE_TOKENS.map((name) => `theme-${name}`),
@@ -355,5 +198,20 @@ function presetLabelContrast(input) {
     unmeasured
   };
 }
-
-export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, PRESET_TOKEN_NAMES, STATUS_FILLS, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };
+export {
+  BRAND_FILLS,
+  LABELLED_FILLS2 as LABELLED_FILLS,
+  LABEL_CONTRAST_RULE2 as LABEL_CONTRAST_RULE,
+  PRESET_TOKEN_NAMES,
+  STATUS_FILLS,
+  checkLabelledFills2 as checkLabelledFills,
+  fitFillToInk,
+  inkFor,
+  inkPolarity,
+  labelContrast,
+  parsePreset,
+  presetCss,
+  presetLabelContrast,
+  presetManifest,
+  validatePreset
+};