4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T566e,"use client" import * as React from "react" import { Check, Minus, Plus, X } from "lucide-react" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { describeActiveFilters, formatRangeBound, getRange, getToggle, getValues, removeFilter, setRange, toggleFilterValue, type ActiveFilter, type FilterFacet, type FilterState, type ListFacet, type RangeFacet, type SwatchFacet, type ToggleFacet, } from "@/lib/filter-params" import { cn } from "@/lib/utils" /* ─── context ────────────────────────────────────────────────────────────── * Compound component: owns the state and renders its own * provider, so nothing has to be mounted above it. Every part reads that * state through useFilterPanel(), which throws outside a panel instead of * failing silently with undefined values. */ export interface FilterPanelContextValue { facets: FilterFacet[] value: FilterState setValue: (next: FilterState) => void /** The facet with this id, if the panel has one. */ getFacet: (id: string) => FilterFacet | undefined /** Human labels for everything that is on, in facet order. */ active: ActiveFilter[] currency: string locale?: string loading?: boolean title: string titleId: string /** Focus lands here when the control that had it disappears. */ rootRef: React.RefObject } const FilterPanelContext = React.createContext(null) export function useFilterPanel() { const context = React.useContext(FilterPanelContext) if (!context) { throw new Error("useFilterPanel must be used within .") } return context } const NO_FILTERS: FilterState = {} /** Controlled when `value` is passed, uncontrolled from `defaultValue` otherwise. */ function useControllableState( value: T | undefined, defaultValue: T, onChange?: (next: T) => void ) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const controlled = value !== undefined const set = React.useCallback( (next: T) => { if (!controlled) setUncontrolled(next) onChange?.(next) }, [controlled, onChange] ) return [controlled ? value : uncontrolled, set] as const } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface FilterPanelProps extends Omit, "defaultValue" | "onChange"> { facets: FilterFacet[] /** Usually straight from `useFilterParams`, so the state lives in the URL. */ value?: FilterState defaultValue?: FilterState onValueChange?: (next: FilterState) => void /** ISO 4217 code for `format: "currency"` range facets. */ currency?: string locale?: string /** Counts are stale while results load, so they render as placeholders. */ loading?: boolean /** Default layout only: drop the title row, e.g. inside a sheet that has one. */ hideHeader?: boolean title?: string /** * Compose your own layout from FilterPanelHeader, FilterPanelChips and * FilterPanelFacet — reorder, omit, or put your own content between them. * Leave empty for the default: header, chips, then every facet in order. */ children?: React.ReactNode } export function FilterPanel({ facets, value: valueProp, defaultValue = NO_FILTERS, onValueChange, currency = "USD", locale, loading, hideHeader, title = "Filters", className, children, ...props }: FilterPanelProps) { const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange) const titleId = React.useId() const rootRef = React.useRef(null) const context = React.useMemo( () => ({ facets, value, setValue, getFacet: (id) => facets.find((facet) => facet.id === id), active: describeActiveFilters(value, facets, { currency, locale }), currency, locale, loading, title, titleId, rootRef, }), [facets, value, setValue, currency, locale, loading, title, titleId] ) return (

{children ?? ( <> {hideHeader ? null : } {facets.length === 0 ? (

No filters for this collection.

) : ( facets.map((facet) =>

) } /* ─── parts ────────────────────────────────────────────────────────────── */ export function FilterPanelHeader({ className, ...props }: React.HTMLAttributes) { const { active, setValue, title, titleId, rootRef } = useFilterPanel() return (

{title} {active.length > 0 && ( {active.length} )}

{active.length > 0 && ( )}

) } export function FilterPanelChips({ className, ...props }: React.HTMLAttributes) { const { active, value, setValue, rootRef } = useFilterPanel() // Removing a chip deletes the button that had focus. Put focus on the chip // that slid into its place — or the panel itself — instead of . const chips = React.useRef<(HTMLButtonElement | null)[]>([]) const refocus = React.useRef(null) React.useEffect(() => { if (refocus.current === null) return const index = Math.min(refocus.current, active.length - 1) refocus.current = null ;(chips.current[index] ?? rootRef.current)?.focus() }, [active.length, rootRef]) if (active.length === 0) return null return (

) } export interface FilterPanelFacetProps extends React.HTMLAttributes { /** The facet's id — the same string that keys it in the URL. */ id: string /** Collapsible facets start open unless this is false. */ defaultOpen?: boolean } export function FilterPanelFacet({ id, defaultOpen = true, className, ...props }: FilterPanelFacetProps) { const { getFacet } = useFilterPanel() const facet = getFacet(id) // An id with no facet renders nothing, so a server that drops an empty // facet from the list doesn't break a hand-written layout. if (!facet) return null if (facet.type === "toggle") { return } return ( ) } /* ─── internals ────────────────────────────────────────────────────────── */ function FacetSection({ facet, defaultOpen, className, ...props }: React.HTMLAttributes & { facet: ListFacet | SwatchFacet | RangeFacet defaultOpen: boolean }) { const { value } = useFilterPanel() const [open, setOpen] = React.useState(defaultOpen) const id = React.useId() if (facet.type !== "range" && facet.options.length === 0) return null const selected = facet.type === "range" ? getRange(value, facet.id) ? 1 : 0 : getValues(value, facet.id).length return ( // Groups are separated by a top rule, not boxed: the panel reads as one // ruled column, the way a printed index does.

) } function Count({ count }: { count?: number }) { const { loading, locale } = useFilterPanel() if (loading) { return ( ) } if (count === undefined) return null // Tabular figures, right-aligned: a column of counts that doesn't line up // is the first thing that makes a filter panel look unfinished. return ( {new Intl.NumberFormat(locale).format(count)} ) } function ListOptions({ facet }: { facet: ListFacet }) { const { value, setValue } = useFilterPanel() const [expanded, setExpanded] = React.useState(false) const selected = getValues(value, facet.id) const limit = facet.limit ?? 6 // Selected options stay visible when the list collapses, or a shopper // loses sight of a filter that is still applied. const collapsed = facet.options.filter( (option, index) => index < limit || selected.includes(option.value) ) const hidden = facet.options.length - collapsed.length const visible = expanded ? facet.options : collapsed return ( <>

setValue(toggleFilterValue(value, facet.id, option.value)) } /> {option.label}

{(hidden > 0 || expanded) && facet.options.length > limit && ( )} ) } function SwatchOptions({ facet }: { facet: SwatchFacet }) { const { value, setValue } = useFilterPanel() const selected = getValues(value, facet.id) return (

{/* The name is always printed and the selected state carries a check and a heavier border — colour is never the only signal. */}

) } function useAffix(facet: RangeFacet, currency?: string, locale?: string) { return React.useMemo(() => { if (facet.format !== "currency") { return facet.unit ? { text: facet.unit, suffix: true } : null } const parts = new Intl.NumberFormat(locale, { style: "currency", currency }).formatToParts(1) const symbol = parts.findIndex((p) => p.type === "currency") const number = parts.findIndex((p) => p.type === "integer") return symbol === -1 ? null : { text: parts[symbol].value, suffix: symbol > number } }, [facet.format, facet.unit, currency, locale]) } function RangeControl({ facet }: { facet: RangeFacet }) { const { value, setValue, currency, locale } = useFilterPanel() const id = React.useId() const committed = getRange(value, facet.id) const lo = committed?.min ?? facet.min const hi = committed?.max ?? facet.max const key = `${lo}:${hi}` // A draft remembers which committed value it started from. When the URL // catches up (instantly, or after a router round-trip) the key changes and // the stale draft is simply ignored — no effect needed to reset it, and no // flash back to the old value while a server fetch is in flight. const [draft, setDraft] = React.useState<{ values: [number, number]; key: string } | null>(null) const [text, setText] = React.useState<{ min?: string; max?: string; key: string } | null>(null) const pending = React.useRef<[number, number] | null>(null) const [shownLo, shownHi] = draft?.key === key ? draft.values : [lo, hi] const typed = text?.key === key ? text : null const affix = useAffix(facet, currency, locale) const format = (n: number) => formatRangeBound(facet, n, { currency, locale }) const commit = (values: [number, number]) => { const clamp = (n: number) => Math.min(facet.max, Math.max(facet.min, n)) const [a, b] = values.map(clamp) const next: [number, number] = a <= b ? [a, b] : [b, a] setDraft({ values: next, key }) if (next[0] !== lo || next[1] !== hi) { setValue(setRange(value, facet, { min: next[0], max: next[1] })) } } // Commit when the thumb is released, not on every pixel of the drag: each // commit is a history entry and, on most stores, a request. const commitPending = () => { const values = pending.current pending.current = null if (values) commit(values) } const commitTyped = () => { if (!typed) return // Untouched field: keep what it showed. Emptied field: lift that bound. // Garbage: ignore the edit rather than guess. const parse = (raw: string | undefined, shown: number, edge: number) => { if (raw === undefined) return shown if (raw.trim() === "") return edge const n = Number(raw.replace(/[^\d.-]/g, "")) return Number.isFinite(n) ? n : shown } setText(null) commit([parse(typed.min, shownLo, facet.min), parse(typed.max, shownHi, facet.max)]) } const field = (bound: "min" | "max") => ( {bound === "min" ? "Minimum" : "Maximum"} {facet.label.toLowerCase()} {affix && ( {affix.text} )} setText({ ...(typed ?? { key }), [bound]: event.target.value }) } onBlur={commitTyped} onKeyDown={(event) => { if (event.key === "Enter") commitTyped() }} className={cn("h-9 tabular-nums", affix && (affix.suffix ? "pr-7" : "pl-6"))} /> ) return (

{/* Not a live region: the thumbs already announce their own values, and a readout that speaks on every pixel of a drag is noise. */}

{shownLo <= facet.min && shownHi >= facet.max ? `Any ${facet.label.toLowerCase()}` : `${format(shownLo)} – ${format(shownHi)}`}

{ const end = () => { window.removeEventListener("pointerup", end) window.removeEventListener("pointercancel", end) commitPending() } window.addEventListener("pointerup", end) window.addEventListener("pointercancel", end) }} onKeyUp={commitPending} > { const values: [number, number] = typeof next === "number" ? [next, next] : [next[0], next[1]] pending.current = values setDraft({ values, key }) }} />

