@lar-works/design-system 0.0.0-stage → 0.1.0

package/dist/collections/DataRow.js

@@ -0,0 +1,57 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { LinkBox } from "../typography/Link.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/collections/DataRow.tsx
+function DataRowRoot({ children, interactive, rowIndex }) {
+	return /* @__PURE__ */ jsx(LinkBox, {
+		role: "row",
+		"aria-rowindex": rowIndex,
+		className: `group group/media-item border-base-300/60 grid h-full min-w-0 grid-cols-(--lar-list-columns) items-center gap-4 border-b px-3 transition-colors motion-reduce:transition-none ${interactive ? "hover:bg-base-100 focus-within:bg-base-100" : ""}`,
+		children
+	});
+}
+function DataRowPrimary(props) {
+	const artwork = props.loading ? props.artwork !== false && /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "artwork" }) : props.artwork;
+	const subtitle = props.loading ? props.subtitle !== false : Boolean(props.subtitle);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-center gap-3",
+		children: [
+			artwork ? /* @__PURE__ */ jsx("span", {
+				className: "size-10 shrink-0",
+				children: artwork
+			}) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: "block",
+					truncate: true,
+					variant: "label",
+					loading: props.loading,
+					title: props.loading ? void 0 : props.title,
+					children: !props.loading && props.title
+				}), subtitle ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: "block",
+					truncate: true,
+					variant: "caption",
+					tone: "muted",
+					loading: props.loading,
+					children: !props.loading && props.subtitle
+				}) : null]
+			}),
+			!props.loading && props.detail ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				className: "ml-auto shrink-0",
+				variant: "caption",
+				tone: "muted",
+				children: props.detail
+			}) : null
+		]
+	});
+}
+const DataRow = Object.assign(DataRowRoot, { Primary: DataRowPrimary });
+export { DataRow };
+
+//# sourceMappingURL=DataRow.js.map

package/dist/collections/DataRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataRow.js","names":[],"sources":["../../src/collections/DataRow.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through DataRow. */\nimport type { ReactNode } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { LinkBox } from '../typography/Link';\nimport { Text } from '../typography/Typography';\n\nfunction DataRowRoot({\n    children,\n    interactive,\n    rowIndex,\n}: {\n    children: ReactNode;\n    interactive?: boolean;\n    rowIndex: number;\n}) {\n    return (\n        <LinkBox\n            role=\"row\"\n            aria-rowindex={rowIndex}\n            className={`group group/media-item border-base-300/60 grid h-full min-w-0 grid-cols-(--lar-list-columns) items-center gap-4 border-b px-3 transition-colors motion-reduce:transition-none ${interactive ? 'hover:bg-base-100 focus-within:bg-base-100' : ''}`}\n        >\n            {children}\n        </LinkBox>\n    );\n}\n\ntype DataRowPrimaryProps =\n    | {\n          artwork?: ReactNode;\n          detail?: ReactNode;\n          loading?: false;\n          subtitle?: ReactNode;\n          title: string;\n      }\n    | {\n          artwork?: boolean;\n          loading: true;\n          subtitle?: boolean;\n      };\n\nfunction DataRowPrimary(props: DataRowPrimaryProps) {\n    const artwork = props.loading\n        ? props.artwork !== false && <SkeletonLoader.Shape presentation=\"artwork\" />\n        : props.artwork;\n    const subtitle = props.loading ? props.subtitle !== false : Boolean(props.subtitle);\n\n    return (\n        <span className=\"flex min-w-0 items-center gap-3\">\n            {artwork ? <span className=\"size-10 shrink-0\">{artwork}</span> : null}\n            <span className=\"min-w-0 flex-1\">\n                <Text\n                    as=\"span\"\n                    className=\"block\"\n                    truncate\n                    variant=\"label\"\n                    loading={props.loading}\n                    title={props.loading ? undefined : props.title}\n                >\n                    {!props.loading && props.title}\n                </Text>\n                {subtitle ? (\n                    <Text as=\"span\" className=\"block\" truncate variant=\"caption\" tone=\"muted\" loading={props.loading}>\n                        {!props.loading && props.subtitle}\n                    </Text>\n                ) : null}\n            </span>\n            {!props.loading && props.detail ? (\n                <Text as=\"span\" className=\"ml-auto shrink-0\" variant=\"caption\" tone=\"muted\">\n                    {props.detail}\n                </Text>\n            ) : null}\n        </span>\n    );\n}\n\nexport const DataRow = Object.assign(DataRowRoot, {\n    Primary: DataRowPrimary,\n});\n"],"mappings":";;;;;AAOA,SAAS,YAAY,EACjB,UACA,aACA,YAKD;CACC,OACI,oBAAC,SAAD;EACI,MAAK;EACL,iBAAe;EACf,WAAW,iLAAiL,cAAc,+CAA+C;EAExP;CACI,CAAA;AAEjB;AAgBA,SAAS,eAAe,OAA4B;CAChD,MAAM,UAAU,MAAM,UAChB,MAAM,YAAY,SAAS,oBAAC,eAAe,OAAhB,EAAsB,cAAa,UAAW,CAAA,IACzE,MAAM;CACZ,MAAM,WAAW,MAAM,UAAU,MAAM,aAAa,QAAQ,QAAQ,MAAM,QAAQ;CAElF,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GACK,UAAU,oBAAC,QAAD;IAAM,WAAU;IAAoB,UAAA;GAAc,CAAA,IAAI;GACjE,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACI,oBAAC,MAAD;KACI,IAAG;KACH,WAAU;KACV,UAAA;KACA,SAAQ;KACR,SAAS,MAAM;KACf,OAAO,MAAM,UAAU,KAAA,IAAY,MAAM;KAExC,UAAA,CAAC,MAAM,WAAW,MAAM;IACvB,CAAA,GACL,WACG,oBAAC,MAAD;KAAM,IAAG;KAAO,WAAU;KAAQ,UAAA;KAAS,SAAQ;KAAU,MAAK;KAAQ,SAAS,MAAM;KACpF,UAAA,CAAC,MAAM,WAAW,MAAM;IACvB,CAAA,IACN,IACF;;GACL,CAAC,MAAM,WAAW,MAAM,SACrB,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;IAAmB,SAAQ;IAAU,MAAK;IAC/D,UAAA,MAAM;GACL,CAAA,IACN;EACF;;AAEd;AAEA,MAAa,UAAU,OAAO,OAAO,aAAa,EAC9C,SAAS,eACb,CAAC"}

