@formicoidea/labre-core 0.32.0 → 0.33.0

package/dist/_pkgs/affine-widget-edgeless-toolbar/catalogue/chord-format.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A keystroke sequence (`ShortcutDescriptor.defaultKeys`) spelled the way the
+ * platform spells it: `⌘⇧Z` on a Mac, `Ctrl+Shift+Z` elsewhere, and a chord as
+ * its keystrokes separated by a space (`['w', 'c']` → `W C`).
+ *
+ * Symbols and `+` rather than words, because this line is NOT translated — the
+ * catalogue's rows carry it beside a label the host did translate, and a
+ * hard-coded "then" would be the one English word left in a French panel.
+ *
+ * `isMac` is a parameter rather than a read of `IS_MAC` so the spelling is
+ * testable on either platform from either platform.
+ */
+export declare function formatChord(keys: readonly string[], isMac: boolean): string;

package/dist/_pkgs/affine-widget-edgeless-toolbar/catalogue/chord-format.js

@@ -0,0 +1,50 @@
+/** Modifier tokens as a Mac spells them. */
+const MAC_SYMBOLS = {
+    mod: '⌘',
+    meta: '⌘',
+    cmd: '⌘',
+    ctrl: '⌃',
+    control: '⌃',
+    alt: '⌥',
+    shift: '⇧',
+};
+/** …and as everything else spells them. */
+const OTHER_NAMES = {
+    mod: 'Ctrl',
+    meta: 'Win',
+    cmd: 'Win',
+    ctrl: 'Ctrl',
+    control: 'Ctrl',
+    alt: 'Alt',
+    shift: 'Shift',
+};
+/**
+ * A keystroke sequence (`ShortcutDescriptor.defaultKeys`) spelled the way the
+ * platform spells it: `⌘⇧Z` on a Mac, `Ctrl+Shift+Z` elsewhere, and a chord as
+ * its keystrokes separated by a space (`['w', 'c']` → `W C`).
+ *
+ * Symbols and `+` rather than words, because this line is NOT translated — the
+ * catalogue's rows carry it beside a label the host did translate, and a
+ * hard-coded "then" would be the one English word left in a French panel.
+ *
+ * `isMac` is a parameter rather than a read of `IS_MAC` so the spelling is
+ * testable on either platform from either platform.
+ */
+export function formatChord(keys, isMac) {
+    const table = isMac ? MAC_SYMBOLS : OTHER_NAMES;
+    const part = (token) => {
+        const symbol = table[token.toLowerCase()];
+        if (symbol)
+            return symbol;
+        // A bare key: `'w'` reads as `W`; `'ArrowUp'` and `'Space'` as they are.
+        return token.length === 1 ? token.toUpperCase() : token;
+    };
+    return keys
+        .map(keystroke => 
+    // `-(?!$)` so a literal `-` key survives being the separator too.
+    keystroke
+        .split(/-(?!$)/)
+        .map(part)
+        .join(isMac ? '' : '+'))
+        .join(' ');
+}

package/dist/_pkgs/affine-widget-edgeless-toolbar/edgeless-toolbar.d.ts

@@ -27,6 +27,12 @@ export declare class EdgelessToolbarWidget extends WidgetComponent<RootBlockMode
     private get _hiddenQuickTools();
     private get _quickTools();
     private get _quickToolsWidthTotal();
+    /**
+     * The wording shown for a senior tool. A framework declares an i18n key and
+     * the host catalogue answers it; `name` is the English fallback, and the only
+     * thing the core tools have.
+     */
+    private _seniorToolLabel;
     private get _seniorNextTooltip();
     private get _seniorPrevTooltip();
     private get _seniorScrollNextDisabled();

package/dist/_pkgs/affine-widget-edgeless-toolbar/edgeless-toolbar.js

@@ -37,7 +37,7 @@ import { DefaultTool, EdgelessLegacySlotIdentifier, } from '../affine-block-surf
 import { popMenu, popupTargetFromElement, } from '../affine-components/context-menu/index.js';
 import { darkToolbarStyles, lightToolbarStyles, } from '../affine-components/toolbar/index.js';
 import { ColorScheme } from '../affine-model/index.js';