{field("min")} – {field("max")}

) } function ToggleRow({ facet, className, ...props }: React.HTMLAttributes & { facet: ToggleFacet }) { const { value, setValue } = useFilterPanel() return (

{facet.label} setValue({ ...value, [facet.id]: on || undefined })} />

) } 51:T22fd,/** * Filter state <-> URL search params. * * Pure functions, no React. The same parser runs in a server component (to * fetch the filtered page) and in the browser (to drive the panel), so the * URL is the only source of truth a listing page needs. * * ?category=lighting&category=seating list / swatch facets: repeated keys * ?price=40-200 range facets: `min-max`, either side optional * ?in_stock=1 toggle facets * * Params that are not facets (`q`, `sort`, `page`, utm tags) pass through. */ export interface FilterOption { value: string label: string /** Results if this option were selected. `0` disables it unless it is already on. */ count?: number /** Any CSS colour or `url(...)` — renders the option as a swatch. */ swatch?: string disabled?: boolean } interface FacetBase { /** Doubles as the URL key, so keep it short and stable. */ id: string label: string } export interface ListFacet extends FacetBase { type: "list" options: FilterOption[] /** Options shown before "Show more". Selected options always stay visible. */ limit?: number } export interface SwatchFacet extends FacetBase { type: "swatch" options: FilterOption[] } export interface RangeFacet extends FacetBase { type: "range" min: number max: number step?: number /** `currency` formats bounds with the panel's `currency` and `locale`. */ format?: "currency" | "number" /** Suffix for `format: "number"`, e.g. "cm" or "★". */ unit?: string } export interface ToggleFacet extends FacetBase { type: "toggle" count?: number } export type FilterFacet = ListFacet | SwatchFacet | RangeFacet | ToggleFacet export interface FilterRange { min?: number max?: number } export type FilterValue = string[] | FilterRange | boolean /** Keyed by facet id. A missing key means "no constraint". */ export type FilterState = Record /** Anything a router hands you: a query string, URLSearchParams, or Next's `searchParams` object. */ export type SearchInput = | string | URLSearchParams | Record export interface ActiveFilter { facetId: string facetLabel: string /** Set for list and swatch facets — the option being removed. */ value?: string label: string } export function toSearchParams(input: SearchInput | null | undefined) { if (!input) return new URLSearchParams() if (typeof input === "string" || input instanceof URLSearchParams) { return new URLSearchParams(input) } const params = new URLSearchParams() for (const [key, raw] of Object.entries(input)) { if (raw === undefined) continue for (const value of Array.isArray(raw) ? raw : [raw]) params.append(key, value) } return params } // `-?` on both sides, so negative bounds still parse: `-10--2` is -10 to -2. const RANGE = /^(-?\d+(?:\.\d+)?)?-(-?\d+(?:\.\d+)?)?$/ function normaliseRange(facet: RangeFacet, range: FilterRange | undefined) { if (!range) return undefined let min = Number.isFinite(range.min) ? range.min : undefined let max = Number.isFinite(range.max) ? range.max : undefined if (min !== undefined && max !== undefined && min > max) [min, max] = [max, min] // A bound at the edge of the scale is no constraint at all — drop it so the // URL stays clean and the chip does not read "$0 – $500". if (min !== undefined && min <= facet.min) min = undefined if (max !== undefined && max >= facet.max) max = undefined if (min === undefined && max === undefined) return undefined return { min, max } } export function parseFilterParams( input: SearchInput | null | undefined, facets: FilterFacet[] ): FilterState { const params = toSearchParams(input) const state: FilterState = {} for (const facet of facets) { if (facet.type === "list" || facet.type === "swatch") { const values = [...new Set(params.getAll(facet.id).filter(Boolean))] if (values.length) state[facet.id] = values } else if (facet.type === "range") { const match = RANGE.exec(params.get(facet.id) ?? "") if (!match) continue const range = normaliseRange(facet, { min: match[1] === undefined ? undefined : Number(match[1]), max: match[2] === undefined ? undefined : Number(match[2]), }) if (range) state[facet.id] = range } else { const raw = params.get(facet.id) if (raw === "1" || raw === "true") state[facet.id] = true } } return state } /** * Writes `state` over `base`, keeping every non-facet param. Facet keys are * written in facet order, so equal states always produce equal URLs. */ export function serializeFilterParams( state: FilterState, facets: FilterFacet[], base?: SearchInput | null ) { const params = toSearchParams(base) for (const facet of facets) params.delete(facet.id) for (const facet of facets) { const value = state[facet.id] if (facet.type === "list" || facet.type === "swatch") { for (const option of getValues(state, facet.id)) params.append(facet.id, option) } else if (facet.type === "range") { const range = normaliseRange(facet, getRange(state, facet.id)) if (range) params.set(facet.id, `${range.min ?? ""}-${range.max ?? ""}`) } else if (value === true) { params.set(facet.id, "1") } } return params } export function isSameFilters(a: FilterState, b: FilterState, facets: FilterFacet[]) { return ( serializeFilterParams(a, facets).toString() === serializeFilterParams(b, facets).toString() ) } export function getValues(state: FilterState, id: string): string[] { const value = state[id] return Array.isArray(value) ? value : [] } export function getRange(state: FilterState, id: string): FilterRange | undefined { const value = state[id] return value && typeof value === "object" && !Array.isArray(value) ? value : undefined } export function getToggle(state: FilterState, id: string) { return state[id] === true } export function toggleFilterValue(state: FilterState, id: string, value: string): FilterState { const current = getValues(state, id) const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value] return { ...state, [id]: next.length ? next : undefined } } /** Sets a range, dropping bounds that sit on the edge of the scale. */ export function setRange(state: FilterState, facet: RangeFacet, range: FilterRange): FilterState { return { ...state, [facet.id]: normaliseRange(facet, range) } } /** Removes one option, or the whole facet when `value` is omitted. */ export function removeFilter(state: FilterState, id: string, value?: string): FilterState { if (value === undefined) return { ...state, [id]: undefined } const next = getValues(state, id).filter((v) => v !== value) return { ...state, [id]: next.length ? next : undefined } } export function countActiveFilters(state: FilterState, facets: FilterFacet[]) { return describeActiveFilters(state, facets).length } export function formatRangeBound( facet: RangeFacet, value: number, { currency = "USD", locale }: { currency?: string; locale?: string } = {} ) { if (facet.format === "currency") { return new Intl.NumberFormat(locale, { style: "currency", currency, maximumFractionDigits: Number.isInteger(value) ? 0 : 2, }).format(value) } const n = new Intl.NumberFormat(locale).format(value) return facet.unit ? `${n}${facet.unit.length > 1 ? " " : ""}${facet.unit}` : n } /** * Human labels for everything that is on — the chips above the panel, and * the words an empty state needs to say *which* filters emptied the grid. */ export function describeActiveFilters( state: FilterState, facets: FilterFacet[], format: { currency?: string; locale?: string } = {} ): ActiveFilter[] { const active: ActiveFilter[] = [] for (const facet of facets) { if (facet.type === "list" || facet.type === "swatch") { for (const value of getValues(state, facet.id)) { const option = facet.options.find((o) => o.value === value) active.push({ facetId: facet.id, facetLabel: facet.label, value, label: option?.label ?? value, }) } } else if (facet.type === "range") { const range = normaliseRange(facet, getRange(state, facet.id)) if (!range) continue const lo = range.min === undefined ? null : formatRangeBound(facet, range.min, format) const hi = range.max === undefined ? null : formatRangeBound(facet, range.max, format) active.push({ facetId: facet.id, facetLabel: facet.label, label: lo && hi ? `${lo} – ${hi}` : lo ? `${lo} and up` : `Up to ${hi}`, }) } else if (getToggle(state, facet.id)) { active.push({ facetId: facet.id, facetLabel: facet.label, label: facet.label }) } } return active } 52:Te3d,import * as React from "react" import { isSameFilters, parseFilterParams, serializeFilterParams, type FilterFacet, type FilterState, } from "@/lib/filter-params" /** Fired after our own pushState — the History API raises no event for it. */ const LOCATION_EVENT = "ecomcn:locationchange" const RESET_PAGE = ["page"] function subscribe(onChange: () => void) { window.addEventListener("popstate", onChange) window.addEventListener(LOCATION_EVENT, onChange) return () => { window.removeEventListener("popstate", onChange) window.removeEventListener(LOCATION_EVENT, onChange) } } const readSearch = () => window.location.search export interface UseFilterParamsOptions { /** * Your router's current params — Next's `useSearchParams()`, React * Router's `searchParams`. Omit it and the hook reads `window.location`. */ searchParams?: URLSearchParams | string | null /** * How to write the next URL. Defaults to the History API, which is enough * when results are fetched on the client. Pass your router's push when the * server renders the results, so each change triggers a fetch. */ navigate?: (href: string, options: { replace: boolean }) => void /** "push" makes Back undo the last filter, which is what shoppers expect. */ history?: "push" | "replace" /** Dropped on every change — page 4 of the old result set means nothing now. */ resetParams?: string[] /** The query string the server rendered with, so hydration matches. */ initialSearch?: string } /** * `useState`, but the state lives in the URL. Deep links, refresh, share and * the Back button all work because there is no second copy to fall out of sync. * * Keep `facets` referentially stable (module scope or `useMemo`). */ export function useFilterParams( facets: FilterFacet[], { searchParams, navigate, history = "push", resetParams = RESET_PAGE, initialSearch = "", }: UseFilterParamsOptions = {} ) { const locationSearch = React.useSyncExternalStore( subscribe, readSearch, () => initialSearch ) const controlled = searchParams !== undefined && searchParams !== null const search = controlled ? searchParams.toString() : locationSearch const filters = React.useMemo( () => parseFilterParams(search, facets), [search, facets] ) const setFilters = React.useCallback( (next: FilterState | ((previous: FilterState) => FilterState)) => { // Read the live URL, not the render-time snapshot, so two updates in // one event compose instead of the second overwriting the first. const current = controlled ? search : window.location.search const previous = parseFilterParams(current, facets) const value = typeof next === "function" ? next(previous) : next // An unchanged state must not add a history entry, or Back stops working. if (isSameFilters(value, previous, facets)) return const params = serializeFilterParams(value, facets, current) for (const key of resetParams) params.delete(key) const query = params.toString() const href = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}` if (navigate) { navigate(href, { replace: history === "replace" }) return } if (history === "replace") { window.history.replaceState(window.history.state, "", href) } else { window.history.pushState(null, "", href) } window.dispatchEvent(new Event(LOCATION_EVENT)) }, [controlled, search, facets, navigate, history, resetParams] ) return [filters, setFilters] as const } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ecomcn","registryDependencies":["checkbox","input","slider","switch"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/ecomcn/filter-panel/filter-panel.tsx","content":"$50","type":"registry:component","target":"components/ecomcn/filter-panel.tsx"},{"path":"src/registry/ecomcn/filter-panel/filter-params.ts","content":"$51","type":"registry:lib","target":"lib/filter-params.ts"},{"path":"src/registry/ecomcn/filter-panel/use-filter-params.ts","content":"$52","type":"registry:hook","target":"hooks/use-filter-params.ts"}],"className":"h-[70svh] min-h-80"}]]}]