@softure-ai/theme-notion 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -4,6 +4,48 @@ Newest first. Each version lists what changed for an app that uses the theme. Wh
 production, the version gets a line `verified in: <app>@<commit>` ([docs/05](../../docs/05-adoption-playbook.md),
 "Definition of done").
 
+## 0.2.0
+
+- Needs `@softure-ai/theme-kit` `^0.1.2` (was `^0.1.0`): the version that ships `base.css` and `maplibre.css`, which
+  both wirings in the README import.
+- README (#718): both wirings import the kit's `base.css` (the page base on `body`) and, for an app with MapLibre maps,
+  `maplibre.css`. Needs `@softure-ai/theme-kit` with those files (the next kit release). An app that kept its own
+  `body` rule (`margin: 0`, `background: var(--background)`, `color: var(--foreground)`,
+  `font-family: --theme(--font-sans)`) or `body .maplibregl-map { font-family: … }` replaces them with the two
+  `@import` lines after `theme.css`.
+- `TabBar` (#723): a screen's tabs as line tabs where each tab is a link (`<a href>`), so the shown tab lives in the
+  address and a link, a form's return or a reload land on the same tab. Optional icon before the label and count
+  after it (0 included); the current link carries `aria-current="page"`; the row scrolls sideways on a phone.
+  `data-slot="tab-bar"`, `data-tab` and `data-slot="tab-bar-count"` mark the parts. An app that keeps its own copy
+  replaces it with `import { TabBar } from "@softure-ai/theme-notion"`; the props are the same (`label`, `tabs`,
+  `current`). For client-state tabs keep `Tabs`.
+- Tones (#720): `TONES`, `Tone` (`default`, `success`, `warning`, `danger`, `muted`), `TONE_COLORS` (a tone's palette
+  colour, `null` for `default`) and the literal class maps `TONE_TEXT` (`text-*`), `TONE_FILL` (`bg-*`) and
+  `TONE_EDGE` (`border-l-*`), generated by the shipped `theme.css`. Migration for an app with its own tone files:
+  delete its `Tone` type and class maps, import them from the package, keep only the app's meaning-to-tone table,
+  and drop any `@source` the app added for those class names.
+- `SidePanel` (#724): a non-modal panel at a side of a canvas (a map) that leaves the canvas usable, unlike the modal
+  `Sheet`. Layouts `over`, `beside`, `left`, `list`; hidden while closed, focus moves in when it opens, Escape and the
+  close button call `onClose`. An app that kept its own copy replaces it with the import (same props; `closeLabel` is
+  now optional, default "Close") and drops its own file.
+- `PageHeader` takes `crumbsLabel` (#719): the accessible name of the breadcrumb it renders for `crumbs`, so an app
+  in another language replaces the built-in English "breadcrumb". Without it the markup is unchanged.
+- `MarkPopover` (#725): a counted tag (`badgeVariants({ variant: "tag", color })` with an icon and a count) that opens
+  the design system's popover listing entries, on the browser's Popover API with no client state, phrasing
+  elements only (`data-slot="mark"`, `data-slot="mark-popover"`). An app with its own copy of this mark deletes it
+  and imports `MarkPopover` (and `MarkPopoverProps`) from `@softure-ai/theme-notion`: same props, same markup and
+  classes; its domain marks (warnings, tickets) keep passing their entries as `role="listitem"` spans.
+- `StatsFold`, `StatCards` and `StatPills` (#722): a screen's summary figures, folded under a heading (native
+  `<details>`, closed by default), as a wrapping row of cards (label, figure in its tone, optional hint and aside tag,
+  `isFullWidth` / `isOneRow` layouts) and as "label **value**" tags. `data-slot`, `data-stat`, `data-tone` and
+  `data-layout` mark the parts. An app that kept these as its own code drops them and imports them from the package.
+- `DetailTable` (#721): an item's details as a label and value table; rows without a value are left out, and nothing
+  renders when no row has one. On a phone the label sits above its value.
+- `FoldRow` (#721): an item as one folding list row (chevron, title, facts, tone badges) that opens in place to a
+  `DetailTable` plus optional children; a native `<details>`, closed by default, no client state. `data-slot` names:
+  `fold-row`, `fold-row-summary`, `fold-row-heading`, `fold-row-fact`, `fold-row-badges`, `fold-row-content`,
+  `detail-table`.
+
 ## 0.1.1
 
 - No change to the package itself: the first version published through the npm trusted publisher (OIDC) with

package/README.md

@@ -16,6 +16,8 @@ npm i @softure-ai/theme-notion tailwindcss @tailwindcss/postcss
 @import "tailwindcss";
 @import "@softure-ai/theme-notion/theme.css";       /* tokens, utilities, dark:, animations, the components' classes */
 @import "@softure-ai/theme-notion/sft-bridge.css";  /* optional: pages of the SOFTURE packages in a PageFrame */
+@import "@softure-ai/theme-kit/base.css";            /* body on the theme's background, text colour and font */
+@import "@softure-ai/theme-kit/maplibre.css";        /* only if the app shows MapLibre maps */
 ```
 
 `theme.css` names the package's components as Tailwind sources, so their classes are generated without the app
@@ -32,8 +34,16 @@ taking the scoped preflight instead of Tailwind's:
 @import "tailwindcss/utilities.css" layer(utilities);
 @import "@softure-ai/theme-notion/theme.css";
 @import "@softure-ai/theme-notion/sft-bridge.css";
+@import "@softure-ai/theme-kit/base.css";            /* nothing else styles body under the scoped preflight */
+@import "@softure-ai/theme-kit/maplibre.css";        /* only if the app shows MapLibre maps */
 ```
 
+`base.css` gives `body` the theme's background, text colour and sans font without the browser's 8 px margin, so a
+page without a shell root, the dark scheme and the Radix portals mounted on `body` (select lists, menus, sheets) all
+take the theme. `maplibre.css` puts the theme's sans font on MapLibre maps (markers, popups, the attribution), which
+`maplibre-gl.css` sets to Helvetica. Both read the theme with `--theme()`, so they go through the app's Tailwind
+after `theme.css`; the app's `globals.css` keeps only `@import` lines.
+
 ```tsx
 import { Button, Badge, Status, PageHeader, TooltipProvider, Toaster } from "@softure-ai/theme-notion";
 import { CircleCheck } from "lucide-react";
@@ -52,9 +62,9 @@ import { CircleCheck } from "lucide-react";
 `light` the other way. `Toaster` follows the system unless it gets `theme="light" | "dark"`.
 
 **Copy.** The components' built-in texts are accessible names in English (`notionMessages.en`). Pass the app's own
-wording by props: `Breadcrumb aria-label`, `BreadcrumbEllipsis label`, `DialogContent closeLabel`,
-`SheetContent closeLabel`, `Sidebar mobileTitle mobileDescription`, `SidebarTrigger label`, `SidebarRail label`,
-`Spinner aria-label`, `CommandDialog title description`.
+wording by props: `Breadcrumb aria-label`, `BreadcrumbEllipsis label`, `PageHeader crumbsLabel`,
+`DialogContent closeLabel`, `SheetContent closeLabel`, `SidePanel closeLabel`, `Sidebar mobileTitle mobileDescription`,
+`SidebarTrigger label`, `SidebarRail label`, `Spinner aria-label`, `CommandDialog title description`.
 
 ## Rules, in short
 
@@ -73,6 +83,18 @@ wording by props: `Breadcrumb aria-label`, `BreadcrumbEllipsis label`, `DialogCo
   (button, field, menu item), `lg` 8 (callout, card), `xl` 10 (menu, select, dialog), `full` (switch).
 - Icons: lucide at `ICON_STROKE_WIDTH` (1.75), 16 px in text; they inherit the text colour. No emoji in the interface.
 - Statuses always carry a word and an icon, so states read apart without telling green from red.
+- Figures, bar segments and box edges take a **tone** by what they mean: `default` (text colour), `success` (green,
+  done), `warning` (orange, to do), `danger` (red, owed or failing), `muted` (gray, out of play). `TONE_COLORS` gives
+  a tone's palette colour (`null` for `default`); `TONE_TEXT`, `TONE_FILL` and `TONE_EDGE` give literal class names
+  (`text-*`, `bg-*`, `border-l-*`) that the shipped `theme.css` already generates, so the app adds no `@source`. The
+  app keeps only its meaning-to-tone table:
+
+  ```tsx
+  import { TONE_TEXT, type Tone } from "@softure-ai/theme-notion";
+
+  const PAYMENT_TONE: Record<"paid" | "due" | "overdue", Tone> = { paid: "success", due: "warning", overdue: "danger" };
+  <span className={TONE_TEXT[PAYMENT_TONE.overdue]}>1 200</span>
+  ```
 
 ## Components
 
@@ -81,7 +103,61 @@ avatar, badge, breadcrumb, button, button-group, card, checkbox, collapsible, co
 field, input, input-group, item, kbd, label, popover, progress, scroll-area, select, separator, sheet, sidebar,
 skeleton, sonner (`Toaster`), spinner, switch, table, tabs, textarea, tooltip. Compositions: `Status` (badge, icon,
 word), `PageHeader` (breadcrumb, icon box, title, description, actions), `PropertyList` (fields of one record),
-`PageFrame` (a page outside the app shell, the target of `sft-bridge.css`).
+`DetailTable` (an item's details as a label and value table), `FoldRow` (a list row folding open to a `DetailTable`
+and more, a native `<details>`), `PageFrame` (a page outside the app shell, the target of `sft-bridge.css`),
+`SidePanel` (a non-modal panel at a side of a canvas, below), `TabBar` (a screen's tabs as links with an optional icon
+and count, the shown tab in the address; `Tabs` keeps it in client state), `MarkPopover` (a counted tag that opens a
+list of what it counts, below).
+
+**`SidePanel`.** A panel next to a canvas (a map) that leaves the canvas usable, so a switch inside shows its effect
+at once (`Sheet` is modal). It floats on `background` with `shadow-menu`, 24 rem wide, full width on a phone, with a
+heading and a ghost close button. Layouts: `over` (over the canvas's right side), `left` (over its left side),
+`beside` (after the canvas, which shrinks to at least 24 rem or half) and `list` (a 24 rem column before the canvas);
+`beside` and `list` cover the whole canvas on a phone. While closed it is `hidden`. Focus moves into it when it opens;
+Escape inside or the close button calls `onClose`, and the caller moves focus back to its opener.
+
+```tsx
+<div className="relative flex h-full">
+  <button type="button" aria-controls="layers" aria-expanded={isOpen} onClick={() => setOpen(true)}>Layers</button>
+  <Map className="flex-1" />
+  <SidePanel id="layers" heading="Layers" layout="over" isOpen={isOpen} onClose={() => setOpen(false)}>
+    {/* switches */}
+  </SidePanel>
+</div>
+```
+
+A screen's summary figures: `StatsFold` (figures folded under a heading, closed by default, on native `<details>`),
+`StatCards` (a wrapping row of figure cards: label, figure in its tone, optional `hint`, optional `aside` tag;
+`isFullWidth` and `isOneRow` change the grid) and `StatPills` ("label **value**" tags in one row). Each figure takes a
+`tone`; the app keeps only its own table of which meaning takes which tone.
+
+```tsx
+<StatsFold title="Summary">
+  <StatCards
+    label="Totals"
+    cards={[
+      { key: "paid", label: "Paid", value: "1,200", tone: "success" },
+      { key: "owed", label: "Owed", value: "300", tone: "danger", hint: "2 invoices", aside: { text: "+5%" } },
+    ]}
+  />
+  <StatPills label="Counts" pills={[{ key: "late", label: "Late", value: "1", tone: "danger" }]} />
+</StatsFold>
+```
+
+**`MarkPopover`.** A tag in a palette colour with an icon and a count; a click or Enter opens the design system's
+popover listing the entries, Escape or a click outside closes it. It runs on the browser's Popover API (no client
+state, no portal): the panel sits in the top layer, so a card's `overflow` never clips it, centred on a phone and
+under its mark where CSS anchor positioning is supported. Only phrasing elements, so it fits inside a `<summary>` or
+a paragraph; a click on the panel's text does not toggle an enclosing `<details>`, links and buttons inside still
+work. The colour means the worst of what it lists; the copy is props.
+
+```tsx
+<MarkPopover color="red" icon={TriangleAlert} count={2} label="2 open warnings, show the list"
+  heading="Open warnings" closeLabel="Close" buttonData={{ "data-kind": "warnings" }}>
+  <span role="listitem">Payment overdue</span>
+  <span role="listitem"><a href="/tickets">Tickets to buy</a></span>
+</MarkPopover>
+```
 
 Deltas from stock shadcn:
 

package/dist/index.d.ts

@@ -39,9 +39,16 @@ export * from "./ui/tabs.js";
 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";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1E,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,KAAK,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1E,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,KAAK,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC7F,OAAO,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,KAAK,cAAc,EACnB,KAAK,cAAc,GACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -41,9 +41,16 @@ export * from "./ui/tabs.js";
 export * from "./ui/textarea.js";
 export * from "./ui/tooltip.js";
 export { ICON_STROKE_WIDTH } from "./notion/icon-stroke.js";
+export { DetailTable } from "./notion/DetailTable.js";
+export { FoldRow } from "./notion/FoldRow.js";
 export { PALETTE_COLORS } from "./notion/palette.js";
+export { MarkPopover } from "./notion/MarkPopover.js";
 export { PageFrame } from "./notion/PageFrame.js";
 export { PageHeader } from "./notion/PageHeader.js";
 export { PropertyList } from "./notion/PropertyList.js";
+export { SidePanel } from "./notion/SidePanel.js";
+export { StatCards, StatPills, StatsFold, } from "./notion/Stats.js";
 export { Status } from "./notion/Status.js";
+export { TabBar } from "./notion/TabBar.js";
+export { TONES, TONE_COLORS, TONE_EDGE, TONE_FILL, TONE_TEXT } from "./notion/tones.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,oGAAoG;AACpG,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAuB,MAAM,qBAAqB,CAAC;AAE1E,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAqB,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAuB,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAwC,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAyC,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAoB,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,oGAAoG;AACpG,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAuB,MAAM,qBAAqB,CAAC;AAE1E,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAyC,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAwC,MAAM,qBAAqB,CAAC;AACpF,OAAO,EAAE,cAAc,EAAqB,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAyB,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAuB,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAwC,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAyC,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,SAAS,EAA6C,MAAM,uBAAuB,CAAC;AAC7F,OAAO,EACL,SAAS,EACT,SAAS,EACT,SAAS,GAOV,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAoB,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAqC,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAa,MAAM,mBAAmB,CAAC"}

package/dist/messages/en.d.ts

@@ -13,6 +13,9 @@ export declare const en: {
     readonly sheet: {
         readonly close: "Close";
     };
+    readonly sidePanel: {
+        readonly close: "Close";
+    };
     readonly sidebar: {
         readonly mobileTitle: "Sidebar";
         readonly mobileDescription: "Displays the mobile sidebar.";

package/dist/messages/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/messages/en.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAOL,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/messages/en.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;CAQL,CAAC"}

package/dist/messages/en.js

@@ -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/dist/messages/en.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.js","sourceRoot":"","sources":["../../src/messages/en.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG;IAChB,UAAU,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE;IACjD,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IACzB,OAAO,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,iBAAiB,EAAE,8BAA8B,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAChH,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7B,OAAO,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,gCAAgC,EAAE;CAC5E,CAAC"}
+{"version":3,"file":"en.js","sourceRoot":"","sources":["../../src/messages/en.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG;IAChB,UAAU,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE;IACjD,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IACzB,SAAS,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IAC7B,OAAO,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,iBAAiB,EAAE,8BAA8B,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAChH,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7B,OAAO,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,gCAAgC,EAAE;CAC5E,CAAC"}

package/dist/messages/index.d.ts

@@ -12,6 +12,9 @@ export declare const notionMessages: {
         readonly sheet: {
             readonly close: "Close";
         };
+        readonly sidePanel: {
+            readonly close: "Close";
+        };
         readonly sidebar: {
             readonly mobileTitle: "Sidebar";
             readonly mobileDescription: "Displays the mobile sidebar.";

package/dist/messages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/messages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,qGAAqG;AACrG,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;CAAS,CAAC;AAErC,MAAM,MAAM,cAAc,GAAG,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/messages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,qGAAqG;AACrG,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAS,CAAC;AAErC,MAAM,MAAM,cAAc,GAAG,OAAO,EAAE,CAAC"}

package/dist/notion/DetailTable.d.ts

@@ -0,0 +1,15 @@
+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[];
+}
+export declare function DetailTable({ label, rows }: DetailTableProps): import("react").JSX.Element | null;
+//# sourceMappingURL=DetailTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailTable.d.ts","sourceRoot":"","sources":["../../src/notion/DetailTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,iEAAiE;IACjE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,uEAAuE;IACvE,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,CAAC;CACrC;AAgBD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,gBAAgB,sCAe5D"}

package/dist/notion/DetailTable.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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) {
+    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 }) {
+    const shown = rows.filter(hasValue);
+    if (shown.length === 0)
+        return null;
+    return (_jsx("table", { "data-slot": "detail-table", className: DETAIL_TABLE_CLASS, "aria-label": label, children: _jsx("tbody", { children: shown.map((row) => (_jsxs("tr", { "data-detail": row.key, children: [_jsx("th", { scope: "row", children: row.label }), _jsx("td", { children: row.value })] }, row.key))) }) }));
+}
+//# sourceMappingURL=DetailTable.js.map

package/dist/notion/DetailTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailTable.js","sourceRoot":"","sources":["../../src/notion/DetailTable.tsx"],"names":[],"mappings":";AAgBA,kHAAkH;AAClH,MAAM,kBAAkB,GAAG;IACzB,gCAAgC;IAChC,sCAAsC;IACtC,yHAAyH;IACzH,qDAAqD;IACrD,6IAA6I;CAC9I,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,SAAS,QAAQ,CAAC,GAAc;IAC9B,OAAO,GAAG,CAAC,KAAK,KAAK,IAAI,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC;AAC3E,CAAC;AAED,mHAAmH;AACnH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAoB;IAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACpC,OAAO,CACL,6BAAiB,cAAc,EAAC,SAAS,EAAE,kBAAkB,gBAAc,KAAK,YAC9E,0BACG,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClB,6BAA+B,GAAG,CAAC,GAAG,aACpC,aAAI,KAAK,EAAC,KAAK,YAAE,GAAG,CAAC,KAAK,GAAM,EAChC,uBAAK,GAAG,CAAC,KAAK,GAAM,KAFb,GAAG,CAAC,GAAG,CAGX,CACN,CAAC,GACI,GACF,CACT,CAAC;AACJ,CAAC"}

package/dist/notion/FoldRow.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { type DetailRow } from "./DetailTable.js";
+import { 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;
+}
+export declare function FoldRow({ title, facts, badges, detailsLabel, details, children }: FoldRowProps): import("react").JSX.Element;
+//# sourceMappingURL=FoldRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FoldRow.d.ts","sourceRoot":"","sources":["../../src/notion/FoldRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,YAAY;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,wDAAwD;IACxD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IACtC,2CAA2C;IAC3C,QAAQ,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;IACzC,2CAA2C;IAC3C,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IACvC,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAGD,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAU,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,YAAY,+BA+CnG"}

package/dist/notion/FoldRow.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Badge } from "../ui/badge.js";
+import { DetailTable } from "./DetailTable.js";
+import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
+import { TONE_COLORS } from "./tones.js";
+// 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 }) {
+    return (_jsxs("details", { "data-slot": "fold-row", className: "group/fold-row border-b border-border", children: [_jsxs("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", children: [_jsxs("span", { "data-slot": "fold-row-heading", className: "flex min-w-0 items-center gap-2", children: [_jsx(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" }), _jsx("span", { className: "min-w-0 text-ui-medium", children: title })] }), facts.map((fact, index) => (_jsx("span", { "data-slot": "fold-row-fact", className: "text-ui text-muted-foreground", children: fact }, index))), badges.length === 0 ? null : (_jsx("span", { "data-slot": "fold-row-badges", className: "ml-auto inline-flex flex-wrap gap-1", children: badges.map((badge) => {
+                            const tone = badge.tone ?? "default";
+                            return (_jsx(Badge, { variant: "tag", color: TONE_COLORS[tone] ?? "default", "data-badge": badge.key, "data-tone": tone, children: badge.text }, badge.key));
+                        }) }))] }), _jsxs("div", { "data-slot": "fold-row-content", className: "flex flex-col gap-2 py-2 pr-1 pl-6 empty:hidden", children: [_jsx(DetailTable, { label: detailsLabel, rows: details }), children] })] }));
+}
+//# sourceMappingURL=FoldRow.js.map

package/dist/notion/FoldRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoldRow.js","sourceRoot":"","sources":["../../src/notion/FoldRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAkB,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAa,MAAM,YAAY,CAAC;AAsBpD,kHAAkH;AAClH,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAgB;IAClG,OAAO,CACL,gCAAmB,UAAU,EAAC,SAAS,EAAC,uCAAuC,aAC7E,gCACY,kBAAkB,EAC5B,SAAS,EAAC,oSAAoS,aAG9S,6BAAgB,kBAAkB,EAAC,SAAS,EAAC,iCAAiC,aAC5E,KAAC,YAAY,mBACC,MAAM,EAClB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAC,uGAAuG,GACjH,EACF,eAAM,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAQ,IAClD,EACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAE1B,4BAA4B,eAAe,EAAC,SAAS,EAAC,+BAA+B,YAClF,IAAI,IADI,KAAK,CAET,CACR,CAAC,EACD,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5B,4BAAgB,iBAAiB,EAAC,SAAS,EAAC,qCAAqC,YAC9E,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;4BACpB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,SAAS,CAAC;4BACrC,OAAO,CACL,KAAC,KAAK,IAEJ,OAAO,EAAC,KAAK,EACb,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,SAAS,gBACzB,KAAK,CAAC,GAAG,eACV,IAAI,YAEd,KAAK,CAAC,IAAI,IANN,KAAK,CAAC,GAAG,CAOR,CACT,CAAC;wBACJ,CAAC,CAAC,GACG,CACR,IACO,EACV,4BAAe,kBAAkB,EAAC,SAAS,EAAC,iDAAiD,aAC3F,KAAC,WAAW,IAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAI,EAClD,QAAQ,IACL,IACE,CACX,CAAC;AACJ,CAAC"}

package/dist/notion/MarkPopover.d.ts

@@ -0,0 +1,19 @@
+import type { LucideIcon } from "lucide-react";
+import { type ReactNode } from "react";
+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;
+}
+export declare function MarkPopover({ color, icon: Icon, count, label, heading, closeLabel, buttonData, children }: MarkPopoverProps): import("react").JSX.Element;
+//# sourceMappingURL=MarkPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkPopover.d.ts","sourceRoot":"","sources":["../../src/notion/MarkPopover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,2EAA2E;IAC3E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IAC7E,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAMD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,gBAAgB,+BA8C3H"}

package/dist/notion/MarkPopover.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } 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";
+// 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 }) {
+    const panelId = useId();
+    return (_jsxs("span", { "data-slot": "mark", className: "inline-flex [anchor-scope:--mark]", children: [_jsxs("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, children: [_jsx(Icon, { "aria-hidden": "true", strokeWidth: ICON_STROKE_WIDTH }), _jsx("span", { "aria-hidden": "true", children: count })] }), _jsxs("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, children: [_jsxs("span", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsx("span", { id: `${panelId}-heading`, className: "text-ui-medium", children: heading }), _jsx("button", { type: "button", className: buttonVariants({ variant: "ghost", size: "xs" }), popoverTarget: panelId, popoverTargetAction: "hide", children: closeLabel })] }), _jsx("span", { role: "list", className: "flex flex-col gap-2", children: children })] })] }));
+}
+// 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) {
+    if (event.target instanceof Element && event.target.closest("a, button") === null)
+        event.preventDefault();
+}
+//# sourceMappingURL=MarkPopover.js.map

