sh3-core 0.13.0 → 0.13.2

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();
+    });
+});

package/dist/projects-shard/ProjectManage.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+  /*
+   * Admin-only float view for creating, editing, or deleting a project.
+   *
+   * Members and app allowlist are picked from live data via UserPicker
+   * (over /api/admin/users) and AppPicker (over the client-side app
+   * registry). The current user is pre-selected on the create path so
+   * "include myself" works without looking up the underlying user id.
+   */
+
+  import { projectsApi, type ProjectRecord } from './projectsApi';
+  import { refreshProjects } from './projectsShard.svelte';
+  import { getUser } from '../auth/auth.svelte';
+  import AppPicker from '../primitives/widgets/AppPicker.svelte';
+  import UserPicker from '../primitives/widgets/UserPicker.svelte';
+  import { modalManager } from '../overlays/modal';
+  import DeleteProjectDialog from './DeleteProjectDialog.svelte';
+
+  interface Props {
+    project?: ProjectRecord | null;
+    onClose: () => void;
+  }
+
+  let { project = null, onClose }: Props = $props();
+
+  const isEdit = $derived(project !== null);
+  const me = $derived(getUser());
+
+  let name = $state(project?.name ?? '');
+  let description = $state(project?.description ?? '');
+  let members = $state<string[]>(
+    project ? [...project.members] : (me?.id ? [me.id] : []),
+  );
+  let appAllowlist = $state<string[]>(project ? [...project.appAllowlist] : []);
+  let saving = $state(false);
+  let error = $state<string | null>(null);
+
+  async function save() {
+    if (!name.trim()) {
+      error = 'Name is required';
+      return;
+    }
+    saving = true;
+    error = null;
+    const payload = {
+      name: name.trim(),
+      description: description.trim() || undefined,
+      members,
+      appAllowlist,
+    };
+    try {
+      if (isEdit && project) {
+        await projectsApi.update(project.id, payload);
+      } else {
+        await projectsApi.create(payload);
+      }
+      await refreshProjects();
+      onClose();
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      saving = false;
+    }
+  }
+
+  function remove() {
+    if (!isEdit || !project) return;
+    const target = project;
+    modalManager.open(DeleteProjectDialog, {
+      projectName: target.name,
+      projectId: target.id,
+      onConfirm: async ({ wipeData }: { wipeData: boolean }) => {
+        saving = true;
+        error = null;
+        try {
+          await projectsApi.delete(target.id, { wipeData });
+          await refreshProjects();
+          onClose();
+        } catch (e) {
+          error = (e as Error).message;
+        } finally {
+          saving = false;
+        }
+      },
+    });
+  }
+</script>
+
+<div class="project-manage">
+  <div class="body">
+    <h2>{isEdit ? `Edit ${project!.name}` : 'Create Project'}</h2>
+
+    {#if isEdit}
+      <p class="project-id">ID: <code>{project!.id}</code></p>
+    {/if}
+
+    <label class="field">
+      <span>Name</span>
+      <input type="text" bind:value={name} placeholder="Acme Website" disabled={saving} />
+    </label>
+
+    <label class="field">
+      <span>Description</span>
+      <textarea bind:value={description} rows={2} disabled={saving}></textarea>
+    </label>
+
+    <label class="field">
+      <span>Members</span>
+      <UserPicker bind:value={members} disabled={saving} />
+      {#if me}
+        <span class="hint">
+          Your id: <code>{me.id}</code> ({me.username ?? me.displayName})
+        </span>
+      {/if}
+    </label>
+
+    <label class="field">
+      <span>App allowlist</span>
+      <AppPicker bind:value={appAllowlist} disabled={saving} />
+    </label>
+
+    {#if error}
+      <p class="error">{error}</p>
+    {/if}
+  </div>
+
+  <div class="actions">
+    <button type="button" class="primary" onclick={save} disabled={saving}>
+      {isEdit ? 'Save' : 'Create'}
+    </button>
+    <button type="button" onclick={onClose} disabled={saving}>Cancel</button>
+    {#if isEdit}
+      <button type="button" class="danger" onclick={remove} disabled={saving}>Delete</button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .project-manage {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    font: inherit;
+    color: var(--shell-fg);
+    background: var(--shell-bg);
+  }
+  .body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 16px 8px;
+  }
+  h2 { margin: 0 0 8px; font-size: 16px; }
+  .project-id { font-size: 12px; color: var(--shell-fg-muted); margin: 0 0 16px; }
+  .project-id code { font-family: var(--shell-font-mono, monospace); }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+  .field span { color: var(--shell-fg-muted); }
+  .hint { font-size: 11px; color: var(--shell-fg-muted); }
+  .hint code {
+    font-family: var(--shell-font-mono, monospace);
+    color: var(--shell-fg);
+    background: var(--shell-bg-elevated);
+    padding: 0 4px;
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .field input,
+  .field textarea {
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 6px 8px;
+    font: inherit;
+    font-size: 13px;
+  }
+  .field textarea { resize: vertical; min-height: 60px; }
+  .error { color: var(--shell-error, #c33); font-size: 13px; margin: 0 0 8px; }
+  .actions {
+    display: flex;
+    gap: 8px;
+    padding: 12px 16px;
+    border-top: 1px solid var(--shell-border);
+    background: var(--shell-bg);
+    flex: 0 0 auto;
+  }
+  .actions button {
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 6px 14px;
+    font: inherit;
+    cursor: pointer;
+  }
+  .actions button:hover { border-color: var(--shell-accent); }
+  .actions button.primary {
+    background: var(--shell-accent);
+    color: #fff;
+    border-color: var(--shell-accent);
+  }
+  .actions button.danger { margin-left: auto; color: var(--shell-error, #c33); }
+  .actions button:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>

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

@@ -0,0 +1,8 @@
+import { type ProjectRecord } from './projectsApi';
+interface Props {
+    project?: ProjectRecord | null;
+    onClose: () => void;
+}
+declare const ProjectManage: import("svelte").Component<Props, {}, "">;
+type ProjectManage = ReturnType<typeof ProjectManage>;
+export default ProjectManage;

package/dist/projects-shard/ProjectsSection.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  /*
+   * Projects section for ShellHome.
+   *
+   * Renders the list of projects the current user is a member of as
+   * selectable cards. Selecting a project sets sessionState.activeProjectId
+   * (which then filters the apps grid via the appAllowlist) and binds any
+   * subsequently launched app's documents to the project scope.
+   */
+
+  import { projectsState, openProjectManage } from './projectsShard.svelte';
+  import { sessionState, setActiveProjectId } from '../projects/session-state.svelte';
+  import { isAdmin } from '../auth/auth.svelte';
+
+  const visible = $derived(projectsState.projects.length > 0);
+  const activeId = $derived(sessionState.activeProjectId);
+  const elevated = $derived(isAdmin());
+
+  function selectProject(id: string) {
+    setActiveProjectId(activeId === id ? null : id);
+  }
+
+  function editProject(id: string, ev: MouseEvent) {
+    ev.stopPropagation();
+    const project = projectsState.projects.find((p) => p.id === id) ?? null;
+    if (project) openProjectManage(project);
+  }
+</script>
+
+{#if visible}
+  <section class="projects-section">
+    <h2 class="projects-heading">Projects</h2>
+    <div class="projects-grid">
+      {#each projectsState.projects as project (project.id)}
+        <div class="project-card-wrap">
+          <button
+            type="button"
+            class="project-card"
+            class:active={activeId === project.id}
+            onclick={() => selectProject(project.id)}
+            title={project.description ?? `${project.members.length} member${project.members.length === 1 ? '' : 's'}`}
+          >
+            <span class="project-name">{project.name}</span>
+            <span class="project-meta">{project.members.length} member{project.members.length === 1 ? '' : 's'}</span>
+          </button>
+          {#if elevated}
+            <button
+              type="button"
+              class="project-card-edit"
+              onclick={(ev) => editProject(project.id, ev)}
+              aria-label="Edit project"
+              title="Edit project"
+            >⚙</button>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </section>
+{/if}
+
+<style>
+  .projects-section {
+    width: 100%;
+    max-width: 720px;
+    margin-bottom: 28px;
+  }
+  .projects-heading {
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--shell-fg-subtle);
+    margin: 0 0 12px;
+  }
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 10px;
+  }
+  .project-card-wrap { position: relative; }
+  .project-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 12px 14px;
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-md);
+    cursor: pointer;
+    text-align: left;
+    color: inherit;
+    font: inherit;
+    transition: border-color 120ms ease, transform 120ms ease;
+    width: 100%;
+  }
+  .project-card-edit {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    background: transparent;
+    border: 0;
+    color: var(--shell-fg-muted);
+    cursor: pointer;
+    padding: 2px 6px;
+    font-size: 14px;
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .project-card-edit:hover { color: var(--shell-fg); background: var(--shell-bg-elevated); }
+  .project-card:hover {
+    border-color: var(--shell-accent);
+    transform: translateY(-1px);
+  }
+  .project-card.active {
+    border-color: var(--shell-accent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-accent) 40%, transparent);
+  }
+  .project-name { font-weight: 600; font-size: 13px; }
+  .project-meta { font-size: 11px; color: var(--shell-fg-muted); }
+</style>

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

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

package/dist/projects-shard/index.d.ts

@@ -0,0 +1,4 @@
+export { projectsShard, projectsState, refreshProjects, openProjectManage, } from './projectsShard.svelte';
+export { projectsApi, type ProjectRecord } from './projectsApi';
+export { default as ProjectsSection } from './ProjectsSection.svelte';
+export { default as ProjectManage } from './ProjectManage.svelte';

package/dist/projects-shard/index.js

@@ -0,0 +1,4 @@
+export { projectsShard, projectsState, refreshProjects, openProjectManage, } from './projectsShard.svelte';
+export { projectsApi } from './projectsApi';
+export { default as ProjectsSection } from './ProjectsSection.svelte';
+export { default as ProjectManage } from './ProjectManage.svelte';

package/dist/projects-shard/projectsApi.d.ts

@@ -0,0 +1,20 @@
+export interface ProjectRecord {
+    id: string;
+    name: string;
+    description?: string;
+    members: string[];
+    appAllowlist: string[];
+    createdBy: string;
+    createdAt: number;
+    updatedAt: number;
+}
+export declare const projectsApi: {
+    list(): Promise<ProjectRecord[]>;
+    listAll(): Promise<ProjectRecord[]>;
+    get(id: string): Promise<ProjectRecord>;
+    create(input: Pick<ProjectRecord, "name" | "description" | "members" | "appAllowlist">): Promise<ProjectRecord>;
+    update(id: string, patch: Partial<Pick<ProjectRecord, "name" | "description" | "members" | "appAllowlist">>): Promise<ProjectRecord>;
+    delete(id: string, opts?: {
+        wipeData?: boolean;
+    }): Promise<void>;
+};

package/dist/projects-shard/projectsApi.js

@@ -0,0 +1,44 @@
+/*
+ * Client wrapper for the /api/projects HTTP surface.
+ *
+ * Returns plain JSON objects; the shard layer is responsible for keeping
+ * a reactive copy and for converting these to actions / views.
+ */
+async function jsonFetch(url, init) {
+    var _a;
+    const res = await fetch(url, Object.assign({ credentials: 'include' }, init));
+    if (!res.ok)
+        throw new Error(`${(_a = init === null || init === void 0 ? void 0 : init.method) !== null && _a !== void 0 ? _a : 'GET'} ${url} failed: ${res.status}`);
+    return res.json();
+}
+export const projectsApi = {
+    async list() {
+        const body = await jsonFetch('/api/projects', { method: 'GET' });
+        return body.projects;
+    },
+    async listAll() {
+        const body = await jsonFetch('/api/projects/all', { method: 'GET' });
+        return body.projects;
+    },
+    async get(id) {
+        return jsonFetch(`/api/projects/${encodeURIComponent(id)}`, { method: 'GET' });
+    },
+    async create(input) {
+        return jsonFetch('/api/projects', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(input),
+        });
+    },
+    async update(id, patch) {
+        return jsonFetch(`/api/projects/${encodeURIComponent(id)}`, {
+            method: 'PATCH',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(patch),
+        });
+    },
+    async delete(id, opts) {
+        const qs = (opts === null || opts === void 0 ? void 0 : opts.wipeData) ? '?wipeData=1' : '';
+        await jsonFetch(`/api/projects/${encodeURIComponent(id)}${qs}`, { method: 'DELETE' });
+    },
+};

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

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

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

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { projectsApi } from './projectsApi';
+describe('projectsApi', () => {
+    beforeEach(() => {
+        vi.stubGlobal('fetch', vi.fn());
+    });
+    it('list() GETs /api/projects and returns projects array', async () => {
+        globalThis.fetch.mockResolvedValue({
+            ok: true,
+            json: async () => ({ projects: [{ id: 'acme-abcd', name: 'Acme', members: [], appAllowlist: [], createdBy: 'admin', createdAt: 0, updatedAt: 0 }] }),
+        });
+        const projects = await projectsApi.list();
+        expect(globalThis.fetch).toHaveBeenCalledWith('/api/projects', expect.objectContaining({ method: 'GET' }));
+        expect(projects).toHaveLength(1);
+        expect(projects[0].name).toBe('Acme');
+    });
+    it('listAll() GETs /api/projects/all', async () => {
+        globalThis.fetch.mockResolvedValue({
+            ok: true,
+            json: async () => ({ projects: [] }),
+        });
+        await projectsApi.listAll();
+        expect(globalThis.fetch).toHaveBeenCalledWith('/api/projects/all', expect.objectContaining({ method: 'GET' }));
+    });
+    it('create() POSTs JSON body to /api/projects', async () => {
+        globalThis.fetch.mockResolvedValue({
+            ok: true,
+            json: async () => ({ id: 'x-1234', name: 'X', members: [], appAllowlist: [], createdBy: 'admin', createdAt: 0, updatedAt: 0 }),
+        });
+        const project = await projectsApi.create({ name: 'X', members: [], appAllowlist: [] });
+        expect(globalThis.fetch).toHaveBeenCalledWith('/api/projects', expect.objectContaining({ method: 'POST' }));
+        expect(project.id).toBe('x-1234');
+    });
+    it('update() PATCHes /api/projects/:id', async () => {
+        globalThis.fetch.mockResolvedValue({
+            ok: true,
+            json: async () => ({ id: 'a', name: 'A', members: [], appAllowlist: [], createdBy: 'admin', createdAt: 0, updatedAt: 0 }),
+        });
+        await projectsApi.update('a', { name: 'A' });
+        expect(globalThis.fetch).toHaveBeenCalledWith('/api/projects/a', expect.objectContaining({ method: 'PATCH' }));
+    });
+    it('delete() DELETEs /api/projects/:id', async () => {
+        globalThis.fetch.mockResolvedValue({ ok: true, json: async () => ({ ok: true }) });
+        await projectsApi.delete('a');
+        expect(globalThis.fetch).toHaveBeenCalledWith('/api/projects/a', expect.objectContaining({ method: 'DELETE' }));
+    });
+    it('throws on non-ok response', async () => {
+        globalThis.fetch.mockResolvedValue({ ok: false, status: 403 });
+        await expect(projectsApi.list()).rejects.toThrow(/403/);
+    });
+});
+describe('projectsApi.delete with wipeData', () => {
+    beforeEach(() => {
+        vi.stubGlobal('fetch', vi.fn());
+    });
+    it('appends ?wipeData=1 when opts.wipeData is true', async () => {
+        globalThis.fetch.mockResolvedValue({ ok: true, json: async () => ({ ok: true, wipedData: true }) });
+        await projectsApi.delete('a', { wipeData: true });
+        expect(globalThis.fetch).toHaveBeenCalledWith('/api/projects/a?wipeData=1', expect.objectContaining({ method: 'DELETE' }));
+    });
+    it('does not append the query when opts is omitted', async () => {
+        globalThis.fetch.mockResolvedValue({ ok: true, json: async () => ({ ok: true, wipedData: false }) });
+        await projectsApi.delete('a');
+        expect(globalThis.fetch).toHaveBeenCalledWith('/api/projects/a', expect.objectContaining({ method: 'DELETE' }));
+    });
+    it('does not append the query when opts.wipeData is false', async () => {
+        globalThis.fetch.mockResolvedValue({ ok: true, json: async () => ({ ok: true, wipedData: false }) });
+        await projectsApi.delete('a', { wipeData: false });
+        expect(globalThis.fetch).toHaveBeenCalledWith('/api/projects/a', expect.objectContaining({ method: 'DELETE' }));
+    });
+});

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

@@ -0,0 +1,10 @@
+import type { Shard } from '../shards/types';
+import { type ProjectRecord } from './projectsApi';
+export declare const projectsState: {
+    projects: ProjectRecord[];
+    loading: boolean;
+    error: string | null;
+};
+export declare function refreshProjects(): Promise<void>;
+export declare function openProjectManage(project: ProjectRecord | null): void;
+export declare const projectsShard: Shard;