@sableui/react 0.9.1 → 0.10.0

package/dist/patterns/auth-page.js

@@ -24,7 +24,7 @@ function AuthPage() {
       /* @__PURE__ */ jsxs(Stack, { gap: 4, justify: "center", className: "flex-1 py-12", children: [
         /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
           /* @__PURE__ */ jsx("h1", { className: "text-heading-1", children: "Welcome back" }),
-          /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: "Sign in to collect new releases and manage your editions." })
+          /* @__PURE__ */ jsx("p", { className: "text-body-lg text-muted-foreground", children: "Sign in to pick up where you and your team left off." })
         ] }),
         /* @__PURE__ */ jsxs(
           Form,
@@ -51,7 +51,7 @@ function AuthPage() {
         /* @__PURE__ */ jsx(Separator, { label: "or" }),
         /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
           /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", iconStart: /* @__PURE__ */ jsx(Icon, { name: "key" }), children: "Sign in with a passkey" }),
-          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", iconStart: /* @__PURE__ */ jsx(Icon, { name: "wallet" }), children: "Connect a wallet" })
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "cta", className: "w-full", iconStart: /* @__PURE__ */ jsx(Icon, { name: "mail" }), children: "Email me a sign-in link" })
         ] }),
         /* @__PURE__ */ jsxs("p", { className: "text-body-md text-muted-foreground", children: [
           "No account?",
@@ -70,16 +70,16 @@ function AuthPage() {
         "."
       ] })
     ] }) }),
-    /* @__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("aside", { "aria-label": "Customer story", 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: "1", className: "self-start", children: "Customer story" }),
+      /* @__PURE__ */ jsx("p", { className: "text-title-lg", children: "\u201CWe moved three teams over in a week, and nobody asked for the old tool back.\u201D" }),
       /* @__PURE__ */ jsx(
         Entity,
         {
           className: "p-0",
           leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: "MO" }),
           title: "Mara Okafor",
-          subtitle: "Untitled (gold rush), 2026"
+          subtitle: "Head of Design, Northwind"
         }
       )
     ] }) }) }) }) })

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

