@things-factory/figure-library 10.1.218 → 10.1.222

package/dist-client/status-looks/ox-figure-status-looks.js

@@ -0,0 +1,489 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { inputsGivenIn, withCode, withLook, withLookValue, withoutCode } from './status-looks.js';
+const DEFAULT = 'default';
+/**
+ * A status template's looks, one card per code (ADR-0051 2.3): its colour, its effect, a value for each state input a
+ * figure's port offers -- with the input's name, unit and range -- and the clip of the port's motion group. The code the
+ * data gives now is marked; a part the figure did not take is said under the card, by the field that gave it. Every
+ * change sends `looks-change` with the whole looks; the host writes them where the template lives.
+ *
+ * A value outside its input's range is not taken from the field (as the property panel's number maps); a value written
+ * elsewhere that the figure refused shows with the reason, to be fixed here. Values for inputs not shown -- another
+ * figure's, in a table shared by many -- are kept as they are.
+ *
+ * Shared by the board's 「상태 표현」 section and fmsim's legend editor, which shows colour and values only.
+ */
+let OxFigureStatusLooks = class OxFigureStatusLooks extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.looks = {};
+        /** The state inputs shown, one field each: the figure's offered inputs, or those a legend gives values to. */
+        this.inputs = [];
+        /** Inputs that can be added as a field (a legend's editor: the inputs the carrier figures offer). */
+        this.addable = [];
+        /**
+         * Whether every input a look gives a value to has a field, offered or not: a legend, which no one figure reads. A
+         * figure's own section leaves the values of inputs it does not offer to the figures that do.
+         */
+        this.showGiven = false;
+        /** The clips a look may choose; none, no clip field. */
+        this.clips = [];
+        this.effects = false;
+        /** Whether a look may give no colour (a board's template); a legend's entry always has one. */
+        this.colorOptional = false;
+        /** The rows the data gives now, with the ports that read them. */
+        this.now = {};
+        /** What the figure did not take, by row. */
+        this.issues = new Map();
+        this.disabled = false;
+        this.added = [];
+        this.newCode = '';
+    }
+    static { this.styles = css `
+    :host {
+      display: grid;
+      gap: 6px;
+      font: var(--property-editor-field-font, 0.76rem var(--theme-font, Roboto, sans-serif));
+      color: var(--md-sys-color-on-surface);
+    }
+
+    [cards] {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--status-looks-card-min, 220px), 1fr));
+      gap: 6px;
+    }
+
+    section {
+      display: grid;
+      gap: 3px;
+      padding: 4px 6px 6px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+    }
+
+    section[now] {
+      border-color: var(--md-sys-color-primary);
+    }
+
+    section[refused] {
+      border-color: var(--md-sys-color-error);
+    }
+
+    header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-height: 24px;
+    }
+
+    header b {
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    [now-tag] {
+      padding: 0 4px;
+      border-radius: 4px;
+      background: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      font-size: 0.68rem;
+      white-space: nowrap;
+    }
+
+    header [end] {
+      margin-left: auto;
+      display: flex;
+      gap: 2px;
+    }
+
+    input[type='color'] {
+      flex: none;
+      width: 22px;
+      height: 18px;
+      padding: 0;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 4px;
+      background: none;
+      cursor: pointer;
+    }
+
+    input[type='color']::-webkit-color-swatch-wrapper {
+      padding: 1px;
+    }
+
+    input[type='color']::-webkit-color-swatch {
+      border: none;
+      border-radius: 3px;
+    }
+
+    /*
+     * No colour given: the swatch is an empty dashed box until one is picked. A colour the field cannot show, it shows
+     * black, as the browser does; the figure's refusal says why.
+     */
+    input[type='color'][unset] {
+      border-style: dashed;
+      opacity: 0.6;
+    }
+
+    input[type='color'][unset]::-webkit-color-swatch {
+      background: transparent !important;
+    }
+
+    [fields] {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(56px, 72px) minmax(0, auto);
+      gap: 3px 6px;
+      align-items: center;
+    }
+
+    [fields] > [name] {
+      color: var(--md-sys-color-on-surface-variant);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    [fields] > [unit] {
+      color: var(--md-sys-color-outline);
+      font-size: 0.68rem;
+      white-space: nowrap;
+    }
+
+    input:not([type='color']),
+    select {
+      box-sizing: border-box;
+      width: 100%;
+      min-width: 0;
+      height: var(--property-editor-field-height, 24px);
+      padding: 0 4px;
+      font: inherit;
+      color: inherit;
+      border: var(--property-editor-border, 1px solid var(--md-sys-color-outline-variant));
+      border-radius: var(--property-editor-border-radius, 6px);
+      background: var(--property-editor-background, var(--md-sys-color-surface-container-high));
+    }
+
+    input[type='number'] {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+
+    input:hover,
+    select:hover {
+      border-color: var(--property-editor-border-color-hover, var(--md-sys-color-outline-variant));
+    }
+
+    input:focus,
+    select:focus {
+      outline: none;
+      border-color: var(--property-editor-border-color-focus, var(--md-sys-color-primary));
+    }
+
+    [aria-invalid='true'] {
+      border-color: var(--md-sys-color-error) !important;
+    }
+
+    /* The effect's choice takes the field and the unit columns; a blink's rate takes the field after it. */
+    [fields] > select[wide] {
+      grid-column: 2 / -1;
+    }
+
+    [issue] {
+      margin: 0;
+      color: var(--md-sys-color-error);
+      font-size: 0.7rem;
+    }
+
+    button {
+      height: 24px;
+      padding: 0 8px;
+      font: inherit;
+      color: var(--md-sys-color-primary);
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    button:hover {
+      background: var(--md-sys-color-surface-container-high);
+    }
+
+    button[icon] {
+      width: 22px;
+      padding: 0;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    footer {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      align-items: center;
+    }
+
+    footer input {
+      flex: 1 1 80px;
+      width: auto;
+    }
+
+    footer select {
+      flex: 1 1 120px;
+      width: auto;
+    }
+
+    [empty] {
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  `; }
+    render() {
+        const codes = Object.keys(this.looks).sort((a, b) => Number(a === DEFAULT) - Number(b === DEFAULT));
+        const shown = this.shownInputs();
+        const addable = this.addable.filter(a => !shown.some(s => s.input === a.input));
+        return html `
+      ${codes.length
+            ? html `<div cards>${codes.map(code => this.renderCard(code, shown))}</div>`
+            : html `<p empty>${i18next.t('figure.text.status-looks-empty')}</p>`}
+      <footer>
+        <input
+          aria-label=${i18next.t('figure.label.status-code')}
+          placeholder=${i18next.t('figure.label.status-code')}
+          .value=${this.newCode}
+          ?disabled=${this.disabled}
+          @input=${(e) => (this.newCode = e.target.value)}
+          @keydown=${(e) => e.key === 'Enter' && this.addCode(this.newCode)}
+        />
+        <button ?disabled=${this.disabled || !this.newCode.trim()} @click=${() => this.addCode(this.newCode)}>${i18next.t('figure.button.status-add-code')}</button>
+        ${DEFAULT in this.looks ? nothing : html `<button ?disabled=${this.disabled} @click=${() => this.addCode(DEFAULT)}>${i18next.t('figure.button.status-add-default')}</button>`}
+        ${addable.length
+            ? html `<select
+              aria-label=${i18next.t('figure.button.status-add-value')}
+              ?disabled=${this.disabled}
+              @change=${(e) => {
+                const select = e.target;
+                const picked = addable.find(a => a.input === select.value);
+                if (picked)
+                    this.added = [...this.added, picked];
+                select.value = '';
+            }}
+            >
+              <option value="">${i18next.t('figure.button.status-add-value')}</option>
+              ${addable.map(a => html `<option value=${a.input}>${describeInput(a)}</option>`)}
+            </select>`
+            : nothing}
+      </footer>
+    `;
+    }
+    /** The inputs shown: those given, those added here, and, with `showGiven`, any a look gives a value to. */
+    shownInputs() {
+        const shown = [...this.inputs];
+        for (const one of this.added)
+            if (!shown.some(s => s.input === one.input))
+                shown.push(one);
+        if (this.showGiven)
+            for (const input of inputsGivenIn(this.looks))
+                if (!shown.some(s => s.input === input))
+                    shown.push(this.addable.find(a => a.input === input) ?? { input, label: input });
+        return shown;
+    }
+    renderCard(code, inputs) {
+        const look = this.looks[code] ?? {};
+        const issues = this.issues.get(code) ?? [];
+        const said = (target, id) => issues.filter(i => i.target === target && (id === undefined || i.id === id));
+        const ports = this.now[code];
+        const values = look.values && typeof look.values === 'object' ? look.values : {};
+        const effect = look.effect && typeof look.effect === 'object' ? look.effect : undefined;
+        return html `<section ?now=${!!ports} ?refused=${issues.length > 0} data-code=${code}>
+      <header>
+        <input
+          type="color"
+          aria-label=${i18next.t('figure.label.status-color')}
+          title=${look.color === undefined ? i18next.t('figure.label.status-color-none') : String(look.color)}
+          ?unset=${look.color === undefined}
+          aria-invalid=${said('color').length ? 'true' : 'false'}
+          .value=${typeof look.color === 'string' ? look.color : '#000000'}
+          ?disabled=${this.disabled}
+          @change=${(e) => this.change(withLook(this.looks, code, { color: e.target.value.toUpperCase() }))}
+        />
+        <b title=${code}>${code === DEFAULT ? i18next.t('figure.label.status-default-code') : code}</b>
+        ${ports ? html `<span now-tag title=${ports.join(', ')}>${i18next.t('figure.label.status-now')}</span>` : nothing}
+        <span end>
+          ${this.colorOptional && look.color !== undefined
+            ? html `<button icon title=${i18next.t('figure.button.status-clear-color')} ?disabled=${this.disabled} @click=${() => this.change(withLook(this.looks, code, { color: undefined }))}>⌀</button>`
+            : nothing}
+          <button icon title=${i18next.t('figure.button.status-remove-code')} ?disabled=${this.disabled} @click=${() => this.change(withoutCode(this.looks, code))}>×</button>
+        </span>
+      </header>
+      <div fields>
+        ${this.effects
+            ? html `<span name>${i18next.t('figure.label.status-effect')}</span>
+              <select
+                ?wide=${effect?.kind !== 'blink'}
+                aria-label=${i18next.t('figure.label.status-effect')}
+                aria-invalid=${said('effect').length ? 'true' : 'false'}
+                ?disabled=${this.disabled}
+                @change=${(e) => {
+                const kind = e.target.value;
+                this.change(withLook(this.looks, code, { effect: kind === 'blink' ? { kind, hz: effect?.hz ?? 1 } : kind === 'glow' ? { kind } : undefined }));
+            }}
+              >
+                ${['', 'blink', 'glow'].map(k => html `<option value=${k} ?selected=${(effect?.kind ?? '') === k}>${i18next.t('figure.label.status-effect-' + (k || 'none'))}</option>`)}
+              </select>
+              ${effect?.kind === 'blink'
+                ? html `<input
+                    type="number"
+                    step="any"
+                    aria-label=${i18next.t('figure.label.status-effect-hz')}
+                    .value=${String(effect.hz ?? 1)}
+                    ?disabled=${this.disabled}
+                    @change=${(e) => {
+                    const hz = e.target.valueAsNumber;
+                    if (!(Number.isFinite(hz) && hz > 0))
+                        return this.requestUpdate();
+                    this.change(withLook(this.looks, code, { effect: { kind: 'blink', hz } }));
+                }}
+                  />`
+                : nothing}`
+            : nothing}
+        ${inputs.map(input => {
+            const held = values[input.input];
+            const refused = said('state', input.input);
+            return html `<span name title=${describeInput(input)}>${input.label}</span>
+            <input
+              type="number"
+              step="any"
+              data-input=${input.input}
+              aria-label=${input.label}
+              aria-invalid=${refused.length ? 'true' : 'false'}
+              placeholder=${rangeOf(input) ?? ''}
+              .value=${held === undefined ? '' : String(held)}
+              ?disabled=${this.disabled}
+              @change=${(e) => this.changeValue(code, input, e.target)}
+            />
+            <span unit>${[input.unit, rangeOf(input)].filter(Boolean).join(' ')}</span>`;
+        })}
+        ${this.clips.length
+            ? html `<span name>${i18next.t('figure.label.status-clip')}</span>
+              <select
+                wide
+                aria-label=${i18next.t('figure.label.status-clip')}
+                aria-invalid=${said('motion-clip').length ? 'true' : 'false'}
+                ?disabled=${this.disabled}
+                @change=${(e) => this.change(withLook(this.looks, code, { clip: e.target.value || undefined }))}
+              >
+                <option value="" ?selected=${look.clip === undefined}>${i18next.t('figure.label.status-clip-none')}</option>
+                ${[...new Set([...this.clips, ...(look.clip !== undefined && !this.clips.includes(look.clip) ? [look.clip] : [])])].map(clip => html `<option value=${clip} ?selected=${look.clip === clip}>${clip}</option>`)}
+              </select>`
+            : nothing}
+      </div>
+      ${issues.map(issue => html `<p issue>${issueSentence(issue, inputs)}</p>`)}
+    </section>`;
+    }
+    addCode(code) {
+        const trimmed = code.trim();
+        if (!trimmed)
+            return;
+        this.newCode = '';
+        if (trimmed in this.looks)
+            return;
+        this.change(this.defaultColor ? withLook(this.looks, trimmed, { color: this.defaultColor }) : withCode(this.looks, trimmed));
+    }
+    /** A number in range is taken; an empty field takes the value away (the next source gives it); anything else is not taken. */
+    changeValue(code, input, field) {
+        if (field.value.trim() === '')
+            return this.change(withLookValue(this.looks, code, input.input, undefined));
+        const value = field.valueAsNumber;
+        const outside = !Number.isFinite(value) || (input.min !== undefined && value < input.min) || (input.max !== undefined && value > input.max);
+        if (outside) {
+            const held = this.looks[code]?.values?.[input.input];
+            field.value = held === undefined ? '' : String(held);
+            return;
+        }
+        this.change(withLookValue(this.looks, code, input.input, value));
+    }
+    change(looks) {
+        this.looks = looks;
+        this.dispatchEvent(new CustomEvent('looks-change', { bubbles: true, composed: true, detail: { looks } }));
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], OxFigureStatusLooks.prototype, "looks", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], OxFigureStatusLooks.prototype, "inputs", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], OxFigureStatusLooks.prototype, "addable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-given' }),
+    __metadata("design:type", Object)
+], OxFigureStatusLooks.prototype, "showGiven", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], OxFigureStatusLooks.prototype, "clips", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], OxFigureStatusLooks.prototype, "effects", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'color-optional' }),
+    __metadata("design:type", Object)
+], OxFigureStatusLooks.prototype, "colorOptional", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-color' }),
+    __metadata("design:type", String)
+], OxFigureStatusLooks.prototype, "defaultColor", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], OxFigureStatusLooks.prototype, "now", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Map)
+], OxFigureStatusLooks.prototype, "issues", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], OxFigureStatusLooks.prototype, "disabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], OxFigureStatusLooks.prototype, "added", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxFigureStatusLooks.prototype, "newCode", void 0);
+OxFigureStatusLooks = __decorate([
+    customElement('ox-figure-status-looks')
+], OxFigureStatusLooks);
+export { OxFigureStatusLooks };
+/** An input as the choice and the tooltip say it: its name, unit and range, and the port that offers it. */
+export function describeInput(input) {
+    const tail = [input.unit, rangeOf(input)].filter(Boolean).join(' ');
+    return `${input.label}${tail ? ` (${tail})` : ''}${input.portLabel ? ` · ${input.portLabel}` : ''}`;
+}
+function rangeOf(input) {
+    return input.min !== undefined || input.max !== undefined ? `${input.min ?? ''}~${input.max ?? ''}` : undefined;
+}
+/** Why a part was not taken, in the person's words, with the value refused. */
+export function issueSentence(issue, inputs = []) {
+    const input = issue.id !== undefined ? inputs.find(i => i.input === issue.id) : undefined;
+    return i18next.t('figure.text.status-issue-' + issue.reason, {
+        name: input?.label ?? issue.id ?? '',
+        value: typeof issue.value === 'string' ? issue.value : JSON.stringify(issue.value),
+        range: input ? (rangeOf(input) ?? '') : ''
+    });
+}
+//# sourceMappingURL=ox-figure-status-looks.js.map

