@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/views/CollectionView/CollectionCardView.es.js

@@ -0,0 +1,179 @@
+"use client";
+import "../../styles.es.js";
+import { cls } from "../../util/cls.es.js";
+import { Card } from "../../components/Card.es.js";
+import { Typography } from "../../components/Typography.es.js";
+import { Checkbox } from "../../components/Checkbox.es.js";
+import { useUiLabels } from "../../hooks/UiLabelsContext.es.js";
+import { CardView } from "../CardView.es.js";
+import { DefaultCellRenderer } from "./DefaultCellRenderer.es.js";
+import { getValueInPath } from "./utils.es.js";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty.es.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/views/CollectionView/CollectionCardView.tsx
+/**
+* Headless card grid view that wraps {@link CardView}.
+*
+* Renders each item as a card with an optional image, title,
+* preview properties, and selection support.
+*
+* @group Collection View
+*/
+function CollectionCardView({ dataController, properties, propertiesOrder, idProperty = "id", titleProperty, onRowClick, cellRenderer, size = "m", selectionEnabled, selectionController, highlightedItems, emptyComponent, className }) {
+	const labels = useUiLabels();
+	const order = useMemo(() => propertiesOrder ?? Object.keys(properties), [propertiesOrder, properties]);
+	const titlePropertyKey = useMemo(() => resolveTitlePropertyKey(order, properties, idProperty, titleProperty), [
+		titleProperty,
+		order,
+		properties,
+		idProperty
+	]);
+	const imageProperty = useMemo(() => {
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && prop.storage) return key;
+		}
+	}, [order, properties]);
+	const previewProperties = useMemo(() => {
+		const result = [];
+		for (const key of order) {
+			if (key === titlePropertyKey || key === imageProperty) continue;
+			const prop = properties[key];
+			if (prop && !prop.hideFromCollection) {
+				result.push({
+					key,
+					property: prop
+				});
+				if (result.length >= 3) break;
+			}
+		}
+		return result;
+	}, [
+		order,
+		properties,
+		titlePropertyKey,
+		imageProperty
+	]);
+	const selectedIds = useMemo(() => {
+		if (!selectionController?.selectedItems) return void 0;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of selectionController.selectedItems) {
+			const id = getValueInPath(item, idProperty);
+			if (id !== void 0 && id !== null) ids.add(id);
+		}
+		return ids;
+	}, [selectionController?.selectedItems, idProperty]);
+	const highlightedIds = useMemo(() => {
+		if (!highlightedItems) return void 0;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of highlightedItems) {
+			const id = getValueInPath(item, idProperty);
+			if (id !== void 0 && id !== null) ids.add(id);
+		}
+		return ids;
+	}, [highlightedItems, idProperty]);
+	const handleSelectionChange = useCallback((item, selected) => {
+		if (!selectionController) return;
+		selectionController.setSelectedItems((prev) => {
+			if (selected) return [...prev, item];
+			const itemId = getValueInPath(item, idProperty);
+			return prev.filter((existing) => {
+				return getValueInPath(existing, idProperty) !== itemId;
+			});
+		});
+	}, [selectionController, idProperty]);
+	const renderCard = useCallback((item, extra) => {
+		const titleValue = getValueInPath(item, titlePropertyKey);
+		const imageValue = imageProperty ? getValueInPath(item, imageProperty) : void 0;
+		const hasImage = typeof imageValue === "string" && imageValue.length > 0;
+		return /* @__PURE__ */ jsxs(Card, {
+			onClick: (e) => {
+				if (e) extra.onClick(e);
+			},
+			className: cls("overflow-hidden relative", extra.selected && "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75", extra.highlighted && !extra.selected && "ring-1 ring-primary/50"),
+			children: [
+				imageProperty && (hasImage ? /* @__PURE__ */ jsx("img", {
+					src: imageValue,
+					alt: "",
+					className: "w-full h-32 object-cover rounded-t-lg"
+				}) : /* @__PURE__ */ jsx("div", { className: cls("h-24 rounded-t-lg", "bg-surface-field border border-hairline") })),
+				selectionEnabled && /* @__PURE__ */ jsx("div", {
+					className: "absolute top-2 right-2",
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						"aria-label": labels.select,
+						checked: extra.selected,
+						onCheckedChange: extra.onSelectionChange,
+						size: "small"
+					})
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle2",
+					noWrap: true,
+					className: "px-3 pt-2 pb-1",
+					children: String(titleValue ?? "")
+				}),
+				previewProperties.map(({ key, property }) => {
+					const value = getValueInPath(item, key);
+					if (cellRenderer) {
+						const custom = cellRenderer({
+							row: item,
+							propertyKey: key,
+							property,
+							value,
+							size: "small"
+						});
+						if (custom !== void 0) return /* @__PURE__ */ jsx("div", {
+							className: "px-3 py-0.5",
+							children: custom
+						}, key);
+					}
+					return /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-0.5",
+						children: /* @__PURE__ */ jsx(DefaultCellRenderer, {
+							row: item,
+							propertyKey: key,
+							property,
+							value,
+							size: "small"
+						})
+					}, key);
+				}),
+				/* @__PURE__ */ jsx("div", { className: "pb-2" })
+			]
+		});
+	}, [
+		titlePropertyKey,
+		imageProperty,
+		previewProperties,
+		cellRenderer,
+		selectionEnabled,
+		labels
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("w-full h-full overflow-auto", className),
+		children: /* @__PURE__ */ jsx(CardView, {
+			data: dataController.data,
+			dataLoading: dataController.loading,
+			noMoreToLoad: dataController.noMoreToLoad,
+			dataLoadingError: dataController.error,
+			itemCount: dataController.itemCount,
+			setItemCount: dataController.setItemCount,
+			pageSize: dataController.pageSize,
+			paginationEnabled: dataController.paginationEnabled,
+			onItemClick: onRowClick,
+			selectedIds,
+			highlightedIds,
+			selectionEnabled: !!selectionEnabled,
+			onSelectionChange: handleSelectionChange,
+			size,
+			renderCard,
+			emptyComponent
+		})
+	});
+}
+//#endregion
+export { CollectionCardView };
+
+//# sourceMappingURL=CollectionCardView.es.js.map

