@chisquare-tech/origine-ngx-apps-code 0.4.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) ?? []));
@@ -1226,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 */ []));
@@ -1354,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()) {
@@ -1474,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()) {
@@ -1557,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 {
@@ -1583,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') ?? '');
@@ -1594,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() } });
@@ -1651,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) {
@@ -1670,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) {
@@ -1698,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">
@@ -1716,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) {
@@ -1735,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) {
@@ -3790,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
@@ -3800,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