sh3-core 0.22.5 → 0.23.2

package/dist/layout/slotHostPool.test.js

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { tick } from 'svelte';
 import { resetFramework } from '../__test__/reset';
-import { acquireSlotHost, releaseSlotHost } from './slotHostPool.svelte';
+import { acquireSlotHost, releaseSlotHost, flushPendingDestroys } from './slotHostPool.svelte';
 import { registerView } from '../shards/registry';
 import SlotContainer from './SlotContainer.svelte';
 import { renderWithShell } from '../__test__/render';
@@ -102,6 +102,50 @@ describe('slotHostPool — D.5 root swap preserves app slots', () => {
         expect(teardown).not.toHaveBeenCalled();
     });
 });
+// ─── D.9 ─────────────────────────────────────────────────────────────────────
+describe('slotHostPool — D.9 flushPendingDestroys synchronously unmounts', () => {
+    beforeEach(resetFramework);
+    it('synchronously unmounts pooled hosts whose refcount has reached 0', async () => {
+        const teardown = vi.fn();
+        registerView('flush:view', { mount: () => ({ unmount: teardown }) });
+        // Acquire a slot host, then drop refcount to 0 — this enters pendingDestroy
+        // but does NOT unmount until the next microtask (existing behavior).
+        acquireSlotHost('flush-slot', 'flush:view', 'Flush View');
+        // The view-factory mount is itself deferred to a microtask; let it run
+        // so the pool entry has a real `handle` to unmount.
+        await Promise.resolve();
+        releaseSlotHost('flush-slot');
+        // The destroy microtask has NOT yet run, so teardown has not been called.
+        expect(teardown).not.toHaveBeenCalled();
+        // flushPendingDestroys runs the destroy body now, synchronously.
+        flushPendingDestroys();
+        expect(teardown).toHaveBeenCalledTimes(1);
+    });
+    it('does not unmount entries whose refcount is still > 0', async () => {
+        const teardown = vi.fn();
+        registerView('keep:view', { mount: () => ({ unmount: teardown }) });
+        acquireSlotHost('keep-slot', 'keep:view', 'Keep View');
+        await Promise.resolve();
+        // Refcount is 1, never released.
+        flushPendingDestroys();
+        expect(teardown).not.toHaveBeenCalled();
+        // Cleanup
+        releaseSlotHost('keep-slot');
+    });
+    it('clears pendingDestroy so the queued microtask is a no-op', async () => {
+        const teardown = vi.fn();
+        registerView('once:view', { mount: () => ({ unmount: teardown }) });
+        acquireSlotHost('once-slot', 'once:view', 'Once View');
+        await Promise.resolve();
+        releaseSlotHost('once-slot');
+        flushPendingDestroys();
+        expect(teardown).toHaveBeenCalledTimes(1);
+        // The previously-queued microtask should now find pendingDestroy empty
+        // for this slot and do nothing. teardown stays at 1.
+        await Promise.resolve();
+        expect(teardown).toHaveBeenCalledTimes(1);
+    });
+});
 // ─── D.6 ─────────────────────────────────────────────────────────────────────
 describe('slotHostPool — D.6 data-sh3-view attribute', () => {
     beforeEach(resetFramework);

package/dist/layouts-shard/layoutsShard.svelte.js

@@ -135,6 +135,7 @@ export const layoutsShard = {
         id: '__layouts__',
         label: 'Saved Layouts',
         version: VERSION,
+        kind: 'system',
         views: [],
     },
     register(ctx) {

package/dist/overlays/OverlayRoots.svelte

@@ -14,6 +14,7 @@
    * they portal in.
    */
 
+  import { untrack } from 'svelte';
   import DragPreview from '../layout/DragPreview.svelte';
   import FloatLayer from './FloatLayer.svelte';
   import { registerLayerRoot, unregisterLayerRoot } from './roots';
@@ -47,12 +48,22 @@
     };
   });
 
+  // Re-bind only when the active LayoutTree itself changes (app/preset
+  // switch). bindFloatStore iterates `floats` to clamp persisted entries,
+  // which would otherwise subscribe this effect to every push/splice from
+  // floatManager — and bindFloatStore unconditionally calls
+  // compactRootStore.reset() at the end, so a re-fire on push wipes the
+  // auto-focus that openFloat() set milliseconds earlier (compact-body
+  // would stay on docked after the first ²-press; see float-compact-bind
+  // regression test).
   $effect(() => {
     const tree = layoutStore.tree;
-    bindFloatStore(tree.floats, () => ({
-      w: window.innerWidth,
-      h: window.innerHeight,
-    }));
+    untrack(() => {
+      bindFloatStore(tree.floats, () => ({
+        w: window.innerWidth,
+        h: window.innerHeight,
+      }));
+    });
     return () => unbindFloatStore();
   });
 </script>

