kasy-cli 1.21.8 → 1.22.0

package/templates/firebase/lib/components/{kasy_sidebar_pro.dart → kasy_sidebar.dart}

@@ -1,77 +1,106 @@
 import 'dart:async';
 
+import 'package:bart/bart/bart_model.dart';
+import 'package:bart/bart/widgets/side_bar/custom_sidebar.dart';
 import 'package:flutter/material.dart';
-import 'package:kasy_kit/core/icons/kasy_icons.dart';
+import 'package:kasy_kit/components/kasy_avatar.dart';
+import 'package:kasy_kit/components/kasy_avatar_presets.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Design tokens — from Figma (node 2:1331 / 6:114)
+// Design tokens — HeroUI Figma Kit (node 4678:41088 light / 21964:53880 dark)
 // ─────────────────────────────────────────────────────────────────────────────
 
-const double _kWidthOpen = 256.0;
-const double _kWidthCollapsed = 92.0;
-const double _kPad = 24.0;
-const double _kItemRadius = 8.0;
-const double _kItemVPad = 10.0;
-const double _kItemHPad = 12.0;
-const double _kItemGap = 8.0;
+// Figma sidebar is 223 wide; we run a touch wider for breathing room.
+const double _kWidthOpen = 248.0;
+const double _kWidthCollapsed = 78.0;
+const double _kPadH = 16.0; // px-4
+const double _kPadBottom = 16.0; // pb-4
+// Top band that holds the logo. Equals the web header height (kasyWebHeaderHeight
+// = 68) so the sidebar's first divider lines up with the header's bottom border.
+const double _kTopBandHeight = 68.0;
+const double _kItemRadius = 14.0; // rounded item / active pill
+const double _kItemMinH = 36.0;
+const double _kItemHPad = 12.0; // px-3
+const double _kItemVPad = 6.0; // py-1.5
+const double _kIconSize = 16.0;
+const double _kIconGap = 12.0; // gap-3 (icon → label)
+const double _kItemGap = 8.0; // gap between items (spacing/2)
+const double _kHeaderGap = 24.0; // logo row → workspace selector (spacing/6)
+const double _kDividerGap = 20.0; // gap around the section dividers (spacing/5)
+const double _kNavGap = 20.0; // tabs → list (spacing/5)
+const double _kFooterGap = 16.0; // bottom divider → search (spacing/4)
+const double _kToggleSize = 36.0; // header panel-toggle button
+
+// Submenu tree tokens (kept from the previous sidebar — still used by the
+// connected/Income dropdown and its collapsed hover popup).
 const double _kSubItemH = 32.0;
 const double _kSubItemGap = 4.0;
 const double _kSubIndent = 36.0;
 const double _kTreeConnectorW = 13.0;
-const double _kCollapseButtonSize = 28.0;
 
 /// Returns the height of the vertical tree line for [n] sub-items.
 double _treeLineHeight(int n) =>
     (n * (_kSubItemH + _kSubItemGap) - _kSubItemGap) * 0.8627;
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Color palette
+// Color palette — every value derives from the global Kasy theme so the sidebar
+// follows light/dark automatically (nothing hardcoded).
 // ─────────────────────────────────────────────────────────────────────────────
 
