sh3-core 0.13.1 → 0.13.2

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;

package/dist/projects-shard/projectsShard.svelte.js

@@ -0,0 +1,148 @@
+/*
+ * `__projects__` shard — multi-member project scope module.
+ *
+ * Maintains a reactive list of projects the current user is a member of.
+ * Refreshes on activate and on visibility-change so a project created in
+ * one tab appears in another after it regains focus. Registers admin-only
+ * actions that open the ProjectManage float view (create/edit/delete).
+ */
+import { mount, unmount } from 'svelte';
+import { projectsApi } from './projectsApi';
+import { VERSION } from '../version';
+import ProjectManage from './ProjectManage.svelte';
+import { floatManager } from '../overlays/float';
+import { isAdmin } from '../auth/auth.svelte';
+export const projectsState = $state({ projects: [], loading: false, error: null });
+export async function refreshProjects() {
+    projectsState.loading = true;
+    projectsState.error = null;
+    try {
+        projectsState.projects = await projectsApi.list();
+    }
+    catch (e) {
+        projectsState.error = e.message;
+    }
+    finally {
+        projectsState.loading = false;
+    }
+}
+const PROJECTS_MANAGE_VIEW = 'projects:manage';
+/*
+ * The float manager drops `meta` for `dismissable: true` (per the bare
+ * SlotNode wrapper in float.ts). Edit-mode needs to know which project
+ * to load, so we stash the target on a module-level slot the factory
+ * consumes on mount. Cleared after the factory has read it so a later
+ * Create from the palette can't accidentally inherit a previous edit
+ * target.
+ */
+let pendingTarget = null;
+function consumePendingTarget() {
+    const t = pendingTarget;
+    pendingTarget = null;
+    return t;
+}
+export function openProjectManage(project) {
+    pendingTarget = project;
+    floatManager.open(PROJECTS_MANAGE_VIEW, {
+        title: project ? `Edit ${project.name}` : 'Create Project',
+        size: { w: 560, h: 620 },
+        dismissable: true,
+    });
+}
+export const projectsShard = {
+    manifest: {
+        id: '__projects__',
+        label: 'Projects',
+        version: VERSION,
+        views: [{ id: PROJECTS_MANAGE_VIEW, label: 'Project Manager' }],
+    },
+    activate(ctx) {
+        void refreshProjects();
+        if (typeof document !== 'undefined') {
+            document.addEventListener('visibilitychange', () => {
+                if (document.visibilityState === 'visible')
+                    void refreshProjects();
+            });
+        }
+        const factory = {
+            mount(container, _mountCtx) {
+                const project = consumePendingTarget();
+                // The float manager has already pushed an entry for this mount —
+                // the most recent one whose viewId matches us is ours.
+                const list = floatManager.list();
+                const floatId = list.length > 0 ? list[list.length - 1].id : null;
+                const close = () => {
+                    if (floatId)
+                        floatManager.close(floatId);
+                };
+                const instance = mount(ProjectManage, {
+                    target: container,
+                    props: { project, onClose: close },
+                });
+                return {
+                    unmount() {
+                        unmount(instance);
+                    },
+                };
+            },
+        };
+        ctx.registerView(PROJECTS_MANAGE_VIEW, factory);
+        ctx.actions.register({
+            id: 'sh3.project.create',
+            label: 'Create Project…',
+            scope: ['home', 'app'],
+            paletteItem: true,
+            disabled: () => !isAdmin(),
+            run: () => {
+                if (isAdmin())
+                    openProjectManage(null);
+            },
+        });
+        ctx.actions.register({
+            id: 'sh3.project.manage',
+            label: 'Manage Project…',
+            scope: ['home', 'app'],
+            submenu: true,
+            paletteItem: true,
+            disabled: () => !isAdmin(),
+        });
+        // Dynamic children: one per project in projectsState.projects, kept in
+        // sync as projects are created/deleted. Mirrors the sh3.app.launch
+        // pattern in sh3coreShard.
+        const manageUnregisters = new Map();
+        $effect.root(() => {
+            $effect(() => {
+                const currentIds = new Set();
+                for (const project of projectsState.projects) {
+                    currentIds.add(project.id);
+                    if (manageUnregisters.has(project.id))
+                        continue;
+                    const off = ctx.actions.register({
+                        id: `sh3.project.manage:${project.id}`,
+                        label: project.name,
+                        scope: ['home', 'app'],
+                        submenuOf: 'sh3.project.manage',
+                        run: () => {
+                            // Re-read the live record so renames since registration are
+                            // reflected in the form.
+                            const live = projectsState.projects.find((p) => p.id === project.id);
+                            if (live)
+                                openProjectManage(live);
+                        },
+                    });
+                    manageUnregisters.set(project.id, off);
+                }
+                for (const id of [...manageUnregisters.keys()]) {
+                    if (!currentIds.has(id)) {
+                        manageUnregisters.get(id)();
+                        manageUnregisters.delete(id);
+                    }
+                }
+            });
+        });
+    },
+    autostart() {
+        /* register on the self-starting path so the project list is available
+           on the home screen without an app launch. */
+    },
+};