react-listing-engine 0.6.5 → 0.6.7

package/dist/listing-app-IG1awue3.d.ts

@@ -0,0 +1,347 @@
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+import { b as EntityAdapter, M as MapPoint, L as LatLng, a as MapProvider } from './map-provider.interface-DT-v1plm.js';
+
+interface FilterControlProps<TValue> {
+    value: TValue;
+    onChange(next: TValue): void;
+}
+interface FilterDefinition<TFilters, TValue = unknown> {
+    key: string;
+    order: number;
+    render: string | ComponentType<FilterControlProps<TValue>>;
+    toParams(value: TValue): Partial<TFilters>;
+    fromParams(filters: TFilters): TValue;
+    isActive?(filters: TFilters): boolean;
+    /** Optional human-readable label rendered above the control by `ListingFilters`. Omit for an unlabeled filter (backward compatible). */
+    label?: string;
+}
+
+interface ClusterOptions {
+    maxZoom?: number;
+    radius?: number;
+}
+interface MarkerRenderer<TEntity> {
+    iconUrl?(entity: TEntity): string;
+    element?(entity: TEntity): HTMLElement;
+    onClick?(entity: TEntity): void;
+}
+interface DatasetDefinition<TEntity, TFilters> {
+    id: string;
+    adapter: EntityAdapter<TEntity, TFilters>;
+    marker: MarkerRenderer<TEntity>;
+    clustering?: ClusterOptions | false;
+    visible?: () => boolean;
+}
+
+declare enum PaginationMode {
+    Paged = "paged",
+    Infinite = "infinite"
+}
+
+interface IListingConfigOptions {
+    pagination: PaginationMode;
+    pageSize: number;
+    debounceMs: number;
+}
+
+/**
+ * Framework-free registry for `FilterDefinition`s: programmatic add / remove /
+ * reorder / replace, plus folding raw control values into `TFilters`
+ * (`toFilters`), reporting which registered filters currently affect an
+ * applied `TFilters` (`activeKeys`), and building the reset-everything patch
+ * (`clearedParams`).
+ *
+ * Defs are stored by VALUE (shallow-cloned on `add`/`replace`), never by the
+ * caller's original reference — `reorder()` rewrites `order` in place on the
+ * registry's own copy. This is deliberate: the same `FilterDefinition` object
+ * can legitimately be registered in more than one `FilterRegistry` instance
+ * (e.g. two listing pages sharing a base filter set), and without cloning,
+ * one registry's `reorder()` would silently mutate `.order` on the shared
+ * object and bleed into every other registry (and the caller) holding it.
+ */
+declare class FilterRegistry<TFilters> {
+    private readonly defs;
+    add<TValue = unknown>(def: FilterDefinition<TFilters, TValue>): this;
+    remove(key: string): this;
+    replace<TValue = unknown>(key: string, def: FilterDefinition<TFilters, TValue>): this;
+    reorder(keys: string[]): this;
+    list(): FilterDefinition<TFilters>[];
+    has(key: string): boolean;
+    toFilters(values: Record<string, unknown>): TFilters;
+    activeKeys(filters: TFilters): string[];
+    clearedParams(): Partial<TFilters>;
+}
+
+interface IListingCardProps {
+    item: unknown;
+    selected?: boolean;
+    onSelect?: () => void;
+}
+interface IListingMarkerProps {
+    point: MapPoint<unknown>;
+}
+interface IListingPopupProps {
+    entity: unknown;
+    onClose?: () => void;
+}
+interface IListingSidebarProps {
+    children?: ReactNode;
+}
+interface IListingFilterPanelProps {
+    children?: ReactNode;
+}
+interface IListingSearchProps {
+    value: string;
+    onChange(value: string): void;
+    placeholder?: string;
+}
+interface IListingEmptyProps {
+}
+interface IListingLoadingProps {
+}
+interface IListingResultHeaderProps {
+    count: number;
+    total?: number;
+}
+interface IListingToolbarProps {
+    children?: ReactNode;
+}
+interface IListingComponents {
+    Card: ComponentType<IListingCardProps>;
+    Marker: ComponentType<IListingMarkerProps>;
+    Popup: ComponentType<IListingPopupProps>;
+    Sidebar: ComponentType<IListingSidebarProps>;
+    FilterPanel: ComponentType<IListingFilterPanelProps>;
+    Search: ComponentType<IListingSearchProps>;
+    Empty: ComponentType<IListingEmptyProps>;
+    Loading: ComponentType<IListingLoadingProps>;
+    ResultHeader: ComponentType<IListingResultHeaderProps>;
+    Toolbar: ComponentType<IListingToolbarProps>;
+}
+/**
+ * Injection point for custom-component overrides. Every slot is optional —
+ * anything not provided falls back to the (unstyled) default. Mirrors
+ * `react-wizard-engine`'s `WizardComponentsProvider`: explicit per-slot
+ * `provided ?? defaults.X` merge, not a generic/reflective loop.
+ */
+declare function ListingComponentsProvider(props: Partial<IListingComponents> & {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function useListingComponents(): IListingComponents;
+
+type BottomNavView = 'list' | 'map';
+/**
+ * An action button in the mobile chrome (e.g. "Add"/"Save"). Despite the
+ * name (kept for API compatibility), it renders in `MobileHeader`, not here.
+ */
+interface IBottomNavAction {
+    label: string;
+    icon?: ReactNode;
+    onClick(): void;
+}
+interface IBottomNavProps {
+    view: BottomNavView;
+    onViewChange(view: BottomNavView): void;
+}
+/**
+ * Mobile-only bottom navigation (`.rle-bottom-nav`, CSS-hidden above the
+ * mobile breakpoint -- see `styles.css`'s layout-shell section, the single
+ * source of truth for it): a floating **List | Map** segmented toggle
+ * (`.rle-viewtoggle`) that drives which of `StyledListingLayout`'s two
+ * full-area panels is visible. The **Filters** button and the optional caller
+ * action (e.g. "Save") live in the mobile header (`MobileHeader`) instead, so
+ * the footer pill carries the view toggle alone. No lucide/icon library
+ * dependency -- every icon here is a small inline SVG, matching the rest of
+ * `/styled`'s zero-extra-dependency policy.
+ */
+declare function BottomNav({ view, onViewChange }: IBottomNavProps): react.JSX.Element;
+
+interface IStyledListingLayoutProps {
+    /**
+     * Optional header search box, LIBRARY-wired: name the `TFilters` field it
+     * drives via
+     * `filterKey`, and the layout reads the current value from the engine's
+     * filters and writes edits back with `applyFilters({ [filterKey]: value ||
+     * undefined })`. Rendered in BOTH the desktop filter bar and the mobile
+     * header. Do NOT also register `filterKey` as a `ListingFilters` control --
+     * it would then render twice. Omitted entirely when not passed.
+     */
+    search?: {
+        filterKey: string;
+        placeholder?: string;
+    };
+    /** Extra content rendered in `.rle-list-header` (above the list), to the right of `ListingResultHeader` (e.g. a sort control + save-search). */
+    toolbarEnd?: ReactNode;
+    /** Optional mobile-header action button (e.g. "Save"), forwarded verbatim to `<MobileHeader action={...} />`. Omit to render just the search + Filters button there. */
+    mobileAction?: IBottomNavAction;
+    /**
+     * Whether a map is configured. When `false`, the map region is dropped and
+     * the results list fills the full width as a multi-column grid, and the
+     * mobile List|Map toggle is omitted (nothing to toggle to). Defaults to
+     * `engine.map != null` -- the engine is the source of truth, so this only
+     * needs passing to override that (e.g. to hide a configured map).
+     */
+    hasMap?: boolean;
+    /** Whether the layout fetches the first page itself on mount (`engine.applyFilters({})`). Defaults to `true`. */
+    autoFetch?: boolean;
+    /** Forwarded verbatim to `<ListingMap center={mapCenter} />` -- see that component's "Auto-fit" doc comment. */
+    mapCenter?: LatLng;
+    /** Forwarded verbatim to `<ListingMap zoom={mapZoom} />`. */
+    mapZoom?: number;
+    className?: string;
+}
+/**
+ * Full, responsive, Tailwind-free listing experience -- built from the
+ * structure-only compound components (`~/react`) plus the injected
+ * `Styled*` slot components, with a rich mobile experience: a bottom
+ * nav (`BottomNav`) and a bottom sheet (`BottomSheet`) for filters. Every
+ * class used here is one of
+ * the `.rle-*` layout classes added to `styles.css` alongside this file --
+ * no Tailwind, no inline styles, no other stylesheet required.
+ *
+ * STRUCTURE (`.rle-app`) -- the mobile/desktop breakpoint and the grid's
+ * column sizing live in ONE place, `styles.css`'s layout-shell section; the
+ * bullets below say only which side of it each piece renders on:
+ * - `.rle-filter-bar` (desktop only, CSS-hidden below the breakpoint): the
+ *   optional `Search` slot and `<ListingFilters>` laid out as a single
+ *   horizontally-scrolling row (`className="rle-filters-row"`,
+ *   `groupClassName="rle-filter-group"`) with edge fades. The result header +
+ *   `toolbarEnd` are NOT here -- they sit in `.rle-list-header` above the list.
+ * - `.rle-list-header` (top of `.rle-list`): `<ListingResultHeader>` (title +
+ *   count) at the left, `toolbarEnd` (sort control, save-search, ...) at the
+ *   right -- a heading for the results, on every viewport.
+ * - `.rle-body.rle-split`: a list-majority list|map CSS grid from the
+ *   breakpoint up; below it, a single full-area panel with exactly one of
+ *   `.rle-list`/`.rle-map` visible at a time via `data-mobile-view` (see
+ *   `styles.css`'s mobile media query). Both regions stay mounted at ALL
+ *   times regardless of viewport/toggle state -- only their visibility flips
+ *   -- so neither `ListingList` nor `ListingMap` remounts (and re-triggers
+ *   its own mount effects) on toggle or resize.
+ * - `<MobileHeader>` (mobile only): the same search box, a **Filters** button
+ *   (opens the `<BottomSheet>`, with an applied-filter count badge) and the
+ *   optional `mobileAction`.
+ * - `<BottomNav>` (mobile only): the floating List|Map view toggle, wired to
+ *   the same `mobileView` state as the CSS toggle. Omitted when there is no
+ *   map (nothing to toggle to).
+ * - `<BottomSheet title="Filters">`: the SAME `<ListingFilters>` component,
+ *   stacked vertically (`className="rle-filter-stack"`) for the sheet's
+ *   narrower body, plus a footer with "Clear all" (applies
+ *   `engine.filters.clearedParams()` -- see that method's doc for why a reset
+ *   round-trips each def's to/fromParams) and "Show N results" (just closes
+ *   the sheet -- every filter control already applies live via its own
+ *   `onChange`, so there is nothing left to commit).
+ * - Fetches the first page itself on mount (`engine.applyFilters({})`) by
+ *   default -- pass `autoFetch={false}`
+ *   to opt out and drive the first fetch yourself.
+ */
+declare function StyledListingLayout({ search, toolbarEnd, mobileAction, autoFetch, hasMap: hasMapProp, mapCenter, mapZoom, className, }: IStyledListingLayoutProps): react.JSX.Element;
+
+/**
+ * Two-shape `map` prop: pass a ready `MapProvider`, or the `{ apiKey, mapId? }`
+ * shorthand. The shorthand is resolved via a DYNAMIC `import()` of
+ * `~/maps/google` (see `useResolvedMap` below) rather than a static one, so an
+ * app that never sets `map` doesn't pull `@googlemaps/js-api-loader` into its
+ * bundle.
+ */
+type ListingAppMapProp = {
+    provider: MapProvider;
+    center?: LatLng;
+    zoom?: number;
+} | {
+    apiKey: string;
+    mapId?: string;
+    center?: LatLng;
+    zoom?: number;
+};
+interface ListingAppProps<TFilters> {
+    /**
+     * One or more marker-layer datasets; the FIRST entry is the primary
+     * dataset (drives the results list + pagination) -- same "insertion
+     * order" rule `composeListingProviders`/`withDataset` already follow.
+     * Entity-erased (`any`, not `TEntity`) for the same reason
+     * `DatasetRegistry<unknown, TFilters>` is: one array can legitimately hold
+     * heterogeneous layers (a properties dataset and a businesses dataset have
+     * different entity types) -- see `compose-listing-providers.ts`'s
+     * `withDataset` doc comment.
+     */
+    datasets: DatasetDefinition<any, TFilters>[];
+    /** A `(reg) => { reg.add(...); }` callback that registers your filters -- forwarded verbatim to `withFilters`. */
+    filters?: (reg: FilterRegistry<TFilters>) => void;
+    /** A ready `MapProvider`, or `{ apiKey, mapId? }` to build a `googleProvider` internally. Omit for no map -- the layout drops the map region and renders the list full-width. */
+    map?: ListingAppMapProp;
+    /** Slot overrides, merged OVER the `/styled` defaults -- see this file's doc comment for how the merge works. */
+    components?: Partial<IListingComponents>;
+    /**
+     * Hydrates the engine's initial filters on mount -- typically parsed from
+     * the CONSUMER's own URL (your own query-string parser over `new
+     * URLSearchParams(window.location.search)`), but any source works. Half
+     * of the event-based URL API this component exposes: `ListingApp` never
+     * reads `window.location` itself, it only accepts filters as a prop.
+     */
+    initialFilters?: TFilters;
+    /**
+     * EVENT OUT: fires with the engine's current filters (`TFilters`, not the
+     * store's `DeepReadonly` wrapper) every time `ListingEventType.FiltersChanged`
+     * fires on the underlying engine -- i.e. on every `engine.applyFilters(...)`
+     * call, INCLUDING the one `StyledListingLayout` makes on mount when
+     * `autoFetch` is on (a `{}` patch that still round-trips through
+     * `currentFilters()` and re-emits the very `initialFilters` this component
+     * was given). That first call is intentionally NOT suppressed: a
+     * consumer's handler is expected to write filters back to a URL via
+     * `history.replaceState` (or a router's equivalent), and replacing the URL
+     * with the SAME query string it already hydrated from is a no-op, not a
+     * visible echo -- so "just always emit" is simpler than tracking a
+     * first-call flag for no behavioral gain. This is the OTHER half of the
+     * event-based URL API: `ListingApp` (and the engine underneath it) never
+     * touches `window.history` -- the CONSUMER owns routing, driven by this
+     * callback plus `initialFilters` above. `UrlSyncController`/`BrowserHistoryPort`
+     * (`~/core`, `~/react`) remain exported as optional, lower-level helpers
+     * for consumers who want the library to own `window.history` directly, but
+     * they are no longer the primary/recommended path for new integrations.
+     */
+    onFiltersChange?: (filters: TFilters) => void;
+    /** The mobile header action (e.g. "Save"/"Add") -- forwarded verbatim to `StyledListingLayout`/`MobileHeader`. */
+    mobileAction?: IBottomNavAction;
+    search?: IStyledListingLayoutProps['search'];
+    toolbarEnd?: IStyledListingLayoutProps['toolbarEnd'];
+    config?: Partial<IListingConfigOptions>;
+    autoFetch?: boolean;
+    className?: string;
+}
+/**
+ * Turnkey, batteries-included, Tailwind-free entry point -- and (per
+ * `src/index.ts`) the package's MAIN-ENTRY default: `import { ListingApp } from
+ * 'react-listing-engine'` gives you this component. Pass datasets + filters +
+ * a map + component overrides, and `ListingApp` composes
+ * `composeListingProviders(...)`, `<ListingProvider>`, the `/styled` defaults,
+ * and `<StyledListingLayout>` for you.
+ *
+ * `TEntity` still can't be inferred from these props (`datasets` narrows it,
+ * but a multi-dataset array widens back to the union/`unknown` in practice)
+ * -- annotate the call site when entity-level typing matters, exactly like
+ * `<ListingProvider<TEntity, TFilters>>` itself.
+ *
+ * COMPONENTS MERGE: `components` overrides are applied ON TOP of the
+ * `/styled` defaults via ONE explicit `{ ...styledDefaultComponents,
+ * ...components }` object, passed to a single `<ListingComponentsProvider>`
+ * -- never as a nested `<ListingComponentsProvider>` inside
+ * `StyledComponentsProviderWithDefaults`. `ListingComponentsProvider` merges
+ * `provided ?? ITS OWN private, unstyled fallbacks` per slot (it does not
+ * read the parent context -- see `src/react/components-provider.tsx`), so
+ * nesting would silently discard every un-overridden `/styled` default
+ * instead of keeping it.
+ *
+ * URL SYNC IS EVENT-BASED, NOT INTERNAL: this component takes no `urlSync`
+ * prop and never constructs/starts a
+ * `UrlSyncController` -- it never touches `window.history`. Instead it
+ * accepts `initialFilters` (hydrate FROM the consumer's URL) and emits
+ * `onFiltersChange` (write TO the consumer's URL/router) -- see both props'
+ * doc comments for the full contract. This keeps the library's surface
+ * router-agnostic (a plain `history.replaceState`, a Next.js `router.replace`,
+ * a React Router `setSearchParams`, etc. all work identically from the
+ * consumer's side) instead of assuming `window.history` is the right target.
+ */
+declare function ListingApp<TEntity, TFilters>(props: ListingAppProps<TFilters>): react.JSX.Element | null;
+
+export { BottomNav as B, type ClusterOptions as C, type DatasetDefinition as D, FilterRegistry as F, type IListingConfigOptions as I, ListingApp as L, type MarkerRenderer as M, PaginationMode as P, StyledListingLayout as S, type IListingToolbarProps as a, type FilterControlProps as b, type FilterDefinition as c, type IListingCardProps as d, type IListingComponents as e, type IListingEmptyProps as f, type IListingFilterPanelProps as g, type IListingLoadingProps as h, type IListingMarkerProps as i, type IListingPopupProps as j, type IListingResultHeaderProps as k, type IListingSearchProps as l, type IListingSidebarProps as m, type ListingAppProps as n, ListingComponentsProvider as o, type BottomNavView as p, type IBottomNavAction as q, type IBottomNavProps as r, type IStyledListingLayoutProps as s, type ListingAppMapProp as t, useListingComponents as u };

package/dist/styled/index.cjs

@@ -1,2 +1,2 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
-var _chunkRXHR66FScjs = require('../chunk-RXHR66FS.cjs');var _chunkEYXV5OMYcjs = require('../chunk-EYXV5OMY.cjs');var _jsxruntime = require('react/jsx-runtime');function L({children:o}){return _jsxruntime.jsx.call(void 0, _chunkEYXV5OMYcjs.p,{..._chunkRXHR66FScjs.l,children:o})}exports.BottomNav = _chunkRXHR66FScjs.m; exports.BottomSheet = _chunkRXHR66FScjs.n; exports.ListingApp = _chunkRXHR66FScjs.p; exports.StyledCard = _chunkRXHR66FScjs.b; exports.StyledComponentsProviderWithDefaults = L; exports.StyledEmpty = _chunkRXHR66FScjs.c; exports.StyledFilterPanel = _chunkRXHR66FScjs.d; exports.StyledListingLayout = _chunkRXHR66FScjs.o; exports.StyledLoading = _chunkRXHR66FScjs.e; exports.StyledMarker = _chunkRXHR66FScjs.f; exports.StyledPopup = _chunkRXHR66FScjs.g; exports.StyledResultHeader = _chunkRXHR66FScjs.h; exports.StyledSearch = _chunkRXHR66FScjs.i; exports.StyledSidebar = _chunkRXHR66FScjs.j; exports.StyledToolbar = _chunkRXHR66FScjs.k; exports.styledDefaultComponents = _chunkRXHR66FScjs.l;
+var _chunk4CZJODMKcjs = require('../chunk-4CZJODMK.cjs');var _jsxruntime = require('react/jsx-runtime');function L({children:o}){return _jsxruntime.jsx.call(void 0, _chunk4CZJODMKcjs.p,{..._chunk4CZJODMKcjs.N,children:o})}exports.BottomNav = _chunk4CZJODMKcjs.O; exports.BottomSheet = _chunk4CZJODMKcjs.P; exports.ListingApp = _chunk4CZJODMKcjs.R; exports.StyledCard = _chunk4CZJODMKcjs.D; exports.StyledComponentsProviderWithDefaults = L; exports.StyledEmpty = _chunk4CZJODMKcjs.E; exports.StyledFilterPanel = _chunk4CZJODMKcjs.F; exports.StyledListingLayout = _chunk4CZJODMKcjs.Q; exports.StyledLoading = _chunk4CZJODMKcjs.G; exports.StyledMarker = _chunk4CZJODMKcjs.H; exports.StyledPopup = _chunk4CZJODMKcjs.I; exports.StyledResultHeader = _chunk4CZJODMKcjs.J; exports.StyledSearch = _chunk4CZJODMKcjs.K; exports.StyledSidebar = _chunk4CZJODMKcjs.L; exports.StyledToolbar = _chunk4CZJODMKcjs.M; exports.styledDefaultComponents = _chunk4CZJODMKcjs.N;

package/dist/styled/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { d as IListingCardProps, f as IListingEmptyProps, g as IListingFilterPanelProps, h as IListingLoadingProps, i as IListingMarkerProps, j as IListingPopupProps, k as IListingResultHeaderProps, l as IListingSearchProps, m as IListingSidebarProps, a as IListingToolbarProps, e as IListingComponents } from '../components-provider-FinfaqUT.cjs';
-export { B as BottomNav, b as BottomNavView, I as IBottomNavAction, c as IBottomNavProps, d as IStyledListingLayoutProps, L as ListingApp, e as ListingAppMapProp, a as ListingAppProps, S as StyledListingLayout } from '../listing-app-BMoMKD4c.cjs';
+import { d as IListingCardProps, f as IListingEmptyProps, g as IListingFilterPanelProps, h as IListingLoadingProps, i as IListingMarkerProps, j as IListingPopupProps, k as IListingResultHeaderProps, l as IListingSearchProps, m as IListingSidebarProps, a as IListingToolbarProps, e as IListingComponents } from '../listing-app-BtNNEkX1.cjs';
+export { B as BottomNav, p as BottomNavView, q as IBottomNavAction, r as IBottomNavProps, s as IStyledListingLayoutProps, L as ListingApp, t as ListingAppMapProp, n as ListingAppProps, S as StyledListingLayout } from '../listing-app-BtNNEkX1.cjs';
 import '../map-provider.interface-DT-v1plm.cjs';
 
 /**
@@ -33,7 +33,7 @@ declare function StyledMarker({ point }: IListingMarkerProps): react.JSX.Element
  * accessible close button. `role="group"` + `aria-label` (rather than
  * `role="dialog"`) since this is a non-modal, non-focus-trapped popup
  * anchored to a map marker -- `dialog` without modality/focus management
- * would misrepresent it to AT users. Mirrors `/shadcn`'s `DefaultPopup`.
+ * would misrepresent it to AT users.
  */
 declare function StyledPopup({ entity, onClose }: IListingPopupProps): react.JSX.Element;
 
@@ -56,7 +56,7 @@ declare function StyledToolbar({ children }: IListingToolbarProps): react.JSX.El
  * of the box -- pair it with `import 'react-listing-engine/styles.css'`; use
  * `ListingComponentsProvider` directly (with your own components for some or
  * all slots) otherwise -- the two compose fine since `ListingComponentsProvider`
- * falls back per-slot. Mirrors `/shadcn`'s `ListingComponentsProviderWithDefaults`.
+ * falls back per-slot.
  */
 declare function StyledComponentsProviderWithDefaults({ children }: {
     children: ReactNode;
@@ -64,8 +64,7 @@ declare function StyledComponentsProviderWithDefaults({ children }: {
 
 /**
  * Every `/styled` default, keyed by slot -- the single source of truth for
- * `StyledComponentsProviderWithDefaults`, mirroring `/shadcn`'s
- * `shadcnDefaultComponents`.
+ * `StyledComponentsProviderWithDefaults`.
  *
  * Kept as a plain object, not JSX, so a caller can merge it with
  * `{ ...styledDefaultComponents, ...overrides }` and hand the result to ONE
@@ -89,7 +88,7 @@ interface IBottomSheetProps {
 /**
  * Dependency-free mobile bottom sheet -- the `/styled` adapter's own modal
  * primitive, used by `StyledListingLayout` for the mobile filters panel.
- * Deliberately NOT the `~/shadcn` adapter's Radix-based `Sheet`: `/styled`
+ * Deliberately dependency-free (no Radix or other UI-library sheet): `/styled`
  * ships zero UI dependencies beyond `react`/`react-dom`, so this is a small
  * hand-rolled implementation covering just what a filters sheet needs --
  * portal, backdrop-click/Escape-to-close, a body-scroll lock, and the

package/dist/styled/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { d as IListingCardProps, f as IListingEmptyProps, g as IListingFilterPanelProps, h as IListingLoadingProps, i as IListingMarkerProps, j as IListingPopupProps, k as IListingResultHeaderProps, l as IListingSearchProps, m as IListingSidebarProps, a as IListingToolbarProps, e as IListingComponents } from '../components-provider-cWVWEDXC.js';
-export { B as BottomNav, b as BottomNavView, I as IBottomNavAction, c as IBottomNavProps, d as IStyledListingLayoutProps, L as ListingApp, e as ListingAppMapProp, a as ListingAppProps, S as StyledListingLayout } from '../listing-app-BSJKGh7k.js';
+import { d as IListingCardProps, f as IListingEmptyProps, g as IListingFilterPanelProps, h as IListingLoadingProps, i as IListingMarkerProps, j as IListingPopupProps, k as IListingResultHeaderProps, l as IListingSearchProps, m as IListingSidebarProps, a as IListingToolbarProps, e as IListingComponents } from '../listing-app-IG1awue3.js';
+export { B as BottomNav, p as BottomNavView, q as IBottomNavAction, r as IBottomNavProps, s as IStyledListingLayoutProps, L as ListingApp, t as ListingAppMapProp, n as ListingAppProps, S as StyledListingLayout } from '../listing-app-IG1awue3.js';
 import '../map-provider.interface-DT-v1plm.js';
 
 /**
@@ -33,7 +33,7 @@ declare function StyledMarker({ point }: IListingMarkerProps): react.JSX.Element
  * accessible close button. `role="group"` + `aria-label` (rather than
  * `role="dialog"`) since this is a non-modal, non-focus-trapped popup
  * anchored to a map marker -- `dialog` without modality/focus management
- * would misrepresent it to AT users. Mirrors `/shadcn`'s `DefaultPopup`.
+ * would misrepresent it to AT users.
  */
 declare function StyledPopup({ entity, onClose }: IListingPopupProps): react.JSX.Element;
 
@@ -56,7 +56,7 @@ declare function StyledToolbar({ children }: IListingToolbarProps): react.JSX.El
  * of the box -- pair it with `import 'react-listing-engine/styles.css'`; use
  * `ListingComponentsProvider` directly (with your own components for some or
  * all slots) otherwise -- the two compose fine since `ListingComponentsProvider`
- * falls back per-slot. Mirrors `/shadcn`'s `ListingComponentsProviderWithDefaults`.
+ * falls back per-slot.
  */
 declare function StyledComponentsProviderWithDefaults({ children }: {
     children: ReactNode;
@@ -64,8 +64,7 @@ declare function StyledComponentsProviderWithDefaults({ children }: {
 
 /**
  * Every `/styled` default, keyed by slot -- the single source of truth for
- * `StyledComponentsProviderWithDefaults`, mirroring `/shadcn`'s
- * `shadcnDefaultComponents`.
+ * `StyledComponentsProviderWithDefaults`.
  *
  * Kept as a plain object, not JSX, so a caller can merge it with
  * `{ ...styledDefaultComponents, ...overrides }` and hand the result to ONE
@@ -89,7 +88,7 @@ interface IBottomSheetProps {
 /**
  * Dependency-free mobile bottom sheet -- the `/styled` adapter's own modal
  * primitive, used by `StyledListingLayout` for the mobile filters panel.
- * Deliberately NOT the `~/shadcn` adapter's Radix-based `Sheet`: `/styled`
+ * Deliberately dependency-free (no Radix or other UI-library sheet): `/styled`
  * ships zero UI dependencies beyond `react`/`react-dom`, so this is a small
  * hand-rolled implementation covering just what a filters sheet needs --
  * portal, backdrop-click/Escape-to-close, a body-scroll lock, and the

package/dist/styled/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{b as r,c as p,d as i,e as d,f as y,g as l,h as n,i as m,j as s,k as a,l as t,m as S,n as f,o as P,p as u}from"../chunk-CGT3RHJ7.js";import{p as e}from"../chunk-R3FX2V3N.js";import{jsx as g}from"react/jsx-runtime";function L({children:o}){return g(e,{...t,children:o})}export{S as BottomNav,f as BottomSheet,u as ListingApp,r as StyledCard,L as StyledComponentsProviderWithDefaults,p as StyledEmpty,i as StyledFilterPanel,P as StyledListingLayout,d as StyledLoading,y as StyledMarker,l as StyledPopup,n as StyledResultHeader,m as StyledSearch,s as StyledSidebar,a as StyledToolbar,t as styledDefaultComponents};
+import{D as r,E as p,F as i,G as d,H as y,I as l,J as n,K as m,L as s,M as a,N as t,O as S,P as f,Q as P,R as u,p as e}from"../chunk-GSWGCJCO.js";import{jsx as g}from"react/jsx-runtime";function L({children:o}){return g(e,{...t,children:o})}export{S as BottomNav,f as BottomSheet,u as ListingApp,r as StyledCard,L as StyledComponentsProviderWithDefaults,p as StyledEmpty,i as StyledFilterPanel,P as StyledListingLayout,d as StyledLoading,y as StyledMarker,l as StyledPopup,n as StyledResultHeader,m as StyledSearch,s as StyledSidebar,a as StyledToolbar,t as styledDefaultComponents};

package/dist/styles.css

@@ -70,33 +70,14 @@
 }
 
 /* -----------------------------------------------------------------------
- * Base -- box-sizing + font-family for every element this stylesheet owns.
+ * Base -- box-sizing + font-family for every element this stylesheet owns,
+ * scoped by the `rle-` class prefix (the adapter's namespace) instead of an
+ * enumerated class list, so new components are covered automatically --
+ * including elements portaled outside `.rle-app` (sheet, backdrop).
  * --------------------------------------------------------------------- */
 
-.rle-card,
-.rle-card-media,
-.rle-card-body,
-.rle-marker,
-.rle-pin,
-.rle-popup,
-.rle-popup-close,
-.rle-empty,
-.rle-empty-icon,
-.rle-loading,
-.rle-loading-item,
-.rle-skeleton,
-.rle-result-header,
-.rle-toolbar,
-.rle-sidebar,
-.rle-filter-panel,
-.rle-input,
-.rle-range,
-.rle-select,
-.rle-dropdown,
-.rle-dropdown-panel,
-.rle-checkbox,
-.rle-label,
-.rle-btn {
+[class^='rle-'],
+[class*=' rle-'] {
 	box-sizing: border-box;
 	font-family: var(--rle-font-sans);
 }
@@ -576,26 +557,6 @@
 	font-size: var(--rle-fs-sm);
 }
 
-/* -----------------------------------------------------------------------
- * Motion
- * --------------------------------------------------------------------- */
-
-@media (prefers-reduced-motion: reduce) {
-	.rle-card[type='button'],
-	.rle-popup-close,
-	.rle-skeleton,
-	.rle-input,
-	.rle-select,
-	.rle-dropdown,
-	.rle-btn,
-	.rle-viewtoggle__btn,
-	.rle-sheet,
-	.rle-sheet-backdrop {
-		transition: none;
-		animation: none;
-	}
-}
-
 /* -----------------------------------------------------------------------
  * Layout shell -- the responsive "filter bar + list/map split" chrome
  * `StyledListingLayout` composes the `~/react` structure-only components
@@ -606,32 +567,6 @@
  * the same property, so there is exactly one source of truth per viewport.
  * --------------------------------------------------------------------- */
 
-.rle-app,
-.rle-filter-bar,
-.rle-filter-bar__end,
-.rle-filters-row,
-.rle-filter-stack,
-.rle-filter-group,
-.rle-body,
-.rle-split,
-.rle-list,
-.rle-list-grid,
-.rle-map,
-.rle-bottom-nav,
-.rle-viewtoggle,
-.rle-viewtoggle__btn,
-.rle-sheet-backdrop,
-.rle-sheet,
-.rle-sheet__handle,
-.rle-sheet__header,
-.rle-sheet__title,
-.rle-sheet__close,
-.rle-sheet__body,
-.rle-sheet__footer {
-	box-sizing: border-box;
-	font-family: var(--rle-font-sans);
-}
-
 .rle-app {
 	display: flex;
 	flex-direction: column;
@@ -641,11 +576,16 @@
 }
 
 /* -----------------------------------------------------------------------
- * Desktop filter bar -- hidden below 1024px in favor of the bottom nav's
+ * Desktop filter bar -- hidden below 1024px in favor of the mobile header's
  * Filters button + bottom sheet.
  * --------------------------------------------------------------------- */
 
-.rle-filter-bar {
+/* Sticky top chrome shared with `.rle-mobile-header` -- the two
+   viewport-exclusive top bars. (`display: none` on whichever is inactive
+   makes the sticky properties inert, so sharing them unconditionally is
+   safe.) */
+.rle-filter-bar,
+.rle-mobile-header {
 	position: sticky;
 	top: 0;
 	z-index: 10;
@@ -751,15 +691,10 @@
 
 @media (max-width: 1023px) {
 	.rle-mobile-header {
-		position: sticky;
-		top: 0;
-		z-index: 10;
 		display: flex;
 		align-items: center;
 		gap: 8px;
 		padding: var(--rle-space);
-		background: var(--rle-surface);
-		border-bottom: 1px solid var(--rle-border);
 	}
 }
 
@@ -768,25 +703,16 @@
 	min-width: 0;
 }
 
+/* Modifier over `.rle-btn` (the shared button primitive -- hover, focus
+   ring, transition and reduced-motion behavior all come from there):
+   slightly taller, tighter header buttons. */
 .rle-mobile-header__btn {
-	display: inline-flex;
 	flex-shrink: 0;
-	align-items: center;
-	justify-content: center;
 	gap: 6px;
 	height: 40px;
 	padding: 0 12px;
-	background: var(--rle-surface);
-	border: 1px solid var(--rle-border);
-	border-radius: var(--rle-radius-sm);
-	color: var(--rle-fg);
 	font-size: var(--rle-fs-sm);
-	font-weight: 500;
 	white-space: nowrap;
-	cursor: pointer;
-	transition:
-		background-color 150ms ease,
-		border-color 150ms ease;
 }
 
 .rle-mobile-header__btn svg {
@@ -794,15 +720,6 @@
 	height: 18px;
 }
 
-.rle-mobile-header__btn:hover {
-	background: var(--rle-muted-bg);
-}
-
-.rle-mobile-header__btn:focus-visible {
-	outline: none;
-	box-shadow: 0 0 0 3px var(--rle-ring);
-}
-
 .rle-mobile-header__btn--icon {
 	width: 40px;
 	padding: 0;
@@ -1097,3 +1014,18 @@
 	padding: var(--rle-space);
 	border-top: 1px solid var(--rle-border);
 }
+
+/* -----------------------------------------------------------------------
+ * Motion -- LAST on purpose: prefix-scoped like the base reset (every
+ * `rle-` element goes still, so a new component with a transition can't be
+ * forgotten here), and every transition/animation above shares this rule's
+ * single-class specificity, so it must come later in the file to win.
+ * --------------------------------------------------------------------- */
+
+@media (prefers-reduced-motion: reduce) {
+	[class^='rle-'],
+	[class*=' rle-'] {
+		transition: none;
+		animation: none;
+	}
+}