sh3-core 0.13.1 → 0.13.2

package/dist/primitives/widgets/UserPicker.test.js

@@ -0,0 +1,115 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { mount, unmount, tick } from 'svelte';
+import UserPicker from './UserPicker.svelte';
+import { usersAdminState, __resetAdminUsersForTest, } from '../../auth/admin-users.svelte';
+let host;
+let cmp = null;
+beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    __resetAdminUsersForTest();
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => [
+            { id: 'u-1', username: 'alice', displayName: 'Alice', role: 'user', createdAt: '', updatedAt: '' },
+            { id: 'u-2', username: 'bob', displayName: 'Bob', role: 'admin', createdAt: '', updatedAt: '' },
+        ],
+    }));
+});
+afterEach(() => {
+    if (cmp) {
+        unmount(cmp);
+        cmp = null;
+    }
+    host.remove();
+    __resetAdminUsersForTest();
+});
+describe('UserPicker', () => {
+    it('triggers a fetch on first mount and renders rows once loaded', async () => {
+        cmp = mount(UserPicker, { target: host, props: { value: [] } });
+        expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+        await new Promise((r) => setTimeout(r, 0));
+        await tick();
+        const rows = host.querySelectorAll('.sh3-picker__row');
+        expect(rows.length).toBe(2);
+    });
+    it('reflects selected user ids as checked rows', async () => {
+        // Pre-populate the cache so the mount can render synchronously.
+        usersAdminState.users = [
+            { id: 'u-1', username: 'alice', displayName: 'Alice', role: 'user', createdAt: '', updatedAt: '' },
+            { id: 'u-2', username: 'bob', displayName: 'Bob', role: 'admin', createdAt: '', updatedAt: '' },
+        ];
+        cmp = mount(UserPicker, { target: host, props: { value: ['u-2'] } });
+        await tick();
+        const checks = host.querySelectorAll('input[type="checkbox"]');
+        const aliceChecked = Array.from(checks).find((c) => { var _a, _b; return (_b = (_a = c.closest('.sh3-picker__row')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.includes('alice'); }).checked;
+        const bobChecked = Array.from(checks).find((c) => { var _a, _b; return (_b = (_a = c.closest('.sh3-picker__row')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.includes('bob'); }).checked;
+        expect(aliceChecked).toBe(false);
+        expect(bobChecked).toBe(true);
+    });
+    it('subsequent mounts reuse the cached state and skip the fetch', async () => {
+        cmp = mount(UserPicker, { target: host, props: { value: [] } });
+        await new Promise((r) => setTimeout(r, 0));
+        await tick();
+        expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+        const host2 = document.createElement('div');
+        document.body.appendChild(host2);
+        const cmp2 = mount(UserPicker, { target: host2, props: { value: [] } });
+        await tick();
+        expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+        unmount(cmp2);
+        host2.remove();
+    });
+    it('uses displayName for label and username for sublabel', async () => {
+        usersAdminState.users = [
+            { id: 'u-1', username: 'alice', displayName: 'Alice', role: 'user', createdAt: '', updatedAt: '' },
+            { id: 'u-2', username: 'bob', displayName: 'Bob', role: 'admin', createdAt: '', updatedAt: '' },
+        ];
+        cmp = mount(UserPicker, { target: host, props: { value: [] } });
+        await tick();
+        const labels = host.querySelectorAll('.sh3-picker__row-label');
+        const subs = host.querySelectorAll('.sh3-picker__row-sub');
+        const labelTexts = Array.from(labels).map((l) => l.textContent).sort();
+        const subTexts = Array.from(subs).map((l) => l.textContent).sort();
+        expect(labelTexts).toEqual(['Alice', 'Bob']);
+        expect(subTexts).toEqual(['alice', 'bob']);
+    });
+    it('fires onchange with the new value array on row click', async () => {
+        usersAdminState.users = [
+            { id: 'u-1', username: 'alice', displayName: 'Alice', role: 'user', createdAt: '', updatedAt: '' },
+            { id: 'u-2', username: 'bob', displayName: 'Bob', role: 'admin', createdAt: '', updatedAt: '' },
+        ];
+        let received = null;
+        cmp = mount(UserPicker, {
+            target: host,
+            props: {
+                value: [],
+                onchange: (next) => { received = next; },
+            },
+        });
+        await tick();
+        const aliceRow = Array.from(host.querySelectorAll('.sh3-picker__row'))
+            .find((r) => { var _a; return (_a = r.textContent) === null || _a === void 0 ? void 0 : _a.includes('alice'); });
+        aliceRow.querySelector('input[type="checkbox"]').click();
+        await tick();
+        expect(received).toEqual(['u-1']);
+    });
+    it('shows the loading state before the first response', async () => {
+        let resolveFetch = null;
+        globalThis.fetch.mockReset();
+        globalThis.fetch.mockImplementationOnce(() => new Promise((res) => { resolveFetch = res; }));
+        cmp = mount(UserPicker, { target: host, props: { value: [] } });
+        await tick();
+        expect(host.textContent).toContain('Loading');
+        resolveFetch({ ok: true, json: async () => [] });
+    });
+    it('shows an error and a Retry button on fetch failure', async () => {
+        globalThis.fetch.mockReset();
+        globalThis.fetch.mockResolvedValueOnce({ ok: false, status: 500 });
+        cmp = mount(UserPicker, { target: host, props: { value: [] } });
+        await new Promise((r) => setTimeout(r, 0));
+        await tick();
+        expect(host.textContent).toMatch(/500/);
+        expect(host.querySelector('.sh3-picker__retry')).not.toBeNull();
+    });
+});

package/dist/primitives/widgets/_contract.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Widget event-contract types — codifies which widgets expose `oninput`
+ * (live, during-interaction) vs `onchange`-only (commit-only).
+ *
+ * Each widget under `widgets/` MUST compose one of these into its prop
+ * type. Adding a third bucket requires a new ADR-022 amendment.
+ *
+ * Internal — not exported from `api.ts`.
+ */
+/**
+ * Widgets with a continuous interaction phase (typing, dragging).
+ * - oninput fires on every internal value change (keystroke, drag tick).
+ * - onchange fires once at commit (blur for text inputs, mouseup / native
+ *   change for sliders).
+ * Mirrors HTML <input>'s input vs change distinction.
+ */
+export type LiveInputEvents<T> = {
+    oninput?: (next: T) => void;
+    onchange?: (next: T) => void;
+};
+/**
+ * Widgets whose interaction is a single discrete commit (click, pick).
+ * - onchange fires once when the value changes. No oninput.
+ */
+export type CommitOnlyEvents<T> = {
+    onchange?: (next: T) => void;
+};

package/dist/primitives/widgets/_contract.js

@@ -0,0 +1,10 @@
+/**
+ * Widget event-contract types — codifies which widgets expose `oninput`
+ * (live, during-interaction) vs `onchange`-only (commit-only).
+ *
+ * Each widget under `widgets/` MUST compose one of these into its prop
+ * type. Adding a third bucket requires a new ADR-022 amendment.
+ *
+ * Internal — not exported from `api.ts`.
+ */
+export {};

package/dist/projects/session-state.svelte.d.ts

@@ -0,0 +1,17 @@
+export declare const sessionState: {
+    activeProjectId: string | null;
+};
+/**
+ * Set the active project id. Side-effects when the value actually changes:
+ *   - the active app (if any) is unloaded — its document handles and zone
+ *     state are bound to the previous scope and cannot follow.
+ *   - the breadcrumb pointer is cleared so re-entering an app cannot point
+ *     at the wrong namespace.
+ *
+ * Setting the same value is a no-op (no app unload, no breadcrumb clear).
+ *
+ * The unloadApp call is deferred to a dynamic import so this module stays
+ * importable from circular-dependency hot-paths (lifecycle imports
+ * sessionState; sessionState here would otherwise import lifecycle eagerly).
+ */
+export declare function setActiveProjectId(id: string | null): void;

package/dist/projects/session-state.svelte.js

@@ -0,0 +1,39 @@
+/*
+ * Session-zone state for the active project scope.
+ *
+ * `null` means the user is in their personal scope. Otherwise it carries
+ * the active project's id. Read at app launch by `launchApp` to bind
+ * `ctx.scopeId`, and read by ShellHome / BrandSlot for UX rendering.
+ *
+ * Setting the slot through `setActiveProjectId` is the only supported
+ * mutation path: it clears the breadcrumb pointer (so resuming an app
+ * after a scope change can't open a stale doc handle) and unloads any
+ * active app (whose scopeId is bound to the old scope).
+ */
+import { activeApp, breadcrumbApp } from '../apps/registry.svelte';
+export const sessionState = $state({
+    activeProjectId: null,
+});
+/**
+ * Set the active project id. Side-effects when the value actually changes:
+ *   - the active app (if any) is unloaded — its document handles and zone
+ *     state are bound to the previous scope and cannot follow.
+ *   - the breadcrumb pointer is cleared so re-entering an app cannot point
+ *     at the wrong namespace.
+ *
+ * Setting the same value is a no-op (no app unload, no breadcrumb clear).
+ *
+ * The unloadApp call is deferred to a dynamic import so this module stays
+ * importable from circular-dependency hot-paths (lifecycle imports
+ * sessionState; sessionState here would otherwise import lifecycle eagerly).
+ */
+export function setActiveProjectId(id) {
+    if (sessionState.activeProjectId === id)
+        return;
+    const previousActive = activeApp.id;
+    sessionState.activeProjectId = id;
+    breadcrumbApp.id = null;
+    if (previousActive) {
+        void import('../apps/lifecycle').then((m) => m.unloadApp(previousActive));
+    }
+}

package/dist/projects/session-state.test.d.ts

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

package/dist/projects/session-state.test.js

@@ -0,0 +1,55 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { sessionState, setActiveProjectId } from './session-state.svelte';
+import { breadcrumbApp, activeApp } from '../apps/registry.svelte';
+vi.mock('../apps/lifecycle', () => ({
+    unloadApp: vi.fn(),
+}));
+describe('sessionState.activeProjectId', () => {
+    beforeEach(async () => {
+        sessionState.activeProjectId = null;
+        breadcrumbApp.id = null;
+        activeApp.id = null;
+        const lifecycle = await import('../apps/lifecycle');
+        lifecycle.unloadApp.mockClear();
+    });
+    it('starts as null', () => {
+        expect(sessionState.activeProjectId).toBeNull();
+    });
+    it('setActiveProjectId updates the slot', () => {
+        setActiveProjectId('acme-abcd');
+        expect(sessionState.activeProjectId).toBe('acme-abcd');
+    });
+    it('setActiveProjectId clears breadcrumbApp.id when the value actually changes', () => {
+        breadcrumbApp.id = 'notes';
+        setActiveProjectId('acme-abcd');
+        expect(breadcrumbApp.id).toBeNull();
+    });
+    it('setActiveProjectId(null) also clears breadcrumb', () => {
+        sessionState.activeProjectId = 'acme-abcd';
+        breadcrumbApp.id = 'notes';
+        setActiveProjectId(null);
+        expect(breadcrumbApp.id).toBeNull();
+        expect(sessionState.activeProjectId).toBeNull();
+    });
+    it('setting the same value is a no-op (does not clear breadcrumb)', () => {
+        setActiveProjectId('acme-abcd');
+        breadcrumbApp.id = 'notes';
+        setActiveProjectId('acme-abcd');
+        expect(breadcrumbApp.id).toBe('notes');
+    });
+    it('unloads the active app on scope change (its doc handle is scope-bound)', async () => {
+        const lifecycle = await import('../apps/lifecycle');
+        activeApp.id = 'notes';
+        setActiveProjectId('acme-abcd');
+        // unloadApp is called via a dynamic import — wait for it to resolve.
+        await new Promise((r) => setTimeout(r, 0));
+        expect(lifecycle.unloadApp).toHaveBeenCalledWith('notes');
+    });
+    it('does not call unloadApp when no app is active', async () => {
+        const lifecycle = await import('../apps/lifecycle');
+        activeApp.id = null;
+        setActiveProjectId('acme-abcd');
+        await Promise.resolve();
+        expect(lifecycle.unloadApp).not.toHaveBeenCalled();
+    });
+});

package/dist/projects-shard/DeleteProjectDialog.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  /*
+   * Confirmation modal for project deletion. Mirrors ConfirmDialog's
+   * shape (title + body + Cancel/Confirm) and adds a single checkbox
+   * that opts in to also wiping the on-disk docs directory.
+   *
+   * Mounted via modalManager.open(); `close` is injected by the modal
+   * manager. Cancel is the default-focused button so a stray Enter
+   * does not trigger the destructive path.
+   */
+
+  let {
+    projectName,
+    projectId,
+    onConfirm,
+    onCancel,
+    close,
+  }: {
+    projectName: string;
+    projectId: string;
+    onConfirm: (opts: { wipeData: boolean }) => void | Promise<void>;
+    onCancel?: () => void;
+    close: () => void;
+  } = $props();
+
+  let cancelBtn: HTMLButtonElement | undefined = $state();
+  let busy = $state(false);
+  let wipeData = $state(false);
+
+  $effect(() => {
+    cancelBtn?.focus();
+  });
+
+  async function handleConfirm(): Promise<void> {
+    if (busy) return;
+    busy = true;
+    try {
+      await onConfirm({ wipeData });
+    } finally {
+      close();
+    }
+  }
+
+  function handleCancel(): void {
+    if (busy) return;
+    onCancel?.();
+    close();
+  }
+</script>
+
+<div class="delete-project-dialog">
+  <div class="delete-project-dialog__title">Delete project '{projectName}'?</div>
+  <div class="delete-project-dialog__body">
+    The project record will be removed and any members will lose access.
+    Documents already written under the project's namespace remain on disk
+    unless you tick the option below.
+  </div>
+  <label class="delete-project-dialog__opt">
+    <input type="checkbox" bind:checked={wipeData} disabled={busy} />
+    <span>
+      Also delete project files
+      <code class="delete-project-dialog__path">&lt;dataDir&gt;/docs/{projectId}/</code>
+    </span>
+  </label>
+  <div class="delete-project-dialog__actions">
+    <button
+      type="button"
+      class="delete-project-dialog__btn"
+      data-delete-project-cancel
+      bind:this={cancelBtn}
+      onclick={handleCancel}
+      disabled={busy}
+    >
+      Cancel
+    </button>
+    <button
+      type="button"
+      class="delete-project-dialog__btn delete-project-dialog__btn--danger"
+      data-delete-project-confirm
+      onclick={handleConfirm}
+      disabled={busy}
+    >
+      Delete
+    </button>
+  </div>
+</div>
+
+<style>
+  .delete-project-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 20px 24px;
+    min-width: 400px;
+    max-width: 520px;
+  }
+  .delete-project-dialog__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--shell-fg);
+  }
+  .delete-project-dialog__body {
+    font-size: 13px;
+    color: var(--shell-fg-muted, var(--shell-fg));
+    line-height: 1.5;
+  }
+  .delete-project-dialog__opt {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--shell-fg);
+    cursor: pointer;
+  }
+  .delete-project-dialog__opt input { margin-top: 3px; }
+  .delete-project-dialog__path {
+    display: block;
+    font-family: var(--shell-font-mono, monospace);
+    font-size: 11px;
+    color: var(--shell-fg-muted);
+    background: var(--shell-bg-elevated);
+    padding: 2px 6px;
+    border-radius: var(--shell-radius-sm, 3px);
+    margin-top: 2px;
+    word-break: break-all;
+  }
+  .delete-project-dialog__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 4px;
+  }
+  .delete-project-dialog__btn {
+    font-size: 13px;
+    padding: 6px 14px;
+    border-radius: var(--shell-radius-sm, 4px);
+    border: 1px solid var(--shell-border-strong);
+    background: transparent;
+    color: var(--shell-fg);
+    cursor: pointer;
+  }
+  .delete-project-dialog__btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .delete-project-dialog__btn--danger {
+    color: var(--shell-error, #d32f2f);
+    border-color: var(--shell-error, #d32f2f);
+  }
+</style>

package/dist/projects-shard/DeleteProjectDialog.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    projectName: string;
+    projectId: string;
+    onConfirm: (opts: {
+        wipeData: boolean;
+    }) => void | Promise<void>;
+    onCancel?: () => void;
+    close: () => void;
+};
+declare const DeleteProjectDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type DeleteProjectDialog = ReturnType<typeof DeleteProjectDialog>;
+export default DeleteProjectDialog;

package/dist/projects-shard/DeleteProjectDialog.test.d.ts

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

package/dist/projects-shard/DeleteProjectDialog.test.js

@@ -0,0 +1,120 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, unmount, tick } from 'svelte';
+import DeleteProjectDialog from './DeleteProjectDialog.svelte';
+let host;
+let cmp = null;
+beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+});
+afterEach(() => {
+    if (cmp) {
+        unmount(cmp);
+        cmp = null;
+    }
+    host.remove();
+});
+describe('DeleteProjectDialog', () => {
+    it('renders the project name in the title and the docs path in the checkbox label', async () => {
+        cmp = mount(DeleteProjectDialog, {
+            target: host,
+            props: {
+                projectName: 'Acme Website',
+                projectId: 'acme-website-abcd',
+                onConfirm: () => { },
+                onCancel: () => { },
+                close: () => { },
+            },
+        });
+        await tick();
+        expect(host.textContent).toContain("Delete project 'Acme Website'");
+        expect(host.textContent).toContain('docs/acme-website-abcd');
+    });
+    it('the checkbox starts unchecked', async () => {
+        cmp = mount(DeleteProjectDialog, {
+            target: host,
+            props: {
+                projectName: 'A', projectId: 'a-1234',
+                onConfirm: () => { }, close: () => { },
+            },
+        });
+        await tick();
+        const cb = host.querySelector('input[type="checkbox"]');
+        expect(cb).not.toBeNull();
+        expect(cb.checked).toBe(false);
+    });
+    it('Confirm fires onConfirm({ wipeData: false }) when the box is unchecked', async () => {
+        let received = null;
+        let closed = false;
+        cmp = mount(DeleteProjectDialog, {
+            target: host,
+            props: {
+                projectName: 'A', projectId: 'a-1234',
+                onConfirm: (o) => { received = o; },
+                close: () => { closed = true; },
+            },
+        });
+        await tick();
+        const confirm = host.querySelector('[data-delete-project-confirm]');
+        confirm.click();
+        await tick();
+        await new Promise((r) => setTimeout(r, 0));
+        expect(received).toEqual({ wipeData: false });
+        expect(closed).toBe(true);
+    });
+    it('Confirm fires onConfirm({ wipeData: true }) when the box is checked', async () => {
+        let received = null;
+        cmp = mount(DeleteProjectDialog, {
+            target: host,
+            props: {
+                projectName: 'A', projectId: 'a-1234',
+                onConfirm: (o) => { received = o; },
+                close: () => { },
+            },
+        });
+        await tick();
+        const cb = host.querySelector('input[type="checkbox"]');
+        cb.click();
+        await tick();
+        const confirm = host.querySelector('[data-delete-project-confirm]');
+        confirm.click();
+        await tick();
+        await new Promise((r) => setTimeout(r, 0));
+        expect(received).toEqual({ wipeData: true });
+    });
+    it('Cancel does NOT fire onConfirm and does call close', async () => {
+        let confirmFired = false;
+        let closed = false;
+        cmp = mount(DeleteProjectDialog, {
+            target: host,
+            props: {
+                projectName: 'A', projectId: 'a-1234',
+                onConfirm: () => { confirmFired = true; },
+                close: () => { closed = true; },
+            },
+        });
+        await tick();
+        const cancel = host.querySelector('[data-delete-project-cancel]');
+        cancel.click();
+        await tick();
+        expect(confirmFired).toBe(false);
+        expect(closed).toBe(true);
+    });
+    it('Confirm button is disabled while onConfirm is in flight', async () => {
+        let release = null;
+        cmp = mount(DeleteProjectDialog, {
+            target: host,
+            props: {
+                projectName: 'A', projectId: 'a-1234',
+                onConfirm: () => new Promise((res) => { release = res; }),
+                close: () => { },
+            },
+        });
+        await tick();
+        const confirm = host.querySelector('[data-delete-project-confirm]');
+        confirm.click();
+        await tick();
+        expect(confirm.disabled).toBe(true);
+        release();
+    });
+});