@cratis/components 2.0.1 → 2.1.0

package/dist/esm/Filter/FilterPanel.css

@@ -0,0 +1,412 @@
+/* -----------------------------------------------------------------------
+ * Standalone FilterPanel styles.
+ *
+ * These styles are shared by the standalone FilterPanel component and the
+ * PivotViewer which embeds it. All class names use the .pv-filter-* prefix
+ * so they can coexist with PivotViewer's other .pv-* rules.
+ * ----------------------------------------------------------------------- */
+
+.pv-filter-panel {
+  position: fixed;
+  width: min(280px, calc(100% - 2rem));
+  max-height: calc(100vh - 6.5rem);
+  background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
+  border: 1px solid var(--cratis-surface-border);
+  border-radius: 1rem;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(14px);
+  overflow: hidden;
+  z-index: 12;
+  display: flex;
+  flex-direction: column;
+}
+
+.pv-filter-panel.dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.pv-filter-panel.minimized {
+  max-height: none;
+}
+
+.pv-filter-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  cursor: grab;
+  background: var(--cratis-surface-section);
+  border-bottom: 1px solid var(--cratis-surface-border);
+  flex-shrink: 0;
+}
+
+.pv-filter-panel.dragging .pv-filter-panel-header {
+  cursor: grabbing;
+}
+
+.pv-filter-panel-header h2 {
+  margin: 0;
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--cratis-text-color);
+  flex: 1;
+  pointer-events: none;
+}
+
+.pv-minimize-btn,
+.pv-close-btn {
+  appearance: none;
+  border: none;
+  border-radius: 0.4rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cratis-highlight-bg);
+  color: var(--cratis-text-color);
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.pv-minimize-btn:hover,
+.pv-close-btn:hover {
+  background: var(--cratis-surface-hover);
+}
+
+.pv-close-btn {
+  font-size: 1.2rem;
+}
+
+.pv-filter-panel-content {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  padding: 0 1.25rem;
+  transition: max-height 150ms ease-out, opacity 100ms ease-out, padding 150ms ease-out;
+}
+
+.pv-filter-panel-content.expanded {
+  overflow-y: auto;
+  flex: 1;
+  max-height: 600px;
+  opacity: 1;
+  padding: 1rem 1.25rem 1.25rem;
+}
+
+.pv-search {
+  padding-bottom: 1rem;
+}
+
+.pv-search input {
+  width: 100%;
+  padding: 0.65rem 0.85rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--cratis-surface-border);
+  background: var(--cratis-surface-ground);
+  color: inherit;
+  font-size: 0.95rem;
+  box-shadow: inset 0 1px 0 var(--cratis-surface-border);
+}
+
+.pv-search input:focus {
+  outline: none;
+  border-color: var(--cratis-primary-color);
+  box-shadow: var(--cratis-focus-ring);
+}
+
+.pv-filter-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.pv-filter {
+  background: var(--cratis-surface-overlay);
+  border: 1px solid var(--cratis-surface-border);
+  border-radius: 0.85rem;
+  padding: 0.75rem 0.85rem;
+  transition: border-color 180ms ease, box-shadow 180ms ease;
+}
+
+.pv-filter.expanded {
+  border-color: var(--cratis-primary-color);
+  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.3);
+}
+
+.pv-filter-trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  background: none;
+  border: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.pv-filter-label {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.pv-filter-trigger-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.pv-filter-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 999px;
+  background: var(--cratis-highlight-bg);
+  color: var(--cratis-text-color);
+  font-size: 0.7rem;
+}
+
+.pv-filter-chevron {
+  width: 0.65rem;
+  height: 0.65rem;
+  border-right: 2px solid var(--cratis-text-color);
+  border-bottom: 2px solid var(--cratis-text-color);
+  transform: rotate(45deg);
+  transition: transform 180ms ease;
+}
+
+.pv-filter.expanded .pv-filter-chevron {
+  transform: rotate(225deg);
+}
+
+.pv-filter-content {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 1px solid transparent;
+  transition: max-height 120ms ease-out, opacity 80ms ease-out, margin-top 120ms ease-out, padding-top 120ms ease-out, border-color 120ms ease-out;
+}
+
+.pv-filter-content.expanded {
+  max-height: 350px;
+  opacity: 1;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top-color: var(--cratis-surface-border);
+  overflow-y: auto;
+}
+
+.pv-filter-content ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.45rem;
+}
+
+.pv-filter-content li label {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 0.6rem;
+  align-items: center;
+  padding: 0.45rem 0.5rem;
+  border-radius: 0.55rem;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease;
+}
+
+.pv-filter-content li label:hover {
+  background: var(--cratis-surface-hover);
+}
+
+.pv-filter-content input[type='checkbox'],
+.pv-filter-content input[type='radio'] {
+  accent-color: var(--cratis-primary-color);
+}
+
+.pv-filter-content li label span {
+  font-size: 0.85rem;
+}
+
+.pv-filter-clear {
+  margin-top: 0.75rem;
+  appearance: none;
+  border: none;
+  border-radius: 0.55rem;
+  padding: 0.4rem 0.75rem;
+  background: var(--cratis-highlight-bg);
+  color: var(--cratis-text-color);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+}
+
+.pv-option-count {
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+  color: var(--cratis-text-color-secondary);
+  font-size: 0.75rem;
+}
+
+/* Filter Dropdown (anchor-positioned panel) */
+.pv-filter-dropdown {
+  position: fixed;
+  width: min(320px, calc(100vw - 2rem));
+  max-height: calc(100vh - 8rem);
+  background: linear-gradient(180deg, var(--cratis-surface-card), var(--cratis-surface-ground));
+  border: 1px solid var(--cratis-surface-border);
+  border-radius: 0.85rem;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(16px);
+  overflow: hidden;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  will-change: opacity, transform;
+  contain: layout;
+}
+
+.pv-filter-dropdown-content {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Range Histogram Filter */
+.pv-range-histogram {
+  padding: 0.5rem 0;
+}
+
+.pv-histogram-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 80px;
+  padding: 0 2px;
+  margin-bottom: 0.5rem;
+}
+
+.pv-histogram-bar {
+  flex: 1;
+  min-width: 8px;
+  background: var(--cratis-highlight-bg);
+  border: none;
+  border-radius: 2px 2px 0 0;
+  cursor: pointer;
+  transition: background 160ms ease, transform 120ms ease;
+  padding: 0;
+}
+
+.pv-histogram-bar:hover {
+  background: var(--cratis-surface-hover);
+  transform: scaleY(1.02);
+}
+
+.pv-histogram-bar.in-range {
+  background: var(--cratis-primary-color);
+}
+
+.pv-histogram-bar.partial {
+  background: var(--cratis-highlight-bg);
+}
+
+.pv-range-slider {
+  position: relative;
+  height: 24px;
+  margin: 0.5rem 0;
+}
+
+.pv-range-track {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--cratis-surface-border);
+  border-radius: 2px;
+  transform: translateY(-50%);
+}
+
+.pv-range-selection {
+  position: absolute;
+  top: 50%;
+  height: 4px;
+  background: var(--cratis-primary-color);
+  border-radius: 2px;
+  transform: translateY(-50%);
+  cursor: grab;
+}
+
+.pv-range-selection:active {
+  cursor: grabbing;
+}
+
+.pv-range-handle {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  background: var(--cratis-primary-color);
+  border: 2px solid var(--cratis-text-color);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  cursor: ew-resize;
+  transition: transform 120ms ease, box-shadow 120ms ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.pv-range-handle:hover {
+  transform: translate(-50%, -50%) scale(1.15);
+  box-shadow: 0 4px 12px var(--cratis-primary-color);
+}
+
+.pv-range-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--cratis-text-color-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.pv-range-clear {
+  margin-top: 0.75rem;
+  appearance: none;
+  border: none;
+  border-radius: 0.55rem;
+  padding: 0.4rem 0.75rem;
+  background: var(--cratis-highlight-bg);
+  color: var(--cratis-text-color);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  width: 100%;
+}
+
+.pv-range-clear:hover {
+  background: var(--cratis-surface-hover);
+}
+
+@media (max-width: 900px) {
+  .pv-filter-panel {
+    width: calc(100% - 2.5rem);
+    left: 1.25rem;
+    right: 1.25rem;
+  }
+}

package/dist/esm/Filter/FilterPanel.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { FilterDefinition, FilterValues, RangeValues, CustomFilterValues } from './types';
+import './FilterPanel.css';
+export interface FilterPanelProps {
+    isOpen: boolean;
+    filters: FilterDefinition[];
+    filterValues: FilterValues;
+    rangeValues: RangeValues;
+    customValues?: CustomFilterValues;
+    search?: string;
+    searchPlaceholder?: string;
+    expandedFilterKey?: string | null;
+    anchorRef: React.RefObject<HTMLButtonElement | null>;
+    onClose: () => void;
+    onSearchChange?: (value: string) => void;
+    onFilterToggle: (filterKey: string, optionKey: string, multi: boolean) => void;
+    onFilterClear: (filterKey: string) => void;
+    onRangeChange: (filterKey: string, range: [number, number] | null) => void;
+    onExpandedFilterChange: (key: string | null) => void;
+    onCustomValueChange?: (filterKey: string, value: unknown) => void;
+    children?: ReactNode;
+}
+export declare function FilterPanel({ isOpen, filters, filterValues, rangeValues, customValues, search, searchPlaceholder, expandedFilterKey, anchorRef, onClose, onSearchChange, onFilterToggle, onFilterClear, onRangeChange, onExpandedFilterChange, onCustomValueChange, children, }: FilterPanelProps): import("react").ReactPortal;
+//# sourceMappingURL=FilterPanel.d.ts.map

package/dist/esm/Filter/FilterPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../Filter/FilterPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EACV,gBAAgB,EAEhB,YAAY,EACZ,WAAW,EACX,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAGjB,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAE/B,MAAM,EAAE,OAAO,CAAC;IAEhB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAE5B,YAAY,EAAE,YAAY,CAAC;IAE3B,WAAW,EAAE,WAAW,CAAC;IAEzB,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAElC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAElC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAErD,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/E,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAE3E,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAErD,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAYlE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAyBD,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,MAAM,EACN,iBAA6B,EAC7B,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,cAAc,EACd,cAAc,EACd,aAAa,EACb,aAAa,EACb,sBAAsB,EACtB,mBAAmB,EACnB,QAAQ,GACT,EAAE,gBAAgB,+BAkKlB"}

package/dist/esm/Filter/FilterPanel.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, Children, isValidElement } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import { FilterEditor } from './FilterEditor.js';
+import { RangeHistogramFilter } from './RangeHistogramFilter.js';
+import './FilterPanel.css';
+
+/** Build a map of filterKey → render function from any <FilterEditor> children. */
+function buildEditorMap(children) {
+    const map = {};
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === FilterEditor) {
+            const { filterKey, children: renderFn } = child.props;
+            if (filterKey && typeof renderFn === 'function') {
+                map[filterKey] = renderFn;
+            }
+        }
+    });
+    return map;
+}
+function renderOptionCount(count) {
+    return typeof count === 'number' ? count : '';
+}
+function FilterPanel({ isOpen, filters, filterValues, rangeValues, customValues, search, searchPlaceholder = 'Search…', expandedFilterKey, anchorRef, onClose, onSearchChange, onFilterToggle, onFilterClear, onRangeChange, onExpandedFilterChange, onCustomValueChange, children, }) {
+    const panelRef = useRef(null);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    const editorMap = buildEditorMap(children);
+    // Calculate position when opening
+    useEffect(() => {
+        if (isOpen && anchorRef.current) {
+            const rect = anchorRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + 8,
+                left: rect.left,
+            });
+        }
+    }, [isOpen, anchorRef]);
+    // Handle click outside to close
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            const panel = panelRef.current;
+            const anchor = anchorRef.current;
+            if (panel && !panel.contains(target) && anchor && !anchor.contains(target)) {
+                onClose();
+            }
+        };
+        // Use capture phase to ensure we catch the event before any other handlers.
+        // Use timeout to avoid closing immediately when clicking the button to open.
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside, true);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside, true);
+        };
+    }, [isOpen, anchorRef, onClose]);
+    return createPortal(jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.aside, { ref: panelRef, className: "pv-filter-dropdown", style: {
+                position: 'fixed',
+                left: position.left,
+                top: position.top,
+            }, initial: { opacity: 0, y: -8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, transition: { duration: 0.15 }, children: jsxs("div", { className: "pv-filter-dropdown-content", children: [onSearchChange && (jsx("div", { className: "pv-search", children: jsx("input", { type: "search", placeholder: searchPlaceholder, value: search ?? '', onChange: (event) => onSearchChange(event.target.value) }) })), jsx("div", { className: "pv-filter-groups", children: filters.map((filter) => {
+                            const selections = filterValues[filter.key] ?? new Set();
+                            const rangeSelection = rangeValues[filter.key];
+                            const customValue = customValues?.[filter.key];
+                            const isExpanded = expandedFilterKey === filter.key;
+                            const isNumeric = filter.type === 'number';
+                            const editorRender = editorMap[filter.key];
+                            const isCustom = filter.type === 'custom' || editorRender !== undefined;
+                            return (jsxs("div", { className: `pv-filter ${isExpanded ? 'expanded' : ''}`, children: [jsxs("button", { type: "button", className: "pv-filter-trigger", onClick: () => onExpandedFilterChange(isExpanded ? null : filter.key), children: [jsx("span", { className: "pv-filter-label", children: filter.label }), jsxs("span", { className: "pv-filter-trigger-meta", children: [!isNumeric && !isCustom && selections.size > 0 && (jsx("span", { className: "pv-filter-count", children: selections.size })), isNumeric && rangeSelection && (jsx("span", { className: "pv-filter-count", children: "Range" })), isCustom && customValue !== undefined && customValue !== null && (jsx("span", { className: "pv-filter-count", children: "\u2022" })), jsx("span", { className: "pv-filter-chevron" })] })] }), jsx("div", { className: `pv-filter-content ${isExpanded ? 'expanded' : ''}`, children: isCustom && editorRender ? (editorRender({
+                                            value: customValue,
+                                            onChange: (value) => onCustomValueChange?.(filter.key, value),
+                                        })) : isNumeric && filter.numericRange ? (jsx(RangeHistogramFilter, { values: filter.numericRange.values, min: filter.numericRange.min, max: filter.numericRange.max, buckets: filter.buckets ?? 20, selectedRange: rangeSelection ?? null, onChange: (range) => onRangeChange(filter.key, range) })) : (jsxs(Fragment, { children: [jsx("ul", { children: (filter.options ?? []).map((option) => {
+                                                        const optionKey = option.key;
+                                                        const checked = selections.has(optionKey);
+                                                        return (jsx("li", { children: jsxs("label", { children: [jsx("input", { type: filter.multi ? 'checkbox' : 'radio', name: `filter-${filter.key}`, checked: checked, onChange: () => onFilterToggle(filter.key, optionKey, filter.multi ?? false) }), jsx("span", { children: option.label }), jsx("span", { className: "pv-option-count", children: renderOptionCount(option.count) })] }) }, option.key));
+                                                    }) }), selections.size > 0 && (jsx("button", { type: "button", className: "pv-filter-clear", onClick: () => onFilterClear(filter.key), children: "Clear" }))] })) })] }, filter.key));
+                        }) })] }) })) }), document.body);
+}
+
+export { FilterPanel };
+//# sourceMappingURL=FilterPanel.js.map

