@things-factory/announcement 10.1.248 → 10.1.249

package/dist-client/components/announcement-sheet.js

@@ -0,0 +1,224 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * One announcement as its reader sees it - what kind it is and from whom, its body, its files, the screens it points to,
+ * and the acknowledgement it asks for (ADR-0163 decisions 3, 5). The screen and the popup both draw it.
+ */
+import '@material/web/icon/icon.js';
+import '@material/web/button/filled-button.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { navigate } from '@operato/shell';
+import { renderMarkdown } from '@things-factory/ai-assistant/dist-client/index.js';
+import { announcementApi } from '../utils/announcement-api.js';
+import { categoryWord, importanceWord, reasonOf, t, when } from '../utils/announcement-words.js';
+/** A screen of the application opens in place; an https page opens apart. */
+export function followLink(url) {
+    if (/^https:\/\//i.test(url))
+        window.open(url, '_blank', 'noopener');
+    else
+        navigate(url);
+}
+let AnnouncementSheet = class AnnouncementSheet extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.busy = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-medium, 8px);
+      color: var(--md-sys-color-on-surface);
+    }
+    .meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 0 var(--spacing-small, 4px);
+      border-radius: var(--border-radius, 4px);
+      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+      line-height: 1.6;
+    }
+    .chip.URGENT {
+      color: var(--md-sys-color-error);
+      border-color: currentColor;
+    }
+    .chip.IMPORTANT {
+      color: var(--md-sys-color-primary);
+      border-color: currentColor;
+    }
+    .chip md-icon {
+      --md-icon-size: 14px;
+    }
+    .markdown {
+      font-size: var(--ui-t-body, 14px);
+      line-height: 1.6;
+      overflow-wrap: anywhere;
+    }
+    .markdown :is(h1, h2, h3, h4) {
+      margin: var(--spacing-medium, 8px) 0 var(--spacing-small, 4px);
+      font-size: var(--ui-t-title, 16px);
+    }
+    .markdown :is(p, ul, ol, blockquote, pre, table) {
+      margin: 0 0 var(--spacing-medium, 8px);
+    }
+    .markdown :is(ul, ol) {
+      padding-inline-start: 1.4em;
+      list-style: revert;
+      display: block;
+    }
+    .markdown a {
+      color: var(--md-sys-color-primary);
+    }
+    .markdown table {
+      border-collapse: collapse;
+    }
+    .markdown :is(th, td) {
+      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+      padding: 2px var(--spacing-small, 4px);
+    }
+    h4 {
+      margin: var(--spacing-medium, 8px) 0 var(--spacing-small, 4px);
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font-weight: 600;
+    }
+    ul.files {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    a,
+    .link {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-small, 4px);
+      color: var(--md-sys-color-primary);
+      text-decoration: none;
+      cursor: pointer;
+      background: none;
+      border: 0;
+      padding: 0;
+      font: inherit;
+    }
+    a:hover,
+    .link:hover {
+      text-decoration: underline;
+    }
+    a md-icon,
+    .link md-icon {
+      --md-icon-size: 16px;
+    }
+    .size {
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      font-size: var(--ui-t-small, 12px);
+    }
+    .acknowledge {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--spacing-medium, 8px);
+      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      border-radius: var(--border-radius, 4px);
+      background: var(--md-sys-color-surface-container, rgba(0, 0, 0, 0.04));
+      font-size: var(--ui-t-body, 14px);
+    }
+    .acknowledge.done {
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+  `; }
+    render() {
+        const one = this.announcement;
+        if (!one)
+            return nothing;
+        const files = one.attachments ?? [];
+        const links = one.links ?? [];
+        return html `<div class="meta">
+        ${one.pinned ? html `<span class="chip"><md-icon>push_pin</md-icon>${t('announcement.field.pinned')}</span>` : nothing}
+        ${one.importance !== 'NORMAL' ? html `<span class="chip ${one.importance}">${importanceWord(one.importance)}</span>` : nothing}
+        <span class="chip">${categoryWord(one.category)}</span>
+        <span>${one.publisher?.name ?? one.creator?.name ?? ''}</span>
+        <span>${when(one.publishedAt ?? one.startsAt)}</span>
+        ${one.endsAt ? html `<span>${t('announcement.text.until', { when: when(one.endsAt) })}</span>` : nothing}
+        ${one.version > 1 ? html `<span>${t('announcement.text.version', { version: one.version })}</span>` : nothing}
+      </div>
+      ${one.body ? html `<div class="markdown">${unsafeHTML(renderMarkdown(one.body))}</div>` : nothing}
+      ${files.length
+            ? html `<h4>${t('announcement.field.attachments')}</h4>
+            <ul class="files">
+              ${files.map(file => html `<li>
+                    <a href=${file.fullpath} target="_blank" rel="noopener" download=${file.name}><md-icon>attach_file</md-icon>${file.name}</a>
+                    ${file.size ? html `<span class="size">${Math.max(1, Math.round(file.size / 1024))} KB</span>` : nothing}
+                  </li>`)}
+            </ul>`
+            : nothing}
+      ${links.length
+            ? html `<h4>${t('announcement.field.links')}</h4>
+            <ul class="files">
+              ${links.map(link => html `<li><button class="link" @click=${() => this.follow(link.url)}><md-icon>open_in_new</md-icon>${link.label}</button></li>`)}
+            </ul>`
+            : nothing}
+      ${this.renderAcknowledge()}`;
+    }
+    renderAcknowledge() {
+        const one = this.announcement;
+        if (!one.requiresAcknowledgement || one.status !== 'PUBLISHED')
+            return nothing;
+        const by = one.acknowledgeBy ? t('announcement.text.acknowledge-by', { when: when(one.acknowledgeBy, false) }) : '';
+        if (one.mine?.acknowledgedAt)
+            return html `<div class="acknowledge done">${t('announcement.text.acknowledged-at', { when: when(one.mine.acknowledgedAt) })}</div>`;
+        /* Only its audience acknowledges; a writer looking at one addressed to others sees what is asked. */
+        if (!one.addressed)
+            return html `<div class="acknowledge">${t('announcement.text.acknowledge-asked')} ${by}</div>`;
+        return html `<div class="acknowledge">
+      <span>${t('announcement.text.acknowledge-asked')} ${by}</span>
+      <md-filled-button ?disabled=${this.busy} @click=${() => this.acknowledge()}>${t('announcement.button.acknowledge')}</md-filled-button>
+    </div>`;
+    }
+    follow(url) {
+        this.dispatchEvent(new CustomEvent('announcement-follow', { bubbles: true, composed: true }));
+        followLink(url);
+    }
+    async acknowledge() {
+        this.busy = true;
+        try {
+            const done = await announcementApi.acknowledge(this.announcement.id);
+            this.announcement = { ...this.announcement, ...done };
+            this.dispatchEvent(new CustomEvent('announcement-acknowledged', { bubbles: true, composed: true, detail: this.announcement }));
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AnnouncementSheet.prototype, "announcement", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AnnouncementSheet.prototype, "busy", void 0);
+AnnouncementSheet = __decorate([
+    customElement('announcement-sheet')
+], AnnouncementSheet);
+export { AnnouncementSheet };
+//# sourceMappingURL=announcement-sheet.js.map

package/dist-client/components/announcement-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcement-sheet.js","sourceRoot":"","sources":["../../client/components/announcement-sheet.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * One announcement as its reader sees it - what kind it is and from whom, its body, its files, the screens it points to,\n * and the acknowledgement it asks for (ADR-0163 decisions 3, 5). The screen and the popup both draw it.\n */\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { navigate } from '@operato/shell'\nimport { renderMarkdown } from '@things-factory/ai-assistant/dist-client/index.js'\n\nimport { announcementApi, type AnnouncementItem } from '../utils/announcement-api.js'\nimport { categoryWord, importanceWord, reasonOf, t, when } from '../utils/announcement-words.js'\n\n/** A screen of the application opens in place; an https page opens apart. */\nexport function followLink(url: string) {\n  if (/^https:\\/\\//i.test(url)) window.open(url, '_blank', 'noopener')\n  else navigate(url)\n}\n\n@customElement('announcement-sheet')\nexport class AnnouncementSheet extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-medium, 8px);\n      color: var(--md-sys-color-on-surface);\n    }\n    .meta {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n      font-size: var(--ui-t-small, 12px);\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n    }\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 2px;\n      padding: 0 var(--spacing-small, 4px);\n      border-radius: var(--border-radius, 4px);\n      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n      line-height: 1.6;\n    }\n    .chip.URGENT {\n      color: var(--md-sys-color-error);\n      border-color: currentColor;\n    }\n    .chip.IMPORTANT {\n      color: var(--md-sys-color-primary);\n      border-color: currentColor;\n    }\n    .chip md-icon {\n      --md-icon-size: 14px;\n    }\n    .markdown {\n      font-size: var(--ui-t-body, 14px);\n      line-height: 1.6;\n      overflow-wrap: anywhere;\n    }\n    .markdown :is(h1, h2, h3, h4) {\n      margin: var(--spacing-medium, 8px) 0 var(--spacing-small, 4px);\n      font-size: var(--ui-t-title, 16px);\n    }\n    .markdown :is(p, ul, ol, blockquote, pre, table) {\n      margin: 0 0 var(--spacing-medium, 8px);\n    }\n    .markdown :is(ul, ol) {\n      padding-inline-start: 1.4em;\n      list-style: revert;\n      display: block;\n    }\n    .markdown a {\n      color: var(--md-sys-color-primary);\n    }\n    .markdown table {\n      border-collapse: collapse;\n    }\n    .markdown :is(th, td) {\n      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n      padding: 2px var(--spacing-small, 4px);\n    }\n    h4 {\n      margin: var(--spacing-medium, 8px) 0 var(--spacing-small, 4px);\n      font-size: var(--ui-t-small, 12px);\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      font-weight: 600;\n    }\n    ul.files {\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    a,\n    .link {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--spacing-small, 4px);\n      color: var(--md-sys-color-primary);\n      text-decoration: none;\n      cursor: pointer;\n      background: none;\n      border: 0;\n      padding: 0;\n      font: inherit;\n    }\n    a:hover,\n    .link:hover {\n      text-decoration: underline;\n    }\n    a md-icon,\n    .link md-icon {\n      --md-icon-size: 16px;\n    }\n    .size {\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      font-size: var(--ui-t-small, 12px);\n    }\n    .acknowledge {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--spacing-medium, 8px);\n      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n      border-radius: var(--border-radius, 4px);\n      background: var(--md-sys-color-surface-container, rgba(0, 0, 0, 0.04));\n      font-size: var(--ui-t-body, 14px);\n    }\n    .acknowledge.done {\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n    }\n  `\n\n  @property({ attribute: false }) announcement!: AnnouncementItem\n  @state() private busy = false\n\n  render() {\n    const one = this.announcement\n    if (!one) return nothing\n    const files = one.attachments ?? []\n    const links = one.links ?? []\n    return html`<div class=\"meta\">\n        ${one.pinned ? html`<span class=\"chip\"><md-icon>push_pin</md-icon>${t('announcement.field.pinned')}</span>` : nothing}\n        ${one.importance !== 'NORMAL' ? html`<span class=\"chip ${one.importance}\">${importanceWord(one.importance)}</span>` : nothing}\n        <span class=\"chip\">${categoryWord(one.category)}</span>\n        <span>${one.publisher?.name ?? one.creator?.name ?? ''}</span>\n        <span>${when(one.publishedAt ?? one.startsAt)}</span>\n        ${one.endsAt ? html`<span>${t('announcement.text.until', { when: when(one.endsAt) })}</span>` : nothing}\n        ${one.version > 1 ? html`<span>${t('announcement.text.version', { version: one.version })}</span>` : nothing}\n      </div>\n      ${one.body ? html`<div class=\"markdown\">${unsafeHTML(renderMarkdown(one.body))}</div>` : nothing}\n      ${files.length\n        ? html`<h4>${t('announcement.field.attachments')}</h4>\n            <ul class=\"files\">\n              ${files.map(\n                file =>\n                  html`<li>\n                    <a href=${file.fullpath} target=\"_blank\" rel=\"noopener\" download=${file.name}><md-icon>attach_file</md-icon>${file.name}</a>\n                    ${file.size ? html`<span class=\"size\">${Math.max(1, Math.round(file.size / 1024))} KB</span>` : nothing}\n                  </li>`\n              )}\n            </ul>`\n        : nothing}\n      ${links.length\n        ? html`<h4>${t('announcement.field.links')}</h4>\n            <ul class=\"files\">\n              ${links.map(link => html`<li><button class=\"link\" @click=${() => this.follow(link.url)}><md-icon>open_in_new</md-icon>${link.label}</button></li>`)}\n            </ul>`\n        : nothing}\n      ${this.renderAcknowledge()}`\n  }\n\n  private renderAcknowledge() {\n    const one = this.announcement\n    if (!one.requiresAcknowledgement || one.status !== 'PUBLISHED') return nothing\n    const by = one.acknowledgeBy ? t('announcement.text.acknowledge-by', { when: when(one.acknowledgeBy, false) }) : ''\n    if (one.mine?.acknowledgedAt) return html`<div class=\"acknowledge done\">${t('announcement.text.acknowledged-at', { when: when(one.mine.acknowledgedAt) })}</div>`\n    /* Only its audience acknowledges; a writer looking at one addressed to others sees what is asked. */\n    if (!one.addressed) return html`<div class=\"acknowledge\">${t('announcement.text.acknowledge-asked')} ${by}</div>`\n    return html`<div class=\"acknowledge\">\n      <span>${t('announcement.text.acknowledge-asked')} ${by}</span>\n      <md-filled-button ?disabled=${this.busy} @click=${() => this.acknowledge()}>${t('announcement.button.acknowledge')}</md-filled-button>\n    </div>`\n  }\n\n  private follow(url: string) {\n    this.dispatchEvent(new CustomEvent('announcement-follow', { bubbles: true, composed: true }))\n    followLink(url)\n  }\n\n  private async acknowledge() {\n    this.busy = true\n    try {\n      const done = await announcementApi.acknowledge(this.announcement.id)\n      this.announcement = { ...this.announcement, ...done }\n      this.dispatchEvent(new CustomEvent('announcement-acknowledged', { bubbles: true, composed: true, detail: this.announcement }))\n    } catch (error) {\n      notify({ level: 'error', message: reasonOf(error) })\n    } finally {\n      this.busy = false\n    }\n  }\n}\n"]}

