feat: add ButtonGroup, theme toggle, dark theme fixes, remove shift references

- Add ButtonGroup primitive: multi-select toggle with colored dot indicators
- Replace FilterPill status filters with ButtonGroup in TopBar and EventFeed
- Add light/dark mode toggle to TopBar (moon/sun icon)
- Fix dark theme: add --purple/--purple-bg tokens, replace all hardcoded
  #F3EEFA/#7C3AED with tokens, fix --amber-light text contrast in sidebar,
  brighten --sidebar-text/--sidebar-muted tokens, use color-mix for
  ProcessorTimeline bar fills
- Remove all "shift" references (presets, labels, badges)
- Shrink SegmentedTabs height to match search bar and ButtonGroup
- Update COMPONENT_GUIDE.md with new components and updated descriptions
- Add ButtonGroup demo to Inventory
- Add README.md with setup instructions and navigation guide

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/Inventory/sections/LayoutSection.tsx

@@ -76,7 +76,7 @@ export function LayoutSection() {
       >
         <div className={styles.shellDiagram}>
           <div className={styles.shellDiagramTop}>
-            TopBar — breadcrumb · search · env badge · shift · user avatar
+            TopBar — breadcrumb · search · filters · time range · env badge · user avatar
           </div>
           <div className={styles.shellDiagramBody}>
             <div className={styles.shellDiagramSide}>
@@ -110,7 +110,7 @@ export function LayoutSection() {
       <DemoCard
         id="topbar"
         title="TopBar"
-        description="Top navigation bar with breadcrumb, search trigger, environment badge, shift info, and user avatar."
+        description="Top navigation bar with breadcrumb, search trigger, status filters, time range, environment badge, and user avatar."
       >
         <div className={styles.topbarPreview}>
           <TopBar

src/pages/Inventory/sections/PrimitivesSection.tsx

@@ -5,6 +5,7 @@ import {
   Avatar,
   Badge,
   Button,
+  ButtonGroup,
   Card,
   Checkbox,
   CodeBlock,
@@ -72,6 +73,9 @@ export function PrimitivesSection() {
   // Alert state
   const [alertDismissed, setAlertDismissed] = useState(false)
 
+  // ButtonGroup state
+  const [bgSelection, setBgSelection] = useState<Set<string>>(new Set(['warn']))
+
   // Checkbox state
   const [checked1, setChecked1] = useState(false)
   const [checked2, setChecked2] = useState(true)
@@ -178,6 +182,24 @@ export function PrimitivesSection() {
         </div>
       </DemoCard>
 
+      {/* 4b. ButtonGroup */}
+      <DemoCard
+        id="buttongroup"
+        title="ButtonGroup"
+        description="Multi-select toggle group with optional colored dot indicators. Used for status filters."
+      >
+        <ButtonGroup
+          items={[
+            { value: 'ok', label: 'OK', color: 'var(--success)' },
+            { value: 'warn', label: 'Warn', color: 'var(--warning)' },
+            { value: 'error', label: 'Error', color: 'var(--error)' },
+            { value: 'running', label: 'Running', color: 'var(--running)' },
+          ]}
+          value={bgSelection}
+          onChange={setBgSelection}
+        />
+      </DemoCard>
+
       {/* 5. Card */}
       <DemoCard
         id="card"