@chisquare-tech/origine-ngx-apps-code 0.3.0 → 0.5.0

package/fesm2022/chisquare-tech-origine-ngx-apps-code.mjs

@@ -65,8 +65,15 @@ class CodeApi {
     tree(project, name, ref, path) {
         return this.api.get(`${this.repoPath(project, name)}/tree`, { ref, path }).pipe(map((r) => data(r)));
     }
-    blob(project, name, ref, path) {
-        return this.api.get(`${this.repoPath(project, name)}/blob`, { ref, path }).pipe(map((r) => data(r)));
+    blob(project, name, ref, path, withText = false) {
+        const p = { ref, path };
+        if (withText)
+            p['format'] = 'text';
+        return this.api.get(`${this.repoPath(project, name)}/blob`, p).pipe(map((r) => data(r)));
+    }
+    /** A commit from the browser (DEV-13): files, base64 uploads and deletes; from a new branch it can open a pull request. */
+    commitFiles(project, name, body) {
+        return this.api.post(`${this.repoPath(project, name)}/commits`, body).pipe(map((r) => data(r)));
     }
     blame(project, name, ref, path) {
         return this.api.get(`${this.repoPath(project, name)}/blame`, { ref, path }).pipe(map((r) => data(r) ?? []));
@@ -115,6 +122,15 @@ class CodeApi {
             p['q'] = q;
         return this.api.get(`${this.repoPath(project, name)}/refs`, p).pipe(map((r) => data(r) ?? []));
     }
+    collaborators(project, name) {
+        return this.api.get(`${this.repoPath(project, name)}/collaborators`).pipe(map((r) => data(r) ?? []));
+    }
+    setCollaborator(project, name, userId, permission) {
+        return this.api.put(`${this.repoPath(project, name)}/collaborators/${enc(userId)}`, { permission }).pipe(map((r) => data(r)));
+    }
+    removeCollaborator(project, name, userId) {
+        return this.api.delete(`${this.repoPath(project, name)}/collaborators/${enc(userId)}`);
+    }
     createTag(project, name, tag, target) {
         return this.api.post(`${this.repoPath(project, name)}/tags`, { tag, target }).pipe(map((r) => data(r)));
     }
@@ -343,6 +359,8 @@ class RepoPage {
         this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
         this.canWrite = computed(() => !this.repo()?.archivedAt && (this.repo()?.capabilities ?? []).includes('code.write'), ...(ngDevMode ? [{ debugName: "canWrite" }] : /* istanbul ignore next */ []));
         this.canAdmin = computed(() => (this.repo()?.capabilities ?? []).includes('resources.manage'), ...(ngDevMode ? [{ debugName: "canAdmin" }] : /* istanbul ignore next */ []));
+        /** Repository settings short of a rename, the visibility and deletion: Maintainers, and maintain collaborators. */
+        this.canMaintain = computed(() => this.canAdmin() || (this.repo()?.capabilities ?? []).includes('repo.maintain'), ...(ngDevMode ? [{ debugName: "canMaintain" }] : /* istanbul ignore next */ []));
         this.canProtect = computed(() => (this.repo()?.capabilities ?? []).includes('protection.manage'), ...(ngDevMode ? [{ debugName: "canProtect" }] : /* istanbul ignore next */ []));
         this.route.paramMap.subscribe((m) => this.name.set(m.get('repo') ?? ''));
         effect(() => {
@@ -1215,6 +1233,7 @@ class RepoHomePage extends RepoPage {
         this.path = signal('', ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
         this.proto = signal('https', ...(ngDevMode ? [{ debugName: "proto" }] : /* istanbul ignore next */ []));
         this.cloneOpen = signal(false, ...(ngDevMode ? [{ debugName: "cloneOpen" }] : /* istanbul ignore next */ []));
+        this.addOpen = signal(false, ...(ngDevMode ? [{ debugName: "addOpen" }] : /* istanbul ignore next */ []));
         this.copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
         this.finding = signal(false, ...(ngDevMode ? [{ debugName: "finding" }] : /* istanbul ignore next */ []));
         this.fq = signal('', ...(ngDevMode ? [{ debugName: "fq" }] : /* istanbul ignore next */ []));
@@ -1343,6 +1362,17 @@ class RepoHomePage extends RepoPage {
             </nav>
             <span class="o-r"></span>
             <button type="button" class="o-btn o-sm" (click)="openFinder()">Go to file <span class="o-kbd">T</span></button>
+            @if (canWrite()) {
+              <span class="anchor add">
+                <button type="button" class="o-btn o-sm" (click)="addOpen.set(!addOpen())" [attr.aria-expanded]="addOpen()" aria-haspopup="menu" data-testid="add-file">Add file ⌄</button>
+                @if (addOpen()) {
+                  <div class="o-menu" role="menu" style="right:0;top:34px;width:200px">
+                    <a role="menuitem" [routerLink]="link('new')" [queryParams]="{ ref: ref() || null, path: path() || null }" data-testid="add-new">Create new file</a>
+                    <a role="menuitem" [routerLink]="link('upload')" [queryParams]="{ ref: ref() || null, path: path() || null }" data-testid="add-upload">Upload files</a>
+                  </div>
+                }
+              </span>
+            }
             <span class="anchor">
               <button type="button" class="o-btn o-sm o-pri" (click)="cloneOpen.set(!cloneOpen())" [attr.aria-expanded]="cloneOpen()" aria-haspopup="dialog" data-testid="clone-menu">Code ⌄</button>
               @if (cloneOpen()) {
@@ -1463,6 +1493,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             </nav>
             <span class="o-r"></span>
             <button type="button" class="o-btn o-sm" (click)="openFinder()">Go to file <span class="o-kbd">T</span></button>
+            @if (canWrite()) {
+              <span class="anchor add">
+                <button type="button" class="o-btn o-sm" (click)="addOpen.set(!addOpen())" [attr.aria-expanded]="addOpen()" aria-haspopup="menu" data-testid="add-file">Add file ⌄</button>
+                @if (addOpen()) {
+                  <div class="o-menu" role="menu" style="right:0;top:34px;width:200px">
+                    <a role="menuitem" [routerLink]="link('new')" [queryParams]="{ ref: ref() || null, path: path() || null }" data-testid="add-new">Create new file</a>
+                    <a role="menuitem" [routerLink]="link('upload')" [queryParams]="{ ref: ref() || null, path: path() || null }" data-testid="add-upload">Upload files</a>
+                  </div>
+                }
+              </span>
+            }
             <span class="anchor">
               <button type="button" class="o-btn o-sm o-pri" (click)="cloneOpen.set(!cloneOpen())" [attr.aria-expanded]="cloneOpen()" aria-haspopup="dialog" data-testid="clone-menu">Code ⌄</button>
               @if (cloneOpen()) {
@@ -1546,6 +1587,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['document:keydown', ['$event']]
             }] } });
 
+/** Whether a branch protection pattern names the branch (as code's protect.Match: * within a segment, ** across). */
+function matchesPattern(pattern, branch) {
+    const seg = (p) => '^' + p.split('*').map((x) => x.replace(/[.+?^${}()|[\]\\]/g, '\\$&')).join('[^/]*') + '$';
+    const pat = pattern.split('/');
+    const name = branch.split('/');
+    const go = (i, j) => {
+        if (i === pat.length)
+            return j === name.length;
+        if (pat[i] === '**') {
+            if (i === pat.length - 1)
+                return j < name.length;
+            for (let k = j; k <= name.length; k++)
+                if (go(i + 1, k))
+                    return true;
+            return false;
+        }
+        return j < name.length && new RegExp(seg(pat[i])).test(name[j]) && go(i + 1, j + 1);
+    };
+    return go(0, 0);
+}
+// The web editor's commit box (prototype code_file "Commit and open PR", DEV-13): a message, and
+// either the branch itself or a new branch with a pull request. A branch whose rules block direct
+// pushes only offers the second.
+class CommitBox {
+    constructor() {
+        this.api = inject(CodeApi);
+        this.host = inject(CodeHost);
+        this.repo = input.required(...(ngDevMode ? [{ debugName: "repo" }] : /* istanbul ignore next */ []));
+        this.branch = input.required(...(ngDevMode ? [{ debugName: "branch" }] : /* istanbul ignore next */ []));
+        this.defaultMessage = input('', ...(ngDevMode ? [{ debugName: "defaultMessage" }] : /* istanbul ignore next */ []));
+        this.busy = input(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.commit = output();
+        this.cancel = output();
+        this.message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        this.toNew = signal(false, ...(ngDevMode ? [{ debugName: "toNew" }] : /* istanbul ignore next */ []));
+        this.newBranch = signal('', ...(ngDevMode ? [{ debugName: "newBranch" }] : /* istanbul ignore next */ []));
+        this.rules = signal([], ...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
+        this.blocked = computed(() => this.rules().some((r) => r.blockDirectPush && matchesPattern(r.pattern, this.branch())), ...(ngDevMode ? [{ debugName: "blocked" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const m = this.defaultMessage();
+            untracked(() => this.message.set(m));
+        });
+        effect(() => {
+            const repo = this.repo();
+            const p = this.host.project();
+            if (!p || !repo)
+                return;
+            untracked(() => {
+                this.api.protections(p.id, repo).subscribe({ next: (r) => this.rules.set(r), error: () => undefined });
+                const me = (this.host.people().find((x) => x.id === this.host.meId())?.name || 'patch').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'patch';
+                this.newBranch.set(`${me}/patch-${Math.floor(Date.now() / 1000) % 100000}`);
+            });
+        });
+    }
+    send() {
+        const toNew = this.toNew() || this.blocked();
+        this.commit.emit({ message: this.message().trim(), newBranch: toNew ? this.newBranch().trim() : undefined });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CommitBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: CommitBox, isStandalone: true, selector: "o-commit-box", inputs: { repo: { classPropertyName: "repo", publicName: "repo", isSignal: true, isRequired: true, transformFunction: null }, branch: { classPropertyName: "branch", publicName: "branch", isSignal: true, isRequired: true, transformFunction: null }, defaultMessage: { classPropertyName: "defaultMessage", publicName: "defaultMessage", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", cancel: "cancel" }, ngImport: i0, template: `
+    <div class="o-col" style="gap:10px" data-testid="commit-box">
+      @if (blocked()) {<div class="o-note o-blu">Your change is committed to a new branch with a pull request because <b>{{ branch() }}</b> is protected.</div>}
+      <div class="o-fld"><label for="cb-msg">Commit message</label><input id="cb-msg" class="o-in" [ngModel]="message()" (ngModelChange)="message.set($event)" data-testid="commit-message" /></div>
+      @if (!blocked()) {
+        <label class="o-flex o-sm"><input type="radio" name="cb-where" [checked]="!toNew()" (change)="toNew.set(false)" /> Commit directly to <b class="o-mono">{{ branch() }}</b></label>
+        <label class="o-flex o-sm"><input type="radio" name="cb-where" [checked]="toNew()" (change)="toNew.set(true)" data-testid="commit-new-branch" /> Create a new branch and open a pull request</label>
+      }
+      @if (toNew() || blocked()) {
+        <div class="o-flex o-sm"><span class="o-faint">→ new branch</span><input class="o-in o-sm o-mono" style="max-width:260px" aria-label="New branch" [ngModel]="newBranch()" (ngModelChange)="newBranch.set($event)" data-testid="commit-branch" /></div>
+      }
+      <div class="o-flex">
+        <button type="button" class="o-btn o-sm o-r" (click)="cancel.emit()">Cancel</button>
+        <button type="button" class="o-btn o-sm o-pri" [disabled]="busy() || !message().trim() || ((toNew() || blocked()) && !newBranch().trim())" (click)="send()" data-testid="commit-submit">{{ toNew() || blocked() ? 'Commit and open PR' : 'Commit changes' }}</button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CommitBox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-commit-box',
+                    imports: [FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="o-col" style="gap:10px" data-testid="commit-box">
+      @if (blocked()) {<div class="o-note o-blu">Your change is committed to a new branch with a pull request because <b>{{ branch() }}</b> is protected.</div>}
+      <div class="o-fld"><label for="cb-msg">Commit message</label><input id="cb-msg" class="o-in" [ngModel]="message()" (ngModelChange)="message.set($event)" data-testid="commit-message" /></div>
+      @if (!blocked()) {
+        <label class="o-flex o-sm"><input type="radio" name="cb-where" [checked]="!toNew()" (change)="toNew.set(false)" /> Commit directly to <b class="o-mono">{{ branch() }}</b></label>
+        <label class="o-flex o-sm"><input type="radio" name="cb-where" [checked]="toNew()" (change)="toNew.set(true)" data-testid="commit-new-branch" /> Create a new branch and open a pull request</label>
+      }
+      @if (toNew() || blocked()) {
+        <div class="o-flex o-sm"><span class="o-faint">→ new branch</span><input class="o-in o-sm o-mono" style="max-width:260px" aria-label="New branch" [ngModel]="newBranch()" (ngModelChange)="newBranch.set($event)" data-testid="commit-branch" /></div>
+      }
+      <div class="o-flex">
+        <button type="button" class="o-btn o-sm o-r" (click)="cancel.emit()">Cancel</button>
+        <button type="button" class="o-btn o-sm o-pri" [disabled]="busy() || !message().trim() || ((toNew() || blocked()) && !newBranch().trim())" (click)="send()" data-testid="commit-submit">{{ toNew() || blocked() ? 'Commit and open PR' : 'Commit changes' }}</button>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { repo: [{ type: i0.Input, args: [{ isSignal: true, alias: "repo", required: true }] }], branch: [{ type: i0.Input, args: [{ isSignal: true, alias: "branch", required: true }] }], defaultMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMessage", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
 // /{org}/{project}/code/{repo}/blob?ref=&path= (prototype "code_file"): one file, highlighted, with
 // Markdown preview, blame, raw, copy and download; a line number links to that line (#L12).
 class FilePage extends RepoPage {
@@ -1572,6 +1716,17 @@ class FilePage extends RepoPage {
                 return '';
             return [b.binary ? '' : `${b.lineCount} lines`, size(b.size), b.language ?? ''].filter(Boolean).join(' · ');
         }, ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+        this.mode = signal('', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.text = signal(null, ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : /* istanbul ignore next */ []));
+        /** The branch the view is on ('' for a tag or a commit, which cannot take commits). */
+        this.branch = computed(() => {
+            const r = this.repo();
+            const ref = this.ref() || r?.defaultBranch || '';
+            return this.branches().includes(ref) ? ref : '';
+        }, ...(ngDevMode ? [{ debugName: "branch" }] : /* istanbul ignore next */ []));
+        this.editable = computed(() => this.canWrite() && !!this.branch(), ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
         this.route.queryParamMap.subscribe((q) => {
             this.ref.set(q.get('ref') ?? '');
             this.path.set(q.get('path') ?? '');
@@ -1583,6 +1738,60 @@ class FilePage extends RepoPage {
     }
     onRepo(r) {
         this.load(r);
+        this.api.refs(this.projectId(), r.name, 'branch').subscribe({ next: (b) => this.branches.set(b.map((x) => x.name)), error: () => undefined });
+    }
+    startEdit() {
+        const r = this.repo();
+        if (!r)
+            return;
+        this.mode.set('edit');
+        this.text.set(null);
+        this.api.blob(this.projectId(), r.name, this.branch(), this.path(), true).subscribe({
+            next: (b) => {
+                if (b.text === undefined) {
+                    this.mode.set('');
+                    this.error.set('This file cannot be edited in the browser.');
+                    return;
+                }
+                this.blob.set(b);
+                this.text.set(b.text);
+            },
+            error: (e) => { this.mode.set(''); this.error.set(apiMessage(e, 'Could not open the file.')); },
+        });
+    }
+    /** Commits the edit (or the delete), onto the branch or onto a new branch with a pull request. */
+    save(c, del = false) {
+        const r = this.repo();
+        const b = this.blob();
+        if (!r || !b)
+            return;
+        const body = c.newBranch
+            ? { branch: c.newBranch, from: this.branch(), message: c.message, pull: {} }
+            : { branch: this.branch(), expect: b.commit, message: c.message };
+        if (del)
+            body.deletes = [b.path];
+        else
+            body.files = { [b.path]: this.text() ?? '' };
+        this.busy.set(true);
+        this.error.set('');
+        this.api.commitFiles(this.projectId(), r.name, body).subscribe({
+            next: (res) => {
+                this.busy.set(false);
+                this.mode.set('');
+                if (res.pull) {
+                    void this.router.navigate(this.link('pull/' + res.pull));
+                    return;
+                }
+                if (del) {
+                    void this.router.navigate(this.link(), { queryParams: { ref: res.branch, path: b.path.split('/').slice(0, -1).join('/') || null } });
+                    return;
+                }
+                this.note.set(`Committed ${res.commit.short} to ${res.branch}.`);
+                void this.router.navigate(this.link('blob'), { queryParams: { ref: res.branch, path: b.path } });
+                this.load(r);
+            },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not commit.')); },
+        });
     }
     pickRef(ref) {
         void this.router.navigate(this.link('blob'), { queryParams: { ref, path: this.path() } });
@@ -1640,6 +1849,7 @@ class FilePage extends RepoPage {
           </nav>
         </div>
         @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+        @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
         @if (blob(); as b) {
           <div class="o-card">
             @if (b.lastCommit; as lc) {
@@ -1659,8 +1869,26 @@ class FilePage extends RepoPage {
                 @if (b.rawUrl) {<a class="o-btn o-xs" [href]="b.rawUrl" target="_blank" rel="noopener">Raw</a>}
                 @if (!b.binary) {<button type="button" class="o-btn o-xs" (click)="copyText()">{{ copied() ? 'Copied' : 'Copy' }}</button>}
                 @if (b.downloadUrl) {<a class="o-btn o-xs" [href]="b.downloadUrl">Download</a>}
+                @if (editable()) {
+                  @if (!b.binary && !b.truncated) {<button type="button" class="o-btn o-xs" (click)="startEdit()" [disabled]="mode() !== ''" data-testid="file-edit">Edit</button>}
+                  <button type="button" class="o-btn o-xs" (click)="mode.set('delete')" [disabled]="mode() !== ''" data-testid="file-delete">Delete</button>
+                }
               </span>
             </div>
+            @if (mode() === 'edit') {
+              <div class="o-cb o-col" style="gap:10px;background:var(--o-well);border-bottom:1px solid var(--o-line-soft)">
+                @if (text() === null) {<span class="o-faint o-sm">Loading the file…</span>} @else {
+                  <textarea class="o-in o-mono" rows="16" style="font-size:12px;height:auto;padding:8px 10px" aria-label="File contents" [ngModel]="text()" (ngModelChange)="text.set($event)" data-testid="file-text"></textarea>
+                  <o-commit-box [repo]="r.name" [branch]="branch()" [defaultMessage]="'Update ' + b.name" [busy]="busy()" (commit)="save($event)" (cancel)="mode.set('')" />
+                }
+              </div>
+            }
+            @if (mode() === 'delete') {
+              <div class="o-cb o-col" style="gap:10px;background:var(--o-well);border-bottom:1px solid var(--o-line-soft)">
+                <span class="o-sm">Delete <b class="o-mono">{{ b.path }}</b> from <b class="o-mono">{{ branch() }}</b>?</span>
+                <o-commit-box [repo]="r.name" [branch]="branch()" [defaultMessage]="'Delete ' + b.name" [busy]="busy()" (commit)="save($event, true)" (cancel)="mode.set('')" />
+              </div>
+            }
             @if (b.image && b.rawUrl) {
               <div class="o-cb" style="text-align:center"><img [src]="b.rawUrl" [alt]="b.name" style="max-width:100%" /></div>
             } @else if (b.binary || b.truncated) {
@@ -1687,11 +1915,11 @@ class FilePage extends RepoPage {
         <div class="o-card o-empty"><p>{{ error() }}</p></div>
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{text-decoration:none}.o-btn.o-on{background:var(--o-tx);border-color:var(--o-tx);color:var(--o-acc-fg)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: RefPicker, selector: "o-ref-picker", inputs: ["repo", "current"], outputs: ["picked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host ::ng-deep [class^=tk-k]{color:var(--o-tk-k)}:host ::ng-deep [class^=tk-s],:host ::ng-deep [class^=tk-l]{color:var(--o-tk-s)}:host ::ng-deep [class^=tk-c]{color:var(--o-tk-c);font-style:italic}:host ::ng-deep [class^=tk-m]{color:var(--o-tk-n)}:host ::ng-deep .tk-nf,:host ::ng-deep .tk-nx,:host ::ng-deep .tk-fm{color:var(--o-tk-f)}:host ::ng-deep .tk-nb,:host ::ng-deep .tk-nt,:host ::ng-deep .tk-bp{color:var(--o-tk-p)}:host ::ng-deep .tk-gi{color:var(--o-add)}:host ::ng-deep .tk-gd{color:var(--o-bad-tx)}\n", ".o-ln .o-n{text-decoration:none}.o-btn.o-on{background:var(--o-tx);border-color:var(--o-tx);color:var(--o-acc-fg)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: RefPicker, selector: "o-ref-picker", inputs: ["repo", "current"], outputs: ["picked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommitBox, selector: "o-commit-box", inputs: ["repo", "branch", "defaultMessage", "busy"], outputs: ["commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FilePage, decorators: [{
             type: Component,
-            args: [{ selector: 'o-code-file', imports: [RouterLink, RefPicker], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'o-code-file', imports: [RouterLink, RefPicker, FormsModule, CommitBox], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="o-page o-wide">
       @if (repo(); as r) {
         <div class="o-flex o-wrap">
@@ -1705,6 +1933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           </nav>
         </div>
         @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+        @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
         @if (blob(); as b) {
           <div class="o-card">
             @if (b.lastCommit; as lc) {
@@ -1724,8 +1953,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 @if (b.rawUrl) {<a class="o-btn o-xs" [href]="b.rawUrl" target="_blank" rel="noopener">Raw</a>}
                 @if (!b.binary) {<button type="button" class="o-btn o-xs" (click)="copyText()">{{ copied() ? 'Copied' : 'Copy' }}</button>}
                 @if (b.downloadUrl) {<a class="o-btn o-xs" [href]="b.downloadUrl">Download</a>}
+                @if (editable()) {
+                  @if (!b.binary && !b.truncated) {<button type="button" class="o-btn o-xs" (click)="startEdit()" [disabled]="mode() !== ''" data-testid="file-edit">Edit</button>}
+                  <button type="button" class="o-btn o-xs" (click)="mode.set('delete')" [disabled]="mode() !== ''" data-testid="file-delete">Delete</button>
+                }
               </span>
             </div>
+            @if (mode() === 'edit') {
+              <div class="o-cb o-col" style="gap:10px;background:var(--o-well);border-bottom:1px solid var(--o-line-soft)">
+                @if (text() === null) {<span class="o-faint o-sm">Loading the file…</span>} @else {
+                  <textarea class="o-in o-mono" rows="16" style="font-size:12px;height:auto;padding:8px 10px" aria-label="File contents" [ngModel]="text()" (ngModelChange)="text.set($event)" data-testid="file-text"></textarea>
+                  <o-commit-box [repo]="r.name" [branch]="branch()" [defaultMessage]="'Update ' + b.name" [busy]="busy()" (commit)="save($event)" (cancel)="mode.set('')" />
+                }
+              </div>
+            }
+            @if (mode() === 'delete') {
+              <div class="o-cb o-col" style="gap:10px;background:var(--o-well);border-bottom:1px solid var(--o-line-soft)">
+                <span class="o-sm">Delete <b class="o-mono">{{ b.path }}</b> from <b class="o-mono">{{ branch() }}</b>?</span>
+                <o-commit-box [repo]="r.name" [branch]="branch()" [defaultMessage]="'Delete ' + b.name" [busy]="busy()" (commit)="save($event, true)" (cancel)="mode.set('')" />
+              </div>
+            }
             @if (b.image && b.rawUrl) {
               <div class="o-cb" style="text-align:center"><img [src]="b.rawUrl" [alt]="b.name" style="max-width:100%" /></div>
             } @else if (b.binary || b.truncated) {
@@ -3000,9 +3247,46 @@ class RepoSettingsPage extends RepoPage {
             { key: 'dismissStaleApprovals', label: 'Dismiss stale approvals', hint: 'A new commit dismisses approvals given on an older one.' },
             { key: 'requireUpToDate', label: 'Require branches to be up to date', hint: 'The branch must contain the target’s latest commit before it merges.' },
         ];
+        this.collabs = signal([], ...(ngDevMode ? [{ debugName: "collabs" }] : /* istanbul ignore next */ []));
+        this.perms = [{ id: 'read', label: 'Read' }, { id: 'write', label: 'Write' }, { id: 'maintain', label: 'Maintain' }];
+        this.addable = computed(() => this.host.people().filter((p) => !this.collabs().some((c) => c.userId === p.id)), ...(ngDevMode ? [{ debugName: "addable" }] : /* istanbul ignore next */ []));
+        this.newCollab = '';
+        this.newPerm = 'write';
         this.route.queryParamMap.subscribe((q) => this.section.set(q.get('section') || 'general'));
     }
+    roleLabel(r) {
+        return r ? r[0].toUpperCase() + r.slice(1) : 'Not in the project';
+    }
+    loadCollabs(r) {
+        if (!this.canAdmin())
+            return;
+        this.api.collaborators(this.projectId(), r.name).subscribe({ next: (l) => this.collabs.set(l), error: () => undefined });
+    }
+    setCollab(userId, permission, adding = false) {
+        const r = this.repo();
+        if (!r || !userId)
+            return;
+        this.busy.set(true);
+        this.error.set('');
+        this.api.setCollaborator(this.projectId(), r.name, userId, permission).subscribe({
+            next: () => { this.busy.set(false); if (adding) {
+                this.newCollab = '';
+                this.note.set(`${this.people().name(userId)} now has ${permission} on ${r.name}.`);
+            } this.loadCollabs(r); },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not change the access.')); this.loadCollabs(r); },
+        });
+    }
+    removeCollab(userId) {
+        const r = this.repo();
+        if (!r)
+            return;
+        this.api.removeCollaborator(this.projectId(), r.name, userId).subscribe({
+            next: () => { this.note.set(`${this.people().name(userId)} is no longer a collaborator.`); this.loadCollabs(r); },
+            error: (e) => this.error.set(apiMessage(e, 'Could not remove the collaborator.')),
+        });
+    }
     onRepo(r) {
+        this.loadCollabs(r);
         this.g = { name: r.name, description: r.description, visibility: r.visibility, defaultBranch: r.defaultBranch, mergeMethods: [...(r.mergeMethods ?? [])], deleteBranchOnMerge: r.deleteBranchOnMerge };
         if (!r.empty)
             this.api.refs(this.projectId(), r.name, 'branch').subscribe({ next: (b) => this.branches.set(b), error: () => undefined });
@@ -3055,7 +3339,11 @@ class RepoSettingsPage extends RepoPage {
             return;
         this.busy.set(true);
         const renamed = this.g.name.trim() !== r.name;
-        this.api.update(this.projectId(), r.name, { name: this.g.name.trim(), description: this.g.description, visibility: this.g.visibility, defaultBranch: this.g.defaultBranch, mergeMethods: this.g.mergeMethods, deleteBranchOnMerge: this.g.deleteBranchOnMerge }).subscribe({
+        // a maintain collaborator sends what they may change; the name and visibility stay a Maintainer's
+        const body = this.canAdmin()
+            ? { name: this.g.name.trim(), description: this.g.description, visibility: this.g.visibility, defaultBranch: this.g.defaultBranch, mergeMethods: this.g.mergeMethods, deleteBranchOnMerge: this.g.deleteBranchOnMerge }
+            : { description: this.g.description, defaultBranch: this.g.defaultBranch, mergeMethods: this.g.mergeMethods, deleteBranchOnMerge: this.g.deleteBranchOnMerge };
+        this.api.update(this.projectId(), r.name, body).subscribe({
             next: (n) => {
                 this.busy.set(false);
                 this.note.set('Saved.');
@@ -3120,7 +3408,7 @@ class RepoSettingsPage extends RepoPage {
             <span class="o-lbl" style="padding-top:0">{{ r.name }}</span>
             <button type="button" [class.o-on]="section() === 'general'" (click)="go('general')">General</button>
             <button type="button" [class.o-on]="section() === 'protect'" (click)="go('protect')">Branch protection</button>
-            <button type="button" [class.o-on]="section() === 'collab'" (click)="go('collab')">Collaborators<b class="o-ph-tag o-ga o-r">GA</b></button>
+            <button type="button" [class.o-on]="section() === 'collab'" (click)="go('collab')">Collaborators</button>
             <button type="button" [class.o-on]="section() === 'danger'" (click)="go('danger')">Danger zone</button>
           </nav>
           <div class="o-col" style="gap:16px;min-width:0">
@@ -3132,9 +3420,9 @@ class RepoSettingsPage extends RepoPage {
                 <form class="o-card o-cb o-form" (ngSubmit)="saveGeneral()">
                   <div class="o-g2">
                     <div class="o-fld"><label for="rs-name">Repository name</label><input id="rs-name" class="o-in o-mono" name="name" [(ngModel)]="g.name" [disabled]="!canAdmin()" /><span class="o-hint">Renaming keeps the old clone URL working as a redirect.</span></div>
-                    <div class="o-fld"><label for="rs-def">Default branch</label><select id="rs-def" class="o-in" name="def" [(ngModel)]="g.defaultBranch" [disabled]="!canAdmin()">@for (b of branches(); track b.name) {<option [value]="b.name">{{ b.name }}</option>}@if (!branches().length) {<option [value]="r.defaultBranch">{{ r.defaultBranch }}</option>}</select></div>
+                    <div class="o-fld"><label for="rs-def">Default branch</label><select id="rs-def" class="o-in" name="def" [(ngModel)]="g.defaultBranch" [disabled]="!canMaintain()">@for (b of branches(); track b.name) {<option [value]="b.name">{{ b.name }}</option>}@if (!branches().length) {<option [value]="r.defaultBranch">{{ r.defaultBranch }}</option>}</select></div>
                   </div>
-                  <div class="o-fld"><label for="rs-desc">Description</label><input id="rs-desc" class="o-in" name="desc" [(ngModel)]="g.description" [disabled]="!canAdmin()" /></div>
+                  <div class="o-fld"><label for="rs-desc">Description</label><input id="rs-desc" class="o-in" name="desc" [(ngModel)]="g.description" [disabled]="!canMaintain()" /></div>
                   <div class="o-fld"><span class="o-lbl" style="padding:0">Visibility</span>
                     <div class="o-g2">
                       <button type="button" class="o-opt" [class.o-on]="g.visibility === 'private'" (click)="g.visibility = 'private'" [disabled]="!canAdmin()"><span class="o-rad" [class.o-on]="g.visibility === 'private'"></span><span class="o-col" style="gap:2px"><b>Private</b><span class="o-faint o-sm">Project members only</span></span></button>
@@ -3142,11 +3430,11 @@ class RepoSettingsPage extends RepoPage {
                     </div>
                   </div>
                   <div class="o-fld"><span class="o-lbl" style="padding:0">Allowed merge methods</span>
-                    @for (m of methods; track m.id) {<label class="o-flex"><input type="checkbox" [checked]="g.mergeMethods.includes(m.id)" (change)="flipMethod(m.id)" [disabled]="!canAdmin()" />{{ m.label }}</label>}
+                    @for (m of methods; track m.id) {<label class="o-flex"><input type="checkbox" [checked]="g.mergeMethods.includes(m.id)" (change)="flipMethod(m.id)" [disabled]="!canMaintain()" />{{ m.label }}</label>}
                   </div>
-                  <div class="o-flex"><button type="button" class="o-tog" role="switch" aria-labelledby="rs-del" [class.o-on]="g.deleteBranchOnMerge" [attr.aria-checked]="g.deleteBranchOnMerge" (click)="g.deleteBranchOnMerge = !g.deleteBranchOnMerge" [disabled]="!canAdmin()"></button><span id="rs-del">Delete head branches after merge</span></div>
+                  <div class="o-flex"><button type="button" class="o-tog" role="switch" aria-labelledby="rs-del" [class.o-on]="g.deleteBranchOnMerge" [attr.aria-checked]="g.deleteBranchOnMerge" (click)="g.deleteBranchOnMerge = !g.deleteBranchOnMerge" [disabled]="!canMaintain()"></button><span id="rs-del">Delete head branches after merge</span></div>
                   <div class="o-flex"><button type="button" class="o-tog o-dis" disabled aria-label="Allow auto-merge"></button>Allow auto-merge when all requirements pass<b class="o-ph-tag o-ga">GA</b></div>
-                  @if (canAdmin()) {<div class="o-flex"><button type="submit" class="o-btn o-dark o-r" [disabled]="busy() || !g.mergeMethods.length">Save</button></div>}
+                  @if (canMaintain()) {<div class="o-flex">@if (!canAdmin()) {<span class="o-faint o-sm">As a maintain collaborator you change these settings; a project Maintainer renames the repository or changes its visibility.</span>}<button type="submit" class="o-btn o-dark o-r" [disabled]="busy() || !g.mergeMethods.length" data-testid="settings-save">Save</button></div>}
                 </form>
               }
               @case ('protect') {
@@ -3183,7 +3471,34 @@ class RepoSettingsPage extends RepoPage {
               }
               @case ('collab') {
                 <h1 class="o-t">Collaborators</h1>
-                <div class="o-card"><div class="o-empty">Access beyond the project role, for one repository, arrives at general availability. Until then, project roles decide who reads and pushes.</div></div>
+                <span class="o-mut">Access beyond the project role, for this repository only.</span>
+                @if (canAdmin()) {
+                  <div class="o-card" style="overflow-x:auto" data-testid="collaborators">
+                    <div class="o-tbl" role="table" aria-label="Collaborators" style="min-width:560px">
+                      <div class="o-thead" role="rowgroup"><div class="o-tr" role="row"><div class="o-th" role="columnheader">Person</div><div class="o-th" role="columnheader">Project role</div><div class="o-th" role="columnheader">Repository access</div><div class="o-th" role="columnheader"></div></div></div>
+                      <div class="o-tbody" role="rowgroup">
+                        @for (cl of collabs(); track cl.userId) {
+                          <div class="o-tr" role="row" [attr.data-testid]="'collab-' + cl.userId">
+                            <div class="o-td" role="cell"><span class="o-flex"><span class="o-av" aria-hidden="true">{{ people().initials(cl.userId) }}</span>{{ people().name(cl.userId) }}@if (cl.projectRole === 'guest') {<span class="o-chip">Guest</span>}</span></div>
+                            <div class="o-td o-mut" role="cell">{{ roleLabel(cl.projectRole) }}</div>
+                            <div class="o-td" role="cell"><select class="o-in o-sm" style="width:auto" [attr.aria-label]="'Repository access for ' + people().name(cl.userId)" [ngModel]="cl.permission" (ngModelChange)="setCollab(cl.userId, $event)">@for (p of perms; track p.id) {<option [value]="p.id">{{ p.label }}</option>}</select></div>
+                            <div class="o-td o-num" role="cell"><button type="button" class="o-btn o-xs o-ghost" (click)="removeCollab(cl.userId)" [attr.aria-label]="'Remove ' + people().name(cl.userId)">Remove</button></div>
+                          </div>
+                        } @empty {
+                          <div class="o-tr" role="row"><div class="o-td o-faint" role="cell" style="grid-column:1 / -1">No collaborators. Project roles decide who reads and pushes.</div></div>
+                        }
+                      </div>
+                    </div>
+                    <div class="o-cf">
+                      <select class="o-in o-sm" style="width:auto" aria-label="Person to add" [(ngModel)]="newCollab"><option value="">Add a person…</option>@for (p of addable(); track p.id) {<option [value]="p.id">{{ p.name || p.email }}</option>}</select>
+                      <select class="o-in o-sm" style="width:auto" aria-label="Access to give" [(ngModel)]="newPerm">@for (p of perms; track p.id) {<option [value]="p.id">{{ p.label }}</option>}</select>
+                      <button type="button" class="o-btn o-sm o-dark" [disabled]="!newCollab || busy()" (click)="setCollab(newCollab, newPerm, true)" data-testid="collab-add">Add</button>
+                      <span class="o-faint o-xs">They need to be in the project (any role, Guest included). Write pushes and opens pull requests here; maintain also changes this repository's settings.</span>
+                    </div>
+                  </div>
+                } @else {
+                  <div class="o-card"><div class="o-empty">{{ repo()?.collaborator ? 'You have ' + repo()?.collaborator + ' on this repository as a collaborator. ' : '' }}Project Maintainers manage collaborators.</div></div>
+                }
               }
               @case ('danger') {
                 <h1 class="o-t">Danger zone</h1>
@@ -3218,7 +3533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             <span class="o-lbl" style="padding-top:0">{{ r.name }}</span>
             <button type="button" [class.o-on]="section() === 'general'" (click)="go('general')">General</button>
             <button type="button" [class.o-on]="section() === 'protect'" (click)="go('protect')">Branch protection</button>
-            <button type="button" [class.o-on]="section() === 'collab'" (click)="go('collab')">Collaborators<b class="o-ph-tag o-ga o-r">GA</b></button>
+            <button type="button" [class.o-on]="section() === 'collab'" (click)="go('collab')">Collaborators</button>
             <button type="button" [class.o-on]="section() === 'danger'" (click)="go('danger')">Danger zone</button>
           </nav>
           <div class="o-col" style="gap:16px;min-width:0">
@@ -3230,9 +3545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 <form class="o-card o-cb o-form" (ngSubmit)="saveGeneral()">
                   <div class="o-g2">
                     <div class="o-fld"><label for="rs-name">Repository name</label><input id="rs-name" class="o-in o-mono" name="name" [(ngModel)]="g.name" [disabled]="!canAdmin()" /><span class="o-hint">Renaming keeps the old clone URL working as a redirect.</span></div>
-                    <div class="o-fld"><label for="rs-def">Default branch</label><select id="rs-def" class="o-in" name="def" [(ngModel)]="g.defaultBranch" [disabled]="!canAdmin()">@for (b of branches(); track b.name) {<option [value]="b.name">{{ b.name }}</option>}@if (!branches().length) {<option [value]="r.defaultBranch">{{ r.defaultBranch }}</option>}</select></div>
+                    <div class="o-fld"><label for="rs-def">Default branch</label><select id="rs-def" class="o-in" name="def" [(ngModel)]="g.defaultBranch" [disabled]="!canMaintain()">@for (b of branches(); track b.name) {<option [value]="b.name">{{ b.name }}</option>}@if (!branches().length) {<option [value]="r.defaultBranch">{{ r.defaultBranch }}</option>}</select></div>
                   </div>
-                  <div class="o-fld"><label for="rs-desc">Description</label><input id="rs-desc" class="o-in" name="desc" [(ngModel)]="g.description" [disabled]="!canAdmin()" /></div>
+                  <div class="o-fld"><label for="rs-desc">Description</label><input id="rs-desc" class="o-in" name="desc" [(ngModel)]="g.description" [disabled]="!canMaintain()" /></div>
                   <div class="o-fld"><span class="o-lbl" style="padding:0">Visibility</span>
                     <div class="o-g2">
                       <button type="button" class="o-opt" [class.o-on]="g.visibility === 'private'" (click)="g.visibility = 'private'" [disabled]="!canAdmin()"><span class="o-rad" [class.o-on]="g.visibility === 'private'"></span><span class="o-col" style="gap:2px"><b>Private</b><span class="o-faint o-sm">Project members only</span></span></button>
@@ -3240,11 +3555,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     </div>
                   </div>
                   <div class="o-fld"><span class="o-lbl" style="padding:0">Allowed merge methods</span>
-                    @for (m of methods; track m.id) {<label class="o-flex"><input type="checkbox" [checked]="g.mergeMethods.includes(m.id)" (change)="flipMethod(m.id)" [disabled]="!canAdmin()" />{{ m.label }}</label>}
+                    @for (m of methods; track m.id) {<label class="o-flex"><input type="checkbox" [checked]="g.mergeMethods.includes(m.id)" (change)="flipMethod(m.id)" [disabled]="!canMaintain()" />{{ m.label }}</label>}
                   </div>
-                  <div class="o-flex"><button type="button" class="o-tog" role="switch" aria-labelledby="rs-del" [class.o-on]="g.deleteBranchOnMerge" [attr.aria-checked]="g.deleteBranchOnMerge" (click)="g.deleteBranchOnMerge = !g.deleteBranchOnMerge" [disabled]="!canAdmin()"></button><span id="rs-del">Delete head branches after merge</span></div>
+                  <div class="o-flex"><button type="button" class="o-tog" role="switch" aria-labelledby="rs-del" [class.o-on]="g.deleteBranchOnMerge" [attr.aria-checked]="g.deleteBranchOnMerge" (click)="g.deleteBranchOnMerge = !g.deleteBranchOnMerge" [disabled]="!canMaintain()"></button><span id="rs-del">Delete head branches after merge</span></div>
                   <div class="o-flex"><button type="button" class="o-tog o-dis" disabled aria-label="Allow auto-merge"></button>Allow auto-merge when all requirements pass<b class="o-ph-tag o-ga">GA</b></div>
-                  @if (canAdmin()) {<div class="o-flex"><button type="submit" class="o-btn o-dark o-r" [disabled]="busy() || !g.mergeMethods.length">Save</button></div>}
+                  @if (canMaintain()) {<div class="o-flex">@if (!canAdmin()) {<span class="o-faint o-sm">As a maintain collaborator you change these settings; a project Maintainer renames the repository or changes its visibility.</span>}<button type="submit" class="o-btn o-dark o-r" [disabled]="busy() || !g.mergeMethods.length" data-testid="settings-save">Save</button></div>}
                 </form>
               }
               @case ('protect') {
@@ -3281,7 +3596,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
               }
               @case ('collab') {
                 <h1 class="o-t">Collaborators</h1>
-                <div class="o-card"><div class="o-empty">Access beyond the project role, for one repository, arrives at general availability. Until then, project roles decide who reads and pushes.</div></div>
+                <span class="o-mut">Access beyond the project role, for this repository only.</span>
+                @if (canAdmin()) {
+                  <div class="o-card" style="overflow-x:auto" data-testid="collaborators">
+                    <div class="o-tbl" role="table" aria-label="Collaborators" style="min-width:560px">
+                      <div class="o-thead" role="rowgroup"><div class="o-tr" role="row"><div class="o-th" role="columnheader">Person</div><div class="o-th" role="columnheader">Project role</div><div class="o-th" role="columnheader">Repository access</div><div class="o-th" role="columnheader"></div></div></div>
+                      <div class="o-tbody" role="rowgroup">
+                        @for (cl of collabs(); track cl.userId) {
+                          <div class="o-tr" role="row" [attr.data-testid]="'collab-' + cl.userId">
+                            <div class="o-td" role="cell"><span class="o-flex"><span class="o-av" aria-hidden="true">{{ people().initials(cl.userId) }}</span>{{ people().name(cl.userId) }}@if (cl.projectRole === 'guest') {<span class="o-chip">Guest</span>}</span></div>
+                            <div class="o-td o-mut" role="cell">{{ roleLabel(cl.projectRole) }}</div>
+                            <div class="o-td" role="cell"><select class="o-in o-sm" style="width:auto" [attr.aria-label]="'Repository access for ' + people().name(cl.userId)" [ngModel]="cl.permission" (ngModelChange)="setCollab(cl.userId, $event)">@for (p of perms; track p.id) {<option [value]="p.id">{{ p.label }}</option>}</select></div>
+                            <div class="o-td o-num" role="cell"><button type="button" class="o-btn o-xs o-ghost" (click)="removeCollab(cl.userId)" [attr.aria-label]="'Remove ' + people().name(cl.userId)">Remove</button></div>
+                          </div>
+                        } @empty {
+                          <div class="o-tr" role="row"><div class="o-td o-faint" role="cell" style="grid-column:1 / -1">No collaborators. Project roles decide who reads and pushes.</div></div>
+                        }
+                      </div>
+                    </div>
+                    <div class="o-cf">
+                      <select class="o-in o-sm" style="width:auto" aria-label="Person to add" [(ngModel)]="newCollab"><option value="">Add a person…</option>@for (p of addable(); track p.id) {<option [value]="p.id">{{ p.name || p.email }}</option>}</select>
+                      <select class="o-in o-sm" style="width:auto" aria-label="Access to give" [(ngModel)]="newPerm">@for (p of perms; track p.id) {<option [value]="p.id">{{ p.label }}</option>}</select>
+                      <button type="button" class="o-btn o-sm o-dark" [disabled]="!newCollab || busy()" (click)="setCollab(newCollab, newPerm, true)" data-testid="collab-add">Add</button>
+                      <span class="o-faint o-xs">They need to be in the project (any role, Guest included). Write pushes and opens pull requests here; maintain also changes this repository's settings.</span>
+                    </div>
+                  </div>
+                } @else {
+                  <div class="o-card"><div class="o-empty">{{ repo()?.collaborator ? 'You have ' + repo()?.collaborator + ' on this repository as a collaborator. ' : '' }}Project Maintainers manage collaborators.</div></div>
+                }
               }
               @case ('danger') {
                 <h1 class="o-t">Danger zone</h1>
@@ -3684,6 +4026,169 @@ function sortTags(tags) {
     return [...tags].sort((a, b) => when(b) - when(a) || b.name.localeCompare(a.name, undefined, { numeric: true }));
 }
 
+/** Uploads in one commit stay under the server's 25 MB request limit (base64 grows them by a third). */
+const MAX_UPLOAD = 18 * 1024 * 1024;
+// /{org}/{project}/code/{repo}/new?ref=&path= and /upload (DEV-13): a new file written in the
+// browser, or files uploaded from the computer, committed to the branch or to a new branch with a
+// pull request (protection applies).
+class NewFilePage extends RepoPage {
+    constructor() {
+        super();
+        this.router = inject(Router);
+        this.upload = signal(false, ...(ngDevMode ? [{ debugName: "upload" }] : /* istanbul ignore next */ []));
+        this.ref = signal('', ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
+        this.uploads = signal([], ...(ngDevMode ? [{ debugName: "uploads" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.filePath = '';
+        this.content = '';
+        this.dir = '';
+        this.branch = computed(() => this.ref() || this.repo()?.defaultBranch || 'main', ...(ngDevMode ? [{ debugName: "branch" }] : /* istanbul ignore next */ []));
+        this.defaultMessage = computed(() => (this.upload() ? 'Add files via upload' : 'Create a file'), ...(ngDevMode ? [{ debugName: "defaultMessage" }] : /* istanbul ignore next */ []));
+        this.fmt = size;
+        this.upload.set(this.route.snapshot.url.at(-1)?.path === 'upload');
+        this.route.queryParamMap.subscribe((q) => {
+            this.ref.set(q.get('ref') ?? '');
+            const p = q.get('path') ?? '';
+            this.dir = p;
+            this.filePath = p ? p.replace(/\/+$/, '') + '/' : '';
+        });
+    }
+    onRepo(_) { }
+    async pick(ev) {
+        const files = Array.from(ev.target.files ?? []);
+        const out = [...this.uploads()];
+        for (const f of files) {
+            const buf = new Uint8Array(await f.arrayBuffer());
+            let bin = '';
+            for (let i = 0; i < buf.length; i += 0x8000)
+                bin += String.fromCharCode(...buf.subarray(i, i + 0x8000));
+            out.push({ name: f.name, size: f.size, b64: btoa(bin) });
+        }
+        if (out.reduce((a, u) => a + u.size, 0) > MAX_UPLOAD) {
+            this.error.set('One upload is at most 18 MB; commit large files with Git.');
+            return;
+        }
+        this.error.set('');
+        this.uploads.set(out);
+    }
+    shown(name) {
+        const prefix = this.dir.trim().replace(/^\/+|\/+$/g, '');
+        return (prefix ? prefix + '/' : '') + name;
+    }
+    drop(name) {
+        this.uploads.set(this.uploads().filter((u) => u.name !== name));
+    }
+    back() {
+        void this.router.navigate(this.link(), { queryParams: { ref: this.ref() || null, path: this.dir || null } });
+    }
+    save(c) {
+        const r = this.repo();
+        if (!r)
+            return;
+        const body = c.newBranch ? { branch: c.newBranch, from: this.branch(), message: c.message, pull: {} } : { branch: this.branch(), message: c.message };
+        if (this.upload()) {
+            if (!this.uploads().length) {
+                this.error.set('Choose files to upload.');
+                return;
+            }
+            const prefix = this.dir.trim().replace(/^\/+|\/+$/g, '');
+            body.uploads = Object.fromEntries(this.uploads().map((u) => [(prefix ? prefix + '/' : '') + u.name, u.b64]));
+        }
+        else {
+            const p = this.filePath.trim().replace(/^\/+/, '');
+            if (!p || p.endsWith('/')) {
+                this.error.set('Name the file.');
+                return;
+            }
+            body.files = { [p]: this.content };
+        }
+        this.busy.set(true);
+        this.error.set('');
+        this.api.commitFiles(this.projectId(), r.name, body).subscribe({
+            next: (res) => {
+                this.busy.set(false);
+                if (res.pull) {
+                    void this.router.navigate(this.link('pull/' + res.pull));
+                    return;
+                }
+                if (!this.upload()) {
+                    void this.router.navigate(this.link('blob'), { queryParams: { ref: res.branch, path: this.filePath.trim().replace(/^\/+/, '') } });
+                    return;
+                }
+                void this.router.navigate(this.link(), { queryParams: { ref: res.branch, path: this.dir.trim() || null } });
+            },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not commit.')); },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NewFilePage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: NewFilePage, isStandalone: true, selector: "o-code-new-file", usesInheritance: true, ngImport: i0, template: `
+    <div class="o-page o-wide">
+      @if (repo(); as r) {
+        <div class="o-ph"><div class="o-col"><span class="o-eyebrow">{{ r.name }} · {{ branch() }}</span><h1 class="o-t">{{ upload() ? 'Upload files' : 'Create a file' }}</h1></div></div>
+        @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+        @if (!canWrite()) {
+          <div class="o-card"><div class="o-empty">Your role cannot change this repository.</div></div>
+        } @else {
+          <div class="o-card">
+            <div class="o-cb o-col" style="gap:12px">
+              @if (upload()) {
+                <div class="o-fld"><label for="nf-dir">Into folder</label><input id="nf-dir" class="o-in o-mono" [(ngModel)]="dir" placeholder="(the repository root)" /></div>
+                <div class="o-fld"><label for="nf-files">Files</label><input id="nf-files" type="file" multiple class="o-in" (change)="pick($event)" data-testid="upload-files" /></div>
+                @for (u of uploads(); track u.name) {<div class="o-row o-sm"><span class="o-mono">{{ shown(u.name) }}</span><span class="o-r o-faint">{{ fmt(u.size) }}</span><button type="button" class="o-lnk" (click)="drop(u.name)" [attr.aria-label]="'Remove ' + u.name">×</button></div>}
+              } @else {
+                <div class="o-fld"><label for="nf-path">File path</label><input id="nf-path" class="o-in o-mono" [(ngModel)]="filePath" placeholder="docs/notes.md" data-testid="new-file-path" /></div>
+                <textarea class="o-in o-mono" rows="16" style="font-size:12px;height:auto;padding:8px 10px" aria-label="File contents" [(ngModel)]="content" data-testid="new-file-text"></textarea>
+              }
+            </div>
+            <div class="o-cb" style="border-top:1px solid var(--o-line-soft)">
+              <o-commit-box [repo]="r.name" [branch]="branch()" [defaultMessage]="defaultMessage()" [busy]="busy()" (commit)="save($event)" (cancel)="back()" />
+            </div>
+          </div>
+        }
+      } @else if (error()) {
+        <div class="o-card o-empty"><p>{{ error() }}</p><a class="o-btn" [routerLink]="host.link('code')">All repositories</a></div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CommitBox, selector: "o-commit-box", inputs: ["repo", "branch", "defaultMessage", "busy"], outputs: ["commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: NewFilePage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-code-new-file',
+                    imports: [FormsModule, RouterLink, CommitBox],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="o-page o-wide">
+      @if (repo(); as r) {
+        <div class="o-ph"><div class="o-col"><span class="o-eyebrow">{{ r.name }} · {{ branch() }}</span><h1 class="o-t">{{ upload() ? 'Upload files' : 'Create a file' }}</h1></div></div>
+        @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+        @if (!canWrite()) {
+          <div class="o-card"><div class="o-empty">Your role cannot change this repository.</div></div>
+        } @else {
+          <div class="o-card">
+            <div class="o-cb o-col" style="gap:12px">
+              @if (upload()) {
+                <div class="o-fld"><label for="nf-dir">Into folder</label><input id="nf-dir" class="o-in o-mono" [(ngModel)]="dir" placeholder="(the repository root)" /></div>
+                <div class="o-fld"><label for="nf-files">Files</label><input id="nf-files" type="file" multiple class="o-in" (change)="pick($event)" data-testid="upload-files" /></div>
+                @for (u of uploads(); track u.name) {<div class="o-row o-sm"><span class="o-mono">{{ shown(u.name) }}</span><span class="o-r o-faint">{{ fmt(u.size) }}</span><button type="button" class="o-lnk" (click)="drop(u.name)" [attr.aria-label]="'Remove ' + u.name">×</button></div>}
+              } @else {
+                <div class="o-fld"><label for="nf-path">File path</label><input id="nf-path" class="o-in o-mono" [(ngModel)]="filePath" placeholder="docs/notes.md" data-testid="new-file-path" /></div>
+                <textarea class="o-in o-mono" rows="16" style="font-size:12px;height:auto;padding:8px 10px" aria-label="File contents" [(ngModel)]="content" data-testid="new-file-text"></textarea>
+              }
+            </div>
+            <div class="o-cb" style="border-top:1px solid var(--o-line-soft)">
+              <o-commit-box [repo]="r.name" [branch]="branch()" [defaultMessage]="defaultMessage()" [busy]="busy()" (commit)="save($event)" (cancel)="back()" />
+            </div>
+          </div>
+        }
+      } @else if (error()) {
+        <div class="o-card o-empty"><p>{{ error() }}</p><a class="o-btn" [routerLink]="host.link('code')">All repositories</a></div>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
 /*
  * @chisquare-tech/origine-ngx-apps-code: the Code module's screens (TRD §6.10). The host app provides
  * CodeHost and mounts the pages at /{org}/{project}/code, /code/new, /code/pulls and
@@ -3694,5 +4199,5 @@ function sortTags(tags) {
  * Generated bundle index. Do not edit.
  */
 
-export { BranchesPage, CodeApi, CodeHost, CommitPage, CommitsPage, CurrentRepo, CurrentRepoPage, DiffView, FilePage, NewRepoPage, People, PullPage, PullsPage, RefPicker, ReleasesPage, RepoHomePage, RepoPage, RepoSettingsPage, ReposPage, TOKEN_CSS, ago, apiMessage, checkDot, copy, dayLabel, initials, langColour, pair, shortDate, size };
+export { BranchesPage, CodeApi, CodeHost, CommitBox, CommitPage, CommitsPage, CurrentRepo, CurrentRepoPage, DiffView, FilePage, NewFilePage, NewRepoPage, People, PullPage, PullsPage, RefPicker, ReleasesPage, RepoHomePage, RepoPage, RepoSettingsPage, ReposPage, TOKEN_CSS, ago, apiMessage, checkDot, copy, dayLabel, initials, langColour, matchesPattern, pair, shortDate, size };
 //# sourceMappingURL=chisquare-tech-origine-ngx-apps-code.mjs.map