@cratis/components 2.9.1 → 3.1.0

package/dist/cjs/tokens.css

@@ -1,83 +0,0 @@
-/* Copyright (c) Cratis. All rights reserved. */
-/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
-
-/*
- * Cratis Components — CSS variable tokens.
- *
- * Every internal component references the --cratis-* variables defined here
- * instead of PrimeReact's theme variables directly. This indirection is the
- * single seam that lets the library span PrimeReact major versions: each token
- * resolves the PrimeReact v11 design token first, falling back to the legacy
- * v10 theme variable, so the same build works whether the consumer is on
- * PrimeReact 10 or 11 during the upgrade window.
- *
- *   --cratis-surface-border: var(--p-content-border-color, var(--surface-border));
- *                                  ^ PrimeReact v11 (@primeuix/themes)  ^ v10 legacy
- *
- * - Consumer on v11: the --p-* token resolves and wins.
- * - Consumer on v10: --p-* is undefined, so the legacy --surface-* value wins.
- *
- * v11 is not a rename of v10 — it is a different token vocabulary (a primitive
- * palette plus semantic content/surface/text/primary/highlight tokens). Where
- * v11 has no 1:1 equivalent for a v10 concept (surface-ground / surface-section
- * / surface-overlay / the composite focus-ring), the closest durable v11
- * semantic token is used and noted inline; consumers can always override.
- *
- * To take full control of the look and feel (with or without PrimeReact's
- * unstyled / pt mechanism, Tailwind, or your own CSS), override the relevant
- * --cratis-* tokens on :root (or any ancestor element):
- *
- *   :root {
- *       --cratis-surface-card: #1f2937;
- *       --cratis-text-color:   #f3f4f6;
- *   }
- *
- * Tokens are intentionally fallback-free at the end of the chain — if neither a
- * PrimeReact theme (v10 or v11) nor a consumer override is present, the variable
- * resolves to nothing and the affected rule no-ops. That keeps the library
- * theme-agnostic without imposing a default palette on consumers.
- */
-
-:root {
-    /* Surfaces */
-    --cratis-surface-0:        var(--p-surface-0, var(--surface-0));
-    --cratis-surface-100:      var(--p-surface-100, var(--surface-100));
-    /* v11 has no page-canvas/section token — map to the neutral content surface;
-     * separation in v11 comes from borders (content-border-color), not fills. */
-    --cratis-surface-ground:   var(--p-content-background, var(--surface-ground));
-    --cratis-surface-section:  var(--p-content-hover-background, var(--surface-section));
-    --cratis-surface-card:     var(--p-content-background, var(--surface-card));
-    /* v11 splits overlay backgrounds by type — use the modal surface as the general overlay. */
-    --cratis-surface-overlay:  var(--p-overlay-modal-background, var(--surface-overlay));
-    --cratis-surface-hover:    var(--p-content-hover-background, var(--surface-hover));
-    --cratis-surface-border:   var(--p-content-border-color, var(--surface-border));
-
-    /* Text */
-    --cratis-text-color:           var(--p-text-color, var(--text-color));
-    --cratis-text-color-secondary: var(--p-text-muted-color, var(--text-color-secondary));
-
-    /* Primary brand */
-    --cratis-primary-color:      var(--p-primary-color, var(--primary-color));
-    --cratis-primary-color-text: var(--p-primary-contrast-color, var(--primary-color-text));
-    --cratis-primary-300:        var(--p-primary-300, var(--primary-300));
-    --cratis-primary-400:        var(--p-primary-400, var(--primary-400));
-    --cratis-primary-500:        var(--p-primary-500, var(--primary-500));
-    --cratis-primary-600:        var(--p-primary-600, var(--primary-600));
-
-    /* Highlight / selection */
-    --cratis-highlight-bg:         var(--p-highlight-background, var(--highlight-bg));
-    --cratis-highlight-text-color: var(--p-highlight-color, var(--highlight-text-color));
-
-    /* Semantic accents (primitive palette) */
-    --cratis-green-500:  var(--p-green-500, var(--green-500));
-    --cratis-orange-500: var(--p-orange-500, var(--orange-500));
-    --cratis-red-500:    var(--p-red-500, var(--red-500));
-
-    /* Geometry */
-    --cratis-border-radius: var(--p-content-border-radius, var(--border-radius));
-
-    /* Effects */
-    /* v11 decomposes the focus ring; --p-focus-ring-shadow is the box-shadow form. */
-    --cratis-focus-ring: var(--p-focus-ring-shadow, var(--focus-ring));
-    --cratis-maskbg:     var(--p-mask-background, var(--maskbg));
-}