package/dist/views/CollectionView/CollectionCardView.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionCardView.es.js","names":[],"sources":["../../../src/views/CollectionView/CollectionCardView.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { CardView } from \"../CardView\";\nimport { Card } from \"../../components/Card\";\nimport { Typography } from \"../../components/Typography\";\nimport { Checkbox } from \"../../components/Checkbox\";\nimport { DefaultCellRenderer } from \"./DefaultCellRenderer\";\nimport { cls } from \"../../util\";\nimport { useUiLabels } from \"../../hooks/UiLabelsContext\";\nimport { cardSelectedMixin, fieldBackgroundMixin } from \"../../styles\";\nimport type {\n    CollectionPropertyConfig,\n    CollectionDataController,\n    CellRendererOverride,\n    CollectionViewSize,\n    CollectionSelectionController,\n} from \"./CollectionViewTypes\";\nimport { resolveTitlePropertyKey } from \"./resolveTitleProperty\";\n\nimport { getValueInPath } from \"./utils\";\n\n/**\n * Props for the {@link CollectionCardView} component.\n * @group Collection View\n */\nexport type CollectionCardViewProps<T = Record<string, unknown>> = {\n    dataController: CollectionDataController<T>;\n    properties: Record<string, CollectionPropertyConfig>;\n    propertiesOrder?: string[];\n    idProperty?: string;\n    titleProperty?: string;\n    onRowClick?: (row: T) => void;\n    cellRenderer?: CellRendererOverride<T>;\n    size?: CollectionViewSize;\n    selectionEnabled?: boolean;\n    selectionController?: CollectionSelectionController<T>;\n    highlightedItems?: T[];\n    emptyComponent?: React.ReactNode;\n    className?: string;\n};\n\n/**\n * Headless card grid view that wraps {@link CardView}.\n *\n * Renders each item as a card with an optional image, title,\n * preview properties, and selection support.\n *\n * @group Collection View\n */\nexport function CollectionCardView<T extends Record<string, unknown> = Record<string, unknown>>({\n    dataController,\n    properties,\n    propertiesOrder,\n    idProperty = \"id\",\n    titleProperty,\n    onRowClick,\n    cellRenderer,\n    size = \"m\",\n    selectionEnabled,\n    selectionController,\n    highlightedItems,\n    emptyComponent,\n    className,\n}: CollectionCardViewProps<T>) {\n    const labels = useUiLabels();\n    const order = useMemo(\n        () => propertiesOrder ?? Object.keys(properties),\n        [propertiesOrder, properties]\n    );\n\n    // ── Resolve title property ───────────────────────────────────────\n    const titlePropertyKey = useMemo(\n        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),\n        [titleProperty, order, properties, idProperty]\n    );\n\n    // ── Resolve image property ───────────────────────────────────────\n    const imageProperty = useMemo(() => {\n        for (const key of order) {\n            const prop = properties[key];\n            if (prop && prop.type === \"string\" && prop.storage) {\n                return key;\n            }\n        }\n        return undefined;\n    }, [order, properties]);\n\n    // ── Preview properties (up to 3) ─────────────────────────────────\n    const previewProperties = useMemo(() => {\n        const result: { key: string; property: CollectionPropertyConfig }[] = [];\n        for (const key of order) {\n            if (key === titlePropertyKey || key === imageProperty) continue;\n            const prop = properties[key];\n            if (prop && !prop.hideFromCollection) {\n                result.push({ key, property: prop });\n                if (result.length >= 3) break;\n            }\n        }\n        return result;\n    }, [order, properties, titlePropertyKey, imageProperty]);\n\n    // ── Selection IDs ────────────────────────────────────────────────\n    const selectedIds = useMemo(() => {\n        if (!selectionController?.selectedItems) return undefined;\n        const ids = new Set<string | number>();\n        for (const item of selectionController.selectedItems) {\n            const id = getValueInPath(item as Record<string, unknown>, idProperty);\n            if (id !== undefined && id !== null) {\n                ids.add(id as string | number);\n            }\n        }\n        return ids;\n    }, [selectionController?.selectedItems, idProperty]);\n\n    // ── Highlighted IDs ──────────────────────────────────────────────\n    const highlightedIds = useMemo(() => {\n        if (!highlightedItems) return undefined;\n        const ids = new Set<string | number>();\n        for (const item of highlightedItems) {\n            const id = getValueInPath(item as Record<string, unknown>, idProperty);\n            if (id !== undefined && id !== null) {\n                ids.add(id as string | number);\n            }\n        }\n        return ids;\n    }, [highlightedItems, idProperty]);\n\n    // ── Selection handler ────────────────────────────────────────────\n    const handleSelectionChange = useCallback(\n        (item: T, selected: boolean) => {\n            if (!selectionController) return;\n            selectionController.setSelectedItems((prev) => {\n                if (selected) {\n                    return [...prev, item];\n                }\n                const itemId = getValueInPath(item as Record<string, unknown>, idProperty);\n                return prev.filter((existing) => {\n                    const existingId = getValueInPath(existing as Record<string, unknown>, idProperty);\n                    return existingId !== itemId;\n                });\n            });\n        },\n        [selectionController, idProperty]\n    );\n\n    // ── Render card ──────────────────────────────────────────────────\n    const renderCard = useCallback(\n        (\n            item: T,\n            extra: {\n                selected: boolean;\n                highlighted: boolean;\n                onSelectionChange: (selected: boolean) => void;\n                onClick: (e: React.MouseEvent) => void;\n            }\n        ): React.ReactNode => {\n            const titleValue = getValueInPath(item as Record<string, unknown>, titlePropertyKey);\n            const imageValue = imageProperty\n                ? getValueInPath(item as Record<string, unknown>, imageProperty)\n                : undefined;\n            const hasImage = typeof imageValue === \"string\" && imageValue.length > 0;\n\n            return (\n                <Card\n                    onClick={(e) => { if (e) extra.onClick(e); }}\n                    className={cls(\n                        \"overflow-hidden relative\",\n                        extra.selected && cardSelectedMixin,\n                        extra.highlighted && !extra.selected && \"ring-1 ring-primary/50\"\n                    )}\n                >\n                    {/* Image */}\n                    {imageProperty && (\n                        hasImage ? (\n                            <img\n                                src={imageValue as string}\n                                alt=\"\"\n                                className=\"w-full h-32 object-cover rounded-t-lg\"\n                            />\n                        ) : (\n                            <div className={cls(\"h-24 rounded-t-lg\", fieldBackgroundMixin)} />\n                        )\n                    )}\n\n                    {/* Selection checkbox */}\n                    {selectionEnabled && (\n                        <div\n                            className=\"absolute top-2 right-2\"\n                            onClick={(e) => e.stopPropagation()}\n                        >\n                            <Checkbox\n                                aria-label={labels.select}\n                                checked={extra.selected}\n                                onCheckedChange={extra.onSelectionChange}\n                                size=\"small\"\n                            />\n                        </div>\n                    )}\n\n                    {/* Title */}\n                    <Typography variant=\"subtitle2\" noWrap className=\"px-3 pt-2 pb-1\">\n                        {String(titleValue ?? \"\")}\n                    </Typography>\n\n                    {/* Preview properties */}\n                    {previewProperties.map(({ key, property }) => {\n                        const value = getValueInPath(item as Record<string, unknown>, key);\n\n                        if (cellRenderer) {\n                            const custom = cellRenderer({\n                                row: item,\n                                propertyKey: key,\n                                property,\n                                value,\n                                size: \"small\",\n                            });\n                            if (custom !== undefined) {\n                                return (\n                                    <div key={key} className=\"px-3 py-0.5\">\n                                        {custom}\n                                    </div>\n                                );\n                            }\n                        }\n\n                        return (\n                            <div key={key} className=\"px-3 py-0.5\">\n                                <DefaultCellRenderer\n                                    row={item}\n                                    propertyKey={key}\n                                    property={property}\n                                    value={value}\n                                    size=\"small\"\n                                />\n                            </div>\n                        );\n                    })}\n\n                    <div className=\"pb-2\" />\n                </Card>\n            );\n        },\n        [titlePropertyKey, imageProperty, previewProperties, cellRenderer, selectionEnabled, labels]\n    );\n\n    return (\n        <div className={cls(\"w-full h-full overflow-auto\", className)}>\n            <CardView<T>\n                data={dataController.data}\n                dataLoading={dataController.loading}\n                noMoreToLoad={dataController.noMoreToLoad}\n                dataLoadingError={dataController.error}\n                itemCount={dataController.itemCount}\n                setItemCount={dataController.setItemCount}\n                pageSize={dataController.pageSize}\n                paginationEnabled={dataController.paginationEnabled}\n                onItemClick={onRowClick}\n                selectedIds={selectedIds}\n                highlightedIds={highlightedIds}\n                selectionEnabled={!!selectionEnabled}\n                onSelectionChange={handleSelectionChange}\n                size={size}\n                renderCard={renderCard}\n                emptyComponent={emptyComponent}\n            />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/views/CollectionView/CollectionKanbanView.es.js

