@formicoidea/labre-core 0.40.0 → 0.42.0

package/dist/_pkgs/affine-components/color-picker/palette-carousel.js

@@ -0,0 +1,440 @@
+/**
+ * The palette header a colour picker draws above its swatch grid when more than
+ * one palette is on offer (`docs/adr/0027`): the page's name, opening an inline
+ * list of every page IN PLACE of the grid, and a wheel over the panel paging
+ * like a carousel.
+ *
+ * A render helper and a stylesheet rather than a custom element: the two
+ * pickers that show it (`edgeless-color-picker-button` and
+ * `edgeless-shape-color-picker`) live in different shadow roots and already own
+ * their own `render()`, and a third element registered in `effects()` would buy
+ * nothing but a tag name.
+ *
+ * Everything here is driven by `click`, never by a default action.
+ * `editor-toolbar` cancels every `pointerdown` in its subtree — popper menus
+ * included — to keep the canvas selection and the focus where they are
+ * (`toolbar/toolbar.ts`), and a cancelled `pointerdown` suppresses the
+ * compatibility `mousedown` whose default action is the only thing that opens a
+ * native `<select>`. `click` survives that policy untouched, which is why the
+ * list is ours and not the platform's.
+ *
+ * The header is the PANEL'S TITLE, not a bar bolted on top of it: a compact,
+ * content-width trigger whose name starts on the very x the section labels
+ * ("Fill color", "Border color") and the swatch grid start on. Its hit area
+ * comes from padding cancelled by an equal negative margin, so the hover pill
+ * bleeds outward while the text itself stays on the panel's left grid line.
+ */
+import { ColorScheme, resolveColor } from '../../affine-model/index.js';
+import { translateKey } from '../../affine-shared/services/index.js';
+import { reducedMotionStyle, springDuration, springEasing, } from '../../affine-shared/styles/index.js';
+import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
+import { ArrowDownSmallIcon, DoneIcon } from '@blocksuite/icons/lit';
+import { css, html, nothing } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+import { PALETTE_GROUP_CHOOSE } from '../translations.js';
+/** Include in the host component's `static styles`. */
+export const paletteCarouselStyles = css `
+  .palette-carousel {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    padding-bottom: 4px;
+  }
+
+  .palette-carousel-name {
+    display: inline-flex;
+    /* Content width, not the panel's: a title, not a bar. */
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 2px;
+    max-width: 100%;
+    min-width: 0;
+    /* The hover pill bleeds out by exactly what the padding pushed in, so the
+     * name starts on the same x as "Fill color" and as the swatch grid. */
+    /* 4px, not the popup's whole 8px gutter: the pill keeps a 4px gap to the popup
+     * edge, so its 4px radius stays concentric with the popup's 8px corner. */
+    margin: -2px -4px;
+    padding: 2px 4px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    /* The panel's own type, one step stronger: this names the whole panel. */
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    line-height: 22px;
+    color: ${unsafeCSSVarV2('text/primary')};
+    cursor: pointer;
+    outline: none;
+  }
+
+  .palette-carousel-name:hover {
+    background: var(--affine-hover-color);
+  }
+
+  .palette-carousel-name:focus-visible {
+    outline: 1px solid var(--affine-primary-color);
+    outline-offset: -1px;
+  }
+
+  .palette-carousel-name > .label {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    /* The name travels with the swatches it names — same keys, same curve. */
+    animation: palette-carousel-settle ${springDuration} ${springEasing};
+  }
+
+  .palette-carousel-name > .label[data-direction='next'] {
+    animation-name: palette-carousel-next;
+  }
+
+  .palette-carousel-name > .label[data-direction='prev'] {
+    animation-name: palette-carousel-prev;
+  }
+
+  .palette-carousel-chevron {
+    display: flex;
+    flex: 0 0 auto;
+    color: ${unsafeCSSVarV2('icon/primary')};
+    transition: transform ${springDuration} ${springEasing};
+  }
+
+  .palette-carousel-chevron svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .palette-carousel-name[aria-expanded='true'] .palette-carousel-chevron {
+    transform: rotate(180deg);
+  }
+
+  .palette-carousel-list {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    box-sizing: content-box;
+    /* As wide as whatever it stands in for — the panel measures itself on the
+     * way in, see rememberPanelWidth — plus the two gutters its rows bleed
+     * into, so the popup never resizes under the cursor. The fallback is the
+     * 9-column swatch grid (9 × 20px + 8 × 4px). */
+    min-width: calc(var(--palette-panel-width, 212px) + 8px);
+    /* Full-bleed rows: the list reaches the popup's padding edge, and its rows
+     * put their names back on the panel's grid line with their own padding. */
+    margin: 0 -4px;
+    /* Nine pages fit without scrolling; the cap is a seatbelt for a tenth. */
+    max-height: 280px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    animation: palette-carousel-settle ${springDuration} ${springEasing};
+  }
+
+  .palette-carousel-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    color: var(--affine-text-primary-color);
+    text-align: left;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .palette-carousel-option:hover {
+    background: var(--affine-hover-color);
+  }
+
+  .palette-carousel-option:focus-visible {
+    outline: 1px solid var(--affine-primary-color);
+    outline-offset: -1px;
+  }
+
+  .palette-carousel-option[aria-current='true'] {
+    color: var(--affine-primary-color);
+  }
+
+  .palette-carousel-option > .label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .palette-carousel-dots {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 2px;
+  }
+
+  .palette-carousel-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/blackBorder')};
+  }
+
+  .palette-carousel-tick {
+    display: flex;
+    /* Always the same slot, ticked or not, so the dots line up down the list. */
+    flex: 0 0 16px;
+    height: 16px;
+    color: inherit;
+  }
+
+  .palette-carousel-tick svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* The swatches of ONE page. Re-keyed on the page index, so a page change
+   * builds a new box and its entry animation starts from scratch — a burst of
+   * wheel events never queues, it replaces. */
+  .palette-carousel-page {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    animation: palette-carousel-settle ${springDuration} ${springEasing};
+  }
+
+  .palette-carousel-page[data-direction='next'] {
+    animation-name: palette-carousel-next;
+  }
+
+  .palette-carousel-page[data-direction='prev'] {
+    animation-name: palette-carousel-prev;
+  }
+
+  /* The easing overshoots (easeOutBack), so each of these travels a little
+   * past its resting place and springs back — the "elastic" of the recette. */
+  @keyframes palette-carousel-next {
+    from {
+      transform: translateX(14px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes palette-carousel-prev {
+    from {
+      transform: translateX(-14px);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes palette-carousel-settle {
+    from {
+      transform: scale(0.97);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  ${reducedMotionStyle('.palette-carousel')}
+  ${reducedMotionStyle('.palette-carousel-list')}
+  ${reducedMotionStyle('.palette-carousel-page')}
+`;
+/**
+ * One page per wheel GESTURE, not per time slice. A trackpad flick streams
+ * events for a second or more (the inertia tail), so a fixed throttle paged
+ * four or five times per flick. A gesture ends when the wheel has been quiet
+ * for {@link WHEEL_QUIET_MS}; within one, a further page is granted only to a
+ * deliberate, still-strong scroll — never to the fading tail. Module-level
+ * stamps are enough because only one picker is ever open.
+ *
+ * ponytail: hand-tuned thresholds; if they need per-device tuning, accumulate
+ * delta into page-sized steps instead.
+ */
+const WHEEL_QUIET_MS = 160;
+const WHEEL_REPEAT_MS = 650;
+const WHEEL_REPEAT_MIN_DELTA = 40;
+let lastWheelEventAt = 0;
+let lastWheelPageAt = 0;
+/** How many swatches of a page are shown beside its name, for recognition. */
+const PREVIEW_DOTS = 5;
+/**
+ * The wheel handler each host binds on its own PANEL container — the header and
+ * the swatch grids alike, because "the mouse has to be on the name" was the
+ * second half of the recette's failure.
+ *
+ * Wrap-around in both directions: the pages are a ring, not a list, and the
+ * base palette is always one of them. The direction is the wheel's own sign,
+ * never the index delta, so wrapping from the last page to the first still
+ * comes in from the right.
+ */
+export function paletteCarouselWheel(options) {
+    const { groups, index, onPage, open } = options;
+    return (e) => {
+        if (groups.length < 2)
+            return;
+        // ctrl+wheel is the pinch-zoom gesture the edgeless board claims on
+        // `document` in capture (`edgeless/utils/pinch-zoom.ts`) — not ours.
+        if (e.ctrlKey)
+            return;
+        // While the list is open the wheel belongs to the list, which may scroll.
+        if (open)
+            return;
+        const delta = e.deltaY || e.deltaX;
+        if (!delta)
+            return;
+        // Neither the canvas nor the page moves under an open picker.
+        e.preventDefault();
+        e.stopPropagation();
+        const now = Date.now();
+        const newGesture = now - lastWheelEventAt > WHEEL_QUIET_MS;
+        lastWheelEventAt = now;
+        const sustained = now - lastWheelPageAt > WHEEL_REPEAT_MS &&
+            Math.abs(delta) >= WHEEL_REPEAT_MIN_DELTA;
+        if (!newGesture && !sustained)
+            return;
+        lastWheelPageAt = now;
+        const forward = delta > 0;
+        onPage((index + (forward ? 1 : -1) + groups.length) % groups.length, forward ? 'next' : 'prev');
+    };
+}
+/**
+ * The swatches of the page on screen, wrapped so that paging slides them in.
+ * The host passes its own grid (both of them, in the shape picker, each in its
+ * own wrapper — same key, same timing, so the two move together).
+ *
+ * `keyed` is the whole mechanism: the wrapper is torn down and rebuilt on a
+ * page change, which restarts the CSS animation and, by the same token, cancels
+ * the one in flight. No JS animation, nothing to queue, and the swatches stay
+ * clickable throughout (a CSS animation never takes the pointer).
+ */
+export function paletteCarouselPage(options, content) {
+    const { groups, index, direction = 'settle' } = options;
+    // No carousel, no page: the grid of a picker with a single palette keeps the
+    // exact DOM it had before any of this existed.
+    if (groups.length < 2)
+        return content;
+    return keyed(index, html `<div class="palette-carousel-page" data-direction=${direction}>
+      ${content}
+    </div>`);
+}
+/**
+ * The popup must not resize under the cursor when the list takes the grid's
+ * place, and a list has no way to know how wide the thing it replaces was — so
+ * the panel is measured on the way IN and hands the number down as a custom
+ * property. Read from the header's own container, which is the flex column the
+ * grid, the section labels and the list all share.
+ */
+function rememberPanelWidth(trigger) {
+    const panel = trigger.closest('[data-orientation]');
+    if (!panel)
+        return;
+    const { width } = panel.getBoundingClientRect();
+    if (width > 0)
+        panel.style.setProperty('--palette-panel-width', `${width}px`);
+}
+const dots = (group, theme) => group.palettes.slice(0, PREVIEW_DOTS).map(palette => {
+    const value = resolveColor(palette.value, theme);
+    return html `<span
+      class="palette-carousel-dot"
+      style="background:${value.startsWith('--') ? `var(${value})` : value}"
+    ></span>`;
+});
+/**
+ * The header row — and, when {@link CarouselOptions.open} is set, the list of
+ * pages the host draws INSTEAD of its swatch grid. `nothing` when there is
+ * nothing to page through, which is what every call site that passes no groups
+ * at all gets, so a picker with one palette renders exactly as it did before
+ * this existed.
+ */
+export function renderPaletteCarousel(options) {
+    const { groups, index, onPage, onToggle, open = false, direction = 'settle', std, theme, } = options;
+    if (groups.length < 2)
+        return nothing;
+    const group = groups[index];
+    if (!group)
+        return nothing;
+    const choose = std
+        ? translateKey(std, ...PALETTE_GROUP_CHOOSE)
+        : PALETTE_GROUP_CHOOSE[1];
+    // Every handler below stops the click: the header lives inside an open
+    // popper, and `createButtonPopper` hides the menu on any document click whose
+    // composed path misses the TRIGGER (`button-popper.ts`).
+    //
+    // Closing the list re-states the page it was opened on, which changes no
+    // page at all and only clears the direction: the grid comes back where it
+    // left, without replaying the slide of the last page change.
+    const toggle = (e) => {
+        e.stopPropagation();
+        if (open)
+            onPage(index, 'settle');
+        else
+            rememberPanelWidth(e.currentTarget);
+        onToggle(!open);
+    };
+    const pick = (to) => (e) => {
+        e.stopPropagation();
+        // A row names its page, so here the index delta IS the direction.
+        onPage(to, to === index ? 'settle' : to > index ? 'next' : 'prev');
+        onToggle(false);
+    };
+    // Escape closes the LIST, not the menu: `editor-menu-button` hides the whole
+    // popper on an Escape that reaches it, which would be a surprising way out of
+    // a list the user only meant to dismiss.
+    const keydown = (e) => {
+        if (e.key !== 'Escape' || !open)
+            return;
+        e.stopPropagation();
+        onPage(index, 'settle');
+        onToggle(false);
+    };
+    return html `
+    <div class="palette-carousel" @keydown=${keydown}>
+      <button
+        type="button"
+        class="palette-carousel-name"
+        aria-label=${choose}
+        aria-expanded=${open}
+        @click=${toggle}
+      >
+        ${keyed(index, html `<span class="label" data-direction=${direction}
+            >${group.label}</span
+          >`)}
+        <span class="palette-carousel-chevron">${ArrowDownSmallIcon()}</span>
+      </button>
+    </div>
+    ${open
+        ? html `
+          <div class="palette-carousel-list" @keydown=${keydown}>
+            ${groups.map((item, i) => {
+            const current = i === index;
+            return html `
+                <button
+                  type="button"
+                  class="palette-carousel-option"
+                  aria-current=${current ? 'true' : 'false'}
+                  @click=${pick(i)}
+                >
+                  <span class="label">${item.label}</span>
+                  <span class="palette-carousel-dots">
+                    ${dots(item, theme ?? ColorScheme.Light)}
+                  </span>
+                  <span class="palette-carousel-tick">
+                    ${current ? DoneIcon() : nothing}
+                  </span>
+                </button>
+              `;
+        })}
+          </div>
+        `
+        : nothing}
+  `;
+}

