# Pack planner A React component in [Beamline](https://beamline.io/)'s [Data & tables](https://beamline.io/components/data) category. Live demo: https://beamline.io/components/pack-planner The packing bench: the order's items sit in box outlines drawn to scale, each box filling to its padding line, weighing against its limit and naming the smallest size on the shelf that fits, with what it costs to send. Drag an item to another box or a new shipment (or pick it and choose a box with the keys) and the boxes re-size themselves and the total re-prices with the change said; when a cheaper plan exists the part says by how much and repacks on request. An item no box fits says so and is drawn over-full. ## Use it for - Packing an order at a bench, splitting a shipment, choosing box sizes and label costs: e-commerce fulfilment, print shops, small warehouses. - The host owns the items (sizes and weights), the box sizes on its shelf and, if it likes, a rate by weight; the part fits, prices and re-plans. ## Not for - Splitting a bill or a budget between people → [split-anything](https://beamline.io/components/split-anything). - Picking the items first → [scan-flow](https://beamline.io/components/scan-flow). ## Anatomy - head: the order, the total (N boxes · cost) with the last change (£1.70 cheaper than before), a box that fits nothing counted, Repack · cheaper when a cheaper plan exists - box: Box n · size and inner dimensions, its cost; weight of its limit and how full; the outline drawn to scale with the padding line and the items stacked as slabs; the items as tokens - new shipment: a dashed place to drop an item that ships on its own - hint: while an item is picked, how to put it somewhere ## States - planned - an item picked - dragging - a box re-sized - a cheaper plan exists - repacked - a box over its limit or fitting nothing ## Keyboard - Each item is a button named by the item and its box: Enter picks it, Left and Right choose a box (New shipment last), Enter puts it there, Escape puts it down and focus stays on the item - Repack is a button; each move is said once (a polite status): where the item went and what the box it left became ## Motion An item slides from the box it left to the one it joined, and outlines morph to their new size (the shared FLIP, with resize); the slabs settle to their new heights. Nothing runs at rest; reduced motion places everything. Each box is drawn as an open cardboard box in an oblique view, its front seen through; each product's slab and token share one colour; pointing at a token dims the other slabs. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `label` (required) | `string` | — | The order: "Order #8812". | | `items` (required) | `PackItem[]` | — | | | `boxes` (required) | `PackBox[]` | — | The box sizes on the shelf, any order. | | `value` | `string[][]` | — | The plan: one list of unit ids per shipment (a unit id is the item id, then #2, #3 for its further units). | | `defaultValue` | `string[][]` | — | Where to start; default the cheapest plan the part finds. | | `onValueChange` | `((plan: string[][]) => void)` | — | Reports the selected value after a change; no callback by default. | | `rate` | `((box: PackBox, weight: number) => number)` | — | What it costs to send a box at a weight; default the box's cost. | | `fill` | `number` | — | The share of a box's volume items can use (the rest is padding). Default 0.8. | | `currency` | `string` | — | ISO currency code. Default GBP. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `classNames` | `Partial>` | — | Classes for the named visual parts; no overrides by default. | | `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Button](https://beamline.io/components/button.md) - [Spinner](https://beamline.io/components/spinner.md) ## Dependencies `lucide-react` ## Import ```tsx import { PackPlanner } from "@beamline/pack-planner"; ``` ## Get it Pack planner is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Data & tables - [Living table](https://beamline.io/components/living-table): A table that shows as much as fits on both axes: width decides which columns show (the rest ride in the name line, moving there rather than vanishing)… - [Availability layers](https://beamline.io/components/availability-layers): A week of bookable start times whose closed times explain themselves: every availability rule (hours, time off, bookings, buffers, rooms, lead time… - [Capacity terrain](https://beamline.io/components/capacity-terrain): A schedule that stands on a terrain of capacity: under each station's lane of jobs, every day's load rises to its capacity line and an overload is a… - [Domino move](https://beamline.io/components/domino-move): A room board where one move shows its chain: drag a booking (or pick it and aim it with the keys) onto a taken room and the bookings it would push appear… - [Match board](https://beamline.io/components/match-board): Month-end matching as one picture: bank lines and books entries side by side with threads between them — solid for matched, dashed with the host's reason… - [Split anything](https://beamline.io/components/split-anything): One splitter for money, quantities and time: a bar of the whole shows every target's part and what is not split yet; items are dragged onto targets… - [Approval route](https://beamline.io/components/approval-route): A policy you can read by trying it: an amount on a log scale with the thresholds as marks (the arrows stop just under, at and just over each), the… - [Proposal twin](https://beamline.io/components/proposal-twin): A proposal edited beside the client's exact page, the two linked both ways: a field in focus lights its twin on the page, scrolls it into view and joins… - [Quantity river](https://beamline.io/components/quantity-river): The life of one order line's quantity: at rest a bar of its real split ("5 delivered · 1 back in stock · 1 damaged · 5 cancelled"), unfolding into a… - [Stock horizon](https://beamline.io/components/stock-horizon): Projected stock per item over the coming weeks: a strip of weeks with the safety line, weeks under safety in warn and short in danger, every dip said in… - [Ageing queue](https://beamline.io/components/ageing-queue): Tickets that visibly age: each ticket's ring fills toward its own service target and steps from on time to late to very late, the words say when it is… - [Import lens](https://beamline.io/components/import-lens): A messy import made fixable by kind: rows stream through the checks once with live counts; problems gather into groups that say what is wrong in words… - [Duplicate guard](https://beamline.io/components/duplicate-guard): A new record that watches for the one that already exists: as you type, the likely duplicates slide in beside the form with the fields that match lit and… - [Scan flow](https://beamline.io/components/scan-flow): A pick list that takes scans: each scan flies from the scan field into its row and fills that row's quantity ring, and the prompt moves to the next bin… - [Provenance lens](https://beamline.io/components/provenance-lens): Hold Alt (or press Lens) over any number on the page and see what makes it: hairline threads draw from the number to the rows, cards and documents on… - [Record time machine](https://beamline.io/components/record-time-machine): The record itself, rewound in place: a slim track of every change (a tick per change in its person's colour, hollow for automation, named moments as… - [Tension timeline](https://beamline.io/components/tension-timeline): A plan where slack is something you see: every dependency is a string from one task's end to the next one's start, sagging with the days it has to spare… - [Replay bar](https://beamline.io/components/replay-bar): Rewind for anything live: pause a stream, scrub back to the moment you missed (markers for the ones that matter), step one update at a time, replay at a… - [Event calendar](https://beamline.io/components/event-calendar): A schedule of events by day, week or month: events that overlap sit side by side, drag one to another time or day or pull its bottom edge to change its… - [Kanban board](https://beamline.io/components/kanban-board): Work as cards in columns by stage: drag a card (or lift it with Space and walk it with the arrows) to another column or place, the cards around it make… - [Data grid](https://beamline.io/components/data-grid): Virtualised local or server-driven grid: stable row IDs, manual sort and filters, pages or infinite loading, retry without losing rows, inline editing… - [Pivot table](https://beamline.io/components/pivot-table): Records summed up by the fields people choose: rows grouped by one or more fields that fold open level by level, columns split by another, one or more… - [Query builder](https://beamline.io/components/query-builder): Conditions people build by hand to pick out records: each rule is a field, an operator that fits the field (contains, between, in the last N days, is any… - [Sort order](https://beamline.io/components/sort-order): Several sort keys in order. Each key says its rank in words ("Sort by Plan, A to Z", "then by Size, largest first") with its order named for the field's… - [Metric rules](https://beamline.io/components/metric-rules): Ordered rules that colour a dashboard number. Each rule has a name for what its colour means ("At risk", not just red) and a tone (good, watch, act… - [Log viewer](https://beamline.io/components/log-viewer): Log lines as they stream: it follows the newest line until you scroll up, then counts what arrived and brings you back in one click; filter by level with… - [JSON viewer](https://beamline.io/components/json-viewer): A JSON value as a tree you can read and walk: branches open and close (one level, or all at once), closed ones preview what they hold, every value reads… - [JSON diff viewer](https://beamline.io/components/json-diff-viewer): Two versions of a JSON value compared as one tree: added keys marked +, removed ones struck through with −, changed values read old → new, unchanged keys… - [Import mapping](https://beamline.io/components/import-mapping): Map the columns of a file to the fields of one record type, see what every value becomes, then run the import and get an outcome for each row… - [Diff table](https://beamline.io/components/diff-table): Proposed edits to a table before they happen: new rows green, removals struck through, changed cells old → new; each change can be left out and Apply… - [Filter toolbar](https://beamline.io/components/filter-toolbar): The filters on a list kept in view: chips that remove themselves, Add filter with fields and their values, Clear all, and room for search or view controls. - [Table](https://beamline.io/components/table): A native HTML table for small datasets, composed with children or driven by records; shared server paging, sorting, filters, search, stable-ID selection… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).