package/dist/notion/MarkPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkPopover.js","sourceRoot":"","sources":["../../src/notion/MarkPopover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,KAAK,EAAmC,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAkBrD,qHAAqH;AACrH,mHAAmH;AACnH,qHAAqH;AACrH,gFAAgF;AAChF,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAoB;IAC1H,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,OAAO,CACL,6BAAgB,MAAM,EAAC,SAAS,EAAC,mCAAmC,aAClE,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACX,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EACxC,4IAA4I,CAC7I,KACG,UAAU,EACd,aAAa,EAAE,OAAO,mBACR,QAAQ,gBACV,KAAK,aAEjB,KAAC,IAAI,mBAAa,MAAM,EAAC,WAAW,EAAE,iBAAiB,GAAI,EAC3D,8BAAkB,MAAM,YAAE,KAAK,GAAQ,IAChC,EACT,gBACE,EAAE,EAAE,OAAO,EACX,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,QAAQ,qBACI,GAAG,OAAO,UAAU,eAC3B,cAAc,EACxB,SAAS,EAAC,mnBAAmnB,EAC7nB,OAAO,EAAE,0BAA0B,aAEnC,gBAAM,SAAS,EAAC,8CAA8C,aAC5D,eAAM,EAAE,EAAE,GAAG,OAAO,UAAU,EAAE,SAAS,EAAC,gBAAgB,YACvD,OAAO,GACH,EACP,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAC3D,aAAa,EAAE,OAAO,EACtB,mBAAmB,EAAC,MAAM,YAEzB,UAAU,GACJ,IACJ,EACP,eAAM,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,qBAAqB,YAC9C,QAAQ,GACJ,IACF,IACF,CACR,CAAC;AACJ,CAAC;AAED,8GAA8G;AAC9G,qCAAqC;AACrC,SAAS,0BAA0B,CAAC,KAA8B;IAChE,IAAI,KAAK,CAAC,MAAM,YAAY,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI;QAAE,KAAK,CAAC,cAAc,EAAE,CAAC;AAC5G,CAAC"}

