Draft: Kumo SIdebar Support

[stritt]

DO NOT MERGE

Summary

• Adds Sidebar compound component built on Base UI primitives with 20+ sub-components (Provider, Header, Content, Footer, Group, Menu, MenuButton, etc.)
• Collapsible groups via <Sidebar.Group collapsible> using Base UI Collapsible.Panel with animated height transitions
• Icon-only collapse mode, off-canvas collapse, resizable drag handle, mobile dialog, right-side variant with correct border rendering
• Sidebar width is locked via inline styles (width/minWidth/maxWidth) so content never inflates the sidebar — overflowing text truncates
• BrandLogo demo pattern showing compact "A" when collapsed, full "Acme Inc" when expanded
• 7 demos: basic, collapsible groups, collapsed, toggle, full kitchen-sink, resizable, right-side
• Documentation page added to docs site with nav entry

Key decisions

• Base UI Primitives — collapsible group animation uses Base UI's Collapsible.Panel which exposes --collapsible-panel-height for CSS-only height transitions
• Inline styles for width lock — Tailwind arbitrary value classes with CSS custom properties (w-[--sidebar-width]) weren't reliably constraining sidebar width. Switched to inline style={{ width, minWidth, maxWidth }} computed from state, which is bulletproof (I don't love this and want to find a better fix)
• Side-aware border — border-r for left sidebar, border-l for right sidebar (was hardcoded to border-r)
• Footer padding — changed from px-3 to px-2 to match SidebarContent so menu item icons align vertically in both expanded and collapsed states

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@119

commit: 60a66f9

[github-actions]

Docs Preview

View docs preview

Commit: 60a66f9

[github-actions]

Visual Regression Report

5 screenshot(s) with visual changes:

Button / Loading State

4 px (0%) changed

Before	After	Diff

Dialog / Basic Dialog

55,078 px (1.32%) changed

Before	After	Diff

Dialog / Confirmation Dialog (Alert)

86,219 px (2.07%) changed

Before	After	Diff

Select / Select

24,948 px (2.91%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

11 screenshot(s) unchanged

• Button / Variants
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Dialog / With Actions
• Dialog / With Select
• Dialog / With Combobox
• Dialog / With Dropdown
• Dialog (Open)
• Select / Select.Option

---

Generated by Kumo Visual Regression

[CiscoFran10]

@stritt Is this open for review?

[stritt]

/bonk fix merge conflict

[ask-bonk]

Merge conflict successfully resolved and committed. Here's a summary:

Merge Conflict Resolution Summary

Successfully merged origin/main into stritt/sidebar branch, resolving 43 conflicted files.

Key Changes Preserved from Sidebar Branch:

• Sidebar compound component with 20+ sub-components
• Sidebar nav entry in docs site
• Sidebar demo and documentation page

Key Changes Merged from Main:

• Chart component (TimeseriesChart, ChartLegend, ChartPalette)
• Charts section in docs navigation with 3 new pages
• Select.placeholder prop and SelectPlaceholderUsingPropDemo
• Table.Header compact variant with TableWithCompactHeaderDemo
• CommandPalette filtering improvements (filterGroupsWithItems, items prop on Group)
• Vitest v4 upgrade with browser testing config
• echarts peer dependency
• code/server.tsx improvements with shiki externalization
• Various component fixes (Field line-height, Flow node-id, toast deduplication)

Resolution Strategy:

• Core sidebar files: Manually merged to keep sidebar exports + add new Chart exports
• Component files not touched by sidebar: Accepted --theirs (main's version)
• Auto-generated files: Accepted --theirs (CHANGELOGs, registry, schemas)
• Lock files: Accepted --theirs and reinstalled

Verification:

• Build passed for @cloudflare/kumo
• Typecheck passed for @cloudflare/kumo

github run