@softure-ai/theme-notion 0.1.0 → 0.2.0

package/dist/notion/Stats.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
+import { TONE_COLORS, TONE_TEXT } from "./tones.js";
+// A screen's summary figures folded under a heading, closed by default: the design system's collapsible (a ghost row
+// with a chevron that turns when open, the content indented under it), on native `<details>` so it needs no client.
+export function StatsFold({ title, children, className }) {
+    return (_jsxs("details", { "data-slot": "stats-fold", className: cn("group/stats-fold", className), children: [_jsxs("summary", { "data-slot": "stats-fold-summary", className: "flex h-row-height cursor-pointer list-none items-center gap-1 rounded-md px-1 text-foreground transition-colors duration-120 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none [&::-webkit-details-marker]:hidden", children: [_jsx(ChevronRight, { "aria-hidden": "true", strokeWidth: ICON_STROKE_WIDTH, className: "size-4 shrink-0 text-muted-foreground transition-transform duration-150 group-open/stats-fold:rotate-90" }), _jsx("h2", { className: "text-ui-medium", children: title })] }), _jsx("div", { "data-slot": "stats-fold-content", className: "flex flex-col gap-3 pt-2 pb-1 pl-6", children: children })] }));
+}
+function getStatCardsLayout(isFullWidth, isOneRow) {
+    if (isOneRow)
+        return "row";
+    return isFullWidth ? "full" : "grid";
+}
+// Summary figures as a row of cards wrapping on a narrow screen: the label, the figure in its tone's colour (never
+// broken, tabular numbers), an optional note under it and an optional short figure on its right as a tag.
+export function StatCards({ label, cards, isFullWidth = false, isOneRow = false }) {
+    return (_jsx("ul", { "aria-label": label, "data-slot": "stat-cards", "data-layout": getStatCardsLayout(isFullWidth, isOneRow), className: cn("grid gap-2", isFullWidth
+            ? "grid-cols-[repeat(auto-fit,minmax(min(14rem,100%),1fr))]"
+            : "grid-cols-[repeat(auto-fill,minmax(min(10rem,100%),1fr))]", isOneRow && "sm:auto-cols-fr sm:grid-flow-col sm:grid-cols-none"), children: cards.map((card) => {
+            const tone = card.tone ?? "default";
+            return (_jsxs("li", { "data-stat": card.key, className: "flex min-w-0 items-start justify-between gap-2 rounded-lg bg-card p-3 text-card-foreground shadow-card", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-section-label text-muted-foreground", children: card.label }), _jsx("div", { "data-tone": tone, className: cn("mt-1 text-heading-3 whitespace-nowrap tabular-nums", TONE_TEXT[tone]), children: card.value }), card.hint === undefined ? null : _jsx("div", { className: "mt-1 text-small text-muted-foreground", children: card.hint })] }), card.aside === undefined ? null : (_jsx(Badge, { variant: "tag", color: TONE_COLORS[card.aside.tone ?? "default"] ?? "default", "data-slot": "stat-card-aside", "data-tone": card.aside.tone ?? "default", className: "text-small", children: card.aside.text }))] }, card.key));
+        }) }));
+}
+// Small counts as "label **value**" tags in one row, wrapping only on a phone, each in its tone's colour.
+export function StatPills({ label, pills }) {
+    return (_jsx("ul", { "aria-label": label, "data-slot": "stat-pills", className: "flex flex-wrap gap-1.5 sm:flex-nowrap sm:overflow-x-auto", children: pills.map((pill) => (_jsx("li", { "data-stat": pill.key, "data-tone": pill.tone ?? "default", children: _jsxs(Badge, { variant: "tag", color: TONE_COLORS[pill.tone ?? "default"] ?? "default", children: [pill.label, " ", _jsx("strong", { className: "font-medium tabular-nums", children: pill.value })] }) }, pill.key))) }));
+}
+//# sourceMappingURL=Stats.js.map

package/dist/notion/Stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.js","sourceRoot":"","sources":["../../src/notion/Stats.tsx"],"names":[],"mappings":"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"}

package/dist/notion/TabBar.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface TabBarItem<Key extends string> {
+    readonly key: Key;
+    readonly label: string;
+    readonly href: string;
+    readonly icon?: ReactNode;
+    readonly count?: number;
+}
+export interface TabBarProps<Key extends string> {
+    readonly label: string;
+    readonly tabs: readonly TabBarItem<Key>[];
+    readonly current: Key;
+}
+export declare function TabBar<Key extends string>({ label, tabs, current }: TabBarProps<Key>): import("react").JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/dist/notion/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../src/notion/TabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,UAAU,CAAC,GAAG,SAAS,MAAM;IAE5C,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAE1B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,WAAW,CAAC,GAAG,SAAS,MAAM;IAE7C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1C,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC;CACvB;AAGD,wBAAgB,MAAM,CAAC,GAAG,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,+BAyBpF"}

package/dist/notion/TabBar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A screen's tabs as line tabs where each tab is a link, so the shown tab lives in the address and survives a reload.
+export function TabBar({ label, tabs, current }) {
+    return (_jsx("nav", { "aria-label": label, "data-slot": "tab-bar", className: "overflow-x-auto border-b border-border", children: _jsx("ul", { className: "flex gap-1 pb-1", children: tabs.map((tab) => (_jsx("li", { children: _jsxs("a", { href: tab.href, className: "relative inline-flex h-control-height items-center gap-1.5 rounded-md px-2 text-ui-medium whitespace-nowrap text-muted-foreground transition-colors duration-120 after:absolute after:inset-x-0 after:-bottom-1 after:h-0.5 after:bg-foreground after:opacity-0 hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none aria-[current=page]:text-foreground aria-[current=page]:after:opacity-100 [&_svg]:size-4 [&_svg]:shrink-0", "data-tab": tab.key, "aria-current": tab.key === current ? "page" : undefined, children: [tab.icon, tab.label, tab.count === undefined ? null : (_jsx("span", { "data-slot": "tab-bar-count", className: "rounded-xs bg-accent px-1 text-small text-muted-foreground tabular-nums", children: tab.count }))] }) }, tab.key))) }) }));
+}
+//# sourceMappingURL=TabBar.js.map

package/dist/notion/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../src/notion/TabBar.tsx"],"names":[],"mappings":";AAoBA,sHAAsH;AACtH,MAAM,UAAU,MAAM,CAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAoB;IACnF,OAAO,CACL,4BAAiB,KAAK,eAAY,SAAS,EAAC,SAAS,EAAC,wCAAwC,YAC5F,aAAI,SAAS,EAAC,iBAAiB,YAC5B,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,uBACE,aACE,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,SAAS,EAAC,ydAAyd,cACzd,GAAG,CAAC,GAAG,kBACH,GAAG,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAErD,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,KAAK,EACT,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,4BAAgB,eAAe,EAAC,SAAS,EAAC,yEAAyE,YAChH,GAAG,CAAC,KAAK,GACL,CACR,IACC,IAdG,GAAG,CAAC,GAAG,CAeX,CACN,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC"}

package/dist/notion/tones.d.ts

@@ -0,0 +1,8 @@
+import type { PaletteColor } from "./palette.js";
+export declare const TONES: readonly ["default", "success", "warning", "danger", "muted"];
+export type Tone = (typeof TONES)[number];
+export declare const TONE_COLORS: Readonly<Record<Tone, PaletteColor | null>>;
+export declare const TONE_TEXT: Readonly<Record<Tone, string>>;
+export declare const TONE_FILL: Readonly<Record<Tone, string>>;
+export declare const TONE_EDGE: Readonly<Record<Tone, string>>;
+//# sourceMappingURL=tones.d.ts.map

package/dist/notion/tones.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tones.d.ts","sourceRoot":"","sources":["../../src/notion/tones.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD,eAAO,MAAM,KAAK,+DAAgE,CAAC;AAEnF,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAG1C,eAAO,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC,CAMnE,CAAC;AAKF,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAMpD,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAMpD,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAMpD,CAAC"}

package/dist/notion/tones.js

@@ -0,0 +1,37 @@
+// A figure's colour by what it means: done, to do, owed or failing, out of play, or neutral. Each app keeps its own
+// table of which meaning takes which tone ("booked" → success); the theme owns the colours and the class names.
+export const TONES = ["default", "success", "warning", "danger", "muted"];
+// A tone's palette colour; `default` has none and reads in the text colour.
+export const TONE_COLORS = {
+    default: null,
+    success: "green",
+    warning: "orange",
+    danger: "red",
+    muted: "gray",
+};
+// Literal class names per tone, so Tailwind generates each one (the theme's `@source` covers this folder).
+// A figure written in its tone's colour.
+export const TONE_TEXT = {
+    default: "text-foreground",
+    success: "text-green",
+    warning: "text-orange",
+    danger: "text-red",
+    muted: "text-gray",
+};
+// A drawn share (a bar segment) in its tone's colour; the default is a quiet gray.
+export const TONE_FILL = {
+    default: "bg-gray",
+    success: "bg-green",
+    warning: "bg-orange",
+    danger: "bg-red",
+    muted: "bg-gray",
+};
+// A box's leading edge in its tone's colour; the default is a quiet gray.
+export const TONE_EDGE = {
+    default: "border-l-gray",
+    success: "border-l-green",
+    warning: "border-l-orange",
+    danger: "border-l-red",
+    muted: "border-l-gray",
+};
+//# sourceMappingURL=tones.js.map

package/dist/notion/tones.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tones.js","sourceRoot":"","sources":["../../src/notion/tones.ts"],"names":[],"mappings":"AAEA,oHAAoH;AACpH,gHAAgH;AAChH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC;AAInF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,WAAW,GAAgD;IACtE,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,2GAA2G;AAE3G,yCAAyC;AACzC,MAAM,CAAC,MAAM,SAAS,GAAmC;IACvD,OAAO,EAAE,iBAAiB;IAC1B,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,mFAAmF;AACnF,MAAM,CAAC,MAAM,SAAS,GAAmC;IACvD,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,UAAU;IACnB,OAAO,EAAE,WAAW;IACpB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,0EAA0E;AAC1E,MAAM,CAAC,MAAM,SAAS,GAAmC;IACvD,OAAO,EAAE,eAAe;IACxB,OAAO,EAAE,gBAAgB;IACzB,OAAO,EAAE,iBAAiB;IAC1B,MAAM,EAAE,cAAc;IACtB,KAAK,EAAE,eAAe;CACvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softure-ai/theme-notion",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "SOFTURE AI Notion theme: shadcn/ui components (new-york v4, Radix, Tailwind CSS v4, lucide) with the Notion design system's tokens and deltas, ready to import.",
   "license": "MIT",
   "type": "module",
@@ -51,7 +51,7 @@
     "build": "tsc -p tsconfig.build.json && softure-theme-css"
   },
   "dependencies": {
-    "@softure-ai/theme-kit": "^0.1.0",
+    "@softure-ai/theme-kit": "^0.1.2",
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^1.61.0",

package/src/index.ts

@@ -43,8 +43,25 @@ export * from "./ui/textarea.js";
 export * from "./ui/tooltip.js";
 
 export { ICON_STROKE_WIDTH } from "./notion/icon-stroke.js";
+export { DetailTable, type DetailRow, type DetailTableProps } from "./notion/DetailTable.js";
+export { FoldRow, type FoldRowBadge, type FoldRowProps } from "./notion/FoldRow.js";
 export { PALETTE_COLORS, type PaletteColor } from "./notion/palette.js";
+export { MarkPopover, type MarkPopoverProps } from "./notion/MarkPopover.js";
 export { PageFrame, type PageFrameProps } from "./notion/PageFrame.js";
 export { PageHeader, type PageCrumb, type PageHeaderProps } from "./notion/PageHeader.js";
 export { PropertyList, type Property, type PropertyListProps } from "./notion/PropertyList.js";
+export { SidePanel, type SidePanelLayout, type SidePanelProps } from "./notion/SidePanel.js";
+export {
+  StatCards,
+  StatPills,
+  StatsFold,
+  type StatCard,
+  type StatCardAside,
+  type StatCardsProps,
+  type StatPill,
+  type StatPillsProps,
+  type StatsFoldProps,
+} from "./notion/Stats.js";
 export { Status, type StatusProps } from "./notion/Status.js";
+export { TabBar, type TabBarItem, type TabBarProps } from "./notion/TabBar.js";
+export { TONES, TONE_COLORS, TONE_EDGE, TONE_FILL, TONE_TEXT, type Tone } from "./notion/tones.js";

package/src/messages/en.ts

@@ -6,6 +6,7 @@ export const en = {
   breadcrumb: { label: "breadcrumb", more: "More" },
   dialog: { close: "Close" },
   sheet: { close: "Close" },
+  sidePanel: { close: "Close" },
   sidebar: { mobileTitle: "Sidebar", mobileDescription: "Displays the mobile sidebar.", toggle: "Toggle Sidebar" },
   spinner: { label: "Loading" },
   command: { title: "Command Palette", description: "Search for a command to run..." },

package/src/notion/DetailTable.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+
+export interface DetailRow {
+  /** Unique within the table; kept on the row as `data-detail`. */
+  readonly key: string;
+  readonly label: string;
+  /** `null`, `undefined` or "": nothing to show, the row is left out. */
+  readonly value: ReactNode;
+}
+
+export interface DetailTableProps {
+  /** The table's accessible name. */
+  readonly label: string;
+  readonly rows: readonly DetailRow[];
+}
+
+// A row header in a narrow muted column, a quiet line under every row; on a phone the label sits above its value.
+const DETAIL_TABLE_CLASS = [
+  "w-full border-collapse text-ui",
+  "[&_tr]:border-b [&_tr]:border-border",
+  "[&_th]:w-48 [&_th]:py-1.5 [&_th]:pr-3 [&_th]:text-left [&_th]:align-top [&_th]:font-normal [&_th]:text-muted-foreground",
+  "[&_td]:py-1.5 [&_td]:align-top [&_td]:wrap-anywhere",
+  "max-sm:[&_tr]:block max-sm:[&_tr]:py-1.5 max-sm:[&_th]:block max-sm:[&_th]:w-auto max-sm:[&_th]:py-0 max-sm:[&_td]:block max-sm:[&_td]:py-0",
+].join(" ");
+
+function hasValue(row: DetailRow): boolean {
+  return row.value !== null && row.value !== undefined && row.value !== "";
+}
+
+// An item's details as a label and value table in the Notion table style; nothing renders when no row has a value.
+export function DetailTable({ label, rows }: DetailTableProps) {
+  const shown = rows.filter(hasValue);
+  if (shown.length === 0) return null;
+  return (
+    <table data-slot="detail-table" className={DETAIL_TABLE_CLASS} aria-label={label}>
+      <tbody>
+        {shown.map((row) => (
+          <tr key={row.key} data-detail={row.key}>
+            <th scope="row">{row.label}</th>
+            <td>{row.value}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/notion/FoldRow.tsx

@@ -0,0 +1,78 @@
+import { ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Badge } from "../ui/badge.js";
+
+import { DetailTable, type DetailRow } from "./DetailTable.js";
+import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
+import { TONE_COLORS, type Tone } from "./tones.js";
+
+export interface FoldRowBadge {
+  /** Unique within the row; kept on the badge as `data-badge`. */
+  readonly key: string;
+  readonly text: string;
+  readonly tone?: Tone;
+}
+
+export interface FoldRowProps {
+  readonly title: ReactNode;
+  /** Short facts after the title; left out when empty. */
+  readonly facts?: readonly ReactNode[];
+  /** Badges on the row's right, in order. */
+  readonly badges: readonly FoldRowBadge[];
+  /** The details table's accessible name. */
+  readonly detailsLabel: string;
+  readonly details: readonly DetailRow[];
+  /** More content under the table when opened. */
+  readonly children?: ReactNode;
+}
+
+// An item as one folding list row: a native `<details>` that opens in place to its details, with no client state.
+export function FoldRow({ title, facts = [], badges, detailsLabel, details, children }: FoldRowProps) {
+  return (
+    <details data-slot="fold-row" className="group/fold-row border-b border-border">
+      <summary
+        data-slot="fold-row-summary"
+        className="flex min-h-row-height cursor-pointer list-none flex-wrap items-center gap-x-2 gap-y-1 rounded-md px-1 py-1 transition-colors duration-120 group-open/fold-row:bg-accent hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none [&::-webkit-details-marker]:hidden"
+      >
+        {/* The chevron and the title wrap as one: a long title folds onto lines beside its chevron. */}
+        <span data-slot="fold-row-heading" className="flex min-w-0 items-center gap-2">
+          <ChevronRight
+            aria-hidden="true"
+            strokeWidth={ICON_STROKE_WIDTH}
+            className="size-4 shrink-0 text-muted-foreground transition-transform duration-150 group-open/fold-row:rotate-90"
+          />
+          <span className="min-w-0 text-ui-medium">{title}</span>
+        </span>
+        {facts.map((fact, index) => (
+          // Facts have no identity of their own; their order is fixed for one render.
+          <span key={index} data-slot="fold-row-fact" className="text-ui text-muted-foreground">
+            {fact}
+          </span>
+        ))}
+        {badges.length === 0 ? null : (
+          <span data-slot="fold-row-badges" className="ml-auto inline-flex flex-wrap gap-1">
+            {badges.map((badge) => {
+              const tone = badge.tone ?? "default";
+              return (
+                <Badge
+                  key={badge.key}
+                  variant="tag"
+                  color={TONE_COLORS[tone] ?? "default"}
+                  data-badge={badge.key}
+                  data-tone={tone}
+                >
+                  {badge.text}
+                </Badge>
+              );
+            })}
+          </span>
+        )}
+      </summary>
+      <div data-slot="fold-row-content" className="flex flex-col gap-2 py-2 pr-1 pl-6 empty:hidden">
+        <DetailTable label={detailsLabel} rows={details} />
+        {children}
+      </div>
+    </details>
+  );
+}

package/src/notion/MarkPopover.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import { useId, type MouseEvent, type ReactNode } from "react";
+
+import { badgeVariants } from "../ui/badge.js";
+import { buttonVariants } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+
+import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
+import type { PaletteColor } from "./palette.js";
+
+export interface MarkPopoverProps {
+  /** The mark's colour: a palette colour that means the worst of what it lists. */
+  readonly color: PaletteColor;
+  readonly icon: LucideIcon;
+  readonly count: number;
+  /** The mark's accessible name: what it counts and that it opens a list. */
+  readonly label: string;
+  readonly heading: string;
+  readonly closeLabel: string;
+  /** Extra `data-*` attributes kept on the button. */
+  readonly buttonData?: Readonly<Record<`data-${string}`, string | undefined>>;
+  /** The entries, as phrasing elements with `role="listitem"`. */
+  readonly children: ReactNode;
+}
+
+// A counted tag (open warnings, tickets to buy) that opens a list of what it counts. The browser's Popover API opens
+// it on click or Enter and closes it on Escape or a click outside, with no client state; the panel sits in the top
+// layer, so a card's overflow never clips it. Centred on a phone, under its mark where CSS anchor positioning works.
+// Phrasing elements only, so the mark fits inside a `<summary>` or a paragraph.
+export function MarkPopover({ color, icon: Icon, count, label, heading, closeLabel, buttonData, children }: MarkPopoverProps) {
+  const panelId = useId();
+  return (
+    <span data-slot="mark" className="inline-flex [anchor-scope:--mark]">
+      <button
+        type="button"
+        className={cn(
+          badgeVariants({ variant: "tag", color }),
+          "cursor-pointer gap-1 font-medium tabular-nums [anchor-name:--mark] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+        )}
+        {...buttonData}
+        popoverTarget={panelId}
+        aria-haspopup="dialog"
+        aria-label={label}
+      >
+        <Icon aria-hidden="true" strokeWidth={ICON_STROKE_WIDTH} />
+        <span aria-hidden="true">{count}</span>
+      </button>
+      <span
+        id={panelId}
+        popover="auto"
+        role="dialog"
+        aria-labelledby={`${panelId}-heading`}
+        data-slot="mark-popover"
+        className="max-h-[min(24rem,calc(100vh-2rem))] w-[min(22rem,calc(100vw-2rem))] cursor-auto overflow-y-auto rounded-xl bg-popover p-3 text-left text-ui font-normal whitespace-normal text-popover-foreground shadow-menu backdrop:bg-transparent sm:supports-[position-anchor:--mark]:mt-1 sm:supports-[position-anchor:--mark]:mr-0 sm:supports-[position-anchor:--mark]:mb-0 sm:supports-[position-anchor:--mark]:ml-0 sm:supports-[position-anchor:--mark]:[position-anchor:--mark] sm:supports-[position-anchor:--mark]:[position-area:block-end_span-inline-start] sm:supports-[position-anchor:--mark]:[position-try-fallbacks:flip-block,flip-inline]"
+        onClick={keepEnclosingDetailsFolded}
+      >
+        <span className="mb-2 flex items-center justify-between gap-2">
+          <span id={`${panelId}-heading`} className="text-ui-medium">
+            {heading}
+          </span>
+          <button
+            type="button"
+            className={buttonVariants({ variant: "ghost", size: "xs" })}
+            popoverTarget={panelId}
+            popoverTargetAction="hide"
+          >
+            {closeLabel}
+          </button>
+        </span>
+        <span role="list" className="flex flex-col gap-2">
+          {children}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+// A click on the panel's text would toggle an enclosing `<details>` (the mark sits in its summary); links and
+// buttons inside keep their default.
+function keepEnclosingDetailsFolded(event: MouseEvent<HTMLElement>): void {
+  if (event.target instanceof Element && event.target.closest("a, button") === null) event.preventDefault();
+}

package/src/notion/PageHeader.tsx

@@ -19,6 +19,8 @@ export interface PageCrumb {
 export interface PageHeaderProps {
   title: ReactNode;
   crumbs?: PageCrumb[];
+  // The breadcrumb's accessible name in the app's language; the built-in English one when absent.
+  crumbsLabel?: string;
   // A lucide icon, never an emoji.
   icon?: ReactNode;
   description?: ReactNode;
@@ -29,11 +31,11 @@ export interface PageHeaderProps {
 }
 
 // The page's header, once per screen: breadcrumb, page icon, the 40 px title, what follows it, a description and actions.
-export function PageHeader({ title, crumbs, icon, description, actions, children, className }: PageHeaderProps) {
+export function PageHeader({ title, crumbs, crumbsLabel, icon, description, actions, children, className }: PageHeaderProps) {
   return (
     <header data-slot="page-header" className={cn("flex flex-col", className)}>
       {crumbs && crumbs.length > 0 ? (
-        <Breadcrumb>
+        <Breadcrumb {...(crumbsLabel === undefined ? {} : { "aria-label": crumbsLabel })}>
           <BreadcrumbList>
             {crumbs.map((crumb, index) => (
               <Fragment key={`${index}-${crumb.label}`}>

package/src/notion/SidePanel.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useEffect, useRef, type KeyboardEvent, type ReactNode } from "react";
+
+import { en as messages } from "../messages/en.js";
+import { Button } from "../ui/button.js";
+
+import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
+
+// `over` and `left` float over the canvas's right or left side; `beside` and `list` sit next to it (after or before)
+// and shrink it, and cover the whole canvas on a phone.
+export type SidePanelLayout = "over" | "beside" | "left" | "list";
+
+export interface SidePanelProps {
+  // Also the `data-testid`; the opener points at it with `aria-controls`.
+  readonly id: string;
+  readonly heading: string;
+  readonly layout: SidePanelLayout;
+  readonly isOpen: boolean;
+  // The close button and Escape; the caller moves focus back to its opener.
+  readonly onClose: () => void;
+  // The close button's accessible name, from the app's message layer.
+  readonly closeLabel?: string;
+  readonly children: ReactNode;
+}
+
+// A non-modal panel at a side of a canvas (a map) that leaves the canvas usable. Its parent is a `relative` flex row
+// holding the canvas and the panel. Hidden while closed, so its content leaves the reading order.
+export function SidePanel({ id, heading, layout, isOpen, onClose, closeLabel = messages.sidePanel.close, children }: SidePanelProps) {
+  const panelRef = useRef<HTMLElement>(null);
+  const wasOpenRef = useRef(isOpen);
+  const headingId = `${id}-heading`;
+
+  // Focus moves in when the panel opens, not when it is open on first render.
+  useEffect(() => {
+    if (isOpen && !wasOpenRef.current) panelRef.current?.focus();
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
+
+  function closeOnEscape(event: KeyboardEvent<HTMLElement>) {
+    if (event.key !== "Escape") return;
+    event.stopPropagation();
+    onClose();
+  }
+
+  return (
+    <aside
+      ref={panelRef}
+      id={id}
+      tabIndex={-1}
+      data-slot="side-panel"
+      className="absolute inset-y-0 right-0 z-3 flex w-[min(24rem,100%)] flex-col border-l border-border bg-background text-foreground shadow-menu outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset data-[layout=beside]:relative data-[layout=beside]:w-auto data-[layout=beside]:max-w-full data-[layout=beside]:flex-[0_0_max(50%,24rem)] data-[layout=left]:right-auto data-[layout=left]:left-0 data-[layout=left]:border-r data-[layout=left]:border-l-0 max-sm:data-[layout=beside]:absolute max-sm:data-[layout=beside]:inset-0 max-sm:data-[layout=beside]:w-full max-sm:data-[layout=beside]:border-l-0 data-[layout=list]:relative data-[layout=list]:flex-none data-[layout=list]:border-r data-[layout=list]:border-l-0 max-sm:data-[layout=list]:absolute max-sm:data-[layout=list]:inset-0 max-sm:data-[layout=list]:w-full max-sm:data-[layout=list]:border-r-0 [&[hidden]]:hidden"
+      data-layout={layout}
+      hidden={!isOpen}
+      aria-labelledby={headingId}
+      data-testid={id}
+      onKeyDown={closeOnEscape}
+    >
+      <div className="flex items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4">
+        <h2 id={headingId} className="text-heading-3">
+          {heading}
+        </h2>
+        <Button type="button" variant="ghost" size="icon" aria-label={closeLabel} onClick={onClose}>
+          <X aria-hidden="true" strokeWidth={ICON_STROKE_WIDTH} />
+        </Button>
+      </div>
+      <div data-slot="side-panel-content" className="grid flex-1 content-start gap-3 overflow-y-auto p-3">
+        {children}
+      </div>
+    </aside>
+  );
+}

package/src/notion/Stats.tsx

@@ -0,0 +1,145 @@
+import { ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+
+import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
+import { TONE_COLORS, TONE_TEXT, type Tone } from "./tones.js";
+
+export interface StatsFoldProps {
+  /** The section's heading. */
+  readonly title: string;
+  readonly children: ReactNode;
+  readonly className?: string;
+}
+
+// A screen's summary figures folded under a heading, closed by default: the design system's collapsible (a ghost row
+// with a chevron that turns when open, the content indented under it), on native `<details>` so it needs no client.
+export function StatsFold({ title, children, className }: StatsFoldProps) {
+  return (
+    <details data-slot="stats-fold" className={cn("group/stats-fold", className)}>
+      <summary
+        data-slot="stats-fold-summary"
+        className="flex h-row-height cursor-pointer list-none items-center gap-1 rounded-md px-1 text-foreground transition-colors duration-120 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none [&::-webkit-details-marker]:hidden"
+      >
+        <ChevronRight
+          aria-hidden="true"
+          strokeWidth={ICON_STROKE_WIDTH}
+          className="size-4 shrink-0 text-muted-foreground transition-transform duration-150 group-open/stats-fold:rotate-90"
+        />
+        <h2 className="text-ui-medium">{title}</h2>
+      </summary>
+      <div data-slot="stats-fold-content" className="flex flex-col gap-3 pt-2 pb-1 pl-6">
+        {children}
+      </div>
+    </details>
+  );
+}
+
+export interface StatCardAside {
+  readonly text: string;
+  readonly tone?: Tone;
+}
+
+export interface StatCard {
+  /** Unique within the row; kept as `data-stat`. */
+  readonly key: string;
+  readonly label: string;
+  readonly value: string;
+  readonly hint?: string;
+  readonly tone?: Tone;
+  readonly aside?: StatCardAside;
+}
+
+export interface StatCardsProps {
+  /** The list's accessible name. */
+  readonly label: string;
+  readonly cards: readonly StatCard[];
+  /** The cards stretch across the column (min 14rem) instead of the narrow grid (min 10rem). */
+  readonly isFullWidth?: boolean;
+  /** Every card in one row from `sm` up, wrapping only on a phone. */
+  readonly isOneRow?: boolean;
+}
+
+function getStatCardsLayout(isFullWidth: boolean, isOneRow: boolean): "row" | "full" | "grid" {
+  if (isOneRow) return "row";
+  return isFullWidth ? "full" : "grid";
+}
+
+// Summary figures as a row of cards wrapping on a narrow screen: the label, the figure in its tone's colour (never
+// broken, tabular numbers), an optional note under it and an optional short figure on its right as a tag.
+export function StatCards({ label, cards, isFullWidth = false, isOneRow = false }: StatCardsProps) {
+  return (
+    <ul
+      aria-label={label}
+      data-slot="stat-cards"
+      data-layout={getStatCardsLayout(isFullWidth, isOneRow)}
+      className={cn(
+        "grid gap-2",
+        isFullWidth
+          ? "grid-cols-[repeat(auto-fit,minmax(min(14rem,100%),1fr))]"
+          : "grid-cols-[repeat(auto-fill,minmax(min(10rem,100%),1fr))]",
+        isOneRow && "sm:auto-cols-fr sm:grid-flow-col sm:grid-cols-none",
+      )}
+    >
+      {cards.map((card) => {
+        const tone = card.tone ?? "default";
+        return (
+          <li
+            key={card.key}
+            data-stat={card.key}
+            className="flex min-w-0 items-start justify-between gap-2 rounded-lg bg-card p-3 text-card-foreground shadow-card"
+          >
+            <div className="min-w-0">
+              <div className="text-section-label text-muted-foreground">{card.label}</div>
+              <div data-tone={tone} className={cn("mt-1 text-heading-3 whitespace-nowrap tabular-nums", TONE_TEXT[tone])}>
+                {card.value}
+              </div>
+              {card.hint === undefined ? null : <div className="mt-1 text-small text-muted-foreground">{card.hint}</div>}
+            </div>
+            {card.aside === undefined ? null : (
+              <Badge
+                variant="tag"
+                color={TONE_COLORS[card.aside.tone ?? "default"] ?? "default"}
+                data-slot="stat-card-aside"
+                data-tone={card.aside.tone ?? "default"}
+                className="text-small"
+              >
+                {card.aside.text}
+              </Badge>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export interface StatPill {
+  readonly key: string;
+  readonly label: string;
+  readonly value: string;
+  readonly tone?: Tone;
+}
+
+export interface StatPillsProps {
+  /** The list's accessible name. */
+  readonly label: string;
+  readonly pills: readonly StatPill[];
+}
+
+// Small counts as "label **value**" tags in one row, wrapping only on a phone, each in its tone's colour.
+export function StatPills({ label, pills }: StatPillsProps) {
+  return (
+    <ul aria-label={label} data-slot="stat-pills" className="flex flex-wrap gap-1.5 sm:flex-nowrap sm:overflow-x-auto">
+      {pills.map((pill) => (
+        <li key={pill.key} data-stat={pill.key} data-tone={pill.tone ?? "default"}>
+          <Badge variant="tag" color={TONE_COLORS[pill.tone ?? "default"] ?? "default"}>
+            {pill.label} <strong className="font-medium tabular-nums">{pill.value}</strong>
+          </Badge>
+        </li>
+      ))}
+    </ul>
+  );
+}