package/dist/_pkgs/affine-components/color-picker/types.d.ts

@@ -1,3 +1,4 @@
+import type { ChromeWording } from '../../affine-shared/services/index.js';
 import type { ColorScheme, Palette } from '../../affine-model/index.js';
 export type Rgb = {
     r: number;
@@ -39,3 +40,23 @@ export type PickColorEvent = {
     type: 'pick';
     detail: Palette;
 };
+/**
+ * A swatch that names itself, for a colour panel that has to display
+ * something better than `Palette.key` — the framework-agnostic extension
+ * point `resolvePaletteLabel` (`utils.ts`) checks FIRST, before falling back
+ * to the default theme's own `PALETTE_NAME_WORDINGS` lookup
+ * (`@labre/affine-shared/services`) and, with neither, to the raw `key`
+ * exactly as every colour panel displayed it before this type existed.
+ *
+ * `Palette` itself (`packages/affine/model`, RED ZONE) is never touched: a
+ * framework that wants its own swatch names (Wardley's "Wonder" / "Peace" /
+ * "War", EDGY's "Identity" / "Architecture"…) builds its palette as
+ * `NamedPalette[]` OUTSIDE the model, in its own `toolbar/node-config.ts` —
+ * see `packages/affine/gfx/wardley/src/toolbar/node-config.ts` and its EDGY
+ * counterpart. Optional and additive: a plain `Palette[]` (the default
+ * theme's tables, any pre-existing caller) is still assignable wherever a
+ * `NamedPalette[]` is expected, so nothing that already worked has to change.
+ */
+export type NamedPalette = Palette & {
+    labelWording?: ChromeWording;
+};

package/dist/_pkgs/affine-components/color-picker/utils.d.ts

@@ -1,5 +1,6 @@
-import type { Color, ColorScheme } from '../../affine-model/index.js';
-import type { Hsv, Hsva, ModeType, PickColorType, Point, Rgb, Rgba } from './types.js';
+import type { Color, ColorScheme, Palette } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
+import type { Hsv, Hsva, ModeType, NamedPalette, PickColorType, Point, Rgb, Rgba } from './types.js';
 export declare const defaultPoint: (x?: number, y?: number) => Point;
 export declare const defaultHsva: () => Hsva;
 export declare function linearGradientAt(t: number): Rgb;
@@ -83,3 +84,28 @@ export declare const calcCustomButtonStyle: (color: string, isCustomColor: boole
     '--c': string;
 };
 export declare const adjustColorAlpha: (color: Color, a: number) => Color;
+/**
+ * The swatch's DISPLAYED name — what `edgeless-color-panel` shows as the
+ * swatch's visible label and passes on as its `aria-label`.
+ *
+ * Three tiers, checked in order, mirroring `translateTagLabel`
+ * (`universe-tag-defs-service.ts`)'s own "declared key, then declared
+ * fallback, then raw" shape:
+ *
+ * 1. The swatch's OWN {@link NamedPalette.labelWording}, when the palette
+ *    that built it declared one (a framework's own swatches — Wardley's
+ *    "Wonder", EDGY's "Identity"…).
+ * 2. The default theme's {@link PALETTE_NAME_WORDINGS} lookup, keyed by
+ *    `palette.key` (`'Red'`, `'LightBlue'`…) — the one table every
+ *    `DefaultTheme.*Palettes` swatch resolves through.
+ * 3. `palette.key` itself, unresolved — exactly what every colour panel
+ *    displayed before either mechanism existed, so a swatch this function
+ *    has never heard of (a host's own custom palette, a future table) keeps
+ *    reading exactly as it always has.
+ *
+ * `std` is optional: with none (a detached story, a standalone render with
+ * no block context), tier 1 and 2 still resolve to their ENGLISH fallback
+ * (`wording[1]`) rather than the raw key, since that fallback IS the literal
+ * already on screen — only `translateKey`'s host lookup is skipped.
+ */
+export declare function resolvePaletteLabel(std: BlockStdScope | undefined, palette: Palette | NamedPalette): string;

package/dist/_pkgs/affine-components/color-picker/utils.js

@@ -1,4 +1,5 @@
 // https://www.w3.org/TR/css-color-4/
+import { PALETTE_NAME_WORDINGS, translateKey, } from '../../affine-shared/services/index.js';
 import clamp from 'lodash-es/clamp.js';
 import { COLORS, FIRST_COLOR } from './consts.js';
 export const defaultPoint = (x = 0, y = 0) => ({ x, y });
@@ -289,3 +290,34 @@ export const adjustColorAlpha = (color, a) => {
     }
     return newColor;
 };