package/dist/overlays/__test__/OverlayBindHarness.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  /*
+   * Test harness — mirrors the $effect block in OverlayRoots.svelte that
+   * binds the float manager to the active LayoutTree's floats array.
+   * Keeps the `untrack` shape so the harness validates the production
+   * fix: the bind should NOT re-fire on float push/splice (which would
+   * trip compactRootStore.reset() and wipe auto-focus from openFloat).
+   */
+  import { untrack } from 'svelte';
+  import { layoutStore } from '../../layout/store.svelte';
+  import { bindFloatStore, unbindFloatStore } from '../float';
+
+  $effect(() => {
+    const tree = layoutStore.tree;
+    untrack(() => {
+      bindFloatStore(tree.floats, () => ({ w: 360, h: 740 }));
+    });
+    return () => unbindFloatStore();
+  });
+</script>

package/dist/overlays/__test__/OverlayBindHarness.svelte.d.ts

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

package/dist/overlays/float-compact-bind.svelte.test.d.ts

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

package/dist/overlays/float-compact-bind.svelte.test.js

@@ -0,0 +1,51 @@
+/*
+ * Regression: in compact mode, floatManager.open() must auto-switch the
+ * compact body to the new float. The setRoot call inside openFloat is
+ * correct, but a reactive $effect that re-binds the float store on every
+ * iteration of `tree.floats` re-runs the moment the array is mutated,
+ * and bindFloatStore unconditionally calls compactRootStore.reset() —
+ * wiping the auto-focus that openFloat just set.
+ *
+ * This test mounts a tiny wrapper that mirrors the OverlayRoots $effect
+ * (read layoutStore.tree, call bindFloatStore on every run) and asserts
+ * compactRootStore is still pointing at the new float after open().
+ */
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, unmount, flushSync } from 'svelte';
+import { floatManager, unbindFloatStore, __resetFloatManagerForTest, } from './float';
+import { compactRootStore, __resetCompactRootStoreForTest, } from '../layout/compact/rootStore.svelte';
+import { __resetLayoutStoreForTest } from '../layout/store.svelte';
+import { viewportStore } from '../viewport/store.svelte';
+import OverlayBindHarness from './__test__/OverlayBindHarness.svelte';
+describe('floatManager.open in compact — preserves setRoot under reactive bind', () => {
+    let mounted = null;
+    let host = null;
+    beforeEach(() => {
+        __resetFloatManagerForTest();
+        __resetCompactRootStoreForTest();
+        __resetLayoutStoreForTest();
+        viewportStore.override('compact');
+    });
+    afterEach(() => {
+        if (mounted) {
+            unmount(mounted);
+            mounted = null;
+        }
+        if (host) {
+            host.remove();
+            host = null;
+        }
+        viewportStore.override(null);
+        unbindFloatStore();
+    });
+    it('opens a float and the compact body root points to it after the bind effect settles', () => {
+        host = document.createElement('div');
+        document.body.appendChild(host);
+        mounted = mount(OverlayBindHarness, { target: host });
+        flushSync();
+        const id = floatManager.open('test:view', { title: 'Notes' });
+        // Allow any reactive re-bind to run.
+        flushSync();
+        expect(compactRootStore.current).toEqual({ kind: 'float', floatId: id });
+    });
+});

package/dist/overlays/modal.js