package/dist/collections/ResultList.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+interface ResultListProps extends Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style'> {
+  label: string;
+  loading?: boolean;
+  loadingLabel?: string;
+  density?: 'compact' | 'comfortable';
+}
+export declare function ResultList({ children, label, loading, loadingLabel, density, role, ...props }: ResultListProps): import("react").JSX.Element;
+export interface ResultRowProps extends Pick<ComponentPropsWithoutRef<'button'>, 'disabled' | 'id' | 'onPointerMove' | 'tabIndex'> {
+  artwork: ReactNode;
+  kind: string;
+  onSelect: () => void;
+  href?: string;
+  selected?: boolean;
+  /** `icon` sets a small glyph in a narrow column; `default` shows artwork. */
+  presentation?: 'default' | 'icon' | 'poster' | 'video';
+  current?: boolean;
+  subtitle?: string;
+  detail?: string;
+  title: string;
+}
+export declare function ResultRow(props: ResultRowProps | {
+  loading: true;
+}): import("react").JSX.Element;
+export declare function ResultEmpty({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ResultList.d.ts.map

package/dist/collections/ResultList.js

@@ -0,0 +1,128 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Stack } from "../layout/Flow.js";
+import { LinkBox, LinkOverlay } from "../typography/Link.js";
+import { Text } from "../typography/Typography.js";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+// src/collections/ResultList.tsx
+const ResultListContext = createContext({
+	compact: false,
+	listbox: true
+});
+function ResultList({ children, label, loading = false, loadingLabel = label, density = "comfortable", role = "listbox", ...props }) {
+	return /* @__PURE__ */ jsx(ResultListContext.Provider, {
+		value: {
+			compact: density === "compact",
+			listbox: role === "listbox"
+		},
+		children: /* @__PURE__ */ jsx(SkeletonLoader, {
+			loading,
+			label: loadingLabel,
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				role,
+				"aria-label": label,
+				"aria-busy": loading || props["aria-busy"],
+				className: "flex flex-col gap-1",
+				children: loading ? Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx(ResultRow, { loading: true }, index)) : children
+			})
+		})
+	});
+}
+function ResultRow(props) {
+	const { compact, listbox } = useContext(ResultListContext);
+	const loading = "loading" in props;
+	const presentation = loading ? "default" : props.presentation;
+	const classes = `grid w-full items-center rounded-md px-2 text-left ${presentation === "poster" ? "grid-cols-[4rem_minmax(0,1fr)_auto] gap-4 py-3" : presentation === "video" ? "grid-cols-[5rem_minmax(0,1fr)_auto] gap-4 py-3 sm:grid-cols-[10rem_minmax(0,1fr)_auto]" : presentation === "icon" ? "grid-cols-[1rem_minmax(0,1fr)] gap-3 py-2" : compact ? "grid-cols-[2rem_minmax(0,1fr)] gap-2 py-1" : "grid-cols-[2.75rem_minmax(0,1fr)] gap-3 py-2"}`;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		loading ? /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "artwork" }) : presentation === "icon" ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "text-base-600 flex size-4 [&_svg]:size-4",
+			children: props.artwork
+		}) : props.artwork,
+		/* @__PURE__ */ jsxs(Stack, {
+			space: "none",
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "label",
+					truncate: true,
+					loading,
+					children: !loading && (props.href && !listbox ? /* @__PURE__ */ jsx(LinkOverlay, {
+						href: props.href,
+						onNavigate: props.onSelect,
+						"aria-label": resultLabel(props),
+						"aria-current": props.current ? "page" : void 0,
+						children: props.title
+					}) : props.title)
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "caption",
+					tone: "muted",
+					truncate: true,
+					loading,
+					children: !loading && (props.subtitle ?? props.kind)
+				}),
+				!loading && props.detail ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "caption",
+					tone: "muted",
+					className: "line-clamp-2 wrap-break-word",
+					children: props.detail
+				}) : null
+			]
+		}),
+		presentation === "poster" || presentation === "video" ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "text-base-500 flex [&>svg]:size-4",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		}) : null
+	] });
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		children: content
+	});
+	const { artwork: _artwork, href, kind: _kind, onSelect, selected = false, presentation: _presentation, current = false, subtitle: _subtitle, detail: _detail, title: _title, ...buttonProps } = props;
+	const row = href && !listbox ? /* @__PURE__ */ jsx(LinkBox, {
+		className: `${classes} hover:bg-base-100 focus-within:bg-base-100 has-[[aria-current=page]]:bg-base-100 has-[[aria-current=page]]:ring-base-300 has-[[aria-current=page]]:ring-1`,
+		children: content
+	}) : /* @__PURE__ */ jsx("button", {
+		...tabbable,
+		...buttonProps,
+		type: "button",
+		role: listbox ? "option" : void 0,
+		"aria-label": resultLabel(props),
+		"aria-selected": listbox ? selected : void 0,
+		"aria-current": current ? "page" : void 0,
+		className: `${classes} hover:bg-base-100 aria-selected:bg-primary/10 aria-selected:ring-primary/30 focus-visible:outline-primary focus-visible:outline-2 disabled:pointer-events-none disabled:opacity-60 aria-selected:ring-1 aria-selected:ring-inset`,
+		onClick: onSelect,
+		children: content
+	});
+	return listbox ? row : /* @__PURE__ */ jsx("div", {
+		role: "listitem",
+		children: row
+	});
+}
+/** The row's accessible name: what it shows, then its kind, so two rows with one title still differ. */
+function resultLabel({ title, subtitle, kind }) {
+	return [
+		title,
+		subtitle,
+		kind
+	].filter(Boolean).join(", ");
+}
+function ResultEmpty({ children }) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		tone: "muted",
+		className: "px-3 py-4 text-center",
+		children
+	});
+}
+export { ResultEmpty, ResultList, ResultRow };
+
+//# sourceMappingURL=ResultList.js.map