+/**
+ * The swatch's DISPLAYED name — what `edgeless-color-panel` shows as the
+ * swatch's visible label and passes on as its `aria-label`.
+ *
+ * Three tiers, checked in order, mirroring `translateTagLabel`
+ * (`universe-tag-defs-service.ts`)'s own "declared key, then declared
+ * fallback, then raw" shape:
+ *
+ * 1. The swatch's OWN {@link NamedPalette.labelWording}, when the palette
+ *    that built it declared one (a framework's own swatches — Wardley's
+ *    "Wonder", EDGY's "Identity"…).
+ * 2. The default theme's {@link PALETTE_NAME_WORDINGS} lookup, keyed by
+ *    `palette.key` (`'Red'`, `'LightBlue'`…) — the one table every
+ *    `DefaultTheme.*Palettes` swatch resolves through.
+ * 3. `palette.key` itself, unresolved — exactly what every colour panel
+ *    displayed before either mechanism existed, so a swatch this function
+ *    has never heard of (a host's own custom palette, a future table) keeps
+ *    reading exactly as it always has.
+ *
+ * `std` is optional: with none (a detached story, a standalone render with
+ * no block context), tier 1 and 2 still resolve to their ENGLISH fallback
+ * (`wording[1]`) rather than the raw key, since that fallback IS the literal
+ * already on screen — only `translateKey`'s host lookup is skipped.
+ */
+export function resolvePaletteLabel(std, palette) {
+    const wording = palette.labelWording ??
+        PALETTE_NAME_WORDINGS[palette.key];
+    if (!wording)
+        return palette.key;
+    return std ? translateKey(std, ...wording) : wording[1];
+}

package/dist/_pkgs/affine-components/context-menu/menu-renderer.d.ts

@@ -1,3 +1,4 @@
+import type { BlockStdScope } from '../../std/index.js';
 import { ShadowlessElement } from '../../std/index.js';
 import { type Middleware, type ReferenceElement } from '@floating-ui/dom';
 import type { MenuFocusable } from './focusable.js';
@@ -5,6 +6,7 @@ import { Menu, type MenuConfig, type MenuOptions } from './menu.js';
 import type { MenuComponentInterface } from './types.js';
 declare const MenuComponent_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MenuComponent extends MenuComponent_base implements MenuComponentInterface {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     private readonly _clickContainer;
     private readonly searchRef;
@@ -25,6 +27,7 @@ declare global {
 }
 declare const MobileMenuComponent_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MobileMenuComponent extends MobileMenuComponent_base implements MenuComponentInterface {
+    accessor std: BlockStdScope;
     static styles: import("lit").CSSResult;
     onClose: () => void;
     focusTo(ele?: MenuFocusable): void;