Productivity

Workspace Shell

.b-workspace is a full-height CSS grid with four named areas: topbar spanning the top, then sidebar / main / inspector below. Children slot in by class — a .b-topnav takes the topbar, a .b-sidebar (or .b-rail) takes the sidebar, .b-workspace__main is the one scrolling work surface, and an optional .b-inspector docks on the trailing edge. Drop the inspector and main simply stretches. The shell defaults to 100dvh; the demo constrains it to a miniature.

An optional .b-statusbar as a direct child pins to a statusbar slot along the bottom — part of the fixed chrome, never part of the scroll.

The inspector width is a variable API: --b-inspector-w (default 19rem) — the demo narrows it to fit the miniature.

Dashboard

.b-dashboard is a 12-column grid. Cards claim width with one of .b-span-2, .b-span-3, .b-span-4, .b-span-5, .b-span-6, .b-span-7, .b-span-8, .b-span-9, .b-span-10, .b-span-11 or .b-span-12 from 768px up, and stack to a single column below. Spans in one row should total twelve — 5 + 4 + 3 reads as well as 4 + 4 + 4, and a row that overflows wraps a card onto its own line. Compose it from .b-card + .b-stat for KPIs and the CSS charts from Data Visualization for trends.

Command Center

A search-first hero for the top of a workspace: .b-command-center centers a big .b-input-group (capped at 34rem) with a row of quick-action .b-chips underneath. It answers "where do I start?" before the user has picked a surface.

Kanban Board

.b-kanban is a horizontally scrolling row of .b-kanban-col columns, each with a __header (title + __count) and a __list of task cards. During drag, mark the grabbed card .is-dragging and the hovered column .is-dropover — shown frozen mid-drag below, with a card leaving "In Progress" for "Done".

Task & Task List

.b-task is the draggable unit of work: a __title plus a __meta row of badge, due date and an avatar that auto-shrinks and pushes to the trailing edge. It lifts on hover and tilts while .is-dragging.

Task list

For dense flat lists, .b-task-list stacks .b-task-rows: checkbox, __title, __due. Mark finished rows .is-done and late dates .is-overdue.

Calendar View

.b-calview is a 7-column month grid: one __head cell per weekday, then a __cell per day holding a __date and stacked .b-event pills (--green, --orange, --purple recolor them). .is-today fills the date disc with accent; .is-other-month dims spillover days. Two weeks are enough to show the pattern — a real month just repeats the same cells.

Gantt View

.b-gantt pairs a __label column with __row tracks. Each .b-gantt__bar is placed with two variables — --start and --len — and an inner <i> fills to --done for progress. Recolor per bar with --b-chart-color. The background grid divides into --b-gantt-units columns (default 12) — set it on the container to match your timescale.

Activity Panel

There is no dedicated activity component — compose an inspector-style card from .b-card and the Content page's .b-timeline: time, title, body per event, with .is-complete / .is-active dots marking progress.

Inspector & Properties Panel

.b-inspector is the trailing panel of the workspace shell: a sticky __header with a close button, then stacked __sections each led by an <h6>. Inside, .b-props lays out label-control rows (__key at a fixed 6rem; inputs and selects auto-shrink to the small control height). Shown standalone here — inside a shell it docks with only a hairline start border.

Detail View & Master-Detail

.b-master-detail splits a __list (a .b-list of interactive rows, one .is-selected) from a __detail pane. Below 768px the panes collapse to one at a time: the list shows by default, and toggling .is-detail-open on the container swaps in the detail — pair it with a back button in the detail header.

Split Pane

Resizable side-by-side panels are covered in Layout — .b-split + .b-panel with a .b-resize-handle between them, the leading panel made draggable via .b-resizable.

Dock

A macOS-style app switcher. In production the glass .b-dock__tray sits inside .b-dock, which fixes it to the bottom of the viewport — shown statically here. Items magnify and lift on hover (scale 1.28 with a bounce ease) and .is-active draws the running-app dot.

Toolbar

The toolbar family lives in Actions; in a workspace it floats over the board as .b-toolbar--glass with the view's bulk actions at the trailing end.

App Grid

The iOS home screen: squircle icons with their names beneath, in an auto-filling grid. .is-soon dims an unreleased tile; __hint carries a quiet second line.

Ornament

visionOS's ornament, translated: a floating glass control cluster hanging half-off a panel's edge. Wrap the panel in .b-ornament-host; the ornament names its edge — --bottom, --top, --start, --end.

Status Bar

.b-statusbar is the thin strip along the bottom of a shell: tabular-numeral __item entries with a hairline top border. Pair it with a .b-status dot for connection state and a .b-spacer to split leading from trailing items.

Control Center

The iOS-style glass tile grid — .b-cc — for quick settings, connectivity, and media. Tiles span the 4-column grid (--2x2, --2x1, --4x1, --round); toggle pills flip with .b-cc__icon.is-on, and the chunky __range sliders hide a real <input type="range"> for keyboard and screen-reader access. Best floated over wallpaper-grade color.

Liquid Glass Objects

Decorative-grade glass primitives in the Apple Developer "liquid" style — a refractive .b-lens button, a .b-liquid-toggle with a colored core inside a glass capsule, and a .b-liquid-bar gradient slider with a glass cap. Drawn entirely in CSS: layered radial highlights, inset rims, and backdrop blur.

Barua glass has three tiers. Tier 1 — blur, tint and specular edges — works in every modern browser. Tier 2 is real refraction: on Chromium, barua.js injects an SVG displacement-map filter (#b-refract) and adds .b-refract to <html>, so these objects optically bend whatever sits behind them through backdrop-filter: url() — put one over strong color and the backdrop visibly warps at the rim. Safari and Firefox keep Tier 1 automatically. Tier 3 (WebGL) is deliberately not shipped; Tier 2 covers the optics without a render pipeline.