package/dist/cjs/types/TypeFormat.js

@@ -1,22 +0,0 @@
-'use strict';
-
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-const DEFAULT_TYPE_FORMATS = [
-    { jsonType: 'string', format: '' },
-    { jsonType: 'string', format: 'guid' },
-    { jsonType: 'string', format: 'date-time' },
-    { jsonType: 'string', format: 'date' },
-    { jsonType: 'string', format: 'time' },
-    { jsonType: 'integer', format: '' },
-    { jsonType: 'integer', format: 'int16' },
-    { jsonType: 'integer', format: 'int32' },
-    { jsonType: 'integer', format: 'int64' },
-    { jsonType: 'number', format: '' },
-    { jsonType: 'number', format: 'float' },
-    { jsonType: 'number', format: 'double' },
-    { jsonType: 'boolean', format: '' },
-];
-
-exports.DEFAULT_TYPE_FORMATS = DEFAULT_TYPE_FORMATS;
-//# sourceMappingURL=TypeFormat.js.map

package/dist/cjs/types/TypeFormat.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TypeFormat.js","sources":["../../../types/TypeFormat.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;AACA;AAOO,MAAM,oBAAoB,GAAiB;AAC9C,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;AAClC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;AACtC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE;AAC3C,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;AACtC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;AACtC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;AACnC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE;AACxC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE;AACxC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE;AACxC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;AAClC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE;AACvC,IAAA,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE;AACxC,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE;;;;;"}

package/dist/cjs/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../types/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAA;AACA;;;;"}

package/dist/cjs/useOverlayZIndex.js

@@ -1,65 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-/**
- * Hook that keeps a PrimeReact overlay panel at or above a minimum z-index.
- *
- * PrimeReact computes overlay z-indexes relative to whatever is currently open — in an application that
- * configures the PrimeReact z-index tiers this already stacks panels above dialogs correctly. This hook is
- * the safety net for applications that do not: when PrimeReact's computed value is *below* the floor, the
- * panel is raised to it.
- *
- * It is strictly raise-only. It must never lower a value PrimeReact computed, for two reasons: the computed
- * value is what stacks the panel above an open dialog's mask, and PrimeReact's `ZIndexUtils.clear()`
- * un-registers an overlay by reading its inline z-index back — overwriting it with a different number makes
- * that lookup miss, leaks the registry entry, and every dialog opened afterwards escalates its mask's
- * z-index further above the panels until dropdowns render behind the very dialogs that host them.
- *
- * @param className - The CSS class name to target (e.g., 'location-autocomplete-overlay')
- * @param minimumZIndex - The floor the panel must not sit below (default: 10000)
- */
-function useOverlayZIndex(className, minimumZIndex = 10000) {
-    React.useEffect(() => {
-        const observer = new MutationObserver(() => {
-            const panel = document.querySelector(`.${className}`);
-            if (!(panel instanceof HTMLElement))
-                return;
-            const raised = raisedOverlayZIndex(panel.style.zIndex, minimumZIndex);
-            if (raised !== undefined) {
-                panel.style.zIndex = raised;
-            }
-        });
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['style']
-        });
-        return () => observer.disconnect();
-    }, [className, minimumZIndex]);
-}
-/**
- * Decides whether an overlay panel's inline z-index must be raised to the floor.
- *
- * Raise-only by design: a value PrimeReact computed at or above the floor is left untouched, both because
- * it is what stacks the panel above an open dialog and because PrimeReact reads it back to un-register the
- * overlay when it closes.
- *
- * @param currentZIndex - The panel's current inline z-index value, possibly empty.
- * @param minimumZIndex - The floor the panel must not sit below.
- * @returns The value to assign, or undefined when the current value must be left alone.
- */
-function raisedOverlayZIndex(currentZIndex, minimumZIndex) {
-    const current = Number.parseInt(currentZIndex, 10);
-    if (Number.isNaN(current) || current < minimumZIndex) {
-        return minimumZIndex.toString();
-    }
-    return undefined;
-}
-
-exports.raisedOverlayZIndex = raisedOverlayZIndex;
-exports.useOverlayZIndex = useOverlayZIndex;
-//# sourceMappingURL=useOverlayZIndex.js.map

