@sableui/react 0.6.2 → 0.7.1

package/dist/patterns/dashboard-page.js

@@ -0,0 +1,332 @@
+// src/patterns/dashboard-page.tsx
+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 { Badge } from "../components/badge/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 { DataTable } from "../components/data-table/index.js";
+import { OverflowMenu } from "../components/overflow-menu/index.js";
+import { Entity } from "../components/entity/index.js";
+import { MenuItem, MenuSeparator } from "../components/menu/index.js";
+import { Meter } from "../components/meter/index.js";
+import { NotificationBadge } from "../components/notification-badge/index.js";
+import { PageHeader } from "../components/page-header/index.js";
+import { RelativeTime } from "../components/relative-time/index.js";
+import {
+  Sidebar,
+  SidebarFooter,
+  SidebarBrand,
+  SidebarHeader,
+  SidebarItem,
+  SidebarNav
+} 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 MIN = 60 * 1e3;
+var HOUR = 60 * MIN;
+var DAY = 24 * HOUR;
+var usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+var usdCents = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+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" }
+];
+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 editionCount = 24;
+var payout = {
+  amount: 8214.6,
+  date: 5 * DAY,
+  lines: [
+    { label: "Sales", value: 9127.33 },
+    { label: "Platform fee (10%)", value: -912.73 },
+    { 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 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 }
+];
+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 }
+];
+function DashboardPage() {
+  return /* @__PURE__ */ jsx(
+    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, 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: "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" }) })
+      ] }),
+      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", 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: "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", 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: "Overview",
+            description: "Sales and collector activity for the last 30 days.",
+            actions: /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
+              /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+                /* @__PURE__ */ jsx(Icon, { name: "download" }),
+                "Export"
+              ] }),
+              /* @__PURE__ */ jsxs(Button, { children: [
+                /* @__PURE__ */ jsx(Icon, { name: "plus" }),
+                "New edition"
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Grid, { cols: { base: 2, xl: 4 }, gap: 3, children: stats.map((stat) => /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsx(CardDescription, { children: stat.label }),
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: stat.value })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Row, { gap: 1, wrap: true, children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                tone: stat.up ? "success" : "warning",
+                size: "sm",
+                icon: /* @__PURE__ */ jsx(Icon, { name: stat.up ? "arrow-up" : "arrow-down" }),
+                children: stat.delta
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: stat.note })
+          ] }) })
+        ] }, stat.label)) }),
+        /* @__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(CardContent, { flush: true, className: "mt-4 flex-1", children: /* @__PURE__ */ jsx(
+              DataTable,
+              {
+                data: editions,
+                rowKey: (row) => row.id,
+                defaultSort: { key: "released", direction: "desc" },
+                columns: [
+                  { key: "title", header: "Edition", 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",
+                    sortable: true,
+                    sortValue: (row) => row.sold / row.supply,
+                    cell: (row) => /* @__PURE__ */ jsxs(Row, { gap: 3, align: "center", className: "min-w-40", children: [
+                      /* @__PURE__ */ jsx(
+                        Meter,
+                        {
+                          value: row.sold,
+                          max: row.supply,
+                          size: "sm",
+                          tone: row.sold === row.supply ? "success" : "primary",
+                          "aria-label": `${row.title} sold`,
+                          getAriaValueText: (_, v) => `${v} of ${row.supply} sold`,
+                          className: "flex-1"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "text-mono-caption whitespace-nowrap text-muted-foreground", children: [
+                        row.sold,
+                        "/",
+                        row.supply
+                      ] })
+                    ] })
+                  },
+                  {
+                    key: "revenue",
+                    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" })
+                  },
+                  {
+                    key: "released",
+                    header: "Release",
+                    align: "end",
+                    sortable: true,
+                    cell: (row) => /* @__PURE__ */ jsx("span", { className: "text-body-sm whitespace-nowrap text-muted-foreground", children: shortDate(row.released) })
+                  }
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(CardFooter, { className: "justify-between", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted-foreground", children: [
+                "Showing ",
+                editions.length,
+                " of ",
+                editionCount,
+                " editions"
+              ] }),
+              /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", bleed: "end", render: /* @__PURE__ */ jsx("a", { href: "/editions" }), children: [
+                "View all editions",
+                /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+            /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardDescription, { children: "Next payout" }),
+                /* @__PURE__ */ jsx(CardTitle, { className: "text-mono-xl", children: usdCents.format(payout.amount) }),
+                /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "info", size: "sm", icon: /* @__PURE__ */ jsx(Icon, { name: "calendar" }), children: shortDate(payout.date) }) })
+              ] }),
+              /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("dl", { className: "sable-list-dl text-body-sm", children: payout.lines.map((line) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+                /* @__PURE__ */ jsx("dt", { children: line.label }),
+                /* @__PURE__ */ jsx("dd", { className: typeof line.value === "number" ? "text-end text-mono-sm" : "text-end", children: typeof line.value === "number" ? usdCents.format(line.value) : line.value })
+              ] }, line.label)) }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Card, { children: [
+              /* @__PURE__ */ jsxs(CardHeader, { children: [
+                /* @__PURE__ */ jsx(CardTitle, { children: "Top collectors" }),
+                /* @__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(CardList, { children: collectors.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`,
+                  action: /* @__PURE__ */ jsx("span", { className: "text-mono-sm", children: usd.format(person.spent) })
+                },
+                person.id
+              )) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Grid, { cols: { base: 1, xl: 3 }, gap: 3, children: [
+          /* @__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(CardList, { children: upcoming.map((release) => /* @__PURE__ */ jsx(
+              Entity,
+              {
+                title: release.title,
+                subtitle: release.detail,
+                action: /* @__PURE__ */ jsx(RelativeTime, { date: Date.now() + release.at, className: "text-caption text-muted-foreground" })
+              },
+              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(Icon, { name: "calendar" }),
+              "Schedule a release"
+            ] }) })
+          ] }),
+          /* @__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(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(
+              Entity,
+              {
+                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" })
+              },
+              item.id
+            )) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  DashboardPage
+};

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

@@ -0,0 +1,29 @@
+// 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).",
+  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.",
+    "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.',
+    "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.",
+    "Chrome (Sidebar) is outside the content grid; the Page region caps only content.",
+    "Sidebar hides below lg, so the shell's header carries an AppHeader (brand + account) and its footer a BottomNav with the same destinations \u2014 never strand mobile users without navigation."
+  ],
+  a11y: [
+    '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".',
+    "Avatars beside a visible name use an empty alt so the name is not read twice."
+  ]
+};
+export {
+  dashboardPageMeta
+};

package/dist/patterns/feed-page.js

@@ -0,0 +1,205 @@
+// src/patterns/feed-page.tsx
+import { Icon } from "../icon/index.js";
+import { Avatar } from "../components/avatar/index.js";
+import { Badge } from "../components/badge/index.js";
+import { Button } from "../components/button/index.js";
+import { Card, CardContent, CardHeader, CardList, CardTitle } from "../components/card/index.js";
+import { OverflowMenu } from "../components/overflow-menu/index.js";
+import { Entity } from "../components/entity/index.js";
+import { MenuItem, MenuSeparator } from "../components/menu/index.js";
+import { Meter, MeterLabel, MeterTrack, MeterValue } from "../components/meter/index.js";
+import { PageHeader } from "../components/page-header/index.js";
+import { Skeleton } from "../components/skeleton/index.js";
+import { Tabs, TabsList, TabsPanel, TabsTrigger } from "../components/tabs/index.js";
+import { Textarea } from "../components/textarea/index.js";
+import { AspectBox, Page, Row, Stack } from "../layout/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var posts = [
+  {
+    id: "p_01",
+    author: "Ada Lovelace",
+    handle: "@ada",
+    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 },
+    likes: 128,
+    comments: 24
+  },
+  {
+    id: "p_02",
+    author: "Grace Hopper",
+    handle: "@grace",
+    initials: "GH",
+    time: "5h",
+    following: true,
+    body: "Process shot from this week. Compilers and copper ink \u2014 the plotter ran for eleven hours on this one.",
+    media: { src: "/media/process-shot.svg", alt: "Work-in-progress plotter drawing in copper ink" },
+    likes: 86,
+    comments: 9
+  },
+  {
+    id: "p_03",
+    author: "Nina Simone",
+    handle: "@nina",
+    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.",
+    likes: 214,
+    comments: 31
+  }
+];
+var suggestions = [
+  { id: "u_01", name: "Mary Shelley", handle: "@mary", initials: "MS" },
+  { 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" }
+];
+var renderPost = (post) => /* @__PURE__ */ jsx("article", { children: /* @__PURE__ */ jsxs(Card, { children: [
+  /* @__PURE__ */ jsx(CardList, { children: /* @__PURE__ */ jsx(
+    Entity,
+    {
+      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: [
+        /* @__PURE__ */ jsx(MenuItem, { children: "Copy link" }),
+        /* @__PURE__ */ jsxs(MenuItem, { children: [
+          "Mute ",
+          post.handle
+        ] }),
+        /* @__PURE__ */ jsx(MenuSeparator, {}),
+        /* @__PURE__ */ jsx(MenuItem, { variant: "destructive", children: "Report post" })
+      ] })
+    }
+  ) }),
+  /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4 pt-0", children: [
+    /* @__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
+    ] }) : null,
+    post.drop ? /* @__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(Button, { children: `Collect for ${post.drop.price}` })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Meter,
+        {
+          value: post.drop.collected,
+          max: post.drop.supply,
+          size: "sm",
+          getAriaValueText: (_, value) => `${value} of ${post.drop?.supply} collected`,
+          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(MeterTrack, {})
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs(Row, { gap: 0.5, children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", bleed: "start", "aria-label": `Like, ${post.likes} likes`, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "heart" }),
+        post.likes
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", "aria-label": `Comment, ${post.comments} comments`, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "comment" }),
+        post.comments
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Share", children: /* @__PURE__ */ jsx(Icon, { name: "share" }) })
+    ] })
+  ] })
+] }) }, post.id);
+function FeedPage() {
+  return /* @__PURE__ */ jsx(Page, { as: "main", max: "wide", gap: 4, className: "py-6", children: /* @__PURE__ */ jsxs(Row, { gap: 4, align: "start", justify: "center", children: [
+    /* @__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, { variant: "art", fallback: "AL", alt: "Ada Lovelace" }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 1.5, className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              autoResize: true,
+              rows: 2,
+              "aria-label": "New post",
+              placeholder: "Share a process shot or an upcoming drop"
+            }
+          ),
+          /* @__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: "secondary", size: "sm", children: "Post" })
+          ] })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs(Tabs, { defaultValue: "for-you", children: [
+        /* @__PURE__ */ jsxs(TabsList, { className: "flex", children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "for-you", children: "For you" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "following", children: "Following" })
+        ] }),
+        /* @__PURE__ */ jsx(TabsPanel, { value: "for-you", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+          posts.map(renderPost),
+          /* @__PURE__ */ jsx(Card, { "aria-busy": "true", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxs(Row, { gap: 1.5, align: "center", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "size-10 rounded-full" }),
+              /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" }),
+                /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-2/3" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", loading: true, loadingLabel: "Loading posts", children: "Load more posts" })
+        ] }) }),
+        /* @__PURE__ */ jsx(TabsPanel, { value: "following", children: /* @__PURE__ */ jsx(Stack, { gap: 3, children: posts.filter((post) => post.following).map(renderPost) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("aside", { "aria-label": "Suggestions", className: "sticky top-6 hidden w-80 shrink-0 lg:block", children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), children: "Who to follow" }) }),
+        /* @__PURE__ */ jsx(CardList, { children: suggestions.map((person) => /* @__PURE__ */ jsx(
+          Entity,
+          {
+            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" })
+          },
+          person.id
+        )) })
+      ] }),
+      /* @__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(
+          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" }) })
+          },
+          drop.id
+        )) })
+      ] })
+    ] }) })
+  ] }) });
+}
+export {
+  FeedPage
+};

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

@@ -0,0 +1,25 @@
+// 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.",
+  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.',
+    "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."
+  ],
+  a11y: [
+    "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 Skeleton card is aria-busy; the loading Button keeps its label ("Loading posts").'
+  ]
+};
+export {
+  feedPageMeta
+};