@stacksjs/defaults 0.70.229 → 0.70.230

package/views/dashboard/layouts/default.stx

@@ -32,14 +32,42 @@ export const sidebarRoleMap = JSON.stringify(
 )
 </script>
 
+@head
+<link rel="icon" href="/images/logos/favicon.svg" type="image/svg+xml">
+<link rel="icon" href="/images/logos/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">
+@endhead
+
 <!-- Dashboard icon stylesheet. Most dashboard icons are applied via dynamic
-    `:class="…"` bindings whose class names live in <script> state, which the stx
-    Crosswind extractor can't see — so their CSS is never generated inline and they
-    render as empty boxes. The dev server generates the full icon set once and serves
-    it here (browser-cached), instead of inlining ~260KB into every page. Route:
-    `/__deps/dashboard-icons.css` in storage/framework/core/actions/src/dev/dashboard.ts. -->
+    `:class="…"` bindings whose class names live in client script state, which the
+    stx Crosswind extractor cannot see, so their CSS is never generated inline and
+    they render as empty boxes. The dev server generates the full icon set once and
+    serves it here (browser-cached), instead of inlining ~260KB into every page.
+    Route: `/__deps/dashboard-icons.css` in actions/src/dev/dashboard.ts.
+
+    No angle-bracket tag names in this comment. stx parses them as elements, which
+    breaks OUT of the comment: the closing marker is then never emitted, and the
+    browser swallows everything after it as comment content. That is what hid the
+    entire sidebar once this layout started rendering it through a component. -->
 <link rel="stylesheet" href="/__deps/dashboard-icons.css">
 
+<!-- The native STX appearance bootstrap runs synchronously at this position.
+    It validates persisted values and stamps the root element before the shell
+    below is parsed, so hard reloads never flash the default skin or color mode. -->
+@appearanceBootstrap({
+  storageKey: 'stacks-dashboard-appearance',
+  appearance: {
+    key: 'sidebarStyle',
+    attribute: 'appearance',
+    allowed: ['macos', 'arc'],
+    default: 'macos',
+  },
+  colorMode: {
+    key: 'colorMode',
+    attribute: 'color-mode',
+    default: 'system',
+  },
+})
+
 <style>
 /*
  * Make every chart canvas fill its wrapper. @stacksjs/charts sizes its
@@ -67,82 +95,289 @@ body {
   background: transparent;
 }
 /*
- * The pane offset follows the sidebar's own width variable, which <Sidebar>
+ * The pane offset follows the sidebar's own width variable, which the Sidebar
  * writes onto this element via `shell-selector`. The literal fallback keeps
  * the layout correct on the first paint, before the controller mounts, and
  * the collapsed state animates because the variable changes rather than a
  * class toggling a hard-coded margin.
  */
 [data-stx-content] {
+  min-width: 0;
   min-height: 100vh;
   margin-left: var(--stx-sidebar-width, 250px);
   background: #f4f4f5;
   transition: margin-left 0.3s ease-out;
 }
+.dashboard-modal-layer {
+  left: var(--stx-sidebar-width, 250px);
+  transition: left 0.3s ease-out;
+}
+@media (max-width: 1023px) {
+  [data-stx-content] {
+    margin-left: 0;
+  }
+  [data-dashboard-web-sidebar] {
+    display: none;
+  }
+  .dashboard-modal-layer {
+    left: 0;
+  }
+}
+/*
+ * These three rules used to hide the web sidebar and collapse the content
+ * offset, because Craft rendered a real NSOutlineView in that strip and
+ * showing both would have meant two navigations side by side.
+ *
+ * That native sidebar is retired (see actions/src/dev/dashboard.ts: "the web
+ * one owns rendering and behavior"), and the dev server never requests one.
+ * It does request `webSidebarMaterial: true`, purely for the NSVisualEffectView
+ * vibrancy that sits BEHIND the stx-rendered rows.
+ *
+ * Craft conflates the two: macos.zig gates its native-sidebar bootstrap on
+ * `style.web_sidebar_material` alone, and that bootstrap sets the global
+ * `__craftNativeSidebar` flag. So asking for vibrancy silently asserted "a
+ * native sidebar exists", the marker got stamped on the root element, and
+ * these rules hid the only navigation the window had. The Craft window showed
+ * a vibrant empty strip.
+ *
+ * Removed rather than re-gated: with the native sidebar retired there is no
+ * state in which hiding the web sidebar is correct. The upstream conflation is
+ * worth fixing in Craft too, so the flag stops lying to every other consumer.
+ */
 .dark [data-stx-content] {
   background: #0a0a0a;
 }
