@chisquare-tech/origine-ngx-apps-design 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,2940 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, output, signal, computed, viewChild, ChangeDetectionStrategy, Component, effect, untracked, HostListener } from '@angular/core';
+import { ApiService } from '@thescaffold/ngx-core';
+import { map, forkJoin, concat, last } from 'rxjs';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { RouterLink, Router, ActivatedRoute } from '@angular/router';
+import { NgTemplateOutlet } from '@angular/common';
+import { marked } from 'marked';
+
+/**
+ * What the Design screens need from the app that mounts them (cloud/web provides it): where the person
+ * is, who is in the organization, and links inside the project. The library holds no routing or
+ * identity state of its own, so it renders the same in any host.
+ */
+class DesignHost {
+}
+
+const D = 'v1/design';
+const enc = encodeURIComponent;
+const data = (r) => r?.data;
+/** The error message an API refusal carries, or the fallback. */
+function apiMessage(err, fallback = 'Something went wrong. Try again.') {
+    return err?.error?.message || err?.error?.title || err?.message || fallback;
+}
+/** True when the refusal is the version check (someone changed the issue first). */
+function isConflict(err) {
+    return err?.status === 409 || err?.error?.code === 'conflict';
+}
+class DesignApi {
+    constructor() {
+        this.api = inject(ApiService);
+    }
+    statuses(project) {
+        return this.api.get(`${D}/project/${enc(project)}/status`).pipe(map((r) => data(r) ?? []));
+    }
+    board(project, q = {}) {
+        const params = {};
+        if (q.sprint)
+            params['sprint'] = q.sprint;
+        if (q.swimlane)
+            params['swimlane'] = q.swimlane;
+        if (q.filter)
+            params['filter'] = JSON.stringify(q.filter);
+        return this.api.get(`${D}/project/${enc(project)}/board`, params).pipe(map((r) => data(r)));
+    }
+    backlog(project, filter) {
+        return this.api.get(`${D}/project/${enc(project)}/backlog`, filter ? { filter: JSON.stringify(filter) } : undefined).pipe(map((r) => data(r) ?? []));
+    }
+    query(project, q) {
+        return this.api.post(`${D}/project/${enc(project)}/issue/query`, q).pipe(map((r) => data(r) ?? { items: [], total: 0 }));
+    }
+    /** Epics of the project, for pickers and the backlog's epic filter. */
+    epics(project) {
+        return this.api.get(`${D}/project/${enc(project)}/issue`, { type: 'epic', limit: '200' }).pipe(map((r) => data(r) ?? []));
+    }
+    create(project, body) {
+        return this.api.post(`${D}/project/${enc(project)}/issue`, body).pipe(map((r) => data(r)));
+    }
+    get(key) {
+        return this.api.get(`${D}/issue/${enc(key)}`).pipe(map((r) => data(r)));
+    }
+    update(key, change) {
+        return this.api.patch(`${D}/issue/${enc(key)}`, change).pipe(map((r) => data(r)));
+    }
+    remove(key) {
+        return this.api.delete(`${D}/issue/${enc(key)}`);
+    }
+    /** Into a status, and between two neighbours (keys) for the rank. */
+    move(key, statusId, after, before) {
+        return this.api.post(`${D}/issue/${enc(key)}/move`, { statusId, after: after ?? '', before: before ?? '' }).pipe(map((r) => data(r)));
+    }
+    history(key) {
+        return this.api.get(`${D}/issue/${enc(key)}/history`).pipe(map((r) => data(r) ?? []));
+    }
+    comments(key) {
+        return this.api.get(`${D}/issue/${enc(key)}/comment`).pipe(map((r) => data(r) ?? []));
+    }
+    comment(key, body) {
+        return this.api.post(`${D}/issue/${enc(key)}/comment`, { body }).pipe(map((r) => data(r)));
+    }
+    editComment(id, body) {
+        return this.api.patch(`${D}/comment/${enc(id)}`, { body }).pipe(map((r) => data(r)));
+    }
+    deleteComment(id) {
+        return this.api.delete(`${D}/comment/${enc(id)}`);
+    }
+    relate(key, kind, other) {
+        return this.api.post(`${D}/issue/${enc(key)}/relation`, { kind, issue: other });
+    }
+    unrelate(id) {
+        return this.api.delete(`${D}/relation/${enc(id)}`);
+    }
+    bulk(project, keys, change) {
+        return this.api.post(`${D}/project/${enc(project)}/issue/bulk`, { keys, change });
+    }
+    /** The export as text: CSV or JSON of what the filter matches. */
+    export(project, format, filter, sort) {
+        const params = { format };
+        if (filter)
+            params['filter'] = JSON.stringify(filter);
+        if (sort?.length)
+            params['sort'] = JSON.stringify(sort);
+        return this.api.get(`${D}/project/${enc(project)}/export`, params, { responseType: 'text' }).pipe(map((b) => String(b)));
+    }
+    sprints(project, completed = false) {
+        return this.api.get(`${D}/project/${enc(project)}/sprint`, completed ? { completed: 'true' } : undefined).pipe(map((r) => data(r) ?? []));
+    }
+    createSprint(project, body = {}) {
+        return this.api.post(`${D}/project/${enc(project)}/sprint`, body).pipe(map((r) => data(r)));
+    }
+    startSprint(project, id, body = {}) {
+        return this.api.post(`${D}/project/${enc(project)}/sprint/${enc(id)}/start`, body).pipe(map((r) => data(r)));
+    }
+    completeSprint(project, id, moveTo) {
+        return this.api.post(`${D}/project/${enc(project)}/sprint/${enc(id)}/complete`, { moveTo }).pipe(map((r) => data(r)));
+    }
+    views(project) {
+        return this.api.get(`${D}/project/${enc(project)}/view`).pipe(map((r) => data(r) ?? { mine: [], shared: [] }));
+    }
+    saveView(project, v) {
+        return this.api.post(`${D}/project/${enc(project)}/view`, v).pipe(map((r) => data(r)));
+    }
+    deleteView(project, id) {
+        return this.api.delete(`${D}/project/${enc(project)}/view/${enc(id)}`);
+    }
+    react(commentId, reaction, on) {
+        const url = `${D}/comment/${enc(commentId)}/reaction/${reaction}`;
+        return (on ? this.api.put(url, {}) : this.api.delete(url)).pipe(map((r) => data(r) ?? []));
+    }
+    attachments(key) {
+        return this.api.get(`${D}/issue/${enc(key)}/attachment`).pipe(map((r) => data(r) ?? []));
+    }
+    /** Uploads a file as the raw request body (at most 25 MB). */
+    attach(key, file) {
+        return this.api
+            .post(`${D}/issue/${enc(key)}/attachment?filename=${encodeURIComponent(file.name)}`, null, {
+            body: file, headers: { 'Content-Type': file.type || 'application/octet-stream' },
+        })
+            .pipe(map((r) => data(r)));
+    }
+    /** A file's bytes (the content endpoint needs the session, so no plain link works). */
+    attachmentBlob(id) {
+        return this.api.get(`${D}/attachment/${enc(id)}/content`, null, { responseType: 'blob' }).pipe(map((b) => b));
+    }
+    deleteAttachment(id) {
+        return this.api.delete(`${D}/attachment/${enc(id)}`);
+    }
+    watchState(key) {
+        return this.api.get('v1/links/watch', { kind: 'issue', ref: key }).pipe(map((r) => data(r) ?? { watching: false, watchers: [] }));
+    }
+    watch(key, on) {
+        return on ? this.api.put('v1/links/watch', { kind: 'issue', ref: key }) : this.api.delete(`v1/links/watch?kind=issue&ref=${enc(key)}`);
+    }
+    development(key) {
+        return this.api.get(`v1/links/issue/${enc(key)}/development`).pipe(map((r) => data(r) ?? { branches: [], commits: [], pulls: [] }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DesignApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DesignApi, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DesignApi, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// How Design draws things, as the prototype does (index/prototype: TYPE, STATUS, PRI), in the
+// theme's tokens so dark mode follows.
+const TYPES = ['story', 'task', 'bug', 'epic', 'subtask'];
+const PRIORITIES = ['highest', 'high', 'medium', 'low', 'lowest'];
+const TYPE_LABEL = { epic: 'Epic', story: 'Story', task: 'Task', bug: 'Bug', subtask: 'Sub-task' };
+const TYPE_COLOUR = {
+    story: 'var(--o-ok)', task: 'var(--o-acc)', bug: 'var(--o-bad-solid)', epic: 'var(--o-vio)', subtask: 'var(--o-line-mid)',
+};
+function typeLabel(t) {
+    return TYPE_LABEL[t] ?? t;
+}
+function typeColour(t) {
+    return TYPE_COLOUR[t] ?? 'var(--o-line-mid)';
+}
+function priorityLabel(p) {
+    return p ? p[0].toUpperCase() + p.slice(1) : '';
+}
+/**
+ * The chip class for a status: the prototype's To do grey, In progress blue, In review amber and
+ * Done green, by category, with review and blocked named apart.
+ */
+function statusChip(name, category) {
+    const n = (name || '').toLowerCase();
+    if (category === 'done')
+        return n.startsWith("won't") || n.startsWith('wont') ? 'o-chip' : 'o-chip o-grn';
+    if (category === 'in_progress') {
+        if (n.includes('review'))
+            return 'o-chip o-amb';
+        if (n.includes('block'))
+            return 'o-chip o-red';
+        return 'o-chip o-blu';
+    }
+    return 'o-chip';
+}
+/** Epic chips take the epic's colour when it has one, else a steady colour from its key. */
+const EPIC_CHIPS = ['o-chip o-grn', 'o-chip o-vio', 'o-chip o-amb', 'o-chip o-blu', 'o-chip o-red'];
+function epicChip(key) {
+    let h = 0;
+    for (const ch of key)
+        h = (h * 31 + ch.charCodeAt(0)) >>> 0;
+    return EPIC_CHIPS[h % EPIC_CHIPS.length];
+}
+function initials(name) {
+    const w = (name || '').split(/[\s@._-]+/).filter(Boolean);
+    return ((w[0]?.[0] ?? '?') + (w[1]?.[0] ?? '')).toUpperCase();
+}
+/** Names and initials by user id, from the host's people. */
+class People {
+    constructor(people) {
+        this.byId = new Map(people.map((p) => [p.id, p]));
+    }
+    name(id) {
+        if (!id)
+            return 'Unassigned';
+        return this.byId.get(id)?.name || this.byId.get(id)?.email || 'Someone';
+    }
+    initials(id) {
+        return id ? initials(this.name(id)) : '–';
+    }
+}
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/** "Nov 7" for a date (YYYY-MM-DD or ISO). */
+function shortDate(d) {
+    if (!d)
+        return '';
+    const [y, m, day] = d.slice(0, 10).split('-').map(Number);
+    if (!y || !m || !day)
+        return '';
+    return `${MONTHS[m - 1]} ${day}`;
+}
+/** "Oct 27 – Nov 7". */
+function dateRange(a, b) {
+    if (!a && !b)
+        return '';
+    return `${shortDate(a)} – ${shortDate(b)}`;
+}
+/** "just now", "5 min ago", "3 h ago", "Yesterday", "Oct 27". */
+function ago(iso, now = Date.now()) {
+    if (!iso)
+        return '';
+    const t = Date.parse(iso);
+    if (Number.isNaN(t))
+        return '';
+    const s = Math.max(0, Math.round((now - t) / 1000));
+    if (s < 60)
+        return 'just now';
+    if (s < 3600)
+        return `${Math.floor(s / 60)} min ago`;
+    if (s < 86400)
+        return `${Math.floor(s / 3600)} h ago`;
+    if (s < 172800)
+        return 'Yesterday';
+    return shortDate(iso);
+}
+function points(p) {
+    return p === undefined || p === null ? '' : String(p);
+}
+/** True if the brief is in a Done-category status. */
+function isDone(b) {
+    return b.category === 'done';
+}
+const FIELD_LABEL = {
+    title: 'the title', description: 'the description', status: 'the status', assignee: 'the assignee', priority: 'the priority',
+    labels: 'the labels', parent: 'the parent', points: 'the points', due: 'the due date', dueDate: 'the due date', sprint: 'the sprint', type: 'the type',
+    fields: 'the details', rank: 'the rank',
+};
+function shown(v, people, field) {
+    if (v === null || v === undefined || v === '')
+        return 'none';
+    if (field === 'assignee' || field === 'assigneeId')
+        return people.name(String(v));
+    if (Array.isArray(v))
+        return v.length ? v.join(', ') : 'none';
+    if (typeof v === 'object')
+        return v.name ?? v.key ?? v.title ?? JSON.stringify(v);
+    if (field === 'priority' || field === 'type')
+        return field === 'type' ? typeLabel(String(v)) : priorityLabel(String(v));
+    return String(v);
+}
+/** One history entry as a sentence: "Maya Kim changed the status from To do to In progress". */
+function historyLine(h, people) {
+    const who = people.name(h.actorId);
+    switch (h.kind) {
+        case 'created':
+            return `${who} created the issue`;
+        case 'changed': {
+            const f = h.field ?? '';
+            if (f === 'description' || f === 'fields')
+                return `${who} edited ${FIELD_LABEL[f]}`;
+            return `${who} changed ${FIELD_LABEL[f] ?? f} from ${shown(h.old, people, f)} to ${shown(h.new, people, f)}`;
+        }
+        case 'ranked':
+            return `${who} reordered the issue`;
+        case 'commented':
+            return `${who} commented`;
+        case 'comment_deleted':
+            return `${who} deleted a comment`;
+        case 'related':
+            return `${who} linked ${shown(h.new, people)}`;
+        case 'unrelated':
+            return `${who} removed the link to ${shown(h.old, people)}`;
+        case 'closed_by':
+            return `${who} closed it by merging ${shown(h.new, people)}`;
+        case 'attached':
+            return `${who} attached ${typeof h.new === 'string' ? h.new : 'a file'}`;
+        case 'attachment_deleted':
+            return `${who} deleted the attachment ${typeof h.old === 'string' ? h.old : ''}`.trim();
+        default:
+            return `${who} ${h.kind.replace(/_/g, ' ')}`;
+    }
+}
+/** A file download of text the API returned. */
+function download(body, name, type) {
+    const blob = new Blob([body], { type });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = name;
+    a.click();
+    URL.revokeObjectURL(a.href);
+}
+
+// "Create issue", as the prototype's dialog (modal.kind == 'issue'): a type, a title (the only
+// required field), assignee, priority and sprint. Opened by the board's column "+", the backlog and
+// the list, and by C anywhere on a Design screen.
+class CreateIssueDialog {
+    constructor() {
+        this.host = inject(DesignHost);
+        this.api = inject(DesignApi);
+        /** The status to create it in (a board column), else the project's first. */
+        this.statusId = input('', ...(ngDevMode ? [{ debugName: "statusId" }] : /* istanbul ignore next */ []));
+        /** Whether the project has an active sprint (else new issues go to the backlog). */
+        this.hasActive = input(false, ...(ngDevMode ? [{ debugName: "hasActive" }] : /* istanbul ignore next */ []));
+        /** Where it goes by default: 'active' or '' (the backlog). */
+        this.defaultSprint = input('active', ...(ngDevMode ? [{ debugName: "defaultSprint" }] : /* istanbul ignore next */ []));
+        this.created = output();
+        this.cancel = output();
+        this.types = ['story', 'task', 'bug', 'epic'];
+        this.priorities = PRIORITIES;
+        this.typeLabel = typeLabel;
+        this.priorityLabel = priorityLabel;
+        this.type = signal('story', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.title = '';
+        this.assignee = '';
+        this.priority = 'medium';
+        this.sprint = 'active';
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
+        this.titleEl = viewChild('titleEl', ...(ngDevMode ? [{ debugName: "titleEl" }] : /* istanbul ignore next */ []));
+    }
+    ngOnInit() {
+        this.assignee = this.host.meId();
+        this.sprint = this.hasActive() ? this.defaultSprint() : '';
+        queueMicrotask(() => this.titleEl()?.nativeElement.focus());
+    }
+    submit() {
+        const p = this.host.project();
+        const title = this.title.trim();
+        if (!p || !title || this.busy())
+            return;
+        this.busy.set(true);
+        this.error.set('');
+        const sprint = this.type() === 'epic' ? '' : this.sprint;
+        this.api
+            .create(p.id, {
+            title, type: this.type(), priority: this.priority,
+            ...(this.assignee ? { assigneeId: this.assignee } : {}),
+            ...(this.statusId() ? { statusId: this.statusId() } : {}),
+            ...(sprint ? { sprintId: sprint } : {}),
+        })
+            .subscribe({
+            next: (is) => { this.busy.set(false); this.created.emit(is); },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not create the issue.')); },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CreateIssueDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: CreateIssueDialog, isStandalone: true, selector: "o-create-issue", inputs: { statusId: { classPropertyName: "statusId", publicName: "statusId", isSignal: true, isRequired: false, transformFunction: null }, hasActive: { classPropertyName: "hasActive", publicName: "hasActive", isSignal: true, isRequired: false, transformFunction: null }, defaultSprint: { classPropertyName: "defaultSprint", publicName: "defaultSprint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { created: "created", cancel: "cancel" }, viewQueries: [{ propertyName: "titleEl", first: true, predicate: ["titleEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="o-overlay o-mid" (click)="cancel.emit()">
+      <form class="o-dlg o-wide" role="dialog" aria-modal="true" aria-labelledby="ni-title" (click)="$event.stopPropagation()" (ngSubmit)="submit()" (keydown.escape)="cancel.emit()" novalidate>
+        <div class="o-dlg-h"><b id="ni-title">Create issue</b></div>
+        <div class="o-dlg-b">
+          <div class="o-seg" role="group" aria-label="Type" style="align-self:flex-start">
+            @for (t of types; track t) {
+              <button type="button" [class.o-on]="type() === t" [attr.aria-pressed]="type() === t" (click)="type.set(t)">{{ typeLabel(t) }}</button>
+            }
+          </div>
+          <div class="o-fld">
+            <label for="ni-t">Title <span class="o-faint">(the only required field)</span></label>
+            <input #titleEl id="ni-t" class="o-in" name="title" [(ngModel)]="title" placeholder="What needs to be done?" autocomplete="off" data-testid="new-issue-title" />
+          </div>
+          <div class="o-g3">
+            <div class="o-fld">
+              <label for="ni-who">Assignee</label>
+              <select id="ni-who" class="o-in" name="who" [(ngModel)]="assignee">
+                <option value="">Unassigned</option>
+                @for (p of host.people(); track p.id) {<option [value]="p.id">{{ p.name || p.email }}{{ p.id === host.meId() ? ' (me)' : '' }}</option>}
+              </select>
+            </div>
+            <div class="o-fld">
+              <label for="ni-pri">Priority</label>
+              <select id="ni-pri" class="o-in" name="pri" [(ngModel)]="priority">
+                @for (p of priorities; track p) {<option [value]="p">{{ priorityLabel(p) }}</option>}
+              </select>
+            </div>
+            <div class="o-fld">
+              <label for="ni-sp">Sprint</label>
+              <select id="ni-sp" class="o-in" name="sprint" [(ngModel)]="sprint">
+                <option value="active" [disabled]="!hasActive()">Active sprint</option>
+                <option value="">Backlog</option>
+              </select>
+            </div>
+          </div>
+          @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+          <span class="o-hint">Tip: press C anywhere in Design to open this.</span>
+        </div>
+        <div class="o-dlg-f">
+          <button type="button" class="o-btn" (click)="cancel.emit()">Cancel</button>
+          <button type="submit" class="o-btn o-dark" [disabled]="busy() || !title.trim()" data-testid="new-issue-create">Create</button>
+        </div>
+      </form>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CreateIssueDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-create-issue',
+                    imports: [FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="o-overlay o-mid" (click)="cancel.emit()">
+      <form class="o-dlg o-wide" role="dialog" aria-modal="true" aria-labelledby="ni-title" (click)="$event.stopPropagation()" (ngSubmit)="submit()" (keydown.escape)="cancel.emit()" novalidate>
+        <div class="o-dlg-h"><b id="ni-title">Create issue</b></div>
+        <div class="o-dlg-b">
+          <div class="o-seg" role="group" aria-label="Type" style="align-self:flex-start">
+            @for (t of types; track t) {
+              <button type="button" [class.o-on]="type() === t" [attr.aria-pressed]="type() === t" (click)="type.set(t)">{{ typeLabel(t) }}</button>
+            }
+          </div>
+          <div class="o-fld">
+            <label for="ni-t">Title <span class="o-faint">(the only required field)</span></label>
+            <input #titleEl id="ni-t" class="o-in" name="title" [(ngModel)]="title" placeholder="What needs to be done?" autocomplete="off" data-testid="new-issue-title" />
+          </div>
+          <div class="o-g3">
+            <div class="o-fld">
+              <label for="ni-who">Assignee</label>
+              <select id="ni-who" class="o-in" name="who" [(ngModel)]="assignee">
+                <option value="">Unassigned</option>
+                @for (p of host.people(); track p.id) {<option [value]="p.id">{{ p.name || p.email }}{{ p.id === host.meId() ? ' (me)' : '' }}</option>}
+              </select>
+            </div>
+            <div class="o-fld">
+              <label for="ni-pri">Priority</label>
+              <select id="ni-pri" class="o-in" name="pri" [(ngModel)]="priority">
+                @for (p of priorities; track p) {<option [value]="p">{{ priorityLabel(p) }}</option>}
+              </select>
+            </div>
+            <div class="o-fld">
+              <label for="ni-sp">Sprint</label>
+              <select id="ni-sp" class="o-in" name="sprint" [(ngModel)]="sprint">
+                <option value="active" [disabled]="!hasActive()">Active sprint</option>
+                <option value="">Backlog</option>
+              </select>
+            </div>
+          </div>
+          @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+          <span class="o-hint">Tip: press C anywhere in Design to open this.</span>
+        </div>
+        <div class="o-dlg-f">
+          <button type="button" class="o-btn" (click)="cancel.emit()">Cancel</button>
+          <button type="submit" class="o-btn o-dark" [disabled]="busy() || !title.trim()" data-testid="new-issue-create">Create</button>
+        </div>
+      </form>
+    </div>
+  `,
+                }]
+        }], propDecorators: { statusId: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusId", required: false }] }], hasActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActive", required: false }] }], defaultSprint: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSprint", required: false }] }], created: [{ type: i0.Output, args: ["created"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], titleEl: [{ type: i0.ViewChild, args: ['titleEl', { isSignal: true }] }] } });
+
+// The board's side panel (prototype "design", aside): the selected card's status, people and
+// numbers, what code names it (links' Development panel) and its history. The status select is the
+// keyboard path for a move (NFR-12).
+class IssuePanel {
+    constructor() {
+        this.host = inject(DesignHost);
+        this.api = inject(DesignApi);
+        this.key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+        this.statuses = input([], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
+        this.sprintNames = input({}, ...(ngDevMode ? [{ debugName: "sprintNames" }] : /* istanbul ignore next */ []));
+        /** Bumped by the board when the card changed under the panel (a drag), to reload it. */
+        this.version = input(0, ...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
+        this.changed = output();
+        this.closed = output();
+        this.issue = signal(null, ...(ngDevMode ? [{ debugName: "issue" }] : /* istanbul ignore next */ []));
+        this.history = signal([], ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
+        this.dev = signal(null, ...(ngDevMode ? [{ debugName: "dev" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
+        this.canEdit = computed(() => (this.issue()?.capabilities ?? []).includes('issues.edit'), ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+        this.sprintName = computed(() => {
+            const id = this.issue()?.sprintId;
+            return id ? this.sprintNames()[id] ?? 'A sprint' : 'Backlog';
+        }, ...(ngDevMode ? [{ debugName: "sprintName" }] : /* istanbul ignore next */ []));
+        this.typeColour = typeColour;
+        this.typeLabel = typeLabel;
+        this.priorityLabel = priorityLabel;
+        this.ago = (iso) => ago(iso);
+        effect(() => {
+            const key = this.key();
+            this.version();
+            untracked(() => this.load(key));
+        });
+    }
+    line(h) {
+        return historyLine(h, this.people());
+    }
+    shas(d) {
+        return d.commits.slice(0, 3).map((c) => String(c.meta['sha'] ?? c.ref).slice(0, 7)).join(' · ');
+    }
+    prLabel(state) {
+        return state === 'merged' ? 'Merged' : state === 'closed' ? 'Closed' : 'Open';
+    }
+    prChip(state) {
+        return state === 'merged' ? 'o-chip o-vio' : state === 'closed' ? 'o-chip' : 'o-chip o-blu';
+    }
+    setStatus(statusId) {
+        const is = this.issue();
+        if (!is || statusId === is.statusId)
+            return;
+        this.busy.set(true);
+        this.error.set('');
+        this.api.move(is.key, statusId).subscribe({
+            next: (n) => { this.busy.set(false); this.issue.set(n); this.changed.emit(n); this.reloadHistory(n.key); },
+            error: (e) => { this.busy.set(false); this.error.set(isConflict(e) ? 'Someone changed this issue first. Showing the latest.' : apiMessage(e, 'Could not move the issue.')); this.load(is.key); },
+        });
+    }
+    load(key) {
+        this.issue.set(null);
+        this.error.set('');
+        this.dev.set(null);
+        forkJoin({ is: this.api.get(key), h: this.api.history(key) }).subscribe({
+            next: ({ is, h }) => { this.issue.set(is); this.history.set([...h].reverse().slice(0, 8)); },
+            error: (e) => this.error.set(apiMessage(e, `Could not open ${key}.`)),
+        });
+        this.api.development(key).subscribe({ next: (d) => this.dev.set(d), error: () => this.dev.set({ branches: [], commits: [], pulls: [] }) });
+    }
+    reloadHistory(key) {
+        this.api.history(key).subscribe({ next: (h) => this.history.set([...h].reverse().slice(0, 8)), error: () => undefined });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IssuePanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IssuePanel, isStandalone: true, selector: "o-issue-panel", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: false, transformFunction: null }, sprintNames: { classPropertyName: "sprintNames", publicName: "sprintNames", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", closed: "closed" }, host: { attributes: { "role": "complementary" }, properties: { "attr.aria-label": "\"Issue \" + key()" } }, ngImport: i0, template: `
+    @if (issue(); as is) {
+      <div class="o-flex">
+        <span class="o-sq" [style.background]="typeColour(is.type)" aria-hidden="true"></span>
+        <span class="o-mono o-mut" style="font-size:12px">{{ is.key }} · {{ typeLabel(is.type) }}</span>
+        <a class="o-lnk o-r" [routerLink]="host.link('issues/' + is.key)">Open full page</a>
+        <button type="button" class="o-btn o-ghost o-xs" (click)="closed.emit()">Close</button>
+      </div>
+      <h2 style="margin:0;font-size:18px;font-weight:600;line-height:1.3;text-wrap:pretty">{{ is.title }}</h2>
+      <div class="o-kv" style="grid-template-columns:96px 1fr;row-gap:8px">
+        <label class="o-k" for="ip-status">Status</label>
+        <select id="ip-status" class="o-in o-sm" [value]="is.statusId" [disabled]="!canEdit() || busy()" (change)="setStatus($any($event.target).value)" data-testid="panel-status">
+          @for (s of statuses(); track s.id) {<option [value]="s.id" [selected]="s.id === is.statusId">{{ s.name }}</option>}
+        </select>
+        <span class="o-k">Assignee</span><span class="o-flex"><span class="o-av" aria-hidden="true">{{ people().initials(is.assigneeId) }}</span>{{ people().name(is.assigneeId) }}</span>
+        <span class="o-k">Priority</span><span>{{ priorityLabel(is.priority) }}</span>
+        <span class="o-k">Points</span><span class="o-mono">{{ is.points ?? '–' }}</span>
+        <span class="o-k">Sprint</span><span>{{ sprintName() }}</span>
+      </div>
+      @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+
+      @if (dev(); as d) {
+        @if (d.branches.length || d.pulls.length || d.commits.length) {
+          <div class="o-col" style="gap:10px">
+            <span class="o-lbl">Development</span>
+            <div class="o-card">
+              @for (b of d.branches; track b.ref) {<div class="o-row"><span class="o-faint" style="width:60px">Branch</span><span class="o-mono o-sm o-ell">{{ b.title || b.ref }}</span><span class="o-r o-faint o-xs">{{ b.repo }}</span></div>}
+              @for (p of d.pulls; track p.ref) {
+                <a class="o-row o-click" [routerLink]="host.link('code/' + p.repo + '/pull/' + (p.meta['number'] ?? p.ref))"><span class="o-faint" style="width:60px">PR</span><span class="o-ell">#{{ p.meta['number'] ?? p.ref }} {{ p.title }}</span><span class="o-r" [class]="prChip(p.meta['state'])">{{ prLabel(p.meta['state']) }}</span></a>
+              }
+              @if (d.commits.length) {<div class="o-row"><span class="o-faint" style="width:60px">Commits</span><span class="o-mono o-sm o-ell">{{ shas(d) }}</span></div>}
+            </div>
+          </div>
+        } @else {
+          <span class="o-faint o-lh">No linked branches, PRs or deployments yet. Put {{ is.key }} in a branch name or PR title to link it.</span>
+        }
+      }
+
+      <div class="o-col" style="margin-top:auto;border-top:1px solid var(--o-line-soft);padding-top:14px;gap:6px">
+        <span class="o-lbl">History</span>
+        @for (h of history(); track h.id) {<span class="o-mut o-sm">{{ line(h) }} · {{ ago(h.createdAt) }}</span>}
+      </div>
+    } @else if (error()) {
+      <div class="o-flex"><b>{{ key() }}</b><button type="button" class="o-btn o-ghost o-xs o-r" (click)="closed.emit()">Close</button></div>
+      <div class="o-note o-red" role="alert">{{ error() }}</div>
+    } @else {
+      <div class="o-empty">Loading {{ key() }}…</div>
+    }
+  `, isInline: true, styles: [":host{width:400px;flex:none;background:var(--o-surface);border-left:1px solid var(--o-line);padding:20px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;align-self:flex-start;max-height:calc(100vh - var(--o-topbar-h, 52px));overflow:auto}@media(max-width:1000px){:host{position:fixed;inset:auto 0 0;width:auto;max-height:70vh;border-left:none;border-top:1px solid var(--o-line);box-shadow:var(--o-shadow-dialog);z-index:var(--o-z-drawer, 60)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IssuePanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-issue-panel', imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'complementary', '[attr.aria-label]': '"Issue " + key()' }, template: `
+    @if (issue(); as is) {
+      <div class="o-flex">
+        <span class="o-sq" [style.background]="typeColour(is.type)" aria-hidden="true"></span>
+        <span class="o-mono o-mut" style="font-size:12px">{{ is.key }} · {{ typeLabel(is.type) }}</span>
+        <a class="o-lnk o-r" [routerLink]="host.link('issues/' + is.key)">Open full page</a>
+        <button type="button" class="o-btn o-ghost o-xs" (click)="closed.emit()">Close</button>
+      </div>
+      <h2 style="margin:0;font-size:18px;font-weight:600;line-height:1.3;text-wrap:pretty">{{ is.title }}</h2>
+      <div class="o-kv" style="grid-template-columns:96px 1fr;row-gap:8px">
+        <label class="o-k" for="ip-status">Status</label>
+        <select id="ip-status" class="o-in o-sm" [value]="is.statusId" [disabled]="!canEdit() || busy()" (change)="setStatus($any($event.target).value)" data-testid="panel-status">
+          @for (s of statuses(); track s.id) {<option [value]="s.id" [selected]="s.id === is.statusId">{{ s.name }}</option>}
+        </select>
+        <span class="o-k">Assignee</span><span class="o-flex"><span class="o-av" aria-hidden="true">{{ people().initials(is.assigneeId) }}</span>{{ people().name(is.assigneeId) }}</span>
+        <span class="o-k">Priority</span><span>{{ priorityLabel(is.priority) }}</span>
+        <span class="o-k">Points</span><span class="o-mono">{{ is.points ?? '–' }}</span>
+        <span class="o-k">Sprint</span><span>{{ sprintName() }}</span>
+      </div>
+      @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+
+      @if (dev(); as d) {
+        @if (d.branches.length || d.pulls.length || d.commits.length) {
+          <div class="o-col" style="gap:10px">
+            <span class="o-lbl">Development</span>
+            <div class="o-card">
+              @for (b of d.branches; track b.ref) {<div class="o-row"><span class="o-faint" style="width:60px">Branch</span><span class="o-mono o-sm o-ell">{{ b.title || b.ref }}</span><span class="o-r o-faint o-xs">{{ b.repo }}</span></div>}
+              @for (p of d.pulls; track p.ref) {
+                <a class="o-row o-click" [routerLink]="host.link('code/' + p.repo + '/pull/' + (p.meta['number'] ?? p.ref))"><span class="o-faint" style="width:60px">PR</span><span class="o-ell">#{{ p.meta['number'] ?? p.ref }} {{ p.title }}</span><span class="o-r" [class]="prChip(p.meta['state'])">{{ prLabel(p.meta['state']) }}</span></a>
+              }
+              @if (d.commits.length) {<div class="o-row"><span class="o-faint" style="width:60px">Commits</span><span class="o-mono o-sm o-ell">{{ shas(d) }}</span></div>}
+            </div>
+          </div>
+        } @else {
+          <span class="o-faint o-lh">No linked branches, PRs or deployments yet. Put {{ is.key }} in a branch name or PR title to link it.</span>
+        }
+      }
+
+      <div class="o-col" style="margin-top:auto;border-top:1px solid var(--o-line-soft);padding-top:14px;gap:6px">
+        <span class="o-lbl">History</span>
+        @for (h of history(); track h.id) {<span class="o-mut o-sm">{{ line(h) }} · {{ ago(h.createdAt) }}</span>}
+      </div>
+    } @else if (error()) {
+      <div class="o-flex"><b>{{ key() }}</b><button type="button" class="o-btn o-ghost o-xs o-r" (click)="closed.emit()">Close</button></div>
+      <div class="o-note o-red" role="alert">{{ error() }}</div>
+    } @else {
+      <div class="o-empty">Loading {{ key() }}…</div>
+    }
+  `, styles: [":host{width:400px;flex:none;background:var(--o-surface);border-left:1px solid var(--o-line);padding:20px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;align-self:flex-start;max-height:calc(100vh - var(--o-topbar-h, 52px));overflow:auto}@media(max-width:1000px){:host{position:fixed;inset:auto 0 0;width:auto;max-height:70vh;border-left:none;border-top:1px solid var(--o-line);box-shadow:var(--o-shadow-dialog);z-index:var(--o-z-drawer, 60)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], statuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "statuses", required: false }] }], sprintNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "sprintNames", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+// /{org}/{project}/board (prototype "design"): the active sprint's columns, one per status the board
+// shows, with WIP limits, swimlanes and quick filters; drag a card to another column, or open it and
+// change its status in the side panel.
+class BoardPage {
+    constructor() {
+        this.host = inject(DesignHost);
+        this.api = inject(DesignApi);
+        this.board = signal(null, ...(ngDevMode ? [{ debugName: "board" }] : /* istanbul ignore next */ []));
+        this.statuses = signal([], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
+        this.sprints = signal([], ...(ngDevMode ? [{ debugName: "sprints" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.note = signal('', ...(ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []));
+        this.lane = signal('', ...(ngDevMode ? [{ debugName: "lane" }] : /* istanbul ignore next */ []));
+        this.quick = signal(new Set(), ...(ngDevMode ? [{ debugName: "quick" }] : /* istanbul ignore next */ []));
+        this.selected = signal('', ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.over = signal('', ...(ngDevMode ? [{ debugName: "over" }] : /* istanbul ignore next */ []));
+        this.createIn = signal(null, ...(ngDevMode ? [{ debugName: "createIn" }] : /* istanbul ignore next */ []));
+        this.completing = signal(false, ...(ngDevMode ? [{ debugName: "completing" }] : /* istanbul ignore next */ []));
+        this.moveTo = signal('next', ...(ngDevMode ? [{ debugName: "moveTo" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.panelVersion = signal(0, ...(ngDevMode ? [{ debugName: "panelVersion" }] : /* istanbul ignore next */ []));
+        this.dragKey = '';
+        this.typeColour = typeColour;
+        this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
+        this.canEdit = computed(() => {
+            const p = this.host.project();
+            return !!p && !p.archivedAt && p.capabilities.includes('issues.edit');
+        }, ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+        this.sprintNames = computed(() => Object.fromEntries(this.sprints().map((s) => [s.id, s.name])), ...(ngDevMode ? [{ debugName: "sprintNames" }] : /* istanbul ignore next */ []));
+        this.eyebrow = computed(() => {
+            const s = this.board()?.sprint;
+            if (!s)
+                return `${this.host.project()?.key ?? ''} · no active sprint · every open issue`;
+            const d = dateRange(s.startsOn, s.endsOn).toUpperCase();
+            return `${s.name.toUpperCase()}${d ? ' · ' + d : ''}`;
+        }, ...(ngDevMode ? [{ debugName: "eyebrow" }] : /* istanbul ignore next */ []));
+        this.wipNote = computed(() => {
+            const cols = (this.board()?.columns ?? []).filter((c) => c.wipLimit > 0);
+            return cols.length ? ' ' + cols.map((c) => `${c.name} has a WIP limit of ${c.wipLimit}.`).join(' ') : '';
+        }, ...(ngDevMode ? [{ debugName: "wipNote" }] : /* istanbul ignore next */ []));
+        this.unfinished = computed(() => {
+            const s = this.board()?.sprint;
+            return s ? s.issues - s.done : 0;
+        }, ...(ngDevMode ? [{ debugName: "unfinished" }] : /* istanbul ignore next */ []));
+        this.completeSummary = computed(() => {
+            const s = this.board()?.sprint;
+            if (!s)
+                return '';
+            const n = this.unfinished();
+            return `${s.done} of ${s.issues} issues done (${s.donePoints} of ${s.points} points).${n ? ` ${n} not finished: where should they go?` : ''}`;
+        }, ...(ngDevMode ? [{ debugName: "completeSummary" }] : /* istanbul ignore next */ []));
+        this.nextLabel = computed(() => {
+            const next = this.sprints().find((s) => s.state === 'planned');
+            return next ? `${next.name}${next.startsOn ? ' · ' + dateRange(next.startsOn, next.endsOn) : ''}` : 'A new sprint of the same length, from tomorrow';
+        }, ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const p = this.host.project();
+            if (p)
+                untracked(() => this.loadAll());
+        });
+    }
+    /** C opens Create issue (prototype: "Tip: press C anywhere"). */
+    key(e) {
+        const t = e.target;
+        if (e.key !== 'c' || e.metaKey || e.ctrlKey || e.altKey || t?.closest('input,textarea,select,[contenteditable]'))
+            return;
+        if (this.canEdit() && this.createIn() === null) {
+            e.preventDefault();
+            this.createIn.set('');
+        }
+    }
+    countText(c) {
+        return c.wipLimit > 0 ? `${c.count}/${c.wipLimit}` : String(c.count);
+    }
+    laneAv(key, name) {
+        const lane = this.board()?.swimlane;
+        if (lane === 'assignee')
+            return key && key !== 'none' ? this.people().initials(key) : '–';
+        return name ? name[0].toUpperCase() : '·';
+    }
+    flip(q) {
+        const s = new Set(this.quick());
+        s.has(q) ? s.delete(q) : s.add(q);
+        this.quick.set(s);
+        this.reload();
+    }
+    setLane(l) {
+        this.lane.set(l);
+        this.reload();
+    }
+    dragStart(e, c) {
+        if (!this.canEdit())
+            return;
+        this.dragKey = c.key;
+        e.dataTransfer?.setData('text/plain', c.key);
+        if (e.dataTransfer)
+            e.dataTransfer.effectAllowed = 'move';
+    }
+    dragOver(e, col, lane) {
+        if (!this.canEdit())
+            return;
+        e.preventDefault();
+        const k = col.statusId + '|' + lane;
+        if (this.over() !== k)
+            this.over.set(k);
+    }
+    drop(e, col, cell) {
+        e.preventDefault();
+        this.over.set('');
+        const key = this.dragKey || e.dataTransfer?.getData('text/plain') || '';
+        this.dragKey = '';
+        if (!key)
+            return;
+        // To the end of the column: after its last card (other than itself).
+        const last = [...cell].reverse().find((c) => c.key !== key);
+        this.error.set('');
+        this.api.move(key, col.statusId, last?.key).subscribe({
+            next: () => { this.reload(); if (this.selected() === key)
+                this.panelVersion.update((v) => v + 1); },
+            error: (err) => { this.error.set(apiMessage(err, `Could not move ${key}.`)); this.reload(); },
+        });
+    }
+    created(is) {
+        this.createIn.set(null);
+        this.note.set(`${is.key} created${is.sprintId ? ' in ' + (this.board()?.sprint?.name ?? 'the sprint') : ' in the backlog'}.`);
+        this.reload();
+    }
+    complete() {
+        const p = this.host.project();
+        const s = this.board()?.sprint;
+        if (!p || !s)
+            return;
+        this.busy.set(true);
+        this.api.completeSprint(p.id, s.id, this.moveTo()).subscribe({
+            next: () => { this.busy.set(false); this.completing.set(false); this.note.set(`${s.name} completed.`); this.loadAll(); },
+            error: (e) => { this.busy.set(false); this.completing.set(false); this.error.set(apiMessage(e, 'Could not complete the sprint.')); },
+        });
+    }
+    reload() {
+        const p = this.host.project();
+        if (!p)
+            return;
+        this.api.board(p.id, { swimlane: this.lane() || undefined, filter: this.filter() }).subscribe({
+            next: (b) => { this.board.set(b); this.error.set(''); if (!this.lane())
+                this.lane.set(b.swimlane); },
+            error: (e) => this.error.set(apiMessage(e, 'Could not load the board.')),
+        });
+    }
+    loadAll() {
+        const p = this.host.project();
+        if (!p)
+            return;
+        forkJoin({ st: this.api.statuses(p.id), sp: this.api.sprints(p.id) }).subscribe({
+            next: ({ st, sp }) => { this.statuses.set(st); this.sprints.set(sp); },
+            error: () => undefined,
+        });
+        this.reload();
+    }
+    filter() {
+        const q = this.quick();
+        const all = [];
+        if (q.has('mine'))
+            all.push({ field: 'assignee', op: 'in', values: ['me'] });
+        if (q.has('bugs'))
+            all.push({ field: 'type', op: 'in', values: ['bug'] });
+        if (q.has('recent'))
+            all.push({ field: 'updated', op: 'gte', values: ['-7d'] });
+        return all.length ? { all } : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BoardPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: BoardPage, isStandalone: true, selector: "o-design-board", host: { listeners: { "document:keydown": "key($event)" } }, ngImport: i0, template: `
+    <div style="display:flex;min-height:100%">
+      <div style="flex:1;min-width:0;padding:20px 20px 28px;display:flex;flex-direction:column;gap:14px">
+        <div class="o-ph">
+          <div class="o-col">
+            <span class="o-eyebrow">{{ eyebrow() }}</span>
+            <h1 class="o-t">{{ host.project()?.name }} board</h1>
+            @if (board()?.sprint?.goal) {<span class="o-mut">Goal: {{ board()!.sprint!.goal }}</span>}
+          </div>
+          <div class="o-acts">
+            <button type="button" class="o-btn o-sm" [class.o-on]="quick().has('mine')" [attr.aria-pressed]="quick().has('mine')" (click)="flip('mine')">Only my issues</button>
+            <button type="button" class="o-btn o-sm" [class.o-on]="quick().has('bugs')" [attr.aria-pressed]="quick().has('bugs')" (click)="flip('bugs')">Bugs</button>
+            <button type="button" class="o-btn o-sm" [class.o-on]="quick().has('recent')" [attr.aria-pressed]="quick().has('recent')" (click)="flip('recent')">Recently updated</button>
+            <select class="o-in o-sm" style="width:auto" aria-label="Swimlanes" [ngModel]="lane()" (ngModelChange)="setLane($event)">
+              <option value="none">Swimlanes: none</option><option value="assignee">Swimlanes: assignee</option>
+              <option value="epic">Swimlanes: epic</option><option value="priority">Swimlanes: priority</option>
+            </select>
+            @if (board()?.sprint && canEdit()) {<button type="button" class="o-btn o-sm" (click)="completing.set(true)" data-testid="complete-sprint">Complete sprint</button>}
+          </div>
+        </div>
+
+        @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+        @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
+
+        @if (board(); as b) {
+          @for (ln of b.lanes; track ln.key) {
+            @if (b.swimlane !== 'none') {
+              <div class="o-lane-h"><span class="o-av" aria-hidden="true">{{ laneAv(ln.key, ln.name) }}</span><span>{{ ln.name }}</span><span class="o-faint">{{ ln.count }} {{ ln.count === 1 ? 'issue' : 'issues' }}</span></div>
+            }
+            <div class="grid" role="list" [attr.aria-label]="b.swimlane === 'none' ? 'Board' : ln.name" [style.grid-template-columns]="'repeat(' + b.columns.length + ', minmax(200px, 1fr))'">
+              @for (col of b.columns; track col.statusId; let ci = $index) {
+                <section class="col" role="listitem" [attr.aria-label]="col.name + ', ' + countText(col)" [class.breach]="col.breach" [class.over]="over() === col.statusId + '|' + ln.key"
+                  [style.min-height]="b.swimlane === 'none' ? '360px' : '90px'"
+                  (dragover)="dragOver($event, col, ln.key)" (dragleave)="over.set('')" (drop)="drop($event, col, ln.cells[ci])" [attr.data-testid]="'col-' + col.name">
+                  <div class="col-h">
+                    <span class="nm">{{ col.name }}</span>
+                    <span class="o-mono" style="font-size:12px">{{ countText(col) }}</span>
+                    @if (canEdit()) {<button type="button" class="o-btn o-ghost o-xs o-r" (click)="createIn.set(col.statusId)" [attr.title]="'Create issue in ' + col.name" [attr.aria-label]="'Create issue in ' + col.name">+</button>}
+                  </div>
+                  @for (c of ln.cells[ci]; track c.key) {
+                    <button type="button" class="card" [class.sel]="selected() === c.key" [attr.draggable]="canEdit()" (dragstart)="dragStart($event, c)" (dragend)="over.set('')" (click)="selected.set(c.key)" [attr.data-testid]="'card-' + c.key">
+                      <span class="ti">{{ c.title }}</span>
+                      <span style="display:flex;align-items:center;gap:6px;flex-wrap:wrap">
+                        <span style="width:8px;height:8px;border-radius:2px" [style.background]="typeColour(c.type)" aria-hidden="true"></span>
+                        <span class="o-mono" style="font-size:11px;color:var(--o-mut)">{{ c.key }}</span>
+                        @if (c.epic && b.swimlane !== 'epic') {<span class="o-chip o-vio o-ell" style="max-width:120px">{{ c.epic.title }}</span>}
+                        <span class="o-mono" style="margin-left:auto;font-size:11px;color:var(--o-dim)">{{ c.points ?? '' }}</span>
+                        <span class="o-av" [attr.title]="people().name(c.assigneeId)">{{ people().initials(c.assigneeId) }}</span>
+                      </span>
+                    </button>
+                  }
+                </section>
+              }
+            </div>
+          } @empty {
+            <div class="o-card"><div class="o-empty">No issues on the board yet. Create one with + in a column, or press C.</div></div>
+          }
+          <span class="o-faint o-sm">Drag cards between columns, or open a card and change its status from the keyboard.{{ wipNote() }}{{ b.truncated ? ' Showing the first 1,000 cards: narrow it with a quick filter.' : '' }}</span>
+        } @else if (!error()) {
+          <div class="o-card"><div class="o-empty">Loading the board…</div></div>
+        }
+      </div>
+
+      @if (selected(); as key) {
+        <o-issue-panel [key]="key" [version]="panelVersion()" [statuses]="statuses()" [sprintNames]="sprintNames()" (changed)="reload()" (closed)="selected.set('')" />
+      }
+    </div>
+
+    @if (createIn() !== null) {
+      <o-create-issue [statusId]="createIn()!" [hasActive]="!!board()?.sprint" (created)="created($event)" (cancel)="createIn.set(null)" />
+    }
+
+    @if (completing() && board()?.sprint) {
+      <div class="o-overlay o-mid" (click)="completing.set(false)">
+        <div class="o-dlg" role="dialog" aria-modal="true" aria-labelledby="cs-title" (click)="$event.stopPropagation()" (keydown.escape)="completing.set(false)">
+          <div class="o-dlg-h"><b id="cs-title">Complete {{ board()!.sprint!.name }}</b></div>
+          <div class="o-dlg-b">
+            <div class="o-note">{{ completeSummary() }}</div>
+            @if (unfinished()) {
+              <button type="button" class="o-opt" [class.o-on]="moveTo() === 'next'" (click)="moveTo.set('next')"><span class="o-rad" [class.o-on]="moveTo() === 'next'"></span><span class="o-col" style="gap:2px"><b>Move to the next sprint</b><span class="o-faint o-sm">{{ nextLabel() }}</span></span></button>
+              <button type="button" class="o-opt" [class.o-on]="moveTo() === 'backlog'" (click)="moveTo.set('backlog')"><span class="o-rad" [class.o-on]="moveTo() === 'backlog'"></span><span class="o-col" style="gap:2px"><b>Move to the backlog</b><span class="o-faint o-sm">Plan them again later</span></span></button>
+            }
+            <span class="o-hint">The sprint report freezes its scope when you complete the sprint.</span>
+          </div>
+          <div class="o-dlg-f">
+            <button type="button" class="o-btn" (click)="completing.set(false)">Cancel</button>
+            <button type="button" class="o-btn o-dark" [disabled]="busy()" (click)="complete()" data-testid="complete-sprint-confirm">Complete sprint</button>
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".col{background:var(--o-sunken);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:8px}.col.over{outline:2px dashed var(--o-acc)}.col.breach{outline:2px solid var(--o-bad-solid)}.col-h{display:flex;align-items:center;gap:8px;padding:4px 6px;color:var(--o-mut)}.col.breach .col-h{color:var(--o-bad-tx)}.col-h .nm{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.card{background:var(--o-surface);border-radius:8px;padding:10px 11px;display:flex;flex-direction:column;gap:8px;cursor:grab;border:1px solid var(--o-line);box-shadow:0 1px #1113160a;text-align:left;font:inherit;color:inherit;width:100%}.card:hover{border-color:var(--o-line-mid)}.card.sel{border-color:var(--o-acc)}.card .ti{font-size:13px;line-height:1.35;text-wrap:pretty}.grid{display:grid;gap:12px;align-items:start;overflow-x:auto}.o-btn.o-on{background:var(--o-tx);border-color:var(--o-tx);color:var(--o-acc-fg)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: CreateIssueDialog, selector: "o-create-issue", inputs: ["statusId", "hasActive", "defaultSprint"], outputs: ["created", "cancel"] }, { kind: "component", type: IssuePanel, selector: "o-issue-panel", inputs: ["key", "statuses", "sprintNames", "version"], outputs: ["changed", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BoardPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-design-board', imports: [FormsModule, CreateIssueDialog, IssuePanel], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div style="display:flex;min-height:100%">
+      <div style="flex:1;min-width:0;padding:20px 20px 28px;display:flex;flex-direction:column;gap:14px">
+        <div class="o-ph">
+          <div class="o-col">
+            <span class="o-eyebrow">{{ eyebrow() }}</span>
+            <h1 class="o-t">{{ host.project()?.name }} board</h1>
+            @if (board()?.sprint?.goal) {<span class="o-mut">Goal: {{ board()!.sprint!.goal }}</span>}
+          </div>
+          <div class="o-acts">
+            <button type="button" class="o-btn o-sm" [class.o-on]="quick().has('mine')" [attr.aria-pressed]="quick().has('mine')" (click)="flip('mine')">Only my issues</button>
+            <button type="button" class="o-btn o-sm" [class.o-on]="quick().has('bugs')" [attr.aria-pressed]="quick().has('bugs')" (click)="flip('bugs')">Bugs</button>
+            <button type="button" class="o-btn o-sm" [class.o-on]="quick().has('recent')" [attr.aria-pressed]="quick().has('recent')" (click)="flip('recent')">Recently updated</button>
+            <select class="o-in o-sm" style="width:auto" aria-label="Swimlanes" [ngModel]="lane()" (ngModelChange)="setLane($event)">
+              <option value="none">Swimlanes: none</option><option value="assignee">Swimlanes: assignee</option>
+              <option value="epic">Swimlanes: epic</option><option value="priority">Swimlanes: priority</option>
+            </select>
+            @if (board()?.sprint && canEdit()) {<button type="button" class="o-btn o-sm" (click)="completing.set(true)" data-testid="complete-sprint">Complete sprint</button>}
+          </div>
+        </div>
+
+        @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+        @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
+
+        @if (board(); as b) {
+          @for (ln of b.lanes; track ln.key) {
+            @if (b.swimlane !== 'none') {
+              <div class="o-lane-h"><span class="o-av" aria-hidden="true">{{ laneAv(ln.key, ln.name) }}</span><span>{{ ln.name }}</span><span class="o-faint">{{ ln.count }} {{ ln.count === 1 ? 'issue' : 'issues' }}</span></div>
+            }
+            <div class="grid" role="list" [attr.aria-label]="b.swimlane === 'none' ? 'Board' : ln.name" [style.grid-template-columns]="'repeat(' + b.columns.length + ', minmax(200px, 1fr))'">
+              @for (col of b.columns; track col.statusId; let ci = $index) {
+                <section class="col" role="listitem" [attr.aria-label]="col.name + ', ' + countText(col)" [class.breach]="col.breach" [class.over]="over() === col.statusId + '|' + ln.key"
+                  [style.min-height]="b.swimlane === 'none' ? '360px' : '90px'"
+                  (dragover)="dragOver($event, col, ln.key)" (dragleave)="over.set('')" (drop)="drop($event, col, ln.cells[ci])" [attr.data-testid]="'col-' + col.name">
+                  <div class="col-h">
+                    <span class="nm">{{ col.name }}</span>
+                    <span class="o-mono" style="font-size:12px">{{ countText(col) }}</span>
+                    @if (canEdit()) {<button type="button" class="o-btn o-ghost o-xs o-r" (click)="createIn.set(col.statusId)" [attr.title]="'Create issue in ' + col.name" [attr.aria-label]="'Create issue in ' + col.name">+</button>}
+                  </div>
+                  @for (c of ln.cells[ci]; track c.key) {
+                    <button type="button" class="card" [class.sel]="selected() === c.key" [attr.draggable]="canEdit()" (dragstart)="dragStart($event, c)" (dragend)="over.set('')" (click)="selected.set(c.key)" [attr.data-testid]="'card-' + c.key">
+                      <span class="ti">{{ c.title }}</span>
+                      <span style="display:flex;align-items:center;gap:6px;flex-wrap:wrap">
+                        <span style="width:8px;height:8px;border-radius:2px" [style.background]="typeColour(c.type)" aria-hidden="true"></span>
+                        <span class="o-mono" style="font-size:11px;color:var(--o-mut)">{{ c.key }}</span>
+                        @if (c.epic && b.swimlane !== 'epic') {<span class="o-chip o-vio o-ell" style="max-width:120px">{{ c.epic.title }}</span>}
+                        <span class="o-mono" style="margin-left:auto;font-size:11px;color:var(--o-dim)">{{ c.points ?? '' }}</span>
+                        <span class="o-av" [attr.title]="people().name(c.assigneeId)">{{ people().initials(c.assigneeId) }}</span>
+                      </span>
+                    </button>
+                  }
+                </section>
+              }
+            </div>
+          } @empty {
+            <div class="o-card"><div class="o-empty">No issues on the board yet. Create one with + in a column, or press C.</div></div>
+          }
+          <span class="o-faint o-sm">Drag cards between columns, or open a card and change its status from the keyboard.{{ wipNote() }}{{ b.truncated ? ' Showing the first 1,000 cards: narrow it with a quick filter.' : '' }}</span>
+        } @else if (!error()) {
+          <div class="o-card"><div class="o-empty">Loading the board…</div></div>
+        }
+      </div>
+
+      @if (selected(); as key) {
+        <o-issue-panel [key]="key" [version]="panelVersion()" [statuses]="statuses()" [sprintNames]="sprintNames()" (changed)="reload()" (closed)="selected.set('')" />
+      }
+    </div>
+
+    @if (createIn() !== null) {
+      <o-create-issue [statusId]="createIn()!" [hasActive]="!!board()?.sprint" (created)="created($event)" (cancel)="createIn.set(null)" />
+    }
+
+    @if (completing() && board()?.sprint) {
+      <div class="o-overlay o-mid" (click)="completing.set(false)">
+        <div class="o-dlg" role="dialog" aria-modal="true" aria-labelledby="cs-title" (click)="$event.stopPropagation()" (keydown.escape)="completing.set(false)">
+          <div class="o-dlg-h"><b id="cs-title">Complete {{ board()!.sprint!.name }}</b></div>
+          <div class="o-dlg-b">
+            <div class="o-note">{{ completeSummary() }}</div>
+            @if (unfinished()) {
+              <button type="button" class="o-opt" [class.o-on]="moveTo() === 'next'" (click)="moveTo.set('next')"><span class="o-rad" [class.o-on]="moveTo() === 'next'"></span><span class="o-col" style="gap:2px"><b>Move to the next sprint</b><span class="o-faint o-sm">{{ nextLabel() }}</span></span></button>
+              <button type="button" class="o-opt" [class.o-on]="moveTo() === 'backlog'" (click)="moveTo.set('backlog')"><span class="o-rad" [class.o-on]="moveTo() === 'backlog'"></span><span class="o-col" style="gap:2px"><b>Move to the backlog</b><span class="o-faint o-sm">Plan them again later</span></span></button>
+            }
+            <span class="o-hint">The sprint report freezes its scope when you complete the sprint.</span>
+          </div>
+          <div class="o-dlg-f">
+            <button type="button" class="o-btn" (click)="completing.set(false)">Cancel</button>
+            <button type="button" class="o-btn o-dark" [disabled]="busy()" (click)="complete()" data-testid="complete-sprint-confirm">Complete sprint</button>
+          </div>
+        </div>
+      </div>
+    }
+  `, styles: [".col{background:var(--o-sunken);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:8px}.col.over{outline:2px dashed var(--o-acc)}.col.breach{outline:2px solid var(--o-bad-solid)}.col-h{display:flex;align-items:center;gap:8px;padding:4px 6px;color:var(--o-mut)}.col.breach .col-h{color:var(--o-bad-tx)}.col-h .nm{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.card{background:var(--o-surface);border-radius:8px;padding:10px 11px;display:flex;flex-direction:column;gap:8px;cursor:grab;border:1px solid var(--o-line);box-shadow:0 1px #1113160a;text-align:left;font:inherit;color:inherit;width:100%}.card:hover{border-color:var(--o-line-mid)}.card.sel{border-color:var(--o-acc)}.card .ti{font-size:13px;line-height:1.35;text-wrap:pretty}.grid{display:grid;gap:12px;align-items:start;overflow-x:auto}.o-btn.o-on{background:var(--o-tx);border-color:var(--o-tx);color:var(--o-acc-fg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { key: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+// /{org}/{project}/backlog (prototype "design_backlog"): the active sprint, planned sprints and the
+// backlog, each in rank order. Drag a row to reorder it or to plan it into a sprint; select rows for
+// the bulk bar (the keyboard path for the same changes).
+class BacklogPage {
+    clearPicked() {
+        this.picked.set(new Set());
+    }
+    constructor() {
+        this.host = inject(DesignHost);
+        this.api = inject(DesignApi);
+        this.router = inject(Router);
+        this.sections = signal([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        this.statuses = signal([], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
+        this.epics = signal([], ...(ngDevMode ? [{ debugName: "epics" }] : /* istanbul ignore next */ []));
+        this.text = signal('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.epic = signal('', ...(ngDevMode ? [{ debugName: "epic" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.note = signal('', ...(ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.picked = signal(new Set(), ...(ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []));
+        this.overSec = signal('', ...(ngDevMode ? [{ debugName: "overSec" }] : /* istanbul ignore next */ []));
+        this.overRow = signal('', ...(ngDevMode ? [{ debugName: "overRow" }] : /* istanbul ignore next */ []));
+        this.newTitle = signal('', ...(ngDevMode ? [{ debugName: "newTitle" }] : /* istanbul ignore next */ []));
+        this.labelling = signal(false, ...(ngDevMode ? [{ debugName: "labelling" }] : /* istanbul ignore next */ []));
+        this.label = signal('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.creating = signal(false, ...(ngDevMode ? [{ debugName: "creating" }] : /* istanbul ignore next */ []));
+        this.drag = null;
+        this.typeColour = typeColour;
+        this.statusChip = statusChip;
+        this.epicChip = epicChip;
+        this.priorityLabel = priorityLabel;
+        this.priorities = PRIORITIES;
+        this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
+        this.canEdit = computed(() => {
+            const p = this.host.project();
+            return !!p && !p.archivedAt && p.capabilities.includes('issues.edit');
+        }, ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+        this.hasActive = computed(() => this.sections().some((s) => s.sprint?.state === 'active'), ...(ngDevMode ? [{ debugName: "hasActive" }] : /* istanbul ignore next */ []));
+        this.firstPlanned = computed(() => this.sections().find((s) => s.sprint?.state === 'planned')?.sprint ?? null, ...(ngDevMode ? [{ debugName: "firstPlanned" }] : /* istanbul ignore next */ []));
+        this.openSprints = computed(() => this.sections().filter((s) => !!s.sprint).map((s) => s.sprint), ...(ngDevMode ? [{ debugName: "openSprints" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const p = this.host.project();
+            if (p)
+                untracked(() => this.loadAll());
+        });
+    }
+    key(e) {
+        const t = e.target;
+        if (e.key !== 'c' || e.metaKey || e.ctrlKey || e.altKey || t?.closest('input,textarea,select,[contenteditable]'))
+            return;
+        if (this.canEdit() && !this.creating()) {
+            e.preventDefault();
+            this.creating.set(true);
+        }
+    }
+    secId(s) {
+        return s.sprint?.id ?? 'backlog';
+    }
+    secName(s) {
+        return s.sprint ? s.sprint.name + (s.sprint.state === 'active' ? ' · active' : '') : 'Backlog';
+    }
+    secMeta(s) {
+        const n = `${s.items.length} ${s.items.length === 1 ? 'issue' : 'issues'}`;
+        const d = s.sprint ? dateRange(s.sprint.startsOn, s.sprint.endsOn) : '';
+        return d ? `${d} · ${n}` : n;
+    }
+    toggle(key) {
+        const s = new Set(this.picked());
+        s.has(key) ? s.delete(key) : s.add(key);
+        this.picked.set(s);
+    }
+    dragStart(e, i) {
+        if (!this.canEdit())
+            return;
+        const sec = this.sections().find((s) => s.items.some((x) => x.key === i.key));
+        this.drag = { ...i, section: sec ? this.secId(sec) : 'backlog' };
+        e.dataTransfer?.setData('text/plain', i.key);
+        if (e.dataTransfer)
+            e.dataTransfer.effectAllowed = 'move';
+    }
+    overSection(e, s) {
+        if (!this.drag || s.sprint?.state === 'completed')
+            return;
+        e.preventDefault();
+        if (this.overSec() !== this.secId(s))
+            this.overSec.set(this.secId(s));
+    }
+    overItem(e, i) {
+        if (!this.drag || this.drag.key === i.key)
+            return;
+        e.preventDefault();
+        if (this.overRow() !== i.key)
+            this.overRow.set(i.key);
+    }
+    /** Dropped on a section's empty space: plan it there, at the end. */
+    dropOnSection(e, s) {
+        e.preventDefault();
+        const d = this.drag;
+        this.clearDrag();
+        if (!d)
+            return;
+        const steps = [];
+        if (d.section !== this.secId(s))
+            steps.push(this.api.update(d.key, { sprintId: s.sprint?.id ?? '' }));
+        const lastRow = [...s.items].reverse().find((x) => x.key !== d.key);
+        if (lastRow)
+            steps.push(this.api.move(d.key, d.statusId, lastRow.key));
+        this.run(steps, `Could not move ${d.key}.`);
+    }
+    /** Dropped on a row: just above it, planned into its section. */
+    dropOnRow(e, s, ix) {
+        e.preventDefault();
+        e.stopPropagation();
+        const d = this.drag;
+        this.clearDrag();
+        const target = s.items[ix];
+        if (!d || !target || target.key === d.key)
+            return;
+        const before = target.key;
+        const after = s.items.slice(0, ix).reverse().find((x) => x.key !== d.key)?.key;
+        const steps = [];
+        if (d.section !== this.secId(s))
+            steps.push(this.api.update(d.key, { sprintId: s.sprint?.id ?? '' }));
+        steps.push(this.api.move(d.key, d.statusId, after, before));
+        this.run(steps, `Could not move ${d.key}.`);
+    }
+    bulkPick(e, field) {
+        const el = e.target;
+        const v = el.value;
+        el.value = '';
+        if (!v)
+            return;
+        const change = { [field]: field === 'sprintId' && v === 'backlog' ? '' : v };
+        this.bulk(change);
+    }
+    addLabel() {
+        const l = this.label().trim();
+        if (!l)
+            return;
+        this.label.set('');
+        this.labelling.set(false);
+        this.bulk({ addLabels: [l] });
+    }
+    quickCreate() {
+        const p = this.host.project();
+        const title = this.newTitle().trim();
+        if (!p || !title || this.busy())
+            return;
+        this.busy.set(true);
+        this.api.create(p.id, { title, type: 'task' }).subscribe({
+            next: (is) => { this.busy.set(false); this.newTitle.set(''); this.note.set(`${is.key} created in the backlog.`); this.load(); },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not create the issue.')); },
+        });
+    }
+    created(is) {
+        this.creating.set(false);
+        this.note.set(`${is.key} created.`);
+        this.load();
+    }
+    createSprint() {
+        const p = this.host.project();
+        if (!p)
+            return;
+        this.busy.set(true);
+        this.api.createSprint(p.id).subscribe({
+            next: (s) => { this.busy.set(false); this.note.set(`${s.name} created. Drag issues into it, then start it.`); this.load(); },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not create a sprint.')); },
+        });
+    }
+    start(sec) {
+        const p = this.host.project();
+        if (!p || !sec.sprint)
+            return;
+        this.busy.set(true);
+        this.api.startSprint(p.id, sec.sprint.id).subscribe({
+            next: (s) => { this.busy.set(false); this.note.set(`${s.name} started.`); void this.router.navigate(this.host.link('board')); },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not start the sprint.')); },
+        });
+    }
+    load() {
+        const p = this.host.project();
+        if (!p)
+            return;
+        this.api.backlog(p.id, this.filter()).subscribe({
+            next: (s) => { this.sections.set(s); this.error.set(''); },
+            error: (e) => this.error.set(apiMessage(e, 'Could not load the backlog.')),
+        });
+    }
+    bulk(change) {
+        const p = this.host.project();
+        const keys = [...this.picked()];
+        if (!p || !keys.length)
+            return;
+        this.busy.set(true);
+        this.api.bulk(p.id, keys, change).subscribe({
+            next: () => { this.busy.set(false); this.note.set(`${keys.length} ${keys.length === 1 ? 'issue' : 'issues'} changed.`); this.picked.set(new Set()); this.load(); },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not change the issues.')); },
+        });
+    }
+    run(steps, fallback) {
+        if (!steps.length)
+            return;
+        this.error.set('');
+        concat(...steps).pipe(last()).subscribe({
+            next: () => this.load(),
+            error: (e) => { this.error.set(apiMessage(e, fallback)); this.load(); },
+        });
+    }
+    clearDrag() {
+        this.drag = null;
+        this.overRow.set('');
+        this.overSec.set('');
+    }
+    loadAll() {
+        const p = this.host.project();
+        if (!p)
+            return;
+        forkJoin({ st: this.api.statuses(p.id), ep: this.api.epics(p.id) }).subscribe({
+            next: ({ st, ep }) => { this.statuses.set(st); this.epics.set(ep); },
+            error: () => undefined,
+        });
+        this.load();
+    }
+    filter() {
+        const all = [];
+        const t = this.text().trim();
+        if (t)
+            all.push({ field: 'text', op: 'contains', values: [t] });
+        if (this.epic())
+            all.push({ field: 'epic', op: 'in', values: [this.epic()] });
+        return all.length ? { all } : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BacklogPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: BacklogPage, isStandalone: true, selector: "o-design-backlog", host: { listeners: { "document:keydown": "key($event)" } }, ngImport: i0, template: `
+    <div class="o-page o-wide">
+      <div class="o-ph">
+        <div class="o-col"><span class="o-eyebrow">{{ host.project()?.key }} · ranked by priority</span><h1 class="o-t">Backlog</h1></div>
+        <div class="o-acts">
+          <input class="o-in o-sm" style="width:200px" placeholder="Filter by text" aria-label="Filter by text" [ngModel]="text()" (ngModelChange)="text.set($event)" (keydown.enter)="load()" (blur)="load()" />
+          <select class="o-in o-sm" style="width:auto" aria-label="Epic" [ngModel]="epic()" (ngModelChange)="epic.set($event); load()">
+            <option value="">All epics</option>
+            @for (e of epics(); track e.key) {<option [value]="e.key">{{ e.title }}</option>}
+          </select>
+          @if (canEdit()) {<button type="button" class="o-btn o-sm" (click)="createSprint()" [disabled]="busy()" data-testid="create-sprint">Create sprint</button>}
+        </div>
+      </div>
+
+      @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+      @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
+
+      @for (sec of sections(); track secId(sec)) {
+        <section class="o-card" [class.drop-on]="overSec() === secId(sec)" [attr.aria-label]="secName(sec)" [attr.data-testid]="'section-' + secName(sec)"
+          (dragover)="overSection($event, sec)" (dragleave)="overSec.set('')" (drop)="dropOnSection($event, sec)">
+          <div class="o-ch">
+            <b>{{ secName(sec) }}</b>
+            <span class="o-faint o-sm">{{ secMeta(sec) }}</span>
+            <span class="o-r o-flex">
+              <span class="o-sm">{{ sec.points }} {{ sec.points === 1 ? 'point' : 'points' }}</span>
+              @if (canEdit() && sec.sprint?.state === 'active') {<a class="o-btn o-sm" [routerLink]="host.link('board')">Complete sprint</a>}
+              @if (canEdit() && sec.sprint?.state === 'planned' && !hasActive() && firstPlanned()?.id === sec.sprint?.id) {
+                <button type="button" class="o-btn o-sm" (click)="start(sec)" [disabled]="busy()" data-testid="start-sprint">Start sprint</button>
+              }
+            </span>
+          </div>
+          @if (sec.sprint?.goal) {<div class="o-row o-faint o-sm" style="background:var(--o-well)">Goal: {{ sec.sprint!.goal }}</div>}
+          @for (i of sec.items; track i.key; let ix = $index) {
+            <div class="o-row" [class.row-sel]="picked().has(i.key)" [class.row-over]="overRow() === i.key" [attr.draggable]="canEdit()"
+              (dragstart)="dragStart($event, i)" (dragend)="overRow.set(''); overSec.set('')" (dragover)="overItem($event, i)" (drop)="dropOnRow($event, sec, ix)" [attr.data-testid]="'row-' + i.key">
+              @if (canEdit()) {<span class="grip" aria-hidden="true">⋮⋮</span>}
+              <button type="button" class="o-cbx" [class.o-on]="picked().has(i.key)" role="checkbox" [attr.aria-checked]="picked().has(i.key)" (click)="toggle(i.key)" [attr.aria-label]="'Select ' + i.key"></button>
+              <span class="o-sq" [style.background]="typeColour(i.type)" aria-hidden="true"></span>
+              <span class="o-mono o-sm o-mut" style="width:64px">{{ i.key }}</span>
+              <a class="title o-ell" [routerLink]="host.link('issues/' + i.key)">{{ i.title }}</a>
+              @if (i.epic) {<span [class]="epicChip(i.epic.key)">{{ i.epic.title }}</span>}
+              <span [class]="statusChip(i.status, i.category)">{{ i.status }}</span>
+              <span class="o-faint o-sm o-hide-m" style="width:60px">{{ priorityLabel(i.priority) }}</span>
+              <span class="o-mono o-sm o-faint" style="width:22px;text-align:right">{{ i.points ?? '' }}</span>
+              <span class="o-av" [attr.title]="people().name(i.assigneeId)">{{ people().initials(i.assigneeId) }}</span>
+            </div>
+          }
+          @if (!sec.items.length && sec.sprint) {<div class="o-empty">Drag issues here to plan the sprint.</div>}
+          @if (!sec.items.length && !sec.sprint) {<div class="o-empty">The backlog is empty.</div>}
+          @if (!sec.sprint && canEdit()) {
+            <div class="o-row"><span class="o-faint" aria-hidden="true">+</span>
+              <input class="o-in o-sm" style="border:none;box-shadow:none" placeholder="What needs to be done? Press Enter to create" aria-label="New issue in the backlog"
+                [ngModel]="newTitle()" (ngModelChange)="newTitle.set($event)" (keydown.enter)="quickCreate()" data-testid="backlog-new" />
+            </div>
+          }
+        </section>
+      } @empty {
+        @if (!error()) {<div class="o-card"><div class="o-empty">Loading the backlog…</div></div>}
+      }
+
+      @if (picked().size) {
+        <div class="bulk" role="toolbar" aria-label="Bulk edit" data-testid="bulk-bar">
+          <b style="padding:0 6px">{{ picked().size }} selected</b>
+          <select class="o-in o-sm" style="width:auto" aria-label="Set status" (change)="bulkPick($event, 'statusId')"><option value="">Status…</option>@for (s of statuses(); track s.id) {<option [value]="s.id">{{ s.name }}</option>}</select>
+          <select class="o-in o-sm" style="width:auto" aria-label="Set assignee" (change)="bulkPick($event, 'assigneeId')"><option value="">Assignee…</option>@for (p of host.people(); track p.id) {<option [value]="p.id">{{ p.name || p.email }}</option>}</select>
+          <select class="o-in o-sm" style="width:auto" aria-label="Move to sprint" (change)="bulkPick($event, 'sprintId')" data-testid="bulk-sprint">
+            <option value="">Sprint…</option>
+            @for (s of openSprints(); track s.id) {<option [value]="s.id">{{ s.name }}</option>}
+            <option value="backlog">Backlog</option>
+          </select>
+          <select class="o-in o-sm" style="width:auto" aria-label="Set priority" (change)="bulkPick($event, 'priority')"><option value="">Priority…</option>@for (p of priorities; track p) {<option [value]="p">{{ priorityLabel(p) }}</option>}</select>
+          @if (labelling()) {
+            <input class="o-in o-sm" style="width:140px" placeholder="Label, then Enter" aria-label="Add a label" [ngModel]="label()" (ngModelChange)="label.set($event)" (keydown.enter)="addLabel()" (keydown.escape)="labelling.set(false)" />
+          } @else {
+            <button type="button" class="o-btn o-sm" (click)="labelling.set(true)">+ Label</button>
+          }
+          <button type="button" class="o-btn o-sm o-ghost" (click)="clearPicked()">Clear</button>
+        </div>
+      }
+    </div>
+
+    @if (creating()) {
+      <o-create-issue [hasActive]="hasActive()" defaultSprint="" (created)="created($event)" (cancel)="creating.set(false)" />
+    }
+  `, isInline: true, styles: [".row-sel{background:var(--o-acc-tint)}.grip{cursor:grab;letter-spacing:-2px;color:var(--o-dim);-webkit-user-select:none;user-select:none}.drop-on{outline:2px dashed var(--o-acc)}.row-over{box-shadow:inset 0 2px 0 var(--o-acc)}.bulk{position:sticky;bottom:16px;align-self:center;background:var(--o-tx);color:var(--o-acc-fg);border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:center;box-shadow:0 12px 30px #00000040;flex-wrap:wrap;z-index:5}.bulk .o-btn.o-ghost{color:var(--o-acc-fg)}.title{flex:1;min-width:0;color:var(--o-tx)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: CreateIssueDialog, selector: "o-create-issue", inputs: ["statusId", "hasActive", "defaultSprint"], outputs: ["created", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BacklogPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-design-backlog', imports: [FormsModule, RouterLink, CreateIssueDialog], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="o-page o-wide">
+      <div class="o-ph">
+        <div class="o-col"><span class="o-eyebrow">{{ host.project()?.key }} · ranked by priority</span><h1 class="o-t">Backlog</h1></div>
+        <div class="o-acts">
+          <input class="o-in o-sm" style="width:200px" placeholder="Filter by text" aria-label="Filter by text" [ngModel]="text()" (ngModelChange)="text.set($event)" (keydown.enter)="load()" (blur)="load()" />
+          <select class="o-in o-sm" style="width:auto" aria-label="Epic" [ngModel]="epic()" (ngModelChange)="epic.set($event); load()">
+            <option value="">All epics</option>
+            @for (e of epics(); track e.key) {<option [value]="e.key">{{ e.title }}</option>}
+          </select>
+          @if (canEdit()) {<button type="button" class="o-btn o-sm" (click)="createSprint()" [disabled]="busy()" data-testid="create-sprint">Create sprint</button>}
+        </div>
+      </div>
+
+      @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+      @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
+
+      @for (sec of sections(); track secId(sec)) {
+        <section class="o-card" [class.drop-on]="overSec() === secId(sec)" [attr.aria-label]="secName(sec)" [attr.data-testid]="'section-' + secName(sec)"
+          (dragover)="overSection($event, sec)" (dragleave)="overSec.set('')" (drop)="dropOnSection($event, sec)">
+          <div class="o-ch">
+            <b>{{ secName(sec) }}</b>
+            <span class="o-faint o-sm">{{ secMeta(sec) }}</span>
+            <span class="o-r o-flex">
+              <span class="o-sm">{{ sec.points }} {{ sec.points === 1 ? 'point' : 'points' }}</span>
+              @if (canEdit() && sec.sprint?.state === 'active') {<a class="o-btn o-sm" [routerLink]="host.link('board')">Complete sprint</a>}
+              @if (canEdit() && sec.sprint?.state === 'planned' && !hasActive() && firstPlanned()?.id === sec.sprint?.id) {
+                <button type="button" class="o-btn o-sm" (click)="start(sec)" [disabled]="busy()" data-testid="start-sprint">Start sprint</button>
+              }
+            </span>
+          </div>
+          @if (sec.sprint?.goal) {<div class="o-row o-faint o-sm" style="background:var(--o-well)">Goal: {{ sec.sprint!.goal }}</div>}
+          @for (i of sec.items; track i.key; let ix = $index) {
+            <div class="o-row" [class.row-sel]="picked().has(i.key)" [class.row-over]="overRow() === i.key" [attr.draggable]="canEdit()"
+              (dragstart)="dragStart($event, i)" (dragend)="overRow.set(''); overSec.set('')" (dragover)="overItem($event, i)" (drop)="dropOnRow($event, sec, ix)" [attr.data-testid]="'row-' + i.key">
+              @if (canEdit()) {<span class="grip" aria-hidden="true">⋮⋮</span>}
+              <button type="button" class="o-cbx" [class.o-on]="picked().has(i.key)" role="checkbox" [attr.aria-checked]="picked().has(i.key)" (click)="toggle(i.key)" [attr.aria-label]="'Select ' + i.key"></button>
+              <span class="o-sq" [style.background]="typeColour(i.type)" aria-hidden="true"></span>
+              <span class="o-mono o-sm o-mut" style="width:64px">{{ i.key }}</span>
+              <a class="title o-ell" [routerLink]="host.link('issues/' + i.key)">{{ i.title }}</a>
+              @if (i.epic) {<span [class]="epicChip(i.epic.key)">{{ i.epic.title }}</span>}
+              <span [class]="statusChip(i.status, i.category)">{{ i.status }}</span>
+              <span class="o-faint o-sm o-hide-m" style="width:60px">{{ priorityLabel(i.priority) }}</span>
+              <span class="o-mono o-sm o-faint" style="width:22px;text-align:right">{{ i.points ?? '' }}</span>
+              <span class="o-av" [attr.title]="people().name(i.assigneeId)">{{ people().initials(i.assigneeId) }}</span>
+            </div>
+          }
+          @if (!sec.items.length && sec.sprint) {<div class="o-empty">Drag issues here to plan the sprint.</div>}
+          @if (!sec.items.length && !sec.sprint) {<div class="o-empty">The backlog is empty.</div>}
+          @if (!sec.sprint && canEdit()) {
+            <div class="o-row"><span class="o-faint" aria-hidden="true">+</span>
+              <input class="o-in o-sm" style="border:none;box-shadow:none" placeholder="What needs to be done? Press Enter to create" aria-label="New issue in the backlog"
+                [ngModel]="newTitle()" (ngModelChange)="newTitle.set($event)" (keydown.enter)="quickCreate()" data-testid="backlog-new" />
+            </div>
+          }
+        </section>
+      } @empty {
+        @if (!error()) {<div class="o-card"><div class="o-empty">Loading the backlog…</div></div>}
+      }
+
+      @if (picked().size) {
+        <div class="bulk" role="toolbar" aria-label="Bulk edit" data-testid="bulk-bar">
+          <b style="padding:0 6px">{{ picked().size }} selected</b>
+          <select class="o-in o-sm" style="width:auto" aria-label="Set status" (change)="bulkPick($event, 'statusId')"><option value="">Status…</option>@for (s of statuses(); track s.id) {<option [value]="s.id">{{ s.name }}</option>}</select>
+          <select class="o-in o-sm" style="width:auto" aria-label="Set assignee" (change)="bulkPick($event, 'assigneeId')"><option value="">Assignee…</option>@for (p of host.people(); track p.id) {<option [value]="p.id">{{ p.name || p.email }}</option>}</select>
+          <select class="o-in o-sm" style="width:auto" aria-label="Move to sprint" (change)="bulkPick($event, 'sprintId')" data-testid="bulk-sprint">
+            <option value="">Sprint…</option>
+            @for (s of openSprints(); track s.id) {<option [value]="s.id">{{ s.name }}</option>}
+            <option value="backlog">Backlog</option>
+          </select>
+          <select class="o-in o-sm" style="width:auto" aria-label="Set priority" (change)="bulkPick($event, 'priority')"><option value="">Priority…</option>@for (p of priorities; track p) {<option [value]="p">{{ priorityLabel(p) }}</option>}</select>
+          @if (labelling()) {
+            <input class="o-in o-sm" style="width:140px" placeholder="Label, then Enter" aria-label="Add a label" [ngModel]="label()" (ngModelChange)="label.set($event)" (keydown.enter)="addLabel()" (keydown.escape)="labelling.set(false)" />
+          } @else {
+            <button type="button" class="o-btn o-sm" (click)="labelling.set(true)">+ Label</button>
+          }
+          <button type="button" class="o-btn o-sm o-ghost" (click)="clearPicked()">Clear</button>
+        </div>
+      }
+    </div>
+
+    @if (creating()) {
+      <o-create-issue [hasActive]="hasActive()" defaultSprint="" (created)="created($event)" (cancel)="creating.set(false)" />
+    }
+  `, styles: [".row-sel{background:var(--o-acc-tint)}.grip{cursor:grab;letter-spacing:-2px;color:var(--o-dim);-webkit-user-select:none;user-select:none}.drop-on{outline:2px dashed var(--o-acc)}.row-over{box-shadow:inset 0 2px 0 var(--o-acc)}.bulk{position:sticky;bottom:16px;align-self:center;background:var(--o-tx);color:var(--o-acc-fg);border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:center;box-shadow:0 12px 30px #00000040;flex-wrap:wrap;z-index:5}.bulk .o-btn.o-ghost{color:var(--o-acc-fg)}.title{flex:1;min-width:0;color:var(--o-tx)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { key: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+const COLS = [
+    { id: 'key', label: 'Key', sort: 'key' }, { id: 'title', label: 'Title', sort: 'title' }, { id: 'type', label: 'Type', sort: 'type' },
+    { id: 'status', label: 'Status', sort: 'status' }, { id: 'assignee', label: 'Assignee', sort: 'assignee' }, { id: 'priority', label: 'Priority', sort: 'priority' },
+    { id: 'points', label: 'Points', sort: 'points' }, { id: 'sprint', label: 'Sprint', sort: 'sprint' }, { id: 'updated', label: 'Updated', sort: 'updated' },
+];
+const DEFAULT_COLS = COLS.map((c) => c.id);
+/** The views every project has, before any are saved (prototype VIEWS: all, mine, bugs). */
+const BUILT_IN = [
+    { id: 'all', name: 'All issues', filter: null },
+    { id: 'mine', name: 'My open issues', filter: { all: [{ field: 'assignee', op: 'in', values: ['me'] }, { field: 'category', op: 'not_in', values: ['done'] }] } },
+    { id: 'bugs', name: 'Bugs', filter: { field: 'type', op: 'in', values: ['bug'] } },
+];
+const PAGE = 100;
+// /{org}/{project}/issues (prototype "design_list"): every issue as a table, a filter builder over the
+// typed filter, sortable columns, saved views (private, or shared by those who edit issues) and an
+// export of what the filter matches.
+class IssueListPage {
+    constructor() {
+        this.host = inject(DesignHost);
+        this.api = inject(DesignApi);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.allCols = COLS;
+        this.builtIn = BUILT_IN;
+        this.types = TYPES;
+        this.priorities = PRIORITIES;
+        this.typeLabel = typeLabel;
+        this.typeColour = typeColour;
+        this.priorityLabel = priorityLabel;
+        this.statusChip = statusChip;
+        this.ago = (s) => ago(s);
+        this.statuses = signal([], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
+        this.sprints = signal([], ...(ngDevMode ? [{ debugName: "sprints" }] : /* istanbul ignore next */ []));
+        this.views = signal({ mine: [], shared: [] }, ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+        this.counts = signal({}, ...(ngDevMode ? [{ debugName: "counts" }] : /* istanbul ignore next */ []));
+        this.view = signal('all', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        this.rows = signal([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        this.sort = signal([], ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+        this.cols = signal(DEFAULT_COLS, ...(ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.note = signal('', ...(ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.colsOpen = signal(false, ...(ngDevMode ? [{ debugName: "colsOpen" }] : /* istanbul ignore next */ []));
+        this.saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+        this.creating = signal(false, ...(ngDevMode ? [{ debugName: "creating" }] : /* istanbul ignore next */ []));
+        this.fType = '';
+        this.fStatus = '';
+        this.fWho = '';
+        this.fPri = '';
+        this.fSprint = '';
+        this.fText = '';
+        this.lastText = '';
+        this.viewName = '';
+        this.viewShared = false;
+        this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
+        this.canEdit = computed(() => {
+            const p = this.host.project();
+            return !!p && !p.archivedAt && p.capabilities.includes('issues.edit');
+        }, ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+        this.hasActive = computed(() => this.sprints().some((s) => s.state === 'active'), ...(ngDevMode ? [{ debugName: "hasActive" }] : /* istanbul ignore next */ []));
+        this.savedView = computed(() => [...this.views().mine, ...this.views().shared].find((v) => v.id === this.view()) ?? null, ...(ngDevMode ? [{ debugName: "savedView" }] : /* istanbul ignore next */ []));
+        this.title = computed(() => BUILT_IN.find((v) => v.id === this.view())?.name ?? this.savedView()?.name ?? 'All issues', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.shownCols = computed(() => COLS.filter((c) => this.cols().includes(c.id)), ...(ngDevMode ? [{ debugName: "shownCols" }] : /* istanbul ignore next */ []));
+        this.sprintNames = computed(() => new Map(this.sprints().map((s) => [s.id, s.name])), ...(ngDevMode ? [{ debugName: "sprintNames" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const p = this.host.project();
+            if (p)
+                untracked(() => this.loadAll());
+        });
+        // ?new=1: C pressed elsewhere in the project (the shell sends it here).
+        this.route.queryParamMap.subscribe((q) => {
+            if (q.get('new')) {
+                this.creating.set(true);
+                void this.router.navigate([], { relativeTo: this.route, queryParams: { new: null }, queryParamsHandling: 'merge', replaceUrl: true });
+            }
+        });
+    }
+    key(e) {
+        const t = e.target;
+        if (e.key !== 'c' || e.metaKey || e.ctrlKey || e.altKey || t?.closest('input,textarea,select,[contenteditable]'))
+            return;
+        if (this.canEdit() && !this.creating()) {
+            e.preventDefault();
+            this.creating.set(true);
+        }
+    }
+    sprintLabel(id) {
+        return id ? this.sprintNames().get(id) ?? 'Sprint' : 'Backlog';
+    }
+    pick(id) {
+        this.view.set(id);
+        const sv = this.savedView();
+        this.cols.set(sv?.columns?.length ? sv.columns : DEFAULT_COLS);
+        this.sort.set(sv?.sort ?? []);
+        this.fType = this.fStatus = this.fWho = this.fPri = this.fSprint = this.fText = '';
+        this.lastText = '';
+        this.reset();
+    }
+    flipCol(id) {
+        const c = this.cols();
+        this.cols.set(c.includes(id) ? c.filter((x) => x !== id) : DEFAULT_COLS.filter((x) => x === id || c.includes(x)));
+    }
+    sortBy(c) {
+        const cur = this.sort()[0];
+        this.sort.set([{ field: c.sort, desc: cur?.field === c.sort ? !cur.desc : false }]);
+        this.reset();
+    }
+    arrow(c) {
+        const s = this.sort()[0];
+        return s?.field === c.sort ? (s.desc ? '↓' : '↑') : '';
+    }
+    ariaSort(c) {
+        const s = this.sort()[0];
+        return s?.field === c.sort ? (s.desc ? 'descending' : 'ascending') : 'none';
+    }
+    textChanged() {
+        if (this.fText !== this.lastText)
+            this.reset();
+    }
+    open(i) {
+        void this.router.navigate(this.host.link('issues/' + i.key));
+    }
+    created(is) {
+        this.creating.set(false);
+        this.note.set(`${is.key} created.`);
+        this.reset();
+    }
+    reset() {
+        this.lastText = this.fText;
+        this.rows.set([]);
+        this.fetch(0);
+    }
+    more() {
+        this.fetch(this.rows().length);
+    }
+    exportAs(format) {
+        const p = this.host.project();
+        if (!p)
+            return;
+        this.api.export(p.id, format, this.filter(), this.sort()).subscribe({
+            next: (body) => download(body, `${p.key.toLowerCase()}-issues.${format}`, format === 'csv' ? 'text/csv' : 'application/json'),
+            error: (e) => this.error.set(apiMessage(e, 'Could not export the issues.')),
+        });
+    }
+    saveView() {
+        const p = this.host.project();
+        const name = this.viewName.trim();
+        if (!p || !name)
+            return;
+        this.busy.set(true);
+        this.api.saveView(p.id, { name, shared: this.viewShared && this.canEdit(), filter: this.filter(), columns: this.cols(), sort: this.sort() }).subscribe({
+            next: (v) => {
+                this.busy.set(false);
+                this.saving.set(false);
+                this.viewName = '';
+                this.viewShared = false;
+                this.note.set(`Saved “${v.name}”.`);
+                this.loadViews(v.id);
+            },
+            error: (e) => { this.busy.set(false); this.error.set(apiMessage(e, 'Could not save the view.')); },
+        });
+    }
+    deleteView(v) {
+        const p = this.host.project();
+        if (!p)
+            return;
+        this.api.deleteView(p.id, v.id).subscribe({
+            next: () => { this.note.set(`Deleted “${v.name}”.`); this.loadViews('all'); },
+            error: (e) => this.error.set(apiMessage(e, 'Could not delete the view.')),
+        });
+    }
+    fetch(offset) {
+        const p = this.host.project();
+        if (!p)
+            return;
+        this.loading.set(true);
+        this.error.set('');
+        this.api.query(p.id, { filter: this.filter(), sort: this.sort(), limit: PAGE, offset }).subscribe({
+            next: (r) => { this.loading.set(false); this.rows.set(offset ? [...this.rows(), ...r.items] : r.items); this.total.set(r.total); },
+            error: (e) => { this.loading.set(false); this.rows.set([]); this.total.set(0); this.error.set(apiMessage(e, 'Could not load the issues.')); },
+        });
+    }
+    /** The view's filter and the builder's conditions, together. */
+    filter() {
+        const all = [];
+        const base = BUILT_IN.find((v) => v.id === this.view())?.filter ?? this.savedView()?.filter ?? null;
+        if (base)
+            all.push(base);
+        if (this.fType)
+            all.push({ field: 'type', op: 'in', values: [this.fType] });
+        if (this.fStatus)
+            all.push({ field: 'status', op: 'in', values: [this.fStatus] });
+        if (this.fWho)
+            all.push({ field: 'assignee', op: 'in', values: [this.fWho] });
+        if (this.fPri)
+            all.push({ field: 'priority', op: 'in', values: [this.fPri] });
+        if (this.fSprint)
+            all.push({ field: 'sprint', op: 'in', values: [this.fSprint] });
+        if (this.fText.trim())
+            all.push({ field: 'text', op: 'contains', values: [this.fText.trim()] });
+        if (!all.length)
+            return null;
+        return all.length === 1 ? all[0] : { all };
+    }
+    loadViews(select) {
+        const p = this.host.project();
+        if (!p)
+            return;
+        this.api.views(p.id).subscribe({
+            next: (v) => { this.views.set(v); if (select)
+                this.pick(select); },
+            error: () => undefined,
+        });
+    }
+    loadAll() {
+        const p = this.host.project();
+        if (!p)
+            return;
+        forkJoin({ st: this.api.statuses(p.id), sp: this.api.sprints(p.id) }).subscribe({
+            next: ({ st, sp }) => { this.statuses.set(st); this.sprints.set(sp); },
+            error: () => undefined,
+        });
+        this.loadViews();
+        forkJoin(Object.fromEntries(BUILT_IN.map((v) => [v.id, this.api.query(p.id, { filter: v.filter, limit: 1 })]))).subscribe({
+            next: (r) => this.counts.set(Object.fromEntries(Object.entries(r).map(([k, x]) => [k, x.total]))),
+            error: () => undefined,
+        });
+        this.reset();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IssueListPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IssueListPage, isStandalone: true, selector: "o-design-list", host: { listeners: { "document:keydown": "key($event)" } }, ngImport: i0, template: `
+    <div class="o-page o-wide">
+      <div class="o-ph">
+        <div class="o-col"><span class="o-eyebrow">{{ host.project()?.key }} · Issues</span><h1 class="o-t">{{ title() }}</h1></div>
+        <div class="o-acts">
+          <button type="button" class="o-btn o-sm" (click)="exportAs('csv')" data-testid="export-csv">Export CSV</button>
+          <button type="button" class="o-btn o-sm" (click)="exportAs('json')">Export JSON</button>
+          <span class="menu-anchor">
+            <button type="button" class="o-btn o-sm" (click)="colsOpen.set(!colsOpen())" [attr.aria-expanded]="colsOpen()" aria-haspopup="true">Columns</button>
+            @if (colsOpen()) {
+              <div class="o-menu cols" role="group" aria-label="Columns">
+                @for (c of allCols; track c.id) {
+                  <label><input type="checkbox" [checked]="cols().includes(c.id)" [disabled]="c.id === 'key' || c.id === 'title'" (change)="flipCol(c.id)" />{{ c.label }}</label>
+                }
+              </div>
+            }
+          </span>
+          @if (canEdit()) {<button type="button" class="o-btn o-sm" (click)="creating.set(true)">+ Issue</button>}
+          <button type="button" class="o-btn o-sm o-dark" (click)="saving.set(!saving())" data-testid="save-view">Save view</button>
+        </div>
+      </div>
+
+      @if (saving()) {
+        <form class="o-card o-cb o-flex o-wrap" style="gap:10px" (ngSubmit)="saveView()">
+          <label class="o-sr-only" for="sv-name">View name</label>
+          <input id="sv-name" class="o-in o-sm" style="width:240px" name="name" placeholder="Name this view" [(ngModel)]="viewName" data-testid="view-name" />
+          <label class="o-flex o-sm" [class.o-faint]="!canEdit()"><input type="checkbox" name="shared" [(ngModel)]="viewShared" [disabled]="!canEdit()" />Share with the project</label>
+          <span class="o-faint o-sm">Saves these filters, columns and sort.</span>
+          <span class="o-r o-flex"><button type="button" class="o-btn o-sm" (click)="saving.set(false)">Cancel</button><button type="submit" class="o-btn o-sm o-dark" [disabled]="!viewName.trim() || busy()">Save</button></span>
+        </form>
+      }
+
+      <div class="o-split o-lft">
+        <nav class="o-setnav" aria-label="Views">
+          <span class="o-lbl" style="padding-top:0">My views</span>
+          @for (v of builtIn; track v.id) {
+            <button type="button" [class.o-on]="view() === v.id" [attr.aria-current]="view() === v.id ? 'true' : null" (click)="pick(v.id)">{{ v.name }}<span class="o-r o-faint o-xs">{{ counts()[v.id] ?? '' }}</span></button>
+          }
+          @for (v of views().mine; track v.id) {
+            <button type="button" [class.o-on]="view() === v.id" [attr.aria-current]="view() === v.id ? 'true' : null" (click)="pick(v.id)">{{ v.name }}<span class="o-r o-faint o-xs">{{ v.count }}</span></button>
+          }
+          <span class="o-lbl">Shared</span>
+          @for (v of views().shared; track v.id) {
+            <button type="button" [class.o-on]="view() === v.id" [attr.aria-current]="view() === v.id ? 'true' : null" (click)="pick(v.id)">{{ v.name }}<span class="o-r o-faint o-xs">{{ v.count }}</span></button>
+          } @empty {
+            <span class="o-faint o-sm" style="padding:4px 10px">No shared views yet.</span>
+          }
+          @if (savedView(); as sv) {
+            @if (sv.mine) {<button type="button" class="o-faint o-sm" style="margin-top:10px" (click)="deleteView(sv)">Delete “{{ sv.name }}”</button>}
+          }
+        </nav>
+
+        <div class="o-col" style="gap:12px;min-width:0">
+          <div class="o-flex o-wrap">
+            <div class="o-seg" role="group" aria-label="Filter mode"><button type="button" class="o-on" aria-pressed="true">Filters</button><button type="button" disabled title="The query syntax comes at GA">Query</button></div>
+            <select class="o-in o-sm" style="width:auto" aria-label="Type" [(ngModel)]="fType" (ngModelChange)="reset()"><option value="">Type: any</option>@for (t of types; track t) {<option [value]="t">{{ typeLabel(t) }}</option>}</select>
+            <select class="o-in o-sm" style="width:auto" aria-label="Status" [(ngModel)]="fStatus" (ngModelChange)="reset()"><option value="">Status: any</option>@for (s of statuses(); track s.id) {<option [value]="s.id">{{ s.name }}</option>}</select>
+            <select class="o-in o-sm" style="width:auto" aria-label="Assignee" [(ngModel)]="fWho" (ngModelChange)="reset()">
+              <option value="">Assignee: any</option><option value="me">Me</option><option value="none">Unassigned</option>
+              @for (p of host.people(); track p.id) {<option [value]="p.id">{{ p.name || p.email }}</option>}
+            </select>
+            <select class="o-in o-sm" style="width:auto" aria-label="Priority" [(ngModel)]="fPri" (ngModelChange)="reset()"><option value="">Priority: any</option>@for (p of priorities; track p) {<option [value]="p">{{ priorityLabel(p) }}</option>}</select>
+            <select class="o-in o-sm" style="width:auto" aria-label="Sprint" [(ngModel)]="fSprint" (ngModelChange)="reset()">
+              <option value="">Sprint: any</option>@for (s of sprints(); track s.id) {<option [value]="s.id">{{ s.name }}</option>}<option value="backlog">Backlog</option>
+            </select>
+            <input class="o-in o-sm" style="width:160px" placeholder="Text" aria-label="Text" [(ngModel)]="fText" (keydown.enter)="reset()" (blur)="textChanged()" />
+            <span class="o-r o-faint o-sm" aria-live="polite">{{ total() }} {{ total() === 1 ? 'issue' : 'issues' }}</span>
+          </div>
+          @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+          @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
+          <div class="o-card" style="overflow-x:auto">
+            <div class="o-tbl" role="table" [attr.aria-label]="title()" style="min-width:820px">
+              <div class="o-thead" role="rowgroup"><div class="o-tr" role="row">
+                @for (c of shownCols(); track c.id) {
+                  <div class="o-th o-sort" role="columnheader" tabindex="0" [attr.aria-sort]="ariaSort(c)" (click)="sortBy(c)" (keydown.enter)="sortBy(c)">{{ c.label }}<span class="o-faint"> {{ arrow(c) }}</span></div>
+                }
+              </div></div>
+              <div class="o-tbody" role="rowgroup">
+                @for (i of rows(); track i.key) {
+                  <div class="o-tr o-click" role="row" tabindex="0" (click)="open(i)" (keydown.enter)="open(i)" [attr.data-testid]="'list-' + i.key">
+                    @for (c of shownCols(); track c.id) {
+                      @switch (c.id) {
+                        @case ('key') {<div class="o-td o-mono o-sm o-mut" role="cell">{{ i.key }}</div>}
+                        @case ('title') {<div class="o-td" role="cell"><span class="o-flex"><span class="o-sq" [style.background]="typeColour(i.type)" aria-hidden="true"></span><span class="o-ell">{{ i.title }}</span></span></div>}
+                        @case ('type') {<div class="o-td o-mut" role="cell">{{ typeLabel(i.type) }}</div>}
+                        @case ('status') {<div class="o-td" role="cell"><span [class]="statusChip(i.status, i.category)">{{ i.status }}</span></div>}
+                        @case ('assignee') {<div class="o-td" role="cell"><span class="o-flex"><span class="o-av" aria-hidden="true">{{ people().initials(i.assigneeId) }}</span><span class="o-ell">{{ people().name(i.assigneeId) }}</span></span></div>}
+                        @case ('priority') {<div class="o-td o-mut" role="cell">{{ priorityLabel(i.priority) }}</div>}
+                        @case ('points') {<div class="o-td o-num o-mono" role="cell">{{ i.points ?? '' }}</div>}
+                        @case ('sprint') {<div class="o-td o-mut" role="cell">{{ sprintLabel(i.sprintId) }}</div>}
+                        @case ('updated') {<div class="o-td o-faint o-sm" role="cell">{{ ago(i.updatedAt) }}</div>}
+                      }
+                    }
+                  </div>
+                } @empty {
+                  <div class="o-empty">{{ loading() ? 'Loading issues…' : 'No issues match.' }}</div>
+                }
+              </div>
+            </div>
+          </div>
+          @if (rows().length < total()) {<button type="button" class="o-btn o-sm" style="align-self:center" (click)="more()" [disabled]="loading()">Show more</button>}
+        </div>
+      </div>
+    </div>
+
+    @if (creating()) {
+      <o-create-issue [hasActive]="hasActive()" (created)="created($event)" (cancel)="creating.set(false)" />
+    }
+  `, isInline: true, styles: [".o-th.o-sort{cursor:pointer;-webkit-user-select:none;user-select:none}.menu-anchor{position:relative}.cols{right:0;top:34px;min-width:180px;padding:6px}.cols label{display:flex;gap:8px;align-items:center;padding:5px 6px;font-size:13px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CreateIssueDialog, selector: "o-create-issue", inputs: ["statusId", "hasActive", "defaultSprint"], outputs: ["created", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IssueListPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-design-list', imports: [FormsModule, CreateIssueDialog], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="o-page o-wide">
+      <div class="o-ph">
+        <div class="o-col"><span class="o-eyebrow">{{ host.project()?.key }} · Issues</span><h1 class="o-t">{{ title() }}</h1></div>
+        <div class="o-acts">
+          <button type="button" class="o-btn o-sm" (click)="exportAs('csv')" data-testid="export-csv">Export CSV</button>
+          <button type="button" class="o-btn o-sm" (click)="exportAs('json')">Export JSON</button>
+          <span class="menu-anchor">
+            <button type="button" class="o-btn o-sm" (click)="colsOpen.set(!colsOpen())" [attr.aria-expanded]="colsOpen()" aria-haspopup="true">Columns</button>
+            @if (colsOpen()) {
+              <div class="o-menu cols" role="group" aria-label="Columns">
+                @for (c of allCols; track c.id) {
+                  <label><input type="checkbox" [checked]="cols().includes(c.id)" [disabled]="c.id === 'key' || c.id === 'title'" (change)="flipCol(c.id)" />{{ c.label }}</label>
+                }
+              </div>
+            }
+          </span>
+          @if (canEdit()) {<button type="button" class="o-btn o-sm" (click)="creating.set(true)">+ Issue</button>}
+          <button type="button" class="o-btn o-sm o-dark" (click)="saving.set(!saving())" data-testid="save-view">Save view</button>
+        </div>
+      </div>
+
+      @if (saving()) {
+        <form class="o-card o-cb o-flex o-wrap" style="gap:10px" (ngSubmit)="saveView()">
+          <label class="o-sr-only" for="sv-name">View name</label>
+          <input id="sv-name" class="o-in o-sm" style="width:240px" name="name" placeholder="Name this view" [(ngModel)]="viewName" data-testid="view-name" />
+          <label class="o-flex o-sm" [class.o-faint]="!canEdit()"><input type="checkbox" name="shared" [(ngModel)]="viewShared" [disabled]="!canEdit()" />Share with the project</label>
+          <span class="o-faint o-sm">Saves these filters, columns and sort.</span>
+          <span class="o-r o-flex"><button type="button" class="o-btn o-sm" (click)="saving.set(false)">Cancel</button><button type="submit" class="o-btn o-sm o-dark" [disabled]="!viewName.trim() || busy()">Save</button></span>
+        </form>
+      }
+
+      <div class="o-split o-lft">
+        <nav class="o-setnav" aria-label="Views">
+          <span class="o-lbl" style="padding-top:0">My views</span>
+          @for (v of builtIn; track v.id) {
+            <button type="button" [class.o-on]="view() === v.id" [attr.aria-current]="view() === v.id ? 'true' : null" (click)="pick(v.id)">{{ v.name }}<span class="o-r o-faint o-xs">{{ counts()[v.id] ?? '' }}</span></button>
+          }
+          @for (v of views().mine; track v.id) {
+            <button type="button" [class.o-on]="view() === v.id" [attr.aria-current]="view() === v.id ? 'true' : null" (click)="pick(v.id)">{{ v.name }}<span class="o-r o-faint o-xs">{{ v.count }}</span></button>
+          }
+          <span class="o-lbl">Shared</span>
+          @for (v of views().shared; track v.id) {
+            <button type="button" [class.o-on]="view() === v.id" [attr.aria-current]="view() === v.id ? 'true' : null" (click)="pick(v.id)">{{ v.name }}<span class="o-r o-faint o-xs">{{ v.count }}</span></button>
+          } @empty {
+            <span class="o-faint o-sm" style="padding:4px 10px">No shared views yet.</span>
+          }
+          @if (savedView(); as sv) {
+            @if (sv.mine) {<button type="button" class="o-faint o-sm" style="margin-top:10px" (click)="deleteView(sv)">Delete “{{ sv.name }}”</button>}
+          }
+        </nav>
+
+        <div class="o-col" style="gap:12px;min-width:0">
+          <div class="o-flex o-wrap">
+            <div class="o-seg" role="group" aria-label="Filter mode"><button type="button" class="o-on" aria-pressed="true">Filters</button><button type="button" disabled title="The query syntax comes at GA">Query</button></div>
+            <select class="o-in o-sm" style="width:auto" aria-label="Type" [(ngModel)]="fType" (ngModelChange)="reset()"><option value="">Type: any</option>@for (t of types; track t) {<option [value]="t">{{ typeLabel(t) }}</option>}</select>
+            <select class="o-in o-sm" style="width:auto" aria-label="Status" [(ngModel)]="fStatus" (ngModelChange)="reset()"><option value="">Status: any</option>@for (s of statuses(); track s.id) {<option [value]="s.id">{{ s.name }}</option>}</select>
+            <select class="o-in o-sm" style="width:auto" aria-label="Assignee" [(ngModel)]="fWho" (ngModelChange)="reset()">
+              <option value="">Assignee: any</option><option value="me">Me</option><option value="none">Unassigned</option>
+              @for (p of host.people(); track p.id) {<option [value]="p.id">{{ p.name || p.email }}</option>}
+            </select>
+            <select class="o-in o-sm" style="width:auto" aria-label="Priority" [(ngModel)]="fPri" (ngModelChange)="reset()"><option value="">Priority: any</option>@for (p of priorities; track p) {<option [value]="p">{{ priorityLabel(p) }}</option>}</select>
+            <select class="o-in o-sm" style="width:auto" aria-label="Sprint" [(ngModel)]="fSprint" (ngModelChange)="reset()">
+              <option value="">Sprint: any</option>@for (s of sprints(); track s.id) {<option [value]="s.id">{{ s.name }}</option>}<option value="backlog">Backlog</option>
+            </select>
+            <input class="o-in o-sm" style="width:160px" placeholder="Text" aria-label="Text" [(ngModel)]="fText" (keydown.enter)="reset()" (blur)="textChanged()" />
+            <span class="o-r o-faint o-sm" aria-live="polite">{{ total() }} {{ total() === 1 ? 'issue' : 'issues' }}</span>
+          </div>
+          @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+          @if (note()) {<div class="o-note" role="status">{{ note() }}</div>}
+          <div class="o-card" style="overflow-x:auto">
+            <div class="o-tbl" role="table" [attr.aria-label]="title()" style="min-width:820px">
+              <div class="o-thead" role="rowgroup"><div class="o-tr" role="row">
+                @for (c of shownCols(); track c.id) {
+                  <div class="o-th o-sort" role="columnheader" tabindex="0" [attr.aria-sort]="ariaSort(c)" (click)="sortBy(c)" (keydown.enter)="sortBy(c)">{{ c.label }}<span class="o-faint"> {{ arrow(c) }}</span></div>
+                }
+              </div></div>
+              <div class="o-tbody" role="rowgroup">
+                @for (i of rows(); track i.key) {
+                  <div class="o-tr o-click" role="row" tabindex="0" (click)="open(i)" (keydown.enter)="open(i)" [attr.data-testid]="'list-' + i.key">
+                    @for (c of shownCols(); track c.id) {
+                      @switch (c.id) {
+                        @case ('key') {<div class="o-td o-mono o-sm o-mut" role="cell">{{ i.key }}</div>}
+                        @case ('title') {<div class="o-td" role="cell"><span class="o-flex"><span class="o-sq" [style.background]="typeColour(i.type)" aria-hidden="true"></span><span class="o-ell">{{ i.title }}</span></span></div>}
+                        @case ('type') {<div class="o-td o-mut" role="cell">{{ typeLabel(i.type) }}</div>}
+                        @case ('status') {<div class="o-td" role="cell"><span [class]="statusChip(i.status, i.category)">{{ i.status }}</span></div>}
+                        @case ('assignee') {<div class="o-td" role="cell"><span class="o-flex"><span class="o-av" aria-hidden="true">{{ people().initials(i.assigneeId) }}</span><span class="o-ell">{{ people().name(i.assigneeId) }}</span></span></div>}
+                        @case ('priority') {<div class="o-td o-mut" role="cell">{{ priorityLabel(i.priority) }}</div>}
+                        @case ('points') {<div class="o-td o-num o-mono" role="cell">{{ i.points ?? '' }}</div>}
+                        @case ('sprint') {<div class="o-td o-mut" role="cell">{{ sprintLabel(i.sprintId) }}</div>}
+                        @case ('updated') {<div class="o-td o-faint o-sm" role="cell">{{ ago(i.updatedAt) }}</div>}
+                      }
+                    }
+                  </div>
+                } @empty {
+                  <div class="o-empty">{{ loading() ? 'Loading issues…' : 'No issues match.' }}</div>
+                }
+              </div>
+            </div>
+          </div>
+          @if (rows().length < total()) {<button type="button" class="o-btn o-sm" style="align-self:center" (click)="more()" [disabled]="loading()">Show more</button>}
+        </div>
+      </div>
+    </div>
+
+    @if (creating()) {
+      <o-create-issue [hasActive]="hasActive()" (created)="created($event)" (cancel)="creating.set(false)" />
+    }
+  `, styles: [".o-th.o-sort{cursor:pointer;-webkit-user-select:none;user-select:none}.menu-anchor{position:relative}.cols{right:0;top:34px;min-width:180px;padding:6px}.cols label{display:flex;gap:8px;align-items:center;padding:5px 6px;font-size:13px;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { key: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+const REL_LABEL = {
+    blocks: 'blocks', blocked_by: 'is blocked by', relates: 'relates to', duplicates: 'duplicates', duplicated_by: 'is duplicated by',
+};
+const SEVERITIES = ['critical', 'major', 'minor', 'trivial'];
+const REACTIONS = [
+    { name: '+1', emoji: '👍', label: 'thumbs up' }, { name: '-1', emoji: '👎', label: 'thumbs down' }, { name: 'laugh', emoji: '😄', label: 'laugh' },
+    { name: 'hooray', emoji: '🎉', label: 'hooray' }, { name: 'confused', emoji: '😕', label: 'confused' }, { name: 'heart', emoji: '❤️', label: 'heart' },
+    { name: 'rocket', emoji: '🚀', label: 'rocket' }, { name: 'eyes', emoji: '👀', label: 'eyes' },
+];
+const MAX_FILE = 25 * 1024 * 1024;
+const MENTION = /\[@([^\]\n]{1,120})\]\(mention:([A-Za-z0-9_-]{1,64})\)/g;
+const esc = (s) => s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+const size = (n) => (n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`);
+// /{org}/{project}/issues/PAY-142 (prototype "design_issue"): the issue's description (Markdown),
+// sub-tasks, what code names it, linked issues, comments and history; its fields on the right, each
+// editable in place by those who edit issues. Every change names the version it read, so a change
+// someone made first is never overwritten.
+class IssuePage {
+    constructor() {
+        this.host = inject(DesignHost);
+        this.api = inject(DesignApi);
+        this.route = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.key = signal('', ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+        this.issue = signal(null, ...(ngDevMode ? [{ debugName: "issue" }] : /* istanbul ignore next */ []));
+        this.statuses = signal([], ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
+        this.sprints = signal([], ...(ngDevMode ? [{ debugName: "sprints" }] : /* istanbul ignore next */ []));
+        this.epics = signal([], ...(ngDevMode ? [{ debugName: "epics" }] : /* istanbul ignore next */ []));
+        this.comments = signal([], ...(ngDevMode ? [{ debugName: "comments" }] : /* istanbul ignore next */ []));
+        this.history = signal([], ...(ngDevMode ? [{ debugName: "history" }] : /* istanbul ignore next */ []));
+        this.dev = signal(null, ...(ngDevMode ? [{ debugName: "dev" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.tab = signal('comments', ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
+        this.draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        this.childTitle = signal('', ...(ngDevMode ? [{ debugName: "childTitle" }] : /* istanbul ignore next */ []));
+        this.labelDraft = signal('', ...(ngDevMode ? [{ debugName: "labelDraft" }] : /* istanbul ignore next */ []));
+        this.editingTitle = signal(false, ...(ngDevMode ? [{ debugName: "editingTitle" }] : /* istanbul ignore next */ []));
+        this.editingDesc = signal(false, ...(ngDevMode ? [{ debugName: "editingDesc" }] : /* istanbul ignore next */ []));
+        this.linking = signal(false, ...(ngDevMode ? [{ debugName: "linking" }] : /* istanbul ignore next */ []));
+        this.copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+        this.confirmDelete = signal(false, ...(ngDevMode ? [{ debugName: "confirmDelete" }] : /* istanbul ignore next */ []));
+        this.deleteKey = signal('', ...(ngDevMode ? [{ debugName: "deleteKey" }] : /* istanbul ignore next */ []));
+        this.attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+        this.thumbs = signal({}, ...(ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []));
+        this.uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+        this.watching = signal(false, ...(ngDevMode ? [{ debugName: "watching" }] : /* istanbul ignore next */ []));
+        this.watchers = signal([], ...(ngDevMode ? [{ debugName: "watchers" }] : /* istanbul ignore next */ []));
+        this.picker = signal(null, ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
+        this.mentionFor = signal(null, ...(ngDevMode ? [{ debugName: "mentionFor" }] : /* istanbul ignore next */ []));
+        this.mentionQuery = signal('', ...(ngDevMode ? [{ debugName: "mentionQuery" }] : /* istanbul ignore next */ []));
+        this.mentionIndex = signal(0, ...(ngDevMode ? [{ debugName: "mentionIndex" }] : /* istanbul ignore next */ []));
+        this.mentionStart = 0;
+        this.reactionList = REACTIONS;
+        this.size = size;
+        this.titleDraft = '';
+        this.descDraft = '';
+        this.linkKind = 'relates';
+        this.linkKey = '';
+        this.relKinds = Object.keys(REL_LABEL);
+        this.priorities = PRIORITIES;
+        this.severities = SEVERITIES;
+        this.typeColour = typeColour;
+        this.typeLabel = typeLabel;
+        this.priorityLabel = priorityLabel;
+        this.statusChip = statusChip;
+        this.epicChip = epicChip;
+        this.shortDate = shortDate;
+        this.ago = (s) => ago(s);
+        this.cap = (s) => s[0].toUpperCase() + s.slice(1);
+        this.people = computed(() => new People(this.host.people()), ...(ngDevMode ? [{ debugName: "people" }] : /* istanbul ignore next */ []));
+        this.caps = computed(() => {
+            const p = this.host.project();
+            return p?.archivedAt ? [] : this.issue()?.capabilities ?? [];
+        }, ...(ngDevMode ? [{ debugName: "caps" }] : /* istanbul ignore next */ []));
+        this.canEdit = computed(() => this.caps().includes('issues.edit'), ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+        this.canComment = computed(() => this.caps().includes('issues.comment'), ...(ngDevMode ? [{ debugName: "canComment" }] : /* istanbul ignore next */ []));
+        this.canManage = computed(() => this.caps().includes('resources.manage'), ...(ngDevMode ? [{ debugName: "canManage" }] : /* istanbul ignore next */ []));
+        this.openSprints = computed(() => this.sprints().filter((s) => s.state !== 'completed'), ...(ngDevMode ? [{ debugName: "openSprints" }] : /* istanbul ignore next */ []));
+        this.completedSprint = computed(() => {
+            const id = this.issue()?.sprintId;
+            return id ? this.sprints().find((s) => s.id === id && s.state === 'completed') ?? null : null;
+        }, ...(ngDevMode ? [{ debugName: "completedSprint" }] : /* istanbul ignore next */ []));
+        this.html = computed(() => this.md(this.issue()?.description ?? ''), ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+        this.watcherNames = computed(() => {
+            const me = this.host.meId();
+            const ids = this.watchers();
+            if (!ids.length)
+                return 'nobody yet';
+            const names = ids.map((id) => (id === me ? 'you' : this.people().name(id)));
+            names.sort((a, b) => (a === 'you' ? -1 : b === 'you' ? 1 : 0));
+            return names.join(', ');
+        }, ...(ngDevMode ? [{ debugName: "watcherNames" }] : /* istanbul ignore next */ []));
+        this.suggestions = computed(() => {
+            const q = this.mentionQuery().toLowerCase();
+            const me = this.host.meId();
+            return this.host.people()
+                .filter((p) => p.id !== me && (!q || (p.name ?? '').toLowerCase().split(/\s+/).some((w) => w.startsWith(q)) || (p.name ?? '').toLowerCase().startsWith(q) || (p.email ?? '').toLowerCase().startsWith(q)))
+                .slice(0, 6);
+        }, ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+        this.route.paramMap.subscribe((m) => this.key.set((m.get('key') ?? '').toUpperCase()));
+        effect(() => {
+            const key = this.key();
+            const p = this.host.project();
+            if (key && p)
+                untracked(() => this.loadAll(key, p.id));
+        });
+    }
+    /** Markdown to HTML; a mention shows the person's current name, not the label typed with it. */
+    md(src) {
+        const people = this.people();
+        const withMentions = (src || '').replace(MENTION, (_m, label, id) => {
+            const name = people.name(id);
+            return `<span class="mention">@${esc(name && name !== id ? name : label)}</span>`;
+        });
+        return marked.parse(withMentions, { async: false, gfm: true, breaks: true });
+    }
+    // ---- mentions ----
+    typed(el, which) {
+        const before = el.value.slice(0, el.selectionStart ?? el.value.length);
+        const m = /(^|\s)@([\p{L}\w.-]{0,30})$/u.exec(before);
+        if (!m) {
+            this.mentionFor.set(null);
+            return;
+        }
+        this.mentionStart = before.length - m[2].length - 1;
+        this.mentionQuery.set(m[2]);
+        this.mentionIndex.set(0);
+        this.mentionFor.set(which);
+    }
+    mentionKey(ev, el) {
+        if (!this.mentionFor() || !this.suggestions().length)
+            return;
+        const n = this.suggestions().length;
+        if (ev.key === 'ArrowDown') {
+            ev.preventDefault();
+            this.mentionIndex.set((this.mentionIndex() + 1) % n);
+        }
+        else if (ev.key === 'ArrowUp') {
+            ev.preventDefault();
+            this.mentionIndex.set((this.mentionIndex() + n - 1) % n);
+        }
+        else if (ev.key === 'Enter' || ev.key === 'Tab') {
+            ev.preventDefault();
+            this.pick(this.suggestions()[this.mentionIndex()], el);
+        }
+        else if (ev.key === 'Escape') {
+            ev.preventDefault();
+            this.mentionFor.set(null);
+        }
+    }
+    closeMentionSoon() {
+        setTimeout(() => this.mentionFor.set(null), 150);
+    }
+    pick(p, el) {
+        const caret = el.selectionStart ?? el.value.length;
+        const token = `[@${(p.name || p.email || 'someone').replace(/[\[\]]/g, '')}](mention:${p.id}) `;
+        const next = el.value.slice(0, this.mentionStart) + token + el.value.slice(caret);
+        if (this.mentionFor() === 'desc')
+            this.descDraft = next;
+        else
+            this.draft.set(next);
+        el.value = next;
+        const at = this.mentionStart + token.length;
+        this.mentionFor.set(null);
+        setTimeout(() => { el.focus(); el.setSelectionRange(at, at); });
+    }
+    // ---- reactions ----
+    emoji(r) { return REACTIONS.find((x) => x.name === r)?.emoji ?? r; }
+    emojiLabel(r) { return REACTIONS.find((x) => x.name === r)?.label ?? r; }
+    reactors(ids) {
+        const me = this.host.meId();
+        return ids.map((id) => (id === me ? 'You' : this.people().name(id))).join(', ');
+    }
+    react(c, r, on) {
+        this.picker.set(null);
+        this.api.react(c.id, r, on).subscribe({
+            next: (rs) => this.comments.set(this.comments().map((x) => (x.id === c.id ? { ...x, reactions: rs } : x))),
+            error: (e) => this.fail(e, 'Could not react.'),
+        });
+    }
+    // ---- watching ----
+    toggleWatch() {
+        const is = this.issue();
+        if (!is)
+            return;
+        const on = !this.watching();
+        this.api.watch(is.key, on).subscribe({ next: () => this.loadWatch(is.key), error: (e) => this.fail(e, 'Could not change watching.') });
+    }
+    loadWatch(key) {
+        this.api.watchState(key).subscribe({ next: (w) => { this.watching.set(w.watching); this.watchers.set(w.watchers); }, error: () => undefined });
+    }
+    // ---- attachments ----
+    ext(name) {
+        const i = name.lastIndexOf('.');
+        return i > 0 && name.length - i <= 5 ? name.slice(i + 1) : 'file';
+    }
+    upload(input) {
+        const is = this.issue();
+        const files = Array.from(input.files ?? []);
+        input.value = '';
+        if (!is || !files.length)
+            return;
+        const big = files.find((f) => f.size > MAX_FILE);
+        if (big) {
+            this.error.set(`${big.name} is larger than 25 MB.`);
+            return;
+        }
+        this.uploading.set(true);
+        this.error.set('');
+        forkJoin(files.map((f) => this.api.attach(is.key, f))).subscribe({
+            next: () => { this.uploading.set(false); this.loadAttachments(is.key); this.reloadSide(is.key); },
+            error: (e) => { this.uploading.set(false); this.loadAttachments(is.key); this.fail(e, 'Could not attach the file.'); },
+        });
+    }
+    download(a) {
+        this.api.attachmentBlob(a.id).subscribe({
+            next: (b) => {
+                const url = URL.createObjectURL(b);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = a.filename;
+                link.click();
+                setTimeout(() => URL.revokeObjectURL(url), 10_000);
+            },
+            error: (e) => this.fail(e, 'Could not download the file.'),
+        });
+    }
+    removeAttachment(a) {
+        const is = this.issue();
+        if (!is)
+            return;
+        this.api.deleteAttachment(a.id).subscribe({
+            next: () => { this.loadAttachments(is.key); this.reloadSide(is.key); },
+            error: (e) => this.fail(e, 'Could not delete the file.'),
+        });
+    }
+    loadAttachments(key) {
+        this.api.attachments(key).subscribe({
+            next: (list) => {
+                this.attachments.set(list);
+                const have = this.thumbs();
+                for (const a of list) {
+                    if (a.inline && !have[a.id] && a.size <= 5 * 1024 * 1024) {
+                        this.api.attachmentBlob(a.id).subscribe({ next: (b) => this.thumbs.set({ ...this.thumbs(), [a.id]: URL.createObjectURL(b) }), error: () => undefined });
+                    }
+                }
+            },
+            error: () => undefined,
+        });
+    }
+    line(h) {
+        return historyLine(h, this.people());
+    }
+    relLabel(k) {
+        return REL_LABEL[k] ?? k;
+    }
+    shas(d) {
+        return d.commits.slice(0, 3).map((c) => String(c.meta['sha'] ?? c.ref).slice(0, 7)).join(' · ');
+    }
+    prLabel(state, relation) {
+        const s = state === 'merged' ? 'Merged' : state === 'closed' ? 'Closed' : 'Open';
+        return relation === 'closes' && state !== 'merged' ? `${s} · closes` : s;
+    }
+    prChip(state) {
+        return state === 'merged' ? 'o-chip o-vio' : state === 'closed' ? 'o-chip' : 'o-chip o-blu';
+    }
+    copyLink() {
+        void navigator.clipboard?.writeText(location.href).then(() => { this.copied.set(true); setTimeout(() => this.copied.set(false), 1500); });
+    }
+    editTitle() {
+        this.titleDraft = this.issue()?.title ?? '';
+        this.editingTitle.set(true);
+    }
+    saveTitle() {
+        const t = this.titleDraft.trim();
+        if (!t)
+            return;
+        this.change({ title: t }, () => this.editingTitle.set(false));
+    }
+    editDesc() {
+        this.descDraft = this.issue()?.description ?? '';
+        this.editingDesc.set(true);
+    }
+    saveDesc() {
+        this.change({ description: this.descDraft }, () => this.editingDesc.set(false));
+    }
+    setPoints(v) {
+        if (v === '')
+            this.change({ clearPoints: true });
+        else
+            this.change({ points: Number(v) });
+    }
+    addLabel() {
+        const is = this.issue();
+        const l = this.labelDraft().trim();
+        if (!is || !l)
+            return;
+        this.labelDraft.set('');
+        if (!is.labels.includes(l))
+            this.change({ labels: [...is.labels, l] });
+    }
+    removeLabel(l) {
+        const is = this.issue();
+        if (is)
+            this.change({ labels: is.labels.filter((x) => x !== l) });
+    }
+    setStatus(statusId) {
+        const is = this.issue();
+        if (!is || statusId === is.statusId)
+            return;
+        this.busy.set(true);
+        this.api.move(is.key, statusId).subscribe({
+            next: (n) => { this.busy.set(false); this.issue.set(n); this.reloadSide(n.key); },
+            error: (e) => this.fail(e, 'Could not change the status.'),
+        });
+    }
+    /** One field change, against the version on screen. */
+    change(c, after) {
+        const is = this.issue();
+        if (!is)
+            return;
+        this.busy.set(true);
+        this.error.set('');
+        this.api.update(is.key, { ...c, version: is.version }).subscribe({
+            next: (n) => { this.busy.set(false); this.issue.set(n); after?.(); this.reloadSide(n.key); },
+            error: (e) => this.fail(e, 'Could not save the change.'),
+        });
+    }
+    addChild() {
+        const is = this.issue();
+        const p = this.host.project();
+        const title = this.childTitle().trim();
+        if (!is || !p || !title || this.busy())
+            return;
+        this.busy.set(true);
+        this.api.create(p.id, { title, type: is.type === 'epic' ? 'story' : 'subtask', parent: is.key }).subscribe({
+            next: () => { this.busy.set(false); this.childTitle.set(''); this.reload(is.key); },
+            error: (e) => this.fail(e, 'Could not add it.'),
+        });
+    }
+    addLink() {
+        const is = this.issue();
+        const other = this.linkKey.trim().toUpperCase();
+        if (!is || !other)
+            return;
+        this.busy.set(true);
+        this.api.relate(is.key, this.linkKind, other).subscribe({
+            next: () => { this.busy.set(false); this.linkKey = ''; this.linking.set(false); this.reload(is.key); },
+            error: (e) => this.fail(e, `Could not link ${other}.`),
+        });
+    }
+    unlink(r) {
+        const is = this.issue();
+        if (!is)
+            return;
+        this.api.unrelate(r.id).subscribe({ next: () => this.reload(is.key), error: (e) => this.fail(e, 'Could not remove the link.') });
+    }
+    addComment() {
+        const is = this.issue();
+        const body = this.draft().trim();
+        if (!is || !body)
+            return;
+        this.busy.set(true);
+        this.api.comment(is.key, body).subscribe({
+            next: (c) => { this.busy.set(false); this.draft.set(''); this.comments.set([...this.comments(), { ...c, reactions: [] }]); this.reloadSide(is.key); setTimeout(() => this.loadWatch(is.key), 800); },
+            error: (e) => this.fail(e, 'Could not add the comment.'),
+        });
+    }
+    removeComment(c) {
+        const is = this.issue();
+        if (!is)
+            return;
+        this.api.deleteComment(c.id).subscribe({
+            next: () => { this.comments.set(this.comments().filter((x) => x.id !== c.id)); this.reloadSide(is.key); },
+            error: (e) => this.fail(e, 'Could not delete the comment.'),
+        });
+    }
+    remove() {
+        const is = this.issue();
+        if (!is)
+            return;
+        this.busy.set(true);
+        this.api.remove(is.key).subscribe({
+            next: () => { this.busy.set(false); void this.router.navigate(this.host.link('issues')); },
+            error: (e) => this.fail(e, 'Could not delete the issue.'),
+        });
+    }
+    fail(e, fallback) {
+        this.busy.set(false);
+        const is = this.issue();
+        if (isConflict(e) && is) {
+            this.error.set(`Someone changed ${is.key} while you were looking at it. This is the latest; make your change again.`);
+            this.reload(is.key);
+            return;
+        }
+        this.error.set(apiMessage(e, fallback));
+    }
+    reload(key) {
+        this.api.get(key).subscribe({ next: (n) => this.issue.set(n), error: () => undefined });
+        this.reloadSide(key);
+    }
+    reloadSide(key) {
+        this.api.history(key).subscribe({ next: (h) => this.history.set([...h].reverse()), error: () => undefined });
+    }
+    loadAll(key, project) {
+        this.issue.set(null);
+        this.error.set('');
+        this.dev.set(null);
+        this.editingTitle.set(false);
+        this.editingDesc.set(false);
+        this.confirmDelete.set(false);
+        this.attachments.set([]);
+        this.watchers.set([]);
+        this.watching.set(false);
+        this.loadAttachments(key);
+        this.loadWatch(key);
+        forkJoin({ is: this.api.get(key), c: this.api.comments(key), h: this.api.history(key) }).subscribe({
+            next: ({ is, c, h }) => { this.issue.set(is); this.comments.set(c); this.history.set([...h].reverse()); },
+            error: (e) => this.error.set(e?.status === 404 ? `There is no issue ${key} you can see in this project.` : apiMessage(e, `Could not open ${key}.`)),
+        });
+        forkJoin({ st: this.api.statuses(project), sp: this.api.sprints(project, true), ep: this.api.epics(project) }).subscribe({
+            next: ({ st, sp, ep }) => { this.statuses.set(st); this.sprints.set(sp); this.epics.set(ep); },
+            error: () => undefined,
+        });
+        this.api.development(key).subscribe({ next: (d) => this.dev.set(d), error: () => this.dev.set({ branches: [], commits: [], pulls: [] }) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IssuePage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IssuePage, isStandalone: true, selector: "o-design-issue", ngImport: i0, template: `
+    @if (issue(); as is) {
+      <div class="o-page o-wide">
+        <div class="o-flex o-sm o-wrap">
+          <nav class="o-flex o-mut o-wrap" aria-label="Issue path">
+          <a [routerLink]="host.link('backlog')">{{ is.projectKey }}</a><span aria-hidden="true">/</span>
+          @if (is.parent; as par) {
+            <a [class]="par.type === 'epic' ? epicChip(par.key) : 'o-chip'" [routerLink]="host.link('issues/' + par.key)">{{ par.key }} · {{ par.title }}</a><span aria-hidden="true">/</span>
+          }
+          <span class="o-mono" aria-current="page">{{ is.key }}</span>
+          </nav>
+          <span class="o-r o-flex">
+            <button type="button" class="o-btn o-sm" [attr.aria-pressed]="watching()" (click)="toggleWatch()" data-testid="watch">{{ watching() ? 'Watching' : 'Watch' }}</button>
+            <button type="button" class="o-btn o-sm" (click)="copyLink()">{{ copied() ? 'Copied' : 'Copy link' }}</button>
+            <a class="o-btn o-sm" [routerLink]="host.link('board')">Board</a>
+          </span>
+        </div>
+
+        @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+
+        <div class="o-split o-w340">
+          <div class="o-col" style="gap:18px;min-width:0">
+            <div class="o-col" style="gap:6px">
+              <div class="o-flex"><span class="o-sq" [style.background]="typeColour(is.type)" aria-hidden="true"></span><span class="o-mono o-sm o-mut">{{ is.key }} · {{ typeLabel(is.type) }}</span></div>
+              @if (editingTitle()) {
+                <form class="o-flex" (ngSubmit)="saveTitle()">
+                  <label class="o-sr-only" for="is-title">Title</label>
+                  <input id="is-title" class="o-in" style="font-size:18px;height:40px" name="title" [(ngModel)]="titleDraft" (keydown.escape)="editingTitle.set(false)" />
+                  <button type="submit" class="o-btn o-sm o-dark" [disabled]="!titleDraft.trim()">Save</button>
+                  <button type="button" class="o-btn o-sm" (click)="editingTitle.set(false)">Cancel</button>
+                </form>
+              } @else {
+                <h1 class="o-t ti">@if (canEdit()) {<button type="button" class="ti-btn" (click)="editTitle()" title="Edit the title">{{ is.title }}</button>} @else {{{ is.title }}}</h1>
+              }
+            </div>
+
+            @if (editingDesc()) {
+              <div class="o-card mn">
+                <label class="o-sr-only" for="is-desc">Description</label>
+                <textarea #descEl id="is-desc" class="o-in" style="border:none;box-shadow:none" [(ngModel)]="descDraft" placeholder="Write with Markdown: checklists, code blocks, images and @mentions." data-testid="desc-input"
+                  (input)="typed(descEl, 'desc')" (keydown)="mentionKey($event, descEl)" (blur)="closeMentionSoon()" role="combobox" [attr.aria-expanded]="mentionFor() === 'desc'" aria-autocomplete="list"></textarea>
+                @if (mentionFor() === 'desc' && suggestions().length) {<ng-container *ngTemplateOutlet="mentionList; context: { el: descEl }" />}
+                <div class="o-cf"><span>Markdown</span><button type="button" class="o-btn o-sm o-r" (click)="editingDesc.set(false)">Cancel</button><button type="button" class="o-btn o-sm o-dark" (click)="saveDesc()" [disabled]="busy()" data-testid="desc-save">Save</button></div>
+              </div>
+            } @else {
+              <div class="o-col" style="gap:6px">
+                @if (is.description) {
+                  <div class="o-md md" style="font-size:14px" [innerHTML]="html()"></div>
+                } @else {
+                  <div class="o-md" style="font-size:14px"><p class="o-faint" style="margin:0">No description yet. Write one with Markdown: checklists, code blocks, images and @mentions.</p></div>
+                }
+                @if (canEdit()) {<button type="button" class="o-lnk" style="align-self:flex-start" (click)="editDesc()" data-testid="desc-edit">{{ is.description ? 'Edit description' : 'Add a description' }}</button>}
+              </div>
+            }
+
+            @if (is.type === 'story' && is.fields['acceptanceCriteria']) {
+              <div class="o-col" style="gap:6px"><h4 style="margin:0;font-size:13px">Acceptance criteria</h4><div class="o-md md" [innerHTML]="md(is.fields['acceptanceCriteria'])"></div></div>
+            }
+            @if (is.type === 'bug' && (is.fields['steps'] || is.fields['environment'])) {
+              <div class="o-col" style="gap:6px">
+                @if (is.fields['environment']) {<div class="o-kv" style="grid-template-columns:140px 1fr;font-size:13px"><span class="o-k">Environment</span><span>{{ is.fields['environment'] }}</span>@if (is.fields['affectedVersion']) {<span class="o-k">Affected version</span><span class="o-mono o-sm">{{ is.fields['affectedVersion'] }}</span>}</div>}
+                @if (is.fields['steps']) {<h4 style="margin:0;font-size:13px">Steps to reproduce</h4><div class="o-md md" [innerHTML]="md(is.fields['steps'])"></div>}
+              </div>
+            }
+
+            @if (is.type !== 'subtask') {
+              <div class="o-card">
+                <div class="o-ch">
+                  <b>{{ is.type === 'epic' ? 'Issues in this epic' : 'Sub-tasks' }}</b>
+                  @if (is.progress; as pr) {<span class="o-faint o-sm">{{ pr.done }} of {{ pr.total }} done</span><div class="o-bar o-grn o-r" style="max-width:120px" role="progressbar" [attr.aria-valuenow]="pr.done" [attr.aria-valuemax]="pr.total" aria-label="Done"><i [style.width.%]="pr.total ? (100 * pr.done) / pr.total : 0"></i></div>}
+                </div>
+                @for (c of is.children; track c.key) {
+                  <a class="o-row o-click" [routerLink]="host.link('issues/' + c.key)">
+                    <span class="o-cbx" [class.o-on]="c.category === 'done'" aria-hidden="true"></span>
+                    <span class="o-mono o-sm o-mut">{{ c.key }}</span><span class="o-ell">{{ c.title }}</span>
+                    <span class="o-r" [class]="statusChip(c.status, c.category)">{{ c.status }}</span>
+                  </a>
+                } @empty {
+                  <div class="o-empty o-sm">{{ is.type === 'epic' ? 'No issues in this epic yet.' : 'No sub-tasks.' }}</div>
+                }
+                @if (canEdit()) {
+                  <div class="o-row"><span class="o-faint" aria-hidden="true">+</span>
+                    <input class="o-in o-sm" style="border:none;box-shadow:none" [placeholder]="is.type === 'epic' ? 'Add a story to this epic, then Enter' : 'Add a sub-task, then Enter'" [attr.aria-label]="is.type === 'epic' ? 'New issue in this epic' : 'New sub-task'"
+                      [ngModel]="childTitle()" (ngModelChange)="childTitle.set($event)" (keydown.enter)="addChild()" data-testid="child-new" />
+                  </div>
+                }
+              </div>
+            }
+
+            <div class="o-card">
+              <div class="o-ch"><b>Development</b><span class="o-r o-faint o-sm">linked by issue key</span></div>
+              @if (dev(); as d) {
+                @for (b of d.branches; track b.ref) {<div class="o-row"><span class="o-faint" style="width:70px">Branch</span><span class="o-mono o-sm o-ell">{{ b.title || b.ref }}</span><span class="o-r o-faint o-sm">{{ b.repo }}</span></div>}
+                @for (p of d.pulls; track p.ref) {
+                  <a class="o-row o-click" [routerLink]="host.link('code/' + p.repo + '/pull/' + (p.meta['number'] ?? ''))"><span class="o-faint" style="width:70px">PR</span><span class="o-ell">#{{ p.meta['number'] }} {{ p.title }}</span><span class="o-r" [class]="prChip(p.meta['state'])">{{ prLabel(p.meta['state'], p.relation) }}</span></a>
+                }
+                @if (d.commits.length) {
+                  <a class="o-row o-click" [routerLink]="host.link('code/' + d.commits[0].repo + '/commits')"><span class="o-faint" style="width:70px">Commits</span><span class="o-mono o-sm o-ell">{{ shas(d) }}</span></a>
+                }
+                @if (!d.branches.length && !d.pulls.length && !d.commits.length) {
+                  <div class="o-empty o-sm">Nothing yet. Put {{ is.key }} in a branch name, a commit message or a pull request title to link it; “Closes {{ is.key }}” closes it when the pull request merges.</div>
+                }
+              } @else {
+                <div class="o-empty o-sm">Loading…</div>
+              }
+            </div>
+
+            <div class="o-card">
+              <div class="o-ch"><b>Linked issues</b>@if (canEdit()) {<button type="button" class="o-lnk o-r" (click)="linking.set(!linking())">+ Link</button>}</div>
+              @if (linking()) {
+                <form class="o-row o-wrap" style="gap:8px" (ngSubmit)="addLink()">
+                  <select class="o-in o-sm" style="width:auto" name="kind" aria-label="Relation" [(ngModel)]="linkKind">
+                    @for (k of relKinds; track k) {<option [value]="k">{{ relLabel(k) }}</option>}
+                  </select>
+                  <input class="o-in o-sm o-mono" style="width:140px" name="other" placeholder="PAY-150" aria-label="Issue key" [(ngModel)]="linkKey" data-testid="link-key" />
+                  <button type="submit" class="o-btn o-sm o-dark" [disabled]="!linkKey.trim()">Link</button>
+                  <button type="button" class="o-btn o-sm" (click)="linking.set(false)">Cancel</button>
+                </form>
+              }
+              @for (r of is.relations; track r.id) {
+                <div class="o-row">
+                  <span class="o-faint o-sm" style="width:110px">{{ relLabel(r.kind) }}</span>
+                  <span class="o-sq" [style.background]="typeColour(r.issue.type)" aria-hidden="true"></span>
+                  <a class="o-flex o-ell" style="flex:1;min-width:0;color:var(--o-tx)" [routerLink]="host.link('issues/' + r.issue.key)"><span class="o-mono o-sm o-mut">{{ r.issue.key }}</span><span class="o-ell">{{ r.issue.title }}</span></a>
+                  <span class="o-r" [class]="statusChip(r.issue.status, r.issue.category)">{{ r.issue.status }}</span>
+                  @if (canEdit()) {<button type="button" class="o-btn o-ghost o-xs" (click)="unlink(r)" [attr.aria-label]="'Remove the link to ' + r.issue.key">×</button>}
+                </div>
+              } @empty {
+                <div class="o-empty">No linked issues.</div>
+              }
+            </div>
+
+            @if (attachments().length) {
+              <div class="o-card" data-testid="attachments">
+                <div class="o-ch"><b>Attachments</b><span class="o-faint o-sm">{{ attachments().length }}</span>
+                  @if (canEdit()) {<label class="o-lnk o-r" for="att-in-2">+ Attach</label>}</div>
+                @for (a of attachments(); track a.id) {
+                  <div class="o-row" [attr.data-testid]="'attachment-' + a.filename">
+                    @if (a.inline && thumbs()[a.id]) {<img class="att-img" [src]="thumbs()[a.id]" [alt]="a.filename" />} @else {<span class="att-ic" aria-hidden="true">{{ ext(a.filename) }}</span>}
+                    <div class="o-col" style="gap:2px;min-width:0;flex:1">
+                      <button type="button" class="o-lnk o-ell" style="text-align:left" (click)="download(a)">{{ a.filename }}</button>
+                      <span class="o-faint o-xs">{{ size(a.size) }} · {{ people().name(a.uploadedBy) }} · {{ ago(a.createdAt) }}</span>
+                    </div>
+                    @if ((a.uploadedBy === host.meId() && canEdit()) || canManage()) {<button type="button" class="o-btn o-ghost o-xs" (click)="removeAttachment(a)" [attr.aria-label]="'Delete ' + a.filename">×</button>}
+                  </div>
+                }
+                @if (canEdit()) {<input id="att-in-2" class="file-in" type="file" multiple (change)="upload($any($event.target))" />}
+              </div>
+            }
+
+            <div class="o-col" style="gap:12px">
+              <div class="o-tabs" role="tablist">
+                <button type="button" role="tab" class="o-tab" [class.o-on]="tab() === 'comments'" [attr.aria-selected]="tab() === 'comments'" (click)="tab.set('comments')">Comments<span class="o-n">{{ comments().length }}</span></button>
+                <button type="button" role="tab" class="o-tab" [class.o-on]="tab() === 'history'" [attr.aria-selected]="tab() === 'history'" (click)="tab.set('history')">History</button>
+              </div>
+              @if (tab() === 'comments') {
+                @for (c of comments(); track c.id) {
+                  <div class="o-card" [attr.data-testid]="'comment-' + c.id">
+                    <div class="o-ch" style="min-height:38px;background:var(--o-well)">
+                      <span class="o-av" aria-hidden="true">{{ people().initials(c.authorId) }}</span><b class="o-b5">{{ people().name(c.authorId) }}</b>
+                      <span class="o-faint o-sm">{{ ago(c.createdAt) }}{{ c.edited ? ' · edited' : '' }}</span>
+                      @if (c.authorId === host.meId() || canManage()) {<button type="button" class="o-lnk o-r" style="color:var(--o-mut)" (click)="removeComment(c)">Delete</button>}
+                    </div>
+                    <div class="o-cb o-lh" style="font-size:14px">
+                      <div class="o-md md" [innerHTML]="md(c.body)"></div>
+                      <div class="rx">
+                        @for (r of c.reactions ?? []; track r.reaction) {
+                          <button type="button" class="o-chip o-out" [class.mine]="r.mine" [attr.aria-pressed]="r.mine" [disabled]="!canComment()" (click)="react(c, r.reaction, !r.mine)"
+                            [attr.aria-label]="emojiLabel(r.reaction) + ': ' + r.count + (r.mine ? ', including you' : '')" [title]="reactors(r.people)">{{ emoji(r.reaction) }} {{ r.count }}</button>
+                        }
+                        @if (canComment()) {
+                          @if (picker() === c.id) {
+                            <span class="rx-pal" role="group" aria-label="Add a reaction">
+                              @for (x of reactionList; track x.name) {<button type="button" [attr.aria-label]="x.label" (click)="react(c, x.name, true)">{{ x.emoji }}</button>}
+                            </span>
+                          } @else {
+                            <button type="button" class="o-chip o-out" style="color:var(--o-mut)" (click)="picker.set(c.id)" aria-label="Add a reaction" data-testid="react">☺︎ +</button>
+                          }
+                        }
+                      </div>
+                    </div>
+                  </div>
+                }
+                @if (canComment()) {
+                  <div class="o-card mn">
+                    <label class="o-sr-only" for="is-cmt">Add a comment</label>
+                    <textarea #cmtEl id="is-cmt" class="o-in" style="border:none;box-shadow:none;min-height:70px;font-family:var(--o-font);font-size:13px" placeholder="Add a comment. Markdown and @mentions work." [ngModel]="draft()" (ngModelChange)="draft.set($event)" data-testid="comment-input"
+                      (input)="typed(cmtEl, 'comment')" (keydown)="mentionKey($event, cmtEl)" (blur)="closeMentionSoon()" role="combobox" [attr.aria-expanded]="mentionFor() === 'comment'" aria-autocomplete="list"></textarea>
+                    @if (mentionFor() === 'comment' && suggestions().length) {<ng-container *ngTemplateOutlet="mentionList; context: { el: cmtEl }" />}
+                    <div class="o-cf">
+                      @if (canEdit()) {<label for="att-in" class="o-lnk" style="color:var(--o-mut)">{{ uploading() ? 'Uploading…' : 'Attach files up to 25 MB' }}</label><input id="att-in" class="file-in" type="file" multiple (change)="upload($any($event.target))" data-testid="attach-input" />} @else {<span>Markdown</span>}
+                      <button type="button" class="o-btn o-sm o-dark o-r" (click)="addComment()" [disabled]="!draft().trim() || busy()" data-testid="comment-add">Comment</button>
+                    </div>
+                  </div>
+                }
+              } @else {
+                <div class="o-card">
+                  @for (h of history(); track h.id) {<div class="o-row o-sm"><span class="o-dot o-gry" aria-hidden="true"></span><span class="o-mut">{{ line(h) }}</span><span class="o-r o-faint">{{ ago(h.createdAt) }}</span></div>}
+                </div>
+              }
+            </div>
+          </div>
+
+          <div class="o-col" style="gap:14px">
+            <div class="o-card o-cb">
+              <div class="o-kv" style="grid-template-columns:90px 1fr;row-gap:8px">
+                <label class="o-k" for="f-status">Status</label>
+                <select id="f-status" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="setStatus($any($event.target).value)" data-testid="issue-status">
+                  @for (s of statuses(); track s.id) {<option [value]="s.id" [selected]="s.id === is.statusId">{{ s.name }}</option>}
+                </select>
+                <label class="o-k" for="f-who">Assignee</label>
+                <select id="f-who" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="change({ assigneeId: $any($event.target).value })" data-testid="issue-assignee">
+                  <option value="" [selected]="!is.assigneeId">Unassigned</option>
+                  @for (p of host.people(); track p.id) {<option [value]="p.id" [selected]="p.id === is.assigneeId">{{ p.name || p.email }}</option>}
+                </select>
+                <span class="o-k">Reporter</span><span class="o-flex"><span class="o-av" aria-hidden="true">{{ people().initials(is.reporterId) }}</span>{{ people().name(is.reporterId) }}</span>
+                <label class="o-k" for="f-pri">Priority</label>
+                <select id="f-pri" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="change({ priority: $any($event.target).value })">
+                  @for (p of priorities; track p) {<option [value]="p" [selected]="p === is.priority">{{ priorityLabel(p) }}</option>}
+                </select>
+                <span class="o-k">Labels</span>
+                <span class="o-flex o-wrap" style="gap:4px">
+                  @for (l of is.labels; track l) {<span class="o-chip o-out">{{ l }}@if (canEdit()) {<button type="button" class="o-lnk" style="font-size:11px;color:var(--o-dim)" (click)="removeLabel(l)" [attr.aria-label]="'Remove label ' + l">×</button>}</span>}
+                  @if (canEdit()) {<input class="o-in o-sm" style="width:90px;height:22px" placeholder="+ label" aria-label="Add a label" [ngModel]="labelDraft()" (ngModelChange)="labelDraft.set($event)" (keydown.enter)="addLabel()" />}
+                  @if (!is.labels.length && !canEdit()) {<span class="o-faint">None</span>}
+                </span>
+                @if (is.type !== 'epic') {
+                  <label class="o-k" for="f-parent">{{ is.type === 'subtask' ? 'Parent' : 'Epic' }}</label>
+                  @if (is.type === 'subtask') {
+                    <span>@if (is.parent) {<a [routerLink]="host.link('issues/' + is.parent.key)">{{ is.parent.key }} · {{ is.parent.title }}</a>}</span>
+                  } @else {
+                    <select id="f-parent" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="change({ parent: $any($event.target).value })">
+                      <option value="" [selected]="!is.parent">None</option>
+                      @for (e of epics(); track e.key) {<option [value]="e.key" [selected]="e.key === is.parent?.key">{{ e.key }} · {{ e.title }}</option>}
+                    </select>
+                  }
+                  <label class="o-k" for="f-sprint">Sprint</label>
+                  <select id="f-sprint" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy() || is.type === 'subtask'" (change)="change({ sprintId: $any($event.target).value })">
+                    <option value="" [selected]="!is.sprintId">Backlog</option>
+                    @for (s of openSprints(); track s.id) {<option [value]="s.id" [selected]="s.id === is.sprintId">{{ s.name }}{{ s.state === 'active' ? ' (active)' : '' }}</option>}
+                    @if (completedSprint(); as cs) {<option [value]="cs.id" selected disabled>{{ cs.name }} (completed)</option>}
+                  </select>
+                  <label class="o-k" for="f-pts">Points</label>
+                  <input id="f-pts" class="o-in o-sm o-mono kv-in" type="number" min="0" step="0.5" [disabled]="!canEdit() || busy()" [value]="is.points ?? ''" (change)="setPoints($any($event.target).value)" />
+                }
+                <label class="o-k" for="f-due">{{ is.type === 'epic' ? 'Target' : 'Due' }}</label>
+                @if (is.type === 'epic') {
+                  <input id="f-due" class="o-in o-sm kv-in" type="date" [disabled]="!canEdit() || busy()" [value]="is.fields['targetDate'] ?? ''" (change)="change({ fields: { targetDate: $any($event.target).value } })" />
+                } @else {
+                  <input id="f-due" class="o-in o-sm kv-in" type="date" [disabled]="!canEdit() || busy()" [value]="is.dueDate ?? ''" (change)="change({ dueDate: $any($event.target).value })" />
+                }
+                @if (is.type === 'bug') {
+                  <label class="o-k" for="f-sev">Severity</label>
+                  <select id="f-sev" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="change({ fields: { severity: $any($event.target).value } })">
+                    <option value="" [selected]="!is.fields['severity']">Not set</option>
+                    @for (s of severities; track s) {<option [value]="s" [selected]="s === is.fields['severity']">{{ cap(s) }}</option>}
+                  </select>
+                }
+                @if (is.type === 'epic') {
+                  <label class="o-k" for="f-start">Start</label>
+                  <input id="f-start" class="o-in o-sm kv-in" type="date" [disabled]="!canEdit() || busy()" [value]="is.fields['startDate'] ?? ''" (change)="change({ fields: { startDate: $any($event.target).value } })" />
+                }
+              </div>
+            </div>
+            <div class="o-card">
+              <div class="o-ch"><b>Deployments</b></div>
+              <div class="o-empty o-sm">Releases that include {{ is.key }} show here once Deploy is set up.</div>
+            </div>
+            <div class="o-card o-cb o-col o-sm" style="gap:4px">
+              <span class="o-faint">Created {{ shortDate(is.createdAt) }} by {{ people().name(is.reporterId) }}</span>
+              <span class="o-faint">Updated {{ ago(is.updatedAt) }}</span>
+              @if (is.resolvedAt) {<span class="o-faint">Resolved {{ shortDate(is.resolvedAt) }} · {{ is.resolution }}</span>}
+              <span class="o-faint" data-testid="watchers">Watching: {{ watcherNames() }}</span>
+            </div>
+            @if (canManage()) {
+              @if (confirmDelete()) {
+                <div class="o-card o-cb o-col" style="gap:8px">
+                  <span class="o-mut o-sm">Delete {{ is.key }}? Its number is never reused. Type <b class="o-mono">{{ is.key }}</b> to confirm.</span>
+                  <input class="o-in o-sm o-mono" aria-label="Type the key to confirm" [ngModel]="deleteKey()" (ngModelChange)="deleteKey.set($event)" />
+                  <div class="o-flex"><button type="button" class="o-btn o-sm" (click)="confirmDelete.set(false)">Cancel</button><button type="button" class="o-btn o-sm o-red o-r" [disabled]="deleteKey().trim().toUpperCase() !== is.key || busy()" (click)="remove()">Delete issue</button></div>
+                </div>
+              } @else {
+                <button type="button" class="o-lnk" style="align-self:flex-start;color:var(--o-bad-tx)" (click)="confirmDelete.set(true)">Delete issue</button>
+              }
+            }
+          </div>
+        </div>
+      </div>
+    } @else if (error()) {
+      <div class="o-page o-narrow"><div class="o-card o-empty"><p>{{ error() }}</p><a class="o-btn" style="margin-top:14px" [routerLink]="host.link('issues')">All issues</a></div></div>
+    } @else {
+      <div class="o-page"><div class="o-card"><div class="o-empty">Loading {{ key() }}…</div></div></div>
+    }
+    <ng-template #mentionList let-el="el">
+      <ul class="mn-list" role="listbox" aria-label="People to mention">
+        @for (p of suggestions(); track p.id; let i = $index) {
+          <li role="option" [class.on]="i === mentionIndex()" [attr.aria-selected]="i === mentionIndex()" (mousedown)="$event.preventDefault(); pick(p, el)">
+            <span class="o-av" aria-hidden="true">{{ people().initials(p.id) }}</span><span class="o-ell">{{ p.name || p.email }}</span>@if (p.email && p.name) {<span class="o-faint o-xs o-ell">{{ p.email }}</span>}
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, isInline: true, styles: [".ti{font-size:24px;margin:0;line-height:1.25;text-wrap:pretty}.ti-btn{border:none;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:text}.md :where(p,ul,ol,pre){margin:0}.md pre{background:var(--o-well);padding:10px 12px;border-radius:8px;overflow:auto;font-family:var(--o-mono);font-size:12px}.md code{font-family:var(--o-mono);font-size:12px;color:var(--o-tx);background:var(--o-sunken);padding:0 4px;border-radius:4px}.md pre code{background:none;padding:0}.md img{max-width:100%}.kv-in{width:100%}textarea.o-in{min-height:140px;font-family:var(--o-mono);font-size:12px;line-height:1.6;padding:10px 12px;height:auto}.md .mention{color:var(--o-acc-tx, var(--o-acc));background:var(--o-acc-bg, var(--o-sunken));border-radius:4px;padding:0 3px;font-weight:500}.rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}.rx .o-chip{cursor:pointer;font-size:12px}.rx .o-chip.mine{border-color:var(--o-acc);background:var(--o-acc-bg, var(--o-sunken))}.rx-pal{display:flex;gap:2px;padding:4px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-surface);box-shadow:var(--o-shadow-sm, none)}.rx-pal button{border:none;background:none;font-size:16px;padding:2px 4px;border-radius:6px;cursor:pointer}.rx-pal button:hover,.rx-pal button:focus-visible{background:var(--o-sunken)}.mn{position:relative}.mn-list{position:absolute;left:8px;top:calc(100% - 4px);z-index:20;min-width:220px;max-width:320px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-surface);box-shadow:var(--o-shadow, 0 6px 20px rgba(0,0,0,.12));padding:4px;list-style:none;margin:0}.mn-list li{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}.mn-list li.on,.mn-list li:hover{background:var(--o-sunken)}.att-img{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--o-well);flex:none;overflow:hidden;font-size:0}.att-ic{width:40px;height:40px;border-radius:6px;background:var(--o-well);display:grid;place-items:center;font-size:10px;color:var(--o-mut);font-family:var(--o-mono);flex:none;text-transform:uppercase}.file-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IssuePage, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-design-issue', imports: [FormsModule, RouterLink, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (issue(); as is) {
+      <div class="o-page o-wide">
+        <div class="o-flex o-sm o-wrap">
+          <nav class="o-flex o-mut o-wrap" aria-label="Issue path">
+          <a [routerLink]="host.link('backlog')">{{ is.projectKey }}</a><span aria-hidden="true">/</span>
+          @if (is.parent; as par) {
+            <a [class]="par.type === 'epic' ? epicChip(par.key) : 'o-chip'" [routerLink]="host.link('issues/' + par.key)">{{ par.key }} · {{ par.title }}</a><span aria-hidden="true">/</span>
+          }
+          <span class="o-mono" aria-current="page">{{ is.key }}</span>
+          </nav>
+          <span class="o-r o-flex">
+            <button type="button" class="o-btn o-sm" [attr.aria-pressed]="watching()" (click)="toggleWatch()" data-testid="watch">{{ watching() ? 'Watching' : 'Watch' }}</button>
+            <button type="button" class="o-btn o-sm" (click)="copyLink()">{{ copied() ? 'Copied' : 'Copy link' }}</button>
+            <a class="o-btn o-sm" [routerLink]="host.link('board')">Board</a>
+          </span>
+        </div>
+
+        @if (error()) {<div class="o-note o-red" role="alert">{{ error() }}</div>}
+
+        <div class="o-split o-w340">
+          <div class="o-col" style="gap:18px;min-width:0">
+            <div class="o-col" style="gap:6px">
+              <div class="o-flex"><span class="o-sq" [style.background]="typeColour(is.type)" aria-hidden="true"></span><span class="o-mono o-sm o-mut">{{ is.key }} · {{ typeLabel(is.type) }}</span></div>
+              @if (editingTitle()) {
+                <form class="o-flex" (ngSubmit)="saveTitle()">
+                  <label class="o-sr-only" for="is-title">Title</label>
+                  <input id="is-title" class="o-in" style="font-size:18px;height:40px" name="title" [(ngModel)]="titleDraft" (keydown.escape)="editingTitle.set(false)" />
+                  <button type="submit" class="o-btn o-sm o-dark" [disabled]="!titleDraft.trim()">Save</button>
+                  <button type="button" class="o-btn o-sm" (click)="editingTitle.set(false)">Cancel</button>
+                </form>
+              } @else {
+                <h1 class="o-t ti">@if (canEdit()) {<button type="button" class="ti-btn" (click)="editTitle()" title="Edit the title">{{ is.title }}</button>} @else {{{ is.title }}}</h1>
+              }
+            </div>
+
+            @if (editingDesc()) {
+              <div class="o-card mn">
+                <label class="o-sr-only" for="is-desc">Description</label>
+                <textarea #descEl id="is-desc" class="o-in" style="border:none;box-shadow:none" [(ngModel)]="descDraft" placeholder="Write with Markdown: checklists, code blocks, images and @mentions." data-testid="desc-input"
+                  (input)="typed(descEl, 'desc')" (keydown)="mentionKey($event, descEl)" (blur)="closeMentionSoon()" role="combobox" [attr.aria-expanded]="mentionFor() === 'desc'" aria-autocomplete="list"></textarea>
+                @if (mentionFor() === 'desc' && suggestions().length) {<ng-container *ngTemplateOutlet="mentionList; context: { el: descEl }" />}
+                <div class="o-cf"><span>Markdown</span><button type="button" class="o-btn o-sm o-r" (click)="editingDesc.set(false)">Cancel</button><button type="button" class="o-btn o-sm o-dark" (click)="saveDesc()" [disabled]="busy()" data-testid="desc-save">Save</button></div>
+              </div>
+            } @else {
+              <div class="o-col" style="gap:6px">
+                @if (is.description) {
+                  <div class="o-md md" style="font-size:14px" [innerHTML]="html()"></div>
+                } @else {
+                  <div class="o-md" style="font-size:14px"><p class="o-faint" style="margin:0">No description yet. Write one with Markdown: checklists, code blocks, images and @mentions.</p></div>
+                }
+                @if (canEdit()) {<button type="button" class="o-lnk" style="align-self:flex-start" (click)="editDesc()" data-testid="desc-edit">{{ is.description ? 'Edit description' : 'Add a description' }}</button>}
+              </div>
+            }
+
+            @if (is.type === 'story' && is.fields['acceptanceCriteria']) {
+              <div class="o-col" style="gap:6px"><h4 style="margin:0;font-size:13px">Acceptance criteria</h4><div class="o-md md" [innerHTML]="md(is.fields['acceptanceCriteria'])"></div></div>
+            }
+            @if (is.type === 'bug' && (is.fields['steps'] || is.fields['environment'])) {
+              <div class="o-col" style="gap:6px">
+                @if (is.fields['environment']) {<div class="o-kv" style="grid-template-columns:140px 1fr;font-size:13px"><span class="o-k">Environment</span><span>{{ is.fields['environment'] }}</span>@if (is.fields['affectedVersion']) {<span class="o-k">Affected version</span><span class="o-mono o-sm">{{ is.fields['affectedVersion'] }}</span>}</div>}
+                @if (is.fields['steps']) {<h4 style="margin:0;font-size:13px">Steps to reproduce</h4><div class="o-md md" [innerHTML]="md(is.fields['steps'])"></div>}
+              </div>
+            }
+
+            @if (is.type !== 'subtask') {
+              <div class="o-card">
+                <div class="o-ch">
+                  <b>{{ is.type === 'epic' ? 'Issues in this epic' : 'Sub-tasks' }}</b>
+                  @if (is.progress; as pr) {<span class="o-faint o-sm">{{ pr.done }} of {{ pr.total }} done</span><div class="o-bar o-grn o-r" style="max-width:120px" role="progressbar" [attr.aria-valuenow]="pr.done" [attr.aria-valuemax]="pr.total" aria-label="Done"><i [style.width.%]="pr.total ? (100 * pr.done) / pr.total : 0"></i></div>}
+                </div>
+                @for (c of is.children; track c.key) {
+                  <a class="o-row o-click" [routerLink]="host.link('issues/' + c.key)">
+                    <span class="o-cbx" [class.o-on]="c.category === 'done'" aria-hidden="true"></span>
+                    <span class="o-mono o-sm o-mut">{{ c.key }}</span><span class="o-ell">{{ c.title }}</span>
+                    <span class="o-r" [class]="statusChip(c.status, c.category)">{{ c.status }}</span>
+                  </a>
+                } @empty {
+                  <div class="o-empty o-sm">{{ is.type === 'epic' ? 'No issues in this epic yet.' : 'No sub-tasks.' }}</div>
+                }
+                @if (canEdit()) {
+                  <div class="o-row"><span class="o-faint" aria-hidden="true">+</span>
+                    <input class="o-in o-sm" style="border:none;box-shadow:none" [placeholder]="is.type === 'epic' ? 'Add a story to this epic, then Enter' : 'Add a sub-task, then Enter'" [attr.aria-label]="is.type === 'epic' ? 'New issue in this epic' : 'New sub-task'"
+                      [ngModel]="childTitle()" (ngModelChange)="childTitle.set($event)" (keydown.enter)="addChild()" data-testid="child-new" />
+                  </div>
+                }
+              </div>
+            }
+
+            <div class="o-card">
+              <div class="o-ch"><b>Development</b><span class="o-r o-faint o-sm">linked by issue key</span></div>
+              @if (dev(); as d) {
+                @for (b of d.branches; track b.ref) {<div class="o-row"><span class="o-faint" style="width:70px">Branch</span><span class="o-mono o-sm o-ell">{{ b.title || b.ref }}</span><span class="o-r o-faint o-sm">{{ b.repo }}</span></div>}
+                @for (p of d.pulls; track p.ref) {
+                  <a class="o-row o-click" [routerLink]="host.link('code/' + p.repo + '/pull/' + (p.meta['number'] ?? ''))"><span class="o-faint" style="width:70px">PR</span><span class="o-ell">#{{ p.meta['number'] }} {{ p.title }}</span><span class="o-r" [class]="prChip(p.meta['state'])">{{ prLabel(p.meta['state'], p.relation) }}</span></a>
+                }
+                @if (d.commits.length) {
+                  <a class="o-row o-click" [routerLink]="host.link('code/' + d.commits[0].repo + '/commits')"><span class="o-faint" style="width:70px">Commits</span><span class="o-mono o-sm o-ell">{{ shas(d) }}</span></a>
+                }
+                @if (!d.branches.length && !d.pulls.length && !d.commits.length) {
+                  <div class="o-empty o-sm">Nothing yet. Put {{ is.key }} in a branch name, a commit message or a pull request title to link it; “Closes {{ is.key }}” closes it when the pull request merges.</div>
+                }
+              } @else {
+                <div class="o-empty o-sm">Loading…</div>
+              }
+            </div>
+
+            <div class="o-card">
+              <div class="o-ch"><b>Linked issues</b>@if (canEdit()) {<button type="button" class="o-lnk o-r" (click)="linking.set(!linking())">+ Link</button>}</div>
+              @if (linking()) {
+                <form class="o-row o-wrap" style="gap:8px" (ngSubmit)="addLink()">
+                  <select class="o-in o-sm" style="width:auto" name="kind" aria-label="Relation" [(ngModel)]="linkKind">
+                    @for (k of relKinds; track k) {<option [value]="k">{{ relLabel(k) }}</option>}
+                  </select>
+                  <input class="o-in o-sm o-mono" style="width:140px" name="other" placeholder="PAY-150" aria-label="Issue key" [(ngModel)]="linkKey" data-testid="link-key" />
+                  <button type="submit" class="o-btn o-sm o-dark" [disabled]="!linkKey.trim()">Link</button>
+                  <button type="button" class="o-btn o-sm" (click)="linking.set(false)">Cancel</button>
+                </form>
+              }
+              @for (r of is.relations; track r.id) {
+                <div class="o-row">
+                  <span class="o-faint o-sm" style="width:110px">{{ relLabel(r.kind) }}</span>
+                  <span class="o-sq" [style.background]="typeColour(r.issue.type)" aria-hidden="true"></span>
+                  <a class="o-flex o-ell" style="flex:1;min-width:0;color:var(--o-tx)" [routerLink]="host.link('issues/' + r.issue.key)"><span class="o-mono o-sm o-mut">{{ r.issue.key }}</span><span class="o-ell">{{ r.issue.title }}</span></a>
+                  <span class="o-r" [class]="statusChip(r.issue.status, r.issue.category)">{{ r.issue.status }}</span>
+                  @if (canEdit()) {<button type="button" class="o-btn o-ghost o-xs" (click)="unlink(r)" [attr.aria-label]="'Remove the link to ' + r.issue.key">×</button>}
+                </div>
+              } @empty {
+                <div class="o-empty">No linked issues.</div>
+              }
+            </div>
+
+            @if (attachments().length) {
+              <div class="o-card" data-testid="attachments">
+                <div class="o-ch"><b>Attachments</b><span class="o-faint o-sm">{{ attachments().length }}</span>
+                  @if (canEdit()) {<label class="o-lnk o-r" for="att-in-2">+ Attach</label>}</div>
+                @for (a of attachments(); track a.id) {
+                  <div class="o-row" [attr.data-testid]="'attachment-' + a.filename">
+                    @if (a.inline && thumbs()[a.id]) {<img class="att-img" [src]="thumbs()[a.id]" [alt]="a.filename" />} @else {<span class="att-ic" aria-hidden="true">{{ ext(a.filename) }}</span>}
+                    <div class="o-col" style="gap:2px;min-width:0;flex:1">
+                      <button type="button" class="o-lnk o-ell" style="text-align:left" (click)="download(a)">{{ a.filename }}</button>
+                      <span class="o-faint o-xs">{{ size(a.size) }} · {{ people().name(a.uploadedBy) }} · {{ ago(a.createdAt) }}</span>
+                    </div>
+                    @if ((a.uploadedBy === host.meId() && canEdit()) || canManage()) {<button type="button" class="o-btn o-ghost o-xs" (click)="removeAttachment(a)" [attr.aria-label]="'Delete ' + a.filename">×</button>}
+                  </div>
+                }
+                @if (canEdit()) {<input id="att-in-2" class="file-in" type="file" multiple (change)="upload($any($event.target))" />}
+              </div>
+            }
+
+            <div class="o-col" style="gap:12px">
+              <div class="o-tabs" role="tablist">
+                <button type="button" role="tab" class="o-tab" [class.o-on]="tab() === 'comments'" [attr.aria-selected]="tab() === 'comments'" (click)="tab.set('comments')">Comments<span class="o-n">{{ comments().length }}</span></button>
+                <button type="button" role="tab" class="o-tab" [class.o-on]="tab() === 'history'" [attr.aria-selected]="tab() === 'history'" (click)="tab.set('history')">History</button>
+              </div>
+              @if (tab() === 'comments') {
+                @for (c of comments(); track c.id) {
+                  <div class="o-card" [attr.data-testid]="'comment-' + c.id">
+                    <div class="o-ch" style="min-height:38px;background:var(--o-well)">
+                      <span class="o-av" aria-hidden="true">{{ people().initials(c.authorId) }}</span><b class="o-b5">{{ people().name(c.authorId) }}</b>
+                      <span class="o-faint o-sm">{{ ago(c.createdAt) }}{{ c.edited ? ' · edited' : '' }}</span>
+                      @if (c.authorId === host.meId() || canManage()) {<button type="button" class="o-lnk o-r" style="color:var(--o-mut)" (click)="removeComment(c)">Delete</button>}
+                    </div>
+                    <div class="o-cb o-lh" style="font-size:14px">
+                      <div class="o-md md" [innerHTML]="md(c.body)"></div>
+                      <div class="rx">
+                        @for (r of c.reactions ?? []; track r.reaction) {
+                          <button type="button" class="o-chip o-out" [class.mine]="r.mine" [attr.aria-pressed]="r.mine" [disabled]="!canComment()" (click)="react(c, r.reaction, !r.mine)"
+                            [attr.aria-label]="emojiLabel(r.reaction) + ': ' + r.count + (r.mine ? ', including you' : '')" [title]="reactors(r.people)">{{ emoji(r.reaction) }} {{ r.count }}</button>
+                        }
+                        @if (canComment()) {
+                          @if (picker() === c.id) {
+                            <span class="rx-pal" role="group" aria-label="Add a reaction">
+                              @for (x of reactionList; track x.name) {<button type="button" [attr.aria-label]="x.label" (click)="react(c, x.name, true)">{{ x.emoji }}</button>}
+                            </span>
+                          } @else {
+                            <button type="button" class="o-chip o-out" style="color:var(--o-mut)" (click)="picker.set(c.id)" aria-label="Add a reaction" data-testid="react">☺︎ +</button>
+                          }
+                        }
+                      </div>
+                    </div>
+                  </div>
+                }
+                @if (canComment()) {
+                  <div class="o-card mn">
+                    <label class="o-sr-only" for="is-cmt">Add a comment</label>
+                    <textarea #cmtEl id="is-cmt" class="o-in" style="border:none;box-shadow:none;min-height:70px;font-family:var(--o-font);font-size:13px" placeholder="Add a comment. Markdown and @mentions work." [ngModel]="draft()" (ngModelChange)="draft.set($event)" data-testid="comment-input"
+                      (input)="typed(cmtEl, 'comment')" (keydown)="mentionKey($event, cmtEl)" (blur)="closeMentionSoon()" role="combobox" [attr.aria-expanded]="mentionFor() === 'comment'" aria-autocomplete="list"></textarea>
+                    @if (mentionFor() === 'comment' && suggestions().length) {<ng-container *ngTemplateOutlet="mentionList; context: { el: cmtEl }" />}
+                    <div class="o-cf">
+                      @if (canEdit()) {<label for="att-in" class="o-lnk" style="color:var(--o-mut)">{{ uploading() ? 'Uploading…' : 'Attach files up to 25 MB' }}</label><input id="att-in" class="file-in" type="file" multiple (change)="upload($any($event.target))" data-testid="attach-input" />} @else {<span>Markdown</span>}
+                      <button type="button" class="o-btn o-sm o-dark o-r" (click)="addComment()" [disabled]="!draft().trim() || busy()" data-testid="comment-add">Comment</button>
+                    </div>
+                  </div>
+                }
+              } @else {
+                <div class="o-card">
+                  @for (h of history(); track h.id) {<div class="o-row o-sm"><span class="o-dot o-gry" aria-hidden="true"></span><span class="o-mut">{{ line(h) }}</span><span class="o-r o-faint">{{ ago(h.createdAt) }}</span></div>}
+                </div>
+              }
+            </div>
+          </div>
+
+          <div class="o-col" style="gap:14px">
+            <div class="o-card o-cb">
+              <div class="o-kv" style="grid-template-columns:90px 1fr;row-gap:8px">
+                <label class="o-k" for="f-status">Status</label>
+                <select id="f-status" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="setStatus($any($event.target).value)" data-testid="issue-status">
+                  @for (s of statuses(); track s.id) {<option [value]="s.id" [selected]="s.id === is.statusId">{{ s.name }}</option>}
+                </select>
+                <label class="o-k" for="f-who">Assignee</label>
+                <select id="f-who" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="change({ assigneeId: $any($event.target).value })" data-testid="issue-assignee">
+                  <option value="" [selected]="!is.assigneeId">Unassigned</option>
+                  @for (p of host.people(); track p.id) {<option [value]="p.id" [selected]="p.id === is.assigneeId">{{ p.name || p.email }}</option>}
+                </select>
+                <span class="o-k">Reporter</span><span class="o-flex"><span class="o-av" aria-hidden="true">{{ people().initials(is.reporterId) }}</span>{{ people().name(is.reporterId) }}</span>
+                <label class="o-k" for="f-pri">Priority</label>
+                <select id="f-pri" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="change({ priority: $any($event.target).value })">
+                  @for (p of priorities; track p) {<option [value]="p" [selected]="p === is.priority">{{ priorityLabel(p) }}</option>}
+                </select>
+                <span class="o-k">Labels</span>
+                <span class="o-flex o-wrap" style="gap:4px">
+                  @for (l of is.labels; track l) {<span class="o-chip o-out">{{ l }}@if (canEdit()) {<button type="button" class="o-lnk" style="font-size:11px;color:var(--o-dim)" (click)="removeLabel(l)" [attr.aria-label]="'Remove label ' + l">×</button>}</span>}
+                  @if (canEdit()) {<input class="o-in o-sm" style="width:90px;height:22px" placeholder="+ label" aria-label="Add a label" [ngModel]="labelDraft()" (ngModelChange)="labelDraft.set($event)" (keydown.enter)="addLabel()" />}
+                  @if (!is.labels.length && !canEdit()) {<span class="o-faint">None</span>}
+                </span>
+                @if (is.type !== 'epic') {
+                  <label class="o-k" for="f-parent">{{ is.type === 'subtask' ? 'Parent' : 'Epic' }}</label>
+                  @if (is.type === 'subtask') {
+                    <span>@if (is.parent) {<a [routerLink]="host.link('issues/' + is.parent.key)">{{ is.parent.key }} · {{ is.parent.title }}</a>}</span>
+                  } @else {
+                    <select id="f-parent" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="change({ parent: $any($event.target).value })">
+                      <option value="" [selected]="!is.parent">None</option>
+                      @for (e of epics(); track e.key) {<option [value]="e.key" [selected]="e.key === is.parent?.key">{{ e.key }} · {{ e.title }}</option>}
+                    </select>
+                  }
+                  <label class="o-k" for="f-sprint">Sprint</label>
+                  <select id="f-sprint" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy() || is.type === 'subtask'" (change)="change({ sprintId: $any($event.target).value })">
+                    <option value="" [selected]="!is.sprintId">Backlog</option>
+                    @for (s of openSprints(); track s.id) {<option [value]="s.id" [selected]="s.id === is.sprintId">{{ s.name }}{{ s.state === 'active' ? ' (active)' : '' }}</option>}
+                    @if (completedSprint(); as cs) {<option [value]="cs.id" selected disabled>{{ cs.name }} (completed)</option>}
+                  </select>
+                  <label class="o-k" for="f-pts">Points</label>
+                  <input id="f-pts" class="o-in o-sm o-mono kv-in" type="number" min="0" step="0.5" [disabled]="!canEdit() || busy()" [value]="is.points ?? ''" (change)="setPoints($any($event.target).value)" />
+                }
+                <label class="o-k" for="f-due">{{ is.type === 'epic' ? 'Target' : 'Due' }}</label>
+                @if (is.type === 'epic') {
+                  <input id="f-due" class="o-in o-sm kv-in" type="date" [disabled]="!canEdit() || busy()" [value]="is.fields['targetDate'] ?? ''" (change)="change({ fields: { targetDate: $any($event.target).value } })" />
+                } @else {
+                  <input id="f-due" class="o-in o-sm kv-in" type="date" [disabled]="!canEdit() || busy()" [value]="is.dueDate ?? ''" (change)="change({ dueDate: $any($event.target).value })" />
+                }
+                @if (is.type === 'bug') {
+                  <label class="o-k" for="f-sev">Severity</label>
+                  <select id="f-sev" class="o-in o-sm kv-in" [disabled]="!canEdit() || busy()" (change)="change({ fields: { severity: $any($event.target).value } })">
+                    <option value="" [selected]="!is.fields['severity']">Not set</option>
+                    @for (s of severities; track s) {<option [value]="s" [selected]="s === is.fields['severity']">{{ cap(s) }}</option>}
+                  </select>
+                }
+                @if (is.type === 'epic') {
+                  <label class="o-k" for="f-start">Start</label>
+                  <input id="f-start" class="o-in o-sm kv-in" type="date" [disabled]="!canEdit() || busy()" [value]="is.fields['startDate'] ?? ''" (change)="change({ fields: { startDate: $any($event.target).value } })" />
+                }
+              </div>
+            </div>
+            <div class="o-card">
+              <div class="o-ch"><b>Deployments</b></div>
+              <div class="o-empty o-sm">Releases that include {{ is.key }} show here once Deploy is set up.</div>
+            </div>
+            <div class="o-card o-cb o-col o-sm" style="gap:4px">
+              <span class="o-faint">Created {{ shortDate(is.createdAt) }} by {{ people().name(is.reporterId) }}</span>
+              <span class="o-faint">Updated {{ ago(is.updatedAt) }}</span>
+              @if (is.resolvedAt) {<span class="o-faint">Resolved {{ shortDate(is.resolvedAt) }} · {{ is.resolution }}</span>}
+              <span class="o-faint" data-testid="watchers">Watching: {{ watcherNames() }}</span>
+            </div>
+            @if (canManage()) {
+              @if (confirmDelete()) {
+                <div class="o-card o-cb o-col" style="gap:8px">
+                  <span class="o-mut o-sm">Delete {{ is.key }}? Its number is never reused. Type <b class="o-mono">{{ is.key }}</b> to confirm.</span>
+                  <input class="o-in o-sm o-mono" aria-label="Type the key to confirm" [ngModel]="deleteKey()" (ngModelChange)="deleteKey.set($event)" />
+                  <div class="o-flex"><button type="button" class="o-btn o-sm" (click)="confirmDelete.set(false)">Cancel</button><button type="button" class="o-btn o-sm o-red o-r" [disabled]="deleteKey().trim().toUpperCase() !== is.key || busy()" (click)="remove()">Delete issue</button></div>
+                </div>
+              } @else {
+                <button type="button" class="o-lnk" style="align-self:flex-start;color:var(--o-bad-tx)" (click)="confirmDelete.set(true)">Delete issue</button>
+              }
+            }
+          </div>
+        </div>
+      </div>
+    } @else if (error()) {
+      <div class="o-page o-narrow"><div class="o-card o-empty"><p>{{ error() }}</p><a class="o-btn" style="margin-top:14px" [routerLink]="host.link('issues')">All issues</a></div></div>
+    } @else {
+      <div class="o-page"><div class="o-card"><div class="o-empty">Loading {{ key() }}…</div></div></div>
+    }
+    <ng-template #mentionList let-el="el">
+      <ul class="mn-list" role="listbox" aria-label="People to mention">
+        @for (p of suggestions(); track p.id; let i = $index) {
+          <li role="option" [class.on]="i === mentionIndex()" [attr.aria-selected]="i === mentionIndex()" (mousedown)="$event.preventDefault(); pick(p, el)">
+            <span class="o-av" aria-hidden="true">{{ people().initials(p.id) }}</span><span class="o-ell">{{ p.name || p.email }}</span>@if (p.email && p.name) {<span class="o-faint o-xs o-ell">{{ p.email }}</span>}
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, styles: [".ti{font-size:24px;margin:0;line-height:1.25;text-wrap:pretty}.ti-btn{border:none;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:text}.md :where(p,ul,ol,pre){margin:0}.md pre{background:var(--o-well);padding:10px 12px;border-radius:8px;overflow:auto;font-family:var(--o-mono);font-size:12px}.md code{font-family:var(--o-mono);font-size:12px;color:var(--o-tx);background:var(--o-sunken);padding:0 4px;border-radius:4px}.md pre code{background:none;padding:0}.md img{max-width:100%}.kv-in{width:100%}textarea.o-in{min-height:140px;font-family:var(--o-mono);font-size:12px;line-height:1.6;padding:10px 12px;height:auto}.md .mention{color:var(--o-acc-tx, var(--o-acc));background:var(--o-acc-bg, var(--o-sunken));border-radius:4px;padding:0 3px;font-weight:500}.rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}.rx .o-chip{cursor:pointer;font-size:12px}.rx .o-chip.mine{border-color:var(--o-acc);background:var(--o-acc-bg, var(--o-sunken))}.rx-pal{display:flex;gap:2px;padding:4px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-surface);box-shadow:var(--o-shadow-sm, none)}.rx-pal button{border:none;background:none;font-size:16px;padding:2px 4px;border-radius:6px;cursor:pointer}.rx-pal button:hover,.rx-pal button:focus-visible{background:var(--o-sunken)}.mn{position:relative}.mn-list{position:absolute;left:8px;top:calc(100% - 4px);z-index:20;min-width:220px;max-width:320px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-surface);box-shadow:var(--o-shadow, 0 6px 20px rgba(0,0,0,.12));padding:4px;list-style:none;margin:0}.mn-list li{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}.mn-list li.on,.mn-list li:hover{background:var(--o-sunken)}.att-img{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--o-well);flex:none;overflow:hidden;font-size:0}.att-ic{width:40px;height:40px;border-radius:6px;background:var(--o-well);display:grid;place-items:center;font-size:10px;color:var(--o-mut);font-family:var(--o-mono);flex:none;text-transform:uppercase}.file-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [] });
+
+/*
+ * @chisquare-tech/origine-ngx-apps-design: the Design module's screens (TRD §6.10). The host app
+ * provides DesignHost and mounts the pages at /{org}/{project}/board, /backlog, /issues and
+ * /issues/:key.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BacklogPage, BoardPage, CreateIssueDialog, DesignApi, DesignHost, IssueListPage, IssuePage, IssuePanel, PRIORITIES, People, TYPES, ago, apiMessage, dateRange, download, epicChip, historyLine, initials, isConflict, isDone, points, priorityLabel, shortDate, statusChip, typeColour, typeLabel };
+//# sourceMappingURL=chisquare-tech-origine-ngx-apps-design.mjs.map