kasy-cli 1.34.0 → 1.36.0

package/templates/firebase/lib/components/kasy_sidebar.dart

@@ -3,8 +3,10 @@ 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/components/kasy_app_bar.dart';
 import 'package:kasy_kit/components/kasy_avatar.dart';
 import 'package:kasy_kit/components/kasy_avatar_presets.dart';
+import 'package:kasy_kit/components/kasy_tabs.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';
@@ -15,8 +17,11 @@ import 'package:kasy_kit/i18n/translations.g.dart';
 
 // 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 _kWidthCollapsed = 64.0;
 const double _kPadH = 16.0; // px-4
+// Tighter horizontal gutter for the narrow collapsed rail, so a 64px rail keeps
+// the 20px icons (44px active pill) centered without clipping.
+const double _kCollapsedPadH = 10.0;
 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.
@@ -56,7 +61,6 @@ class _SidebarColors {
     required this.border,
     required this.divider,
     required this.activeBg,
-    required this.segmentThumb,
     required this.textMuted,
     required this.textActive,
     required this.logout,
@@ -65,9 +69,9 @@ class _SidebarColors {
 
   /// 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.
+  /// `border → border`, `separator → separator`, and `default →
+  /// surfaceNeutralSoft` (hover/active fill). The segmented control is the
+  /// shared [KasyTabs] component, which owns its own selected-thumb token.
   factory _SidebarColors.fromContext(BuildContext context) {
     final c = context.colors;
     final bool dark = context.isDark;
@@ -79,8 +83,6 @@ class _SidebarColors {
       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,
@@ -92,7 +94,6 @@ class _SidebarColors {
   final Color border;
   final Color divider;
   final Color activeBg;
-  final Color segmentThumb;
   final Color textMuted;
   final Color textActive;
   final Color logout;
@@ -203,6 +204,8 @@ class KasySidebar extends StatefulWidget {
     this.onSettingsTap,
     this.onLogout,
     this.initiallyCollapsed = false,
+    this.isDrawer = false,
+    this.showSearch = false,
     this.side = KasySidebarSide.left,
     this.routes,
     this.onTapItem,
@@ -250,6 +253,16 @@ class KasySidebar extends StatefulWidget {
   /// Whether the sidebar starts in the narrow (icon-only) mode.
   final bool initiallyCollapsed;
 
+  /// Present the rail as a slide-in drawer (the mobile pattern): it always opens
+  /// wide and hides the collapse toggle, regardless of viewport width. Use when
+  /// opening the sidebar from an app-bar menu button on a phone.
+  final bool isDrawer;
+
+  /// Whether to pin a ⌘K search row above the footer in connected mode. Opt-in
+  /// (off by default) so the live app navigation stays lean; flip it on when the
+  /// sidebar should double as a command/search entry point.
+  final bool showSearch;
+
   /// The screen edge this sidebar is anchored to.
   final KasySidebarSide side;
 
@@ -269,11 +282,14 @@ class KasySidebar extends StatefulWidget {
 }
 
 class _KasySidebarState extends State<KasySidebar> {
-  // User's explicit open/close preference (set by tapping the toggle button).
-  late bool _userChoseCollapsed;
-
-  // Computed at the start of build() — true when user chose narrow OR viewport
-  // is below the breakpoint. All submethods read this field directly.
+  // User's explicit open/close preference, set by tapping the toggle button.
+  // Null until they touch it, so the rail follows the viewport (auto-collapse on
+  // narrow). Once set, the explicit choice wins over the viewport — which is
+  // what lets a narrow-viewport rail be reopened by tapping the toggle.
+  bool? _collapsePreference;
+
+  // Computed at the start of build() — the user's explicit preference when set,
+  // otherwise the viewport auto-collapse. All submethods read this field.
   bool _collapsed = false;
 
   bool _incomeExpanded = false;
@@ -286,6 +302,19 @@ class _KasySidebarState extends State<KasySidebar> {
   /// Viewport width below which the sidebar auto-collapses (tablet breakpoint).
   static const double _kBreakpoint = 1024.0;
 
+  /// Below this (mobile), the rail is meant to be a wide drawer: it always opens
+  /// full width and hides the collapse toggle (thinning makes no sense on a
+  /// phone-width sheet). The collapse affordance only exists from tablet up.
+  static const double _kMobileBreakpoint = 768.0;
+
+  bool _isMobile(BuildContext context) =>
+      MediaQuery.sizeOf(context).width < _kMobileBreakpoint;
+
+  /// Drawer presentation — always wide, no collapse toggle. True on a phone-
+  /// width viewport or when explicitly opened as a drawer ([isDrawer]).
+  bool _wideDrawer(BuildContext context) =>
+      widget.isDrawer || _isMobile(context);
+
   /// True when wired to Bart's navigation (real, tappable screens).
   bool get _connected =>
       widget.routes != null &&
@@ -296,7 +325,7 @@ class _KasySidebarState extends State<KasySidebar> {
   @override
   void initState() {
     super.initState();
-    _userChoseCollapsed = widget.initiallyCollapsed;
+    _collapsePreference = widget.initiallyCollapsed ? true : null;
     // Connected mode follows Bart's currentItem (empty highlight here); the
     // showcase defaults to the active layer from the Figma reference.
     _activeItemId = _connected ? '' : 'object2';
@@ -305,13 +334,19 @@ class _KasySidebarState extends State<KasySidebar> {
   bool _isViewportNarrow(BuildContext context) =>
       MediaQuery.sizeOf(context).width < _kBreakpoint;
 
+  /// Horizontal gutter for the rail content — tighter when collapsed so the
+  /// icon rail stays narrow while keeping the icons centered.
+  double get _railPadH => _collapsed ? _kCollapsedPadH : _kPadH;
+
   _SidebarColors get _colors => _SidebarColors.fromContext(context);
 
   // ── Actions ───────────────────────────────────────────────────────────────
 
-  // Only the user's preference toggles — never the viewport-forced state.
+  // Flip the currently visible state and pin it as the explicit preference, so
+  // it overrides the viewport auto-collapse — this is what lets a narrow-
+  // viewport rail be expanded back open from the toggle.
   void _toggleCollapse() =>
-      setState(() => _userChoseCollapsed = !_userChoseCollapsed);
+      setState(() => _collapsePreference = !_collapsed);
 
   /// Navigates to a real route via Bart and clears any static-item highlight.
   /// Moving to another screen also collapses an open submenu (e.g. Income) and
@@ -347,7 +382,10 @@ class _KasySidebarState extends State<KasySidebar> {
 
   @override
   Widget build(BuildContext context) {
-    _collapsed = _userChoseCollapsed || _isViewportNarrow(context);
+    // A drawer / phone-width rail always opens wide; otherwise honour the user's
+    // explicit choice, falling back to the tablet auto-collapse.
+    _collapsed = !_wideDrawer(context) &&
+        (_collapsePreference ?? _isViewportNarrow(context));
 
     final c = _colors;
     final bool anchoredLeft = widget.side == KasySidebarSide.left;
@@ -409,11 +447,15 @@ class _KasySidebarState extends State<KasySidebar> {
           // Nav: workspace selector + segmented tabs + the layers list.
           Expanded(
             child: Padding(
-              padding: const EdgeInsets.fromLTRB(_kPadH, _kDividerGap, _kPadH, 0),
+              padding: EdgeInsets.symmetric(horizontal: _railPadH),
               child: SingleChildScrollView(
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
+                    // Top gap lives INSIDE the scroll view so the list scrolls
+                    // flush under the top divider (symmetric with the bottom),
+                    // instead of clipping a gap below it.
+                    const SizedBox(height: _kDividerGap),
                     if (!_collapsed) ...[
                       _buildWorkspaceSelector(c),
                       const SizedBox(height: _kHeaderGap),
@@ -430,10 +472,10 @@ class _KasySidebarState extends State<KasySidebar> {
           // Pinned ⌘K search row + profile block.
           _buildDivider(c),
           Padding(
-            padding: const EdgeInsets.fromLTRB(
-              _kPadH,
+            padding: EdgeInsets.fromLTRB(
+              _railPadH,
               _kFooterGap,
-              _kPadH,
+              _railPadH,
               _kPadBottom,
             ),
             child: Column(
@@ -481,11 +523,15 @@ class _KasySidebarState extends State<KasySidebar> {
           _buildDivider(c),
           Expanded(
             child: Padding(
-              padding: const EdgeInsets.fromLTRB(_kPadH, _kDividerGap, _kPadH, 0),
+              padding: EdgeInsets.symmetric(horizontal: _railPadH),
               child: SingleChildScrollView(
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
+                    // Top gap lives INSIDE the scroll view so the list scrolls
+                    // flush under the top divider (symmetric with the bottom),
+                    // instead of clipping a gap below it.
+                    const SizedBox(height: _kDividerGap),
                     if (!_collapsed) ...[
                       _buildSectionLabel('MAIN', c),
                       const SizedBox(height: _kItemGap),
@@ -530,10 +576,19 @@ class _KasySidebarState extends State<KasySidebar> {
           _buildDivider(c),
           const SizedBox(height: _kFooterGap),
           Padding(
-            padding: const EdgeInsets.fromLTRB(_kPadH, 0, _kPadH, _kPadBottom),
+            padding: EdgeInsets.fromLTRB(_railPadH, 0, _railPadH, _kPadBottom),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
+                if (widget.showSearch)
+                  _buildItemRow(
+                    c,
+                    icon: KasyIcons.search,
+                    label: 'Search',
+                    isActive: false,
+                    onTap: () {},
+                    trailing: [_buildKbd(c)],
+                  ),
                 _buildNavItem(context, _kHelpItem, c),
                 _buildItemRow(
                   c,
@@ -559,25 +614,40 @@ class _KasySidebarState extends State<KasySidebar> {
   /// 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) {
+    // Keep the first divider on the same line as the content chrome's bottom
+    // border: the web header (68) on desktop, but the shorter KasyAppBar on
+    // tablet (medium), where the page keeps its own app bar instead of the
+    // header. Without this the line breaks between the rail and the app bar.
+    final double bandHeight =
+        MediaQuery.sizeOf(context).width >= _kBreakpoint
+            ? _kTopBandHeight
+            : kasyAppBarBodyTopOverlap(context);
+    // No collapse toggle on the mobile / drawer rail (it always opens wide).
+    final bool showToggle = !_wideDrawer(context);
+    final bool anchoredLeft = widget.side == KasySidebarSide.left;
+    // Brand wordmark — same artwork as the splash screen.
+    final Widget logo = Image.asset(
+      c.isDark
+          ? 'assets/images/logo_wordmark_dark.png'
+          : 'assets/images/logo_wordmark_light.png',
+      height: 32,
+      fit: BoxFit.contain,
+    );
+    // Left rail: wordmark then toggle (toggle hugs the content edge). The right
+    // rail mirrors it so the toggle still hugs the content edge (now the left).
+    final List<Widget> rowChildren = <Widget>[
+      logo,
+      if (showToggle) ...[const Spacer(), _buildToggleButton(c)],
+    ];
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: _kPadH),
+      padding: EdgeInsets.symmetric(horizontal: _railPadH),
       child: SizedBox(
-        height: _kTopBandHeight,
+        height: bandHeight,
         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),
-                ],
+                children:
+                    anchoredLeft ? rowChildren : rowChildren.reversed.toList(),
               ),
       ),
     );
@@ -618,10 +688,7 @@ class _KasySidebarState extends State<KasySidebar> {
                 '3D Dog Character',
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
-                style: TextStyle(
-                  fontSize: 14,
-                  height: 20 / 14,
-                  fontWeight: FontWeight.w500,
+                style: context.kasyTextTheme.rowTitle.copyWith(
                   color: c.textActive,
                 ),
               ),
@@ -635,10 +702,7 @@ class _KasySidebarState extends State<KasySidebar> {
           '3D Design Project',
           maxLines: 1,
           overflow: TextOverflow.ellipsis,
-          style: TextStyle(
-            fontSize: 12,
-            height: 16 / 12,
-            fontWeight: FontWeight.w400,
+          style: context.kasyTextTheme.cardSubtitle.copyWith(
             color: c.textMuted,
           ),
         ),
@@ -648,72 +712,22 @@ class _KasySidebarState extends State<KasySidebar> {
 
   // ── Segmented tabs (Layers / Assets) ────────────────────────────────────────
 
+  /// The showcase segment is the shared [KasyTabs] component (primary pill,
+  /// fill mode) so the sidebar demos the real design-system control rather than
+  /// a bespoke copy.
   Widget _buildTabs(_SidebarColors c) {
-    return Container(
-      width: double.infinity,
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-      decoration: BoxDecoration(
-        color: c.activeBg,
-        borderRadius: BorderRadius.circular(24),
-      ),
-      child: Row(
-        children: [
-          _buildTab(c, 'Layers', 0),
-          const SizedBox(width: 2),
-          _buildTab(c, 'Assets', 1),
-        ],
-      ),
-    );
-  }
-
-  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,
-              ),
-            ),
-          ),
-        ),
-      ),
+    return KasyTabs(
+      tabs: const ['Layers', 'Assets'],
+      selectedIndex: _showcaseTab,
+      onTabSelected: (index) => setState(() => _showcaseTab = index),
+      mode: KasyTabsMode.fill,
     );
   }
 
   // ── ⌘K keyboard chip ─────────────────────────────────────────────────────────
 
   Widget _buildKbd(_SidebarColors c) {
-    final TextStyle style = TextStyle(
-      fontSize: 14,
-      height: 20 / 14,
-      fontWeight: FontWeight.w500,
+    final TextStyle style = context.kasyTextTheme.rowTitle.copyWith(
       color: c.textMuted,
     );
     return Container(
@@ -774,10 +788,7 @@ class _KasySidebarState extends State<KasySidebar> {
                       widget.profileName,
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
-                      style: TextStyle(
-                        fontSize: 14,
-                        height: 20 / 14,
-                        fontWeight: FontWeight.w500,
+                      style: context.kasyTextTheme.rowTitle.copyWith(
                         color: c.textActive,
                       ),
                     ),
@@ -785,10 +796,7 @@ class _KasySidebarState extends State<KasySidebar> {
                       widget.profileEmail,
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
-                      style: TextStyle(
-                        fontSize: 12,
-                        height: 16 / 12,
-                        fontWeight: FontWeight.w500,
+                      style: context.textTheme.labelMedium?.copyWith(
                         color: c.textMuted,
                       ),
                     ),
@@ -816,11 +824,8 @@ class _KasySidebarState extends State<KasySidebar> {
       padding: const EdgeInsets.only(left: _kItemHPad),
       child: Text(
         label,
-        style: TextStyle(
-          fontSize: 11,
-          fontWeight: FontWeight.w600,
+        style: context.kasyTextTheme.sectionLabel.copyWith(
           color: c.textMuted,
-          letterSpacing: 0.6,
         ),
       ),
     );
@@ -913,6 +918,7 @@ class _KasySidebarState extends State<KasySidebar> {
             iconColor: iconColor,
             activeBg: c.activeBg,
             colors: c,
+            anchoredLeft: widget.side == KasySidebarSide.left,
             onTap: onTap,
           ),
         ),
@@ -952,10 +958,7 @@ class _KasySidebarState extends State<KasySidebar> {
                   label,
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
-                  style: TextStyle(
-                    fontSize: 14,
-                    height: 20 / 14,
-                    fontWeight: FontWeight.w500,
+                  style: context.kasyTextTheme.rowTitle.copyWith(
                     color: labelColor,
                   ),
                 ),
@@ -989,6 +992,7 @@ class _KasySidebarState extends State<KasySidebar> {
           subItems: item.subItems,
           activeSubItem: _activeSubItem,
           colors: c,
+          anchoredLeft: widget.side == KasySidebarSide.left,
           onSubItemTap: _activateSubItem,
         ),
       );
@@ -1021,10 +1025,7 @@ class _KasySidebarState extends State<KasySidebar> {
                 Expanded(
                   child: Text(
                     item.label,
-                    style: TextStyle(
-                      fontSize: 14,
-                      height: 20 / 14,
-                      fontWeight: FontWeight.w500,
+                    style: context.kasyTextTheme.rowTitle.copyWith(
                       color: c.textActive,
                     ),
                   ),
@@ -1141,8 +1142,7 @@ class _KasySidebarState extends State<KasySidebar> {
                 alignment: Alignment.centerLeft,
                 child: Text(
                   label,
-                  style: TextStyle(
-                    fontSize: 12,
+                  style: context.textTheme.labelMedium?.copyWith(
                     fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
                     color: textColor,
                     letterSpacing: -0.24,
@@ -1169,6 +1169,7 @@ class _ProHoverPopupIcon extends StatefulWidget {
     required this.subItems,
     required this.activeSubItem,
     required this.colors,
+    required this.anchoredLeft,
     required this.onSubItemTap,
   });
 
@@ -1178,6 +1179,12 @@ class _ProHoverPopupIcon extends StatefulWidget {
   final List<String> subItems;
   final String activeSubItem;
   final _SidebarColors colors;
+
+  /// Whether the rail is on the left. The popup opens toward the content side
+  /// (right of the icon on a left rail, left of the icon on a right rail) so it
+  /// never spills off the screen edge.
+  final bool anchoredLeft;
+
   final ValueChanged<String> onSubItemTap;
 
   @override
@@ -1236,14 +1243,15 @@ class _ProHoverPopupIconState extends State<_ProHoverPopupIcon> {
   }
 
   Widget _buildPopup(BuildContext context) {
+    final bool left = widget.anchoredLeft;
     return CompositedTransformFollower(
       link: _layerLink,
       showWhenUnlinked: false,
-      targetAnchor: Alignment.centerRight,
-      followerAnchor: Alignment.centerLeft,
-      offset: const Offset(12, 0),
+      targetAnchor: left ? Alignment.centerRight : Alignment.centerLeft,
+      followerAnchor: left ? Alignment.centerLeft : Alignment.centerRight,
+      offset: Offset(left ? 12 : -12, 0),
       child: Align(
-        alignment: Alignment.centerLeft,
+        alignment: left ? Alignment.centerLeft : Alignment.centerRight,
         child: MouseRegion(
           onEnter: (_) => setState(() => _onPopup = true),
           onExit: (_) {
@@ -1292,8 +1300,7 @@ class _ProHoverPopupIconState extends State<_ProHoverPopupIcon> {
                 ),
                 child: Text(
                   label,
-                  style: TextStyle(
-                    fontSize: 12,
+                  style: context.textTheme.labelMedium?.copyWith(
                     fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
                     color: textColor,
                     letterSpacing: -0.24,
@@ -1320,6 +1327,7 @@ class _ProTooltipIcon extends StatefulWidget {
     required this.iconColor,
     required this.activeBg,
     required this.colors,
+    required this.anchoredLeft,
     required this.onTap,
   });
 
@@ -1329,6 +1337,12 @@ class _ProTooltipIcon extends StatefulWidget {
   final Color iconColor;
   final Color activeBg;
   final _SidebarColors colors;
+
+  /// Whether the rail is on the left. The tooltip opens toward the content side
+  /// (and its arrow points back at the icon) so it never spills off the screen
+  /// edge on a right-anchored rail.
+  final bool anchoredLeft;
+
   final VoidCallback onTap;
 
   @override
@@ -1374,15 +1388,20 @@ class _ProTooltipIconState extends State<_ProTooltipIcon> {
   }
 
   Widget _buildTooltip(BuildContext context) {
+    final bool left = widget.anchoredLeft;
     return CompositedTransformFollower(
       link: _layerLink,
       showWhenUnlinked: false,
-      targetAnchor: Alignment.centerRight,
-      followerAnchor: Alignment.centerLeft,
-      offset: const Offset(4, 0),
+      targetAnchor: left ? Alignment.centerRight : Alignment.centerLeft,
+      followerAnchor: left ? Alignment.centerLeft : Alignment.centerRight,
+      offset: Offset(left ? 4 : -4, 0),
       child: Align(
-        alignment: Alignment.centerLeft,
-        child: _TooltipCard(label: widget.label, colors: widget.colors),
+        alignment: left ? Alignment.centerLeft : Alignment.centerRight,
+        child: _TooltipCard(
+          label: widget.label,
+          colors: widget.colors,
+          pointsLeft: left,
+        ),
       ),
     );
   }
@@ -1393,11 +1412,19 @@ class _ProTooltipIconState extends State<_ProTooltipIcon> {
 // ─────────────────────────────────────────────────────────────────────────────
 
 class _TooltipCard extends StatelessWidget {
-  const _TooltipCard({required this.label, required this.colors});
+  const _TooltipCard({
+    required this.label,
+    required this.colors,
+    this.pointsLeft = true,
+  });
 
   final String label;
   final _SidebarColors colors;
 
+  /// Arrow points back at the icon: left when the rail is on the left (tooltip
+  /// sits to the icon's right), right when the rail is on the right.
+  final bool pointsLeft;
+
   static const double _arrowW = 13.0;
   static const double _arrowH = 26.0;
   static const double _arrowOverlap = 8.0;
@@ -1411,43 +1438,44 @@ class _TooltipCard extends StatelessWidget {
     final Color bg = colors.isDark ? colors.divider : colors.textActive;
     final Color textColor = colors.isDark ? colors.textActive : colors.bg;
 
+    final Widget arrow = SizedBox(
+      width: _arrowW,
+      height: _arrowH,
+      child: CustomPaint(
+        painter: _TooltipArrowPainter(color: bg, pointsLeft: pointsLeft),
+      ),
+    );
+    // Pull the card over the arrow's base so they read as one shape; the
+    // direction of the overlap flips with the arrow side.
+    final Widget card = Transform.translate(
+      offset: Offset(pointsLeft ? -_arrowOverlap : _arrowOverlap, 0),
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+        decoration: BoxDecoration(
+          color: bg,
+          borderRadius: BorderRadius.circular(4),
+          boxShadow: const [
+            BoxShadow(
+              color: Color(0x40000000),
+              blurRadius: 5,
+              offset: Offset(0, 5),
+            ),
+          ],
+        ),
+        child: Text(
+          label,
+          style: context.textTheme.bodyMedium?.copyWith(
+            color: textColor,
+          ),
+        ),
+      ),
+    );
+
     return Material(
       color: Colors.transparent,
       child: Row(
         mainAxisSize: MainAxisSize.min,
-        children: [
-          SizedBox(
-            width: _arrowW,
-            height: _arrowH,
-            child: CustomPaint(painter: _TooltipArrowPainter(color: bg)),
-          ),
-          Transform.translate(
-            offset: const Offset(-_arrowOverlap, 0),
-            child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
-              decoration: BoxDecoration(
-                color: bg,
-                borderRadius: BorderRadius.circular(4),
-                boxShadow: const [
-                  BoxShadow(
-                    color: Color(0x40000000),
-                    blurRadius: 5,
-                    offset: Offset(0, 5),
-                  ),
-                ],
-              ),
-              child: Text(
-                label,
-                style: TextStyle(
-                  fontSize: 14,
-                  fontWeight: FontWeight.w400,
-                  color: textColor,
-                  height: 20 / 14,
-                ),
-              ),
-            ),
-          ),
-        ],
+        children: pointsLeft ? <Widget>[arrow, card] : <Widget>[card, arrow],
       ),
     );
   }
@@ -1458,22 +1486,31 @@ class _TooltipCard extends StatelessWidget {
 // ─────────────────────────────────────────────────────────────────────────────
 
 class _TooltipArrowPainter extends CustomPainter {
-  const _TooltipArrowPainter({required this.color});
+  const _TooltipArrowPainter({required this.color, this.pointsLeft = true});
   final Color color;
+  final bool pointsLeft;
 
   @override
   void paint(Canvas canvas, Size size) {
     final paint = Paint()
       ..color = color
       ..style = PaintingStyle.fill;
-    final path = Path()
-      ..moveTo(size.width, 0)
-      ..lineTo(0, size.height / 2)
-      ..lineTo(size.width, size.height)
-      ..close();
+    // Apex on the side it points to; base on the opposite (card) side.
+    final path = pointsLeft
+        ? (Path()
+          ..moveTo(size.width, 0)
+          ..lineTo(0, size.height / 2)
+          ..lineTo(size.width, size.height)
+          ..close())
+        : (Path()
+          ..moveTo(0, 0)
+          ..lineTo(size.width, size.height / 2)
+          ..lineTo(0, size.height)
+          ..close());
     canvas.drawPath(path, paint);
   }
 
   @override
-  bool shouldRepaint(_TooltipArrowPainter old) => old.color != color;
+  bool shouldRepaint(_TooltipArrowPainter old) =>
+      old.color != color || old.pointsLeft != pointsLeft;
 }