@@ -96,6 +96,7 @@ function removeEscapeListenerIfIdle() {
     document.removeEventListener('keydown', onDocumentKeydown, true);
 }
 function removeEntry(entry) {
+    var _a;
     const idx = stack.indexOf(entry);
     if (idx < 0)
         return; // already closed — idempotent
@@ -104,6 +105,7 @@ function removeEntry(entry) {
     entry.host.remove();
     syncBackdrop();
     removeEscapeListenerIfIdle();
+    (_a = entry.onClose) === null || _a === void 0 ? void 0 : _a.call(entry);
 }
 function openModal(Content, props, options) {
     const root = getLayerRoot('modal');
@@ -138,6 +140,7 @@ function openModal(Content, props, options) {
     entry.host = host;
     entry.frame = frame;
     entry.handle = handle;
+    entry.onClose = options === null || options === void 0 ? void 0 : options.onClose;
     stack.push(entry);
     syncBackdrop();
     ensureEscapeListener();

package/dist/overlays/modal.test.js

@@ -88,6 +88,51 @@ describe('modal — back-cascade integration', () => {
         expect(layerRoot.querySelectorAll('.sh3-modal-host').length).toBe(0);
     });
 });
+describe('modal — onClose callback', () => {
+    let layerRoot;
+    beforeEach(() => {
+        layerRoot = makeLayerRoot();
+    });
+    afterEach(() => {
+        modalManager.closeAll();
+        teardownLayerRoot(layerRoot);
+    });
+    it('fires onClose when handle.close() is called', async () => {
+        let calls = 0;
+        const handle = modalManager.open(DummyFrame, {}, { onClose: () => calls++ });
+        await tick();
+        handle.close();
+        await tick();
+        expect(calls).toBe(1);
+    });
+    it('fires onClose on backdrop dismissal', async () => {
+        let calls = 0;
+        modalManager.open(DummyFrame, {}, { dismissOnBackdrop: true, onClose: () => calls++ });
+        await tick();
+        const frame = layerRoot.querySelector('.modal-frame');
+        frame.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await tick();
+        expect(calls).toBe(1);
+    });
+    it('fires onClose on closeAll', async () => {
+        let calls = 0;
+        modalManager.open(DummyFrame, {}, { onClose: () => calls++ });
+        modalManager.open(DummyFrame, {}, { onClose: () => calls++ });
+        await tick();
+        modalManager.closeAll();
+        await tick();
+        expect(calls).toBe(2);
+    });
+    it('does not fire onClose twice when close() is called repeatedly (idempotent)', async () => {
+        let calls = 0;
+        const handle = modalManager.open(DummyFrame, {}, { onClose: () => calls++ });
+        await tick();
+        handle.close();
+        handle.close();
+        await tick();
+        expect(calls).toBe(1);
+    });
+});
 describe('modal — overlay host marker', () => {
     let layerRoot;
     beforeEach(() => {

package/dist/overlays/types.d.ts

@@ -53,4 +53,13 @@ export interface ModalOptions {
      * palette on touch-only devices).
      */
     initialFocus?: boolean;
+    /**
+     * Invoked after the modal has been torn down — from any dismissal
+     * path (handle.close(), Escape, backdrop click, closeAll). Use this
+     * to reset caller-side "is open" state instead of wrapping
+     * handle.close after open() returns: by then the manager has already
+     * passed handle.close by reference to ModalFrame and onBackdropClick,
+     * so post-hoc wraps would be bypassed by every real dismissal.
+     */
+    onClose?: () => void;
 }

package/dist/primitives/widgets/ShardPicker.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { CommitOnlyEvents } from './_contract';
+  import PickerList from './PickerList.svelte';
+  import type { PickerItem } from './PickerList';
+  import { listRegisteredShards } from '../../shards/lifecycle.svelte';
+
+  let {
+    value = $bindable<string[]>([]),
+    onchange,
+    disabled = false,
+    size = 'md',
+  }: {
+    value?: string[];
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+  } & CommitOnlyEvents<string[]> = $props();
+
+  const items = $derived<PickerItem[]>(
+    listRegisteredShards()
+      .filter((m) => m.kind === 'service')
+      .map((m) => ({ id: m.id, label: m.label, sublabel: m.id }))
+      .sort((a, b) => a.label.localeCompare(b.label)),
+  );
+
+  function handleChange(next: string[]) {
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<PickerList
+  {items}
+  {value}
+  onchange={handleChange}
+  {disabled}
+  {size}
+  emptyText="No service shards installed."
+/>

package/dist/primitives/widgets/ShardPicker.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CommitOnlyEvents } from './_contract';
+type $$ComponentProps = {
+    value?: string[];
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+} & CommitOnlyEvents<string[]>;
+declare const ShardPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ShardPicker = ReturnType<typeof ShardPicker>;
+export default ShardPicker;

package/dist/primitives/widgets/_DocumentBrowser.svelte

@@ -26,6 +26,8 @@
     listFolders,
     handle,
     readOnlyShard,
+    initialShardId = null,
+    lockToShard = false,
   }: {
     mode: 'open' | 'save';
     docs: DocEntry[];
@@ -43,6 +45,8 @@
       delete: (shardId: string, path: string) => Promise<void>;
     };
     readOnlyShard?: (shardId: string) => boolean;
+    initialShardId?: string | null;
+    lockToShard?: boolean;
   } = $props();
 
   type Selected =
@@ -50,7 +54,7 @@
     | { kind: 'folder'; fullPath: string; name: string }
     | null;
 
-  let shardId = $state<string | null>(null);
+  let shardId = $state<string | null>(untrack(() => initialShardId));
   let prefix = $state('');
   let selected = $state<Selected>(null);
   let filename = $state(untrack(() => suggestedName));
@@ -76,7 +80,11 @@
   });
 
   const items = $derived(buildTree(docs, folders, shardId, prefix));
