@estiva-app/ui 0.1.0

package/src/Tooltip.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Button } from './Button'
+import { Tooltip, WithTooltip } from './Tooltip'
+
+const meta = {
+  title: 'Primitives/Tooltip',
+  component: Tooltip,
+  args: { label: 'Add to starred' },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** The static tooltip surface. */
+export const Default: Story = {}
+
+/** Hover the button — WithTooltip portals the tooltip above the trigger. */
+export const OnHoverTop: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <WithTooltip label="Add to starred" placement="top">
+      <Button variant="outlined">Hover me</Button>
+    </WithTooltip>
+  ),
+}
+
+/** Bottom placement. */
+export const OnHoverBottom: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <WithTooltip label="Sort by" placement="bottom">
+      <Button variant="outlined">Hover me</Button>
+    </WithTooltip>
+  ),
+}
+
+/** The reason a disabled control gives — wrap the control, not the form around it. */
+export const OnADisabledControl: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <WithTooltip label="Available after sign-in">
+      <Button variant="primary" disabled>
+        Post
+      </Button>
+    </WithTooltip>
+  ),
+}

package/src/Tooltip.tsx

@@ -0,0 +1,70 @@
+import { useCallback, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from './cn'
+
+/**
+ * Peek's Tooltip and WithTooltip (2026-08-28), verbatim, in one file.
+ *
+ * `Tooltip` is the surface: a 30px elevated pill with a caption. `WithTooltip`
+ * wraps a trigger and portals the surface above or below it on hover, fixed
+ * to the viewport and kept 8px inside it. The wrapper is `inline-flex` and
+ * shrinks nothing — wrap a control, never a block (a form inside it
+ * collapses to its content width; Ship learnt that).
+ */
+export interface TooltipProps {
+  label: string
+  className?: string
+}
+
+export function Tooltip({ label, className }: TooltipProps) {
+  return (
+    <div role="tooltip" className={cn('bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center px-2 shadow-lg', className)}>
+      <span className="text-caption text-text-primary whitespace-nowrap">{label}</span>
+    </div>
+  )
+}
+
+export interface WithTooltipProps {
+  label: string
+  placement?: 'top' | 'bottom'
+  children: ReactNode
+}
+
+const GAP = 6
+const VIEWPORT_PAD = 8
+
+export function WithTooltip({ label, placement = 'top', children }: WithTooltipProps) {
+  const [show, setShow] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const [style, setStyle] = useState<CSSProperties>({ position: 'fixed', zIndex: 9999, pointerEvents: 'none', visibility: 'hidden' })
+
+  const reposition = useCallback(() => {
+    const trigger = ref.current
+    const tip = tooltipRef.current
+    if (!trigger || !tip) return
+    const triggerRect = trigger.getBoundingClientRect()
+    const tipRect = tip.getBoundingClientRect()
+    const top = placement === 'bottom' ? triggerRect.bottom + GAP : triggerRect.top - tipRect.height - GAP
+    let left = triggerRect.left + triggerRect.width / 2 - tipRect.width / 2
+    left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - tipRect.width - VIEWPORT_PAD))
+    setStyle({ position: 'fixed', top, left, zIndex: 9999, pointerEvents: 'none', visibility: 'visible' })
+  }, [placement])
+
+  useLayoutEffect(() => {
+    if (show) reposition()
+  }, [show, reposition])
+
+  return (
+    <div ref={ref} className="inline-flex shrink-0" onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
+      {children}
+      {show &&
+        createPortal(
+          <div ref={tooltipRef} style={style}>
+            <Tooltip label={label} />
+          </div>,
+          document.body,
+        )}
+    </div>
+  )
+}

