@inf-monkeys-tech/monkeys-design 1.0.44 → 1.0.45

package/dist/components/workbench/index.d.mts

@@ -703,6 +703,13 @@ interface WorkbenchGalleryViewProps<Row = any> extends Omit<WorkbenchGalleryCard
     }) => undefined | WorkbenchMasonryItemSize;
 }
 declare function WorkbenchGalleryView<Row = any>({ rows, columns, onRowClick, selectedLinkKey, selectedRowKey, className, isMasonry, galleryLayoutMode, galleryRailCardWidth, galleryGridColumns, galleryGridCardWidth, galleryMasonryColumnWidth, masonryPlacementStrategy, galleryFieldKey, galleryDensity, galleryBentoColumns, galleryDetailVisibility, galleryDetailLimit, shouldEnhanceMultimodal, getFieldValue, isMediaColumn, isTitleCandidate, isSummaryCandidate, getDisplayText, renderFieldValue, getImagePreviewSrc, isImageField, isAudioField, AudioPlayerComponent, cardVariant, renderPreview, renderMeta, renderLeadingVisual, resolveRecordVisual, hiddenDetailFieldKeys, labels, formatLabel, getMasonryItemSize, }: WorkbenchGalleryViewProps<Row>): react_jsx_runtime.JSX.Element;
+type WorkbenchCollectionLoadingVariant = 'skeleton' | 'spinner';
+interface WorkbenchCollectionSkeletonConfig {
+    count?: number;
+    loadMoreCount?: number;
+    aspectRatios?: readonly number[];
+    animated?: boolean;
+}
 type WorkbenchCollectionKey = number | string;
 type WorkbenchCollectionLayoutMode = 'dense' | 'grid' | 'masonry' | 'rail';
 type WorkbenchCollectionSelectionMode = 'multiple' | 'none' | 'single';
@@ -778,6 +785,9 @@ interface WorkbenchCollectionLoadingConfig {
     threshold?: number;
     /** Request another page while the configured scroll viewport is not filled. */
     autoFill?: boolean;
+    /** Collection loading defaults to a layout-aware skeleton. */
+    variant?: WorkbenchCollectionLoadingVariant;
+    skeleton?: WorkbenchCollectionSkeletonConfig;
 }
 type WorkbenchCollectionHoverEffect = 'highlight' | 'lift-shadow' | 'lift' | 'none' | 'scale' | 'shadow';
 type WorkbenchCollectionTitleVisibility = 'always' | 'hover' | 'never';
@@ -1243,4 +1253,4 @@ interface WorkbenchRadarMatrixProps {
     className?: string;
 }
 declare function WorkbenchRadarMatrix({ points, xAxis, yAxis, thresholds, quadrants, legend, selectedPointId, onPointSelect, width, height, labelLimit, emptyState, ariaLabel, className, }: WorkbenchRadarMatrixProps): null | react_jsx_runtime.JSX.Element;
