@formicoidea/labre-core 0.46.2 → 0.47.0

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

@@ -34,12 +34,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { CodeBlockModel, ListBlockModel, NoteBlockModel, NoteDisplayMode, ParagraphBlockModel, } from '../affine-model/index.js';
 import { focusTextModel } from '../affine-rich-text/index.js';
-import { translateKey } from '../affine-shared/services/index.js';
+import { TitleBandProvider, translateKey } from '../affine-shared/services/index.js';
 import { matchModels } from '../affine-shared/utils/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { ShadowlessElement } from '../std/index.js';
 import { effect } from '@preact/signals-core';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { DOC_TITLE_PLACEHOLDER } from './translations.js';
 const DOC_BLOCK_CHILD_PADDING = 24;
@@ -76,9 +76,18 @@ let DocTitle = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = css `
+    /*
+     * The page title's family is a host's to choose (labre ADR-0049 §5: the
+     * Labre app sets Cabinet Grotesk); headings H1 to H6 stay in the body
+     * family. Unset, the title keeps the body family, DESIGN.md's One Family
+     * Rule.
+     */
     .doc-title-container {
       box-sizing: border-box;
-      font-family: var(--affine-font-family);
+      font-family: var(
+        --labre-doc-title-font-family,
+        var(--affine-font-family)
+      );
       font-size: var(--affine-font-base);
       line-height: var(--affine-line-height);
       color: var(--affine-text-primary-color);
@@ -112,6 +121,27 @@ let DocTitle = (() => {
       }
     }
 
+    .doc-title-container.doc-title-container-with-band {
+      padding-bottom: 8px;
+    }
+
+    .doc-title-band {
+      box-sizing: border-box;
+      width: 100%;
+      max-width: var(--affine-editor-width);
+      margin-left: auto;
+      margin-right: auto;
+      padding: 0 var(--affine-editor-side-padding, ${DOC_BLOCK_CHILD_PADDING}px)
+        24px;
+    }
+
+    @container viewport (width <= 640px) {
+      .doc-title-band {
+        padding-left: ${DOC_BLOCK_CHILD_PADDING}px;
+        padding-right: ${DOC_BLOCK_CHILD_PADDING}px;
+      }
+    }
+
     .doc-title-container-empty::before {
       content: attr(data-placeholder);
       color: var(--affine-placeholder-color);
@@ -178,13 +208,35 @@ let DocTitle = (() => {
                 });
             }
         }
+        /**
+         * The `std` the title band reads its seams from, when the band belongs
+         * here: in the page view, never inside a note on the canvas, where
+         * `edgeless-page-block-title` draws the band itself (ADR 0035 §11), so a
+         * host that renders this title in the note header does not get two.
+         */
+        get _bandStd() {
+            if (this.closest('edgeless-page-block-title'))
+                return null;
+            const std = this._std;
+            return std?.getOptional(TitleBandProvider) ? std : null;
+        }
+        firstUpdated() {
+            // `<doc-title>` sits beside the editor host, not inside it: on the first
+            // frame the host may not carry its `std` yet, and without one the band
+            // cannot read its seam. One more render once it has mounted.
+            if (this._std)
+                return;
+            const frame = requestAnimationFrame(() => this.requestUpdate());
+            this._disposables.add(() => cancelAnimationFrame(frame));
+        }
         render() {
             const isEmpty = !this._rootModel?.props.title.length && !this._isComposing;
+            const bandStd = this._bandStd;
             return html `
       <div
         class="doc-title-container ${isEmpty
                 ? 'doc-title-container-empty'
-                : ''}"
+                : ''} ${bandStd ? 'doc-title-container-with-band' : ''}"
         data-block-is-title="true"
         data-placeholder=${this._placeholder}
       >