@@ -0,0 +1,172 @@
+"use client";
+import { cardClickableMixin } from "../../styles.es.js";
+import { cls } from "../../util/cls.es.js";
+import { Card } from "../../components/Card.es.js";
+import { Typography } from "../../components/Typography.es.js";
+import { KanbanView } from "../KanbanView.es.js";
+import { DefaultCellRenderer } from "./DefaultCellRenderer.es.js";
+import { getValueInPath } from "./utils.es.js";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty.es.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/views/CollectionView/CollectionKanbanView.tsx
+function getEnumLabel(enumConfig, key) {
+	if (!enumConfig) return key;
+	if (enumConfig instanceof Map) {
+		const cfg = enumConfig.get(key);
+		if (!cfg) return key;
+		return typeof cfg === "string" ? cfg : cfg.label;
+	}
+	const cfg = enumConfig[key];
+	if (!cfg) return key;
+	return typeof cfg === "string" ? cfg : cfg.label;
+}
+/**
+* Headless kanban view that wraps {@link KanbanView}.
+*
+* Groups data by a kanban property's enum values into columns.
+* Each card displays a title and 1–2 preview properties.
+*
+* @group Collection View
+*/
+function CollectionKanbanView({ dataController, properties, propertiesOrder, idProperty = "id", titleProperty, kanbanProperty, onRowClick, cellRenderer, emptyComponent, onRowCreate, className }) {
+	const order = useMemo(() => propertiesOrder ?? Object.keys(properties), [propertiesOrder, properties]);
+	const columns = useMemo(() => {
+		const kanbanConfig = properties[kanbanProperty];
+		if (kanbanConfig?.enum) {
+			if (kanbanConfig.enum instanceof Map) return Array.from(kanbanConfig.enum.keys()).map(String);
+			return Object.keys(kanbanConfig.enum);
+		}
+		const seen = /* @__PURE__ */ new Set();
+		for (const row of dataController.data) {
+			const val = getValueInPath(row, kanbanProperty);
+			if (val !== null && val !== void 0) seen.add(String(val));
+		}
+		return Array.from(seen);
+	}, [
+		properties,
+		kanbanProperty,
+		dataController.data
+	]);
+	const columnLabels = useMemo(() => {
+		const kanbanConfig = properties[kanbanProperty];
+		const labels = {};
+		for (const col of columns) labels[col] = getEnumLabel(kanbanConfig?.enum, col);
+		return labels;
+	}, [
+		properties,
+		kanbanProperty,
+		columns
+	]);
+	const titlePropertyKey = useMemo(() => resolveTitlePropertyKey(order, properties, idProperty, titleProperty), [
+		titleProperty,
+		order,
+		properties,
+		idProperty
+	]);
+	const previewProperties = useMemo(() => {
+		const result = [];
+		for (const key of order) {
+			if (key === titlePropertyKey || key === kanbanProperty) continue;
+			const prop = properties[key];
+			if (prop && !prop.hideFromCollection) {
+				result.push({
+					key,
+					property: prop
+				});
+				if (result.length >= 2) break;
+			}
+		}
+		return result;
+	}, [
+		order,
+		properties,
+		titlePropertyKey,
+		kanbanProperty
+	]);
+	const boardItems = useMemo(() => {
+		return dataController.data.map((row, index) => {
+			const id = getValueInPath(row, idProperty);
+			return {
+				id: id !== null && id !== void 0 ? String(id) : String(index),
+				data: row
+			};
+		});
+	}, [dataController.data, idProperty]);
+	const assignColumn = useCallback((item) => {
+		const val = getValueInPath(item.data, kanbanProperty);
+		const strVal = val !== null && val !== void 0 ? String(val) : "";
+		if (columns.includes(strVal)) return strVal;
+		return columns[0] ?? "";
+	}, [kanbanProperty, columns]);
+	const ItemComponent = useMemo(() => {
+		function KanbanCard(props) {
+			const { item } = props;
+			const titleValue = getValueInPath(item.data, titlePropertyKey);
+			return /* @__PURE__ */ jsxs(Card, {
+				onClick: () => onRowClick?.(item.data),
+				className: cls("p-3", cardClickableMixin, props.isDragging && "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75", props.isDragging && "shadow-lg opacity-75"),
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle2",
+					noWrap: true,
+					children: String(titleValue ?? "")
+				}), previewProperties.map(({ key, property }) => {
+					const value = getValueInPath(item.data, key);
+					if (cellRenderer) {
+						const custom = cellRenderer({
+							row: item.data,
+							propertyKey: key,
+							property,
+							value,
+							size: "tiny"
+						});
+						if (custom !== void 0) return /* @__PURE__ */ jsx("div", {
+							className: "mt-1",
+							children: custom
+						}, key);
+					}
+					return /* @__PURE__ */ jsx("div", {
+						className: "mt-1",
+						children: /* @__PURE__ */ jsx(DefaultCellRenderer, {
+							row: item.data,
+							propertyKey: key,
+							property,
+							value,
+							size: "tiny"
+						})
+					}, key);
+				})]
+			});
+		}
+		return KanbanCard;
+	}, [
+		titlePropertyKey,
+		previewProperties,
+		cellRenderer,
+		onRowClick
+	]);
+	const handleAddItemToColumn = useCallback((column) => {
+		onRowCreate?.({ [kanbanProperty]: column });
+	}, [onRowCreate, kanbanProperty]);
+	if (columns.length === 0 && !dataController.loading) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center p-8",
+		children: emptyComponent ?? /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			color: "secondary",
+			children: "No columns available for kanban view."
+		})
+	});
+	return /* @__PURE__ */ jsx(KanbanView, {
+		columns,
+		columnLabels,
+		data: boardItems,
+		assignColumn,
+		ItemComponent,
+		onAddItemToColumn: onRowCreate ? handleAddItemToColumn : void 0,
+		className
+	});
+}
+//#endregion
+export { CollectionKanbanView };
+
+//# sourceMappingURL=CollectionKanbanView.es.js.map

