feat(desktop): floating hover-peek sidebar

On the macOS desktop shell the collapsed sidebar has no width at all
(`--sidebar-collapsed-width: 0`), so the only ways back were ⌘B and the
title-bar toggle. Hovering that toggle now floats the sidebar in as a card
over the content, inset from the window edge, and it retracts when the
pointer leaves. Clicking the same control still docks it for good.

The card is the existing `.sidebar-shell-outer` re-styled, not a second
surface: `<Sidebar>` is never re-mounted, so its scroll position and
expansion state survive a peek. One CSS rule re-points `--sidebar-width` at
a new `--sidebar-expanded-width`, and the inner shell and aside follow with
no per-element overrides. Chrome is all existing tokens — `--radius`,
`--border`, `shadow-overlay`, `--z-modal` — and the fill is the sidebar's
own `--surface-1`, so docked and floating are the same surface. Enter/exit
use the popper idiom (`fade-in-0 zoom-in-95`) that emcn's Radix surfaces
already use.

Also migrates the search palette from raw `z-40`/`z-50` to `--z-modal`. It
was the one overlay outranked by the new card, and the raw values also put
it below `--z-toast`, inverting the order globals.css documents.

Settings drive-bys, all pre-existing violations in files this touches:
tokenize two literal pixel text sizes in passwords-view, route its cards
through `SettingsResourceRow` instead of four re-derived chrome constants,
and collapse three `{null}`-bodied `SettingsSection`s in browser settings
into one section of real rows.

Author: Waleed Latif

apps/sim/app/_styles/globals.css

@@ -12,6 +12,7 @@
 :root {
   --sidebar-width: 0px; /* 0 outside workspace; blocking script always sets actual value on workspace pages */
   --sidebar-collapsed-width: 51px; /* icon rail on web; desktop overrides to 0 before first paint */
+  --sidebar-expanded-width: 248px; /* SIDEBAR_WIDTH.DEFAULT; the width to restore to, held even while collapsed */
   --desktop-title-bar-height: 0px; /* macOS traffic-light lane; desktop overrides before first paint */
   --desktop-title-bar-inset-x: 0px; /* clearance past the traffic lights; desktop overrides */
   --desktop-title-bar-control-offset: 0px; /* centres a lane control; desktop overrides */
@@ -154,6 +155,24 @@ html[data-sim-desktop-title-bar="inset"]
   --sidebar-width: var(--sidebar-collapsed-width);
 }
 
+/**
+ * Hover-peek: the shell floats out of flow as a card, so its subtree reads the restore
+ * width instead of the collapsed one. Re-declaring the same variable the rule above
+ * sets carries the inner shell and the aside along with no per-element overrides.
+ *
+ * Lives here rather than on the component because a Tailwind arbitrary property is one
+ * class (0,1,0) and would lose to that rule's (0,2,0) selector.
+ */
+.sidebar-shell-outer[data-collapsed][data-peek] {
+  --sidebar-width: var(--sidebar-expanded-width);
+}
+
+/* The card appears at full width, so the aside's own width transition would animate
+   0 -> expanded inside it. */
+.sidebar-shell-outer[data-peek] .sidebar-container {
+  transition: none;
+}
+
 .sidebar-container span,
 .sidebar-container .text-small {
   transition: opacity 120ms ease;

apps/sim/app/layout.tsx

@@ -112,22 +112,26 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     document.cookie = 'sidebar_collapsed=' + (collapsed ? '1' : '0') + '; path=/; max-age=31536000; samesite=lax';
                   }
 
-                  if (collapsed) {
-                    document.documentElement.style.setProperty(
-                      '--sidebar-width',
-                      collapsedSidebarWidth + 'px'
-                    );
-                  } else {
-                    var width = state && state.sidebarWidth;
-                    var maxSidebarWidth = Math.max(248, window.innerWidth * 0.3);
-                    var finalWidth =
-                      typeof width === 'number' && isFinite(width)
-                        ? Math.min(Math.max(width, 248), maxSidebarWidth)
-                        : defaultSidebarWidth;
-                    document.documentElement.style.setProperty('--sidebar-width', finalWidth + 'px');
-                  }
+                  // The expanded width is published unconditionally, even while
+                  // collapsed, because the desktop hover-peek renders the sidebar at
+                  // its restore width while --sidebar-width still reads collapsed.
+                  var width = state && state.sidebarWidth;
+                  var maxSidebarWidth = Math.max(248, window.innerWidth * 0.3);
+                  var expandedWidth =
+                    typeof width === 'number' && isFinite(width)
+                      ? Math.min(Math.max(width, 248), maxSidebarWidth)
+                      : defaultSidebarWidth;
+                  document.documentElement.style.setProperty(
+                    '--sidebar-expanded-width',
+                    expandedWidth + 'px'
+                  );
+                  document.documentElement.style.setProperty(
+                    '--sidebar-width',
+                    (collapsed ? collapsedSidebarWidth : expandedWidth) + 'px'
+                  );
                 } catch (e) {
                   document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth + 'px');
+                  document.documentElement.style.setProperty('--sidebar-expanded-width', defaultSidebarWidth + 'px');
                 }
 
                 // Panel width and active tab