sh3-core 0.19.5 → 0.20.1

package/dist/assets/icons.svg

@@ -1159,4 +1159,9 @@
     <circle cx="12" cy="19" r="1" />
   </symbol>
 
+  <!-- lucide/chevron-left -->
+  <symbol id="chevron-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m15 18-6-6 6-6" />
+  </symbol>
+
 </svg>

package/dist/auth/admin-users.svelte.js

@@ -7,6 +7,7 @@
  * the user list. Concurrent calls reuse the in-flight promise; subsequent
  * calls after completion fetch fresh data.
  */
+import { apiFetch } from '../transport/apiFetch';
 export const usersAdminState = $state({ users: [], loading: false, error: null });
 let inflight = null;
 export function refreshAdminUsers() {
@@ -16,7 +17,7 @@ export function refreshAdminUsers() {
     usersAdminState.error = null;
     inflight = (async () => {
         try {
-            const res = await fetch('/api/admin/users', { credentials: 'include' });
+            const res = await apiFetch('/api/admin/users');
             if (!res.ok) {
                 usersAdminState.error = `GET /api/admin/users failed: ${res.status}`;
                 return;

package/dist/auth/auth.svelte.d.ts

@@ -37,11 +37,10 @@ export declare function register(username: string, password: string, displayName
 /**
  * Log out — clear session on server and client.
  *
- * If the boot policy forbids guest browsing (auth.required &&
- * !auth.guestAllowed), trigger a full page reload so the boot-time
- * hard gate in createShell.ts re-runs and shows the sign-in wall.
- * This keeps the policy authoritative in a single place rather than
- * duplicating it here.
+ * If the boot policy forbids guest browsing (!auth.guestAllowed), trigger
+ * a full page reload so the boot-time hard gate in createShell.ts re-runs
+ * and shows the sign-in wall. This keeps the policy authoritative in a
+ * single place rather than duplicating it here.
  */
 export declare function logout(): Promise<void>;
 /**

package/dist/auth/auth.svelte.js

@@ -94,11 +94,10 @@ export async function register(username, password, displayName) {
 /**
  * Log out — clear session on server and client.
  *
- * If the boot policy forbids guest browsing (auth.required &&
- * !auth.guestAllowed), trigger a full page reload so the boot-time
- * hard gate in createShell.ts re-runs and shows the sign-in wall.
- * This keeps the policy authoritative in a single place rather than
- * duplicating it here.
+ * If the boot policy forbids guest browsing (!auth.guestAllowed), trigger
+ * a full page reload so the boot-time hard gate in createShell.ts re-runs
+ * and shows the sign-in wall. This keeps the policy authoritative in a
+ * single place rather than duplicating it here.
  */
 export async function logout() {
     try {
@@ -110,7 +109,7 @@ export async function logout() {
         // Best effort
     }
     setAuthToken(null);
-    if ((authConfig === null || authConfig === void 0 ? void 0 : authConfig.required) && !authConfig.guestAllowed) {
+    if (authConfig && !authConfig.guestAllowed) {
         // Policy forbids guest browsing — re-run the boot-time hard gate.
         // Do not touch reactive state: the page is leaving.
         window.location.reload();

package/dist/auth/types.d.ts

@@ -22,7 +22,6 @@ export interface AuthSession {
 /** Response from GET /api/boot. */
 export interface BootConfig {
     auth: {
-        required: boolean;
         guestAllowed: boolean;
         selfRegistration: boolean;
     };
@@ -39,7 +38,6 @@ export interface BootConfig {
 /** Global settings shape. */
 export interface GlobalSettings {
     auth: {
-        required: boolean;
         guestAllowed: boolean;
         sessionTTL: number;
         selfRegistration: boolean;

package/dist/chrome/CompactChrome.svelte

@@ -76,9 +76,31 @@
     return appLabel;
   });
 
-  let menuOpen = $state(false);
   let floatsOpen = $state(false);
 
+  function openMenuSheet() {
+    sh3.modal.open(
+      MenuSheet,
+      {},
+      { dismissOnBackdrop: true, boxStyle: 'max-width: 320px;' },
+    );
+  }
+
+  function toggleFloatsSheet() {
+    if (floatsOpen) return;
+    floatsOpen = true;
+    const handle = sh3.modal.open(
+      FloatsSheet,
+      {},
+      { dismissOnBackdrop: true, boxStyle: 'max-width: 320px;' },
+    );
+    const origClose = handle.close;
+    handle.close = () => {
+      origClose();
+      floatsOpen = false;
+    };
+  }
+
   function toggleDrawer(anchor: DrawerAnchor) {
     sh3.drawers.toggle(anchor);
   }
@@ -122,15 +144,12 @@
       ariaLabel="Floats"
       title="Floats"
       pressed={floatsOpen}
-      onclick={() => { floatsOpen = !floatsOpen; }}
+      onclick={toggleFloatsSheet}
     />
-    <Button variant="icon" icon="ellipsis-vertical" ariaLabel="Open menu" title="Open menu" onclick={() => { menuOpen = true; }} />
+    <Button variant="icon" icon="ellipsis-vertical" ariaLabel="Open menu" title="Open menu" onclick={openMenuSheet} />
   </div>
 </header>
 
-<MenuSheet open={menuOpen} onClose={() => (menuOpen = false)} />
-<FloatsSheet open={floatsOpen} onClose={() => (floatsOpen = false)} />
-
 <style>
   .sh3-compact-chrome {
     display: grid;

package/dist/chrome/FloatsSheet.svelte

@@ -18,7 +18,7 @@
   import { getRegisteredApp } from '../apps/registry.svelte';
   import type { FloatEntry } from '../layout/types';
 
-  let { open, onClose }: { open: boolean; onClose: () => void } = $props();
+  let { close }: { close: () => void } = $props();
 
   const dispatcher = $derived(getLiveDispatcherState());
   const dockedLabel = $derived.by(() => {
@@ -60,7 +60,7 @@
     } else {
       compactRootStore.setRoot({ kind: 'float', floatId: rowId });
     }
-    onClose();
+    close();
   }
 
   // ----- swipe-to-close --------------------------------------------------
@@ -135,14 +135,7 @@
   }
 </script>
 
-{#if open}
-  <div
-    class="backdrop"
-    onclick={onClose}
-    onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}
-    role="presentation"
-  ></div>
-  <div class="sheet" role="dialog" aria-label="Floats" data-sh3-region="floats-sheet">
+<div class="sh3-floats-sheet" role="dialog" aria-label="Floats" data-sh3-region="floats-sheet">
     <div class="scroll">
       {#each rows as row (row.id)}
         <button
@@ -163,32 +156,16 @@
         </button>
       {/each}
     </div>
-    <button class="cancel" onclick={onClose}>Cancel</button>
+    <button class="cancel" onclick={() => close()}>Cancel</button>
   </div>
-{/if}
 
 <style>
-  .backdrop {
-    position: absolute;
-    inset: 0;
-    background: var(--sh3-overlay-backdrop, rgba(0, 0, 0, 0.35));
-    pointer-events: auto;
-    z-index: var(--sh3-z-layer-4);
-  }
-  .sheet {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-height: 70vh;
+  .sh3-floats-sheet {
     display: flex;
     flex-direction: column;
-    background: var(--sh3-bg);
+    max-height: 70vh;
+    overflow: hidden;
     color: var(--sh3-fg);
-    border-top: 1px solid var(--sh3-border);
-    box-shadow: var(--sh3-shadow-md, 0 -4px 16px rgba(0, 0, 0, 0.2));
-    pointer-events: auto;
-    z-index: var(--sh3-z-layer-4);
   }
   .scroll {
     flex: 1;
@@ -207,8 +184,6 @@
     color: var(--sh3-fg);
     text-align: left;
     cursor: pointer;
-    /* Suppress browser-claimed horizontal pan so swipe-to-close survives
-       past the system scroll-claim threshold on Android/iOS. */
     touch-action: pan-y;
     user-select: none;
   }

package/dist/chrome/FloatsSheet.svelte.d.ts

@@ -1,6 +1,5 @@
 type $$ComponentProps = {
-    open: boolean;
-    onClose: () => void;
+    close: () => void;
 };
 declare const FloatsSheet: import("svelte").Component<$$ComponentProps, {}, "">;
 type FloatsSheet = ReturnType<typeof FloatsSheet>;

package/dist/chrome/FloatsSheet.svelte.test.js

@@ -29,8 +29,7 @@ describe('FloatsSheet', () => {
     });
     it('renders the active-layout row even when no floats exist', async () => {
         const { container } = renderWithShell(FloatsSheet, {
-            open: true,
-            onClose: () => { },
+            close: () => { },
         });
         await tick();
         const rows = container.querySelectorAll('[data-sh3-floats-row]');
@@ -42,8 +41,7 @@ describe('FloatsSheet', () => {
         layoutStore.tree.floats.push(makeFloat('f-2', 'Editor'));
         layoutStore.tree.floats.push(Object.assign(Object.assign({}, makeFloat('f-3', 'Picker')), { dismissable: true }));
         const { container } = renderWithShell(FloatsSheet, {
-            open: true,
-            onClose: () => { },
+            close: () => { },
         });
         await tick();
         const rows = container.querySelectorAll('[data-sh3-floats-row]');
@@ -56,7 +54,7 @@ describe('FloatsSheet', () => {
         let closed = false;
         const { container } = renderWithShell(FloatsSheet, {
             open: true,
-            onClose: () => { closed = true; },
+            close: () => { closed = true; },
         });
         await tick();
         const row = container.querySelector('[data-sh3-floats-row="f-9"]');
@@ -70,7 +68,7 @@ describe('FloatsSheet', () => {
         let closed = false;
         const { container } = renderWithShell(FloatsSheet, {
             open: true,
-            onClose: () => { closed = true; },
+            close: () => { closed = true; },
         });
         await tick();
         const row = container.querySelector('[data-sh3-floats-row="docked"]');
@@ -82,8 +80,7 @@ describe('FloatsSheet', () => {
         layoutStore.tree.floats.push(makeFloat('f-11', 'Notes'));
         compactRootStore.setRoot({ kind: 'float', floatId: 'f-11' });
         const { container } = renderWithShell(FloatsSheet, {
-            open: true,
-            onClose: () => { },
+            close: () => { },
         });
         await tick();
         const cur = container.querySelector('[data-current="true"]');
@@ -111,8 +108,7 @@ describe('FloatsSheet — swipe to close', () => {
         const id = floatManager.open('test:view', { title: 'Notes' });
         expect(layoutStore.floats.find((f) => f.id === id)).toBeTruthy();
         const { container } = renderWithShell(FloatsSheet, {
-            open: true,
-            onClose: () => { },
+            close: () => { },
         });
         await tick();
         const row = container.querySelector(`[data-sh3-floats-row="${id}"]`);
@@ -125,8 +121,7 @@ describe('FloatsSheet — swipe to close', () => {
     });
     it('does not let the docked row be swiped (no throw, no state change)', async () => {
         const { container } = renderWithShell(FloatsSheet, {
-            open: true,
-            onClose: () => { },
+            close: () => { },
         });
         await tick();
         const row = container.querySelector('[data-sh3-floats-row="docked"]');
@@ -140,8 +135,7 @@ describe('FloatsSheet — swipe to close', () => {
     it('swiping less than 40% width does not close', async () => {
         const id = floatManager.open('test:view', { title: 'Notes' });
         const { container } = renderWithShell(FloatsSheet, {
-            open: true,
-            onClose: () => { },
+            close: () => { },
         });
         await tick();
         const row = container.querySelector(`[data-sh3-floats-row="${id}"]`);

package/dist/chrome/MenuSheet.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   /*
-   * Touch-friendly replacement for MenuBar — bottom-anchored sheet with
-   * collapsible sections per menu container. Tapping a submenu parent
-   * expands its children inline (no nested popover stack — see
-   * docs/superpowers/specs/2026-05-09-action-submenu-discoverability-design.md).
+   * MenuSheet — modal-hosted menu card for compact mode.
+   *
+   * Push-navigation: tapping a container (File, Edit, …) or a submenu
+   * parent replaces the entire list with the sub-items. A back button
+   * returns to the parent level. Leaf items invoke the action + close.
    *
    * Reads the same dispatcher state and registry as MenuBar:
    *   resolveMenuContainers(activeAppId, declared)
@@ -20,8 +21,9 @@
   import { getLiveDispatcherState } from '../actions/state.svelte';
   import { getRegisteredApp } from '../apps/registry.svelte';
   import { resolveLabel } from '../actions/types';
+  import Button from '../primitives/Button.svelte';
 
-  let { open, onClose }: { open: boolean; onClose: () => void } = $props();
+  let { close }: { close: () => void } = $props();
 
   const dispatcher = $derived(getLiveDispatcherState());
   const activeAppId = $derived(dispatcher.activeAppId);
@@ -30,39 +32,84 @@
     return getRegisteredApp(activeAppId)?.manifest.menus;
   });
   const containers = $derived(resolveMenuContainers(activeAppId, declaredMenus));
-  const containerItems = $derived.by(() => {
-    const out: { containerId: string; label: string; items: MenuBarItem[] }[] = [];
-    const entries = listActions();
-    for (const c of containers) {
-      const items = resolveMenuItems(entries, dispatcher, c.id);
-      if (items.length > 0) out.push({ containerId: c.id, label: c.label, items });
-    }
-    return out;
-  });
 
-  let expanded = $state(new Set<string>());
-  let expandedSubmenu = $state(new Set<string>());
+  // --- navigation stack ------------------------------------------------
+  // Push-navigation replaces inline expand. Tapping a container pushes
+  // onto the stack; tapping a submenu parent pushes again. Back pops.
+  type NavEntry =
+    | { kind: 'root' }
+    | { kind: 'container'; containerId: string; label: string }
+    | { kind: 'submenu'; parentId: string; label: string };
+
+  let navStack = $state<NavEntry[]>([{ kind: 'root' }]);
+  const currentNav = $derived(navStack[navStack.length - 1]);
 
-  function toggleContainer(id: string) {
-    const next = new Set(expanded);
-    if (next.has(id)) next.delete(id);
-    else next.add(id);
-    expanded = next;
+  function push(e: NavEntry) {
+    navStack = [...navStack, e];
   }
 
-  function toggleSubmenu(id: string) {
-    const next = new Set(expandedSubmenu);
-    if (next.has(id)) next.delete(id);
-    else next.add(id);
-    expandedSubmenu = next;
+  function pop() {
+    if (navStack.length <= 1) return;
+    navStack = navStack.slice(0, -1);
   }
 
-  function invoke(itemId: string) {
-    const entry = listActions().find((e) => e.action.id === itemId);
-    if (!entry || typeof entry.action.run !== 'function') return;
+  // --- derived items for current nav level ---------------------------
+  const currentItems = $derived.by(() => {
+    const entries = listActions();
+    const nav = currentNav;
+
+    if (nav.kind === 'root') {
+      // Show all containers with items
+      return containers
+        .filter((c) => resolveMenuItems(entries, dispatcher, c.id).length > 0)
+        .map((c) => ({
+          id: c.id,
+          label: c.label,
+          isContainer: true as const,
+        }));
+    }
+
+    if (nav.kind === 'container') {
+      const items = resolveMenuItems(entries, dispatcher, nav.containerId);
+      return items.map((item) => ({
+        id: item.id,
+        label: item.label,
+        shortcut: item.shortcut,
+        isSubmenu: item.submenu === true,
+        disabled: item.disabled,
+      }));
+    }
+
+    // submenu
+    const items = resolveSubmenuItems(entries, dispatcher, nav.parentId);
+    return items.map((item) => ({
+      id: item.id,
+      label: item.label,
+      shortcut: item.shortcut,
+      disabled: item.disabled,
+      isSubmenu: item.submenu === true,
+    }));
+  });
+
+  // --- actions --------------------------------------------------------
+  function handleTap(entry: { id: string; isContainer?: boolean; isSubmenu?: boolean }) {
+    if (entry.isContainer) {
+      const c = containers.find((x) => x.id === entry.id);
+      if (c) push({ kind: 'container', containerId: c.id, label: c.label });
+      return;
+    }
+
+    if (entry.isSubmenu) {
+      push({ kind: 'submenu', parentId: entry.id, label: entry.label });
+      return;
+    }
+
+    // leaf item — invoke action
+    const actionEntry = listActions().find((e) => e.action.id === entry.id);
+    if (!actionEntry || typeof actionEntry.action.run !== 'function') return;
     try {
-      void entry.action.run({
-        action: { id: itemId, label: resolveLabel(entry.action) },
+      void actionEntry.action.run({
+        action: { id: entry.id, label: resolveLabel(actionEntry.action) },
         appId: dispatcher.activeAppId,
         viewId: dispatcher.focusedViewId ?? undefined,
         selection: dispatcher.selection ?? undefined,
@@ -70,155 +117,114 @@
         dispatch: () => {},
       });
     } catch (err) {
-      console.error(`[sh3] menu-sheet action "${itemId}" threw:`, err);
+      console.error(`[sh3] menu-sheet action "${entry.id}" threw:`, err);
+    }
+    close();
+  }
+
+  function back() {
+    pop();
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      if (navStack.length > 1) {
+        pop();
+        e.preventDefault();
+      } else {
+        close();
+      }
+      return;
     }
-    onClose();
   }
 </script>
 
-{#if open}
-  <div
-    class="backdrop"
-    onclick={onClose}
-    onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}
-    role="presentation"
-  ></div>
-  <div class="sheet" role="dialog" aria-label="Menu" data-sh3-region="menu-sheet">
-    <div class="scroll">
-      {#each containerItems as { containerId, label, items } (containerId)}
-        <button
-          class="container"
-          aria-expanded={expanded.has(containerId)}
-          onclick={() => toggleContainer(containerId)}
-        >
-          <span class="caret" class:open={expanded.has(containerId)}>▸</span>
-          <span class="label">{label}</span>
-        </button>
-        {#if expanded.has(containerId)}
-          <div class="items">
-            {#each items as item (item.id)}
-              {#if item.submenu}
-                <button
-                  class="item submenu"
-                  aria-expanded={expandedSubmenu.has(item.id)}
-                  disabled={item.disabled}
-                  onclick={() => toggleSubmenu(item.id)}
-                >
-                  <span class="caret" class:open={expandedSubmenu.has(item.id)}>▸</span>
-                  <span class="label">{item.label}</span>
-                </button>
-                {#if expandedSubmenu.has(item.id)}
-                  <div class="subitems">
-                    {#each resolveSubmenuItems(listActions(), dispatcher, item.id) as sub (sub.id)}
-                      <button
-                        class="item child"
-                        disabled={sub.disabled}
-                        onclick={() => invoke(sub.id)}
-                      >
-                        <span class="label">{sub.label}</span>
-                        {#if sub.shortcut}
-                          <span class="shortcut">{sub.shortcut}</span>
-                        {/if}
-                      </button>
-                    {/each}
-                  </div>
-                {/if}
-              {:else}
-                <button
-                  class="item"
-                  disabled={item.disabled}
-                  onclick={() => invoke(item.id)}
-                >
-                  <span class="label">{item.label}</span>
-                  {#if item.shortcut}
-                    <span class="shortcut">{item.shortcut}</span>
-                  {/if}
-                </button>
-              {/if}
-            {/each}
-          </div>
+<div class="sh3-menu-sheet" role="dialog" aria-label="Menu" tabindex="-1" data-sh3-region="menu-sheet" onkeydown={onKeydown}>
+  <div class="head">
+    {#if navStack.length > 1}
+      <Button variant="icon" icon="chevron-left" ariaLabel="Back" title="Back" onclick={back} />
+    {/if}
+    <span class="title">
+      {currentNav.kind === 'root' ? 'Menu' : currentNav.label}
+    </span>
+  </div>
+  <div class="scroll">
+    {#each currentItems as entry (entry.id)}
+      <button
+        class="item"
+        disabled={entry.disabled}
+        onclick={() => handleTap(entry)}
+      >
+        <span class="label">{entry.label}</span>
+        {#if entry.isContainer || entry.isSubmenu}
+          <span class="chevron">›</span>
+        {:else if entry.shortcut}
+          <span class="shortcut">{entry.shortcut}</span>
         {/if}
-      {/each}
-    </div>
-    <button class="cancel" onclick={onClose}>Cancel</button>
+      </button>
+    {/each}
   </div>
+{#if currentItems.length === 0}
+  <div class="empty">No menu items available.</div>
 {/if}
+</div>
 
 <style>
-  .backdrop {
-    position: absolute;
-    inset: 0;
-    background: var(--sh3-overlay-backdrop, rgba(0, 0, 0, 0.35));
-    pointer-events: auto;
-    z-index: var(--sh3-z-layer-4);
-  }
-  .sheet {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-height: 70vh;
+  .sh3-menu-sheet {
     display: flex;
     flex-direction: column;
-    background: var(--sh3-bg);
+    max-height: 70vh;
+    overflow: hidden;
     color: var(--sh3-fg);
-    border-top: 1px solid var(--sh3-border);
-    box-shadow: var(--sh3-shadow-md, 0 -4px 16px rgba(0, 0, 0, 0.2));
-    pointer-events: auto;
-    z-index: var(--sh3-z-layer-4);
+  }
+  .head {
+    display: flex;
+    align-items: center;
+    gap: var(--sh3-pad-xs);
+    padding: 6px 8px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+  .title {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--sh3-fg-muted);
   }
   .scroll {
     flex: 1;
     min-height: 0;
     overflow: auto;
-    padding: var(--sh3-pad-sm) 0;
-  }
-  .container {
-    display: flex;
-    align-items: center;
-    gap: var(--sh3-pad-sm);
-    width: 100%;
-    padding: var(--sh3-pad-sm) var(--sh3-pad-md);
-    border: none;
-    background: none;
-    color: var(--sh3-fg);
-    font-weight: 600;
-    text-align: left;
-    cursor: pointer;
+    padding: 4px 0;
   }
-  .container:active { background: var(--sh3-bg-sunken); }
-  .items { padding-left: var(--sh3-pad-md); }
-  .subitems { padding-left: var(--sh3-pad-md); }
   .item {
     display: flex;
     align-items: center;
     gap: var(--sh3-pad-sm);
     width: 100%;
-    padding: var(--sh3-pad-sm) var(--sh3-pad-md);
+    padding: 9px var(--sh3-pad-md);
     border: none;
     background: none;
     color: var(--sh3-fg);
     text-align: left;
     cursor: pointer;
+    font: inherit;
   }
   .item:disabled { opacity: 0.5; cursor: not-allowed; }
   .item:active:not(:disabled) { background: var(--sh3-bg-sunken); }
-  .item.child { padding-left: calc(var(--sh3-pad-md) * 2); }
   .label { flex: 1; }
-  .shortcut { color: var(--sh3-fg-muted); font-family: var(--sh3-font-mono); }
-  .caret {
-    display: inline-block;
-    width: 1em;
-    transition: transform 120ms;
+  .chevron {
+    opacity: 0.3;
+    font-size: 14px;
   }
-  .caret.open { transform: rotate(90deg); }
-  .cancel {
-    padding: var(--sh3-pad-md);
-    border: none;
-    border-top: 1px solid var(--sh3-border);
-    background: var(--sh3-bg-elevated);
-    color: var(--sh3-fg);
-    font-weight: 600;
-    cursor: pointer;
+  .shortcut {
+    color: var(--sh3-fg-muted);
+    font-family: var(--sh3-font-mono);
+    font-size: 0.9em;
+  }
+  .empty {
+    padding: 20px 12px;
+    text-align: center;
+    color: var(--sh3-fg-muted);
+    font-style: italic;
   }
 </style>