@lovett/ui 0.0.11 → 0.2.0

package/src/markdown.tsx

@@ -18,7 +18,8 @@ import type {
 } from 'react'
 import ReactMarkdown, { type Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { MarkdownCode } from './code-block'
+import { MarkdownCode, MarkdownPre } from './code-block'
+import { remarkUnderline } from './lib/remark-underline'
 
 type NodeProps = HTMLAttributes<HTMLElement>
 type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement>
@@ -93,10 +94,11 @@ const MARKDOWN_COMPONENTS: Components = {
       {children}
     </em>
   ),
-  // code: inline chip or fenced block (handled by CodeBlock via MarkdownCode).
-  // pre just passes through so the highlighter owns its own container.
+  // code: inline chip or code block (CodeBlock via MarkdownCode). pre renders
+  // no element — CodeBlock owns its container — but it is what tells the code
+  // inside it that it is a block, language or not (see PreContext).
   code: MarkdownCode,
-  pre: ({ children }: NodeProps) => <>{children}</>,
+  pre: MarkdownPre,
   blockquote: ({ children }: NodeProps) => (
     <blockquote
       className="my-4 border-l-4 py-1 pl-4 italic"
@@ -169,6 +171,19 @@ const MARKDOWN_COMPONENTS: Components = {
       {children}
     </del>
   ),
+  // Underline — `++text++` via remarkUnderline (ADR-148 D13). The line is a
+  // step softer than the ink so it reads as a deliberate underline, not a link.
+  u: ({ children }: NodeProps) => (
+    <u
+      className="underline-offset-2"
+      style={{
+        color: 'rgb(var(--foreground))',
+        textDecorationColor: 'rgb(var(--text-tertiary))',
+      }}
+    >
+      {children}
+    </u>
+  ),
   // Task-list checkboxes rendered by remark-gfm for "- [ ] ..." / "- [x] ...".
   input: (props: InputHTMLAttributes<HTMLInputElement>) =>
     props.type === 'checkbox' ? (
@@ -183,7 +198,10 @@ const MARKDOWN_COMPONENTS: Components = {
     ),
 }
 
-const REMARK_PLUGINS = [remarkGfm]
+// THE remark plugin list. Every markdown surface in the package parses with
+// this — `CommentBody` imports it rather than keeping its own, so GFM and the
+// `++text++` underline (ADR-148 D13) cannot drift between surfaces.
+const REMARK_PLUGINS = [remarkGfm, remarkUnderline]
 
 export interface MarkdownRendererProps {
   /** Raw markdown string to render. */
@@ -210,5 +228,6 @@ export function MarkdownRenderer({ children, className }: MarkdownRendererProps)
   )
 }
 
-// Re-export for callers that just want the raw component map
-export { MARKDOWN_COMPONENTS as markdownComponents }
+// Re-export for callers that drive ReactMarkdown themselves (CommentBody):
+// the raw component map and the plugin list, so both surfaces stay one.
+export { MARKDOWN_COMPONENTS as markdownComponents, REMARK_PLUGINS as markdownRemarkPlugins }

package/src/modal.tsx

@@ -89,9 +89,31 @@ interface ModalProps {
    * when `title` is non-empty — the `<h2>` names the dialog then.
    */
   ariaLabel?: string | undefined
+  /**
+   * Suppress the built-in header row (title + close) so the CALLER owns the
+   * whole chrome.
+   *
+   * Exists for one shape: a content component that must render identically
+   * inside `Modal` and `FloatingDrawer` (the Tasks item detail — one content
+   * component, two presentations). Without it that content carries its own
+   * header and the modal stacks a second, near-empty one with a second close
+   * button above it.
+   *
+   * The dialog still needs a NAME: pass `ariaLabel`, because there is no
+   * `<h2>` left to point `aria-labelledby` at.
+   */
+  hideHeader?: boolean | undefined
 }
 
-function Modal({ isOpen, onClose, title, children, className, ariaLabel }: ModalProps) {
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  className,
+  ariaLabel,
+  hideHeader = false,
+}: ModalProps) {
   const panelRef = useRef<HTMLDivElement | null>(null)
   const titleId = useId()
 
@@ -205,8 +227,8 @@ function Modal({ isOpen, onClose, title, children, className, ariaLabel }: Modal
         ref={panelRef}
         role="dialog"
         aria-modal="true"
-        aria-labelledby={title ? titleId : undefined}
-        aria-label={title ? undefined : ariaLabel}
+        aria-labelledby={title && !hideHeader ? titleId : undefined}
+        aria-label={title && !hideHeader ? undefined : ariaLabel}
         tabIndex={-1}
         data-framed="true"
         className={cn(
@@ -225,21 +247,23 @@ function Modal({ isOpen, onClose, title, children, className, ariaLabel }: Modal
            60px tall for a 23px title — and because the button was taller
            than the text, the BUTTON set the row height and the title
            floated in slack it never asked for. */}
-        <div className="flex items-center justify-between gap-3 shrink-0 px-4 py-3">
-          <h2
-            id={titleId}
-            className="text-[15px] font-bold tracking-[-0.01em] text-[rgb(var(--foreground))]"
-          >
-            {title}
-          </h2>
-          <button
-            onClick={onClose}
-            className="inline-flex items-center justify-center w-6 h-6 shrink-0 rounded-[var(--radius-sm)] text-[rgb(var(--text-tertiary))] hover:bg-[rgb(var(--surface-hover))] hover:text-[rgb(var(--foreground))] transition-colors"
-            aria-label="Close"
-          >
-            <X className="h-[15px] w-[15px]" />
-          </button>
-        </div>
+        {hideHeader ? null : (
+          <div className="flex items-center justify-between gap-3 shrink-0 px-4 py-3">
+            <h2
+              id={titleId}
+              className="text-[15px] font-bold tracking-[-0.01em] text-[rgb(var(--foreground))]"
+            >
+              {title}
+            </h2>
+            <button
+              onClick={onClose}
+              className="inline-flex items-center justify-center w-6 h-6 shrink-0 rounded-[var(--radius-sm)] text-[rgb(var(--text-tertiary))] hover:bg-[rgb(var(--surface-hover))] hover:text-[rgb(var(--foreground))] transition-colors"
+              aria-label="Close"
+            >
+              <X className="h-[15px] w-[15px]" />
+            </button>
+          </div>
+        )}
         {renderBody(children)}
       </div>
     </div>

package/src/progress-ledger.tsx

@@ -0,0 +1,304 @@
+/**
+ * ProgressLedger — the per-task block bar.
+ *
+ * ADR-146's one piece of boldness, and the reason the port keeps a ledger
+ * rather than a percentage bar: it is COUNTABLE. You read 7 of 11 without
+ * reading a number, and each segment doubles as navigation into that group.
+ *
+ * Three rules it must not lose:
+ *
+ *  1. **Never colour-only.** The label row always carries the count AND the
+ *     percentage as text (interface-standards §6), so completion is legible
+ *     without perceiving hue.
+ *  2. **The track is grey structure, not a surface.** `--surface-inset` +
+ *     1px `--border`, exactly the "grey structure inside an opaque card" the
+ *     data-display recipe requires (CLAUDE.md §2). Filled cells take the
+ *     column hue off the tint ladder, so they composite opaque in both themes.
+ *  3. **A cell settles, it never pops.** Colour transitions over `--dur-base`
+ *     (`.ds-ledger-cell` in styles.css) and `prefers-reduced-motion` jumps to
+ *     the end state.
+ *
+ * Radius is the documented exception to the concentric ladder: cells are 3px
+ * because squareness is what makes them countable. The track is 5px so that
+ * 5 − 2px of padding = the cells' 3px and the chain still holds locally.
+ *
+ * The hue comes from an ancestor's `.hue hue-<key>` classes (see `hue.ts`);
+ * this primitive reads `--tint-fill` / `--tint-task` / `--h` and never names a
+ * colour of its own.
+ */
+
+import type { CSSProperties, ReactNode } from 'react'
+import { cn } from './lib/utils'
+import { StatusRing } from './status'
+
+/** One cell — a single task. */
+export interface LedgerCell {
+  id: string
+  done: boolean
+  /** The task in flight. Rendered as an outlined cell, not a filled one. */
+  current?: boolean
+  /** Falls back to the cell id in the cell's title attribute. */
+  label?: string
+}
+
+/** One phase / group. A divider is drawn at every boundary between segments. */
+export interface LedgerSegment {
+  id: string
+  label: string
+  cells: readonly LedgerCell[]
+}
+
+/** Done, total and the rounded percentage over a set of segments. */
+export interface LedgerProgress {
+  done: number
+  total: number
+  /** 0–100, rounded. `0` when there is nothing to measure. */
+  percent: number
+}
+
+/**
+ * THE completion calculation — one function, every consumer.
+ *
+ * The ledger prints these numbers as text, the card's ring draws them, and a
+ * board column aggregates its lane's items through this same function. A
+ * second implementation anywhere is how a filled meter ends up disagreeing
+ * with the percentage printed beside it (header-primitives §1, last row).
+ */
+export function ledgerProgress(segments: readonly LedgerSegment[]): LedgerProgress {
+  const cells = segments.flatMap((segment) => segment.cells)
+  const total = cells.length
+  const done = cells.filter((cell) => cell.done).length
+  return { done, total, percent: total === 0 ? 0 : Math.round((done / total) * 100) }
+}
+
+export interface ProgressLedgerProps {
+  segments: readonly LedgerSegment[]
+  /** Leading word in the label row. Sentence case. */
+  label?: string
+  /** Optional middle term — the phase the item is in. */
+  phase?: string
+  /** `lg` is the detail-drawer size; `sm` is the card size. */
+  size?: 'sm' | 'lg'
+  /**
+   * Emitted when a segment is activated. Interactivity is OPT-IN: without
+   * this, segments render as inert `<span>`s and add no tab stops.
+   *
+   * Supplying it is a commitment to a destination. A board that wires an empty
+   * handler here puts one dead 12px-tall tab stop on the page per segment per
+   * card — six of the Tasks board's twenty tab stops did exactly that — which
+   * is worse than the control being absent. When it IS supplied, the segment
+   * is forced to a 24px minimum hit area (interface-standards §6), so it
+   * cannot come back as a 12px target.
+   */
+  onSelectSegment?: (segmentId: string) => void
+  /**
+   * Draws a `<StatusRing>` at the head of the label row, showing the SAME
+   * percentage this ledger prints. It is decorative by construction — the
+   * number is already text two words away, and announcing it twice is the
+   * defect, not the feature.
+   */
+  showRing?: boolean
+  /** Names the ledger for assistive tech, e.g. the item title. */
+  ariaLabel?: string
+  className?: string
+}
+
+const TRACK_RADIUS = '5px'
+const CELL_RADIUS = '3px'
+
+export function ProgressLedger({
+  segments,
+  label = 'Progress',
+  phase,
+  size = 'sm',
+  onSelectSegment,
+  showRing = false,
+  ariaLabel,
+  className,
+}: ProgressLedgerProps) {
+  const { done, total, percent } = ledgerProgress(segments)
+  const cellHeight = size === 'lg' ? 22 : 12
+  const cellMinWidth = size === 'lg' ? 12 : 5
+
+  return (
+    <div
+      className={cn('flex flex-col', className)}
+      style={{ gap: 'var(--space-1)' }}
+      role="group"
+      aria-label={
+        ariaLabel
+          ? `${label} for ${ariaLabel}: ${done} of ${total} done, ${percent} percent`
+          : `${label}: ${done} of ${total} done, ${percent} percent`
+      }
+    >
+      {/* Label row — `Progress · 7/11 · 64%`. The count is the reason the
+          ledger beats a bar, so it is never dropped for space. */}
+      <div
+        className="flex items-baseline text-[11px] leading-none"
+        style={{ gap: 'var(--space-2)', color: 'rgb(var(--text-muted))' }}
+      >
+        {showRing ? (
+          <StatusRing
+            percent={percent}
+            size={size === 'lg' ? 16 : 13}
+            strokeWidth={2}
+            decorative
+            // The 11px label row sits on its baseline; a ring has none, so it
+            // is nudged optically rather than mathematically.
+            style={{ alignSelf: 'center', marginBlockStart: '-1px' }}
+          />
+        ) : null}
+        <span>{label}</span>
+        {/* min-width slots: the card must not resize when a task is checked
+            and `9/11` becomes `10/11` (layout-stability rule). */}
+        <LedgerFigure style={{ minInlineSize: '3.5ch' }}>
+          {done}/{total}
+        </LedgerFigure>
+        {phase ? <span className="truncate">{phase}</span> : null}
+        <LedgerFigure
+          className="ms-auto font-semibold"
+          style={{
+            color: 'rgb(var(--muted-foreground))',
+            minInlineSize: '4ch',
+            textAlign: 'end',
+          }}
+        >
+          {percent}%
+        </LedgerFigure>
+      </div>
+
+      <div
+        className="flex items-stretch"
+        style={{
+          gap: '2px',
+          padding: '2px',
+          background: 'rgb(var(--surface-inset))',
+          border: '1px solid rgb(var(--border))',
+          borderRadius: TRACK_RADIUS,
+        }}
+      >
+        {total === 0 ? (
+          <span
+            className="block w-full"
+            style={{ height: cellHeight, borderRadius: CELL_RADIUS }}
+            aria-hidden="true"
+          />
+        ) : null}
+        {segments.map((segment, index) => (
+          <SegmentRun
+            key={segment.id}
+            segment={segment}
+            showDivider={index > 0}
+            cellHeight={cellHeight}
+            cellMinWidth={cellMinWidth}
+            onSelect={onSelectSegment}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function SegmentRun({
+  segment,
+  showDivider,
+  cellHeight,
+  cellMinWidth,
+  onSelect,
+}: {
+  segment: LedgerSegment
+  showDivider: boolean
+  cellHeight: number
+  cellMinWidth: number
+  onSelect?: ((segmentId: string) => void) | undefined
+}) {
+  const doneCount = segment.cells.filter((cell) => cell.done).length
+  const cells = (
+    <>
+      {segment.cells.map((cell) => (
+        <span
+          key={cell.id}
+          className="ds-ledger-cell block"
+          title={cell.label ?? undefined}
+          style={{
+            flex: '1 1 0',
+            minWidth: cellMinWidth,
+            height: cellHeight,
+            borderRadius: CELL_RADIUS,
+            background: cell.done
+              ? 'var(--tint-fill)'
+              : cell.current
+                ? 'var(--tint-task)'
+                : 'rgb(var(--surface-card))',
+            boxShadow: cell.current && !cell.done ? 'inset 0 0 0 1px var(--h)' : undefined,
+          }}
+        />
+      ))}
+    </>
+  )
+
+  const runStyle = {
+    flex: `${Math.max(segment.cells.length, 1)} 1 0`,
+    display: 'flex',
+    gap: '2px',
+    minWidth: 0,
+  } as const
+
+  return (
+    <>
+      {/* Phase boundary. A 1px rule, not a gap — a gap at this scale reads as
+          a missing cell and would make the count wrong at a glance. */}
+      {showDivider ? (
+        <span
+          aria-hidden="true"
+          style={{
+            flex: 'none',
+            width: '1px',
+            background: 'rgb(var(--border-strong))',
+            marginBlock: '-2px',
+            marginInline: '2px',
+          }}
+        />
+      ) : null}
+      {onSelect ? (
+        <button
+          type="button"
+          onClick={() => onSelect(segment.id)}
+          aria-label={`${segment.label}: ${doneCount} of ${segment.cells.length} done`}
+          className="rounded-[3px] focus-visible:[box-shadow:var(--ring-focus)] focus-visible:outline-none"
+          style={{
+            ...runStyle,
+            // The accessibility floor, enforced in the primitive rather than
+            // asked of every caller: a 12px cell row is not a 24px target, so
+            // the run grows to 24px and centres its cells inside it.
+            alignItems: 'center',
+            minBlockSize: '24px',
+            background: 'transparent',
+            border: 'none',
+            padding: 0,
+          }}
+        >
+          {cells}
+        </button>
+      ) : (
+        <span style={runStyle}>{cells}</span>
+      )}
+    </>
+  )
+}
+
+function LedgerFigure({
+  children,
+  className,
+  style,
+}: {
+  children: ReactNode
+  className?: string
+  style?: CSSProperties
+}) {
+  return (
+    <span className={cn('tabular-nums', className)} style={style}>
+      {children}
+    </span>
+  )
+}