Asset packs

A React block (a whole screen) in Beamline's Construction app.

Packs of assets (sounds, presets, fonts), the providers they come from and the storage they take. Download and install are two phases with their own progress: "downloaded, ready to install" never reads as installed, a failed install keeps the download for retry, and several at once share one summary line. A provider is connected with a device code that is large, selectable and shows its expiry; browsing works before, coming back to the tab or an approval by another account never counts as connected, and only what the provider grants turns on. A storage audit shows "—" until measured, groups missing, outside and unused files with what each means and Locate, treats unused files only as candidates, and lists exactly what collecting would copy in. Nothing is deleted here.

Use it for

Downloading and installing content packs where download and install are separate steps.
Connecting a service by device code, or auditing what a library's projects depend on.

Not for

Uploading files (file-dropzone).
Browsing files and folders (file-manager).
Finding and auditioning single sounds (sound-library).

Anatomy

header: the product's mark and the title; tabs Packs, Providers, Storage
packs: the summary line with Download available and Install ready; the drive (when given): its free space of its size, one bar of what's used, a pack that can't fit named; each pack as a row with maker, size and items, its size on the largest pack's scale, its state, the phase's progress and its one action
providers: each with its account, Connect; the code, Copy and Open, its expiry, the waiting line with Check now; what it grants
storage: when measured and Measure; library size and the three counts; missing, outside and unused groups with what each means, Locate and Collect

States

pack: not downloaded, downloading, downloaded and ready to install, installing, installed, install failed (download kept), download stopped
provider: not connected, asking for a code, code shown, back without approval, approved (grants), declined, expired, approved by another account
storage: not measured (—), measuring, measured, nothing found, located, not located, collecting, collected, failed
phone: one column
right to left: mirrors; the code and paths read left to right

Keyboard

Tab through the tabs, each card's actions, Copy and Open, Check now, Measure, Locate and Collect; the collect dialog traps focus and Escape closes it

Motion

Progress bars fill; nothing else of its own.

Props

Prop	Type	Default	Description
`packs` (required)	`Pack[]`	—
`drive`	`{ name: string; size: number; free: number; }`	—	The drive the packs install to: its name, size and free space in bytes. Drawn above the packs, so a pack that can't fit says why at a glance.
`providers`	`Provider[]`	—
`audit`	`Audit \| null`	—	The last storage audit; null until measured (counts stay "—").
`onDownload`	`PhaseRunner`	—	Download a pack, reporting 0–1; a finished download is only downloaded, never installed.
`onInstall`	`PhaseRunner`	—	Install a downloaded pack, reporting 0–1; reject with the reason (the download is kept).
`onStartConnect`	`((providerId: string) => Promise<DeviceCode>)`	—
`onCheck`	`((providerId: string, code: string) => Promise<DeviceCheck>)`	—	Asked every few seconds while a code is shown, and on Check now.
`onDisconnect`	`((providerId: string) => Promise<void>)`	—
`onMeasure`	`(() => Promise<Audit>)`	—
`onLocate`	`((fileId: string) => Promise<string \| null>)`	—	Where a missing file is now; resolve with its path, or null when it wasn't found.
`onCollect`	`((fileIds: string[]) => Promise<void>)`	—	Copy files from outside into the library; the originals stay.
`defaultView`	`View`	—
`defaultConnecting`	`string \| null`	—	Start connecting this provider at once, as if Connect had been pressed.
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { AssetPacks } from "@beamline/asset-packs";

Get it

Asset packs is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Asset packsComplete system · $49

Packs of assets (sounds, presets, fonts), the providers they come from and the storage they take.

Packs mid-install

Velvet Keys is downloading and Deep End installing, each with its own progress; Room Tone Drums is downloaded, ready to install, never called installed. Northern Lights failed to install for want of space (the drive above is nearly full) and keeps its download for the retry. Each pack's size is drawn on the largest pack's scale.

0 × 0full

Connecting a provider

The code is large and selectable with its expiry; coming back from the browser doesn't count, only LoopSound's approval does, and only what it grants turns on.

0 × 0full

Storage audit

Missing, outside and unused files grouped with what each means. Locate finds the choir swell; collecting lists exactly what would be copied; unused files are candidates only. Nothing is deleted.

0 × 0full

Storage, not measured yet

0 × 0full

About Asset packs

← Asset workspace Instrument use →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Asset packs

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Dependencies

Import

Get it

More in Construction