@wheelhouse/ui 0.2.6 → 0.2.8

package/dist/blocks/columns/column-popover-panel-header.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export declare function ColumnPopoverPanelHeader({ title, explainer, helpAriaLabel, trailing, className, }: {
+    title: string;
+    /** When non-empty, shows a help icon with this text in a tooltip. */
+    explainer?: string;
+    helpAriaLabel?: string;
+    trailing?: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=column-popover-panel-header.d.ts.map

package/dist/blocks/columns/column-popover-panel-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-popover-panel-header.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/column-popover-panel-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,wBAAgB,wBAAwB,CAAC,EACrC,KAAK,EACL,SAAS,EACT,aAAsB,EACtB,QAAQ,EACR,SAAS,GACZ,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,2CA6BA"}

package/dist/blocks/columns/column-popover-panel-header.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleHelp } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/tooltip';
+import { cn } from '../../lib/utils';
+export function ColumnPopoverPanelHeader({ title, explainer, helpAriaLabel = 'Help', trailing, className, }) {
+    const helpText = explainer?.trim();
+    return (_jsxs("div", { className: cn('flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2.5', className), children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1", children: [_jsx("p", { className: "text-sm font-medium", children: title }), helpText ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", "aria-label": helpAriaLabel }), children: _jsx(CircleHelp, { className: "size-3.5", "aria-hidden": true }) }), _jsx(TooltipContent, { side: "bottom", align: "start", className: "max-w-[min(100vw-2rem,280px)] text-pretty", children: helpText })] })) : null] }), trailing] }));
+}

package/dist/blocks/columns/columns-add-view.d.ts

@@ -0,0 +1,12 @@
+import type { ColumnsI18n, SelectedColumn } from './columns-types';
+import { type ColumnsMenuSection } from './columns-utils';
+export declare function ColumnsAddView({ i18n, sections, value, pendingAddIds, onTogglePendingAdd, onCancel, onConfirm, }: {
+    i18n: ColumnsI18n;
+    sections: ColumnsMenuSection[];
+    value: SelectedColumn[];
+    pendingAddIds: Set<string>;
+    onTogglePendingAdd: (id: string, checked: boolean) => void;
+    onCancel: () => void;
+    onConfirm: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=columns-add-view.d.ts.map

package/dist/blocks/columns/columns-add-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns-add-view.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns-add-view.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAoB,WAAW,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACrF,OAAO,EAAiC,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAgCzF,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,SAAS,GACZ,EAAE;IACC,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB,2CA0DA"}

package/dist/blocks/columns/columns-add-view.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from 'lucide-react';
+import { Button } from '../../components/button';
+import { Checkbox } from '../../components/checkbox/checkbox';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/collapsible';
+import { ScrollArea } from '../../components/scroll-area';
+import { ColumnPopoverPanelHeader } from './column-popover-panel-header';
+import { columnAllowsMultipleInstances } from './columns-utils';
+function isFieldAvailableToAddFromCatalog(field, currentValue) {
+    if (columnAllowsMultipleInstances(field))
+        return true;
+    return !currentValue.some((v) => v.id === field.id);
+}
+const addCatalogFieldRowClassName = 'flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-start text-sm text-foreground hover:bg-accent hover:text-accent-foreground';
+function AddCatalogFieldRow({ field, checked, onToggle, showIcon = false, }) {
+    const checkboxId = `columns-add-${field.id}`;
+    return (_jsxs("label", { htmlFor: checkboxId, className: addCatalogFieldRowClassName, children: [_jsx(Checkbox, { id: checkboxId, checked: checked, onCheckedChange: (next) => onToggle(field.id, next === true) }), showIcon ? field.icon : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: field.name })] }));
+}
+export function ColumnsAddView({ i18n, sections, value, pendingAddIds, onTogglePendingAdd, onCancel, onConfirm, }) {
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx(ColumnPopoverPanelHeader, { title: i18n.addColumnsAction, explainer: i18n.addColumnsStagedExplainer }), _jsxs(ScrollArea, { className: "min-h-0 flex-1", children: [_jsxs("div", { className: "sticky top-0 z-10 border-b border-border bg-popover px-3 py-2 text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-primary tabular-nums", children: value.length }), " ", i18n.columnsSelectedSuffix(value.length)] }), _jsx("div", { className: "flex flex-col gap-2 px-3 py-2 pb-2", children: sections.map((section, si) => {
+                            const available = section.fields.filter((f) => isFieldAvailableToAddFromCatalog(f, value));
+                            if (available.length === 0)
+                                return null;
+                            const flatUngrouped = !section.groupLabel && available.length === 1;
+                            if (flatUngrouped) {
+                                const field = available[0];
+                                return (_jsx(AddCatalogFieldRow, { field: field, checked: pendingAddIds.has(field.id), onToggle: onTogglePendingAdd, showIcon: true }, field.id));
+                            }
+                            const heading = section.groupLabel ??
+                                (available.length > 1 ? i18n.addColumnsSectionFallbackTitle : (available[0]?.name ?? i18n.addColumnsSectionFallbackTitle));
+                            return (_jsxs(Collapsible, { defaultOpen: true, className: "flex flex-col gap-1", children: [_jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 rounded-md px-1 py-1 text-start text-sm font-medium hover:bg-muted/80", type: "button", children: [available[0]?.icon, _jsx("span", { className: "min-w-0 flex-1 truncate", children: heading }), _jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[panel-open]:rotate-90" })] }), _jsx(CollapsibleContent, { className: "flex flex-col", children: available.map((field) => (_jsx(AddCatalogFieldRow, { field: field, checked: pendingAddIds.has(field.id), onToggle: onTogglePendingAdd }, field.id))) })] }, si));
+                        }) })] }), _jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2 border-t border-border px-3 py-2.5", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onCancel, children: i18n.cancel }), _jsx(Button, { type: "button", size: "sm", disabled: pendingAddIds.size === 0, onClick: onConfirm, children: i18n.addSelectedColumns })] })] }));
+}

