[Madraka]

What

Adds the five dashboard-pattern pieces that #228 asks for to @cloudhal/ui. Every word is a prop. There is no demo route; tests and DESIGN.md entries cover the new blocks instead.

Piece	What it is
ListToolbar (moved from apps/studio/src/components)	Fixed slots in a fixed order: search (fills the free width), filters, other actions, sort, then refresh last (Kumo RefreshButton, with its label as a prop). All 17 Studio list screens now import it from @cloudhal/ui. actions is kept, so their markup is unchanged.
StatusIndicator	A dot or a thin bar plus the state's word ("Ready", "Failed", "Running") for dense rows. The mark is decorative and aligned with the first line of text. active pulses it, but not under reduced motion.
UsageMeterRow (+ usageState, USAGE_WARN_AT)	One usage-rail row: the label with an optional info toggletip, used / limit (formatted by the screen), and a Kumo Meter. The meter turns warning at 80 % (warnAt) and danger at the limit, with the state's word as a badge. Kumo's Meter.label is a plain string, so the visible row is the block's own. The meter keeps its label for screen readers (role="meter", named), and aria-valuetext is the value text plus the state. A test fails if Kumo's label row stops being the meter's first child.
PageLayout docsHref + docsLabel	The small outline "View docs" pill after the title (LinkButton size="xs", a 14 px book icon, same tab). It is added to the owned PageHeader copy, marked "Cloudhal".
PageLayout resource (ResourceHeader)	Resource mode, like the dashboard's Worker page. The crumbs and an optional environment switcher sit in the top bar. Kumo underline Tabs sit under it, with actions on the right and the one primary action last. There is no large title: title becomes a visually hidden h1. Kumo's tab scroll-button labels are props (tabLabels).

Also:

• useToggletip. ToggletipBadge's open-on-press logic is now a shared hook, used by ToggletipBadge and by UsageMeterRow's info button.
• DESIGN.md:
  • a resource template row, and a new §2aj on resource pages, StatusIndicator and UsageMeterRow;
  • the list-toolbar slot order in §1 and §2a;
  • the docs pill on the page-header row;
  • three rows in the §6 matrix.
• Design lint: a new resource template (PageLayout, crumbs=, title=, resource=, SectionCard).
• Changeset: a patch for @cloudhal/cli, because Studio ships inside it and every list's search now fills its row. @cloudhal/ui and Studio themselves are private.

Keyboard and focus order (resource mode)

The order follows the DOM, and test/dashboard-blocks.test.tsx checks it:

1. the crumbs and the switcher, in the top bar;
2. the tab bar, as a single tab stop on the selected tab;
3. the actions, with the primary action last;
4. the content.

Inside the tab bar, ArrowRight moves focus without opening anything (Kumo's default manual activation), and Enter or a click opens the tab. Home and End jump to the first and last tab. The bar keeps one tab stop, which follows the selected tab.

Checks (run locally, one at a time; load stayed under ~4)

• packages/ui: vitest run passed 257 across 21 files, including the new file's 11. Typecheck is clean.
• apps/studio: typecheck is clean. design-rules.test.ts passed 609. The full suite passed 1407 across 85 files, run with --no-file-parallelism.
• pnpm design:lint: all 437 files clean.
• Biome, size:check: biome shows no errors and size:check is ok.
• Studio build: pnpm --filter @cloudhal/studio build passed within the bundle budget (initial load 393.8 kB gzip).
• pnpm design:shots: run once on its own, at 1440 and 390 px, against this branch's Studio. That was this worktree's CLI on a fresh --init-if-empty blog project, with a local test owner account.
  • 14 list routes: /sites, /agents, /agents/skills, /team, and the site's pages, articles, media, redirects, snapshots, activity, collections, taxonomy, translations and comments.
  • All 28 shots passed: no sideways scrolling and no console errors.
  • On a list without filters (Pages) the search spans the row. With filters (Activity) the selects and refresh sit at the end. At 390 px they wrap onto a second row under the search, with refresh still last.

Closes #228

🤖 Generated with Claude Code