@lovett/ui 0.0.11 → 0.2.0

package/src/thread/reactions.tsx

@@ -0,0 +1,415 @@
+/**
+ * Reactions and votes — the two engagement models, never both at once.
+ *
+ * ADR-147 D8. Reactions are ACKNOWLEDGEMENT, votes are RANKING. A surface
+ * picks exactly one: task threads take reactions, community and roadmap take
+ * votes. Mixing them asks a reader to decide whether a heart means "I agree"
+ * or "this should be higher", and the answer is different per person.
+ *
+ * REACTIONS ARE EMOJI. Owner instruction, 2026-09-06, overriding the "Lucide
+ * glyph, never emoji" half of D8: "more emojis rather than svgs (this is where
+ * emojis are allowed)". This is the ONE carve-out from CLAUDE.md §6 and the
+ * house no-emoji rule — code, comments, commit messages and UI copy are all
+ * still emoji-free. It is a defensible carve-out because a reaction IS the
+ * glyph: the emoji is the content, not decoration standing in for it.
+ *
+ * D8's other two reasons are untouched, and they were the load-bearing ones:
+ *
+ *   • The set stays BOUNDED, and what we store is still the KEY (`up`,
+ *     `heart`, …), never the emoji literal. An open picker would mean an
+ *     unbounded string column that cannot be enumerated or aggregated.
+ *   • Because the key is what persists, the glyph is a presentation detail we
+ *     can change later without a migration. Storing the literal would weld the
+ *     2026 rasterisation into the database.
+ *
+ * TWO CONSEQUENCES OF EMOJI THAT NEEDED HANDLING:
+ *
+ *   • They do not inherit `currentColor`, so the viewer-reacted state cannot be
+ *     signalled by glyph colour the way a Lucide icon's would be. It is carried
+ *     entirely by the chip — accent border, opaque step-up, accent-ink count —
+ *     plus `aria-pressed`. Colour was never the only cue, which is why this
+ *     survived the switch unchanged.
+ *   • They need an explicit font stack. A host that sets a narrow
+ *     `font-family` on an ancestor turns an emoji into tofu, and the thread
+ *     primitive does not control its host's typography.
+ *
+ * The remaining correction to the port still holds: state is props in,
+ * callbacks out. The reference held vote state in local `useState`, so closing
+ * the dialog threw the vote away. Nothing in this file remembers anything.
+ *
+ * The selected state is an OPAQUE step-up, not an alpha tint (CLAUDE.md §2):
+ * an unreacted chip is recessed (`--surface-inset`), a reacted one steps up to
+ * `--surface-card` with an accent border and a shadow. Two translucent layers
+ * stacked is exactly how a selected element ends up rendering darker than the
+ * track it sits in.
+ */
+
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+import { ArrowBigDown, ArrowBigUp, SmilePlus } from 'lucide-react'
+import { cn } from '../lib/utils'
+import { THREAD_REACTION_KEYS, type ThreadReactionCount, type ThreadReactionKey, type ThreadVote } from './types'
+
+/**
+ * The emoji font stack, as a value rather than a class so it can be applied to
+ * exactly the glyph and nothing else. `--font-emoji` is declared by `.ds-thread`
+ * so a host can substitute a bundled font; the literal fallback is what keeps
+ * these from rendering as tofu when `ReactionBar` is used outside a thread, or
+ * under an ancestor with a narrow `font-family`.
+ */
+const EMOJI_FONT =
+  'var(--font-emoji, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif)'
+
+interface ReactionMeta {
+  /**
+   * The glyph. Chosen for CROSS-PLATFORM STABILITY, not expressiveness — every
+   * one below renders as recognisably the same object on Apple, Windows and
+   * Android, because a reaction whose meaning changes with the reader's OS is
+   * worse than no reaction. That rules out the expressive faces (the same
+   * codepoint is a smirk on one platform and a grimace on another) and the
+   * gesture emoji, whose skin-tone and orientation handling differ.
+   */
+  readonly emoji: string
+  /**
+   * Sentence case, names what it MEANS rather than what it looks like. This is
+   * the accessible name — a screen reader announcing "party popper" has told
+   * someone what the picture is and nothing about what pressing it says.
+   */
+  readonly label: string
+}
+
+export const REACTION_META: Readonly<Record<ThreadReactionKey, ReactionMeta>> = {
+  // Thumbs up: the single most consistently drawn emoji there is.
+  up: { emoji: '\u{1F44D}', label: 'Agree' },
+  // Red heart. Identical silhouette and hue everywhere; the VS16 is required or
+  // some platforms fall back to a monochrome text-presentation heart.
+  heart: { emoji: '\u{2764}\u{FE0F}', label: 'Love this' },
+  // Party popper: a cone plus confetti on every platform.
+  celebrate: { emoji: '\u{1F389}', label: 'Celebrate' },
+  // Eyes: two eyes looking aside, unambiguous everywhere.
+  eyes: { emoji: '\u{1F440}', label: 'Looking at this' },
+  // White heavy check mark — the GREEN-BOXED one. Deliberately not U+2714,
+  // which Apple draws grey-black and Windows draws green: the same codepoint
+  // reading "done" or "just a tick" by platform is exactly the failure mode.
+  check: { emoji: '\u{2705}', label: 'Done' },
+  // Red question mark ornament. Red on all three, unlike U+2753's text variant.
+  question: { emoji: '\u{2754}', label: 'Question' },
+}
+
+/**
+ * The glyph itself. `aria-hidden` because the button's `aria-label` is the
+ * accessible name — without this a reader would announce the emoji's Unicode
+ * name after the label, which is the "party popper" problem twice over.
+ */
+function ReactionGlyph({ emoji }: { readonly emoji: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className="flex h-[1lh] shrink-0 items-center leading-none"
+      style={{ fontFamily: EMOJI_FONT, fontSize: '12px' }}
+    >
+      {emoji}
+    </span>
+  )
+}
+
+const CHIP_BASE = cn(
+  'inline-flex items-center justify-center gap-[var(--space-1)] border px-[var(--space-2)] text-[12px] font-semibold tabular-nums',
+  'transition-[background-color,border-color,color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+  'motion-reduce:transition-none',
+  'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+  'active:scale-[0.96] motion-reduce:active:scale-100',
+  'disabled:cursor-not-allowed disabled:opacity-60',
+)
+
+const CHIP_RESTING = cn(
+  'border-[rgb(var(--border))] bg-[rgb(var(--surface-inset))] text-[rgb(var(--text-secondary))]',
+  'hover:border-[rgb(var(--border-strong))] hover:bg-[rgb(var(--surface-hover))]',
+)
+
+const CHIP_ACTIVE = cn(
+  'border-[rgb(var(--accent))] bg-[rgb(var(--surface-card))] text-[rgb(var(--accent-ink))]',
+  '[box-shadow:var(--shadow-sm)]',
+)
+
+/**
+ * The chip's box, `--thread-action-h` (24). It went 24 → 32 when emoji landed
+ * ("a tap target, not a footnote") and back to 24 on the owner's eyeball pass
+ * ("icons are still a little too big, maybe 30% smaller"). 24 is also the
+ * accessibility floor, so it cannot go lower without the transparent-padding
+ * trick the rail uses; the glyphs inside shrank instead. Declared as a style
+ * rather than a class because it reads a thread-scoped custom property, with a
+ * literal fallback for use outside `.ds-thread`.
+ */
+const CHIP_SIZE: CSSProperties = {
+  blockSize: 'var(--thread-action-h, var(--space-8))',
+  borderRadius: 'var(--radius-sm)',
+}
+
+/** Icon-only variants: square, so the glyph sits on the chip's optical centre. */
+const CHIP_SQUARE: CSSProperties = {
+  ...CHIP_SIZE,
+  inlineSize: 'var(--thread-action-h, var(--space-8))',
+}
+
+export interface ReactionBarProps {
+  readonly reactions: readonly ThreadReactionCount[]
+  readonly onReact?: ((key: ThreadReactionKey) => void) | undefined
+  readonly disabled?: boolean | undefined
+  readonly className?: string | undefined
+}
+
+export function ReactionBar({ reactions, onReact, disabled = false, className }: ReactionBarProps) {
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const pickerId = useId()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  const present = reactions.filter((reaction) => reaction.count > 0)
+  const canReact = onReact !== undefined && !disabled
+
+  /**
+   * Close the picker, moving focus back to the trigger BEFORE the close.
+   *
+   * This ordering is the whole point. The panel below is always mounted and
+   * goes `aria-hidden` + `tabIndex={-1}` when it closes, so closing it while a
+   * reaction button inside it still holds focus strands that focus on an
+   * element that is not in the accessibility tree — browsers then drop it to
+   * `<body>` and the next Tab restarts from the top of the document. Calling
+   * `focus()` synchronously first means focus lands on the trigger while the
+   * panel is still open and focusable, and React's batching applies the close
+   * in the same commit.
+   *
+   * `restoreFocus` is false for exactly one path: a pointer press outside. The
+   * press is already choosing its own focus target, and pulling focus back to
+   * the trigger would fight it.
+   */
+  const closePicker = useCallback((restoreFocus: boolean) => {
+    if (restoreFocus) triggerRef.current?.focus()
+    setPickerOpen(false)
+  }, [])
+
+  /**
+   * Dismiss on a pointer press outside the bar.
+   *
+   * Bound only WHILE OPEN and removed by the effect's own cleanup, so there is
+   * no always-on document listener and nothing survives an unmount — a global
+   * listener registered once per bar for the life of the thread would be one
+   * per comment, all of them idle.
+   *
+   * `pointerdown` rather than `click`: it fires before focus moves, so the
+   * decision about where focus should land is made while the answer is still
+   * knowable. `focusout` was the other candidate and is wrong here — Safari
+   * does not focus a button on mousedown, so the picker would close before its
+   * own button's click handler ran.
+   */
+  useEffect(() => {
+    if (!pickerOpen) return undefined
+    const onPointerDown = (event: PointerEvent) => {
+      const root = rootRef.current
+      if (root !== null && event.target instanceof Node && root.contains(event.target)) return
+      const panel = panelRef.current
+      // Restore only when focus is inside the panel we are about to hide.
+      closePicker(panel !== null && panel.contains(document.activeElement))
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+    }
+  }, [closePicker, pickerOpen])
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn('flex flex-col items-start', className)}
+      // APG: Escape closes an overlay and returns focus to its trigger. The
+      // handler sits on the bar rather than on the panel so it works from the
+      // trigger too, and it CONSUMES the key when it acted — an Escape aimed at
+      // this picker must not also close the drawer the thread is mounted in.
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape' || !pickerOpen) return
+        event.preventDefault()
+        event.stopPropagation()
+        closePicker(true)
+      }}
+    >
+      <div className="flex flex-wrap items-center gap-[var(--space-1)]">
+        {present.map((reaction) => {
+          const meta = REACTION_META[reaction.key]
+          return (
+            <button
+              key={reaction.key}
+              type="button"
+              // aria-pressed carries the toggle semantics; the label carries the
+              // meaning, because the colour alone must never be the signal.
+              aria-pressed={reaction.viewerReacted}
+              aria-label={`${meta.label} — ${String(reaction.count)}`}
+              disabled={!canReact}
+              onClick={() => {
+                onReact?.(reaction.key)
+              }}
+              className={cn(
+                CHIP_BASE,
+                reaction.viewerReacted ? CHIP_ACTIVE : CHIP_RESTING,
+              )}
+              style={CHIP_SIZE}
+            >
+              <ReactionGlyph emoji={meta.emoji} />
+              <span>{reaction.count}</span>
+            </button>
+          )
+        })}
+
+        {canReact ? (
+          <button
+            ref={triggerRef}
+            type="button"
+            aria-label="Add a reaction"
+            aria-expanded={pickerOpen}
+            aria-controls={pickerId}
+            // Routed through `closePicker` on the way down so that EVERY close
+            // path restores focus, without a reader having to check which ones
+            // do. Focus is already here on a real click; this only matters as
+            // an invariant.
+            onClick={() => {
+              if (pickerOpen) closePicker(true)
+              else setPickerOpen(true)
+            }}
+            className={cn(CHIP_BASE, CHIP_RESTING, 'px-[var(--space-1)]')}
+            style={CHIP_SQUARE}
+          >
+            <SmilePlus size={12} strokeWidth={1.75} aria-hidden="true" />
+          </button>
+        ) : null}
+      </div>
+
+      {/* Mounted, never conditionally rendered — correction 4 to the port.
+          `if (!open) return null` kills the open/close transition outright, so
+          the panel is always in the DOM and driven by `data-open`. Closed rows
+          leave the tab order via tabIndex rather than display:none, which would
+          make the grid-rows transition a no-op. */}
+      {canReact ? (
+        <div
+          ref={panelRef}
+          id={pickerId}
+          data-open={pickerOpen}
+          aria-hidden={!pickerOpen}
+          className={cn(
+            'grid grid-rows-[0fr] opacity-0 data-[open=true]:grid-rows-[1fr] data-[open=true]:opacity-100',
+            'transition-[grid-template-rows,opacity] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+            'motion-reduce:transition-none',
+          )}
+        >
+          <div className="overflow-hidden">
+            <div
+              className="flex flex-wrap items-center gap-[var(--space-1)]"
+              style={{ paddingBlockStart: 'var(--space-1)' }}
+            >
+              {THREAD_REACTION_KEYS.map((key) => {
+                const meta = REACTION_META[key]
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    tabIndex={pickerOpen ? 0 : -1}
+                    aria-label={meta.label}
+                    title={meta.label}
+                    onClick={() => {
+                      onReact?.(key)
+                      // Focus first, then close — the button being pressed is
+                      // the one that is about to become aria-hidden.
+                      closePicker(true)
+                    }}
+                    className={cn(CHIP_BASE, CHIP_RESTING, 'px-0')}
+                    style={CHIP_SQUARE}
+                  >
+                    <ReactionGlyph emoji={meta.emoji} />
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export interface CommentVoteProps {
+  readonly score: number
+  readonly viewerVote: ThreadVote
+  readonly onVote?: ((next: ThreadVote) => void) | undefined
+  readonly disabled?: boolean | undefined
+  readonly className?: string | undefined
+}
+
+/**
+ * The vote variant (D8), exposed so the community surface can choose it in T6.
+ * Controlled: `viewerVote` comes in, `onVote` goes out, nothing is remembered.
+ */
+export function CommentVote({
+  score,
+  viewerVote,
+  onVote,
+  disabled = false,
+  className,
+}: CommentVoteProps) {
+  const up = viewerVote === 1
+  const down = viewerVote === -1
+  const canVote = onVote !== undefined && !disabled
+
+  const buttonClass = (active: boolean) =>
+    cn(
+      'inline-flex items-center justify-center border border-transparent',
+      'transition-[color,background-color,transform] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+      'motion-reduce:transition-none',
+      'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+      'active:scale-[0.96] motion-reduce:active:scale-100',
+      'disabled:cursor-not-allowed disabled:opacity-60',
+      active
+        ? 'text-[rgb(var(--accent-ink))]'
+        : 'text-[rgb(var(--text-tertiary))] hover:bg-[rgb(var(--surface-hover))] hover:text-[rgb(var(--foreground))]',
+    )
+
+  return (
+    <div className={cn('inline-flex items-center gap-[var(--space-1)]', className)}>
+      <button
+        type="button"
+        aria-label={up ? 'Remove upvote' : 'Upvote'}
+        aria-pressed={up}
+        disabled={!canVote}
+        onClick={() => {
+          onVote?.(up ? 0 : 1)
+        }}
+        className={buttonClass(up)}
+        style={CHIP_SQUARE}
+      >
+        <ArrowBigUp size={14} strokeWidth={1.75} aria-hidden="true" />
+      </button>
+      {/* Reserved slot: a score going 9 → 10 must not shove the buttons. */}
+      <span
+        className="text-center text-[13px] font-semibold tabular-nums"
+        style={{
+          minInlineSize: '3ch',
+          color: up || down ? 'rgb(var(--accent-ink))' : 'rgb(var(--text-secondary))',
+        }}
+      >
+        {score}
+      </span>
+      <button
+        type="button"
+        aria-label={down ? 'Remove downvote' : 'Downvote'}
+        aria-pressed={down}
+        disabled={!canVote}
+        onClick={() => {
+          onVote?.(down ? 0 : -1)
+        }}
+        className={buttonClass(down)}
+        style={CHIP_SQUARE}
+      >
+        <ArrowBigDown size={14} strokeWidth={1.75} aria-hidden="true" />
+      </button>
+    </div>
+  )
+}

package/src/thread/relative-time.tsx

@@ -0,0 +1,94 @@
+/**
+ * RelativeTime — "now" / "4m" / "3h" / "6d", then an absolute date.
+ *
+ * ADR-147 D16. Three rules, all of them load-bearing:
+ *
+ *   • `now` is a PROP. Nothing here reads the clock. See use-now.ts.
+ *   • The output sits inside `<time dateTime>` carrying the exact ISO value,
+ *     so the precise timestamp survives for a screen reader, a copy-paste, and
+ *     anything scraping the DOM — the relative string is a convenience layer
+ *     over real data, not a replacement for it.
+ *   • The slot has a `min-inline-size` and `tabular-nums`, so "now" becoming
+ *     "10m" cannot reflow the byline. Layout stability: the box's size is
+ *     decoupled from its contents.
+ *
+ * The crossover to absolute is seven days, matching D16. Relative labels stop
+ * being useful roughly when people stop counting in days, and an absolute date
+ * never changes, so nothing past the crossover can reflow anything.
+ */
+
+import { cn } from '../lib/utils'
+
+const MINUTE = 60_000
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+const WEEK = 7 * DAY
+
+/** ISO 8601 for the `datetime` attribute. Invalid input degrades to ''. */
+export function toIsoTimestamp(value: number): string {
+  if (!Number.isFinite(value)) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toISOString()
+}
+
+/** The full, unambiguous timestamp — used as the hover title. */
+export function formatAbsoluteTime(value: number, locale?: string): string {
+  if (!Number.isFinite(value)) return ''
+  return new Date(value).toLocaleString(locale, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+}
+
+/**
+ * Pure. Deterministic for a given (value, now) pair — that is the whole point.
+ * A future timestamp (clock skew between the server and the browser is normal)
+ * reads "now" rather than a negative age.
+ */
+export function formatRelativeTime(
+  value: number,
+  now: number,
+  locale?: string,
+): string {
+  if (!Number.isFinite(value) || !Number.isFinite(now)) return ''
+  const elapsed = now - value
+  if (elapsed < MINUTE) return 'now'
+  if (elapsed < HOUR) return `${String(Math.floor(elapsed / MINUTE))}m`
+  if (elapsed < DAY) return `${String(Math.floor(elapsed / HOUR))}h`
+  if (elapsed < WEEK) return `${String(Math.floor(elapsed / DAY))}d`
+
+  const date = new Date(value)
+  const sameYear = date.getFullYear() === new Date(now).getFullYear()
+  return date.toLocaleDateString(locale, {
+    day: 'numeric',
+    month: 'short',
+    ...(sameYear ? {} : { year: 'numeric' }),
+  })
+}
+
+export interface RelativeTimeProps {
+  /** Epoch milliseconds. */
+  readonly value: number
+  /** Epoch milliseconds, injected from the thread root's single ticker. */
+  readonly now: number
+  readonly locale?: string | undefined
+  readonly className?: string | undefined
+}
+
+export function RelativeTime({ value, now, locale, className }: RelativeTimeProps) {
+  const iso = toIsoTimestamp(value)
+  return (
+    <time
+      // An unparseable timestamp gets no `datetime` rather than an invalid one.
+      {...(iso === '' ? {} : { dateTime: iso })}
+      title={formatAbsoluteTime(value, locale)}
+      className={cn('inline-block shrink-0 tabular-nums', className)}
+      // Reserved slot: 3.5ch fits every relative label ("now" … "6d"). Past the
+      // seven-day crossover the label is an absolute date, which never changes.
+      style={{ minInlineSize: '3.5ch' }}
+    >
+      {formatRelativeTime(value, now, locale)}
+    </time>
+  )
+}