Dock

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Clock, Dock } from "@sushindustries/ui";
import { useDeskState } from "./use-desk-state";

export function ScreenDock() {
	const { tasks, toggle, close, openSearch } = useDeskState();

	return (
		<Dock
			tasks={tasks}
			onSelectTask={toggle}
			onCloseTask={close}
			onSearch={openSearch}
			trailing={<Clock />}
		/>
	);
}

What this example is not

Not proof that DockDockA launcher, what is open, and a corner. Search opens upward and results are the consumer's to compute.@sushindustries/ui · layout remembers anything. tasks and the three callbacks all come from useDeskStateuseDeskStateWhich windows are open, where they sit and what has been put away, remembered without breaking a server render.@sushindustries/ui · layout here - DockDockA launcher, what is open, and a corner. Search opens upward and results are the consumer's to compute.@sushindustries/ui · layout itself holds no state, so a page that skips a real desk hook and hardcodes tasks gets buttons that never change what they show.