sh3-core 0.19.1 → 0.19.5

package/dist/Sh3.svelte

@@ -30,6 +30,7 @@
   import CompactRenderer from './layout/compact/CompactRenderer.svelte';
   import { sh3 } from './sh3Runtime.svelte';
   import { claim, revoke } from './gestures/pointerClaim';
+  import { EDGE_PX } from './gestures';
 
   let contentEl: HTMLElement | undefined = $state();
 
@@ -70,7 +71,8 @@
   // Register left/right edge zones as priority:'edge' pointer claims so that
   // any shard with a priority:'normal' claim automatically beats the shell's
   // edge-swipe gesture (carousel navigation, future side-panel reveals).
-  const EDGE_PX = 24;
+  // EDGE_PX is shared with carousel/swipe sites so the gutter width stays
+  // consistent across the framework.
   $effect(() => {
     const el = contentEl;
     if (!el) return;

package/dist/actions/menuBarModel.js

@@ -62,6 +62,12 @@ export function resolveMenuItems(entries, state, containerId) {
         const winning = innermostActiveScope(entry.action.scope, state, entry.ownerShardId);
         if (!winning)
             continue;
+        // Menu surface only: when the action is active via the 'app' tier,
+        // require the owner shard to be in the active app's requiredShards.
+        // Dispatcher / palette / context menu / hotkey paths keep autostart
+        // activation. See issue #32 and the design spec dated 2026-05-12.
+        if (winning === 'app' && !state.activeAppRequiredShards.has(entry.ownerShardId))
+            continue;
         seen.add(entry.action.id);
         out.push({
             id: entry.action.id,
@@ -95,6 +101,8 @@ export function resolveSubmenuItems(entries, state, parentId) {
         const winning = innermostActiveScope(entry.action.scope, state, entry.ownerShardId);
         if (!winning)
             continue;
+        if (winning === 'app' && !state.activeAppRequiredShards.has(entry.ownerShardId))
+            continue;
         seen.add(entry.action.id);
         out.push({
             id: entry.action.id,

package/dist/actions/menuBarModel.test.js

@@ -156,3 +156,64 @@ describe('resolveSubmenuItems', () => {
         expect(resolveSubmenuItems([], stateWithApp, 'nope')).toEqual([]);
     });
 });
+describe("resolveMenuItems — required-shard menu filter (issue #32)", () => {
+    it("omits scope:'app' actions when owner shard is autostart-only (not required by active app)", () => {
+        const state = mkState({
+            activeAppId: 'other-app',
+            activeAppRequiredShards: new Set(['other-shard']),
+            autostartShards: new Set(['guml.core']),
+        });
+        const entries = [
+            mkEntry({ id: 'guml.project.new', scope: 'app', menuItem: 'file', label: 'New Project…' }, 'guml.core'),
+        ];
+        expect(resolveMenuItems(entries, state, 'file')).toEqual([]);
+    });
+    it("includes scope:'app' actions when owner shard IS in active app's requiredShards", () => {
+        const state = mkState({
+            activeAppId: 'guml-ide',
+            activeAppRequiredShards: new Set(['guml.core']),
+            autostartShards: new Set(['guml.core']),
+        });
+        const entries = [
+            mkEntry({ id: 'guml.project.new', scope: 'app', menuItem: 'file', label: 'New Project…' }, 'guml.core'),
+        ];
+        expect(resolveMenuItems(entries, state, 'file').map((i) => i.id))
+            .toEqual(['guml.project.new']);
+    });
+    it('still includes the action when a more-specific tier wins (view:editor over app)', () => {
+        const state = mkState({
+            activeAppId: 'other-app',
+            activeAppRequiredShards: new Set(['other-shard']),
+            autostartShards: new Set(['guml.core']),
+            mountedViewIds: new Set(['editor']),
+        });
+        const entries = [
+            mkEntry({ id: 'fmt', scope: ['view:editor', 'app'], menuItem: 'file', label: 'Format' }, 'guml.core'),
+        ];
+        expect(resolveMenuItems(entries, state, 'file').map((i) => i.id)).toEqual(['fmt']);
+    });
+    it("omits scope:['home','app'] action in an app that does not require the autostart owner", () => {
+        const state = mkState({
+            activeAppId: 'other-app',
+            activeAppRequiredShards: new Set(['other-shard']),
+            autostartShards: new Set(['guml.core']),
+        });
+        const entries = [
+            mkEntry({ id: 'g.global', scope: ['home', 'app'], menuItem: 'file', label: 'Global' }, 'guml.core'),
+        ];
+        expect(resolveMenuItems(entries, state, 'file')).toEqual([]);
+    });
+    it('drops submenu children whose owner shard is autostart-only', () => {
+        const state = mkState({
+            activeAppId: 'other-app',
+            activeAppRequiredShards: new Set(['other-shard']),
+            autostartShards: new Set(['guml.core']),
+        });
+        const entries = [
+            mkEntry({ id: 'g.parent', scope: 'app', menuItem: 'file', label: 'GUML', submenu: true }, 'guml.core'),
+            mkEntry({ id: 'g.parent.a', scope: 'app', label: 'A', submenuOf: 'g.parent' }, 'guml.core'),
+        ];
+        expect(resolveMenuItems(entries, state, 'file')).toEqual([]);
+        expect(resolveSubmenuItems(entries, state, 'g.parent')).toEqual([]);
+    });
+});

package/dist/api.d.ts

@@ -87,5 +87,9 @@ export { default as Select } from './primitives/widgets/Select.svelte';
 export type { SelectOption } from './primitives/widgets/Select';
 export { default as AppPicker } from './primitives/widgets/AppPicker.svelte';
 export { default as UserPicker } from './primitives/widgets/UserPicker.svelte';
+export { default as DocumentFilePicker } from './primitives/widgets/DocumentFilePicker.svelte';
+export { default as DocumentOpener } from './primitives/widgets/DocumentOpener.svelte';
+export { default as DocumentSaver } from './primitives/widgets/DocumentSaver.svelte';
+export type { OpenerValue, SaverValue } from './primitives/widgets/DocumentFilePicker';
 export type { FieldKind, FieldAddress, FieldView, ControllableFieldDescriptor, ImperativeFieldDescriptor, ElementRefFieldDescriptor, ReadonlyFieldDescriptor, FieldsApi, DecorationHandle, } from './fields/types';
 export { fieldAddressToString, fieldAddressFromString } from './fields/address';

package/dist/api.js

@@ -97,4 +97,7 @@ export { default as FilePicker } from './primitives/widgets/FilePicker.svelte';
 export { default as Select } from './primitives/widgets/Select.svelte';
 export { default as AppPicker } from './primitives/widgets/AppPicker.svelte';
 export { default as UserPicker } from './primitives/widgets/UserPicker.svelte';
+export { default as DocumentFilePicker } from './primitives/widgets/DocumentFilePicker.svelte';
+export { default as DocumentOpener } from './primitives/widgets/DocumentOpener.svelte';
+export { default as DocumentSaver } from './primitives/widgets/DocumentSaver.svelte';
 export { fieldAddressToString, fieldAddressFromString } from './fields/address';

package/dist/app/admin/ApiKeysView.svelte

@@ -3,6 +3,9 @@
    * Admin API Keys view — list, create, reveal, revoke API keys.
    */
 
+  import { apiFetch } from '../../transport/apiFetch';
+  import { getEnvServerUrl } from '../../env/serverUrl';
+
   interface ApiKeyPublic {
     id: string;
     label: string;
@@ -29,7 +32,7 @@
     loading = true;
     error = null;
     try {
-      const res = await fetch('/api/admin/keys', { credentials: 'include' });
+      const res = await apiFetch(`${getEnvServerUrl()}/api/admin/keys`);
       if (!res.ok) throw new Error('Failed to fetch keys');
       keys = await res.json();
     } catch (err) {
@@ -42,10 +45,9 @@
   async function createKey() {
     createError = null;
     try {
-      const res = await fetch('/api/admin/keys', {
+      const res = await apiFetch(`${getEnvServerUrl()}/api/admin/keys`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
         body: JSON.stringify({ label: newLabel }),
       });
       if (!res.ok) {
@@ -66,9 +68,8 @@
   async function revokeKey(id: string) {
     confirmingId = null;
     try {
-      await fetch(`/api/admin/keys/${id}`, {
+      await apiFetch(`${getEnvServerUrl()}/api/admin/keys/${id}`, {
         method: 'DELETE',
-        credentials: 'include',
       });
       if (justCreated?.id === id) justCreated = null;
       await fetchKeys();

package/dist/app/store/PermissionConfirmModal.svelte

@@ -21,6 +21,7 @@
     permissions?: string[];
     added?: string[];
     removed?: string[];
+    warnings?: string[];
     onConfirm: () => void;
     onCancel: () => void;
   }
@@ -32,6 +33,7 @@
     permissions = [],
     added = [],
     removed = [],
+    warnings = [],
     onConfirm,
     onCancel,
   }: Props = $props();
@@ -111,6 +113,17 @@
           </ul>
         {/if}
       {/if}
+      {#if warnings.length > 0}
+        <p class="perm-modal-intro perm-modal-warn-heading">Potential compatibility issues:</p>
+        <ul class="perm-modal-list perm-modal-warnings">
+          {#each warnings as msg (msg)}
+            <li class="perm-modal-item perm-modal-warn-item">
+              <div class="perm-modal-item-title">⚠ Compatibility warning</div>
+              <div class="perm-modal-item-desc">{msg}</div>
+            </li>
+          {/each}
+        </ul>
+      {/if}
     </div>
 
     <footer class="perm-modal-footer">
@@ -203,6 +216,16 @@
   .perm-modal-removed .perm-modal-item {
     opacity: 0.75;
   }
+  .perm-modal-warn-heading {
+    margin-top: 12px;
+  }
+  .perm-modal-warn-item {
+    border-color: color-mix(in srgb, var(--sh3-warning, #ff9800) 60%, var(--sh3-border, #444));
+    background: color-mix(in srgb, var(--sh3-warning, #ff9800) 8%, var(--sh3-input-bg, #2a2a2a));
+  }
+  .perm-modal-warn-item .perm-modal-item-title {
+    color: var(--sh3-warning, #ff9800);
+  }
   .perm-modal-footer {
     padding: 12px 20px;
     border-top: 1px solid var(--sh3-border, #444);

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

@@ -9,6 +9,7 @@ interface Props {
     permissions?: string[];
     added?: string[];
     removed?: string[];
+    warnings?: string[];
     onConfirm: () => void;
     onCancel: () => void;
 }

package/dist/app/store/StoreView.svelte

@@ -12,6 +12,7 @@
   import { loadBundleModule, type LoadedBundle } from '../../registry/loader';
   import { extractBundlePermissions } from '../../registry/permission-descriptions';
   import { serverInstallPackage } from '../../env/client';
+  import { checkBundleFetch } from '../../registry/checkFetch';
   import { contract } from '../../contract';
   import type { ResolvedPackage } from '../../registry/client';
   import type { InstalledPackage } from '../../registry/types';
@@ -38,6 +39,7 @@
     bundle: ArrayBuffer;
     meta: ReturnType<typeof buildPackageMeta>;
     serverBundle: ArrayBuffer | undefined;
+    warnings: string[];
   }>(null);
 
   let updateModal = $state<null | {
@@ -186,7 +188,9 @@
 
       // 4. Show the confirmation modal. The actual install happens in
       //    confirmInstall() once the user clicks Install.
-      installModal = { pkg, permissions, loaded, bundle, meta, serverBundle };
+      const bundleText = new TextDecoder().decode(new Uint8Array(bundle));
+      const warnings = checkBundleFetch(bundleText);
+      installModal = { pkg, permissions, loaded, bundle, meta, serverBundle, warnings };
     } catch (err) {
       installError = err instanceof Error ? err.message : String(err);
       const next = new Set(installingIds);
@@ -400,6 +404,7 @@
       author: installModal.pkg.entry.author.name,
     }}
     permissions={installModal.permissions}
+    warnings={installModal.warnings}
     onConfirm={confirmInstall}
     onCancel={cancelInstall}
   />

package/dist/chrome/CompactChrome.svelte

@@ -12,14 +12,23 @@
   import { sh3 } from '../sh3Runtime.svelte';
   import { layoutStore, getActiveRoot } from '../layout/store.svelte';
   import { derive } from '../layout/compact/derive';
+  import {
+    compactRootStore,
+    resolveCompactBodyRoot,
+  } from '../layout/compact/rootStore.svelte';
   import { getLiveDispatcherState } from '../actions/state.svelte';
   import { getRegisteredApp } from '../apps/registry.svelte';
   import { returnToHome } from '../apps/lifecycle';
   import Button from '../primitives/Button.svelte';
   import MenuSheet from './MenuSheet.svelte';
+  import FloatsSheet from './FloatsSheet.svelte';
   import type { DrawerAnchor } from '../layout/compact/types';
 
-  const rendering = $derived(derive(layoutStore.root));
+  // Drawer toggles re-derive against whatever is currently the body —
+  // when the user is on a float, its role-tagged slots drive the chrome,
+  // not the docked tree's.
+  const bodyRoot = $derived(resolveCompactBodyRoot());
+  const rendering = $derived(derive(bodyRoot));
   const dispatcher = $derived(getLiveDispatcherState());
   const onHome = $derived(getActiveRoot() === 'home');
   const appLabel = $derived.by(() => {
@@ -47,13 +56,28 @@
     return bestLabel;
   });
 
+  const floatTitle = $derived.by(() => {
+    const cur = compactRootStore.current;
+    if (cur.kind !== 'float') return null;
+    const f = layoutStore.tree.floats.find((x) => x.id === cur.floatId);
+    if (!f) return null;
+    if (f.title) return f.title;
+    if (f.content.type === 'tabs') {
+      const t = f.content.tabs[f.content.activeTab] ?? f.content.tabs[0];
+      return t?.label ?? null;
+    }
+    return null;
+  });
+
   const title = $derived.by(() => {
+    if (floatTitle) return floatTitle;
     const carouselLabel = topmostCarouselLabel;
     if (carouselLabel) return `${appLabel} › ${carouselLabel}`;
     return appLabel;
   });
 
   let menuOpen = $state(false);
+  let floatsOpen = $state(false);
 
   function toggleDrawer(anchor: DrawerAnchor) {
     sh3.drawers.toggle(anchor);
@@ -92,11 +116,20 @@
   <div class="title">{title}</div>
   <div class="trailing">
     <Button variant="icon" icon="command" ariaLabel="Open command palette" title="Open command palette" onclick={openPalette} />
+    <Button
+      variant="icon"
+      icon="layers"
+      ariaLabel="Floats"
+      title="Floats"
+      pressed={floatsOpen}
+      onclick={() => { floatsOpen = !floatsOpen; }}
+    />
     <Button variant="icon" icon="ellipsis-vertical" ariaLabel="Open menu" title="Open menu" onclick={() => { menuOpen = true; }} />
   </div>
 </header>
 
 <MenuSheet open={menuOpen} onClose={() => (menuOpen = false)} />
+<FloatsSheet open={floatsOpen} onClose={() => (floatsOpen = false)} />
 
 <style>
   .sh3-compact-chrome {

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

@@ -65,7 +65,7 @@ describe('CompactChrome (dom)', () => {
         expect(host.querySelector('.leading [data-sh3-anchor="right"] button')).not.toBeNull();
         expect(host.querySelector('.leading [data-sh3-anchor="top"] button')).toBeNull();
     });
-    it('renders palette + overflow buttons in the trailing section', () => {
+    it('renders palette + floats + overflow buttons in the trailing section', () => {
         attachApp(fakeApp());
         switchToApp();
         flushSync();
@@ -74,7 +74,9 @@ describe('CompactChrome (dom)', () => {
         mounted = mount(CompactChromeAny, { target: host });
         flushSync();
         const trailing = host.querySelectorAll('.trailing button');
-        expect(trailing.length).toBe(2);
+        expect(trailing.length).toBe(3);
+        const labels = Array.from(trailing).map((b) => b.getAttribute('aria-label'));
+        expect(labels).toEqual(['Open command palette', 'Floats', 'Open menu']);
     });
 });
 describe('CompactChrome — home button', () => {
@@ -125,9 +127,10 @@ describe('CompactChrome — breadcrumb', () => {
             initialLayout: {
                 type: 'tabs',
                 activeTab: 1,
+                role: 'body',
                 tabs: [
-                    { slotId: 's0', viewId: null, label: 'First', role: 'body' },
-                    { slotId: 's1', viewId: null, label: 'Second', role: 'body' },
+                    { slotId: 's0', viewId: null, label: 'First' },
+                    { slotId: 's1', viewId: null, label: 'Second' },
                 ],
             },
         };
@@ -152,12 +155,14 @@ describe('CompactChrome — breadcrumb', () => {
                     {
                         type: 'tabs',
                         activeTab: 0,
-                        tabs: [{ slotId: 'top0', viewId: null, label: 'TopActive', role: 'body' }],
+                        role: 'body',
+                        tabs: [{ slotId: 'top0', viewId: null, label: 'TopActive' }],
                     },
                     {
                         type: 'tabs',
                         activeTab: 0,
-                        tabs: [{ slotId: 'bot0', viewId: null, label: 'BottomActive', role: 'body' }],
+                        role: 'body',
+                        tabs: [{ slotId: 'bot0', viewId: null, label: 'BottomActive' }],
                     },
                 ],
             },

package/dist/chrome/FloatsSheet.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  /*
+   * FloatsSheet — bottom-anchored navigation sheet for compact mode.
+   *
+   * Lists the active-layout entry plus one row per non-dismissable float.
+   * Tapping a row calls compactRootStore.setRoot(...) and closes the sheet.
+   * Dismissable pickers (anchored popovers) are excluded — they aren't
+   * "places to go", they're transient overlays.
+   *
+   * The active-layout row label tracks the active app (or "Home" when no
+   * app is attached). The current row is marked with data-current="true"
+   * for styling.
+   */
+  import { layoutStore, getActiveRoot } from '../layout/store.svelte';
+  import { compactRootStore } from '../layout/compact/rootStore.svelte';
+  import { floatManager } from '../overlays/float';
+  import { getLiveDispatcherState } from '../actions/state.svelte';
+  import { getRegisteredApp } from '../apps/registry.svelte';
+  import type { FloatEntry } from '../layout/types';
+
+  let { open, onClose }: { open: boolean; onClose: () => void } = $props();
+
+  const dispatcher = $derived(getLiveDispatcherState());
+  const dockedLabel = $derived.by(() => {
+    if (getActiveRoot() === 'home') return 'Home';
+    const id = dispatcher.activeAppId;
+    if (!id) return 'Home';
+    return getRegisteredApp(id)?.manifest.label ?? id;
+  });
+
+  function floatLabel(f: FloatEntry): string {
+    if (f.title) return f.title;
+    if (f.content.type === 'tabs') {
+      const t = f.content.tabs[f.content.activeTab] ?? f.content.tabs[0];
+      if (t) return t.label;
+    }
+    return f.id;
+  }
+
+  const rows = $derived.by(() => {
+    const out: { id: 'docked' | string; label: string }[] = [
+      { id: 'docked', label: dockedLabel },
+    ];
+    for (const f of layoutStore.tree.floats) {
+      if (f.dismissable) continue;
+      out.push({ id: f.id, label: floatLabel(f) });
+    }
+    return out;
+  });
+
+  function isCurrent(rowId: 'docked' | string): boolean {
+    const cur = compactRootStore.current;
+    if (rowId === 'docked') return cur.kind === 'docked';
+    return cur.kind === 'float' && cur.floatId === rowId;
+  }
+
+  function activate(rowId: 'docked' | string): void {
+    if (rowId === 'docked') {
+      compactRootStore.reset();
+    } else {
+      compactRootStore.setRoot({ kind: 'float', floatId: rowId });
+    }
+    onClose();
+  }
+
+  // ----- swipe-to-close --------------------------------------------------
+  // Horizontal pointer drag on a float row past 40% of its width closes the
+  // float. The active-layout row is non-swipeable. Document-level pointer
+  // listeners survive the pointer leaving the row mid-drag, mirroring the
+  // float-frame drag pattern.
+  const SWIPE_THRESHOLD = 0.4;
+  let swipingId = $state<string | null>(null);
+  let swipeDx = $state(0);
+  let swipeStartX = 0;
+  let swipePointerId: number | null = null;
+  let swipeRowEl: HTMLElement | null = null;
+
+  function rowOffset(rowId: 'docked' | string): number {
+    return swipingId === rowId ? swipeDx : 0;
+  }
+
+  function rowTransition(rowId: 'docked' | string): string {
+    return swipingId === rowId ? 'none' : 'transform 160ms ease-out';
+  }
+
+  function onRowPointerDown(e: PointerEvent, rowId: 'docked' | string): void {
+    if (rowId === 'docked') return;
+    if (e.button !== 0) return;
+    if (swipingId !== null) return;
+    swipingId = rowId;
+    swipeStartX = e.clientX;
+    swipeDx = 0;
+    swipePointerId = e.pointerId;
+    // Prefer e.currentTarget; fall back to a DOM query so synthetic events
+    // (vitest dispatchEvent) that may not populate currentTarget still
+    // resolve the row width for the threshold check.
+    swipeRowEl =
+      (e.currentTarget as HTMLElement | null) ??
+      (document.querySelector(`[data-sh3-floats-row="${rowId}"]`) as HTMLElement | null);
+    document.addEventListener('pointermove', onSwipeMove);
+    document.addEventListener('pointerup', onSwipeUp);
+    document.addEventListener('pointercancel', onSwipeCancel);
+  }
+
+  function onSwipeMove(e: PointerEvent): void {
+    if (e.pointerId !== swipePointerId) return;
+    swipeDx = e.clientX - swipeStartX;
+  }
+
+  function endSwipe(): void {
+    document.removeEventListener('pointermove', onSwipeMove);
+    document.removeEventListener('pointerup', onSwipeUp);
+    document.removeEventListener('pointercancel', onSwipeCancel);
+    swipingId = null;
+    swipePointerId = null;
+    swipeStartX = 0;
+    swipeDx = 0;
+    swipeRowEl = null;
+  }
+
+  function onSwipeUp(e: PointerEvent): void {
+    if (e.pointerId !== swipePointerId) return;
+    const id = swipingId;
+    const width = swipeRowEl?.clientWidth ?? 0;
+    const dx = swipeDx;
+    endSwipe();
+    if (id && id !== 'docked' && width > 0 && Math.abs(dx) >= width * SWIPE_THRESHOLD) {
+      floatManager.close(id);
+    }
+  }
+
+  function onSwipeCancel(e: PointerEvent): void {
+    if (e.pointerId !== swipePointerId) return;
+    endSwipe();
+  }
+</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="scroll">
+      {#each rows as row (row.id)}
+        <button
+          class="row"
+          data-sh3-floats-row={row.id}
+          data-current={isCurrent(row.id) ? 'true' : 'false'}
+          onclick={() => activate(row.id)}
+          onpointerdown={(e) => onRowPointerDown(e, row.id)}
+          style:transform="translateX({rowOffset(row.id)}px)"
+          style:transition={rowTransition(row.id)}
+        >
+          <span class="label">{row.label}</span>
+          {#if row.id === 'docked'}
+            <span class="kind">layout</span>
+          {:else}
+            <span class="kind">float</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+    <button class="cancel" onclick={onClose}>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;
+    display: flex;
+    flex-direction: column;
+    background: var(--sh3-bg);
+    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;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--sh3-pad-sm) 0;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--sh3-pad-sm);
+    width: 100%;
+    padding: var(--sh3-pad-md);
+    border: none;
+    background: none;
+    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;
+  }
+  .row[data-current='true'] {
+    background: var(--sh3-bg-sunken);
+    font-weight: 600;
+  }
+  .row:active { background: var(--sh3-bg-sunken); }
+  .label { flex: 1; }
+  .kind {
+    color: var(--sh3-fg-muted);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .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;
+  }
+</style>

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

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

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

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