@formicoidea/labre-core 0.46.2 → 0.47.1

package/dist/_pkgs/affine-fragment-doc-title/title-band/title-band.js

@@ -0,0 +1,649 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { menu, popMenu, popupTargetFromElement, } from '../../affine-components/context-menu/index.js';
+import { DatePicker } from '../../affine-components/date-picker/index.js';
+import { RefNodeSlotsProvider } from '../../affine-inline-reference/index.js';
+import { DOC_UNTITLED, formatLocale, PropertiesPanelProvider, TitleBandProvider, translateKey, } from '../../affine-shared/services/index.js';
+import { stopPropagation } from '../../affine-shared/utils/index.js';
+import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
+import { ShadowlessElement } from '../../std/index.js';
+import { CheckBoxCheckSolidIcon, CheckBoxUnIcon, LinkedPageIcon, PlusIcon, SidebarIcon, ToggleDownIcon, ToggleRightIcon, } from '@blocksuite/icons/lit';
+import { computed, signal } from '@preact/signals-core';
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { TITLE_BAND_ADD, TITLE_BAND_CLEAR, TITLE_BAND_COLLAPSE, TITLE_BAND_EMPTY, TITLE_BAND_EXPAND, TITLE_BAND_LABEL, TITLE_BAND_LOADING, TITLE_BAND_NOT_SHOWN, TITLE_BAND_OPEN_PANEL, } from '../translations.js';
+import { chipEditorKind, chipOptions, chipValueView, parseChipNumber, } from './format.js';
+export const LABRE_TITLE_BAND = 'labre-title-band';
+const NO_PAGES = [];
+/**
+ * The band of property chips under the page title and at the head of the
+ * page's note on the canvas (ADR 0035 §11, REQ-PR-1 and PR-7).
+ *
+ * One component for both views: `<doc-title>` mounts it under the title
+ * (`surface="page"`), `edgeless-page-block-title` at the head of the page's
+ * note (`surface="canvas"`). On the canvas it sits inside the note's own DOM,
+ * so it follows the zoom like the rest of the note (REQ-PR-7), and it is
+ * interactive when the note is, i.e. once the note is being edited.
+ *
+ * Fed by `TitleBandProvider` alone (§9d): no provider, nothing at all. The
+ * chips are the sheet's visible properties in the host's order, an empty one
+ * included (REQ-PR-1); a click opens the editor of the property's data-view
+ * type and hands the value back through `set`, showing the chip as pending
+ * until the host settles it. The band never writes to the document and never
+ * applies a value. The "+" is drawn when the host passes `add`; the panel
+ * button when a `PropertiesPanelProvider` is registered; the "Not shown in
+ * this document" row only on the canvas (the page view's row is the host's).
+ */
+let TitleBand = (() => {
+    let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    let _docId_decorators;
+    let _docId_initializers = [];
+    let _docId_extraInitializers = [];
+    let _surface_decorators;
+    let _surface_initializers = [];
+    let _surface_extraInitializers = [];
+    return class TitleBand extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [property({ attribute: false })];
+            _docId_decorators = [property({ attribute: false })];
+            _surface_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
+            __esDecorate(this, null, _docId_decorators, { kind: "accessor", name: "docId", static: false, private: false, access: { has: obj => "docId" in obj, get: obj => obj.docId, set: (obj, value) => { obj.docId = value; } }, metadata: _metadata }, _docId_initializers, _docId_extraInitializers);
+            __esDecorate(this, null, _surface_decorators, { kind: "accessor", name: "surface", static: false, private: false, access: { has: obj => "surface" in obj, get: obj => obj.surface, set: (obj, value) => { obj.surface = value; } }, metadata: _metadata }, _surface_initializers, _surface_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = css `
+    labre-title-band {
+      display: block;
+    }
+
+    .labre-title-band {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      font-family: var(--affine-font-family);
+      font-size: var(--affine-font-sm);
+      line-height: 20px;
+      color: var(--affine-text-primary-color);
+    }
+
+    .labre-title-band[data-surface='canvas'] {
+      padding-bottom: 12px;
+    }
+
+    .labre-title-band-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 4px;
+      min-height: 28px;
+    }
+
+    .labre-title-band button {
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      height: 28px;
+      max-width: 100%;
+      padding: 0 8px;
+      border-radius: 6px;
+      cursor: pointer;
+      color: inherit;
+      transition: background-color 150ms;
+    }
+
+    .labre-title-band button:hover {
+      background-color: var(--affine-hover-color);
+    }
+
+    .labre-title-band button:focus-visible {
+      outline: 2px solid var(--affine-primary-color);
+      outline-offset: 1px;
+    }
+
+    .labre-title-band button[disabled] {
+      cursor: progress;
+      opacity: 0.6;
+    }
+
+    .labre-title-band button.static {
+      cursor: default;
+    }
+
+    .labre-title-band button.static:hover {
+      background-color: transparent;
+    }
+
+    .labre-title-band svg {
+      flex: none;
+      width: 16px;
+      height: 16px;
+    }
+
+    .labre-title-band-icon-button {
+      color: var(--affine-icon-color) !important;
+      padding: 0 6px !important;
+    }
+
+    .labre-title-band-chip-name {
+      color: var(--affine-text-secondary-color);
+      white-space: nowrap;
+    }
+
+    .labre-title-band-chip-value {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 240px;
+    }
+
+    .labre-title-band-chip[data-empty='true'] .labre-title-band-chip-value {
+      color: var(--affine-placeholder-color);
+    }
+
+    .labre-title-band-tag {
+      display: inline-block;
+      padding: 0 6px;
+      border-radius: 4px;
+      max-width: 160px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background-color: var(--affine-tag-white);
+    }
+
+    .labre-title-band-skeleton {
+      display: inline-block;
+      width: 96px;
+      height: 20px;
+      border-radius: 6px;
+      background-color: var(--affine-hover-color);
+    }
+
+    .labre-title-band-not-shown-label {
+      color: var(--affine-text-secondary-color);
+      padding-right: 4px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .labre-title-band button {
+        transition: none;
+      }
+    }
+
+    /* A 44px target under a coarse pointer, without changing the drawing. */
+    @media (pointer: coarse) {
+      .labre-title-band button {
+        position: relative;
+      }
+      .labre-title-band button::after {
+        content: '';
+        position: absolute;
+        inset: -8px 0;
+      }
+    }
+  `; }
+        _pop(target, title, items) {
+            this._menu?.close();
+            const handler = popMenu(popupTargetFromElement(target), {
+                options: {
+                    title: { text: title },
+                    items,
+                    onClose: () => {
+                        if (this._menu === handler)
+                            this._menu = null;
+                    },
+                },
+            });
+            this._menu = handler;
+            return handler;
+        }
+        /** Read inside `render` it subscribes, through `SignalWatcher`. */
+        get _readonly() {
+            return this.std?.store.readonly$.value ?? true;
+        }
+        get _locale() {
+            return this.std ? formatLocale(this.std) : 'en-US';
+        }
+        _t(wording, count) {
+            if (!this.std)
+                return wording[1];
+            return translateKey(this.std, wording[0], wording[1], count === undefined ? undefined : { count });
+        }
+        _getSources(service) {
+            const cached = this._sources;
+            if (cached && cached.service === service && cached.docId === this.docId) {
+                return cached;
+            }
+            const docId = this.docId;
+            const sources = {
+                service,
+                docId,
+                sheet$: service.sheet$(docId),
+                collapsed$: service.collapsed$?.(docId) ?? null,
+                notShown$: this.surface === 'canvas' ? (service.notShown$?.(docId) ?? null) : null,
+            };
+            this._sources = sources;
+            return sources;
+        }
+        _isCollapsed(sources) {
+            return sources.collapsed$?.value ?? this._localCollapsed$.value;
+        }
+        _setCollapsed(sources, collapsed) {
+            this._localCollapsed$.value = collapsed;
+            sources.service.setCollapsed?.(sources.docId, collapsed);
+        }
+        _write(property, value) {
+            const sources = this._sources;
+            if (!sources || property.readonly || this.std?.store.readonly !== false)
+                return;
+            if (this._pending$.peek().has(property.id))
+                return;
+            const { id } = property;
+            const settle = () => {
+                const next = new Set(this._pending$.peek());
+                next.delete(id);
+                this._pending$.value = next;
+            };
+            this._pending$.value = new Set([...this._pending$.peek(), id]);
+            let written;
+            try {
+                written = sources.service.set(sources.docId, id, value);
+            }
+            catch (error) {
+                settle();
+                console.error('[title-band] set threw', error);
+                return;
+            }
+            // The host reports and rolls back a refused write; the band only stops
+            // showing it as pending.
+            Promise.resolve(written).then(settle, (error) => {
+                settle();
+                console.error('[title-band] set was refused', error);
+            });
+        }
+        _tagLabel(tag) {
+            return html `<span
+      class="labre-title-band-tag"
+      style=${styleMap(tag.color ? { backgroundColor: tag.color } : {})}
+      >${tag.label}</span
+    >`;
+        }
+        _clearItem(prop) {
+            return menu.action({
+                name: this._t(TITLE_BAND_CLEAR),
+                select: () => this._write(prop, null),
+            });
+        }
+        _popSelect(target, prop) {
+            const items = chipOptions(prop).map(tag => menu.action({
+                name: tag.label,
+                label: () => this._tagLabel(tag),
+                isSelected: tag.id === prop.value,
+                select: () => {
+                    if (tag.id !== prop.value)
+                        this._write(prop, tag.id);
+                },
+            }));
+            if (prop.value != null)
+                items.push(this._clearItem(prop));
+            this._pop(target, prop.name, items);
+        }
+        _popMultiSelect(target, prop) {
+            // A draft, because the host's answer arrives later through `sheet$`: two
+            // ticks in one open menu must not both start from the stale value.
+            const draft$ = signal(Array.isArray(prop.value)
+                ? prop.value.filter((id) => typeof id === 'string')
+                : []);
+            const items = chipOptions(prop).map(tag => menu.checkbox({
+                name: tag.label,
+                label: () => this._tagLabel(tag),
+                checked: computed(() => draft$.value.includes(tag.id)),
+                select: checked => {
+                    const next = checked
+                        ? draft$.peek().filter(id => id !== tag.id)
+                        : [...draft$.peek(), tag.id];
+                    draft$.value = next;
+                    this._write(prop, next);
+                    return !checked;
+                },
+            }));
+            this._pop(target, prop.name, items);
+        }
+        _popDate(target, prop) {
+            let close = () => { };
+            const picker = new DatePicker();
+            picker.padding = 0;
+            picker.value = typeof prop.value === 'number' ? prop.value : Date.now();
+            picker.onChange = (date) => {
+                if (date.getTime() !== prop.value)
+                    this._write(prop, date.getTime());
+                close();
+            };
+            picker.onClear = () => {
+                this._write(prop, null);
+                close();
+            };
+            picker.onEscape = () => close();
+            const items = [() => html `${picker}`];
+            const handler = this._pop(target, prop.name, items);
+            close = () => handler.close();
+        }
+        _popInput(target, prop, kind) {
+            const initial = typeof prop.value === 'string' || typeof prop.value === 'number'
+                ? String(prop.value)
+                : '';
+            this._pop(target, prop.name, [
+                menu.input({
+                    initialValue: initial,
+                    onComplete: text => {
+                        if (text === initial)
+                            return;
+                        if (kind === 'number') {
+                            const parsed = parseChipNumber(text);
+                            this._write(prop, Number.isNaN(parsed) ? null : parsed);
+                            return;
+                        }
+                        this._write(prop, text.trim() === '' ? null : text);
+                    },
+                }),
+            ]);
+        }
+        _renderValue(prop) {
+            const view = chipValueView(prop, this._locale);
+            switch (view.kind) {
+                case 'checkbox':
+                    return view.checked ? CheckBoxCheckSolidIcon() : CheckBoxUnIcon();
+                case 'tags':
+                    return repeat(view.tags, tag => tag.id, tag => this._tagLabel(tag));
+                case 'text':
+                    return view.text;
+                default:
+                    return this._t(TITLE_BAND_EMPTY);
+            }
+        }
+        _renderChip(prop, hasPanel) {
+            const pending = this._pending$.value.has(prop.id);
+            const editable = !this._readonly && chipEditorKind(prop) !== 'none';
+            const clickable = editable || hasPanel;
+            const view = chipValueView(prop, this._locale);
+            return html `<button
+      class="labre-title-band-chip ${clickable ? '' : 'static'}"
+      data-testid="title-band-chip"
+      data-property-id=${prop.id}
+      data-empty=${view.kind === 'empty' ? 'true' : 'false'}
+      aria-busy=${pending ? 'true' : 'false'}
+      ?disabled=${pending || !clickable}
+      @click=${(event) => this._onChip(event, prop)}
+    >
+      <span class="labre-title-band-chip-name">${prop.name}</span>
+      <span class="labre-title-band-chip-value"
+        >${this._renderValue(prop)}</span
+      >
+    </button>`;
+        }
+        _renderTools(sources, hasPanel) {
+            const canAdd = !!sources.service.add && !this._readonly;
+            return html `${canAdd
+                ? html `<button
+          class="labre-title-band-icon-button"
+          data-testid="title-band-add"
+          aria-label=${this._t(TITLE_BAND_ADD)}
+          title=${this._t(TITLE_BAND_ADD)}
+          @click=${(event) => {
+                    event.stopPropagation();
+                    sources.service.add?.(sources.docId);
+                }}
+        >
+          ${PlusIcon()}
+        </button>`
+                : nothing}
+    ${hasPanel
+                ? html `<button
+          class="labre-title-band-icon-button"
+          data-testid="title-band-open-panel"
+          aria-label=${this._t(TITLE_BAND_OPEN_PANEL)}
+          title=${this._t(TITLE_BAND_OPEN_PANEL)}
+          @click=${(event) => {
+                    event.stopPropagation();
+                    this._openPanel();
+                }}
+        >
+          ${SidebarIcon()}
+        </button>`
+                : nothing}`;
+        }
+        _renderSheet(sources) {
+            const state = sources.sheet$.value;
+            if (state.status === 'loading') {
+                return html `<div
+        class="labre-title-band-row"
+        role="status"
+        aria-busy="true"
+        aria-label=${this._t(TITLE_BAND_LOADING)}
+        data-testid="title-band-loading"
+      >
+        <span class="labre-title-band-skeleton"></span>
+        <span class="labre-title-band-skeleton"></span>
+      </div>`;
+            }
+            if (state.status !== 'ready')
+                return nothing;
+            const hasPanel = !!this.std?.getOptional(PropertiesPanelProvider);
+            const { properties } = state;
+            const canAdd = !!sources.service.add && !this._readonly;
+            if (properties.length === 0 && !canAdd && !hasPanel)
+                return nothing;
+            if (properties.length > 0 && this._isCollapsed(sources)) {
+                return html `<div
+        class="labre-title-band-row"
+        role="group"
+        aria-label=${this._t(TITLE_BAND_LABEL)}
+      >
+        <button
+          data-testid="title-band-expand"
+          aria-expanded="false"
+          @click=${(event) => {
+                    event.stopPropagation();
+                    this._setCollapsed(sources, false);
+                }}
+        >
+          ${ToggleRightIcon()}
+          <span class="labre-title-band-chip-name"
+            >${this._t(TITLE_BAND_EXPAND, properties.length)}</span
+          >
+        </button>
+        ${this._renderTools(sources, hasPanel)}
+      </div>`;
+            }
+            return html `<div
+      class="labre-title-band-row"
+      role="group"
+      aria-label=${this._t(TITLE_BAND_LABEL)}
+    >
+      ${properties.length > 0
+                ? html `<button
+            class="labre-title-band-icon-button"
+            data-testid="title-band-collapse"
+            aria-expanded="true"
+            aria-label=${this._t(TITLE_BAND_COLLAPSE)}
+            title=${this._t(TITLE_BAND_COLLAPSE)}
+            @click=${(event) => {
+                    event.stopPropagation();
+                    this._setCollapsed(sources, true);
+                }}
+          >
+            ${ToggleDownIcon()}
+          </button>`
+                : nothing}
+      ${repeat(properties, prop => prop.id, prop => this._renderChip(prop, hasPanel))}
+      ${this._renderTools(sources, hasPanel)}
+    </div>`;
+        }
+        _renderNotShown(sources) {
+            const pages = sources.notShown$?.value ?? NO_PAGES;
+            const std = this.std;
+            const slots = std?.getOptional(RefNodeSlotsProvider);
+            // A link that opens nothing is a lie: no linked-document path, no row.
+            if (!std || !slots || pages.length === 0)
+                return nothing;
+            return html `<div
+      class="labre-title-band-row"
+      data-testid="title-band-not-shown"
+    >
+      <span class="labre-title-band-not-shown-label"
+        >${this._t(TITLE_BAND_NOT_SHOWN)}</span
+      >
+      ${repeat(pages, page => page.docId, page => html `<button
+            data-testid="title-band-not-shown-page"
+            data-doc-id=${page.docId}
+            @click=${(event) => {
+                event.stopPropagation();
+                slots.docLinkClicked.next({
+                    pageId: page.docId,
+                    host: std.host,
+                    event,
+                });
+            }}
+          >
+            ${LinkedPageIcon()}
+            <span class="labre-title-band-chip-value"
+              >${page.title.trim() === ''
+                ? this._t(DOC_UNTITLED)
+                : page.title}</span
+            >
+          </button>`)}
+    </div>`;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // The band lives inside the title and inside the note: a key or a press
+            // on one of its buttons is the band's, not the title editor's (Enter would
+            // split the title) nor the canvas's (a press would start a drag).
+            this._disposables.addFromEvent(this, 'keydown', stopPropagation);
+            this._disposables.addFromEvent(this, 'pointerdown', stopPropagation);
+            this._disposables.add(() => this._menu?.close());
+        }
+        render() {
+            const std = this.std;
+            if (!std || !this.docId)
+                return nothing;
+            const service = std.getOptional(TitleBandProvider);
+            if (!service)
+                return nothing;
+            const sources = this._getSources(service);
+            const sheet = this._renderSheet(sources);
+            const notShown = this.surface === 'canvas' ? this._renderNotShown(sources) : nothing;
+            if (sheet === nothing && notShown === nothing)
+                return nothing;
+            return html `<div
+      class="labre-title-band"
+      data-testid="title-band"
+      data-surface=${this.surface}
+    >
+      ${sheet} ${notShown}
+    </div>`;
+        }
+        #std_accessor_storage;
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        #docId_accessor_storage;
+        get docId() { return this.#docId_accessor_storage; }
+        set docId(value) { this.#docId_accessor_storage = value; }
+        #surface_accessor_storage;
+        /** Where the band is drawn; only the canvas draws the "Not shown" row. */
+        get surface() { return this.#surface_accessor_storage; }
+        set surface(value) { this.#surface_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            this._sources = null;
+            /** The editor menu open now, put away with the band. */
+            this._menu = null;
+            /** Collapse state when the host does not remember one. */
+            this._localCollapsed$ = signal(false);
+            /** Property ids whose `set` has not settled yet. */
+            this._pending$ = signal(new Set());
+            this._onChip = (event, prop) => {
+                event.stopPropagation();
+                const target = event.currentTarget;
+                switch (chipEditorKind(prop)) {
+                    case 'toggle':
+                        this._write(prop, prop.value !== true);
+                        return;
+                    case 'select':
+                        this._popSelect(target, prop);
+                        return;
+                    case 'multi-select':
+                        this._popMultiSelect(target, prop);
+                        return;
+                    case 'date':
+                        this._popDate(target, prop);
+                        return;
+                    case 'number':
+                        this._popInput(target, prop, 'number');
+                        return;
+                    case 'text':
+                        this._popInput(target, prop, 'text');
+                        return;
+                    default:
+                        this._openPanel();
+                }
+            };
+            this._openPanel = () => {
+                if (!this.std)
+                    return;
+                this.std
+                    .getOptional(PropertiesPanelProvider)
+                    ?.open({ scope: 'page', docId: this.docId });
+            };
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, null);
+            this.#docId_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _docId_initializers, ''));
+            this.#surface_accessor_storage = (__runInitializers(this, _docId_extraInitializers), __runInitializers(this, _surface_initializers, 'page'));
+            __runInitializers(this, _surface_extraInitializers);
+        }
+    };
+})();
+export { TitleBand };

package/dist/_pkgs/affine-fragment-doc-title/translations.d.ts

@@ -9,5 +9,26 @@ import type { ChromeWording } from '../affine-shared/services/index.js';
  * `content: attr(...)` can read.
  */
 export declare const DOC_TITLE_PLACEHOLDER: ChromeWording;
+/** The band's accessible name: the group of property chips. */
+export declare const TITLE_BAND_LABEL: ChromeWording;
+/** What an empty chip says after the property's name (REQ-PR-1). */
+export declare const TITLE_BAND_EMPTY: ChromeWording;
+/** The "+" (REQ-PR-4); what it does is the host's. */
+export declare const TITLE_BAND_ADD: ChromeWording;
+/** The button beside the "+" that opens the host's properties panel. */
+export declare const TITLE_BAND_OPEN_PANEL: ChromeWording;
+/** Folds the chips away. */
+export declare const TITLE_BAND_COLLAPSE: ChromeWording;
+/** The folded band's only button; `count` is the number of chips. */
+export declare const TITLE_BAND_EXPAND: ChromeWording;
+/** The accessible name of the skeleton drawn while the sheet loads. */
+export declare const TITLE_BAND_LOADING: ChromeWording;
+/** Clears a select or a date from its editor. */
+export declare const TITLE_BAND_CLEAR: ChromeWording;
+/**
+ * The note header's row of child pages the document holds but does not
+ * display (ADR 0035 §9d, canvas view only).
+ */
+export declare const TITLE_BAND_NOT_SHOWN: ChromeWording;
 /** Every wording this package declares, in the order it renders them. */
 export declare const DOC_TITLE_WORDINGS: readonly ChromeWording[];