@formicoidea/labre-core 0.31.0 → 0.32.0

package/dist/_pkgs/affine-components/icon-picker/affine-icon-picker-panel.js

@@ -0,0 +1,231 @@
+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 { SearchIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { RECENT_GROUP_NAME } from './emoji-data.js';
+import { DEFAULT_ICON_COLOR, filterIcons, getIcons, ICON_COLORS, renderAffineIcon, } from './icon-data.js';
+import { pushRecent, readRecent, RECENT_ICONS_KEY } from './recent-store.js';
+import { panelStyles } from './styles.js';
+import { IconType } from './types.js';
+/**
+ * The icon half of the picker: a filter box, a colour menu, a recents row and
+ * the full `@blocksuite/icons` set.
+ */
+let AffineIconPickerPanel = (() => {
+    let _classSuper = LitElement;
+    let __keyword_decorators;
+    let __keyword_initializers = [];
+    let __keyword_extraInitializers = [];
+    let __colorMenuOpen_decorators;
+    let __colorMenuOpen_initializers = [];
+    let __colorMenuOpen_extraInitializers = [];
+    let __recent_decorators;
+    let __recent_initializers = [];
+    let __recent_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _rememberRecent_decorators;
+    let _rememberRecent_initializers = [];
+    let _rememberRecent_extraInitializers = [];
+    return class AffineIconPickerPanel extends _classSuper {
+        constructor() {
+            super(...arguments);
+            this.#_keyword_accessor_storage = __runInitializers(this, __keyword_initializers, '');
+            this.#_colorMenuOpen_accessor_storage = (__runInitializers(this, __keyword_extraInitializers), __runInitializers(this, __colorMenuOpen_initializers, false));
+            this.#_recent_accessor_storage = (__runInitializers(this, __colorMenuOpen_extraInitializers), __runInitializers(this, __recent_initializers, []));
+            this.#color_accessor_storage = (__runInitializers(this, __recent_extraInitializers), __runInitializers(this, _color_initializers, DEFAULT_ICON_COLOR));
+            this.#rememberRecent_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _rememberRecent_initializers, true));
+            this._select = (__runInitializers(this, _rememberRecent_extraInitializers), (name) => {
+                if (this.rememberRecent) {
+                    this._recent = pushRecent(RECENT_ICONS_KEY, name);
+                }
+                this.dispatchEvent(new CustomEvent('select', {
+                    detail: { type: IconType.AffineIcon, name, color: this.color },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __keyword_decorators = [state()];
+            __colorMenuOpen_decorators = [state()];
+            __recent_decorators = [state()];
+            _color_decorators = [property({ attribute: false })];
+            _rememberRecent_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, __keyword_decorators, { kind: "accessor", name: "_keyword", static: false, private: false, access: { has: obj => "_keyword" in obj, get: obj => obj._keyword, set: (obj, value) => { obj._keyword = value; } }, metadata: _metadata }, __keyword_initializers, __keyword_extraInitializers);
+            __esDecorate(this, null, __colorMenuOpen_decorators, { kind: "accessor", name: "_colorMenuOpen", static: false, private: false, access: { has: obj => "_colorMenuOpen" in obj, get: obj => obj._colorMenuOpen, set: (obj, value) => { obj._colorMenuOpen = value; } }, metadata: _metadata }, __colorMenuOpen_initializers, __colorMenuOpen_extraInitializers);
+            __esDecorate(this, null, __recent_decorators, { kind: "accessor", name: "_recent", static: false, private: false, access: { has: obj => "_recent" in obj, get: obj => obj._recent, set: (obj, value) => { obj._recent = value; } }, metadata: _metadata }, __recent_initializers, __recent_extraInitializers);
+            __esDecorate(this, null, _color_decorators, { kind: "accessor", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(this, null, _rememberRecent_decorators, { kind: "accessor", name: "rememberRecent", static: false, private: false, access: { has: obj => "rememberRecent" in obj, get: obj => obj.rememberRecent, set: (obj, value) => { obj.rememberRecent = value; } }, metadata: _metadata }, _rememberRecent_initializers, _rememberRecent_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = [
+            panelStyles,
+            css `
+      :host {
+        display: block;
+        height: 100%;
+        min-height: 0;
+      }
+
+      .picker-swatch {
+        display: block;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+      }
+    `,
+        ]; }
+        #_keyword_accessor_storage;
+        get _keyword() { return this.#_keyword_accessor_storage; }
+        set _keyword(value) { this.#_keyword_accessor_storage = value; }
+        #_colorMenuOpen_accessor_storage;
+        get _colorMenuOpen() { return this.#_colorMenuOpen_accessor_storage; }
+        set _colorMenuOpen(value) { this.#_colorMenuOpen_accessor_storage = value; }
+        #_recent_accessor_storage;
+        get _recent() { return this.#_recent_accessor_storage; }
+        set _recent(value) { this.#_recent_accessor_storage = value; }
+        #color_accessor_storage;
+        /**
+         * The tint applied to a picked icon. Exposed so a host can open the picker
+         * on the colour the block already wears.
+         */
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        #rememberRecent_accessor_storage;
+        get rememberRecent() { return this.#rememberRecent_accessor_storage; }
+        set rememberRecent(value) { this.#rememberRecent_accessor_storage = value; }
+        get icons() {
+            return filterIcons(getIcons(), this._keyword);
+        }
+        firstUpdated() {
+            if (this.rememberRecent)
+                this._recent = readRecent(RECENT_ICONS_KEY);
+        }
+        _renderGroup(name, iconNames) {
+            return html `
+      <div class="picker-group">
+        <div class="picker-group-name" data-group-name=${name}>${name}</div>
+        <div class="picker-group-grid">
+          ${repeat(iconNames, iconName => iconName, iconName => html `
+              <button
+                class="picker-cell"
+                type="button"
+                title=${iconName}
+                data-icon-name=${iconName}
+                style=${styleMap({ color: this.color })}
+                @click=${() => this._select(iconName)}
+              >
+                ${renderAffineIcon(iconName)}
+              </button>
+            `)}
+        </div>
+      </div>
+    `;
+        }
+        render() {
+            const icons = this.icons;
+            return html `
+      <div class="picker-panel">
+        <header class="picker-search">
+          <label class="picker-search-input">
+            ${SearchIcon()}
+            <input
+              type="text"
+              placeholder="Filter..."
+              .value=${this._keyword}
+              @input=${(e) => {
+                this._keyword = e.target.value;
+            }}
+            />
+          </label>
+          <button
+            class="picker-trigger"
+            type="button"
+            data-testid="icon-color-trigger"
+            @click=${() => (this._colorMenuOpen = !this._colorMenuOpen)}
+          >
+            <span
+              class="picker-swatch"
+              style=${styleMap({ background: this.color })}
+            ></span>
+          </button>
+        </header>
+
+        ${this._colorMenuOpen
+                ? html `
+              <div class="picker-search">
+                <div class="picker-popup" data-testid="icon-color-menu">
+                  ${repeat(ICON_COLORS, swatch => swatch.name, swatch => html `
+                      <button
+                        class="picker-cell"
+                        type="button"
+                        title=${swatch.name}
+                        data-color-name=${swatch.name}
+                        @click=${() => {
+                    this.color = swatch.value;
+                    this._colorMenuOpen = false;
+                }}
+                      >
+                        <span
+                          class="picker-swatch"
+                          style=${styleMap({ background: swatch.value })}
+                        ></span>
+                      </button>
+                    `)}
+                </div>
+              </div>
+            `
+                : nothing}
+
+        <div class="picker-scroll">
+          ${this._recent.length && !this._keyword
+                ? this._renderGroup(RECENT_GROUP_NAME, this._recent)
+                : nothing}
+          ${icons.length
+                ? this._renderGroup('Icons', icons.map(icon => icon.name))
+                : html `<div class="picker-empty">No icon found</div>`}
+        </div>
+      </div>
+    `;
+        }
+    };
+})();
+export { AffineIconPickerPanel };

package/dist/_pkgs/affine-components/icon-picker/emoji-data.d.ts

@@ -0,0 +1,40 @@
+export interface PickerEmoji {
+    id: string;
+    name: string;
+    /** Lower-cased tokens the filter matches against. */
+    keywords: string[];
+    /** Native strings, one per skin tone. Index 0 is the neutral variant. */
+    skins: string[];
+}
+export interface EmojiGroup {
+    id: string;
+    name: string;
+    /** The emoji shown for this group in the group navigation bar. */
+    symbol: string;
+    emojis: PickerEmoji[];
+}
+export declare const RECENT_GROUP_NAME = "Recent";
+/**
+ * Builds (once) the grouped emoji list the picker renders. Upstream pays this
+ * cost at build time by committing a generated JSON; grouping 1.8k entries
+ * costs a couple of milliseconds, so we do it lazily at first use instead.
+ */
+export declare const getEmojiGroups: () => EmojiGroup[];
+/**
+ * Resolves the native string for a skin tone, falling back to the neutral
+ * variant whenever an emoji has no tone of its own.
+ */
+export declare const emojiUnicode: (emoji: PickerEmoji, skin?: number) => string;
+/**
+ * Filters every group by keyword, dropping the groups left empty. An empty
+ * keyword returns the groups untouched.
+ */
+export declare const filterEmojiGroups: (groups: EmojiGroup[], keyword: string) => EmojiGroup[];
+/**
+ * The tone swatches shown in the skin-tone menu. `undefined` is the neutral
+ * (yellow) variant.
+ */
+export declare const SKIN_TONES: ReadonlyArray<{
+    unicode: string;
+    value: number | undefined;
+}>;

package/dist/_pkgs/affine-components/icon-picker/emoji-data.js

@@ -0,0 +1,99 @@
+import emojiMartData, {} from '@emoji-mart/data';
+/**
+ * Upstream groups its emojis into eight buckets with hand-drawn nav icons. The
+ * dataset we already ship (`@emoji-mart/data`, used by the callout block) is
+ * carved into the very same eight categories, so we reuse them rather than add
+ * a second emoji dataset. `component` (skin-tone modifiers and hair
+ * components) is skipped for the same reason upstream skips group 2: those are
+ * not standalone emojis.
+ */
+const GROUP_ORDER = [
+    { id: 'people', name: 'Smileys & People', symbol: '😀' },
+    { id: 'nature', name: 'Animals & Nature', symbol: '🐻' },
+    { id: 'foods', name: 'Food & Drink', symbol: '🍔' },
+    { id: 'activity', name: 'Activity', symbol: '⚽' },
+    { id: 'places', name: 'Travel & Places', symbol: '🚗' },
+    { id: 'objects', name: 'Objects', symbol: '💡' },
+    { id: 'symbols', name: 'Symbols', symbol: '🔣' },
+    { id: 'flags', name: 'Flags', symbol: '🏳️' },
+];
+export const RECENT_GROUP_NAME = 'Recent';
+const toKeywords = (id, name, keywords) => {
+    const tokens = new Set();
+    for (const keyword of keywords)
+        tokens.add(keyword.toLowerCase());
+    for (const word of name.toLowerCase().split(/[\s-]+/)) {
+        if (word)
+            tokens.add(word);
+    }
+    tokens.add(id.toLowerCase());
+    return [...tokens];
+};
+let cachedGroups = null;
+/**
+ * Builds (once) the grouped emoji list the picker renders. Upstream pays this
+ * cost at build time by committing a generated JSON; grouping 1.8k entries
+ * costs a couple of milliseconds, so we do it lazily at first use instead.
+ */
+export const getEmojiGroups = () => {
+    if (cachedGroups)
+        return cachedGroups;
+    const data = emojiMartData;
+    const byId = data.emojis ?? {};
+    cachedGroups = GROUP_ORDER.map(({ id, name, symbol }) => {
+        const category = data.categories?.find(candidate => candidate.id === id);
+        const emojis = [];
+        for (const emojiId of category?.emojis ?? []) {
+            const emoji = byId[emojiId];
+            if (!emoji)
+                continue;
+            const skins = emoji.skins.map(skin => skin.native).filter(Boolean);
+            if (!skins.length)
+                continue;
+            emojis.push({
+                id: emoji.id,
+                name: emoji.name,
+                keywords: toKeywords(emoji.id, emoji.name, emoji.keywords ?? []),
+                skins,
+            });
+        }
+        return { id, name, symbol, emojis };
+    });
+    return cachedGroups;
+};
+/**
+ * Resolves the native string for a skin tone, falling back to the neutral
+ * variant whenever an emoji has no tone of its own.
+ */
+export const emojiUnicode = (emoji, skin) => {
+    if (skin === undefined)
+        return emoji.skins[0];
+    return emoji.skins[skin] ?? emoji.skins[0];
+};
+/**
+ * Filters every group by keyword, dropping the groups left empty. An empty
+ * keyword returns the groups untouched.
+ */
+export const filterEmojiGroups = (groups, keyword) => {
+    const needle = keyword.trim().toLowerCase();
+    if (!needle)
+        return groups;
+    return groups
+        .map(group => ({
+        ...group,
+        emojis: group.emojis.filter(emoji => emoji.keywords.some(candidate => candidate.includes(needle))),
+    }))
+        .filter(group => group.emojis.length > 0);
+};
+/**
+ * The tone swatches shown in the skin-tone menu. `undefined` is the neutral
+ * (yellow) variant.
+ */
+export const SKIN_TONES = [
+    { unicode: '👋', value: undefined },
+    { unicode: '👋🏻', value: 1 },
+    { unicode: '👋🏼', value: 2 },
+    { unicode: '👋🏽', value: 3 },
+    { unicode: '👋🏾', value: 4 },
+    { unicode: '👋🏿', value: 5 },
+];

package/dist/_pkgs/affine-components/icon-picker/emoji-picker-panel.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import { type EmojiGroup } from './emoji-data.js';
+/**
+ * The emoji half of the picker: a filter box, a skin-tone menu, a recents row
+ * and the eight emoji groups, with a footer that jumps to a group.
+ */
+export declare class AffineEmojiPickerPanel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private accessor _keyword;
+    private accessor _skin;
+    private accessor _skinMenuOpen;
+    private accessor _recent;
+    private accessor _activeGroup;
+    private accessor _scroll;
+    /**
+     * Whether picked emojis are remembered in `localStorage`. Hosts that must
+     * not write to it (or tests) can turn this off.
+     */
+    accessor rememberRecent: boolean;
+    get groups(): EmojiGroup[];
+    firstUpdated(): void;
+    private readonly _select;
+    private readonly _jumpTo;
+    private readonly _syncActiveGroup;
+    private _renderGroup;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'affine-emoji-picker-panel': AffineEmojiPickerPanel;
+    }
+}