sh3-core 0.13.1 → 0.13.3

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

package/dist/projects-shard/ProjectManage.svelte

@@ -0,0 +1,219 @@
+<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 { untrack } from 'svelte';
+  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());
+
+  // Form fields snapshot the project on mount; the modal is recreated per
+  // open, so prop changes after mount aren't expected. untrack defers the
+  // reactive read so Svelte 5 doesn't emit state_referenced_locally.
+  let name = $state(untrack(() => project?.name ?? ''));
+  let description = $state(untrack(() => project?.description ?? ''));
+  let members = $state<string[]>(
+    untrack(() => {
+      if (project) return [...project.members];
+      const userId = getUser()?.id;
+      return userId ? [userId] : [];
+    }),
+  );
+  let appAllowlist = $state<string[]>(
+    untrack(() => (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>;
+};