package/dist-client/status-looks/ox-figure-status-looks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-figure-status-looks.js","sourceRoot":"","sources":["../../client/status-looks/ox-figure-status-looks.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { inputsGivenIn, withCode, withLook, withLookValue, withoutCode, type LookInput, type StatusIssue, type StatusLooks } from './status-looks.js'\n\nconst DEFAULT = 'default'\n\n/**\n * A status template's looks, one card per code (ADR-0051 2.3): its colour, its effect, a value for each state input a\n * figure's port offers -- with the input's name, unit and range -- and the clip of the port's motion group. The code the\n * data gives now is marked; a part the figure did not take is said under the card, by the field that gave it. Every\n * change sends `looks-change` with the whole looks; the host writes them where the template lives.\n *\n * A value outside its input's range is not taken from the field (as the property panel's number maps); a value written\n * elsewhere that the figure refused shows with the reason, to be fixed here. Values for inputs not shown -- another\n * figure's, in a table shared by many -- are kept as they are.\n *\n * Shared by the board's 「상태 표현」 section and fmsim's legend editor, which shows colour and values only.\n */\n@customElement('ox-figure-status-looks')\nexport class OxFigureStatusLooks extends LitElement {\n  static styles = css`\n    :host {\n      display: grid;\n      gap: 6px;\n      font: var(--property-editor-field-font, 0.76rem var(--theme-font, Roboto, sans-serif));\n      color: var(--md-sys-color-on-surface);\n    }\n\n    [cards] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(var(--status-looks-card-min, 220px), 1fr));\n      gap: 6px;\n    }\n\n    section {\n      display: grid;\n      gap: 3px;\n      padding: 4px 6px 6px;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 6px;\n    }\n\n    section[now] {\n      border-color: var(--md-sys-color-primary);\n    }\n\n    section[refused] {\n      border-color: var(--md-sys-color-error);\n    }\n\n    header {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-height: 24px;\n    }\n\n    header b {\n      font-weight: 600;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    [now-tag] {\n      padding: 0 4px;\n      border-radius: 4px;\n      background: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      font-size: 0.68rem;\n      white-space: nowrap;\n    }\n\n    header [end] {\n      margin-left: auto;\n      display: flex;\n      gap: 2px;\n    }\n\n    input[type='color'] {\n      flex: none;\n      width: 22px;\n      height: 18px;\n      padding: 0;\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: 4px;\n      background: none;\n      cursor: pointer;\n    }\n\n    input[type='color']::-webkit-color-swatch-wrapper {\n      padding: 1px;\n    }\n\n    input[type='color']::-webkit-color-swatch {\n      border: none;\n      border-radius: 3px;\n    }\n\n    /*\n     * No colour given: the swatch is an empty dashed box until one is picked. A colour the field cannot show, it shows\n     * black, as the browser does; the figure's refusal says why.\n     */\n    input[type='color'][unset] {\n      border-style: dashed;\n      opacity: 0.6;\n    }\n\n    input[type='color'][unset]::-webkit-color-swatch {\n      background: transparent !important;\n    }\n\n    [fields] {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) minmax(56px, 72px) minmax(0, auto);\n      gap: 3px 6px;\n      align-items: center;\n    }\n\n    [fields] > [name] {\n      color: var(--md-sys-color-on-surface-variant);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    [fields] > [unit] {\n      color: var(--md-sys-color-outline);\n      font-size: 0.68rem;\n      white-space: nowrap;\n    }\n\n    input:not([type='color']),\n    select {\n      box-sizing: border-box;\n      width: 100%;\n      min-width: 0;\n      height: var(--property-editor-field-height, 24px);\n      padding: 0 4px;\n      font: inherit;\n      color: inherit;\n      border: var(--property-editor-border, 1px solid var(--md-sys-color-outline-variant));\n      border-radius: var(--property-editor-border-radius, 6px);\n      background: var(--property-editor-background, var(--md-sys-color-surface-container-high));\n    }\n\n    input[type='number'] {\n      text-align: right;\n      font-variant-numeric: tabular-nums;\n    }\n\n    input:hover,\n    select:hover {\n      border-color: var(--property-editor-border-color-hover, var(--md-sys-color-outline-variant));\n    }\n\n    input:focus,\n    select:focus {\n      outline: none;\n      border-color: var(--property-editor-border-color-focus, var(--md-sys-color-primary));\n    }\n\n    [aria-invalid='true'] {\n      border-color: var(--md-sys-color-error) !important;\n    }\n\n    /* The effect's choice takes the field and the unit columns; a blink's rate takes the field after it. */\n    [fields] > select[wide] {\n      grid-column: 2 / -1;\n    }\n\n    [issue] {\n      margin: 0;\n      color: var(--md-sys-color-error);\n      font-size: 0.7rem;\n    }\n\n    button {\n      height: 24px;\n      padding: 0 8px;\n      font: inherit;\n      color: var(--md-sys-color-primary);\n      border: none;\n      border-radius: 6px;\n      background: transparent;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n\n    button:hover {\n      background: var(--md-sys-color-surface-container-high);\n    }\n\n    button[icon] {\n      width: 22px;\n      padding: 0;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n\n    footer {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      align-items: center;\n    }\n\n    footer input {\n      flex: 1 1 80px;\n      width: auto;\n    }\n\n    footer select {\n      flex: 1 1 120px;\n      width: auto;\n    }\n\n    [empty] {\n      margin: 0;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n  `\n\n  @property({ type: Object }) looks: StatusLooks = {}\n  /** The state inputs shown, one field each: the figure's offered inputs, or those a legend gives values to. */\n  @property({ type: Array }) inputs: LookInput[] = []\n  /** Inputs that can be added as a field (a legend's editor: the inputs the carrier figures offer). */\n  @property({ type: Array }) addable: LookInput[] = []\n  /**\n   * Whether every input a look gives a value to has a field, offered or not: a legend, which no one figure reads. A\n   * figure's own section leaves the values of inputs it does not offer to the figures that do.\n   */\n  @property({ type: Boolean, attribute: 'show-given' }) showGiven = false\n  /** The clips a look may choose; none, no clip field. */\n  @property({ type: Array }) clips: string[] = []\n  @property({ type: Boolean }) effects = false\n  /** Whether a look may give no colour (a board's template); a legend's entry always has one. */\n  @property({ type: Boolean, attribute: 'color-optional' }) colorOptional = false\n  /** The colour a new code starts with (a legend's entry has one from the start). */\n  @property({ type: String, attribute: 'default-color' }) defaultColor?: string\n  /** The rows the data gives now, with the ports that read them. */\n  @property({ type: Object }) now: Record<string, string[]> = {}\n  /** What the figure did not take, by row. */\n  @property({ type: Object }) issues: Map<string, StatusIssue[]> = new Map()\n  @property({ type: Boolean }) disabled = false\n\n  @state() private added: LookInput[] = []\n  @state() private newCode = ''\n\n  render() {\n    const codes = Object.keys(this.looks).sort((a, b) => Number(a === DEFAULT) - Number(b === DEFAULT))\n    const shown = this.shownInputs()\n    const addable = this.addable.filter(a => !shown.some(s => s.input === a.input))\n    return html`\n      ${codes.length\n        ? html`<div cards>${codes.map(code => this.renderCard(code, shown))}</div>`\n        : html`<p empty>${i18next.t('figure.text.status-looks-empty')}</p>`}\n      <footer>\n        <input\n          aria-label=${i18next.t('figure.label.status-code')}\n          placeholder=${i18next.t('figure.label.status-code')}\n          .value=${this.newCode}\n          ?disabled=${this.disabled}\n          @input=${(e: Event) => (this.newCode = (e.target as HTMLInputElement).value)}\n          @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.addCode(this.newCode)}\n        />\n        <button ?disabled=${this.disabled || !this.newCode.trim()} @click=${() => this.addCode(this.newCode)}>${i18next.t('figure.button.status-add-code')}</button>\n        ${DEFAULT in this.looks ? nothing : html`<button ?disabled=${this.disabled} @click=${() => this.addCode(DEFAULT)}>${i18next.t('figure.button.status-add-default')}</button>`}\n        ${addable.length\n          ? html`<select\n              aria-label=${i18next.t('figure.button.status-add-value')}\n              ?disabled=${this.disabled}\n              @change=${(e: Event) => {\n                const select = e.target as HTMLSelectElement\n                const picked = addable.find(a => a.input === select.value)\n                if (picked) this.added = [...this.added, picked]\n                select.value = ''\n              }}\n            >\n              <option value=\"\">${i18next.t('figure.button.status-add-value')}</option>\n              ${addable.map(a => html`<option value=${a.input}>${describeInput(a)}</option>`)}\n            </select>`\n          : nothing}\n      </footer>\n    `\n  }\n\n  /** The inputs shown: those given, those added here, and, with `showGiven`, any a look gives a value to. */\n  private shownInputs(): LookInput[] {\n    const shown = [...this.inputs]\n    for (const one of this.added) if (!shown.some(s => s.input === one.input)) shown.push(one)\n    if (this.showGiven)\n      for (const input of inputsGivenIn(this.looks))\n        if (!shown.some(s => s.input === input)) shown.push(this.addable.find(a => a.input === input) ?? { input, label: input })\n    return shown\n  }\n\n  private renderCard(code: string, inputs: LookInput[]) {\n    const look = this.looks[code] ?? {}\n    const issues = this.issues.get(code) ?? []\n    const said = (target: string, id?: string) => issues.filter(i => i.target === target && (id === undefined || i.id === id))\n    const ports = this.now[code]\n    const values = look.values && typeof look.values === 'object' ? (look.values as Record<string, unknown>) : {}\n    const effect = look.effect && typeof look.effect === 'object' ? look.effect : undefined\n    return html`<section ?now=${!!ports} ?refused=${issues.length > 0} data-code=${code}>\n      <header>\n        <input\n          type=\"color\"\n          aria-label=${i18next.t('figure.label.status-color')}\n          title=${look.color === undefined ? i18next.t('figure.label.status-color-none') : String(look.color)}\n          ?unset=${look.color === undefined}\n          aria-invalid=${said('color').length ? 'true' : 'false'}\n          .value=${typeof look.color === 'string' ? look.color : '#000000'}\n          ?disabled=${this.disabled}\n          @change=${(e: Event) => this.change(withLook(this.looks, code, { color: (e.target as HTMLInputElement).value.toUpperCase() }))}\n        />\n        <b title=${code}>${code === DEFAULT ? i18next.t('figure.label.status-default-code') : code}</b>\n        ${ports ? html`<span now-tag title=${ports.join(', ')}>${i18next.t('figure.label.status-now')}</span>` : nothing}\n        <span end>\n          ${this.colorOptional && look.color !== undefined\n            ? html`<button icon title=${i18next.t('figure.button.status-clear-color')} ?disabled=${this.disabled} @click=${() => this.change(withLook(this.looks, code, { color: undefined }))}>⌀</button>`\n            : nothing}\n          <button icon title=${i18next.t('figure.button.status-remove-code')} ?disabled=${this.disabled} @click=${() => this.change(withoutCode(this.looks, code))}>×</button>\n        </span>\n      </header>\n      <div fields>\n        ${this.effects\n          ? html`<span name>${i18next.t('figure.label.status-effect')}</span>\n              <select\n                ?wide=${effect?.kind !== 'blink'}\n                aria-label=${i18next.t('figure.label.status-effect')}\n                aria-invalid=${said('effect').length ? 'true' : 'false'}\n                ?disabled=${this.disabled}\n                @change=${(e: Event) => {\n                  const kind = (e.target as HTMLSelectElement).value\n                  this.change(withLook(this.looks, code, { effect: kind === 'blink' ? { kind, hz: effect?.hz ?? 1 } : kind === 'glow' ? { kind } : undefined }))\n                }}\n              >\n                ${['', 'blink', 'glow'].map(k => html`<option value=${k} ?selected=${(effect?.kind ?? '') === k}>${i18next.t('figure.label.status-effect-' + (k || 'none'))}</option>`)}\n              </select>\n              ${effect?.kind === 'blink'\n                ? html`<input\n                    type=\"number\"\n                    step=\"any\"\n                    aria-label=${i18next.t('figure.label.status-effect-hz')}\n                    .value=${String(effect.hz ?? 1)}\n                    ?disabled=${this.disabled}\n                    @change=${(e: Event) => {\n                      const hz = (e.target as HTMLInputElement).valueAsNumber\n                      if (!(Number.isFinite(hz) && hz > 0)) return this.requestUpdate()\n                      this.change(withLook(this.looks, code, { effect: { kind: 'blink', hz } }))\n                    }}\n                  />`\n                : nothing}`\n          : nothing}\n        ${inputs.map(input => {\n          const held = values[input.input]\n          const refused = said('state', input.input)\n          return html`<span name title=${describeInput(input)}>${input.label}</span>\n            <input\n              type=\"number\"\n              step=\"any\"\n              data-input=${input.input}\n              aria-label=${input.label}\n              aria-invalid=${refused.length ? 'true' : 'false'}\n              placeholder=${rangeOf(input) ?? ''}\n              .value=${held === undefined ? '' : String(held)}\n              ?disabled=${this.disabled}\n              @change=${(e: Event) => this.changeValue(code, input, e.target as HTMLInputElement)}\n            />\n            <span unit>${[input.unit, rangeOf(input)].filter(Boolean).join(' ')}</span>`\n        })}\n        ${this.clips.length\n          ? html`<span name>${i18next.t('figure.label.status-clip')}</span>\n              <select\n                wide\n                aria-label=${i18next.t('figure.label.status-clip')}\n                aria-invalid=${said('motion-clip').length ? 'true' : 'false'}\n                ?disabled=${this.disabled}\n                @change=${(e: Event) => this.change(withLook(this.looks, code, { clip: (e.target as HTMLSelectElement).value || undefined }))}\n              >\n                <option value=\"\" ?selected=${look.clip === undefined}>${i18next.t('figure.label.status-clip-none')}</option>\n                ${[...new Set([...this.clips, ...(look.clip !== undefined && !this.clips.includes(look.clip) ? [look.clip] : [])])].map(\n                  clip => html`<option value=${clip} ?selected=${look.clip === clip}>${clip}</option>`\n                )}\n              </select>`\n          : nothing}\n      </div>\n      ${issues.map(issue => html`<p issue>${issueSentence(issue, inputs)}</p>`)}\n    </section>`\n  }\n\n  private addCode(code: string) {\n    const trimmed = code.trim()\n    if (!trimmed) return\n    this.newCode = ''\n    if (trimmed in this.looks) return\n    this.change(this.defaultColor ? withLook(this.looks, trimmed, { color: this.defaultColor }) : withCode(this.looks, trimmed))\n  }\n\n  /** A number in range is taken; an empty field takes the value away (the next source gives it); anything else is not taken. */\n  private changeValue(code: string, input: LookInput, field: HTMLInputElement) {\n    if (field.value.trim() === '') return this.change(withLookValue(this.looks, code, input.input, undefined))\n    const value = field.valueAsNumber\n    const outside = !Number.isFinite(value) || (input.min !== undefined && value < input.min) || (input.max !== undefined && value > input.max)\n    if (outside) {\n      const held = this.looks[code]?.values?.[input.input]\n      field.value = held === undefined ? '' : String(held)\n      return\n    }\n    this.change(withLookValue(this.looks, code, input.input, value))\n  }\n\n  private change(looks: StatusLooks) {\n    this.looks = looks\n    this.dispatchEvent(new CustomEvent('looks-change', { bubbles: true, composed: true, detail: { looks } }))\n  }\n}\n\n/** An input as the choice and the tooltip say it: its name, unit and range, and the port that offers it. */\nexport function describeInput(input: LookInput): string {\n  const tail = [input.unit, rangeOf(input)].filter(Boolean).join(' ')\n  return `${input.label}${tail ? ` (${tail})` : ''}${input.portLabel ? ` · ${input.portLabel}` : ''}`\n}\n\nfunction rangeOf(input: LookInput): string | undefined {\n  return input.min !== undefined || input.max !== undefined ? `${input.min ?? ''}~${input.max ?? ''}` : undefined\n}\n\n/** Why a part was not taken, in the person's words, with the value refused. */\nexport function issueSentence(issue: StatusIssue, inputs: readonly LookInput[] = []): string {\n  const input = issue.id !== undefined ? inputs.find(i => i.input === issue.id) : undefined\n  return i18next.t('figure.text.status-issue-' + issue.reason, {\n    name: input?.label ?? issue.id ?? '',\n    value: typeof issue.value === 'string' ? issue.value : JSON.stringify(issue.value),\n    range: input ? (rangeOf(input) ?? '') : ''\n  })\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-figure-status-looks': OxFigureStatusLooks\n  }\n}\n"]}

