{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comment-05",
  "title": "Resolved thread",
  "description": "A discussion that folds into one resolved line, opens again to read and can be reopened",
  "dependencies": [
    "date-fns",
    "motion"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/animated-size.json",
    "https://ui.ndekocode.dev/r/avatar.json",
    "https://ui.ndekocode.dev/r/button.json",
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/use-prefers-reduced-motion.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/comment/comment-05.tsx",
      "content": "'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { CheckIcon, ChevronDownIcon } from '@/registry/ndeko/lib/icons';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { AnimatedSize } from '@/registry/ndeko/ui/animated-size';\nimport { Button } from '@/registry/ndeko/ui/button';\n\nimport { commentWordOf, type CommentItem } from './_parts/comment-model';\nimport { CommentBlock } from './_parts/comment-parts';\nimport { Swap } from './_parts/motion-parts';\nimport { actorNameOf, CURRENT_USER_ID } from './_parts/people';\n\ntype ThreadState = 'open' | 'resolved' | 'peeking';\n\nconst THREAD: CommentItem[] = [\n  {\n    id: 't1',\n    authorId: 'tomas',\n    at: '2026-11-05T09:10:00',\n    body: 'Do we round amounts before or after the totals row? Rounding each line first can leave the total one cent off.',\n  },\n  {\n    id: 't2',\n    authorId: 'leo',\n    at: '2026-11-05T09:26:00',\n    body: 'After. The totals use the raw values, and each line is rounded only when it is written.',\n  },\n  {\n    id: 't3',\n    authorId: 'sana',\n    at: '2026-11-05T09:40:00',\n    body: 'That matches what finance does in the ledger. Good to resolve.',\n  },\n];\n\nfunction ResolvedGlyph({ className }: { className?: string }) {\n  return (\n    <span\n      className={cn(\n        'bg-success/15 text-success-foreground flex size-5 shrink-0 items-center justify-center rounded-full',\n        className\n      )}\n    >\n      <CheckIcon strokeWidth={2.75} className='size-3' />\n    </span>\n  );\n}\n\nfunction ResolvedSummary({\n  showRef,\n  onShow,\n}: {\n  showRef: React.RefObject<HTMLButtonElement | null>;\n  onShow: () => void;\n}) {\n  const first = THREAD[0];\n  return (\n    <div className='flex items-center gap-3'>\n      <ResolvedGlyph />\n      <div className='min-w-0 flex-1'>\n        <p className='text-[13px] font-medium'>\n          Resolved by {actorNameOf(CURRENT_USER_ID)}\n        </p>\n        <p className='text-muted-foreground truncate text-xs'>\n          {THREAD.length} {commentWordOf(THREAD.length)} · {first.body}\n        </p>\n      </div>\n      <Button ref={showRef} variant='ghost' size='sm' onClick={onShow}>\n        Show thread\n      </Button>\n    </div>\n  );\n}\n\nfunction ThreadBody() {\n  return (\n    <ul className='flex flex-col gap-3'>\n      {THREAD.map((comment) => (\n        <li key={comment.id}>\n          <CommentBlock comment={comment} />\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nfunction footerKeyOf(state: ThreadState) {\n  if (state === 'open') {\n    return 'resolve';\n  }\n  return 'reopen';\n}\n\nexport default function Comment05() {\n  const [state, setState] = useState<ThreadState>('open');\n  const showRef = useRef<HTMLButtonElement>(null);\n  const footerRef = useRef<HTMLButtonElement>(null);\n  const hasActed = useRef(false);\n  const isFolded = state === 'resolved';\n  const isPeeking = state === 'peeking';\n  const isOpen = state === 'open';\n\n  useEffect(() => {\n    if (!hasActed.current) {\n      return;\n    }\n    if (state === 'resolved') {\n      showRef.current?.focus();\n      return;\n    }\n    footerRef.current?.focus();\n  }, [state]);\n\n  function moveTo(next: ThreadState) {\n    hasActed.current = true;\n    setState(next);\n  }\n\n  function toggleResolved() {\n    if (isOpen) {\n      moveTo('resolved');\n      return;\n    }\n    moveTo('open');\n  }\n\n  return (\n    <section\n      aria-label='Discussion thread'\n      className={cn(\n        'bg-foreground/[0.025] w-full max-w-md rounded-xl p-3 transition-colors duration-200',\n        isFolded && 'bg-success/[0.06]'\n      )}\n    >\n      <AnimatedSize>\n        {isFolded && (\n          <ResolvedSummary showRef={showRef} onShow={() => moveTo('peeking')} />\n        )}\n        {!isFolded && (\n          <div className='flex flex-col gap-3'>\n            {isPeeking && (\n              <p className='text-muted-foreground flex items-center gap-2 text-xs'>\n                <ResolvedGlyph className='size-4' />\n                Resolved by {actorNameOf(CURRENT_USER_ID)}\n              </p>\n            )}\n            <ThreadBody />\n            <div className='flex items-center justify-end gap-1'>\n              {isPeeking && (\n                <Button\n                  variant='ghost'\n                  size='sm'\n                  onClick={() => moveTo('resolved')}\n                >\n                  <ChevronDownIcon className='rotate-180' />\n                  Fold\n                </Button>\n              )}\n              <Button\n                ref={footerRef}\n                variant='outline'\n                size='sm'\n                onClick={toggleResolved}\n              >\n                <AnimatedSize as='span' axis='width'>\n                  <Swap swapKey={footerKeyOf(state)}>\n                    {isOpen && (\n                      <span className='inline-flex items-center gap-2'>\n                        <CheckIcon />\n                        Resolve thread\n                      </span>\n                    )}\n                    {!isOpen && 'Reopen'}\n                  </Swap>\n                </AnimatedSize>\n              </Button>\n            </div>\n          </div>\n        )}\n      </AnimatedSize>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/comment/comment-05.tsx"
    },
    {
      "path": "registry/ndeko/components/comment/_parts/comment-model.ts",
      "content": "import { CURRENT_USER_ID, PEOPLE } from './people';\nimport { NOW } from './time';\n\nexport type CommentItem = {\n  id: string;\n  authorId: string;\n  at: string;\n  body: string;\n  editedAt?: string;\n};\n\nexport type Segment = {\n  text: string;\n  isMention: boolean;\n};\n\nexport const MENTION_TRIGGER = '@';\n\nexport const MENTION_NAMES = PEOPLE.map((person) => person.name);\n\nfunction mentionTokensOf(names: string[]) {\n  const tokens = names.map((name) => `${MENTION_TRIGGER}${name}`);\n  return tokens.sort((first, second) => second.length - first.length);\n}\n\nfunction pushPlain(segments: Segment[], text: string) {\n  if (text.length === 0) {\n    return;\n  }\n  segments.push({ text, isMention: false });\n}\n\n/** Splits a comment into plain text and mentions of known people, written \"@First Last\". */\nexport function segmentsOf(text: string, names: string[] = MENTION_NAMES) {\n  const tokens = mentionTokensOf(names);\n  const segments: Segment[] = [];\n  let plain = '';\n  let index = 0;\n  while (index < text.length) {\n    const token = tokens.find((candidate) => text.startsWith(candidate, index));\n    if (token) {\n      pushPlain(segments, plain);\n      segments.push({ text: token, isMention: true });\n      plain = '';\n      index += token.length;\n      continue;\n    }\n    plain += text[index];\n    index += 1;\n  }\n  pushPlain(segments, plain);\n  return segments;\n}\n\nlet draftCount = 0;\n\n/** A comment the signed-in person just wrote, stamped with the previews' fixed now. */\nexport function draftCommentOf(body: string): CommentItem {\n  draftCount += 1;\n  return {\n    id: `draft-${draftCount}`,\n    authorId: CURRENT_USER_ID,\n    at: NOW,\n    body,\n  };\n}\n\nexport function commentWordOf(count: number) {\n  if (count === 1) {\n    return 'comment';\n  }\n  return 'comments';\n}\n\nexport function replyWordOf(count: number) {\n  if (count === 1) {\n    return 'reply';\n  }\n  return 'replies';\n}\n",
      "type": "registry:component",
      "target": "components/comment/_parts/comment-model.ts"
    },
    {
      "path": "registry/ndeko/components/comment/_parts/comment-parts.tsx",
      "content": "import { cn } from '@/registry/ndeko/lib/utils';\nimport { Avatar } from '@/registry/ndeko/ui/avatar';\n\nimport { segmentsOf, type CommentItem } from './comment-model';\nimport { actorNameOf, personOf, type Person } from './people';\nimport { relativeTimeOf } from './time';\n\nexport const MENTION_CHIP =\n  'rounded-[4px] bg-primary/10 px-0.5 font-medium text-primary-ink dark:bg-primary/20';\n\nexport const TEXT_ACTION =\n  'text-muted-foreground hover:text-foreground focus-visible:ring-ring/25 inline-flex h-6 cursor-pointer items-center gap-1 rounded-md text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]';\n\nexport function PersonAvatar({\n  person,\n  className,\n}: {\n  person: Person;\n  className?: string;\n}) {\n  return (\n    <Avatar\n      className={cn('size-7 text-[10px]', className)}\n      seed={person.name}\n    />\n  );\n}\n\n/** A comment's words, with each mention of a known person drawn as a tinted chip. */\nexport function CommentText({\n  body,\n  className,\n}: {\n  body: string;\n  className?: string;\n}) {\n  const segments = segmentsOf(body);\n  return (\n    <p\n      className={cn(\n        'text-[13px] leading-5 [overflow-wrap:anywhere] whitespace-pre-wrap',\n        className\n      )}\n    >\n      {segments.map((segment, index) => {\n        const key = `${index}-${segment.text}`;\n        if (segment.isMention) {\n          return (\n            <span key={key} className={MENTION_CHIP}>\n              {segment.text}\n            </span>\n          );\n        }\n        return <span key={key}>{segment.text}</span>;\n      })}\n    </p>\n  );\n}\n\nexport function CommentMeta({\n  comment,\n  children,\n}: {\n  comment: CommentItem;\n  children?: React.ReactNode;\n}) {\n  return (\n    <p className='flex min-w-0 items-baseline gap-1.5 text-[13px]'>\n      <span className='truncate font-medium'>\n        {actorNameOf(comment.authorId)}\n      </span>\n      <span aria-hidden='true' className='text-muted-foreground'>\n        ·\n      </span>\n      <time\n        dateTime={comment.at}\n        className='text-muted-foreground shrink-0 text-xs tabular-nums'\n      >\n        {relativeTimeOf(comment.at)}\n      </time>\n      {children}\n    </p>\n  );\n}\n\ntype CommentBlockProps = {\n  comment: CommentItem;\n  avatarClassName?: string;\n  meta?: React.ReactNode;\n  actions?: React.ReactNode;\n  children?: React.ReactNode;\n  className?: string;\n};\n\n/** Avatar, author and time, then the words aligned under the name. */\nexport function CommentBlock({\n  comment,\n  avatarClassName,\n  meta,\n  actions,\n  children,\n  className,\n}: CommentBlockProps) {\n  return (\n    <div className={cn('flex gap-3', className)}>\n      <PersonAvatar\n        person={personOf(comment.authorId)}\n        className={avatarClassName}\n      />\n      <div className='min-w-0 flex-1'>\n        <div className='flex min-h-7 items-center justify-between gap-2'>\n          <CommentMeta comment={comment}>{meta}</CommentMeta>\n          {actions}\n        </div>\n        {children}\n        {!children && <CommentText body={comment.body} />}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/comment/_parts/comment-parts.tsx"
    },
    {
      "path": "registry/ndeko/components/comment/_parts/motion-parts.tsx",
      "content": "'use client';\n\nimport {\n  AnimatePresence,\n  motion,\n  type MotionProps,\n  type Transition,\n  type Variants,\n} from 'motion/react';\nimport { useState } from 'react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport { cn } from '@/registry/ndeko/lib/utils';\n\nexport const EASE_OUT_STRONG: [number, number, number, number] = [\n  0.23, 1, 0.32, 1,\n];\n\nexport const ENTER: Transition = { duration: 0.2, ease: EASE_OUT_STRONG };\n\nexport const EXIT: Transition = { duration: 0.15, ease: EASE_OUT_STRONG };\n\nexport type PresenceProps = Pick<\n  MotionProps,\n  'initial' | 'animate' | 'exit' | 'transition'\n>;\n\nconst HEIGHT_PRESENCE: PresenceProps = {\n  initial: { height: 0, opacity: 0 },\n  animate: { height: 'auto', opacity: 1 },\n  exit: { height: 0, opacity: 0, transition: EXIT },\n  transition: ENTER,\n};\n\nconst FADE_PRESENCE: PresenceProps = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  exit: { opacity: 0, transition: EXIT },\n  transition: ENTER,\n};\n\n/** Rows that arrive or leave a list: their height opens and closes so the rows after them slide. */\nexport function heightPresenceOf(shouldReduceMotion: boolean | null) {\n  if (shouldReduceMotion) {\n    return FADE_PRESENCE;\n  }\n  return HEIGHT_PRESENCE;\n}\n\nconst SWAP_TRANSITION: Transition = { duration: 0.15, ease: EASE_OUT_STRONG };\n\nconst SWAP_VARIANTS: Variants = {\n  hidden: { opacity: 0, scale: 0.6, filter: 'blur(2px)' },\n  shown: { opacity: 1, scale: 1, filter: 'blur(0px)' },\n};\n\nconst FADE_VARIANTS: Variants = {\n  hidden: { opacity: 0 },\n  shown: { opacity: 1 },\n};\n\nfunction swapVariantsOf(shouldReduceMotion: boolean | null) {\n  if (shouldReduceMotion) {\n    return FADE_VARIANTS;\n  }\n  return SWAP_VARIANTS;\n}\n\ntype SwapProps = {\n  swapKey: string;\n  children: React.ReactNode;\n  className?: string;\n};\n\n/** An icon or a short label that becomes another one in place. */\nexport function Swap({ swapKey, children, className }: SwapProps) {\n  const shouldReduceMotion = usePrefersReducedMotion();\n\n  return (\n    <span className={cn('relative inline-flex', className)}>\n      <AnimatePresence mode='popLayout' initial={false}>\n        <motion.span\n          key={swapKey}\n          variants={swapVariantsOf(shouldReduceMotion)}\n          initial='hidden'\n          animate='shown'\n          exit='hidden'\n          transition={SWAP_TRANSITION}\n          className='inline-flex'\n        >\n          {children}\n        </motion.span>\n      </AnimatePresence>\n    </span>\n  );\n}\n\nconst COUNT_SLIDE = 8;\n\nconst COUNT_TRANSITION: Transition = { duration: 0.18, ease: EASE_OUT_STRONG };\n\nconst COUNT_VARIANTS: Variants = {\n  enter: (offset: number) => ({ y: offset, opacity: 0 }),\n  center: { y: 0, opacity: 1 },\n  leave: (offset: number) => ({ y: -offset, opacity: 0 }),\n};\n\nfunction directionOf(previous: number, next: number) {\n  if (next < previous) {\n    return -1;\n  }\n  return 1;\n}\n\nfunction offsetOf(direction: number, shouldReduceMotion: boolean | null) {\n  if (shouldReduceMotion) {\n    return 0;\n  }\n  return direction * COUNT_SLIDE;\n}\n\ntype RollingCountProps = {\n  value: number;\n  /** Writes the value, such as a duration; the digits still roll on the number. */\n  format?: (value: number) => string;\n  className?: string;\n};\n\nfunction plainNumber(value: number) {\n  return String(value);\n}\n\n/** A figure the person just changed: the new digits slide in from the side of the change. */\nexport function RollingCount({\n  value,\n  format = plainNumber,\n  className,\n}: RollingCountProps) {\n  const shouldReduceMotion = usePrefersReducedMotion();\n  const [previous, setPrevious] = useState(value);\n  const [direction, setDirection] = useState(1);\n\n  if (previous !== value) {\n    setDirection(directionOf(previous, value));\n    setPrevious(value);\n  }\n\n  const offset = offsetOf(direction, shouldReduceMotion);\n\n  return (\n    <span\n      className={cn(\n        'relative inline-flex overflow-hidden tabular-nums',\n        className\n      )}\n    >\n      <AnimatePresence mode='popLayout' initial={false} custom={offset}>\n        <motion.span\n          key={value}\n          custom={offset}\n          variants={COUNT_VARIANTS}\n          initial='enter'\n          animate='center'\n          exit='leave'\n          transition={COUNT_TRANSITION}\n          className='inline-block'\n        >\n          {format(value)}\n        </motion.span>\n      </AnimatePresence>\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/comment/_parts/motion-parts.tsx"
    },
    {
      "path": "registry/ndeko/components/comment/_parts/people.ts",
      "content": "export type Person = {\n  id: string;\n  name: string;\n  firstName: string;\n};\n\nexport const CURRENT_USER_ID = 'amara';\n\nexport const PEOPLE: Person[] = [\n  {\n    id: 'amara',\n    name: 'Amara Okafor',\n    firstName: 'Amara',\n  },\n  {\n    id: 'leo',\n    name: 'Léo Martin',\n    firstName: 'Léo',\n  },\n  {\n    id: 'sana',\n    name: 'Sana Iqbal',\n    firstName: 'Sana',\n  },\n  {\n    id: 'tomas',\n    name: 'Tomás Rivera',\n    firstName: 'Tomás',\n  },\n  {\n    id: 'mei',\n    name: 'Mei Lin',\n    firstName: 'Mei',\n  },\n  {\n    id: 'jonah',\n    name: 'Jonah Brandt',\n    firstName: 'Jonah',\n  },\n];\n\nexport function personOf(id: string) {\n  const found = PEOPLE.find((person) => person.id === id);\n  if (found) {\n    return found;\n  }\n  return PEOPLE[0];\n}\n\nexport function isCurrentUser(id: string) {\n  return id === CURRENT_USER_ID;\n}\n\nexport function actorNameOf(id: string) {\n  if (isCurrentUser(id)) {\n    return 'You';\n  }\n  return personOf(id).name;\n}\n\nexport function currentUser() {\n  return personOf(CURRENT_USER_ID);\n}\n",
      "type": "registry:component",
      "target": "components/comment/_parts/people.ts"
    },
    {
      "path": "registry/ndeko/components/comment/_parts/time.ts",
      "content": "import {\n  differenceInCalendarDays,\n  differenceInMinutes,\n  format,\n  parseISO,\n} from 'date-fns';\n\n/** The previews read every time against one fixed moment, so the server and the browser print the same labels. */\nexport const NOW = '2026-11-05T11:00:00';\n\nconst MINUTES_PER_HOUR = 60;\n\nfunction daysBeforeNow(iso: string) {\n  return differenceInCalendarDays(parseISO(NOW), parseISO(iso));\n}\n\nexport function relativeTimeOf(iso: string) {\n  const minutes = differenceInMinutes(parseISO(NOW), parseISO(iso));\n  if (minutes < 1) {\n    return 'Just now';\n  }\n  if (minutes < MINUTES_PER_HOUR) {\n    return `${minutes}m ago`;\n  }\n  const days = daysBeforeNow(iso);\n  if (days === 0) {\n    const hours = Math.floor(minutes / MINUTES_PER_HOUR);\n    return `${hours}h ago`;\n  }\n  if (days === 1) {\n    return 'Yesterday';\n  }\n  return format(parseISO(iso), 'MMM d');\n}\n\nexport function exactTimeOf(iso: string) {\n  return format(parseISO(iso), \"EEE, MMM d 'at' HH:mm\");\n}\n\nexport function clockOf(iso: string) {\n  return format(parseISO(iso), 'HH:mm');\n}\n\nexport function dayKeyOf(iso: string) {\n  return iso.slice(0, 10);\n}\n\nexport function dayLabelOf(iso: string) {\n  const days = daysBeforeNow(iso);\n  if (days === 0) {\n    return 'Today';\n  }\n  if (days === 1) {\n    return 'Yesterday';\n  }\n  return format(parseISO(iso), 'EEEE, MMM d');\n}\n\nexport function shortDateOf(iso: string) {\n  return format(parseISO(iso), 'MMM d');\n}\n\nexport function durationLabelOf(minutes: number) {\n  const hours = Math.floor(minutes / MINUTES_PER_HOUR);\n  const rest = minutes % MINUTES_PER_HOUR;\n  if (hours === 0) {\n    return `${rest}m`;\n  }\n  if (rest === 0) {\n    return `${hours}h`;\n  }\n  return `${hours}h ${rest}m`;\n}\n\nexport function countLabel(count: number, singular: string, plural: string) {\n  if (count === 1) {\n    return `${count} ${singular}`;\n  }\n  return `${count} ${plural}`;\n}\n",
      "type": "registry:component",
      "target": "components/comment/_parts/time.ts"
    }
  ],
  "categories": [
    "components",
    "comment"
  ],
  "type": "registry:component"
}