package/dist/notion/PageHeader.d.ts

@@ -6,11 +6,12 @@ export interface PageCrumb {
 export interface PageHeaderProps {
     title: ReactNode;
     crumbs?: PageCrumb[];
+    crumbsLabel?: string;
     icon?: ReactNode;
     description?: ReactNode;
     actions?: ReactNode;
     children?: ReactNode;
     className?: string;
 }
-export declare function PageHeader({ title, crumbs, icon, description, actions, children, className }: PageHeaderProps): import("react").JSX.Element;
+export declare function PageHeader({ title, crumbs, crumbsLabel, icon, description, actions, children, className }: PageHeaderProps): import("react").JSX.Element;
 //# sourceMappingURL=PageHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/notion/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYjD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IAErB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,+BA8B7G"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/notion/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYjD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IAErB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,+BA8B1H"}

package/dist/notion/PageHeader.js

@@ -3,7 +3,7 @@ import { Fragment } from "react";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "../ui/breadcrumb.js";
 import { cn } from "../lib/utils.js";
 // 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 }) {
-    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex flex-col", className), children: [crumbs && crumbs.length > 0 ? (_jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { children: crumbs.map((crumb, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(BreadcrumbSeparator, {}) : null, _jsx(BreadcrumbItem, { children: crumb.href === undefined ? (_jsx(BreadcrumbPage, { children: crumb.label })) : (_jsx(BreadcrumbLink, { href: crumb.href, children: crumb.label })) })] }, `${index}-${crumb.label}`))) }) })) : null, icon ? (_jsx("div", { className: "mt-6 mb-2 flex size-14 items-center justify-center rounded-xl bg-secondary [&>svg]:size-8", children: icon })) : null, _jsx("h1", { className: "text-page-title text-balance", children: title }), children, description ? _jsx("p", { className: "mt-1 text-body text-muted-foreground", children: description }) : null, actions ? _jsx("div", { className: "mt-3 flex flex-wrap gap-1", children: actions }) : null] }));
+export function PageHeader({ title, crumbs, crumbsLabel, icon, description, actions, children, className }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex flex-col", className), children: [crumbs && crumbs.length > 0 ? (_jsx(Breadcrumb, { ...(crumbsLabel === undefined ? {} : { "aria-label": crumbsLabel }), children: _jsx(BreadcrumbList, { children: crumbs.map((crumb, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(BreadcrumbSeparator, {}) : null, _jsx(BreadcrumbItem, { children: crumb.href === undefined ? (_jsx(BreadcrumbPage, { children: crumb.label })) : (_jsx(BreadcrumbLink, { href: crumb.href, children: crumb.label })) })] }, `${index}-${crumb.label}`))) }) })) : null, icon ? (_jsx("div", { className: "mt-6 mb-2 flex size-14 items-center justify-center rounded-xl bg-secondary [&>svg]:size-8", children: icon })) : null, _jsx("h1", { className: "text-page-title text-balance", children: title }), children, description ? _jsx("p", { className: "mt-1 text-body text-muted-foreground", children: description }) : null, actions ? _jsx("div", { className: "mt-3 flex flex-wrap gap-1", children: actions }) : null] }));
 }
 //# sourceMappingURL=PageHeader.js.map

package/dist/notion/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/notion/PageHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAEjD,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAoBrC,0HAA0H;AAC1H,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAmB;IAC5G,OAAO,CACL,+BAAkB,aAAa,EAAC,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,aACtE,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7B,KAAC,UAAU,cACT,KAAC,cAAc,cACZ,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,MAAC,QAAQ,eACN,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC3C,KAAC,cAAc,cACZ,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,KAAC,cAAc,cAAE,KAAK,CAAC,KAAK,GAAkB,CAC/C,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,KAAK,GAAkB,CACjE,GACc,KARJ,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAS7B,CACZ,CAAC,GACa,GACN,CACd,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAC,2FAA2F,YAAE,IAAI,GAAO,CACxH,CAAC,CAAC,CAAC,IAAI,EACR,aAAI,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAM,EACxD,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,sCAAsC,YAAE,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,EAC1F,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,2BAA2B,YAAE,OAAO,GAAO,CAAC,CAAC,CAAC,IAAI,IACrE,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/notion/PageHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAEjD,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAsBrC,0HAA0H;AAC1H,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAmB;IACzH,OAAO,CACL,+BAAkB,aAAa,EAAC,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,aACtE,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7B,KAAC,UAAU,OAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC,YAC9E,KAAC,cAAc,cACZ,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,MAAC,QAAQ,eACN,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC3C,KAAC,cAAc,cACZ,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,KAAC,cAAc,cAAE,KAAK,CAAC,KAAK,GAAkB,CAC/C,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,KAAK,GAAkB,CACjE,GACc,KARJ,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAS7B,CACZ,CAAC,GACa,GACN,CACd,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAC,2FAA2F,YAAE,IAAI,GAAO,CACxH,CAAC,CAAC,CAAC,IAAI,EACR,aAAI,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAM,EACxD,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,sCAAsC,YAAE,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,EAC1F,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,2BAA2B,YAAE,OAAO,GAAO,CAAC,CAAC,CAAC,IAAI,IACrE,CACV,CAAC;AACJ,CAAC"}

package/dist/notion/SidePanel.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export type SidePanelLayout = "over" | "beside" | "left" | "list";
+export interface SidePanelProps {
+    readonly id: string;
+    readonly heading: string;
+    readonly layout: SidePanelLayout;
+    readonly isOpen: boolean;
+    readonly onClose: () => void;
+    readonly closeLabel?: string;
+    readonly children: ReactNode;
+}
+export declare function SidePanel({ id, heading, layout, isOpen, onClose, closeLabel, children }: SidePanelProps): import("react").JSX.Element;
+//# sourceMappingURL=SidePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../src/notion/SidePanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,cAAc;IAE7B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IAEzB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAE7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAID,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,UAAqC,EAAE,QAAQ,EAAE,EAAE,cAAc,+BA2ClI"}

package/dist/notion/SidePanel.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { en as messages } from "../messages/en.js";
+import { Button } from "../ui/button.js";
+import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
+// 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 }) {
+    const panelRef = useRef(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) {
+        if (event.key !== "Escape")
+            return;
+        event.stopPropagation();
+        onClose();
+    }
+    return (_jsxs("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, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border py-2 pr-2 pl-4", children: [_jsx("h2", { id: headingId, className: "text-heading-3", children: heading }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { "aria-hidden": "true", strokeWidth: ICON_STROKE_WIDTH }) })] }), _jsx("div", { "data-slot": "side-panel-content", className: "grid flex-1 content-start gap-3 overflow-y-auto p-3", children: children })] }));
+}
+//# sourceMappingURL=SidePanel.js.map

