{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comment-08",
  "title": "Someone is typing",
  "description": "A typing row under the avatar of the person writing, which becomes their comment when it arrives",
  "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/textarea.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-08.tsx",
      "content": "'use client';\n\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport { AnimatedSize } from '@/registry/ndeko/ui/animated-size';\n\nimport { CommentField } from './_parts/comment-field';\nimport { draftCommentOf } from './_parts/comment-model';\nimport { CommentMeta, CommentText, PersonAvatar } from './_parts/comment-parts';\nimport { ENTER, heightPresenceOf } from './_parts/motion-parts';\nimport { personOf } from './_parts/people';\nimport { NOW } from './_parts/time';\n\ntype Entry = {\n  id: string;\n  authorId: string;\n  at: string;\n  /** Empty while the author is still typing. */\n  body: string | null;\n};\n\ntype Reply = {\n  authorId: string;\n  body: string;\n};\n\nconst FIRST_TYPING_MS = 3200;\n\nconst TYPING_STARTS_AFTER_MS = 900;\n\nconst TYPING_LASTS_MS = 2600;\n\nconst DOT_DELAYS = [0, 0.15, 0.3];\n\nconst FIRST_ENTRIES: Entry[] = [\n  {\n    id: 'w1',\n    authorId: 'leo',\n    at: '2026-11-05T10:31:00',\n    body: 'Totals row is done. Anyone against bold for that last line?',\n  },\n  {\n    id: 'w2',\n    authorId: 'sana',\n    at: NOW,\n    body: null,\n  },\n];\n\nconst FIRST_REPLY = 'Bold is fine, finance prints it anyway.';\n\nconst LATER_REPLIES: Reply[] = [\n  {\n    authorId: 'tomas',\n    body: 'Thanks, I will check it on the October file after lunch.',\n  },\n  {\n    authorId: 'leo',\n    body: 'Noted. I will fold that into the totals row change.',\n  },\n];\n\nfunction TypingDots() {\n  const shouldReduceMotion = usePrefersReducedMotion();\n  if (shouldReduceMotion) {\n    return (\n      <span aria-hidden='true' className='flex gap-1'>\n        {DOT_DELAYS.map((delay) => (\n          <span\n            key={delay}\n            className='bg-muted-foreground/60 size-1.5 rounded-full'\n          />\n        ))}\n      </span>\n    );\n  }\n  return (\n    <span aria-hidden='true' className='flex gap-1'>\n      {DOT_DELAYS.map((delay) => (\n        <motion.span\n          key={delay}\n          animate={{ opacity: [0.25, 1, 0.25] }}\n          transition={{\n            duration: 1.2,\n            delay,\n            repeat: Infinity,\n            ease: 'linear',\n          }}\n          className='bg-muted-foreground size-1.5 rounded-full'\n        />\n      ))}\n    </span>\n  );\n}\n\nfunction contentKeyOf(entry: Entry) {\n  if (entry.body === null) {\n    return `${entry.id}-typing`;\n  }\n  return `${entry.id}-comment`;\n}\n\n/** One row that holds the typing state, then becomes the comment once it is sent. */\nfunction EntryRow({ entry }: { entry: Entry }) {\n  const shouldReduceMotion = usePrefersReducedMotion();\n  const person = personOf(entry.authorId);\n  const isTyping = entry.body === null;\n\n  return (\n    <motion.li\n      {...heightPresenceOf(shouldReduceMotion)}\n      className='overflow-hidden'\n    >\n      <div className='flex gap-3 py-2'>\n        <PersonAvatar person={person} />\n        <AnimatedSize className='min-w-0 flex-1'>\n          <motion.div\n            key={contentKeyOf(entry)}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={ENTER}\n          >\n            {isTyping && (\n              <p className='text-muted-foreground flex min-h-7 items-center gap-2 text-xs'>\n                <TypingDots />\n                {person.firstName} is typing\n              </p>\n            )}\n            {entry.body !== null && (\n              <>\n                <div className='flex min-h-7 items-center'>\n                  <CommentMeta comment={{ ...entry, body: entry.body }} />\n                </div>\n                <CommentText body={entry.body} />\n              </>\n            )}\n          </motion.div>\n        </AnimatedSize>\n      </div>\n    </motion.li>\n  );\n}\n\nfunction withBody(entries: Entry[], entryId: string, body: string) {\n  return entries.map((entry) => {\n    if (entry.id !== entryId) {\n      return entry;\n    }\n    return { ...entry, body };\n  });\n}\n\nexport default function Comment08() {\n  const [entries, setEntries] = useState(FIRST_ENTRIES);\n  const [repliesUsed, setRepliesUsed] = useState(0);\n  const timers = useRef(new Set<ReturnType<typeof setTimeout>>());\n\n  function later(run: () => void, delay: number) {\n    const timer = setTimeout(() => {\n      timers.current.delete(timer);\n      run();\n    }, delay);\n    timers.current.add(timer);\n  }\n\n  useEffect(() => {\n    const pending = timers.current;\n    const timer = setTimeout(() => {\n      pending.delete(timer);\n      setEntries((current) => withBody(current, 'w2', FIRST_REPLY));\n    }, FIRST_TYPING_MS);\n    pending.add(timer);\n    return () => {\n      pending.forEach((item) => clearTimeout(item));\n      pending.clear();\n    };\n  }, []);\n\n  function answer(reply: Reply, replyIndex: number) {\n    const typingId = `reply-${replyIndex}`;\n    const typing: Entry = {\n      id: typingId,\n      authorId: reply.authorId,\n      at: NOW,\n      body: null,\n    };\n    later(() => {\n      setEntries((current) => [...current, typing]);\n      later(() => {\n        setEntries((current) => withBody(current, typingId, reply.body));\n      }, TYPING_LASTS_MS);\n    }, TYPING_STARTS_AFTER_MS);\n  }\n\n  function post(body: string) {\n    const comment = draftCommentOf(body);\n    setEntries((current) => [...current, comment]);\n    const reply = LATER_REPLIES[repliesUsed];\n    if (!reply) {\n      return;\n    }\n    setRepliesUsed((current) => current + 1);\n    answer(reply, repliesUsed);\n  }\n\n  return (\n    <section aria-label='Comments' className='w-full max-w-md'>\n      <h3 className='text-sm font-medium'>Comments</h3>\n      <ul aria-live='polite' className='mt-1'>\n        <AnimatePresence initial={false}>\n          {entries.map((entry) => (\n            <EntryRow key={entry.id} entry={entry} />\n          ))}\n        </AnimatePresence>\n      </ul>\n      <CommentField\n        placeholder='Write a comment'\n        onSubmit={post}\n        className='mt-2'\n      />\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/comment/comment-08.tsx"
    },
    {
      "path": "registry/ndeko/components/comment/_parts/comment-field.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { Button } from '@/registry/ndeko/ui/button';\nimport { Textarea } from '@/registry/ndeko/ui/textarea';\n\nimport { PersonAvatar } from './comment-parts';\nimport { currentUser } from './people';\n\ntype CommentFieldProps = {\n  placeholder: string;\n  submitLabel?: string;\n  onSubmit: (body: string) => void;\n  onCancel?: () => void;\n  autoFocus?: boolean;\n  showsAvatar?: boolean;\n  className?: string;\n};\n\nfunction isSendKey(event: React.KeyboardEvent<HTMLTextAreaElement>) {\n  const isCommand = event.metaKey || event.ctrlKey;\n  return isCommand && event.key === 'Enter';\n}\n\n/** A comment field that grows with its text; Cmd or Ctrl and Enter sends, Escape leaves. */\nexport function CommentField({\n  placeholder,\n  submitLabel = 'Comment',\n  onSubmit,\n  onCancel,\n  autoFocus = false,\n  showsAvatar = true,\n  className,\n}: CommentFieldProps) {\n  const [body, setBody] = useState('');\n  const me = currentUser();\n  const trimmed = body.trim();\n  const canSend = trimmed.length > 0;\n\n  function submit() {\n    if (!canSend) {\n      return;\n    }\n    onSubmit(trimmed);\n    setBody('');\n  }\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    submit();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {\n    if (isSendKey(event)) {\n      event.preventDefault();\n      submit();\n      return;\n    }\n    if (event.key !== 'Escape') {\n      return;\n    }\n    event.stopPropagation();\n    if (onCancel) {\n      onCancel();\n      return;\n    }\n    event.currentTarget.blur();\n  }\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn('flex items-start gap-3', className)}\n    >\n      {showsAvatar && <PersonAvatar person={me} className='mt-1' />}\n      <div className='relative min-w-0 flex-1'>\n        <Textarea\n          autoFocus={autoFocus}\n          value={body}\n          onChange={(event) => setBody(event.target.value)}\n          onKeyDown={handleKeyDown}\n          rows={1}\n          aria-label={placeholder}\n          placeholder={placeholder}\n          className='min-h-9 py-2 pe-24'\n        />\n        <Button\n          type='submit'\n          size='sm'\n          disabled={!canSend}\n          className='absolute end-1 bottom-1'\n        >\n          {submitLabel}\n        </Button>\n      </div>\n    </form>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/comment/_parts/comment-field.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"
}