package/dist/cjs/useOverlayZIndex.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOverlayZIndex.js","sources":["../../useOverlayZIndex.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;;;;;;;;;AAgBG;SACa,gBAAgB,CAAC,SAAiB,EAAE,gBAAwB,KAAK,EAAA;IAC7EA,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAC;AACrD,YAAA,IAAI,EAAE,KAAK,YAAY,WAAW,CAAC;gBAAE;AAErC,YAAA,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;AACrE,YAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AACtB,gBAAA,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;YAC/B;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO;AAC5B,SAAA,CAAC;AAEF,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAClC;AAEA;;;;;;;;;;AAUG;AACG,SAAU,mBAAmB,CAAC,aAAqB,EAAE,aAAqB,EAAA;IAC5E,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;IAClD,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,OAAO,GAAG,aAAa,EAAE;AAClD,QAAA,OAAO,aAAa,CAAC,QAAQ,EAAE;IACnC;AAEA,IAAA,OAAO,SAAS;AACpB;;;;;"}

package/dist/esm/CommandDialog/CommandStepper.css

@@ -1,24 +0,0 @@
-/* Copyright (c) Cratis. All rights reserved. */
-/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
-
-.p-stepper [data-pc-section="header"][data-p-active="false"] {
-    opacity: 0.5;
-}
-
-/* Make stepper and its panels fill available width */
-.cratis-command-stepper {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-}
-
-.cratis-command-stepper .p-stepper {
-    width: 100%;
-}
-
-.cratis-command-stepper .p-stepperpanel-content {
-    width: 100%;
-    box-sizing: border-box;
-}
-

package/dist/esm/Common/FormElement.css

@@ -1,26 +0,0 @@
-/* Copyright (c) Cratis. All rights reserved. */
-/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
-
-.cratis-form-element {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: stretch;
-}
-
-.cratis-form-element__addon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0.75rem;
-    color: var(--cratis-text-color-secondary);
-    background: var(--cratis-surface-100);
-    border: 1px solid var(--cratis-surface-border);
-    border-right: 0;
-    border-top-left-radius: var(--cratis-border-radius);
-    border-bottom-left-radius: var(--cratis-border-radius);
-}
-
-.cratis-form-element > *:not(.cratis-form-element__addon) {
-    flex: 1 1 auto;
-    min-width: 0;
-}

package/dist/esm/Common/Tooltip.css

@@ -1,10 +0,0 @@
-/* Copyright (c) Cratis. All rights reserved. */
-/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
-
-/* ── Tooltip bubble ──────────────────────────────────────────────────────── */
-.tooltip-bubble {
-    background: var(--cratis-surface-100);
-    color: var(--cratis-text-color);
-    border: 1px solid var(--cratis-surface-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}

package/dist/esm/Filter/FilterPanel.css

@@ -1,459 +0,0 @@
-/* -----------------------------------------------------------------------
- * 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-group-search {
-  padding: 0 0 0.5rem 0;
-}
-
-.pv-filter-group-search input {
-  width: 100%;
-  padding: 0.4rem 0.6rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--cratis-surface-border);
-  background: var(--cratis-surface-ground);
-  color: inherit;
-  font-size: 0.85rem;
-}
-
-.pv-filter-group-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-clear-header {
-  appearance: none;
-  border: none;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  background: var(--cratis-highlight-bg);
-  color: var(--cratis-text-color);
-  font-size: 1.2rem;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background 160ms ease, transform 120ms ease;
-  padding: 0;
-}
-
-.pv-filter-clear-header:hover {
-  background: var(--cratis-surface-hover);
-  transform: scale(1.1);
-}
-
-.pv-filter-clear-header:active {
-  transform: scale(0.95);
-}
-
-.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;
-  }
-}