@burdenoff/microfe-movethewheels 2026.704.1 → 2026.710.1

package/dist/movethewheels/MoveTheWheelsRoot.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { MoveTheWheelsRootProps } from './types';
+
+/**
+ * Root component for the MoveTheWheels microfrontend.
+ *
+ * @example
+ * ```tsx
+ * import { MoveTheWheelsRoot } from '@burdenoff/microfe-movethewheels';
+ *
+ * function App() {
+ *   return (
+ *     <MoveTheWheelsRoot
+ *       basePath="/movethewheels"
+ *       navigate={(path) => router.push(path)}
+ *       currentUser={currentUser}
+ *       workspaceId="ws-123"
+ *       apiGatewayUrl="https://api.example.com"
+ *       authToken="token"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const MoveTheWheelsRoot: FC<MoveTheWheelsRootProps>;

package/dist/movethewheels/MoveTheWheelsRoutes.d.ts

@@ -0,0 +1,7 @@
+/**
+ * MoveTheWheels Internal Routes
+ *
+ * Defines all internal routing for the microfrontend.
+ * Uses lazy loading for code splitting.
+ */
+export declare function MoveTheWheelsRoutes(): import("react").JSX.Element;

package/dist/movethewheels/components/DataTable.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+
+export interface Column<T> {
+    id: string;
+    header: string | ReactNode;
+    accessorKey?: keyof T;
+    cell?: (row: T) => ReactNode;
+    sortable?: boolean;
+    className?: string;
+    headerClassName?: string;
+}
+interface DataTableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    isLoading?: boolean;
+    /**
+     * When the underlying fetch ultimately failed (after retries) and no rows are
+     * available to show, the table renders a distinct error state with a Retry
+     * action instead of the "empty" state — so a backend failure never reads as
+     * "no data".
+     */
+    error?: Error | null;
+    /** Invoked by the error-state Retry button (typically the hook's refetch). */
+    onRetry?: () => void;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    searchFields?: (keyof T)[];
+    pagination?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onRowClick?: (row: T) => void;
+    rowClassName?: string | ((row: T) => string);
+    emptyMessage?: string;
+    /**
+     * Boff UI 2.0 — standard illustration name served by the host at
+     * /illustrations/<name>.webp. When provided, the zero/empty state renders an
+     * on-brand IllustratedEmptyState instead of bare text. Search-result empties
+     * always use the empty-search illustration regardless of this value.
+     */
+    emptyIllustration?: string;
+    /** Optional title for the illustrated empty state (defaults to emptyMessage). */
+    emptyTitle?: string;
+    /** Optional description for the illustrated empty state. */
+    emptyDescription?: ReactNode;
+    /** Optional primary action (e.g. a "Create" button) for the illustrated empty state. */
+    emptyAction?: ReactNode;
+    className?: string;
+    getRowId?: (row: T) => string;
+    /**
+     * Controlled (server-side) pagination. When `onPageChange` is provided the
+     * table stops slicing client-side — `data` is treated as the current page —
+     * and the pager Prev/Next/First/Last call the callbacks instead. Provide
+     * either `totalItems` (a real grand total is known) or `hasNextPage`
+     * (unknown total — Next is enabled while the last fetch returned a full page).
+     */
+    pageIndex?: number;
+    onPageChange?: (pageIndex: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    totalItems?: number;
+    hasNextPage?: boolean;
+}
+/**
+ * DataTable - A reusable data table component with sorting, search, and both
+ * client-side and controlled (server-side) pagination.
+ */
+export declare function DataTable<T extends object>({ columns, data, isLoading, error, onRetry, searchable, searchPlaceholder, searchFields, pagination, pageSize: pageSizeProp, pageSizeOptions, onRowClick, rowClassName, emptyMessage, emptyIllustration, emptyTitle, emptyDescription, emptyAction, className, getRowId, pageIndex, onPageChange, onPageSizeChange, totalItems, hasNextPage, }: DataTableProps<T>): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/DocumentsCard.d.ts

