Every radius in the chrome and the panel scales with the theme's own radius (--wb-c-rs = radius / 12,
0 to 1.5): a square theme gets a square window, a round one a rounder window; themes that keep the
site's colors keep wayBetter's own corners. A theme built from raised and sunken edges (ChromeTheme
edges: 'bevel') gets frame/edges.css on html[data-wb-edges=bevel], also from the first frame: a face
color under tabs, toolbar, menus and the panel, 98.css's four edge lines derived from that face,
the active title bar's gradient across the tab row, tabs as a tab control, small raised caption
buttons, a sunken address field, selected menu rows in the title bar's color, raised and default
buttons, etched group boxes and classic scrollbars in the panel.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
packages/shell/src/frame (waybetter/shell/frame): the whole shell of an app. An app describes its
site (ShellSite: names and pages, account rules, search, address chips and completions, its panel
tab, the new-tab page, palette items, deck column kinds and flags and an optional compose dock, the
media panel's composer rule, a theme store, overlays, the native features it serves) and passes
its Tauri API and i18n instance; createShell returns the root component.
- Shell.tsx: dockview host (tabs in the titlebar row, splits, drag-link drops, shortcuts, context
menu, deck back-and-forth, session restore, workspace on start, overlay raise); state.ts (pane
placeholders, tabs_sync one-in-flight via syncGate, shell_raise layer, profiles, layout).
- WebPanel (address bar), NewTabPage, CommandPalette + paletteModel (frame groups; site items),
DeckView + AddColumnDialog + deckStore (site column kinds), PaneTheme + themeStore
(createThemeStore over the app's ThemeAdapter) + chromeTheme (ChromeTheme input) + themeScopes,
Titlebar + TitlebarExtras + icons + brand (wB mark data URI), AccountSwitcher + accountModel,
workspaces + workspaceModel, backupModel, syncHost, devHost + devModel, pluginCommandStore,
MediaPanel + mediaModel, searchInput, hooks, bridge (installPreviewMocks), i18n, boot.ts
(bootScript: the first-frame boot.js), CSS themed with --wb-* tokens.
- paneModel: paneVisibility, raiseSupported, cssRgb; deckModel: isSourcePage.
- Includes the live-QA titlebar fix (dock ResizeObserver + rAF titlebar marks, dock sized by its
insets).
- tests/frame.test.ts: every frame key has English and is used, palette order with a site,
address fallback, layout gate, boot script, chrome variables, switcher rules, workspaces,
deck settings with site flags.
- npm package 0.4.0: exports ./shell/frame, ./shell/frame/*, ./shell/frame/*.css (copied by the
build); dockview and acorn optional peers; root devDependencies dockview, acorn.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