package/dist/blocks/columns/columns-types.d.ts

@@ -6,6 +6,11 @@ export interface ColumnDefinition {
     id: string;
     name: string;
     description?: string;
+    /**
+     * When true, the field can appear multiple times in the selection (e.g. different date windows).
+     * Default: same as `supportsDateRange` (date-metric columns allow duplicates unless set to `false`).
+     */
+    allowMultipleInstances?: boolean;
     /** When true, selecting the row opens the date configuration pane. */
     supportsDateRange?: boolean;
     /** Merged into DateSelector for this column; overrides `Columns` dateMetricOptions. */
@@ -19,6 +24,8 @@ export interface ColumnFieldGroup {
 export type ColumnsFieldsConfig = (ColumnDefinition | ColumnFieldGroup)[];
 export interface SelectedColumn {
     id: string;
+    /** Stable row identity for DnD and updates when multiple rows share the same catalog `id`. */
+    instanceId?: string;
     dateRange?: DateSelectorValue;
     /**
      * Pin state when pin controls are shown (`false` unpinned, `true` pinned).
@@ -29,13 +36,31 @@ export interface SelectedColumn {
 export interface ColumnsI18n {
     triggerLabel: string;
     triggerCount: (n: number) => string;
+    /** Main popover: title above the selected-column list (typically “Columns”). */
     addColumnsTitle: string;
-    addColumnsSubtitle: string;
+    /** Opens the staged add-columns view; also used as the add-step panel title (typically “Add columns”). */
+    addColumnsAction: string;
+    /** Optional tooltip copy for the manage view header (help icon only when non-empty). */
+    manageColumnsExplainer?: string;
+    /** Optional tooltip copy for the staged add view header (help icon only when non-empty). */
+    addColumnsStagedExplainer?: string;
     clearAll: string;
     /** Shown after the numeric count in the footer (e.g. "columns selected"). */
     columnsSelectedSuffix: (n: number) => string;
     configureDateRangeHint: string;
     done: string;
+    /** Shown in the manage view when `value` is empty. */
+    noColumnsSelected: string;
+    /** Staged add view: confirm (appends checked columns, then returns to manage). */
+    addSelectedColumns: string;
+    /** Staged add view: discard staged selection and return to manage. */
+    cancel: string;
+    /** `aria-label` for the header help control that reveals extra guidance in a tooltip. */
+    headerSectionHelpAriaLabel: string;
+    /**
+     * Staged add view: section heading when the catalog section has no `group` label and multiple fields are shown together.
+     */
+    addColumnsSectionFallbackTitle: string;
     /** Accessible label for the pin control when the column is unpinned. */
     pinColumn: string;
     /** Accessible label for the pin control when the column is pinned. */

package/dist/blocks/columns/columns-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columns-types.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,uHAAuH;AACvH,MAAM,MAAM,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAErF,MAAM,WAAW,gBAAgB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,EAAE,CAAC;AAE1E,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,qBAAqB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,sBAAsB,EAAE,MAAM,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,aAAa,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,eAAe,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,EAAE,WAalC,CAAC;AAEF,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5B,kHAAkH;IAClH,iBAAiB,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB"}
+{"version":3,"file":"columns-types.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,uHAAuH;AACvH,MAAM,MAAM,wBAAwB,GAAG,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAErF,MAAM,WAAW,gBAAgB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uFAAuF;IACvF,iBAAiB,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,EAAE,CAAC;AAE1E,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,gFAAgF;IAChF,eAAe,EAAE,MAAM,CAAC;IACxB,0GAA0G;IAC1G,gBAAgB,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,4FAA4F;IAC5F,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,qBAAqB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,sBAAsB,EAAE,MAAM,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,0BAA0B,EAAE,MAAM,CAAC;IACnC;;OAEG;IACH,8BAA8B,EAAE,MAAM,CAAC;IACvC,wEAAwE;IACxE,SAAS,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,aAAa,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,eAAe,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,EAAE,WAoBlC,CAAC;AAEF,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC5B,kHAAkH;IAClH,iBAAiB,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/dist/blocks/columns/columns-types.js

@@ -1,12 +1,19 @@
 export const DEFAULT_COLUMNS_I18N = {
     triggerLabel: 'Columns',
     triggerCount: (n) => `${n} column${n === 1 ? '' : 's'}`,
-    addColumnsTitle: 'Add Columns',
-    addColumnsSubtitle: 'Select columns to add to the table',
+    addColumnsTitle: 'Columns',
+    addColumnsAction: 'Add columns',
+    manageColumnsExplainer: 'Reorder, pin, and remove columns. Configure date ranges where available.',
+    addColumnsStagedExplainer: 'Pick columns, then Add.',
     clearAll: 'Clear all',
     columnsSelectedSuffix: (n) => (n === 1 ? 'column selected' : 'columns selected'),
     configureDateRangeHint: 'Configure date range for this column',
     done: 'Done',
+    noColumnsSelected: 'No columns selected.',
+    addSelectedColumns: 'Add',
+    cancel: 'Cancel',
+    headerSectionHelpAriaLabel: 'Help',
+    addColumnsSectionFallbackTitle: 'Columns',
     pinColumn: 'Pin column',
     unpinColumn: 'Unpin column',
     pinnedHeading: 'Pinned',

package/dist/blocks/columns/columns-utils.d.ts

@@ -1,5 +1,9 @@
 import type { DateSelectorValue } from '../date-selector';
 import type { ColumnDefinition, ColumnsFieldsConfig, SelectedColumn } from './columns-types';
+export declare function getSelectedColumnRowKey(row: SelectedColumn): string;
+export declare function newSelectedColumn(definitionId: string): SelectedColumn;
+/** When `allowMultipleInstances` is unset, date-metric columns default to allowing duplicates. */
+export declare function columnAllowsMultipleInstances(def: ColumnDefinition): boolean;
 /** Result of splitting `value` into pinned (prefix) and unpinned (suffix) partitions. */
 export type SplitPinnedPrefixResult = {
     pinned: SelectedColumn[];
@@ -20,11 +24,11 @@ export declare function mergePinnedPartitions(pinned: SelectedColumn[], unpinned
  */
 export declare function normalizePinnedColumnOrder(value: SelectedColumn[]): SelectedColumn[];
 /**
- * Toggles `pinned` for the column with `id`, moving it to the end of the pinned block
+ * Toggles `pinned` for the row with `rowKey` (see {@link getSelectedColumnRowKey}), moving it to the end of the pinned block
  * when pinning or to the start of the unpinned block when unpinning.
- * Unknown ids return a shallow copy of `value` unchanged.
+ * Unknown keys return a shallow copy of `value` unchanged.
  */
-export declare function toggleColumnPinned(value: SelectedColumn[], id: string): SelectedColumn[];
+export declare function toggleColumnPinned(value: SelectedColumn[], rowKey: string): SelectedColumn[];
 /**
  * Applies a reorder from sortable indices; returns `null` when the move is invalid or a no-op.
  * With `lockPinning`, moves across the contiguous pinned / unpinned boundary are rejected.

package/dist/blocks/columns/columns-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columns-utils.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns-utils.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,EAAE,gBAAgB,EAAoB,mBAAmB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE/G,yFAAyF;AACzF,MAAM,MAAM,uBAAuB,GAAG;IAClC,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,uBAAuB,CAWlF;AAED,6GAA6G;AAC7G,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,MAAM,CAOlE;AAED,qDAAqD;AACrD,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAE5G;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAGpF;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,MAAM,GAAG,cAAc,EAAE,CAoBxF;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,IAAI,CAatJ;AAED,uGAAuG;AACvG,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAoDtF;AAMD,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,GAAG,gBAAgB,EAAE,CAO9E;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC;AAErF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,GAAG,kBAAkB,EAAE,CAWrF;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,mBAAmB,GAAG,OAAO,CAE5E;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAS5F"}
+{"version":3,"file":"columns-utils.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns-utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,EAAE,gBAAgB,EAAoB,mBAAmB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE/G,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,cAAc,GAAG,MAAM,CAEnE;AAED,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,cAAc,CAEtE;AAED,kGAAkG;AAClG,wBAAgB,6BAA6B,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO,CAK5E;AAaD,yFAAyF;AACzF,MAAM,MAAM,uBAAuB,GAAG;IAClC,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,uBAAuB,CAWlF;AAED,6GAA6G;AAC7G,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,MAAM,CAOlE;AAED,qDAAqD;AACrD,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAE5G;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAGpF;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,cAAc,EAAE,CAoB5F;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,IAAI,CAatJ;AAED,uGAAuG;AACvG,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAoDtF;AAMD,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,GAAG,gBAAgB,EAAE,CAO9E;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC;AAErF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,GAAG,kBAAkB,EAAE,CAWrF;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,mBAAmB,GAAG,OAAO,CAE5E;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAS5F"}

package/dist/blocks/columns/columns-utils.js

@@ -1,7 +1,29 @@
-import { arrayMove } from '@dnd-kit/sortable';
 import { format } from 'date-fns';
 import { DEFAULT_DATE_SELECTOR_I18N } from '../date-selector/date-selector-types';
 import { getRollingSummaryLabel } from '../date-selector/date-selector-value';
+export function getSelectedColumnRowKey(row) {
+    return row.instanceId ?? row.id;
+}
+export function newSelectedColumn(definitionId) {
+    return { id: definitionId, instanceId: crypto.randomUUID() };
+}
+/** When `allowMultipleInstances` is unset, date-metric columns default to allowing duplicates. */
+export function columnAllowsMultipleInstances(def) {
+    if (def.allowMultipleInstances !== undefined) {
+        return def.allowMultipleInstances;
+    }
+    return def.supportsDateRange === true;
+}
+/**
+ * Move an array item to a new index (inclusive semantics match `@dnd-kit/sortable` `arrayMove`).
+ * Implemented locally so this module stays free of `@dnd-kit/sortable`, whose entry re-exports
+ * hooks and cannot run under the React Server Components `react` build.
+ */
+function arrayMove(array, from, to) {
+    const next = array.slice();
+    next.splice(to < 0 ? next.length + to : to, 0, next.splice(from, 1)[0]);
+    return next;
+}
 /**
  * Splits selected columns into pinned vs unpinned rows in display order.
  * Uses `pinned === true` for the pinned partition; all other rows go to unpinned.
@@ -43,21 +65,21 @@ export function normalizePinnedColumnOrder(value) {
     return [...pinned.map((c) => ({ ...c, pinned: true })), ...unpinned.map((c) => ({ ...c, pinned: false }))];
 }
 /**
- * Toggles `pinned` for the column with `id`, moving it to the end of the pinned block
+ * Toggles `pinned` for the row with `rowKey` (see {@link getSelectedColumnRowKey}), moving it to the end of the pinned block
  * when pinning or to the start of the unpinned block when unpinning.
- * Unknown ids return a shallow copy of `value` unchanged.
+ * Unknown keys return a shallow copy of `value` unchanged.
  */
-export function toggleColumnPinned(value, id) {
+export function toggleColumnPinned(value, rowKey) {
     const { pinned: p0, unpinned: u0 } = splitPinnedPrefix(value);
     const pinned = [...p0];
     const unpinned = [...u0];
-    const pi = pinned.findIndex((c) => c.id === id);
+    const pi = pinned.findIndex((c) => getSelectedColumnRowKey(c) === rowKey);
     if (pi >= 0) {
         const [row] = pinned.splice(pi, 1);
         unpinned.unshift({ ...row, pinned: false });
         return mergePinnedPartitions(pinned, unpinned);
     }
-    const ui = unpinned.findIndex((c) => c.id === id);
+    const ui = unpinned.findIndex((c) => getSelectedColumnRowKey(c) === rowKey);
     if (ui >= 0) {
         const [row] = unpinned.splice(ui, 1);
         pinned.push({ ...row, pinned: true });

package/dist/blocks/columns/columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAA4B,YAAY,EAAkB,MAAM,iBAAiB,CAAC;AAsB9F,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,uBAAuB,EACvB,IAAI,EAAE,WAAW,EACjB,iBAAiB,EAAE,qBAAqB,EACxC,WAAmB,GACtB,EAAE,YAAY,2CA+Wd"}
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAA4B,YAAY,EAAkB,MAAM,iBAAiB,CAAC;AA6B9F,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,uBAAuB,EACvB,IAAI,EAAE,WAAW,EACjB,iBAAiB,EAAE,qBAAqB,EACxC,WAAmB,GACtB,EAAE,YAAY,2CAwWd"}

package/dist/blocks/columns/columns.js

@@ -1,18 +1,19 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { closestCenter } from '@dnd-kit/core';
-import { ChevronDown, ChevronRight, Columns3, GripVertical, Pin, PinOff, X } from 'lucide-react';
+import { ChevronDown, Columns3, GripVertical, Pin, PinOff, X } from 'lucide-react';
 import { Button } from '../../components/button';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/collapsible';
 import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover';
+import { TooltipProvider } from '../../components/tooltip';
 import { ScrollArea } from '../../components/scroll-area';
-import { Separator } from '../../components/separator';
 import { Sortable, SortableItem, SortableItemHandle } from '../../components/sortable';
 import { cn } from '../../lib/utils';
 import { DateSelector } from '../date-selector';
 import { DEFAULT_COLUMNS_I18N } from './columns-types';
-import { buildColumnMap, formatColumnDateRangeSecondary, parseColumnSections, pinnedPrefixLength, reorderColumnsSelection, toggleColumnPinned, } from './columns-utils';
+import { ColumnPopoverPanelHeader } from './column-popover-panel-header';
+import { ColumnsAddView } from './columns-add-view';
+import { buildColumnMap, columnAllowsMultipleInstances, formatColumnDateRangeSecondary, getSelectedColumnRowKey, newSelectedColumn, parseColumnSections, pinnedPrefixLength, reorderColumnsSelection, toggleColumnPinned, } from './columns-utils';
 const DEFAULT_DATE_METRIC_OPTIONS = {
     showRollingPresets: true,
     periodTypes: ['day', 'month', 'quarter', 'year'],
@@ -28,10 +29,12 @@ export function Columns({ columns, value, onChange, className, popoverContentCla
     const columnMap = useMemo(() => buildColumnMap(columns), [columns]);
     const sections = useMemo(() => parseColumnSections(columns), [columns]);
     const [open, setOpen] = useState(false);
-    const [activeColumnId, setActiveColumnId] = useState(null);
-    const selectedIdSet = useMemo(() => new Set(value.map((v) => v.id)), [value]);
-    const activeDef = activeColumnId ? columnMap[activeColumnId] : undefined;
-    const showRightPanel = Boolean(activeDef?.supportsDateRange && activeColumnId && selectedIdSet.has(activeColumnId));
+    const [popoverView, setPopoverView] = useState('manage');
+    const [pendingAddIds, setPendingAddIds] = useState(() => new Set());
+    const [activeRowKey, setActiveRowKey] = useState(null);
+    const activeSelected = activeRowKey ? value.find((s) => getSelectedColumnRowKey(s) === activeRowKey) : undefined;
+    const activeDef = activeSelected ? columnMap[activeSelected.id] : undefined;
+    const showRightPanel = popoverView === 'manage' && Boolean(activeDef?.supportsDateRange && activeRowKey);
     const mergedDateMetricOptions = useMemo(() => {
         const colOpts = activeDef?.supportsDateRange ? activeDef.dateMetricOptions : undefined;
         return {
@@ -41,33 +44,73 @@ export function Columns({ columns, value, onChange, className, popoverContentCla
         };
     }, [activeDef, dateMetricOptionsProp]);
     const { className: dateMetricClassName, ...dateSelectorProps } = mergedDateMetricOptions;
-    const activeSelected = activeColumnId ? value.find((s) => s.id === activeColumnId) : undefined;
     const activeDateRange = activeSelected?.dateRange;
+    const resetPopoverUi = useCallback(() => {
+        setPopoverView('manage');
+        setPendingAddIds(new Set());
+        setActiveRowKey(null);
+    }, []);
     const handleOpenChange = useCallback((next) => {
         setOpen(next);
         if (!next) {
-            setActiveColumnId(null);
+            resetPopoverUi();
         }
-    }, []);
-    const updateSelectedDateRange = useCallback((columnId, dateRange) => {
-        onChange(value.map((row) => (row.id === columnId ? { ...row, dateRange } : row)));
+    }, [resetPopoverUi]);
+    const updateSelectedDateRange = useCallback((rowKey, dateRange) => {
+        onChange(value.map((row) => (getSelectedColumnRowKey(row) === rowKey ? { ...row, dateRange } : row)));
     }, [onChange, value]);
-    const removeColumn = useCallback((id) => {
-        onChange(value.filter((v) => v.id !== id));
-        setActiveColumnId((prev) => (prev === id ? null : prev));
+    const removeColumn = useCallback((rowKey) => {
+        onChange(value.filter((v) => getSelectedColumnRowKey(v) !== rowKey));
+        setActiveRowKey((prev) => (prev === rowKey ? null : prev));
     }, [onChange, value]);
     const clearAll = useCallback(() => {
         onChange([]);
-        setActiveColumnId(null);
-    }, [onChange]);
-    const addColumn = useCallback((id) => {
-        if (selectedIdSet.has(id))
+        resetPopoverUi();
+    }, [onChange, resetPopoverUi]);
+    const goToAddView = useCallback(() => {
+        setActiveRowKey(null);
+        setPendingAddIds(new Set());
+        setPopoverView('add');
+    }, []);
+    const cancelAddView = useCallback(() => {
+        setPendingAddIds(new Set());
+        setPopoverView('manage');
+    }, []);
+    const confirmAddColumns = useCallback(() => {
+        if (pendingAddIds.size === 0)
             return;
-        onChange([...value, { id }]);
-    }, [onChange, selectedIdSet, value]);
-    const handleRowActivate = useCallback((id) => {
-        setActiveColumnId(id);
+        const idsToAdd = Array.from(pendingAddIds);
+        let next = [...value];
+        for (const defId of idsToAdd) {
+            const def = columnMap[defId];
+            if (!def || !columnAllowsMultipleInstances(def))
+                continue;
+            if (next.some((r) => r.id === defId)) {
+                next = next.map((r) => (r.id === defId && r.instanceId === undefined ? { ...r, instanceId: crypto.randomUUID() } : r));
+            }
+        }
+        const additions = idsToAdd.map((id) => newSelectedColumn(id));
+        onChange([...next, ...additions]);
+        setPendingAddIds(new Set());
+        setPopoverView('manage');
+    }, [onChange, pendingAddIds, value, columnMap]);
+    const togglePendingAdd = useCallback((id, checked) => {
+        setPendingAddIds((prev) => {
+            const next = new Set(prev);
+            if (checked)
+                next.add(id);
+            else
+                next.delete(id);
+            return next;
+        });
     }, []);
+    const handleRowActivate = useCallback((rowKey) => {
+        const row = value.find((s) => getSelectedColumnRowKey(s) === rowKey);
+        const def = row ? columnMap[row.id] : undefined;
+        if (!def?.supportsDateRange)
+            return;
+        setActiveRowKey(rowKey);
+    }, [value, columnMap]);
     const pinnedPrefixLen = useMemo(() => pinnedPrefixLength(value), [value]);
     const unpinnedCount = value.length - pinnedPrefixLen;
     const lockedPartitionCollision = useMemo(() => {
@@ -76,12 +119,12 @@ export function Columns({ columns, value, onChange, className, popoverContentCla
         return (args) => {
             const collisions = closestCenter(args);
             const pc = pinnedPrefixLength(value);
-            const activeIdx = value.findIndex((item) => item.id === String(args.active.id));
+            const activeIdx = value.findIndex((item) => getSelectedColumnRowKey(item) === String(args.active.id));
             if (activeIdx < 0 || !collisions?.length)
                 return collisions;
             const activeInPinned = activeIdx < pc;
             const filtered = collisions.filter((c) => {
-                const overIdx = value.findIndex((item) => item.id === String(c.id));
+                const overIdx = value.findIndex((item) => getSelectedColumnRowKey(item) === String(c.id));
                 if (overIdx < 0)
                     return false;
                 return overIdx < pc === activeInPinned;
@@ -89,8 +132,8 @@ export function Columns({ columns, value, onChange, className, popoverContentCla
             return filtered;
         };
     }, [lockPinning, value]);
-    const handleTogglePin = useCallback((id) => {
-        onChange(toggleColumnPinned(value, id));
+    const handleTogglePin = useCallback((rowKey) => {
+        onChange(toggleColumnPinned(value, rowKey));
     }, [onChange, value]);
     const handleColumnsMove = useCallback(({ activeIndex, overIndex }) => {
         const next = reorderColumnsSelection(value, lockPinning, activeIndex, overIndex);
@@ -98,43 +141,38 @@ export function Columns({ columns, value, onChange, className, popoverContentCla
             onChange(next);
     }, [value, onChange, lockPinning]);
     const count = value.length;
-    return (_jsx("div", { className: cn(className), children: _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "gap-2 font-normal", "aria-expanded": open, "aria-haspopup": "dialog" }), children: [_jsx(Columns3, { className: "size-4 text-primary", "aria-hidden": true }), _jsxs("span", { className: "text-sm", children: [i18n.triggerLabel, " \u00B7 ", i18n.triggerCount(count)] }), _jsx(ChevronDown, { className: "size-4 opacity-60", "aria-hidden": true })] }), _jsx(PopoverContent, { align: "start", className: cn('w-auto max-w-[min(100vw-2rem,720px)] gap-0 overflow-hidden p-0 shadow-lg ring-1 ring-foreground/10', showRightPanel ? 'min-w-[min(100vw-2rem,720px)]' : 'min-w-[min(100vw-2rem,340px)]', popoverContentClassName), children: _jsxs("div", { className: "flex max-h-[min(85vh,560px)] min-h-0", children: [_jsxs("div", { className: cn('flex min-h-0 min-w-0 flex-1 flex-col border-e border-border', showRightPanel ? 'max-w-[340px]' : 'w-full max-w-[360px]'), children: [_jsx("div", { className: "shrink-0 space-y-1 border-b border-border px-3 py-2.5", children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium", children: i18n.addColumnsTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: i18n.addColumnsSubtitle })] }), _jsx("button", { type: "button", onClick: clearAll, disabled: count === 0, className: "shrink-0 text-xs font-medium text-primary hover:underline disabled:pointer-events-none disabled:opacity-40", children: i18n.clearAll })] }) }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: _jsxs("div", { className: "flex flex-col gap-2 px-3 py-2", children: [value.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-2", children: [lockPinning && pinnedPrefixLen > 0 ? (_jsx("p", { className: "px-0.5 text-xs font-medium text-muted-foreground", children: i18n.pinnedHeading })) : null, _jsx(Sortable, { value: value, onValueChange: onChange, getItemValue: (item) => item.id, onMove: handleColumnsMove, collisionDetection: lockedPartitionCollision, className: "flex flex-col gap-2", children: value.flatMap((row, index) => {
-                                                                const def = columnMap[row.id];
-                                                                if (!def)
-                                                                    return [];
-                                                                const isActive = activeColumnId === row.id;
-                                                                const secondary = row.dateRange && def.supportsDateRange ? formatColumnDateRangeSecondary(row.dateRange) : null;
-                                                                const showHighlight = isActive && def.supportsDateRange;
-                                                                const isPinned = row.pinned === true;
-                                                                const showSectionDivider = lockPinning && pinnedPrefixLen > 0 && unpinnedCount > 0 && index === pinnedPrefixLen;
-                                                                const item = (_jsxs(SortableItem, { value: row.id, className: cn('flex min-w-0 items-center gap-2 rounded-md border px-2 py-1.5 text-sm shadow-xs transition-colors', showHighlight
-                                                                        ? 'border-primary bg-primary text-primary-foreground'
-                                                                        : isActive
-                                                                            ? 'border-primary/40 bg-primary/5'
-                                                                            : 'border-border bg-card text-card-foreground'), children: [_jsx(SortableItemHandle, { className: cn('shrink-0 touch-none', showHighlight ? 'text-primary-foreground/80' : 'text-muted-foreground'), "aria-label": `Reorder ${def.name}`, children: _jsx(GripVertical, { className: "size-4", strokeWidth: 2.5 }) }), !lockPinning && row.pinned !== undefined ? (_jsx("button", { type: "button", className: cn('shrink-0 rounded-sm p-0.5 outline-none hover:bg-black/10 focus-visible:ring-2 focus-visible:ring-ring', showHighlight && 'hover:bg-white/15'), "aria-pressed": isPinned, "aria-label": isPinned ? i18n.unpinColumn : i18n.pinColumn, onClick: (e) => {
-                                                                                e.stopPropagation();
-                                                                                handleTogglePin(row.id);
-                                                                            }, children: isPinned ? (_jsx(PinOff, { className: "size-4", "aria-hidden": true })) : (_jsx(Pin, { className: "size-4 opacity-70", "aria-hidden": true })) })) : null, _jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-1.5 text-start", onClick: () => handleRowActivate(row.id), children: [_jsx("span", { className: cn('truncate font-medium', !secondary && 'flex-1'), children: def.name }), secondary ? (_jsxs("span", { className: cn('truncate text-xs', showHighlight ? 'text-primary-foreground/85' : 'text-muted-foreground'), children: ["\u00B7 ", secondary] })) : null] }), _jsx("button", { type: "button", className: cn('shrink-0 rounded-sm p-0.5 outline-none hover:bg-black/10 focus-visible:ring-2 focus-visible:ring-ring', showHighlight && 'hover:bg-white/15'), "aria-label": `Remove ${def.name}`, onClick: (e) => {
-                                                                                e.stopPropagation();
-                                                                                removeColumn(row.id);
-                                                                            }, children: _jsx(X, { className: "size-4" }) })] }, row.id));
-                                                                if (showSectionDivider) {
-                                                                    return [
-                                                                        _jsxs("div", { className: "flex flex-col gap-2 px-0.5 pt-0.5", children: [_jsx(Separator, { className: "bg-border" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: i18n.unpinnedHeading })] }, `columns-unpinned-heading-${row.id}`),
-                                                                        item,
-                                                                    ];
-                                                                }
-                                                                return [item];
-                                                            }) })] })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: "No columns selected." })), _jsx(Separator, { className: "my-1" }), _jsx("div", { className: "flex flex-col gap-2 pb-2", children: sections.map((section, si) => {
-                                                        const available = section.fields.filter((f) => !selectedIdSet.has(f.id));
-                                                        if (available.length === 0)
-                                                            return null;
-                                                        const flatUngrouped = !section.groupLabel && available.length === 1;
-                                                        if (flatUngrouped) {
-                                                            const field = available[0];
-                                                            return (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm text-foreground hover:bg-accent hover:text-accent-foreground", onClick: () => addColumn(field.id), children: [field.icon, _jsx("span", { className: "min-w-0 flex-1 truncate", children: field.name })] }, field.id));
-                                                        }
-                                                        const heading = section.groupLabel ?? (available.length > 1 ? 'Columns' : (available[0]?.name ?? 'Columns'));
-                                                        return (_jsxs(Collapsible, { defaultOpen: true, className: "flex flex-col gap-1", children: [_jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 rounded-md px-1 py-1.5 text-start text-sm font-medium hover:bg-muted/80", type: "button", children: [available[0]?.icon, _jsx("span", { className: "min-w-0 flex-1 truncate", children: heading }), _jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[panel-open]:rotate-90" })] }), _jsx(CollapsibleContent, { className: "flex flex-col gap-0.5 ps-1", children: available.map((field) => (_jsx("button", { type: "button", className: "rounded-md px-2 py-1.5 text-start text-sm text-foreground hover:bg-accent hover:text-accent-foreground", onClick: () => addColumn(field.id), children: field.name }, field.id))) })] }, si));
-                                                    }) })] }) }), _jsxs("div", { className: "shrink-0 border-t border-border px-3 py-2 text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-primary tabular-nums", children: count }), " ", i18n.columnsSelectedSuffix(count)] })] }), showRightPanel && activeColumnId && activeDef?.supportsDateRange ? (_jsxs("div", { className: "flex min-h-0 w-[min(100%,380px)] min-w-[280px] flex-1 flex-col border-border bg-popover", children: [_jsxs("div", { className: "flex shrink-0 items-start justify-between gap-2 border-b border-border px-3 py-2.5", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium", children: activeDef.name }), _jsx("p", { className: "text-xs text-muted-foreground", children: activeDef.description ?? i18n.configureDateRangeHint })] }), _jsx("button", { type: "button", className: "shrink-0 rounded-sm p-1 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "Close configuration", onClick: () => setActiveColumnId(null), children: _jsx(X, { className: "size-4" }) })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx("div", { className: "flex min-h-0 flex-1 flex-col p-3", children: _jsx(DateSelector, { ...dateSelectorProps, value: activeDateRange, onChange: (next) => updateSelectedDateRange(activeColumnId, next), className: cn('min-h-0 max-w-none flex-1', dateMetricClassName) }) }) }), _jsx("div", { className: "flex shrink-0 items-center justify-end gap-2 border-t border-border px-3 py-2.5", children: _jsx(Button, { type: "button", size: "sm", onClick: () => setActiveColumnId(null), children: i18n.done }) })] })) : null] }) })] }) }));
+    return (_jsx("div", { className: cn(className), children: _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "gap-2 font-normal", "aria-expanded": open, "aria-haspopup": "dialog" }), children: [_jsx(Columns3, { className: "text-primary", "aria-hidden": true }), _jsxs("span", { className: "text-sm", children: [i18n.triggerLabel, " \u00B7 ", i18n.triggerCount(count)] }), _jsx(ChevronDown, { className: "opacity-60", "aria-hidden": true })] }), _jsx(PopoverContent, { align: "start", className: cn('w-auto max-w-[min(100vw-2rem,640px)] gap-0 overflow-hidden p-0 shadow-lg ring-1 ring-foreground/10', showRightPanel ? 'min-w-[min(100vw-2rem,640px)]' : 'min-w-[min(100vw-2rem,320px)]', popoverContentClassName), children: _jsx(TooltipProvider, { delay: 200, children: _jsxs("div", { className: "flex max-h-[min(85vh,560px)] min-h-0", children: [_jsx("div", { className: "flex min-h-0 w-[320px] shrink-0 flex-col", children: popoverView === 'manage' ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx(ColumnPopoverPanelHeader, { title: i18n.addColumnsTitle, explainer: i18n.manageColumnsExplainer, trailing: _jsx("button", { type: "button", onClick: clearAll, disabled: count === 0, className: "shrink-0 text-xs font-medium text-primary hover:underline disabled:pointer-events-none disabled:opacity-40", children: i18n.clearAll }) }), _jsxs(ScrollArea, { className: "min-h-0 flex-1", children: [_jsxs("div", { className: "sticky top-0 z-10 border-b border-border bg-popover px-3 py-2 text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-primary tabular-nums", children: count }), " ", i18n.columnsSelectedSuffix(count)] }), _jsx("div", { className: "flex flex-col gap-3", children: value.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-2", children: [lockPinning && pinnedPrefixLen > 0 ? (_jsx("p", { className: "px-0.5 text-xs font-medium text-muted-foreground", children: i18n.pinnedHeading })) : null, _jsx(Sortable, { value: value, onValueChange: onChange, getItemValue: (item) => getSelectedColumnRowKey(item), onMove: handleColumnsMove, collisionDetection: lockedPartitionCollision, className: "flex flex-col divide-y divide-border", children: value.flatMap((row, index) => {
+                                                                        const def = columnMap[row.id];
+                                                                        if (!def)
+                                                                            return [];
+                                                                        const rowKey = getSelectedColumnRowKey(row);
+                                                                        const secondary = row.dateRange && def.supportsDateRange
+                                                                            ? formatColumnDateRangeSecondary(row.dateRange)
+                                                                            : null;
+                                                                        const showHighlight = activeRowKey === rowKey && Boolean(def.supportsDateRange);
+                                                                        const isPinned = row.pinned === true;
+                                                                        const showSectionDivider = lockPinning && pinnedPrefixLen > 0 && unpinnedCount > 0 && index === pinnedPrefixLen;
+                                                                        const iconBtnClass = cn('shrink-0 rounded-sm p-0.5 outline-none hover:bg-black/5 focus-visible:ring-2 focus-visible:ring-ring hover:[&_svg]:opacity-100', showHighlight && 'hover:bg-white/15');
+                                                                        const nodes = [];
+                                                                        if (showSectionDivider) {
+                                                                            nodes.push(_jsx("p", { className: "px-3 py-2 text-xs font-medium text-muted-foreground", children: i18n.unpinnedHeading }, `columns-unpinned-heading-${rowKey}`));
+                                                                        }
+                                                                        nodes.push(_jsxs(SortableItem, { value: rowKey, className: cn('flex min-w-0 items-center gap-1 px-2 py-2 text-sm transition-colors', showHighlight
+                                                                                ? 'border-primary bg-primary text-primary-foreground'
+                                                                                : 'border-border bg-card text-card-foreground', def.supportsDateRange && !showHighlight && 'hover:bg-accent'), children: [_jsx(SortableItemHandle, { className: cn('shrink-0 touch-none', showHighlight ? 'text-primary-foreground/80' : 'text-muted-foreground'), "aria-label": `Reorder ${def.name}`, children: _jsx(GripVertical, {}) }), _jsx(ColumnRowLabel, { name: def.name, secondary: secondary, showHighlight: showHighlight, activatable: Boolean(def.supportsDateRange), onActivate: def.supportsDateRange ? () => handleRowActivate(rowKey) : undefined }), !lockPinning && row.pinned !== undefined ? (_jsx("button", { type: "button", className: iconBtnClass, "aria-pressed": isPinned, "aria-label": isPinned ? i18n.unpinColumn : i18n.pinColumn, onClick: (e) => {
+                                                                                        e.stopPropagation();
+                                                                                        handleTogglePin(rowKey);
+                                                                                    }, children: isPinned ? (_jsx(PinOff, { className: "size-4", "aria-hidden": true })) : (_jsx(Pin, { className: "size-4 opacity-30", "aria-hidden": true })) })) : null, _jsx("button", { type: "button", className: cn(iconBtnClass, '[&_svg]:opacity-30'), "aria-label": `Remove ${def.name}`, onClick: (e) => {
+                                                                                        e.stopPropagation();
+                                                                                        removeColumn(rowKey);
+                                                                                    }, children: _jsx(X, {}) })] }, rowKey));
+                                                                        return nodes;
+                                                                    }) })] })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: i18n.noColumnsSelected })) })] }), _jsx("div", { className: "shrink-0 border-t border-border bg-popover p-3", children: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: goToAddView, children: i18n.addColumnsAction }) })] })) : (_jsx(ColumnsAddView, { i18n: i18n, sections: sections, value: value, pendingAddIds: pendingAddIds, onTogglePendingAdd: togglePendingAdd, onCancel: cancelAddView, onConfirm: confirmAddColumns })) }), showRightPanel && activeDef && activeRowKey ? (_jsxs("div", { className: "flex min-h-0 w-[min(100%,380px)] min-w-[280px] flex-1 flex-col border-l border-border bg-popover", children: [_jsx(ColumnPopoverPanelHeader, { title: activeDef.name, explainer: activeDef.description ?? i18n.configureDateRangeHint, helpAriaLabel: i18n.headerSectionHelpAriaLabel, trailing: _jsx("button", { type: "button", className: "shrink-0 rounded-sm p-1 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "Close configuration", onClick: () => setActiveRowKey(null), children: _jsx(X, {}) }) }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden p-3", children: _jsx(DateSelector, { ...dateSelectorProps, value: activeDateRange, onChange: (next) => updateSelectedDateRange(activeRowKey, next), className: cn('min-h-0 max-w-none flex-1', dateMetricClassName) }) })] })) : null] }) }) })] }) }));
+}
+function ColumnRowLabel({ name, secondary, showHighlight, activatable, onActivate, }) {
+    const label = (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('truncate font-medium', !secondary && 'flex-1'), children: name }), secondary ? (_jsxs("span", { className: cn('truncate text-xs', showHighlight ? 'text-primary-foreground/85' : 'text-muted-foreground'), children: ["\u00B7 ", secondary] })) : null] }));
+    if (activatable) {
+        return (_jsx("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-1.5 text-start", onClick: onActivate, children: label }));
+    }
+    return _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: label });
 }

