@lovett/ui 0.0.11 → 0.2.0

package/src/thread/composer-footer.tsx

@@ -0,0 +1,125 @@
+/**
+ * The composer's action row, shared by the plain and rich composers.
+ *
+ * It exists because both footers were the same shape written twice, and the
+ * two things the owner asked for on 2026-09-07 both live here:
+ *
+ *   1. a plain/rich switcher at the inline-start, behind a thin vertical rule;
+ *   2. the row must not STACK on a narrow screen. It used to be `flex-wrap`,
+ *      so the formatting buttons pushed Cancel and Comment onto a second line
+ *      and the composer grew a row taller the narrower it got — the opposite
+ *      of what a small screen wants.
+ *
+ * At a phone width even that is not enough: the fixed cluster (switcher,
+ * counter, Cancel, Comment) is wider than 390px on its own, so `flex-nowrap`
+ * simply overflowed sideways and cut the send button in half — trading a stack
+ * for a clip. Two things drop out below `--composer-narrow`, chosen because
+ * neither means anything on a touch device: the character counter, and the
+ * `⌘↵` keycap on the send button. A CONTAINER query, not a media query, since
+ * the composer also lives in a narrow drawer on a wide screen (interface
+ * standards §3).
+ *
+ * The layout rule: exactly one thing may shrink, and it is the toolbar. The
+ * switcher, the counter and the send cluster are `shrink-0` and always whole;
+ * the toolbar sits in a `min-w-0` track that scrolls horizontally once it runs
+ * out of room. Scrolling rather than hiding, because a hidden formatting
+ * button is unreachable, and rather than wrapping, because the send button
+ * moving is what makes a composer feel unstable.
+ */
+
+import type { ReactNode } from 'react'
+import { PencilLine, Type } from 'lucide-react'
+import { Button } from '../button'
+import { cn } from '../lib/utils'
+
+export type ComposerMode = 'plain' | 'rich'
+
+export interface ComposerFooterProps {
+  /** The formatting controls. Rendered in the one track that may shrink. */
+  readonly toolbar?: ReactNode | undefined
+  /** Current editor mode. Omit `onModeChange` to hide the switcher entirely. */
+  readonly mode?: ComposerMode | undefined
+  readonly onModeChange?: ((mode: ComposerMode) => void) | undefined
+  readonly modeDisabled?: boolean | undefined
+  /** Rendered between the toolbar and the send cluster (the character counter). */
+  readonly meta?: ReactNode | undefined
+  /** Cancel + submit. Never shrinks, never wraps. */
+  readonly actions: ReactNode
+}
+
+export function ComposerFooter({
+  toolbar,
+  mode,
+  onModeChange,
+  modeDisabled = false,
+  meta,
+  actions,
+}: ComposerFooterProps) {
+  const showSwitcher = onModeChange !== undefined && mode !== undefined
+  const next: ComposerMode = mode === 'rich' ? 'plain' : 'rich'
+
+  return (
+    <div
+      // NOT `flex-wrap`. See the file header — wrapping is the defect.
+      className="ds-composer-footer flex min-w-0 flex-nowrap items-center gap-[var(--space-1)]"
+      style={{ padding: '0 var(--space-2) var(--space-2)' }}
+    >
+      {showSwitcher ? (
+        <>
+          <Button
+            variant="icon"
+            size="sm"
+            className="shrink-0"
+            aria-label={`Switch to the ${next} editor`}
+            title={`Switch to the ${next} editor`}
+            disabled={modeDisabled}
+            onMouseDown={(event) => {
+              event.preventDefault()
+            }}
+            onClick={() => {
+              onModeChange(next)
+            }}
+          >
+            {mode === 'rich' ? (
+              <PencilLine size={12} strokeWidth={1.75} aria-hidden="true" />
+            ) : (
+              <Type size={12} strokeWidth={1.75} aria-hidden="true" />
+            )}
+          </Button>
+          {/* The thin vertical rule the owner asked for: it separates "which
+              editor" from "what this editor can do", which are different
+              questions about the same box. `--space-4` tall so it reads as a
+              rule beside a 24px control rather than a full-height divider. */}
+          <span
+            aria-hidden="true"
+            className="shrink-0"
+            style={{
+              inlineSize: '1px',
+              blockSize: 'var(--space-4)',
+              marginInline: 'var(--space-1)',
+              background: 'rgb(var(--border))',
+            }}
+          />
+        </>
+      ) : null}
+
+      {/* The ONE thing that may shrink. `min-w-0` lets it actually do so
+          inside a flex row, and the horizontal scroll keeps every control
+          reachable instead of clipping it out of existence. */}
+      <div
+        className={cn(
+          'flex min-w-0 flex-1 items-center gap-[var(--space-1)]',
+          'overflow-x-auto overscroll-x-contain',
+          // A scrollbar in a 24px-tall control strip is louder than the
+          // controls; the row is short enough to drag or shift-wheel.
+          '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+        )}
+      >
+        {toolbar}
+      </div>
+
+      <span className="ds-composer-meta contents">{meta}</span>
+      {actions}
+    </div>
+  )
+}

package/src/thread/composer.tsx

@@ -0,0 +1,319 @@
+/**
+ * ThreadComposer — a textarea, a toolbar that actually formats, and a send.
+ *
+ * ADR-147 D7. Markdown over a `<textarea>`; not TipTap, not contenteditable.
+ * A textarea gets undo, spellcheck, IME and mobile keyboards right for free,
+ * and markdown survives into an email digest, a notification preview, an
+ * agent's context window and a CSV export — none of which a ProseMirror
+ * document survives without a renderer.
+ *
+ * Every toolbar button wires real behaviour (see markdown-format.ts). The
+ * decorative toolbar in the source this replaces is the anti-pattern, and a
+ * button that does nothing is worse than no button: it teaches people the
+ * surface is broken.
+ *
+ * Keyboard: Cmd/Ctrl+Enter sends. Cmd/Ctrl+B / I / K format. Escape cancels a
+ * nested reply composer when one is open.
+ */
+
+import { useCallback, useLayoutEffect, useRef } from 'react'
+import type { KeyboardEvent, ReactNode } from 'react'
+import { Bold, Code, CornerDownRight, Italic, Link as LinkIcon, List } from 'lucide-react'
+import { Button } from '../button'
+import { ComposerFooter, type ComposerMode } from './composer-footer'
+import { Kbd } from '../kbd'
+import { cn } from '../lib/utils'
+import { applyMarkdownFormat, type MarkdownFormat } from './markdown-format'
+
+/**
+ * The send shortcut, spelled the way the platform spells it.
+ *
+ * Read once at module scope from the UA rather than per render: it cannot
+ * change while the page is open, and a value that is stable for the life of the
+ * document must not be a render-time branch. Guarded for a non-DOM environment
+ * (SSR, the test runner), where it resolves to the Ctrl form.
+ */
+const SEND_KEYCAP: string =
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent)
+    ? '⌘↵'
+    : 'Ctrl ↵'
+
+interface ToolbarAction {
+  readonly format: MarkdownFormat
+  readonly label: string
+  readonly icon: typeof Bold
+  readonly shortcut?: string
+}
+
+const TOOLBAR: readonly ToolbarAction[] = [
+  { format: 'bold', label: 'Bold', icon: Bold, shortcut: 'b' },
+  { format: 'italic', label: 'Italic', icon: Italic, shortcut: 'i' },
+  { format: 'code', label: 'Code', icon: Code },
+  { format: 'link', label: 'Link', icon: LinkIcon, shortcut: 'k' },
+  { format: 'list', label: 'Bulleted list', icon: List },
+]
+
+export interface ThreadComposerProps {
+  readonly value: string
+  readonly onChange: (value: string) => void
+  /**
+   * The rich composer supplies verified attachment ticket ids. The plain
+   * composer calls this with no argument, preserving its original contract.
+   */
+  readonly onSubmit: (attachmentIds?: readonly string[]) => void
+  readonly onCancel?: (() => void) | undefined
+  readonly placeholder?: string | undefined
+  /** Sentence case, and it names what happens (interface standards §7). */
+  readonly submitLabel?: string | undefined
+  readonly cancelLabel?: string | undefined
+  readonly sending?: boolean | undefined
+  readonly disabled?: boolean | undefined
+  /**
+   * Display name of the comment being answered. Renders a "Replying to <name>"
+   * line above the field — without it a nested composer is a naked textarea
+   * some distance down a long thread, and which comment it is aimed at is
+   * carried only by where it happens to sit on screen.
+   */
+  readonly replyingTo?: string | undefined
+  readonly avatar?: ReactNode | undefined
+  readonly rows?: number | undefined
+  readonly autoFocus?: boolean | undefined
+  /** Hide the formatting row on a cramped nested composer. */
+  readonly toolbar?: boolean | undefined
+  readonly maxLength?: number | undefined
+  /**
+   * Which editor is active, and how to change it. Both composers render the
+   * switcher so a reader can get back from plain; omit `onModeChange` and no
+   * switcher appears at all (a host that offers only one editor).
+   */
+  readonly mode?: ComposerMode | undefined
+  readonly onModeChange?: ((mode: ComposerMode) => void) | undefined
+  readonly label: string
+  readonly className?: string | undefined
+}
+
+export function ThreadComposer({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder = 'Add a comment…',
+  submitLabel = 'Comment',
+  cancelLabel = 'Cancel',
+  sending = false,
+  disabled = false,
+  replyingTo,
+  avatar,
+  rows = 3,
+  autoFocus = false,
+  toolbar = true,
+  maxLength,
+  mode,
+  onModeChange,
+  label,
+  className,
+}: ThreadComposerProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const pendingSelection = useRef<{ start: number; end: number } | null>(null)
+
+  // The textarea is controlled, so a format applied through React lands one
+  // render later — the caret has to be restored after that render or every
+  // toolbar press dumps the cursor at the end of the field.
+  useLayoutEffect(() => {
+    const selection = pendingSelection.current
+    const element = textareaRef.current
+    if (selection === null || element === null) return
+    pendingSelection.current = null
+    element.focus()
+    element.setSelectionRange(selection.start, selection.end)
+  }, [value])
+
+  const format = useCallback(
+    (next: MarkdownFormat) => {
+      const element = textareaRef.current
+      if (element === null) return
+      const edit = applyMarkdownFormat(
+        value,
+        element.selectionStart,
+        element.selectionEnd,
+        next,
+      )
+      pendingSelection.current = { start: edit.selectionStart, end: edit.selectionEnd }
+      onChange(edit.value)
+    },
+    [onChange, value],
+  )
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      const mod = event.metaKey || event.ctrlKey
+      if (mod && event.key === 'Enter') {
+        event.preventDefault()
+        onSubmit()
+        return
+      }
+      if (event.key === 'Escape' && onCancel !== undefined) {
+        event.preventDefault()
+        onCancel()
+        return
+      }
+      if (!mod) return
+      const action = TOOLBAR.find((entry) => entry.shortcut === event.key.toLowerCase())
+      if (action === undefined) return
+      event.preventDefault()
+      format(action.format)
+    },
+    [format, onCancel, onSubmit],
+  )
+
+  const canSend = value.trim() !== '' && !sending && !disabled
+
+  return (
+    <div className={cn('flex flex-col gap-[var(--space-1)]', className)}>
+      {replyingTo === undefined ? null : (
+        <p
+          className="flex items-center gap-[var(--space-1)] text-[12px]"
+          style={{ color: 'rgb(var(--text-tertiary))' }}
+        >
+          <CornerDownRight size={10} strokeWidth={1.5} aria-hidden="true" />
+          Replying to{' '}
+          <span className="font-semibold" style={{ color: 'rgb(var(--text-secondary))' }}>
+            {replyingTo}
+          </span>
+        </p>
+      )}
+      <div className="flex items-start gap-[var(--space-2)]">
+        {avatar}
+        <div
+          className={cn(
+            'min-w-0 flex-1 overflow-hidden border',
+            'transition-[border-color,box-shadow] duration-[var(--dur-fast)] ease-[var(--ease-out)]',
+            'motion-reduce:transition-none',
+            'focus-within:border-[rgb(var(--accent))] focus-within:[box-shadow:var(--ring-focus)]',
+          )}
+          style={{
+            // Concentric: the host panel declares --thread-inner-radius as its
+            // own radius minus its padding (interface standards §1). Nothing
+            // here eyeballs a corner.
+            borderRadius: 'var(--thread-inner-radius, var(--radius-sm))',
+            borderColor: 'rgb(var(--border))',
+            background: 'rgb(var(--surface-card))',
+          }}
+        >
+          <textarea
+            ref={textareaRef}
+            aria-label={label}
+            className="block w-full resize-none bg-transparent outline-none"
+            placeholder={placeholder}
+            rows={rows}
+            value={value}
+            disabled={disabled}
+            autoFocus={autoFocus}
+            onChange={(event) => {
+              onChange(event.target.value)
+            }}
+            onKeyDown={onKeyDown}
+            {...(maxLength === undefined ? {} : { maxLength })}
+            style={{
+              // Optical: vertical is a step tighter than horizontal, because the
+            // line box already carries space the glyphs do not fill.
+            padding: 'var(--space-2) var(--space-3)',
+              color: 'rgb(var(--foreground))',
+              fontFamily: 'var(--font-sans)',
+              fontSize: '13px',
+              lineHeight: 1.55,
+            }}
+          />
+          <ComposerFooter
+            {...(mode === undefined ? {} : { mode })}
+            {...(onModeChange === undefined ? {} : { onModeChange })}
+            modeDisabled={disabled}
+            toolbar={
+              <>
+                {toolbar
+              ? TOOLBAR.map((action) => {
+                  const Icon = action.icon
+                  return (
+                    <Button
+                      key={action.format}
+                      variant="icon"
+                      size="sm"
+                      aria-label={action.label}
+                      title={action.label}
+                      disabled={disabled || sending}
+                      onClick={() => {
+                        format(action.format)
+                      }}
+                    >
+                      <Icon size={12} strokeWidth={1.75} aria-hidden="true" />
+                    </Button>
+                  )
+                })
+              : null}
+              </>
+            }
+            meta={
+              <>
+                {maxLength === undefined ? null : (
+              <span
+                className="tabular-nums text-right"
+                // Reserved slot so the counter cannot push the buttons around.
+                style={{
+                  minInlineSize: '7ch',
+                  fontSize: '11.5px',
+                  color:
+                    value.length > maxLength * 0.9
+                      ? 'rgb(var(--warning-ink))'
+                      : 'rgb(var(--text-tertiary))',
+                }}
+              >
+                {value.length}/{maxLength}
+              </span>
+            )}
+              </>
+            }
+            actions={
+              <>
+                {onCancel === undefined ? null : (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={onCancel}
+                disabled={disabled || sending}
+              >
+                {cancelLabel}
+              </Button>
+            )}
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => {
+                onSubmit()
+              }}
+              disabled={!canSend}
+              // The visible keycap must not end up in the accessible name — a
+              // screen reader saying "Reply Cmd Return button" is noise, and the
+              // shortcut is announced by the field's own instructions instead.
+              aria-label={sending ? 'Sending…' : submitLabel}
+              // The Kbd primitive, not a fork of it. The inline version this
+              // replaces carried `--text-tertiary` ink and a `--border` hairline
+              // — neutral-surface tokens sitting on an accent fill, which is
+              // why the shortcut read as grey mush on red.
+              trailingIcon={
+                <span aria-hidden="true" className="ds-composer-keycap">
+                  <Kbd size="sm" tone="on-accent">
+                    {SEND_KEYCAP}
+                  </Kbd>
+                </span>
+              }
+            >
+              {sending ? 'Sending…' : submitLabel}
+            </Button>
+              </>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  )
+}