package/dist/collections/ResultList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultList.js","names":[],"sources":["../../src/collections/ResultList.tsx"],"sourcesContent":["import { ChevronRightIcon } from 'lucide-react';\nimport { type ComponentPropsWithoutRef, createContext, type ReactNode, useContext } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Stack } from '../layout/Flow';\nimport { LinkBox, LinkOverlay } from '../typography/Link';\nimport { Text } from '../typography/Typography';\n\nconst ResultListContext = createContext({ compact: false, listbox: true });\n\ninterface ResultListProps extends Omit<ComponentPropsWithoutRef<'div'>, 'className' | 'style'> {\n    label: string;\n    loading?: boolean;\n    loadingLabel?: string;\n    density?: 'compact' | 'comfortable';\n}\n\nexport function ResultList({\n    children,\n    label,\n    loading = false,\n    loadingLabel = label,\n    density = 'comfortable',\n    role = 'listbox',\n    ...props\n}: ResultListProps) {\n    return (\n        <ResultListContext.Provider value={{ compact: density === 'compact', listbox: role === 'listbox' }}>\n            <SkeletonLoader loading={loading} label={loadingLabel}>\n                <div\n                    {...props}\n                    role={role}\n                    aria-label={label}\n                    aria-busy={loading || props['aria-busy']}\n                    className=\"flex flex-col gap-1\"\n                >\n                    {loading ? Array.from({ length: 8 }, (_, index) => <ResultRow key={index} loading />) : children}\n                </div>\n            </SkeletonLoader>\n        </ResultListContext.Provider>\n    );\n}\n\nexport interface ResultRowProps extends Pick<\n    ComponentPropsWithoutRef<'button'>,\n    'disabled' | 'id' | 'onPointerMove' | 'tabIndex'\n> {\n    artwork: ReactNode;\n    kind: string;\n    onSelect: () => void;\n    href?: string;\n    selected?: boolean;\n    /** `icon` sets a small glyph in a narrow column; `default` shows artwork. */\n    presentation?: 'default' | 'icon' | 'poster' | 'video';\n    current?: boolean;\n    subtitle?: string;\n    detail?: string;\n    title: string;\n}\n\nexport function ResultRow(props: ResultRowProps | { loading: true }) {\n    const { compact, listbox } = useContext(ResultListContext);\n    const loading = 'loading' in props;\n    const presentation = loading ? 'default' : props.presentation;\n    const classes = `grid w-full items-center rounded-md px-2 text-left ${presentation === 'poster' ? 'grid-cols-[4rem_minmax(0,1fr)_auto] gap-4 py-3' : presentation === 'video' ? 'grid-cols-[5rem_minmax(0,1fr)_auto] gap-4 py-3 sm:grid-cols-[10rem_minmax(0,1fr)_auto]' : presentation === 'icon' ? 'grid-cols-[1rem_minmax(0,1fr)] gap-3 py-2' : compact ? 'grid-cols-[2rem_minmax(0,1fr)] gap-2 py-1' : 'grid-cols-[2.75rem_minmax(0,1fr)] gap-3 py-2'}`;\n    const content = (\n        <>\n            {loading ? (\n                <SkeletonLoader.Shape presentation=\"artwork\" />\n            ) : presentation === 'icon' ? (\n                <span aria-hidden=\"true\" className=\"text-base-600 flex size-4 [&_svg]:size-4\">\n                    {props.artwork}\n                </span>\n            ) : (\n                props.artwork\n            )}\n            <Stack space=\"none\" className=\"min-w-0\">\n                <Text as=\"span\" variant=\"label\" truncate loading={loading}>\n                    {!loading &&\n                        (props.href && !listbox ? (\n                            <LinkOverlay\n                                href={props.href}\n                                onNavigate={props.onSelect}\n                                aria-label={resultLabel(props)}\n                                aria-current={props.current ? 'page' : undefined}\n                            >\n                                {props.title}\n                            </LinkOverlay>\n                        ) : (\n                            props.title\n                        ))}\n                </Text>\n                <Text as=\"span\" variant=\"caption\" tone=\"muted\" truncate loading={loading}>\n                    {!loading && (props.subtitle ?? props.kind)}\n                </Text>\n                {!loading && props.detail ? (\n                    <Text as=\"span\" variant=\"caption\" tone=\"muted\" className=\"line-clamp-2 wrap-break-word\">\n                        {props.detail}\n                    </Text>\n                ) : null}\n            </Stack>\n            {presentation === 'poster' || presentation === 'video' ? (\n                <span aria-hidden=\"true\" className=\"text-base-500 flex [&>svg]:size-4\">\n                    <ChevronRightIcon />\n                </span>\n            ) : null}\n        </>\n    );\n\n    if (loading) return <div className={classes}>{content}</div>;\n\n    const {\n        artwork: _artwork,\n        href,\n        kind: _kind,\n        onSelect,\n        selected = false,\n        presentation: _presentation,\n        current = false,\n        subtitle: _subtitle,\n        detail: _detail,\n        title: _title,\n        ...buttonProps\n    } = props;\n\n    const row =\n        href && !listbox ? (\n            <LinkBox\n                className={`${classes} hover:bg-base-100 focus-within:bg-base-100 has-[[aria-current=page]]:bg-base-100 has-[[aria-current=page]]:ring-base-300 has-[[aria-current=page]]:ring-1`}\n            >\n                {content}\n            </LinkBox>\n        ) : (\n            <button\n                {...tabbable}\n                {...buttonProps}\n                type=\"button\"\n                role={listbox ? 'option' : undefined}\n                aria-label={resultLabel(props)}\n                aria-selected={listbox ? selected : undefined}\n                aria-current={current ? 'page' : undefined}\n                className={`${classes} hover:bg-base-100 aria-selected:bg-primary/10 aria-selected:ring-primary/30 focus-visible:outline-primary focus-visible:outline-2 disabled:pointer-events-none disabled:opacity-60 aria-selected:ring-1 aria-selected:ring-inset`}\n                onClick={onSelect}\n            >\n                {content}\n            </button>\n        );\n\n    return listbox ? row : <div role=\"listitem\">{row}</div>;\n}\n\n/** The row's accessible name: what it shows, then its kind, so two rows with one title still differ. */\nfunction resultLabel({ title, subtitle, kind }: ResultRowProps): string {\n    return [title, subtitle, kind].filter(Boolean).join(', ');\n}\n\nexport function ResultEmpty({ children }: { children: ReactNode }) {\n    return (\n        <Text as=\"span\" tone=\"muted\" className=\"px-3 py-4 text-center\">\n            {children}\n        </Text>\n    );\n}\n"],"mappings":"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"}