package/dist-client/status-looks/status-looks.d.ts

@@ -0,0 +1,99 @@
+import type { FigureAsset } from '@hatiolab/figure-model';
+export interface StatusLookEffect {
+    kind: 'blink' | 'glow';
+    hz?: number;
+}
+/** One code's look, as a template holds it. Any part may be missing; a value is in its input's own unit. */
+export interface StatusLook {
+    color?: string;
+    effect?: StatusLookEffect | null;
+    values?: Record<string, number>;
+    clip?: string;
+}
+/** A template's states: code → look, `default` for a code the template does not name. */
+export type StatusLooks = Record<string, StatusLook>;
+/** A state input a template may give a value to: the input, its name, unit and range, and the port that offers it. */
+export interface LookInput {
+    input: string;
+    label: string;
+    unit?: string;
+    min?: number;
+    max?: number;
+    sourceMode?: 'observed' | 'commanded';
+    port?: string;
+    portLabel?: string;
+}
+/** A motion group a template may choose a clip of, through the port that holds it. */
+export interface LookGroup {
+    id: string;
+    label: string;
+    clips: string[];
+    port: string;
+}
+/** What one status port of a placed figure said of the last look it was given, as things-scene's `statusIssues` holds it. */
+export interface StatusIssue {
+    port: string;
+    code: string;
+    source: 'resolver' | 'placement' | 'board';
+    target: 'state' | 'motion-clip' | 'color' | 'effect' | 'values' | 'resolver';
+    id?: string;
+    reason: string;
+    value: unknown;
+}
+/** The state inputs the figure's status ports offer a template, in port order, with the input's unit and range. */
+export declare function offeredInputsOf(asset: FigureAsset): LookInput[];
+/** The motion groups the figure's status ports let a template choose a clip of. */
+export declare function offeredGroupsOf(asset: FigureAsset): LookGroup[];
+/** A template's looks as they are stored; anything not a record of records reads as no looks. */
+export declare function looksOf(states: unknown): StatusLooks;
+/**
+ * One code's look with some parts changed: a part given as undefined is taken away, so the template no longer gives it
+ * and the next source does (ADR-0051 2.3, 4). A look left with nothing stays, as a code the template names.
+ */
+export declare function withLook(looks: StatusLooks, code: string, patch: Partial<StatusLook>): StatusLooks;
+/**
+ * One value of one code's look: a number sets it, undefined takes it away. The values of inputs this figure does not
+ * offer -- another figure's, in a table shared by many (ADR-0051 2.3, 9) -- stay as they were.
+ */
+export declare function withLookValue(looks: StatusLooks, code: string, input: string, value: number | undefined): StatusLooks;
+export declare function withCode(looks: StatusLooks, code: string): StatusLooks;
+export declare function withoutCode(looks: StatusLooks, code: string): StatusLooks;
+/** The inputs some look gives a value to, in the order first met. */
+export declare function inputsGivenIn(looks: StatusLooks): string[];
+export interface BoardTemplates {
+    statusTemplate?: unknown;
+    statusTemplates?: Record<string, unknown>;
+}
+export type TemplatePlace = {
+    at: 'placement';
+} | {
+    at: 'named';
+    name: string;
+    chosenBy: 'placement' | 'board';
+} | {
+    at: 'board';
+} | {
+    at: 'none';
+};
+/**
+ * The template a placement's 「상태 표현」 edits: the one its own `statusTemplate` names or holds, else the board's
+ * default. A name with no template behind it is still that name: writing to it makes the template.
+ */
+export declare function templatePlaceOf(placement: unknown, board: BoardTemplates): TemplatePlace;
+/** The looks of the template at a place; none yet is no looks. */
+export declare function looksAt(place: TemplatePlace, placement: unknown, board: BoardTemplates): StatusLooks;
+/**
+ * What to write so the template at a place holds these looks: the placement's own value, or the board's. A board with
+ * no template yet gets its default, held whole. The rest of a template (anything beside `states`) is kept.
+ */
+export declare function writeLooksAt(place: TemplatePlace, looks: StatusLooks, placement: unknown, board: BoardTemplates): {
+    placement?: Record<string, unknown>;
+    board?: BoardTemplates;
+};
+/** The board's templates with a new, empty one by this name; undefined when the name is empty or taken. */
+export declare function withNewTemplate(board: BoardTemplates, name: string): BoardTemplates | undefined;
+/**
+ * The parts of a code's look a port did not take, by the row of the table that gave it: the look the template looked
+ * up (`lookedUp`, the code's own or `default`). Issues of another source than the table shown are not the table's.
+ */
+export declare function issuesByRow(issues: readonly StatusIssue[], source: StatusIssue['source'] | undefined, rowOf: (code: string) => string | undefined): Map<string, StatusIssue[]>;