sh3-core 0.13.3 → 0.13.4

package/dist/app/store/StoreView.svelte

@@ -17,9 +17,15 @@
   import type { InstalledPackage } from '../../registry/types';
   import { FRAMEWORK_SHARD_IDS } from '../../api';
   import PermissionConfirmModal from './PermissionConfirmModal.svelte';
+  import {
+    displayPackageType,
+    displayPackageTypeLabel,
+    packageMatchesTypeFilter,
+    type PackageTypeFilter,
+  } from './storeTypes';
 
   let search = $state('');
-  let typeFilter = $state<'all' | 'shard' | 'app'>('all');
+  let typeFilter = $state<PackageTypeFilter>('all');
   let installingIds = $state<Set<string>>(new Set());
   let updatingIds = $state<Set<string>>(new Set());
   let installError = $state<string | null>(null);
@@ -70,7 +76,7 @@
   const filtered = $derived.by(() => {
     const q = search.toLowerCase().trim();
     return ctx.state.ephemeral.catalog.filter((pkg: ResolvedPackage) => {
-      if (typeFilter !== 'all' && pkg.entry.type !== typeFilter) return false;
+      if (!packageMatchesTypeFilter(pkg.entry.type, typeFilter)) return false;
       if (!q) return true;
       return (
         pkg.entry.id.toLowerCase().includes(q) ||
@@ -312,6 +318,7 @@
       {@const updatable = hasUpdate(pkg.entry.id)}
       {@const updating = updatingIds.has(pkg.entry.id)}
       {@const missing = missingShards(pkg, ctx.state.ephemeral.installed)}
+      {@const displayType = displayPackageType(pkg.entry.type)}
       <div class="store-card">
         <div class="store-card-header">
           <div class="store-card-icon">
@@ -325,8 +332,12 @@
           </div>
           <div class="store-card-title">
             <span class="store-card-label">{pkg.entry.label}</span>
-            <span class="store-card-badge" class:badge-shard={pkg.entry.type === 'shard'} class:badge-app={pkg.entry.type === 'app'}>
-              {pkg.entry.type}
+            <span
+              class="store-card-badge"
+              class:badge-shard={displayType === 'shard'}
+              class:badge-app={displayType === 'app'}
+            >
+              {displayPackageTypeLabel(pkg.entry.type)}
             </span>
             <span class="store-card-version">{pkg.latest.version}</span>
           </div>

package/dist/app/store/permissionConfirm.js

@@ -1,8 +1,7 @@
 /*
  * Shared permission-diff confirmation flow for the `update` path. Opens
  * PermissionConfirmModal via modalManager and resolves to the user's choice.
- * Used by InstalledView's Update button and the home-card "Check for
- * updates" context-menu action.
+ * Used by the home-card "Check for updates" context-menu action.
  */
 import { modalManager } from '../../overlays/modal';
 import PermissionConfirmModal from './PermissionConfirmModal.svelte';

package/dist/app/store/storeApp.js

@@ -21,7 +21,6 @@ export const storeApp = {
         activeTab: 0,
         tabs: [
             { slotId: 'store.browse', viewId: 'sh3-store:browse', label: 'Browse' },
-            { slotId: 'store.installed', viewId: 'sh3-store:installed', label: 'Installed' },
         ],
     },
 };

package/dist/app/store/storeShard.svelte.js

@@ -1,10 +1,14 @@
 /*
- * Store shard — framework-shipped shard for browsing and managing
- * installed packages.
+ * Store shard — framework-shipped shard for browsing and installing
+ * packages.
  *
- * Contributes two views:
- *   - `sh3-store:browse`    — searchable/filterable catalog of available packages
- *   - `sh3-store:installed` — list of installed packages with uninstall
+ * Contributes a single view:
+ *   - `sh3-store:browse` — searchable/filterable catalog of available packages
+ *
+ * Uninstall and update flows for already-installed packages live on the
+ * shell home card's context menu (see `sh3core-shard/appActions.ts`); this
+ * shard exposes the underlying operations as verbs (`installVerb`,
+ * `uninstallVerb`, `updateVerb`, `appinfoVerb`) and via `storeContext`.
  *
  * Uses env state for registries (server-authoritative, admin-writable) and
  * an ephemeral zone for the live catalog / installed list / loading / error state.
@@ -13,7 +17,6 @@
  */
 import { mount, unmount } from 'svelte';
 import StoreView from './StoreView.svelte';
-import InstalledView from './InstalledView.svelte';
 import { fetchRegistries, fetchBundle, fetchServerBundle, buildPackageMeta } from '../../registry/client';
 import { installPackage, listInstalledPackages } from '../../registry/installer';
 import { uninstallPackage as installerUninstallPackage } from '../../registry/installer';
@@ -83,7 +86,6 @@ export const storeShard = {
         version: VERSION,
         views: [
             { id: 'sh3-store:browse', label: 'Store' },
-            { id: 'sh3-store:installed', label: 'Installed' },
         ],
     },
     activate(ctx) {
@@ -284,18 +286,7 @@ export const storeShard = {
                 };
             },
         };
-        const installedFactory = {
-            mount(container, _context) {
-                const instance = mount(InstalledView, { target: container });
-                return {
-                    unmount() {
-                        unmount(instance);
-                    },
-                };
-            },
-        };
         ctx.registerView('sh3-store:browse', browseFactory);
-        ctx.registerView('sh3-store:installed', installedFactory);
         // Store verbs — registered as sh3-store:install, sh3-store:uninstall, sh3-store:appinfo
         ctx.registerVerb(installVerb);
         ctx.registerVerb(uninstallVerb);

package/dist/app/store/storeTypes.d.ts

@@ -0,0 +1,21 @@
+/** Internal package types as carried by the registry index. */
+export type PackageType = 'shard' | 'app' | 'combo';
+/** User-visible package types — the registry triple collapsed to a pair. */
+export type DisplayPackageType = 'shard' | 'app';
+/** Type-filter values exposed by the browse-view dropdown. */
+export type PackageTypeFilter = 'all' | DisplayPackageType;
+/**
+ * Collapse the internal triple to the user-visible pair. Combo packages
+ * fold into `app`.
+ */
+export declare function displayPackageType(type: PackageType): DisplayPackageType;
+/**
+ * Title-cased label for the type chip. Returns `"Shard"` or `"App"` —
+ * never `"Combo"`.
+ */
+export declare function displayPackageTypeLabel(type: PackageType): 'Shard' | 'App';
+/**
+ * True if a package of `type` should be visible under the chosen filter.
+ * Combos pass under both `"all"` and `"app"` (never under `"shard"`).
+ */
+export declare function packageMatchesTypeFilter(type: PackageType, filter: PackageTypeFilter): boolean;

package/dist/app/store/storeTypes.js

@@ -0,0 +1,33 @@
+/*
+ * Pure helpers that translate the registry's internal package-type triple
+ * (`shard | app | combo`) into the two-value vocabulary the store UI shows
+ * the user (`Shard | App`). `combo` is an internal distinction — a package
+ * that ships both a shard and an app surface — and from a user's standpoint
+ * a combo *is* an app, so it collapses to "App" everywhere user-facing.
+ *
+ * Kept as a separate module (rather than inline in StoreView) so the mapping
+ * is unit-testable without mounting Svelte components.
+ */
+/**
+ * Collapse the internal triple to the user-visible pair. Combo packages
+ * fold into `app`.
+ */
+export function displayPackageType(type) {
+    return type === 'shard' ? 'shard' : 'app';
+}
+/**
+ * Title-cased label for the type chip. Returns `"Shard"` or `"App"` —
+ * never `"Combo"`.
+ */
+export function displayPackageTypeLabel(type) {
+    return displayPackageType(type) === 'shard' ? 'Shard' : 'App';
+}
+/**
+ * True if a package of `type` should be visible under the chosen filter.
+ * Combos pass under both `"all"` and `"app"` (never under `"shard"`).
+ */
+export function packageMatchesTypeFilter(type, filter) {
+    if (filter === 'all')
+        return true;
+    return displayPackageType(type) === filter;
+}

package/dist/app/store/storeTypes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/app/store/storeTypes.test.js

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+import { displayPackageType, displayPackageTypeLabel, packageMatchesTypeFilter, } from './storeTypes';
+describe('displayPackageType', () => {
+    it('returns "shard" for shard packages', () => {
+        expect(displayPackageType('shard')).toBe('shard');
+    });
+    it('returns "app" for app packages', () => {
+        expect(displayPackageType('app')).toBe('app');
+    });
+    it('collapses combo packages to "app"', () => {
+        expect(displayPackageType('combo')).toBe('app');
+    });
+});
+describe('displayPackageTypeLabel', () => {
+    it('returns "Shard" for shard packages', () => {
+        expect(displayPackageTypeLabel('shard')).toBe('Shard');
+    });
+    it('returns "App" for app packages', () => {
+        expect(displayPackageTypeLabel('app')).toBe('App');
+    });
+    it('returns "App" for combo packages — the user-visible vocabulary never includes "combo"', () => {
+        expect(displayPackageTypeLabel('combo')).toBe('App');
+    });
+});
+describe('packageMatchesTypeFilter', () => {
+    it('matches every type when filter is "all"', () => {
+        expect(packageMatchesTypeFilter('shard', 'all')).toBe(true);
+        expect(packageMatchesTypeFilter('app', 'all')).toBe(true);
+        expect(packageMatchesTypeFilter('combo', 'all')).toBe(true);
+    });
+    it('matches only shards when filter is "shard"', () => {
+        expect(packageMatchesTypeFilter('shard', 'shard')).toBe(true);
+        expect(packageMatchesTypeFilter('app', 'shard')).toBe(false);
+        expect(packageMatchesTypeFilter('combo', 'shard')).toBe(false);
+    });
+    it('matches both apps and combos when filter is "app"', () => {
+        expect(packageMatchesTypeFilter('shard', 'app')).toBe(false);
+        expect(packageMatchesTypeFilter('app', 'app')).toBe(true);
+        expect(packageMatchesTypeFilter('combo', 'app')).toBe(true);
+    });
+});

package/dist/app/store/updatePackage.test.js

@@ -1,7 +1,7 @@
 /*
  * updatePackage() — version-aware unit tests. We exercise the version
  * resolution branch only; the full flow (server install + permission diff)
- * is covered indirectly through InstalledView component tests.
+ * is covered indirectly through the home-card update-action tests.
  */
 import { describe, it, expect } from 'vitest';
 import { pickVersion } from './storeShard.svelte';

package/dist/app/store/verbs.test.js

@@ -1,6 +1,14 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+const { mockStoreContext } = vi.hoisted(() => ({
+    mockStoreContext: {
+        state: { ephemeral: { installed: [] } },
+        updatePackage: vi.fn(),
+    },
+}));
+vi.mock('./storeShard.svelte', () => ({
+    storeContext: mockStoreContext,
+}));
 import { updateVerb } from './verbs';
-import * as shard from './storeShard.svelte';
 function mkCtx() {
     const lines = [];
     return {
@@ -11,6 +19,10 @@ function mkCtx() {
     };
 }
 describe('updateVerb', () => {
+    beforeEach(() => {
+        mockStoreContext.state = { ephemeral: { installed: [] } };
+        mockStoreContext.updatePackage = vi.fn();
+    });
     it('warns when no id is given', async () => {
         var _a;
         const { ctx, lines } = mkCtx();
@@ -19,11 +31,8 @@ describe('updateVerb', () => {
     });
     it('delegates to storeContext.updatePackage when version omitted', async () => {
         const fake = vi.fn().mockResolvedValue(undefined);
-        // @ts-expect-error — module-level singleton is not readonly at runtime
-        shard.storeContext = {
-            state: { ephemeral: { installed: [{ id: 'foo', version: '1.0.0' }] } },
-            updatePackage: fake,
-        };
+        mockStoreContext.state = { ephemeral: { installed: [{ id: 'foo', version: '1.0.0' }] } };
+        mockStoreContext.updatePackage = fake;
         const { ctx, lines } = mkCtx();
         await updateVerb.run(ctx, ['foo']);
         expect(fake).toHaveBeenCalledWith('foo', expect.any(Function), undefined);
@@ -31,22 +40,16 @@ describe('updateVerb', () => {
     });
     it('passes version through when provided', async () => {
         const fake = vi.fn().mockResolvedValue(undefined);
-        // @ts-expect-error
-        shard.storeContext = {
-            state: { ephemeral: { installed: [{ id: 'foo', version: '2.0.0' }] } },
-            updatePackage: fake,
-        };
+        mockStoreContext.state = { ephemeral: { installed: [{ id: 'foo', version: '2.0.0' }] } };
+        mockStoreContext.updatePackage = fake;
         const { ctx } = mkCtx();
         await updateVerb.run(ctx, ['foo', '1.0.0']);
         expect(fake).toHaveBeenCalledWith('foo', expect.any(Function), '1.0.0');
     });
     it('reports failure as error scrollback line', async () => {
         const fake = vi.fn().mockRejectedValue(new Error('boom'));
-        // @ts-expect-error
-        shard.storeContext = {
-            state: { ephemeral: { installed: [{ id: 'foo', version: '1.0.0' }] } },
-            updatePackage: fake,
-        };
+        mockStoreContext.state = { ephemeral: { installed: [{ id: 'foo', version: '1.0.0' }] } };
+        mockStoreContext.updatePackage = fake;
         const { ctx, lines } = mkCtx();
         await updateVerb.run(ctx, ['foo']);
         const last = lines.at(-1);

package/dist/overlays/FloatFrame.svelte

@@ -17,7 +17,7 @@
 -->
 <script lang="ts">
   import LayoutRenderer from '../layout/LayoutRenderer.svelte';
-  import { floatManager } from './float';
+  import { floatManager, getFloatParentHost } from './float';
   import { registerDismissableFrame, unregisterDismissableFrame } from './floatDismiss';
   import type { FloatEntry } from '../layout/types';
 
@@ -37,6 +37,22 @@
     return () => unregisterDismissableFrame(entry.id);
   });
 
+  // Portal the frame into the anchor's enclosing overlay host when one was
+  // resolved at open() time. This puts the frame inside the opener's
+  // stacking context — so a picker opened from inside a modal stacks above
+  // that modal without writing any z-index. The Svelte component lifecycle
+  // is unaffected; we're only relocating the rendered DOM node.
+  $effect(() => {
+    if (!frameEl) return;
+    const host = getFloatParentHost(entry.id);
+    if (!host) return;
+    const original = frameEl.parentNode;
+    host.appendChild(frameEl);
+    return () => {
+      if (frameEl?.parentNode === host && original) original.appendChild(frameEl);
+    };
+  });
+
   function onHeaderPointerDown(e: PointerEvent): void {
     if (e.button !== 0) return;
     if ((e.target as HTMLElement).closest('.sh3-float-close')) return;
@@ -76,6 +92,7 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
   class="sh3-float-frame"
+  data-shell-overlay-host="float"
   bind:this={frameEl}
   style:left="{entry.position.x}px"
   style:top="{entry.position.y}px"

package/dist/overlays/float.d.ts

@@ -15,6 +15,17 @@ export interface FloatOptions {
      * See docs/superpowers/specs/2026-04-21-dismissable-float-design.md.
      */
     dismissable?: boolean;
+    /**
+     * For `dismissable` floats only: anchor element used to determine the
+     * mount host. When the anchor is inside another overlay (modal, popup,
+     * float frame), the float frame is portaled into that host so it stacks
+     * above its opener instead of sitting at layer 1. Without an anchor —
+     * or for non-dismissable floats — the frame renders at the FloatLayer
+     * root as usual. The anchor isn't stored on FloatEntry (HTMLElement
+     * isn't serializable through the workspace-zone proxy); only the
+     * resolved parent host is, in a sidecar map keyed by float id.
+     */
+    anchor?: HTMLElement;
 }
 export interface FloatManager {
     open(viewId: string, options?: FloatOptions): string;
@@ -34,4 +45,5 @@ export declare function bindFloatStore(floats: FloatEntry[], getBounds: () => {
 export declare function unbindFloatStore(): void;
 /** Test-only reset. Clears in-memory fallback and unbinds any store. */
 export declare function __resetFloatManagerForTest(): void;
+export declare function getFloatParentHost(id: string): HTMLElement | undefined;
 export declare const floatManager: FloatManager;

package/dist/overlays/float.js

@@ -27,6 +27,7 @@
  *   and the pre-boot state.
  */
 import { computeMinSize, cascadePosition, generateFloatId } from '../layout/floats';
+import { findEnclosingOverlayHost } from './parentHost';
 // ----- storage binding ---------------------------------------------------
 let fallbackFloats = [];
 let boundFloats = null;
@@ -49,10 +50,19 @@ export function __resetFloatManagerForTest() {
     fallbackFloats = [];
     boundFloats = null;
     getTreeBounds = () => ({ w: 1600, h: 900 });
+    parentHosts.clear();
 }
 function activeStore() {
     return boundFloats !== null && boundFloats !== void 0 ? boundFloats : fallbackFloats;
 }
+// ----- parent host sidecar ------------------------------------------------
+// HTMLElement can't live on FloatEntry (workspace-zone proxy state), so the
+// resolved parent host is stored here keyed by float id and consumed by
+// FloatFrame to portal the rendered DOM into the opener's stacking context.
+const parentHosts = new Map();
+export function getFloatParentHost(id) {
+    return parentHosts.get(id);
+}
 // ----- slot id minting ---------------------------------------------------
 let floatSlotCounter = 0;
 function mintFloatSlotId(viewId) {
@@ -107,6 +117,11 @@ function openFloat(viewId, options = {}) {
     };
     if (options.dismissable)
         entry.dismissable = true;
+    if (options.dismissable && options.anchor) {
+        const host = findEnclosingOverlayHost(options.anchor);
+        if (host)
+            parentHosts.set(id, host);
+    }
     store.push(entry);
     return id;
 }
@@ -116,6 +131,7 @@ function closeFloat(floatId) {
     if (idx < 0)
         return;
     store.splice(idx, 1);
+    parentHosts.delete(floatId);
 }
 function listFloats() {
     // Return a snapshot so callers can iterate without racing mutations.

package/dist/overlays/float.test.js

@@ -1,5 +1,5 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { floatManager, __resetFloatManagerForTest, bindFloatStore } from './float';
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { floatManager, __resetFloatManagerForTest, bindFloatStore, getFloatParentHost, } from './float';
 import { layoutStore } from '../layout/store.svelte';
 describe('floatManager', () => {
     beforeEach(() => {
@@ -80,6 +80,49 @@ describe('floatManager', () => {
         expect(f.content.type).toBe('tabs');
     });
 });
+describe('floatManager — anchor-aware parent host', () => {
+    beforeEach(() => {
+        __resetFloatManagerForTest();
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    function makeOverlayHost(kind) {
+        const host = document.createElement('div');
+        host.dataset.shellOverlayHost = kind;
+        const anchor = document.createElement('button');
+        host.appendChild(anchor);
+        document.body.appendChild(host);
+        return { host, anchor };
+    }
+    it('getFloatParentHost is undefined when no anchor was passed', () => {
+        const id = floatManager.open('test:view', { dismissable: true });
+        expect(getFloatParentHost(id)).toBeUndefined();
+    });
+    it('getFloatParentHost is undefined when the anchor lives outside any overlay host', () => {
+        const anchor = document.createElement('button');
+        document.body.appendChild(anchor);
+        const id = floatManager.open('test:view', { dismissable: true, anchor });
+        expect(getFloatParentHost(id)).toBeUndefined();
+    });
+    it('getFloatParentHost returns the enclosing host for a dismissable+anchored float', () => {
+        const { host, anchor } = makeOverlayHost('modal');
+        const id = floatManager.open('test:view', { dismissable: true, anchor });
+        expect(getFloatParentHost(id)).toBe(host);
+    });
+    it('getFloatParentHost is undefined for non-dismissable floats even with an anchor', () => {
+        const { anchor } = makeOverlayHost('modal');
+        const id = floatManager.open('test:view', { anchor });
+        expect(getFloatParentHost(id)).toBeUndefined();
+    });
+    it('getFloatParentHost is cleared when the float is closed', () => {
+        const { anchor } = makeOverlayHost('modal');
+        const id = floatManager.open('test:view', { dismissable: true, anchor });
+        expect(getFloatParentHost(id)).toBeDefined();
+        floatManager.close(id);
+        expect(getFloatParentHost(id)).toBeUndefined();
+    });
+});
 // ---------------------------------------------------------------------------
 // DOM tests — floatManager + FloatLayer.svelte in happy-dom
 // ---------------------------------------------------------------------------
@@ -311,3 +354,55 @@ describe('floats — F.6 multi-picker interaction', () => {
         expect(floatManager.list().some((f) => f.id === id)).toBe(false);
     });
 });
+// ---------------------------------------------------------------------------
+// F.7 — anchor portals dismissable float into the enclosing overlay host
+// ---------------------------------------------------------------------------
+describe('floats — F.7 anchor portals to enclosing overlay host', () => {
+    beforeEach(() => {
+        resetFramework();
+        bindManagerToStore();
+    });
+    it('reparents the FloatFrame into the anchor’s enclosing overlay host', async () => {
+        const { container } = renderWithShell(FloatLayer, {});
+        const fakeModalHost = document.createElement('div');
+        fakeModalHost.className = 'fake-modal-host';
+        fakeModalHost.dataset.shellOverlayHost = 'modal';
+        const anchor = document.createElement('button');
+        fakeModalHost.appendChild(anchor);
+        document.body.appendChild(fakeModalHost);
+        floatManager.open('test:view', {
+            dismissable: true,
+            anchor,
+            title: 'Picker',
+        });
+        await tick();
+        const frame = document.querySelector('[role="dialog"][aria-label="Picker"]');
+        expect(frame).toBeTruthy();
+        expect(fakeModalHost.contains(frame)).toBe(true);
+        expect(container.contains(frame)).toBe(false);
+    });
+    it('renders inside FloatLayer when no anchor is provided', async () => {
+        const { container } = renderWithShell(FloatLayer, {});
+        floatManager.open('test:view', { dismissable: true, title: 'NoAnchor' });
+        await tick();
+        const frame = container.querySelector('[role="dialog"][aria-label="NoAnchor"]');
+        expect(frame).toBeTruthy();
+    });
+});
+// ---------------------------------------------------------------------------
+// F.8 — overlay host marker on FloatFrame
+// ---------------------------------------------------------------------------
+describe('floats — F.8 overlay host marker', () => {
+    beforeEach(() => {
+        resetFramework();
+        bindManagerToStore();
+    });
+    it('marks each FloatFrame with data-shell-overlay-host="float"', async () => {
+        const { container } = renderWithShell(FloatLayer, {});
+        floatManager.open('test:view', { title: 'Marked' });
+        await tick();
+        const frame = container.querySelector('[role="dialog"][aria-label="Marked"]');
+        expect(frame).toBeTruthy();
+        expect(frame.dataset.shellOverlayHost).toBe('float');
+    });
+});

package/dist/overlays/modal.js

@@ -109,6 +109,7 @@ function openModal(Content, props, options) {
     const root = getLayerRoot('modal');
     const host = document.createElement('div');
     host.className = 'sh3-modal-host';
+    host.dataset.shellOverlayHost = 'modal';
     host.style.position = 'absolute';
     host.style.inset = '0';
     host.style.pointerEvents = 'auto';

package/dist/overlays/modal.test.js

@@ -88,3 +88,20 @@ describe('modal — back-cascade integration', () => {
         expect(layerRoot.querySelectorAll('.sh3-modal-host').length).toBe(0);
     });
 });
+describe('modal — overlay host marker', () => {
+    let layerRoot;
+    beforeEach(() => {
+        layerRoot = makeLayerRoot();
+    });
+    afterEach(() => {
+        modalManager.closeAll();
+        teardownLayerRoot(layerRoot);
+    });
+    it('marks the modal host with data-shell-overlay-host="modal"', async () => {
+        modalManager.open(DummyFrame, {});
+        await tick();
+        const host = layerRoot.querySelector('.sh3-modal-host');
+        expect(host).not.toBeNull();
+        expect(host.dataset.shellOverlayHost).toBe('modal');
+    });
+});

package/dist/overlays/parentHost.d.ts

@@ -0,0 +1 @@
+export declare function findEnclosingOverlayHost(anchor: HTMLElement): HTMLElement | null;

package/dist/overlays/parentHost.js

@@ -0,0 +1,15 @@
+/*
+ * Walks up from `anchor` looking for an element marked as an overlay host
+ * via `data-shell-overlay-host`. Modal hosts, popup hosts, and float frames
+ * tag themselves so anchored overlays (popups, dismissable picker floats)
+ * can mount inside their opener's stacking context instead of at a global
+ * layer root — which is what the layer-z-index invariant gives us when a
+ * popover is logically "inside" a modal.
+ *
+ * Returns null when the anchor lives in the docked tree; callers fall back
+ * to their configured layer root in that case. The marker is read via
+ * `Element.closest`, so a marker on the anchor itself counts.
+ */
+export function findEnclosingOverlayHost(anchor) {
+    return anchor.closest('[data-shell-overlay-host]');
+}

package/dist/overlays/parentHost.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/overlays/parentHost.test.js

@@ -0,0 +1,39 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { findEnclosingOverlayHost } from './parentHost';
+afterEach(() => {
+    document.body.innerHTML = '';
+});
+describe('findEnclosingOverlayHost', () => {
+    it('returns the nearest ancestor with data-shell-overlay-host', () => {
+        const host = document.createElement('div');
+        host.dataset.shellOverlayHost = 'modal';
+        const inner = document.createElement('div');
+        const anchor = document.createElement('button');
+        inner.appendChild(anchor);
+        host.appendChild(inner);
+        document.body.appendChild(host);
+        expect(findEnclosingOverlayHost(anchor)).toBe(host);
+    });
+    it('returns the anchor itself when it carries the marker', () => {
+        const anchor = document.createElement('div');
+        anchor.dataset.shellOverlayHost = 'float';
+        document.body.appendChild(anchor);
+        expect(findEnclosingOverlayHost(anchor)).toBe(anchor);
+    });
+    it('returns null when no ancestor carries the marker', () => {
+        const anchor = document.createElement('button');
+        document.body.appendChild(anchor);
+        expect(findEnclosingOverlayHost(anchor)).toBeNull();
+    });
+    it('returns the innermost host when overlay hosts are nested', () => {
+        const outer = document.createElement('div');
+        outer.dataset.shellOverlayHost = 'modal';
+        const inner = document.createElement('div');
+        inner.dataset.shellOverlayHost = 'float';
+        const anchor = document.createElement('button');
+        inner.appendChild(anchor);
+        outer.appendChild(inner);
+        document.body.appendChild(outer);
+        expect(findEnclosingOverlayHost(anchor)).toBe(inner);
+    });
+});

package/dist/overlays/popup.js

@@ -83,6 +83,7 @@ function showPopup(Content, options, props) {
     const root = getLayerRoot('popup');
     const host = document.createElement('div');
     host.className = 'sh3-popup-host';
+    host.dataset.shellOverlayHost = 'popup';
     host.style.position = 'absolute';
     host.style.inset = '0';
     host.style.pointerEvents = 'none'; // only the frame captures pointer events

package/dist/overlays/popup.test.js

@@ -126,3 +126,22 @@ describe('popup — back-cascade integration', () => {
         expect(layerRoot.querySelector('.sh3-popup-host')).toBeNull();
     });
 });
+describe('popup — overlay host marker', () => {
+    let layerRoot;
+    beforeEach(() => {
+        vi.stubGlobal('innerWidth', 2000);
+        vi.stubGlobal('innerHeight', 2000);
+        layerRoot = makeLayerRoot();
+    });
+    afterEach(() => {
+        __resetPopupManagerForTest();
+        teardownLayerRoot(layerRoot);
+        vi.unstubAllGlobals();
+    });
+    it('marks the popup host with data-shell-overlay-host="popup"', () => {
+        popupManager.show(DummyFrame, { anchor: { x: 100, y: 100 } }, {});
+        const host = layerRoot.querySelector('.sh3-popup-host');
+        expect(host).not.toBeNull();
+        expect(host.dataset.shellOverlayHost).toBe('popup');
+    });
+});

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** Auto-generated from package.json — do not edit manually. */
-export declare const VERSION = "0.13.3";
+export declare const VERSION = "0.13.4";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** Auto-generated from package.json — do not edit manually. */
-export const VERSION = '0.13.3';
+export const VERSION = '0.13.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh3-core",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "type": "module",
   "files": [
     "dist"

package/dist/app/store/InstalledView.svelte

@@ -1,255 +0,0 @@
-<script lang="ts">
-  /*
-   * InstalledView — lists installed packages with uninstall capability.
-   *
-   * Simpler than the browse view: a flat list of installed packages with
-   * metadata (type, version, contract version, source registry, install date)
-   * and an uninstall button per entry.
-   */
-
-  import { storeContext } from './storeShard.svelte';
-  import { uninstallPackage } from '../../registry/installer';
-  import { serverUninstallPackage } from '../../env/client';
-  import { openPermissionConfirmModal } from './permissionConfirm';
-  import type { InstalledPackage } from '../../registry/types';
-
-  const ctx = storeContext;
-
-  let uninstallingIds = $state<Set<string>>(new Set());
-  let updatingIds = $state<Set<string>>(new Set());
-  let updateError = $state<string | null>(null);
-
-  async function handleUninstall(id: string) {
-    if (uninstallingIds.has(id)) return;
-
-    uninstallingIds = new Set([...uninstallingIds, id]);
-    try {
-      await serverUninstallPackage(id);
-      await uninstallPackage(id);
-      await ctx.refreshInstalled();
-    } catch (err) {
-      console.warn('[sh3-store] Uninstall failed:', err instanceof Error ? err.message : err);
-    } finally {
-      const next = new Set(uninstallingIds);
-      next.delete(id);
-      uninstallingIds = next;
-    }
-  }
-
-  async function handleUpdate(id: string) {
-    if (updatingIds.has(id)) return;
-    updatingIds = new Set([...updatingIds, id]);
-    updateError = null;
-    try {
-      await ctx.updatePackage(id, async (added, removed) => {
-        const pkg = ctx.state.ephemeral.installed.find(
-          (p: InstalledPackage) => p.id === id,
-        );
-        const target = ctx.state.ephemeral.updatable[id];
-        if (!pkg || !target) return true;
-        return openPermissionConfirmModal(pkg, target.latest.version, added, removed);
-      });
-    } catch (err) {
-      updateError = err instanceof Error ? err.message : String(err);
-    } finally {
-      const next = new Set(updatingIds);
-      next.delete(id);
-      updatingIds = next;
-    }
-  }
-
-  function handleRefresh() {
-    ctx.refreshInstalled();
-  }
-
-  function formatDate(iso: string): string {
-    try {
-      return new Date(iso).toLocaleDateString(undefined, {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      });
-    } catch {
-      return iso;
-    }
-  }
-</script>
-
-<div class="installed-view">
-  <header class="installed-header">
-    <h2>Installed Packages</h2>
-    <button onclick={handleRefresh}>Refresh</button>
-  </header>
-
-  {#if updateError}
-    <div class="installed-error">{updateError}</div>
-  {/if}
-
-  {#if ctx.state.ephemeral.installed.length === 0}
-    <div class="installed-empty">No packages installed.</div>
-  {:else}
-    <ul class="installed-list">
-      {#each ctx.state.ephemeral.installed as pkg (pkg.id)}
-        {@const uninstalling = uninstallingIds.has(pkg.id)}
-        <li class="installed-item">
-          <div class="installed-item-main">
-            <span class="installed-item-id">{pkg.id}</span>
-            <span class="installed-item-badge" class:badge-shard={pkg.type === 'shard'} class:badge-app={pkg.type === 'app'}>
-              {pkg.type}
-            </span>
-            <span class="installed-item-version">{pkg.version}</span>
-          </div>
-          <div class="installed-item-meta">
-            <span>Contract: v{pkg.contractVersion}</span>
-            <span>Source: {pkg.sourceRegistry}</span>
-            <span>Installed: {formatDate(pkg.installedAt)}</span>
-          </div>
-          <div class="installed-item-actions">
-            {#if pkg.id in ctx.state.ephemeral.updatable}
-              {@const target = ctx.state.ephemeral.updatable[pkg.id]}
-              {@const updating = updatingIds.has(pkg.id)}
-              <button
-                class="installed-update-btn"
-                onclick={() => handleUpdate(pkg.id)}
-                disabled={updating || uninstalling}
-              >
-                {updating ? 'Updating...' : `Update -> ${target.latest.version}`}
-              </button>
-            {/if}
-            <button
-              class="installed-uninstall-btn"
-              onclick={() => handleUninstall(pkg.id)}
-              disabled={uninstalling}
-            >
-              {uninstalling ? 'Removing...' : 'Uninstall'}
-            </button>
-          </div>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-
-</div>
-
-<style>
-  .installed-view {
-    font-family: var(--shell-font-ui);
-    color: var(--shell-fg, #e0e0e0);
-    background: var(--shell-bg, #1e1e1e);
-    padding: 16px;
-    height: 100%;
-    overflow-y: auto;
-    box-sizing: border-box;
-  }
-  .installed-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
-  }
-  .installed-header h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-  }
-  .installed-empty {
-    text-align: center;
-    padding: 32px 16px;
-    color: var(--shell-fg-muted, #888);
-    font-size: 0.875rem;
-  }
-  .installed-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .installed-item {
-    background: var(--shell-input-bg, #2a2a2a);
-    border: 1px solid var(--shell-border, #444);
-    border-radius: var(--shell-radius-md);
-    padding: 12px 14px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-  .installed-item-main {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .installed-item-id {
-    font-weight: 600;
-    font-size: 0.9375rem;
-  }
-  .installed-item-badge {
-    font-size: 0.6875rem;
-    padding: 1px 6px;
-    border-radius: var(--shell-radius-sm);
-    text-transform: uppercase;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-  }
-  .badge-shard {
-    background: color-mix(in srgb, var(--shell-accent, #007acc) 25%, transparent);
-    color: var(--shell-accent, #007acc);
-  }
-  .badge-app {
-    background: color-mix(in srgb, var(--shell-success, #4caf50) 25%, transparent);
-    color: var(--shell-success, #4caf50);
-  }
-  .installed-item-version {
-    font-size: 0.75rem;
-    color: var(--shell-fg-muted, #888);
-  }
-  .installed-item-meta {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-    font-size: 0.75rem;
-    color: var(--shell-fg-muted, #888);
-  }
-  .installed-item-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-  }
-  .installed-uninstall-btn {
-    padding: 4px 12px;
-    background: transparent;
-    color: var(--shell-error, #d32f2f);
-    border: 1px solid var(--shell-error, #d32f2f);
-    font-size: 0.8125rem;
-  }
-  .installed-uninstall-btn:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--shell-error, #d32f2f) 15%, transparent);
-  }
-  .installed-uninstall-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  .installed-update-btn {
-    padding: 4px 12px;
-    background: var(--shell-warning, #fbbf24);
-    color: var(--shell-fg-on-warning, #1a1b1e);
-    font-size: 0.8125rem;
-  }
-  .installed-update-btn:hover:not(:disabled) {
-    filter: brightness(1.1);
-  }
-  .installed-update-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  .installed-error {
-    padding: 8px 12px;
-    margin-bottom: 12px;
-    background: color-mix(in srgb, var(--shell-error, #d32f2f) 15%, transparent);
-    color: var(--shell-error, #d32f2f);
-    border: 1px solid var(--shell-error, #d32f2f);
-    border-radius: var(--shell-radius);
-    font-size: 0.8125rem;
-  }
-</style>

package/dist/app/store/InstalledView.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const InstalledView: import("svelte").Component<Record<string, never>, {}, "">;
-type InstalledView = ReturnType<typeof InstalledView>;
-export default InstalledView;