package/src/cn.ts

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Peek's `cn`: clsx for the conditionals, tailwind-merge for the conflicts.
+ *
+ * Remember the pitfall the README records: a custom text-size class in a
+ * merged list is dropped when a `text-{colour}` follows it. Inside this
+ * package, sizes are arbitrary values (`text-[12px]`), never the token class.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+/**
+ * @estiva-app/ui — the primitives.
+ *
+ * Shipped **built**: `dist/index.js` (esbuild, one bundle, React external) plus
+ * `.d.ts` from `tsc`. Not source — a package of `.ts` is compiled with the
+ * *consumer's* tsconfig, and Ship's `noUnusedLocals` alone is enough to fail a
+ * build over a library it does not own. See estiva-docs ADR 0002 §4a.
+ *
+ * `src/` still ships in the tarball, so stepping into a component lands on the
+ * TypeScript that produced it.
+ */
+export { Avatar, hueFor, initialsFor, type AvatarProps } from './Avatar'
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button'
+export { Chip, type ChipProps, type ChipType } from './Chip'
+export { IconButton, type IconButtonProps, type IconButtonVariant } from './IconButton'
+export { Tooltip, WithTooltip, type TooltipProps, type WithTooltipProps } from './Tooltip'
+export { Field, type FieldProps } from './Field'
+export { Select, type SelectOption, type SelectProps } from './Select'
+export { TextInput, type TextInputProps } from './TextInput'
+export { Textarea, type TextareaProps } from './Textarea'
+export { DialogShell, type DialogShellProps } from './DialogShell'
+export { Divider, type DividerProps } from './Divider'
+export { EmptyState, type EmptyStateProps } from './EmptyState'
+export { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
+export { cn } from './cn'

package/tailwind-preset.js

@@ -0,0 +1,162 @@
+import { fileURLToPath } from 'node:url'
+import plugin from 'tailwindcss/plugin'
+
+/**
+ * The globs a consumer must add to its own `content`, exported so nobody has to
+ * write a path into this package by hand.
+ *
+ * **Spread these — do not rely on the preset carrying them.** Tailwind does not
+ * merge `content` from a preset: measured on 2026-08-26 against Peek, with the
+ * preset exporting exactly these absolute paths in its own `content`, the class
+ * `max-h-72` — used by `Select` and by nothing in Peek — was still absent from
+ * the built stylesheet. Moving the identical string into Peek's own `content`
+ * put it there. The preset is not a place this can be fixed.
+ *
+ * Why it matters: Tailwind purges every class it cannot find, so the failure is
+ * a build that succeeds, tests that pass and tokens that are present, with
+ * components rendering at the wrong size. Nothing reports it.
+ *
+ * The paths are absolute and derived from this file's own location, because a
+ * `content` entry resolves against the consumer's working directory and the
+ * consumer has no reliable relative path to us.
+ *
+ *   import estiva, { estivaContent } from '@estiva-app/ui/tailwind-preset'
+ *   export default {
+ *     presets: [estiva],
+ *     content: [...estivaContent, './index.html', './src/**\/*.{ts,tsx}'],
+ *   }
+ */
+const own = (glob) => fileURLToPath(new URL(glob, import.meta.url))
+export const estivaContent = [own('./dist/*.js'), own('./src/*.{ts,tsx}')]
+
+/**
+ * The Estiva Tailwind preset — the token NAMES every Estiva app shares.
+ *
+ * Peek's `tailwind.config.js` `theme.extend`, verbatim (2026-08-28), minus
+ * three tokens that are Peek's product and not the suite's: `bg-private`,
+ * `border-private` (the huddle register) and `logo` (its wordmark). Peek
+ * keeps those in its own `extend`, which merges over this preset.
+ *
+ * Every colour resolves a CSS variable, and the variables live in
+ * `tokens.css` next to this file, one block per theme. Changing a value is a
+ * change to a theme; changing a NAME is a change to the contract and needs
+ * every consumer looked at.
+ *
+ * Consume with:
+ *
+ *   import estiva from '@estiva-app/ui/tailwind-preset'
+ *   export default { presets: [estiva], content: [...your app's], theme: { extend: { ...your own } } }
+ *
+ * A consumer lists only its own files: the preset already contributes this
+ * package's, and Tailwind concatenates the two.
+ *
+ * `darkMode: 'class'` is here because Peek's `dark:` variants key on the
+ * `.dark` class, and `tokens.css` answers to both that class and
+ * `data-theme="dark"`. The `signal:` variant is here for the same reason:
+ * `signal` is a theme in `tokens.css`, and a shared component may carry
+ * the few Signal-only touches Peek gives it (a semibold primary, a mono
+ * chip label) without the consuming app knowing — an app that never
+ * applies `.signal` never sees them.
+ *
+ * @type {import('tailwindcss').Config}
+ */
+export default {
+
+  darkMode: 'class',
+  plugins: [plugin(({ addVariant }) => addVariant('signal', '.signal &'))],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Geist', 'system-ui', 'sans-serif'],
+        mono: ['Geist Mono', 'ui-monospace', 'monospace'],
+      },
+      fontSize: {
+        // Headings
+        h1: ['26px', { lineHeight: '115%', letterSpacing: '-0.02em', fontWeight: '600' }],
+        h2: ['22px', { lineHeight: '120%', letterSpacing: '-0.01em', fontWeight: '600' }],
+        h3: ['18px', { lineHeight: '120%', letterSpacing: '0',        fontWeight: '600' }],
+        h4: ['16px', { lineHeight: '150%', letterSpacing: '-0.01em', fontWeight: '600' }],
+        h5: ['12px', { lineHeight: '100%', letterSpacing: '0',        fontWeight: '500' }],
+        // Body
+        'body-1': ['16px', { lineHeight: '150%', letterSpacing: '0', fontWeight: '400' }],
+        'body-2': ['14px', { lineHeight: '140%', letterSpacing: '0', fontWeight: '400' }],
+        'body-2-strong': ['14px', { lineHeight: '140%', letterSpacing: '0', fontWeight: '500' }],
+        caption: ['12px', { lineHeight: '120%', letterSpacing: '0', fontWeight: '400' }],
+        menu:    ['9px',  { lineHeight: '115%', letterSpacing: '0', fontWeight: '500' }],
+        // Component-specific. In shared components prefer explicit arbitrary
+        // values (`text-[12px] leading-[12px]`): tailwind-merge silently drops
+        // a custom text-size class that is followed by a `text-{color}` class.
+        'btn-default': ['14px', { lineHeight: '14px', letterSpacing: '0', fontWeight: '500' }],
+        'btn-small':   ['12px', { lineHeight: '12px', letterSpacing: '0', fontWeight: '500' }],
+        'input-label':  ['12px', { lineHeight: '115%', letterSpacing: '0', fontWeight: '500' }],
+        'input-value':  ['14px', { lineHeight: '140%', letterSpacing: '0', fontWeight: '400' }],
+        'input-helper': ['12px', { lineHeight: '120%', letterSpacing: '0', fontWeight: '400' }],
+        'chip':         ['11px', { lineHeight: '110%', letterSpacing: '0', fontWeight: '500' }],
+      },
+      borderRadius: {
+        none: '0px',
+        sm:   '4px',
+        md:   '6px',
+        lg:   '8px',
+        xl:   '12px',
+        '2xl': '16px',
+        '3xl': '24px',
+        full: '9999px',
+      },
+      colors: {
+        // bg
+        'bg-base':      'var(--bg-base)',
+        'bg-surface':   'var(--bg-surface)',
+        'bg-elevated':  'var(--bg-elevated)',
+        'bg-inset':     'var(--bg-inset)',
+        'bg-hover':     'var(--bg-hover)',
+        'bg-selected':  'var(--bg-selected)',
+        'bg-active':    'var(--bg-active)',
+        'bg-disabled':  'var(--bg-disabled)',
+        // text
+        'text-primary':   'var(--text-primary)',
+        'text-secondary': 'var(--text-secondary)',
+        'text-muted':     'var(--text-muted)',
+        'text-disabled':  'var(--text-disabled)',
+        'text-inverse':   'var(--text-inverse)',
+        // border
+        'border-subtle':  'var(--border-subtle)',
+        'border-default': 'var(--border-default)',
+        'border-strong':  'var(--border-strong)',
+        'border-focus':   'var(--border-focus)',
+        // accent
+        'accent-primary': 'var(--accent-primary)',
+        'accent-hover':   'var(--accent-hover)',
+        'accent-muted':   'var(--accent-muted)',
+        // semantic
+        'info-default':    'var(--info-default)',
+        'info-muted':      'var(--info-muted)',
+        'warning-default': 'var(--warning-default)',
+        'warning-muted':   'var(--warning-muted)',
+        'success-default': 'var(--success-default)',
+        'success-muted':   'var(--success-muted)',
+        'error-default':   'var(--error-default)',
+        'error-muted':     'var(--error-muted)',
+      },
+      boxShadow: {
+        'sm':  'var(--shadow-sm)',
+        'md':  'var(--shadow-md)',
+        'lg':  'var(--shadow-lg)',
+        // The ring a focused control wears where a theme wants one: Signal's
+        // glow. Every theme defines it; the shared inputs use it under `signal:`.
+        'focus-ring': 'var(--focus-ring)',
+      },
+      keyframes: {
+        'skeleton-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+      },
+      animation: {
+        // Delayed reveal for loading skeletons: invisible for the first 150ms
+        // so fast loads never flash a skeleton (Peek's rule, 2026-07-08).
+        'skeleton-in': 'skeleton-in 0.2s ease-out 0.15s both',
+      },
+    },
+  },
+}

