@sableui/react 0.6.2 → 0.7.1

package/dist/patterns/list-detail-page.js

@@ -0,0 +1,373 @@
+// src/patterns/list-detail-page.tsx
+import { useEffect, useRef, useState } from "react";
+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,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardList,
+  CardTitle
+} from "../components/card/index.js";
+import { DestructiveActionModal } from "../components/destructive-action-modal/index.js";
+import { EmptyState } from "../components/empty-state/index.js";
+import { Entity } from "../components/entity/index.js";
+import { Field } from "../components/form/index.js";
+import { PageHeader } from "../components/page-header/index.js";
+import { SearchInput } from "../components/search-input/index.js";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../components/select/index.js";
+import { StatusDot } from "../components/status-dot/index.js";
+import { Col, Columns, Page, Row, Stack } from "../layout/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var roles = [
+  { value: "owner", label: "Owner" },
+  { value: "admin", label: "Admin" },
+  { value: "editor", label: "Editor" },
+  { value: "viewer", label: "Viewer" }
+];
+var roleLabel = {
+  owner: "Owner",
+  admin: "Admin",
+  editor: "Editor",
+  viewer: "Viewer"
+};
+var roleSummary = {
+  owner: "Full access, including payouts and billing. Transfer ownership in studio settings.",
+  admin: "Manages members, editions and payouts.",
+  editor: "Drafts, prices and releases editions.",
+  viewer: "Sees editions and sales, but can't change them."
+};
+var seats = 10;
+var initialMembers = [
+  {
+    id: "u_01",
+    name: "Ada Lovelace",
+    handle: "@ada",
+    email: "ada@atelier.art",
+    initials: "AL",
+    role: "owner",
+    pending: false,
+    joined: "Mar 4, 2024",
+    lastActive: "Online now",
+    editions: 12,
+    activity: [
+      { id: "a1", icon: "gem", text: "Released Analytical Engine No. 3 \u2014 edition of 50", when: "2 hours ago" },
+      { id: "a2", icon: "mail", text: "Invited louise@bourgeois.studio as Editor", when: "2 days ago" }
+    ]
+  },
+  {
+    id: "u_02",
+    name: "Grace Hopper",
+    handle: "@grace",
+    email: "grace@atelier.art",
+    initials: "GH",
+    role: "admin",
+    pending: false,
+    joined: "Mar 9, 2024",
+    lastActive: "20 minutes ago",
+    editions: 4,
+    activity: [
+      { id: "a1", icon: "user", text: "Changed Frida Kahlo's role to Viewer", when: "Yesterday" },
+      { id: "a2", icon: "edit", text: "Updated pricing on First Compiler \u2014 edition of 10", when: "3 days ago" },
+      { id: "a3", icon: "gem", text: "Released First Compiler \u2014 edition of 10", when: "Sep 28" }
+    ]
+  },
+  {
+    id: "u_03",
+    name: "Mary Shelley",
+    handle: "@mary",
+    email: "mary@atelier.art",
+    initials: "MS",
+    role: "editor",
+    pending: false,
+    joined: "Jun 18, 2024",
+    lastActive: "3 hours ago",
+    editions: 7,
+    activity: [
+      { id: "a1", icon: "calendar", text: "Scheduled Frankenstein Studies for Oct 14", when: "3 hours ago" },
+      { id: "a2", icon: "gem", text: "Released The Last Man \u2014 edition of 25", when: "Sep 21" }
+    ]
+  },
+  {
+    id: "u_04",
+    name: "Nina Simone",
+    handle: "@nina",
+    email: "nina@atelier.art",
+    initials: "NS",
+    role: "editor",
+    pending: false,
+    joined: "Jan 12, 2025",
+    lastActive: "Yesterday",
+    editions: 3,
+    activity: [
+      { id: "a1", icon: "upload", text: "Uploaded artwork for Little Girl Blue", when: "Yesterday" },
+      { id: "a2", icon: "gem", text: "Released Feeling Good \u2014 edition of 100", when: "Aug 30" }
+    ]
+  },
+  {
+    id: "u_05",
+    name: "Frida Kahlo",
+    handle: "@frida",
+    email: "frida@atelier.art",
+    initials: "FK",
+    role: "viewer",
+    pending: false,
+    joined: "Jul 2, 2025",
+    lastActive: "4 days ago",
+    editions: 0,
+    activity: [{ id: "a1", icon: "comment", text: "Commented on the Las Dos Fridas draft", when: "4 days ago" }]
+  },
+  {
+    id: "i_01",
+    name: "louise@bourgeois.studio",
+    email: "louise@bourgeois.studio",
+    initials: "",
+    role: "editor",
+    pending: true,
+    invitedBy: "Ada Lovelace",
+    sent: "2 days ago",
+    expires: "In 5 days",
+    activity: []
+  }
+];
+function ListDetailPage() {
+  const [members, setMembers] = useState(initialMembers);
+  const [selectedId, setSelectedId] = useState("u_02");
+  const [query, setQuery] = useState("");
+  const [showDetail, setShowDetail] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const listRef = useRef(null);
+  const backRef = useRef(null);
+  const searchRef = useRef(null);
+  const needle = query.trim().toLowerCase();
+  const visible = members.filter(
+    (m) => [m.name, m.email, m.handle ?? "", roleLabel[m.role]].some((v) => v.toLowerCase().includes(needle))
+  );
+  const selected = members.find((m) => m.id === selectedId) ?? null;
+  const active = members.filter((m) => !m.pending).length;
+  const pending = members.length - active;
+  useEffect(() => {
+    if (showDetail && backRef.current?.offsetParent) backRef.current.focus();
+  }, [showDetail, selectedId]);
+  function select(id) {
+    setSelectedId(id);
+    setShowDetail(true);
+  }
+  function focusRow(id) {
+    requestAnimationFrame(() => {
+      listRef.current?.querySelector(`[data-member-id="${id}"] button`)?.focus();
+    });
+  }
+  function backToList() {
+    setShowDetail(false);
+    focusRow(selectedId ?? void 0);
+  }
+  function setRole(id, role) {
+    setMembers((list) => list.map((m) => m.id === id ? { ...m, role } : m));
+  }
+  function resend(id) {
+    setMembers(
+      (list) => list.map((m) => m.id === id ? { ...m, sent: "Just now", expires: "In 7 days", resent: true } : m)
+    );
+  }
+  function remove(id) {
+    const index = members.findIndex((m) => m.id === id);
+    const rest = members.filter((m) => m.id !== id);
+    setMembers(rest);
+    const next = rest[Math.min(index, rest.length - 1)]?.id;
+    setSelectedId(next ?? null);
+    setShowDetail(false);
+    focusRow(next);
+  }
+  return /* @__PURE__ */ jsxs(Page, { as: "main", max: "wide", gap: 4, className: "py-6", children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: "Members",
+        description: `${active} members \xB7 ${pending} pending ${pending === 1 ? "invite" : "invites"} \xB7 ${members.length} of ${seats} seats used`,
+        actions: /* @__PURE__ */ jsx(Button, { iconStart: /* @__PURE__ */ jsx(Icon, { name: "plus" }), children: "Invite member" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Columns, { count: { base: 1, lg: 12 }, children: [
+      /* @__PURE__ */ jsx(Col, { span: { base: 1, lg: 5 }, className: showDetail ? "max-lg:hidden" : void 0, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+        /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            ref: searchRef,
+            value: query,
+            onValueChange: setQuery,
+            placeholder: "Search name, email or role",
+            "aria-label": "Search members"
+          }
+        ),
+        /* @__PURE__ */ jsx(Card, { ref: listRef, className: "sable-surface", children: visible.length > 0 ? /* @__PURE__ */ jsx(CardList, { "aria-label": "Members", children: visible.map((m) => {
+          const isSelected = m.id === selectedId;
+          return /* @__PURE__ */ jsx(
+            Entity,
+            {
+              "data-member-id": m.id,
+              interactive: true,
+              selected: isSelected,
+              onSelect: () => select(m.id),
+              leading: /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  variant: "art",
+                  seed: m.name,
+                  fallback: m.pending ? /* @__PURE__ */ jsx(Icon, { name: "mail", className: "size-5" }) : m.initials,
+                  status: m.lastActive === "Online now" ? /* @__PURE__ */ jsx(StatusDot, { tone: "success" }) : void 0,
+                  "aria-hidden": true
+                }
+              ),
+              title: m.name,
+              subtitle: m.pending ? `${roleLabel[m.role]} \xB7 invite sent ${m.sent?.toLowerCase()}` : `${roleLabel[m.role]} \xB7 ${m.handle}`,
+              action: m.pending ? /* @__PURE__ */ jsx(Badge, { tone: "info", children: "Invited" }) : void 0
+            },
+            m.id
+          );
+        }) }) : /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: /* @__PURE__ */ jsx(Icon, { name: "search" }),
+            title: "No members found",
+            description: `Nobody matches \u201C${query.trim()}\u201D. Try a name, email or role.`,
+            action: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
+              setQuery("");
+              searchRef.current?.focus();
+            }, children: "Clear search" })
+          }
+        ) }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Col, { span: { base: 1, lg: 7 }, className: showDetail ? void 0 : "max-lg:hidden", children: /* @__PURE__ */ jsxs(Stack, { role: "region", "aria-label": "Member details", gap: 3, className: "lg:sticky lg:top-6", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref: backRef,
+            variant: "ghost",
+            size: "sm",
+            bleed: "start",
+            iconStart: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" }),
+            onClick: backToList,
+            className: "self-start lg:hidden",
+            children: "All members"
+          }
+        ),
+        selected === null ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            surface: "card",
+            icon: /* @__PURE__ */ jsx(Icon, { name: "user" }),
+            title: "No member selected",
+            description: "Choose someone from the list to see their role and activity."
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Card, { children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsxs(Row, { gap: 2, children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    variant: "art",
+                    size: "lg",
+                    fallback: selected.pending ? /* @__PURE__ */ jsx(Icon, { name: "mail", className: "size-6" }) : selected.initials,
+                    status: selected.lastActive === "Online now" ? /* @__PURE__ */ jsx(StatusDot, { tone: "success" }) : void 0,
+                    alt: selected.pending ? "Pending invite" : selected.name
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Stack, { gap: 0, className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h2", {}), className: "truncate", children: selected.name }),
+                  /* @__PURE__ */ jsx(CardDescription, { className: "truncate", children: selected.pending ? "Hasn't joined yet" : `${selected.handle} \xB7 ${selected.email}` })
+                ] })
+              ] }),
+              selected.pending ? /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, { tone: "info", children: "Invited" }) }) : null
+            ] }),
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: 5, children: [
+              /* @__PURE__ */ jsx(
+                Field,
+                {
+                  label: selected.pending ? "Role on joining" : "Role",
+                  description: roleSummary[selected.role],
+                  children: /* @__PURE__ */ jsxs(
+                    Select,
+                    {
+                      items: roles,
+                      value: selected.role,
+                      onValueChange: (value) => setRole(selected.id, value),
+                      disabled: selected.role === "owner",
+                      children: [
+                        /* @__PURE__ */ jsx(SelectTrigger, { className: "max-w-72" }),
+                        /* @__PURE__ */ jsx(SelectContent, { children: roles.filter((r) => r.value !== "owner" || selected.role === "owner").map((r) => /* @__PURE__ */ jsx(SelectItem, { value: r.value, children: r.label }, r.value)) })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "@container", children: selected.pending ? /* @__PURE__ */ jsxs("dl", { className: "sable-list-dl sable-list-dl-2", children: [
+                /* @__PURE__ */ jsx("dt", { children: "Sent" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.sent }),
+                /* @__PURE__ */ jsx("dt", { children: "Expires" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.expires }),
+                /* @__PURE__ */ jsx("dt", { children: "Invited by" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.invitedBy })
+              ] }) : /* @__PURE__ */ jsxs("dl", { className: "sable-list-dl sable-list-dl-2", children: [
+                /* @__PURE__ */ jsx("dt", { children: "Email" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.email }),
+                /* @__PURE__ */ jsx("dt", { children: "Joined" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.joined }),
+                /* @__PURE__ */ jsx("dt", { children: "Last active" }),
+                /* @__PURE__ */ jsx("dd", { className: selected.lastActive === "Online now" ? "text-success" : void 0, children: selected.lastActive }),
+                /* @__PURE__ */ jsx("dt", { children: "Editions released" }),
+                /* @__PURE__ */ jsx("dd", { children: selected.editions })
+              ] }) })
+            ] }) }),
+            selected.role !== "owner" ? /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsxs(Row, { gap: 2, wrap: true, children: [
+              selected.pending ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  iconStart: /* @__PURE__ */ jsx(Icon, { name: selected.resent ? "check" : "send" }),
+                  disabled: selected.resent,
+                  onClick: () => resend(selected.id),
+                  children: selected.resent ? "Invite resent" : "Resend invite"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setConfirming(true), children: selected.pending ? "Revoke invite" : "Remove from studio" })
+            ] }) }) : null
+          ] }),
+          selected.activity.length > 0 ? /* @__PURE__ */ jsxs(Card, { children: [
+            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { render: /* @__PURE__ */ jsx("h3", {}), children: "Recent activity" }) }),
+            /* @__PURE__ */ jsx(CardList, { children: selected.activity.map((a) => /* @__PURE__ */ jsx(
+              Entity,
+              {
+                leading: /* @__PURE__ */ jsx(Icon, { name: a.icon, className: "text-muted-foreground" }),
+                title: a.text,
+                subtitle: a.when
+              },
+              a.id
+            )) })
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            DestructiveActionModal,
+            {
+              open: confirming,
+              onOpenChange: setConfirming,
+              title: selected.pending ? "Revoke this invite?" : `Remove ${selected.name}?`,
+              description: selected.pending ? `${selected.email} won't be able to join with the link they were sent.` : "They lose access to the studio right away. Editions they released stay on sale.",
+              confirmLabel: selected.pending ? "Revoke invite" : "Remove member",
+              onConfirm: () => remove(selected.id)
+            }
+          )
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  ListDetailPage
+};

