@sableui/react 0.17.0 → 0.19.0

package/dist/patterns/tracker-page.js

@@ -0,0 +1,392 @@
+// src/patterns/tracker-page.tsx
+import { useState } from "react";
+import { Icon } from "../icon/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 {
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  Breadcrumbs,
+  BreadcrumbSeparator
+} from "../components/breadcrumbs/index.js";
+import { Button } from "../components/button/index.js";
+import { DataTable } from "../components/data-table/index.js";
+import { DatePicker } from "../components/date-picker/index.js";
+import { EmptyState } from "../components/empty-state/index.js";
+import { Form } from "../components/form/index.js";
+import { Kbd } from "../components/kbd/index.js";
+import {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuSubmenu,
+  MenuSubmenuTrigger,
+  MenuTrigger
+} from "../components/menu/index.js";
+import { Panel, PanelGroup } from "../components/panel-group/index.js";
+import { PanelSection, PropertyRow } from "../components/panel-section/index.js";
+import { RelativeTime } from "../components/relative-time/index.js";
+import { SearchInput } from "../components/search-input/index.js";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../components/select/index.js";
+import {
+  Sidebar,
+  SidebarAccount,
+  SidebarBrand,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarItem,
+  SidebarNav
+} from "../components/sidebar/index.js";
+import { StatusBar, StatusBarGroup } from "../components/status-bar/index.js";
+import { StatusDot } from "../components/status-dot/index.js";
+import { Tabs, TabsList, TabsPanel, TabsTrigger } from "../components/tabs/index.js";
+import { Textarea } from "../components/textarea/index.js";
+import { Toggle, ToggleGroup } from "../components/toggle/index.js";
+import { SimpleTooltip } from "../components/tooltip/index.js";
+import { Workspace, WorkspaceBar, WorkspaceCanvas } from "../components/workspace/index.js";
+import { Density } from "../lib/density.js";
+import { useBelowBreakpoint } from "../lib/use-media-query.js";
+import { useSableTheme } from "../themes/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUSES = [
+  { key: "progress", label: "In progress", tone: "warning" },
+  { key: "review", label: "In review", tone: "2" },
+  { key: "todo", label: "Todo", tone: "neutral" },
+  { key: "done", label: "Done", tone: "success" }
+];
+var PRIORITIES = ["Urgent", "High", "Medium", "Low"];
+var people = {
+  AK: "Ama Kusi",
+  JR: "Jonas Reiter",
+  LM: "Lena Moreau",
+  TO: "Tom\xE1s Ortega"
+};
+var MIN = 60 * 1e3;
+var HOUR = 60 * MIN;
+var DAY = 24 * HOUR;
+var isoDay = (offset) => {
+  const d = new Date(Date.now() + offset);
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+};
+var initialIssues = [
+  { id: "FW-104", title: "Sync offline edits when the app reconnects", detail: "Edits made offline are queued but replayed out of order after a reconnect. Replay them by timestamp and surface conflicts.", status: "progress", priority: "Urgent", assignee: "AK", label: "Sync", due: isoDay(2 * DAY), notes: [{ id: "n1", who: "JR", text: "Repro steps are in the test plan. It only happens after a cold start.", at: -3 * HOUR }] },
+  { id: "FW-105", title: "Onboarding checklist on first launch", detail: "Three steps: connect a calendar, invite a teammate, create a first project.", status: "progress", priority: "Medium", assignee: "LM", label: "Onboarding", due: isoDay(5 * DAY), notes: [] },
+  { id: "FW-108", title: "Push notification settings per project", detail: "Let people mute a project without muting the workspace.", status: "review", priority: "High", assignee: "TO", label: "Notifications", due: isoDay(1 * DAY), notes: [] },
+  { id: "FW-110", title: "Crash when attaching a large photo", detail: "Photos over 20 MB crash the uploader on older devices.", status: "review", priority: "Urgent", assignee: "JR", label: "Bug", due: isoDay(-1 * DAY), notes: [] },
+  { id: "FW-112", title: "Search across archived projects", detail: "Archived projects are left out of search today.", status: "todo", priority: "Low", assignee: "AK", label: "Search", due: isoDay(9 * DAY), notes: [] },
+  { id: "FW-113", title: "Keyboard shortcuts for the board view", detail: "J and K move between cards; C creates an issue in the focused column.", status: "todo", priority: "Medium", assignee: "LM", label: "Board", due: isoDay(12 * DAY), notes: [] },
+  { id: "FW-114", title: "Export a project as CSV", detail: "One row per issue, with status, assignee and dates.", status: "todo", priority: "Low", assignee: "TO", label: "Export", due: isoDay(14 * DAY), notes: [] },
+  { id: "FW-101", title: "Dark mode for the widget", detail: "The home-screen widget ignores the system appearance.", status: "done", priority: "Medium", assignee: "JR", label: "Widget", due: isoDay(-4 * DAY), notes: [] }
+];
+var MODE_LABEL = { light: "Light", dark: "Dark", system: "System" };
+function TrackerPage() {
+  const [issues, setIssues] = useState(initialIssues);
+  const [selectedId, setSelectedId] = useState("FW-104");
+  const [inspecting, setInspecting] = useState(false);
+  const [navOpen, setNavOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [priority, setPriority] = useState("all");
+  const [groupBy, setGroupBy] = useState("status");
+  const [tab, setTab] = useState("issues");
+  const [draft, setDraft] = useState("");
+  const narrow = useBelowBreakpoint("lg");
+  const { preference, setPreference } = useSableTheme();
+  const needle = query.trim().toLowerCase();
+  const visible = issues.filter(
+    (i) => (priority === "all" || i.priority === priority) && `${i.id} ${i.title} ${i.label}`.toLowerCase().includes(needle)
+  );
+  const selected = issues.find((i) => i.id === selectedId) ?? null;
+  const done = issues.filter((i) => i.status === "done").length;
+  function update(id, patch) {
+    setIssues((all) => all.map((i) => i.id === id ? { ...i, ...patch } : i));
+  }
+  function open(id) {
+    setSelectedId(id);
+    setInspecting(true);
+  }
+  function close() {
+    setInspecting(false);
+    if (!narrow) setSelectedId(null);
+  }
+  function addIssue(status = "todo") {
+    const id = `FW-${115 + issues.length}`;
+    setIssues((all) => [
+      ...all,
+      { id, title: "New issue", detail: "", status, priority: "Medium", assignee: "AK", label: "Triage", due: isoDay(7 * DAY), notes: [] }
+    ]);
+    open(id);
+  }
+  function addNote() {
+    if (!selected || !draft.trim()) return;
+    update(selected.id, { notes: [...selected.notes, { id: `n${Date.now()}`, who: "AK", text: draft.trim(), at: 0 }] });
+    setDraft("");
+  }
+  const columns = [
+    { key: "id", header: "ID", className: "w-20 whitespace-nowrap", cell: (i) => /* @__PURE__ */ jsx("span", { className: "text-ui-num text-muted-foreground", children: i.id }) },
+    { key: "title", header: "Issue", className: "w-full max-w-0", cell: (i) => /* @__PURE__ */ jsx("span", { className: "block truncate", children: i.title }) },
+    { key: "label", header: "Label", className: "w-28 max-sm:hidden", cell: (i) => /* @__PURE__ */ jsx(Badge, { appearance: "outline", size: "sm", children: i.label }) },
+    { key: "due", header: "Due", className: "w-20 whitespace-nowrap max-sm:hidden", sortValue: (i) => i.due.getTime(), cell: (i) => /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: i.due.toLocaleDateString("en-US", { month: "short", day: "numeric" }) }) },
+    { key: "assignee", header: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Assignee" }), className: "w-10", cell: (i) => /* @__PURE__ */ jsx(Avatar, { size: "2xs", fallback: i.assignee, alt: people[i.assignee] }) }
+  ];
+  const groups = groupBy === "status" ? STATUSES.map((s) => ({
+    key: s.key,
+    label: s.label,
+    icon: /* @__PURE__ */ jsx(StatusDot, { tone: s.tone }),
+    action: /* @__PURE__ */ jsx(SimpleTooltip, { content: `Add to ${s.label}`, children: /* @__PURE__ */ jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": `Add to ${s.label}`, onClick: () => addIssue(s.key), children: /* @__PURE__ */ jsx(Icon, { name: "plus" }) }) }),
+    defaultExpanded: s.key !== "done"
+  })) : Object.entries(people).map(([key, name]) => ({
+    key,
+    label: name,
+    icon: /* @__PURE__ */ jsx(Avatar, { size: "2xs", fallback: key, alt: "" })
+  }));
+  const sidebar = /* @__PURE__ */ jsxs(Sidebar, { variant: "inline", className: "h-full w-full", children: [
+    /* @__PURE__ */ jsxs(SidebarHeader, { children: [
+      /* @__PURE__ */ jsx(SidebarBrand, { mark: /* @__PURE__ */ jsx(Avatar, { shape: "square", size: "2xs", tone: "teal", fallback: "F", alt: "" }), label: "Fieldwork" }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "basis-full justify-between", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Icon, { name: "search" }),
+          "Search"
+        ] }),
+        /* @__PURE__ */ jsx(Kbd, { children: "Ctrl K" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(SidebarNav, { "aria-label": "Workspace", children: [
+      /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "inbox" }), label: "Inbox", badge: /* @__PURE__ */ jsx("span", { className: "text-ui-num text-muted-foreground", children: "3" }) }),
+      /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "circle-check" }), label: "My issues" }),
+      /* @__PURE__ */ jsxs(SidebarGroup, { label: "Mobile app", children: [
+        /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "layers" }), label: "Issues", active: true }),
+        /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "refresh" }), label: "Cycles" }),
+        /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "archive" }), label: "Backlog" })
+      ] }),
+      /* @__PURE__ */ jsxs(SidebarGroup, { label: "Workspace", children: [
+        /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "folder" }), label: "Projects" }),
+        /* @__PURE__ */ jsx(SidebarItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "users" }), label: "Members" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsxs(Menu, { children: [
+      /* @__PURE__ */ jsx(
+        MenuTrigger,
+        {
+          render: /* @__PURE__ */ jsx(SidebarAccount, { avatar: /* @__PURE__ */ jsx(Avatar, { size: "2xs", fallback: "AK", alt: "" }), label: "Ama Kusi", detail: "Fieldwork \xB7 Admin" })
+        }
+      ),
+      /* @__PURE__ */ jsxs(MenuContent, { side: "top", align: "start", children: [
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "gear" }), children: "Settings" }),
+        /* @__PURE__ */ jsxs(MenuSubmenu, { children: [
+          /* @__PURE__ */ jsx(
+            MenuSubmenuTrigger,
+            {
+              icon: /* @__PURE__ */ jsx(Icon, { name: preference === "dark" ? "moon" : preference === "light" ? "sun" : "desktop" }),
+              value: MODE_LABEL[preference],
+              children: "Appearance"
+            }
+          ),
+          /* @__PURE__ */ jsx(MenuContent, { side: "inline-end", children: /* @__PURE__ */ jsxs(MenuRadioGroup, { value: preference, onValueChange: (v) => setPreference(v), children: [
+            /* @__PURE__ */ jsx(MenuRadioItem, { value: "light", children: "Light" }),
+            /* @__PURE__ */ jsx(MenuRadioItem, { value: "dark", children: "Dark" }),
+            /* @__PURE__ */ jsx(MenuRadioItem, { value: "system", children: "System" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(MenuSeparator, {}),
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "logout" }), children: "Sign out" })
+      ] })
+    ] }) })
+  ] });
+  const list = visible.length === 0 ? /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, { name: "search" }),
+      title: "No issues match",
+      description: "Try another search, or clear the priority filter.",
+      action: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          size: "sm",
+          onClick: () => {
+            setQuery("");
+            setPriority("all");
+          },
+          children: "Clear filters"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      columns,
+      data: visible,
+      rowKey: (i) => i.id,
+      groupBy: (i) => groupBy === "status" ? i.status : i.assignee,
+      groups,
+      onRowClick: (i) => open(i.id),
+      isRowSelected: (i) => i.id === selectedId && (!narrow || inspecting)
+    }
+  );
+  const inspector = selected ? /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs(WorkspaceBar, { className: "justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-ui-num text-muted-foreground", children: selected.id }),
+      /* @__PURE__ */ jsx(SimpleTooltip, { content: "Close issue", children: /* @__PURE__ */ jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": "Close issue", onClick: close, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto scrollbar-quiet", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-2 pt-4 pb-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-title-lg", children: selected.title }),
+        /* @__PURE__ */ jsx("p", { className: "text-ui-body text-muted-foreground", children: selected.detail || "Add the details the team needs." })
+      ] }),
+      /* @__PURE__ */ jsxs(PanelSection, { title: "Properties", children: [
+        /* @__PURE__ */ jsx(PropertyRow, { label: "Status", children: /* @__PURE__ */ jsxs(Select, { value: selected.status, items: STATUSES.map((s) => ({ value: s.key, label: s.label })), onValueChange: (v) => v && update(selected.id, { status: v }), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "xs", "aria-label": "Status" }),
+          /* @__PURE__ */ jsx(SelectContent, { children: STATUSES.map((s) => /* @__PURE__ */ jsx(SelectItem, { value: s.key, children: s.label }, s.key)) })
+        ] }) }),
+        /* @__PURE__ */ jsx(PropertyRow, { label: "Priority", children: /* @__PURE__ */ jsxs(Select, { value: selected.priority, onValueChange: (v) => v && update(selected.id, { priority: v }), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "xs", "aria-label": "Priority" }),
+          /* @__PURE__ */ jsx(SelectContent, { children: PRIORITIES.map((p) => /* @__PURE__ */ jsx(SelectItem, { value: p, children: p }, p)) })
+        ] }) }),
+        /* @__PURE__ */ jsx(PropertyRow, { label: "Assignee", children: /* @__PURE__ */ jsxs(Select, { value: selected.assignee, items: people, onValueChange: (v) => v && update(selected.id, { assignee: v }), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { size: "xs", "aria-label": "Assignee" }),
+          /* @__PURE__ */ jsx(SelectContent, { children: Object.entries(people).map(([key, name]) => /* @__PURE__ */ jsx(SelectItem, { value: key, children: name }, key)) })
+        ] }) }),
+        /* @__PURE__ */ jsx(PropertyRow, { label: "Due date", children: /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            size: "xs",
+            "aria-label": "Due date",
+            value: selected.due,
+            formatOptions: { month: "short", day: "numeric", year: "numeric" },
+            onValueChange: (d) => d && update(selected.id, { due: d })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(PanelSection, { title: "Activity", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 pb-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-ui-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Icon, { name: "plus" }),
+          /* @__PURE__ */ jsx("span", { children: "Created in Mobile app" })
+        ] }),
+        selected.notes.map((n) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "2xs", fallback: n.who, alt: "" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-ui-md", children: people[n.who] }),
+              /* @__PURE__ */ jsx(RelativeTime, { date: new Date(Date.now() + n.at), className: "text-ui-sm text-muted-foreground" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-ui-body", children: n.text })
+          ] })
+        ] }, n.id))
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Form,
+      {
+        className: "flex shrink-0 flex-col gap-2 border-t border-hairline p-2",
+        onSubmit: (e) => {
+          e.preventDefault();
+          addNote();
+        },
+        children: [
+          /* @__PURE__ */ jsx(Textarea, { "aria-label": "Add a comment", placeholder: "Leave a comment\u2026", rows: 2, value: draft, onChange: (e) => setDraft(e.target.value) }),
+          /* @__PURE__ */ jsx(Button, { size: "xs", variant: "secondary", type: "submit", className: "self-end", disabled: !draft.trim(), iconStart: /* @__PURE__ */ jsx(Icon, { name: "arrow-up" }), children: "Comment" })
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ jsx(
+    Workspace,
+    {
+      skipLinkLabel: "Skip to issues",
+      statusBar: /* @__PURE__ */ jsxs(StatusBar, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(StatusDot, { tone: "success", size: "sm" }),
+          "Saved"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "max-sm:hidden", children: [
+          issues.length,
+          " issues \xB7 ",
+          done,
+          " done"
+        ] }),
+        /* @__PURE__ */ jsx(StatusBarGroup, { align: "end", children: /* @__PURE__ */ jsx("span", { className: "max-sm:hidden", children: "Ctrl K to search" }) })
+      ] }),
+      bottomNav: /* @__PURE__ */ jsxs(BottomNav, { "aria-label": "Primary", children: [
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "inbox" }), label: "Inbox", showLabel: true }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "layers" }), label: "Issues", showLabel: true, active: true }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "folder" }), label: "Projects", showLabel: true }),
+        /* @__PURE__ */ jsx(BottomNavItem, { icon: /* @__PURE__ */ jsx(Icon, { name: "users" }), label: "Members", showLabel: true })
+      ] }),
+      children: /* @__PURE__ */ jsxs(PanelGroup, { children: [
+        /* @__PURE__ */ jsx(Panel, { label: "Workspace navigation", width: 232, narrow: "sheet", side: "left", open: narrow ? navOpen : true, onOpenChange: setNavOpen, scroll: false, children: sidebar }),
+        /* @__PURE__ */ jsxs(WorkspaceCanvas, { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs(WorkspaceBar, { className: "gap-2 px-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "lg:hidden", children: /* @__PURE__ */ jsx(SimpleTooltip, { content: "Open navigation", children: /* @__PURE__ */ jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": "Open navigation", onClick: () => setNavOpen(true), children: /* @__PURE__ */ jsx(Icon, { name: "bars" }) }) }) }),
+            /* @__PURE__ */ jsx("h1", { className: "sr-only", children: "Mobile app issues" }),
+            /* @__PURE__ */ jsxs(Breadcrumbs, { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx(BreadcrumbItem, { className: "max-sm:hidden", children: /* @__PURE__ */ jsx(BreadcrumbLink, { href: "#", children: "Fieldwork" }) }),
+              /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "max-sm:hidden" }),
+              /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: "Mobile app" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(String(v)), className: "flex min-h-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx(WorkspaceBar, { className: "px-3", children: /* @__PURE__ */ jsxs(TabsList, { variant: "pill", children: [
+              /* @__PURE__ */ jsxs(TabsTrigger, { value: "issues", children: [
+                "Issues ",
+                /* @__PURE__ */ jsx("span", { className: "text-ui-num text-muted-foreground", children: issues.length })
+              ] }),
+              /* @__PURE__ */ jsx(TabsTrigger, { value: "overview", children: "Overview" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(TabsPanel, { value: "issues", className: "flex min-h-0 flex-1 flex-col", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-hairline px-3 py-2", children: [
+                /* @__PURE__ */ jsxs(Menu, { children: [
+                  /* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", iconStart: /* @__PURE__ */ jsx(Icon, { name: "filter" }), children: priority === "all" ? "Filter" : priority }) }),
+                  /* @__PURE__ */ jsx(MenuContent, { children: /* @__PURE__ */ jsxs(MenuRadioGroup, { value: priority, onValueChange: (v) => setPriority(v), children: [
+                    /* @__PURE__ */ jsx(MenuRadioItem, { value: "all", children: "All priorities" }),
+                    PRIORITIES.map((p) => /* @__PURE__ */ jsx(MenuRadioItem, { value: p, children: p }, p))
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ jsx(SearchInput, { size: "xs", value: query, onValueChange: setQuery, placeholder: "Find issue\u2026", "aria-label": "Find issue", className: "w-40" }),
+                /* @__PURE__ */ jsxs(ToggleGroup, { appearance: "segmented", value: [groupBy], onValueChange: (v) => v[0] && setGroupBy(v[0]), "aria-label": "Group by", className: "ms-auto", children: [
+                  /* @__PURE__ */ jsx(Toggle, { value: "status", children: "Status" }),
+                  /* @__PURE__ */ jsx(Toggle, { value: "assignee", children: "Assignee" })
+                ] }),
+                /* @__PURE__ */ jsx(Button, { size: "xs", iconStart: /* @__PURE__ */ jsx(Icon, { name: "plus" }), onClick: () => addIssue(), children: "New issue" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto scrollbar-quiet", children: list })
+            ] }),
+            /* @__PURE__ */ jsx(TabsPanel, { value: "overview", className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(Density, { value: "comfortable", className: "min-h-0 flex-1 overflow-y-auto scrollbar-quiet", children: /* @__PURE__ */ jsxs("article", { className: "flex max-w-prose flex-col gap-4 p-8 max-sm:p-5", children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-heading-3", children: "Mobile app" }),
+              /* @__PURE__ */ jsx("p", { className: "text-body-md text-muted-foreground", children: "The phone app for field teams: capture work on site, sync it when the signal comes back, and hand it to the office without retyping anything." }),
+              /* @__PURE__ */ jsxs("dl", { className: "sable-list-dl", children: [
+                /* @__PURE__ */ jsx("dt", { children: "Lead" }),
+                /* @__PURE__ */ jsx("dd", { children: people.AK }),
+                /* @__PURE__ */ jsx("dt", { children: "Open issues" }),
+                /* @__PURE__ */ jsx("dd", { children: issues.length - done }),
+                /* @__PURE__ */ jsx("dt", { children: "Target" }),
+                /* @__PURE__ */ jsx("dd", { children: isoDay(30 * DAY).toLocaleDateString("en-US", { month: "long", day: "numeric" }) })
+              ] })
+            ] }) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Panel,
+          {
+            label: "Issue details",
+            width: 320,
+            narrow: "sheet",
+            open: narrow ? inspecting && selected !== null : selected !== null,
+            onOpenChange: (next) => !next && close(),
+            scroll: false,
+            className: "border-s border-hairline",
+            children: inspector
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  TrackerPage
+};

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

@@ -0,0 +1,40 @@
+// src/patterns/tracker-page.meta.ts
+var trackerPageMeta = {
+  name: "TrackerPage",
+  summary: "Records workspace in the tool register: a Sidebar rail of grouped views ending in an account menu, a WorkspaceBar of Breadcrumbs over pill Tabs, a filter row, one grouped DataTable, and a docked inspector of PanelSection property rows with a pinned comment form. Below lg the rail and the inspector become sheets and a BottomNav takes the last row.",
+  intent: "Reach for this when a team works through records in a dense tool \u2014 an issue tracker, a support queue, a pipeline: a grouped list, a docked inspector for the selected record, and a rail of views. For records a person reads and edits one at a time on a page, ListDetailPage is the page-register shape; for monitoring with headline numbers, DashboardPage.",
+  keywords: [
+    "issue tracker",
+    "tracker",
+    "linear",
+    "like linear",
+    "jira",
+    "project management",
+    "task manager",
+    "support queue",
+    "triage",
+    "crm",
+    "pipeline",
+    "records workspace",
+    "inspector",
+    "backlog"
+  ],
+  notes: [
+    'Workspace sets the compact density for everything inside: 32px rail rows, 28px tables, 24px property fields. Nothing in the pattern sizes a control or a row by hand. The Overview tab is a reading view, so it sits in `<Density value="comfortable">` and its prose gets page type back.',
+    "The rail is Sable's own parts on one grid: SidebarBrand, SidebarGroup, SidebarItem and SidebarAccount share the icon and label columns. The account row is the trigger of the account Menu, which holds Settings, an Appearance submenu wired to useSableTheme (light, dark, system) and Sign out. No Settings button or badge sits in the footer.",
+    "There is no Workspace `toolbar`: the bars belong to the list column, so the inspector runs the full height beside them. The first WorkspaceBar carries Breadcrumbs; the second carries pill Tabs, a view switch in chrome, which sits beside the bar's other controls rather than drawing a rule.",
+    "One DataTable groups the rows (`groupBy`, `groups`): one header for every group, a StatusDot, a count and an add action per group header, and Done starting closed. The segmented ToggleGroup switches the grouping between status and assignee. Filtering to nothing swaps the table for an EmptyState with a Clear filters action.",
+    "Workflow states map onto StatusDot tones once (`STATUSES`), so group headers and the status Select read from one place. A product with a richer status glyph keeps that one mapping and swaps the icon.",
+    'The inspector is a Panel with `narrow="sheet"`: docked at 320px from lg, a right sheet below it, its content rendered once. Below lg it opens only when a row is picked (`inspecting`), so a phone never loads with a sheet over the list. Properties are PanelSection + PropertyRow with xs Select triggers and an xs DatePicker; Activity uses RelativeTime; the comment Form is pinned under the scrolling body.',
+    'The rail is a Panel with `narrow="sheet" side="left"`, opened from a `lg:hidden` menu button in the first bar; in the sheet the Sidebar fills its width. Workspace `bottomNav` reserves the BottomNav\'s row below lg, so the status bar ends above it.'
+  ],
+  a11y: [
+    "Workspace renders a skip link to the canvas (`Skip to issues`) and WorkspaceCanvas is the main landmark; the rail and the inspector are labelled complementary regions (`Workspace navigation`, `Issue details`), and as sheets they keep those labels as their dialog titles.",
+    "The page has one level-1 heading (visually hidden; the breadcrumb shows the place) and the inspector's title is a level-2 heading.",
+    "Group header rows are real buttons with aria-expanded; rows open the inspector from the keyboard (DataTable's row activation). Every icon-only action has an accessible name and a tooltip.",
+    "Each SidebarGroup is a named group; the account row names the person, and its menu is a standard Menu with a radio group for the colour mode."
+  ]
+};
+export {
+  trackerPageMeta
+};

package/dist/presets/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../_contract-CDa9-NdB.js';
+import { T as ThemeManifest } from '../_contract-DlklV0Im.js';
 
 /** An OKLCH colour, lightness 0–1. Extra fields (alpha) ride along untouched. */
 interface OklchColor {