@estiva-app/ui 0.1.0

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@estiva-app/ui",
+  "version": "0.1.0",
+  "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src",
+    "tailwind-preset.js",
+    "tokens.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./tokens.css": "./tokens.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "node build.mjs && tsc -p tsconfig.build.json",
+    "storybook": "storybook dev -p 6008 --no-open",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@tabler/icons-react": "^3.41.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
+    "@tabler/icons-react": "^3.41.1",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.27",
+    "esbuild": "^0.28.0",
+    "postcss": "^8.5.8",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^10.5.10",
+    "tailwindcss": "^3.4.19",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.1",
+    "vitest": "^4.1.11"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/estiva-app/estiva-ui.git"
+  }
+}

package/src/Avatar.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Avatar } from './Avatar'
+
+/** A picture, or initials on the person's own colour, or a silhouette. Nothing here comes from an app. */
+const meta = {
+  title: 'Primitives/Avatar',
+  component: Avatar,
+  args: { name: 'Ana Duarte', size: 36 },
+} satisfies Meta<typeof Avatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Two words, two letters, on a colour chosen from the name. */
+export const Initials: Story = {}
+
+/** No name, no picture: the silhouette. Never a key, never a `?`. */
+export const Unnamed: Story = { args: { name: undefined } }
+
+/** A picture — here an inline SVG, so the story needs nothing from anywhere. */
+export const WithPicture: Story = {
+  args: {
+    src: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><rect width="10" height="10" fill="%2346c08a"/><circle cx="5" cy="4" r="2" fill="%23fff"/></svg>',
+  },
+}
+
+/** A picture that fails to load falls back to the initials, not a hole. */
+export const BrokenPicture: Story = { args: { src: 'http://localhost:1/nothing-here.png' } }
+
+/** Peek's size scale, plus the smaller ones Ship uses in rows and menus. */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex items-end gap-3">
+      {[16, 20, 22, 24, 28, 32, 36].map((size) => (
+        <div key={size} className="flex flex-col items-center gap-1">
+          <Avatar {...args} size={size} />
+          <span className="text-[12px] leading-[120%] text-text-muted">{size}</span>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/** The same eight people always get the same eight colours. */
+export const Palette: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex gap-2">
+      {['Ana Duarte', 'Ravi Mehta', 'Mara Sato', 'Jonas Weber', 'Lin Chen', 'Sofia Rossi', 'Tomás Silva', 'Aiko Tanaka'].map((name) => (
+        <Avatar key={name} name={name} />
+      ))}
+    </div>
+  ),
+}

package/src/Avatar.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { IconUserFilled } from '@tabler/icons-react'
+import { cn } from './cn'
+
+/**
+ * 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.
+ *
+ * Peek's Avatar (2026-08-28), made self-contained: Peek's version found the
+ * picture itself, by name, from Peek's data (an upload in Convex, else the
+ * demo portrait), and switched the initials on only under its Signal theme.
+ * Neither belongs in a shared component, so this one takes the picture URL
+ * from its caller and draws the initials in every theme. Peek keeps a
+ * three-line wrapper that resolves the picture; Ship passes the relay's
+ * `kind:0` picture straight in.
+ *
+ * Initials come from a *name*, never from a key: a component that accepted a
+ * pubkey would eventually show one (Ship's ruling, 2026-08-24). An unnamed
+ * person is the silhouette — `?` on a bright gradient read as an error badge
+ * rather than a person (Peek, FEE-1).
+ *
+ * The hue is a fallback palette, not a token: it is per person, chosen
+ * from the name so the same person is the same colour everywhere, and a
+ * theme has no say in it. Peek's eight, verbatim.
+ */
+const HUES = ['#56c8ff', '#ff8f6b', '#4ade8c', '#b18cff', '#ffc94d', '#ff7eb0', '#7ea8ff', '#5fdfd6']
+
+export const hueFor = (key: string) => {
+  let h = 0
+  for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) | 0
+  return HUES[Math.abs(h) % HUES.length]
+}
+
+/** Peek's rule: the first letter of the first two words. */
+export const initialsFor = (name: string) =>
+  name
+    .split(' ')
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+
+export interface AvatarProps {
+  /** The picture URL, resolved by the caller. A picture that fails to load falls back to the initials. */
+  src?: string
+  /** The person's name — where the initials and the colour come from. */
+  name?: string
+  /** Alt text for the picture; the name when absent. Also the initials' source when there is no name. */
+  alt?: string
+  /** Pixels. Peek's scale: 16 · 24 · 32 · 36 (default). */
+  size?: number
+  className?: string
+}
+
+export function Avatar({ src, name, alt = '', size = 36, className }: AvatarProps) {
+  const [broken, setBroken] = useState(false)
+  const label = name || alt
+  const picture = src && !broken ? src : undefined
+  return (
+    <div className={cn('rounded-sm overflow-hidden shrink-0 bg-bg-inset', className)} style={{ width: size, height: size }}>
+      {picture ? (
+        <img src={picture} alt={alt || name || ''} className="w-full h-full object-cover" onError={() => setBroken(true)} />
+      ) : label ? (
+        <div
+          className="w-full h-full flex items-center justify-center font-semibold"
+          style={{
+            color: '#08121c',
+            fontSize: Math.round(size * 0.36),
+            background: `linear-gradient(160deg, color-mix(in srgb, ${hueFor(label)} 92%, #fff) 0%, color-mix(in srgb, ${hueFor(label)} 70%, #0b0d11) 100%)`,
+          }}
+        >
+          {initialsFor(label)}
+        </div>
+      ) : (
+        <div className="w-full h-full bg-accent-muted flex items-center justify-center text-text-muted">
+          <IconUserFilled size={Math.round(size * 0.5)} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/Button.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconPlus } from '@tabler/icons-react'
+import { Button } from './Button'
+
+const meta = {
+  title: 'Primitives/Button',
+  component: Button,
+  args: { children: 'Button', variant: 'muted', size: 'default', disabled: false },
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['primary', 'outlined', 'muted', 'destructive'] },
+    size: { control: 'inline-radio', options: ['default', 'small'] },
+    leadingIcon: { control: false },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = { args: { variant: 'primary' } }
+export const Outlined: Story = { args: { variant: 'outlined' } }
+export const Muted: Story = { args: { variant: 'muted' } }
+/** The muted button in the error colour — for "Delete …" and its kind. Ship's addition. */
+export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete project' } }
+export const Small: Story = { args: { variant: 'primary', size: 'small' } }
+export const WithLeadingIcon: Story = { args: { variant: 'primary', leadingIcon: <IconPlus stroke={1.5} className="size-4" /> } }
+/** Disabled is for a control that is momentarily unavailable — say why, with a tooltip. A control someone may never use is absent, not disabled. */
+export const Disabled: Story = { args: { variant: 'primary', disabled: true } }
+
+/** Every variant × size × icon × disabled combination on one canvas. */
+export const AllVariants: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {(['primary', 'outlined', 'muted', 'destructive'] as const).map((variant) => (
+        <div key={variant} className="flex items-center gap-3">
+          {(['default', 'small'] as const).map((size) => (
+            <div key={size} className="flex items-center gap-2">
+              <Button variant={variant} size={size}>
+                Button
+              </Button>
+              <Button variant={variant} size={size} leadingIcon={<IconPlus stroke={1.5} className={size === 'small' ? 'size-3.5' : 'size-4'} />}>
+                Button
+              </Button>
+              <Button variant={variant} size={size} disabled>
+                Button
+              </Button>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/Button.tsx

@@ -0,0 +1,67 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cn } from './cn'
+
+/**
+ * Peek's Button (2026-08-28), verbatim, plus what Ship added and Peek should
+ * adopt: a `destructive` variant — the muted button in the error colour, for
+ * "Delete project" and its kind; a destructive action is a button like any
+ * other, not a dotted link — and `type="button"` by default, so a button
+ * inside a form submits it only when asked to.
+ *
+ * Three variants and two sizes: 32px default / 24px small, 6px radius, 500
+ * weight. Sizes are spelled as arbitrary values for the reason the README
+ * records: tailwind-merge drops a custom `text-{size}` that is followed by a
+ * `text-{colour}`.
+ *
+ * The primary reads in `text-inverse` on the accent — a theme decides what
+ * that is (dark on Peek's light accents, light on Ship's dark one). Under
+ * Signal it is also semibold, as Peek has it.
+ */
+export type ButtonVariant = 'primary' | 'outlined' | 'muted' | 'destructive'
+export type ButtonSize = 'default' | 'small'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  /** 16px, stroke 1.5 on the default size; 14px on small. */
+  leadingIcon?: ReactNode
+  children: ReactNode
+}
+
+export function Button({
+  variant = 'muted',
+  size = 'default',
+  leadingIcon,
+  className,
+  children,
+  disabled,
+  type = 'button',
+  ...props
+}: ButtonProps) {
+  const hasLeadingIcon = !!leadingIcon
+  return (
+    <button
+      type={type}
+      className={cn(
+        'inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium',
+        size === 'default' && 'h-8 text-[14px] leading-[14px]',
+        size === 'small' && 'h-6 text-[12px] leading-[12px]',
+        // Extra right padding beside a leading icon, for optical balance.
+        size === 'default' && (hasLeadingIcon ? 'pl-2 pr-3' : 'px-2'),
+        size === 'small' && (hasLeadingIcon ? 'pl-1.5 pr-2' : 'px-1.5'),
+        !disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold',
+        !disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer',
+        !disabled && variant === 'muted' && 'hover:bg-bg-hover text-text-primary cursor-pointer',
+        !disabled && variant === 'destructive' && 'hover:bg-error-muted text-error-default cursor-pointer',
+        disabled && 'bg-bg-disabled text-text-disabled pointer-events-none',
+        disabled && variant === 'outlined' && 'border border-border-default',
+        className,
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {leadingIcon}
+      {children}
+    </button>
+  )
+}

package/src/Chip.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconArrowUp, IconMessage2 } from '@tabler/icons-react'
+import { Chip } from './Chip'
+
+const meta = {
+  title: 'Primitives/Chip',
+  component: Chip,
+  args: { type: 'neutral', label: 'Label' },
+  argTypes: {
+    type: { control: 'inline-radio', options: ['neutral', 'brand', 'info', 'warning', 'success', 'error'] },
+    leadingIcon: { control: false },
+    trailingIcon: { control: false },
+  },
+} satisfies Meta<typeof Chip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Neutral: Story = {}
+/** A count in the brand colour — "1 new". */
+export const Brand: Story = { args: { type: 'brand', label: '1 new' } }
+export const WithLeadingIcon: Story = { args: { type: 'info', label: 'Replies', leadingIcon: <IconMessage2 className="size-3" stroke={1.5} /> } }
+export const WithTrailingIcon: Story = { args: { type: 'success', label: 'Sorted', trailingIcon: <IconArrowUp className="size-3" stroke={1.5} /> } }
+/** A count alone. */
+export const CountOnly: Story = { args: { type: 'neutral', label: '2' } }
+
+/** All six colour types. */
+export const AllTypes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-2">
+      {(['neutral', 'brand', 'info', 'warning', 'success', 'error'] as const).map((type) => (
+        <Chip key={type} type={type} label={type} />
+      ))}
+    </div>
+  ),
+}

package/src/Chip.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+import { cn } from './cn'
+
+/**
+ * Peek's Chip (2026-08-28), verbatim: a 20px pill in one of six colour
+ * types, with room for a 12px icon either side. Under Signal the label is
+ * mono and the coloured types carry a hairline, as Peek has it. The icon
+ * slots centre their icon (Ship's addition — an icon beside text otherwise
+ * rides on the baseline).
+ *
+ * The label is the `chip` type token, 11px / 500; it is a plain class here,
+ * never merged, so tailwind-merge cannot drop it.
+ */
+export type ChipType = 'neutral' | 'brand' | 'info' | 'warning' | 'success' | 'error'
+
+export interface ChipProps {
+  type?: ChipType
+  label?: string
+  leadingIcon?: ReactNode
+  trailingIcon?: ReactNode
+  className?: string
+}
+
+const typeStyles: Record<ChipType, string> = {
+  neutral: 'bg-bg-inset text-text-primary',
+  brand: 'bg-accent-muted text-accent-primary signal:border signal:border-[rgba(86,200,255,0.3)]',
+  info: 'bg-info-muted text-info-default signal:border signal:border-[rgba(86,200,255,0.3)]',
+  warning: 'bg-warning-muted text-warning-default signal:border signal:border-[rgba(255,176,32,0.3)] signal:shadow-[shadow:0_0_5px_rgba(255,176,32,0.4)]',
+  success: 'bg-success-muted text-success-default signal:border signal:border-[rgba(63,222,140,0.3)]',
+  error: 'bg-error-muted text-error-default signal:border signal:border-[rgba(255,107,107,0.3)]',
+}
+
+export function Chip({ type = 'neutral', label, leadingIcon, trailingIcon, className }: ChipProps) {
+  return (
+    <div className={cn('inline-flex items-center justify-center gap-1.5 rounded-full max-h-[20px] min-w-[16px] px-2 py-1', typeStyles[type], className)}>
+      {leadingIcon && <span className="flex size-3 shrink-0 items-center justify-center">{leadingIcon}</span>}
+      {label && (
+        <span className="text-chip whitespace-nowrap signal:font-mono signal:text-[10px] signal:font-semibold signal:tracking-[0.02em] signal:tabular-nums">{label}</span>
+      )}
+      {trailingIcon && <span className="flex size-3 shrink-0 items-center justify-center">{trailingIcon}</span>}
+    </div>
+  )
+}

package/src/DialogShell.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { Button } from './Button'
+import { DialogShell } from './DialogShell'
+import { Field } from './Field'
+import { TextInput } from './TextInput'
+import { Textarea } from './Textarea'
+
+const meta = {
+  title: 'Overlays/DialogShell',
+  component: DialogShell,
+  parameters: {
+    layout: 'fullscreen',
+    // Portals a fixed overlay to document.body — render in an iframe on the
+    // Docs page so it doesn't escape over the docs content.
+    docs: { story: { inline: false, height: '600px' } },
+  },
+  argTypes: { children: { control: false }, footer: { control: false } },
+  args: { title: 'Dialog title', onClose: () => {} },
+} satisfies Meta<typeof DialogShell>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * The reusable dialog scaffold. A new dialog is just the header title, a body
+ * (fields wrapped in `Field`), and a footer of buttons — the portal, backdrop,
+ * card, and chrome all come from `DialogShell`.
+ */
+export const Default: Story = {
+  args: {
+    bodyClassName: 'flex flex-col gap-6',
+    footer: (
+      <>
+        <Button variant="muted">Cancel</Button>
+        <Button variant="primary">Confirm</Button>
+      </>
+    ),
+    children: (
+      <>
+        <Field label="Title" required>
+          <TextInput placeholder="What is this about?" />
+        </Field>
+        <Field label="Notes">
+          <Textarea placeholder="Optional notes…" className="h-[80px]" />
+        </Field>
+      </>
+    ),
+  },
+}
+
+/** A minimal confirmation dialog — single line of body, two buttons. */
+export const Confirmation: Story = {
+  args: {
+    title: 'Delete this?',
+    footer: (
+      <>
+        <Button variant="muted">Cancel</Button>
+        <Button variant="destructive">Delete</Button>
+      </>
+    ),
+    children: <p className="text-body-2 leading-[1.4] text-text-primary">This permanently removes it. It cannot be undone.</p>,
+  },
+}
+
+/** Open it, then close it with the ✕, the backdrop, or Escape. */
+export const OpenAndClose: Story = {
+  args: { footer: null, children: null },
+  render: (args) => {
+    const [open, setOpen] = useState(false)
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Button variant="primary" onClick={() => setOpen(true)}>
+          Open dialog
+        </Button>
+        {open && (
+          <DialogShell
+            {...args}
+            onClose={() => setOpen(false)}
+            footer={
+              <>
+                <Button variant="muted" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+                <Button variant="primary" onClick={() => setOpen(false)}>
+                  Confirm
+                </Button>
+              </>
+            }
+          >
+            <p className="text-body-2 text-text-primary">Escape closes this too.</p>
+          </DialogShell>
+        )}
+      </div>
+    )
+  },
+}

package/src/DialogShell.tsx

@@ -0,0 +1,65 @@
+import { useEffect, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { IconX } from '@tabler/icons-react'
+import { cn } from './cn'
+import { IconButton } from './IconButton'
+
+/**
+ * Peek's DialogShell (2026-08-28), verbatim: the portal, the backdrop, the
+ * 502px card and its chrome — a 48px header with the title and a close
+ * button, a body, a 48px footer for the buttons. A dialog is just what goes
+ * in the three slots. Plus what Ship added: Escape closes it, and the card
+ * says what it is to assistive tech.
+ */
+export interface DialogShellProps {
+  title: string
+  onClose: () => void
+  footer: ReactNode
+  children: ReactNode
+  /** Extra classes on the body (e.g. `flex flex-col gap-6`, or a max height with `overflow-y-auto`). */
+  bodyClassName?: string
+  width?: number
+}
+
+export function DialogShell({ title, onClose, footer, children, bodyClassName, width = 502 }: DialogShellProps) {
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return createPortal(
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} />
+
+      {/* Dialog */}
+      <div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label={title}
+          className="bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden"
+          style={{ width }}
+        >
+          {/* Header */}
+          <div className="h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0">
+            <span className="text-h4 text-text-primary">{title}</span>
+            <IconButton tooltip="Close" aria-label="Close" onClick={onClose}>
+              <IconX size={16} stroke={1.5} />
+            </IconButton>
+          </div>
+
+          {/* Body */}
+          <div className={cn('pl-5 pr-4 py-4 border-b border-border-subtle', bodyClassName)}>{children}</div>
+
+          {/* Footer */}
+          <div className="h-12 flex items-center justify-end gap-2 pl-5 pr-4 shrink-0">{footer}</div>
+        </div>
+      </div>
+    </>,
+    document.body,
+  )
+}

package/src/Divider.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Divider } from './Divider'
+
+/** A hairline in `border-subtle`, inset 12px each side — or standing up between two columns. */
+const meta = {
+  title: 'Primitives/Divider',
+  component: Divider,
+} satisfies Meta<typeof Divider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Between two blocks on the surface. */
+export const Default: Story = {
+  render: () => (
+    <div className="w-80 rounded-lg border border-border-default bg-bg-surface py-3">
+      <p className="px-3 pb-2 text-body-2 text-text-primary">Above the divider</p>
+      <Divider />
+      <p className="px-3 pt-2 text-body-2 text-text-primary">Below the divider</p>
+    </div>
+  ),
+}
+
+/** Inside a menu — on the elevated surface, full width (`mx-0`). */
+export const InAMenu: Story = {
+  render: () => (
+    <div className="w-72 rounded-lg border border-border-default bg-bg-elevated p-2 text-body-2 text-text-primary shadow-lg">
+      <div className="px-2 py-1.5">First action</div>
+      <Divider className="mx-0 my-2" />
+      <div className="px-2 py-1.5">Second action</div>
+    </div>
+  ),
+}
+
+/** Standing between two columns, the height of its row. Ship's addition. */
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-40 w-96 gap-6 text-body-2 text-text-primary">
+      <div className="flex-1">Content</div>
+      <Divider orientation="vertical" />
+      <div className="w-32">Rail</div>
+    </div>
+  ),
+}

package/src/Divider.tsx

@@ -0,0 +1,22 @@
+import { cn } from './cn'
+
+/**
+ * Peek's Divider (2026-08-28): a hairline in `border-subtle`, inset 12px each
+ * side. Plus what Ship added: `orientation="vertical"` — the same hairline
+ * standing up, stretching to its row's height, no inset — and the separator
+ * role for assistive tech.
+ */
+export interface DividerProps {
+  orientation?: 'horizontal' | 'vertical'
+  className?: string
+}
+
+export function Divider({ orientation = 'horizontal', className }: DividerProps) {
+  return (
+    <div
+      role="separator"
+      aria-orientation={orientation}
+      className={cn('bg-border-subtle', orientation === 'horizontal' ? 'h-px mx-3' : 'w-px self-stretch shrink-0', className)}
+    />
+  )
+}

package/src/EmptyState.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconLock } from '@tabler/icons-react'
+import { EmptyState } from './EmptyState'
+
+const meta = {
+  title: 'Feedback/EmptyState',
+  component: EmptyState,
+  args: { message: 'Nothing here yet.' },
+  argTypes: { icon: { control: false } },
+} satisfies Meta<typeof EmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** The default icon with the caller's words. */
+export const Default: Story = {}
+export const LongerMessage: Story = { args: { message: 'No topics yet. Start one from any conversation.' } }
+export const CustomIcon: Story = { args: { icon: <IconLock size={16} stroke={1.5} />, message: 'Nothing you can read here yet.' } }