feat: add SegmentedTabs, custom DateTimePicker, redesign time range selector

New components:
- SegmentedTabs — pill-style tabs with sliding animated indicator,
  trailing slot for custom content, MutationObserver for dynamic resizing
- Custom DateTimePicker — replaces native datetime-local with calendar
  grid, hour/minute inputs, Now/Apply buttons, portal dropdown

Time range selector redesign:
- Uses SegmentedTabs with inline from/to DateTimePicker triggers
- "now" shown as clickable placeholder when to-date is not explicitly set
- Preset selection keeps to-date as "now" until user sets it
- No more "Custom" button — last tab is the live date range

Other improvements:
- FilterPill gains activeColor prop for status-colored active states
- TopBar and EventFeed status pills now use colored dots + activeColor
- Inventory nav expanded to full component-level table of contents
- COMPONENT_GUIDE.md updated with new components
- DateRangePicker test updated for custom DateTimePicker

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

src/pages/Inventory/sections/CompositesSection.tsx

@@ -21,6 +21,7 @@ import {
   MultiSelect,
   Popover,
   ProcessorTimeline,
+  SegmentedTabs,
   ShortcutsBar,
   Tabs,
   ToastProvider,
@@ -227,6 +228,7 @@ export function CompositesSection() {
     { label: 'Agents', value: 'agents', count: 6 },
   ]
   const [activeTab, setActiveTab] = useState('overview')
+  const [segTab, setSegTab] = useState('account')
 
   // 21. TreeView
   const [selectedNode, setSelectedNode] = useState<string | undefined>('proc1')
@@ -636,6 +638,28 @@ export function CompositesSection() {
           </div>
         </DemoCard>
 
+        {/* 19b. SegmentedTabs */}
+        <DemoCard
+          id="segmented-tabs"
+          title="SegmentedTabs"
+          description="Pill-style segmented tab bar with elevated active state. Same API as Tabs."
+        >
+          <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
+            <SegmentedTabs
+              tabs={[
+                { label: 'Account', value: 'account' },
+                { label: 'Password', value: 'password' },
+                { label: 'Notifications', value: 'notifications', count: 3 },
+              ]}
+              active={segTab}
+              onChange={setSegTab}
+            />
+            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>
+              Active tab: <strong>{segTab}</strong>
+            </div>
+          </div>
+        </DemoCard>
+
         {/* 20. Toast */}
         <DemoCard
           id="toast"