@@ -1,7 +1,7 @@
 // src/patterns/auth-page.meta.ts
 var authPageMeta = {
   name: "AuthPage",
-  summary: "Split sign-in page: a form column (brand mark, heading, email + password, primary sign-in, passkey and wallet alternatives, sign-up switch, terms) beside a brand panel painted from the theme's tones with a featured release card. Below lg the panel drops away and the form is the whole screen.",
+  summary: "Split sign-in page: a form column (brand mark, heading, email + password, primary sign-in, passkey and email-link alternatives, sign-up switch, terms) beside a brand panel painted from the theme's tones with a customer story card. Below lg the panel drops away and the form is the whole screen.",
   intent: "Reach for this for sign-in, sign-up, forgot-password, and any single-purpose one-column form route (invite accept, unsubscribe). Not for multi-section forms (use SettingsPage).",
   notes: [
     "The form column is a `form`-capped Region (480px), so the controls keep the same measure whether the panel is present or not.",
@@ -9,13 +9,13 @@ var authPageMeta = {
     "The heading is `text-heading-1` in an h1 \u2014 it is the page outline, so it takes a heading tier, not a card title.",
     "Brand mark, form and terms are a three-part column: mark pinned to the top, form vertically centred in the remaining space, terms pinned to the bottom.",
     "Forgot password sits under the password field, right-aligned, before the submit button \u2014 so it comes right after the field in tab order. Field has no label-row action slot yet.",
-    "One primary action. Passkey and wallet are outline buttons under an `or` Separator; switching to sign-up is a quiet `link-underline` link.",
+    "One primary action. Passkey and email link are outline buttons under an `or` Separator; switching to sign-up is a quiet `link-underline` link.",
     "Validation uses Field `validate` for product copy instead of the browser's generic required message. A rejected sign-in comes back through Form `errors` on the password field; the submit Button shows `loading` while the request is in flight.",
     "The brand panel artwork is a mesh of the theme's decorative tones over `--primary`, so it re-paints for every theme and mode. The relative-colour `oklch(from var(--tone-*) \u2026)` lift needs an `inline-color` disable with a reason.",
     "The panel is `hidden lg:flex`: on a phone the form is the whole screen, with no decorative scroll above it."
   ],
   a11y: [
-    'The route renders inside <main> with one h1; the brand panel is an <aside> labelled "Featured release".',
+    'The route renders inside <main> with one h1; the brand panel is an <aside> labelled "Customer story".',
     "Field auto-wires labels, describedby, and invalid state onto the inputs; on submit, the first invalid field is focused.",
     "Autocomplete attributes (`email webauthn`, `current-password`) keep password managers and passkey autofill working.",
     "The Forgot password and Create one links use `hit-target` to meet the 44px touch floor without changing layout.",

package/dist/patterns/brand-landing-page.js

@@ -29,7 +29,7 @@ var spaces = [
 ];
 var routes = [
   { label: "Intake", state: "Open", tone: "info" },
-  { label: "Review", state: "Live", tone: "edition" },
+  { label: "Review", state: "Live", tone: "1" },
   { label: "Archive", state: "Safe", tone: "success" }
 ];
 var bars = [
@@ -164,7 +164,7 @@ function BrandLandingPage() {
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
             /* @__PURE__ */ jsxs(Row, { gap: 1, children: [
               /* @__PURE__ */ jsx(StatusDot, { tone: "warning" }),
-              /* @__PURE__ */ jsx(StatusDot, { tone: "edition" }),
+              /* @__PURE__ */ jsx(StatusDot, { tone: "1" }),
               /* @__PURE__ */ jsx(StatusDot, { tone: "success" })
             ] }),
             /* @__PURE__ */ jsx("span", { className: "text-label-sm text-muted-foreground", children: "Live workspace" })

package/dist/patterns/chat-panel.js

@@ -60,7 +60,7 @@ function ChatPanel() {
       render: /* @__PURE__ */ jsx("section", { "aria-labelledby": "chat-title" }),
       className: "flex h-[calc(100dvh_-_--spacing(12))] flex-col overflow-hidden",
       children: [
-        /* @__PURE__ */ jsxs(CardHeader, { className: "border-b border-border pb-(--card-p)", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "pb-(--card-p) shadow-[inset_0_-1px_0_var(--border)]", children: [
           /* @__PURE__ */ jsx(CardTitle, { children: /* @__PURE__ */ jsx("h1", { id: "chat-title", children: "Scroll behaviour" }) }),
           /* @__PURE__ */ jsx(CardDescription, { children: "Assistant \xB7 answers from your team's docs" }),
           /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
@@ -136,7 +136,7 @@ function ChatPanel() {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(CardFooter, { className: "border-t border-border pt-(--card-p)", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(CardFooter, { className: "pt-(--card-p) shadow-[inset_0_1px_0_var(--border)]", children: /* @__PURE__ */ jsx(
           ChatComposer,
           {
             className: "flex-1",

package/dist/patterns/dashboard-page.js

@@ -34,8 +34,8 @@ import {
 } from "../components/sidebar/index.js";
 import { Grid, Page, Row, Stack } from "../layout/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var STATUS_TONE = { live: "success", scheduled: "info", "sold-out": "edition", closed: "neutral" };
-var STATUS_LABEL = { live: "Live", scheduled: "Scheduled", "sold-out": "Sold out", closed: "Closed" };
+var STATUS_TONE = { active: "success", onboarding: "info", full: "1", cancelled: "neutral" };
+var STATUS_LABEL = { active: "Active", onboarding: "Onboarding", full: "Seats full", cancelled: "Cancelled" };
 var MIN = 60 * 1e3;
 var HOUR = 60 * MIN;
 var DAY = 24 * HOUR;
@@ -44,49 +44,49 @@ var usdCents = new Intl.NumberFormat("en-US", { style: "currency", currency: "US
 var shortDate = (offset) => new Date(Date.now() + offset).toLocaleDateString("en-US", { month: "short", day: "numeric" });
 var stats = [
   { label: "Revenue", value: "$18,240", delta: "+8.2%", up: true, note: "vs. $16,857" },
-  { label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 first-time" },
-  { label: "Collectors", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
-  { label: "Sell-through", value: "64%", delta: "\u22121.8%", up: false, note: "6 open editions" }
+  { label: "Active seats", value: "1,284", delta: "+3.1%", up: true, note: "182 added" },
+  { label: "Accounts", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
+  { label: "Seat usage", value: "64%", delta: "\u22121.8%", up: false, note: "6 near their limit" }
 ];
-var editions = [
-  { id: "ed_01", title: "Gold Rush", status: "live", sold: 184, supply: 250, price: 48, released: -6 * DAY },
-  { id: "ed_02", title: "Quiet Harbor", status: "sold-out", sold: 100, supply: 100, price: 120, released: -19 * DAY },
-  { id: "ed_03", title: "Dusk, no. 4", status: "live", sold: 61, supply: 150, price: 64, released: -2 * DAY },
-  { id: "ed_04", title: "Tidewater", status: "live", sold: 212, supply: 300, price: 36, released: -27 * DAY },
-  { id: "ed_05", title: "Salt Study", status: "closed", sold: 38, supply: 75, price: 90, released: -44 * DAY },
-  { id: "ed_06", title: "Paper Moon", status: "sold-out", sold: 50, supply: 50, price: 220, released: -58 * DAY },
-  { id: "ed_07", title: "Night Signal", status: "scheduled", sold: 0, supply: 200, price: 56, released: 3 * DAY },
-  { id: "ed_08", title: "Low Tide, Blue", status: "closed", sold: 72, supply: 120, price: 42, released: -71 * DAY },
-  { id: "ed_09", title: "Ember Field", status: "sold-out", sold: 80, supply: 80, price: 140, released: -86 * DAY }
+var accounts = [
+  { id: "ac_01", title: "Northwind", status: "active", used: 184, seats: 250, price: 16, started: -6 * DAY },
+  { id: "ac_02", title: "Harbor Labs", status: "full", used: 100, seats: 100, price: 20, started: -19 * DAY },
+  { id: "ac_03", title: "Brightline", status: "active", used: 61, seats: 150, price: 16, started: -2 * DAY },
+  { id: "ac_04", title: "Tidewater Co.", status: "active", used: 212, seats: 300, price: 12, started: -27 * DAY },
+  { id: "ac_05", title: "Saltworks", status: "cancelled", used: 38, seats: 75, price: 20, started: -44 * DAY },
+  { id: "ac_06", title: "Paper Moon", status: "full", used: 50, seats: 50, price: 24, started: -58 * DAY },
+  { id: "ac_07", title: "Signal Studio", status: "onboarding", used: 0, seats: 200, price: 16, started: 3 * DAY },
+  { id: "ac_08", title: "Bluewater", status: "cancelled", used: 72, seats: 120, price: 12, started: -71 * DAY },
+  { id: "ac_09", title: "Ember & Field", status: "full", used: 80, seats: 80, price: 20, started: -86 * DAY }
 ];
-var editionCount = 24;
+var accountCount = 312;
 var payout = {
-  amount: 8214.6,
+  amount: 8862.64,
   date: 5 * DAY,
   lines: [
-    { label: "Sales", value: 9127.33 },
-    { label: "Platform fee (10%)", value: -912.73 },
+    { label: "Subscriptions", value: 9127.33 },
+    { label: "Processing (2.9%)", value: -264.69 },
     { label: "Deposits to", value: "Checking \u2022\u20224821" }
   ]
 };
-var collectors = [
-  { id: "co_01", name: "Nina Simone", handle: "@nina", initials: "NS", pieces: 14, spent: 1460 },
-  { id: "co_02", name: "Grace Hopper", handle: "@grace", initials: "GH", pieces: 11, spent: 1128 },
-  { id: "co_03", name: "Frida Kahlo", handle: "@frida", initials: "FK", pieces: 9, spent: 942 },
-  { id: "co_04", name: "Mary Shelley", handle: "@mary", initials: "MS", pieces: 6, spent: 588 }
+var customers = [
+  { id: "cu_01", name: "Northwind", handle: "northwind.io", initials: "NW", seats: 184, spent: 2944 },
+  { id: "cu_02", name: "Tidewater Co.", handle: "tidewater.co", initials: "TC", seats: 212, spent: 2544 },
+  { id: "cu_03", name: "Harbor Labs", handle: "harborlabs.com", initials: "HL", seats: 100, spent: 2e3 },
+  { id: "cu_04", name: "Ember & Field", handle: "emberfield.com", initials: "EF", seats: 80, spent: 1600 }
 ];
 var upcoming = [
-  { id: "up_01", title: "Night Signal", detail: "Edition of 200 \xB7 $56", at: 3 * DAY },
-  { id: "up_02", title: "Tidewater, second printing", detail: "Edition of 100 \xB7 $40", at: 12 * DAY },
-  { id: "up_03", title: "Dusk, no. 5", detail: "Edition of 150 \xB7 $64", at: 26 * DAY },
-  { id: "up_04", title: "Quiet Harbor, artist proofs", detail: "Edition of 10 \xB7 $480", at: 34 * DAY }
+  { id: "up_01", title: "Version 2.4", detail: "Shared reports \xB7 All plans", at: 3 * DAY },
+  { id: "up_02", title: "Audit log export", detail: "Business plan \xB7 Beta", at: 12 * DAY },
+  { id: "up_03", title: "Version 2.5", detail: "Offline mode \xB7 All plans", at: 26 * DAY },
+  { id: "up_04", title: "Usage-based billing", detail: "Studio and Business \xB7 Beta", at: 34 * DAY }
 ];
 var activity = [
-  { id: "ac_01", who: "Nina Simone", initials: "NS", what: "collected Gold Rush \xB7 185 of 250", when: 2 * MIN },
-  { id: "ac_02", who: "Grace Hopper", initials: "GH", what: "collected Dusk, no. 4 \xB7 61 of 150", when: 26 * MIN },
-  { id: "ac_03", who: "Frida Kahlo", initials: "FK", what: "tipped $20 on Tidewater", when: 1 * HOUR },
-  { id: "ac_04", who: "Mary Shelley", initials: "MS", what: "started following you", when: 3 * HOUR },
-  { id: "ac_05", who: "Nina Simone", initials: "NS", what: "set a reminder for Night Signal", when: 6 * HOUR }
+  { id: "ev_01", who: "Nina Simone", initials: "NS", what: "added 12 seats to Northwind \xB7 184 of 250", when: 2 * MIN },
+  { id: "ev_02", who: "Grace Hopper", initials: "GH", what: "upgraded Brightline to Studio", when: 26 * MIN },
+  { id: "ev_03", who: "Frida Kahlo", initials: "FK", what: "paid invoice INV-0042 for Tidewater Co.", when: 1 * HOUR },
+  { id: "ev_04", who: "Mary Shelley", initials: "MS", what: "joined the Harbor Labs workspace", when: 3 * HOUR },
+  { id: "ev_05", who: "Nina Simone", initials: "NS", what: "booked onboarding for Signal Studio", when: 6 * HOUR }
 ];
 function DashboardPage() {
   return /* @__PURE__ */ jsx(
@@ -104,8 +104,8 @@ function DashboardPage() {
       ),
       bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
         /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "grid" }), label: "Overview", showLabel: true, active: 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: "folder" }), label: "Accounts", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/accounts" }) }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Customers", showLabel: true, render: /* @__PURE__ */ jsx("a", { href: "/customers" }) }),
         /* @__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, render: /* @__PURE__ */ jsx("a", { href: "/settings" }) })
       ] }),
@@ -113,8 +113,8 @@ function DashboardPage() {
         /* @__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", active: true, 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: "folder" }), label: "Accounts", render: /* @__PURE__ */ jsx("a", { href: "/accounts" }) }),
+          /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "user" }), label: "Customers", render: /* @__PURE__ */ jsx("a", { href: "/customers" }) }),
           /* @__PURE__ */ jsx(
             SidebarItem,
             {
@@ -147,7 +147,7 @@ function DashboardPage() {
           PageHeader,
           {
             title: "Overview",
-            description: "Sales and collector activity for the last 30 days.",
+            description: "Revenue and account activity for the last 30 days.",
             actions: /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
               /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
                 /* @__PURE__ */ jsx(Icon, { name: "download" }),
@@ -155,7 +155,7 @@ function DashboardPage() {
               ] }),
               /* @__PURE__ */ jsxs(Button, { children: [
                 /* @__PURE__ */ jsx(Icon, { name: "plus" }),
-                "New edition"
+                "New account"
               ] })
             ] })
           }
@@ -181,44 +181,44 @@ function DashboardPage() {
         /* @__PURE__ */ jsxs(Grid, { cols: { base: 1, xl: 3 }, gap: 3, children: [
           /* @__PURE__ */ jsxs(Card, { className: "flex flex-col xl:col-span-2", children: [
             /* @__PURE__ */ jsxs(CardHeader, { children: [
-              /* @__PURE__ */ jsx(CardTitle, { children: "Editions" }),
-              /* @__PURE__ */ jsx(CardDescription, { children: "Sales across your releases, newest first." })
+              /* @__PURE__ */ jsx(CardTitle, { children: "Accounts" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Seats across your customers, newest first." })
             ] }),
             /* @__PURE__ */ jsx(CardContent, { flush: true, className: "mt-4 flex-1", children: /* @__PURE__ */ jsx(
               DataTable,
               {
-                data: editions,
+                data: accounts,
                 rowKey: (row) => row.id,
-                defaultSort: { key: "released", direction: "desc" },
+                defaultSort: { key: "started", direction: "desc" },
                 columns: [
-                  { key: "title", header: "Edition", sortable: true, className: "text-label-md whitespace-nowrap" },
+                  { key: "title", header: "Account", sortable: true, className: "text-label-md whitespace-nowrap" },
                   {
                     key: "status",
                     header: "Status",
                     cell: (row) => /* @__PURE__ */ jsx(Badge, { appearance: "plain", tone: STATUS_TONE[row.status], dot: true, children: STATUS_LABEL[row.status] })
                   },
                   {
-                    key: "sold",
-                    header: "Sold",
+                    key: "used",
+                    header: "Seats",
                     sortable: true,
-                    sortValue: (row) => row.sold / row.supply,
+                    sortValue: (row) => row.used / row.seats,
                     cell: (row) => /* @__PURE__ */ jsxs(Row, { gap: 3, align: "center", className: "min-w-40", children: [
                       /* @__PURE__ */ jsx(
                         Meter,
                         {
-                          value: row.sold,
-                          max: row.supply,
+                          value: row.used,
+                          max: row.seats,
                           size: "sm",
-                          tone: row.sold === row.supply ? "success" : "primary",
-                          "aria-label": `${row.title} sold`,
-                          getAriaValueText: (_, v) => `${v} of ${row.supply} sold`,
+                          tone: row.used === row.seats ? "success" : "primary",
+                          "aria-label": `${row.title} seats used`,
+                          getAriaValueText: (_, v) => `${v} of ${row.seats} seats used`,
                           className: "flex-1"
                         }
                       ),
                       /* @__PURE__ */ jsxs("span", { className: "text-mono-caption whitespace-nowrap text-muted-foreground", children: [
-                        row.sold,
+                        row.used,
                         "/",
-                        row.supply
+                        row.seats
                       ] })
                     ] })
                   },
@@ -227,15 +227,15 @@ function DashboardPage() {
                     header: "Revenue",
                     align: "end",
                     sortable: true,
-                    sortValue: (row) => row.sold * row.price,
-                    cell: (row) => row.sold > 0 ? /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: usd.format(row.sold * row.price) }) : /* @__PURE__ */ jsx("span", { className: "text-mono-sm text-muted-foreground", children: "\u2014" })
+                    sortValue: (row) => row.used * row.price,
+                    cell: (row) => row.used > 0 ? /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: usd.format(row.used * row.price) }) : /* @__PURE__ */ jsx("span", { className: "text-mono-sm text-muted-foreground", children: "\u2014" })
                   },
                   {
-                    key: "released",
-                    header: "Release",
+                    key: "started",
+                    header: "Started",
                     align: "end",
                     sortable: true,
-                    cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-body-sm whitespace-nowrap text-muted-foreground", children: shortDate(row.released) })
+                    cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-body-sm whitespace-nowrap text-muted-foreground", children: shortDate(row.started) })
                   }
                 ]
               }
@@ -243,13 +243,13 @@ function DashboardPage() {
             /* @__PURE__ */ jsxs(CardFooter, { className: "justify-between", children: [
               /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted-foreground", children: [
                 "Showing ",
-                editions.length,
+                accounts.length,
                 " of ",
-                editionCount,
-                " editions"
+                accountCount,
+                " accounts"
               ] }),
-              /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", bleed: "end", render: /* @__PURE__ */ jsx("a", { href: "/editions" }), children: [
-                "View all editions",
+              /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", bleed: "end", render: /* @__PURE__ */ jsx("a", { href: "/accounts" }), children: [
+                "View all accounts",
                 /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
               ] })
             ] })
@@ -268,16 +268,16 @@ function DashboardPage() {
             ] }),
             /* @__PURE__ */ jsxs(Card, { children: [
               /* @__PURE__ */ jsxs(CardHeader, { children: [
-                /* @__PURE__ */ jsx(CardTitle, { children: "Top collectors" }),
+                /* @__PURE__ */ jsx(CardTitle, { children: "Top customers" }),
                 /* @__PURE__ */ jsx(CardDescription, { children: "By spend this month." }),
-                /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/collectors" }), children: "View all" }) })
+                /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/customers" }), children: "View all" }) })
               ] }),
-              /* @__PURE__ */ jsx(CardList, { children: collectors.map((person) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(CardList, { children: customers.map((person) => /* @__PURE__ */ jsx(
                 Entity,
                 {
                   leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", size: "sm", fallback: person.initials, alt: "" }),
                   title: person.name,
-                  subtitle: `${person.handle} \xB7 ${person.pieces} pieces`,
+                  subtitle: `${person.handle} \xB7 ${person.seats} seats`,
                   action: /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: usd.format(person.spent) })
                 },
                 person.id
@@ -289,7 +289,7 @@ function DashboardPage() {
           /* @__PURE__ */ jsxs(Card, { className: "flex flex-col", children: [
             /* @__PURE__ */ jsxs(CardHeader, { children: [
               /* @__PURE__ */ jsx(CardTitle, { children: "Upcoming releases" }),
-              /* @__PURE__ */ jsx(CardDescription, { children: "Scheduled to open to collectors." })
+              /* @__PURE__ */ jsx(CardDescription, { children: "Scheduled to ship to customers." })
             ] }),
             /* @__PURE__ */ jsx(CardList, { children: upcoming.map((release) => /* @__PURE__ */ jsx(
               Entity,
@@ -300,7 +300,7 @@ function DashboardPage() {
               },
               release.id
             )) }),
-            /* @__PURE__ */ jsx(CardFooter, { className: "mt-auto", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/editions/new" }), children: [
+            /* @__PURE__ */ jsx(CardFooter, { className: "mt-auto", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/releases/new" }), children: [
               /* @__PURE__ */ jsx(Icon, { name: "calendar" }),
               "Schedule a release"
             ] }) })
@@ -308,7 +308,7 @@ function DashboardPage() {
           /* @__PURE__ */ jsxs(Card, { className: "xl:col-span-2", children: [
             /* @__PURE__ */ jsxs(CardHeader, { children: [
               /* @__PURE__ */ jsx(CardTitle, { children: "Activity" }),
-              /* @__PURE__ */ jsx(CardDescription, { children: "Collects, tips, and follows." }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Seats, upgrades, and invoices." }),
               /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", render: /* @__PURE__ */ jsx("a", { href: "/activity" }), children: "View all" }) })
             ] }),
             /* @__PURE__ */ jsx(CardList, { children: activity.map((item) => /* @__PURE__ */ jsx(

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

@@ -1,15 +1,15 @@
 // src/patterns/dashboard-page.meta.ts
 var dashboardPageMeta = {
   name: "DashboardPage",
-  summary: "App-shell creator dashboard: a branded Sidebar with an account footer (AppHeader + BottomNav below lg), a KPI row, an edge-to-edge editions table with sell-through Meters, and supporting payout, collector, release and activity cards \u2014 the default shape for an operator or analytics home route.",
-  intent: "Reach for this when a route's job is monitoring or managing many records (sales, orders, editions, posts) with a few headline numbers. Not for reading-focused routes (use FeedPage) or single-record routes (use ListDetailPage's detail side).",
+  summary: "App-shell admin dashboard: a branded Sidebar with an account footer (AppHeader + BottomNav below lg), a KPI row, an edge-to-edge accounts table with seat-usage Meters, and supporting payout, top-customer, release and activity cards \u2014 the default shape for an operator or analytics home route.",
+  intent: "Reach for this when a route's job is monitoring or managing many records (sales, orders, accounts, posts) with a few headline numbers. Not for reading-focused routes (use FeedPage) or single-record routes (use ListDetailPage's detail side).",
   notes: [
     "Region cap is `wide` (1280px): dashboards hold tables and multi-column grids, never a reading column.",
-    "Hierarchy runs headline \u2192 records \u2192 context: KPI row, then the primary table beside its two closest companions (payout, top collectors), then the lower-priority lists (upcoming, activity). Every row of the grid is filled so the route ends on content, not empty canvas.",
+    "Hierarchy runs headline \u2192 records \u2192 context: KPI row, then the primary table beside its two closest companions (payout, top customers), then the lower-priority lists (upcoming, activity). Every row of the grid is filled so the route ends on content, not empty canvas.",
     "Stat cards: CardHeader carries the label (CardDescription) and the value; KPI values are `text-mono-xl` \u2014 the metric mono tier, tabular figures \u2014 never a heading tier. The trend Badge sits with its comparison note in CardContent, so the value keeps the full card width when the row folds to 2\xD72 on a phone.",
     "Stat cards use an explicit cols map (2 \u2192 4) \u2014 a 4-stat row must fold to 2\xD72, never strand an orphan the way auto-fit can.",
     "The table runs flush to the card edges with `<CardContent flush>`, which hands the card's padding to the table (`--table-edge-px`), so the first and last columns line up with the CardHeader at any card density \u2014 never hand-set pl-6/pr-6. Numeric columns align end in mono; Table scrolls horizontally inside the card on narrow screens.",
-    'Sold / supply is a `Meter` (how full a known range is), not `Progress` (task progress). Status is `Badge appearance="plain" dot`, with the app\'s own states mapped to tones once at the top of the file.',
+    'Seats used / seats is a `Meter` (how full a known range is), not `Progress` (task progress). Status is `Badge appearance="plain" dot`, with the app\'s own states mapped to tones once at the top of the file.',
     "Lists are Entity rows in CardList, inset to the card padding and divided by hairlines \u2014 never CardContent with hand-tuned px. A card that shares a grid row with a taller one becomes `flex flex-col` and pins its CardFooter with `mt-auto`.",
     "Brand and account live in the Sidebar: SidebarHeader holds the mark + wordmark, SidebarFooter holds the signed-in Entity with an OverflowMenu. Sidebar rebinds the page ink tokens to its own, so the Entity and OverflowMenu read correctly even when a theme paints the rail dark on a light page.",
     "The page has exactly one heading-1 (PageHeader); card titles are Title tier, not headings.",
@@ -20,7 +20,7 @@ var dashboardPageMeta = {
     'AppShell provides the skip link and <main id="main-content"> landmark.',
     "The active SidebarItem and BottomNavItem carry aria-current via `active`.",
     "DataTable headers are real <th>; sortable columns are announced.",
-    'Each sell-through Meter has an aria-label naming the edition and aria-valuetext reading "184 of 250 sold".',
+    'Each seat-usage Meter has an aria-label naming the account and aria-valuetext reading "184 of 250 seats used".',
     "Avatars beside a visible name use an empty alt so the name is not read twice."
   ]
 };

package/dist/patterns/feed-page.js

@@ -22,9 +22,9 @@ var posts = [
     initials: "AL",
     time: "2h",
     following: true,
-    body: "Gold Rush is live. 100 signed prints, each paired with the on-chain original. Thank you for waiting.",
-    media: { src: "/media/edition-cover.svg", alt: "Gold Rush, a gold-leaf study in overlapping arcs" },
-    drop: { title: "Gold Rush", price: "$120", collected: 62, supply: 100 },
+    body: "Registration for the spring workshop is open. Two days of plotter drawing in a small group. See you there.",
+    media: { src: "/media/edition-cover.svg", alt: "Workshop poster, a gold-leaf study in overlapping arcs" },
+    event: { title: "Spring plotter workshop", price: "$120", registered: 28, capacity: 40 },
     likes: 128,
     comments: 24
   },
@@ -47,7 +47,7 @@ var posts = [
     initials: "NS",
     time: "8h",
     following: false,
-    body: "Collectors of Dusk, no. 3 \u2014 your unlockable score is now in your library. Headphones on for this one.",
+    body: "Thanks to everyone at the Dusk listening session \u2014 the full recording is now in your library. Headphones on.",
     likes: 214,
     comments: 31
   }
@@ -57,8 +57,8 @@ var suggestions = [
   { id: "u_02", name: "Nina Simone", handle: "@nina", initials: "NS" }
 ];
 var upcoming = [
-  { id: "d_01", title: "Quiet Harbor", artist: "Mary Shelley", initials: "MS", date: "Sat, Oct 12" },
-  { id: "d_02", title: "Dusk, no. 4", artist: "Nina Simone", initials: "NS", date: "Tue, Oct 15" }
+  { id: "e_01", title: "Quiet Harbor talk", host: "Mary Shelley", initials: "MS", date: "Sat, Oct 12" },
+  { id: "e_02", title: "Dusk, live", host: "Nina Simone", initials: "NS", date: "Tue, Oct 15" }
 ];
 var renderPost = (post) => /* @__PURE__ */ jsx("article", { children: /* @__PURE__ */ jsxs(Card, { children: [
   /* @__PURE__ */ jsx(CardList, { children: /* @__PURE__ */ jsx(
@@ -82,27 +82,27 @@ var renderPost = (post) => /* @__PURE__ */ jsx("article", { children: /* @__PURE
     /* @__PURE__ */ jsx("p", { className: "text-body-md text-foreground", children: post.body }),
     post.media ? /* @__PURE__ */ jsxs(AspectBox, { ratio: 16 / 9, className: "overflow-hidden rounded-concentric-lg/6 bg-muted", children: [
       /* @__PURE__ */ jsx("img", { src: post.media.src, alt: post.media.alt, className: "size-full object-cover" }),
-      post.drop ? /* @__PURE__ */ jsx("div", { className: "absolute start-3 top-3", children: /* @__PURE__ */ jsx(Badge, { appearance: "overlay", size: "sm", dot: true, children: "Live drop" }) }) : null
+      post.event ? /* @__PURE__ */ jsx("div", { className: "absolute start-3 top-3", children: /* @__PURE__ */ jsx(Badge, { appearance: "overlay", size: "sm", dot: true, children: "Open now" }) }) : null
     ] }) : null,
-    post.drop ? /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+    post.event ? /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
       /* @__PURE__ */ jsxs(Row, { gap: 2, align: "center", justify: "between", children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-title-md text-foreground", children: post.drop.title }),
-          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: `${post.drop.price} \xB7 Edition of ${post.drop.supply}` })
+          /* @__PURE__ */ jsx("p", { className: "text-title-md text-foreground", children: post.event.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: `${post.event.price} \xB7 ${post.event.capacity} seats` })
         ] }),
-        /* @__PURE__ */ jsx(Button, { children: `Collect for ${post.drop.price}` })
+        /* @__PURE__ */ jsx(Button, { children: `Register for ${post.event.price}` })
       ] }),
       /* @__PURE__ */ jsxs(
         Meter,
         {
-          value: post.drop.collected,
-          max: post.drop.supply,
+          value: post.event.registered,
+          max: post.event.capacity,
           size: "sm",
-          getAriaValueText: (_, value) => `${value} of ${post.drop?.supply} collected`,
+          getAriaValueText: (_, value) => `${value} of ${post.event?.capacity} seats taken`,
           children: [
             /* @__PURE__ */ jsxs(Row, { gap: 2, align: "center", justify: "between", className: "mb-2", children: [
-              /* @__PURE__ */ jsx(MeterLabel, { children: `${post.drop.collected} collected` }),
-              /* @__PURE__ */ jsx(MeterValue, { children: (_, value) => `${(post.drop?.supply ?? 0) - value} left` })
+              /* @__PURE__ */ jsx(MeterLabel, { children: `${post.event.registered} registered` }),
+              /* @__PURE__ */ jsx(MeterValue, { children: (_, value) => `${(post.event?.capacity ?? 0) - value} left` })
             ] }),
             /* @__PURE__ */ jsx(MeterTrack, {})
           ]
@@ -135,13 +135,13 @@ function FeedPage() {
               autoResize: true,
               rows: 2,
               "aria-label": "New post",
-              placeholder: "Share a process shot or an upcoming drop"
+              placeholder: "Share a process shot or an upcoming event"
             }
           ),
           /* @__PURE__ */ jsxs(Row, { gap: 1, align: "center", justify: "between", children: [
             /* @__PURE__ */ jsxs(Row, { gap: 0.5, children: [
               /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Add images", children: /* @__PURE__ */ jsx(Icon, { name: "image-stack" }) }),
-              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Attach an edition", children: /* @__PURE__ */ jsx(Icon, { name: "gem" }) })
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Add an event", children: /* @__PURE__ */ jsx(Icon, { name: "calendar" }) })
             ] }),
             /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Post" })
           ] })
@@ -185,16 +185,16 @@ function FeedPage() {
         )) })
       ] }),
       /* @__PURE__ */ jsxs(Card, { children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Upcoming drops" }) }),
-        /* @__PURE__ */ jsx(CardList, { children: upcoming.map((drop) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Upcoming events" }) }),
+        /* @__PURE__ */ jsx(CardList, { children: upcoming.map((event) => /* @__PURE__ */ jsx(
           Entity,
           {
-            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" }) })
+            leading: /* @__PURE__ */ jsx(Avatar, { variant: "art", fallback: event.initials, alt: event.host }),
+            title: event.title,
+            subtitle: `${event.host} \xB7 ${event.date}`,
+            action: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": `Remind me about ${event.title}`, children: /* @__PURE__ */ jsx(Icon, { name: "bell" }) })
           },
-          drop.id
+          event.id
         )) })
       ] })
     ] }) })

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

@@ -1,14 +1,14 @@
 // src/patterns/feed-page.meta.ts
 var feedPageMeta = {
   name: "FeedPage",
-  summary: "Social reading feed with a side rail: a feed-width main column (composer, For you / Following Tabs, one Card per post, an edition drop with price, supply Meter and Collect, a Skeleton for the next page) beside a sticky rail of who-to-follow and upcoming drops that drops away below lg.",
+  summary: "Social reading feed with a side rail: a feed-width main column (composer, For you / Following Tabs, one Card per post, an event post with price, capacity Meter and Register, a Skeleton for the next page) beside a sticky rail of who-to-follow and upcoming events that drops away below lg.",
   intent: "Reach for this for timelines, activity streams, and any reverse-chronological reading surface where people also act on what they read. Not for record management (DashboardPage) or side-by-side browsing (ListDetailPage).",
   notes: [
     "The main column is capped at `--region-feed` (640px) inside a `wide` page, so posts keep a reading measure while the rail fills the desktop width. The rail is a fixed `w-80` aside, `sticky` at lg and `hidden` below it \u2014 its content is supplementary, so nothing is lost on mobile.",
     "Feed scope is `Tabs` (underline, stretched to the column with `flex`): peer views of the same feed. The composer sits above them because posting applies to both.",
     "The composer is a Card holding `Textarea autoResize` plus ghost icon Buttons and a secondary `Post` \u2014 not ChatComposer, which submits on Enter and is for conversations.",
     "Each post is a Card: an Entity byline in a CardList (with an OverflowMenu for post actions), body copy, then media in an AspectBox at the asset's own ratio, inset with `rounded-concentric-lg/6` so its corners follow the card's in every theme.",
-    'An edition drop adds a `Badge appearance="overlay"` on the artwork, title and price, the one primary Button on the page (`Collect`), and a `Meter` for supply \u2014 collected against a known maximum is a level, not task progress.',
+    'An event post adds a `Badge appearance="overlay"` on the image, title and price, the one primary Button on the page (`Register`), and a `Meter` for capacity \u2014 seats taken against a known maximum is a level, not task progress.',
     "Actions are ghost sm Buttons (icon + count) in a Row pulled out by the button's own padding (`-ms-3`) so the first icon sits on the text edge.",
     "Loading the next page shows a Skeleton post in the shape the post will land in, above the explicit load-more Button in its `loading` state \u2014 predictable for keyboard and AT users, unlike infinite scroll."
   ],
@@ -16,7 +16,7 @@ var feedPageMeta = {
     "Each post is an <article>, so AT users can jump between posts; the rail is a labelled <aside> landmark.",
     "Rail card titles render as h2 (CardTitle `render={<h2 />}`) under the page's one h1.",
     "Icon-only buttons and every Follow / Remind button carry aria-labels naming their target; counts stay in the accessible name.",
-    'The supply Meter is role=meter with a getAriaValueText reading ("62 of 100 collected").',
+    'The capacity Meter is role=meter with a getAriaValueText reading ("28 of 40 seats taken").',
     'The Skeleton card is aria-busy; the loading Button keeps its label ("Loading posts").'
   ]
 };

package/dist/patterns/landing-page.js

@@ -223,7 +223,7 @@ function LandingPage() {
                   /* @__PURE__ */ jsx(CardTitle, { children: "Build minutes" }),
                   /* @__PURE__ */ jsx(CardDescription, { children: "Team plan" })
                 ] }),
-                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Meter, { value: 64, tone: "standard", children: [
+                /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Meter, { value: 64, tone: "3", children: [
                   /* @__PURE__ */ jsxs(Row, { justify: "between", wrap: true, className: "mb-2", children: [
                     /* @__PURE__ */ jsx(MeterLabel, { children: "Used" }),
                     /* @__PURE__ */ jsx(MeterValue, { children: (_, value) => `${(value * 30).toLocaleString("en-US")} of 3,000` })