package/dist/views/CollectionView/CollectionKanbanView.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionKanbanView.es.js","names":[],"sources":["../../../src/views/CollectionView/CollectionKanbanView.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { KanbanView } from \"../KanbanView\";\nimport type { BoardItem, BoardItemViewProps } from \"../KanbanView\";\nimport { Card } from \"../../components/Card\";\nimport { Typography } from \"../../components/Typography\";\nimport { DefaultCellRenderer } from \"./DefaultCellRenderer\";\nimport { cls } from \"../../util\";\nimport { cardClickableMixin, cardSelectedMixin } from \"../../styles\";\nimport type {\n    CollectionPropertyConfig,\n    CollectionDataController,\n    CellRendererOverride,\n    CollectionSelectionController,\n    CollectionEnumValueConfig,\n} from \"./CollectionViewTypes\";\nimport { resolveTitlePropertyKey } from \"./resolveTitleProperty\";\n\nimport { getValueInPath } from \"./utils\";\n\nfunction getEnumLabel(enumConfig: CollectionPropertyConfig[\"enum\"], key: string): string {\n    if (!enumConfig) return key;\n    if (enumConfig instanceof Map) {\n        const cfg: CollectionEnumValueConfig | undefined = enumConfig.get(key);\n        if (!cfg) return key;\n        return typeof cfg === \"string\" ? cfg : cfg.label;\n    }\n    const cfg: CollectionEnumValueConfig | undefined = enumConfig[key];\n    if (!cfg) return key;\n    return typeof cfg === \"string\" ? cfg : cfg.label;\n}\n\n/**\n * Props for the {@link CollectionKanbanView} component.\n * @group Collection View\n */\nexport type CollectionKanbanViewProps<T = Record<string, unknown>> = {\n    dataController: CollectionDataController<T>;\n    properties: Record<string, CollectionPropertyConfig>;\n    propertiesOrder?: string[];\n    idProperty?: string;\n    titleProperty?: string;\n    kanbanProperty: string;\n    onRowClick?: (row: T) => void;\n    cellRenderer?: CellRendererOverride<T>;\n    selectionEnabled?: boolean;\n    selectionController?: CollectionSelectionController<T>;\n    highlightedItems?: T[];\n    emptyComponent?: React.ReactNode;\n    onRowCreate?: (defaults?: Record<string, unknown>) => void;\n    className?: string;\n};\n\n/**\n * Headless kanban view that wraps {@link KanbanView}.\n *\n * Groups data by a kanban property's enum values into columns.\n * Each card displays a title and 1–2 preview properties.\n *\n * @group Collection View\n */\nexport function CollectionKanbanView<T extends Record<string, unknown> = Record<string, unknown>>({\n    dataController,\n    properties,\n    propertiesOrder,\n    idProperty = \"id\",\n    titleProperty,\n    kanbanProperty,\n    onRowClick,\n    cellRenderer,\n    emptyComponent,\n    onRowCreate,\n    className,\n}: CollectionKanbanViewProps<T>) {\n    const order = useMemo(\n        () => propertiesOrder ?? Object.keys(properties),\n        [propertiesOrder, properties]\n    );\n\n    // ── Resolve kanban columns ───────────────────────────────────────\n    const columns = useMemo<string[]>(() => {\n        const kanbanConfig = properties[kanbanProperty];\n        if (kanbanConfig?.enum) {\n            if (kanbanConfig.enum instanceof Map) {\n                return Array.from(kanbanConfig.enum.keys()).map(String);\n            }\n            return Object.keys(kanbanConfig.enum);\n        }\n        // Deduce from data\n        const seen = new Set<string>();\n        for (const row of dataController.data) {\n            const val = getValueInPath(row as Record<string, unknown>, kanbanProperty);\n            if (val !== null && val !== undefined) {\n                seen.add(String(val));\n            }\n        }\n        return Array.from(seen);\n    }, [properties, kanbanProperty, dataController.data]);\n\n    // ── Column labels ────────────────────────────────────────────────\n    const columnLabels = useMemo(() => {\n        const kanbanConfig = properties[kanbanProperty];\n        const labels: Record<string, string> = {};\n        for (const col of columns) {\n            labels[col] = getEnumLabel(kanbanConfig?.enum, col);\n        }\n        return labels;\n    }, [properties, kanbanProperty, columns]);\n\n    // ── Resolve title property ───────────────────────────────────────\n    const titlePropertyKey = useMemo(\n        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),\n        [titleProperty, order, properties, idProperty]\n    );\n\n    // ── Preview properties (up to 2) ─────────────────────────────────\n    const previewProperties = useMemo(() => {\n        const result: { key: string; property: CollectionPropertyConfig }[] = [];\n        for (const key of order) {\n            if (key === titlePropertyKey || key === kanbanProperty) continue;\n            const prop = properties[key];\n            if (prop && !prop.hideFromCollection) {\n                result.push({ key, property: prop });\n                if (result.length >= 2) break;\n            }\n        }\n        return result;\n    }, [order, properties, titlePropertyKey, kanbanProperty]);\n\n    // ── Convert data to BoardItem<T>[] ───────────────────────────────\n    const boardItems = useMemo<BoardItem<T>[]>(() => {\n        return dataController.data.map((row, index) => {\n            const id = getValueInPath(row as Record<string, unknown>, idProperty);\n            return {\n                id: id !== null && id !== undefined ? String(id) : String(index),\n                data: row,\n            };\n        });\n    }, [dataController.data, idProperty]);\n\n    // ── Assign column ────────────────────────────────────────────────\n    const assignColumn = useCallback(\n        (item: BoardItem<T>): string => {\n            const val = getValueInPath(item.data as Record<string, unknown>, kanbanProperty);\n            const strVal = val !== null && val !== undefined ? String(val) : \"\";\n            if (columns.includes(strVal)) return strVal;\n            return columns[0] ?? \"\";\n        },\n        [kanbanProperty, columns]\n    );\n\n    // ── Item component ───────────────────────────────────────────────\n    const ItemComponent = useMemo(() => {\n        function KanbanCard(props: BoardItemViewProps<T>) {\n            const { item } = props;\n            const titleValue = getValueInPath(\n                item.data as Record<string, unknown>,\n                titlePropertyKey\n            );\n\n            return (\n                <Card\n                    onClick={() => onRowClick?.(item.data)}\n                    className={cls(\n                        \"p-3\",\n                        cardClickableMixin,\n                        props.isDragging && cardSelectedMixin,\n                        props.isDragging && \"shadow-lg opacity-75\"\n                    )}\n                >\n                    <Typography variant=\"subtitle2\" noWrap>\n                        {String(titleValue ?? \"\")}\n                    </Typography>\n                    {previewProperties.map(({ key, property }) => {\n                        const value = getValueInPath(\n                            item.data as Record<string, unknown>,\n                            key\n                        );\n\n                        if (cellRenderer) {\n                            const custom = cellRenderer({\n                                row: item.data,\n                                propertyKey: key,\n                                property,\n                                value,\n                                size: \"tiny\",\n                            });\n                            if (custom !== undefined) {\n                                return (\n                                    <div key={key} className=\"mt-1\">\n                                        {custom}\n                                    </div>\n                                );\n                            }\n                        }\n\n                        return (\n                            <div key={key} className=\"mt-1\">\n                                <DefaultCellRenderer\n                                    row={item.data}\n                                    propertyKey={key}\n                                    property={property}\n                                    value={value}\n                                    size=\"tiny\"\n                                />\n                            </div>\n                        );\n                    })}\n                </Card>\n            );\n        }\n        return KanbanCard;\n    }, [titlePropertyKey, previewProperties, cellRenderer, onRowClick]);\n\n    // ── Add item to column ───────────────────────────────────────────\n    const handleAddItemToColumn = useCallback(\n        (column: string) => {\n            onRowCreate?.({ [kanbanProperty]: column });\n        },\n        [onRowCreate, kanbanProperty]\n    );\n\n    if (columns.length === 0 && !dataController.loading) {\n        return (\n            <div className=\"flex items-center justify-center p-8\">\n                {emptyComponent ?? (\n                    <Typography variant=\"body2\" color=\"secondary\">\n                        No columns available for kanban view.\n                    </Typography>\n                )}\n            </div>\n        );\n    }\n\n    return (\n        <KanbanView<T, string>\n            columns={columns}\n            columnLabels={columnLabels as Record<string, string>}\n            data={boardItems}\n            assignColumn={assignColumn}\n            ItemComponent={ItemComponent}\n            onAddItemToColumn={onRowCreate ? handleAddItemToColumn : undefined}\n            className={className}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/views/CollectionView/CollectionListView.es.js