@@ -0,0 +1,8 @@
+import { EntityDocumentType } from '../hooks/useEntityDocuments';
+
+interface DocumentsCardProps {
+    entityType: EntityDocumentType;
+    entityId: string;
+}
+export declare function DocumentsCard({ entityType, entityId }: DocumentsCardProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/FormError.d.ts

@@ -0,0 +1,11 @@
+/**
+ * FormError — inline error banner for create/edit forms.
+ *
+ * Renders nothing when there is no message, so it can be dropped into a form
+ * unconditionally. Uses semantic status tokens so it themes correctly.
+ */
+interface FormErrorProps {
+    message?: string | null;
+}
+export declare function FormError({ message }: FormErrorProps): import("react").JSX.Element | null;
+export {};

package/dist/movethewheels/components/GlassPanel.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface GlassPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional panel title rendered in a compact header row. */
+    title?: ReactNode;
+    /** Optional right-aligned header slot (actions, filters, legend chips). */
+    action?: ReactNode;
+    /** Optional supporting text under the title. */
+    description?: ReactNode;
+    /** Inner padding. Defaults to `md`. Use `none` for edge-to-edge (maps/charts). */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    treatment?: 'glass' | 'plain' | 'metric' | 'insight';
+    glow?: boolean;
+    children?: ReactNode;
+    /** Extra classes for the inner content wrapper (below the header). */
+    bodyClassName?: string;
+}
+/**
+ * GlassPanel — a translucent, rounded surface wrapper with an optional header
+ * (title / description / action). The glassmorphism-lite building block for
+ * dashboard sections, map/chart cards, and side rails. Token-based, theme-aware,
+ * and follows the fe-libs no-movement hover policy.
+ */
+export declare function GlassPanel({ title, action, description, padding, treatment, glow, className, bodyClassName, children, ...rest }: GlassPanelProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/MetricCard.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+
+/** Semantic accent used to tint the sparkline, delta chip, and icon chip. */
+export type MetricAccent = 'brand' | 'blue' | 'success' | 'warning' | 'error' | 'neutral';
+export interface MetricDelta {
+    /** Formatted delta text, e.g. "+12%", "-5%", "+128". */
+    value: string;
+    /** Direction drives the arrow + semantic color. */
+    direction: 'up' | 'down' | 'flat';
+    /**
+     * When true, a downward direction is treated as GOOD (green) and upward as
+     * bad — for metrics where lower is better (e.g. failed deliveries, cost).
+     */
+    invert?: boolean;
+}
+interface MetricCardProps {
+    /** Main value to display */
+    value: string | number;
+    /** Label describing the metric */
+    label: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Change from previous period (e.g., "+12%", "-5%") — legacy inline form. */
+    change?: string;
+    /** Whether the change is positive, negative, or neutral (legacy). */
+    changeType?: 'positive' | 'negative' | 'neutral';
+    /** Optional subtitle or additional info */
+    subtitle?: string;
+    /** Optional trend indicator (legacy inline form). */
+    trend?: 'up' | 'down' | 'flat';
+    /** Card size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Optional click handler */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Boff UI 2.0 surface treatment. Defaults to the soft accent-wash metric surface. */
+    treatment?: 'metric' | 'glass';
+    /** Featured/active accent glow (used for the single hero metric per page). */
+    glow?: boolean;
+    /** Premium: a mini sparkline rendered in the card footer. Plain numbers. */
+    sparklineData?: number[];
+    /** Premium: a colored delta chip (preferred over `change`/`trend`). */
+    delta?: MetricDelta;
+    /** Accent color for the sparkline / icon chip / glow tint. Defaults to brand. */
+    accent?: MetricAccent;
+}
+/**
+ * MetricCard — a premium stat card: big value, label, an optional colored delta
+ * chip, an optional inline sparkline, and a token-tinted icon chip. Backward
+ * compatible with the legacy `change`/`changeType`/`trend` props.
+ */
+export declare function MetricCard({ value, label, icon, change, changeType, subtitle, trend, size, onClick, className, treatment, glow, sparklineData, delta, accent, }: MetricCardProps): import("react").JSX.Element;
+/**
+ * MetricCardSkeleton - Loading state for MetricCard
+ */
+export declare function MetricCardSkeleton({ size }: {
+    size?: 'sm' | 'md' | 'lg';
+}): import("react").JSX.Element;
+/**
+ * MetricGrid - Grid container for metric cards
+ */
+export declare function MetricGrid({ children, columns, className, }: {
+    children: ReactNode;
+    columns?: 2 | 3 | 4 | 5 | 6;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/Notice.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Notice — inline success / info feedback banner.
+ *
+ * The MoveTheWheels MFE does not mount its own sonner Toaster (mounting a second
+ * Toaster inside a host shell causes duplicate toasts), so action feedback is
+ * shown inline via this banner. Renders nothing when there is no message, so it
+ * can be dropped in unconditionally. Uses semantic status tokens so it themes
+ * correctly. Pair it with `useNotice` for auto-dismiss behaviour.
+ */
+type NoticeVariant = 'success' | 'info';
+interface NoticeProps {
+    message?: string | null;
+    variant?: NoticeVariant;
+}
+export declare function Notice({ message, variant }: NoticeProps): import("react").JSX.Element | null;
+/**
+ * useNotice — transient success/info message that auto-clears after a delay.
+ * Returns the current message plus a `notify` setter, mirroring a toast API.
+ */
+export declare function useNotice(autoDismissMs?: number): {
+    message: string | null;
+    notify: (next: string) => void;
+};
+export {};

package/dist/movethewheels/components/PageLayout.d.ts

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react';
+
+interface PageLayoutProps {
+    children: ReactNode;
+    /** Page title */
+    title?: string;
+    /** Page subtitle/description */
+    subtitle?: string;
+    /** Icon component to display next to title */
+    icon?: ReactNode;
+    /** Actions to display in header (buttons, etc.) */
+    headerActions?: ReactNode;
+    /** Additional header content below title */
+    headerContent?: ReactNode;
+    /** Maximum width of content: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    /** Whether to show the header section */
+    showHeader?: boolean;
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Additional CSS classes for the content area */
+    contentClassName?: string;
+    /**
+     * Boff UI 2.0 — render a subtle living aurora backdrop behind the page header.
+     * Reserved for the MFE's single primary page (the Dashboard). One per MFE.
+     */
+    hero?: boolean;
+    /**
+     * Boff UI 2.0 — the slice of the title to emphasise with a brand gradient.
+     * When provided, the title renders as `…<GradientText>{titleAccent}</GradientText>`.
+     */
+    titleAccent?: string;
+}
+/**
+ * PageLayout - A consistent page wrapper with responsive design
+ *
+ * Features:
+ * - Proper max-width constraints
+ * - Responsive padding
+ * - Animated entrance
+ * - Consistent header styling
+ */
+export declare function PageLayout({ children, title, subtitle, icon, headerActions, headerContent, maxWidth, showHeader, className, contentClassName, hero, titleAccent, }: PageLayoutProps): import("react").JSX.Element;
+/**
+ * PageSection - A section within a page with consistent spacing
+ */
+export declare function PageSection({ children, title, description, actions, className, }: {
+    children: ReactNode;
+    title?: string;
+    description?: string;
+    actions?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * EmptyState - A consistent empty/zero state component.
+ *
+ * Boff UI 2.0: when an `illustration` name is provided (one of the standard
+ * host-served names — empty-data, empty-search, empty-files, empty-people,
+ * empty-notifications, onboarding, empty-generic), it renders the on-brand
+ * IllustratedEmptyState. Otherwise it falls back to the legacy icon layout so
+ * existing callers keep working unchanged.
+ */
+export declare function EmptyState({ icon, title, description, action, className, illustration, }: {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    className?: string;
+    /** Standard illustration name served by the host at /illustrations/<name>.webp. */
+    illustration?: string;
+}): import("react").JSX.Element;
+/**
+ * LoadingState - A consistent loading state component
+ */
+export declare function LoadingState({ message }: {
+    message?: string;
+}): import("react").JSX.Element;
+/**
+ * ErrorState - A consistent error state component
+ */
+export declare function ErrorState({ title, message, onRetry, }: {
+    title?: string;
+    message?: string;
+    onRetry?: () => void;
+}): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/StatusBadge.d.ts

@@ -0,0 +1,49 @@
+type StatusType = 'order' | 'vehicle' | 'driver' | 'custom';
+interface StatusBadgeProps {
+    status: string;
+    type?: StatusType;
+    customColors?: {
+        bg: string;
+        text: string;
+    };
+    size?: 'sm' | 'md' | 'lg';
+    showDot?: boolean;
+    className?: string;
+}
+/**
+ * StatusBadge - Displays status with appropriate colors
+ */
+export declare function StatusBadge({ status, type, customColors, size, showDot, className, }: StatusBadgeProps): import("react").JSX.Element;
+/**
+ * Priority Badge - Displays priority level
+ */
+export declare function PriorityBadge({ priority, size, className, }: {
+    priority: 'low' | 'normal' | 'high' | 'urgent';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * TypeBadge - Displays B2B/B2C type
+ */
+export declare function TypeBadge({ type, size, className, }: {
+    type: 'b2b' | 'b2c';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * PaymentStatusBadge - Displays payment status
+ */
+export declare function PaymentStatusBadge({ status, size, className, }: {
+    status: 'pending' | 'paid' | 'failed' | 'refunded';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * VehicleTypeBadge - Displays vehicle type
+ */
+export declare function VehicleTypeBadge({ type, size, className, }: {
+    type: 'van' | 'truck' | 'motorcycle' | 'bicycle' | 'car';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/charts/ChartShell.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+/**
+ * Small on-brand empty state used by every chart when there is no data.
+ * Honest: we never fabricate a placeholder series.
+ */
+export declare function ChartEmpty({ message, height, className, }: {
+    message?: string;
+    height?: number | string;
+    className?: string;
+}): import("react").JSX.Element;
+interface ChartTooltipPayloadItem {
+    name?: string | number;
+    value?: string | number;
+    color?: string;
+    dataKey?: string | number;
+}
+/**
+ * Shared, token-styled recharts tooltip. Pass an optional value formatter.
+ */
+export declare function ChartTooltip({ active, payload, label, formatter, }: {
+    active?: boolean;
+    payload?: ChartTooltipPayloadItem[];
+    label?: ReactNode;
+    formatter?: (value: number | string, name: string) => ReactNode;
+}): import("react").JSX.Element | null;
+export {};

package/dist/movethewheels/components/charts/Sparkline.d.ts

@@ -0,0 +1,22 @@
+export interface SparklinePoint {
+    value: number;
+}
+interface SparklineProps {
+    /** Series values — plain numbers or `{ value }` points. */
+    data: Array<number | SparklinePoint>;
+    /** Chart color (defaults to brand orange). Sourced from a design token. */
+    color?: string;
+    /** Render style. */
+    variant?: 'area' | 'line';
+    height?: number;
+    width?: number | string;
+    className?: string;
+    strokeWidth?: number;
+}
+/**
+ * Sparkline — a tiny, axis-less trend chart for stat cards. Responsive within
+ * its container; renders nothing (an empty spacer) when there is no data so the
+ * card layout stays stable.
+ */
+export declare function Sparkline({ data, color, variant, height, width, className, strokeWidth, }: SparklineProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/charts/StatusDonut.d.ts

@@ -0,0 +1,23 @@
+export interface DonutSlice {
+    name: string;
+    value: number;
+    /** Optional explicit color (design-token string). */
+    color?: string;
+}
+interface StatusDonutProps {
+    data: DonutSlice[];
+    height?: number;
+    className?: string;
+    /** Big number rendered in the donut hole (e.g. a total). */
+    centerLabel?: string | number;
+    centerSubLabel?: string;
+    showLegend?: boolean;
+    emptyMessage?: string;
+    valueFormatter?: (value: number) => string;
+}
+/**
+ * StatusDonut — donut chart with a centered total and a token-styled legend.
+ * Responsive; renders an honest empty state when every slice is zero/absent.
+ */
+export declare function StatusDonut({ data, height, className, centerLabel, centerSubLabel, showLegend, emptyMessage, valueFormatter, }: StatusDonutProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/charts/TrendChart.d.ts

@@ -0,0 +1,29 @@
+export interface TrendSeries {
+    /** Key into each data row. */
+    dataKey: string;
+    /** Legend / tooltip label. */
+    name: string;
+    /** Explicit color (design-token string). Defaults to the categorical palette. */
+    color?: string;
+}
+interface TrendChartProps {
+    /** Row objects keyed by `xKey` + each series `dataKey`. */
+    data: Array<Record<string, string | number>>;
+    series: TrendSeries[];
+    /** Row key for the X axis (e.g. "date"). */
+    xKey: string;
+    variant?: 'area' | 'line';
+    height?: number;
+    className?: string;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    emptyMessage?: string;
+    /** Optional Y/tooltip value formatter. */
+    valueFormatter?: (value: number | string, name: string) => string;
+}
+/**
+ * TrendChart — multi-series area/line chart for trends over time. Fully
+ * responsive (ResponsiveContainer), token-colored, with an honest empty state.
+ */
+export declare function TrendChart({ data, series, xKey, variant, height, className, showLegend, showGrid, emptyMessage, valueFormatter, }: TrendChartProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/charts/VolumeBar.d.ts

@@ -0,0 +1,22 @@
+export interface VolumeSeries {
+    dataKey: string;
+    name: string;
+    color?: string;
+}
+interface VolumeBarProps {
+    data: Array<Record<string, string | number>>;
+    series: VolumeSeries[];
+    xKey: string;
+    height?: number;
+    className?: string;
+    showLegend?: boolean;
+    stacked?: boolean;
+    emptyMessage?: string;
+    valueFormatter?: (value: number | string, name: string) => string;
+}
+/**
+ * VolumeBar — grouped/stacked bar chart (e.g. weekly order volume, revenue by
+ * month). Responsive, token-colored, rounded bars, honest empty state.
+ */
+export declare function VolumeBar({ data, series, xKey, height, className, showLegend, stacked, emptyMessage, valueFormatter, }: VolumeBarProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/charts/chartTokens.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Chart color tokens.
+ *
+ * Recharts needs explicit color strings on its series props (fill/stroke) where
+ * Tailwind token classes cannot reach the SVG. We source every one of those
+ * colors from the fe-libs design tokens via `var(--color-*)` so charts stay
+ * theme-aware (light/dark + product themes) and never introduce raw palette
+ * colors. The CSS variables resolve to full color values in the app-shell.
+ */
+export declare const chartTokens: {
+    /** Product brand orange — primary accent / first data series. */
+    readonly brandPrimary: "var(--color-brand-primary)";
+    /** Brand secondary (orange-hover) — used sparingly for gradients. */
+    readonly brandSecondary: "var(--color-brand-secondary)";
+    /** Brand blue — the natural counterpart series to the orange. */
+    readonly brandBlue: "var(--color-chart-1)";
+    /** Categorical series palette (theme-aware). */
+    readonly series: readonly ["var(--color-brand-primary)", "var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)", "var(--color-chart-6)", "var(--color-chart-7)", "var(--color-chart-8)"];
+    readonly grid: "var(--color-chart-grid)";
+    readonly axis: "var(--color-chart-axis)";
+    readonly positive: "var(--color-chart-positive)";
+    readonly negative: "var(--color-chart-negative)";
+    readonly surface: "var(--color-bg-surface)";
+    readonly border: "var(--color-border-seam)";
+    readonly textSecondary: "var(--color-text-secondary)";
+    readonly textPrimary: "var(--color-text-primary)";
+};
+/** Resolve a categorical color by index, wrapping around the palette. */
+export declare function seriesColor(index: number): string;

package/dist/movethewheels/components/charts/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Chart primitives (recharts) — token-colored, responsive, honest empty states.
+ */
+export { Sparkline, type SparklinePoint } from './Sparkline';
+export { TrendChart, type TrendSeries } from './TrendChart';
+export { VolumeBar, type VolumeSeries } from './VolumeBar';
+export { StatusDonut, type DonutSlice } from './StatusDonut';
+export { ChartEmpty, ChartTooltip } from './ChartShell';
+export { chartTokens, seriesColor } from './chartTokens';

package/dist/movethewheels/components/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * MoveTheWheels Components
+ *
+ * All shared components for the microfrontend.
+ */
+export * from './ui';
+export { PageLayout, PageSection, EmptyState, LoadingState, ErrorState } from './PageLayout';
+export { MetricCard, MetricCardSkeleton, MetricGrid, type MetricAccent, type MetricDelta, } from './MetricCard';
+export { GlassPanel } from './GlassPanel';
+export { Sparkline, TrendChart, VolumeBar, StatusDonut, ChartEmpty, ChartTooltip, chartTokens, seriesColor, type SparklinePoint, type TrendSeries, type VolumeSeries, type DonutSlice, } from './charts';
+export { LogisticsMap, RouteMap, TrackingMap, MapCanvas, createPinIcon, createStopIcon, createCurrentIcon, isRealCoord, type LogisticsMarker, type LogisticsRoute, type RouteStop, type TrackPoint, type TrackEndpoint, type MapMarkerStatus, } from './maps';
+export { StatusBadge, PriorityBadge, TypeBadge, PaymentStatusBadge, VehicleTypeBadge, } from './StatusBadge';
+export { DataTable, type Column } from './DataTable';
+export { FormError } from './FormError';
+export { Notice, useNotice } from './Notice';
+export { DocumentsCard } from './DocumentsCard';

package/dist/movethewheels/components/maps/LogisticsMap.d.ts

@@ -0,0 +1,30 @@
+import { MapMarkerStatus } from './leaflet-setup';
+
+export interface LogisticsMarker {
+    id: string;
+    lat: number;
+    lng: number;
+    label: string;
+    status?: MapMarkerStatus;
+    sublabel?: string;
+}
+export interface LogisticsRoute {
+    points: Array<[number, number]>;
+    color?: string;
+}
+interface LogisticsMapProps {
+    markers: LogisticsMarker[];
+    routes?: LogisticsRoute[];
+    height?: number | string;
+    className?: string;
+    fitToMarkers?: boolean;
+    emptyMessage?: string;
+}
+/**
+ * LogisticsMap — an OSM map of brand-styled vehicle/asset markers plus optional
+ * route polylines. Auto-fits to the visible markers. Coordinates at null-island
+ * (0,0) or non-finite values are treated as "no location" and filtered out, so
+ * the map is never dumped in the ocean. Empty markers → honest empty state.
+ */
+export declare function LogisticsMap({ markers, routes, height, className, fitToMarkers, emptyMessage, }: LogisticsMapProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/maps/MapCanvas.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+/** SSR/lazy safety: only mount Leaflet (which touches the DOM) after mount. */
+export declare function useIsMounted(): boolean;
+/**
+ * Imperatively fit the map to a set of [lat,lng] points whenever they change.
+ * Invalidates size on mount so tiles render correctly inside flex/grid parents.
+ */
+export declare function FitBounds({ points, padding, maxZoom, }: {
+    points: Array<[number, number]>;
+    padding?: number;
+    maxZoom?: number;
+}): null;
+interface MapCanvasProps {
+    points: Array<[number, number]>;
+    height?: number | string;
+    className?: string;
+    fitToMarkers?: boolean;
+    /** Fallback center when there are no points but we still render the canvas. */
+    center?: [number, number];
+    zoom?: number;
+    children?: ReactNode;
+    /** Rendered instead of the map when there are no points. */
+    emptyState?: ReactNode;
+}
+/**
+ * MapCanvas — the shared OSM MapContainer used by every map component. Handles
+ * mount-safety, container sizing, rounded/overflow styling, tile layer, and
+ * auto-fit. Renders `emptyState` when there is nothing to plot.
+ */
+export declare function MapCanvas({ points, height, className, fitToMarkers, center, zoom, children, emptyState, }: MapCanvasProps): import("react").JSX.Element;
+export {};

package/dist/movethewheels/components/maps/RouteMap.d.ts

@@ -0,0 +1,20 @@
+export interface RouteStop {
+    lat: number;
+    lng: number;
+    label: string;
+    sequence: number;
+}
+interface RouteMapProps {
+    stops: RouteStop[];
+    height?: number | string;
+    className?: string;
+    /** Polyline color (design-token string). Defaults to brand blue. */
+    routeColor?: string;
+    emptyMessage?: string;
+}
+/**
+ * RouteMap — numbered stop markers in sequence connected by a polyline. Filters
+ * out stops without a real coordinate and orders the line by `sequence`.
+ */
+export declare function RouteMap({ stops, height, className, routeColor, emptyMessage, }: RouteMapProps): import("react").JSX.Element;
+export {};