@package-broker/ui 0.19.8 → 2.0.0-rc.1

package/dist/pages/sources.js

@@ -0,0 +1,1132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PROXY_DEMAND_MESSAGE } from './sources/proxy-message.js';
+import { pollSync, syncPollResult } from './sources/sync-poll.js';
+import { AddPackageDialog } from './sources/add-package-dialog.js';
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { responseHeader } from '../api.js';
+import { useServices } from '../auth.js';
+import { StatusBadge } from '../components/ui/status-badge.js';
+import { IdText } from '../components/ui/id-text.js';
+import { Time } from '../components/ui/time.js';
+import { Badge } from '../components/ui/badge.js';
+import { LoadedListFilters } from '../components/ui/toolbar.js';
+import { ListState } from '../components/ui/list-state.js';
+import { ConfirmAction } from '../components/ui/confirm-action.js';
+import { RowActions } from '../components/ui/row-actions.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from '../components/ui/dialog.js';
+import { Button } from '../components/ui/button.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card.js';
+import { Input } from '../components/ui/input.js';
+import { Label } from '../components/ui/label.js';
+import { Select } from '../components/ui/select.js';
+import { DataTable } from '../components/ui/table.js';
+import { buildListFilterHash } from '../page-hash.js';
+import { SourceForm, SOURCE_TYPE_LABELS, sourceFieldErrors, scopeNamePatterns, } from './sources/source-form.js';
+const CREDENTIAL_FIELDS = {
+    http_basic: ['username', 'password'],
+    bearer: ['token'],
+    header: ['name', 'value'],
+    query: ['param', 'value'],
+    github_app: ['appId', 'privateKeyPem', 'webhookSecret'],
+    npm_token: ['token'],
+    ssh_key: ['privateKeyPem', 'knownHosts'],
+};
+const CREDENTIAL_KINDS = Object.keys(CREDENTIAL_FIELDS);
+export function sourceCredentialKinds(type, { scope, github, vcsProviders }) {
+    switch (type) {
+        case 'packagist_proxy':
+            return ['bearer'];
+        case 'npmjs_proxy':
+        case 'hosted':
+            return [];
+        case 'composer_repository':
+            return ['http_basic', 'bearer', 'header', 'query', 'npm_token'];
+        case 'npm_registry':
+            return ['npm_token', 'http_basic', 'bearer', 'header'];
+        case 'vcs':
+            if (github)
+                return scope === 'organization' ? ['bearer', 'github_app'] : ['bearer'];
+            // The server accepts ssh_key only on the Node runtime, which is the only one reporting the ssh provider.
+            return [
+                'bearer',
+                'http_basic',
+                'header',
+                'npm_token',
+                ...(vcsProviders?.includes('ssh') ? ['ssh_key'] : []),
+            ];
+    }
+}
+function credentialRules(source, vcsProviders) {
+    return {
+        scope: source.projectId === null ? 'organization' : 'project',
+        github: source.githubAuthentication !== undefined,
+        vcsProviders,
+    };
+}
+function acceptsPackage(source) {
+    return (['packagist_proxy', 'npmjs_proxy', 'npm_registry'].includes(source.type) &&
+        'attached' in source &&
+        source.attached === true);
+}
+export function sourceCredentialKind(body) {
+    if (body.type === 'composer_repository')
+        return 'http_basic';
+    if (body.type === 'npm_registry')
+        return 'npm_token';
+    if (body.type === 'vcs') {
+        const config = body.config;
+        if (config?.provider === 'ssh')
+            return 'ssh_key';
+        if (config?.provider === 'github' && config.installationId !== undefined)
+            return 'github_app';
+    }
+    return 'bearer';
+}
+function isProxy(source) {
+    return ['packagist_proxy', 'npmjs_proxy'].includes(source.type);
+}
+const ENABLE_ADMIN_MESSAGE = 'An organization admin must enable this source.';
+const ENABLE_CONFLICT_MESSAGE = 'Register package names, then enable the source.';
+export function suggestedScopePatterns(source, registered) {
+    const config = source?.config;
+    if (source?.type !== 'npm_registry' || !Array.isArray(config?.scopes))
+        return [];
+    return scopeNamePatterns(config.scopes.join('\n')).filter((pattern) => !registered.includes(pattern));
+}
+export function displayUrl(value) {
+    if (value === null)
+        return null;
+    try {
+        const url = new URL(value);
+        if (!['https:', 'http:', 'ssh:', 'git:'].includes(url.protocol))
+            return null;
+        url.username = '';
+        url.password = '';
+        url.search = '';
+        url.hash = '';
+        return url.toString();
+    }
+    catch {
+        return null;
+    }
+}
+export function createSourcesModel(services, project, now = () => new Date().toISOString()) {
+    const { client } = services;
+    let state = {
+        ownership: 'organization',
+        editor: null,
+        fieldErrors: {},
+        formError: null,
+        available: [],
+        availableNext: null,
+        availableLoading: false,
+        availableError: false,
+        items: [],
+        next: null,
+        loading: true,
+        listError: false,
+        settingsVersion: 0,
+        vcsProviders: undefined,
+        busy: false,
+        error: null,
+        notice: null,
+        createdSource: null,
+        credentialSource: null,
+        credentialVersion: 0,
+        credentialKind: 'bearer',
+        credentialKinds: CREDENTIAL_KINDS,
+        packageSource: null,
+        packageFieldError: null,
+        packageAlert: null,
+        savedCredential: null,
+        names: null,
+        preview: null,
+        order: [],
+        etag: null,
+        canEnableProjectSource: false,
+        enableDenied: [],
+        enableConflicts: [],
+    };
+    const listeners = new Set();
+    const set = (patch) => {
+        state = { ...state, ...patch };
+        for (const listener of listeners)
+            listener();
+    };
+    let permissionsRequest;
+    let stopSyncPolling = () => { };
+    let syncGeneration = 0;
+    let listVersion = 0;
+    let availableVersion = 0;
+    let namesVersion = 0;
+    let previewVersion = 0;
+    function failure(result, credential = false) {
+        if (result.ok)
+            return false;
+        if (result.code === 'reauth_required') {
+            services.requireReauth(credential ? { method: result.request.method, path: result.request.path } : result.request, { credential, secretFields: [] });
+            set({
+                enableDenied: [],
+                error: credential
+                    ? 'Reauthenticate, then enter the credential again.'
+                    : 'Reauthentication is required.',
+            });
+        }
+        else {
+            set({ error: 'The request could not be saved or loaded. Refresh and try again.' });
+        }
+        return true;
+    }
+    async function load(more = false) {
+        if (more && (state.loading || state.next === null))
+            return;
+        const version = ++listVersion;
+        const after = more ? state.next : null;
+        const previousEtag = state.etag;
+        ++previewVersion;
+        set({
+            loading: true,
+            listError: false,
+            error: null,
+            etag: null,
+            preview: null,
+            order: [],
+            enableDenied: [],
+            enableConflicts: [],
+            notice: null,
+        });
+        const query = { limit: '100', ...(after === null ? {} : { after }) };
+        const [permissions, result] = await Promise.all([
+            project !== null || state.ownership !== 'organization'
+                ? (permissionsRequest ??= client.request('get', '/_pb/me/permissions').then((result) => {
+                    if (!result.ok)
+                        permissionsRequest = undefined;
+                    return result;
+                }))
+                : null,
+            project === null
+                ? client.request('get', '/_pb/sources', {
+                    query: {
+                        ...query,
+                        ...(state.ownership === 'organization' ? {} : { ownership: state.ownership }),
+                    },
+                })
+                : client.request('get', '/_pb/projects/{project}/sources', {
+                    params: { project },
+                    query,
+                }),
+        ]);
+        if (version !== listVersion)
+            return;
+        const listNeedsReauth = !result.ok && result.code === 'reauth_required';
+        if (permissions &&
+            !permissions.ok &&
+            !listNeedsReauth &&
+            (permissions.status !== 403 || permissions.code === 'reauth_required'))
+            failure(permissions);
+        if (failure(result) || !result.ok) {
+            set({ loading: false, listError: true });
+            return;
+        }
+        set({
+            canEnableProjectSource: permissions?.ok === true && permissions.data.organization.includes('org:sources:write'),
+        });
+        const etag = responseHeader(result, 'etag') ?? null;
+        if (project !== null && more && etag !== previousEtag) {
+            await load();
+            return;
+        }
+        const page = result.data.items.map((item) => ({ ...item, url: displayUrl(item.url) }));
+        const items = more ? [...state.items, ...page] : page;
+        const attached = items.flatMap((item) => 'attached' in item &&
+            item.attached === true &&
+            'precedence' in item &&
+            typeof item.precedence === 'number'
+            ? [{ id: item.id, precedence: item.precedence }]
+            : []);
+        set({
+            items,
+            settingsVersion: state.settingsVersion + 1,
+            next: result.data.next,
+            vcsProviders: result.data.vcsProviders,
+            loading: false,
+            etag,
+            order: attached.sort((a, b) => a.precedence - b.precedence).map(({ id }) => id),
+        });
+    }
+    async function loadAvailable(more = false) {
+        if (project === null || (more && (state.availableLoading || state.availableNext === null)))
+            return;
+        const version = ++availableVersion;
+        const after = more ? state.availableNext : null;
+        set({ availableLoading: true, availableError: false });
+        const result = await client.request('get', '/_pb/sources', {
+            query: { limit: '100', ...(after === null ? {} : { after }) },
+        });
+        if (version !== availableVersion)
+            return;
+        if (!result.ok) {
+            set({ available: [], availableNext: null, availableLoading: false, availableError: true });
+            return;
+        }
+        const page = result.data.items.map((item) => ({
+            ...item,
+            attached: false,
+            url: displayUrl(item.url),
+        }));
+        set({
+            available: more ? [...state.available, ...page] : page,
+            availableNext: result.data.next,
+            availableLoading: false,
+        });
+    }
+    async function findLoadedSource(source) {
+        while (!state.items.some((item) => item.id === source) &&
+            state.next !== null &&
+            !state.listError) {
+            await load(true);
+        }
+        return state.items.find((item) => item.id === source);
+    }
+    async function revealCreated(source, body) {
+        const created = await findLoadedSource(source);
+        if (created)
+            set({ createdSource: source, notice: `Next steps for ${created.name}` });
+        if (created && !isProxy(created) && created.type !== 'hosted') {
+            const kinds = sourceCredentialKinds(created.type, credentialRules(created, state.vcsProviders));
+            const preferred = body
+                ? sourceCredentialKind(body)
+                : created.githubAuthentication === 'app'
+                    ? 'github_app'
+                    : kinds[0];
+            set({
+                credentialSource: source,
+                credentialVersion: state.credentialVersion + 1,
+                credentialKinds: kinds,
+                credentialKind: preferred !== undefined && kinds.includes(preferred) ? preferred : kinds[0],
+            });
+        }
+    }
+    async function names(source, more = false) {
+        const previous = state.names;
+        if (!more)
+            set({ credentialSource: null, error: null });
+        if (more && (previous?.source !== source || previous.next === null))
+            return;
+        const version = ++namesVersion;
+        const after = more ? previous?.next : null;
+        const result = await client.request('get', '/_pb/sources/{source}/names', {
+            params: { source },
+            query: { limit: '100', ...(after == null ? {} : { after }) },
+        });
+        if (version !== namesVersion || failure(result) || !result.ok)
+            return;
+        set({
+            names: {
+                ...result.data,
+                source,
+                items: more ? [...previous.items, ...result.data.items] : result.data.items,
+            },
+        });
+    }
+    async function mutate(request, after, handled = () => false) {
+        if (state.busy)
+            return;
+        set({ busy: true, error: null, notice: null });
+        try {
+            const result = await request();
+            if (!handled(result) && !failure(result))
+                await after();
+        }
+        finally {
+            set({ busy: false });
+        }
+    }
+    return {
+        project,
+        dispose() {
+            ++syncGeneration;
+            stopSyncPolling();
+        },
+        snapshot: () => state,
+        enableNeedsAdmin(source) {
+            return (source.projectId !== null &&
+                (!state.canEnableProjectSource || state.enableDenied.includes(source.id)));
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        load,
+        async setOwnership(ownership) {
+            if (project !== null || state.busy)
+                return;
+            set({ ownership, items: [], next: null });
+            await load();
+        },
+        loadAvailable,
+        names,
+        openEditor(source = null) {
+            if (state.busy)
+                return;
+            if (source && project !== null && source.projectId === null)
+                return;
+            set({
+                editor: source ?? 'create',
+                fieldErrors: {},
+                formError: null,
+                error: null,
+                credentialSource: null,
+                savedCredential: null,
+            });
+        },
+        closeEditor() {
+            if (state.busy)
+                return;
+            set({ editor: null, fieldErrors: {}, formError: null });
+        },
+        async saveSource(body) {
+            if (state.busy || state.editor === null)
+                return;
+            const editor = state.editor;
+            if (editor !== 'create' && Object.keys(body).length === 0) {
+                set({ editor: null, fieldErrors: {}, formError: null });
+                return;
+            }
+            set({ busy: true, error: null, formError: null, fieldErrors: {} });
+            try {
+                const result = editor === 'create'
+                    ? project === null
+                        ? await client.request('post', '/_pb/sources', { body: body })
+                        : await client.request('post', '/_pb/projects/{project}/sources', {
+                            params: { project },
+                            body: body,
+                        })
+                    : project === null
+                        ? await client.request('patch', '/_pb/sources/{source}', {
+                            params: { source: editor.id },
+                            body,
+                        })
+                        : await client.request('patch', '/_pb/projects/{project}/sources/{source}', {
+                            params: { project, source: editor.id },
+                            body,
+                        });
+                if (!result.ok) {
+                    failure(result);
+                    set({ fieldErrors: sourceFieldErrors(result.details), formError: state.error });
+                    return;
+                }
+                set({
+                    editor: null,
+                    fieldErrors: {},
+                    formError: null,
+                    ...(editor === 'create' && project === null && state.ownership === 'project'
+                        ? { ownership: 'organization' }
+                        : {}),
+                });
+                await load();
+                if (editor === 'create' && result.data && 'id' in result.data) {
+                    await revealCreated(result.data.id, body);
+                }
+            }
+            finally {
+                set({ busy: false });
+            }
+        },
+        attachment(source, attached) {
+            if (project === null)
+                return Promise.resolve();
+            return mutate(() => attached
+                ? client.request('put', '/_pb/projects/{project}/sources/{source}/attachment', {
+                    params: { project, source },
+                    body: {},
+                })
+                : client.request('delete', '/_pb/projects/{project}/sources/{source}/attachment', {
+                    params: { project, source },
+                }), () => load());
+        },
+        async replayed(result) {
+            const prefix = project === null ? '/_pb/sources' : `/_pb/projects/${encodeURIComponent(project)}/sources`;
+            const namesChange = /^\/_pb\/sources\/[^/]+\/names(?:\/[^/]+)?$/.test(result.path);
+            const enableChange = /^\/_pb\/sources\/([^/]+)\/enable$/.exec(result.path);
+            if (result.path !== prefix &&
+                !result.path.startsWith(`${prefix}/`) &&
+                !namesChange &&
+                !enableChange)
+                return;
+            const selectedNames = state.names?.source;
+            set({ enableDenied: [], enableConflicts: [] });
+            if (result.ok)
+                set({
+                    editor: null,
+                    fieldErrors: {},
+                    formError: null,
+                    ...(result.createdSourceId && project === null && state.ownership === 'project'
+                        ? { ownership: 'organization' }
+                        : {}),
+                });
+            await load();
+            if (enableChange && !result.ok) {
+                if (result.status === 403 &&
+                    result.code === 'forbidden' &&
+                    state.items.some((source) => source.id === enableChange[1] && source.projectId !== null)) {
+                    set({ enableDenied: [enableChange[1]], notice: ENABLE_ADMIN_MESSAGE });
+                }
+                else if (result.status === 409 && result.code === 'conflict') {
+                    set({ enableConflicts: [enableChange[1]], notice: ENABLE_CONFLICT_MESSAGE });
+                }
+                else {
+                    set({ error: 'The request could not be saved or loaded. Refresh and try again.' });
+                }
+            }
+            if (result.ok && result.createdSourceId)
+                await revealCreated(result.createdSourceId);
+            if (selectedNames !== undefined)
+                await names(selectedNames);
+        },
+        moveSource(source, direction) {
+            if (state.loading || state.busy || state.next !== null)
+                return;
+            const order = [...state.order];
+            const index = order.indexOf(source);
+            const target = index + direction;
+            if (index < 0 || target < 0 || target >= order.length)
+                return;
+            [order[index], order[target]] = [order[target], order[index]];
+            set({ order });
+        },
+        async saveOrder() {
+            if (project === null ||
+                state.loading ||
+                state.busy ||
+                state.next !== null ||
+                state.etag === null)
+                return;
+            const etag = state.etag;
+            const sourceIds = [...state.order];
+            set({ busy: true, error: null, preview: null });
+            ++previewVersion;
+            try {
+                const result = await client.request('put', '/_pb/projects/{project}/sources/order', {
+                    params: { project },
+                    headers: { 'If-Match': etag },
+                    body: { sourceIds },
+                });
+                if (!result.ok && result.status === 412) {
+                    await load();
+                    set({ error: 'Source ordering changed. Review the reloaded list before saving again.' });
+                }
+                else if (!failure(result)) {
+                    await load();
+                }
+            }
+            finally {
+                set({ busy: false });
+            }
+        },
+        closeCredential() {
+            if (state.busy)
+                return;
+            set({ credentialSource: null });
+        },
+        closeNames() {
+            if (state.busy)
+                return;
+            ++namesVersion;
+            set({ names: null });
+        },
+        chooseCredential(source) {
+            if (state.busy)
+                return;
+            const selected = state.items.find((item) => item.id === source);
+            const kinds = selected
+                ? sourceCredentialKinds(selected.type, credentialRules(selected, state.vcsProviders))
+                : ['bearer'];
+            if (kinds.length === 0)
+                return;
+            ++namesVersion;
+            set({
+                credentialSource: source,
+                names: null,
+                savedCredential: null,
+                credentialVersion: state.credentialVersion + 1,
+                credentialKind: selected?.githubAuthentication === 'app' && kinds.includes('github_app')
+                    ? 'github_app'
+                    : kinds[0],
+                credentialKinds: kinds,
+                error: null,
+            });
+        },
+        openPackage(source) {
+            if (state.busy || project === null || !acceptsPackage(source) || source.status === 'paused')
+                return;
+            set({ packageSource: source, packageFieldError: null, packageAlert: null, notice: null });
+        },
+        closePackage() {
+            if (!state.busy)
+                set({ packageSource: null, packageFieldError: null, packageAlert: null });
+        },
+        async addPackage(name) {
+            const source = state.packageSource;
+            if (state.busy || project === null || !source || !acceptsPackage(source))
+                return;
+            name = name.trim();
+            if (!name || name.length > 428) {
+                set({ packageFieldError: 'Enter a package name of 1 to 428 characters.' });
+                return;
+            }
+            set({ busy: true, packageFieldError: null, packageAlert: null, notice: null });
+            try {
+                const result = await client.request('post', '/_pb/projects/{project}/sources/{source}/packages', {
+                    params: { project, source: source.id },
+                    body: { name },
+                });
+                if (result.ok) {
+                    set({
+                        packageSource: null,
+                        notice: result.status === 202
+                            ? `Queued: ${result.data.name} will appear in Packages shortly`
+                            : 'Already available',
+                    });
+                }
+                else if (result.status === 400 && result.code === 'invalid_request') {
+                    set({ packageFieldError: 'Enter a valid package name for this source.' });
+                }
+                else if (result.status === 400) {
+                    set({
+                        packageFieldError: 'This source does not support that package. Check the name or use another source.',
+                    });
+                }
+                else if (result.code === 'forbidden') {
+                    set({ packageAlert: 'You do not have permission to add packages to this project.' });
+                }
+                else if (result.status === 502) {
+                    set({
+                        packageAlert: 'The upstream registry refused or failed the request. Check the source credential or try again later.',
+                    });
+                }
+                else if (result.status === 404) {
+                    set({
+                        packageAlert: 'The package or attached source could not be found. Check the name and refresh sources.',
+                    });
+                }
+                else if (result.status === 503) {
+                    set({ packageAlert: 'Package requests are temporarily unavailable. Try again shortly.' });
+                }
+                else if (result.status === 409) {
+                    set({ packageAlert: 'This source is paused. Enable it before adding a package.' });
+                }
+                else {
+                    failure(result);
+                    set({ packageAlert: state.error, error: null });
+                }
+            }
+            finally {
+                set({ busy: false });
+            }
+        },
+        async credential(source, kind, material) {
+            if (state.busy)
+                return;
+            set({
+                busy: true,
+                error: null,
+                credentialSource: source,
+                credentialVersion: state.credentialVersion + 1,
+                savedCredential: null,
+            });
+            try {
+                const result = project === null
+                    ? await client.request('put', '/_pb/sources/{source}/credential', {
+                        params: { source },
+                        body: { kind, material },
+                    })
+                    : await client.request('put', '/_pb/projects/{project}/sources/{source}/credential', {
+                        params: { project, source },
+                        body: { kind, material },
+                    });
+                if (!failure(result, true)) {
+                    set({
+                        savedCredential: { source, at: now() },
+                        notice: 'Credential set.',
+                        items: state.items.map((item) => item.id === source ? { ...item, hasCredential: true } : item),
+                    });
+                }
+            }
+            finally {
+                set({ busy: false });
+            }
+        },
+        edit(source, pollIntervalSeconds, removalPolicy) {
+            if (!Number.isSafeInteger(pollIntervalSeconds) || pollIntervalSeconds <= 0) {
+                set({ error: 'Polling interval must be a positive whole number.' });
+                return Promise.resolve();
+            }
+            const body = { pollIntervalSeconds, removalPolicy };
+            return mutate(() => project === null
+                ? client.request('patch', '/_pb/sources/{source}', { params: { source }, body })
+                : client.request('patch', '/_pb/projects/{project}/sources/{source}', {
+                    params: { project, source },
+                    body,
+                }), () => load());
+        },
+        syncNow(source) {
+            if (state.busy ||
+                source.status === 'paused' ||
+                (project !== null && source.projectId === null))
+                return Promise.resolve();
+            stopSyncPolling();
+            const generation = ++syncGeneration;
+            return mutate(() => project === null
+                ? client.request('post', '/_pb/sources/{source}/sync', {
+                    params: { source: source.id },
+                })
+                : client.request('post', '/_pb/projects/{project}/sources/{source}/sync', {
+                    params: { project, source: source.id },
+                }), async () => {
+                if (generation !== syncGeneration)
+                    return;
+                const refresh = async () => {
+                    const version = listVersion;
+                    const ownership = state.ownership;
+                    let after = null;
+                    do {
+                        const query = {
+                            limit: '100',
+                            ...(after === null ? {} : { after }),
+                        };
+                        const result = project === null
+                            ? await client.request('get', '/_pb/sources', {
+                                query: { ...query, ...(ownership === 'organization' ? {} : { ownership }) },
+                            })
+                            : await client.request('get', '/_pb/projects/{project}/sources', {
+                                params: { project },
+                                query,
+                            });
+                        if (generation !== syncGeneration || version !== listVersion || !result.ok)
+                            return true;
+                        const current = result.data.items.find((item) => item.id === source.id);
+                        if (current) {
+                            set({
+                                items: state.items.map((item) => item.id === source.id ? { ...current, url: displayUrl(current.url) } : item),
+                            });
+                            return syncPollResult(source, current);
+                        }
+                        after = result.data.next;
+                    } while (after !== null);
+                    return true;
+                };
+                let complete;
+                if (state.loading && state.items.length === 0) {
+                    await load();
+                    const current = await findLoadedSource(source.id);
+                    complete = state.listError || !current || syncPollResult(source, current);
+                }
+                else {
+                    complete = await refresh();
+                }
+                if (generation !== syncGeneration)
+                    return;
+                set({ notice: 'Sync requested.' });
+                if (complete !== true && generation === syncGeneration)
+                    stopSyncPolling = pollSync(refresh);
+            });
+        },
+        async togglePause(source) {
+            if (project !== null && source.projectId === null)
+                return;
+            if (source.status === 'paused' && !isProxy(source)) {
+                if (state.busy ||
+                    (source.projectId !== null &&
+                        (!state.canEnableProjectSource || state.enableDenied.includes(source.id))))
+                    return;
+                set({ enableConflicts: state.enableConflicts.filter((id) => id !== source.id) });
+                await mutate(() => client.request('post', '/_pb/sources/{source}/enable', {
+                    params: { source: source.id },
+                }), () => load(), (result) => {
+                    if (source.projectId !== null &&
+                        !result.ok &&
+                        result.status === 403 &&
+                        result.code === 'forbidden') {
+                        set({
+                            enableDenied: [...new Set([...state.enableDenied, source.id])],
+                            notice: ENABLE_ADMIN_MESSAGE,
+                        });
+                        return true;
+                    }
+                    if (!result.ok && result.status === 409 && result.code === 'conflict') {
+                        set({
+                            enableConflicts: [...new Set([...state.enableConflicts, source.id])],
+                            notice: ENABLE_CONFLICT_MESSAGE,
+                        });
+                        return true;
+                    }
+                    return false;
+                });
+                return;
+            }
+            const action = source.status === 'paused' ? 'resume' : 'pause';
+            return mutate(() => project === null
+                ? client.request('post', `/_pb/sources/{source}/${action}`, {
+                    params: { source: source.id },
+                })
+                : client.request('post', `/_pb/projects/{project}/sources/{source}/${action}`, {
+                    params: { project, source: source.id },
+                }), () => load());
+        },
+        addName(source, pattern) {
+            if (pattern.length === 0 || pattern.length > 50 || !/^[a-z0-9._~@!/*-]+$/.test(pattern)) {
+                set({ error: 'Enter a registered pattern of 1 to 50 supported characters.' });
+                return Promise.resolve();
+            }
+            return mutate(() => client.request('post', '/_pb/sources/{source}/names', {
+                params: { source },
+                body: { pattern },
+            }), () => names(source));
+        },
+        removeName(source, name) {
+            return mutate(() => client.request('delete', '/_pb/sources/{source}/names/{name}', {
+                params: { source, name },
+            }), async () => {
+                await names(source);
+                await load();
+            });
+        },
+        async resolve(name) {
+            const version = ++previewVersion;
+            set({ preview: null, error: null });
+            if (project === null || name.length === 0 || name.length > 214) {
+                set({ error: 'Choose a project and enter a package name of 1 to 214 characters.' });
+                return;
+            }
+            const result = await client.request('get', '/_pb/projects/{project}/resolve', {
+                params: { project },
+                query: { name },
+            });
+            if (version === previewVersion && !failure(result) && result.ok)
+                set({ preview: result.data });
+        },
+    };
+}
+export function submitCredential(model, source, form) {
+    const kind = form.elements.namedItem('kind')?.value;
+    const fields = CREDENTIAL_KINDS.includes(kind) ? CREDENTIAL_FIELDS[kind] : null;
+    const material = fields === null
+        ? null
+        : JSON.stringify(Object.fromEntries(fields.map((field) => [field, form.elements.namedItem(field)?.value ?? ''])));
+    form.reset();
+    if (material === null)
+        return Promise.resolve();
+    return model.credential(source, kind, material);
+}
+export function CredentialFields({ kind, busy }) {
+    return (_jsx(_Fragment, { children: CREDENTIAL_FIELDS[kind].map((field) => (_jsxs("div", { children: [_jsx(Label, { htmlFor: `credential-${field}`, children: field }), _jsx(Input, { id: `credential-${field}`, name: field, type: "password", autoComplete: "off", defaultValue: "", maxLength: 16384, required: true, disabled: busy })] }, field))) }));
+}
+function CredentialEditor({ model, source, busy, initialKind, kinds, }) {
+    const [kind, setKind] = useState(initialKind);
+    return (_jsxs("form", { className: "grid gap-3", autoComplete: "off", onSubmit: (event) => {
+            event.preventDefault();
+            if (busy)
+                return;
+            void submitCredential(model, source, event.currentTarget);
+        }, children: [_jsx(Label, { htmlFor: "credential-kind", children: "Credential kind" }), _jsx(Select, { id: "credential-kind", name: "kind", value: kind, disabled: busy, onChange: (event) => setKind(event.currentTarget.value), children: kinds.map((value) => (_jsx("option", { value: value, children: value }, value))) }), _jsx(CredentialFields, { kind: kind, busy: busy }, kind), _jsx(Button, { type: "submit", className: "w-fit", disabled: busy, children: "Save credential" })] }));
+}
+function formValue(form, name) {
+    return new FormData(form).get(name)?.toString() ?? '';
+}
+export const SYNC_ERROR_LABELS = {
+    network: 'Network failure',
+    timeout: 'Sync timed out',
+    http_error: 'HTTP error',
+    unauthorized: 'Authorization failed',
+    rate_limited: 'Rate limited',
+    not_found: 'Not found',
+    invalid_response: 'Invalid response',
+    tag_limit_exceeded: 'Tag limit exceeded',
+    mass_absence: 'Mass package absence',
+    too_large: 'Response too large',
+    policy_denied: 'Policy denied',
+    credential_unavailable: 'Credential unavailable',
+    internal: 'Internal error',
+};
+function SyncStatus({ source }) {
+    const errorLabel = source.lastError !== null && Object.hasOwn(SYNC_ERROR_LABELS, source.lastError)
+        ? SYNC_ERROR_LABELS[source.lastError]
+        : null;
+    return (_jsxs("div", { className: "grid gap-1 text-sm", children: [_jsxs("p", { children: ["Last listing: ", _jsx(Time, { value: source.lastSuccessAt, fallback: "Never" })] }), _jsxs("p", { children: ["Last listing error:", ' ', source.lastError === null ? ('None') : (_jsxs(_Fragment, { children: [errorLabel && `${errorLabel} · `, _jsx("code", { children: source.lastError })] }))] }), source.sync && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Latest sync: ", source.sync.queued, " queued \u00B7 ", source.sync.running, " running \u00B7", ' ', source.sync.retrying, " retrying \u00B7 ", source.sync.failed, " failed \u00B7 ", source.sync.completed, ' ', "completed"] }), source.sync.errors.slice(0, 3).map(({ code, count }) => (_jsxs("p", { children: [SYNC_ERROR_LABELS[code], " \u00B7 ", _jsx("code", { children: code }), ": ", count] }, code)))] })), isProxy(source) ? _jsx("p", { children: PROXY_DEMAND_MESSAGE }) : null, _jsxs("p", { children: ["Next poll: ", _jsx(Time, { value: source.nextPollAt, fallback: "None" })] })] }));
+}
+export function SourceActions({ source, model, busy, }) {
+    const [pauseSource, setPauseSource] = useState(null);
+    useEffect(() => {
+        if (pauseSource && (pauseSource.id !== source.id || pauseSource.status !== source.status))
+            setPauseSource(null);
+    }, [pauseSource, source.id, source.status]);
+    const owned = model.project === null ? source.projectId === null : source.projectId !== null;
+    const organizationProject = model.project === null && source.projectId !== null;
+    const enableDenied = (owned || organizationProject) &&
+        source.status === 'paused' &&
+        !isProxy(source) &&
+        model.enableNeedsAdmin(source);
+    const enableConflict = model.snapshot().enableConflicts.includes(source.id);
+    const explanationId = `source-actions-note-${source.id}`;
+    const explanation = !owned && !organizationProject
+        ? 'Manage this organization source in organization scope.'
+        : [enableDenied && ENABLE_ADMIN_MESSAGE, enableConflict && ENABLE_CONFLICT_MESSAGE]
+            .filter(Boolean)
+            .join(' ');
+    const actions = owned
+        ? [
+            { id: 'edit', label: 'Edit', disabled: busy, onSelect: () => model.openEditor(source) },
+            {
+                id: 'sync',
+                label: 'Sync now',
+                disabled: busy || source.status === 'paused',
+                ...(source.status === 'paused' ? { describedBy: `sync-paused-${source.id}` } : {}),
+                onSelect: () => void model.syncNow(source),
+            },
+        ]
+        : [];
+    const overflow = [];
+    if (owned || organizationProject) {
+        if (!(organizationProject && (source.status !== 'paused' || isProxy(source)))) {
+            overflow.push(source.status === 'paused'
+                ? {
+                    id: 'enable',
+                    label: 'Enable',
+                    disabled: busy || enableDenied,
+                    ...(enableDenied || enableConflict ? { describedBy: explanationId } : {}),
+                    onSelect: () => void model.togglePause(source),
+                }
+                : {
+                    id: 'pause',
+                    label: 'Pause source…',
+                    disabled: busy,
+                    onSelect: () => setPauseSource(source),
+                });
+        }
+        if (owned &&
+            sourceCredentialKinds(source.type, credentialRules(source, model.snapshot().vcsProviders))
+                .length > 0)
+            overflow.push({
+                id: 'credential',
+                label: source.type === 'packagist_proxy' ? 'Add GitHub token (optional)' : 'Set credential',
+                disabled: busy,
+                onSelect: () => model.chooseCredential(source.id),
+            });
+    }
+    else {
+        overflow.push({
+            id: 'manage',
+            label: 'Manage source',
+            disabled: true,
+            describedBy: explanationId,
+            onSelect: () => { },
+        });
+    }
+    if (model.project !== null && acceptsPackage(source))
+        overflow.push({
+            id: 'add-package',
+            label: 'Add package',
+            disabled: busy || source.status === 'paused',
+            ...(source.status === 'paused' ? { describedBy: `add-package-paused-${source.id}` } : {}),
+            onSelect: () => model.openPackage(source),
+        });
+    overflow.push({
+        id: 'names',
+        label: 'Registered names',
+        disabled: busy,
+        onSelect: () => void model.names(source.id),
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(RowActions, { entityLabel: source.name, actions: actions, overflow: overflow }), owned && source.status === 'paused' ? (_jsx("p", { id: `sync-paused-${source.id}`, children: "Enable before syncing." })) : null, model.project !== null && acceptsPackage(source) && source.status === 'paused' ? (_jsx("p", { id: `add-package-paused-${source.id}`, children: "Enable before adding a package." })) : null, explanation ? _jsx("p", { id: explanationId, children: explanation }) : null, _jsx(ConfirmAction, { action: "Pause", target: `${source.name} (${source.id})`, scope: model.project === null ? 'Organization' : `Project: ${model.project}`, description: "Pausing this source stops it from resolving packages in this scope. You can enable it again later.", disabled: busy, open: pauseSource?.id === source.id &&
+                    pauseSource.status === source.status &&
+                    source.status !== 'paused', onOpenChange: (open) => {
+                    if (!open)
+                        setPauseSource(null);
+                }, hideTrigger: true, onConfirm: () => void model.togglePause(source) })] }));
+}
+export function filterSources(items, filters) {
+    return items.filter((item) => item.name.toLowerCase().includes(filters.q.toLowerCase()) &&
+        (!filters.type || item.type === filters.type) &&
+        (!filters.scope ||
+            (filters.scope === 'organization' ? item.projectId === null : item.projectId !== null)));
+}
+export function SourcesView({ model }) {
+    const state = useSyncExternalStore(model.subscribe, model.snapshot, model.snapshot);
+    const [filters, setFilters] = useState({ q: '', type: '', scope: '' });
+    const filtered = !!(filters.q || filters.type || filters.scope);
+    const created = state.items.find((item) => item.id === state.createdSource);
+    const scopePatterns = useMemo(() => {
+        const names = state.names;
+        if (names === null)
+            return [];
+        return suggestedScopePatterns(state.items.find((source) => source.id === names.source), names.items.map((item) => item.pattern));
+    }, [state.items, state.names]);
+    const membershipKnown = !state.loading && !state.listError && state.next === null;
+    const credentialForPackagist = state.items.find((source) => source.id === state.credentialSource)?.type === 'packagist_proxy';
+    const combined = [
+        ...state.items,
+        ...(membershipKnown
+            ? state.available.filter((candidate) => !state.items.some((item) => item.id === candidate.id))
+            : []),
+    ];
+    const items = filterSources(combined, filters).sort((a, b) => {
+        const position = (id) => {
+            const index = state.order.indexOf(id);
+            return index < 0 ? Infinity : index;
+        };
+        return position(a.id) - position(b.id);
+    });
+    return (_jsxs("section", { "aria-labelledby": "page-heading", className: "grid gap-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("h1", { tabIndex: -1, id: "page-heading", className: "text-xl font-semibold", children: "Sources" }), _jsx(Button, { type: "button", disabled: state.busy, onClick: () => model.openEditor(), children: "Add source" })] }), state.editor !== null ? (_jsx(SourceForm, { source: state.editor === 'create' ? null : state.editor, busy: state.busy, errors: state.fieldErrors, alert: state.formError, onSubmit: (body) => {
+                    if (state.editor === 'create')
+                        setFilters({ q: '', type: '', scope: '' });
+                    void model.saveSource(body);
+                }, onClose: () => model.closeEditor(), vcsProviders: state.vcsProviders })) : null, _jsx("p", { className: "text-neutral-600", children: "Upstream registries and private repositories. Attached sources are tried in precedence order." }), model.project === null ? (_jsxs(Label, { children: ["Ownership", _jsxs(Select, { value: state.ownership, disabled: state.busy, onChange: (event) => void model.setOwnership(event.target.value), children: [_jsx("option", { value: "organization", children: "Organization" }), _jsx("option", { value: "project", children: "Project-owned" }), _jsx("option", { value: "all", children: "All" })] })] })) : null, _jsx(LoadedListFilters, { values: {
+                    ...filters,
+                    scope: filters.scope === 'organization'
+                        ? 'Organization'
+                        : filters.scope === 'project'
+                            ? 'Project'
+                            : '',
+                    type: SOURCE_TYPE_LABELS[filters.type] ?? '',
+                }, fields: [
+                    { key: 'q', label: 'Name (loaded sources)' },
+                    {
+                        key: 'type',
+                        label: 'Type',
+                        options: [...new Set(combined.map((item) => SOURCE_TYPE_LABELS[item.type]))].sort(),
+                    },
+                    ...(model.project === null
+                        ? []
+                        : [{ key: 'scope', label: 'Source scope', options: ['Organization', 'Project'] }]),
+                ], onChange: (next) => setFilters({
+                    q: next.q ?? '',
+                    scope: model.project === null
+                        ? ''
+                        : next.scope === 'Organization'
+                            ? 'organization'
+                            : next.scope === 'Project'
+                                ? 'project'
+                                : '',
+                    type: Object.keys(SOURCE_TYPE_LABELS).find((key) => SOURCE_TYPE_LABELS[key] === next.type) ?? '',
+                }) }), _jsx("p", { role: "status", "aria-live": "polite", children: state.notice }), created?.status === 'paused' && !isProxy(created) ? (_jsxs("p", { children: ["Next steps for ", created.name, ":", ' ', model.enableNeedsAdmin(created)
+                        ? ENABLE_ADMIN_MESSAGE
+                        : state.names?.source === created.id && state.names.items.length > 0
+                            ? 'Enable the source.'
+                            : 'Register names, then Enable the source.'] })) : null, state.error && !state.listError ? _jsx(ListState, { kind: "error", title: state.error }) : null, state.listError ? (_jsxs(ListState, { kind: "error", title: "Sources could not be loaded.", children: [state.error ? _jsx("p", { children: state.error }) : null, _jsx(Button, { type: "button", className: "w-fit", disabled: state.loading || state.busy, onClick: () => void model.load(), children: "Retry sources" })] })) : null, !state.listError && !state.availableError ? (_jsx(Button, { type: "button", className: "w-fit", variant: "outline", disabled: state.loading || state.busy, onClick: () => {
+                    void model.load();
+                    void model.loadAvailable();
+                }, children: "Refresh sources" })) : null, model.project !== null && !membershipKnown && state.available.length > 0 ? (_jsx("p", { className: "text-sm text-neutral-600", children: "Load all project sources before attaching organization sources." })) : null, state.availableLoading ? (_jsx(ListState, { kind: "loading", title: "Loading organization sources\u2026" })) : null, state.availableError ? (_jsx(ListState, { kind: "error", title: "Organization sources could not be loaded.", children: _jsx(Button, { type: "button", className: "w-fit", disabled: state.availableLoading || state.busy, onClick: () => void model.loadAvailable(), children: "Retry organization sources" }) })) : null, state.loading ? (_jsx(ListState, { kind: "loading", title: "Loading sources\u2026" })) : !state.listError && items.length === 0 ? (_jsx(ListState, { kind: filtered ? 'filtered-empty' : 'empty', title: filtered ? 'No sources match these filters.' : 'No sources.' })) : null, !state.loading && !state.listError && items.length ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-neutral-600", children: [items.length, " sources loaded", filtered ? ' matching filters' : ''] }), _jsx(DataTable, { label: "Sources in precedence order", items: items, columns: [
+                            {
+                                key: 'name',
+                                label: 'Source',
+                                value: (source) => source.name,
+                                render: (source) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("strong", { children: source.name }), 'projectName' in source && source.projectName !== null ? (_jsx("span", { children: `Project: ${source.projectName}` })) : null, _jsxs("span", { className: "text-xs text-neutral-600", children: [source.ecosystem === 'composer' ? 'Composer' : 'npm', " \u00B7", ' ', SOURCE_TYPE_LABELS[source.type]] }), _jsx(StatusBadge, { status: source.status })] })),
+                            },
+                            {
+                                key: 'precedence',
+                                label: 'Precedence',
+                                value: (source) => state.order.indexOf(source.id) < 0 ? '—' : state.order.indexOf(source.id) + 1,
+                                render: (source) => {
+                                    const index = state.order.indexOf(source.id);
+                                    return index < 0 ? ('—') : (_jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [_jsx("strong", { children: index + 1 }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", "aria-label": `Move up ${source.name}`, disabled: state.busy || state.next !== null || index === 0, onClick: () => model.moveSource(source.id, -1), children: "Move up" }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", "aria-label": `Move down ${source.name}`, disabled: state.busy || state.next !== null || index === state.order.length - 1, onClick: () => model.moveSource(source.id, 1), children: "Move down" })] }));
+                                },
+                            },
+                            {
+                                key: 'scope',
+                                label: 'Attached to',
+                                value: (source) => source.projectId === null ? 'Organization source' : 'Project source',
+                                render: (source) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("span", { children: source.projectId === null ? 'Organization source' : 'Project source' }), model.project === null && 'attachedProjectCount' in source ? (_jsx(Badge, { variant: "secondary", children: `Attached to ${source.attachedProjectCount} projects` })) : null, 'attached' in source ? (_jsx("span", { className: "text-xs text-neutral-600", children: source.attached
+                                                ? 'Attached to this project'
+                                                : 'Not attached to this project' })) : null] })),
+                            },
+                            {
+                                key: 'credential',
+                                label: 'Credentials',
+                                value: (source) => (source.hasCredential ? 'Set · write-only' : 'None'),
+                                render: (source) => source.hasCredential ? _jsx(Badge, { variant: "outline", children: "Set \u00B7 write-only" }) : 'None',
+                            },
+                            {
+                                key: 'sync',
+                                label: 'Sync status',
+                                value: (source) => source.lastSuccessAt ?? '',
+                                render: (source) => _jsx(SyncStatus, { source: source }),
+                            },
+                            {
+                                key: 'id',
+                                label: 'Source ID',
+                                value: (source) => source.id,
+                                priority: 3,
+                                render: (source) => _jsx(IdText, { value: source.id, label: "source ID" }),
+                            },
+                            {
+                                key: 'actions',
+                                label: 'Actions',
+                                value: () => '',
+                                sortable: false,
+                                render: (source) => (_jsxs("div", { className: "flex flex-wrap items-start gap-2", children: [model.project !== null && 'attached' in source ? (source.attached ? (_jsx(ConfirmAction, { action: "Detach", target: `${source.name} (${source.id})`, scope: `Project: ${model.project}`, description: "Detaching this source stops this project from resolving packages through it. You can attach it again later.", disabled: state.busy, onConfirm: () => void model.attachment(source.id, false) })) : (_jsx(Button, { type: "button", size: "sm", variant: "outline", disabled: state.busy, onClick: () => void model.attachment(source.id, true), children: "Attach" }))) : null, _jsx(SourceActions, { source: source, model: model, busy: state.busy })] })),
+                            },
+                        ] })] })) : null, state.next !== null ? (_jsx(Button, { type: "button", className: "w-fit", disabled: state.loading || state.busy, onClick: () => {
+                    void model.load(true);
+                }, children: "Load more sources" })) : null, state.availableNext !== null ? (_jsx(Button, { type: "button", className: "w-fit", disabled: state.availableLoading || state.busy, onClick: () => void model.loadAvailable(true), children: "Load more organization sources" })) : null, state.packageSource !== null ? (_jsx(AddPackageDialog, { source: state.packageSource, busy: state.busy, fieldError: state.packageFieldError, alert: state.packageAlert, onSubmit: (name) => void model.addPackage(name), onClose: () => model.closePackage() }, state.packageSource.id)) : null, state.credentialSource !== null ? (_jsx(Dialog, { open: true, onOpenChange: (open) => {
+                    if (!open)
+                        model.closeCredential();
+                }, children: _jsxs(DialogContent, { variant: "source", onCancel: (event) => {
+                        if (state.busy)
+                            event.preventDefault();
+                    }, children: [_jsxs(DialogHeader, { className: "shrink-0 p-6 pr-16", children: [_jsx(DialogTitle, { children: credentialForPackagist ? 'Add GitHub token (optional)' : 'Set credential' }), _jsxs(DialogDescription, { children: ["Credentials are write-only. Save a new credential to rotate a secret.", credentialForPackagist
+                                            ? ' This optional bearer token is used only for GitHub archive downloads and their rate limits. Enable Use GitHub token in Edit after saving it.'
+                                            : ''] })] }), _jsxs("div", { className: "grid min-h-0 gap-3 overflow-y-auto px-6 pb-6", children: [_jsx(IdText, { value: state.credentialSource, label: "source ID" }), _jsx(CredentialEditor, { model: model, source: state.credentialSource, initialKind: state.credentialKind, kinds: state.credentialKinds, busy: state.busy }, state.credentialVersion), state.error ? _jsx("p", { role: "alert", children: state.error }) : null, state.savedCredential?.source === state.credentialSource ? (_jsxs("p", { children: ["credential set \u00B7 ", _jsx(Time, { value: state.savedCredential.at })] })) : null] })] }) })) : null, state.savedCredential && state.credentialSource === null ? (_jsxs("p", { children: ["credential set \u00B7 ", state.savedCredential.source, " \u00B7", ' ', _jsx(Time, { value: state.savedCredential.at })] })) : null, state.names ? (_jsx(Dialog, { open: true, onOpenChange: (open) => {
+                    if (!open)
+                        model.closeNames();
+                }, children: _jsxs(DialogContent, { variant: "source", onCancel: (event) => {
+                        if (state.busy)
+                            event.preventDefault();
+                    }, children: [_jsxs(DialogHeader, { className: "shrink-0 p-6 pr-16", children: [_jsx(DialogTitle, { children: "Registered names" }), _jsx(DialogDescription, { children: "Manage the package patterns registered for this source." })] }), _jsxs("div", { className: "grid min-h-0 gap-3 overflow-y-auto px-6 pb-6", children: [state.error ? _jsx("p", { role: "alert", children: state.error }) : null, _jsx(IdText, { value: state.names.source, label: "source ID" }), _jsx("ul", { children: state.names.items.map((name) => (_jsxs("li", { className: "flex items-center gap-3", children: [_jsx("span", { children: name.pattern }), _jsx(ConfirmAction, { action: `Remove ${name.pattern}`, target: name.pattern, scope: model.project === null ? 'Organization' : `Project: ${model.project}`, description: "Removing this registered pattern can stop the source from resolving matching packages. Add the pattern again to restore it.", disabled: state.busy, onConfirm: () => void model.removeName(name.sourceId, name.id) })] }, name.id))) }), state.names.next !== null ? (_jsx(Button, { type: "button", disabled: state.busy, onClick: () => {
+                                        void model.names(state.names.source, true);
+                                    }, children: "Load more names" })) : null, _jsxs("form", { className: "grid gap-3", onSubmit: (event) => {
+                                        event.preventDefault();
+                                        if (state.busy)
+                                            return;
+                                        const form = event.currentTarget;
+                                        const pattern = formValue(form, 'pattern');
+                                        form.reset();
+                                        void model.addName(state.names.source, pattern);
+                                    }, children: [_jsx(Label, { htmlFor: "registered-pattern", children: "Registered pattern" }), _jsx(Input, { id: "registered-pattern", name: "pattern", maxLength: 50, required: true, defaultValue: scopePatterns[0] ?? '' }, `${state.names.source}:${state.names.items.map((item) => item.pattern).join(',')}`), scopePatterns.map((pattern) => (_jsxs("p", { className: "text-sm", children: ["Register ", pattern, " before enabling this source."] }, pattern))), _jsx(Button, { type: "submit", className: "w-fit", disabled: state.busy, children: "Add name" })] })] })] }) })) : null, model.project !== null &&
+                !state.listError &&
+                state.items.some((item) => 'attached' in item && item.attached) ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Source order" }) }), _jsxs(CardContent, { className: "grid gap-3", children: [_jsx("p", { children: "Earlier sources take precedence. Only attached sources are ordered." }), state.next !== null ? _jsx("p", { children: "Load all sources before changing their order." }) : null, _jsx(Button, { type: "button", className: "w-fit", disabled: state.loading || state.busy || state.next !== null || state.etag === null, onClick: () => {
+                                    void model.saveOrder();
+                                }, children: "Save source order" })] })] })) : null, model.project !== null ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Who wins" }) }), _jsxs(CardContent, { className: "grid gap-3", children: [_jsxs("form", { className: "grid gap-3", onSubmit: (event) => {
+                                    event.preventDefault();
+                                    if (state.busy)
+                                        return;
+                                    void model.resolve(formValue(event.currentTarget, 'name'));
+                                }, children: [_jsx(Label, { htmlFor: "resolve-name", children: "Package name" }), _jsx(Input, { id: "resolve-name", name: "name", maxLength: 214, required: true }), _jsx(Button, { type: "submit", className: "w-fit", disabled: state.busy, children: "Preview" })] }), state.preview ? (_jsxs("div", { "aria-live": "polite", children: [_jsx("p", { children: state.preview.name }), _jsxs("p", { children: ["Winning source: ", _jsx(IdText, { value: state.preview.winner, label: "winning source ID" })] }), _jsx("ol", { children: state.preview.candidates.map((candidate) => (_jsxs("li", { children: [candidate.sourceName, " \u00B7", ' ', _jsx(IdText, { value: candidate.sourceId, label: "candidate source ID" }), " \u00B7", ' ', candidate.eligible ? 'Eligible' : 'Ineligible'] }, candidate.sourceId))) })] })) : null] })] })) : null] }));
+}
+function projectFromHash() {
+    if (typeof window === 'undefined')
+        return null;
+    const project = new URLSearchParams(window.location.hash.split('?')[1] ?? '').get('project');
+    return new URLSearchParams(buildListFilterHash('sources', { project }).split('?')[1] ?? '').get('project');
+}
+export function SourcesPage() {
+    const services = useServices();
+    const [project, setProject] = useState(projectFromHash);
+    useEffect(() => {
+        const changed = () => setProject(projectFromHash());
+        window.addEventListener('hashchange', changed);
+        return () => window.removeEventListener('hashchange', changed);
+    }, []);
+    const model = useMemo(() => createSourcesModel(services, project), [services, project]);
+    useEffect(() => {
+        void model.load();
+        void model.loadAvailable();
+        return () => model.dispose();
+    }, [model]);
+    useEffect(() => services.subscribeReplay?.((result) => {
+        void model.replayed(result);
+    }), [services, model]);
+    return _jsx(SourcesView, { model: model }, project ?? 'organization');
+}
+//# sourceMappingURL=sources.js.map