{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "haulage-vehicle-select", "title": "Haulage Vehicle Select", "description": "A picker for common UK construction and waste haulage vehicles — tippers, grabs, artics, RoRo, skips and more — with drawn side-profile artwork, payload/volume/CO2e details and loads-required and movement-emissions estimates, in grid, list and compact form variants.", "dependencies": [ "@untitledui/icons@^0.0.22" ], "registryDependencies": [ "@nx-ui/badge", "@nx-ui/data-haulage-vehicles", "@nx-ui/popover", "@nx-ui/utils" ], "files": [ { "path": "components/blocks/domain/haulage-vehicle-select/haulage-vehicle-select.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Check,\n ChevronDown,\n Cloud01,\n Container,\n Feather,\n Package,\n Scale01,\n SearchLg,\n Tool01,\n Truck01,\n XClose,\n} from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n HAULAGE_VEHICLES,\n loadsRequired,\n movementCo2eKg,\n type HaulageVehicle,\n type HaulageVehicleCategory,\n} from \"@/lib/data/haulage-vehicles\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nimport { VehicleArtwork } from \"./vehicle-artwork\"\nimport type {\n HaulageQuantity,\n HaulageVehicleSelectProps,\n} from \"./types\"\n\n// ── Category metadata ─────────────────────────────────────────────────────────\n\nconst CATEGORY_META: Record<\n HaulageVehicleCategory,\n {\n label: string\n Icon: React.ComponentType<{ className?: string }>\n badge: \"brand\" | \"blue\" | \"success\" | \"warning\"\n }\n> = {\n \"rigid-tipper\": { label: \"Rigid tipper\", Icon: Truck01, badge: \"brand\" },\n articulated: { label: \"Articulated\", Icon: Truck01, badge: \"blue\" },\n container: { label: \"Container\", Icon: Container, badge: \"success\" },\n specialist: { label: \"Specialist\", Icon: Tool01, badge: \"warning\" },\n}\n\nconst CATEGORY_ORDER: HaulageVehicleCategory[] = [\n \"rigid-tipper\",\n \"articulated\",\n \"container\",\n \"specialist\",\n]\n\n// ── Small formatting helpers ──────────────────────────────────────────────────\n\n/** Round to at most one decimal place and drop a trailing \".0\". */\nfunction num(n: number): string {\n return Number.isInteger(n) ? String(n) : n.toFixed(1)\n}\n\n/**\n * Format the per-tonne-km carbon-intensity figure to 2 decimal places.\n *\n * Values across the fleet cluster tightly (0.08-0.18 kg/t·km), so the 1dp\n * rounding used by `num()` collapses almost every vehicle to the same\n * \"0.1\" label. This keeps the differentiation the chip exists to show.\n */\nfunction co2ePerTonneKm(n: number): string {\n return n.toFixed(2)\n}\n\n/** A tonnage total, scaled to tonnes/kt with sensible precision. */\nfunction tonnesLabel(t: number): string {\n if (t >= 1000) return `${num(t / 1000)} kt`\n if (t >= 100) return `${Math.round(t)} t`\n return `${num(t)} t`\n}\n\n/** kgCO2e total, promoted to tonnes above 1 000 kg. */\nfunction co2eLabel(kg: number): string {\n if (kg >= 1000) return `${num(kg / 1000)} t CO2e`\n return `${Math.round(kg)} kg CO2e`\n}\n\nfunction hasQuantity(q?: HaulageQuantity): q is HaulageQuantity {\n return Boolean(q && ((q.tonnes && q.tonnes > 0) || (q.m3 && q.m3 > 0)))\n}\n\n// ── Controlled/uncontrolled selection hook ────────────────────────────────────\n\nfunction useSelection(\n value: string | null | undefined,\n defaultValue: string | null | undefined,\n onValueChange: HaulageVehicleSelectProps[\"onValueChange\"],\n vehicles: HaulageVehicle[]\n) {\n const isControlled = value !== undefined\n const [internal, setInternal] = React.useState(\n defaultValue ?? null\n )\n const selectedKey = isControlled ? (value ?? null) : internal\n\n const select = React.useCallback(\n (key: string | null) => {\n if (!isControlled) setInternal(key)\n const vehicle = key ? vehicles.find((v) => v.key === key) ?? null : null\n onValueChange?.(key, vehicle)\n },\n [isControlled, onValueChange, vehicles]\n )\n\n return { selectedKey, select }\n}\n\n// ── Metric chips shared across variants ───────────────────────────────────────\n\n/** The core spec line: payload · body · GVW. */\nfunction SpecRow({ vehicle }: { vehicle: HaulageVehicle }) {\n return (\n
\n
\n \n
Payload
\n
\n \n {num(vehicle.payloadT)} t\n {\" \"}\n payload\n
\n
\n
\n \n
Body volume
\n
\n \n {num(vehicle.bodyVolumeM3)} m³\n \n
\n
\n
\n
Gross vehicle weight
\n
\n {num(vehicle.grossVehicleWeightT)} t GVW\n
\n
\n
\n )\n}\n\n/**\n * The DEFRA-style carbon-intensity chip (kgCO2e per tonne-km).\n *\n * This chip is always rendered inside a `role=\"radio\"` card button (grid and\n * list variants), so it can't wrap itself in a focusable `Tooltip` trigger\n * without nesting an interactive element inside the radio and breaking that\n * semantics. Instead the explanation ships as an `sr-only` span — reachable by\n * screen readers, invisible to sighted users who already read the visible\n * abbreviated label — rather than a native `title` attribute, which is\n * unreachable by keyboard/touch and most screen readers.\n */\nfunction Co2eChip({ vehicle }: { vehicle: HaulageVehicle }) {\n return (\n \n \n {co2ePerTonneKm(vehicle.co2ePerTonneKmKg)} kg/t·km\n \n {co2ePerTonneKm(vehicle.co2ePerTonneKmKg)} kg CO2e per tonne-kilometre, indicative\n DEFRA-style figure including empty running\n \n \n )\n}\n\n/** Self-loading / road-legal capability badges. */\nfunction CapabilityBadges({ vehicle }: { vehicle: HaulageVehicle }) {\n return (\n
\n {vehicle.selfLoading ? (\n \n \n Self-loading\n \n ) : null}\n {vehicle.roadLegal ? (\n Road-legal\n ) : (\n Site-only\n )}\n
\n )\n}\n\n/**\n * The estimator context block: loads required for the given quantity and, when a\n * distance is supplied, the movement's total CO2e. Rendered only when a quantity\n * is set.\n */\nfunction EstimateContext({\n vehicle,\n quantity,\n distanceKm,\n emphasis = false,\n}: {\n vehicle: HaulageVehicle\n quantity: HaulageQuantity\n distanceKm?: number\n emphasis?: boolean\n}) {\n const loads = loadsRequired(vehicle, {\n tonnes: quantity.tonnes,\n m3: quantity.m3,\n })\n const totalCo2e =\n distanceKm && distanceKm > 0\n ? movementCo2eKg(vehicle, distanceKm, { loads })\n : null\n\n return (\n
\n \n ≈ {loads} load{loads === 1 ? \"\" : \"s\"}\n \n {totalCo2e != null ? (\n \n ≈ {co2eLabel(totalCo2e)} total\n \n ) : null}\n
\n )\n}\n\n/** Full dimensions + access notes + typical use — the details view. */\nfunction VehicleDetails({ vehicle }: { vehicle: HaulageVehicle }) {\n return (\n
\n
\n
\n \n
\n
\n
\n {vehicle.name}\n
\n {vehicle.aka?.length ? (\n
\n {vehicle.aka.join(\" · \")}\n
\n ) : null}\n
\n
\n

{vehicle.typicalUse}

\n
\n \n \n \n \n \n \n {vehicle.euroClass ? (\n \n ) : null}\n
\n {vehicle.accessNotes ? (\n

\n Access: \n {vehicle.accessNotes}\n

\n ) : null}\n
\n )\n}\n\nfunction Detail({ label, value }: { label: string; value: string }) {\n return (\n
\n
{label}
\n
{value}
\n
\n )\n}\n\n// ── Filtering ─────────────────────────────────────────────────────────────────\n\ninterface FilterState {\n categories: Set\n roadLegalOnly: boolean\n selfLoadingOnly: boolean\n}\n\nfunction useFilteredVehicles(\n vehicles: HaulageVehicle[],\n filters: FilterState\n) {\n return React.useMemo(() => {\n return vehicles.filter((v) => {\n if (filters.categories.size > 0 && !filters.categories.has(v.category)) {\n return false\n }\n if (filters.roadLegalOnly && !v.roadLegal) return false\n if (filters.selfLoadingOnly && !v.selfLoading) return false\n return true\n })\n }, [vehicles, filters])\n}\n\n/** Category chips + road-legal / self-loading toggles. */\nfunction FilterBar({\n vehicles,\n filters,\n setFilters,\n}: {\n vehicles: HaulageVehicle[]\n filters: FilterState\n setFilters: React.Dispatch>\n}) {\n const available = React.useMemo(() => {\n const set = new Set()\n for (const v of vehicles) set.add(v.category)\n return CATEGORY_ORDER.filter((c) => set.has(c))\n }, [vehicles])\n\n const toggleCategory = (c: HaulageVehicleCategory) => {\n setFilters((prev) => {\n const next = new Set(prev.categories)\n if (next.has(c)) next.delete(c)\n else next.add(c)\n return { ...prev, categories: next }\n })\n }\n\n return (\n
\n
\n {available.map((c) => {\n const meta = CATEGORY_META[c]\n const active = filters.categories.has(c)\n return (\n toggleCategory(c)}\n className={cn(\n \"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors outline-none focus-visible:ring-4 focus-visible:ring-ring/25\",\n active\n ? \"border-primary/40 bg-primary/10 text-foreground\"\n : \"border-border bg-background text-text-tertiary hover:bg-muted hover:text-foreground\"\n )}\n >\n \n {meta.label}\n \n )\n })}\n
\n \n \n setFilters((p) => ({ ...p, roadLegalOnly: !p.roadLegalOnly }))\n }\n />\n \n setFilters((p) => ({ ...p, selfLoadingOnly: !p.selfLoadingOnly }))\n }\n />\n
\n )\n}\n\nfunction FilterToggle({\n label,\n active,\n onToggle,\n}: {\n label: string\n active: boolean\n onToggle: () => void\n}) {\n return (\n \n {active ? (\n \n ) : (\n \n )}\n {label}\n \n )\n}\n\nfunction EmptyState({ onReset }: { onReset: () => void }) {\n return (\n
\n \n

No vehicles match

\n

\n No vehicle in the fleet matches every active filter.\n

\n \n Clear filters\n \n
\n )\n}\n\n// ── Grid variant (radiogroup of cards) ────────────────────────────────────────\n\nfunction GridCard({\n vehicle,\n selected,\n disabled,\n tabIndex,\n quantity,\n distanceKm,\n onSelect,\n registerRef,\n onKeyDown,\n}: {\n vehicle: HaulageVehicle\n selected: boolean\n disabled: boolean\n tabIndex: number\n quantity?: HaulageQuantity\n distanceKm?: number\n onSelect: () => void\n registerRef: (el: HTMLButtonElement | null) => void\n onKeyDown: (e: React.KeyboardEvent) => void\n}) {\n const meta = CATEGORY_META[vehicle.category]\n return (\n \n \n {selected ? : null}\n \n\n
\n \n
\n\n
\n
\n
\n
\n {vehicle.name}\n
\n {vehicle.aka?.length ? (\n
\n {vehicle.aka[0]}\n
\n ) : null}\n
\n \n {meta.label}\n \n
\n\n \n\n
\n \n \n
\n\n {hasQuantity(quantity) ? (\n
\n \n
\n ) : null}\n
\n \n )\n}\n\nfunction GridVariant({\n vehicles,\n selectedKey,\n disabledKeys,\n quantity,\n distanceKm,\n onSelect,\n}: {\n vehicles: HaulageVehicle[]\n selectedKey: string | null\n disabledKeys: Set\n quantity?: HaulageQuantity\n distanceKm?: number\n onSelect: (key: string) => void\n}) {\n const refs = React.useRef>(new Map())\n const groupRef = React.useRef(null)\n // Tracks whether focus is currently inside this radiogroup, so the recovery\n // effect below only steals focus when the group actually had it — never\n // grabs focus unprompted.\n const hasFocusWithinRef = React.useRef(false)\n\n const enabled = vehicles.filter((v) => !disabledKeys.has(v.key))\n\n // Roving tabindex: the selected card, or the first enabled one, is tabbable.\n const rovingKey =\n selectedKey && enabled.some((v) => v.key === selectedKey)\n ? selectedKey\n : enabled[0]?.key ?? null\n\n const focusKey = React.useCallback((key: string) => {\n refs.current.get(key)?.focus()\n }, [])\n\n // Roving-tabindex recovery: if the card holding focus is removed by a filter\n // chip or a disabledKeys change, the browser drops focus to . When that\n // happens while this group held focus, move focus onto the new roving card\n // instead of leaving it stranded.\n React.useEffect(() => {\n if (!hasFocusWithinRef.current) return\n if (!rovingKey) return\n const group = groupRef.current\n if (!group || group.contains(document.activeElement)) return\n refs.current.get(rovingKey)?.focus()\n }, [rovingKey])\n\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent, key: string) => {\n const keys = enabled.map((v) => v.key)\n const idx = keys.indexOf(key)\n if (idx === -1) return\n\n let nextIdx = idx\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n nextIdx = (idx + 1) % keys.length\n break\n case \"ArrowLeft\":\n case \"ArrowUp\":\n nextIdx = (idx - 1 + keys.length) % keys.length\n break\n case \"Home\":\n nextIdx = 0\n break\n case \"End\":\n nextIdx = keys.length - 1\n break\n case \" \":\n case \"Enter\":\n e.preventDefault()\n onSelect(key)\n return\n default:\n return\n }\n e.preventDefault()\n const nextKey = keys[nextIdx]\n focusKey(nextKey)\n // Arrow navigation moves selection, matching native radiogroup behaviour.\n onSelect(nextKey)\n },\n [enabled, focusKey, onSelect]\n )\n\n return (\n {\n hasFocusWithinRef.current = true\n }}\n onBlur={(e) => {\n // A real focus move to another element (inside or outside the group)\n // sets relatedTarget; leave hasFocusWithinRef alone unless focus is\n // actually leaving the group. relatedTarget is null when the focused\n // card itself was removed from the DOM (filter/disabledKeys change),\n // which the recovery effect below needs to still see as \"had focus\".\n if (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node)) {\n return\n }\n hasFocusWithinRef.current = e.relatedTarget == null\n }}\n >\n {vehicles.map((vehicle) => {\n const disabled = disabledKeys.has(vehicle.key)\n return (\n onSelect(vehicle.key)}\n registerRef={(el) => {\n if (el) refs.current.set(vehicle.key, el)\n else refs.current.delete(vehicle.key)\n }}\n onKeyDown={(e) => handleKeyDown(e, vehicle.key)}\n />\n )\n })}\n \n )\n}\n\n// ── List variant (dense rows + details popover) ───────────────────────────────\n\nfunction ListRow({\n vehicle,\n selected,\n disabled,\n tabIndex,\n quantity,\n distanceKm,\n onSelect,\n registerRef,\n onKeyDown,\n}: {\n vehicle: HaulageVehicle\n selected: boolean\n disabled: boolean\n tabIndex: number\n quantity?: HaulageQuantity\n distanceKm?: number\n onSelect: () => void\n registerRef: (el: HTMLButtonElement | null) => void\n onKeyDown: (e: React.KeyboardEvent) => void\n}) {\n const meta = CATEGORY_META[vehicle.category]\n return (\n \n \n \n {selected ? : null}\n \n
\n \n
\n
\n
\n \n {vehicle.name}\n \n {meta.label}\n {vehicle.selfLoading ? (\n Self-loading\n ) : null}\n {!vehicle.roadLegal ? (\n Site-only\n ) : null}\n
\n \n
\n
\n \n {hasQuantity(quantity) ? (\n \n ) : null}\n
\n \n \n \n Details\n \n }\n />\n \n \n \n \n \n )\n}\n\nfunction ListVariant({\n vehicles,\n selectedKey,\n disabledKeys,\n quantity,\n distanceKm,\n onSelect,\n}: {\n vehicles: HaulageVehicle[]\n selectedKey: string | null\n disabledKeys: Set\n quantity?: HaulageQuantity\n distanceKm?: number\n onSelect: (key: string) => void\n}) {\n const refs = React.useRef>(new Map())\n const groupRef = React.useRef(null)\n // Tracks whether focus is currently inside this radiogroup, so the recovery\n // effect below only steals focus when the group actually had it — never\n // grabs focus unprompted.\n const hasFocusWithinRef = React.useRef(false)\n const enabled = vehicles.filter((v) => !disabledKeys.has(v.key))\n const rovingKey =\n selectedKey && enabled.some((v) => v.key === selectedKey)\n ? selectedKey\n : enabled[0]?.key ?? null\n\n // Roving-tabindex recovery: if the row holding focus is removed by a filter\n // chip or a disabledKeys change, the browser drops focus to . When that\n // happens while this group held focus, move focus onto the new roving row\n // instead of leaving it stranded.\n React.useEffect(() => {\n if (!hasFocusWithinRef.current) return\n if (!rovingKey) return\n const group = groupRef.current\n if (!group || group.contains(document.activeElement)) return\n refs.current.get(rovingKey)?.focus()\n }, [rovingKey])\n\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent, key: string) => {\n const keys = enabled.map((v) => v.key)\n const idx = keys.indexOf(key)\n if (idx === -1) return\n let nextIdx = idx\n switch (e.key) {\n case \"ArrowDown\":\n nextIdx = (idx + 1) % keys.length\n break\n case \"ArrowUp\":\n nextIdx = (idx - 1 + keys.length) % keys.length\n break\n case \"Home\":\n nextIdx = 0\n break\n case \"End\":\n nextIdx = keys.length - 1\n break\n case \" \":\n case \"Enter\":\n e.preventDefault()\n onSelect(key)\n return\n default:\n return\n }\n e.preventDefault()\n const nextKey = keys[nextIdx]\n refs.current.get(nextKey)?.focus()\n onSelect(nextKey)\n },\n [enabled, onSelect]\n )\n\n return (\n {\n hasFocusWithinRef.current = true\n }}\n onBlur={(e) => {\n // A real focus move to another element (inside or outside the group)\n // sets relatedTarget; leave hasFocusWithinRef alone unless focus is\n // actually leaving the group. relatedTarget is null when the focused\n // row itself was removed from the DOM (filter/disabledKeys change),\n // which the recovery effect below needs to still see as \"had focus\".\n if (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node)) {\n return\n }\n hasFocusWithinRef.current = e.relatedTarget == null\n }}\n >\n {vehicles.map((vehicle) => {\n const disabled = disabledKeys.has(vehicle.key)\n return (\n onSelect(vehicle.key)}\n registerRef={(el) => {\n if (el) refs.current.set(vehicle.key, el)\n else refs.current.delete(vehicle.key)\n }}\n onKeyDown={(e) => handleKeyDown(e, vehicle.key)}\n />\n )\n })}\n \n )\n}\n\n// ── Compact variant (combobox-style trigger + popover listbox) ────────────────\n\nfunction CompactVariant({\n vehicles,\n selectedKey,\n disabledKeys,\n quantity,\n distanceKm,\n onSelect,\n className,\n}: {\n vehicles: HaulageVehicle[]\n selectedKey: string | null\n disabledKeys: Set\n quantity?: HaulageQuantity\n distanceKm?: number\n onSelect: (key: string | null) => void\n className?: string\n}) {\n const [open, setOpen] = React.useState(false)\n const [query, setQuery] = React.useState(\"\")\n const selected = selectedKey\n ? vehicles.find((v) => v.key === selectedKey) ?? null\n : null\n\n const filtered = React.useMemo(() => {\n const q = query.trim().toLowerCase()\n if (!q) return vehicles\n return vehicles.filter((v) => {\n const haystack = [v.name, ...(v.aka ?? []), CATEGORY_META[v.category].label]\n .join(\" \")\n .toLowerCase()\n return haystack.includes(q)\n })\n }, [vehicles, query])\n\n const choose = (key: string) => {\n onSelect(key)\n setOpen(false)\n setQuery(\"\")\n }\n\n return (\n {\n setOpen(next)\n if (!next) setQuery(\"\")\n }}\n >\n \n {selected ? (\n \n \n \n \n \n {selected.name}\n \n \n ) : (\n Select a vehicle…\n )}\n \n \n }\n />\n \n
\n \n setQuery(e.target.value)}\n placeholder=\"Search vehicles…\"\n aria-label=\"Search vehicles\"\n className=\"w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n />\n {selected ? (\n onSelect(null)}\n aria-label=\"Clear selection\"\n className=\"shrink-0 cursor-pointer rounded-md p-0.5 text-fg-quaternary hover:text-foreground focus-visible:ring-4 focus-visible:ring-ring/25 outline-none\"\n >\n \n \n ) : null}\n
\n
\n {filtered.length === 0 ? (\n

\n No vehicles match “{query}”.\n

\n ) : (\n filtered.map((vehicle) => {\n const disabled = disabledKeys.has(vehicle.key)\n const isSelected = selectedKey === vehicle.key\n return (\n choose(vehicle.key)}\n className={cn(\n \"flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 text-left outline-none transition-colors\",\n \"hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring/25\",\n isSelected && \"bg-primary/5 dark:bg-primary/10\",\n disabled && \"pointer-events-none cursor-not-allowed opacity-50\"\n )}\n >\n \n \n \n \n \n {vehicle.name}\n \n \n {num(vehicle.payloadT)} t · {num(vehicle.bodyVolumeM3)} m³\n {hasQuantity(quantity)\n ? ` · ≈ ${loadsRequired(vehicle, { tonnes: quantity.tonnes, m3: quantity.m3 })} loads`\n : \"\"}\n {hasQuantity(quantity) && distanceKm && distanceKm > 0\n ? ` · ≈ ${co2eLabel(movementCo2eKg(vehicle, distanceKm, { loads: loadsRequired(vehicle, { tonnes: quantity.tonnes, m3: quantity.m3 }) }))}`\n : \"\"}\n \n \n {isSelected ? (\n \n ) : null}\n \n )\n })\n )}\n
\n \n \n )\n}\n\n// ── Public component ──────────────────────────────────────────────────────────\n\n/**\n * HaulageVehicleSelect — pick a UK haulage vehicle for a construction-material,\n * muck-away or waste movement.\n *\n * Three variants share one selection model: a card **grid** (radiogroup with\n * roving focus and arrow-key selection), detailed **list** rows with a details\n * popover, and a **compact** combobox trigger for forms. Supply a `quantity`\n * (and optionally `distanceKm`) to surface the loads required and the movement's\n * indicative total CO2e on every card — the estimator story. Filter chips and\n * capability toggles narrow the fleet on the grid and list variants.\n */\nexport function HaulageVehicleSelect({\n vehicles = HAULAGE_VEHICLES,\n value,\n defaultValue,\n onValueChange,\n variant = \"grid\",\n quantity,\n distanceKm,\n filterable,\n disabledKeys,\n className,\n}: HaulageVehicleSelectProps) {\n const { selectedKey, select } = useSelection(\n value,\n defaultValue,\n onValueChange,\n vehicles\n )\n\n const disabledSet = React.useMemo(\n () => new Set(disabledKeys ?? []),\n [disabledKeys]\n )\n\n const showFilters = filterable ?? variant !== \"compact\"\n\n const [filters, setFilters] = React.useState({\n categories: new Set(),\n roadLegalOnly: false,\n selfLoadingOnly: false,\n })\n\n const visible = useFilteredVehicles(\n vehicles,\n showFilters\n ? filters\n : { categories: new Set(), roadLegalOnly: false, selfLoadingOnly: false }\n )\n\n const resetFilters = React.useCallback(\n () =>\n setFilters({\n categories: new Set(),\n roadLegalOnly: false,\n selfLoadingOnly: false,\n }),\n []\n )\n\n if (variant === \"compact\") {\n return (\n \n )\n }\n\n return (\n
\n {showFilters ? (\n \n ) : null}\n\n {visible.length === 0 ? (\n \n ) : variant === \"list\" ? (\n \n ) : (\n \n )}\n
\n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/haulage-vehicle-select/haulage-vehicle-select.tsx" }, { "path": "components/blocks/domain/haulage-vehicle-select/index.ts", "content": "export { HaulageVehicleSelect } from \"./haulage-vehicle-select\"\nexport { VehicleArtwork, type VehicleArtworkProps } from \"./vehicle-artwork\"\nexport type {\n HaulageQuantity,\n HaulageVehicleSelectProps,\n HaulageVehicleSelectVariant,\n} from \"./types\"\n", "type": "registry:component", "target": "components/blocks/domain/haulage-vehicle-select/index.ts" }, { "path": "components/blocks/domain/haulage-vehicle-select/types.ts", "content": "/** Shared types for the HaulageVehicleSelect block. */\n\nimport type { HaulageVehicle } from \"@/lib/data/haulage-vehicles\"\n\n/** A material quantity to size loads against — tonnage and/or a volume. */\nexport interface HaulageQuantity {\n tonnes?: number\n m3?: number\n}\n\n/** Layout of the selector. */\nexport type HaulageVehicleSelectVariant = \"grid\" | \"list\" | \"compact\"\n\nexport interface HaulageVehicleSelectProps {\n /** Vehicles to offer; defaults to the full `HAULAGE_VEHICLES` dataset. */\n vehicles?: HaulageVehicle[]\n /** Controlled selected vehicle key, or `null` for none. */\n value?: string | null\n /** Uncontrolled initial selection. */\n defaultValue?: string | null\n /** Fires with the new key and the resolved vehicle (both `null` when cleared). */\n onValueChange?: (key: string | null, vehicle: HaulageVehicle | null) => void\n /**\n * \"grid\" — card grid with radiogroup semantics (default);\n * \"list\" — dense detailed rows with a details popover;\n * \"compact\" — a Select-style trigger + combobox popover, for forms.\n */\n variant?: HaulageVehicleSelectVariant\n /**\n * When set, each card/row shows the whole loads required for this quantity and\n * (with `distanceKm`) the estimated total CO2e for the movement.\n */\n quantity?: HaulageQuantity\n /** With `quantity`, the one-way haul distance in km used for the CO2e estimate. */\n distanceKm?: number\n /**\n * Show category filter chips and road-legal / self-loading toggles. Defaults to\n * true on the grid and list variants, off on compact.\n */\n filterable?: boolean\n /** Vehicle keys rendered non-selectable. */\n disabledKeys?: string[]\n className?: string\n}\n", "type": "registry:component", "target": "components/blocks/domain/haulage-vehicle-select/types.ts" }, { "path": "components/blocks/domain/haulage-vehicle-select/vehicle-artwork.tsx", "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { HaulageVehicle } from \"@/lib/data/haulage-vehicles\"\n\n/**\n * VehicleArtwork — inline-SVG side-profile silhouettes for every haulage vehicle\n * key. Themable: strokes use `currentColor` and fills use semantic token classes\n * (`fill-muted`, `fill-card`, …) so the artwork follows light/dark and every\n * brand. No raster images.\n *\n * Shared drawing system — every profile uses the same coordinate conventions so\n * the fleet reads at a consistent scale and stroke:\n * - viewBox height 100, ground line at y=82, cab/body baseline ~y=74.\n * - Wheels are `Wheel` (tyre + hub + centre) at a common radius (r≈9), so a\n * 4-wheeler and a 44-tonne artic share the same \"size of a wheel\" hint.\n * - 1-metre tick marks along the ground give a real scale reference; widths of\n * the viewBox scale with the vehicle's true length.\n * - A small human figure stands at the left for human scale.\n * Strokes are 2 units; caps/joins rounded; `vectorEffect=\"non-scaling-stroke\"`\n * keeps line weight even when the SVG is sized down via className.\n */\n\nconst GROUND_Y = 82\nconst WHEEL_R = 8.5\nconst STROKE = 2\n\n/** A wheel: outer tyre, inner hub ring, centre. Draws from its ground-contact x. */\nfunction Wheel({ cx }: { cx: number }) {\n const cy = GROUND_Y - WHEEL_R\n return (\n \n \n \n \n \n )\n}\n\n/** The shared ground line plus evenly spaced 1 m tick marks across the width. */\nfunction Ground({ width, metres }: { width: number; metres: number }) {\n const startX = 6\n const endX = width - 6\n const step = (endX - startX) / metres\n const ticks = Array.from({ length: metres + 1 }, (_, i) => startX + i * step)\n return (\n \n \n {ticks.map((x, i) => (\n \n ))}\n \n )\n}\n\n/** A small human figure for scale, standing on the ground at x. ~1.8 m tall. */\nfunction HumanScale({ x }: { x: number }) {\n const feet = GROUND_Y\n const head = feet - 20\n return (\n \n \n \n \n \n \n \n \n )\n}\n\n/** Common stroke props for all body/panel paths. */\nconst line = {\n stroke: \"currentColor\",\n strokeWidth: STROKE,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n vectorEffect: \"non-scaling-stroke\" as const,\n}\n\n/** A rigid tractor-unit cab (bonneted/flat-front lorry cab) ending at `rearX`. */\nfunction Cab({\n frontX,\n rearX,\n roofY,\n}: {\n frontX: number\n rearX: number\n roofY: number\n}) {\n const base = GROUND_Y - 5\n const windscreenX = frontX + (rearX - frontX) * 0.5\n return (\n \n \n {/* windscreen + door split */}\n \n \n \n )\n}\n\n// ── Individual vehicle profiles ──────────────────────────────────────────────\n// Each returns just the vehicle body/wheels; Ground + HumanScale + the \n// wrapper are added by VehicleArtwork. All share the y-conventions above.\n\nfunction TipperRigid({\n wheelXs,\n cabFrontX,\n cabRearX,\n bodyRearX,\n}: {\n wheelXs: number[]\n cabFrontX: number\n cabRearX: number\n bodyRearX: number\n}) {\n // Muck-away tipper body: a tall headboard rising just behind the cab, the\n // floor raking gently down to a lower tailgate at the rear — the recognisable\n // rigid-tipper silhouette. The body sits directly on the chassis rail.\n const bodyFrontX = cabRearX\n const chassisY = GROUND_Y - 20\n const bodyTopFront = chassisY - 26 // headboard (tall, behind the cab)\n const bodyTopRear = chassisY - 18 // tailgate (lower)\n return (\n \n \n {/* chassis rail */}\n \n {/* raked muck body sitting on the chassis */}\n \n {/* tailgate hinge detail at the rear */}\n \n {wheelXs.map((x) => (\n \n ))}\n \n )\n}\n\nexport interface VehicleArtworkProps {\n /** The vehicle to draw. Pass this or `vehicleKey`. */\n vehicle?: HaulageVehicle\n /** The vehicle key to draw. Pass this or `vehicle`. */\n vehicleKey?: string\n /** Sizing / colour overrides — the SVG scales to its box. */\n className?: string\n}\n\n/** viewBox width per profile (height is always 100). Wider = longer vehicle. */\nconst VIEW_W: Record = {\n \"tipper-4x2\": 150,\n \"tipper-6x4\": 168,\n \"tipper-8x4\": 188,\n \"grab-8x4\": 200,\n \"artic-tipper\": 240,\n \"walking-floor\": 244,\n \"roro-hook\": 200,\n \"skip-loader\": 150,\n adt: 210,\n \"truck-mixer\": 186,\n \"tractor-trailer\": 216,\n}\n\n/** Ground-tick count (≈ vehicle length in whole metres) per profile. */\nconst METRES: Record = {\n \"tipper-4x2\": 7,\n \"tipper-6x4\": 8,\n \"tipper-8x4\": 9,\n \"grab-8x4\": 10,\n \"artic-tipper\": 16,\n \"walking-floor\": 16,\n \"roro-hook\": 10,\n \"skip-loader\": 7,\n adt: 10,\n \"truck-mixer\": 9,\n \"tractor-trailer\": 11,\n}\n\n/**\n * Render the side-profile for one vehicle. The big `switch` keeps each profile's\n * geometry self-documenting and independent; shared parts (wheels, ground, cab,\n * human scale) come from the helpers above.\n */\nfunction Profile({ vKey, width }: { vKey: string; width: number }) {\n switch (vKey) {\n case \"tipper-4x2\":\n return (\n \n )\n case \"tipper-6x4\":\n return (\n \n )\n case \"tipper-8x4\":\n return (\n \n )\n case \"grab-8x4\": {\n // 8-wheel rigid: cab, a folded hydraulic grab crane mounted behind the\n // cab, then a muck body. The crane sits in a gap ahead of the body.\n const chassisY = GROUND_Y - 20\n const bodyFrontX = 74\n const bodyRearX = 188\n const columnX = 60\n return (\n \n \n {/* chassis rail */}\n \n {/* muck body (raked headboard → tailgate) */}\n \n {/* grab crane: pedestal + folded knuckle boom rising behind the cab */}\n \n \n {/* folded clamshell grab bucket hanging from the boom tip */}\n \n \n \n \n \n \n )\n }\n case \"artic-tipper\": {\n // Tractor unit (steer axle + close-spaced rear bogie) + tipping semi-trailer\n // on a 3-axle bogie — a UK 44-tonner: 3 tractor axles + 3 trailer axles.\n const chassisY = GROUND_Y - 20\n const bodyTopFront = chassisY - 16\n const bodyTopRear = chassisY - 26\n return (\n \n \n {/* fifth-wheel coupling + trailer chassis */}\n \n \n {/* raked bulk tipper body over the trailer */}\n \n \n \n \n \n \n \n \n )\n }\n case \"walking-floor\": {\n // Tractor unit (steer axle + close-spaced rear bogie) + long, tall enclosed\n // box trailer (moving-floor) on a 3-axle bogie — 3 tractor + 3 trailer axles.\n const chassisY = GROUND_Y - 20\n const boxTop = chassisY - 34\n return (\n \n \n \n \n {/* long enclosed box */}\n \n {/* corrugation hints + rear door */}\n \n \n \n \n \n \n \n \n \n \n )\n }\n case \"roro-hook\": {\n // Rigid 8-wheel chassis carrying an open roll-on/roll-off container, hook\n // arm at the rear.\n const chassisY = GROUND_Y - 20\n const contTop = chassisY - 28\n return (\n \n \n \n {/* open RoRo container: slightly tapered, open top */}\n \n \n \n {/* hook-loader arm hooking the front of the container */}\n \n \n \n \n \n \n )\n }\n case \"skip-loader\": {\n // 2-axle rigid with over-cab hydraulic A-frame arms lifting a builder's\n // skip that sits on the chassis behind the cab.\n const chassisY = GROUND_Y - 20\n const skipFrontX = 60\n const skipRearX = 132\n const skipTop = chassisY - 18\n const armTopY = GROUND_Y - 46\n return (\n \n \n \n {/* tapered builder's skip (wider at the top) on the chassis */}\n \n {/* over-cab lifting A-frame: two arms up over the cab, cross beam,\n angling back down to the skip's front lifting lugs */}\n \n {/* lift chains from the beam down to the skip rim */}\n \n \n \n \n \n )\n }\n case \"adt\": {\n // Articulated dump truck: front power unit + articulation waist + raked\n // dump body over big flotation tyres. Site plant, not a road cab.\n const bodyY = GROUND_Y - 30\n return (\n \n {/* power unit / bonnet + operator cab */}\n \n {/* articulation waist joint */}\n \n {/* raked dump body */}\n \n {/* big high-flotation tyres (larger radius, drawn inline) */}\n {[36, 130, 168].map((cx) => (\n \n \n \n \n \n ))}\n \n )\n }\n case \"truck-mixer\": {\n // 8-wheel rigid carrying an inclined rotating drum + discharge chute.\n const chassisY = GROUND_Y - 20\n return (\n \n \n \n {/* front pedestal supporting the high end of the drum */}\n \n {/* inclined mixer drum: barrel high at the front, tapering to a cone\n at the rear discharge end */}\n \n {/* drum spiral banding */}\n \n \n {/* discharge chute hanging off the rear cone */}\n \n \n \n \n \n \n )\n }\n case \"tractor-trailer\": {\n // Agricultural tractor (big rear wheel, small front) + tipping trailer.\n const trTop = GROUND_Y - 34\n const chassisY = GROUND_Y - 18\n return (\n \n {/* tractor body + cab */}\n \n \n {/* drawbar to trailer */}\n \n {/* raked tipping trailer body on a tandem bogie */}\n \n \n {/* tractor wheels: small front, large rear */}\n \n \n \n \n \n \n \n \n \n \n \n \n )\n }\n default:\n return null\n }\n}\n\n/** Public component: draws a themed side-profile silhouette for one vehicle. */\nexport function VehicleArtwork({ vehicle, vehicleKey, className }: VehicleArtworkProps) {\n const key = vehicle?.key ?? vehicleKey\n if (!key || !(key in VIEW_W)) return null\n const width = VIEW_W[key]\n const metres = METRES[key]\n const label = vehicle?.name ?? key\n\n return (\n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/domain/haulage-vehicle-select/vehicle-artwork.tsx" } ], "type": "registry:block" }