-enum _SidebarColors {
-  light(
-    bg: Color(0xFFFFFFFF),
-    border: Color(0x1A000000),
-    divider: Color(0xFFF6F6F6),
-    activeBg: Color(0xFFF6F6F6),
-    textMuted: Color(0xFF757575),
-    textActive: Color(0xFF000000),
-    logout: Color(0xFFD55F5A),
-  ),
-  dark(
-    bg: Color(0xFF161A23),
-    border: Color(0x1AFFFFFF),
-    divider: Color(0xFF2D2F39),
-    activeBg: Color(0xFF2D2F39),
-    textMuted: Color(0x80FFFFFF),
-    textActive: Color(0xCCFFFFFF),
-    logout: Color(0xFFCC8889),
-  );
-
+class _SidebarColors {
   const _SidebarColors({
     required this.bg,
     required this.border,
     required this.divider,
     required this.activeBg,
+    required this.segmentThumb,
     required this.textMuted,
     required this.textActive,
     required this.logout,
+    required this.isDark,
   });
 
+  /// Maps the HeroUI Figma tokens onto the global [KasyColors]:
+  /// `surface → surface`, `foreground → onSurface`, `foreground/muted → muted`,
+  /// `border → border`, `separator → separator`, `default → surfaceNeutralSoft`
+  /// (hover/active fill + tabs track), and the selected-tab thumb to the
+  /// dedicated `segment` token.
+  factory _SidebarColors.fromContext(BuildContext context) {
+    final c = context.colors;
+    final bool dark = context.isDark;
+    return _SidebarColors(
+      bg: c.surface,
+      border: c.border,
+      // Same token as the vertical edge line + the web header's bottom border,
+      // so the top divider continues that line seamlessly across the chrome.
+      divider: c.border,
+      // Hover / active item fill + tabs track + kbd chip (default/default).
+      activeBg: c.surfaceNeutralSoft,
+      // Selected segment thumb (HeroUI `segment`): lifts off the track.
+      segmentThumb: c.segment,
+      textMuted: c.muted,
+      textActive: c.onSurface,
+      logout: c.error,
+      isDark: dark,
+    );
+  }
+
   final Color bg;
   final Color border;
   final Color divider;
   final Color activeBg;
+  final Color segmentThumb;
   final Color textMuted;
   final Color textActive;
   final Color logout;
 
-  /// True when this palette is the dark-mode variant.
-  /// Used by overlay widgets (tooltips, popups) that cannot rely on
-  /// Theme.of(overlayContext) since overlay contexts may not inherit the
-  /// app theme correctly.
-  bool get isDark => identical(this, dark) || bg == dark.bg;
+  /// True when the current theme is dark. Used by overlay widgets (tooltips,
+  /// popups) that cannot rely on Theme.of(overlayContext) since overlay
+  /// contexts may not inherit the app theme correctly.
+  final bool isDark;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -94,20 +123,44 @@ class _NavItem {
     required this.icon,
     required this.label,
     this.subItems = const [],
-    this.isLogout = false,
+    this.trailingControls = false,
   });
 
   final String id;
   final IconData icon;
   final String label;
   final List<String> subItems;
-  final bool isLogout;
+
+  /// When true, the expanded row shows the lock + eye trailing controls
+  /// (matches the active "Object 2" layer item in the Figma reference).
+  final bool trailingControls;
 
   bool get hasSubmenu => subItems.isNotEmpty;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Static nav data (mirrors the Figma)
+// Showcase nav data (mirrors the HeroUI Figma layers list 1:1)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const List<_NavItem> _kShowcaseItems = [
+  _NavItem(id: 'camera1', icon: KasyIcons.settings, label: 'Camera 1'),
+  _NavItem(id: 'domelight', icon: KasyIcons.lightMode, label: 'Dome Light'),
+  _NavItem(id: 'keylight', icon: KasyIcons.idea, label: 'Key Light'),
+  _NavItem(id: 'arealight', icon: KasyIcons.widgets, label: 'Area Light'),
+  _NavItem(
+    id: 'object2',
+    icon: KasyIcons.packageOutline,
+    label: 'Object 2',
+    trailingControls: true,
+  ),
+  _NavItem(id: 'bg2', icon: KasyIcons.packageOutline, label: 'Background 2'),
+  _NavItem(id: 'character', icon: KasyIcons.packageOutline, label: 'Character'),
+  _NavItem(id: 'bg1', icon: KasyIcons.packageOutline, label: 'Background 1'),
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Connected (real navigation) nav data — kept so the live app keeps working,
+// including the Income submenu the host still relies on.
 // ─────────────────────────────────────────────────────────────────────────────
 
 const List<_NavItem> _kMainItems = [
@@ -123,61 +176,93 @@ const List<_NavItem> _kMainItems = [
   ),
 ];
 
-const _NavItem _kSettingsItem = _NavItem(
-  id: 'settings',
-  icon: KasyIcons.settings,
-  label: 'Settings',
+const _NavItem _kHelpItem = _NavItem(
+  id: 'help',
+  icon: KasyIcons.help,
+  label: 'Help',
 );
 
-const List<_NavItem> _kBottomItems = [
-  _NavItem(id: 'help', icon: KasyIcons.help, label: 'Help'),
-  _NavItem(
-    id: 'logout',
-    icon: KasyIcons.logout,
-    label: 'Logout Account',
-    isLogout: true,
-  ),
-];
-
 // ─────────────────────────────────────────────────────────────────────────────
-// KasySidebarPro — public widget
+// KasySidebar — public widget
 // ─────────────────────────────────────────────────────────────────────────────
 
 /// Which screen edge the sidebar is anchored to.
 ///
-/// Controls which corners receive [BorderRadius]: the edge touching the screen
-/// has flat (zero) corners; the opposite edge gets the rounded corners.
-enum KasySidebarProSide { left, right }
+/// Controls which edge receives the content-facing hairline + shadow nudge.
+enum KasySidebarSide { left, right }
 
-/// A pro-style collapsible sidebar with expandable submenu tree, hover popups
-/// in collapsed mode, and full light / dark mode support.
+/// A SaaS-style sidebar modelled on the HeroUI Figma kit: brand logo + panel
+/// toggle, a workspace selector, a segmented control, a navigable list with an
+/// active pill, and a pinned ⌘K search row. Collapses to an icon rail (with
+/// tooltips and a hover submenu popup) on narrow viewports or via the toggle.
 ///
 /// Pass [onSettingsTap] to respond when the user taps Settings.
-/// The sidebar manages its own collapsed state and sub-menu expansion.
-class KasySidebarPro extends StatefulWidget {
-  const KasySidebarPro({
+class KasySidebar extends StatefulWidget {
+  const KasySidebar({
     super.key,
     this.onSettingsTap,
+    this.onLogout,
     this.initiallyCollapsed = false,
-    this.side = KasySidebarProSide.left,
+    this.side = KasySidebarSide.left,
+    this.routes,
+    this.onTapItem,
+    this.currentItem,
+    this.showProfile = true,
+    this.profileName = 'Calvin Rice',
+    this.profileEmail = 'calvin@email.com',
+    this.profileAvatar,
+    this.profileGradient = KasyAvatarGradients.indigo,
+    this.onProfileTap,
   });
 
   final VoidCallback? onSettingsTap;
 
+  /// Whether the profile block is shown at the bottom of the rail. Set false to
+  /// drop it entirely (e.g. when the web header already carries the avatar).
+  final bool showProfile;
+
+  /// Profile block (bottom of the rail) — display name + email.
+  final String profileName;
+  final String profileEmail;
+
+  /// Custom avatar widget for the profile block — pass the signed-in user's
+  /// avatar (e.g. `KasyUserAvatar`) to show their real photo. When null, a
+  /// gradient-fill avatar ([profileGradient]) is shown instead.
+  final Widget? profileAvatar;
+
+  /// Gradient used for the profile avatar when no [profileImage] is given.
+  final KasyAvatarGradientData profileGradient;
+
+  /// Tap on the profile block (open account menu / profile).
+  final VoidCallback? onProfileTap;
+
+  /// Called when the user taps the Logout row in connected mode. The component
+  /// is purely presentational — the host (feature) owns the actual logout flow
+  /// (confirm dialog + sign-out). When null, the Logout row does nothing real.
+  final VoidCallback? onLogout;
+
   /// Whether the sidebar starts in the narrow (icon-only) mode.
   final bool initiallyCollapsed;
 
   /// The screen edge this sidebar is anchored to.
-  ///
-  /// [KasySidebarProSide.left] → flat left corners, rounded right corners.
-  /// [KasySidebarProSide.right] → flat right corners, rounded left corners.
-  final KasySidebarProSide side;
+  final KasySidebarSide side;
+
+  /// Bart bottom-bar routes to wire into the sidebar. When provided (along with
+  /// [onTapItem] and [currentItem]) the sidebar runs in "connected" mode with
+  /// real, navigable items. When null, it shows the HeroUI showcase items.
+  final List<BartMenuRoute>? routes;
+
+  /// Called with the route index when a real nav item is tapped.
+  final OnTapItem? onTapItem;
+
+  /// Bart's active-tab index notifier, used to highlight the current screen.
+  final ValueNotifier<int>? currentItem;
 
   @override
-  State<KasySidebarPro> createState() => _KasySidebarProState();
+  State<KasySidebar> createState() => _KasySidebarState();
 }
 
-class _KasySidebarProState extends State<KasySidebarPro> {
+class _KasySidebarState extends State<KasySidebar> {
   // User's explicit open/close preference (set by tapping the toggle button).
   late bool _userChoseCollapsed;
 
@@ -186,27 +271,35 @@ class _KasySidebarProState extends State<KasySidebarPro> {
   bool _collapsed = false;
 
   bool _incomeExpanded = false;
-  String _activeItemId = 'dashboard';
+
+  // Showcase state.
+  int _showcaseTab = 0; // 0 = Layers, 1 = Assets
+  late String _activeItemId;
   String _activeSubItem = '';
 
   /// Viewport width below which the sidebar auto-collapses (tablet breakpoint).
   static const double _kBreakpoint = 1024.0;
 
+  /// True when wired to Bart's navigation (real, tappable screens).
+  bool get _connected =>
+      widget.routes != null &&
+      widget.routes!.length >= 2 &&
+      widget.onTapItem != null &&
+      widget.currentItem != null;
+
   @override
   void initState() {
     super.initState();
     _userChoseCollapsed = widget.initiallyCollapsed;
+    // Connected mode follows Bart's currentItem (empty highlight here); the
+    // showcase defaults to the active layer from the Figma reference.
+    _activeItemId = _connected ? '' : 'object2';
   }
 
   bool _isViewportNarrow(BuildContext context) =>
       MediaQuery.sizeOf(context).width < _kBreakpoint;
 
-  // ── Color helpers ──────────────────────────────────────────────────────────
-
-  _SidebarColors get _colors =>
-      Theme.of(context).brightness == Brightness.dark
-          ? _SidebarColors.dark
-          : _SidebarColors.light;
+  _SidebarColors get _colors => _SidebarColors.fromContext(context);
 
   // ── Actions ───────────────────────────────────────────────────────────────
 
@@ -214,6 +307,12 @@ class _KasySidebarProState extends State<KasySidebarPro> {
   void _toggleCollapse() =>
       setState(() => _userChoseCollapsed = !_userChoseCollapsed);
 
+  /// Navigates to a real route via Bart and clears any static-item highlight.
+  void _navigateTo(int index) {
+    setState(() => _activeItemId = '');
+    widget.onTapItem!(index);
+  }
+
   void _activateItem(String id) {
     if (id == 'settings') {
       widget.onSettingsTap?.call();
@@ -222,127 +321,122 @@ class _KasySidebarProState extends State<KasySidebarPro> {
     }
     setState(() {
       _activeItemId = id;
-      // Leaving Income → clear the active sub-item so it doesn't stay
-      // highlighted when the user is on a completely different page.
       if (id != 'income') _activeSubItem = '';
     });
   }
 
   void _activateSubItem(String label) => setState(() {
     _activeSubItem = label;
-    _activeItemId = 'income'; // sub-item belongs to Income → highlight it
+    _activeItemId = 'income';
   });
 
   // ── Build ─────────────────────────────────────────────────────────────────
 
   @override
   Widget build(BuildContext context) {
-    // Recompute effective collapsed state every build so viewport changes
-    // are picked up automatically without any extra listener.
     _collapsed = _userChoseCollapsed || _isViewportNarrow(context);
 
     final c = _colors;
+    final bool anchoredLeft = widget.side == KasySidebarSide.left;
+
+    // Hairline on the content-facing edge (Figma `separator`).
+    final Border edgeBorder = anchoredLeft
+        ? Border(right: BorderSide(color: c.border, width: 0.5))
+        : Border(left: BorderSide(color: c.border, width: 0.5));
+
+    // Figma `shadow-surface`: a soft lift in light mode only (dark uses none).
+    final List<BoxShadow> shadow = c.isDark
+        ? const <BoxShadow>[]
+        : const <BoxShadow>[
+            BoxShadow(
+              color: Color(0x14000000),
+              blurRadius: 4,
+              offset: Offset(0, 2),
+            ),
+            BoxShadow(
+              color: Color(0x0F000000),
+              blurRadius: 2,
+              offset: Offset(0, 1),
+            ),
+          ];
 
-    final bool anchoredLeft = widget.side == KasySidebarProSide.left;
-    final Border border = anchoredLeft
-        ? Border(right: BorderSide(color: c.border))
-        : Border(left: BorderSide(color: c.border));
-
-    // The outer AnimatedContainer is extended by half the button width (14px)
-    // on the side where the collapse button protrudes. This makes the button
-    // visually straddle the edge AND stay within parent bounds — Flutter only
-    // delivers hit tests to widgets inside their parent's bounds.
-    //
-    // Layout:                  left-anchored example
-    //   ┌── outer (256+14) ─────────────────────────┐
-    //   │ ┌── sidebar box (256) ──────────┐          │
-    //   │ │   content                     │ [button] │
-    //   │ └───────────────────────────────┘          │
-    //   └────────────────────────────────────────────┘
-    //
-    // The 14px transparent strip on the right holds the outer half of the
-    // button, giving it a full 28×28 hittable area.
-    const double halfBtn = _kCollapseButtonSize / 2; // 14px
+    final Widget content = _connected
+        ? ValueListenableBuilder<int>(
+            valueListenable: widget.currentItem!,
+            builder: (_, currentIndex, _) =>
+                _buildConnectedContent(context, c, currentIndex),
+          )
+        : _buildShowcaseContent(context, c);
 
     return Material(
       type: MaterialType.transparency,
       child: AnimatedContainer(
         duration: const Duration(milliseconds: 220),
         curve: Curves.easeInOut,
-        width: (_collapsed ? _kWidthCollapsed : _kWidthOpen) + halfBtn,
-        child: Stack(
-          children: [
-            // Sidebar background + content (leaves halfBtn space for button).
-            Positioned(
-              left: anchoredLeft ? 0 : halfBtn,
-              right: anchoredLeft ? halfBtn : 0,
-              top: 0,
-              bottom: 0,
-              child: DecoratedBox(
-                decoration: BoxDecoration(
-                  color: c.bg,
-                  border: border,
-                ),
-                child: _buildScrollableContent(context, c),
-              ),
-            ),
-            // Collapse button — centered on the sidebar edge, fully within
-            // the outer container so hit tests work correctly.
-            _buildCollapseButton(context, c),
-          ],
-        ),
+        width: _collapsed ? _kWidthCollapsed : _kWidthOpen,
+        decoration: BoxDecoration(color: c.bg, boxShadow: shadow),
+        foregroundDecoration: BoxDecoration(border: edgeBorder),
+        clipBehavior: Clip.hardEdge,
+        child: content,
       ),
     );
   }
 
-  // ── Scrollable content ────────────────────────────────────────────────────
+  // ── Showcase layout (HeroUI Figma 1:1) ──────────────────────────────────────
 
-  Widget _buildScrollableContent(BuildContext context, _SidebarColors c) {
-    // Use a Column that fills the sidebar height.
-    // Top section scrolls if content overflows; bottom items (Help + Logout)
-    // stay pinned to the bottom via Spacer in the outer Column.
-    // SizedBox.expand (not Positioned.fill) because the parent here is a
-    // DecoratedBox, not a Stack — Positioned only works as a direct Stack child.
+  Widget _buildShowcaseContent(BuildContext context, _SidebarColors c) {
     return SizedBox.expand(
       child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          // ── Scrollable nav area ──────────────────────────────────────────
+          // Logo band — 68px tall so the divider below aligns with the web
+          // header's bottom border (one continuous line across the chrome).
+          _buildTopBand(c),
+          _buildDivider(c),
+          // Nav: workspace selector + segmented tabs + the layers list.
           Expanded(
-            child: SingleChildScrollView(
-              padding: const EdgeInsets.fromLTRB(
-                _kPad, _kPad, _kPad, 0,
-              ),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  _buildProfile(context, c),
-                  const SizedBox(height: _kPad),
-                  _buildDivider(c),
-                  const SizedBox(height: _kPad),
-                  _buildSectionLabel('MAIN', c),
-                  const SizedBox(height: _kItemGap),
-                  ..._kMainItems.map((item) => _buildNavItem(context, item, c)),
-                  const SizedBox(height: _kPad),
-                  _buildDivider(c),
-                  const SizedBox(height: _kPad),
-                  _buildSectionLabel('SETTINGS', c),
-                  const SizedBox(height: _kItemGap),
-                  _buildNavItem(context, _kSettingsItem, c),
-                ],
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(_kPadH, _kDividerGap, _kPadH, 0),
+              child: SingleChildScrollView(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (!_collapsed) ...[
+                      _buildWorkspaceSelector(c),
+                      const SizedBox(height: _kHeaderGap),
+                      _buildTabs(c),
+                      const SizedBox(height: _kNavGap),
+                    ],
+                    for (final item in _kShowcaseItems)
+                      _buildNavItem(context, item, c),
+                  ],
+                ),
               ),
             ),
           ),
-          // ── Bottom items pinned ──────────────────────────────────────────
+          // Pinned ⌘K search row + profile block.
+          _buildDivider(c),
           Padding(
             padding: const EdgeInsets.fromLTRB(
-              _kPad, _kItemGap, _kPad, _kPad,
+              _kPadH,
+              _kFooterGap,
+              _kPadH,
+              _kPadBottom,
             ),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
-              children: _kBottomItems
-                  .map((item) => _buildNavItem(context, item, c))
-                  .toList(),
+              children: [
+                _buildItemRow(
+                  c,
+                  icon: KasyIcons.search,
+                  label: 'Search',
+                  isActive: false,
+                  onTap: () {},
+                  bottomGap: 0,
+                  trailing: [_buildKbd(c)],
+                ),
+                if (widget.showProfile) _buildProfile(c),
+              ],
             ),
           ),
         ],
@@ -350,161 +444,459 @@ class _KasySidebarProState extends State<KasySidebarPro> {
     );
   }
 
-  // ── Profile ───────────────────────────────────────────────────────────────
+  // ── Connected layout (real navigation) ──────────────────────────────────────
 
-  Widget _buildProfile(BuildContext context, _SidebarColors c) {
-    const double avatarSize = 44;
-    final Widget avatar = Container(
-      width: avatarSize,
-      height: avatarSize,
-      decoration: BoxDecoration(
-        color: c.divider,
-        shape: BoxShape.circle,
-      ),
-      child: Icon(KasyIcons.person, size: 20, color: c.textMuted),
-    );
+  Widget _buildConnectedContent(
+    BuildContext context,
+    _SidebarColors c,
+    int currentIndex,
+  ) {
+    final int settingsIndex = widget.routes!.length - 1;
+    final nav = context.t.navigation;
+    final List<({IconData icon, String label})> meta = [
+      (icon: KasyIcons.home, label: nav.home),
+      (icon: KasyIcons.help, label: nav.support),
+      (icon: KasyIcons.notification, label: nav.notifications),
+    ];
+    final int mainCount = widget.routes!.length - 1; // exclude settings (last)
 
-    return Row(
-      children: [
-        avatar,
-        AnimatedSize(
-          duration: const Duration(milliseconds: 220),
-          curve: Curves.easeInOut,
-          child: _collapsed
-              ? const SizedBox.shrink()
-              : Row(
-                  mainAxisSize: MainAxisSize.min,
+    return SizedBox.expand(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _buildTopBand(c),
+          _buildDivider(c),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(_kPadH, _kDividerGap, _kPadH, 0),
+              child: SingleChildScrollView(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    const SizedBox(width: 12),
-                    Flexible(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        mainAxisSize: MainAxisSize.min,
-                        children: [
-                          Text(
-                            'PRODUCT MANAGER',
-                            style: TextStyle(
-                              fontSize: 10,
-                              fontWeight: FontWeight.w500,
-                              color: c.textMuted,
-                              letterSpacing: 0.4,
-                            ),
-                          ),
-                          const SizedBox(height: 4),
-                          Text(
-                            'Andrew Smith',
-                            style: TextStyle(
-                              fontSize: 14,
-                              fontWeight: FontWeight.w500,
-                              color: c.textActive,
-                            ),
-                          ),
-                        ],
+                    if (!_collapsed) ...[
+                      _buildSectionLabel('MAIN', c),
+                      const SizedBox(height: _kItemGap),
+                    ],
+                    // Real, navigable screens.
+                    for (int i = 0; i < mainCount; i++)
+                      _buildItemRow(
+                        c,
+                        icon: i < meta.length
+                            ? meta[i].icon
+                            : (widget.routes![i].icon ?? KasyIcons.note),
+                        label: i < meta.length
+                            ? meta[i].label
+                            : (widget.routes![i].label ?? ''),
+                        isActive: _activeItemId.isEmpty && currentIndex == i,
+                        onTap: () => _navigateTo(i),
                       ),
+                    // Static showcase extras (incl. the Income submenu).
+                    for (final item in _kMainItems.skip(1))
+                      _buildNavItem(context, item, c),
+                    const SizedBox(height: _kDividerGap),
+                    if (!_collapsed) ...[
+                      _buildSectionLabel('SETTINGS', c),
+                      const SizedBox(height: _kItemGap),
+                    ],
+                    _buildItemRow(
+                      c,
+                      icon: KasyIcons.settings,
+                      label: nav.settings,
+                      isActive:
+                          _activeItemId.isEmpty && currentIndex == settingsIndex,
+                      onTap: () => _navigateTo(settingsIndex),
                     ),
                   ],
                 ),
+              ),
+            ),
+          ),
+          _buildDivider(c),
+          const SizedBox(height: _kFooterGap),
+          Padding(
+            padding: const EdgeInsets.fromLTRB(_kPadH, 0, _kPadH, _kPadBottom),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                _buildNavItem(context, _kHelpItem, c),
+                _buildItemRow(
+                  c,
+                  icon: KasyIcons.logout,
+                  label: nav.logout,
+                  isActive: false,
+                  isLogout: true,
+                  bottomGap: 0,
+                  onTap: () => widget.onLogout?.call(),
+                ),
+                if (widget.showProfile) _buildProfile(c),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // ── Top band (logo + panel toggle) ──────────────────────────────────────────
+
+  /// The brand band at the top of the rail. Fixed to [_kTopBandHeight] (= web
+  /// header height) so the divider underneath lines up with the header's bottom
+  /// border. Content is vertically centred, mirroring the header's toolbar row.
+  Widget _buildTopBand(_SidebarColors c) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: _kPadH),
+      child: SizedBox(
+        height: _kTopBandHeight,
+        child: _collapsed
+            ? Center(child: _buildToggleButton(c))
+            : Row(
+                children: [
+                  // Brand wordmark — same artwork as the splash screen.
+                  Image.asset(
+                    c.isDark
+                        ? 'assets/images/logo_wordmark_dark.png'
+                        : 'assets/images/logo_wordmark_light.png',
+                    height: 32,
+                    fit: BoxFit.contain,
+                  ),
+                  const Spacer(),
+                  _buildToggleButton(c),
+                ],
+              ),
+      ),
+    );
+  }
+
+  Widget _buildToggleButton(_SidebarColors c) {
+    return KasyHover(
+      borderRadius: BorderRadius.circular(_kToggleSize / 2),
+      hoverColor: c.activeBg,
+      pressColor: c.textActive,
+      onTap: _toggleCollapse,
+      child: Container(
+        width: _kToggleSize,
+        height: _kToggleSize,
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(_kToggleSize / 2),
+        ),
+        child: Icon(KasyIcons.panelLeft, size: _kIconSize, color: c.textMuted),
+      ),
+    );
+  }
+
+  // ── Workspace selector ──────────────────────────────────────────────────────
+
+  Widget _buildWorkspaceSelector(_SidebarColors c) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Flexible(
+              child: Text(
+                '3D Dog Character',
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  fontSize: 14,
+                  height: 20 / 14,
+                  fontWeight: FontWeight.w500,
+                  color: c.textActive,
+                ),
+              ),
+            ),
+            const SizedBox(width: 16),
+            Icon(KasyIcons.chevronDown, size: _kIconSize, color: c.textMuted),
+          ],
+        ),
+        const SizedBox(height: 4),
+        Text(
+          '3D Design Project',
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: TextStyle(
+            fontSize: 12,
+            height: 16 / 12,
+            fontWeight: FontWeight.w400,
+            color: c.textMuted,
+          ),
         ),
       ],
     );
   }
 
-  // ── Divider ───────────────────────────────────────────────────────────────
+  // ── Segmented tabs (Layers / Assets) ────────────────────────────────────────
 
-  Widget _buildDivider(_SidebarColors c) {
+  Widget _buildTabs(_SidebarColors c) {
     return Container(
-      height: 2,
+      width: double.infinity,
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
       decoration: BoxDecoration(
-        color: c.divider,
-        borderRadius: BorderRadius.circular(2),
+        color: c.activeBg,
+        borderRadius: BorderRadius.circular(24),
+      ),
+      child: Row(
+        children: [
+          _buildTab(c, 'Layers', 0),
+          const SizedBox(width: 2),
+          _buildTab(c, 'Assets', 1),
+        ],
       ),
     );
   }
 
-  // ── Section label ─────────────────────────────────────────────────────────
+  Widget _buildTab(_SidebarColors c, String label, int index) {
+    final bool selected = _showcaseTab == index;
+    return Expanded(
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: () => setState(() => _showcaseTab = index),
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 180),
+            curve: Curves.easeOut,
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              color: selected ? c.segmentThumb : Colors.transparent,
+              borderRadius: BorderRadius.circular(24),
+              boxShadow: selected
+                  ? const [
+                      BoxShadow(
+                        color: Color(0x0F000000),
+                        blurRadius: 8,
+                        offset: Offset(0, 2),
+                      ),
+                    ]
+                  : null,
+            ),
+            child: Text(
+              label,
+              style: TextStyle(
+                fontSize: 14,
+                height: 20 / 14,
+                fontWeight: FontWeight.w500,
+                color: selected ? c.textActive : c.textMuted,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
 
-  Widget _buildSectionLabel(String label, _SidebarColors c) {
+  // ── ⌘K keyboard chip ─────────────────────────────────────────────────────────
+
+  Widget _buildKbd(_SidebarColors c) {
     final TextStyle style = TextStyle(
-      fontSize: 10,
+      fontSize: 14,
+      height: 20 / 14,
       fontWeight: FontWeight.w500,
       color: c.textMuted,
-      letterSpacing: 0.4,
     );
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
+      decoration: BoxDecoration(
+        color: c.activeBg,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text('⌘', style: style),
+          const SizedBox(width: 2),
+          Text('K', style: style),
+        ],
+      ),
+    );
+  }
+
+  // ── Profile block (bottom) ──────────────────────────────────────────────────
+
+  /// Account row pinned at the bottom: the [KasySidebar.profileAvatar] (the
+  /// signed-in user's photo) when provided, otherwise a gradient-fill avatar +
+  /// name + email. Collapses to just the avatar on the narrow rail.
+  Widget _buildProfile(_SidebarColors c) {
+    final Widget avatar =
+        widget.profileAvatar ??
+        KasyAvatar(diameter: 36, backgroundGradient: widget.profileGradient);
 
     if (_collapsed) {
-      // Centered + clipped so long labels (e.g. SETTINGS) don't overflow.
-      return Center(
-        child: Text(
-          label,
-          style: style,
-          overflow: TextOverflow.clip,
-          softWrap: false,
-          textAlign: TextAlign.center,
-        ),
+      return Padding(
+        padding: const EdgeInsets.only(top: _kItemGap),
+        child: Center(child: avatar),
       );
     }
 
+    return Padding(
+      padding: const EdgeInsets.only(top: _kItemGap),
+      child: KasyHover(
+        borderRadius: BorderRadius.circular(_kItemRadius),
+        hoverColor: c.activeBg,
+        pressColor: c.textActive,
+        onTap: widget.onProfileTap ?? () {},
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+          child: Row(
+            children: [
+              avatar,
+              const SizedBox(width: _kIconGap),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      widget.profileName,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                        fontSize: 14,
+                        height: 20 / 14,
+                        fontWeight: FontWeight.w500,
+                        color: c.textActive,
+                      ),
+                    ),
+                    Text(
+                      widget.profileEmail,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                        fontSize: 12,
+                        height: 16 / 12,
+                        fontWeight: FontWeight.w500,
+                        color: c.textMuted,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  // ── Divider ───────────────────────────────────────────────────────────────
+
+  // 0.5px hairline — same width + colour as the vertical edge line and the web
+  // header's bottom border, so all the chrome lines read identically.
+  Widget _buildDivider(_SidebarColors c) =>
+      Container(height: 0.5, color: c.divider);
+
+  // ── Section label ─────────────────────────────────────────────────────────
+
+  Widget _buildSectionLabel(String label, _SidebarColors c) {
     return Padding(
       padding: const EdgeInsets.only(left: _kItemHPad),
-      child: Text(label, style: style),
+      child: Text(
+        label,
+        style: TextStyle(
+          fontSize: 11,
+          fontWeight: FontWeight.w600,
+          color: c.textMuted,
+          letterSpacing: 0.6,
+        ),
+      ),
     );
   }
 
-  // ── Nav item ──────────────────────────────────────────────────────────────
+  // ── Nav item dispatch ───────────────────────────────────────────────────────
 
-  Widget _buildNavItem(
-    BuildContext context,
-    _NavItem item,
-    _SidebarColors c,
-  ) {
+  Widget _buildNavItem(BuildContext context, _NavItem item, _SidebarColors c) {
     if (item.hasSubmenu) {
       return _buildDropdownItem(context, item, c);
     }
-
     final bool isActive = _activeItemId == item.id;
-    // Active bg is explicit; hover bg comes from KasyHover.hoverColor.
-    final Color bg = isActive ? c.activeBg : Colors.transparent;
-    final Color iconColor = item.isLogout
+    return _buildItemRow(
+      c,
+      icon: item.icon,
+      label: item.label,
+      isActive: isActive,
+      onTap: () => _activateItem(item.id),
+      trailing: item.trailingControls
+          ? [
+              Icon(KasyIcons.security, size: _kIconSize, color: c.textMuted),
+              const SizedBox(width: 12),
+              Icon(KasyIcons.eye, size: _kIconSize, color: c.textMuted),
+            ]
+          : const [],
+    );
+  }
+
+  // ── Generic row (expanded) / icon+tooltip (collapsed) ────────────────────────
+
+  Widget _buildItemRow(
+    _SidebarColors c, {
+    required IconData icon,
+    required String label,
+    required bool isActive,
+    required VoidCallback onTap,
+    bool isLogout = false,
+    List<Widget> trailing = const [],
+    double bottomGap = _kItemGap,
+  }) {
+    final Color fill = isActive ? c.activeBg : Colors.transparent;
+    final Color iconColor = isLogout
         ? c.logout
         : (isActive ? c.textActive : c.textMuted);
-    final Color textColor = item.isLogout ? c.logout : iconColor;
+    final Color labelColor = isLogout ? c.logout : c.textActive;
 
-    // Collapsed: icon only, optionally with hover popup for sub-items
     if (_collapsed) {
-      return _buildCollapsedIcon(context, item, bg, iconColor, c);
+      return Padding(
+        padding: EdgeInsets.only(bottom: bottomGap),
+        child: _ProTooltipIcon(
+          icon: icon,
+          label: label,
+          iconBg: fill,
+          iconColor: iconColor,
+          activeBg: c.activeBg,
+          colors: c,
+          onTap: onTap,
+        ),
+      );
     }
 
     return Padding(
-      padding: const EdgeInsets.only(bottom: _kItemGap),
+      padding: EdgeInsets.only(bottom: bottomGap),
       child: KasyHover(
         borderRadius: BorderRadius.circular(_kItemRadius),
         hoverColor: c.activeBg,
-        pressColor: c.activeBg,
-        onTap: () => _activateItem(item.id),
+        pressColor: c.textActive,
+        onTap: onTap,
         child: Container(
+          constraints: const BoxConstraints(minHeight: _kItemMinH),
           padding: const EdgeInsets.symmetric(
             horizontal: _kItemHPad,
             vertical: _kItemVPad,
           ),
           decoration: BoxDecoration(
-            color: bg,
+            color: fill,
             borderRadius: BorderRadius.circular(_kItemRadius),
           ),
           child: Row(
             children: [
-              _ProIcon(icon: item.icon, color: iconColor, active: isActive),
-              const SizedBox(width: 12),
+              Icon(icon, size: _kIconSize, color: iconColor),
+              const SizedBox(width: _kIconGap),
               Expanded(
                 child: Text(
-                  item.label,
+                  label,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
                   style: TextStyle(
                     fontSize: 14,
-                    fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
-                    color: textColor,
-                    letterSpacing: -0.28,
+                    height: 20 / 14,
+                    fontWeight: FontWeight.w500,
+                    color: labelColor,
                   ),
                 ),
               ),
+              ...trailing,
             ],
           ),
         ),
@@ -512,30 +904,7 @@ class _KasySidebarProState extends State<KasySidebarPro> {
     );
   }
 
-  // ── Collapsed icon button ─────────────────────────────────────────────────
-
-  Widget _buildCollapsedIcon(
-    BuildContext context,
-    _NavItem item,
-    Color bg,
-    Color iconColor,
-    _SidebarColors c,
-  ) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: _kItemGap),
-      child: _ProTooltipIcon(
-        icon: item.icon,
-        label: item.label,
-        iconBg: bg,
-        iconColor: iconColor,
-        activeBg: c.activeBg,
-        colors: c,
-        onTap: () => _activateItem(item.id),
-      ),
-    );
-  }
-
-  // ── Dropdown item (Income) ────────────────────────────────────────────────
+  // ── Dropdown item (submenu — used by connected Income) ───────────────────────
 
   Widget _buildDropdownItem(
     BuildContext context,
@@ -547,7 +916,6 @@ class _KasySidebarProState extends State<KasySidebarPro> {
     final Color iconColor = isActive ? c.textActive : c.textMuted;
 
     if (_collapsed) {
-      // In collapsed mode: icon that shows a floating popup on hover
       return Padding(
         padding: const EdgeInsets.only(bottom: _kItemGap),
         child: _ProHoverPopupIcon(
@@ -565,53 +933,49 @@ class _KasySidebarProState extends State<KasySidebarPro> {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        // Header row — no bottom padding here; the SizedBox at the bottom of
-        // this Column provides the single trailing gap (same as other items).
         KasyHover(
+          borderRadius: BorderRadius.circular(_kItemRadius),
+          hoverColor: c.activeBg,
+          pressColor: c.textActive,
+          onTap: () => _activateItem(item.id),
+          child: Container(
+            constraints: const BoxConstraints(minHeight: _kItemMinH),
+            padding: const EdgeInsets.symmetric(
+              horizontal: _kItemHPad,
+              vertical: _kItemVPad,
+            ),
+            decoration: BoxDecoration(
+              color: bg,
               borderRadius: BorderRadius.circular(_kItemRadius),
-              hoverColor: c.activeBg,
-              pressColor: c.activeBg,
-              onTap: () => _activateItem(item.id),
-              child: Container(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: _kItemHPad,
-                  vertical: _kItemVPad,
-                ),
-                decoration: BoxDecoration(
-                  color: bg,
-                  borderRadius: BorderRadius.circular(_kItemRadius),
-                ),
-                child: Row(
-                  children: [
-                    _ProIcon(icon: item.icon, color: iconColor, active: isActive),
-                    const SizedBox(width: 12),
-                    Expanded(
-                      child: Text(
-                        item.label,
-                        style: TextStyle(
-                          fontSize: 14,
-                          fontWeight: isActive
-                              ? FontWeight.w600
-                              : FontWeight.w500,
-                          color: iconColor,
-                          letterSpacing: -0.28,
-                        ),
-                      ),
-                    ),
-                    AnimatedRotation(
-                      turns: _incomeExpanded ? 0.5 : 0,
-                      duration: const Duration(milliseconds: 200),
-                      child: Icon(
-                        KasyIcons.chevronDown,
-                        size: 16,
-                        color: iconColor,
-                      ),
+            ),
+            child: Row(
+              children: [
+                Icon(item.icon, size: _kIconSize, color: iconColor),
+                const SizedBox(width: _kIconGap),
+                Expanded(
+                  child: Text(
+                    item.label,
+                    style: TextStyle(
+                      fontSize: 14,
+                      height: 20 / 14,
+                      fontWeight: FontWeight.w500,
+                      color: c.textActive,
                     ),
-                  ],
+                  ),
                 ),
-              ),
+                AnimatedRotation(
+                  turns: _incomeExpanded ? 0.5 : 0,
+                  duration: const Duration(milliseconds: 200),
+                  child: Icon(
+                    KasyIcons.chevronDown,
+                    size: _kIconSize,
+                    color: iconColor,
+                  ),
+                ),
+              ],
+            ),
+          ),
         ),
-        // Expandable sub-items tree
         AnimatedCrossFade(
           duration: const Duration(milliseconds: 200),
           crossFadeState: _incomeExpanded
@@ -628,9 +992,7 @@ class _KasySidebarProState extends State<KasySidebarPro> {
   // ── Sub-items tree ────────────────────────────────────────────────────────
 
   Widget _buildSubItemsTree(_SidebarColors c) {
-    final subItems = _kMainItems
-        .firstWhere((i) => i.id == 'income')
-        .subItems;
+    final subItems = _kMainItems.firstWhere((i) => i.id == 'income').subItems;
     final double lineH = _treeLineHeight(subItems.length);
 
     return Padding(
@@ -640,12 +1002,11 @@ class _KasySidebarProState extends State<KasySidebarPro> {
         child: Stack(
           clipBehavior: Clip.none,
           children: [
-            // Vertical tree line
             Positioned(
               left: -_kTreeConnectorW,
               top: 0,
               child: Container(
-                width: 2,
+                width: 1.5,
                 height: lineH,
                 decoration: BoxDecoration(
                   color: c.divider,
@@ -653,7 +1014,6 @@ class _KasySidebarProState extends State<KasySidebarPro> {
                 ),
               ),
             ),
-            // Sub-items
             Column(
               children: subItems.asMap().entries.map((entry) {
                 final i = entry.key;
@@ -670,9 +1030,6 @@ class _KasySidebarProState extends State<KasySidebarPro> {
 
   Widget _buildSubItem(String label, bool isLast, _SidebarColors c) {
     final bool isActive = _activeSubItem == label;
-    // Sub-items: active state = bolder text only, no background fill.
-    // Hover still shows the fill via KasyHover.hoverColor for interactivity.
-    const Color bg = Colors.transparent;
     final Color textColor = isActive ? c.textActive : c.textMuted;
 
     return Padding(
@@ -680,7 +1037,6 @@ class _KasySidebarProState extends State<KasySidebarPro> {
       child: Stack(
         clipBehavior: Clip.none,
         children: [
-          // L-connector: bottom-left rounded border
           Positioned(
             left: -_kTreeConnectorW,
             top: _kSubItemH / 2 - 4,
@@ -689,8 +1045,8 @@ class _KasySidebarProState extends State<KasySidebarPro> {
               height: 8,
               decoration: BoxDecoration(
                 border: Border(
-                  left: BorderSide(color: c.divider, width: 2),
-                  bottom: BorderSide(color: c.divider, width: 2),
+                  left: BorderSide(color: c.divider, width: 1.5),
+                  bottom: BorderSide(color: c.divider, width: 1.5),
                 ),
                 borderRadius: const BorderRadius.only(
                   bottomLeft: Radius.circular(8),
@@ -698,11 +1054,10 @@ class _KasySidebarProState extends State<KasySidebarPro> {
               ),
             ),
           ),
-          // Item row
           KasyHover(
             borderRadius: BorderRadius.circular(_kItemRadius),
             hoverColor: c.activeBg,
-            pressColor: c.activeBg,
+            pressColor: c.textActive,
             onTap: () => _activateSubItem(label),
             child: Container(
               height: _kSubItemH,
@@ -711,7 +1066,7 @@ class _KasySidebarProState extends State<KasySidebarPro> {
                 vertical: 8,
               ),
               decoration: BoxDecoration(
-                color: bg,
+                color: Colors.transparent,
                 borderRadius: BorderRadius.circular(_kItemRadius),
               ),
               child: Align(
@@ -732,95 +1087,6 @@ class _KasySidebarProState extends State<KasySidebarPro> {
       ),
     );
   }
-
-  // ── Collapse toggle button ────────────────────────────────────────────────
-
-  Widget _buildCollapseButton(BuildContext context, _SidebarColors c) {
-    final bool anchoredLeft = widget.side == KasySidebarProSide.left;
-
-    // Left sidebar: button at the right edge; chevron ← when open, → when collapsed.
-    // Right sidebar: button at the left edge; chevron → when open, ← when collapsed.
-    // The button sits inside the AnimatedContainer bounds so it receives full
-    // hit tests (Flutter clips hit testing to the parent's bounds).
-    final double turns = anchoredLeft
-        ? (_collapsed ? -0.25 : 0.25)   // ← open, → collapsed
-        : (_collapsed ? 0.25 : -0.25);  // → open, ← collapsed
-
-    return Positioned(
-      // The outer container is sidebar_width + halfBtn wide.
-      // right: 0  → button right edge at outer container right edge.
-      // Button spans outer_width-28 to outer_width, center = sidebar_width. ✓
-      // Same logic mirrored for right-anchored sidebar.
-      left: anchoredLeft ? null : 0,
-      right: anchoredLeft ? 0 : null,
-      top: 34,
-      child: GestureDetector(
-        onTap: _toggleCollapse,
-        child: AnimatedContainer(
-          duration: const Duration(milliseconds: 220),
-          width: _kCollapseButtonSize,
-          height: _kCollapseButtonSize,
-          decoration: BoxDecoration(
-            color: c.bg,
-            border: Border.all(color: c.divider),
-            borderRadius: BorderRadius.circular(8),
-            boxShadow: [
-              BoxShadow(
-                color: const Color(0xFF000000).withValues(alpha: 0.06),
-                blurRadius: 4,
-                offset: const Offset(0, 1),
-              ),
-            ],
-          ),
-          child: Center(
-            child: AnimatedRotation(
-              turns: turns,
-              duration: const Duration(milliseconds: 220),
-              child: Icon(
-                KasyIcons.chevronDown,
-                size: 16,
-                color: c.textMuted,
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// _ProIcon — nav icon with subtle shadow weight when active
-// ─────────────────────────────────────────────────────────────────────────────
-
-/// Renders a nav icon at 20px. When [active], adds a soft shadow using the
-/// same [color] to simulate a slightly heavier stroke — consistent with the
-/// bolder text weight used on selected items.
-class _ProIcon extends StatelessWidget {
-  const _ProIcon({
-    required this.icon,
-    required this.color,
-    required this.active,
-  });
-
-  final IconData icon;
-  final Color color;
-  final bool active;
-
-  @override
-  Widget build(BuildContext context) {
-    return Icon(
-      icon,
-      size: 20,
-      color: color,
-      shadows: active
-          ? [
-              Shadow(color: color.withValues(alpha: 0.55), blurRadius: 0.6),
-              Shadow(color: color.withValues(alpha: 0.35), blurRadius: 1.4),
-            ]
-          : null,
-    );
-  }
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -1069,12 +1335,11 @@ class _TooltipCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // Use colors.isDark instead of Theme.of(context) — the overlay context
-    // does not always inherit the app theme correctly.
-    // Dark  → bg: colors.divider (#2D2F39), text: rgba(255,255,255,0.8)
-    // Light → bg: black, text: white — inverted tooltip (Figma spec / industry standard)
-    final Color bg = colors.isDark ? colors.divider : Colors.black;
-    final Color textColor =
-        colors.isDark ? const Color(0xCCFFFFFF) : Colors.white;
+    // does not always inherit the app theme correctly. Colors come from the
+    // global theme: an inverted tooltip in light mode (dark surface / light
+    // text — Figma spec / industry standard), neutral surface in dark mode.
+    final Color bg = colors.isDark ? colors.divider : colors.textActive;
+    final Color textColor = colors.isDark ? colors.textActive : colors.bg;
 
     return Material(
       color: Colors.transparent,
@@ -1128,7 +1393,9 @@ class _TooltipArrowPainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
-    final paint = Paint()..color = color..style = PaintingStyle.fill;
+    final paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.fill;
     final path = Path()
       ..moveTo(size.width, 0)
       ..lineTo(0, size.height / 2)