package/dist/patterns/list-detail-page.meta.js

@@ -0,0 +1,24 @@
+// src/patterns/list-detail-page.meta.ts
+var listDetailPageMeta = {
+  name: "ListDetailPage",
+  summary: "Searchable list beside the selected record's detail: interactive Entity rows in a CardList (5 of 12 columns) and a sticky detail pane (7) with an editable field, a label/value list, record actions with a destructive confirmation, and recent activity. Below lg it becomes a drill-in.",
+  intent: "Reach for this when a route lists records AND works on one at a time (members + member, inbox + message, orders + order). For pure browsing with no selection, a single-column FeedPage or a DashboardPage table is simpler.",
+  notes: [
+    "Region cap is `wide`; Columns 12 \u2192 Col 5 (list) + Col 7 (detail). Below lg the list and detail share one column as a drill-in: selecting a row shows the detail with an `All members` back button (lg:hidden), and the back button returns to the list. The panes swap with `max-lg:hidden`, so desktop always shows both.",
+    "Rows are interactive Entity inside one Card + CardList. Selection is Entity `selected`; `sable-surface` on the list card makes its selected step 12% ink off the card, so a selected row stays distinct from its muted avatar.",
+    "Search filters the list in place (name, email, role). No matches swap the CardList for an EmptyState with a Clear search action; the selected detail stays open.",
+    "A pending invite lives in the same list: a mail glyph in the Avatar, an `Invited` Badge, and an invite-specific detail (role on joining, sent, expires, invited by; Resend and Revoke actions).",
+    "The role Select edits the record in place; its Field description states what the role can do. The owner's role is read-only and the owner has no remove action.",
+    'Read-only facts are a native `<dl className="sable-list-dl sable-list-dl-2">` inside an `@container`, so pairs go two-up only when the pane is wide enough.',
+    "Remove / revoke run through DestructiveActionModal; on confirm the next row is selected. Page-level counts (members, pending, seats) live in the PageHeader description and update with the list.",
+    "The detail pane is sticky (lg:top-6) so it stays in view while a long list scrolls."
+  ],
+  a11y: [
+    "Each row is a real button (Entity `interactive` + `onSelect`): Tab moves through rows, Enter/Space selects. The selected row is Entity `selected`, which paints the selected fill and sets aria-current; list avatars are aria-hidden so initials are not read before the name.",
+    "The detail pane is a labelled region (`Member details`) whose title is a level-2 heading.",
+    "On a phone, drilling in moves focus to the back button; going back returns focus to the row that was open. After a remove, focus lands on the newly selected row; after Clear search, on the search field."
+  ]
+};
+export {
+  listDetailPageMeta
+};