@momo-kits/native-kits 0.167.1-duo.3 → 0.167.1-duo.4-debug

package/ios/Application/Layout/ScreenLayout.swift

@@ -1,196 +0,0 @@
-//
-//  ScreenLayout.swift
-//  MoMoUIKits
-//
-//  Port of momo-kits RN `useScreenLayout` (Layout/utils.ts) and `Application/device.ts`:
-//  window size, safe-area insets, content width, header geometry and the iPhone Duo side bar.
-//
-
-import SwiftUI
-import UIKit
-
-public enum SideBarEdge: Equatable {
-    case left, right
-}
-
-public struct SideBarLayout: Equatable {
-    public let edge: SideBarEdge
-    public let width: CGFloat
-    /// Preferred window y of the first control; StackScreen still keeps the column above the bottom bars.
-    public let top: CGFloat
-}
-
-public struct ScreenLayout: Equatable {
-    public let width: CGFloat
-    public let height: CGFloat
-    public let isIPhoneDuo: Bool
-    public let insets: EdgeInsets
-    public let insetLeft: CGFloat
-    public let insetRight: CGFloat
-    public let contentWidth: CGFloat
-    public let headerHeight: CGFloat
-    /// 0 when the status bar is off the top edge, so the bar row fills the header and keeps the title centered.
-    public let headerStatusBarHeight: CGFloat
-    /// iPhone Duo moves back and toolkit into a column in the side safe area; nil while they stay in the bar.
-    public let sideBar: SideBarLayout?
-
-    public var headerBarHeight: CGFloat { headerHeight - headerStatusBarHeight }
-}
-
-// Measured by momo-kits RN (Layout/utils.ts) on the iOS 27.1 iPhone Duo simulator; keep both in sync.
-enum DuoMetrics {
-    // Inner display is ~1.42, outer ~1.45; every slab iPhone is 1.77 or taller.
-    static let maxAspectRatio: CGFloat = 1.6
-    // Outer display is 466pt tall in landscape, inner 669pt.
-    static let innerMinHeight: CGFloat = 600
-    static let controlSize: CGFloat = 48
-    static let itemPitch: CGFloat = 50
-    static let firstItemTop: CGFloat = 170
-    static let firstItemTopLandscape: CGFloat = 120
-    // Widest short side of any single-display iPhone.
-    static let iPhoneMaxShortSide: CGFloat = 440
-}
-
-enum HeaderMetrics {
-    static let barHeight: CGFloat = HEADER_HEIGHT
-    static let iPhoneMinHeight: CGFloat = 72
-    // A smaller top inset means the status bar is not on the top edge.
-    static let statusBarMinInset: CGFloat = 20
-}
-
-private var isPhoneIdiom: Bool { UIDevice.current.userInterfaceIdiom == .phone }
-
-private var keyWindow: UIWindow? {
-    UIApplication.shared.connectedScenes
-        .compactMap { ($0 as? UIWindowScene)?.keyWindow }
-        .first
-}
-
-extension ScreenLayout {
-    /// Snapshot of the key window; not reactive, so views read `\.screenLayout` instead.
-    public static var current: ScreenLayout {
-        guard let window = keyWindow else {
-            return make(size: UIScreen.main.bounds.size, insets: EdgeInsets())
-        }
-        let inset = window.safeAreaInsets
-        return make(
-            size: window.bounds.size,
-            insets: EdgeInsets(top: inset.top, leading: inset.left, bottom: inset.bottom, trailing: inset.right)
-        )
-    }
-
-    static func make(size: CGSize, insets: EdgeInsets, isPhone: Bool = isPhoneIdiom) -> ScreenLayout {
-        let width = size.width
-        let height = size.height
-        let (headerHeight, headerStatusBarHeight) = headerGeometry(topInset: insets.top, isPhone: isPhone)
-        let isDuo = isPhone && isIPhoneDuoWindow(width: width, height: height, insets: insets)
-        guard isDuo else {
-            return ScreenLayout(
-                width: width, height: height, isIPhoneDuo: false, insets: insets,
-                insetLeft: 0, insetRight: 0, contentWidth: width,
-                headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: nil
-            )
-        }
-
-        var sideBar: SideBarLayout?
-        let sideInset = max(insets.leading, insets.trailing)
-        // narrower strips cannot host a control 12pt from the inner edge
-        if sideInset >= DuoMetrics.controlSize + Spacing.M {
-            var top = insets.top + HeaderMetrics.barHeight + Spacing.M
-            if insets.top < HeaderMetrics.statusBarMinInset {
-                // status bar lives in the strip: start under its cluster, as the native bar does
-                let isInnerLandscape = width > height && height >= DuoMetrics.innerMinHeight
-                top = isInnerLandscape ? DuoMetrics.firstItemTopLandscape : DuoMetrics.firstItemTop
-            }
-            sideBar = SideBarLayout(
-                edge: insets.trailing >= insets.leading ? .right : .left,
-                width: sideInset,
-                top: top
-            )
-        }
-
-        return ScreenLayout(
-            width: width, height: height, isIPhoneDuo: true, insets: insets,
-            insetLeft: insets.leading, insetRight: insets.trailing,
-            contentWidth: width - insets.leading - insets.trailing,
-            headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: sideBar
-        )
-    }
-
-    private static func headerGeometry(topInset: CGFloat, isPhone: Bool) -> (CGFloat, CGFloat) {
-        let height = topInset + HeaderMetrics.barHeight
-        guard isPhone else { return (height, topInset) }
-        return (
-            max(height, HeaderMetrics.iPhoneMinHeight),
-            topInset < HeaderMetrics.statusBarMinInset ? 0 : topInset
-        )
-    }
-
-    // Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
-    private static func isIPhoneDuoWindow(width: CGFloat, height: CGFloat, insets: EdgeInsets) -> Bool {
-        let shortSide = min(width, height)
-        let isSquare = shortSide > 0 && max(width, height) / shortSide < DuoMetrics.maxAspectRatio
-        return isSquare || insets.leading != insets.trailing
-    }
-
-    /// Below the side status bar: in portrait it is about twice as tall as its inset is wide.
-    public var duoTopInset: CGFloat {
-        max(insets.top, height > width ? max(insets.leading, insets.trailing) * 2 : 0)
-    }
-}
-
-/// Port of RN `device.ts` `isIPhoneDuo()`: UIScreen stays on the outer display, so this
-/// still matches when Split View narrows the window. Used by popups and overlays.
-public func isIPhoneDuoDevice(windowSize: CGSize? = nil) -> Bool {
-    guard isPhoneIdiom else { return false }
-    let screen = UIScreen.main.bounds.size
-    let window = windowSize ?? keyWindow?.bounds.size ?? screen
-    return max(min(screen.width, screen.height), min(window.width, window.height)) > DuoMetrics.iPhoneMaxShortSide
-}
-
-// MARK: - Environment
-
-private struct ScreenLayoutKey: EnvironmentKey {
-    // Computed so an un-injected subtree (bare UIHostingController) still reads the live window.
-    static var defaultValue: ScreenLayout { .current }
-}
-
-public extension EnvironmentValues {
-    var screenLayout: ScreenLayout {
-        get { self[ScreenLayoutKey.self] }
-        set { self[ScreenLayoutKey.self] = newValue }
-    }
-}
-
-/// Re-reads the window whenever this view's size changes (rotation, fold/unfold, Split View).
-private struct ScreenLayoutReader: ViewModifier {
-    @State private var layout: ScreenLayout = .current
-
-    func body(content: Content) -> some View {
-        content
-            .environment(\.screenLayout, layout)
-            .background(
-                GeometryReader { proxy in
-                    Color.clear
-                        .onAppear { refresh() }
-                        .onChange(of: proxy.size) { _ in refresh() }
-                        .onChange(of: proxy.safeAreaInsets) { _ in refresh() }
-                }
-            )
-            .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
-                refresh()
-            }
-    }
-
-    private func refresh() {
-        let next = ScreenLayout.current
-        if next != layout { layout = next }
-    }
-}
-
-public extension View {
-    /// Provides `\.screenLayout`; NavigationContainer applies it, a bare UIHostingController root should too.
-    func momoScreenLayout() -> some View {
-        modifier(ScreenLayoutReader())
-    }
-}