-</style>
 
-<script>
-// Dynamic import map injection. Pages do `await import('@stacksjs/charts')`
-// in their `<script client>` blocks, which the browser refuses to resolve
-// without an import map. Writing a literal `<script type="importmap">` here
-// would be the obvious fix, but STX's layout-script processor strips the
-// `type` attribute and wraps the body in an IIFE — destroying it. Instead
-// we inject the import map programmatically via DOM, synchronously, before
-// any page-level script (and therefore before any dynamic import) runs.
-// The matching `/__deps/charts.js` route lives in dev/dashboard.ts.
-;(function () {
-  if (typeof document === 'undefined') return
-  // SPA fragment swaps re-execute scripts — only install once.
-  if (document.querySelector('script[data-stx-importmap]')) return
-  var s = document.createElement('script')
-  s.type = 'importmap'
-  s.setAttribute('data-stx-importmap', '')
-  s.textContent = '{"imports":{"@stacksjs/charts":"/__deps/charts.js"}}'
-  ;(document.head || document.documentElement).prepend(s)
-})();
-</script>
+/* ===========================================================================
+ * Appearance: Arc
+ *
+ * Selected in Settings, stamped on the root element as `data-appearance`.
+ * Everything here is keyed on that attribute, so switching is one attribute
+ * write and it reaches every page at once.
+ *
+ * Two halves, and only one of them is the sidebar.
+ *
+ * THE SHELL. Arc's defining move is that the content is not a pane butted up
+ * against a sidebar — it is a card floating ON the sidebar's background, inset
+ * and rounded on every side. So the panel color moves to the body, the sidebar
+ * goes transparent on top of it, and the content gets a margin all the way
+ * round. No sidebar theme can do this part; it belongs to the layout.
+ *
+ * THE ROWS. The installed @stacksjs/components predates its own `arc` theme,
+ * so the component renders macOS rows and this restyles them. The values are
+ * copied from that theme on purpose — 30px rows, 8px radius, a white card with
+ * a hairline and a one-pixel shadow instead of an accent fill — so that when
+ * the package ships it, the component and this skin agree and these rules
+ * become a no-op rather than a second, competing look.
+ *
+ * The selection overrides look redundantly specific because they have to be:
+ * the component paints the macOS selection from its own scoped stylesheet with
+ * selectors like `.scope [data-sidebar-selection="accent"][data-window-key]
+ * [data-sidebar-item][data-active]`. Matching that shape and adding the root
+ * attribute is what wins, and it wins by specificity rather than by `!important`
+ * so the rules stay overridable downstream.
+ * ======================================================================== */
+html[data-appearance="arc"] {
+  /* Warmer and a shade deeper than the content card it carries. The stx `arc`
+     theme paints its pane at #f7f5f1 over whatever sits behind it; here the
+     panel IS the backdrop, so it has to be flat and darker than white or the
+     floating card has no edge to read against. */
+  --dash-arc-panel: #efebe4;
+  --dash-arc-gap: 10px;
+  --dash-arc-radius: 12px;
+}
+/* The dark class is written onto the root element itself, so it stacks with
+   the appearance attribute rather than sitting above it. */
+html[data-appearance="arc"].dark {
+  --dash-arc-panel: #171717;
+}
 
