KQ-1642 · DRILL/COLUMNS

Drill Columns

A column browser for deep folders: each opened folder adds a column and the last previews the selected file with drawn art. Opening a folder slides the track left on springs.glide while the selected row's highlight stretches to its column's edge and a thin connector draws along the divider into the new column's heading on glide; stepping back retracts it on the exit ease, and the selection glides between rows on springs.snap. One roving tab stop runs through every column: arrows travel within and across columns, Enter opens, Space previews, F2 renames and M picks an item up to move, while rows can also be dragged 1:1 onto a folder that bumps on springs.recoil as it takes the drop.

KQ-1642 · DRILL/COLUMNS

3 columns

Basinworks5

Drawings3

Site B4

Preview

Plan B-02.dwg

Drawing · 2.8 MB

Modified: Today
By: Dev Malik
Where: Basinworks / Drawings / Site B

Basinworks › Drawings › Site B › Plan B-02.dwg · 3 columns

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/drill-columns

Props

columnWidth: number; default 200; Width of each column in px; sets how far the track slides and how much of the path stays in view.
iconStyle: "tile" | "line" | "label"; default "tile"; Type icons in tinted tiles, plain line icons, or mono type labels.
accent: "cobalt" | "signal" | "amber" | "graphite" | string; default "cobalt"; Highlight, connector and folder tint: a named token, or any CSS colour.
folders: DrillNode[]; default defaultDrillFolders; The root's contents; a folder may be lazy and load through loadFolder.
rootLabel: string; default "Basinworks"; The root column's heading and first crumb.
path / defaultPath: string[]; default defaultDrillPath; Ids from the root; a file at the end is previewed. Controlled or initial.
onPathChange: (path: string[]) => void; default —; Fires from the press or key that moved along the path.
onOpen: (file: DrillNode, path: string[]) => void; default —; A file was opened: Enter, Open, or a double-click.
onMove: (item: DrillNode, folder: DrillNode | null) => void; default —; An item was dropped on a folder (null is the root), by drag or with M then Enter.
onRename: (item: DrillNode, name: string) => void; default —; An item was renamed with F2 or Rename.
loadFolder: (folder: DrillNode) => Promise<DrillNode[]>; default —; Loads a lazy folder's contents on first open: skeleton rows meanwhile, Retry in place on failure.
now: number | Date; default defaultDrillNow; Now, for modified labels; never read from the clock.
status: "ready" | "loading" | "error"; default "ready"; Whether the tree has arrived: skeleton columns while loading, a retry when it failed.
onRetry: () => void; default —; Try again was pressed after the tree failed to load.
label: string; default "<rootLabel> files"; The browser's accessible name.
disabled: boolean; default false; Read only: nothing opens, moves or renames.
className: string; default —; Classes for the surface; give it a height and the columns scroll inside it.

Prop	Type	Default	Description
columnWidth	number	200	Width of each column in px; sets how far the track slides and how much of the path stays in view.
iconStyle	"tile" \| "line" \| "label"	"tile"	Type icons in tinted tiles, plain line icons, or mono type labels.
accent	"cobalt" \| "signal" \| "amber" \| "graphite" \| string	"cobalt"	Highlight, connector and folder tint: a named token, or any CSS colour.
folders	DrillNode[]	defaultDrillFolders	The root's contents; a folder may be lazy and load through loadFolder.
rootLabel	string	"Basinworks"	The root column's heading and first crumb.
path / defaultPath	string[]	defaultDrillPath	Ids from the root; a file at the end is previewed. Controlled or initial.
onPathChange	(path: string[]) => void	—	Fires from the press or key that moved along the path.
onOpen	(file: DrillNode, path: string[]) => void	—	A file was opened: Enter, Open, or a double-click.
onMove	(item: DrillNode, folder: DrillNode \| null) => void	—	An item was dropped on a folder (null is the root), by drag or with M then Enter.
onRename	(item: DrillNode, name: string) => void	—	An item was renamed with F2 or Rename.
loadFolder	(folder: DrillNode) => Promise<DrillNode[]>	—	Loads a lazy folder's contents on first open: skeleton rows meanwhile, Retry in place on failure.
now	number \| Date	defaultDrillNow	Now, for modified labels; never read from the clock.
status	"ready" \| "loading" \| "error"	"ready"	Whether the tree has arrived: skeleton columns while loading, a retry when it failed.
onRetry	() => void	—	Try again was pressed after the tree failed to load.
label	string	"<rootLabel> files"	The browser's accessible name.
disabled	boolean	false	Read only: nothing opens, moves or renames.
className	string	—	Classes for the surface; give it a height and the columns scroll inside it.