package/ios/Application/Navigation/BottomTab/DuoTabBar.swift

@@ -1,275 +0,0 @@
-//
-//  DuoTabBar.swift
-//  MoMoUIKits
-//
-//  iPhone Duo tab bar, port of RN `BottomTab/DuoTabBar.tsx` (Figma Fold-Design-System MT1/MT2):
-//  a glass rail in the side bar, or a floating glass bar when unfolded portrait.
-//
-
-import SwiftUI
-
-private let itemSize = DuoMetrics.controlSize
-private let iconSize: CGFloat = 28
-private let qrIconSize: CGFloat = 24
-private let railPadding: CGFloat = 6
-private let railGap = Spacing.XXS
-// selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
-private let railBubbleWidth: CGFloat = 44
-private let railBubbleHeight: CGFloat = 58
-let duoFloatingTabBarHeight: CGFloat = 62
-private let floatingPadding = Spacing.XS
-private let floatingQrSize: CGFloat = 44
-// floating bar spans 6 of the 8 portrait grid columns, like the content
-private let gridColumns: CGFloat = 8
-private let gridSpan: CGFloat = 6
-private let tabSpring = Animation.interpolatingSpring(mass: 0.8, stiffness: 220, damping: 18)
-
-/// Room tab screens leave for the Duo tab bar, provided by BottomTab to its tab StackScreens.
-struct DuoTabBarInsets: Equatable {
-    /// Floating bar overlays the content: scroll content, footer and FAB keep clear of it.
-    var overlay: CGFloat = 0
-    /// Rail sits at the bottom of the side strip: the header side bar stays above it.
-    var sideBarReserve: CGFloat = 0
-}
-
-private struct DuoTabBarInsetsKey: EnvironmentKey {
-    static let defaultValue = DuoTabBarInsets()
-}
-
-extension EnvironmentValues {
-    var duoTabBarInsets: DuoTabBarInsets {
-        get { self[DuoTabBarInsetsKey.self] }
-        set { self[DuoTabBarInsetsKey.self] = newValue }
-    }
-}
-
-extension ScreenLayout {
-    func duoTabBarInsets(itemCount: Int, hasFloatingButton: Bool) -> DuoTabBarInsets {
-        guard isIPhoneDuo else { return DuoTabBarInsets() }
-        guard sideBar != nil else {
-            return DuoTabBarInsets(overlay: duoFloatingTabBarHeight + Spacing.M)
-        }
-        let count = CGFloat(itemCount)
-        let rail = railPadding * 2 + count * itemSize + max(count - 1, 0) * railGap
-        let qr = hasFloatingButton ? Spacing.M + itemSize : 0
-        return DuoTabBarInsets(sideBarReserve: rail + qr + Spacing.XL)
-    }
-}
-
-/// Glass on iOS 26, a system blur before it (RN GlassView's fallback).
-struct DuoBarMaterial<S: Shape>: ViewModifier {
-    let shape: S
-    var visible: Bool = true
-
-    func body(content: Content) -> some View {
-        content.background(material.allowsHitTesting(false))
-    }
-
-    @ViewBuilder
-    private var material: some View {
-        #if compiler(>=6.2)
-        if #available(iOS 26.0, *) {
-            // glass materializes by toggling its effect, it does not fade with opacity
-            Color.clear
-                .glassEffect(visible ? .regular : .identity, in: shape)
-                .shadow(color: Color.black.opacity(visible ? 0.16 : 0), radius: 16, x: 0, y: 6)
-                .animation(.easeInOut(duration: 0.25), value: visible)
-        } else {
-            blur
-        }
-        #else
-        blur
-        #endif
-    }
-
-    private var blur: some View {
-        shape.fill(.regularMaterial)
-            .shadow(color: Color.black.opacity(0.16), radius: 16, x: 0, y: 6)
-            .opacity(visible ? 1 : 0)
-            .animation(.easeInOut(duration: 0.25), value: visible)
-    }
-}
-
-struct DuoTabBar: View {
-    let items: [BottomTabItem]
-    let floatingButton: BottomTabFloatingButton?
-    let selectedIndex: Int
-    let onTabSelected: (Int) -> Void
-
-    @Environment(\.screenLayout) private var layout
-
-    var body: some View {
-        if let sideBar = layout.sideBar {
-            DuoRailTabBar(sideBar: sideBar, items: items, floatingButton: floatingButton,
-                          selectedIndex: selectedIndex, onTabSelected: onTabSelected)
-        } else {
-            DuoFloatingTabBar(items: items, floatingButton: floatingButton,
-                              selectedIndex: selectedIndex, onTabSelected: onTabSelected)
-        }
-    }
-}
-
-/// Vertical bar anchored to the bottom of the side bar, QR button below it (Figma MT1-C/E).
-private struct DuoRailTabBar: View {
-    let sideBar: SideBarLayout
-    let items: [BottomTabItem]
-    let floatingButton: BottomTabFloatingButton?
-    let selectedIndex: Int
-    let onTabSelected: (Int) -> Void
-
-    @Environment(\.appTheme) private var theme
-
-    private var isRight: Bool { sideBar.edge == .right }
-
-    var body: some View {
-        VStack(spacing: Spacing.M) {
-            ZStack(alignment: .top) {
-                Capsule()
-                    .fill(theme.colors.background.selected)
-                    .frame(width: railBubbleWidth, height: railBubbleHeight)
-                    .offset(y: railPadding - (railBubbleHeight - itemSize) / 2
-                        + CGFloat(selectedIndex) * (itemSize + railGap))
-                    .animation(tabSpring, value: selectedIndex)
-
-                VStack(spacing: railGap) {
-                    ForEach(items.indices, id: \.self) { index in
-                        SwiftUI.Button { onTabSelected(index) } label: {
-                            DuoTabIcon(item: items[index], selected: index == selectedIndex)
-                                .frame(width: itemSize, height: itemSize)
-                                .contentShape(Rectangle())
-                        }
-                        .buttonStyle(.plain)
-                        .accessibilityLabel(items[index].label)
-                    }
-                }
-                .padding(.vertical, railPadding)
-            }
-            .frame(width: itemSize)
-            .modifier(DuoBarMaterial(shape: RoundedRectangle(cornerRadius: Radius.XL)))
-            .accessibilityIdentifier("bottom_tab_bar")
-
-            if let floatingButton {
-                DuoQrButton(data: floatingButton, size: itemSize)
-            }
-        }
-        .padding(isRight ? .leading : .trailing, Spacing.M)
-        .frame(width: sideBar.width, alignment: isRight ? .leading : .trailing)
-        .padding(.bottom, Spacing.XL)
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .bottomTrailing : .bottomLeading)
-        .ignoresSafeArea()
-    }
-}
-
-/// Floating labelled bar for the unfolded portrait display, QR in the middle cell (Figma MT1-M).
-private struct DuoFloatingTabBar: View {
-    let items: [BottomTabItem]
-    let floatingButton: BottomTabFloatingButton?
-    let selectedIndex: Int
-    let onTabSelected: (Int) -> Void
-
-    @Environment(\.screenLayout) private var layout
-    @Environment(\.appTheme) private var theme
-
-    private var barWidth: CGFloat {
-        let columnWidth = (layout.width - 2 * Spacing.M - (gridColumns - 1) * Spacing.M) / gridColumns
-        return columnWidth * gridSpan + (gridSpan - 1) * Spacing.M
-    }
-
-    private var useQr: Bool { floatingButton != nil && items.count % 2 == 0 }
-    private var middle: Int { items.count / 2 }
-    private var cellCount: Int { items.count + (useQr ? 1 : 0) }
-    private var cellWidth: CGFloat { (barWidth - floatingPadding * 2) / CGFloat(max(cellCount, 1)) }
-    private var visualIndex: Int { useQr && selectedIndex >= middle ? selectedIndex + 1 : selectedIndex }
-
-    var body: some View {
-        ZStack(alignment: .leading) {
-            Capsule()
-                .fill(theme.colors.background.selected)
-                .frame(width: cellWidth)
-                .offset(x: CGFloat(visualIndex) * cellWidth)
-                .animation(tabSpring, value: visualIndex)
-
-            HStack(spacing: 0) {
-                ForEach(0..<cellCount, id: \.self) { cell in
-                    if useQr && cell == middle, let floatingButton {
-                        DuoQrButton(data: floatingButton, size: floatingQrSize)
-                            .frame(width: cellWidth)
-                    } else {
-                        let index = useQr && cell > middle ? cell - 1 : cell
-                        tabCell(index)
-                    }
-                }
-            }
-        }
-        .padding(floatingPadding)
-        .frame(width: barWidth, height: duoFloatingTabBarHeight)
-        .modifier(DuoBarMaterial(shape: Capsule()))
-        .accessibilityIdentifier("bottom_tab_bar")
-        .padding(.bottom, layout.insets.bottom + Spacing.M)
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
-        .ignoresSafeArea()
-    }
-
-    private func tabCell(_ index: Int) -> some View {
-        let selected = index == selectedIndex
-        return SwiftUI.Button { onTabSelected(index) } label: {
-            VStack(spacing: Spacing.XXS) {
-                DuoTabIcon(item: items[index], selected: selected)
-                MomoText(
-                    items[index].label,
-                    typography: .labelXsMedium,
-                    color: selected ? theme.colors.primary : theme.colors.text.default,
-                    textAlign: .center,
-                    maxLines: 1
-                )
-            }
-            .frame(width: cellWidth)
-            .frame(maxHeight: .infinity)
-            .contentShape(Rectangle())
-        }
-        .buttonStyle(.plain)
-        .accessibilityLabel(items[index].label)
-    }
-}
-
-private struct DuoTabIcon: View {
-    let item: BottomTabItem
-    let selected: Bool
-
-    @Environment(\.appTheme) private var theme
-
-    private var badgeLabel: String? {
-        guard let label = item.badgeLabel else { return nil }
-        if let n = Int(label), n == 0 { return nil }
-        return label
-    }
-
-    var body: some View {
-        Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.default)
-            .overlay(alignment: .topTrailing) {
-                if let badgeLabel, !badgeLabel.isEmpty {
-                    Badge(label: badgeLabel).offset(x: Spacing.S, y: -Spacing.XS)
-                } else if badgeLabel != nil || item.showDot {
-                    BadgeDot(size: .small)
-                }
-            }
-    }
-}
-
-private struct DuoQrButton: View {
-    let data: BottomTabFloatingButton
-    let size: CGFloat
-
-    @Environment(\.appTheme) private var theme
-
-    var body: some View {
-        SwiftUI.Button(action: data.onPress) {
-            Circle()
-                .fill(theme.colors.primary)
-                .frame(width: size, height: size)
-                .overlay(Icon(source: data.icon, size: qrIconSize, color: Colors.black01))
-        }
-        .buttonStyle(.plain)
-        .accessibilityLabel(data.label)
-    }
-}

