ct-autolayout theme

[bfollington]

• Initial step
• Almost acceptable layout
• Update sidebar appearance
• Integrate theme
• Apply theme across more components

---

Summary by cubic

Adds a themable UI foundation and reworks ct-autolayout for a better mobile/desktop experience with off-canvas sidebars, toolbar, and list primitives. Updates the chatbot list view to use the new theme, toolbar, and list items, aligning with Linear CT-935.

• New Features

  • ct-autolayout: mobile toolbar with tabs and left/right icon toggles, off-canvas panels with scrim and ESC close, desktop floating toggles, tabsPosition prop, leftOpen/rightOpen props and ct-toggle-left/right events.
  • Theme: new ct-theme provider; ct-chat and ct-input consume theme context; shared CSS vars for colors, radius, and font.
  • Primitives: ct-toolbar for headers, ct-kbd for shortcut hints, ct-list-item row component with ct-activate (click/Enter/Space) and slots (leading, subtitle, meta, actions).
  • Chatbot screen: header toolbar with “New Chat” (+ ct-kbd), chat list uses ct-list-item, right sidebar adds live theme controls (font, accent, radius), keybinds for new chat.

• Migration

  • Mobile tabs now switch only content panes; sidebars are opened via the new left/right toggles.
  • Use leftOpen/rightOpen to control sidebars and listen to ct-toggle-left/right for state changes.
  • If you themed inputs or chat via ad-hoc vars, migrate to ct-theme tokens (ct-theme-color-*, ct-theme-border-radius, ct-theme-font-family).

[linear]

CT-935 ct-autolayout toolbars and buttons