@lovett/ui 0.0.10 → 0.1.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/metric-card.tsx

@@ -11,9 +11,17 @@
  * Token discipline: all colors via public tokens. Tone variant gives
  * the value text an accent/success/warning/destructive/info color;
  * background is always neutral surface-overlay.
+ *
+ * `copyable` (ADR-145 amendment, 2026-09-04): the card becomes a button
+ * that copies `copyValue` (or the string `value`) and toasts
+ * "Copied <label>". Same hover/focus affordance as ValueChip and the
+ * copyable StatRow. Inert by default so a read-only KPI never advertises
+ * an interaction it doesn't have.
  */
 
 import type { ReactNode } from 'react'
+import { cn } from './lib/utils'
+import { copyText } from './lib/clipboard'
 
 export type MetricCardTone = 'neutral' | 'accent' | 'success' | 'warning' | 'destructive' | 'info'
 
@@ -46,6 +54,11 @@ export interface MetricCardProps {
   labelPosition?: 'top' | 'bottom'
   /** Optional className override for the outer container. */
   className?: string
+  /** Make the whole card a copy-to-clipboard button. */
+  copyable?: boolean
+  /** What a copyable card writes. Defaults to `value` when it is a string;
+   *  REQUIRED when `value` is a node (there is nothing else to copy). */
+  copyValue?: string
 }
 
 export function MetricCard({
@@ -55,6 +68,8 @@ export function MetricCard({
   icon,
   labelPosition = 'bottom',
   className,
+  copyable = false,
+  copyValue,
 }: MetricCardProps) {
   const labelEl =
     labelPosition === 'top' ? (
@@ -89,29 +104,49 @@ export function MetricCard({
     </div>
   )
 
+  const body =
+    labelPosition === 'top' ? (
+      <>
+        {labelEl}
+        {valueEl}
+      </>
+    ) : (
+      <>
+        {valueEl}
+        {labelEl}
+      </>
+    )
+  const surfaceClass = className ?? 'flex flex-col gap-1 px-4 py-3 border'
+  const surfaceStyle = {
+    background: 'rgb(var(--surface-overlay-soft))',
+    borderColor: 'rgb(var(--border))',
+    borderRadius: 'var(--radius-lg)',
+  } as const
+
+  const text = copyValue ?? (typeof value === 'string' ? value : undefined)
+  if (copyable && text !== undefined) {
+    return (
+      <button
+        type="button"
+        onClick={() => void copyText(text, label)}
+        title={`Copy ${label}`}
+        aria-label={`Copy ${label}: ${text}`}
+        className={cn(
+          surfaceClass,
+          'text-left cursor-pointer transition-[border-color,box-shadow]',
+          'hover:border-[rgb(var(--border-strong))] hover:[box-shadow:var(--shadow-sm)]',
+          'focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]',
+        )}
+        style={surfaceStyle}
+      >
+        {body}
+      </button>
+    )
+  }
+
   return (
-    <div
-      className={
-        className ??
-        'flex flex-col gap-1 px-4 py-3 border'
-      }
-      style={{
-        background: 'rgb(var(--surface-overlay-soft))',
-        borderColor: 'rgb(var(--border))',
-        borderRadius: 'var(--radius-lg)',
-      }}
-    >
-      {labelPosition === 'top' ? (
-        <>
-          {labelEl}
-          {valueEl}
-        </>
-      ) : (
-        <>
-          {valueEl}
-          {labelEl}
-        </>
-      )}
+    <div className={surfaceClass} style={surfaceStyle}>
+      {body}
     </div>
   )
 }

package/src/modal.tsx

@@ -10,6 +10,8 @@ import {
 } from 'react'
 import { X } from 'lucide-react'
 import { cn } from './lib/utils'
+import { tabbablesWithin } from './lib/focus'
+import { useLayer } from './lib/layer-stack'
 
 /**
  * Modal — a centered floating panel on top of a backdrop. Built on
@@ -56,47 +58,25 @@ import { cn } from './lib/utils'
  * the `.cs-frame`-scoped token layer and out of their current stacking /
  * inheritance context, which is a much larger change than an a11y fix
  * should make. Inerting `document.body`'s other children is also wrong:
- * `DropdownMenu`, `TagChipInput` and `FolderTreePicker` portal their
- * content THERE, so a select inside a modal would go dead. Focus trap it
- * is — the keyboard hole is closed; pointer and AT virtual-cursor access
+ * `DropdownMenu`, `Popover`, `TagChipInput` and `FolderTreePicker` portal
+ * their content THERE, so a select inside a modal would go dead. Focus trap
+ * it is — the keyboard hole is closed; pointer and AT virtual-cursor access
  * to the background remains, which is the documented residual.
+ *
+ * Escape and dismiss order come from the shared layer stack
+ * (`lib/layer-stack.ts`): the topmost open surface — modal, menu or
+ * popover — answers Escape alone.
  */
 
 /**
- * Open panels, outermost first. Only the topmost one answers Escape and
- * owns the tab ring, so nested modals do not both close on one Escape
- * and do not fight over focus.
- */
-const openPanels: HTMLElement[] = []
-
-/**
- * Tabbable candidates. Deliberately attribute-only — no geometry check.
- * `offsetWidth` / `getClientRects()` are always zero in jsdom, so a
- * visibility filter would empty this list under test and silently
- * disable the trap in exactly the environment that verifies it.
+ * Dismiss order lives in the shared layer stack (`lib/layer-stack.ts`),
+ * which this file used to own as a module-level `openPanels` array. Only
+ * the topmost layer answers Escape, so nested modals do not both close on
+ * one keypress — and now a DropdownMenu or Popover opened from inside a
+ * modal closes on its own first, leaving the modal open. The Tab trap asks
+ * for the topmost MODAL (`isTopOfKind`), so a popover above it does not
+ * switch the trap off.
  */
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'area[href]',
-  'button:not([disabled])',
-  'input:not([disabled]):not([type="hidden"])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  'iframe',
-  'summary',
-  '[contenteditable="true"]',
-  '[tabindex]',
-].join(',')
-
-function tabbablesWithin(panel: HTMLElement): HTMLElement[] {
-  return Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
-    (el) =>
-      el.tabIndex >= 0 &&
-      !el.hasAttribute('inert') &&
-      el.getAttribute('aria-hidden') !== 'true' &&
-      !el.closest('[hidden]'),
-  )
-}
 
 interface ModalProps {
   isOpen: boolean
@@ -109,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()
 
@@ -130,13 +132,10 @@ function Modal({ isOpen, onClose, title, children, className, ariaLabel }: Modal
         ? document.activeElement
         : null
 
-    openPanels.push(panel)
     const initial = panel.querySelector<HTMLElement>('[data-autofocus]')
     ;(initial ?? panel).focus()
 
     return () => {
-      const at = openPanels.indexOf(panel)
-      if (at !== -1) openPanels.splice(at, 1)
       // Restoring is the half that gets forgotten: without it, closing a
       // modal drops the caret to <body> and the next Tab restarts from
       // the top of the page.
@@ -144,21 +143,27 @@ function Modal({ isOpen, onClose, title, children, className, ariaLabel }: Modal
     }
   }, [isOpen])
 
-  // Escape + tab trap. One document listener; the topmost-panel guard
-  // keeps nested modals from both reacting.
+  // Escape: the shared stack dispatches it to the topmost layer only, and
+  // reads `onClose` through a ref so an inline arrow does not re-register
+  // (or reorder) the layer on every render.
+  const layer = useLayer({
+    enabled: isOpen,
+    kind: 'modal',
+    elementRef: panelRef,
+    onEscape: () => onClose(),
+  })
+
+  // Tab trap. One document listener; the topmost-MODAL guard keeps nested
+  // modals from both reacting, and keeps this trap live while a popover
+  // sits above it.
   useEffect(() => {
     if (!isOpen) return
     const panel = panelRef.current
     if (!panel) return
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (openPanels[openPanels.length - 1] !== panel) return
-
-      if (e.key === 'Escape') {
-        onClose()
-        return
-      }
       if (e.key !== 'Tab') return
+      if (!layer.isTopOfKind()) return
 
       const active = document.activeElement
       // Focus is outside the panel — almost always a body-level portal
@@ -199,7 +204,7 @@ function Modal({ isOpen, onClose, title, children, className, ariaLabel }: Modal
 
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [isOpen, onClose])
+  }, [isOpen, layer])
 
   if (!isOpen) return null
 
@@ -222,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(
@@ -242,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>