@estiva-app/ui 0.53.1 → 0.55.0

package/src/NavTree.tsx

@@ -1,8 +1,8 @@
-import type { MouseEvent, ReactNode } from 'react'
+import { useEffect, useRef, type MouseEvent, type ReactNode } from 'react'
 import { CollapsibleSection } from './CollapsibleSection'
 import { EmptyState } from './EmptyState'
 import { NavItem } from './NavItem'
-import { SectionHeader } from './SectionHeader'
+import { SectionHeader, type SectionAction } from './SectionHeader'
 import { SkeletonList } from './Skeleton'
 
 /** One row of the tree, and the rows under it. */
@@ -18,40 +18,103 @@ export interface NavTreeNode {
   countLabel?: string
   /** Shown only while the row is pointed at or focused, left of the count: a neutral `Chip`, typically. */
   hint?: ReactNode
+  /** Something new here: NavItem's `unread`. */
+  unread?: boolean
+  /** With `unread`: the warning badge in the dot's place. */
+  urgent?: boolean
   /** The row's "More options" menu: `MenuItem`s. */
   menu?: ReactNode
-  /** Rows under this one. Their row folds them; open unless `defaultOpen` says otherwise. */
-  children?: NavTreeNode[]
+  /**
+   * Rows under this one. `null` while they are being read: the row has its
+   * arrow, and a skeleton under it once open. Absent with `hasChildren`, the
+   * same — for rows read only when the row opens.
+   */
+  children?: NavTreeNode[] | null
+  /** The row has rows under it that are not read yet: it gets its arrow, and `onOpenChange` says when to read them. */
+  hasChildren?: boolean
+  /** Said under the row, level with its rows, in place of them: "Nothing in this yet.", "This could not be read." The caller's words. */
+  childrenMessage?: string
   defaultOpen?: boolean
+  /** The caller owns whether its rows are open. */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
 /** A group heading over its rows: the top of the tree. */
 export interface NavTreeGroup {
   id: string
   title: string
-  nodes: NavTreeNode[]
+  /** The rows. `null` while they are being read: a skeleton in their place. */
+  nodes: NavTreeNode[] | null
+  /** Said in the rows' place, level with them: "Nothing in this yet.", "This could not be read." The caller's words. */
+  message?: string
+  /** Beside the title, always shown: an `UnreadDot`, typically. */
+  trailing?: ReactNode
+  /** Beside the title, shown on hover or focus: "Open", typically. */
+  actions?: SectionAction[]
+  defaultOpen?: boolean
+  /** The caller owns whether the group is open. */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  /**
+   * The pointer rests on the group, or the keyboard reaches it: read its rows
+   * now, so opening it draws them. Resting, not passing — a pointer sweeping
+   * down the column calls nothing.
+   */
+  onIntent?: () => void
 }
 
 export interface NavTreeProps {
   /** The quiet label over the groups. Absent, none is drawn. */
   title?: string
-  /** `null` while the first read is on its way: a skeleton in the rows' place. */
-  groups: NavTreeGroup[] | null
+  /** Beside the label, always shown: "New", typically. */
+  titleActions?: SectionAction[]
+  /**
+   * `null` while the first read is on its way: a skeleton in the groups' place.
+   * Absent when the app draws its own groups as `children`.
+   */
+  groups?: NavTreeGroup[] | null
+  /**
+   * The groups, drawn by the app: `NavTreeSection`s with `NavItem` rows — for
+   * an app whose groups and rows each read their own data. Used when `groups`
+   * is absent.
+   */
+  children?: ReactNode
   /** The row that is current: `active`, and its group starts open. */
   selected?: string
   /** A row was clicked. A router app prevents the default and navigates. */
   onSelect?: (node: NavTreeNode, event: MouseEvent<HTMLAnchorElement>) => void
-  /** What to say when there are no groups. The words are the caller's. */
-  emptyMessage: string
+  /** What to say when `groups` is empty. The words are the caller's; absent, nothing is said. */
+  emptyMessage?: string
   /** Remember each group open or closed in this browser, under this key and the group's id. The app prefixes it. */
   storageKey?: string
 }
 
-function holds(nodes: NavTreeNode[], id: string | undefined): boolean {
-  return id !== undefined && nodes.some((node) => node.id === id || holds(node.children ?? [], id))
+/** How long the pointer rests on a group before `onIntent` (Peek's FolderTree, 150ms). */
+export const NAV_TREE_INTENT_MS = 150
+
+function holds(nodes: NavTreeNode[] | null, id: string | undefined): boolean {
+  return !!nodes && id !== undefined && nodes.some((node) => node.id === id || holds(node.children ?? null, id))
+}
+
+/** A line in the rows' place: level with the rows, which pad themselves (Katerina, 14 September). */
+function Line({ message }: { message: string }) {
+  return (
+    <div className="px-2 py-1">
+      <EmptyState scope="section" message={message} />
+    </div>
+  )
 }
 
 function Row({ node, selected, onSelect }: { node: NavTreeNode } & Pick<NavTreeProps, 'selected' | 'onSelect'>) {
+  const under =
+    node.childrenMessage !== undefined ? (
+      <Line message={node.childrenMessage} />
+    ) : node.children?.length ? (
+      node.children.map((child) => <Row key={child.id} node={child} selected={selected} onSelect={onSelect} />)
+    ) : node.children === null || (node.hasChildren && node.children === undefined) ? (
+      <SkeletonList rows={2} />
+    ) : undefined
   return (
     <NavItem
       href={node.href}
@@ -60,52 +123,124 @@ function Row({ node, selected, onSelect }: { node: NavTreeNode } & Pick<NavTreeP
       count={node.count}
       countLabel={node.countLabel}
       hint={node.hint}
+      unread={node.unread}
+      urgent={node.urgent}
       menu={node.menu}
       active={node.id === selected}
       defaultOpen={node.defaultOpen ?? true}
+      open={node.open}
+      onOpenChange={node.onOpenChange}
       onClick={onSelect ? (event) => onSelect(node, event) : undefined}
     >
-      {node.children?.length
-        ? node.children.map((child) => <Row key={child.id} node={child} selected={selected} onSelect={onSelect} />)
-        : undefined}
+      {under}
     </NavItem>
   )
 }
 
+function Group({ group, selected, onSelect, storageKey }: { group: NavTreeGroup } & Pick<NavTreeProps, 'selected' | 'onSelect' | 'storageKey'>) {
+  return (
+    <NavTreeSection
+      id={group.id}
+      title={group.title}
+      message={group.message}
+      loading={group.nodes === null}
+      trailing={group.trailing}
+      actions={group.actions}
+      defaultOpen={group.defaultOpen ?? holds(group.nodes, selected)}
+      open={group.open}
+      onOpenChange={group.onOpenChange}
+      storageKey={storageKey ? `${storageKey}.${group.id}` : undefined}
+      onIntent={group.onIntent}
+    >
+      {group.nodes?.map((node) => <Row key={node.id} node={node} selected={selected} onSelect={onSelect} />)}
+    </NavTreeSection>
+  )
+}
+
+export interface NavTreeSectionProps {
+  title: string
+  /** Marks the group's box as `data-nav-group`, for tests and photo runs to find it. */
+  id?: string
+  /** Said in the rows' place, level with them. The caller's words. */
+  message?: string
+  /** Beside the title, always shown: an `UnreadDot`, typically. */
+  trailing?: ReactNode
+  /** Beside the title, shown on hover or focus: "Open", typically. */
+  actions?: SectionAction[]
+  /** Open unless told otherwise. */
+  defaultOpen?: boolean
+  /** The caller owns whether the group is open. */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** The pointer rests on the group, or the keyboard reaches it: read its rows now. */
+  onIntent?: () => void
+  /** Its rows are being read: a skeleton in their place. */
+  loading?: boolean
+  /** Remember it open or closed in this browser, under this key. */
+  storageKey?: string
+  /** The rows: `NavItem`s. */
+  children?: ReactNode
+}
+
+/**
+ * One group of a `NavTree`, for an app that draws its own: the standard
+ * heading folding its rows, lightly indented under its title, with the
+ * group's line, skeleton, actions and `onIntent`. `NavTree` draws these from
+ * `groups`; an app whose groups each read their own data draws them itself,
+ * as `NavTree`'s children.
+ */
+export function NavTreeSection({ id, title, message, loading = false, trailing, actions, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }: NavTreeSectionProps) {
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  useEffect(() => () => clearTimeout(timer.current), [])
+  const intent = onIntent
+  return (
+    <div
+      className="shrink-0"
+      data-nav-group={id}
+      onPointerEnter={intent ? () => { clearTimeout(timer.current); timer.current = setTimeout(intent, NAV_TREE_INTENT_MS) } : undefined}
+      onPointerLeave={intent ? () => clearTimeout(timer.current) : undefined}
+      onFocus={intent}
+    >
+      <CollapsibleSection
+        title={title}
+        indent
+        defaultOpen={defaultOpen}
+        open={open}
+        onOpenChange={onOpenChange}
+        storageKey={storageKey}
+        trailing={trailing}
+        actions={actions}
+        className="mt-2 shrink-0"
+        contentClassName="gap-px"
+      >
+        {message !== undefined ? <Line message={message} /> : loading ? <SkeletonList rows={3} /> : children}
+      </CollapsibleSection>
+    </div>
+  )
+}
+
 /**
  * A sidebar's tree, from one nested list (Katerina, 2 October: Leaf's folder
- * tree): a quiet label, then each group as the standard heading folding its
- * rows, lightly indented under its title; rows under rows to any depth, each
- * row a link whose icon becomes the arrow that folds what is under it. Only
- * the group that holds the current row starts open.
+ * tree, then Peek's and Ship's): a quiet label with its actions, then each
+ * group as the standard heading folding its rows, lightly indented under its
+ * title; rows under rows to any depth, each row a link whose icon becomes the
+ * arrow that folds what is under it. Groups and rows can be read when they
+ * open. Only the group that holds the current row starts open, unless the
+ * caller owns it.
  */
-export function NavTree({ title, groups, selected, onSelect, emptyMessage, storageKey }: NavTreeProps) {
+export function NavTree({ title, titleActions, groups, children, selected, onSelect, emptyMessage = '', storageKey }: NavTreeProps) {
   return (
     <>
-      {title && <SectionHeader title={title} look="quiet" className="mt-4 shrink-0" />}
-      {groups === null ? (
+      {title && <SectionHeader title={title} look="quiet" showActions="always" actions={titleActions} className="mt-4 shrink-0" />}
+      {groups === undefined ? (
+        children
+      ) : groups === null ? (
         <SkeletonList rows={5} />
       ) : groups.length === 0 ? (
-        // Level with the rows: a row pads itself, so the line takes a row's inset (Katerina, 14 September).
-        <div className="px-2 py-1">
-          <EmptyState scope="section" message={emptyMessage} />
-        </div>
+        // No words, no line: an app that says nothing when it has no groups.
+        emptyMessage ? <Line message={emptyMessage} /> : null
       ) : (
-        groups.map((group) => (
-          <CollapsibleSection
-            key={group.id}
-            title={group.title}
-            indent
-            defaultOpen={holds(group.nodes, selected)}
-            storageKey={storageKey ? `${storageKey}.${group.id}` : undefined}
-            className="mt-2 shrink-0"
-            contentClassName="gap-px"
-          >
-            {group.nodes.map((node) => (
-              <Row key={node.id} node={node} selected={selected} onSelect={onSelect} />
-            ))}
-          </CollapsibleSection>
-        ))
+        groups.map((group) => <Group key={group.id} group={group} selected={selected} onSelect={onSelect} storageKey={storageKey} />)
       )}
     </>
   )

package/src/SectionLabel.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { NavItem } from './NavItem'
 import { SectionLabel } from './SectionLabel'
 
 /** Every section title renders through this span — a style change is one edit. Under Signal it becomes the mono uppercase micro-label. */
@@ -22,9 +23,7 @@ export const HeadingAList: Story = {
         <SectionLabel>Recent</SectionLabel>
       </div>
       {['Quarterly plan', 'Reading list', 'Archive'].map((row) => (
-        <div key={row} className="rounded-lg px-2 py-1.5 text-body-2 text-text-primary hover:bg-bg-hover">
-          {row}
-        </div>
+        <NavItem key={row} href="#" label={row} />
       ))}
     </div>
   ),

package/src/UnreadDot.mdx

@@ -0,0 +1,57 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as UnreadDotStories from './UnreadDot.stories'
+
+<Meta of={UnreadDotStories} />
+
+# UnreadDot
+
+The accent dot that says "something new here": a 6px disc centred in a 24px
+slot, so it sits exactly where a control would and the row does not shift
+when one replaces the other.
+
+<Canvas of={UnreadDotStories.InARow} />
+
+## When
+
+- On any row or card that can be unread: a place in a sidebar, a
+  conversation, a reply.
+- Anywhere a control appears on hover and the dot is what is there at rest.
+  The 24px slot keeps the two the same size.
+- In a sidebar row, pass **NavItem** `unread` rather than placing it: the row
+  draws it, and brightens its words.
+
+## When not
+
+- As the only thing that says "unread". A coloured disc reads as nothing to a
+  screen reader, so the row that draws it must say "unread" in its own
+  accessible name. This part carries no label of its own.
+- For a count. It says that there is something new, never how much: a count
+  is **NavItem** `count` or a **Chip**.
+
+## How
+
+```tsx
+import { UnreadDot } from '@estiva-app/ui'
+
+<div className="flex items-center">
+  <span>{title}</span>
+  {isUnread && <UnreadDot />}
+</div>
+```
+
+- It renders unconditionally, so the caller decides whether there is
+  anything new.
+
+## What it owns
+
+It does these by itself. Write none of them around it.
+
+| It does | So you never write | Refused when written by hand |
+|---|---|---|
+| The 6px disc in a 24px slot | a sized box around a round div |  |
+| `data-unread`, the attribute tests and photo runs select on | a marker of your own |  |
+| Keeps its size in a tight row | `shrink-0` |  |
+
+## Props
+
+<Controls of={UnreadDotStories.Default} />

package/src/UnreadDot.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { UnreadDot } from './UnreadDot'
+
+const meta = {
+  title: 'Primitives/UnreadDot',
+  component: UnreadDot,
+} satisfies Meta<typeof UnreadDot>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+/** Beside a line of text, as a list row draws it: the slot keeps the row's height. */
+export const InARow: Story = {
+  render: (args) => (
+    <div className="flex w-64 items-center gap-1 text-body-2 text-text-primary">
+      <span className="min-w-0 flex-1 truncate">A row with something new</span>
+      <UnreadDot {...args} />
+    </div>
+  ),
+}

package/src/UnreadDot.test.tsx

@@ -0,0 +1,17 @@
+// @vitest-environment jsdom
+/** What the page claims: the 6px disc in a 24px slot, marked for tests and photo runs. */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+import { UnreadDot } from './UnreadDot'
+
+afterEach(cleanup)
+
+describe('UnreadDot', () => {
+  it('is a 24px slot holding a 6px disc, marked data-unread', () => {
+    const { container } = render(<UnreadDot />)
+    const slot = container.firstElementChild as HTMLElement
+    expect(slot.hasAttribute('data-unread')).toBe(true)
+    expect(slot.className).toContain('w-6')
+    expect((slot.firstElementChild as HTMLElement).className).toContain('w-1.5')
+  })
+})

package/src/UnreadDot.tsx

@@ -0,0 +1,17 @@
+import { cn } from './cn'
+
+/**
+ * The accent dot that says "something new here": a 6px disc centred in a
+ * 24px slot, so it sits where a control would and the row does not shift when
+ * one replaces the other (Peek's UnreadDot, moved in on 2 October, Katerina).
+ *
+ * Purely visual: the row that draws it says "unread" in its own accessible
+ * name, because a coloured disc reads as nothing to a screen reader.
+ */
+export function UnreadDot({ className }: { className?: string }) {
+  return (
+    <div className={cn('flex h-6 w-6 shrink-0 items-center justify-center', className)} data-unread>
+      <div className="h-1.5 w-1.5 rounded-full bg-accent-primary" />
+    </div>
+  )
+}

package/src/editor.ts

@@ -9,6 +9,7 @@
  */
 export { KeptSelection, SelectionToolbar, normalizeHref, type MarkId, type SelectionToolbarProps } from './SelectionToolbar'
 export { suggestionPopup, isSuggestionActive, isSuggestionOpen, type SuggestionPopupOptions } from './suggestionPopup'
+export { EditorBlockHandle, blockDropCursor, deleteBlock, moveBlock, duplicateBlock, startBlockDrag, type EditorBlockHandleProps, type BlockTurnInto } from './EditorBlockHandle'
 export {
   PersonMention,
   UrgentPersonMention,

package/src/eslint/no-native-title.ts

@@ -8,7 +8,7 @@ import { bindingOfTag, partsOfFile, type Node, type Parser, type PartBinding } f
  * the browser shows it as its tooltip. `no-native-title.test.ts` holds this
  * list to the catalogue: a part that gains a `title` of its own joins it.
  */
-export const PARTS_WITH_A_TITLE = ['CollapsibleSection', 'ConfirmDialog', 'ContainerHeader', 'DialogShell', 'ListColumn', 'NavTree', 'Panel', 'SectionHeader'] as const
+export const PARTS_WITH_A_TITLE = ['CollapsibleSection', 'ConfirmDialog', 'ContainerHeader', 'DialogShell', 'ListColumn', 'NavTree', 'NavTreeSection', 'Panel', 'SectionHeader'] as const
 
 const child = (node: Node, key: string) => node[key] as Node | null | undefined
 const nameOf = (node: Node | null | undefined): string | undefined =>

package/src/index.ts

@@ -14,6 +14,7 @@ export { AttachmentCard, type AttachmentCardProps, type AttachmentCardState } fr
 export { Avatar, hueFor, initialsFor, type AvatarProps } from './Avatar'
 export { AvatarGroup, type AvatarGroupMember, type AvatarGroupProps } from './AvatarGroup'
 export { Banner, type BannerProps, type BannerTone } from './Banner'
+export { BlockHandle, blockAtY, type BlockHandleProps, type BlockHandleEditing, type HandleBlock } from './BlockHandle'
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button'
 export { Card, type CardAttention, type CardFill, type CardHover, type CardProps } from './Card'
 export { Checkbox, type CheckboxProps } from './Checkbox'
@@ -70,7 +71,8 @@ export { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
 export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
 export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSeparator, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
 export { NavItem, type NavItemProps } from './NavItem'
-export { NavTree, type NavTreeGroup, type NavTreeNode, type NavTreeProps } from './NavTree'
+export { UnreadDot } from './UnreadDot'
+export { NavTree, NavTreeSection, type NavTreeGroup, type NavTreeNode, type NavTreeProps, type NavTreeSectionProps } from './NavTree'
 export { Popover, type PopoverProps } from './Popover'
 export { SuggestionMenu, type SuggestionMenuHandle, type SuggestionMenuProps, type SuggestionMenuRow, type SuggestionMenuSection } from './SuggestionMenu'
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea'

package/src/looks.ts

@@ -44,7 +44,8 @@ export const CHIP_TEXT_CLASSES = 'text-chip signal:font-mono signal:text-small s
 export const BARE_INPUT_CLASSES = 'bg-transparent text-text-primary placeholder:text-text-muted outline-none'
 
 /** A sidebar row's shape and its words at rest, brightening under the pointer: NavItem, and SectionHeader's `row` (a folder among rows). */
-export const SIDEBAR_ROW_CLASSES = 'rounded-md transition-colors'
+// 8px corners, a MenuItem row's (Katerina, 2 October).
+export const SIDEBAR_ROW_CLASSES = 'rounded-lg transition-colors'
 export const SIDEBAR_ROW_TEXT_CLASSES = 'text-text-secondary hover:text-text-primary'
 
 /**

package/src/registry/registry.test.ts

@@ -48,20 +48,20 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 120 names over 66 files: 96 components, 23 helpers and 1 hook (NavTree and the composer triggers joined on 2 October, CON-27)', () => {
+  it('counts 130 names over 69 files: 100 components, 29 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, and moveBlock and blockDropCursor, the drop in the gutter, on 5 October)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     // The ten `EDITOR_EXTENSIONS` count as components by their names; they are
     // editor extensions, documented on SelectionToolbar's, BlockNodes' and
     // ComposerTriggers' pages.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 96, helper: 23, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(66)
+    expect(kinds).toEqual({ component: 100, helper: 29, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(69)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(62)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(58)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(65)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(65)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {

package/stories/Choosing.mdx

@@ -70,6 +70,8 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | Bold, italic and the like over selected text in an editor | **SelectionToolbar**, from `@estiva-app/ui/editor` — it follows the selection by itself |
 | A composer's `@`, `!@`, `[` and `/` — mention a person, reference something, format or insert | **ComposerTriggers** — `PersonMention`, `UrgentPersonMention`, `CaptionedReference`, `ReferenceTrigger` and `SlashCommands` from `@estiva-app/ui/editor`; the app passes its people, its items and its own `/` rows |
 | An editor that saves a block document and must keep its block ids | **BlockNodes** — `BlockId`, `UnknownBlock`, `ReferenceNode` and `AttachmentNode` from `@estiva-app/ui/editor`, beside StarterKit and TableKit |
+| Move, turn, duplicate or delete one block of a document being edited | **EditorBlockHandle**, from `@estiva-app/ui/editor`, with your rows after its own |
+| Offer a link or a comment on one block of a document being read | **BlockHandle** — your rows only, and no Tiptap loaded |
 | Anything with a title, body and footer | **DialogShell** |
 | "Are you sure?" | **ConfirmDialog** |
 | A picture full screen, from a thumbnail | **Lightbox** — an **AttachmentCard** opens one by itself |
@@ -82,6 +84,7 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | The bar across the top of a column: its title, and the buttons that act on the whole column | **ContainerHeader** — inside the package's columns; in an app, the header comes with **Panel** or **ListColumn** |
 | A box that can hold more than fits — a list that grows with its data counts, even when today's data fits | **ScrollArea** — its bar is drawn over the content and takes no width |
 | A status, a count or a category, in a small pill | **Chip** — six colour types; the colour is the message, the label makes it legible |
+| Something new on a row or a card, no count | **UnreadDot** — the 6px dot in a 24px slot; in a sidebar row, **NavItem** `unread` draws it |
 | One thing — a conversation, a project, an object — as a box you can pick | **Card** — the fill by what it sits on; `href` for a link, `hover="fill"` in a feed |
 | A section heading, chevron, hover actions | **SectionHeader** |
 | A group of rows that opens and closes, and stays how you left it | **CollapsibleSection** — `storageKey` remembers |

package/tailwind-preset.js

@@ -149,6 +149,7 @@ export default {
         'bg-hover':     'var(--bg-hover)',
         'bg-selected':  'var(--bg-selected)',
         'bg-active':    'var(--bg-active)',
+        'bg-nav-active': 'var(--bg-nav-active)',
         'bg-disabled':  'var(--bg-disabled)',
         'bg-tooltip':   'var(--bg-tooltip)',
         'bg-tooltip-key': 'var(--bg-tooltip-key)',

package/tokens.css

@@ -29,6 +29,7 @@
   --bg-hover:    #E9E9EB;
   --bg-selected: #E4E4E7;
   --bg-active:   #D4D4D8;
+  --bg-nav-active: #D4D4D8; /* the current row in a sidebar */
   --bg-disabled: #F4F4F5;
 
   /* text */
@@ -113,6 +114,7 @@
   --bg-hover:    #232326;
   --bg-selected: #1F1F22;
   --bg-active:   #2D2D31;
+  --bg-nav-active: #2D2D31; /* the current row in a sidebar */
   --bg-disabled: #1C1C1F;
 
   /* text */
@@ -198,6 +200,7 @@
   --bg-hover:    rgba(255, 255, 255, 0.05);
   --bg-selected: rgba(86, 200, 255, 0.11);
   --bg-active:   rgba(255, 255, 255, 0.08);
+  --bg-nav-active: rgba(86, 200, 255, 0.11); /* the current row in a sidebar: Peek's selected row (Katerina, 2 October) */
   --bg-disabled: #191d24;
 
   /* text */
@@ -285,6 +288,7 @@
   --bg-hover:    rgba(255, 255, 255, 0.05);
   --bg-selected: rgba(75, 88, 212, 0.16);
   --bg-active:   rgba(255, 255, 255, 0.08);
+  --bg-nav-active: rgba(255, 255, 255, 0.08); /* the current row in a sidebar */
   --bg-disabled: #16181f;
 
   /* text */
@@ -390,6 +394,7 @@
   --bg-hover:    rgba(0, 0, 0, 0.064);
   --bg-selected: #e5e5e6; /* --color-bg-tertiary */
   --bg-active:   #e1e1e2; /* the selected sidebar row (lch 89.54%) */
+  --bg-nav-active: #e1e1e2; /* the current row in a sidebar */
   --bg-disabled: #efeff0; /* the base, as light has it */
 
   /* text */