kasy-cli 1.37.1 → 1.39.0

package/templates/firebase/assets/icons/facebook.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg9"
+   width="666.66669"
+   height="666.66718"
+   viewBox="0 0 666.66668 666.66717"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs13">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath25">
+      <path
+         d="M 0,700 H 700 V 0 H 0 Z"
+         id="path23" />
+    </clipPath>
+  </defs>
+  <g
+     id="g17"
+     transform="matrix(1.3333333,0,0,-1.3333333,-133.33333,799.99999)">
+    <g
+       id="g19">
+      <g
+         id="g21"
+         clip-path="url(#clipPath25)">
+        <g
+           id="g27"
+           transform="translate(600,350)">
+          <path
+             d="m 0,0 c 0,138.071 -111.929,250 -250,250 -138.071,0 -250,-111.929 -250,-250 0,-117.245 80.715,-215.622 189.606,-242.638 v 166.242 h -51.552 V 0 h 51.552 v 32.919 c 0,85.092 38.508,124.532 122.048,124.532 15.838,0 43.167,-3.105 54.347,-6.211 V 81.986 c -5.901,0.621 -16.149,0.932 -28.882,0.932 -40.993,0 -56.832,-15.528 -56.832,-55.9 V 0 h 81.659 l -14.028,-76.396 h -67.631 V -248.169 C -95.927,-233.218 0,-127.818 0,0"
+             style="fill:#0866ff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path29" />
+        </g>
+        <g
+           id="g31"
+           transform="translate(447.9175,273.6036)">
+          <path
+             d="M 0,0 14.029,76.396 H -67.63 v 27.019 c 0,40.372 15.838,55.899 56.831,55.899 12.733,0 22.981,-0.31 28.882,-0.931 v 69.253 c -11.18,3.106 -38.509,6.212 -54.347,6.212 -83.539,0 -122.048,-39.441 -122.048,-124.533 V 76.396 h -51.552 V 0 h 51.552 v -166.242 c 19.343,-4.798 39.568,-7.362 60.394,-7.362 10.254,0 20.358,0.632 30.288,1.831 L -67.63,0 Z"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path33" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/templates/firebase/assets/icons/google.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>

package/templates/firebase/functions/src/admin/functions.ts

@@ -21,6 +21,7 @@ interface AdminUser {
   email: string | null;
   name: string | null;
   createdAt: number | null; // epoch millis
+  avatarPath: string | null; // public photo URL, when the user has one
   subscriber: boolean;
 }
 
@@ -91,6 +92,7 @@ export const listUsers = onCall(async (request) => {
         email: (d.get("email") as string) || null,
         name: (d.get("name") as string) || null,
         createdAt: createdAt ? createdAt.toMillis() : null,
+        avatarPath: (d.get("avatarPath") as string) || null,
         subscriber: activeSubscribers.has(d.id),
       };
     });

package/templates/firebase/functions/src/authentication/functions.ts