package/dist/blocks/columns/columns.stories.d.ts

@@ -10,4 +10,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const PinningLocked: Story;
+export declare const Empty: Story;
 //# sourceMappingURL=columns.stories.d.ts.map

package/dist/blocks/columns/columns.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columns.stories.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA6FvD,QAAA,MAAM,IAAI;;;;;;CAMM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}
+{"version":3,"file":"columns.stories.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgHvD,QAAA,MAAM,IAAI;;;;;;CAMM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC"}

package/dist/blocks/columns/columns.stories.js

@@ -2,11 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Activity, BarChart3, Home, Users } from 'lucide-react';
 import { useState } from 'react';
 import { Columns } from './columns';
-const rolling180 = {
+const rolling30 = {
     period: 'day',
     operator: 'between',
     selectionMode: 'rolling-next',
-    rollingDays: 180,
+    rollingDays: 30,
+};
+const rolling60 = {
+    period: 'day',
+    operator: 'between',
+    selectionMode: 'rolling-next',
+    rollingDays: 60,
 };
 const catalog = [
     {
@@ -52,7 +58,8 @@ const catalog = [
 const initialSelected = [
     { id: 'bedrooms', pinned: false },
     { id: 'bathrooms', pinned: false },
-    { id: 'occupancy', dateRange: rolling180, pinned: false },
+    { id: 'occupancy', instanceId: 'occ-30', dateRange: rolling30, pinned: false },
+    { id: 'occupancy', instanceId: 'occ-60', dateRange: rolling60, pinned: false },
     { id: 'adr', pinned: false },
 ];
 /** Pinned-first order: pinned prefix, then unpinned. */
@@ -60,7 +67,8 @@ const initialPinningLocked = [
     { id: 'bedrooms', pinned: true },
     { id: 'address', pinned: true },
     { id: 'bathrooms' },
-    { id: 'occupancy', dateRange: rolling180 },
+    { id: 'occupancy', instanceId: 'occ-30', dateRange: rolling30 },
+    { id: 'occupancy', instanceId: 'occ-60', dateRange: rolling60 },
     { id: 'adr' },
 ];
 function ColumnsPlayground() {
@@ -71,6 +79,10 @@ function ColumnsPinningLockedPlayground() {
     const [value, setValue] = useState(initialPinningLocked);
     return (_jsx("div", { className: "p-6", children: _jsx(Columns, { columns: catalog, value: value, onChange: setValue, lockPinning: true }) }));
 }
+function ColumnsEmptyPlayground() {
+    const [value, setValue] = useState([]);
+    return (_jsx("div", { className: "p-6", children: _jsx(Columns, { columns: catalog, value: value, onChange: setValue }) }));
+}
 const meta = {
     title: 'Blocks/Columns',
     tags: ['autodocs'],
@@ -85,3 +97,6 @@ export const Default = {
 export const PinningLocked = {
     render: () => _jsx(ColumnsPinningLockedPlayground, {}),
 };
+export const Empty = {
+    render: () => _jsx(ColumnsEmptyPlayground, {}),
+};