4e: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"] 4f: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"] 50:T134f,"use client"; import { memo, useEffect, useId, useImperativeHandle, useMemo, useRef, } from "react"; import useEmblaCarousel from "embla-carousel-react"; import { cn } from "@/lib/utils"; import { DEFAULT_STORY_RAIL_LABELS, type StoryRailHandle, type StoryRailLabels, type StoryRailProps, type StoryRailItem, } from "./types"; import { useStoryRailState } from "./hooks/use-story-rail-state"; import { StoryThumbnail } from "./parts/story-thumbnail"; interface StoryRailInnerProps extends StoryRailProps { ref?: React.Ref; } function StoryRailInner(props: StoryRailInnerProps) { const { items: initialItems, leading, framed = true, subscribe, onSubscribeDelta, onItemClick, linkComponent, getHref, renderThumbnail, emptyState, labels: labelsProp, className, thumbnailClassName, ref, } = props; // Adapter for internal parts (StoryThumbnail + renderThumbnail slot) that // still use a positional (item, index) shape. Maps to the public object- // shape `onItemClick({ item, index })`. const handlePartItemClick: ((item: StoryRailItem, index: number) => void) | undefined = onItemClick ? (item, index) => onItemClick({ item, index }) : undefined; const labels = useMemo< Required> & { thumbnailAriaLabel?: (item: StoryRailItem) => string; } >( () => ({ ...DEFAULT_STORY_RAIL_LABELS, ...labelsProp, }), [labelsProp], ); const { items, dispatch } = useStoryRailState({ initialItems, subscribe, onSubscribeDelta, }); const emblaOptions = useMemo( () => ({ align: "start" as const, containScroll: "trimSnaps" as const, dragFree: true, }), [], ); const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions); // Stable ref for the imperative handle. const itemsRef = useRef(items); useEffect(() => { itemsRef.current = items; }); useImperativeHandle( ref, () => ({ scrollTo: (index: number) => { emblaApi?.scrollTo(index); }, getCurrentItems: () => itemsRef.current, reset: (next: StoryRailItem[]) => dispatch({ kind: "reset", next }), dispatch, markViewed: (itemId: string) => dispatch({ kind: "viewed", itemId }), }), [emblaApi, dispatch], ); const rootId = useId(); const showEmpty = items.length === 0 && !subscribe && !leading; const showRail = !showEmpty; return (

{showRail ? ( <> {/* Edge fade gradients render only when items are present (Q-P22). */}

{leading ?

{leading}

: null} {items.map((item, index) => (

{renderThumbnail ? renderThumbnail(item, !!item.hasUnread, { index, onClick: () => handlePartItemClick?.(item, index), baseId: `${rootId}-${item.id}`, }) : ( )}

))}

) : ( emptyState ?? (

{labels.emptyState}

) )}

); } const StoryRail = memo(StoryRailInner); StoryRail.displayName = "StoryRail"; export { StoryRail }; 51:Tfac,import type { ElementType, ReactNode } from "react"; export interface StoryRailItem { id: string; username: string; avatar?: string; /** Rectangular preview shown inside the gradient/muted ring. */ previewImage: string; /** Drives ring visual: gradient (unread) vs muted (read). Default false. */ hasUnread?: boolean; /** Optional — exposed for downstream story-viewer wiring. */ userId?: string; } export type StoryRailDelta = | { kind: "added"; item: StoryRailItem; position?: "start" | "end" } | { kind: "removed"; itemId: string } | { kind: "viewed"; itemId: string } | { kind: "updated"; itemId: string; partial: Partial; }; export type Unsubscribe = () => void; export type Subscribe = (handler: (delta: T) => void) => Unsubscribe; export interface StoryRailLabels { /** Default "Stories". aria-label on the rail's

. */ railLabel?: string; /** Default "Add story". Visible label below the AddStoryThumbnail. */ addStoryLabel?: string; /** Default "Add a story". aria-label for the AddStoryThumbnail button. */ addStoryAriaLabel?: string; /** Function so hosts can pluralize / localize. Default returns "{username}, unread story" / "{username}, viewed". */ thumbnailAriaLabel?: (item: StoryRailItem) => string; /** Default "No stories yet." Renders when items.length === 0 AND no leading AND no realtime. */ emptyState?: string; } export const DEFAULT_STORY_RAIL_LABELS: Required< Omit > = { railLabel: "Stories", addStoryLabel: "Add story", addStoryAriaLabel: "Add a story", emptyState: "No stories yet.", }; export type StoryRailLocalAction = | { kind: "add"; item: StoryRailItem; position?: "start" | "end" } | { kind: "remove"; itemId: string } | { kind: "viewed"; itemId: string } | { kind: "update"; itemId: string; partial: Partial } | { kind: "subscribe-delta"; delta: StoryRailDelta } | { kind: "reset"; next: StoryRailItem[] }; export interface ThumbnailRenderHelpers { index: number; onClick: () => void; /** Stable id for ARIA wiring inside the slot. */ baseId: string; } export interface StoryRailProps { /** Items rendered in the rail. Mount-only initial state — use ref.current.reset() to push updates. */ items: StoryRailItem[]; /** Optional content rendered before items (typically ). */ leading?: ReactNode; /** Wrap the rail in card-style chrome (bg-card + border + rounded). Default true. */ framed?: boolean; /** Realtime delta stream. Identity-stable required (useCallback host-side). */ subscribe?: Subscribe; onSubscribeDelta?: (delta: StoryRailDelta) => void; /** * Click handler — object-shape. Host typically opens a story viewer. * v0.2 cutover from positional `(item, index)`. */ onItemClick?: (args: { item: StoryRailItem; index: number }) => void; /** Polymorphic root for the thumbnail when getHref provided. Default `"a"`. */ linkComponent?: ElementType; /** When provided, thumbnail renders as `` instead of ` ); } export const StoryThumbnail = memo(StoryThumbnailInner); StoryThumbnail.displayName = "StoryThumbnail"; 53:T777,"use client"; import { memo } from "react"; import { Plus } from "lucide-react"; import { cn } from "@/lib/utils"; export interface AddStoryThumbnailProps { /** Avatar shown at 50% opacity inside the dashed-border placeholder. */ userAvatar?: string; onClick?: () => void; /** Visible label below. Default "Add story". */ label?: string; /** aria-label on the button. Default "Add a story". */ ariaLabel?: string; className?: string; } function AddStoryThumbnailInner({ userAvatar, onClick, label = "Add story", ariaLabel = "Add a story", className, }: AddStoryThumbnailProps) { return ( ); } export const AddStoryThumbnail = memo(AddStoryThumbnailInner); AddStoryThumbnail.displayName = "AddStoryThumbnail"; 54:Tddb,"use client"; import { useEffect, useReducer, useRef } from "react"; import type { StoryRailDelta, StoryRailItem, StoryRailLocalAction, Subscribe, } from "../types"; // ─── Pure helpers ──────────────────────────────────────────────────────────── function insertAtPosition( state: StoryRailItem[], item: StoryRailItem, position: "start" | "end" | undefined, ): StoryRailItem[] { if (position === "end") return [...state, item]; return [item, ...state]; // default "start" } function removeById(state: StoryRailItem[], id: string): StoryRailItem[] { const next = state.filter((i) => i.id !== id); return next.length === state.length ? state : next; } function patchById( state: StoryRailItem[], id: string, patch: Partial, ): StoryRailItem[] { let mutated = false; const next = state.map((i) => { if (i.id !== id) return i; mutated = true; return { ...i, ...patch }; }); return mutated ? next : state; } // ─── Reducer ───────────────────────────────────────────────────────────────── /** Pure reducer — exported for hosts driving their own state. */ export function storyRailReducer( state: StoryRailItem[], action: StoryRailLocalAction, ): StoryRailItem[] { switch (action.kind) { case "add": return insertAtPosition(state, action.item, action.position); case "remove": return removeById(state, action.itemId); case "viewed": return patchById(state, action.itemId, { hasUnread: false }); case "update": return patchById(state, action.itemId, action.partial); case "subscribe-delta": { const d = action.delta; switch (d.kind) { case "added": return insertAtPosition(state, d.item, d.position); case "removed": return removeById(state, d.itemId); case "viewed": return patchById(state, d.itemId, { hasUnread: false }); case "updated": return patchById(state, d.itemId, d.partial); } return state; } case "reset": return action.next; } } // ─── Hook ──────────────────────────────────────────────────────────────────── export interface UseStoryRailStateOptions { /** Captured ON MOUNT only — subsequent prop changes are ignored. */ initialItems: StoryRailItem[]; subscribe?: Subscribe; onSubscribeDelta?: (delta: StoryRailDelta) => void; } export interface UseStoryRailStateResult { items: StoryRailItem[]; dispatch: React.Dispatch; } export function useStoryRailState( opts: UseStoryRailStateOptions, ): UseStoryRailStateResult { const [items, dispatch] = useReducer(storyRailReducer, opts.initialItems); const onSubscribeDeltaRef = useRef(opts.onSubscribeDelta); useEffect(() => { onSubscribeDeltaRef.current = opts.onSubscribeDelta; }); const subscribe = opts.subscribe; useEffect(() => { if (!subscribe) return; const unsub = subscribe((delta) => { onSubscribeDeltaRef.current?.(delta); dispatch({ kind: "subscribe-delta", delta }); }); return unsub; }, [subscribe]); return { items, dispatch }; } 4d:["$","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","lucide-react",{"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"}]]}]}],["$","li","embla-carousel-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/embla-carousel-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":"embla-carousel-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ilinxa","registryDependencies":["avatar"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/components/data/story-rail/story-rail.tsx","content":"$50","type":"registry:component","target":"components/story-rail/story-rail.tsx"},{"path":"src/registry/components/data/story-rail/index.ts","content":"export { StoryRail } from \"./story-rail\";\nexport { AddStoryThumbnail } from \"./parts/add-story-thumbnail\";\nexport type { AddStoryThumbnailProps } from \"./parts/add-story-thumbnail\";\n\nexport {\n storyRailReducer,\n useStoryRailState,\n type UseStoryRailStateOptions,\n type UseStoryRailStateResult,\n} from \"./hooks/use-story-rail-state\";\n\nexport type {\n StoryRailItem,\n StoryRailProps,\n StoryRailHandle,\n StoryRailLabels,\n StoryRailDelta,\n StoryRailLocalAction,\n ThumbnailRenderHelpers,\n Subscribe,\n Unsubscribe,\n} from \"./types\";\n\nexport { DEFAULT_STORY_RAIL_LABELS } from \"./types\";\n\n","type":"registry:component","target":"components/story-rail/index.ts"},{"path":"src/registry/components/data/story-rail/types.ts","content":"$51","type":"registry:component","target":"components/story-rail/types.ts"},{"path":"src/registry/components/data/story-rail/parts/story-thumbnail.tsx","content":"$52","type":"registry:component","target":"components/story-rail/parts/story-thumbnail.tsx"},{"path":"src/registry/components/data/story-rail/parts/add-story-thumbnail.tsx","content":"$53","type":"registry:component","target":"components/story-rail/parts/add-story-thumbnail.tsx"},{"path":"src/registry/components/data/story-rail/hooks/use-story-rail-state.ts","content":"$54","type":"registry:component","target":"components/story-rail/hooks/use-story-rail-state.ts"}],"className":"h-[70svh] min-h-80"}]]}]