-  const crumbs = $derived(breadcrumbSegments(shardId, prefix));
+  const crumbs = $derived(
+    lockToShard
+      ? breadcrumbSegments(shardId, prefix).filter((c) => c.level > 0)
+      : breadcrumbSegments(shardId, prefix),
+  );
 
   $effect(() => {
     items;
@@ -352,7 +360,7 @@
           parts.pop();
           prefix = parts.join('/');
           activeIdx = 0;
-        } else if (shardId) {
+        } else if (shardId && !lockToShard) {
           e.preventDefault();
           shardId = null;
           activeIdx = 0;

package/dist/primitives/widgets/_DocumentBrowser.svelte.d.ts

@@ -18,6 +18,8 @@ type $$ComponentProps = {
         delete: (shardId: string, path: string) => Promise<void>;
     };
     readOnlyShard?: (shardId: string) => boolean;
+    initialShardId?: string | null;
+    lockToShard?: boolean;
 };
 declare const DocumentBrowser: import("svelte").Component<$$ComponentProps, {}, "">;
 type DocumentBrowser = ReturnType<typeof DocumentBrowser>;

package/dist/projects/scope-gate.d.ts

@@ -0,0 +1,4 @@
+import type { App } from '../apps/types';
+import type { ProjectRecord } from '../projects-shard/projectsApi';
+import type { ShardManifest } from '../shards/types';
+export declare function resolveAllowedShardIds(project: ProjectRecord | null, apps: ReadonlyMap<string, App>, shardManifests: readonly ShardManifest[]): Set<string> | null;

package/dist/projects/scope-gate.js

@@ -0,0 +1,51 @@
+/*
+ * Project-scope register() gate — pure resolution of the shard ids that
+ * may register at boot under a given project's allowlist. Mirrors the
+ * server-side `project-allowlist` middleware so client and server agree
+ * on the closure.
+ *
+ * Returns `null` (no gating) only when the project is null (personal scope)
+ * OR when both `appAllowlist` and `shardAllowlist` are empty. Otherwise the
+ * allowed set is the union of:
+ *   - system-kind shards (always allowed)
+ *   - the resolved `requiredShards`/`bundledShards` of each allowlisted app
+ *   - service-kind shards listed in `project.shardAllowlist`
+ *
+ * The set of system-kind shards is derived at call time from the
+ * registered-shards map; mark framework shards with `kind: 'system'` in
+ * their manifest to keep them reachable inside any project.
+ */
+export function resolveAllowedShardIds(project, apps, shardManifests) {
+    var _a;
+    if (!project)
+        return null;
+    if (project.appAllowlist.length === 0 && project.shardAllowlist.length === 0)
+        return null;
+    const allowed = new Set();
+    const systemShardIds = new Set();
+    const serviceShardIds = new Set();
+    for (const m of shardManifests) {
+        if (m.kind === 'system') {
+            allowed.add(m.id);
+            systemShardIds.add(m.id);
+        }
+        else if (m.kind === 'service') {
+            serviceShardIds.add(m.id);
+        }
+    }
+    for (const appId of project.appAllowlist) {
+        const app = apps.get(appId);
+        if (!app)
+            continue;
+        allowed.add(appId);
+        for (const s of app.manifest.requiredShards)
+            allowed.add(s);
+        for (const s of (_a = app.manifest.bundledShards) !== null && _a !== void 0 ? _a : [])
+            allowed.add(s);
+    }
+    for (const shardId of project.shardAllowlist) {
+        if (serviceShardIds.has(shardId))
+            allowed.add(shardId);
+    }
+    return allowed;
+}

package/dist/projects/scope-gate.test.d.ts

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

package/dist/projects/scope-gate.test.js

@@ -0,0 +1,92 @@
+import { describe, it, expect } from 'vitest';
+import { resolveAllowedShardIds } from './scope-gate';
+function makeApp(id, requiredShards = [], bundledShards) {
+    const manifest = Object.assign({ id, label: id, version: '0.0.0', requiredShards, layoutVersion: 1 }, (bundledShards ? { bundledShards } : {}));
+    return { manifest, initialLayout: { kind: 'leaf', viewId: 'x' } };
+}
+function makeProject(appAllowlist, shardAllowlist = []) {
+    return {
+        id: 'acme-1234',
+        name: 'Acme',
+        members: ['u1'],
+        appAllowlist,
+        shardAllowlist,
+        createdBy: 'u1',
+        createdAt: 0,
+        updatedAt: 0,
+    };
+}
+const SYSTEM_SHARDS = [
+    { id: 'shell', label: 'Shell', version: '0', kind: 'system', views: [] },
+    { id: '__sh3core__', label: 'SH3 Core', version: '0', kind: 'system', views: [] },
+];
+describe('resolveAllowedShardIds', () => {
+    it('returns null (no gating) when project is null', () => {
+        expect(resolveAllowedShardIds(null, new Map(), SYSTEM_SHARDS)).toBeNull();
+    });
+    it('returns null (no gating) when both allowlists are empty', () => {
+        const project = makeProject([], []);
+        expect(resolveAllowedShardIds(project, new Map(), SYSTEM_SHARDS)).toBeNull();
+    });
+    it('returns system-kind shards only when allowlist contains no resolvable apps', () => {
+        const project = makeProject(['ghost-app']);
+        const apps = new Map();
+        const allowed = resolveAllowedShardIds(project, apps, SYSTEM_SHARDS);
+        expect(allowed.has('shell')).toBe(true);
+        expect(allowed.has('__sh3core__')).toBe(true);
+        expect(allowed.has('ghost-app')).toBe(false);
+    });
+    it('includes app id + requiredShards for each resolved app, plus system shards', () => {
+        const project = makeProject(['notes']);
+        const apps = new Map([
+            ['notes', makeApp('notes', ['notes-shard', 'editor'])],
+        ]);
+        const allowed = resolveAllowedShardIds(project, apps, SYSTEM_SHARDS);
+        expect(allowed.has('shell')).toBe(true);
+        expect(allowed.has('__sh3core__')).toBe(true);
+        expect(allowed.has('notes')).toBe(true);
+        expect(allowed.has('notes-shard')).toBe(true);
+        expect(allowed.has('editor')).toBe(true);
+    });
+    it('includes bundledShards when the app declares them', () => {
+        const project = makeProject(['guml-ide']);
+        const apps = new Map([
+            ['guml-ide', makeApp('guml-ide', ['guml.core'], ['guml.preview'])],
+        ]);
+        const allowed = resolveAllowedShardIds(project, apps, SYSTEM_SHARDS);
+        expect(allowed.has('guml.core')).toBe(true);
+        expect(allowed.has('guml.preview')).toBe(true);
+    });
+    it('unions across multiple allowlisted apps', () => {
+        const project = makeProject(['notes', 'files']);
+        const apps = new Map([
+            ['notes', makeApp('notes', ['notes-shard'])],
+            ['files', makeApp('files', ['files-shard'])],
+        ]);
+        const allowed = resolveAllowedShardIds(project, apps, SYSTEM_SHARDS);
+        expect(allowed.has('notes-shard')).toBe(true);
+        expect(allowed.has('files-shard')).toBe(true);
+    });
+    it('includes service-kind shards listed in shardAllowlist', () => {
+        const project = makeProject([], ['svc-a']);
+        const manifests = [
+            ...SYSTEM_SHARDS,
+            { id: 'svc-a', label: 'Svc A', version: '0', kind: 'service', views: [] },
+            { id: 'svc-b', label: 'Svc B', version: '0', kind: 'service', views: [] },
+        ];
+        const allowed = resolveAllowedShardIds(project, new Map(), manifests);
+        expect(allowed.has('svc-a')).toBe(true);
+        expect(allowed.has('svc-b')).toBe(false);
+        expect(allowed.has('shell')).toBe(true);
+    });
+    it('ignores shardAllowlist entries that are not service-kind', () => {
+        const project = makeProject([], ['not-a-service']);
+        const manifests = [
+            ...SYSTEM_SHARDS,
+            { id: 'not-a-service', label: 'X', version: '0', views: [] },
+        ];
+        const allowed = resolveAllowedShardIds(project, new Map(), manifests);
+        expect(allowed.has('not-a-service')).toBe(false);
+        expect(allowed.has('shell')).toBe(true);
+    });
+});

package/dist/projects-shard/ProjectManage.svelte

@@ -13,7 +13,9 @@
   import { refreshProjects } from './projectsShard.svelte';
   import { getUser } from '../auth/auth.svelte';
   import AppPicker from '../primitives/widgets/AppPicker.svelte';
+  import ShardPicker from '../primitives/widgets/ShardPicker.svelte';
   import UserPicker from '../primitives/widgets/UserPicker.svelte';
+  import { listRegisteredShards } from '../shards/lifecycle.svelte';
   import TabbedPanel from '../primitives/TabbedPanel.svelte';
   import { modalManager } from '../overlays/modal';
   import DeleteProjectDialog from './DeleteProjectDialog.svelte';
@@ -50,6 +52,9 @@
   let appAllowlist = $state<string[]>(
     untrack(() => (project ? [...project.appAllowlist] : [])),
   );
+  let shardAllowlist = $state<string[]>(
+    untrack(() => (project ? [...(project.shardAllowlist ?? [])] : [])),
+  );
   let saving = $state(false);
   let error = $state<string | null>(null);
   let activeTab = $state(0);
@@ -58,6 +63,9 @@
   let mountsLoading = $state(true);
   let mountsLoadError = $state<string | null>(null);
   let baselineApps = $state<string[]>(untrack(() => (project ? [...project.appAllowlist] : [])));
+  let baselineShards = $state<string[]>(
+    untrack(() => (project ? [...(project.shardAllowlist ?? [])] : [])),
+  );
   let baselineMembers = $state<string[]>(
     untrack(() => {
       if (project) return [...project.members];
@@ -80,9 +88,16 @@
   }
 
   const appsDirty = $derived(!arrayEq(appAllowlist, baselineApps));
+  const shardsDirty = $derived(!arrayEq(shardAllowlist, baselineShards));
   const membersDirty = $derived(!arrayEq(members, baselineMembers));
   const mountsDirty = $derived(!setEq(mountAttached, baselineMounts));
 
+  const systemShards = $derived(
+    listRegisteredShards()
+      .filter((m) => m.kind === 'system')
+      .sort((a, b) => a.label.localeCompare(b.label)),
+  );
+
   async function save() {
     if (!name.trim()) {
       error = 'Name is required';
@@ -95,6 +110,7 @@
       description: description.trim() || undefined,
       members,
       appAllowlist,
+      shardAllowlist,
     };
     try {
       const saved = isEdit && project
@@ -234,10 +250,10 @@
 
   <div class="tabs">
     <TabbedPanel
-      labels={['Apps', 'Users', 'Mounts']}
+      labels={['Apps', 'Shards', 'Users', 'Mounts']}
       {activeTab}
       onActiveChange={(i) => (activeTab = i)}
-      dirty={[appsDirty, membersDirty, mountsDirty]}
+      dirty={[appsDirty, shardsDirty, membersDirty, mountsDirty]}
       body={tabBody}
     />
   </div>
@@ -265,6 +281,19 @@
         <AppPicker bind:value={appAllowlist} disabled={saving} />
       </label>
     {:else if i === 1}
+      <label class="field">
+        <span>Services</span>
+        <ShardPicker bind:value={shardAllowlist} disabled={saving} />
+      </label>
+      <details class="system-block">
+        <summary>System (always allowed)</summary>
+        <ul class="system-list">
+          {#each systemShards as m (m.id)}
+            <li><span class="system-label">{m.label}</span><span class="system-id">{m.id}</span></li>
+          {/each}
+        </ul>
+      </details>
+    {:else if i === 2}
       <label class="field">
         <span>Members</span>
         <UserPicker bind:value={members} disabled={saving} />
@@ -385,4 +414,15 @@
   }
   .actions button.danger { margin-left: auto; color: var(--sh3-error, #c33); }
   .actions button:disabled { opacity: 0.5; cursor: not-allowed; }
+  .system-block { margin-top: 16px; font-size: 13px; }
+  .system-block summary {
+    cursor: pointer;
+    color: var(--sh3-fg-muted);
+    padding: 4px 0;
+    user-select: none;
+  }
+  .system-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+  .system-list li { display: flex; justify-content: space-between; gap: 8px; color: var(--sh3-fg-muted); padding: 4px 0; }
+  .system-id { font-size: 11px; font-family: var(--sh3-font-mono, monospace); }
+  .system-label { font-weight: 500; }
 </style>