package/tokens.css

@@ -0,0 +1,225 @@
+/*
+  Estiva's design tokens — the VALUES behind the names in tailwind-preset.js,
+  one block per theme. Import once, before anything that uses them:
+
+    @import '@estiva-app/ui/tokens.css';
+
+  Select a theme with `data-theme="<name>"` on <html>. `dark` and `signal`
+  also answer to the `.dark` / `.signal` classes, which is how Peek selects
+  them (`.dark.signal` — Signal layers over dark) and what its `dark:`
+  variants key on. No attribute at all is `light`.
+
+  Which theme is whose: Peek renders `signal`; Ship renders `ship`; `light`
+  and `dark` are the bases Peek's Storybook and Estiva ID's screens use.
+
+  Every block defines every token (tokens.test.ts checks). A theme that left
+  one out would inherit it from `:root` and silently show light values.
+
+  Peek's Signal-only extras (highlight, washes, glows, private, logo, mono)
+  are product, not the contract, and stay in Peek's own `.signal` block.
+*/
+
+/* ─── light ─── Peek's base theme (peek/src/index.css :root, 2026-08-28). */
+:root {
+  /* bg */
+  --bg-base:     #F4F4F5;
+  --bg-surface:  #FFFFFF;
+  --bg-elevated: #FAFAFA;
+  --bg-inset:    #F4F4F5;
+  --bg-hover:    #E9E9EB;
+  --bg-selected: #E4E4E7;
+  --bg-active:   #D4D4D8;
+  --bg-disabled: #F4F4F5;
+
+  /* text */
+  --text-primary:   #18181B;
+  --text-secondary: #52525B;
+  --text-muted:     #A1A1AA;
+  --text-disabled:  #D4D4D8;
+  --text-inverse:   #FAFAFA;
+
+  /* border */
+  --border-subtle:  #F4F4F5;
+  --border-default: #E4E4E7;
+  --border-strong:  #D4D4D8;
+  --border-focus:   #8B5CF6;
+
+  /* accent */
+  --accent-primary: #8B5CF6;
+  --accent-hover:   #7C3AED;
+  --accent-muted:   #EDE9FE;
+
+  /* semantic */
+  --info-default:    #3B82F6;
+  --info-muted:      #DBEAFE;
+  --warning-default: #F59E0B;
+  --warning-muted:   #FEF3C7;
+  --success-default: #0EA06F;
+  --success-muted:   #D1FAE5;
+  --error-default:   #EF4444;
+  --error-muted:     #FEE2E2;
+
+  /* shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
+  --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.16);
+}
+
+/* ─── dark ─── Peek's dark theme (peek/src/index.css .dark, 2026-08-28). */
+.dark,
+:root[data-theme='dark'] {
+  /* bg */
+  --bg-base:     #09090B;
+  --bg-surface:  #141416;
+  --bg-elevated: #1C1C1F;
+  --bg-inset:    #27272A;
+  --bg-hover:    #232326;
+  --bg-selected: #1F1F22;
+  --bg-active:   #2D2D31;
+  --bg-disabled: #1C1C1F;
+
+  /* text */
+  --text-primary:   #FAFAFA;
+  --text-secondary: #AEAEB6; /* nudged up from #A1A1AA (2026-07-23) — brighter bodies, still clearly below primary */
+  --text-muted:     #71717A;
+  --text-disabled:  #52525B;
+  --text-inverse:   #18181B;
+
+  /* border */
+  --border-subtle:  #1F1F22;
+  --border-default: #2D2D31;
+  --border-strong:  #52525B;
+  --border-focus:   #A78BFA;
+
+  /* accent */
+  --accent-primary: #A78BFA;
+  --accent-hover:   #8B5CF6;
+  --accent-muted:   #2E2554;
+
+  /* semantic */
+  --info-default:    #60A5FA;
+  --info-muted:      #172554;
+  --warning-default: #FBBF24;
+  --warning-muted:   #4A3728;
+  --success-default: #34D399;
+  --success-muted:   #0E392B;
+  --error-default:   #F87171;
+  --error-muted:     #4A2828;
+
+  /* shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.30);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.40), 0 2px 4px -2px rgba(0,0,0,0.30);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.40);
+  --focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.16);
+}
+
+
+/* ─── signal ─── Peek's theme, the one it renders (peek/src/index.css .signal, 2026-08-28).
+   Peek applies `.dark.signal`; this block comes after dark, so it wins. Peek's
+   Signal-only extras (washes, glows, highlight, private, logo, mono) stay in Peek. */
+.signal,
+:root[data-theme='signal'] {
+  /* surfaces (5-step, blue-shifted graphite) */
+  --bg-base:     #0e1014;
+  --bg-surface:  #12151a;
+  --bg-elevated: #191d24;
+  --bg-inset:    #20242d;
+  --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-disabled: #191d24;
+
+  /* text */
+  --text-primary:   #eef1f6;
+  --text-secondary: #b2b9c6; /* nudged up from #a6adbb (2026-07-23) — same cool hue, one step brighter */
+  --text-muted:     #6b7280;
+  --text-disabled:  #464c58;
+  --text-inverse:   #06121a;
+
+  /* borders (alpha hairlines) */
+  --border-subtle:  rgba(255, 255, 255, 0.065);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-strong:  rgba(255, 255, 255, 0.22);
+  --border-focus:   #56c8ff;
+
+  /* accent: ice cyan */
+  --accent-primary: #56c8ff;
+  --accent-hover:   #8ad6ff;
+  --accent-muted:   rgba(86, 200, 255, 0.11);
+
+  /* semantic (amber is the attention color) */
+  --info-default:    #8ad6ff;
+  --info-muted:      rgba(86, 200, 255, 0.11);
+  --warning-default: #ffb020;
+  --warning-muted:   rgba(255, 176, 32, 0.12);
+  --success-default: #3fde8c;
+  --success-muted:   rgba(63, 222, 140, 0.11);
+  --error-default:   #ff6b6b;
+  --error-muted:     rgba(255, 107, 107, 0.12);
+
+  /* shadows: black depth + 1px white rim on floating layers */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px -8px rgba(0, 0, 0, 0.55);
+  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.45), 0 22px 60px -16px rgba(0, 0, 0, 0.75);
+  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.5), 0 36px 90px -16px rgba(0, 0, 0, 0.8);
+  /* the glow a focused control wears — Peek's, verbatim */
+  --focus-ring:   0 0 0 3px rgba(86, 200, 255, 0.12), 0 0 28px -8px rgba(86, 200, 255, 0.4);
+}
+
+/* ─── ship ─── Ship's palette (Katerina's ruling, 2026-08-28; ship/web/src/index.css). */
+:root[data-theme='ship'] {
+  color-scheme: dark;
+
+  /* bg */
+  --bg-base:     #0e0f13;
+  --bg-surface:  #16181f;
+  --bg-elevated: #1c1f28;
+  /* Lighter than the surfaces it sits on, as dark has it (its inset is the
+     lightest background): a neutral Chip and a search field are bg-inset. */
+  --bg-inset:    #1f2330;
+  /* Translucent, so a hover reads on every surface. */
+  --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-disabled: #16181f;
+
+  /* text */
+  --text-primary:   #e6e8ee;
+  --text-secondary: #b3b9c7;
+  --text-muted:     #8b91a1;
+  --text-disabled:  #5b6070;
+  /* Light, not dark: "inverse" is the text on the accent, and Ship's accent is
+     dark enough that light text is the readable one (4.9:1). Katerina's
+     ruling for the primary button, 2026-08-27. */
+  --text-inverse:   #e6e8ee;
+
+  /* borders (alpha hairlines, as Signal's — Katerina, 2026-08-28: Ship's
+     inputs should carry the same border as Signal's; an alpha line reads on
+     every surface, the inset field included) */
+  --border-subtle:  rgba(255, 255, 255, 0.065);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-strong:  rgba(255, 255, 255, 0.22);
+  --border-focus:   #4b58d4;
+
+  /* accent — blue with a touch of purple; light text on it reads at 4.9:1 */
+  --accent-primary: #4b58d4;
+  --accent-hover:   #5c69dc;
+  --accent-muted:   #1c2144;
+
+  /* semantic */
+  --info-default:    #5b7be8;
+  --info-muted:      #1a2342;
+  --warning-default: #e0b04a;
+  --warning-muted:   #3a2f14;
+  --success-default: #46c08a;
+  --success-muted:   #123326;
+  --error-default:   #e5697a;
+  --error-muted:     #3a1c22;
+
+  /* shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  /* defined, as every theme must; Ship's controls show focus with the border alone */
+  --focus-ring: 0 0 0 3px rgba(75, 88, 212, 0.16);
+}