@@ -0,0 +1,156 @@
+"use client";
+import { cls } from "../../util/cls.es.js";
+import { Typography } from "../../components/Typography.es.js";
+import { Checkbox } from "../../components/Checkbox.es.js";
+import { useUiLabels } from "../../hooks/UiLabelsContext.es.js";
+import { ListView } from "../ListView.es.js";
+import { DefaultCellRenderer } from "./DefaultCellRenderer.es.js";
+import { getValueInPath } from "./utils.es.js";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty.es.js";
+import React, { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/views/CollectionView/CollectionListView.tsx
+/**
+* Headless list view that wraps {@link ListView}.
+*
+* Each row displays a title (bold), subtitle with 1–2 secondary property values,
+* and optional selection support.
+*
+* @group Collection View
+*/
+function CollectionListView({ dataController, properties, propertiesOrder, idProperty = "id", titleProperty, onRowClick, cellRenderer, size = "m", selectionEnabled, selectionController, highlightedItems, emptyComponent, className }) {
+	const labels = useUiLabels();
+	const order = useMemo(() => propertiesOrder ?? Object.keys(properties), [propertiesOrder, properties]);
+	const titlePropertyKey = useMemo(() => resolveTitlePropertyKey(order, properties, idProperty, titleProperty), [
+		titleProperty,
+		order,
+		properties,
+		idProperty
+	]);
+	const subtitleProperties = useMemo(() => {
+		const result = [];
+		for (const key of order) {
+			if (key === titlePropertyKey) continue;
+			const prop = properties[key];
+			if (prop && !prop.hideFromCollection) {
+				result.push({
+					key,
+					property: prop
+				});
+				if (result.length >= 2) break;
+			}
+		}
+		return result;
+	}, [
+		order,
+		properties,
+		titlePropertyKey
+	]);
+	const selectedIds = useMemo(() => {
+		if (!selectionController?.selectedItems) return void 0;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of selectionController.selectedItems) {
+			const id = getValueInPath(item, idProperty);
+			if (id !== void 0 && id !== null) ids.add(id);
+		}
+		return ids;
+	}, [selectionController?.selectedItems, idProperty]);
+	const highlightedIds = useMemo(() => {
+		if (!highlightedItems) return void 0;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of highlightedItems) {
+			const id = getValueInPath(item, idProperty);
+			if (id !== void 0 && id !== null) ids.add(id);
+		}
+		return ids;
+	}, [highlightedItems, idProperty]);
+	const handleSelectionChange = useCallback((item, selected) => {
+		if (!selectionController) return;
+		selectionController.setSelectedItems((prev) => {
+			if (selected) return [...prev, item];
+			const itemId = getValueInPath(item, idProperty);
+			return prev.filter((existing) => {
+				return getValueInPath(existing, idProperty) !== itemId;
+			});
+		});
+	}, [selectionController, idProperty]);
+	const renderRow = useCallback((params) => {
+		const { item, style, className: rowClassName, selected, highlighted, onClick, onSelectionChange } = params;
+		const titleValue = getValueInPath(item, titlePropertyKey);
+		return /* @__PURE__ */ jsxs("div", {
+			style,
+			className: cls("flex items-center gap-3 px-4 cursor-pointer", "hover:bg-surface-hover", "transition-colors duration-100", selected && "bg-primary-bg", highlighted && "bg-surface-raised", rowClassName),
+			onClick,
+			children: [selectionEnabled && /* @__PURE__ */ jsx("div", {
+				className: "flex-shrink-0",
+				onClick: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					"aria-label": labels.select,
+					checked: selected,
+					onCheckedChange: onSelectionChange,
+					size: "small"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0 py-1",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle2",
+					noWrap: true,
+					children: String(titleValue ?? "")
+				}), subtitleProperties.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2",
+					children: subtitleProperties.map(({ key, property }) => {
+						const value = getValueInPath(item, key);
+						if (cellRenderer) {
+							const custom = cellRenderer({
+								row: item,
+								propertyKey: key,
+								property,
+								value,
+								size: "tiny"
+							});
+							if (custom !== void 0) return /* @__PURE__ */ jsx(React.Fragment, { children: custom }, key);
+						}
+						return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(DefaultCellRenderer, {
+							row: item,
+							propertyKey: key,
+							property,
+							value,
+							size: "tiny"
+						}) }, key);
+					})
+				})]
+			})]
+		});
+	}, [
+		titlePropertyKey,
+		subtitleProperties,
+		cellRenderer,
+		selectionEnabled,
+		labels
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("w-full h-full overflow-auto", className),
+		children: /* @__PURE__ */ jsx(ListView, {
+			data: dataController.data,
+			dataLoading: dataController.loading,
+			noMoreToLoad: dataController.noMoreToLoad,
+			dataLoadingError: dataController.error,
+			itemCount: dataController.itemCount,
+			setItemCount: dataController.setItemCount,
+			pageSize: dataController.pageSize,
+			paginationEnabled: dataController.paginationEnabled,
+			onItemClick: onRowClick,
+			selectedIds,
+			highlightedIds,
+			selectionEnabled: !!selectionEnabled,
+			onSelectionChange: handleSelectionChange,
+			size,
+			renderRow,
+			emptyComponent
+		})
+	});
+}
+//#endregion
+export { CollectionListView };
+
+//# sourceMappingURL=CollectionListView.es.js.map