-export { InteractiveTable, type InteractiveTableClassNames, type InteractiveTableColumn, type InteractiveTableColumnMenuLabels, InteractiveTableEditableTextCell, type InteractiveTableEditableTextCellProps, type InteractiveTableHeaderContext, type InteractiveTableHeaderProps, type InteractiveTableProps, InteractiveTableReadonlyCell, type InteractiveTableReadonlyCellProps, type InteractiveTableRenderContext, type InteractiveTableRowState, InteractiveTableSelectCell, type InteractiveTableSelectCellProps, type InteractiveTableSelectOption, WorkbenchAssetGallery, type WorkbenchAssetGalleryItem, type WorkbenchAssetGalleryProps, WorkbenchCollection, type WorkbenchCollectionActionsPlacement, type WorkbenchCollectionActionsVisibility, type WorkbenchCollectionActivationEvent, type WorkbenchCollectionAppearanceConfig, type WorkbenchCollectionCallbacks, type WorkbenchCollectionClassNames, type WorkbenchCollectionConfig, type WorkbenchCollectionGroupContext, type WorkbenchCollectionGroupingConfig, type WorkbenchCollectionHoverEffect, type WorkbenchCollectionItemActionsConfig, type WorkbenchCollectionItemAlign, type WorkbenchCollectionItemConfig, type WorkbenchCollectionItemContext, type WorkbenchCollectionItemSize, type WorkbenchCollectionItemSlotName, type WorkbenchCollectionItemSlots, type WorkbenchCollectionItemStatus, type WorkbenchCollectionItemTitleConfig, type WorkbenchCollectionKey, type WorkbenchCollectionLabels, type WorkbenchCollectionLayoutConfig, type WorkbenchCollectionLayoutContext, type WorkbenchCollectionLayoutMode, type WorkbenchCollectionLayoutSnapshot, type WorkbenchCollectionLoadingConfig, type WorkbenchCollectionProps, type WorkbenchCollectionResponsive, type WorkbenchCollectionSelectionBehavior, type WorkbenchCollectionSelectionConfig, type WorkbenchCollectionSelectionMode, type WorkbenchCollectionSlotContext, type WorkbenchCollectionSlots, type WorkbenchCollectionStateConfig, type WorkbenchCollectionTitlePlacement, type WorkbenchCollectionTitleVisibility, type WorkbenchCollectionVirtualizationAdapter, type WorkbenchCollectionVirtualizationConfig, type WorkbenchCollectionVirtualizationRenderOptions, WorkbenchContentPane, type WorkbenchContentPaneBodyProps, type WorkbenchContentPaneClassNames, type WorkbenchContentPaneProps, WorkbenchContentToolbar, type WorkbenchContentToolbarClassNames, type WorkbenchContentToolbarProps, type WorkbenchContentToolbarViewModeOption, WorkbenchDetailSidebar, type WorkbenchDetailSidebarBodyProps, type WorkbenchDetailSidebarClassNames, type WorkbenchDetailSidebarField, type WorkbenchDetailSidebarProps, type WorkbenchDetailSidebarRenderContext, type WorkbenchDetailSidebarSection, type WorkbenchEvidenceItem, WorkbenchEvidenceList, type WorkbenchEvidenceListProps, WorkbenchGalleryCard, type WorkbenchGalleryCardMetaContext, type WorkbenchGalleryCardProps, type WorkbenchGalleryCardRenderContext, type WorkbenchGalleryColumn, type WorkbenchGalleryLabels, type WorkbenchGalleryRecordVisual, WorkbenchGallerySettingsButton, type WorkbenchGallerySettingsButtonClassNames, type WorkbenchGallerySettingsButtonProps, type WorkbenchGallerySettingsLabels, type WorkbenchGallerySettingsOption, WorkbenchGallerySettingsPanel, type WorkbenchGallerySettingsPanelClassNames, type WorkbenchGallerySettingsPanelProps, type WorkbenchGallerySettingsValue, WorkbenchGalleryView, type WorkbenchGalleryViewProps, type WorkbenchJourneyItem, type WorkbenchJourneyItemState, WorkbenchJourneyNavigation, type WorkbenchJourneyNavigationProps, type WorkbenchLaneClassNames, type WorkbenchLaneColumn, type WorkbenchLaneRenderCardContext, WorkbenchLaneView, type WorkbenchLaneViewProps, type WorkbenchMasonryItemSize, WorkbenchMasonryLayout, type WorkbenchMasonryLayoutContext, type WorkbenchMasonryLayoutProps, WorkbenchMetricGrid, type WorkbenchMetricGridDensity, type WorkbenchMetricGridProps, type WorkbenchMetricGridVariant, type WorkbenchMetricItem, WorkbenchRadarFilterChip, WorkbenchRadarInspectorSection, type WorkbenchRadarLegendItem, WorkbenchRadarMatrix, type WorkbenchRadarMatrixProps, WorkbenchRadarNavigation, type WorkbenchRadarNavigationChild, type WorkbenchRadarNavigationItem, type WorkbenchRadarNavigationProps, type WorkbenchRadarQuadrant, WorkbenchRadarWorkspace, type WorkbenchRadarWorkspaceProps, WorkbenchRankedList, type WorkbenchRankedListItem, type WorkbenchRankedListMetric, type WorkbenchRankedListProps, type WorkbenchRelationshipEdge, WorkbenchRelationshipGraph, type WorkbenchRelationshipGraphProps, type WorkbenchRelationshipNode, WorkbenchResizableSidebar, type WorkbenchResizableSidebarClassNames, type WorkbenchResizableSidebarItem, type WorkbenchResizableSidebarProps, type WorkbenchResizableSidebarSection, type WorkbenchScatterAxis, WorkbenchScatterPlot, type WorkbenchScatterPlotProps, type WorkbenchScatterPoint, type WorkbenchScatterThresholds, WorkbenchSelectionTray, type WorkbenchSelectionTrayItem, type WorkbenchSelectionTrayProps, WorkbenchTableView, type WorkbenchTableViewClassNames, type WorkbenchTableViewColumn, type WorkbenchTableViewHeaderContext, type WorkbenchTableViewProps, type WorkbenchTableViewRenderContext, type WorkbenchVisualizationTone };
+export { InteractiveTable, type InteractiveTableClassNames, type InteractiveTableColumn, type InteractiveTableColumnMenuLabels, InteractiveTableEditableTextCell, type InteractiveTableEditableTextCellProps, type InteractiveTableHeaderContext, type InteractiveTableHeaderProps, type InteractiveTableProps, InteractiveTableReadonlyCell, type InteractiveTableReadonlyCellProps, type InteractiveTableRenderContext, type InteractiveTableRowState, InteractiveTableSelectCell, type InteractiveTableSelectCellProps, type InteractiveTableSelectOption, WorkbenchAssetGallery, type WorkbenchAssetGalleryItem, type WorkbenchAssetGalleryProps, WorkbenchCollection, type WorkbenchCollectionActionsPlacement, type WorkbenchCollectionActionsVisibility, type WorkbenchCollectionActivationEvent, type WorkbenchCollectionAppearanceConfig, type WorkbenchCollectionCallbacks, type WorkbenchCollectionClassNames, type WorkbenchCollectionConfig, type WorkbenchCollectionGroupContext, type WorkbenchCollectionGroupingConfig, type WorkbenchCollectionHoverEffect, type WorkbenchCollectionItemActionsConfig, type WorkbenchCollectionItemAlign, type WorkbenchCollectionItemConfig, type WorkbenchCollectionItemContext, type WorkbenchCollectionItemSize, type WorkbenchCollectionItemSlotName, type WorkbenchCollectionItemSlots, type WorkbenchCollectionItemStatus, type WorkbenchCollectionItemTitleConfig, type WorkbenchCollectionKey, type WorkbenchCollectionLabels, type WorkbenchCollectionLayoutConfig, type WorkbenchCollectionLayoutContext, type WorkbenchCollectionLayoutMode, type WorkbenchCollectionLayoutSnapshot, type WorkbenchCollectionLoadingConfig, type WorkbenchCollectionLoadingVariant, type WorkbenchCollectionProps, type WorkbenchCollectionResponsive, type WorkbenchCollectionSelectionBehavior, type WorkbenchCollectionSelectionConfig, type WorkbenchCollectionSelectionMode, type WorkbenchCollectionSkeletonConfig, type WorkbenchCollectionSlotContext, type WorkbenchCollectionSlots, type WorkbenchCollectionStateConfig, type WorkbenchCollectionTitlePlacement, type WorkbenchCollectionTitleVisibility, type WorkbenchCollectionVirtualizationAdapter, type WorkbenchCollectionVirtualizationConfig, type WorkbenchCollectionVirtualizationRenderOptions, WorkbenchContentPane, type WorkbenchContentPaneBodyProps, type WorkbenchContentPaneClassNames, type WorkbenchContentPaneProps, WorkbenchContentToolbar, type WorkbenchContentToolbarClassNames, type WorkbenchContentToolbarProps, type WorkbenchContentToolbarViewModeOption, WorkbenchDetailSidebar, type WorkbenchDetailSidebarBodyProps, type WorkbenchDetailSidebarClassNames, type WorkbenchDetailSidebarField, type WorkbenchDetailSidebarProps, type WorkbenchDetailSidebarRenderContext, type WorkbenchDetailSidebarSection, type WorkbenchEvidenceItem, WorkbenchEvidenceList, type WorkbenchEvidenceListProps, WorkbenchGalleryCard, type WorkbenchGalleryCardMetaContext, type WorkbenchGalleryCardProps, type WorkbenchGalleryCardRenderContext, type WorkbenchGalleryColumn, type WorkbenchGalleryLabels, type WorkbenchGalleryRecordVisual, WorkbenchGallerySettingsButton, type WorkbenchGallerySettingsButtonClassNames, type WorkbenchGallerySettingsButtonProps, type WorkbenchGallerySettingsLabels, type WorkbenchGallerySettingsOption, WorkbenchGallerySettingsPanel, type WorkbenchGallerySettingsPanelClassNames, type WorkbenchGallerySettingsPanelProps, type WorkbenchGallerySettingsValue, WorkbenchGalleryView, type WorkbenchGalleryViewProps, type WorkbenchJourneyItem, type WorkbenchJourneyItemState, WorkbenchJourneyNavigation, type WorkbenchJourneyNavigationProps, type WorkbenchLaneClassNames, type WorkbenchLaneColumn, type WorkbenchLaneRenderCardContext, WorkbenchLaneView, type WorkbenchLaneViewProps, type WorkbenchMasonryItemSize, WorkbenchMasonryLayout, type WorkbenchMasonryLayoutContext, type WorkbenchMasonryLayoutProps, WorkbenchMetricGrid, type WorkbenchMetricGridDensity, type WorkbenchMetricGridProps, type WorkbenchMetricGridVariant, type WorkbenchMetricItem, WorkbenchRadarFilterChip, WorkbenchRadarInspectorSection, type WorkbenchRadarLegendItem, WorkbenchRadarMatrix, type WorkbenchRadarMatrixProps, WorkbenchRadarNavigation, type WorkbenchRadarNavigationChild, type WorkbenchRadarNavigationItem, type WorkbenchRadarNavigationProps, type WorkbenchRadarQuadrant, WorkbenchRadarWorkspace, type WorkbenchRadarWorkspaceProps, WorkbenchRankedList, type WorkbenchRankedListItem, type WorkbenchRankedListMetric, type WorkbenchRankedListProps, type WorkbenchRelationshipEdge, WorkbenchRelationshipGraph, type WorkbenchRelationshipGraphProps, type WorkbenchRelationshipNode, WorkbenchResizableSidebar, type WorkbenchResizableSidebarClassNames, type WorkbenchResizableSidebarItem, type WorkbenchResizableSidebarProps, type WorkbenchResizableSidebarSection, type WorkbenchScatterAxis, WorkbenchScatterPlot, type WorkbenchScatterPlotProps, type WorkbenchScatterPoint, type WorkbenchScatterThresholds, WorkbenchSelectionTray, type WorkbenchSelectionTrayItem, type WorkbenchSelectionTrayProps, WorkbenchTableView, type WorkbenchTableViewClassNames, type WorkbenchTableViewColumn, type WorkbenchTableViewHeaderContext, type WorkbenchTableViewProps, type WorkbenchTableViewRenderContext, type WorkbenchVisualizationTone };