package/dist/collections/ScrollRow.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode, Ref } from "react";
+/** One row of wide cards, such as video stills, that scrolls sideways instead of wrapping. */
+export declare function ScrollRow({ ref, label, loading, loadingLabel, children }: {
+  ref: Ref<HTMLUListElement>;
+  label: string;
+  loading?: boolean;
+  loadingLabel?: string;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/** `value` identifies the item, so its row can scroll to it. */
+export declare function ScrollRowItem({ value, children }: {
+  value?: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Each arrow is disabled at its end of the row, so both are while the row fits. */
+export declare function ScrollRowArrows({ onScroll, canScrollBack, canScrollForward, backLabel, forwardLabel }: {
+  onScroll: (direction: 1 | -1) => void;
+  canScrollBack: boolean;
+  canScrollForward: boolean;
+  backLabel: string;
+  forwardLabel: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ScrollRow.d.ts.map

package/dist/collections/ScrollRow.js

@@ -0,0 +1,59 @@
+import { IconButton } from "../actions/IconButton.js";
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { Inline } from "../layout/Flow.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+// src/collections/ScrollRow.tsx
+const row = "-mx-1 flex snap-x scroll-px-1 gap-4 overflow-x-auto px-1 pt-1 pb-3";
+/** One row of wide cards, such as video stills, that scrolls sideways instead of wrapping. */
+function ScrollRow({ ref, label, loading = false, loadingLabel = label, children }) {
+	if (loading) return /* @__PURE__ */ jsx(SkeletonLoader, {
+		label: loadingLabel,
+		children: /* @__PURE__ */ jsx("div", {
+			className: row,
+			children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", {
+				className: "flex w-64 shrink-0 flex-col gap-2",
+				children: [/* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: "video" }), /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "wide" })]
+			}, index))
+		})
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		"aria-label": label,
+		className: row,
+		children
+	});
+}
+/** `value` identifies the item, so its row can scroll to it. */
+function ScrollRowItem({ value, children }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-value": value,
+		className: "w-64 shrink-0 snap-start",
+		children
+	});
+}
+/** Each arrow is disabled at its end of the row, so both are while the row fits. */
+function ScrollRowArrows({ onScroll, canScrollBack, canScrollForward, backLabel, forwardLabel }) {
+	return /* @__PURE__ */ jsxs(Inline, {
+		space: "tight",
+		children: [/* @__PURE__ */ jsx(IconButton, {
+			"aria-label": backLabel,
+			title: backLabel,
+			disabled: !canScrollBack,
+			icon: /* @__PURE__ */ jsx("span", {
+				className: "flex rotate-180",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			}),
+			onClick: () => onScroll(-1)
+		}), /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": forwardLabel,
+			title: forwardLabel,
+			disabled: !canScrollForward,
+			icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+			onClick: () => onScroll(1)
+		})]
+	});
+}
+export { ScrollRow, ScrollRowArrows, ScrollRowItem };
+
+//# sourceMappingURL=ScrollRow.js.map

package/dist/collections/ScrollRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollRow.js","names":[],"sources":["../../src/collections/ScrollRow.tsx"],"sourcesContent":["import { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode, Ref } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { Inline } from '../layout/Flow';\n\nconst row = '-mx-1 flex snap-x scroll-px-1 gap-4 overflow-x-auto px-1 pt-1 pb-3';\n\n/** One row of wide cards, such as video stills, that scrolls sideways instead of wrapping. */\nexport function ScrollRow({\n    ref,\n    label,\n    loading = false,\n    loadingLabel = label,\n    children,\n}: {\n    ref: Ref<HTMLUListElement>;\n    label: string;\n    loading?: boolean;\n    loadingLabel?: string;\n    children?: ReactNode;\n}) {\n    if (loading)\n        return (\n            <SkeletonLoader label={loadingLabel}>\n                <div className={row}>\n                    {Array.from({ length: 4 }, (_, index) => (\n                        <div key={index} className=\"flex w-64 shrink-0 flex-col gap-2\">\n                            <SkeletonLoader.Shape presentation=\"video\" />\n                            <SkeletonLoader.Shape width=\"wide\" />\n                        </div>\n                    ))}\n                </div>\n            </SkeletonLoader>\n        );\n\n    return (\n        <ul ref={ref} aria-label={label} className={row}>\n            {children}\n        </ul>\n    );\n}\n\n/** `value` identifies the item, so its row can scroll to it. */\nexport function ScrollRowItem({ value, children }: { value?: string; children: ReactNode }) {\n    return (\n        <li data-value={value} className=\"w-64 shrink-0 snap-start\">\n            {children}\n        </li>\n    );\n}\n\n/** Each arrow is disabled at its end of the row, so both are while the row fits. */\nexport function ScrollRowArrows({\n    onScroll,\n    canScrollBack,\n    canScrollForward,\n    backLabel,\n    forwardLabel,\n}: {\n    onScroll: (direction: 1 | -1) => void;\n    canScrollBack: boolean;\n    canScrollForward: boolean;\n    backLabel: string;\n    forwardLabel: string;\n}) {\n    return (\n        <Inline space=\"tight\">\n            <IconButton\n                aria-label={backLabel}\n                title={backLabel}\n                disabled={!canScrollBack}\n                icon={\n                    <span className=\"flex rotate-180\">\n                        <ChevronRightIcon />\n                    </span>\n                }\n                onClick={() => onScroll(-1)}\n            />\n            <IconButton\n                aria-label={forwardLabel}\n                title={forwardLabel}\n                disabled={!canScrollForward}\n                icon={<ChevronRightIcon />}\n                onClick={() => onScroll(1)}\n            />\n        </Inline>\n    );\n}\n"],"mappings":";;;;;;AAOA,MAAM,MAAM;;AAGZ,SAAgB,UAAU,EACtB,KACA,OACA,UAAU,OACV,eAAe,OACf,YAOD;CACC,IAAI,SACA,OACI,oBAAC,gBAAD;EAAgB,OAAO;EACnB,UAAA,oBAAC,OAAD;GAAK,WAAW;GACX,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAC3B,qBAAC,OAAD;IAAiB,WAAU;IAA3B,UAAA,CACI,oBAAC,eAAe,OAAhB,EAAsB,cAAa,QAAS,CAAA,GAC5C,oBAAC,eAAe,OAAhB,EAAsB,OAAM,OAAQ,CAAA,CACnC;GAHK,GAAA,KAGL,CACR;EACA,CAAA;CACO,CAAA;CAGxB,OACI,oBAAC,MAAD;EAAS;EAAK,cAAY;EAAO,WAAW;EACvC;CACD,CAAA;AAEZ;;AAGA,SAAgB,cAAc,EAAE,OAAO,YAAqD;CACxF,OACI,oBAAC,MAAD;EAAI,cAAY;EAAO,WAAU;EAC5B;CACD,CAAA;AAEZ;;AAGA,SAAgB,gBAAgB,EAC5B,UACA,eACA,kBACA,WACA,gBAOD;CACC,OACI,qBAAC,QAAD;EAAQ,OAAM;EAAd,UAAA,CACI,oBAAC,YAAD;GACI,cAAY;GACZ,OAAO;GACP,UAAU,CAAC;GACX,MACI,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,kBAAD,CAAmB,CAAA;GACjB,CAAA;GAEV,eAAe,SAAS,EAAE;EAC7B,CAAA,GACD,oBAAC,YAAD;GACI,cAAY;GACZ,OAAO;GACP,UAAU,CAAC;GACX,MAAM,oBAAC,kBAAD,CAAmB,CAAA;GACzB,eAAe,SAAS,CAAC;EAC5B,CAAA,CACG;;AAEhB"}

package/dist/collections/VirtualGrid.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+interface VirtualGridProps {
+  count: number;
+  label: string;
+  onRangeChange: (startIndex: number, endIndex: number) => void;
+  renderItem: (index: number) => ReactNode;
+  textRows?: 1 | 2 | 3;
+  aspect?: 'square' | 'poster';
+  itemKey: (index: number) => string;
+  loading?: boolean;
+}
+export declare function VirtualGrid({ count, label, onRangeChange, renderItem, itemKey, loading, textRows, aspect }: VirtualGridProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=VirtualGrid.d.ts.map

package/dist/collections/VirtualGrid.js

@@ -0,0 +1,71 @@
+import { useCollectionViewport } from "./CollectionViewport.js";
+import { useCollectionMotion } from "./useCollectionMotion.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+// src/collections/VirtualGrid.tsx
+function VirtualGrid({ count, label, onRangeChange, renderItem, itemKey, loading, textRows = 2, aspect = "square" }) {
+	const { scrollMargin, setCollectionElement, width } = useCollectionViewport();
+	const root = useRef(null);
+	useCollectionMotion(root);
+	const gap = 16;
+	const maxItemWidth = 170;
+	const layoutWidth = width || 356;
+	const columns = Math.max(2, Math.round((layoutWidth + gap) / 186));
+	const itemWidth = Math.min(maxItemWidth, Math.max(0, (layoutWidth - gap * (columns - 1)) / columns));
+	const rowHeight = itemWidth * (aspect === "poster" ? 1.5 : 1) + 64 + (textRows - 2) * 16;
+	const rowCount = Math.ceil(count / columns);
+	const virtualizer = useWindowVirtualizer({
+		count: rowCount,
+		estimateSize: () => rowHeight,
+		overscan: 2,
+		scrollMargin
+	});
+	const rows = virtualizer.getVirtualItems();
+	const startIndex = (rows[0]?.index ?? 0) * columns;
+	const endIndex = Math.min(count - 1, ((rows.at(-1)?.index ?? 0) + 1) * columns - 1);
+	useEffect(() => {
+		virtualizer.measure();
+	}, [
+		columns,
+		rowHeight,
+		virtualizer
+	]);
+	useEffect(() => {
+		if (count > 0) onRangeChange(startIndex, endIndex);
+	}, [
+		count,
+		endIndex,
+		onRangeChange,
+		startIndex
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setCollectionElement,
+		role: "region",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: root,
+			className: "relative w-full",
+			"aria-busy": loading,
+			style: { height: virtualizer.getTotalSize() },
+			children: rows.flatMap((row) => Array.from({ length: columns }, (_, column) => {
+				const index = row.index * columns + column;
+				const key = itemKey(index);
+				return index < count ? /* @__PURE__ */ jsx("div", {
+					"data-collection-key": key,
+					"data-index": index,
+					className: "absolute",
+					style: {
+						left: column * (itemWidth + (layoutWidth - columns * itemWidth) / (columns - 1)),
+						top: row.start - scrollMargin,
+						width: itemWidth
+					},
+					children: renderItem(index)
+				}, key) : null;
+			}))
+		})
+	});
+}
+export { VirtualGrid };
+
+//# sourceMappingURL=VirtualGrid.js.map

package/dist/collections/VirtualGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualGrid.js","names":[],"sources":["../../src/collections/VirtualGrid.tsx"],"sourcesContent":["import { useWindowVirtualizer } from '@tanstack/react-virtual';\nimport { type ReactNode, useEffect, useRef } from 'react';\n\nimport { useCollectionViewport } from './CollectionViewport';\nimport { useCollectionMotion } from './useCollectionMotion';\n\ninterface VirtualGridProps {\n    count: number;\n    label: string;\n    onRangeChange: (startIndex: number, endIndex: number) => void;\n    renderItem: (index: number) => ReactNode;\n    textRows?: 1 | 2 | 3;\n    aspect?: 'square' | 'poster';\n    itemKey: (index: number) => string;\n    loading?: boolean;\n}\n\nexport function VirtualGrid({\n    count,\n    label,\n    onRangeChange,\n    renderItem,\n    itemKey,\n    loading,\n    textRows = 2,\n    aspect = 'square',\n}: VirtualGridProps) {\n    const { scrollMargin, setCollectionElement, width } = useCollectionViewport();\n    const root = useRef<HTMLDivElement>(null);\n\n    useCollectionMotion(root);\n\n    const gap = 16;\n    const maxItemWidth = 170;\n    // Reserve the tallest grid until measured so history restoration is not clipped.\n    const layoutWidth = width || maxItemWidth * 2 + gap;\n    const columns = Math.max(2, Math.round((layoutWidth + gap) / (maxItemWidth + gap)));\n    const itemWidth = Math.min(maxItemWidth, Math.max(0, (layoutWidth - gap * (columns - 1)) / columns));\n    const rowHeight = itemWidth * (aspect === 'poster' ? 1.5 : 1) + 64 + (textRows - 2) * 16;\n    const rowCount = Math.ceil(count / columns);\n    const virtualizer = useWindowVirtualizer({\n        count: rowCount,\n        estimateSize: () => rowHeight,\n        overscan: 2,\n        scrollMargin,\n    });\n    const rows = virtualizer.getVirtualItems();\n    const startIndex = (rows[0]?.index ?? 0) * columns;\n    const endIndex = Math.min(count - 1, ((rows.at(-1)?.index ?? 0) + 1) * columns - 1);\n\n    useEffect(() => {\n        virtualizer.measure();\n    }, [columns, rowHeight, virtualizer]);\n\n    useEffect(() => {\n        if (count > 0) onRangeChange(startIndex, endIndex);\n    }, [count, endIndex, onRangeChange, startIndex]);\n\n    return (\n        <div ref={setCollectionElement} role=\"region\" aria-label={label}>\n            <div\n                ref={root}\n                className=\"relative w-full\"\n                aria-busy={loading}\n                style={{ height: virtualizer.getTotalSize() }}\n            >\n                {rows.flatMap((row) =>\n                    Array.from({ length: columns }, (_, column) => {\n                        const index = row.index * columns + column;\n                        const key = itemKey(index);\n\n                        return index < count ? (\n                            <div\n                                key={key}\n                                data-collection-key={key}\n                                data-index={index}\n                                className=\"absolute\"\n                                style={{\n                                    left: column * (itemWidth + (layoutWidth - columns * itemWidth) / (columns - 1)),\n                                    top: row.start - scrollMargin,\n                                    width: itemWidth,\n                                }}\n                            >\n                                {renderItem(index)}\n                            </div>\n                        ) : null;\n                    }),\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,YAAY,EACxB,OACA,OACA,eACA,YACA,SACA,SACA,WAAW,GACX,SAAS,YACQ;CACjB,MAAM,EAAE,cAAc,sBAAsB,UAAU,sBAAsB;CAC5E,MAAM,OAAO,OAAuB,IAAI;CAExC,oBAAoB,IAAI;CAExB,MAAM,MAAM;CACZ,MAAM,eAAe;CAErB,MAAM,cAAc,SAAS;CAC7B,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,OAAO,cAAc,OAAQ,GAAmB,CAAC;CAClF,MAAM,YAAY,KAAK,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,OAAO,UAAU,MAAM,OAAO,CAAC;CACnG,MAAM,YAAY,aAAa,WAAW,WAAW,MAAM,KAAK,MAAM,WAAW,KAAK;CACtF,MAAM,WAAW,KAAK,KAAK,QAAQ,OAAO;CAC1C,MAAM,cAAc,qBAAqB;EACrC,OAAO;EACP,oBAAoB;EACpB,UAAU;EACV;CACJ,CAAC;CACD,MAAM,OAAO,YAAY,gBAAgB;CACzC,MAAM,cAAc,KAAK,EAAE,EAAE,SAAS,KAAK;CAC3C,MAAM,WAAW,KAAK,IAAI,QAAQ,KAAK,KAAK,GAAG,EAAE,CAAC,EAAE,SAAS,KAAK,KAAK,UAAU,CAAC;CAElF,gBAAgB;EACZ,YAAY,QAAQ;CACxB,GAAG;EAAC;EAAS;EAAW;CAAW,CAAC;CAEpC,gBAAgB;EACZ,IAAI,QAAQ,GAAG,cAAc,YAAY,QAAQ;CACrD,GAAG;EAAC;EAAO;EAAU;EAAe;CAAU,CAAC;CAE/C,OACI,oBAAC,OAAD;EAAK,KAAK;EAAsB,MAAK;EAAS,cAAY;EACtD,UAAA,oBAAC,OAAD;GACI,KAAK;GACL,WAAU;GACV,aAAW;GACX,OAAO,EAAE,QAAQ,YAAY,aAAa,EAAE;GAE3C,UAAA,KAAK,SAAS,QACX,MAAM,KAAK,EAAE,QAAQ,QAAQ,IAAI,GAAG,WAAW;IAC3C,MAAM,QAAQ,IAAI,QAAQ,UAAU;IACpC,MAAM,MAAM,QAAQ,KAAK;IAEzB,OAAO,QAAQ,QACX,oBAAC,OAAD;KAEI,uBAAqB;KACrB,cAAY;KACZ,WAAU;KACV,OAAO;MACH,MAAM,UAAU,aAAa,cAAc,UAAU,cAAc,UAAU;MAC7E,KAAK,IAAI,QAAQ;MACjB,OAAO;KACX;KAEC,UAAA,WAAW,KAAK;IAChB,GAXI,GAWJ,IACL;GACR,CAAC,CACL;EACC,CAAA;CACJ,CAAA;AAEb"}

package/dist/collections/VirtualList.d.ts

@@ -0,0 +1,34 @@
+import { columnBreakpoints, columnWidths } from "./CollectionTokens.js";
+import { ReactNode } from "react";
+export interface ListColumn<TItem> {
+  id: string;
+  label: string;
+  hideLabel?: boolean;
+  render: (item: TItem, visibleColumns: readonly string[], index: number) => ReactNode;
+  size: keyof typeof columnWidths;
+  priority?: keyof typeof columnBreakpoints;
+  placeholder?: (visibleColumns: readonly string[]) => ReactNode;
+  align?: 'right';
+}
+export interface VirtualListProps<TItem> {
+  columns: readonly ListColumn<TItem>[];
+  count: number;
+  itemAt: (index: number) => TItem | undefined;
+  itemLabel: (item: TItem) => string;
+  label: string;
+  onRangeChange: (startIndex: number, endIndex: number) => void;
+  onSelect?: (item: TItem) => void;
+  itemHref?: (item: TItem) => string | undefined;
+  onNavigate?: (href: string) => void;
+  placeholderAt?: (index: number) => ReactNode;
+  itemKey: (index: number) => string;
+  loading?: boolean;
+  section?: {
+    isStart: (item: TItem, index: number, previous: TItem | undefined) => boolean;
+    render: (item: TItem) => ReactNode;
+  };
+  sort?: string;
+  direction?: 'asc' | 'desc';
+}
+export declare function VirtualList<TItem>({ columns, count, itemAt, itemLabel, label, onRangeChange, onSelect, itemHref, onNavigate, placeholderAt, itemKey, loading, section, sort, direction }: VirtualListProps<TItem>): import("react").JSX.Element;
+//# sourceMappingURL=VirtualList.d.ts.map

package/dist/collections/VirtualList.js

@@ -0,0 +1,128 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { LinkOverlay } from "../typography/Link.js";
+import { columnBreakpoints, columnWidths } from "./CollectionTokens.js";
+import { useCollectionViewport } from "./CollectionViewport.js";
+import { DataRow } from "./DataRow.js";
+import { useCollectionMotion } from "./useCollectionMotion.js";
+import { useCallback, useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+// src/collections/VirtualList.tsx
+function VirtualList({ columns, count, itemAt, itemLabel, label, onRangeChange, onSelect, itemHref, onNavigate, placeholderAt, itemKey, loading, section, sort, direction = "asc" }) {
+	const { scrollMargin, setCollectionElement, width } = useCollectionViewport();
+	const root = useRef(null);
+	const attachRoot = useCallback((element) => {
+		root.current = element;
+		setCollectionElement(element);
+	}, [setCollectionElement]);
+	useCollectionMotion(root);
+	const visibleColumns = columns.filter((column) => column.id === sort || width >= columnBreakpoints[column.priority ?? "primary"]);
+	const visibleColumnIds = visibleColumns.map((column) => column.id);
+	const virtualizer = useWindowVirtualizer({
+		count,
+		estimateSize: () => 64,
+		overscan: 8,
+		scrollMargin
+	});
+	const virtualItems = virtualizer.getVirtualItems();
+	const startIndex = Math.max(0, virtualItems[0]?.index ?? 0);
+	const endIndex = Math.min(count - 1, virtualItems.at(-1)?.index ?? 0);
+	useEffect(() => {
+		if (endIndex >= startIndex) onRangeChange(startIndex, endIndex);
+	}, [
+		endIndex,
+		onRangeChange,
+		startIndex
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "table",
+		"aria-label": label,
+		"aria-busy": loading,
+		"aria-rowcount": count + 1,
+		"aria-colcount": visibleColumns.length,
+		className: "border-base-300 bg-base-100 @container min-w-0 rounded-b-xl border-x border-b",
+		style: { "--lar-list-columns": visibleColumns.map((column) => columnWidths[column.size]).join(" ") },
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "rowgroup",
+			className: "bg-base-50 sticky top-(--lar-header-height,0px) z-20 -mx-px -mt-(--lar-page-gutter,0px) pt-(--lar-page-gutter,0px)",
+			children: /* @__PURE__ */ jsx("div", {
+				role: "row",
+				"aria-rowindex": 1,
+				className: "border-base-300 bg-base-100 box-content grid h-10 grid-cols-(--lar-list-columns) items-center gap-4 rounded-t-xl border px-3",
+				children: visibleColumns.map((column) => /* @__PURE__ */ jsxs("div", {
+					role: "columnheader",
+					"aria-sort": column.id === sort ? direction === "asc" ? "ascending" : "descending" : void 0,
+					className: `flex min-w-0 items-center gap-1 text-xs font-medium ${column.align === "right" ? "justify-end" : ""} ${column.id === sort ? "text-base-content" : "text-base-content/50"}`,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: column.hideLabel ? "sr-only" : "truncate",
+						children: column.label
+					}), column.id === sort ? /* @__PURE__ */ jsx("span", {
+						className: `size-3 shrink-0 ${direction === "asc" ? "rotate-180" : ""}`,
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+					}) : null]
+				}, column.id))
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			ref: attachRoot,
+			role: "rowgroup",
+			className: "relative w-full",
+			style: { height: virtualizer.getTotalSize() },
+			children: virtualItems.map((item) => {
+				const index = item.index;
+				const key = itemKey(index);
+				const value = itemAt(index);
+				const href = value ? itemHref?.(value) : void 0;
+				const placeholder = placeholderAt?.(index);
+				const sectionStart = value && section?.isStart(value, index, itemAt(index - 1));
+				return /* @__PURE__ */ jsxs("div", {
+					"data-collection-key": key,
+					role: "presentation",
+					ref: virtualizer.measureElement,
+					"data-index": item.index,
+					className: "absolute top-0 left-0 w-full",
+					style: { top: item.start - scrollMargin },
+					children: [sectionStart ? section?.render(value) : null, /* @__PURE__ */ jsx("div", {
+						className: "h-16",
+						children: /* @__PURE__ */ jsx(DataRow, {
+							rowIndex: item.index + 2,
+							interactive: Boolean(value && (href || onSelect)),
+							children: placeholder ? /* @__PURE__ */ jsx("div", {
+								role: "cell",
+								"aria-colspan": visibleColumns.length,
+								className: "col-span-full min-w-0",
+								children: placeholder
+							}) : visibleColumns.map((column, columnIndex) => {
+								const content = value ? column.render(value, visibleColumnIds, index) : void 0;
+								return /* @__PURE__ */ jsx("div", {
+									role: "cell",
+									title: typeof content === "string" ? content : void 0,
+									className: `min-w-0 truncate text-sm ${column.align === "right" ? "text-right tabular-nums" : ""} ${column.id === sort || columnIndex === 0 ? "text-base-content" : "text-base-content/55"}`,
+									children: !value ? column.placeholder?.(visibleColumnIds) ?? /* @__PURE__ */ jsx(SkeletonLoader.Shape, { width: "wide" }) : columnIndex === 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [href ? /* @__PURE__ */ jsx(LinkOverlay, {
+										href,
+										onNavigate,
+										"aria-label": itemLabel(value)
+									}) : onSelect ? /* @__PURE__ */ jsx("button", {
+										...tabbable,
+										type: "button",
+										"data-slot": "action-overlay",
+										"aria-label": itemLabel(value),
+										onClick: () => onSelect(value),
+										className: "focus-visible:outline-primary absolute inset-0 z-1 block w-full cursor-pointer rounded-md focus-visible:outline-2 focus-visible:-outline-offset-2"
+									}) : null, /* @__PURE__ */ jsx("div", {
+										className: "py-2",
+										children: content
+									})] }) : content
+								}, column.id);
+							})
+						})
+					})]
+				}, key);
+			})
+		})]
+	});
+}
+export { VirtualList };
+
+//# sourceMappingURL=VirtualList.js.map

package/dist/collections/VirtualList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualList.js","names":[],"sources":["../../src/collections/VirtualList.tsx"],"sourcesContent":["import { useWindowVirtualizer } from '@tanstack/react-virtual';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { type CSSProperties, type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { LinkOverlay } from '../typography/Link';\nimport { columnBreakpoints, columnWidths } from './CollectionTokens';\nimport { useCollectionViewport } from './CollectionViewport';\nimport { DataRow } from './DataRow';\nimport { useCollectionMotion } from './useCollectionMotion';\n\nexport interface ListColumn<TItem> {\n    id: string;\n    label: string;\n    hideLabel?: boolean;\n    render: (item: TItem, visibleColumns: readonly string[], index: number) => ReactNode;\n    size: keyof typeof columnWidths;\n    priority?: keyof typeof columnBreakpoints;\n    placeholder?: (visibleColumns: readonly string[]) => ReactNode;\n    align?: 'right';\n}\n\nexport interface VirtualListProps<TItem> {\n    columns: readonly ListColumn<TItem>[];\n    count: number;\n    itemAt: (index: number) => TItem | undefined;\n    itemLabel: (item: TItem) => string;\n    label: string;\n    onRangeChange: (startIndex: number, endIndex: number) => void;\n    onSelect?: (item: TItem) => void;\n    itemHref?: (item: TItem) => string | undefined;\n    onNavigate?: (href: string) => void;\n    placeholderAt?: (index: number) => ReactNode;\n    itemKey: (index: number) => string;\n    loading?: boolean;\n    section?: {\n        isStart: (item: TItem, index: number, previous: TItem | undefined) => boolean;\n        render: (item: TItem) => ReactNode;\n    };\n    sort?: string;\n    direction?: 'asc' | 'desc';\n}\n\nexport function VirtualList<TItem>({\n    columns,\n    count,\n    itemAt,\n    itemLabel,\n    label,\n    onRangeChange,\n    onSelect,\n    itemHref,\n    onNavigate,\n    placeholderAt,\n    itemKey,\n    loading,\n    section,\n    sort,\n    direction = 'asc',\n}: VirtualListProps<TItem>) {\n    const { scrollMargin, setCollectionElement, width } = useCollectionViewport();\n    const root = useRef<HTMLDivElement>(null);\n    const attachRoot = useCallback(\n        (element: HTMLDivElement | null) => {\n            root.current = element;\n            setCollectionElement(element);\n        },\n        [setCollectionElement],\n    );\n\n    useCollectionMotion(root);\n\n    const visibleColumns = columns.filter(\n        (column) => column.id === sort || width >= columnBreakpoints[column.priority ?? 'primary'],\n    );\n    const visibleColumnIds = visibleColumns.map((column) => column.id);\n    const virtualizer = useWindowVirtualizer({\n        count,\n        // Layout belongs to stable catalog slots. Domain keys still identify\n        // mounted rows below; changing page data must not remeasure every slot.\n        // Section headers are measured with their mounted row wrappers.\n        estimateSize: () => 64,\n        overscan: 8,\n        scrollMargin,\n    });\n    const virtualItems = virtualizer.getVirtualItems();\n    const startIndex = Math.max(0, virtualItems[0]?.index ?? 0);\n    const endIndex = Math.min(count - 1, virtualItems.at(-1)?.index ?? 0);\n\n    useEffect(() => {\n        if (endIndex >= startIndex) onRangeChange(startIndex, endIndex);\n    }, [endIndex, onRangeChange, startIndex]);\n\n    return (\n        <div\n            role=\"table\"\n            aria-label={label}\n            aria-busy={loading}\n            aria-rowcount={count + 1}\n            aria-colcount={visibleColumns.length}\n            className=\"border-base-300 bg-base-100 @container min-w-0 rounded-b-xl border-x border-b\"\n            style={\n                {\n                    '--lar-list-columns': visibleColumns.map((column) => columnWidths[column.size]).join(' '),\n                } as CSSProperties\n            }\n        >\n            <div\n                role=\"rowgroup\"\n                className=\"bg-base-50 sticky top-(--lar-header-height,0px) z-20 -mx-px -mt-(--lar-page-gutter,0px) pt-(--lar-page-gutter,0px)\"\n            >\n                <div\n                    role=\"row\"\n                    aria-rowindex={1}\n                    className=\"border-base-300 bg-base-100 box-content grid h-10 grid-cols-(--lar-list-columns) items-center gap-4 rounded-t-xl border px-3\"\n                >\n                    {visibleColumns.map((column) => (\n                        <div\n                            key={column.id}\n                            role=\"columnheader\"\n                            aria-sort={\n                                column.id === sort ? (direction === 'asc' ? 'ascending' : 'descending') : undefined\n                            }\n                            className={`flex min-w-0 items-center gap-1 text-xs font-medium ${column.align === 'right' ? 'justify-end' : ''} ${column.id === sort ? 'text-base-content' : 'text-base-content/50'}`}\n                        >\n                            <span className={column.hideLabel ? 'sr-only' : 'truncate'}>{column.label}</span>\n                            {column.id === sort ? (\n                                <span className={`size-3 shrink-0 ${direction === 'asc' ? 'rotate-180' : ''}`}>\n                                    <ChevronDownIcon />\n                                </span>\n                            ) : null}\n                        </div>\n                    ))}\n                </div>\n            </div>\n            <div\n                ref={attachRoot}\n                role=\"rowgroup\"\n                className=\"relative w-full\"\n                style={{ height: virtualizer.getTotalSize() }}\n            >\n                {virtualItems.map((item) => {\n                    const index = item.index;\n                    const key = itemKey(index);\n                    const value = itemAt(index);\n                    const href = value ? itemHref?.(value) : undefined;\n                    const placeholder = placeholderAt?.(index);\n                    const sectionStart = value && section?.isStart(value, index, itemAt(index - 1));\n\n                    return (\n                        <div\n                            key={key}\n                            data-collection-key={key}\n                            role=\"presentation\"\n                            ref={virtualizer.measureElement}\n                            data-index={item.index}\n                            className=\"absolute top-0 left-0 w-full\"\n                            style={{ top: item.start - scrollMargin }}\n                        >\n                            {sectionStart ? section?.render(value) : null}\n                            <div className=\"h-16\">\n                                <DataRow rowIndex={item.index + 2} interactive={Boolean(value && (href || onSelect))}>\n                                    {placeholder ? (\n                                        <div\n                                            role=\"cell\"\n                                            aria-colspan={visibleColumns.length}\n                                            className=\"col-span-full min-w-0\"\n                                        >\n                                            {placeholder}\n                                        </div>\n                                    ) : (\n                                        visibleColumns.map((column, columnIndex) => {\n                                            const content = value\n                                                ? column.render(value, visibleColumnIds, index)\n                                                : undefined;\n\n                                            return (\n                                                <div\n                                                    key={column.id}\n                                                    role=\"cell\"\n                                                    title={typeof content === 'string' ? content : undefined}\n                                                    className={`min-w-0 truncate text-sm ${column.align === 'right' ? 'text-right tabular-nums' : ''} ${column.id === sort || columnIndex === 0 ? 'text-base-content' : 'text-base-content/55'}`}\n                                                >\n                                                    {!value ? (\n                                                        (column.placeholder?.(visibleColumnIds) ?? (\n                                                            <SkeletonLoader.Shape width=\"wide\" />\n                                                        ))\n                                                    ) : columnIndex === 0 ? (\n                                                        <>\n                                                            {href ? (\n                                                                <LinkOverlay\n                                                                    href={href}\n                                                                    onNavigate={onNavigate}\n                                                                    aria-label={itemLabel(value)}\n                                                                />\n                                                            ) : onSelect ? (\n                                                                <button\n                                                                    {...tabbable}\n                                                                    type=\"button\"\n                                                                    data-slot=\"action-overlay\"\n                                                                    aria-label={itemLabel(value)}\n                                                                    onClick={() => onSelect(value)}\n                                                                    className=\"focus-visible:outline-primary absolute inset-0 z-1 block w-full cursor-pointer rounded-md focus-visible:outline-2 focus-visible:-outline-offset-2\"\n                                                                />\n                                                            ) : null}\n                                                            <div className=\"py-2\">{content}</div>\n                                                        </>\n                                                    ) : (\n                                                        content\n                                                    )}\n                                                </div>\n                                            );\n                                        })\n                                    )}\n                                </DataRow>\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}