@@ -197,6 +249,15 @@ let DocTitle = (() => {
           .wrapText=${this.wrapText}
         ></rich-text>
       </div>
+      ${bandStd
+                ? html `<div class="doc-title-band">
+            <labre-title-band
+              .std=${bandStd}
+              .docId=${this.doc.id}
+              .surface=${'page'}
+            ></labre-title-band>
+          </div>`
+                : nothing}
     `;
         }
         #_isComposing_accessor_storage;

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

@@ -1,7 +1,9 @@
 import { DocTitle } from './doc-title.js';
+import { LABRE_TITLE_BAND, TitleBand } from './title-band/title-band.js';
 export declare function effects(): void;
 declare global {
     interface HTMLElementTagNameMap {
         'doc-title': DocTitle;
+        [LABRE_TITLE_BAND]: TitleBand;
     }
 }

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

@@ -1,4 +1,6 @@
 import { DocTitle } from './doc-title.js';
+import { LABRE_TITLE_BAND, TitleBand } from './title-band/title-band.js';
 export function effects() {
     customElements.define('doc-title', DocTitle);
+    customElements.define(LABRE_TITLE_BAND, TitleBand);
 }

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

@@ -1,2 +1,4 @@
 export { DocTitle } from './doc-title.js';
+export { chipEditorKind, type ChipEditorKind, type ChipTag, chipValueView, type ChipValueView, formatPropertyValue, isPropertyValueEmpty, } from './title-band/format.js';
+export { LABRE_TITLE_BAND, TitleBand } from './title-band/title-band.js';
 export { getDocTitleByEditorHost } from './utils.js';

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

@@ -1,2 +1,4 @@
 export { DocTitle } from './doc-title.js';
+export { chipEditorKind, chipValueView, formatPropertyValue, isPropertyValueEmpty, } from './title-band/format.js';
+export { LABRE_TITLE_BAND, TitleBand } from './title-band/title-band.js';
 export { getDocTitleByEditorHost } from './utils.js';

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

@@ -0,0 +1,69 @@
+import type { TitleBandProperty } from '../../affine-shared/services/index.js';
+/**
+ * How a chip of the title band draws a property's value, and which editor a
+ * click opens — pure, render-free, so a host's own properties panel can show
+ * the very text a chip shows (`formatPropertyValue`, re-exported by
+ * `@labre/affine/host-panels`).
+ *
+ * The value is the JSON a data-view cell of `type` holds (ADR 0035 §9d), and
+ * the shapes below are the data-view presets' own: an option id for `select`,
+ * option ids for `multi-select`, epoch milliseconds for `date`, and a number
+ * formatted with the number preset's options, so a chip and a database cell
+ * read the same.
+ *
+ * ponytail: the band draws its chips and editors itself, per type, rather
+ * than mounting the data-view cell renderers, which need a `Cell` bound to a
+ * view and a data source the band does not have. The ceiling is a type the
+ * band does not know: it is drawn as plain text and opens no editor. The
+ * upgrade path is a hosted data source for the page's sheet once
+ * `HostedDataSourceBase` exists (ADR 0035 §7, issue B1).
+ */
+/** A select option as a data-view `select` / `multi-select` holds it. */
+export interface ChipTag {
+    id: string;
+    label: string;
+    /** A CSS colour (a `var(--…)` from the tag palette). */
+    color?: string;
+}
+export type ChipValueView = {
+    kind: 'empty';
+} | {
+    kind: 'text';
+    text: string;
+} | {
+    kind: 'checkbox';
+    checked: boolean;
+} | {
+    kind: 'tags';
+    tags: ChipTag[];
+};
+/** The editor a click on a chip opens; `none` for a type the band cannot edit. */
+export type ChipEditorKind = 'toggle' | 'select' | 'multi-select' | 'date' | 'number' | 'text' | 'none';
+/**
+ * The number preset's formats (`data-view/…/number/utils/formatter.ts`),
+ * restated rather than imported: the preset formats with
+ * `navigator.language`, which ignores the host's locale and throws on a tag
+ * `Intl` refuses (`en-US@posix` in a headless Chromium), and a chip must
+ * neither. `title-band-number-parity.unit.spec.ts` (`affine/all`) holds the
+ * two tables together.
+ */
+export declare const CHIP_NUMBER_FORMATS: Readonly<Record<string, Intl.NumberFormatOptions>>;
+/** The options of a select-like property, whatever its `data` holds. */
+export declare function chipOptions(property: TitleBandProperty): ChipTag[];
+/** Nullish, a blank string or an empty list. `false` is a value, not empty. */
+export declare function isPropertyValueEmpty(property: TitleBandProperty): boolean;
+/** What a chip draws for this property's value. Never throws. */
+export declare function chipValueView(property: TitleBandProperty, locale: string): ChipValueView;
+/**
+ * The value as one line of text, as a chip reads it: option labels joined by
+ * a comma, an empty value as `''`. A checkbox has no text either: it is a
+ * mark, not a word, so a host draws its own from `property.value`.
+ */
+export declare function formatPropertyValue(property: TitleBandProperty, locale?: string): string;
+/**
+ * A number typed in a chip's editor: blanks dropped, a decimal comma read as
+ * a point. `NaN` for anything else, which the band writes as `null`.
+ */
+export declare function parseChipNumber(text: string): number;
+/** The editor a click on this property's chip opens. */
+export declare function chipEditorKind(property: TitleBandProperty): ChipEditorKind;

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

@@ -0,0 +1,182 @@
+const TEXT_TYPES = new Set([
+    'text',
+    'rich-text',
+    'title',
+    'url',
+    'link',
+    'email',
+    'phone',
+]);
+const DATE_TYPES = new Set(['date', 'created-time', 'modified-time']);
+const currency = (code) => ({
+    style: 'currency',
+    currency: code,
+    currencyDisplay: 'symbol',
+});
+/**
+ * The number preset's formats (`data-view/…/number/utils/formatter.ts`),
+ * restated rather than imported: the preset formats with
+ * `navigator.language`, which ignores the host's locale and throws on a tag
+ * `Intl` refuses (`en-US@posix` in a headless Chromium), and a chip must
+ * neither. `title-band-number-parity.unit.spec.ts` (`affine/all`) holds the
+ * two tables together.
+ */
+export const CHIP_NUMBER_FORMATS = {
+    number: { style: 'decimal', useGrouping: false },
+    numberWithCommas: { style: 'decimal', useGrouping: true },
+    percent: { style: 'percent', useGrouping: false },
+    currencyINR: currency('INR'),
+    currencyYen: currency('JPY'),
+    currencyCNY: currency('CNY'),
+    currencyUSD: currency('USD'),
+    currencyEUR: currency('EUR'),
+    currencyGBP: currency('GBP'),
+};
+/** `Intl.NumberFormat`, or the bare number when `Intl` refuses the locale. */
+function numberText(value, locale, options = {}) {
+    try {
+        return new Intl.NumberFormat(locale, options).format(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+/** The options of a select-like property, whatever its `data` holds. */
+export function chipOptions(property) {
+    const options = property.data.options;
+    if (!Array.isArray(options))
+        return [];
+    const tags = [];
+    for (const option of options) {
+        if (option == null || typeof option !== 'object')
+            continue;
+        const { id, value, color } = option;
+        if (typeof id !== 'string')
+            continue;
+        tags.push({
+            id,
+            label: typeof value === 'string' ? value : '',
+            color: typeof color === 'string' ? color : undefined,
+        });
+    }
+    return tags;
+}
+/** Nullish, a blank string or an empty list. `false` is a value, not empty. */
+export function isPropertyValueEmpty(property) {
+    const { value } = property;
+    if (value == null)
+        return true;
+    if (typeof value === 'string')
+        return value.trim() === '';
+    if (Array.isArray(value))
+        return value.length === 0;
+    if (typeof value === 'number')
+        return Number.isNaN(value);
+    return false;
+}
+function formatDate(value, locale) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return '';
+    try {
+        return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(date);
+    }
+    catch {
+        return date.toISOString().slice(0, 10);
+    }
+}
+function formatNumberValue(property, value, locale) {
+    const { format, decimal } = property.data;
+    const options = {
+        ...(typeof format === 'string' && Object.hasOwn(CHIP_NUMBER_FORMATS, format)
+            ? CHIP_NUMBER_FORMATS[format]
+            : CHIP_NUMBER_FORMATS.number),
+    };
+    if (typeof decimal === 'number') {
+        options.minimumFractionDigits = decimal;
+        options.maximumFractionDigits = decimal;
+    }
+    return numberText(value, locale, options);
+}
+/** What a chip draws for this property's value. Never throws. */
+export function chipValueView(property, locale) {
+    const { type, value } = property;
+    if (type === 'checkbox')
+        return { kind: 'checkbox', checked: value === true };
+    if (isPropertyValueEmpty(property))
+        return { kind: 'empty' };
+    if (type === 'select' || type === 'multi-select') {
+        const ids = Array.isArray(value) ? value : [value];
+        const options = chipOptions(property);
+        const tags = ids.flatMap(id => options.filter(option => option.id === id));
+        return tags.length > 0 ? { kind: 'tags', tags } : { kind: 'empty' };
+    }
+    if (DATE_TYPES.has(type) && typeof value === 'number') {
+        const text = formatDate(value, locale);
+        return text ? { kind: 'text', text } : { kind: 'empty' };
+    }
+    if (type === 'number' && typeof value === 'number') {
+        return { kind: 'text', text: formatNumberValue(property, value, locale) };
+    }
+    if (type === 'progress' && typeof value === 'number') {
+        return {
+            kind: 'text',
+            text: numberText(value / 100, locale, { style: 'percent' }),
+        };
+    }
+    if (typeof value === 'string')
+        return { kind: 'text', text: value };
+    if (typeof value === 'number') {
+        return { kind: 'text', text: numberText(value, locale) };
+    }
+    if (Array.isArray(value)) {
+        const text = value.filter(item => typeof item === 'string').join(', ');
+        return text ? { kind: 'text', text } : { kind: 'empty' };
+    }
+    return { kind: 'empty' };
+}
+/**
+ * The value as one line of text, as a chip reads it: option labels joined by
+ * a comma, an empty value as `''`. A checkbox has no text either: it is a
+ * mark, not a word, so a host draws its own from `property.value`.
+ */
+export function formatPropertyValue(property, locale = 'en-US') {
+    const view = chipValueView(property, locale);
+    switch (view.kind) {
+        case 'text':
+            return view.text;
+        case 'tags':
+            return view.tags.map(tag => tag.label).join(', ');
+        default:
+            return '';
+    }
+}
+/**
+ * A number typed in a chip's editor: blanks dropped, a decimal comma read as
+ * a point. `NaN` for anything else, which the band writes as `null`.
+ */
+export function parseChipNumber(text) {
+    const compact = text.replace(/\s/g, '');
+    if (compact === '')
+        return NaN;
+    return Number(compact.replace(',', '.'));
+}
+/** The editor a click on this property's chip opens. */
+export function chipEditorKind(property) {
+    if (property.readonly)
+        return 'none';
+    const { type } = property;
+    if (type === 'checkbox')
+        return 'toggle';
+    if (type === 'select')
+        return 'select';
+    if (type === 'multi-select')
+        return 'multi-select';
+    if (type === 'date')
+        return 'date';
+    if (type === 'number' || type === 'progress')
+        return 'number';
+    if (TEXT_TYPES.has(type))
+        return 'text';
+    return 'none';
+}

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

@@ -0,0 +1,62 @@
+import { type BlockStdScope, ShadowlessElement } from '../../std/index.js';
+import { nothing, type TemplateResult } from 'lit';
+export declare const LABRE_TITLE_BAND = "labre-title-band";
+declare const TitleBand_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
+/**
+ * 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).
+ */
+export declare class TitleBand extends TitleBand_base {
+    static styles: import("lit").CSSResult;
+    private _sources;
+    /** The editor menu open now, put away with the band. */
+    private _menu;
+    private _pop;
+    /** Collapse state when the host does not remember one. */
+    private readonly _localCollapsed$;
+    /** Property ids whose `set` has not settled yet. */
+    private readonly _pending$;
+    /** Read inside `render` it subscribes, through `SignalWatcher`. */
+    private get _readonly();
+    private get _locale();
+    private _t;
+    private _getSources;
+    private _isCollapsed;
+    private _setCollapsed;
+    private _write;
+    private readonly _onChip;
+    private _tagLabel;
+    private _clearItem;
+    private _popSelect;
+    private _popMultiSelect;
+    private _popDate;
+    private _popInput;
+    private readonly _openPanel;
+    private _renderValue;
+    private _renderChip;
+    private _renderTools;
+    private _renderSheet;
+    private _renderNotShown;
+    connectedCallback(): void;
+    render(): TemplateResult<1> | typeof nothing;
+    accessor std: BlockStdScope | null;
+    accessor docId: string;
+    /** Where the band is drawn; only the canvas draws the "Not shown" row. */
+    accessor surface: 'page' | 'canvas';
+}
+export {};