50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2088,'use client'; import { cva, type VariantProps } from 'class-variance-authority'; import { BellOff } from 'lucide-react'; import * as React from 'react'; import { focusRing, transitionBase } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { EmptyState } from '@/components/ui/empty-state'; import { useLabels, usePreset } from '@/components/ui/labels-context'; // Figma: _Feed item base (Size sm|md, Supporting item, New dot) and Activity feed Type=Messages|Versions, Divider=Divider|Connector|Line|False. // Timeline and notification lists live in activity-feed.tsx; this is the generic selectable row list (versions, messages, inbox). export type FeedListState = 'ready' | 'loading' | 'empty' | 'error'; // Resets the browser list padding and margin so the rows align with the surrounding content. const feedListVariants = cva('m-0 flex w-full list-none flex-col p-0', { variants: { divider: { none: '', // Hairline between items. line: '[&>li+li]:border-t [&>li+li]:border-solid [&>li+li]:border-border', }, }, defaultVariants: { divider: 'none' }, }); export interface FeedListProps extends Omit, 'children'>, VariantProps { // Accessible name of the list, e.g. "Versions". 'aria-label': string; state?: FeedListState; // Replaces the default empty panel. emptyState?: React.ReactNode; // Replaces the default error panel. errorState?: React.ReactNode; loadingRows?: number; children?: React.ReactNode; } const FeedList = React.forwardRef( ({ className, divider, state = 'ready', emptyState, errorState, loadingRows = 3, children, ...props }, ref) => { const l = useLabels(); if (state === 'loading') { return (

} role="status" aria-busy="true" aria-label={l.loadingItem(props['aria-label'])} className={cn('flex w-full flex-col gap-4', className)} > {Array.from({ length: loadingRows }, (_, i) => ( ))}

); } if (state === 'empty') { return <>{emptyState ?? }; } if (state === 'error') { return <>{errorState ?? }; } return (

)} > {children}

); }, ); FeedList.displayName = 'FeedList'; export interface FeedItemProps extends Omit, 'title' | 'onSelect'> { // Avatar or small status dot. avatar?: React.ReactNode; // Who did what. Rich text is allowed (names, links). title: React.ReactNode; // Relative or absolute time. time?: React.ReactNode; // File row, quoted text, labels, reply button. supporting?: React.ReactNode; size?: 'sm' | 'md'; // `compact` is the dense list row: 8px padding and gap, control radius, selected as a plain fill (no ring) and a small count pill. Defaults to `compact` in the zero preset, otherwise `default`. density?: 'default' | 'compact'; // Unread marker (notifications). unread?: boolean; // Number of unread entries. Shows a count badge (capped at 99+) instead of the dot. unreadCount?: number; // Keeps the preview on a single line with an ellipsis. The full text stays in the DOM for screen readers. truncateSupporting?: boolean; // Muted conversation: shows a bell-off icon and a screen reader text. muted?: boolean; // Current row (versions). selected?: boolean; // Makes the whole row a button. onSelect?: () => void; } const FeedItem = React.forwardRef( ({ className, avatar, title, time, supporting, size = 'md', density: densityProp, unread = false, unreadCount, truncateSupporting = false, muted = false, selected = false, onSelect, ...props }, ref) => { const l = useLabels(); const zero = usePreset() === 'zero'; const density = densityProp ?? (zero ? 'compact' : 'default'); const compact = density === 'compact'; // Selected rows and button rows sit on the muted fill (selected, hover), where the plain subtle role drops under 4.5:1. const subtle = selected || onSelect ? 'text-text-subtle-on-muted' : 'text-text-subtle'; const content = ( <> {avatar ? {avatar} : null} {title} {time || muted ? ( {muted ? ( <> ) : null} {supporting ? ( {supporting} ) : null} {unreadCount !== undefined && unreadCount > 0 ? ( {unreadCount > 99 ? '99+' : unreadCount} ) : unread ? ( ) : null} ); // Selected is a tinted fill plus an inset ring: the ring keeps 3:1 contrast on grey sidebar and muted surfaces where the fill alone vanishes. border-focus is used because it holds 3:1 in every theme, which the brand coloured icon-selected does not (yellow, lime, amber). // Hover uses muted-strong because muted equals the grey sidebar surface in light mode (1.0 contrast, invisible); muted-strong keeps >= 1.3 luminance step against sidebar, muted and background in light and dark. const rowClass = cn( 'flex w-full items-start text-left', compact ? 'gap-2 rounded-control p-2' : 'gap-3 rounded-item px-3 py-2', selected && (compact ? 'bg-muted' : 'bg-background-selected-default ring-2 ring-inset ring-border-focus'), ); return (

{onSelect ? ( ) : (

{content}

)}

); }, ); FeedItem.displayName = 'FeedItem'; export { FeedItem, FeedList, feedListVariants }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority@^0.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.0"}]]}]}],["$","li","lucide-react@^0.379.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^0.379.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/empty-state.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/feed-item.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]