-<script>
-// Dashboard-wide chart helpers exposed on window so feature pages can call
-// `useChart(...)` / `useCharts(...)` without importing the composables
-// module. The page's `<script client>` blocks run inside a non-module
-// `<script data-stx-scoped>` tag, so an ES `import` at the top of the
-// file is a syntax error. Exposing these globals here lets every page
-// drop the import and call the helper directly.
-;(function () {
-  if (typeof window === 'undefined') return
-  if (window.useChart) return
-
-  function useChart(opts) {
-    if (typeof document === 'undefined')
-      return { instance: null, destroy: function () {} }
-    var el = document.getElementById(opts.id)
-    if (!el) {
-      console.warn('[useChart] no element with id "' + opts.id + '" — chart not initialised')
-      return { instance: null, destroy: function () {} }
-    }
-    var instance = new opts.Chart(el, { type: opts.type, data: opts.data, options: opts.options })
-    return {
-      instance: instance,
-      destroy: function () { instance.destroy() },
-    }
-  }
+/* The gap around the content card is the body showing through, which is what
+   makes the card read as floating on the sidebar rather than beside it. */
+html[data-appearance="arc"] body {
+  background: var(--dash-arc-panel);
+}
 
-  function useCharts(specs) {
-    var handles = specs.map(useChart)
-    return {
-      handles: handles,
-      destroyAll: function () { handles.forEach(function (h) { h.destroy() }) },
-    }
+/* The card owns scrolling, so the page must not also scroll: a document
+   scrollbar would eat the right-hand gap and there would be nothing for it to
+   scroll anyway. */
+html[data-appearance="arc"],
+html[data-appearance="arc"] body {
+  height: 100%;
+  overflow: hidden;
+}
+
+html[data-appearance="arc"] [data-stx-content] {
+  /* Only three margins. `margin-left` is deliberately left to the base rule.
+     
+     It is the one margin that transitions (0.3s, for the sidebar collapse),
+     and overriding a transitioned longhand with a `calc()` over two custom
+     properties wedges the interpolation in WebKit: switching appearance leaves
+     it stuck at the old value until a reload. Inheriting the base declaration
+     means the property never changes when the appearance does, so there is
+     nothing to wedge — and the collapse animation keeps working identically in
+     both styles.
+     
+     The panel strip down the card's left side is the sidebar's own trailing
+     padding, which is where it comes from in Arc too. */
+  margin-top: var(--dash-arc-gap);
+  margin-right: var(--dash-arc-gap);
+  margin-bottom: var(--dash-arc-gap);
+  /* Beats the base rule's `min-height: 100vh`, which would otherwise hold the
+     card a full viewport tall and push its bottom edge off-screen — losing the
+     one gap that shows it is floating. */
+  min-height: 0;
+  /* The card is exactly the viewport minus its own gaps, and scrolls its own
+     content. Letting the page scroll instead would grow the card past the
+     bottom of the window, so the one edge that proves it is floating — the
+     panel showing beneath it — would only ever appear at the end of a long
+     page. This is also what Arc does: the sidebar is stationary and the card
+     scrolls inside its frame. */
+  height: calc(100vh - (2 * var(--dash-arc-gap)));
+  overflow-y: auto;
+  border-radius: var(--dash-arc-radius);
+  background: #fff;
+  /* Clip page content to the rounded corners — full-bleed headers and tables
+     otherwise square them off at the top. */
+  overflow-x: hidden;
+  box-shadow:
+    0 0 0 0.5px rgba(0, 0, 0, 0.07),
+    0 1px 2px rgba(0, 0, 0, 0.05),
+    0 8px 24px rgba(0, 0, 0, 0.06);
+  transition: margin-left 0.3s ease-out;
+}
+html[data-appearance="arc"].dark [data-stx-content] {
+  background: #0a0a0a;
+  box-shadow:
+    0 0 0 0.5px rgba(255, 255, 255, 0.08),
+    0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+/* An overlay scrollbar inside the card, so the rounded corner is not cut by a
+   full-width native gutter. */
+html[data-appearance="arc"] [data-stx-content] {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+html[data-appearance="arc"] [data-stx-content]::-webkit-scrollbar {
+  width: 8px;
+}
+html[data-appearance="arc"] [data-stx-content]::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background-clip: content-box;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+html[data-appearance="arc"] [data-stx-content]::-webkit-scrollbar-track {
+  background: transparent;
+}
+html[data-appearance="arc"].dark [data-stx-content] {
+  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
+}
+html[data-appearance="arc"].dark [data-stx-content]::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+/* On narrow viewports the sidebar is hidden entirely, so the card would float
+   on nothing. Return it to a flush pane. */
+@media (max-width: 1023px) {
+  html[data-appearance="arc"],
+  html[data-appearance="arc"] body {
+    height: auto;
+    overflow: visible;
+  }
+  html[data-appearance="arc"] [data-stx-content] {
+    margin-top: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    height: auto;
+    min-height: 100vh;
+    overflow-y: visible;
+    border-radius: 0;
+    box-shadow: none;
   }
+}
 
-  window.useChart = useChart
-  window.useCharts = useCharts
-})()
-</script>
+/* The panel is the body; the pane just holds rows. */
+html[data-appearance="arc"] [data-stx-sidebar] {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  color: #2c2a28;
+}
+html[data-appearance="arc"].dark [data-stx-sidebar] {
+  color: #ededf0;
+}
+/* Liquid Glass belongs to the macOS material. Arc's panel is flat. */
+html[data-appearance="arc"] .stx-sidebar-rim {
+  display: none;
+}
+
+/* Rows: discrete cards with a 2px gutter, not AppKit's contiguous run. */
+html[data-appearance="arc"] [data-sidebar-row] {
+  height: 32px;
+}
+html[data-appearance="arc"] [data-sidebar-item] {
+  height: 30px;
+  border-radius: 8px;
+  color: inherit;
+}
+html[data-appearance="arc"] [data-sidebar-item]:hover {
+  background: rgba(255, 255, 255, 0.55);
+}
+html[data-appearance="arc"].dark [data-sidebar-item]:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* Selection: a raised white card, in both window states. Matching the
+   component's own selector shape is what gives these the specificity to win. */
+html[data-appearance="arc"] [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"],
+html[data-appearance="arc"] [data-sidebar-selection="accent"][data-window-key="false"] [data-sidebar-item][data-active="true"],
+html[data-appearance="arc"] [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"]:hover {
+  background: #fff;
+  color: #1b1a19;
+  font-weight: 500;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 1px 2px rgba(0, 0, 0, 0.08);
+}
+html[data-appearance="arc"].dark [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"],
+html[data-appearance="arc"].dark [data-sidebar-selection="accent"][data-window-key="false"] [data-sidebar-item][data-active="true"],
+html[data-appearance="arc"].dark [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"]:hover {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.08),
+    0 1px 2px rgba(0, 0, 0, 0.35);
+}
+
+/* The icon, count and chevron turn white on a macOS accent fill. On a white
+   card they must not — they keep their own tint, the same as an idle row. */
+html[data-appearance="arc"] [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-icon],
+html[data-appearance="arc"] [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-chevron] {
+  color: var(--stx-sidebar-icon, currentColor);
+}
+html[data-appearance="arc"] [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-count] {
+  color: rgba(44, 42, 40, 0.45);
+}
+html[data-appearance="arc"].dark [data-sidebar-selection="accent"][data-window-key="true"] [data-sidebar-item][data-active="true"] [data-sidebar-count] {
+  color: rgba(237, 237, 240, 0.45);
+}
+
+/* Section headers: sentence case and quieter than the macOS uppercase strip. */
+html[data-appearance="arc"] [data-sidebar-section-header],
+html[data-appearance="arc"] [data-sidebar-section] > div:first-child {
+  opacity: 0.55;
+}
+
+/* A viewer can hide navigation sections they never use. Kept as CSS on an
+   attribute rather than a DOM removal so the rows stay hydrated and a later
+   change re-shows them without a re-render — the same approach the role
+   filter above uses. */
+[data-sidebar-section][data-viewer-hidden="true"] {
+  display: none;
+}
+</style>
 
 <script client>
 // Global toast queue. Composables across the dashboard call
@@ -152,7 +387,13 @@ body {
 // layout so every dashboard page picks it up without opting in.
 // `~/`-anchored for the same reason as the sidebar import above.
 import { useToasts, dismissToast } from '~/storage/framework/defaults/functions/toasts'
+import { ensureCraftNativeSidebarMarker, useCraftSidebarSelection } from '~/storage/framework/defaults/functions/craft'
+import { readStoredAppearance, useAppearance } from '~/storage/framework/defaults/views/dashboard/composables/useAppearance'
+import { authStore } from '~/storage/framework/defaults/views/dashboard/stores/auth'
+import { kanbanStore } from '~/storage/framework/defaults/views/dashboard/stores/kanban'
+import { rbacStore } from '~/storage/framework/defaults/views/dashboard/stores/rbac'
 const { toasts } = useToasts()
+registerStoresClient({ authStore, kanbanStore, rbacStore })
 
 // Helpers below return COMPLETE class strings (static + dynamic) and are
 // applied via `:class="fn(...)"` because stx's `{{ ... }}` placeholder is
@@ -178,35 +419,38 @@ const toastWrapperClass = (type) => `pointer-events-auto overflow-hidden bg-whit
 // where `/api/dashboard/*` sits behind auth, the endpoint returns real role
 // data and the filter hides what the viewer can't reach.
 //
-// Guarded: `useStore('auth')` THROWS when the store was never registered, and
-// a throw here aborts scope registration for the entire page, leaving every
-// signal on every dashboard page unbound. A missing auth store must degrade to
-// the permissive default, not take the dashboard down with it.
-const sidebarRoles = {{ sidebarRoleMap }}
-
-const auth = (() => {
-  try {
-    const store = useStore('auth')
-    store.load()
-    return store
-  }
-  catch {
-    return null
-  }
-})()
+// stx bridges referenced <script server> exports into this client scope.
+// Keep this as a normal identifier so imported client code remains valid
+// TypeScript throughout the bundling pipeline.
+const sidebarRoles = sidebarRoleMap
+const auth = authStore
+const route = useRoute()
+const sidebarHost = useRef('dashboardSidebarHost')
+const mobileSidebarHost = useRef('dashboardMobileSidebarHost')
+let removeCraftSidebarSelection = () => {}
+ensureCraftNativeSidebarMarker()
+auth.load()
+
+function sidebarPanes() {
+  return [sidebarHost.current, mobileSidebarHost.current]
+    .map(host => host?.querySelector('[data-stx-sidebar]'))
+    .filter(Boolean)
+}
 
 function applyRoleFilter() {
-  const roleList = auth ? auth.roles() : []
-  const unauth = auth ? auth.unauthenticated() : true
-  for (const [itemId, required] of Object.entries(sidebarRoles)) {
-    const row = document.querySelector(`[data-sidebar-row][data-item-id="${itemId}"]`)
-    if (!row) continue
-    // Unauthenticated viewers see everything — keeps the dev dashboard
-    // usable. Once authenticated, role membership is authoritative. CSS
-    // `display: none` keeps the DOM intact for SPA nav, so a later role
-    // change can re-show the row without a re-render.
-    const allowed = unauth || required.some(r => roleList.includes(r))
-    row.style.display = allowed ? '' : 'none'
+  const roleList = auth.roles()
+  const unauth = auth.unauthenticated()
+  for (const pane of sidebarPanes()) {
+    for (const [itemId, required] of Object.entries(sidebarRoles)) {
+      const row = pane.querySelector(`[data-sidebar-row][data-item-id="${itemId}"]`)
+      if (!row) continue
+      // Unauthenticated viewers see everything, which keeps the dev dashboard
+      // usable. Once authenticated, role membership is authoritative. CSS
+      // `display: none` keeps the DOM intact for SPA nav, so a later role
+      // change can re-show the row without a re-render.
+      const allowed = unauth || required.some(r => roleList.includes(r))
+      row.style.display = allowed ? '' : 'none'
+    }
   }
 }
 
@@ -215,134 +459,205 @@ effect(() => {
   // including the first run after the auth fetch resolves.
   applyRoleFilter()
 })
-</script>
-
-<Sidebar
-  :sections="sidebarSections"
-  theme="macos"
-  width="250"
-  placement="fixed"
-  persist-key="stacks-dashboard-sidebar"
-  shell-selector="[data-stx-content]"
->
-  <template #header>
-    <!-- Chrome strip. The traffic lights are native (the Craft window is
-        titlebarHidden), so this reserves their space and acts as the window
-        drag region; in a plain browser it is the same empty strip macOS
-        sidebars carry above their first row. -->
-    <SidebarHeader :show-window-controls="false" />
-  </template>
-</Sidebar>
 
-<script>
-// Sidebar wiring the component intentionally leaves to the host app: SPA
-// navigation, keeping the highlight in sync with the real route, and Craft's
-// native selection events.
+// ---------------------------------------------------------------------------
+// Appearance (Settings → Appearance).
 //
-// Runs as a plain <script> IIFE (like the import-map script above), NOT via
-// onMount: stx gives a LAYOUT no reactive scope of its own, so its onMount /
-// effect callbacks never fire ("global mountCallbacks: 0"). A DOMContentLoaded
-// IIFE plus the stx:navigate event cover hard loads and every SPA route change
-// without depending on a scope mount.
-;(function () {
-  if (typeof document === 'undefined') return
-
-  function rows(pane) {
-    return pane.querySelectorAll('a[data-sidebar-item][href]')
+// The inline bootstrap at the top of this layout already stamped the root
+// attributes for the first paint. These effects keep them in step afterwards:
+// re-running `applyAppearance` whenever a preference signal changes is what
+// makes the settings page feel immediate — the shell restyles under the user
+// while they are still looking at the picker, with no reload and no navigation.
+// ---------------------------------------------------------------------------
+
+const appearance = useAppearance()
+
+effect(() => {
+  // Reading the signals here is what subscribes this effect to them; `apply`
+  // reads them again internally, which is harmless and keeps it callable from
+  // anywhere.
+  appearance.sidebarStyle()
+  appearance.colorMode()
+  appearance.apply()
+})
+
+// Section visibility is applied here rather than filtered out of
+// `sidebarSections` server-side, so a viewer toggling one gets the row back
+// instantly instead of on the next full render.
+function applySectionVisibility() {
+  // The signal is read BEFORE the panes are looked up, and that order is the
+  // whole point. Read after an early return, it never gets tracked on the first
+  // pass — the panes are not mounted when effects first run — so the effect
+  // ends up with no dependency and never runs again. The toggle then appears to
+  // do nothing until a reload.
+  const hidden = appearance.hiddenSections()
+  for (const pane of sidebarPanes()) {
+    for (const section of pane.querySelectorAll('[data-sidebar-section]')) {
+      const id = section.dataset.sectionId || ''
+      section.setAttribute('data-viewer-hidden', String(hidden.includes(id)))
+    }
+  }
+}
+
+// The effect covers later toggles. It cannot cover the FIRST paint on its own:
+// effects run before the layout's refs are populated, so the very first pass
+// finds no panes, and on a fresh load the preference never changes afterwards —
+// leaving hidden sections visible until something else happens to touch the
+// signal. `onMount` below runs it again once the panes exist.
+effect(applySectionVisibility)
+
+
+// Another tab changed the preferences. `storage` only fires in OTHER tabs, so
+// this cannot loop back on the tab that made the change. The store's own
+// persistence writes but does not watch, so the re-read is explicit.
+useEventListener('storage', (event) => {
+  if (event?.key !== 'stacks-dashboard-appearance') return
+  const next = readStoredAppearance()
+  appearance.sidebarStyle.set(next.sidebarStyle)
+  appearance.colorMode.set(next.colorMode)
+  appearance.hiddenSections.set(next.hiddenSections)
+  appearance.apply()
+})
+
+function normalizeRoutePath(path) {
+  return (path || '/').replace(/\/+$/, '') || '/'
+}
+
+// Highlight the current route. Longest-prefix matching keeps a detail page
+// such as /commerce/products/42 attached to its /commerce/products row while
+// preventing /health from matching /health-check.
+function syncActiveSidebarRow(url) {
+  let path = route.path
+  if (url) {
+    try {
+      path = new URL(url, 'https://stacks.local').pathname
+    }
+    catch {}
   }
 
-  // Highlight the sidebar row for the CURRENT route. Longest-prefix match, so a
-  // nested/detail page (e.g. /commerce/products/42) still lights up its section
-  // row (/commerce/products); the root row (/) only ever matches the home page.
-  function syncActive(url) {
-    var pane = document.querySelector('[data-stx-sidebar]')
-    if (!pane) return
-    var path
-    try { path = new URL(url || location.href, location.origin).pathname }
-    catch (e) { path = location.pathname }
-    var norm = function (p) { return (p || '/').replace(/\/+$/, '') || '/' }
-    var cur = norm(path)
-    var best = null
-    var bestLen = -1
-    var links = rows(pane)
-    for (var i = 0; i < links.length; i++) {
-      var href = links[i].getAttribute('href') || ''
-      if (href.indexOf('http') === 0) continue
-      var h = norm(href)
-      // `${cur}/`.startsWith(`${h}/`) catches an exact hit and any child path,
-      // while the trailing slash stops /health matching /health-check.
-      if ((cur + '/').indexOf(h + '/') === 0 && h.length > bestLen) {
-        best = links[i]
-        bestLen = h.length
+  const currentPath = normalizeRoutePath(path)
+  for (const pane of sidebarPanes()) {
+    let bestMatch = null
+    let bestLength = -1
+    const links = pane.querySelectorAll('a[data-sidebar-item][href]')
+
+    for (const link of links) {
+      const href = link.getAttribute('href') || ''
+      if (href.startsWith('http')) continue
+      const candidatePath = normalizeRoutePath(href)
+      if (`${currentPath}/`.startsWith(`${candidatePath}/`) && candidatePath.length > bestLength) {
+        bestMatch = link
+        bestLength = candidatePath.length
       }
     }
-    var actives = pane.querySelectorAll('[data-sidebar-item][data-active="true"]')
-    for (var j = 0; j < actives.length; j++) {
-      actives[j].removeAttribute('data-active')
-      actives[j].removeAttribute('aria-current')
+
+    for (const active of pane.querySelectorAll('[data-sidebar-item][data-active="true"]')) {
+      active.removeAttribute('data-active')
+      active.removeAttribute('aria-current')
     }
-    if (best) {
-      best.setAttribute('data-active', 'true')
-      best.setAttribute('aria-current', 'page')
+
+    if (bestMatch) {
+      bestMatch.setAttribute('data-active', 'true')
+      bestMatch.setAttribute('aria-current', 'page')
     }
   }
+}
+
+function handleSidebarItemClick(payload) {
+  const href = payload?.item?.href
+  if (!href || href.startsWith('http')) return
+  payload.event?.preventDefault()
+  navigate(href)
+}
+
+function syncMobileSidebar() {
+  applyRoleFilter()
+  syncActiveSidebarRow()
+}
 
-  function init() {
-    var pane = document.querySelector('[data-stx-sidebar]')
-    if (!pane) return
-
-    syncActive()
-
-    // Bind route + click listeners once. This script can re-run on SPA fragment
-    // swaps, so guard against stacking duplicate handlers on the persistent pane.
-    if (pane.__sidebarWired) return
-    pane.__sidebarWired = true
-
-    // Follow EVERY route change, not just sidebar clicks. navigate() dispatches
-    // stx:navigate (content links, programmatic navigate, and popstate
-    // back/forward all route through it), so the highlight tracks the real
-    // route instead of only updating when a sidebar row is clicked.
-    window.addEventListener('stx:navigate', function (event) {
-      syncActive(event && event.detail && event.detail.url)
-    })
-
-    // SPA-navigate sidebar rows; fall back to full loads when the router isn't
-    // available or the target is external. The component already moves
-    // `data-active` on click, and the stx:navigate listener re-syncs after.
-    pane.addEventListener('click', function (event) {
-      var link = event.target.closest('a[data-sidebar-item]')
-      if (!link) return
-      // Disclosure chevrons live inside the row and only expand a subtree.
-      if (event.target.closest('[data-sidebar-disclosure]')) return
-      var href = link.getAttribute('href')
-      if (!href || href.indexOf('http') === 0 || typeof navigate !== 'function') return
-      event.preventDefault()
+function handleCraftSidebarSelection(event) {
+  if (!event?.itemId) return
+  for (const pane of sidebarPanes()) {
+    const row = [...pane.querySelectorAll('[data-sidebar-row]')].find(
+      candidate => candidate.dataset.itemId === event.itemId,
+    )
+    const link = row?.querySelector('a[data-sidebar-item][href]')
+    const href = link?.getAttribute('href')
+    if (href) {
       navigate(href)
-    })
-
-    // Craft native sidebar selection. When a Craft build installs a real
-    // NSOutlineView, it reports the selected row's id; resolve that back to a
-    // route from the rendered markup rather than a hand-maintained id-to-URL
-    // table, so the two can never drift apart.
-    window.craft = window.craft || {}
-    window.craft._sidebarSelectHandler = function (event) {
-      var id = event && event.itemId
-      if (!id) return
-      var row = pane.querySelector('[data-sidebar-row][data-item-id="' + id + '"] a[data-sidebar-item][href]')
-      var href = row && row.getAttribute('href')
-      if (href) navigate(href)
+      return
     }
   }
+}
+
+function attachCraftSidebarSelection() {
+  removeCraftSidebarSelection()
+  removeCraftSidebarSelection = useCraftSidebarSelection(handleCraftSidebarSelection)
+}
 
-  if (document.querySelector('[data-stx-sidebar]')) init()
-  else document.addEventListener('DOMContentLoaded', init)
-})();
+useEventListener('stx:navigate', event => syncActiveSidebarRow(event?.detail?.url))
+useEventListener('stx:hydrated', () => syncActiveSidebarRow(), { once: true })
+useEventListener('craft:ready', () => {
+  ensureCraftNativeSidebarMarker()
+  attachCraftSidebarSelection()
+})
+
+onMount(() => {
+  syncActiveSidebarRow()
+  applyRoleFilter()
+  applySectionVisibility()
+  attachCraftSidebarSelection()
+})
+
+onDestroy(() => {
+  removeCraftSidebarSelection()
+})
 </script>
 
+<div ref="dashboardSidebarHost" data-dashboard-web-sidebar>
+  <Sidebar
+    :sections="sidebarSections"
+    theme="macos"
+    width="250"
+    placement="fixed"
+    persist-key="stacks-dashboard-sidebar"
+    shell-selector="[data-stx-content]"
+    :follow-system-appearance="false"
+    @itemClick="handleSidebarItemClick($event)"
+  >
+    <template #header>
+      <!-- Chrome strip. The traffic lights are native (the Craft window is
+          titlebarHidden), so this reserves their space and acts as the window
+          drag region; in a plain browser it is the same empty strip macOS
+          sidebars carry above their first row. -->
+      <SidebarHeader :show-window-controls="false" />
+    </template>
+  </Sidebar>
+</div>
+
+<MobileSidebar @open="syncMobileSidebar()">
+  <div ref="dashboardMobileSidebarHost" class="h-full">
+    <Sidebar
+      :sections="sidebarSections"
+      theme="macos"
+      width="320"
+      placement="static"
+      className="h-full max-w-full"
+      @itemClick="handleSidebarItemClick($event)"
+    >
+      <template #header>
+        <SidebarHeader :show-window-controls="false" />
+      </template>
+    </Sidebar>
+  </div>
+</MobileSidebar>
+
 <main data-stx-content>
   @slot('content')
 </main>
 
+<GlobalSearch />
+
 <!-- Global toast container. Top-right stack, newest at the bottom.
     Pointer-events-none on the wrapper + auto on individual toasts so
     surrounding UI stays clickable while a toast is up. -->
@@ -353,15 +668,11 @@ effect(() => {
         <div :class="toastIconClass(toast.type)"></div>
         <div class="flex-1 min-w-0">
           <p class="font-medium text-gray-900 text-sm dark:text-neutral-100">{{ toast.title }}</p>
-          @if(toast.detail)
-            <p class="mt-1 break-words text-gray-500 text-xs dark:text-neutral-400">{{ toast.detail }}</p>
-          @endif
+          <p :if="toast.detail" class="mt-1 break-words text-gray-500 text-xs dark:text-neutral-400">{{ toast.detail }}</p>
         </div>
-        <button type="button" @click="dismissToast({{ toast.id }})" class="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-neutral-200" aria-label="Dismiss">
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
-          </svg>
-        </button>
+        <Button variant="ghost" size="xs" iconOnly ariaLabel="Dismiss notification" @click="dismissToast(toast.id)">
+          <span aria-hidden="true" class="h-4 w-4 i-hugeicons-cancel-01"></span>
+        </Button>
       </div>
     </div>
   </template>