package/dist-client/components/audience-picker.d.ts

@@ -0,0 +1,32 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.js';
+import { LitElement } from 'lit';
+import { type Audience } from '../utils/announcement-api.js';
+/** The framework chooser - a popup list with its search box on top. `change` hears only a value other than the one shown. */
+export declare function chooser(options: {
+    value: string;
+    display: string;
+}[], value: string, change: (value: string) => void, placeholder: string, label: string): import("lit-html").TemplateResult<1>;
+declare const AudiencePicker_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class AudiencePicker extends AudiencePicker_base {
+    static styles: import("lit").CSSResult;
+    value: Audience[];
+    disabled: boolean;
+    private choices?;
+    private text;
+    private found;
+    private size?;
+    private searching?;
+    private counting?;
+    connectedCallback(): Promise<void>;
+    updated(changes: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private give;
+    private take;
+    private tell;
+    private search;
+    /** How many the audience names now - asked a moment after it stops changing. */
+    private count;
+}
+export {};

package/dist-client/components/audience-picker.js

@@ -0,0 +1,229 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * Whom an announcement goes to - the whole domain, departments (each with those under it), roles and people
+ * (ADR-0163 decision 2), with how many people that names now. Changes go up as `change` with the whole list.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { announcementApi } from '../utils/announcement-api.js';
+import { t } from '../utils/announcement-words.js';
+const ICON = { DOMAIN: 'domain', DEPARTMENT: 'account_tree', ROLE: 'badge', USER: 'person' };
+/** The framework chooser - a popup list with its search box on top. `change` hears only a value other than the one shown. */
+export function chooser(options, value, change, placeholder, label) {
+    const shown = options.find(option => option.value === value)?.display ?? placeholder;
+    return html `<ox-select
+    .value=${value}
+    aria-label=${label}
+    @change=${(e) => {
+        /*
+         * Answered by the callback. ox-select's change is composed: left to bubble, it reaches the picker's host with an
+         * id for detail, after the picker's own change with the list, and the editor took the id as its audiences
+         * (「e.audiences.map is not a function」 on saving, 2026-10-30).
+         */
+        e.stopPropagation();
+        const next = String(e.detail ?? '');
+        if (next !== value)
+            change(next);
+    }}
+  >
+    <span slot="label">${shown}</span>
+    <ox-popup-list align-left nowrap with-search>${options.map(option => html `<div option value=${option.value}>${option.display}</div>`)}</ox-popup-list>
+  </ox-select>`;
+}
+let AudiencePicker = class AudiencePicker extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this.disabled = false;
+        this.text = '';
+        this.found = [];
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-medium, 8px);
+    }
+    .chosen {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px);
+      min-height: 28px;
+      align-items: center;
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 4px 2px 8px;
+      border-radius: 999px;
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      font-size: var(--ui-t-body, 14px);
+    }
+    .chip md-icon {
+      --md-icon-size: 16px;
+    }
+    .chip button {
+      border: 0;
+      background: none;
+      cursor: pointer;
+      color: inherit;
+      display: inline-flex;
+      padding: 0;
+    }
+    .add {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+      align-items: center;
+    }
+    .add ox-select {
+      min-width: 180px;
+    }
+    .add > button,
+    .found button {
+      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+      background: none;
+      border-radius: var(--border-radius, 4px);
+      padding: 2px var(--spacing-medium, 8px);
+      cursor: pointer;
+      font: inherit;
+      color: inherit;
+    }
+    .people {
+      position: relative;
+    }
+    .found {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px);
+      margin-top: var(--spacing-small, 4px);
+    }
+    .size,
+    .none {
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+  `; }
+    async connectedCallback() {
+        super.connectedCallback();
+        try {
+            this.choices = await announcementApi.choices();
+        }
+        catch {
+            this.choices = { domainId: '', domainName: '', departments: [], roles: [] };
+        }
+    }
+    updated(changes) {
+        if (changes.has('value'))
+            this.count();
+    }
+    render() {
+        const choices = this.choices;
+        const has = (scope, id) => this.value.some(one => one.scope === scope && one.targetId === id);
+        return html `<div class="chosen">
+        ${this.value.length
+            ? this.value.map(one => html `<span class="chip"
+                ><md-icon>${ICON[one.scope] ?? 'label'}</md-icon>${one.targetName ?? one.targetId}${one.scope === 'DEPARTMENT' ? html `<small>${t('announcement.text.with-sub-departments')}</small>` : nothing}
+                ${this.disabled ? nothing : html `<button aria-label=${t('announcement.button.remove')} @click=${() => this.take(one)}><md-icon>close</md-icon></button>`}</span
+              >`)
+            : html `<span class="none">${t('announcement.text.no-audience')}</span>`}
+      </div>
+      ${this.disabled || !choices
+            ? nothing
+            : html `<div class="add">
+              ${has('DOMAIN', choices.domainId) ? nothing : html `<button @click=${() => this.give({ scope: 'DOMAIN', targetId: choices.domainId, targetName: t('announcement.text.everyone-in', { name: choices.domainName }) })}>${t('announcement.text.everyone')}</button>`}
+              ${choices.departments.length
+                ? chooser(choices.departments.filter(one => !has('DEPARTMENT', one.id)).map(one => ({ value: one.id, display: one.note ? `${one.name} (${one.note})` : one.name })), '', id => this.give({ scope: 'DEPARTMENT', targetId: id, targetName: choices.departments.find(one => one.id === id)?.name }), t('announcement.text.add-department'), t('announcement.text.add-department'))
+                : nothing}
+              ${choices.roles.length
+                ? chooser(choices.roles.filter(one => !has('ROLE', one.id)).map(one => ({ value: one.id, display: one.name })), '', id => this.give({ scope: 'ROLE', targetId: id, targetName: choices.roles.find(one => one.id === id)?.name }), t('announcement.text.add-role'), t('announcement.text.add-role'))
+                : nothing}
+              <span class="people">
+                <input type="search" .value=${this.text} placeholder=${t('announcement.text.add-person')} @input=${(e) => this.search(e.target.value)} />
+              </span>
+            </div>
+            ${this.found.length
+                ? html `<div class="found">
+                  ${this.found
+                    .filter(one => !has('USER', one.id))
+                    .map(one => html `<button @click=${() => this.give({ scope: 'USER', targetId: one.id, targetName: one.name })}>${one.name}${one.note && one.note !== one.name ? ` · ${one.note}` : ''}</button>`)}
+                </div>`
+                : nothing}`}
+      ${this.size === undefined ? nothing : html `<span class="size">${t('announcement.text.audience-size', { count: this.size })}</span>`}`;
+    }
+    give(target) {
+        this.text = '';
+        this.found = [];
+        this.tell([...this.value, target]);
+    }
+    take(target) {
+        this.tell(this.value.filter(one => !(one.scope === target.scope && one.targetId === target.targetId)));
+    }
+    tell(value) {
+        this.value = value;
+        this.dispatchEvent(new CustomEvent('change', { detail: value }));
+    }
+    search(text) {
+        this.text = text;
+        clearTimeout(this.searching);
+        this.searching = setTimeout(async () => {
+            try {
+                this.found = text.trim() ? await announcementApi.people(text.trim()) : [];
+            }
+            catch {
+                this.found = [];
+            }
+        }, 250);
+    }
+    /** How many the audience names now - asked a moment after it stops changing. */
+    count() {
+        clearTimeout(this.counting);
+        if (!this.value.length) {
+            this.size = 0;
+            return;
+        }
+        this.counting = setTimeout(async () => {
+            try {
+                this.size = await announcementApi.audienceSize(this.value.map(({ scope, targetId }) => ({ scope, targetId })));
+            }
+            catch {
+                this.size = undefined;
+            }
+        }, 300);
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], AudiencePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AudiencePicker.prototype, "disabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AudiencePicker.prototype, "choices", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AudiencePicker.prototype, "text", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], AudiencePicker.prototype, "found", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], AudiencePicker.prototype, "size", void 0);
+AudiencePicker = __decorate([
+    customElement('announcement-audience-picker')
+], AudiencePicker);
+export { AudiencePicker };
+//# sourceMappingURL=audience-picker.js.map

package/dist-client/components/audience-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audience-picker.js","sourceRoot":"","sources":["../../client/components/audience-picker.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Whom an announcement goes to - the whole domain, departments (each with those under it), roles and people\n * (ADR-0163 decision 2), with how many people that names now. Changes go up as `change` with the whole list.\n */\nimport '@material/web/icon/icon.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport { announcementApi, type Audience } from '../utils/announcement-api.js'\nimport { t } from '../utils/announcement-words.js'\n\ntype Choices = Awaited<ReturnType<typeof announcementApi.choices>>\n\nconst ICON: Record<string, string> = { DOMAIN: 'domain', DEPARTMENT: 'account_tree', ROLE: 'badge', USER: 'person' }\n\n/** The framework chooser - a popup list with its search box on top. `change` hears only a value other than the one shown. */\nexport function chooser(options: { value: string; display: string }[], value: string, change: (value: string) => void, placeholder: string, label: string) {\n  const shown = options.find(option => option.value === value)?.display ?? placeholder\n  return html`<ox-select\n    .value=${value}\n    aria-label=${label}\n    @change=${(e: CustomEvent) => {\n      /*\n       * Answered by the callback. ox-select's change is composed: left to bubble, it reaches the picker's host with an\n       * id for detail, after the picker's own change with the list, and the editor took the id as its audiences\n       * (「e.audiences.map is not a function」 on saving, 2026-10-30).\n       */\n      e.stopPropagation()\n      const next = String(e.detail ?? '')\n      if (next !== value) change(next)\n    }}\n  >\n    <span slot=\"label\">${shown}</span>\n    <ox-popup-list align-left nowrap with-search>${options.map(option => html`<div option value=${option.value}>${option.display}</div>`)}</ox-popup-list>\n  </ox-select>`\n}\n\n@customElement('announcement-audience-picker')\nexport class AudiencePicker extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-medium, 8px);\n    }\n    .chosen {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--spacing-small, 4px);\n      min-height: 28px;\n      align-items: center;\n    }\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 2px 4px 2px 8px;\n      border-radius: 999px;\n      background: var(--md-sys-color-secondary-container);\n      color: var(--md-sys-color-on-secondary-container);\n      font-size: var(--ui-t-body, 14px);\n    }\n    .chip md-icon {\n      --md-icon-size: 16px;\n    }\n    .chip button {\n      border: 0;\n      background: none;\n      cursor: pointer;\n      color: inherit;\n      display: inline-flex;\n      padding: 0;\n    }\n    .add {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n      align-items: center;\n    }\n    .add ox-select {\n      min-width: 180px;\n    }\n    .add > button,\n    .found button {\n      border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n      background: none;\n      border-radius: var(--border-radius, 4px);\n      padding: 2px var(--spacing-medium, 8px);\n      cursor: pointer;\n      font: inherit;\n      color: inherit;\n    }\n    .people {\n      position: relative;\n    }\n    .found {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--spacing-small, 4px);\n      margin-top: var(--spacing-small, 4px);\n    }\n    .size,\n    .none {\n      font-size: var(--ui-t-small, 12px);\n      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n    }\n  `\n\n  @property({ attribute: false }) value: Audience[] = []\n  @property({ type: Boolean }) disabled = false\n  @state() private choices?: Choices\n  @state() private text = ''\n  @state() private found: { id: string; name: string; note?: string }[] = []\n  @state() private size?: number\n  private searching?: ReturnType<typeof setTimeout>\n  private counting?: ReturnType<typeof setTimeout>\n\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      this.choices = await announcementApi.choices()\n    } catch {\n      this.choices = { domainId: '', domainName: '', departments: [], roles: [] }\n    }\n  }\n\n  updated(changes: Map<string, unknown>) {\n    if (changes.has('value')) this.count()\n  }\n\n  render() {\n    const choices = this.choices\n    const has = (scope: string, id: string) => this.value.some(one => one.scope === scope && one.targetId === id)\n    return html`<div class=\"chosen\">\n        ${this.value.length\n          ? this.value.map(\n              one => html`<span class=\"chip\"\n                ><md-icon>${ICON[one.scope] ?? 'label'}</md-icon>${one.targetName ?? one.targetId}${one.scope === 'DEPARTMENT' ? html`<small>${t('announcement.text.with-sub-departments')}</small>` : nothing}\n                ${this.disabled ? nothing : html`<button aria-label=${t('announcement.button.remove')} @click=${() => this.take(one)}><md-icon>close</md-icon></button>`}</span\n              >`\n            )\n          : html`<span class=\"none\">${t('announcement.text.no-audience')}</span>`}\n      </div>\n      ${this.disabled || !choices\n        ? nothing\n        : html`<div class=\"add\">\n              ${has('DOMAIN', choices.domainId) ? nothing : html`<button @click=${() => this.give({ scope: 'DOMAIN', targetId: choices.domainId, targetName: t('announcement.text.everyone-in', { name: choices.domainName }) })}>${t('announcement.text.everyone')}</button>`}\n              ${choices.departments.length\n                ? chooser(\n                    choices.departments.filter(one => !has('DEPARTMENT', one.id)).map(one => ({ value: one.id, display: one.note ? `${one.name} (${one.note})` : one.name })),\n                    '',\n                    id => this.give({ scope: 'DEPARTMENT', targetId: id, targetName: choices.departments.find(one => one.id === id)?.name }),\n                    t('announcement.text.add-department'),\n                    t('announcement.text.add-department')\n                  )\n                : nothing}\n              ${choices.roles.length\n                ? chooser(\n                    choices.roles.filter(one => !has('ROLE', one.id)).map(one => ({ value: one.id, display: one.name })),\n                    '',\n                    id => this.give({ scope: 'ROLE', targetId: id, targetName: choices.roles.find(one => one.id === id)?.name }),\n                    t('announcement.text.add-role'),\n                    t('announcement.text.add-role')\n                  )\n                : nothing}\n              <span class=\"people\">\n                <input type=\"search\" .value=${this.text} placeholder=${t('announcement.text.add-person')} @input=${(e: any) => this.search(e.target.value)} />\n              </span>\n            </div>\n            ${this.found.length\n              ? html`<div class=\"found\">\n                  ${this.found\n                    .filter(one => !has('USER', one.id))\n                    .map(one => html`<button @click=${() => this.give({ scope: 'USER', targetId: one.id, targetName: one.name })}>${one.name}${one.note && one.note !== one.name ? ` · ${one.note}` : ''}</button>`)}\n                </div>`\n              : nothing}`}\n      ${this.size === undefined ? nothing : html`<span class=\"size\">${t('announcement.text.audience-size', { count: this.size })}</span>`}`\n  }\n\n  private give(target: Audience) {\n    this.text = ''\n    this.found = []\n    this.tell([...this.value, target])\n  }\n\n  private take(target: Audience) {\n    this.tell(this.value.filter(one => !(one.scope === target.scope && one.targetId === target.targetId)))\n  }\n\n  private tell(value: Audience[]) {\n    this.value = value\n    this.dispatchEvent(new CustomEvent('change', { detail: value }))\n  }\n\n  private search(text: string) {\n    this.text = text\n    clearTimeout(this.searching)\n    this.searching = setTimeout(async () => {\n      try {\n        this.found = text.trim() ? await announcementApi.people(text.trim()) : []\n      } catch {\n        this.found = []\n      }\n    }, 250)\n  }\n\n  /** How many the audience names now - asked a moment after it stops changing. */\n  private count() {\n    clearTimeout(this.counting)\n    if (!this.value.length) {\n      this.size = 0\n      return\n    }\n    this.counting = setTimeout(async () => {\n      try {\n        this.size = await announcementApi.audienceSize(this.value.map(({ scope, targetId }) => ({ scope, targetId })))\n      } catch {\n        this.size = undefined\n      }\n    }, 300)\n  }\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1 @@
+export { generateAnnouncementBadge, refreshAnnouncementBadge } from './utils/announcement-badge.js';

package/dist-client/index.js

@@ -0,0 +1,2 @@
+export { generateAnnouncementBadge, refreshAnnouncementBadge } from './utils/announcement-badge.js';
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAA","sourcesContent":["export { generateAnnouncementBadge, refreshAnnouncementBadge } from './utils/announcement-badge.js'\n"]}

package/dist-client/pages/announcement-editor.d.ts

@@ -0,0 +1,59 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
+import '@operato/list-state/ox-page-state.js';
+import '../components/audience-picker.js';
+import { PageView } from '@operato/shell';
+import { type AnnouncementItem, type AnnouncementLink, type Audience, type FileRow } from '../utils/announcement-api.js';
+type Form = {
+    title: string;
+    body: string;
+    category: string;
+    importance: string;
+    startsAt: string;
+    endsAt: string;
+    pinned: boolean;
+    requiresAcknowledgement: boolean;
+    acknowledgeBy: string;
+    popup: boolean;
+    sendEmail: boolean;
+    links: AnnouncementLink[];
+    audiences: Audience[];
+};
+declare const AnnouncementEditor_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * 공지 작성 — what it says, to whom, when, and what it asks of its readers (ADR-0163 decisions 2-5). A new one is kept as
+ * a draft until it is published; one already out is changed into a new version, and its writer may tell everyone again.
+ * `?from=<id>` starts a new one as a copy.
+ */
+export declare class AnnouncementEditor extends AnnouncementEditor_base {
+    static styles: import("lit").CSSResult[];
+    announcement: AnnouncementItem | null;
+    form: Form;
+    files: FileRow[];
+    added: File[];
+    removed: string[];
+    notifyAgain: boolean;
+    preview: boolean;
+    progress?: number;
+    loading: boolean;
+    error: unknown;
+    busy: boolean;
+    get out(): boolean;
+    get context(): {
+        frame: string;
+        menu: string;
+        actions: any[];
+        description?: string | undefined;
+        title: string;
+    };
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    private reset;
+    private load;
+    render(): import("lit-html").TemplateResult<1>;
+    private pick;
+    private input;
+    /** Keeps it, then sends it out when asked - a draft that cannot go out stays kept with the reason told. */
+    private save;
+    private deleteDraft;
+}
+export {};