package/dist/views/CollectionView/CollectionListView.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionListView.es.js","names":[],"sources":["../../../src/views/CollectionView/CollectionListView.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { ListView } from \"../ListView\";\nimport { Typography } from \"../../components/Typography\";\nimport { Checkbox } from \"../../components/Checkbox\";\nimport { DefaultCellRenderer } from \"./DefaultCellRenderer\";\nimport { cls } from \"../../util\";\nimport { useUiLabels } from \"../../hooks/UiLabelsContext\";\nimport type {\n    CollectionPropertyConfig,\n    CollectionDataController,\n    CellRendererOverride,\n    CollectionViewSize,\n    CollectionSelectionController,\n} from \"./CollectionViewTypes\";\nimport { resolveTitlePropertyKey } from \"./resolveTitleProperty\";\n\nimport { getValueInPath } from \"./utils\";\n\n/**\n * Props for the {@link CollectionListView} component.\n * @group Collection View\n */\nexport type CollectionListViewProps<T = Record<string, unknown>> = {\n    dataController: CollectionDataController<T>;\n    properties: Record<string, CollectionPropertyConfig>;\n    propertiesOrder?: string[];\n    idProperty?: string;\n    titleProperty?: string;\n    onRowClick?: (row: T) => void;\n    cellRenderer?: CellRendererOverride<T>;\n    size?: CollectionViewSize;\n    selectionEnabled?: boolean;\n    selectionController?: CollectionSelectionController<T>;\n    highlightedItems?: T[];\n    emptyComponent?: React.ReactNode;\n    className?: string;\n};\n\n/**\n * Headless list view that wraps {@link ListView}.\n *\n * Each row displays a title (bold), subtitle with 1–2 secondary property values,\n * and optional selection support.\n *\n * @group Collection View\n */\nexport function CollectionListView<T extends Record<string, unknown> = Record<string, unknown>>({\n    dataController,\n    properties,\n    propertiesOrder,\n    idProperty = \"id\",\n    titleProperty,\n    onRowClick,\n    cellRenderer,\n    size = \"m\",\n    selectionEnabled,\n    selectionController,\n    highlightedItems,\n    emptyComponent,\n    className,\n}: CollectionListViewProps<T>) {\n    const labels = useUiLabels();\n    const order = useMemo(\n        () => propertiesOrder ?? Object.keys(properties),\n        [propertiesOrder, properties]\n    );\n\n    // ── Resolve title property ───────────────────────────────────────\n    const titlePropertyKey = useMemo(\n        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),\n        [titleProperty, order, properties, idProperty]\n    );\n\n    // ── Subtitle properties (up to 2) ────────────────────────────────\n    const subtitleProperties = useMemo(() => {\n        const result: { key: string; property: CollectionPropertyConfig }[] = [];\n        for (const key of order) {\n            if (key === titlePropertyKey) continue;\n            const prop = properties[key];\n            if (prop && !prop.hideFromCollection) {\n                result.push({ key, property: prop });\n                if (result.length >= 2) break;\n            }\n        }\n        return result;\n    }, [order, properties, titlePropertyKey]);\n\n    // ── Selection IDs ────────────────────────────────────────────────\n    const selectedIds = useMemo(() => {\n        if (!selectionController?.selectedItems) return undefined;\n        const ids = new Set<string | number>();\n        for (const item of selectionController.selectedItems) {\n            const id = getValueInPath(item as Record<string, unknown>, idProperty);\n            if (id !== undefined && id !== null) {\n                ids.add(id as string | number);\n            }\n        }\n        return ids;\n    }, [selectionController?.selectedItems, idProperty]);\n\n    // ── Highlighted IDs ──────────────────────────────────────────────\n    const highlightedIds = useMemo(() => {\n        if (!highlightedItems) return undefined;\n        const ids = new Set<string | number>();\n        for (const item of highlightedItems) {\n            const id = getValueInPath(item as Record<string, unknown>, idProperty);\n            if (id !== undefined && id !== null) {\n                ids.add(id as string | number);\n            }\n        }\n        return ids;\n    }, [highlightedItems, idProperty]);\n\n    // ── Selection handler ────────────────────────────────────────────\n    const handleSelectionChange = useCallback(\n        (item: T, selected: boolean) => {\n            if (!selectionController) return;\n            selectionController.setSelectedItems((prev) => {\n                if (selected) {\n                    return [...prev, item];\n                }\n                const itemId = getValueInPath(item as Record<string, unknown>, idProperty);\n                return prev.filter((existing) => {\n                    const existingId = getValueInPath(existing as Record<string, unknown>, idProperty);\n                    return existingId !== itemId;\n                });\n            });\n        },\n        [selectionController, idProperty]\n    );\n\n    // ── Render row ───────────────────────────────────────────────────\n    const renderRow = useCallback(\n        (params: {\n            item: T;\n            index: number;\n            style: React.CSSProperties;\n            className: string;\n            selected: boolean;\n            highlighted: boolean;\n            isLast: boolean;\n            onClick: (e: React.MouseEvent) => void;\n            onSelectionChange: (selected: boolean) => void;\n        }): React.ReactNode => {\n            const { item, style, className: rowClassName, selected, highlighted, onClick, onSelectionChange } = params;\n            const titleValue = getValueInPath(item as Record<string, unknown>, titlePropertyKey);\n\n            return (\n                <div\n                    style={style}\n                    className={cls(\n                        \"flex items-center gap-3 px-4 cursor-pointer\",\n                        \"hover:bg-surface-hover\",\n                        \"transition-colors duration-100\",\n                        selected && \"bg-primary-bg\",\n                        highlighted && \"bg-surface-raised\",\n                        rowClassName\n                    )}\n                    onClick={onClick}\n                >\n                    {/* Selection checkbox */}\n                    {selectionEnabled && (\n                        <div className=\"flex-shrink-0\" onClick={(e) => e.stopPropagation()}>\n                            <Checkbox\n                                aria-label={labels.select}\n                                checked={selected}\n                                onCheckedChange={onSelectionChange}\n                                size=\"small\"\n                            />\n                        </div>\n                    )}\n\n                    {/* Content */}\n                    <div className=\"flex-1 min-w-0 py-1\">\n                        {/* Title */}\n                        <Typography variant=\"subtitle2\" noWrap>\n                            {String(titleValue ?? \"\")}\n                        </Typography>\n\n                        {/* Subtitle properties */}\n                        {subtitleProperties.length > 0 && (\n                            <div className=\"flex items-center gap-2\">\n                                {subtitleProperties.map(({ key, property }) => {\n                                    const value = getValueInPath(item as Record<string, unknown>, key);\n\n                                    if (cellRenderer) {\n                                        const custom = cellRenderer({\n                                            row: item,\n                                            propertyKey: key,\n                                            property,\n                                            value,\n                                            size: \"tiny\",\n                                        });\n                                        if (custom !== undefined) {\n                                            return <React.Fragment key={key}>{custom}</React.Fragment>;\n                                        }\n                                    }\n\n                                    return (\n                                        <React.Fragment key={key}>\n                                            <DefaultCellRenderer\n                                                row={item}\n                                                propertyKey={key}\n                                                property={property}\n                                                value={value}\n                                                size=\"tiny\"\n                                            />\n                                        </React.Fragment>\n                                    );\n                                })}\n                            </div>\n                        )}\n                    </div>\n                </div>\n            );\n        },\n        [titlePropertyKey, subtitleProperties, cellRenderer, selectionEnabled, labels]\n    );\n\n    return (\n        <div className={cls(\"w-full h-full overflow-auto\", className)}>\n            <ListView<T>\n                data={dataController.data}\n                dataLoading={dataController.loading}\n                noMoreToLoad={dataController.noMoreToLoad}\n                dataLoadingError={dataController.error}\n                itemCount={dataController.itemCount}\n                setItemCount={dataController.setItemCount}\n                pageSize={dataController.pageSize}\n                paginationEnabled={dataController.paginationEnabled}\n                onItemClick={onRowClick}\n                selectedIds={selectedIds}\n                highlightedIds={highlightedIds}\n                selectionEnabled={!!selectionEnabled}\n                onSelectionChange={handleSelectionChange}\n                size={size}\n                renderRow={renderRow}\n                emptyComponent={emptyComponent}\n            />\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,mBAAgF,EAC5F,gBACA,YACA,iBACA,aAAa,MACb,eACA,YACA,cACA,OAAO,KACP,kBACA,qBACA,kBACA,gBACA,aAC2B;CAC3B,MAAM,SAAS,YAAY;CAC3B,MAAM,QAAQ,cACJ,mBAAmB,OAAO,KAAK,UAAU,GAC/C,CAAC,iBAAiB,UAAU,CAChC;CAGA,MAAM,mBAAmB,cACf,wBAAwB,OAAO,YAAY,YAAY,aAAa,GAC1E;EAAC;EAAe;EAAO;EAAY;CAAU,CACjD;CAGA,MAAM,qBAAqB,cAAc;EACrC,MAAM,SAAgE,CAAC;EACvE,KAAK,MAAM,OAAO,OAAO;GACrB,IAAI,QAAQ,kBAAkB;GAC9B,MAAM,OAAO,WAAW;GACxB,IAAI,QAAQ,CAAC,KAAK,oBAAoB;IAClC,OAAO,KAAK;KAAE;KAAK,UAAU;IAAK,CAAC;IACnC,IAAI,OAAO,UAAU,GAAG;GAC5B;EACJ;EACA,OAAO;CACX,GAAG;EAAC;EAAO;EAAY;CAAgB,CAAC;CAGxC,MAAM,cAAc,cAAc;EAC9B,IAAI,CAAC,qBAAqB,eAAe,OAAO,KAAA;EAChD,MAAM,sBAAM,IAAI,IAAqB;EACrC,KAAK,MAAM,QAAQ,oBAAoB,eAAe;GAClD,MAAM,KAAK,eAAe,MAAiC,UAAU;GACrE,IAAI,OAAO,KAAA,KAAa,OAAO,MAC3B,IAAI,IAAI,EAAqB;EAErC;EACA,OAAO;CACX,GAAG,CAAC,qBAAqB,eAAe,UAAU,CAAC;CAGnD,MAAM,iBAAiB,cAAc;EACjC,IAAI,CAAC,kBAAkB,OAAO,KAAA;EAC9B,MAAM,sBAAM,IAAI,IAAqB;EACrC,KAAK,MAAM,QAAQ,kBAAkB;GACjC,MAAM,KAAK,eAAe,MAAiC,UAAU;GACrE,IAAI,OAAO,KAAA,KAAa,OAAO,MAC3B,IAAI,IAAI,EAAqB;EAErC;EACA,OAAO;CACX,GAAG,CAAC,kBAAkB,UAAU,CAAC;CAGjC,MAAM,wBAAwB,aACzB,MAAS,aAAsB;EAC5B,IAAI,CAAC,qBAAqB;EAC1B,oBAAoB,kBAAkB,SAAS;GAC3C,IAAI,UACA,OAAO,CAAC,GAAG,MAAM,IAAI;GAEzB,MAAM,SAAS,eAAe,MAAiC,UAAU;GACzE,OAAO,KAAK,QAAQ,aAAa;IAE7B,OADmB,eAAe,UAAqC,UAChE,MAAe;GAC1B,CAAC;EACL,CAAC;CACL,GACA,CAAC,qBAAqB,UAAU,CACpC;CAGA,MAAM,YAAY,aACb,WAUsB;EACnB,MAAM,EAAE,MAAM,OAAO,WAAW,cAAc,UAAU,aAAa,SAAS,sBAAsB;EACpG,MAAM,aAAa,eAAe,MAAiC,gBAAgB;EAEnF,OACI,qBAAC,OAAD;GACW;GACP,WAAW,IACP,+CACA,0BACA,kCACA,YAAY,iBACZ,eAAe,qBACf,YACJ;GACS;aAVb,CAaK,oBACG,oBAAC,OAAD;IAAK,WAAU;IAAgB,UAAU,MAAM,EAAE,gBAAgB;cAC7D,oBAAC,UAAD;KACI,cAAY,OAAO;KACnB,SAAS;KACT,iBAAiB;KACjB,MAAK;IACR,CAAA;GACA,CAAA,GAIT,qBAAC,OAAD;IAAK,WAAU;cAAf,CAEI,oBAAC,YAAD;KAAY,SAAQ;KAAY,QAAA;eAC3B,OAAO,cAAc,EAAE;IAChB,CAAA,GAGX,mBAAmB,SAAS,KACzB,oBAAC,OAAD;KAAK,WAAU;eACV,mBAAmB,KAAK,EAAE,KAAK,eAAe;MAC3C,MAAM,QAAQ,eAAe,MAAiC,GAAG;MAEjE,IAAI,cAAc;OACd,MAAM,SAAS,aAAa;QACxB,KAAK;QACL,aAAa;QACb;QACA;QACA,MAAM;OACV,CAAC;OACD,IAAI,WAAW,KAAA,GACX,OAAO,oBAAC,MAAM,UAAP,EAAA,UAA2B,OAAuB,GAA7B,GAA6B;MAEjE;MAEA,OACI,oBAAC,MAAM,UAAP,EAAA,UACI,oBAAC,qBAAD;OACI,KAAK;OACL,aAAa;OACH;OACH;OACP,MAAK;MACR,CAAA,EACW,GARK,GAQL;KAExB,CAAC;IACA,CAAA,CAER;KACJ;;CAEb,GACA;EAAC;EAAkB;EAAoB;EAAc;EAAkB;CAAM,CACjF;CAEA,OACI,oBAAC,OAAD;EAAK,WAAW,IAAI,+BAA+B,SAAS;YACxD,oBAAC,UAAD;GACI,MAAM,eAAe;GACrB,aAAa,eAAe;GAC5B,cAAc,eAAe;GAC7B,kBAAkB,eAAe;GACjC,WAAW,eAAe;GAC1B,cAAc,eAAe;GAC7B,UAAU,eAAe;GACzB,mBAAmB,eAAe;GAClC,aAAa;GACA;GACG;GAChB,kBAAkB,CAAC,CAAC;GACpB,mBAAmB;GACb;GACK;GACK;EACnB,CAAA;CACA,CAAA;AAEb"}