package/dist/components/workbench/index.d.ts

@@ -703,6 +703,13 @@ interface WorkbenchGalleryViewProps<Row = any> extends Omit<WorkbenchGalleryCard
     }) => undefined | WorkbenchMasonryItemSize;
 }
 declare function WorkbenchGalleryView<Row = any>({ rows, columns, onRowClick, selectedLinkKey, selectedRowKey, className, isMasonry, galleryLayoutMode, galleryRailCardWidth, galleryGridColumns, galleryGridCardWidth, galleryMasonryColumnWidth, masonryPlacementStrategy, galleryFieldKey, galleryDensity, galleryBentoColumns, galleryDetailVisibility, galleryDetailLimit, shouldEnhanceMultimodal, getFieldValue, isMediaColumn, isTitleCandidate, isSummaryCandidate, getDisplayText, renderFieldValue, getImagePreviewSrc, isImageField, isAudioField, AudioPlayerComponent, cardVariant, renderPreview, renderMeta, renderLeadingVisual, resolveRecordVisual, hiddenDetailFieldKeys, labels, formatLabel, getMasonryItemSize, }: WorkbenchGalleryViewProps<Row>): react_jsx_runtime.JSX.Element;
+type WorkbenchCollectionLoadingVariant = 'skeleton' | 'spinner';
+interface WorkbenchCollectionSkeletonConfig {
+    count?: number;
+    loadMoreCount?: number;
+    aspectRatios?: readonly number[];
+    animated?: boolean;
+}
 type WorkbenchCollectionKey = number | string;
 type WorkbenchCollectionLayoutMode = 'dense' | 'grid' | 'masonry' | 'rail';
 type WorkbenchCollectionSelectionMode = 'multiple' | 'none' | 'single';
@@ -778,6 +785,9 @@ interface WorkbenchCollectionLoadingConfig {
     threshold?: number;
     /** Request another page while the configured scroll viewport is not filled. */
     autoFill?: boolean;
+    /** Collection loading defaults to a layout-aware skeleton. */
+    variant?: WorkbenchCollectionLoadingVariant;
+    skeleton?: WorkbenchCollectionSkeletonConfig;
 }
 type WorkbenchCollectionHoverEffect = 'highlight' | 'lift-shadow' | 'lift' | 'none' | 'scale' | 'shadow';
 type WorkbenchCollectionTitleVisibility = 'always' | 'hover' | 'never';
@@ -1243,4 +1253,4 @@ interface WorkbenchRadarMatrixProps {
     className?: string;
 }
 declare function WorkbenchRadarMatrix({ points, xAxis, yAxis, thresholds, quadrants, legend, selectedPointId, onPointSelect, width, height, labelLimit, emptyState, ariaLabel, className, }: WorkbenchRadarMatrixProps): null | react_jsx_runtime.JSX.Element;