@@ -14,14 +14,20 @@ export const deleteUserAccount = onCall(
       const logger = new Logger("deleteUserAccount");
       const db = admin.firestore();
       try {
-        // 1. Delete user from Firebase Auth first — if this fails, data is still recoverable
+        // Delete DATA first, IDENTITY last. Each Firestore delete is idempotent
+        // (removing a missing doc is a no-op), so if anything below fails the
+        // account is still signed-in and the whole operation can be retried
+        // safely — we never leave a half-deleted "ghost" (auth gone, data left)
+        // that would strand the client logged in against a user that no longer
+        // exists. This mirrors the Supabase backend, where deleting auth.users
+        // cascades to every related row in a single atomic step.
+        // 1. Firestore user doc + subcollections (devices, notifications, ...)
+        await db.recursiveDelete(db.collection("users").doc(uid));
+        // 2. Subscription document
+        await db.collection("subscriptions").doc(uid).delete();
+        // 3. Firebase Auth identity — the irreversible step, done only once the
+        //    data is gone so a failure above leaves a clean, retriable state.
         await admin.auth().deleteUser(uid);
-        // 2. Delete Firestore data (user doc + subcollections: devices, notifications)
-        const userRef = db.collection("users").doc(uid);
-        await db.recursiveDelete(userRef);
-        // 3. Delete subscription document
-        const subRef = db.collection("subscriptions").doc(uid);
-        await subRef.delete();
         logger.info(`User ${uid} deleted successfully`);
       } catch (e) {
         logger.error(`Error deleteUserAccount users/${uid}: ${e}`);

package/templates/firebase/functions/src/notifications/triggers.ts

@@ -61,10 +61,14 @@ export const onNotificationCreated = onDocumentCreated(
           ? { imageUrl: notificationEntity.image_url }
           : undefined,
       };
-      const userDevices = await userDevicesRepository.getDevices([userId]);
+      const allDevices = await userDevicesRepository.getDevices([userId]);
+      // Skip installs without a push token (notifications not enabled yet): no
+      // point sending, and — crucially — an empty token fails as "invalid" which
+      // would delete the install in the cleanup below.
+      const userDevices = allDevices.filter((userDevice) => !!userDevice.token);
       const tokens = userDevices.map((userDevice) => userDevice.token);
       if (tokens.length === 0) {
-        logger.info(`No device found for user ${userId}`);
+        logger.info(`No device with a push token for user ${userId}`);
         return;
       }
       const notificationApi = NotificationsApi.create();

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

@@ -19,6 +19,7 @@ export 'kasy_checkbox.dart';
 export 'kasy_chip.dart';
 export 'kasy_date_picker.dart';
 export 'kasy_dialog.dart';
+export 'kasy_drop_down.dart';
 export 'kasy_image_viewer.dart';
 export 'kasy_otp_verification_bottom_sheet.dart';
 export 'kasy_screen.dart';
@@ -31,4 +32,3 @@ export 'kasy_text_area.dart';
 export 'kasy_text_field.dart';
 export 'kasy_text_field_otp.dart';
 export 'kasy_toast.dart';
-export 'kasy_web_header.dart';

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

@@ -19,6 +19,11 @@
 /// [KasyAppBarStyle.subpageSimple] (back only), [KasyAppBarStyle.subpageActions]
 /// (custom [trailing]).
 ///
+/// **Desktop:** [KasyAppBar.application] renders the application chrome (search,
+/// quick-create, notifications, profile) for viewports ≥ 1024px — the responsive
+/// other half of the same component (formerly a separate web header). The shell
+/// places it above content; the page bar then hides on desktop.
+///
 /// Barrel: [components.dart].
 
 library;
@@ -26,6 +31,12 @@ library;
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart' show SystemUiOverlayStyle;
+import 'package:kasy_kit/components/kasy_avatar.dart';
+import 'package:kasy_kit/components/kasy_avatar_presets.dart';
+import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/components/kasy_text_field.dart';
+import 'package:kasy_kit/core/chrome/app_bar_config.dart';
+import 'package:kasy_kit/core/chrome/app_bar_scope.dart';
 import 'package:kasy_kit/core/chrome/chrome_visibility.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
@@ -34,14 +45,22 @@ import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 /// Inner toolbar band height (orbit hit targets, title baseline).
 const double kasyAppBarToolbarRowHeight = 44;
 
-/// Effective toolbar band height. [KasyAppBar] serves phone and tablet only — on
-/// desktop the richer web header takes over — so the band keeps a single
-/// compact height across every viewport where the app bar appears.
+/// Effective toolbar band height. The page chrome serves phone and tablet — on
+/// desktop [KasyAppBar.application] takes over — so the band keeps a single
+/// compact height across every viewport where the page bar appears.
 double kasyAppBarToolbarRowHeightOf(BuildContext context) =>
     kasyAppBarToolbarRowHeight;
 
 const double kasyAppBarTitleFontScale = 0.92;
 
+/// Height of the desktop application bar band ([KasyAppBar.application]): 36px
+/// content + 16px top/bottom. minHeight, not fixed, so the search field never
+/// overflows the row.
+const double kasyAppBarApplicationHeight = 68;
+
+/// Fixed width of the search field in the desktop application bar.
+const double kasyAppBarApplicationSearchWidth = 220;
+
 /// Tight vertical padding inside the frost, above/below [kasyAppBarToolbarRowHeight].
 const double kasyAppBarChromePaddingTop = KasySpacing.xs;
 const double kasyAppBarChromePaddingBottom = KasySpacing.sm;
@@ -56,8 +75,11 @@ enum KasyAppBarScrollTreatment { overlay, intrinsicScroll }
 
 /// Vertical inset for scroll/viewport when using [KasyAppBarScrollTreatment.overlay].
 double kasyAppBarBodyTopOverlap(BuildContext context) {
-  // On desktop the app bar hides (the web header owns the top chrome).
-  if (MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint) {
+  // On desktop the page bar hides only inside the application-bar scope (the
+  // shell), so no overlap there. Outside it (a full-screen pushed route) the bar
+  // is visible, so reserve its height like on phone/tablet.
+  if (MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint &&
+      KasyAppBarScope.of(context)) {
     return 0;
   }
   return MediaQuery.paddingOf(context).top +
@@ -74,23 +96,47 @@ List<Widget> kasyOverlayPaddedSlivers(
   BuildContext context, {
   required List<Widget> slivers,
   EdgeInsetsGeometry? contentPadding,
+  double? maxContentWidth,
 }) {
-  final EdgeInsetsGeometry pad =
-      contentPadding ??
-      EdgeInsets.fromLTRB(
-        KasySpacing.pageHorizontalGutter,
-        KasySpacing.belowChromeContentGap,
-        KasySpacing.pageHorizontalGutter,
-        MediaQuery.paddingOf(context).bottom + KasySpacing.pageVerticalGutter,
-      );
+  const double topPad = KasySpacing.belowChromeContentGap;
+  final double bottomPad =
+      MediaQuery.paddingOf(context).bottom + KasySpacing.pageVerticalGutter;
+  const double gutter = KasySpacing.pageHorizontalGutter;
+
+  final Widget body = SliverMainAxisGroup(slivers: slivers);
+
+  // An explicit [contentPadding] takes full control; otherwise use the page
+  // gutters, optionally centering content within [maxContentWidth] on wide
+  // viewports (so lists never stretch edge-to-edge on desktop). Centering is
+  // computed from the real content width (SliverLayoutBuilder) so it stays
+  // correct inside the desktop shell where the sidebar already took space.
+  final Widget paddedGroup;
+  if (contentPadding != null) {
+    paddedGroup = SliverPadding(padding: contentPadding, sliver: body);
+  } else if (maxContentWidth == null) {
+    paddedGroup = SliverPadding(
+      padding: EdgeInsets.fromLTRB(gutter, topPad, gutter, bottomPad),
+      sliver: body,
+    );
+  } else {
+    paddedGroup = SliverLayoutBuilder(
+      builder: (context, constraints) {
+        final double available = constraints.crossAxisExtent;
+        final double horizontal = available - 2 * gutter > maxContentWidth
+            ? (available - maxContentWidth) / 2
+            : gutter;
+        return SliverPadding(
+          padding: EdgeInsets.fromLTRB(horizontal, topPad, horizontal, bottomPad),
+          sliver: body,
+        );
+      },
+    );
+  }
   return <Widget>[
     SliverToBoxAdapter(
       child: SizedBox(height: kasyAppBarBodyTopOverlap(context)),
     ),
-    SliverPadding(
-      padding: pad,
-      sliver: SliverMainAxisGroup(slivers: slivers),
-    ),
+    paddedGroup,
   ];
 }
 
@@ -231,6 +277,10 @@ enum KasyAppBarStyle {
   rootTab,
 }
 
+/// Internal: which chrome a [KasyAppBar] renders — the phone/tablet page bar or
+/// the desktop application bar ([KasyAppBar.application]).
+enum _KasyAppBarVariant { page, application }
+
 /// Implements the frosted toolbar; usage patterns described in this file header.
 class KasyAppBar extends StatelessWidget {
   final String title;
@@ -269,6 +319,65 @@ class KasyAppBar extends StatelessWidget {
   /// appears where the bar was.
   final bool hideOnScroll;
 
+  // --- Application chrome (desktop, via [KasyAppBar.application]) ---
+  // These carry the desktop header (search, quick-create, notifications,
+  // profile). They are inert in the default (page) constructor.
+
+  /// Controller for the search field. Optional — omit for a display-only header.
+  final TextEditingController? searchController;
+
+  /// Placeholder shown in the search field.
+  final String searchHint;
+
+  /// Called as the user types in the search field.
+  final ValueChanged<String>? onSearchChanged;
+
+  /// Called when the search field is submitted (Enter).
+  final ValueChanged<String>? onSearchSubmitted;
+
+  /// Notifications (bell) action. Ignored when [notifications] is provided.
+  final VoidCallback? onNotifications;
+
+  /// Shows the unread dot on the bell. Ignored when [notifications] is provided.
+  final bool showNotificationBadge;
+
+  /// Custom notifications control — replaces the built-in bell with a data-aware
+  /// widget so the bar itself stays presentational.
+  final Widget? notifications;
+
+  /// Primary quick-create action. When null the button is disabled.
+  final VoidCallback? onCreate;
+
+  /// Label for the create button.
+  final String createLabel;
+
+  /// Gradient for the profile avatar fallback (when [avatar] is null).
+  final KasyAvatarGradientData avatarGradient;
+
+  /// Custom avatar widget (e.g. the signed-in user's photo). When null and
+  /// [showAvatar] is true, a gradient-fill avatar is shown.
+  final Widget? avatar;
+
+  /// Whether the profile avatar is shown (false when the sidebar owns it).
+  final bool showAvatar;
+
+  /// Profile avatar tap (open menu / profile).
+  final VoidCallback? onAvatarTap;
+
+  /// Theme toggle for the application bar (sun/moon ghost button before the bell).
+  final VoidCallback? onToggleTheme;
+
+  /// Whether the search field is shown (application bar).
+  final bool showSearch;
+
+  /// Whether the notifications control is shown (application bar).
+  final bool showNotifications;
+
+  /// Whether the quick-create button is shown (application bar).
+  final bool showCreate;
+
+  final _KasyAppBarVariant _variant;
+
   const KasyAppBar({
     super.key,
     required this.title,
@@ -281,12 +390,107 @@ class KasyAppBar extends StatelessWidget {
     this.toolbarHeight,
     this.topInset,
     this.hideOnScroll = false,
-  });
+  })  : _variant = _KasyAppBarVariant.page,
+        searchController = null,
+        searchHint = 'Search...',
+        onSearchChanged = null,
+        onSearchSubmitted = null,
+        onNotifications = null,
+        showNotificationBadge = false,
+        notifications = null,
+        onCreate = null,
+        createLabel = 'Create',
+        avatarGradient = KasyAvatarGradients.orange,
+        avatar = null,
+        showAvatar = true,
+        onAvatarTap = null,
+        onToggleTheme = null,
+        showSearch = true,
+        showNotifications = true,
+        showCreate = true;
+
+  /// Desktop application chrome (viewport ≥ 1024px): global search, quick-create,
+  /// notifications and profile, sitting to the right of the sidebar. The
+  /// responsive counterpart of the phone/tablet page chrome (the default
+  /// constructor) — same component, the other half. The shell places this above
+  /// content inside a [KasyAppBarScope]; the page bar then hides on desktop.
+  const KasyAppBar.application({
+    super.key,
+    this.searchController,
+    this.searchHint = 'Search...',
+    this.onSearchChanged,
+    this.onSearchSubmitted,
+    this.onNotifications,
+    this.showNotificationBadge = false,
+    this.notifications,
+    this.onCreate,
+    this.createLabel = 'Create',
+    this.avatarGradient = KasyAvatarGradients.orange,
+    this.avatar,
+    this.showAvatar = true,
+    this.onAvatarTap,
+    this.onToggleTheme,
+    this.showSearch = true,
+    this.showNotifications = true,
+    this.showCreate = true,
+  })  : _variant = _KasyAppBarVariant.application,
+        title = '',
+        style = KasyAppBarStyle.rootTab,
+        onBack = null,
+        trailing = null,
+        leading = null,
+        useSafeArea = true,
+        onThemeToggle = null,
+        toolbarHeight = null,
+        topInset = null,
+        hideOnScroll = false;
+
+  /// Builds the desktop application bar from a [KasyAppBarConfig] — the bridge
+  /// the shell uses to render whatever a screen published. Theme/search/create/
+  /// notifications appear per the config's `showX` flags.
+  factory KasyAppBar.fromConfig(KasyAppBarConfig config, {Key? key}) {
+    return KasyAppBar.application(
+      key: key,
+      showSearch: config.showSearch,
+      searchController: config.searchController,
+      searchHint: config.searchHint,
+      onSearchChanged: config.onSearchChanged,
+      onSearchSubmitted: config.onSearchSubmitted,
+      onToggleTheme: config.showThemeToggle ? config.onToggleTheme : null,
+      showNotifications: config.showNotifications,
+      notifications: config.notifications,
+      onNotifications: config.onNotifications,
+      showNotificationBadge: config.showNotificationBadge,
+      showCreate: config.showCreate,
+      createLabel: config.createLabel,
+      onCreate: config.onCreate,
+      showAvatar: config.showAvatar,
+      avatar: config.avatar,
+      avatarGradient: config.avatarGradient ?? KasyAvatarGradients.orange,
+      onAvatarTap: config.onAvatarTap,
+    );
+  }
+
+  /// True for the desktop application bar ([KasyAppBar.application]); false for
+  /// the phone/tablet page bar. Lets tests assert which chrome is mounted without
+  /// reaching for a private type.
+  bool get isApplication => _variant == _KasyAppBarVariant.application;
 
   @override
   Widget build(BuildContext context) {
-    // On desktop the web header owns the top chrome, so the page app bar hides.
-    if (MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint) {
+    return switch (_variant) {
+      _KasyAppBarVariant.application => _buildApplicationChrome(context),
+      _KasyAppBarVariant.page => _buildPageChrome(context),
+    };
+  }
+
+  Widget _buildPageChrome(BuildContext context) {
+    // On desktop the application bar owns the top chrome, so the page bar hides —
+    // but ONLY when there actually is one above (i.e. inside the shell's
+    // KasyAppBarScope). A full-screen route pushed over the shell has none, so
+    // the bar stays visible and its back button is never lost.
+    if (MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint &&
+        KasyAppBarScope.of(context)) {
       return const SizedBox.shrink();
     }
     final Color orbFg = context.colors.onSurface;
@@ -450,6 +654,134 @@ class KasyAppBar extends StatelessWidget {
         );
     }
   }
+
+  /// Desktop application chrome: search + theme + notifications + create + avatar,
+  /// matching [KasySidebar]'s surface fill and hairline border so the two read as
+  /// one continuous chrome across the top of the shell.
+  Widget _buildApplicationChrome(BuildContext context) {
+    final KasyColors c = context.colors;
+
+    // Trailing controls, each added with a leading gap so spacing never doubles
+    // up when an element is hidden (e.g. no create button → no stray gap).
+    final List<Widget> trailing = <Widget>[];
+    void addTrailing(Widget w) {
+      if (trailing.isNotEmpty) {
+        trailing.add(const SizedBox(width: KasySpacing.md));
+      }
+      trailing.add(w);
+    }
+
+    if (onToggleTheme != null) addTrailing(_buildApplicationThemeToggle(context));
+    if (showNotifications) {
+      addTrailing(notifications ?? _buildApplicationNotifications(context));
+    }
+    if (showCreate) {
+      addTrailing(KasyButton(
+        label: createLabel,
+        variant: KasyButtonVariant.neutral,
+        size: KasyButtonSize.small,
+        onPressed: onCreate,
+      ));
+    }
+    if (showAvatar) {
+      addTrailing(avatar ??
+          KasyAvatar.gradientFill(
+            size: KasyAvatarSize.small,
+            diameter: 36,
+            gradient: avatarGradient,
+            showShadow: false,
+            onTap: onAvatarTap,
+          ));
+    }
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: c.surface,
+        border: Border(
+          bottom: BorderSide(color: c.border, width: 0.5),
+        ),
+      ),
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(minHeight: kasyAppBarApplicationHeight),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+          child: Row(
+            children: [
+              if (showSearch)
+                SizedBox(
+                  width: kasyAppBarApplicationSearchWidth,
+                  child: _buildApplicationSearch(context),
+                ),
+              const Spacer(),
+              ...trailing,
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildApplicationSearch(BuildContext context) {
+    return KasyTextField(
+      variant: KasyTextFieldVariant.flat,
+      controller: searchController,
+      hint: searchHint,
+      onChanged: onSearchChanged,
+      onSubmitted: onSearchSubmitted,
+      prefix: Icon(
+        KasyIcons.search,
+        size: KasyIconSize.md,
+        color: context.colors.muted,
+      ),
+      contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+    );
+  }
+
+  Widget _buildApplicationThemeToggle(BuildContext context) {
+    final bool isDark = Theme.of(context).brightness == Brightness.dark;
+    return KasyButton.iconOnly(
+      icon: isDark ? KasyIcons.lightMode : KasyIcons.darkMode,
+      variant: KasyButtonVariant.ghost,
+      size: KasyButtonSize.small,
+      iconOnlyLayoutExtent: 36,
+      iconGlyphSize: KasyIconSize.md,
+      onPressed: onToggleTheme,
+      semanticLabel: isDark ? 'Light mode' : 'Dark mode',
+    );
+  }
+
+  Widget _buildApplicationNotifications(BuildContext context) {
+    final KasyColors c = context.colors;
+    final Widget bell = KasyButton.iconOnly(
+      icon: KasyIcons.notification,
+      variant: KasyButtonVariant.ghost,
+      size: KasyButtonSize.small,
+      iconOnlyLayoutExtent: 36,
+      iconGlyphSize: KasyIconSize.md,
+      onPressed: onNotifications,
+      semanticLabel: 'Notifications',
+    );
+    if (!showNotificationBadge) return bell;
+    return Stack(
+      clipBehavior: Clip.none,
+      children: [
+        bell,
+        Positioned(
+          top: 8,
+          right: 8,
+          child: Container(
+            width: 8,
+            height: 8,
+            decoration: BoxDecoration(
+              color: c.error,
+              shape: BoxShape.circle,
+              border: Border.all(color: c.background, width: 1.5),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
 }
 
 /// Full-screen scaffold: frosted [KasyAppBar] pinned over scroll content.
@@ -461,6 +793,13 @@ class KasyOverlayScaffold extends StatelessWidget {
   final Widget? trailing;
   final List<Widget> slivers;
   final EdgeInsetsGeometry? contentPadding;
+
+  /// When set, content is centered within this max width on wide viewports
+  /// (desktop) instead of stretching edge-to-edge. Use [kKasyContentMaxWidth]
+  /// for the standard single-column internal page. Ignored when
+  /// [contentPadding] is provided (that takes full control of the insets).
+  final double? maxContentWidth;
+
   final ScrollController? scrollController;
   final ScrollPhysics? physics;
   final Color? backgroundColor;
@@ -480,6 +819,7 @@ class KasyOverlayScaffold extends StatelessWidget {
     this.trailing,
     required this.slivers,
     this.contentPadding,
+    this.maxContentWidth,
     this.scrollController,
     this.physics,
     this.backgroundColor,
@@ -504,6 +844,7 @@ class KasyOverlayScaffold extends StatelessWidget {
       slivers: kasyOverlayPaddedSlivers(
         context,
         contentPadding: contentPadding,
+        maxContentWidth: maxContentWidth,
         slivers: slivers,
       ),
     );