package/ios/Application/Navigation/component/DuoScrollGradient.swift

@@ -1,55 +0,0 @@
-//
-//  DuoScrollGradient.swift
-//  MoMoUIKits
-//
-//  Port of RN `DuoScrollGradient` (Components/DuoGlassBackground.tsx): with the iPhone Duo
-//  glass header the content scrolls under the bar, so the header gradient is drawn under it.
-//
-
-import SwiftUI
-
-// extended headers run their gradient this far below the header, as off Duo
-private let extendedGradientExtra: CGFloat = 52
-// scroll distance over which the extended gradient collapses to the header
-private let extendedCollapseDistance: CGFloat = 100
-
-struct DuoScrollGradient: View {
-    let scrollOffset: CGFloat
-    let headerHeight: CGFloat
-    let extended: Bool
-
-    @Environment(\.appTheme) private var theme
-    @Environment(\.screenLayout) private var layout
-
-    private var scroll: CGFloat { max(scrollOffset, 0) }
-
-    private var gradient: LinearGradient {
-        LinearGradient(
-            colors: [theme.colors.gradient, theme.colors.gradient.opacity(0)],
-            startPoint: .top,
-            endPoint: .bottom
-        )
-    }
-
-    var body: some View {
-        Group {
-            if extended {
-                // extended squeezes the whole fade into its box and fades out
-                let progress = min(scroll / extendedCollapseDistance, 1)
-                gradient
-                    .frame(height: headerHeight + extendedGradientExtra * (1 - progress))
-                    .opacity(1 - min(scroll / extendedGradientExtra, 1))
-            } else {
-                // default keeps the off-Duo 375:154 shape, the header clips it, and scrolls away
-                gradient
-                    .frame(height: layout.width * 154 / 375)
-                    .frame(height: headerHeight, alignment: .top)
-                    .clipped()
-                    .offset(y: -scroll)
-            }
-        }
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
-        .ignoresSafeArea()
-        .allowsHitTesting(false)
-    }
-}