-export { InteractiveTable, type InteractiveTableClassNames, type InteractiveTableColumn, type InteractiveTableColumnMenuLabels, InteractiveTableEditableTextCell, type InteractiveTableEditableTextCellProps, type InteractiveTableHeaderContext, type InteractiveTableHeaderProps, type InteractiveTableProps, InteractiveTableReadonlyCell, type InteractiveTableReadonlyCellProps, type InteractiveTableRenderContext, type InteractiveTableRowState, InteractiveTableSelectCell, type InteractiveTableSelectCellProps, type InteractiveTableSelectOption, WorkbenchAssetGallery, type WorkbenchAssetGalleryItem, type WorkbenchAssetGalleryProps, WorkbenchCollection, type WorkbenchCollectionActionsPlacement, type WorkbenchCollectionActionsVisibility, type WorkbenchCollectionActivationEvent, type WorkbenchCollectionAppearanceConfig, type WorkbenchCollectionCallbacks, type WorkbenchCollectionClassNames, type WorkbenchCollectionConfig, type WorkbenchCollectionGroupContext, type WorkbenchCollectionGroupingConfig, type WorkbenchCollectionHoverEffect, type WorkbenchCollectionItemActionsConfig, type WorkbenchCollectionItemAlign, type WorkbenchCollectionItemConfig, type WorkbenchCollectionItemContext, type WorkbenchCollectionItemSize, type WorkbenchCollectionItemSlotName, type WorkbenchCollectionItemSlots, type WorkbenchCollectionItemStatus, type WorkbenchCollectionItemTitleConfig, type WorkbenchCollectionKey, type WorkbenchCollectionLabels, type WorkbenchCollectionLayoutConfig, type WorkbenchCollectionLayoutContext, type WorkbenchCollectionLayoutMode, type WorkbenchCollectionLayoutSnapshot, type WorkbenchCollectionLoadingConfig, type WorkbenchCollectionProps, type WorkbenchCollectionResponsive, type WorkbenchCollectionSelectionBehavior, type WorkbenchCollectionSelectionConfig, type WorkbenchCollectionSelectionMode, type WorkbenchCollectionSlotContext, type WorkbenchCollectionSlots, type WorkbenchCollectionStateConfig, type WorkbenchCollectionTitlePlacement, type WorkbenchCollectionTitleVisibility, type WorkbenchCollectionVirtualizationAdapter, type WorkbenchCollectionVirtualizationConfig, type WorkbenchCollectionVirtualizationRenderOptions, WorkbenchContentPane, type WorkbenchContentPaneBodyProps, type WorkbenchContentPaneClassNames, type WorkbenchContentPaneProps, WorkbenchContentToolbar, type WorkbenchContentToolbarClassNames, type WorkbenchContentToolbarProps, type WorkbenchContentToolbarViewModeOption, WorkbenchDetailSidebar, type WorkbenchDetailSidebarBodyProps, type WorkbenchDetailSidebarClassNames, type WorkbenchDetailSidebarField, type WorkbenchDetailSidebarProps, type WorkbenchDetailSidebarRenderContext, type WorkbenchDetailSidebarSection, type WorkbenchEvidenceItem, WorkbenchEvidenceList, type WorkbenchEvidenceListProps, WorkbenchGalleryCard, type WorkbenchGalleryCardMetaContext, type WorkbenchGalleryCardProps, type WorkbenchGalleryCardRenderContext, type WorkbenchGalleryColumn, type WorkbenchGalleryLabels, type WorkbenchGalleryRecordVisual, WorkbenchGallerySettingsButton, type WorkbenchGallerySettingsButtonClassNames, type WorkbenchGallerySettingsButtonProps, type WorkbenchGallerySettingsLabels, type WorkbenchGallerySettingsOption, WorkbenchGallerySettingsPanel, type WorkbenchGallerySettingsPanelClassNames, type WorkbenchGallerySettingsPanelProps, type WorkbenchGallerySettingsValue, WorkbenchGalleryView, type WorkbenchGalleryViewProps, type WorkbenchJourneyItem, type WorkbenchJourneyItemState, WorkbenchJourneyNavigation, type WorkbenchJourneyNavigationProps, type WorkbenchLaneClassNames, type WorkbenchLaneColumn, type WorkbenchLaneRenderCardContext, WorkbenchLaneView, type WorkbenchLaneViewProps, type WorkbenchMasonryItemSize, WorkbenchMasonryLayout, type WorkbenchMasonryLayoutContext, type WorkbenchMasonryLayoutProps, WorkbenchMetricGrid, type WorkbenchMetricGridDensity, type WorkbenchMetricGridProps, type WorkbenchMetricGridVariant, type WorkbenchMetricItem, WorkbenchRadarFilterChip, WorkbenchRadarInspectorSection, type WorkbenchRadarLegendItem, WorkbenchRadarMatrix, type WorkbenchRadarMatrixProps, WorkbenchRadarNavigation, type WorkbenchRadarNavigationChild, type WorkbenchRadarNavigationItem, type WorkbenchRadarNavigationProps, type WorkbenchRadarQuadrant, WorkbenchRadarWorkspace, type WorkbenchRadarWorkspaceProps, WorkbenchRankedList, type WorkbenchRankedListItem, type WorkbenchRankedListMetric, type WorkbenchRankedListProps, type WorkbenchRelationshipEdge, WorkbenchRelationshipGraph, type WorkbenchRelationshipGraphProps, type WorkbenchRelationshipNode, WorkbenchResizableSidebar, type WorkbenchResizableSidebarClassNames, type WorkbenchResizableSidebarItem, type WorkbenchResizableSidebarProps, type WorkbenchResizableSidebarSection, type WorkbenchScatterAxis, WorkbenchScatterPlot, type WorkbenchScatterPlotProps, type WorkbenchScatterPoint, type WorkbenchScatterThresholds, WorkbenchSelectionTray, type WorkbenchSelectionTrayItem, type WorkbenchSelectionTrayProps, WorkbenchTableView, type WorkbenchTableViewClassNames, type WorkbenchTableViewColumn, type WorkbenchTableViewHeaderContext, type WorkbenchTableViewProps, type WorkbenchTableViewRenderContext, type WorkbenchVisualizationTone };
+export { InteractiveTable, type InteractiveTableClassNames, type InteractiveTableColumn, type InteractiveTableColumnMenuLabels, InteractiveTableEditableTextCell, type InteractiveTableEditableTextCellProps, type InteractiveTableHeaderContext, type InteractiveTableHeaderProps, type InteractiveTableProps, InteractiveTableReadonlyCell, type InteractiveTableReadonlyCellProps, type InteractiveTableRenderContext, type InteractiveTableRowState, InteractiveTableSelectCell, type InteractiveTableSelectCellProps, type InteractiveTableSelectOption, WorkbenchAssetGallery, type WorkbenchAssetGalleryItem, type WorkbenchAssetGalleryProps, WorkbenchCollection, type WorkbenchCollectionActionsPlacement, type WorkbenchCollectionActionsVisibility, type WorkbenchCollectionActivationEvent, type WorkbenchCollectionAppearanceConfig, type WorkbenchCollectionCallbacks, type WorkbenchCollectionClassNames, type WorkbenchCollectionConfig, type WorkbenchCollectionGroupContext, type WorkbenchCollectionGroupingConfig, type WorkbenchCollectionHoverEffect, type WorkbenchCollectionItemActionsConfig, type WorkbenchCollectionItemAlign, type WorkbenchCollectionItemConfig, type WorkbenchCollectionItemContext, type WorkbenchCollectionItemSize, type WorkbenchCollectionItemSlotName, type WorkbenchCollectionItemSlots, type WorkbenchCollectionItemStatus, type WorkbenchCollectionItemTitleConfig, type WorkbenchCollectionKey, type WorkbenchCollectionLabels, type WorkbenchCollectionLayoutConfig, type WorkbenchCollectionLayoutContext, type WorkbenchCollectionLayoutMode, type WorkbenchCollectionLayoutSnapshot, type WorkbenchCollectionLoadingConfig, type WorkbenchCollectionLoadingVariant, type WorkbenchCollectionProps, type WorkbenchCollectionResponsive, type WorkbenchCollectionSelectionBehavior, type WorkbenchCollectionSelectionConfig, type WorkbenchCollectionSelectionMode, type WorkbenchCollectionSkeletonConfig, type WorkbenchCollectionSlotContext, type WorkbenchCollectionSlots, type WorkbenchCollectionStateConfig, type WorkbenchCollectionTitlePlacement, type WorkbenchCollectionTitleVisibility, type WorkbenchCollectionVirtualizationAdapter, type WorkbenchCollectionVirtualizationConfig, type WorkbenchCollectionVirtualizationRenderOptions, WorkbenchContentPane, type WorkbenchContentPaneBodyProps, type WorkbenchContentPaneClassNames, type WorkbenchContentPaneProps, WorkbenchContentToolbar, type WorkbenchContentToolbarClassNames, type WorkbenchContentToolbarProps, type WorkbenchContentToolbarViewModeOption, WorkbenchDetailSidebar, type WorkbenchDetailSidebarBodyProps, type WorkbenchDetailSidebarClassNames, type WorkbenchDetailSidebarField, type WorkbenchDetailSidebarProps, type WorkbenchDetailSidebarRenderContext, type WorkbenchDetailSidebarSection, type WorkbenchEvidenceItem, WorkbenchEvidenceList, type WorkbenchEvidenceListProps, WorkbenchGalleryCard, type WorkbenchGalleryCardMetaContext, type WorkbenchGalleryCardProps, type WorkbenchGalleryCardRenderContext, type WorkbenchGalleryColumn, type WorkbenchGalleryLabels, type WorkbenchGalleryRecordVisual, WorkbenchGallerySettingsButton, type WorkbenchGallerySettingsButtonClassNames, type WorkbenchGallerySettingsButtonProps, type WorkbenchGallerySettingsLabels, type WorkbenchGallerySettingsOption, WorkbenchGallerySettingsPanel, type WorkbenchGallerySettingsPanelClassNames, type WorkbenchGallerySettingsPanelProps, type WorkbenchGallerySettingsValue, WorkbenchGalleryView, type WorkbenchGalleryViewProps, type WorkbenchJourneyItem, type WorkbenchJourneyItemState, WorkbenchJourneyNavigation, type WorkbenchJourneyNavigationProps, type WorkbenchLaneClassNames, type WorkbenchLaneColumn, type WorkbenchLaneRenderCardContext, WorkbenchLaneView, type WorkbenchLaneViewProps, type WorkbenchMasonryItemSize, WorkbenchMasonryLayout, type WorkbenchMasonryLayoutContext, type WorkbenchMasonryLayoutProps, WorkbenchMetricGrid, type WorkbenchMetricGridDensity, type WorkbenchMetricGridProps, type WorkbenchMetricGridVariant, type WorkbenchMetricItem, WorkbenchRadarFilterChip, WorkbenchRadarInspectorSection, type WorkbenchRadarLegendItem, WorkbenchRadarMatrix, type WorkbenchRadarMatrixProps, WorkbenchRadarNavigation, type WorkbenchRadarNavigationChild, type WorkbenchRadarNavigationItem, type WorkbenchRadarNavigationProps, type WorkbenchRadarQuadrant, WorkbenchRadarWorkspace, type WorkbenchRadarWorkspaceProps, WorkbenchRankedList, type WorkbenchRankedListItem, type WorkbenchRankedListMetric, type WorkbenchRankedListProps, type WorkbenchRelationshipEdge, WorkbenchRelationshipGraph, type WorkbenchRelationshipGraphProps, type WorkbenchRelationshipNode, WorkbenchResizableSidebar, type WorkbenchResizableSidebarClassNames, type WorkbenchResizableSidebarItem, type WorkbenchResizableSidebarProps, type WorkbenchResizableSidebarSection, type WorkbenchScatterAxis, WorkbenchScatterPlot, type WorkbenchScatterPlotProps, type WorkbenchScatterPoint, type WorkbenchScatterThresholds, WorkbenchSelectionTray, type WorkbenchSelectionTrayItem, type WorkbenchSelectionTrayProps, WorkbenchTableView, type WorkbenchTableViewClassNames, type WorkbenchTableViewColumn, type WorkbenchTableViewHeaderContext, type WorkbenchTableViewProps, type WorkbenchTableViewRenderContext, type WorkbenchVisualizationTone };