package/dist/esm/Filter/FilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.js","sources":["../../../Filter/FilterPanel.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/Filter/RangeHistogramFilter.d.ts

@@ -0,0 +1,11 @@
+import type { FilterValue } from './types';
+export interface RangeHistogramFilterProps {
+    values: FilterValue[];
+    min: number;
+    max: number;
+    buckets?: number;
+    selectedRange: [number, number] | null;
+    onChange: (range: [number, number] | null) => void;
+}
+export declare function RangeHistogramFilter({ values, min, max, buckets, selectedRange, onChange, }: RangeHistogramFilterProps): import("react").JSX.Element;
+//# sourceMappingURL=RangeHistogramFilter.d.ts.map

package/dist/esm/Filter/RangeHistogramFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeHistogramFilter.d.ts","sourceRoot":"","sources":["../../../Filter/RangeHistogramFilter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD;AASD,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,GAAG,EACH,GAAG,EACH,OAAY,EACZ,aAAa,EACb,QAAQ,GACT,EAAE,yBAAyB,+BA8L3B"}

package/dist/esm/Filter/RangeHistogramFilter.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+
+function RangeHistogramFilter({ values, min, max, buckets = 20, selectedRange, onChange, }) {
+    const containerRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(null);
+    const [dragStart, setDragStart] = useState(null);
+    const numericValues = useMemo(() => {
+        return values
+            .map((v) => {
+            if (typeof v === 'number')
+                return v;
+            if (v instanceof Date)
+                return v.getTime();
+            const parsed = Number(v);
+            return Number.isNaN(parsed) ? null : parsed;
+        })
+            .filter((v) => v !== null);
+    }, [values]);
+    const histogram = useMemo(() => {
+        const range = max - min;
+        if (range <= 0 || numericValues.length === 0) {
+            return [];
+        }
+        const bucketSize = range / buckets;
+        const bucketCounts = Array(buckets).fill(0);
+        numericValues.forEach((value) => {
+            const bucketIndex = Math.min(Math.floor((value - min) / bucketSize), buckets - 1);
+            if (bucketIndex >= 0 && bucketIndex < buckets) {
+                bucketCounts[bucketIndex]++;
+            }
+        });
+        const maxCount = Math.max(...bucketCounts, 1);
+        return bucketCounts.map((count, i) => ({
+            start: min + i * bucketSize,
+            end: min + (i + 1) * bucketSize,
+            count,
+            maxCount,
+        }));
+    }, [numericValues, min, max, buckets]);
+    const currentRange = selectedRange ?? [min, max];
+    const getPositionFromValue = useCallback((value) => {
+        const range = max - min;
+        if (range <= 0)
+            return 0;
+        return ((value - min) / range) * 100;
+    }, [min, max]);
+    const handleMouseDown = (e, handle) => {
+        e.preventDefault?.();
+        setIsDragging(handle);
+        setDragStart({ x: e.clientX, range: [...currentRange] });
+    };
+    useEffect(() => {
+        if (!isDragging || !dragStart || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        const rect = container.getBoundingClientRect();
+        const range = max - min;
+        const handleMouseMove = (e) => {
+            const deltaX = e.clientX - dragStart.x;
+            const deltaPercent = (deltaX / rect.width) * 100;
+            const deltaValue = (deltaPercent / 100) * range;
+            let newRange = [...dragStart.range];
+            if (isDragging === 'left') {
+                newRange[0] = Math.max(min, Math.min(dragStart.range[0] + deltaValue, newRange[1] - range * 0.01));
+            }
+            else if (isDragging === 'right') {
+                newRange[1] = Math.min(max, Math.max(dragStart.range[1] + deltaValue, newRange[0] + range * 0.01));
+            }
+            else if (isDragging === 'range') {
+                const rangeWidth = dragStart.range[1] - dragStart.range[0];
+                let newStart = dragStart.range[0] + deltaValue;
+                let newEnd = dragStart.range[1] + deltaValue;
+                if (newStart < min) {
+                    newStart = min;
+                    newEnd = min + rangeWidth;
+                }
+                if (newEnd > max) {
+                    newEnd = max;
+                    newStart = max - rangeWidth;
+                }
+                newRange = [newStart, newEnd];
+            }
+            onChange(newRange);
+        };
+        const handleMouseUp = () => {
+            setIsDragging(null);
+            setDragStart(null);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, dragStart, min, max, onChange]);
+    const handleBarClick = (bucket) => {
+        onChange([bucket.start, bucket.end]);
+    };
+    const handleClear = () => {
+        onChange(null);
+    };
+    const leftPos = getPositionFromValue(currentRange[0]);
+    const rightPos = getPositionFromValue(currentRange[1]);
+    const formatValue = (value) => {
+        if (Number.isInteger(value))
+            return value.toString();
+        return value.toFixed(1);
+    };
+    return (jsxs("div", { className: "pv-range-histogram", ref: containerRef, children: [jsx("div", { className: "pv-histogram-bars", children: histogram.map((bucket, i) => {
+                    const heightPercent = (bucket.count / bucket.maxCount) * 100;
+                    const isInRange = bucket.start >= currentRange[0] && bucket.end <= currentRange[1];
+                    const isPartiallyInRange = bucket.end > currentRange[0] && bucket.start < currentRange[1];
+                    return (jsx("button", { className: `pv-histogram-bar ${isInRange ? 'in-range' : ''} ${isPartiallyInRange && !isInRange ? 'partial' : ''}`, style: { height: `${heightPercent}%` }, onClick: () => handleBarClick(bucket), title: `${formatValue(bucket.start)} - ${formatValue(bucket.end)}: ${bucket.count} items`, type: "button" }, i));
+                }) }), jsxs("div", { className: "pv-range-slider", children: [jsx("div", { className: "pv-range-track" }), jsx("div", { className: "pv-range-selection", style: {
+                            left: `${leftPos}%`,
+                            width: `${rightPos - leftPos}%`,
+                        }, onMouseDown: (e) => handleMouseDown(e, 'range') }), jsx("div", { className: "pv-range-handle pv-range-handle-left", style: { left: `${leftPos}%` }, onMouseDown: (e) => handleMouseDown(e, 'left') }), jsx("div", { className: "pv-range-handle pv-range-handle-right", style: { left: `${rightPos}%` }, onMouseDown: (e) => handleMouseDown(e, 'right') })] }), jsxs("div", { className: "pv-range-labels", children: [jsx("span", { className: "pv-range-value", children: formatValue(currentRange[0]) }), jsx("span", { className: "pv-range-value", children: formatValue(currentRange[1]) })] }), selectedRange && (jsx("button", { type: "button", className: "pv-range-clear", onClick: handleClear, children: "Clear Range" }))] }));
+}
+
+export { RangeHistogramFilter };
+//# sourceMappingURL=RangeHistogramFilter.js.map