@acornly/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Free Solo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,284 @@
-# Temporary Holding Version
+# @acornly/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The UI layer of Acornly: Lit web components rendered inside one closed Shadow DOM. Most apps get it through `@acornly/sdk`; this package is the shell those surfaces render into.
+
+## The shell
+
+```ts
+import { mountRoot } from "@acornly/ui";
+
+const root = mountRoot({
+  theme: { accent: "#5b5bd6", radius: "6px" },
+  colorScheme: "auto", // or "light" / "dark"
+  zIndex: 1000,
+  shortcuts: { "note.create": "alt+n", "panel.toggle": false },
+});
+
+root.destroy(); // removes the element, its listeners and everything inside it
+```
+
+`mountRoot` appends one `<acornly-root>` element to `document.documentElement`. Everything Acornly draws lives in its closed shadow root:
+
+- Page CSS cannot reach the UI. The host carries inline `all: initial !important`, so page rules can neither hide or move it nor pass inherited fonts and colors into it.
+- The UI adds no global styles and no `window` globals. (Lit itself records its version on `globalThis` for duplicate detection.)
+- Text normalization in `@acornly/core` skips `<acornly-root>` (landing with [#19](https://github.com/free-solo/contexthive/issues/19)), so notes never anchor to Acornly's own text.
+- Keys typed into an Acornly field stop at the shadow root, so the page's bubbling key listeners (most page shortcuts) never see them.
+- Surfaces size text in `px` or `em`, never `rem`: `rem` follows the page's root font size, which the shell cannot isolate.
+
+## Theming
+
+Set any of these custom properties on `acornly-root` in your CSS, or pass them as `theme` (the option names are in parentheses). Unset tokens use built-in light or dark defaults.
+
+| Property                | Option           | What it styles                      |
+| ----------------------- | ---------------- | ----------------------------------- |
+| `--ctx-accent`          | `accent`         | Buttons, pins, focus rings          |
+| `--ctx-accent-contrast` | `accentContrast` | Text on the accent color            |
+| `--ctx-background`      | `background`     | Cards, toolbars, the panel          |
+| `--ctx-foreground`      | `foreground`     | Main text                           |
+| `--ctx-muted`           | `muted`          | Timestamps, hints, placeholders     |
+| `--ctx-border`          | `border`         | Borders and dividers                |
+| `--ctx-highlight`       | `highlight`      | Fill behind highlighted text        |
+| `--ctx-font`            | `font`           | Font stack                          |
+| `--ctx-font-size`       | `fontSize`       | Base font size                      |
+| `--ctx-radius`          | `radius`         | Corner radius                       |
+| `--ctx-shadow`          | `shadow`         | Shadow of floating surfaces         |
+| `--ctx-z-index`         | `zIndex`         | Stacking layer relative to the page |
+
+```css
+acornly-root {
+  --ctx-accent: #5b5bd6;
+}
+@media (prefers-color-scheme: dark) {
+  acornly-root {
+    --ctx-accent: #a5a5f0;
+  }
+}
+```
+
+`colorScheme: "auto"` (the default) follows `prefers-color-scheme`; the `color-scheme` attribute on the element shows the current setting.
+
+### Parts
+
+For styling beyond the tokens, these `::part()` names are stable:
+
+| Part                | Element                                     |
+| ------------------- | ------------------------------------------- |
+| `layer`             | The full-page layer every surface sits in.  |
+| `pins`              | The box holding every margin pin.           |
+| `pin`               | One margin pin button.                      |
+| `card`              | A note card.                                |
+| `panel`             | The side panel.                             |
+| `selection-toolbar` | The toolbar next to a text selection.       |
+| `composer`          | The note composer.                          |
+| `launcher`          | The SDK's notes button, fixed bottom right. |
+
+```css
+acornly-root::part(layer) {
+  font-variant-numeric: tabular-nums;
+}
+```
+
+Later surfaces add their parts to this table and to `PARTS`.
+
+### Host CSS
+
+For anything else, pass `css` (or call `root.setStyles(css)` later): your own rules, applied inside the shadow root after every built-in style, including those of surfaces that load later, so a rule as specific as the built-in one wins. Select by `[part~="..."]` where you can; the `.ctx-*` classes may change between minor versions. `@import` is not supported.
+
+## Keyboard shortcuts
+
+Every action has a shortcut the host can remap or turn off through `shortcuts`: a map from command id to a combo, `false` to disable one command, or `shortcuts: false` to disable all of them. A combo is modifiers plus one key joined by `+`, such as `mod+shift+c`; `mod` is ⌘ on Apple platforms and Ctrl elsewhere. Name Space and Escape as `space` and `escape`. Shortcuts do not fire while focus is in a text field, or again while a key is held, unless the command opts in.
+
+## Building blocks
+
+Exported for the surfaces built on the shell, and usable by apps rendering their own UI:
+
+- `await layerOf(root)` is the layer inside the shell that pins, cards, the panel and the painter's outlines go in.
+- `trapFocus(container, options)` keeps Tab inside a card or dialog and restores focus on release; traps stack.
+- `createShortcutRegistry(options)` is the registry behind `root.shortcuts`.
+- `lazyPart(() => import("./composer.js"))` loads a heavy surface as a separate chunk on first use.
+
+## Highlights
+
+`createHighlightPainter` draws notes on the page without fighting the host's rendering. Its inputs are plain `Range`s and elements, so it works with any anchoring.
+
+```ts
+import { createHighlightPainter } from "@acornly/ui";
+
+const painter = createHighlightPainter({
+  layer, // the shell's layer: element outlines go here
+  onActivate: (id) => openCard(id), // a click or tap on a highlight
+  onHover: (id) => showPreview(id), // null when the pointer leaves
+});
+
+painter.paint("note-1", range); // a Range or an array of Ranges
+painter.paint("note-2", range2, { approximate: true }); // re-anchored by fuzzy matching
+painter.paint("note-3", imageElement); // an outline over an element
+painter.paintAll(anchored); // [{ id, target, approximate }], e.g. after one anchoring pass
+painter.focus("note-1");
+painter.clear("note-2");
+painter.destroy(); // removes every highlight, listener and style
+```
+
+- Where the [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) exists, text is painted through `CSS.highlights` and the page's DOM is never changed, so React or Vue re-renders never fight with it. `painter.mode` is `"highlights"`.
+- Elsewhere, the covered text nodes are wrapped in `<ctx-mark>` elements, which `clear` and `destroy` remove, merging split text back into the page's original text nodes. `painter.mode` is `"marks"`. Wrapping and unwrapping move text nodes. The painter puts the ranges of its notes (the ones you passed, and its own copies) back on the same text after every change, but any other live `Range` over painted text may shift, so paint ranges built in one pass with `paintAll`, which reads them all before changing the page. SVG and MathML text is left unpainted in this mode.
+- Element anchors get an outline drawn by an absolutely positioned box in the shell's layer; the element's own style is never edited.
+- Highlights receive no events, so clicks and hovers are found by hit-testing the pointer against each note's cached client rects, re-measured after scroll (the window or any scroller), resize and layout changes (`ResizeObserver`). `painter.idsAt(x, y)` exposes the same test, innermost note first. Call `painter.refresh()` after a change those signals miss.
+
+Each note is in one state at a time, each with its own highlight name: `ctx-note` (exact anchor), `ctx-note-approximate` (dashed underline), `ctx-note-hover` and `ctx-note-focus`. Restyle them with `::highlight()` rules in your own CSS; the painter's defaults sit in a cascade layer, so your rules win. Highlights are painted in the page's own tree, so the fill reads `--ctx-highlight` and `--ctx-highlight-active` from the page (for example on `:root`), not from `<acornly-root>`; the `colors` option and `painter.setColors()` set them explicitly instead. Highlight names are shared by the whole page, so with several painters on one page the last one created sets the colors. In `marks` mode, two painters marking the same text restore it with the same text but possibly in more text nodes than before.
+
+A painter keeps its own copy of each `Range`, so later changes to a passed `Range` do not move the highlight; call `paint` again to move it.
+
+## Pins
+
+`createPins` puts one focusable button in the margin beside each note. Pins are the only reading surface on the page-load path; the card and the panel below are separate entry points that load when first opened.
+
+```ts
+import { createPins, layerOf } from "@acornly/ui";
+
+const layer = await layerOf(root); // the shell's layer, once it has rendered
+const pins = createPins({
+  layer,
+  onActivate: (id, pin) => openNote(id, pin), // click, Enter or Space
+  onHover: (id) => painter.focus(id), // pointer or focus on a pin; null when it leaves
+  gutter: document.querySelector("article"), // optional: put pins in the page margin, past this element
+  side: "right", // or "left"
+});
+
+pins.setAll([
+  { id: "note-1", target: range }, // a Range, an element, or anything with getClientRects()
+  { id: "note-2", target: { getClientRects: () => painter.rectsOf("note-2") }, approximate: true },
+  { id: "note-3", target: image, quote: "Revenue chart", count: 3 },
+]);
+pins.setExpanded("note-1"); // aria-expanded on the pin whose card is open
+pins.destroy();
+```
+
+- A pin sits beside the first line of its anchor, past the right (or left) edge of the anchor's nearest block-level ancestor: by default that is the paragraph, table cell or list item the anchor is in, so pins in a table sit inside it, beside their cells. Pass `gutter` (the article, say) to line every pin up past that element's edge instead, in the page margin. Pins are kept within the viewport's width, and a pin on text in a fixed box, or in a sticky box while it is stuck to the viewport, is fixed too, so it stays beside its text while the window scrolls. A sticky box's pin can still trail by a frame the moment the box sticks or unsticks. A pin is re-measured after resize and layout changes (`ResizeObserver`) and after scrolls that can move it: a scroller's own content, or, on a window scroll, anchors in fixed or sticky boxes and rect sources (every pin when the scroll is horizontal). Call `refresh()` after a change those miss: an ancestor made fixed or sticky, an anchor moved into another scroller, or content that moves without anything observed changing size (a block growing above the text inside a fixed-height scroller, say). Pins that would overlap stack instead, and a pin whose anchor is not rendered, or is scrolled out of a scroller, is hidden. Scroll events inside shadow roots do not reach the document, so pins on text in a shadow-DOM scroller need `refresh()` from the host.
+- Each pin is a `<button>` whose accessible name quotes the anchored text: `Note on “quick brown fox”`, `3 notes on “…”`, with `(approximate)` for fuzzy anchors. Pass `label` to word it differently.
+- Pins are kept in reading order (by the anchor's line, then left to right) in the DOM. They form one Tab stop, a `group` named `groupLabel` (default `Notes`): Tab reaches the last pin focused, or the first, and the arrow keys, Home and End move between pins.
+- With the `<ctx-mark>` fallback of the painter, pass the painter's rects (`{ getClientRects: () => painter.rectsOf(id) }`) instead of a `Range`, since wrapping text can move other live ranges.
+
+## Media markers
+
+`@acornly/ui/media` draws notes on a moment or span of a `video` or `audio` element as markers on a thin strip under the player, along its timeline. It is its own entry point: load it with the first such note, so pages without one never fetch it.
+
+```ts
+const { createMediaStrips } = await import("@acornly/ui/media");
+const strips = createMediaStrips({ layer, onActivate: (id, marker) => openNote(id, marker) });
+strips.set({ id: "note-4", element: video, time: { start: 74, end: 91.5 } }); // a span
+strips.set({ id: "note-5", element: video, time: { start: 12 } }); // a moment
+strips.destroy();
+```
+
+- A strip is as wide as its player and sits just below it while the player is shown and its duration is known; markers on a stream whose length is not known yet appear once it is (`loadedmetadata`, `durationchange`). A note past the end is not drawn.
+- A click, Enter or Space on a marker seeks the player to the note's start (`currentTime`), then calls `onActivate`. Each marker is a `<button>` named `Note at 1:05` or `Note from 1:05 to 1:40` (pass `label` to word it differently); the arrow keys, Home and End move between a strip's markers in time order.
+- `resolve` in `@acornly/core` reports a match's `time` for such notes, and the SDK's built-in UI and the extension draw them this way.
+
+## Note cards
+
+```ts
+const { openCard } = await import("@acornly/ui/card");
+
+const card = openCard({
+  layer,
+  anchor: pins.pinOf(id)!, // or a virtual element: { getBoundingClientRect: () => rect }
+  thread, // assembleThread(await store.listThread(...), id)
+  approximate: true, // shows the "approximate" mark
+  viewerId, // marks the viewer's own reactions, and shows their notes as "Me"
+  viewerPicture, // optional: the viewer's photo (https), next to their own notes
+  registry: ctx.bodyTypes, // app-defined body types
+  actions: {
+    // Reply, Edit and Delete buttons on each note; the card only reports the choice.
+    reply: (note, button) => openReplyComposer(note, pin),
+    edit: (note) => openEditComposer(note, pin),
+    remove: (note) => ctx.remove(note.id),
+    canChange: (note) => note.creator?.id === viewerId, // Edit and Delete on these only
+    report: (note) => ctx.reportUrl(note), // a Report link, opened in a new tab; null for none
+  },
+  onClose: () => pins.setExpanded(null),
+});
+card.update(newerThread); // after a reply arrives
+card.close();
+```
+
+The card is placed with [Floating UI](https://floating-ui.com): below its anchor, flipped above when there is no room, kept inside the viewport and following the anchor as the page scrolls. It shows the note and its replies, parents before children: replies are indented up to three levels (`MAX_INDENT`), and deeper ones are shown flat with a "Replying to …" label. Reactions are shown as counts on the note they react to; an edited note carries an "edited" mark and a deleted note that still has replies shows as a placeholder. The card is a `dialog` that takes focus, keeps Tab inside it and closes on Escape, its close button or a pointer down outside it and its anchor (`closeOnOutsideClick: false` turns that off); focus then returns to the anchor when it is an element (the pin or panel row), else to where it was. If that element was re-rendered meanwhile, the element with the same `data-id` and class gets focus instead. Every visible string can be replaced through `labels`. While its pin is hidden (its text scrolled out of a scroller, say), the card stays where the pin last was and follows the pin again once it shows. A removed pin does not come back as the same button, so close the card when its note goes away (`setAll` without it, say) and open a new one on the new pin. The card stacks above the side panel, whichever opened first. The card renders bodies with `@acornly/ui/markdown`, so loading it loads the Markdown renderer too.
+
+## Side panel
+
+```ts
+const { openPanel } = await import("@acornly/ui/panel");
+
+const panel = openPanel({
+  layer,
+  items: notes.map((note) => ({
+    id: note.id,
+    annotation: note,
+    state: manager.get(note.id).state, // pending, anchored, approximate or orphaned
+    target: rangeOf(note.id), // where it sits, for reading order
+    replyCount,
+  })),
+  onSelect: (id, item) => (item.state === "orphaned" ? offerReattach(id) : openNote(id)),
+});
+panel.update(items);
+panel.close();
+```
+
+The panel is a `complementary` landmark named by its heading. It lists the page's notes in reading order, the same rule the pins follow (by line, then left to right), then notes still being found or not rendered, and puts orphaned notes in a **Detached** list with the text they were on, oldest first. Each row shows the quoted text, the note as plain text (`markdownExcerpt` strips Markdown markers without loading the parser), its author, reply count and state. Rows keep their elements across `update`, so focus stays on them. The rows are one Tab stop (the row last focused); arrow keys, Home and End move between them; Escape closes the panel and returns focus to where it was. `orderPanelItems` gives the same order without the panel, for apps that render their own.
+
+With `actions`, choosing a row opens that note in place instead: the row shows the note's whole text and a button for each action (`{ label, run(row) }`, such as Reply with a composer opened next to the row), and choosing it again closes it. `onSelect` is still called when a row opens. The SDK's built-in UI passes Reply, Edit and Delete as the note's card would offer them, and Open thread for the card with its replies.
+
+## Selection toolbar and composer
+
+The writing half of the UI is a separate entry point, `@acornly/ui/compose`, loaded the first time the user selects something; only `watchSelection` sits on the read path.
+
+```ts
+import { lazyPart, watchSelection } from "@acornly/ui";
+
+const compose = lazyPart(() => import("@acornly/ui/compose"));
+
+watchSelection({
+  root: document.querySelector("main"), // selections elsewhere are ignored
+  onChange: async (range) => {
+    if (!range) return toolbar?.close();
+    const { openSelectionToolbar, openComposer } = await compose.load();
+    toolbar = openSelectionToolbar({
+      layer,
+      range,
+      root: document.querySelector("main")!,
+      motivations: ["commenting", "highlighting"],
+      shortcuts: root.shortcuts,
+      onChoose: ({ action, target, range, quote, level }) => {
+        if (action === "highlight") return ctx.add({ target, motivation: "highlighting" });
+        openComposer({
+          layer,
+          anchor: range,
+          quote,
+          level,
+          shortcuts: root.shortcuts,
+          onSubmit: ({ markdown }) =>
+            ctx.add({ target, body: { value: markdown, format: "text/markdown" } }),
+        });
+      },
+    });
+  },
+});
+```
+
+- `watchSelection` reports a selection once it settles (the pointer is released, or keyboard selection pauses) and `null` when it is cleared. Selections in form fields, editable content and Acornly's own UI are ignored.
+- The toolbar asks `describeBest` from `@acornly/core` how the selection would be anchored. Words get **Comment** and **Highlight**; a selection over a video or audio element gets **Note on this moment** at the player's current time (the composer's badge shows it, `Note on this moment (1:05)`), a selection with no words (an image, an empty cell) gets **Note on this region**, and one with nothing more precise than the page gets **Note on this page**. Buttons follow `motivations` (`commenting`, `highlighting`), and the chosen `target` is what the SDK's `add` takes: the Range, the element, `{ element, time }` for a moment, an anchor key, or `{ page: true }`. The toolbar does not take focus or clear the selection.
+- The composer is a dialog with a Markdown text area and a preview, in `new`, `reply` or `edit` mode, with an optional reaction row (`onReact`). It holds no storage logic: `onSubmit` saves, and the composer closes when it resolves or stays open with the text and an error when it throws. It takes focus, keeps Tab inside and returns focus on close. The preview loads `@acornly/ui/markdown` on first use.
+- Both follow their anchor as the page scrolls. While the anchor is hidden (the selected text re-rendered away, or a pin scrolled out of a scroller), they stay where it last was, like the card, and follow it again once it shows.
+- Every string can be replaced through `labels`.
+
+Keyboard shortcuts, registered in the shell's registry while the surface is open (remap or disable them with `shortcuts` on `mountRoot`):
+
+| Command               | Default     | Does                                          |
+| --------------------- | ----------- | --------------------------------------------- |
+| `selection.comment`   | `mod+alt+m` | Comment on the selection (or its region/page) |
+| `selection.highlight` | `mod+alt+h` | Highlight the selection                       |
+| `selection.toolbar`   | `alt+f10`   | Move focus into the toolbar                   |
+| `composer.submit`     | `mod+enter` | Save the note                                 |
+| `composer.cancel`     | `escape`    | Close without saving                          |
+| `composer.preview`    | `mod+alt+p` | Switch between writing and the preview        |
+
+Once focus is in the toolbar (Alt+F10 or Tab), the arrow keys, Home and End move between buttons and Escape closes it and gives focus back. When two open surfaces bind the same key, the newest one wins while its `when` guard allows it (the composer's keys apply only while focus is inside it).

package/dist/card.d.ts

@@ -0,0 +1,104 @@
+/**
+ * The note card: a popover that shows a note and its thread, placed next to its pin or highlight
+ * with Floating UI. Loaded on demand (`import("@acornly/ui/card")`), with the Markdown
+ * renderer, so neither sits on the page-load path.
+ */
+import { type ReferenceElement } from "@floating-ui/dom";
+import { type Annotation, type BodyTypeLookup, type ThreadNode } from "@acornly/core";
+/** Replies are indented up to this many levels; deeper ones are shown flat with a label. */
+export declare const MAX_INDENT = 3;
+export interface CardLabels {
+    close: string;
+    /** Shown on a note whose anchor was found by fuzzy matching. */
+    approximate: string;
+    edited: string;
+    /** Stands in for the body of a deleted note that still has replies. */
+    deleted: string;
+    /** The author's name when the note has none. */
+    anonymous: string;
+    /** The author's name on the viewer's own notes. */
+    me: string;
+    /** The label on a reply deeper than {@link MAX_INDENT}. */
+    replyingTo: (name: string) => string;
+    /** The accessible name of one reaction count. */
+    reaction: (emoji: string, count: number) => string;
+    reactions: string;
+    /** The card's accessible name. */
+    card: (author: string) => string;
+    reply: string;
+    edit: string;
+    remove: string;
+    /** The link to report a note, which opens the report form in a new tab. */
+    report: string;
+    /** An action button's accessible name, telling one note's from the next. */
+    action: (action: string, author: string) => string;
+}
+export declare const DEFAULT_CARD_LABELS: CardLabels;
+/**
+ * What the reader can do on each note of the thread. The card only reports the choice: saving is
+ * up to the host. `button` is the button chosen, for placing a composer or a confirmation.
+ */
+export interface CardActions {
+    reply?: (annotation: Annotation, button: HTMLElement) => void;
+    edit?: (annotation: Annotation, button: HTMLElement) => void;
+    remove?: (annotation: Annotation, button: HTMLElement) => void;
+    /** Whether the reader may edit and delete this note, typically their own. Default: none. */
+    canChange?: (annotation: Annotation) => boolean;
+    /** Whether this note has text to edit (not a highlight or a reaction). Default: all do. */
+    canEdit?: (annotation: Annotation) => boolean;
+    /** Whether this note takes replies (the backend may keep them one level deep). Default: all do. */
+    canReply?: (annotation: Annotation) => boolean;
+    /**
+     * Where the reader reports this note, shown as a Report link after the buttons (opening in a
+     * new tab), or null for no link. Default: none.
+     */
+    report?: (annotation: Annotation) => string | null;
+}
+export interface CardOptions {
+    /** The shell's layer (`layerOf(root)`). */
+    layer: HTMLElement;
+    /** What the card is placed next to: the note's pin, or a virtual element over its highlight. */
+    anchor: ReferenceElement;
+    /** The note and its replies, from `assembleThread`. */
+    thread: ThreadNode;
+    /** Mark the note as re-anchored by fuzzy matching. */
+    approximate?: boolean;
+    /** The viewer, to mark their own reactions and show their notes as {@link CardLabels.me}. */
+    viewerId?: string;
+    /** The viewer's profile photo (an https URL), shown next to their own notes. */
+    viewerPicture?: string;
+    /** App-defined body types. */
+    registry?: BodyTypeLookup;
+    /** Called once when the card closes, whatever closed it. */
+    onClose?: () => void;
+    /**
+     * Focused when the card closes. Defaults to the anchor when it is an element (a pin or a panel
+     * row), else to what had focus when the card opened. If that element has been re-rendered,
+     * the element with the same `data-id` is focused instead.
+     */
+    returnFocusTo?: HTMLElement;
+    /** Close when the pointer goes down outside the card and its anchor. Default true. */
+    closeOnOutsideClick?: boolean;
+    labels?: Partial<CardLabels>;
+    /** Reply, Edit and Delete buttons and a Report link on each note; none by default. */
+    actions?: CardActions;
+    /** Formats a note's time. Defaults to the viewer's locale, date and time. */
+    formatTime?: (iso: string) => string;
+}
+export interface NoteCard {
+    /** The card element, inside the shell's layer. */
+    readonly element: HTMLElement;
+    readonly closed: boolean;
+    /** Shows a newer version of the thread, such as after a reply arrives. */
+    update(thread: ThreadNode, options?: {
+        approximate?: boolean;
+    }): void;
+    close(): void;
+}
+/**
+ * Opens a card for a thread next to `anchor`. Focus moves into the card and stays there (Tab
+ * cycles inside it) until it closes, on Escape, the close button, a click outside, or `close()`;
+ * focus then returns to where it was, typically the pin.
+ */
+export declare function openCard(options: CardOptions): NoteCard;
+//# sourceMappingURL=card.d.ts.map

package/dist/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../src/card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAOL,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAMvB,4FAA4F;AAC5F,eAAO,MAAM,UAAU,IAAI,CAAC;AAE5B,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,iDAAiD;IACjD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,MAAM,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CACpD;AAED,eAAO,MAAM,mBAAmB,EAAE,UAgBjC,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9D,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/D,4FAA4F;IAC5F,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,OAAO,CAAC;IAChD,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,OAAO,CAAC;IAC9C,mGAAmG;IACnG,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,OAAO,CAAC;IAC/C;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,MAAM,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,WAAW;IAC1B,2CAA2C;IAC3C,KAAK,EAAE,WAAW,CAAC;IACnB,gGAAgG;IAChG,MAAM,EAAE,gBAAgB,CAAC;IACzB,uDAAuD;IACvD,MAAM,EAAE,UAAU,CAAC;IACnB,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC7B,sFAAsF;IACtF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACtC;AAED,MAAM,WAAW,QAAQ;IACvB,kDAAkD;IAClD,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0EAA0E;IAC1E,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACtE,KAAK,IAAI,IAAI,CAAC;CACf;AAyHD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,CAkSvD"}