package/dist/components/workbench/index.js

@@ -8791,13 +8791,146 @@ function WorkbenchMasonryLayout({
     }
   );
 }
+var DEFAULT_PROVISIONAL_CAPACITY = 12;
+var DEFAULT_GRID_ASPECT_RATIOS = [1];
+var DEFAULT_RAIL_ASPECT_RATIOS = [4 / 3];
+var DEFAULT_MASONRY_ASPECT_RATIOS = [1, 4 / 5, 3 / 2, 3 / 4, 5 / 4];
+var MIN_SKELETON_ASPECT_RATIO = 0.5;
+var MAX_SKELETON_ASPECT_RATIO = 2;
+var SKELETON_BACKGROUND_COLOR = "hsl(var(--monkeys-color-muted, var(--muted)))";
+function clamp2(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function normalizeCount(value, fallback, max) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return fallback;
+  return clamp2(Math.round(value), 1, max);
+}
+function getDefaultAspectRatios(mode) {
+  if (mode === "masonry" || mode === "dense") return DEFAULT_MASONRY_ASPECT_RATIOS;
+  if (mode === "rail") return DEFAULT_RAIL_ASPECT_RATIOS;
+  return DEFAULT_GRID_ASPECT_RATIOS;
+}
+function resolveAspectRatios(mode, values) {
+  const normalized = values?.filter((value) => typeof value === "number" && Number.isFinite(value) && value > 0).map((value) => clamp2(value, MIN_SKELETON_ASPECT_RATIO, MAX_SKELETON_ASPECT_RATIO));
+  return normalized?.length ? normalized : getDefaultAspectRatios(mode);
+}
+function resolveWorkbenchCollectionSkeletonCapacity(config) {
+  return normalizeCount(config?.count, DEFAULT_PROVISIONAL_CAPACITY, 48);
+}
+function resolveWorkbenchCollectionLoadingVariant(value) {
+  if (value === void 0) return "skeleton";
+  if (value === "skeleton" || value === "spinner") return value;
+  throw new TypeError('WorkbenchCollection loading.variant must be "skeleton" or "spinner".');
+}
+function resolveSkeletonCount({
+  columnCount,
+  config,
+  phase
+}) {
+  if (phase === "initial") {
+    const fallback2 = clamp2(columnCount * 2, 6, 24);
+    return normalizeCount(config?.count, fallback2, 48);
+  }
+  const fallback = clamp2(columnCount, 1, 12);
+  return normalizeCount(config?.loadMoreCount, fallback, 24);
+}
+function getSkeletonHeight(columnWidth, aspectRatio) {
+  return Math.max(1, columnWidth / aspectRatio);
+}
+function WorkbenchCollectionSkeleton({
+  mode,
+  phase,
+  columnCount,
+  columnWidth,
+  cardWidth,
+  gap,
+  rowHeight,
+  config,
+  ariaLabel,
+  className
+}) {
+  const count = resolveSkeletonCount({ columnCount, config, phase });
+  const aspectRatios = resolveAspectRatios(mode, config?.aspectRatios);
+  const animated = config?.animated ?? true;
+  const items = react.useMemo(
+    () => Array.from({ length: count }, (_, index) => ({
+      aspectRatio: aspectRatios[index % aspectRatios.length],
+      key: `${phase}-${index}`
+    })),
+    [aspectRatios, count, phase]
+  );
+  const renderSkeleton = (item, style) => /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSkeleton,
+    {
+      variant: "block",
+      animated,
+      className: "h-auto w-full",
+      style: {
+        backgroundColor: SKELETON_BACKGROUND_COLOR,
+        ...style ?? { aspectRatio: String(item.aspectRatio) }
+      },
+      "data-collection-skeleton-item": "",
+      "data-skeleton-aspect-ratio": item.aspectRatio
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-atomic": "true",
+      "data-collection-loading": phase,
+      "data-layout-mode": mode,
+      className: "min-w-0",
+      children: mode === "masonry" || mode === "dense" ? /* @__PURE__ */ jsxRuntime.jsx(
+        WorkbenchMasonryLayout,
+        {
+          items,
+          columnCount,
+          columnWidth,
+          gap,
+          rowHeight,
+          placementStrategy: mode === "dense" ? "dense" : "shortest",
+          className,
+          containerProps: { "aria-hidden": true },
+          getItemKey: (item) => item.key,
+          getItemSize: (item, layout) => ({
+            height: getSkeletonHeight(layout.columnWidth, item.aspectRatio)
+          }),
+          renderItem: (item, layout) => renderSkeleton(item, {
+            height: `${getSkeletonHeight(layout.columnWidth, item.aspectRatio)}px`
+          })
+        }
+      ) : mode === "rail" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn("grid min-w-0 grid-flow-col items-start overflow-x-auto", className),
+          style: {
+            gap,
+            gridAutoColumns: typeof cardWidth === "number" ? `${cardWidth}px` : cardWidth ?? `${columnWidth}px`
+          },
+          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderSkeleton(item) }, item.key))
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn("grid min-w-0 items-start", className),
+          style: { gap, gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` },
+          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderSkeleton(item) }, item.key))
+        }
+      )
+    }
+  );
+}
 var DEFAULT_GAP_PX = 12;
 var DEFAULT_ROW_HEIGHT_PX = 8;
 var DEFAULT_CARD_WIDTH_PX = 280;
 var BREAKPOINT_TABLET_PX = 640;
 var BREAKPOINT_DESKTOP_PX = 1024;
 var MAX_COLUMN_COUNT = 24;
-function clamp2(value, min, max) {
+function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function resolveRenderableSlot(slot, context) {
@@ -8821,7 +8954,7 @@ function resolveLengthToPixels2(value, fallback, node) {
 }
 function normalizeColumns(value) {
   if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return void 0;
-  return clamp2(Math.round(value), 1, MAX_COLUMN_COUNT);
+  return clamp3(Math.round(value), 1, MAX_COLUMN_COUNT);
 }
 function resolveResponsiveColumns(columns, containerWidth) {
   if (columns === "auto" || columns === void 0) return void 0;
@@ -8882,7 +9015,7 @@ function normalizeRowHeight(value) {
   return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : DEFAULT_ROW_HEIGHT_PX;
 }
 function normalizeThreshold(value) {
-  return typeof value === "number" && Number.isFinite(value) ? clamp2(value, 0, 1) : 0;
+  return typeof value === "number" && Number.isFinite(value) ? clamp3(value, 0, 1) : 0;
 }
 function normalizeItemSize(size, aspectRatio, columnWidth) {
   const normalizedAspectRatio = Number.isFinite(aspectRatio) && Number(aspectRatio) > 0 ? Number(aspectRatio) : void 0;
@@ -8942,7 +9075,7 @@ function warnOnDuplicateKeys(keys) {
 }
 function normalizeTitleMaxLines(value) {
   if (!Number.isFinite(value) || Number(value) <= 0) return void 0;
-  return clamp2(Math.round(Number(value)), 1, 12);
+  return clamp3(Math.round(Number(value)), 1, 12);
 }
 function WorkbenchCollection({
   items,
@@ -8992,6 +9125,12 @@ function WorkbenchCollection({
     [normalizedItems]
   );
   const keysSignature = normalizedItems.map(({ stringKey }) => stringKey).join("
");
+  const state = config.state;
+  const loading = state?.loading === true;
+  const loadingMore = state?.loadingMore === true;
+  const hasMore = state?.hasMore === true;
+  const loadingVariant = resolveWorkbenchCollectionLoadingVariant(config.loading?.variant);
+  const layoutItemCount = loading && normalizedItems.length === 0 && loadingVariant === "skeleton" ? resolveWorkbenchCollectionSkeletonCapacity(config.loading?.skeleton) : normalizedItems.length;
   react.useEffect(() => warnOnDuplicateKeys(keys), [keys, keysSignature]);
   const selectionMode = config.selection?.mode ?? "none";
   const controlledSelection = config.selection?.selectedKeys !== void 0;
@@ -9026,7 +9165,7 @@ function WorkbenchCollection({
   }, [itemsNode]);
   const columnCount = resolveColumnCount({
     containerWidth,
-    itemCount: normalizedItems.length,
+    itemCount: layoutItemCount,
     gap,
     columns: config.layout.columns,
     maxColumns: config.layout.maxColumns,
@@ -9111,10 +9250,6 @@ function WorkbenchCollection({
       owner.removeEventListener("scroll", saveScrollPosition);
     };
   }, [config.scrollRestorationKey, resolveScrollOwner]);
-  const state = config.state;
-  const loading = state?.loading === true;
-  const loadingMore = state?.loadingMore === true;
-  const hasMore = state?.hasMore === true;
   const canLoadMore = typeof callbacks?.onLoadMore === "function";
   const effectiveError = state?.error ?? virtualizationError;
   react.useEffect(() => {
@@ -9465,7 +9600,7 @@ function WorkbenchCollection({
         },
         children: group.items.map((entry) => {
           const customSize = config.layout.getItemSize?.(entry.item, baseLayoutContext);
-          const span = clamp2(Math.round(Number(customSize?.columnSpan) || 1), 1, columnCount);
+          const span = clamp3(Math.round(Number(customSize?.columnSpan) || 1), 1, columnCount);
           const aspectRatio = config.layout.getItemAspectRatio?.(entry.item, entry.index);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -9552,7 +9687,28 @@ function WorkbenchCollection({
             title: labels.offline,
             actions: statusStates.error?.showRetry !== false && callbacks?.onRetry ? /* @__PURE__ */ jsxRuntime.jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
           }
-        ) : showInitialLoading ? hasRenderableNode(loadingSlot) ? loadingSlot : /* @__PURE__ */ jsxRuntime.jsx(BaseLoadingState, { title: labels.loading }) : showInitialError ? hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsxRuntime.jsx(
+        ) : showInitialLoading ? hasRenderableNode(loadingSlot) ? loadingSlot : loadingVariant === "spinner" ? /* @__PURE__ */ jsxRuntime.jsx(BaseLoadingState, { title: labels.loading, variant: "spinner" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: registerItemsNode,
+            className: cn("min-w-0", classNames?.items),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              WorkbenchCollectionSkeleton,
+              {
+                mode,
+                phase: "initial",
+                columnCount,
+                columnWidth,
+                cardWidth: config.layout.cardWidth ?? config.layout.idealCardWidth,
+                gap,
+                rowHeight,
+                config: config.loading?.skeleton,
+                ariaLabel: labels.loading,
+                className: classNames?.layout
+              }
+            )
+          }
+        ) : showInitialError ? hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsxRuntime.jsx(
           BaseSystemState,
           {
             kind: "error",
@@ -9596,7 +9752,21 @@ function WorkbenchCollection({
             actions: statusStates.error?.showRetry !== false && callbacks?.onRetry ? /* @__PURE__ */ jsxRuntime.jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
           }
         ) }) : null,
-        items.length > 0 && (hasMore || loadingMore) ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: loadMoreRef, className: classNames?.loadMore, "data-collection-load-more": "", children: hasRenderableNode(loadMoreSlot) ? loadMoreSlot : loadingMore ? /* @__PURE__ */ jsxRuntime.jsx(BaseLoadingState, { title: labels.loadingMore }) : null }) : null,
+        items.length > 0 && (hasMore || loadingMore) ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: loadMoreRef, className: classNames?.loadMore, "data-collection-load-more": "", children: hasRenderableNode(loadMoreSlot) ? loadMoreSlot : loadingMore ? loadingVariant === "spinner" ? /* @__PURE__ */ jsxRuntime.jsx(BaseLoadingState, { title: labels.loadingMore, variant: "spinner" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          WorkbenchCollectionSkeleton,
+          {
+            mode,
+            phase: "load-more",
+            columnCount,
+            columnWidth,
+            cardWidth: config.layout.cardWidth ?? config.layout.idealCardWidth,
+            gap,
+            rowHeight,
+            config: config.loading?.skeleton,
+            ariaLabel: labels.loadingMore,
+            className: classNames?.layout
+          }
+        ) : null }) : null,
         hasRenderableNode(footer) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames?.footer, children: footer }) : null
       ]
     }
@@ -10467,7 +10637,7 @@ var getDomain = (values, min, max) => {
   return lower < upper ? [lower, upper] : [upper, lower];
 };
 var scale = (value, domain, start, end) => start + (value - domain[0]) / (domain[1] - domain[0]) * (end - start);
-var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
+var clamp4 = (value, min, max) => Math.min(max, Math.max(min, value));
 var activatePoint = (event, point, onPointSelect) => {
   if (!onPointSelect || event.key !== "Enter" && event.key !== " ") return;
   event.preventDefault();
@@ -10549,9 +10719,9 @@ function WorkbenchScatterPlot({
             xThreshold === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
               "line",
               {
-                x1: clamp3(xThreshold, plotLeft, plotRight),
+                x1: clamp4(xThreshold, plotLeft, plotRight),
                 y1: plotTop,
-                x2: clamp3(xThreshold, plotLeft, plotRight),
+                x2: clamp4(xThreshold, plotLeft, plotRight),
                 y2: plotBottom,
                 className: "stroke-muted-foreground/50",
                 strokeDasharray: "5 5"
@@ -10561,9 +10731,9 @@ function WorkbenchScatterPlot({
               "line",
               {
                 x1: plotLeft,
-                y1: clamp3(yThreshold, plotTop, plotBottom),
+                y1: clamp4(yThreshold, plotTop, plotBottom),
                 x2: plotRight,
-                y2: clamp3(yThreshold, plotTop, plotBottom),
+                y2: clamp4(yThreshold, plotTop, plotBottom),
                 className: "stroke-muted-foreground/50",
                 strokeDasharray: "5 5"
               }
@@ -10590,17 +10760,17 @@ function WorkbenchScatterPlot({
               }
             ),
             validPoints.map((point) => {
-              const x = clamp3(
+              const x = clamp4(
                 scale(point.x, xDomain, plotLeft, plotRight),
                 plotLeft,
                 plotRight
               );
-              const y = clamp3(
+              const y = clamp4(
                 scale(point.y, yDomain, plotBottom, plotTop),
                 plotTop,
                 plotBottom
               );
-              const radius = point.size === void 0 ? 9 : clamp3(scale(point.size, sizeDomain, 7, 18), 7, 18);
+              const radius = point.size === void 0 ? 9 : clamp4(scale(point.size, sizeDomain, 7, 18), 7, 18);
               const selected = selectedPointId === point.id;
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "g",
@@ -11140,7 +11310,7 @@ var getDomain2 = (values, min, max) => {
   return lower < upper ? [lower, upper] : [upper, lower];
 };
 var scale2 = (value, domain, start, end) => start + (value - domain[0]) / (domain[1] - domain[0]) * (end - start);
-var clamp4 = (value, min, max) => Math.min(max, Math.max(min, value));
+var clamp5 = (value, min, max) => Math.min(max, Math.max(min, value));
 var toneVariable = {
   primary: "--radar-series-one",
   secondary: "--radar-series-two",
@@ -11203,7 +11373,7 @@ function WorkbenchRadarMatrix({
   const plotRight = width;
   const plotTop = 0;
   const plotBottom = height;
-  const xThreshold = clamp4(
+  const xThreshold = clamp5(
     scale2(
       Number.isFinite(thresholds?.x) ? Number(thresholds?.x) : (xDomain[0] + xDomain[1]) / 2,
       xDomain,
@@ -11213,7 +11383,7 @@ function WorkbenchRadarMatrix({
     plotLeft,
     plotRight
   );
-  const yThreshold = clamp4(
+  const yThreshold = clamp5(
     scale2(
       Number.isFinite(thresholds?.y) ? Number(thresholds?.y) : (yDomain[0] + yDomain[1]) / 2,
       yDomain,
@@ -11321,13 +11491,13 @@ function WorkbenchRadarMatrix({
                 ] }, quadrant.id);
               }),
               validPoints.map((point, index) => {
-                const x = clamp4(scale2(point.x, xDomain, 40, width - 40), 40, width - 40);
-                const y = clamp4(scale2(point.y, yDomain, height - 48, 54), 54, height - 48);
+                const x = clamp5(scale2(point.x, xDomain, 40, width - 40), 40, width - 40);
+                const y = clamp5(scale2(point.y, yDomain, height - 48, 54), 54, height - 48);
                 const tone = point.tone || (index % 2 === 0 ? "primary" : "accent");
                 const selected = selectedPointId === point.id;
                 const labelled = labelledPointIds.has(point.id);
-                const radius = labelled ? clamp4(scale2(point.size ?? 1, sizeDomain, 5, 9), 5, 9) : 3.5;
-                const fontSize = labelled ? clamp4(scale2(point.size ?? 1, sizeDomain, 14, 31), 14, 31) : 0;
+                const radius = labelled ? clamp5(scale2(point.size ?? 1, sizeDomain, 5, 9), 5, 9) : 3.5;
+                const fontSize = labelled ? clamp5(scale2(point.size ?? 1, sizeDomain, 14, 31), 14, 31) : 0;
                 const pointStyle = {
                   fill: toneColor(tone),
                   stroke: "hsl(var(--foreground) / 0.74)"
@@ -11429,8 +11599,8 @@ function WorkbenchRadarMatrix({
                 validPoints.map((point, index) => /* @__PURE__ */ jsxRuntime.jsx(
                   "circle",
                   {
-                    cx: clamp4(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
-                    cy: clamp4(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
+                    cx: clamp5(scale2(point.x, xDomain, 40, width - 40), 40, width - 40),
+                    cy: clamp5(scale2(point.y, yDomain, height - 48, 54), 54, height - 48),
                     r: "8",
                     style: { fill: toneColor(point.tone || (index % 2 === 0 ? "primary" : "accent")) }
                   },