@lovett/ui 0.2.5 → 0.2.6

package/dist/index.d.ts

@@ -7368,6 +7368,24 @@ declare function CommentBody({ bodyMd, onSelectMention, className }: CommentBody
  */
 declare const THREAD_REACTION_KEYS: readonly ["up", "heart", "celebrate", "eyes", "check", "question"];
 type ThreadReactionKey = (typeof THREAD_REACTION_KEYS)[number];
+/**
+ * FOCUS RINGS IN THIS MODULE ARE INSET. All of them, without exception.
+ *
+ * Not a preference — a consequence of where this module renders. `comment.tsx`
+ * wraps the whole reply subtree in the `overflow-hidden` that its grid-rows
+ * reveal requires; `Card` clips by default; a thread lives in a scroll
+ * container. An OUTSET `box-shadow` ring is clipped by any of those, and a
+ * clipped focus ring does not degrade — it DISAPPEARS, which is a WCAG 2.4.7
+ * failure rather than a cosmetic one.
+ *
+ * So: `var(--ring-focus-inset)` on every focusable thing in `src/thread/`, and
+ * `var(--ring-focus)` is a bug here. It was found the slow way — the owner
+ * reported the reply composer clipped, that one was fixed, and switching to the
+ * rich editor clipped the next one. Fourteen more were waiting. Fixing them by
+ * report is a queue with no end; the rule is the fix.
+ *
+ * Outside this module the outset ring is still correct and still the default.
+ */
 /** One reaction row as the API groups it: key, tally, and the viewer's own state. */
 interface ThreadReactionCount {
     readonly key: ThreadReactionKey;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { cn, composeRefs, useAnchoredPosition, useLayer, useOutsideClick, POPOVER_SURFACE_STYLE, __export, Input, Popover, handleTabTrap, Button, Kbd, usePrefersReducedMotion, QUIET_ICON_BOX, QUIET_ICON, RichThreadComposer, ThreadComposer, CommentBody, tabbablesWithin, AttachmentImage, AttachmentGif } from './chunk-GP7BKVZC.js';
-export { ATTACHMENT_ACCEPT, ATTACHMENT_LIMITS, AttachmentButton, AttachmentDropZone, AttachmentGif, AttachmentImage, AttachmentLightbox, AttachmentPlaceholder, AttachmentTray, Button, CodeBlock, CommentBody, GIF_SEARCH_DEBOUNCE_MS, GifPicker, Input, Kbd, MarkdownCode, MarkdownRenderer, PASTE_ATTACHMENT_THRESHOLD, POPOVER_SURFACE_STYLE, Popover, RichThreadComposer, ThreadComposer, applyMarkdownFormat, cn, computeAnchoredPosition, formatAttachmentSize, parseMentionHref, pastedTextFilename, shouldAttachPaste, useAnchoredPosition, useAttachmentUrl, useAttachments, useEscapeKey, useLayer, useOutsideClick, usePrefersReducedMotion } from './chunk-GP7BKVZC.js';
+import { cn, composeRefs, useAnchoredPosition, useLayer, useOutsideClick, POPOVER_SURFACE_STYLE, __export, Input, Popover, handleTabTrap, Button, Kbd, usePrefersReducedMotion, QUIET_ICON_BOX, QUIET_ICON, RichThreadComposer, ThreadComposer, CommentBody, tabbablesWithin, AttachmentImage, AttachmentGif } from './chunk-6XT32ETQ.js';
+export { ATTACHMENT_ACCEPT, ATTACHMENT_LIMITS, AttachmentButton, AttachmentDropZone, AttachmentGif, AttachmentImage, AttachmentLightbox, AttachmentPlaceholder, AttachmentTray, Button, CodeBlock, CommentBody, GIF_SEARCH_DEBOUNCE_MS, GifPicker, Input, Kbd, MarkdownCode, MarkdownRenderer, PASTE_ATTACHMENT_THRESHOLD, POPOVER_SURFACE_STYLE, Popover, RichThreadComposer, ThreadComposer, applyMarkdownFormat, cn, computeAnchoredPosition, formatAttachmentSize, parseMentionHref, pastedTextFilename, shouldAttachPaste, useAnchoredPosition, useAttachmentUrl, useAttachments, useEscapeKey, useLayer, useOutsideClick, usePrefersReducedMotion } from './chunk-6XT32ETQ.js';
 import React2, { forwardRef, Children, isValidElement, createContext, useContext, useId, useRef, useEffect, useMemo, useCallback, useState, useLayoutEffect, memo, useSyncExternalStore, cloneElement, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Minus, Check, ChevronDown, X, Loader2, Play, VolumeX, Volume2, ChevronUp, Link2, ChevronLeft, MoreHorizontal, ThumbsUp as ThumbsUp$1, MessageCircle, Share2, Search, Plus, ChevronRight, CircleX, CircleCheck, CircleSlash, CircleDotDashed, Circle, CircleDashed, Pencil, House, GripVertical, Folder, Flag, ImageOff, ChevronsUpDown, SlidersHorizontal, Copy, FolderClosed, FolderPlus, Paperclip, Upload, Image, Code, Table as Table$1, FileText, FileType, AlertCircle, RotateCcw, ArrowRight, ListFilter, ArrowLeft, ArrowDown, ArrowUp, Info, ChartLine, Table2, Inbox, TriangleAlert, ChevronsLeft, ChevronsUp, ChevronsRight, ChevronsDown, Star, Settings2, CornerDownRight, Trash2, SmilePlus, ArrowBigUp, ArrowBigDown, ExternalLink, RotateCw, MessageSquare, Lock, PanelRight, SquareDashed, Maximize2, Archive, Printer, Repeat2, CornerUpRight } from 'lucide-react';
@@ -24289,7 +24289,7 @@ var QUIET = cn(
   "transition-[background-color,color] duration-[var(--dur-fast)] ease-[var(--ease-out)]",
   "motion-reduce:transition-none",
   "hover:bg-[rgb(var(--surface-overlay))] hover:text-[rgb(var(--foreground))]",
-  "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]",
+  "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]",
   "disabled:cursor-default disabled:opacity-60"
 );
 var QUIET_BOX = {
@@ -24590,7 +24590,7 @@ function CommentVote({
     "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)]",
+    "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]",
     "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))]"
@@ -24835,7 +24835,7 @@ function LinkPreview({ preview, onHide, className }) {
                   onClick: () => {
                     setPlaying(true);
                   },
-                  className: "absolute inset-0 flex items-center justify-center focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]",
+                  className: "absolute inset-0 flex items-center justify-center focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]",
                   style: {
                     // diag:contrast-ok — this scrim sits on a PHOTOGRAPH, which
                     // is the one thing check-contrast says it cannot see:
@@ -24870,7 +24870,7 @@ function LinkPreview({ preview, onHide, className }) {
                     rel: "noopener noreferrer",
                     className: cn(
                       "group/link block min-w-0 flex-1 no-underline",
-                      "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+                      "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]"
                     ),
                     style: { borderRadius: "var(--radius-xs)" },
                     children: [
@@ -24980,7 +24980,7 @@ function ThreadRail({ collapsed, label, onToggle }) {
               "motion-reduce:transition-none",
               "group-hover/rail:border-[rgb(var(--border-strong))] group-hover/rail:text-[rgb(var(--foreground))]",
               "group-focus-visible/rail:border-[rgb(var(--accent))] group-focus-visible/rail:text-[rgb(var(--accent-ink))]",
-              "group-focus-visible/rail:[box-shadow:var(--ring-focus)]",
+              "group-focus-visible/rail:[box-shadow:var(--ring-focus-inset)]",
               "group-active/rail:scale-[0.96] motion-reduce:group-active/rail:scale-100"
             ),
             style: {
@@ -25112,7 +25112,7 @@ function CollapsedReplies({
         "transition-[background-color,border-color,color] duration-[var(--dur-fast)] ease-[var(--ease-out)]",
         "motion-reduce:transition-none",
         "hover:border-[rgb(var(--border-strong))] hover:bg-[rgb(var(--surface-hover))] hover:text-[rgb(var(--foreground))]",
-        "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+        "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]"
       ),
       style: { minBlockSize: "var(--space-6)", borderRadius: "var(--radius-sm)" },
       children: [
@@ -25229,7 +25229,7 @@ function Attachments({
               "border-[rgb(var(--border))] bg-[rgb(var(--surface-inset))] text-[rgb(var(--text-secondary))]",
               "transition-[background-color,border-color] duration-[var(--dur-fast)] ease-[var(--ease-out)] motion-reduce:transition-none",
               "enabled:hover:border-[rgb(var(--border-strong))] enabled:hover:bg-[rgb(var(--surface-hover))]",
-              "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]",
+              "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]",
               "disabled:cursor-default"
             ),
             style: { borderRadius: "var(--thread-inner-radius, var(--radius-sm))" },
@@ -25367,7 +25367,7 @@ function CommentItem({
                         className: cn(
                           "min-w-0 truncate text-[14px] font-semibold text-[rgb(var(--foreground))]",
                           "underline-offset-2 hover:underline",
-                          "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+                          "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]"
                         ),
                         style: { borderRadius: "var(--radius-xs)" },
                         children: label
@@ -25910,7 +25910,7 @@ function SortPills({
               "inline-flex h-[24px] items-center px-[var(--space-2)] text-[12px] font-semibold",
               "transition-[background-color,color,border-color,box-shadow] duration-[var(--dur-fast)] ease-[var(--ease-out)]",
               "motion-reduce:transition-none",
-              "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]",
+              "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus-inset)]",
               active ? "border border-[rgb(var(--accent))] bg-[rgb(var(--surface-card))] text-[rgb(var(--accent-ink))] [box-shadow:var(--shadow-sm)]" : "border border-transparent text-[rgb(var(--text-tertiary))] hover:text-[rgb(var(--foreground))]"
             ),
             style: { borderRadius: "var(--radius-xs)" },