-import { EditPropsStore, ThemeProvider, } from '../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider, translateKey, } from '../affine-shared/services/index.js';
 import { stopPropagation } from '../affine-shared/utils/index.js';
 import { ArrowLeftSmallIcon, ArrowRightSmallIcon, MoreHorizontalIcon, } from '@blocksuite/icons/lit';
 import { WidgetComponent, WidgetViewExtension } from '../std/index.js';
@@ -318,17 +318,27 @@ let EdgelessToolbarWidget = (() => {
             return (this._quickTools.length * (QUICK_TOOL_SIZE + QUICK_TOOLS_GAP) -
                 QUICK_TOOLS_GAP);
         }
+        /**
+         * The wording shown for a senior tool. A framework declares an i18n key and
+         * the host catalogue answers it; `name` is the English fallback, and the only
+         * thing the core tools have.
+         */
+        _seniorToolLabel(tool) {
+            if (!tool)
+                return '';
+            return tool.labelKey
+                ? translateKey(this.std, tool.labelKey, tool.name)
+                : tool.name;
+        }
         get _seniorNextTooltip() {
             if (this._seniorScrollNextDisabled)
                 return '';
-            const nextTool = this._seniorTools[this.scrollSeniorToolIndex + this.scrollSeniorToolSize];
-            return nextTool?.name ?? '';
+            return this._seniorToolLabel(this._seniorTools[this.scrollSeniorToolIndex + this.scrollSeniorToolSize]);
         }
         get _seniorPrevTooltip() {
             if (this._seniorScrollPrevDisabled)
                 return '';
-            const prevTool = this._seniorTools[this.scrollSeniorToolIndex - 1];
-            return prevTool?.name ?? '';
+            return this._seniorToolLabel(this._seniorTools[this.scrollSeniorToolIndex - 1]);
         }
         get _seniorScrollNextDisabled() {
             return (this.scrollSeniorToolIndex + this.scrollSeniorToolSize >=

package/dist/_pkgs/affine-widget-edgeless-toolbar/effects.d.ts

@@ -1,5 +1,6 @@
 import { EdgelessToolIconButton } from './button/tool-icon-button.js';
 import { EdgelessToolbarButton } from './button/toolbar-button.js';
+import { EdgelessArtefactCatalogueWidget } from './catalogue/artefact-catalogue-widget.js';
 import { EdgelessToolbarWidget } from './edgeless-toolbar.js';
 import { EdgelessSlideMenu } from './menu/slide-menu.js';
 import { ToolbarArrowUpIcon } from './menu/toolbar-arrow-up-icon.js';
@@ -8,6 +9,7 @@ import { EdgelessFontWeightAndStylePanel } from './panel/font-weight-and-style-p
 export declare function effects(): void;
 declare global {
     interface HTMLElementTagNameMap {
+        'edgeless-artefact-catalogue-widget': EdgelessArtefactCatalogueWidget;
         'edgeless-tool-icon-button': EdgelessToolIconButton;
         'edgeless-toolbar-button': EdgelessToolbarButton;
         'edgeless-toolbar-widget': EdgelessToolbarWidget;

package/dist/_pkgs/affine-widget-edgeless-toolbar/effects.js

@@ -1,5 +1,6 @@
 import { EdgelessToolIconButton } from './button/tool-icon-button.js';
 import { EdgelessToolbarButton } from './button/toolbar-button.js';
+import { EDGELESS_ARTEFACT_CATALOGUE_WIDGET, EdgelessArtefactCatalogueWidget, } from './catalogue/artefact-catalogue-widget.js';
 import { EDGELESS_TOOLBAR_WIDGET, EdgelessToolbarWidget, } from './edgeless-toolbar.js';
 import { EdgelessSlideMenu } from './menu/slide-menu.js';
 import { ToolbarArrowUpIcon } from './menu/toolbar-arrow-up-icon.js';
@@ -7,6 +8,7 @@ import { EdgelessFontFamilyPanel } from './panel/font-family-panel.js';
 import { EdgelessFontWeightAndStylePanel } from './panel/font-weight-and-style-panel.js';
 export function effects() {
     customElements.define(EDGELESS_TOOLBAR_WIDGET, EdgelessToolbarWidget);
+    customElements.define(EDGELESS_ARTEFACT_CATALOGUE_WIDGET, EdgelessArtefactCatalogueWidget);
     customElements.define('edgeless-toolbar-button', EdgelessToolbarButton);
     customElements.define('edgeless-tool-icon-button', EdgelessToolIconButton);
     customElements.define('edgeless-font-weight-and-style-panel', EdgelessFontWeightAndStylePanel);

package/dist/_pkgs/affine-widget-edgeless-toolbar/extension/index.d.ts

@@ -18,6 +18,13 @@ export interface SeniorTool {
      * Used to show in nav-button's tooltip
      */
     name: string;
+    /**
+     * i18n key resolved through the house `TranslationProvider` seam, so a
+     * framework's button reads in the user's language. `name` remains the
+     * fallback and stays required: the core tools (note, shape, template…) have
+     * no framework descriptor and therefore no key to declare.
+     */
+    labelKey?: string;
     content: TemplateResult;
     enable?: boolean;
     /**

package/dist/_pkgs/affine-widget-edgeless-toolbar/index.d.ts

@@ -1,3 +1,7 @@
+export * from './catalogue/artefact-catalogue-default.js';
+export * from './catalogue/artefact-catalogue-widget.js';
+export * from './catalogue/catalogue-groups.js';
+export * from './catalogue/chord-format.js';
 export * from './config/index.js';
 export * from './context.js';
 export * from './create-popper.js';

package/dist/_pkgs/affine-widget-edgeless-toolbar/index.js

@@ -1,3 +1,7 @@
+export * from './catalogue/artefact-catalogue-default.js';
+export * from './catalogue/artefact-catalogue-widget.js';
+export * from './catalogue/catalogue-groups.js';
+export * from './catalogue/chord-format.js';
 export * from './config/index.js';
 export * from './context.js';
 export * from './create-popper.js';

package/dist/_pkgs/affine-widget-edgeless-toolbar/menu/command-menu.d.ts

@@ -20,6 +20,15 @@ export declare abstract class EdgelessCommandMenu extends EdgelessCommandMenu_ba
     static styles: CSSResultGroup;
     /** Which framework's commands this popover shows. */
     protected abstract owner: CommandOwner;
+    /**
+     * The buttons, and whether the owner outgrew the fourteen slots.
+     *
+     * Recomputed per render on purpose: it opens with the popover, not with a
+     * frame, and the usage measure it reads is the whole point — a list cached
+     * across openings would show the user yesterday's ranking of what they did
+     * this morning.
+     */
+    private get _selection();
     get commands(): CommandDescriptor[];
     private _invoke;
     /**
@@ -33,6 +42,16 @@ export declare abstract class EdgelessCommandMenu extends EdgelessCommandMenu_ba
      * fallbacks, resolved through the host's catalogue.
      */
     private _tooltip;
+    /**
+     * The way out of a menu that no longer shows everything.
+     *
+     * It appears only past the cap, and only when something answers
+     * {@link ArtefactCatalogueProvider}: a button that opens nothing is a dead
+     * control, and the thirteen ranked slots are only defensible as a *shortcut*
+     * to a catalogue the user can still reach in full. Thirteen plus this one is
+     * fourteen — the overflowed row is exactly as wide as the cap.
+     */
+    private _renderCatalogueButton;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/_pkgs/affine-widget-edgeless-toolbar/menu/command-menu.js

@@ -1,6 +1,7 @@
-import { translateKey } from '../../affine-shared/services/index.js';
-import { getCommandIcon, getCommandsForSurface, runCommand, } from '../../std/index.js';
-import { css, html, LitElement } from 'lit';
+import { ArtefactCatalogueProvider, translateKey, } from '../../affine-shared/services/index.js';
+import { CommandUsageIdentifier, getCommandIcon, getCommandsForSurface, runCommand, selectSeniorMenuCommands, } from '../../std/index.js';
+import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
 /**
  * The senior button sub-menu, rendered FROM the command registry.
@@ -40,8 +41,21 @@ export class EdgelessCommandMenu extends EdgelessToolbarToolMixin(LitElement) {
       height: 24px;
     }
   `; }
+    /**
+     * The buttons, and whether the owner outgrew the fourteen slots.
+     *
+     * Recomputed per render on purpose: it opens with the popover, not with a
+     * frame, and the usage measure it reads is the whole point — a list cached
+     * across openings would show the user yesterday's ranking of what they did
+     * this morning.
+     */
+    get _selection() {
+        const std = this.edgeless.std;
+        const usage = std.getOptional(CommandUsageIdentifier);
+        return selectSeniorMenuCommands(getCommandsForSurface(std, this.owner, 'senior-menu'), getCommandsForSurface(std, this.owner, 'catalogue'), id => usage?.statsOf(id));
+    }
     get commands() {
-        return getCommandsForSurface(this.edgeless.std, this.owner, 'senior-menu');
+        return this._selection.commands;
     }
     _invoke(command) {
         // The ONE emission point: no `_track()` helper anywhere in the menus.
@@ -79,18 +93,45 @@ export class EdgelessCommandMenu extends EdgelessToolbarToolMixin(LitElement) {
         >${hint}</span
       >`;
     }
+    /**
+     * The way out of a menu that no longer shows everything.
+     *
+     * It appears only past the cap, and only when something answers
+     * {@link ArtefactCatalogueProvider}: a button that opens nothing is a dead
+     * control, and the thirteen ranked slots are only defensible as a *shortcut*
+     * to a catalogue the user can still reach in full. Thirteen plus this one is
+     * fourteen — the overflowed row is exactly as wide as the cap.
+     */
+    _renderCatalogueButton() {
+        const std = this.edgeless.std;
+        const catalogue = std.getOptional(ArtefactCatalogueProvider);
+        if (!catalogue)
+            return nothing;
+        const label = translateKey(std, 'com.labre.catalogue.open', 'More artefacts…');
+        return html `<edgeless-tool-icon-button
+      .tooltip=${html `${label}<span
+          style="display:block;max-width:220px;margin-top:2px;opacity:0.75;font-size:11px;line-height:1.35;white-space:normal"
+          >${translateKey(std, 'com.labre.catalogue.open.description', 'This framework offers more than the menu can show.')}</span
+        >`}
+      @click=${() => catalogue.open(this.owner)}
+    >
+      ${MoreHorizontalIcon()}
+    </edgeless-tool-icon-button>`;
+    }
     render() {
         const std = this.edgeless.std;
+        const { commands, overflow } = this._selection;
         return html `
       <edgeless-slide-menu>
         <div class="menu-content">
           <div class="button-group-container">
-            ${this.commands.map(command => html `<edgeless-tool-icon-button
-                .tooltip=${this._tooltip(command)}
-                @click=${() => this._invoke(command)}
-              >
-                ${getCommandIcon(std, command.iconKey)}
-              </edgeless-tool-icon-button>`)}
+            ${commands.map(command => html `<edgeless-tool-icon-button
+                  .tooltip=${this._tooltip(command)}
+                  @click=${() => this._invoke(command)}
+                >
+                  ${getCommandIcon(std, command.iconKey)}
+                </edgeless-tool-icon-button>`)}
+            ${overflow ? this._renderCatalogueButton() : nothing}
           </div>
         </div>
       </edgeless-slide-menu>

package/dist/_pkgs/affine-widget-edgeless-toolbar/view.js

@@ -1,4 +1,6 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
+import { artefactCatalogueDefaultExtension } from './catalogue/artefact-catalogue-default.js';
+import { edgelessArtefactCatalogueWidget } from './catalogue/artefact-catalogue-widget.js';
 import { edgelessToolbarWidget } from './edgeless-toolbar.js';
 import { effects } from './effects.js';
 export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
@@ -14,6 +16,13 @@ export class EdgelessToolbarViewExtension extends ViewExtensionProvider {
         super.setup(context);
         if (this.isEdgeless(context.scope)) {
             context.register(edgelessToolbarWidget);
+            // The artefact catalogue and the default implementation of the seam that
+            // opens it, side by side and unconditionally: the panel is core chrome,
+            // and ADR 0009's gating is carried by the frameworks — a framework whose
+            // flag is off never passes its owner to `open`. A host with its own
+            // sidebar overrides the seam and the widget then never opens.
+            context.register(edgelessArtefactCatalogueWidget);
+            context.register(artefactCatalogueDefaultExtension);
         }
     }
 }

package/dist/_pkgs/affine-widget-keyboard-toolbar/keyboard-tool-panel.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { SignalWatcher, WithDisposable } from '../global/lit/index.js';
-import { PropTypes, requiredProperties, ShadowlessElement, } from '../std/index.js';
+import { PropTypes, requiredProperties, ShadowlessElement } from '../std/index.js';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';

package/dist/_pkgs/affine-widget-linked-doc/import-doc/import-doc.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { CloseIcon, ExportToHTMLIcon, ExportToMarkdownIcon, HelpIcon, NewIcon, NotionIcon, } from '../../affine-components/icons/index.js';
-import { openFilesWith, openSingleFileWith, } from '../../affine-shared/utils/index.js';
+import { openFilesWith, openSingleFileWith } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { html, LitElement } from 'lit';
 import { query, state } from 'lit/decorators.js';

package/dist/_pkgs/affine-widget-linked-doc/linked-doc-popover.js

@@ -46,7 +46,7 @@ import { property, query, queryAll, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import throttle from 'lodash-es/throttle.js';
 import { linkedDocPopoverStyles } from './styles.js';
-import { createLinkedDocKeydownInterceptor, resolveSignal, } from './utils.js';
+import { createLinkedDocKeydownInterceptor, resolveSignal } from './utils.js';
 let LinkedDocPopover = (() => {
     let _classDecorators = [requiredProperties({
             context: PropTypes.object,

package/dist/_pkgs/affine-widget-page-dragging-area/index.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { ViewportElementProvider } from '../affine-shared/services/index.js';
-import { autoScroll, getScrollContainer, } from '../affine-shared/utils/index.js';
+import { autoScroll, getScrollContainer } from '../affine-shared/utils/index.js';
 import { BlockComponent, BlockSelection, WidgetComponent, WidgetViewExtension, } from '../std/index.js';
 import { html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';

package/dist/_pkgs/affine-widget-remote-selection/doc/doc-remote-selection.js

@@ -36,7 +36,7 @@ import { AttachmentBlockModel, BookmarkBlockModel, CodeBlockModel, DatabaseBlock
 import { getSelectionRectsCommand } from '../../affine-shared/commands/index.js';
 import { EMBED_BLOCK_MODEL_LIST } from '../../affine-shared/consts/index.js';
 import { matchModels } from '../../affine-shared/utils/index.js';
-import { BlockSelection, TextSelection, WidgetComponent, } from '../../std/index.js';
+import { BlockSelection, TextSelection, WidgetComponent } from '../../std/index.js';
 import { GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { computed, effect } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';

package/dist/_pkgs/affine-widget-toolbar/toolbar.js

@@ -293,8 +293,12 @@ export class AffineToolbarWidget extends WidgetComponent {
                 // Chencks if block's config exists.
                 if (block) {
                     const modelFlavour = block.model.flavour;
-                    const existed = toolbarRegistry.modules.has(modelFlavour) ||
-                        toolbarRegistry.modules.has(`custom:${modelFlavour}`);
+                    // `modulesFor`, not `modules.has`: the question is whether this
+                    // flavour has a row AT ALL, and since a flavour may be claimed by
+                    // an owner-suffixed contributor as well as by its own key, a raw
+                    // variant lookup would answer "no row" for a flavour that draws one.
+                    const existed = toolbarRegistry.modulesFor(modelFlavour).length > 0 ||
+                        toolbarRegistry.modulesFor(`custom:${modelFlavour}`).length > 0;
                     if (existed) {
                         flavour = modelFlavour;
                     }

package/dist/_pkgs/affine-widget-toolbar/utils.js

@@ -364,8 +364,12 @@ export function renderToolbar(toolbar, context, flavour, source = () => emptyToo
         'custom:affine:*',
     ]
         .flat()
-        .map(key => toolbarRegistry.modules.get(key))
-        .filter(module => !!module)
+        // Every module of each key, not just one: a flavour may be shared by
+        // several contributors (`custom:affine:surface:group` carries Wardley's
+        // qualification dropdown AND C4's morph), and they are told apart by the
+        // owner suffix on their DI variant — see `toolbarModuleKey`.
+        .map(key => toolbarRegistry.modulesFor(key))
+        .flat()
         .filter(module => typeof module.config.when === 'function'
         ? module.config.when(context)
         : (module.config.when ?? true))

package/dist/_pkgs/data-view/view-presets/calendar/pc/actions.js

@@ -44,21 +44,17 @@ export const openCalendarEntry = (root, view, entry, target, options) => {
             </div>
             ${entry.location
                     ? html `<div class="calendar-event-popover-row">
-                    <span class="calendar-event-popover-icon"
-                      >${PinIcon()}</span
-                    >
-                    <span>${entry.location}</span>
-                  </div>`
+                  <span class="calendar-event-popover-icon">${PinIcon()}</span>
+                  <span>${entry.location}</span>
+                </div>`
                     : ''}
             ${entry.description
                     ? html `<div class="calendar-event-popover-row">
-                    <span class="calendar-event-popover-icon"
-                      >${TextIcon()}</span
-                    >
-                    <span class="calendar-event-popover-description"
-                      >${entry.description}</span
-                    >
-                  </div>`
+                  <span class="calendar-event-popover-icon">${TextIcon()}</span>
+                  <span class="calendar-event-popover-description"
+                    >${entry.description}</span
+                  >
+                </div>`
                     : ''}
           </div>
         `,

package/dist/_pkgs/data-view/view-presets/calendar/pc/view.js

@@ -532,7 +532,10 @@ export class CalendarViewUI extends DataViewUIBase {
         return html `
       <div
         ${ref(element => this.logic.bindEntryDraggable(dndKey, entry, element))}
-        class="calendar-entry ${entry.kind} ${segmentClass} ${this.logic.selectedEntryId === entry.id ? 'selected' : ''}"
+        class="calendar-entry ${entry.kind} ${segmentClass} ${this.logic
+            .selectedEntryId === entry.id
+            ? 'selected'
+            : ''}"
         role="button"
         tabindex="0"
         aria-label=${entry.title || 'Untitled'}
@@ -546,23 +549,23 @@ export class CalendarViewUI extends DataViewUIBase {
       >
         ${showLeftHandle
             ? html `<span
-                class="calendar-resize-handle left"
-                @pointerdown=${(event) => this.logic.startResize(entry, 'start', event)}
-              ></span>`
+              class="calendar-resize-handle left"
+              @pointerdown=${(event) => this.logic.startResize(entry, 'start', event)}
+            ></span>`
             : nothing}
         ${this.renderEntryTitle(entry)}
         ${entry.kind === 'row' && entry.cardProperties.length
             ? html `<span class="calendar-entry-properties">
-                ${entry.cardProperties.map(property => html `<span class="calendar-entry-property"
-                      >${property.value}</span
-                    >`)}
-              </span>`
+              ${entry.cardProperties.map(property => html `<span class="calendar-entry-property"
+                    >${property.value}</span
+                  >`)}
+            </span>`
             : nothing}
         ${showRightHandle
             ? html `<span
-                class="calendar-resize-handle right"
-                @pointerdown=${(event) => this.logic.startResize(entry, 'end', event)}
-              ></span>`
+              class="calendar-resize-handle right"
+              @pointerdown=${(event) => this.logic.startResize(entry, 'end', event)}
+            ></span>`
             : nothing}
       </div>
     `;
@@ -577,13 +580,15 @@ export class CalendarViewUI extends DataViewUIBase {
         if (entry.titleSegments?.length) {
             return html `<span class="calendar-entry-title title-segments">
         ${entry.titleSegments.map(segment => html `<span
-              class="calendar-entry-title-segment ${segment.linkedDoc ? 'linked-doc-segment' : ''}"
+              class="calendar-entry-title-segment ${segment.linkedDoc
+                ? 'linked-doc-segment'
+                : ''}"
             >
               ${segment.linkedDoc ? LinkedPageIcon() : nothing}
               ${segment.text
                 ? html `<span class="calendar-entry-title-text"
-                      >${segment.text}</span
-                    >`
+                    >${segment.text}</span
+                  >`
                 : nothing}
             </span>`)}
       </span>`;
@@ -667,8 +672,11 @@ export class CalendarViewUI extends DataViewUIBase {
         if (!preview)
             return nothing;
         return html `<div
-      class="calendar-entry-preview ${preview.continuesLeft ? 'continues-left' : ''} ${preview.continuesRight ? 'continues-right' : ''}"
-      style="grid-column:${preview.sIdx + 1} / span ${preview.span};grid-row:${preview.slot + 1};"
+      class="calendar-entry-preview ${preview.continuesLeft
+            ? 'continues-left'
+            : ''} ${preview.continuesRight ? 'continues-right' : ''}"
+      style="grid-column:${preview.sIdx +
+            1} / span ${preview.span};grid-row:${preview.slot + 1};"
     >
       ${preview.title}
     </div>`;
@@ -688,11 +696,11 @@ export class CalendarViewUI extends DataViewUIBase {
         ${this.logic.view.readonly$.value
             ? nothing
             : html `<button
-                class="calendar-empty-month-hint-action"
-                @click=${() => this.logic.createRowOnDate(getDefaultCreateDate(this.logic.currentMonth))}
-              >
-                ${PlusIcon()}<span>New row</span>
-              </button>`}
+              class="calendar-empty-month-hint-action"
+              @click=${() => this.logic.createRowOnDate(getDefaultCreateDate(this.logic.currentMonth))}
+            >
+              ${PlusIcon()}<span>New row</span>
+            </button>`}
         <button
           class="calendar-empty-month-hint-close"
           aria-label="Dismiss"
@@ -727,11 +735,11 @@ export class CalendarViewUI extends DataViewUIBase {
             ${this.logic.isCurrentMonth()
             ? nothing
             : html `<button
-                    class="calendar-today-button"
-                    @click=${() => this.logic.goToday()}
-                  >
-                    <span>Today</span>
-                  </button>`}
+                  class="calendar-today-button"
+                  @click=${() => this.logic.goToday()}
+                >
+                  <span>Today</span>
+                </button>`}
             <button
               class="calendar-icon-button"
               aria-label="Previous month"
@@ -769,7 +777,11 @@ export class CalendarViewUI extends DataViewUIBase {
                 return html `
                         <div
                           data-date=${day.date}
-                          class="calendar-day ${day.inMonth ? '' : 'is-outside'} ${day.date === today ? 'is-today' : ''} ${this.logic.isDayInPreview(day.date)
+                          class="calendar-day ${day.inMonth
+                    ? ''
+                    : 'is-outside'} ${day.date === today
+                    ? 'is-today'
+                    : ''} ${this.logic.isDayInPreview(day.date)
                     ? 'is-drop-target'
                     : ''}"
                           style="--calendar-segment-slots:${getCalendarDaySegmentSlots(day, movingEntryId)};"
@@ -786,13 +798,13 @@ export class CalendarViewUI extends DataViewUIBase {
                           </div>
                           ${canReserveNewRow
                     ? html `<button
-                                  class="calendar-new-row"
-                                  aria-label="+ New row"
-                                  ?disabled=${this.logic.isInteracting}
-                                  @click=${() => this.logic.createRowOnDate(day.date)}
-                                >
-                                  ${PlusIcon()}<span>New row</span>
-                                </button>`
+                                class="calendar-new-row"
+                                aria-label="+ New row"
+                                ?disabled=${this.logic.isInteracting}
+                                @click=${() => this.logic.createRowOnDate(day.date)}
+                              >
+                                ${PlusIcon()}<span>New row</span>
+                              </button>`
                     : nothing}
                         </div>
                       `;
@@ -824,12 +836,12 @@ export class CalendarViewUI extends DataViewUIBase {
         </div>
         ${setup
             ? html `<div class="calendar-setup">
-                <button
-                  @click=${(event) => this.logic.openSetupMenu(event.currentTarget)}
-                >
-                  ${TodayIcon()}<span>Select or create date property</span>
-                </button>
-              </div>`
+              <button
+                @click=${(event) => this.logic.openSetupMenu(event.currentTarget)}
+              >
+                ${TodayIcon()}<span>Select or create date property</span>
+              </button>
+            </div>`
             : nothing}
       </div>
     `;

package/dist/_pkgs/data-view/view-presets/table/mobile/group.js

@@ -246,7 +246,9 @@ let MobileTableGroup = (() => {
           class="group-toggle-btn"
           role="button"
           aria-expanded=${this.collapsed$.value ? 'false' : 'true'}
-          aria-label=${this.collapsed$.value ? 'Expand group' : 'Collapse group'}
+          aria-label=${this.collapsed$.value
+                    ? 'Expand group'
+                    : 'Collapse group'}
           tabindex="0"
           @click=${this._toggleCollapse}
           @keydown=${(e) => {

package/dist/_pkgs/data-view/view-presets/table/pc/group.js

@@ -303,7 +303,9 @@ let TableGroup = (() => {
           class="group-toggle-btn"
           role="button"
           aria-expanded=${this.collapsed$.value ? 'false' : 'true'}
-          aria-label=${this.collapsed$.value ? 'Expand group' : 'Collapse group'}
+          aria-label=${this.collapsed$.value
+                    ? 'Expand group'
+                    : 'Collapse group'}
           tabindex="0"
           @click=${this._toggleCollapse}
           @keydown=${(e) => {