package/dist/notion/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sourceRoot":"","sources":["../../src/notion/SidePanel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAsC,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,EAAE,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAmBrD,qHAAqH;AACrH,kGAAkG;AAClG,MAAM,UAAU,SAAS,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,GAAG,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAkB;IACjI,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,SAAS,GAAG,GAAG,EAAE,UAAU,CAAC;IAElC,4EAA4E;IAC5E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC7D,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC;IAC9B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,aAAa,CAAC,KAAiC;QACtD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ;YAAE,OAAO;QACnC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,CACL,iBACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CAAC,CAAC,eACF,YAAY,EACtB,SAAS,EAAC,q3BAAq3B,iBACl3B,MAAM,EACnB,MAAM,EAAE,CAAC,MAAM,qBACE,SAAS,iBACb,EAAE,EACf,SAAS,EAAE,aAAa,aAExB,eAAK,SAAS,EAAC,+EAA+E,aAC5F,aAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAC,gBAAgB,YAC1C,OAAO,GACL,EACL,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,gBAAa,UAAU,EAAE,OAAO,EAAE,OAAO,YACxF,KAAC,CAAC,mBAAa,MAAM,EAAC,WAAW,EAAE,iBAAiB,GAAI,GACjD,IACL,EACN,2BAAe,oBAAoB,EAAC,SAAS,EAAC,qDAAqD,YAChG,QAAQ,GACL,IACA,CACT,CAAC;AACJ,CAAC"}

package/dist/notion/Stats.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import { type Tone } from "./tones.js";
+export interface StatsFoldProps {
+    /** The section's heading. */
+    readonly title: string;
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+export declare function StatsFold({ title, children, className }: StatsFoldProps): import("react").JSX.Element;
+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;
+}
+export declare function StatCards({ label, cards, isFullWidth, isOneRow }: StatCardsProps): import("react").JSX.Element;
+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[];
+}
+export declare function StatPills({ label, pills }: StatPillsProps): import("react").JSX.Element;
+//# sourceMappingURL=Stats.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../src/notion/Stats.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,EAA0B,KAAK,IAAI,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,+BAmBvE;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,QAAQ;IACvB,kDAAkD;IAClD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IACpC,8FAA8F;IAC9F,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AASD,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAmB,EAAE,QAAgB,EAAE,EAAE,cAAc,+BA6ChG;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;CACrC;AAGD,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,+BAYzD"}