@estiva-app/ui 0.1.0 → 0.3.0

package/README.md

@@ -74,15 +74,18 @@ permission. A library people are afraid to deviate from becomes a tax.
 If the colour you need has no token, the token is missing: add it here, in
 every theme, rather than reaching for hex in an app.
 
-### The tailwind-merge pitfall
-
-A custom text-size class (`text-btn-small`, `text-caption`, `text-h2`…) is
-**silently dropped** by `tailwind-merge` when a `text-{colour}` class follows
-it in the same merged list. In shared components, spell sizes as arbitrary
-values — `text-[12px] leading-[12px]` — and keep the token classes for plain
-`className` strings that never go through `cn()`. The bug appears in the
-consuming app and its cause is in the package, which is why this rule lives
-here.
+### The tailwind-merge pitfall — retired for `cn()` users
+
+Stock `tailwind-merge` **silently drops** a custom text-size class
+(`text-btn-small`, `text-caption`, `text-h2`…) when a `text-{colour}` class
+sits in the same merged list — it cannot classify the size, files it as a
+colour, and lets the real colour knock it out. Since 2026-09-01 the
+package's `cn()` is taught the preset's type ramp (`src/cn.ts`; `cn.test.ts`
+pins the list to the preset), so **token size classes are safe in merged
+lists** and are what new code should write. The trap still exists for anyone
+merging with their own un-extended config — both apps re-export this `cn`,
+so don't. Older components still spell sizes as arbitrary values; they
+render identically and migrate to tokens as they are touched.
 
 ### Menus and popovers — five rules
 

package/base.css