package/ios/Application/Navigation/component/SideBar.swift

@@ -1,155 +0,0 @@
-//
-//  SideBar.swift
-//  MoMoUIKits
-//
-//  iPhone Duo: back and toolkit leave the header bar for a column in the side safe area,
-//  as the system bars do. Port of RN `SideBarButton.tsx` + `useSideBarItemStyle`.
-//
-
-import SwiftUI
-
-private let sideBarIconSize: CGFloat = 24
-
-/// Toolkit data when `headerRight` renders the kit toolkit; nil for a custom header right.
-func toolkitHeaderRight(_ headerRight: (() -> any View)?) -> (data: HeaderRightData?, tintColor: Color?)? {
-    guard let view = headerRight?() else { return nil }
-    if let toolkit = view as? HeaderRight { return (toolkit.headerRight, toolkit.tintColor) }
-    if let toolkit = view as? NavigationHeaderRight { return (toolkit.headerRight, toolkit.tintColor) }
-    return nil
-}
-
-/// The back button and toolkit column, placed in window coordinates over the side strip.
-struct HeaderSideBar: View {
-    let sideBar: SideBarLayout
-    let goBack: (() -> Void)?
-    let toolkit: (data: HeaderRightData?, tintColor: Color?)?
-    let headerColor: HeaderColor
-    /// What footer / tab bar / home indicator take from the bottom; the column stays above it.
-    let bottomInset: CGFloat
-
-    @Environment(\.screenLayout) private var layout
-    @State private var columnHeight: CGFloat = 0
-
-    private var isRight: Bool { sideBar.edge == .right }
-
-    private var top: CGFloat {
-        let maxY = layout.height - bottomInset - Spacing.XL - columnHeight
-        return max(min(sideBar.top, maxY), 0)
-    }
-
-    var body: some View {
-        VStack(alignment: isRight ? .leading : .trailing, spacing: Spacing.M) {
-            if let goBack {
-                SideBarButton(
-                    icon: "arrow-back",
-                    tintColor: headerColor.tintIconColor,
-                    accessibilityId: "btn_navigation_back",
-                    action: goBack
-                )
-            } else {
-                // keep the slot so the toolkit does not jump between root and pushed screens
-                Color.clear.frame(width: DuoMetrics.controlSize, height: DuoMetrics.controlSize)
-            }
-            if let toolkit {
-                ToolkitNavigationHeaderRight(
-                    headerRight: toolkit.data,
-                    tintColor: toolkit.tintColor ?? headerColor.tintIconColor,
-                    vertical: true
-                )
-            }
-        }
-        .padding(isRight ? .leading : .trailing, Spacing.M)
-        .frame(width: sideBar.width, alignment: isRight ? .leading : .trailing)
-        .background(
-            GeometryReader { proxy in
-                Color.clear
-                    .onAppear { columnHeight = proxy.size.height }
-                    .onChange(of: proxy.size.height) { columnHeight = $0 }
-            }
-        )
-        .padding(.top, top)
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .topTrailing : .topLeading)
-        .ignoresSafeArea()
-    }
-}
-
-/// Dark glass under light icons (banner headers), light glass otherwise.
-private struct SideBarGlass<S: Shape>: ViewModifier {
-    let tintColor: Color?
-    let shape: S
-
-    private var isDark: Bool { tintColor == Colors.black01 || tintColor == .white }
-
-    func body(content: Content) -> some View {
-        if isDark {
-            content
-                .background(shape.fill(Colors.black20.opacity(0.5)))
-                .overlay(shape.stroke(Colors.black01.opacity(0.2), lineWidth: 0.5))
-        } else {
-            content
-                .background(
-                    shape.fill(Colors.black01.opacity(0.85))
-                        .shadow(color: Color.black.opacity(0.12), radius: 4, x: 0, y: 2)
-                )
-                .overlay(shape.stroke(Colors.black20.opacity(0.08), lineWidth: 0.5))
-        }
-    }
-}
-
-/// 48pt glass circle for a single side bar control.
-struct SideBarButton: View {
-    let icon: String
-    var tintColor: Color?
-    var showBadge: Bool = false
-    var disabled: Bool = false
-    var accessibilityId: String?
-    let action: () -> Void
-
-    var body: some View {
-        SwiftUI.Button(action: { if !disabled { action() } }) {
-            Icon(source: icon, size: sideBarIconSize, color: tintColor ?? Colors.black17)
-                .frame(width: DuoMetrics.controlSize, height: DuoMetrics.controlSize)
-                .modifier(SideBarGlass(tintColor: tintColor, shape: Circle()))
-                .overlay(alignment: .topTrailing) {
-                    if showBadge {
-                        BadgeDot(size: .small).offset(x: -Spacing.XXS, y: Spacing.XXS)
-                    }
-                }
-        }
-        .buttonStyle(.plain)
-        .accessibilityIdentifier(accessibilityId ?? "")
-    }
-}
-
-/// 48pt wide glass capsule grouping related controls, one item per 50pt.
-struct SideBarGroup<Content: View>: View {
-    var tintColor: Color?
-    let itemCount: Int
-    @ViewBuilder let content: () -> Content
-
-    var body: some View {
-        VStack(spacing: 0) { content() }
-            .frame(
-                width: DuoMetrics.controlSize,
-                height: itemCount > 1 ? DuoMetrics.itemPitch * CGFloat(itemCount) : DuoMetrics.controlSize
-            )
-            .modifier(SideBarGlass(tintColor: tintColor, shape: RoundedRectangle(cornerRadius: Radius.XL)))
-    }
-}
-
-struct SideBarGroupItem: View {
-    let icon: String
-    var tintColor: Color?
-    let accessibilityId: String
-    let action: () -> Void
-
-    var body: some View {
-        SwiftUI.Button(action: action) {
-            Icon(source: icon, size: sideBarIconSize, color: tintColor ?? Colors.black17)
-                .frame(maxWidth: .infinity, maxHeight: .infinity)
-                .contentShape(Rectangle())
-        }
-        .buttonStyle(.plain)
-        .accessibilityIdentifier(accessibilityId)
-    }
-}