{ "schemaVersion": 2, "builtFrom": { "kind": "package", "repo": "estiva-ui", "package": "@estiva-app/ui", "packageVersion": "0.87.0", "exports": 210, "typeExports": 211, "files": null }, "storybook": { "docsPath": "/?path=/docs/{docsId}", "storyPath": "/?path=/story/{storyId}", "devUrl": "http://localhost:6008" }, "entries": [ { "name": "AddReactionButton", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/ReactionRow.tsx", "purpose": "The add button: `ReactionPicker` opens over it.", "purposeFrom": "comment", "props": [ { "name": "options", "takes": "readonly ReactionOption[]", "required": true, "note": "The emoji offered, each named." }, { "name": "onPick", "takes": "a handler", "required": true, "note": null }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [ { "id": "portal", "behaviour": "Floats on top of the page" }, { "id": "press-outside", "behaviour": "Closes on a press outside" }, { "id": "page-keys", "behaviour": "Takes its keys by itself" }, { "id": "focus", "behaviour": "Holds focus inside while open, and gives it back" }, { "id": "follow", "behaviour": "Stays attached to its anchor on scroll and resize" } ], "status": "stable", "migrationStage": null, "docsId": "primitives-reactionrow--docs", "storyId": "primitives-reactionrow--default", "docPage": null, "app": null, "looks": [] }, { "name": "anchorOfSelection", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/CommentHighlights.ts", "purpose": "The anchor a comment on the selection carries, as §13.6 writes it: the selected blocks, and the selected words in one block or the words where it starts and ends across several.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-commenthighlights--docs", "storyId": "primitives-commenthighlights--default", "docPage": null, "app": null, "looks": [] }, { "name": "appendTableColumn", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorTableControls.tsx", "purpose": "A column after the last one: the ➕ right of the table.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editortablecontrols--docs", "storyId": "primitives-editortablecontrols--default", "docPage": null, "app": null, "looks": [] }, { "name": "appendTableRow", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorTableControls.tsx", "purpose": "A row after the last one: the ➕ under the table.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editortablecontrols--docs", "storyId": "primitives-editortablecontrols--default", "docPage": null, "app": null, "looks": [] }, { "name": "applyFormat", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/ComposerTriggers.tsx", "purpose": "Apply one format to the current block. `set*` wherever Tiptap has one: choosing Heading should make a heading, not turn one off.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-composertriggers--docs", "storyId": "primitives-composertriggers--default", "docPage": null, "app": null, "looks": [] }, { "name": "AppProvider", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/AppProvider.tsx", "purpose": "What the parts need to know about the app they are in, said once at its root: where a person's picture comes from, and how to change page without a reload.", "purposeFrom": "page", "props": [ { "name": "pictureFor", "takes": "a handler", "required": false, "note": "Where this app keeps a person's picture." }, { "name": "navigate", "takes": "a handler", "required": false, "note": "How this app changes page without reloading." }, { "name": "children", "takes": "anything", "required": true, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "frame-appprovider--docs", "storyId": "frame-appprovider--pictures", "docPage": "src/AppProvider.mdx", "app": null, "looks": [] }, { "name": "AppShell", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/AppShell.tsx", "purpose": "The frame of an app, in three manners: `solid` — the structured frame, a solid TopBar over a Sidebar and the content beside it — `inset` — the same frame the other way round, the TopBar and the Sidebar standing on the ground and the content a lighter card beside them — and `floating` — the TopBar floating over the top edge, a Rail standing on the background, and the content living in the rounded card.", "purposeFrom": "page", "props": [ { "name": "variant", "takes": "solid | floating | inset", "required": false, "note": null }, { "name": "menu", "takes": "anything", "required": false, "note": "The top bar's menu button, in an app whose navigation collapses." }, { "name": "logo", "takes": "anything", "required": false, "note": "The top bar's left: the app's logo mark, or its name as text." }, { "name": "search", "takes": "anything", "required": false, "note": "The top bar's centre: something of the caller's own." }, { "name": "onSearch", "takes": "a handler", "required": false, "note": "What searching opens: the top bar then draws its search field and answers Ctrl+K (`TopBar`'s `onSearch`)." }, { "name": "searchPlaceholder", "takes": "text", "required": false, "note": "The words in the top bar's search field." }, { "name": "identity", "takes": "anything", "required": false, "note": "The top bar's right cluster — an `IdentityMenu`." }, { "name": "banner", "takes": "anything", "required": false, "note": "A `Banner`, or nothing — drawn at the top of the content area." }, { "name": "nav", "takes": "anything", "required": true, "note": "The navigation: a `Sidebar` in the solid manner, a `Rail` in the floating one." }, { "name": "children", "takes": "anything", "required": true, "note": null } ], "variants": [ { "prop": "variant", "values": [ "solid", "floating", "inset" ] } ], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "frame-appshell--docs", "storyId": "frame-appshell--solid", "docPage": "src/AppShell.mdx", "app": null, "looks": [ "overflow-hidden rounded-2xl bg-bg-surface signal:border signal:border-border-subtle signal:shadow-highlight-inset" ] }, { "name": "archivedLine", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/archivedLine.ts", "purpose": "The line in the comment box's place on an archived file (CommentBox's `closed.reason`), in every app's words alike.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": null, "storyId": null, "docPage": null, "app": null, "looks": [] }, { "name": "AttachmentCard", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/AttachmentCard.tsx", "purpose": "Something attached — a document or an image — drawn as a card: posted, or waiting to be sent.", "purposeFrom": "page", "props": [ { "name": "name", "takes": "text", "required": true, "note": "The name it was attached under, extension included: it decides the icon and the type label." }, { "name": "size", "takes": "number", "required": false, "note": "In bytes." }, { "name": "contentType", "takes": "text", "required": false, "note": "Its MIME type, where known: an `image/…` type is an image whatever its name." }, { "name": "href", "takes": "text", "required": false, "note": "Where a document opens, in a new tab. Without it the row is dimmed and opens nothing." }, { "name": "src", "takes": "text", "required": false, "note": "The picture an image card draws. Without it an image is drawn as a row." }, { "name": "alt", "takes": "text", "required": false, "note": "What the picture shows, where the sender said — Ship carries one on every `imeta`." }, { "name": "remoteSrc", "takes": "text", "required": false, "note": "A file the app has to *fetch* before it can be used — one on a relay, where reading it needs the reader's own authorization (UIG-35)." }, { "name": "remoteFullSrc", "takes": "text", "required": false, "note": "The full-size picture, fetched only when someone opens it." }, { "name": "fetchImage", "takes": "a handler", "required": false, "note": "How this app fetches a picture it is allowed to read: a URL in, a URL the browser can draw out (an object URL, usually)." }, { "name": "onOpen", "takes": "a handler", "required": false, "note": "What a click on an image's picture does." }, { "name": "onDownload", "takes": "a handler", "required": false, "note": "Shows a download control on hover or focus, and calls this." }, { "name": "download", "takes": "true/false", "required": false, "note": "Shows the download control and saves the file itself, under `name`: the original where there is one (`remoteFullSrc`), otherwise what the card is drawing." }, { "name": "pending", "takes": "true/false", "required": false, "note": "Waiting to be sent: the composer's 200px row, with a remove control on its corner." }, { "name": "onRemove", "takes": "a handler", "required": false, "note": "Removes a pending card." }, { "name": "state", "takes": "ready | loading | unreadable | uploading | failed | warning", "required": false, "note": "`ready` · `loading` (an image on its way) · `unreadable` (it could not be read) · `uploading`, `failed`, `warning` (while pending)." }, { "name": "note", "takes": "text", "required": false, "note": "The line under the name, in place of its type and size — why it failed, or what the warning is." }, { "name": "noteHint", "takes": "text", "required": false, "note": "The note's full words, on hover, where the line is short." } ], "variants": [ { "prop": "state", "values": [ "ready", "loading", "unreadable", "uploading", "failed", "warning" ] } ], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "role", "behaviour": "Says what it is to assistive technology" }, { "id": "tab-stop", "behaviour": "Is reachable with Tab" } ], "status": "stable", "migrationStage": null, "docsId": "components-attachmentcard--docs", "storyId": "components-attachmentcard--document", "docPage": "src/AttachmentCard.mdx", "app": null, "looks": [ "text-caption font-medium text-text-primary truncate", "text-small tracking-wide leading-tight truncate", "rounded-md bg-bg-active text-text-secondary overflow-hidden", "text-small tracking-wide leading-tight truncate text-error-default", "text-small tracking-wide leading-tight truncate text-warning-default", "text-small tracking-wide leading-tight truncate text-text-secondary", "-top-1.5 -right-1.5 rounded-full bg-bg-elevated border border-border-strong text-text-secondary hover:text-text-primary opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity", "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity" ] }, { "name": "AttachmentNode", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/BlockNodes.tsx", "purpose": "A file placed in a document — SPEC §13.3's `attachment` block (SHI-2).", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-blocknodes--docs", "storyId": "primitives-blocknodes--default", "docPage": null, "app": null, "looks": [] }, { "name": "Avatar", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Avatar.tsx", "purpose": "A person's face: their picture, or their initials on a colour that is theirs, or — when there is no name to take initials from — a silhouette.", "purposeFrom": "page", "props": [ { "name": "src", "takes": "text", "required": false, "note": "The picture URL, resolved by the caller — or, when none is given, by the app's `AppProvider`." }, { "name": "name", "takes": "text", "required": false, "note": "The person's name — where the initials and the colour come from." }, { "name": "alt", "takes": "text", "required": false, "note": "Alt text for the picture; the name when absent." }, { "name": "size", "takes": "number", "required": false, "note": "Pixels. The scale: 16 · 24 · 32 · 36 (default)." }, { "name": "label", "takes": "text", "required": false, "note": "Say the person's name out loud, for a face that stands on its own — `PersonTrigger`'s compact shape, a stack of members." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" } ], "status": "stable", "migrationStage": null, "docsId": "primitives-avatar--docs", "storyId": "primitives-avatar--initials", "docPage": "src/Avatar.mdx", "app": null, "looks": [] }, { "name": "AvatarGroup", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/AvatarGroup.tsx", "purpose": "Up to three overlapping 24px faces with a surface-coloured ring — the member stack for anywhere a group is shown at a glance.", "purposeFrom": "page", "props": [ { "name": "members", "takes": "AvatarGroupMember[]", "required": true, "note": null }, { "name": "size", "takes": "number", "required": false, "note": "Face size in pixels; the overlap follows it. 24 is the members pill, 18 the replies row (Katerina, 2026-09-03) — that row drew its own stack for two months for want of this one number, and drifted while it did." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-avatargroup--docs", "storyId": "primitives-avatargroup--three-members", "docPage": "src/AvatarGroup.mdx", "app": null, "looks": [] }, { "name": "Banner", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Banner.tsx", "purpose": "The strip under the header where the app says something happened: one line, one of four tones, gone when there is nothing to say.", "purposeFrom": "page", "props": [ { "name": "tone", "takes": "ok | error | info | warning", "required": true, "note": null }, { "name": "children", "takes": "anything", "required": true, "note": "The one line. Text, or text with a name in `font-medium`." }, { "name": "icon", "takes": "anything", "required": false, "note": "A 16px icon before the line, in the tone's colour (Katerina, 2026-09-18: Peek's composer strip became a Banner)." }, { "name": "action", "takes": "a handler", "required": false, "note": "The one thing to do: the package's Button, muted and small, at the end of the line." }, { "name": "onDismiss", "takes": "a handler", "required": false, "note": "Adds an `✕` at the right-hand end. Absent: the app removes the banner." }, { "name": "dismissLabel", "takes": "text", "required": false, "note": "The dismiss button's accessible name. Defaults to \"Dismiss\"." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [ { "prop": "tone", "values": [ "ok", "error", "info", "warning" ] } ], "ownsBehaviours": [ { "id": "role", "behaviour": "Says what it is to assistive technology" } ], "status": "stable", "migrationStage": null, "docsId": "feedback-banner--docs", "storyId": "feedback-banner--ok", "docPage": "src/Banner.mdx", "app": null, "looks": [] }, { "name": "blockAtY", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/BlockHandle.tsx", "purpose": "The last of `blocks` whose top is at or above `y` — the gap between two blocks belongs to the one before.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-blockhandle--docs", "storyId": "primitives-blockhandle--default", "docPage": null, "app": null, "looks": [] }, { "name": "blockDropCursor", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorBlockHandle.tsx", "purpose": "The drop line a dragged block shows, in the package's accent instead of the editor's default (the text's colour).", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editorblockhandle--docs", "storyId": "primitives-editorblockhandle--default", "docPage": null, "app": null, "looks": [] }, { "name": "BlockHandle", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/BlockHandle.tsx", "purpose": "The handle left of the block under the pointer, as a block-document page has it, and the block's menu behind it.", "purposeFrom": "page", "props": [ { "name": "actions", "takes": "a handler", "required": false, "note": "The caller's own rows — a link to the block, a comment on it." }, { "name": "editing", "takes": "BlockHandleEditing", "required": false, "note": "Given by `EditorBlockHandle` (from `@estiva-app/ui/editor`)." }, { "name": "children", "takes": "anything", "required": true, "note": "What the blocks are drawn in. Reading: a surface whose top-level elements carry `data-block-id`, as `RichText` draws." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-blockhandle--docs", "storyId": "primitives-blockhandle--default", "docPage": "src/BlockHandle.mdx", "app": null, "looks": [] }, { "name": "BlockId", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/BlockNodes.tsx", "purpose": "`id` on every block, carried as the `blockId` attribute.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-blocknodes--docs", "storyId": "primitives-blocknodes--default", "docPage": null, "app": null, "looks": [] }, { "name": "Breadcrumb", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Breadcrumb.tsx", "purpose": "A trail: where you are, and the way back up.", "purposeFrom": "page", "props": [ { "name": "items", "takes": "Crumb[]", "required": true, "note": null }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "navigation-breadcrumb--docs", "storyId": "navigation-breadcrumb--on-an-item", "docPage": "src/Breadcrumb.mdx", "app": null, "looks": [ "font-mono text-caption text-text-muted hover:text-text-primary", "font-mono text-caption text-text-primary hover:text-text-primary", "font-mono text-caption text-text-secondary hover:text-text-primary", "truncate font-mono text-caption text-text-muted", "truncate font-mono text-caption text-text-primary", "truncate font-mono text-caption text-text-secondary" ] }, { "name": "Button", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Button.tsx", "purpose": "The push-button for an action: a verb, clicked once — \"Create\", \"Save\", \"Delete\".", "purposeFrom": "page", "props": [ { "name": "variant", "takes": "primary | outlined | muted | destructive | resolve", "required": false, "note": null }, { "name": "size", "takes": "default | small", "required": false, "note": null }, { "name": "leadingIcon", "takes": "anything", "required": false, "note": "16px, stroke 1.5 on the default size; 14px on small." }, { "name": "disabledReason", "takes": "text", "required": false, "note": "Why the action cannot succeed right now." }, { "name": "children", "takes": "anything", "required": true, "note": null } ], "variants": [ { "prop": "variant", "values": [ "primary", "outlined", "muted", "destructive", "resolve" ] }, { "prop": "size", "values": [ "default", "small" ] } ], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "role", "behaviour": "Says what it is to assistive technology" }, { "id": "tab-stop", "behaviour": "Is reachable with Tab" } ], "status": "stable", "migrationStage": null, "docsId": "primitives-button--docs", "storyId": "primitives-button--primary", "docPage": "src/Button.mdx", "app": null, "looks": [ "rounded-md transition-colors font-sans font-medium", "bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold", "border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer", "signal:bg-transparent signal:border signal:border-border-default signal:text-text-primary signal:shadow-none signal:hover:bg-success-muted signal:hover:border-success-outline signal:hover:text-success-default signal:transition-colors" ] }, { "name": "Callout", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/BlockNodes.tsx", "purpose": "A callout — SPEC §13.3's `tone` on a quote (RIC-19): a quote drawn to stand out, in one of GitHub's alert kinds (`note`, `tip`, `important`, `warning`, `caution`).", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-blocknodes--docs", "storyId": "primitives-blocknodes--default", "docPage": null, "app": null, "looks": [] }, { "name": "calloutLook", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/RichText.tsx", "purpose": "The tone a callout is drawn in: its own, or `note` for one this part does not know (§13.3).", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "components-richtext--docs", "storyId": "components-richtext--every-block", "docPage": null, "app": null, "looks": [] }, { "name": "CaptionedReference", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/ComposerTriggers.tsx", "purpose": "A reference mid-sentence, drawn as `label: snippet` and written as its `uri` verbatim (SPEC §13.1).", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-composertriggers--docs", "storyId": "primitives-composertriggers--default", "docPage": null, "app": null, "looks": [] }, { "name": "Card", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Card.tsx", "purpose": "A box that stands for one thing — drawn as its frame: 8px corners, a fill and a hairline.", "purposeFrom": "page", "props": [ { "name": "fill", "takes": "surface | elevated | inset | none", "required": false, "note": "What the card sits on. Default `surface`." }, { "name": "href", "takes": "text", "required": false, "note": "The whole card is a link: an anchor, and its hairline answers the pointer." }, { "name": "hover", "takes": "none | hairline | fill", "required": false, "note": "How it answers the pointer. Default `hairline` with an `href`, `none` without." }, { "name": "quietUntilHover", "takes": "true/false", "required": false, "note": "No hairline until it is pointed at — a row in a feed that shows its edge only when you are on it." }, { "name": "hovered", "takes": "true/false", "required": false, "note": "Draw the hover look now, whatever the pointer does." }, { "name": "selected", "takes": "true/false", "required": false, "note": "The one you are on: the selected fill, a subtle hairline, and no hover." }, { "name": "active", "takes": "true/false", "required": false, "note": "Being changed in place: the selected fill with the accent hairline, and no hover." }, { "name": "attention", "takes": "accent | warning", "required": false, "note": "A hairline that asks to be looked at — something new (`accent`), or urgent (`warning`)." }, { "name": "unreadable", "takes": "true/false", "required": false, "note": "It stands for something that could not be read: the hairline is dashed." }, { "name": "clip", "takes": "true/false", "required": false, "note": "What is inside is cut to the card's rounded corners: a strip or a picture that runs edge to edge (UIG-9, 17 September; the apps passed `overflow-hidden`)." }, { "name": "children", "takes": "anything", "required": true, "note": null } ], "variants": [ { "prop": "fill", "values": [ "surface", "elevated", "inset", "none" ] }, { "prop": "hover", "values": [ "none", "hairline", "fill" ] }, { "prop": "attention", "values": [ "accent", "warning" ] } ], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-card--docs", "storyId": "primitives-card--surface", "docPage": "src/Card.mdx", "app": null, "looks": [ "rounded-lg border bg-bg-surface border-border-default", "rounded-lg border bg-bg-surface border-border-default overflow-hidden", "rounded-lg border bg-bg-surface border-border-default border-dashed", "rounded-lg border bg-bg-surface border-border-default border-dashed overflow-hidden", "rounded-lg border bg-bg-surface border-border-default border-accent-muted hover:border-accent-muted", "rounded-lg border bg-bg-surface border-border-default border-accent-muted hover:border-accent-muted overflow-hidden", "rounded-lg border bg-bg-surface border-border-default border-accent-muted hover:border-accent-muted border-dashed", "rounded-lg border bg-bg-surface border-border-default border-accent-muted hover:border-accent-muted border-dashed overflow-hidden", "rounded-lg border bg-bg-surface border-border-default border-warning-muted hover:border-warning-muted", "rounded-lg border bg-bg-surface border-border-default border-warning-muted hover:border-warning-muted overflow-hidden", "rounded-lg border bg-bg-surface border-border-default border-warning-muted hover:border-warning-muted border-dashed", "rounded-lg border bg-bg-surface border-border-default border-warning-muted hover:border-warning-muted border-dashed overflow-hidden" ] }, { "name": "CardUnder", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CardUnder.tsx", "purpose": "The one card added under a piece of text, and the ✕ that removes it.", "purposeFrom": "page", "props": [ { "name": "onRemove", "takes": "a handler", "required": false, "note": "Draws the ✕. Without it the card shows with none, as it does to anyone but the author." }, { "name": "revealOnHover", "takes": "true/false", "required": false, "note": "The ✕ waits for hover or focus: under text already sent." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "components-cardunder--docs", "storyId": "components-cardunder--while-writing", "docPage": "src/CardUnder.mdx", "app": null, "looks": [ "opacity-0 transition-opacity focus-within:opacity-100 [@media(hover:none)]:opacity-100" ] }, { "name": "Checkbox", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Checkbox.tsx", "purpose": "A 16px square that fills with the accent when checked.", "purposeFrom": "page", "props": [ { "name": "checked", "takes": "true/false", "required": true, "note": null }, { "name": "onChange", "takes": "a handler", "required": false, "note": null }, { "name": "disabled", "takes": "true/false", "required": false, "note": null }, { "name": "label", "takes": "text", "required": false, "note": "Words beside the box. With `onChange`, clicking them toggles it too, and they name it, so no `aria-label` is needed." }, { "name": "row", "takes": "true/false", "required": false, "note": "The whole row is the target: `leading`, then the words, then the box at the end; the row fills on hover and while checked." }, { "name": "leading", "takes": "anything", "required": false, "note": "In a `row`, a picture before the words: an icon, a status." }, { "name": "aria-label", "takes": "text", "required": false, "note": null }, { "name": "aria-required", "takes": "boolean | 'true' | 'false'", "required": false, "note": "Set by a `Field` with `required`; a caller inside one owes nothing." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "role", "behaviour": "Says what it is to assistive technology" }, { "id": "tab-stop", "behaviour": "Is reachable with Tab" } ], "status": "stable", "migrationStage": null, "docsId": "inputs-checkbox--docs", "storyId": "inputs-checkbox--unchecked", "docPage": "src/Checkbox.mdx", "app": null, "looks": [ "rounded-lg transition-colors cursor-pointer hover:bg-bg-hover", "rounded-lg transition-colors bg-bg-selected cursor-pointer hover:bg-bg-hover" ] }, { "name": "Checklist", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/BlockNodes.tsx", "purpose": "A checklist item — SPEC §13.3's `checked` on a list item (RIC-19): `true` ticked, `false` not, absent a plain item.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-blocknodes--docs", "storyId": "primitives-blocknodes--default", "docPage": null, "app": null, "looks": [] }, { "name": "Chip", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Chip.tsx", "purpose": "A 20px pill for a small piece of standing information — a status, a count, a category — in one of six colour types.", "purposeFrom": "page", "props": [ { "name": "type", "takes": "neutral | brand | info | warning | success | error", "required": false, "note": null }, { "name": "label", "takes": "text", "required": false, "note": null }, { "name": "leadingIcon", "takes": "anything", "required": false, "note": null }, { "name": "trailingIcon", "takes": "anything", "required": false, "note": null }, { "name": "href", "takes": "text", "required": false, "note": "The chip is a link: a real anchor with the chip's own round shape, so the keyboard ring is round too." }, { "name": "onClick", "takes": "MouseEventHandler", "required": false, "note": "With `href`: a router app takes the click here, like `Link`." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [ { "prop": "type", "values": [ "neutral", "brand", "info", "warning", "success", "error" ] } ], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-chip--docs", "storyId": "primitives-chip--neutral", "docPage": "src/Chip.mdx", "app": null, "looks": [ "bg-accent-muted text-accent-text signal:border signal:border-accent-outline", "bg-info-muted text-info-default signal:border signal:border-info-outline", "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning", "bg-success-muted text-success-default signal:border signal:border-success-outline", "bg-error-muted text-error-default signal:border signal:border-error-outline", "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide", "rounded-full bg-accent-muted text-accent-text signal:border signal:border-accent-outline", "rounded-full bg-info-muted text-info-default signal:border signal:border-info-outline", "rounded-full bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning", "rounded-full bg-success-muted text-success-default signal:border signal:border-success-outline", "rounded-full bg-error-muted text-error-default signal:border signal:border-error-outline" ] }, { "name": "ChipInput", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/ChipInput.tsx", "purpose": "A multi-select input: chips for the chosen, a typeahead for the rest.", "purposeFrom": "page", "props": [ { "name": "value", "takes": "T[]", "required": true, "note": null }, { "name": "onChange", "takes": "a handler", "required": true, "note": null }, { "name": "options", "takes": "T[]", "required": true, "note": "The directory the typeahead searches." }, { "name": "placeholder", "takes": "text", "required": false, "note": null }, { "name": "autoFocus", "takes": "true/false", "required": false, "note": null }, { "name": "excludeIds", "takes": "string[]", "required": false, "note": "Option ids excluded from the suggestion list (e.g., the current user)." }, { "name": "chipLeading", "takes": "a handler", "required": false, "note": "Before a chip's label, 16px — a face, an icon." }, { "name": "rowLeading", "takes": "a handler", "required": false, "note": "Before a suggestion row's label, 32px." }, { "name": "aria-required", "takes": "boolean | 'true' | 'false'", "required": false, "note": "Set by a `Field` with `required`; a caller inside one owes nothing." }, { "name": "aria-label", "takes": "text", "required": false, "note": "The field's name, for a caller that is not inside a `Field` — a `Field`'s label names it already." }, { "name": "aria-labelledby", "takes": "text", "required": false, "note": "The id of what names the field on the page — a visible \"To:\", say." } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "portal", "behaviour": "Floats on top of the page" }, { "id": "press-outside", "behaviour": "Closes on a press outside" }, { "id": "page-keys", "behaviour": "Takes its keys by itself" }, { "id": "focus", "behaviour": "Holds focus inside while open, and gives it back" }, { "id": "follow", "behaviour": "Stays attached to its anchor on scroll and resize" }, { "id": "walking", "behaviour": "Moves through its items with the arrow keys" }, { "id": "role", "behaviour": "Says what it is to assistive technology" } ], "status": "stable", "migrationStage": null, "docsId": "inputs-chipinput--docs", "storyId": "inputs-chipinput--type-to-search", "docPage": "src/ChipInput.mdx", "app": null, "looks": [ "bg-bg-elevated border border-border-subtle rounded-md", "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring", "text-body-2 border-none bg-transparent text-text-primary placeholder:text-text-muted outline-none" ] }, { "name": "chosenOf", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/linked.ts", "purpose": "A picker's chosen option, or none.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": null, "storyId": null, "docPage": null, "app": null, "looks": [] }, { "name": "cn", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/cn.ts", "purpose": "Merge class names, last-one-wins on conflicting Tailwind utilities.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": null, "storyId": null, "docPage": null, "app": null, "looks": [] }, { "name": "CodeBlockColours", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/CodeBlockColours.ts", "purpose": "A code block in an editor, coloured by its language as you type.", "purposeFrom": "page", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-codeblockcolours--docs", "storyId": "primitives-codeblockcolours--in-an-editor", "docPage": "src/CodeBlockColours.mdx", "app": null, "looks": [] }, { "name": "CollapsibleSection", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CollapsibleSection.tsx", "purpose": "A section that opens and closes: a SectionHeader whose title is the toggle, and the rows under it, sliding shut and open.", "purposeFrom": "page", "props": [ { "name": "title", "takes": "text", "required": true, "note": null }, { "name": "defaultOpen", "takes": "true/false", "required": false, "note": "Open unless told otherwise." }, { "name": "open", "takes": "true/false", "required": false, "note": "The caller owns the state." }, { "name": "onOpenChange", "takes": "a handler", "required": false, "note": null }, { "name": "pending", "takes": "true/false", "required": false, "note": "Opened, and its rows are not in yet: the title says open — the arrow turned, `aria-expanded`, `aria-busy` — and the panel stays shut until this is false, then slides open once, rows and all." }, { "name": "storageKey", "takes": "text", "required": false, "note": "Remember open or closed in this browser, under this key." }, { "name": "icon", "takes": "anything", "required": false, "note": "16px, before the title; the arrow takes its place on hover — `SectionHeader`'s." }, { "name": "trailing", "takes": "anything", "required": false, "note": "Beside the title and always visible, before the actions — a count." }, { "name": "actions", "takes": "SectionAction[]", "required": false, "note": "Beside the title, revealed while the row is hovered or keyboard-focused — `SectionHeader`'s." }, { "name": "menu", "takes": "anything", "required": false, "note": "Beside the actions, revealed with them: the section's \"More options\" menu, `MenuItem`s — `SectionHeader`'s." }, { "name": "menuLabel", "takes": "text", "required": false, "note": "The ⋮'s accessible name — `SectionHeader`'s." }, { "name": "showActions", "takes": "hover | always", "required": false, "note": null }, { "name": "look", "takes": "heading | row", "required": false, "note": "`heading` (default): the title is a section heading." }, { "name": "indent", "takes": "true/false", "required": false, "note": "With the `heading` look: the rows start under the title, past the chevron — a folder in a sidebar, its files lightly indented under its name (Katerina, 2 October)." }, { "name": "children", "takes": "anything", "required": true, "note": "The rows." }, { "name": "className", "takes": "text", "required": false, "note": "On the section's box: `mt-2` between groups, `shrink-0` in a scrolling column." }, { "name": "contentClassName", "takes": "text", "required": false, "note": "On the box the rows sit in: the gap between them." } ], "variants": [ { "prop": "showActions", "values": [ "hover", "always" ] }, { "prop": "look", "values": [ "heading", "row" ] } ], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" } ], "status": "stable", "migrationStage": null, "docsId": "navigation-collapsiblesection--docs", "storyId": "navigation-collapsiblesection--default", "docPage": "src/CollapsibleSection.mdx", "app": null, "looks": [ "overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none" ] }, { "name": "CommandPalette", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CommandPalette.tsx", "purpose": "A window that searches and runs things: a field, rows in groups, and a footer naming the keys that work right now.", "purposeFrom": "page", "props": [ { "name": "open", "takes": "true/false", "required": true, "note": null }, { "name": "onOpenChange", "takes": "a handler", "required": true, "note": null }, { "name": "label", "takes": "text", "required": true, "note": "The window's name for a screen reader — there is no title on screen." }, { "name": "where", "takes": "text", "required": false, "note": "The footer's left side: where the palette was opened from." }, { "name": "modKey", "takes": "text", "required": false, "note": "How the footer spells the modifier in `Ctrl+Backspace` and `Ctrl+Enter` — `Cmd` on a Mac." }, { "name": "children", "takes": "anything", "required": true, "note": "One level: a `CommandPaletteSearch` or a `CommandPaletteForm`." } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "portal", "behaviour": "Floats on top of the page" }, { "id": "press-outside", "behaviour": "Closes on a press outside" }, { "id": "page-keys", "behaviour": "Takes its keys by itself" }, { "id": "focus", "behaviour": "Holds focus inside while open, and gives it back" }, { "id": "scroll-lock", "behaviour": "Stops the page behind it scrolling" }, { "id": "walking", "behaviour": "Moves through its items with the arrow keys" }, { "id": "role", "behaviour": "Says what it is to assistive technology" } ], "status": "stable", "migrationStage": null, "docsId": "overlays-commandpalette--docs", "storyId": "overlays-commandpalette--first-level", "docPage": "src/CommandPalette.mdx", "app": null, "looks": [ "overflow-hidden rounded-lg border border-border-default bg-bg-elevated shadow-lg outline-none" ] }, { "name": "CommandPaletteAnswer", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CommandPalette.tsx", "purpose": "A written answer, with marks that point at the rows it came from.", "purposeFrom": "comment", "props": [ { "name": "children", "takes": "text", "required": true, "note": "The answer's text. A blank line starts a new paragraph, and a number in square brackets — `[1]` — is drawn as a small mark pointing at the row of the same number below." }, { "name": "note", "takes": "text", "required": false, "note": "A quiet line under the answer — what a key will do now." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "overlays-commandpalette--docs", "storyId": "overlays-commandpalette--first-level", "docPage": null, "app": null, "looks": [] }, { "name": "CommandPaletteForm", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CommandPalette.tsx", "purpose": "The palette as a form: fields, one submit button, and Ctrl+Enter — both ways in run Base UI's field check.", "purposeFrom": "comment", "props": [ { "name": "chip", "takes": "CommandPaletteChip", "required": true, "note": "Names what the form makes, and goes back when removed." }, { "name": "icon", "takes": "anything", "required": false, "note": "Before the chip, 16px — the mark of whatever the form writes to." }, { "name": "submitLabel", "takes": "text", "required": true, "note": "The button's word, and the footer's beside Ctrl+Enter." }, { "name": "onSubmit", "takes": "a handler", "required": true, "note": null }, { "name": "submitWaits", "takes": "text", "required": false, "note": "Why submitting has to wait — nothing changed yet." }, { "name": "working", "takes": "{ button: string; line: string }", "required": false, "note": "While the thing is being made: the fields lock, the button reads `button`, and `line` says what is happening." }, { "name": "error", "takes": "text", "required": false, "note": "What went wrong, beside the button." }, { "name": "children", "takes": "anything", "required": true, "note": "The fields, each in a `Field`." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "overlays-commandpalette--docs", "storyId": "overlays-commandpalette--first-level", "docPage": null, "app": null, "looks": [] }, { "name": "CommandPaletteProposal", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CommandPalette.tsx", "purpose": "Something the palette offers to make, before anything is made: a card with where it would be made on top, then what it would be.", "purposeFrom": "comment", "props": [ { "name": "source", "takes": "text", "required": true, "note": "Where it would be made: the app and the action — \"App › New item\"." }, { "name": "mark", "takes": "anything", "required": false, "note": "The app's mark before the source, as small as the line (about 10px)." }, { "name": "children", "takes": "text", "required": true, "note": "What would be made, in a sentence." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "overlays-commandpalette--docs", "storyId": "overlays-commandpalette--first-level", "docPage": null, "app": null, "looks": [] }, { "name": "CommandPaletteQuote", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CommandPalette.tsx", "purpose": "Text written to be used elsewhere, set off by a rule at its left edge.", "purposeFrom": "comment", "props": [ { "name": "children", "takes": "text", "required": true, "note": "Text written for someone to use — shown as it will be used, line breaks kept." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "overlays-commandpalette--docs", "storyId": "overlays-commandpalette--first-level", "docPage": null, "app": null, "looks": [ "whitespace-pre-wrap border-l-2 border-border-default text-body-2 text-text-primary" ] }, { "name": "CommandPaletteSearch", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CommandPalette.tsx", "purpose": "The palette as a search: a query field, rows in labelled groups walked with the arrow keys, and what to show while nothing has arrived and when nothing matches.", "purposeFrom": "comment", "props": [ { "name": "query", "takes": "text", "required": true, "note": null }, { "name": "onQueryChange", "takes": "a handler", "required": true, "note": null }, { "name": "placeholder", "takes": "text", "required": true, "note": null }, { "name": "groups", "takes": "CommandPaletteGroup[]", "required": true, "note": null }, { "name": "chip", "takes": "CommandPaletteChip", "required": false, "note": "The level you are in. Without one, this is the first level and there is nowhere to go back to." }, { "name": "pending", "takes": "text", "required": false, "note": "A line under the rows while more are on their way — \"Searching…\"." }, { "name": "notes", "takes": "string[]", "required": false, "note": "Quiet lines under the rows, for what a person should know about them and cannot act on — \"2 more where you cannot open them\", \"the search was refused, so this list is incomplete\"." }, { "name": "empty", "takes": "text", "required": false, "note": "The line when there are no rows. Leave it out while rows are still on their way." }, { "name": "children", "takes": "anything", "required": false, "note": "Above the rows: a `CommandPaletteWorking`, `CommandPaletteAnswer` or `CommandPaletteQuote`." } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "portal", "behaviour": "Floats on top of the page" }, { "id": "walking", "behaviour": "Moves through its items with the arrow keys" } ], "status": "stable", "migrationStage": null, "docsId": "overlays-commandpalette--docs", "storyId": "overlays-commandpalette--first-level", "docPage": null, "app": null, "looks": [ "bg-transparent text-input-value text-text-primary outline-none placeholder:text-text-muted" ] }, { "name": "CommandPaletteWorking", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/CommandPalette.tsx", "purpose": "A line saying what is being worked on, with grey bars where the result will land.", "purposeFrom": "comment", "props": [ { "name": "children", "takes": "anything", "required": true, "note": "What is happening — \"Reading 12 messages…\"." }, { "name": "bars", "takes": "0 | 1 | 2 | 3", "required": false, "note": "Grey bars under the line, where the result will be." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "overlays-commandpalette--docs", "storyId": "overlays-commandpalette--first-level", "docPage": null, "app": null, "looks": [] }, { "name": "CommentBox", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/CommentBox.tsx", "purpose": "The one box every app writes a comment, a reply and a line of a conversation in: `@`, `!@`, `[` and `/`, the keys, drafts, files, editing, sending and a refused send.", "purposeFrom": "page", "props": [ { "name": "people", "takes": "readonly MentionPerson[]", "required": true, "note": "Who `@` and `!@` offer." }, { "name": "references", "takes": "a handler", "required": false, "note": "What `[` lists for what was typed, already in the app's order." }, { "name": "referencesChanged", "takes": "a handler", "required": false, "note": "Called with a listener while `[` is open; call it when `references` would answer differently (a search landed)." }, { "name": "referenceIcon", "takes": "a handler", "required": false, "note": "A `[` row's and chip's 16px icon from what it points at; absent, a neutral square." }, { "name": "insert", "takes": "readonly SlashCommand[]", "required": false, "note": "The app's own `/` Insert rows, after the shared Format section: {@link commentBoxRows} and its own." }, { "name": "code", "takes": "CodeFormat", "required": false, "note": "`/` → Code: a mark inside the line, or a block." }, { "name": "send", "takes": "a handler", "required": true, "note": "Send what is written, with the files that are ready and the card still shown; resolves with the relay's answer." }, { "name": "under", "takes": "BoxUnder", "required": false, "note": "The card and parts under the box while something is written, with ✕ on the card." }, { "name": "showsAtOnce", "takes": "true/false", "required": false, "note": "The app shows a send before the relay answers: the box empties at once, and a refusal puts the words back." }, { "name": "label", "takes": "text", "required": true, "note": "The editor's accessible name: what the box is for." }, { "name": "placeholder", "takes": "anything", "required": true, "note": "Said in the empty box." }, { "name": "draft", "takes": "CommentBoxDraft", "required": false, "note": "Keeps what is written when the box goes away." }, { "name": "edit", "takes": "CommentBoxEdit", "required": false, "note": "Editing something already sent." }, { "name": "upload", "takes": "a handler", "required": false, "note": "Offers the paperclip, `/` → File, a pasted picture and a dropped file: uploads one, and answers." }, { "name": "accept", "takes": "text", "required": false, "note": "The file picker's `accept`." }, { "name": "closed", "takes": "{ reason: ReactNode }", "required": false, "note": "The box cannot write here (an archived file, signed out): a line saying why takes its place." }, { "name": "referenceView", "takes": "ComponentType", "required": false, "note": "How a `nostr:` reference the box holds is drawn — the app's own chip." }, { "name": "extensions", "takes": "readonly AnyExtension[]", "required": false, "note": "The app's own extra editor extensions: link chips, highlights." }, { "name": "autoFocus", "takes": "true/false", "required": false, "note": null }, { "name": "onSent", "takes": "a handler", "required": false, "note": "Called with what was sent once it went out: at once when `showsAtOnce`, else on the answer." }, { "name": "onRefused", "takes": "a handler", "required": false, "note": "Called when a send shown at once was refused, so the app takes it back." }, { "name": "marked", "takes": "a handler", "required": false, "note": "The bar down the text's left edge shows while this holds, besides while an urgent mention is in the box: the app's own marks (a highlight)." }, { "name": "onEditor", "takes": "a handler", "required": false, "note": "Called with the box's editor once it is drawn, and with `null` as it goes: an app's launcher inserts into the box last used." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-commentbox--docs", "storyId": "primitives-commentbox--empty", "docPage": "src/CommentBox.mdx", "app": null, "looks": [] }, { "name": "commentBoxRows", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/CommentBox.tsx", "purpose": "The `/` Insert rows the kit offers. Pass the ones an app can perform, in its order, with its own after them; an edit drops Upload and Urgent itself.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-commentbox--docs", "storyId": "primitives-commentbox--empty", "docPage": null, "app": null, "looks": [] }, { "name": "CommentCount", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/LinkParts.tsx", "purpose": "The count of what was said, a link to where it is read.", "purposeFrom": "comment", "props": [ { "name": "conversation", "takes": "LinkedConversation", "required": true, "note": null }, { "name": "noun", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "components-linkparts--docs", "storyId": "components-linkparts--pickers", "docPage": null, "app": null, "looks": [ "-mx-1 rounded-sm text-caption tabular-nums hover:bg-bg-active font-medium text-text-primary", "-mx-1 rounded-sm text-caption tabular-nums hover:bg-bg-active text-text-secondary", "-mx-1 rounded-sm text-caption tabular-nums hover:bg-bg-active" ] }, { "name": "commentElement", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/CommentHighlights.ts", "purpose": "What a comment's card stands beside: its drawn highlight, or — its words gone — its first block.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-commenthighlights--docs", "storyId": "primitives-commenthighlights--default", "docPage": null, "app": null, "looks": [] }, { "name": "CommentHighlights", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/CommentHighlights.ts", "purpose": "Comments drawn where they are in an editor of a block document: on a few words, on a passage across blocks, or on whole blocks, in a light fill, the open one underlined.", "purposeFrom": "page", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-commenthighlights--docs", "storyId": "primitives-commenthighlights--default", "docPage": "src/CommentHighlights.mdx", "app": null, "looks": [ "cursor-pointer rounded-sm bg-warning-muted underline decoration-warning-default decoration-2 underline-offset-4" ] }, { "name": "commentPlace", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/CommentHighlights.ts", "purpose": "Where a comment is now: on its words or blocks, beside its blocks with its words gone, or detached.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-commenthighlights--docs", "storyId": "primitives-commenthighlights--default", "docPage": null, "app": null, "looks": [] }, { "name": "ConfirmDialog", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/ConfirmDialog.tsx", "purpose": "A question with two answers, asked before something a person would want back.", "purposeFrom": "page", "props": [ { "name": "title", "takes": "text", "required": true, "note": null }, { "name": "children", "takes": "anything", "required": true, "note": "The body — plain sentences, body-2." }, { "name": "confirmLabel", "takes": "text", "required": true, "note": null }, { "name": "destructive", "takes": "true/false", "required": false, "note": null }, { "name": "onConfirm", "takes": "a handler", "required": true, "note": null }, { "name": "onClose", "takes": "a handler", "required": true, "note": null } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "portal", "behaviour": "Floats on top of the page" }, { "id": "press-outside", "behaviour": "Closes on a press outside" }, { "id": "page-keys", "behaviour": "Takes its keys by itself" }, { "id": "focus", "behaviour": "Holds focus inside while open, and gives it back" }, { "id": "scroll-lock", "behaviour": "Stops the page behind it scrolling" }, { "id": "role", "behaviour": "Says what it is to assistive technology" } ], "status": "stable", "migrationStage": null, "docsId": "overlays-confirmdialog--docs", "storyId": "overlays-confirmdialog--destructive", "docPage": "src/ConfirmDialog.mdx", "app": null, "looks": [] }, { "name": "ContainerHeader", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/ContainerHeader.tsx", "purpose": "The bar across the top of a column — a list, a thread, a side panel: its title, and the buttons that act on the whole column at the right edge. 48px, with a hairline under it.", "purposeFrom": "page", "props": [ { "name": "title", "takes": "anything", "required": true, "note": "A string keeps the one-line treatment; a node is drawn as given." }, { "name": "chevron", "takes": "true/false", "required": false, "note": "A chevron after the title, for a title that opens something." }, { "name": "titleMenu", "takes": "anything", "required": false, "note": "The menu the title opens: `MenuItem`s — the column's views (Katerina, 5 October: Peek's Topics column, Topics or Folders)." }, { "name": "actions", "takes": "anything", "required": false, "note": "The column's own buttons, at the right edge: IconButtons with tooltips, 4px apart." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "role", "behaviour": "Says what it is to assistive technology" }, { "id": "tab-stop", "behaviour": "Is reachable with Tab" } ], "status": "stable", "migrationStage": null, "docsId": "navigation-containerheader--docs", "storyId": "navigation-containerheader--with-title-menu", "docPage": "src/ContainerHeader.mdx", "app": null, "looks": [ "cursor-pointer rounded-md transition-colors hover:bg-bg-hover" ] }, { "name": "deleteBlock", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorBlockHandle.tsx", "purpose": "Removes the block, the caret where it was.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editorblockhandle--docs", "storyId": "primitives-editorblockhandle--default", "docPage": null, "app": null, "looks": [] }, { "name": "deleteTableColumn", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorTableControls.tsx", "purpose": "The same for a column: the last one deletes the table.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editortablecontrols--docs", "storyId": "primitives-editortablecontrols--default", "docPage": null, "app": null, "looks": [] }, { "name": "deleteTableRow", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorTableControls.tsx", "purpose": "The cell's row, or the whole table when it is its only one: a table holds at least one row (prosemirror-tables refuses to delete it).", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editortablecontrols--docs", "storyId": "primitives-editortablecontrols--default", "docPage": null, "app": null, "looks": [] }, { "name": "DialogShell", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/DialogShell.tsx", "purpose": "The dialog, minus what it says: the portal, the backdrop, a 502px card, a 48px header with the title and a close button, a body, and a 48px footer for the buttons.", "purposeFrom": "page", "props": [ { "name": "title", "takes": "text", "required": true, "note": "Labels the dialog for assistive tech, and renders as the header text unless `headerContent` replaces it." }, { "name": "onClose", "takes": "a handler", "required": true, "note": null }, { "name": "headerContent", "takes": "anything", "required": false, "note": "Replaces the title text in the header — a back button beside the title, a count chip after it." }, { "name": "footer", "takes": "anything", "required": false, "note": "Absent: no footer row, and the body keeps the card's own bottom edge (a roster that simply ends)." }, { "name": "children", "takes": "anything", "required": true, "note": null }, { "name": "bodyClassName", "takes": "text", "required": false, "note": "Extra classes on the body: its layout and any padding override (`flex flex-col gap-6`, `p-0 py-2`)." }, { "name": "bodyMaxHeight", "takes": "text", "required": false, "note": "How tall the body may get before it scrolls, as the cap class — `max-h-[400px]`, `max-h-[70vh]`." }, { "name": "width", "takes": "number", "required": false, "note": null }, { "name": "alert", "takes": "true/false", "required": false, "note": "A question that has to be answered rather than clicked away: a press on the backdrop no longer closes it, and it announces itself as an alert." } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "portal", "behaviour": "Floats on top of the page" }, { "id": "press-outside", "behaviour": "Closes on a press outside" }, { "id": "page-keys", "behaviour": "Takes its keys by itself" }, { "id": "focus", "behaviour": "Holds focus inside while open, and gives it back" }, { "id": "scroll-lock", "behaviour": "Stops the page behind it scrolling" }, { "id": "role", "behaviour": "Says what it is to assistive technology" } ], "status": "stable", "migrationStage": null, "docsId": "overlays-dialogshell--docs", "storyId": "overlays-dialogshell--default", "docPage": "src/DialogShell.mdx", "app": null, "looks": [ "bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto overflow-hidden outline-none" ] }, { "name": "Divider", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Divider.tsx", "purpose": "A hairline in `border-subtle`. Horizontal it is inset 12px each side; `orientation=\"vertical\"` stands it up to its row's height, no inset.", "purposeFrom": "page", "props": [ { "name": "orientation", "takes": "horizontal | vertical", "required": false, "note": null }, { "name": "label", "takes": "text", "required": false, "note": "Words in the middle of the line — \"New since you last read this\", a date." }, { "name": "tone", "takes": "default | warning", "required": false, "note": "`warning` for a line that asks for attention: the label in the warning colour, the lines in its wash." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [ { "prop": "orientation", "values": [ "horizontal", "vertical" ] }, { "prop": "tone", "values": [ "default", "warning" ] } ], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "role", "behaviour": "Says what it is to assistive technology" } ], "status": "stable", "migrationStage": null, "docsId": "primitives-divider--docs", "storyId": "primitives-divider--default", "docPage": "src/Divider.mdx", "app": null, "looks": [] }, { "name": "DocumentEditor", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/DocumentEditor.tsx", "purpose": "One document's text as one surface that is always an editor, the same in every app: `/`, `[` and `@`, links on words, files, checklists, callouts and tables, the block handle, saving when you leave, someone else's save arriving, and the text held when the sign-in ends.", "purposeFrom": "page", "props": [ { "name": "value", "takes": "text", "required": true, "note": "The saved text. A new value while the editor is open is somebody else's save, or your own coming back." }, { "name": "format", "takes": "text", "required": true, "note": "The format `value` is in, handed to `codec.read`." }, { "name": "codec", "takes": "DocumentCodec", "required": true, "note": null }, { "name": "onCommit", "takes": "a handler", "required": true, "note": "Save. Called when you leave, never while typing, with the text, its format, and the saved text this edit started from — so the app can tell whom the save names anew." }, { "name": "label", "takes": "text", "required": true, "note": "The editor's accessible name." }, { "name": "placeholder", "takes": "anything", "required": false, "note": "Muted words over an empty editor." }, { "name": "readOnly", "takes": "true/false", "required": false, "note": "For reading: nothing is typed or saved; chips open, and comments on a selection work when on." }, { "name": "changedBy", "takes": "{ name: string } | null", "required": false, "note": "Who saved the text last, when it was not you: named in \"… saved a newer version\"." }, { "name": "onLeftUnsaved", "takes": "a handler", "required": false, "note": "A save refused after the editor closed, with nothing left on screen to say it." }, { "name": "hold", "takes": "HeldTyping", "required": false, "note": "Where text typed when the sign-in ends is held, under `holdKey`." }, { "name": "holdKey", "takes": "text", "required": false, "note": null }, { "name": "references", "takes": "DocumentReferences", "required": false, "note": "`[` and `/` → File." }, { "name": "mentions", "takes": "DocumentMentions", "required": false, "note": "`@` and `/` → Mention." }, { "name": "linkChips", "takes": "LinkChipsOptions", "required": false, "note": "A pasted app URL drawn as the chip of what it names (`LinkChips`)." }, { "name": "upload", "takes": "a handler", "required": false, "note": "`/` → Upload, and a pasted picture: upload one file and answer the attachment's attributes (its `imeta` fields)." }, { "name": "readMarkdown", "takes": "a handler", "required": false, "note": "Plain text pasted as the blocks it spells: the app's reader of markdown, as the editor's document." }, { "name": "table", "takes": "true/false", "required": false, "note": "`/` → Table. Default on." }, { "name": "onCommentOnSelection", "takes": "a handler", "required": false, "note": "Comment on what is selected: the selection strip's Comment, and the comment highlights." }, { "name": "blockRows", "takes": "a handler", "required": false, "note": "The app's rows in a block's handle menu, after the editing ones: Copy link, Comment." }, { "name": "referenceView", "takes": "ComponentType", "required": false, "note": "Draws a link: the app's own, which resolves what it names — its chip, its row or its card in the row's place, as `place` says (§13.3)." }, { "name": "attachmentView", "takes": "ComponentType", "required": false, "note": "Draws a placed file: the app's own card." }, { "name": "wrap", "takes": "a handler", "required": false, "note": "Around everything the editor draws: the app's providers, which may read the editor." }, { "name": "onEditor", "takes": "a handler", "required": false, "note": "The editor, once it is there, and `null` as it goes." }, { "name": "extensions", "takes": "readonly AnyExtension[]", "required": false, "note": "More of the app's own extensions." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-documenteditor--docs", "storyId": "primitives-documenteditor--with-comments", "docPage": "src/DocumentEditor.mdx", "app": null, "looks": [] }, { "name": "duplicateBlock", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorBlockHandle.tsx", "purpose": "A copy of the block straight after it, the caret in the copy.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editorblockhandle--docs", "storyId": "primitives-editorblockhandle--default", "docPage": null, "app": null, "looks": [] }, { "name": "EditableText", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/EditableText.tsx", "purpose": "Text you click to edit. It reads as text until clicked; then it is a field.", "purposeFrom": "page", "props": [ { "name": "value", "takes": "text", "required": true, "note": null }, { "name": "placeholder", "takes": "text", "required": true, "note": null }, { "name": "onCommit", "takes": "a handler", "required": true, "note": "Resolve `true` when saved; `false` (or throw) keeps the field open with the text." }, { "name": "multiline", "takes": "true/false", "required": false, "note": null }, { "name": "className", "takes": "text", "required": false, "note": "Applied to both the text and the field, so they are the same size." }, { "name": "label", "takes": "text", "required": true, "note": "The accessible name of the field — \"Title\", \"Description\"." }, { "name": "display", "takes": "text", "required": false, "note": "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." }, { "name": "displayNode", "takes": "anything", "required": false, "note": "What to *draw* when not editing, when the value is structured rather than a line of prose." }, { "name": "readOnly", "takes": "true/false", "required": false, "note": "Show the value only — no edit affordance." } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" } ], "status": "stable", "migrationStage": null, "docsId": "inputs-editabletext--docs", "storyId": "inputs-editabletext--title", "docPage": "src/EditableText.mdx", "app": null, "looks": [ "rounded-md border border-border-strong bg-bg-inset text-text-primary outline-none", "rounded-md border border-border-strong bg-bg-inset text-text-primary outline-none resize-none", "rounded-md border border-transparent text-left transition-colors hover:border-border-default text-text-primary", "rounded-md border border-transparent text-left transition-colors hover:border-border-default text-text-muted", "rounded-md border border-transparent text-left transition-colors hover:border-border-default whitespace-pre-wrap text-text-primary", "rounded-md border border-transparent text-left transition-colors hover:border-border-default whitespace-pre-wrap text-text-muted", "rounded-md border border-transparent text-left transition-colors hover:border-border-default" ] }, { "name": "EditorBlockHandle", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorBlockHandle.tsx", "purpose": "`BlockHandle` in a Tiptap editor: drag the handle to move the block, press it for Turn into, Duplicate and Delete, then the app's rows.", "purposeFrom": "page", "props": [ { "name": "editor", "takes": "Editor | null", "required": true, "note": "The editor. Not editable, or not there yet, and the handle reads: the caller's rows only." }, { "name": "turnInto", "takes": "a handler", "required": false, "note": "Turn into's rows for a block. By default `turnIntoRows`, the same in every app: a block of text, a list and a quote each get theirs." }, { "name": "actions", "takes": "a handler", "required": false, "note": "The caller's own rows, after the editing ones." }, { "name": "children", "takes": "anything", "required": true, "note": "The `EditorContent`." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editorblockhandle--docs", "storyId": "primitives-editorblockhandle--default", "docPage": "src/EditorBlockHandle.mdx", "app": null, "looks": [] }, { "name": "EditorTableControls", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/EditorTableControls.tsx", "purpose": "A table's own controls in a Tiptap editor: point at a cell for a handle on its row and on its column, and a ➕ bar under the table and right of it.", "purposeFrom": "page", "props": [ { "name": "editor", "takes": "Editor | null", "required": true, "note": "The editor, with TableKit (`@tiptap/extension-table`) in its extensions." }, { "name": "children", "takes": "anything", "required": true, "note": "The `EditorContent`." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-editortablecontrols--docs", "storyId": "primitives-editortablecontrols--default", "docPage": "src/EditorTableControls.mdx", "app": null, "looks": [ "rounded-lg border border-border-default bg-bg-elevated shadow-lg shadow-none -translate-x-1/2 -translate-y-1/2", "rounded-lg border border-border-default bg-bg-elevated shadow-lg shadow-none" ] }, { "name": "EmptyState", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/EmptyState.tsx", "purpose": "The place where content will be once there is some, in two manners: a 16px icon over a centred line when the whole page is empty, the line alone and left-aligned when one section of a page is.", "purposeFrom": "page", "props": [ { "name": "icon", "takes": "anything", "required": false, "note": "16px, stroke 1.5. A speech bubble when absent." }, { "name": "message", "takes": "text", "required": true, "note": null }, { "name": "scope", "takes": "page | section", "required": false, "note": "`page` when the whole page is empty; `section` when one part of it is." }, { "name": "action", "takes": "ButtonAction", "required": false, "note": "The one thing to do about it — \"New topic\", \"Try again\" — drawn 16px under the line as the package's Button, outlined (Katerina, 2026-09-18)." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [ { "prop": "scope", "values": [ "page", "section" ] } ], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "feedback-emptystate--docs", "storyId": "feedback-emptystate--page", "docPage": "src/EmptyState.mdx", "app": null, "looks": [] }, { "name": "EnterHint", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Menu.tsx", "purpose": "The keyboard hint a picker row shows while highlighted — hand-rolled in five files before this (2026-09-01), and drawn as its own thing until 2026-09-05, when it became the `Kbd` chip every other key hint uses.", "purposeFrom": "comment", "props": [ { "name": "target", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "overlays-menu--docs", "storyId": "overlays-menu--items", "docPage": null, "app": null, "looks": [ "text-menu signal:font-mono signal:text-small signal:tracking-wider leaf:font-mono leaf:text-small leaf:tracking-wider" ] }, { "name": "EntryShell", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/EntryShell.tsx", "purpose": "What an app shows while nobody is signed in to it: its logo, one line saying why, and at most one button.", "purposeFrom": "page", "props": [ { "name": "logo", "takes": "anything", "required": true, "note": "The app's own mark, drawn at the top in every state, as given: the app sizes it." }, { "name": "busy", "takes": "true/false", "required": false, "note": "Entry is still being decided: the logo alone, faded in after 150ms (as a Skeleton is), so an entry that resolves at once flashes nothing." }, { "name": "busyLabel", "takes": "text", "required": false, "note": "What a screen reader hears while `busy`; nothing is drawn for it." }, { "name": "message", "takes": "anything", "required": false, "note": "The one line saying why nobody is signed in, announced politely when it appears." }, { "name": "action", "takes": "ButtonAction & { disabled?: boolean }", "required": false, "note": "The one thing to do about it, drawn under the line (or alone, with no `message`) as the package's primary Button." }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "frame-entryshell--docs", "storyId": "frame-entryshell--message-with-action", "docPage": "src/EntryShell.mdx", "app": null, "looks": [] }, { "name": "ErrorBoundary", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/ErrorBoundary.tsx", "purpose": "Keeps a crash inside what it holds: that part shows \"Something went wrong … Your data is safe — try again.\" with a Try again button, and the rest of the page keeps working.", "purposeFrom": "page", "props": [ { "name": "children", "takes": "anything", "required": true, "note": null }, { "name": "label", "takes": "text", "required": false, "note": "What it holds, said in the message and the console line: \"Something went wrong in the {label}.\"" }, { "name": "fallbackClassName", "takes": "text", "required": false, "note": "The room the message fills where no flex column holds it — the whole screen, for the app's own." }, { "name": "frame", "takes": "a handler", "required": false, "note": "Draws the message inside a frame of yours, in the same place: `ListColumn` keeps its title this way." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "feedback-errorboundary--docs", "storyId": "feedback-errorboundary--in-a-panel", "docPage": "src/ErrorBoundary.mdx", "app": null, "looks": [] }, { "name": "Field", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Field.tsx", "purpose": "A label over a control — the form row. The label is the `input-label` token; `required` marks it with the error-coloured asterisk.", "purposeFrom": "page", "props": [ { "name": "label", "takes": "text", "required": true, "note": null }, { "name": "required", "takes": "true/false", "required": false, "note": "Draws the asterisk and marks the control `aria-required`, so the mark means something to a reader who cannot see it." }, { "name": "helper", "takes": "text", "required": false, "note": "A hint under the control — what the format is, what happens if it is left empty." }, { "name": "error", "takes": "text", "required": false, "note": "What is wrong, in the same place as the helper and in the error colour." }, { "name": "children", "takes": "anything", "required": true, "note": null } ], "variants": [], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" } ], "status": "stable", "migrationStage": null, "docsId": "inputs-field--docs", "storyId": "inputs-field--default", "docPage": "src/Field.mdx", "app": null, "looks": [] }, { "name": "FieldLine", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Field.tsx", "purpose": "The small line a Field draws under a control — on its own, for the places where there is no single control to draw it under.", "purposeFrom": "page", "props": [ { "name": "tone", "takes": "helper | warning | error", "required": false, "note": "`helper` (muted) is a hint; `warning` (amber) and `error` (red) are outcomes." }, { "name": "children", "takes": "anything", "required": true, "note": null }, { "name": "className", "takes": "text", "required": false, "note": null } ], "variants": [ { "prop": "tone", "values": [ "helper", "warning", "error" ] } ], "ownsBehaviours": [ { "id": "role", "behaviour": "Says what it is to assistive technology" } ], "status": "stable", "migrationStage": null, "docsId": "inputs-field-line--docs", "storyId": "inputs-field-line--helper", "docPage": "src/FieldLine.mdx", "app": null, "looks": [] }, { "name": "FilePicker", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/FilePicker.tsx", "purpose": "The browser's file picker, with nothing drawn.", "purposeFrom": "page", "props": [ { "name": "onPick", "takes": "a handler", "required": true, "note": "The chosen files, in the order the picker gave them." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "inputs-filepicker--docs", "storyId": "inputs-filepicker--default", "docPage": "src/FilePicker.mdx", "app": null, "looks": [] }, { "name": "filterPeople", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/ComposerTriggers.tsx", "purpose": "The people whose name holds the query, the first {@link PEOPLE_LIMIT} of them.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-composertriggers--docs", "storyId": "primitives-composertriggers--default", "docPage": null, "app": null, "looks": [] }, { "name": "filterReferences", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/ComposerTriggers.tsx", "purpose": "The references whose label or text holds the query — the last {@link REFERENCE_LIMIT}, in the order given: a thread is unbounded, and a list that grew with it would be a hundred rows of prose.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-composertriggers--docs", "storyId": "primitives-composertriggers--default", "docPage": null, "app": null, "looks": [] }, { "name": "filterSlashSections", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/ComposerTriggers.tsx", "purpose": "The sections narrowed to a query — the text typed after the `/`.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-composertriggers--docs", "storyId": "primitives-composertriggers--default", "docPage": null, "app": null, "looks": [] }, { "name": "findLinkChips", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/LinkChips.ts", "purpose": "What to change in a document, and what to ask.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-linkchips--docs", "storyId": "primitives-linkchips--in-an-editor", "docPage": null, "app": null, "looks": [] }, { "name": "Form", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/Form.tsx", "purpose": "The fields and the button that sends them.", "purposeFrom": "page", "props": [ { "name": "onSubmit", "takes": "a handler", "required": true, "note": "Enter in a field, or a submit button. The page's own submit is already prevented." }, { "name": "busy", "takes": "true/false", "required": false, "note": "While sending: every field and button inside is switched off, and focus waits on the form." }, { "name": "enterSends", "takes": "true/false", "required": false, "note": "Whether Enter in a one-line field sends." }, { "name": "layout", "takes": "fields | free", "required": false, "note": "`fields`, the default: everything inside stacks 24px apart." }, { "name": "children", "takes": "anything", "required": true, "note": null } ], "variants": [ { "prop": "layout", "values": [ "fields", "free" ] } ], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" } ], "status": "stable", "migrationStage": null, "docsId": "inputs-form--docs", "storyId": "inputs-form--default", "docPage": "src/Form.mdx", "app": null, "looks": [] }, { "name": "FORMATS", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/ComposerTriggers.tsx", "purpose": "The formats `/` offers, in order. The hint is what you would type, not a key chord.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-composertriggers--docs", "storyId": "primitives-composertriggers--default", "docPage": null, "app": null, "looks": [] }, { "name": "formatSection", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/ComposerTriggers.tsx", "purpose": "The Format section every app's `/` opens with.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-composertriggers--docs", "storyId": "primitives-composertriggers--default", "docPage": null, "app": null, "looks": [] }, { "name": "hueFor", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/Avatar.tsx", "purpose": "The colour a person's initials sit on, chosen from a key: the same key always gives the same hue, so a face reads as theirs in every app.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-avatar--docs", "storyId": "primitives-avatar--initials", "docPage": null, "app": null, "looks": [] }, { "name": "IconButton", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/IconButton.tsx", "purpose": "A square button around a 16px icon: 4px padding, 8px radius, three variants.", "purposeFrom": "page", "props": [ { "name": "variant", "takes": "muted | outlined | primary | current | resolve", "required": false, "note": "`current` takes the colour of what it sits in — the ✕ on a `Banner` wears the banner's tone." }, { "name": "pressed", "takes": "true/false", "required": false, "note": "On, like a Bold button while the selection is bold: the active fill, and `aria-pressed`." }, { "name": "glow", "takes": "true/false", "required": false, "note": "A glow in Signal — the send arrow while there is something to send." }, { "name": "tooltip", "takes": "text", "required": false, "note": null }, { "name": "tooltipShortcut", "takes": "text", "required": false, "note": "A key hint drawn as the `Kbd` chip inside the tooltip — for a button whose only other affordance is a keyboard shortcut." }, { "name": "tooltipPlacement", "takes": "top | bottom", "required": false, "note": null }, { "name": "disabledReason", "takes": "text", "required": false, "note": "Why the action cannot succeed right now." }, { "name": "href", "takes": "text", "required": false, "note": "A link that looks like an icon button: an anchor, so the address stays real for a modified click or a new tab, as `Link` keeps it." }, { "name": "children", "takes": "anything", "required": true, "note": "The icon: 16px, stroke 1.5." } ], "variants": [ { "prop": "variant", "values": [ "muted", "outlined", "primary", "current", "resolve" ] }, { "prop": "tooltipPlacement", "values": [ "top", "bottom" ] } ], "ownsBehaviours": [ { "id": "base-ui", "behaviour": "Is built on Base UI" }, { "id": "role", "behaviour": "Says what it is to assistive technology" }, { "id": "tab-stop", "behaviour": "Is reachable with Tab" } ], "status": "stable", "migrationStage": null, "docsId": "primitives-iconbutton--docs", "storyId": "primitives-iconbutton--muted", "docPage": "src/IconButton.mdx", "app": null, "looks": [ "border border-border-default hover:bg-bg-hover text-text-secondary" ] }, { "name": "IdentityMenu", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/IdentityMenu.tsx", "purpose": "Who you are, and where you are: the identity trigger for a top bar, and the menu it opens — ready-made, because every app needs one and it is built of nothing but shared parts.", "purposeFrom": "page", "props": [ { "name": "me", "takes": "Identity", "required": true, "note": null }, { "name": "signedIn", "takes": "true/false", "required": true, "note": "Signed in through Estiva ID, as opposed to a browser-held key." }, { "name": "relayUrl", "takes": "text", "required": false, "note": "Names the workspace; absent hides the workspace section." }, { "name": "idBase", "takes": "text", "required": false, "note": "Estiva ID's base URL when this build offers sign-in; absent = anonymous-only build." }, { "name": "onCopyKey", "takes": "a handler", "required": false, "note": "\"Copy public key\" appears only when the app can supply one." }, { "name": "onSignOut", "takes": "a handler", "required": false, "note": null }, { "name": "compact", "takes": "true/false", "required": false, "note": "Face-only trigger, 36px — no chevron, no name beside it." }, { "name": "className", "takes": "text", "required": false, "note": null }, { "name": "children", "takes": "anything", "required": false, "note": "App-specific rows, drawn as their own group between the workspace section and the actions." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "navigation-identitymenu--docs", "storyId": "navigation-identitymenu--anonymous", "docPage": "src/IdentityMenu.mdx", "app": null, "looks": [] }, { "name": "IdentityPanel", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/IdentityMenu.tsx", "purpose": "The identity rows on a panel of their own, with no menu around them — for a docs page, or anywhere the panel is already placed.", "purposeFrom": "comment", "props": [ { "name": "onClose", "takes": "a handler", "required": false, "note": "Called when a row asks the menu to close." }, { "name": "me", "takes": "Identity", "required": true, "note": null }, { "name": "signedIn", "takes": "true/false", "required": true, "note": "Signed in through Estiva ID, as opposed to a browser-held key." }, { "name": "relayUrl", "takes": "text", "required": false, "note": "Names the workspace; absent hides the workspace section." }, { "name": "idBase", "takes": "text", "required": false, "note": "Estiva ID's base URL when this build offers sign-in; absent = anonymous-only build." }, { "name": "onCopyKey", "takes": "a handler", "required": false, "note": "\"Copy public key\" appears only when the app can supply one." }, { "name": "onSignOut", "takes": "a handler", "required": false, "note": null }, { "name": "className", "takes": "text", "required": false, "note": null }, { "name": "children", "takes": "anything", "required": false, "note": "App-specific rows, drawn as their own group between the workspace section and the actions." } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "navigation-identitymenu--docs", "storyId": "navigation-identitymenu--anonymous", "docPage": null, "app": null, "looks": [] }, { "name": "initialsFor", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/Avatar.tsx", "purpose": "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).", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-avatar--docs", "storyId": "primitives-avatar--initials", "docPage": null, "app": null, "looks": [] }, { "name": "INLINE_CHIP_CLASSES", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/InlineChip.tsx", "purpose": "The shape every tone shares. Exported for a rich-text editor that renders chips from strings.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "components-inlinechip--docs", "storyId": "components-inlinechip--neutral", "docPage": null, "app": null, "looks": [] }, { "name": "INLINE_CHIP_TONE_CLASSES", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/InlineChip.tsx", "purpose": "What a chip is made of, by what it stands for.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "components-inlinechip--docs", "storyId": "components-inlinechip--neutral", "docPage": null, "app": null, "looks": [] }, { "name": "InlineChip", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/InlineChip.tsx", "purpose": "A word in a sentence that stands for something — a person, a place, a thing — drawn as a small tinted box exactly one line high, with its words level with the text around it.", "purposeFrom": "page", "props": [ { "name": "tone", "takes": "InlineChipTone", "required": false, "note": "What the chip stands for. Default `neutral`." }, { "name": "icon", "takes": "anything", "required": false, "note": "Drawn before the label in a 16px box: a 16px icon, or a 14px one it centres." }, { "name": "href", "takes": "text", "required": false, "note": "Where the chip leads. With it the chip is an anchor; without it, a span." }, { "name": "children", "takes": "anything", "required": true, "note": null } ], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "components-inlinechip--docs", "storyId": "components-inlinechip--neutral", "docPage": "src/InlineChip.mdx", "app": null, "looks": [ "rounded-sm align-top text-body-2 font-normal select-none", "bg-bg-active text-text-muted font-mono text-caption" ] }, { "name": "inlineChipClassName", "repo": "estiva-ui", "kind": "helper", "importPath": "@estiva-app/ui", "sourceFile": "src/InlineChip.tsx", "purpose": "The chip's classes for a tone, with anything the caller adds.", "purposeFrom": "comment", "props": [], "variants": [], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "components-inlinechip--docs", "storyId": "components-inlinechip--neutral", "docPage": null, "app": null, "looks": [] }, { "name": "InlineText", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui/editor", "sourceFile": "src/InlineText.tsx", "purpose": "A page's title, or the line under it, edited where it stands, as in a document: the text is the editor, with no box and nothing moving.", "purposeFrom": "page", "props": [ { "name": "value", "takes": "text", "required": true, "note": "The saved text. A new value is loaded when you are not in the field and hold nothing unsaved." }, { "name": "placeholder", "takes": "text", "required": true, "note": "What it is for, muted, while it is empty: \"Untitled\", \"Add a summary\"." }, { "name": "label", "takes": "text", "required": true, "note": "The accessible name: \"Title\", \"Summary\"." }, { "name": "onCommit", "takes": "a handler", "required": true, "note": "Save it: resolve `true` when saved; `false` keeps your text in place." }, { "name": "onText", "takes": "a handler", "required": false, "note": "The text as it is being written, on focus and every change; `null` when you leave." }, { "name": "onEnter", "takes": "a handler", "required": false, "note": "Enter, after the save has started: where the caret goes next." }, { "name": "variant", "takes": "title | summary", "required": false, "note": "`title`: the page's heading. `summary`: the line under it, quieter." }, { "name": "clearable", "takes": "true/false", "required": false, "note": "Empty is a value (a summary). Otherwise leaving it empty brings the saved one back (a title)." }, { "name": "readOnly", "takes": "true/false", "required": false, "note": "Text only, the same size and place: nobody can change it, or the editor is not ready." }, { "name": "className", "takes": "text", "required": false, "note": "Placement only." }, { "name": "ref", "takes": "Ref", "required": false, "note": null } ], "variants": [ { "prop": "variant", "values": [ "title", "summary" ] } ], "ownsBehaviours": [], "status": "stable", "migrationStage": null, "docsId": "primitives-inlinetext--docs", "storyId": "primitives-inlinetext--default", "docPage": "src/InlineText.mdx", "app": null, "looks": [] }, { "name": "InputChip", "repo": "estiva-ui", "kind": "component", "importPath": "@estiva-app/ui", "sourceFile": "src/ChipInput.tsx", "purpose": "A chip standing on its own: a label, an optional leading icon, an optional ✕.", "purposeFrom": "comment", "props": [ { "name": "label", "takes": "text", "required": true, "note": null }, { "name": "leading", "takes": "anything", "required": false, "note": "Before the label, 16px — an Avatar, an icon." }, { "name": "onRemove", "takes": "a handler", "required": false, "note": "Draws the ✕; absent, the chip is display-only." }, { "name": "removeLabel", "takes": "text", "required": false, "note": "The ✕'s name for a screen reader. `Remove