@@ -0,0 +1,43 @@
+/*
+  Shared app chrome that is not a token — the styling every Estiva app repeats
+  and a new app should not have to know about.
+
+  First occupant: the scrollbar (Katerina, 2026-09-01). Peek and Ship carried
+  this exact block in their own index.css, character for character, and the
+  library's Storybook carried nothing — so a menu that scrolls looked right in
+  both apps and wrong in the place components are reviewed. Colours come from
+  the theme's own tokens, so it follows whichever theme block is active.
+
+  Import it next to tokens.css:
+
+      @import '@estiva-app/ui/tokens.css';
+      @import '@estiva-app/ui/base.css';
+*/
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+/* Chrome / Safari / Edge */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 9999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+::-webkit-scrollbar-button {
+  display: none;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/dist/AppShell.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+/**
+ * The frame of an app, in the two manners that pair with the TopBar's
+ * (Katerina, 2026-09-02: the two shells go together — the solid bar with
+ * the sidebar, the floating bar with the rail):
+ *
+ * - `solid` — the structured frame: a solid TopBar, the navigation
+ *   column, the content beside it, sidebar and main scrolling
+ *   independently (2026-09-02, verbatim from the structured app).
+ * - `floating` — the floating frame: the TopBar floats over the top
+ *   edge, the rail stands on the app background, and the content lives
+ *   in the rounded card beside it (2026-09-02, the floating app's frame
+ *   geometry; its collapse animation and launcher stay in the app).
+ *
+ * The banner belongs to the content area (her ruling, 2026-09-02): it
+ * renders at the top of the main column — inside the card, in the
+ * floating manner — never across the navigation.
+ *
+ * Layout only. What goes in each region is the caller's; this component
+ * has no data and no routes.
+ */
+export interface AppShellProps {
+    variant?: 'solid' | 'floating';
+    /** The top bar's menu button, in an app whose navigation collapses. */
+    menu?: ReactNode;
+    /** The top bar's left: the app's logo mark, or its name as text. */
+    logo?: ReactNode;
+    /** The top bar's centre — a search field, when there is one. */
+    search?: ReactNode;
+    /** The top bar's right cluster — an `IdentityMenu`. */
+    identity?: ReactNode;
+    /** A `Banner`, or nothing — drawn at the top of the content area. */
+    banner?: ReactNode;
+    /** The navigation: a `Sidebar` in the solid manner, a `Rail` in the floating one. */
+    nav: ReactNode;
+    children: ReactNode;
+}
+export declare function AppShell({ variant, menu, logo, search, identity, banner, nav, children }: AppShellProps): import("react").JSX.Element;
+//# sourceMappingURL=AppShell.d.ts.map

package/dist/AppShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../src/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC9B,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qEAAqE;IACrE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,qFAAqF;IACrF,GAAG,EAAE,SAAS,CAAA;IACd,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAmCjH"}

package/dist/Avatar.d.ts

@@ -1,5 +1,10 @@
 export declare const hueFor: (key: string) => string;
-/** Peek's rule: the first letter of the first two words. */
+/**
+ * Peek's rule, sharpened: the first letter of the first two words — counting
+ * only words that begin with a letter or digit, so "Claude (steered by
+ * Katerina Kelepouri)" shows "C", never "C(" (Katerina, 2026-09-01: a name
+ * carrying such symbols gets a single letter rather than one of them).
+ */
 export declare const initialsFor: (name: string) => string;
 export interface AvatarProps {
     /** The picture URL, resolved by the caller. A picture that fails to load falls back to the initials. */
@@ -8,7 +13,7 @@ export interface AvatarProps {
     name?: string;
     /** Alt text for the picture; the name when absent. Also the initials' source when there is no name. */
     alt?: string;
-    /** Pixels. Peek's scale: 16 · 24 · 32 · 36 (default). */
+    /** Pixels. The scale: 16 · 24 · 32 · 36 (default). */
     size?: number;
     className?: string;
 }

package/dist/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,MAAM,GAAI,KAAK,MAAM,WAIjC,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,WAMtB,CAAA;AAElB,MAAM,WAAW,WAAW;IAC1B,wGAAwG;IACxG,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uGAAuG;IACvG,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAQ,EAAE,IAAS,EAAE,SAAS,EAAE,EAAE,WAAW,+BA0BhF"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,MAAM,GAAI,KAAK,MAAM,WAIjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,WAIvC,CAAA;AAED,MAAM,WAAW,WAAW;IAC1B,wGAAwG;IACxG,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uGAAuG;IACvG,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAQ,EAAE,IAAS,EAAE,SAAS,EAAE,EAAE,WAAW,+BA0BhF"}

package/dist/AvatarGroup.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Up to three overlapping 24px faces with a `bg-surface` ring — Peek's member
+ * stack (2026-09-01), with one generalisation on the way in: a member is a
+ * name plus an optional picture URL, resolved by the caller, exactly as
+ * Avatar takes its `src`. Peek's version took bare names because its Avatar
+ * wrapper resolves pictures itself; a consumer without such a wrapper could
+ * never have shown one.
+ *
+ * The ring sits on the Avatar itself: the old extra wrapper was a 24px
+ * window minus a 2px border with a fixed 24px Avatar inside, so
+ * overflow-hidden clipped 4px of face — and the right edge of the initials
+ * with it, which is how "CO" rendered as "C(". One box, whole letters.
+ */
+export interface AvatarGroupMember {
+    name: string;
+    /** Resolved by the caller. Absent draws the initials. */
+    picture?: string;
+}
+export interface AvatarGroupProps {
+    members: AvatarGroupMember[];
+}
+export declare function AvatarGroup({ members }: AvatarGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/AvatarGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../src/AvatarGroup.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,EAAE,CAAA;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BAgBxD"}

package/dist/Banner.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The strip under the header where the app says something happened —
+ * one line, gone when there is nothing to say (Ship's Banner,
+ * 2026-09-02, verbatim; `info` and `warning` added on extraction,
+ * Katerina's ruling — the semantic set is four everywhere else).
+ *
+ * body-2, her ruling (2026-09-01): the caption this once claimed never
+ * rendered, so 14px is what it has always been and what she kept.
+ * An `error` announces itself (`role="alert"`); the other tones are
+ * polite (`role="status"`).
+ */
+export type BannerTone = 'ok' | 'error' | 'info' | 'warning';
+export interface BannerProps {
+    tone: BannerTone;
+    children: string;
+    className?: string;
+}
+export declare function Banner({ tone, children, className }: BannerProps): import("react").JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../src/Banner.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAE5D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AASD,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,WAAW,+BAMhE"}

package/dist/Breadcrumb.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A trail: "Documents / Quarterly plan / DOC-12". Ship's Breadcrumb
+ * (2026-09-01), which knows nothing about what the places are.
+ *
+ * An item with an `href` is a link, even when it is last — a page may end its
+ * trail on somewhere to go. The last item is where you are when it has none,
+ * and may be `mono` (a ref, an id) or plain. The separator is a slash, muted,
+ * never read aloud.
+ *
+ * A crumb that truncates shows its whole label in a tooltip on hover
+ * (Katerina, 2026-09-01); one that fits shows nothing extra. Truncation is
+ * re-measured when the trail resizes, so the tooltip appears and disappears
+ * with the room the trail actually has.
+ */
+export interface Crumb {
+    label: string;
+    href?: string;
+    /** Set the item in the mono face — a ref, an id. */
+    mono?: boolean;
+    /** Quieter — a label that is not a place. */
+    muted?: boolean;
+}
+export interface BreadcrumbProps {
+    items: Crumb[];
+    className?: string;
+}
+export declare function Breadcrumb({ items, className }: BreadcrumbProps): import("react").JSX.Element;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../src/Breadcrumb.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,EAAE,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,eAAe,+BAyE/D"}

package/dist/Checkbox.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A 16px square that fills with the accent when checked — Peek's Checkbox
+ * (2026-09-01), verbatim.
+ *
+ * Controlled only; parents own the state. Rendered as a button with the
+ * checkbox role so it works standalone or inside clickable rows: a caller
+ * that toggles on the row's own click passes no `onChange`, and the square
+ * goes inert rather than stealing the click.
+ */
+export interface CheckboxProps {
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function Checkbox({ checked, onChange, disabled, className, ...aria }: CheckboxProps): import("react").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAgB,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BAyBlG"}

package/dist/ChipInput.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+/**
+ * The chip a `ChipInput` is made of: a 24px pill with an optional 16px
+ * leading (a face, an icon), a 12px label, and the ✕ that removes it.
+ * Exported on its own (Katerina, 2026-09-01) under a name that promises
+ * nothing about people — a chip like this may one day hold a label, a file,
+ * a filter.
+ */
+export interface InputChipProps {
+    label: string;
+    /** Before the label, 16px — an Avatar, an icon. */
+    leading?: ReactNode;
+    /** Draws the ✕; absent, the chip is display-only. */
+    onRemove?: () => void;
+    className?: string;
+}
+export declare function InputChip({ label, leading, onRemove, className }: InputChipProps): import("react").JSX.Element;
+/**
+ * A multi-select input: chips for the chosen, a typeahead for the rest —
+ * Peek's PersonChipInput (2026-09-01), generalised on the way in. Peek's
+ * version knew it was picking people: it read the directory from Peek's own
+ * data layer and drew every face itself. Here the caller hands in `options`,
+ * and — when the entries have faces or icons — the two leading slots: 16px
+ * in a chip, 32px in a suggestion row. Nothing in this file knows what is
+ * being picked.
+ *
+ * Suggestions appear only once the user types — focusing (or auto-focus on
+ * dialog open) must not drop the full directory over the surface below.
+ * Backspace on an empty query removes the last chip; Escape clears the query
+ * when there is one and bubbles when there is not, so the surface around it
+ * (dialog, launcher) can act.
+ *
+ * Generic over the option type: the objects handed back through `onChange`
+ * are the caller's own, extra fields and all — no re-mapping on the way out.
+ */
+export interface ChipInputOption {
+    id: string;
+    label: string;
+    /** The suggestion row's second line — a role, an address. Also searched. */
+    description?: string;
+}
+export interface ChipInputProps<T extends ChipInputOption = ChipInputOption> {
+    value: T[];
+    onChange: (next: T[]) => void;
+    /** The directory the typeahead searches. */
+    options: T[];
+    placeholder?: string;
+    autoFocus?: boolean;
+    /** Option ids excluded from the suggestion list (e.g., the current user). */
+    excludeIds?: string[];
+    /** Before a chip's label, 16px — a face, an icon. */
+    chipLeading?: (option: T) => ReactNode;
+    /** Before a suggestion row's label, 32px. */
+    rowLeading?: (option: T) => ReactNode;
+}
+export declare function ChipInput<T extends ChipInputOption = ChipInputOption>({ value, onChange, options, placeholder, autoFocus, excludeIds, chipLeading, rowLeading, }: ChipInputProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=ChipInput.d.ts.map

package/dist/ChipInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipInput.d.ts","sourceRoot":"","sources":["../src/ChipInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6E,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjH;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,+BAiChF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe;IACzE,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;IAC7B,4CAA4C;IAC5C,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAA;IACtC,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,SAAS,CAAA;CACtC;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EAAE,EACrE,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAuB,EACvB,SAAS,EACT,UAAe,EACf,WAAW,EACX,UAAU,GACX,EAAE,cAAc,CAAC,CAAC,CAAC,+BA4InB"}

package/dist/ConfirmDialog.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+/**
+ * A question with two answers, before something a person would want back —
+ * Ship's ConfirmDialog (2026-09-01), verbatim. Its own comment always called
+ * it a package candidate: nothing here knows what is being confirmed.
+ *
+ * The confirm button is `destructive` when the action is (a deletion, an
+ * archive); `primary` otherwise. While the action runs the buttons wait;
+ * an action that resolves `false` keeps the dialog open, so the caller's
+ * banner can say why.
+ */
+export interface ConfirmDialogProps {
+    title: string;
+    /** The body — plain sentences, body-2. */
+    children: ReactNode;
+    confirmLabel: string;
+    destructive?: boolean;
+    onConfirm: () => Promise<boolean | void> | boolean | void;
+    onClose: () => void;
+}
+export declare function ConfirmDialog({ title, children, confirmLabel, destructive, onConfirm, onClose }: ConfirmDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/ConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../src/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhD;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAA;IACzD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAmB,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BA8B3H"}

package/dist/DialogShell.d.ts

@@ -7,13 +7,20 @@ import { type ReactNode } from 'react';
  * says what it is to assistive tech.
  */
 export interface DialogShellProps {
+    /** Labels the dialog for assistive tech, and renders as the header text
+     *  unless `headerContent` replaces it. */
     title: string;
     onClose: () => void;
-    footer: ReactNode;
+    /** Replaces the title text in the header — a back button beside the title,
+     *  a count chip after it. The close button stays. */
+    headerContent?: ReactNode;
+    /** Absent: no footer row, and the body keeps the card's own bottom edge
+     *  (a roster that simply ends). */
+    footer?: ReactNode;
     children: ReactNode;
     /** Extra classes on the body (e.g. `flex flex-col gap-6`, or a max height with `overflow-y-auto`). */
     bodyClassName?: string;
     width?: number;
 }
-export declare function DialogShell({ title, onClose, footer, children, bodyClassName, width }: DialogShellProps): import("react").ReactPortal;
+export declare function DialogShell({ title, onClose, headerContent, footer, children, bodyClassName, width }: DialogShellProps): import("react").ReactPortal;
 //# sourceMappingURL=DialogShell.d.ts.map

package/dist/DialogShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogShell.d.ts","sourceRoot":"","sources":["../src/DialogShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjD;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,sGAAsG;IACtG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAW,EAAE,EAAE,gBAAgB,+BAyC7G"}
+{"version":3,"file":"DialogShell.d.ts","sourceRoot":"","sources":["../src/DialogShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjD;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC/B;8CAC0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;yDACqD;IACrD,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB;uCACmC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,sGAAsG;IACtG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAW,EAAE,EAAE,gBAAgB,+BAyC5H"}

package/dist/EditableText.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react';
+/**
+ * Text you click to edit — Ship's EditableText (2026-09-01), verbatim. Its
+ * own comment always called it a package candidate: nothing here knows what
+ * is being edited.
+ *
+ * Reads as text until clicked; then it is a field. Enter commits (Shift+Enter
+ * is a new line when multiline), Escape cancels, blur commits. A commit that
+ * fails keeps the field open with the text in it, so an edit is never
+ * silently lost — the caller has already said why. An unchanged value is not
+ * committed at all. Empty shows the placeholder, muted.
+ */
+export interface EditableTextProps {
+    value: string;
+    placeholder: string;
+    /** Resolve `true` when saved; `false` (or throw) keeps the field open with the text. */
+    onCommit: (value: string) => Promise<boolean> | boolean;
+    multiline?: boolean;
+    /** Applied to both the text and the field, so they are the same size. */
+    className?: string;
+    /** The accessible name of the field — "Title", "Description". */
+    label: string;
+    /**
+     * What to *show* when not editing, when that differs from what is edited —
+     * a value carrying a raw reference that the caller renders as a live object
+     * below the text, say.
+     *
+     * It overrides the display branch only. `value` is still what the editor
+     * opens with and what a commit compares against, so nothing is silently lost
+     * — which is the failure a naive `value={stripped}` would cause.
+     */
+    display?: string;
+    /**
+     * What to *draw* when not editing, when the value is structured rather than
+     * a line of prose.
+     *
+     * A node, not a string, because a heading and a bullet are elements. Added
+     * for a rich text field (SPEC §13): the app renders the parsed body and
+     * hands the result in.
+     *
+     * `display` stays the **string**, and stays what decides emptiness — so a
+     * blank field still shows its placeholder rather than an empty element. Like
+     * `display`, this overrides the display branch only: `value` is what the
+     * editor opens with and what a commit compares against, so what is edited is
+     * unchanged.
+     *
+     * `whitespace-pre-wrap` is dropped when this is set. Structured content
+     * carries its own line breaks, and preserving the source's as well doubles
+     * every one of them.
+     */
+    displayNode?: ReactNode;
+    /** Show the value only — no edit affordance. For a reader who cannot write. */
+    readOnly?: boolean;
+}
+export declare function EditableText({ value, display, displayNode, placeholder, onCommit, multiline, className, label, readOnly }: EditableTextProps): import("react").JSX.Element;
+//# sourceMappingURL=EditableText.d.ts.map

package/dist/EditableText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../src/EditableText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAA;AAGvG;;;;;;;;;;GAUG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,wFAAwF;IACxF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAA;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAiB,EAAE,SAAS,EAAE,KAAK,EAAE,QAAgB,EAAE,EAAE,iBAAiB,+BA+G5J"}

package/dist/IdentityMenu.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+/**
+ * Who you are, and where you are — the top bar's identity trigger and the
+ * menu it opens. Ship's IdentityMenu (2026-09-01), moved in whole: every app
+ * needs one, and this one is already made of nothing but shared parts.
+ *
+ * The trigger is a face and a name, never a key (Ship's ruling A4) — or, with
+ * `compact`, the face alone, as Peek's top bar draws it. Anonymous is a
+ * silhouette and the word "Anonymous": the truth of the situation rather than
+ * eight hex characters posing as a name.
+ *
+ * The menu keeps the two honest sentences, and the workspace line names the
+ * relay because on this substrate the relay *is* the workspace. Every section
+ * hides when the app cannot fill it: no `relayUrl`, no workspace section; no
+ * `onCopyKey`, no copy item — only offer actions that can succeed. The one
+ * place a key appears is as the *result* of "Copy public key" — this
+ * component never receives the key, so it cannot show one; the caller
+ * copies. Items are text only, no icons (her ruling).
+ */
+export interface Identity {
+    /** From `kind:0`. Absent means anonymous. */
+    name?: string;
+    picture?: string;
+    /** Known to Estiva ID, never published to the relay. */
+    email?: string;
+}
+export interface IdentityMenuProps {
+    me: Identity;
+    /** Signed in through Estiva ID, as opposed to a browser-held key. */
+    signedIn: boolean;
+    /** Names the workspace; absent hides the workspace section. */
+    relayUrl?: string;
+    /** Estiva ID's base URL when this build offers sign-in; absent = anonymous-only build. */
+    idBase?: string;
+    /** "Copy public key" appears only when the app can supply one. */
+    onCopyKey?: () => void;
+    onSignOut?: () => void;
+    /** Face-only trigger, 36px — no chevron, no name beside it. */
+    compact?: boolean;
+    className?: string;
+    /**
+     * App-specific rows, drawn as their own group between the workspace
+     * section and the actions. A function receives `close`, so a row can
+     * shut the menu before opening what it opens.
+     */
+    children?: ReactNode | ((close: () => void) => ReactNode);
+}
+export interface IdentityPanelProps extends Omit<IdentityMenuProps, 'compact' | 'className'> {
+    onClose: () => void;
+    /** On the Menu surface — the stories pass `static` to stand it in flow. */
+    className?: string;
+}
+/** The menu alone — what `IdentityMenu` opens. Exported so the stories show
+ *  the designed artifact rather than a closed trigger, and for any surface
+ *  that wants the panel without the trigger. */
+export declare function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, className, children }: IdentityPanelProps): import("react").JSX.Element;
+export declare function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact, className, children }: IdentityMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=IdentityMenu.d.ts.map

package/dist/IdentityMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IdentityMenu.d.ts","sourceRoot":"","sources":["../src/IdentityMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOhD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,QAAQ;IACvB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,QAAQ,CAAA;IACZ,qEAAqE;IACrE,QAAQ,EAAE,OAAO,CAAA;IACjB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAA;CAC1D;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,WAAW,CAAC;IAC1F,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;gDAEgD;AAChD,wBAAgB,aAAa,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAmDvI;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAqC7I"}

package/dist/Menu.d.ts

@@ -0,0 +1,82 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+/**
+ * THE menu shell (2026-09-01) — extracted once, for every menu in every app.
+ *
+ * Peek has no single Menu file; its topic menu, conversation menus, files
+ * menu and the top bar's account menu each hand-roll the same thing, and
+ * they disagree: some close on Escape, most do not, and row heights and
+ * minimum widths drift copy by copy. Ship extracted the shape so it would
+ * not become the next copy; the package exists so nobody becomes the one
+ * after that.
+ *
+ * What every menu shares, kept exactly: an elevated container with a
+ * hairline border, 8px radius, 8px padding and the large shadow; items that
+ * are 8px-radius rows, `px-2 py-1.5`, hover fill, 14px text, destructive
+ * ones in the error colour; section headings as a SectionLabel in a 32px
+ * row; and the two exits every menu has — Escape and a click outside —
+ * owned by the menu, never copied into a caller.
+ *
+ * Two anchorings: `position` portals it to the body at fixed viewport
+ * coordinates (for menus opened inside scrolling containers that clip);
+ * without it the menu hangs below its trigger, right-aligned, and the
+ * caller's wrapper is `relative`.
+ */
+export interface MenuProps {
+    onClose: () => void;
+    /** Viewport coordinates; the menu is portalled, hung from `top`, and aligned to whichever edge is given. */
+    position?: {
+        top: number;
+        right: number;
+    } | {
+        top: number;
+        left: number;
+    };
+    children: ReactNode;
+    className?: string;
+}
+export declare function Menu({ onClose, position, children, className }: MenuProps): import("react").JSX.Element;
+export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    label?: string;
+    /** Replaces the label/description block — for rows whose middle is richer
+     *  than text (the launcher's form rows). Leading/trailing still apply. */
+    children?: ReactNode;
+    /** `tall` is the picker row — content height with a 40px floor, px-3,
+     *  gap-3, room for a 32px face or icon tile and the description line.
+     *  `default` is the command row. */
+    size?: 'default' | 'tall';
+    /** A second line under the label — a role, an address — 12px, secondary, truncating. */
+    description?: string;
+    /** Before the label: a 16px icon (stroke 1.5, secondary), or an Avatar, for rows led by a face. */
+    leading?: ReactNode;
+    /** At the right edge: a hint, a value — anything. Wins over `shortcut` and `submenu`. */
+    trailing?: ReactNode;
+    /** A keyboard hint, drawn as the kbd chip. */
+    shortcut?: string;
+    /** The row opens another menu: draws the chevron at the right edge. */
+    submenu?: boolean;
+    destructive?: boolean;
+    /** The row the menu currently points at (a submenu's chosen value). */
+    selected?: boolean;
+}
+export declare function MenuItem({ label, children, size, description, leading, trailing, shortcut, submenu, destructive, selected, className, ...props }: MenuItemProps): import("react").JSX.Element;
+/**
+ * The keyboard hint a picker row shows while highlighted — "↩ Enter",
+ * "↩ #topic" — hand-rolled in five files before this (2026-09-01).
+ */
+export declare function EnterHint({ label }: {
+    label?: string;
+}): import("react").JSX.Element;
+/** A section heading inside a menu: the 32px row with a SectionLabel, read
+ *  secondary — a heading inside a menu labels the rows, it is not one of
+ *  them (Katerina, 2026-09-01). */
+export declare function MenuSection({ label, children, className }: {
+    label: string;
+    children: ReactNode; /** On the heading row — a surface whose rows are px-3 aligns its heading with px-3. */
+    className?: string;
+}): import("react").JSX.Element;
+/** A non-interactive row inside a menu, at the item's own geometry. */
+export declare function MenuRow({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,qBAAqB,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMzG;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,4GAA4G;IAC5G,QAAQ,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACzE,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,SAAS,+BAoCzE;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;8EAC0E;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;wCAEoC;IACpC,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mGAAmG;IACnG,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAgB,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAyC3K;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAe,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAOhE;AAED;;mCAEmC;AACnC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,uFAAuF;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAS7M;AAED,uEAAuE;AACvE,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE3F"}

package/dist/NavItem.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+/**
+ * One row of a sidebar: a label, an optional count, an active state
+ * (Ship's NavItem, 2026-09-02, verbatim).
+ *
+ * A count is a number of ONE thing, and its tooltip says which ("18
+ * open", "5 active") — the caller passes the number and the words for it,
+ * and a zero is not drawn at all. That is this row's rule; a *tab's*
+ * count draws its zero (see Tabs) — both rulings stand, deliberately.
+ *
+ * Active is the same fill as a selected tab — `bg-active`, neutral.
+ */
+export interface NavItemProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'> {
+    label: string;
+    href: string;
+    /** `0` or absent renders no counter. */
+    count?: number;
+    /** What the count counts, for the tooltip — "18 open", "5 active". */
+    countLabel?: string;
+    active?: boolean;
+    /** 16px, stroke 1.5. */
+    icon?: ReactNode;
+    className?: string;
+}
+export declare function NavItem({ label, href, count, countLabel, active, icon, className, ...props }: NavItemProps): import("react").JSX.Element;
+//# sourceMappingURL=NavItem.d.ts.map

package/dist/NavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../src/NavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAC/E,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,wBAAwB;IACxB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,MAAc,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAwBlH"}