@formicoidea/labre-core 0.31.0 → 0.32.0

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

@@ -0,0 +1,276 @@
+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, query, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { emojiUnicode, filterEmojiGroups, getEmojiGroups, RECENT_GROUP_NAME, SKIN_TONES, } from './emoji-data.js';
+import { pushRecent, readRecent, RECENT_EMOJIS_KEY } from './recent-store.js';
+import { panelStyles } from './styles.js';
+import { IconType } from './types.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.
+ */
+let AffineEmojiPickerPanel = (() => {
+    let _classSuper = LitElement;
+    let __keyword_decorators;
+    let __keyword_initializers = [];
+    let __keyword_extraInitializers = [];
+    let __skin_decorators;
+    let __skin_initializers = [];
+    let __skin_extraInitializers = [];
+    let __skinMenuOpen_decorators;
+    let __skinMenuOpen_initializers = [];
+    let __skinMenuOpen_extraInitializers = [];
+    let __recent_decorators;
+    let __recent_initializers = [];
+    let __recent_extraInitializers = [];
+    let __activeGroup_decorators;
+    let __activeGroup_initializers = [];
+    let __activeGroup_extraInitializers = [];
+    let __scroll_decorators;
+    let __scroll_initializers = [];
+    let __scroll_extraInitializers = [];
+    let _rememberRecent_decorators;
+    let _rememberRecent_initializers = [];
+    let _rememberRecent_extraInitializers = [];
+    return class AffineEmojiPickerPanel extends _classSuper {
+        constructor() {
+            super(...arguments);
+            this.#_keyword_accessor_storage = __runInitializers(this, __keyword_initializers, '');
+            this.#_skin_accessor_storage = (__runInitializers(this, __keyword_extraInitializers), __runInitializers(this, __skin_initializers, undefined));
+            this.#_skinMenuOpen_accessor_storage = (__runInitializers(this, __skin_extraInitializers), __runInitializers(this, __skinMenuOpen_initializers, false));
+            this.#_recent_accessor_storage = (__runInitializers(this, __skinMenuOpen_extraInitializers), __runInitializers(this, __recent_initializers, []));
+            this.#_activeGroup_accessor_storage = (__runInitializers(this, __recent_extraInitializers), __runInitializers(this, __activeGroup_initializers, RECENT_GROUP_NAME));
+            this.#_scroll_accessor_storage = (__runInitializers(this, __activeGroup_extraInitializers), __runInitializers(this, __scroll_initializers, void 0));
+            this.#rememberRecent_accessor_storage = (__runInitializers(this, __scroll_extraInitializers), __runInitializers(this, _rememberRecent_initializers, true));
+            this._select = (__runInitializers(this, _rememberRecent_extraInitializers), (unicode) => {
+                if (this.rememberRecent) {
+                    this._recent = pushRecent(RECENT_EMOJIS_KEY, unicode);
+                }
+                this.dispatchEvent(new CustomEvent('select', {
+                    detail: { type: IconType.Emoji, unicode },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+            this._jumpTo = (groupName) => {
+                this._activeGroup = groupName;
+                const target = [
+                    ...(this._scroll?.querySelectorAll('[data-group-name]') ??
+                        []),
+                ].find(heading => heading.dataset.groupName === groupName);
+                target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            };
+            this._syncActiveGroup = () => {
+                const scroll = this._scroll;
+                if (!scroll)
+                    return;
+                const headings = [
+                    ...scroll.querySelectorAll('[data-group-name]'),
+                ];
+                // The last heading that has already passed the top of the viewport wins.
+                let active = headings[0]?.dataset.groupName;
+                for (const heading of headings) {
+                    if (heading.offsetTop - scroll.scrollTop > 8)
+                        break;
+                    active = heading.dataset.groupName;
+                }
+                if (active && active !== this._activeGroup)
+                    this._activeGroup = active;
+            };
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __keyword_decorators = [state()];
+            __skin_decorators = [state()];
+            __skinMenuOpen_decorators = [state()];
+            __recent_decorators = [state()];
+            __activeGroup_decorators = [state()];
+            __scroll_decorators = [query('.picker-scroll')];
+            _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, __skin_decorators, { kind: "accessor", name: "_skin", static: false, private: false, access: { has: obj => "_skin" in obj, get: obj => obj._skin, set: (obj, value) => { obj._skin = value; } }, metadata: _metadata }, __skin_initializers, __skin_extraInitializers);
+            __esDecorate(this, null, __skinMenuOpen_decorators, { kind: "accessor", name: "_skinMenuOpen", static: false, private: false, access: { has: obj => "_skinMenuOpen" in obj, get: obj => obj._skinMenuOpen, set: (obj, value) => { obj._skinMenuOpen = value; } }, metadata: _metadata }, __skinMenuOpen_initializers, __skinMenuOpen_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, __activeGroup_decorators, { kind: "accessor", name: "_activeGroup", static: false, private: false, access: { has: obj => "_activeGroup" in obj, get: obj => obj._activeGroup, set: (obj, value) => { obj._activeGroup = value; } }, metadata: _metadata }, __activeGroup_initializers, __activeGroup_extraInitializers);
+            __esDecorate(this, null, __scroll_decorators, { kind: "accessor", name: "_scroll", static: false, private: false, access: { has: obj => "_scroll" in obj, get: obj => obj._scroll, set: (obj, value) => { obj._scroll = value; } }, metadata: _metadata }, __scroll_initializers, __scroll_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;
+      }
+    `,
+        ]; }
+        #_keyword_accessor_storage;
+        get _keyword() { return this.#_keyword_accessor_storage; }
+        set _keyword(value) { this.#_keyword_accessor_storage = value; }
+        #_skin_accessor_storage;
+        get _skin() { return this.#_skin_accessor_storage; }
+        set _skin(value) { this.#_skin_accessor_storage = value; }
+        #_skinMenuOpen_accessor_storage;
+        get _skinMenuOpen() { return this.#_skinMenuOpen_accessor_storage; }
+        set _skinMenuOpen(value) { this.#_skinMenuOpen_accessor_storage = value; }
+        #_recent_accessor_storage;
+        get _recent() { return this.#_recent_accessor_storage; }
+        set _recent(value) { this.#_recent_accessor_storage = value; }
+        #_activeGroup_accessor_storage;
+        get _activeGroup() { return this.#_activeGroup_accessor_storage; }
+        set _activeGroup(value) { this.#_activeGroup_accessor_storage = value; }
+        #_scroll_accessor_storage;
+        get _scroll() { return this.#_scroll_accessor_storage; }
+        set _scroll(value) { this.#_scroll_accessor_storage = value; }
+        #rememberRecent_accessor_storage;
+        /**
+         * Whether picked emojis are remembered in `localStorage`. Hosts that must
+         * not write to it (or tests) can turn this off.
+         */
+        get rememberRecent() { return this.#rememberRecent_accessor_storage; }
+        set rememberRecent(value) { this.#rememberRecent_accessor_storage = value; }
+        get groups() {
+            return filterEmojiGroups(getEmojiGroups(), this._keyword);
+        }
+        firstUpdated() {
+            if (this.rememberRecent)
+                this._recent = readRecent(RECENT_EMOJIS_KEY);
+        }
+        _renderGroup(name, unicodes) {
+            return html `
+      <div class="picker-group">
+        <div class="picker-group-name" data-group-name=${name}>${name}</div>
+        <div class="picker-group-grid">
+          ${repeat(unicodes, unicode => unicode, unicode => html `
+              <button
+                class="picker-cell"
+                type="button"
+                title=${unicode}
+                @click=${() => this._select(unicode)}
+              >
+                ${unicode}
+              </button>
+            `)}
+        </div>
+      </div>
+    `;
+        }
+        render() {
+            const groups = this.groups;
+            const skinSymbol = SKIN_TONES.find(tone => tone.value === this._skin)?.unicode ??
+                SKIN_TONES[0].unicode;
+            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="skin-tone-trigger"
+            @click=${() => (this._skinMenuOpen = !this._skinMenuOpen)}
+          >
+            ${skinSymbol}
+          </button>
+        </header>
+
+        ${this._skinMenuOpen
+                ? html `
+              <div class="picker-search">
+                <div class="picker-popup" data-testid="skin-tone-menu">
+                  ${repeat(SKIN_TONES, tone => tone.unicode, tone => html `
+                      <button
+                        class="picker-cell"
+                        type="button"
+                        @click=${() => {
+                    this._skin = tone.value;
+                    this._skinMenuOpen = false;
+                }}
+                      >
+                        ${tone.unicode}
+                      </button>
+                    `)}
+                </div>
+              </div>
+            `
+                : nothing}
+
+        <div class="picker-scroll" @scroll=${this._syncActiveGroup}>
+          ${this._recent.length && !this._keyword
+                ? this._renderGroup(RECENT_GROUP_NAME, this._recent)
+                : nothing}
+          ${groups.length
+                ? repeat(groups, group => group.id, group => this._renderGroup(group.name, group.emojis.map(emoji => emojiUnicode(emoji, this._skin))))
+                : html `<div class="picker-empty">No emoji found</div>`}
+        </div>
+
+        <footer class="picker-footer">
+          ${repeat([
+                { name: RECENT_GROUP_NAME, symbol: '🕘' },
+                ...getEmojiGroups().map(group => ({
+                    name: group.name,
+                    symbol: group.symbol,
+                })),
+            ], group => group.name, group => html `
+              <button
+                type="button"
+                title=${group.name}
+                data-active=${this._activeGroup === group.name}
+                @click=${() => this._jumpTo(group.name)}
+              >
+                ${group.symbol}
+              </button>
+            `)}
+        </footer>
+      </div>
+    `;
+        }
+    };
+})();
+export { AffineEmojiPickerPanel };

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

@@ -0,0 +1,34 @@
+import { nothing, type TemplateResult } from 'lit';
+export type IconFactory = (options?: {
+    width?: string;
+    height?: string;
+    style?: string;
+}) => TemplateResult<1>;
+export interface PickerIcon {
+    /** The icon name without its `Icon` suffix, e.g. `AddTag`. */
+    name: string;
+    /** Lower-cased tokens the filter matches against. */
+    keywords: string[];
+    render: IconFactory;
+}
+export declare const getIcons: () => PickerIcon[];
+export declare const findIcon: (name: string) => PickerIcon | undefined;
+/**
+ * Renders a picked icon by name. Unknown names render nothing rather than
+ * throwing, so a document holding an icon this build no longer knows about
+ * still paints.
+ */
+export declare const renderAffineIcon: (name: string, options?: {
+    width?: string;
+    height?: string;
+    style?: string;
+}) => TemplateResult<1> | typeof nothing;
+export declare const filterIcons: (icons: PickerIcon[], keyword: string) => PickerIcon[];
+/**
+ * The nine tints upstream offers for a picked icon.
+ */
+export declare const ICON_COLORS: ReadonlyArray<{
+    name: string;
+    value: string;
+}>;
+export declare const DEFAULT_ICON_COLOR: string;

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

@@ -0,0 +1,83 @@
+import * as allIcons from '@blocksuite/icons/lit';
+import { nothing } from 'lit';
+const isIconFactory = (value) => typeof value === 'function';
+/**
+ * Upstream ships a curated `Emoji Panel` list inside a newer
+ * `@blocksuite/icons` release, keyed by hand-written keywords. We keep the
+ * version we already depend on and derive both the list and its keywords from
+ * the module's own exports: every `…Icon` export is offered, and its name is
+ * split on camel-case boundaries so that `AddTag` answers to `add` and `tag`.
+ */
+const toKeywords = (name) => {
+    const tokens = new Set([name.toLowerCase()]);
+    for (const word of name.split(/(?=[A-Z0-9])/)) {
+        const token = word.trim().toLowerCase();
+        if (token)
+            tokens.add(token);
+    }
+    return [...tokens];
+};
+let cachedIcons = null;
+export const getIcons = () => {
+    if (cachedIcons)
+        return cachedIcons;
+    const icons = [];
+    for (const [exportName, value] of Object.entries(allIcons)) {
+        if (!exportName.endsWith('Icon') || !isIconFactory(value))
+            continue;
+        const name = exportName.slice(0, -'Icon'.length);
+        if (!name)
+            continue;
+        icons.push({ name, keywords: toKeywords(name), render: value });
+    }
+    cachedIcons = icons.sort((a, b) => a.name.localeCompare(b.name));
+    return cachedIcons;
+};
+export const findIcon = (name) => getIcons().find(icon => icon.name === name);
+/**
+ * Renders a picked icon by name. Unknown names render nothing rather than
+ * throwing, so a document holding an icon this build no longer knows about
+ * still paints.
+ */
+export const renderAffineIcon = (name, options) => {
+    const icon = findIcon(name);
+    if (!icon)
+        return nothing;
+    return icon.render(options);
+};
+export const filterIcons = (icons, keyword) => {
+    const needle = keyword.trim().toLowerCase();
+    if (!needle)
+        return icons;
+    return icons.filter(icon => icon.keywords.some(candidate => candidate.includes(needle)));
+};
+/**
+ * The nine tints upstream offers for a picked icon.
+ */
+export const ICON_COLORS = [
+    { name: 'red', value: 'var(--affine-v2-block-callout-icon-red, #c83030)' },
+    {
+        name: 'orange',
+        value: 'var(--affine-v2-block-callout-icon-orange, #ffae63)',
+    },
+    {
+        name: 'yellow',
+        value: 'var(--affine-v2-block-callout-icon-yellow, #fde047)',
+    },
+    {
+        name: 'green',
+        value: 'var(--affine-v2-block-callout-icon-green, #22bf07)',
+    },
+    { name: 'teal', value: 'var(--affine-v2-block-callout-icon-teal, #448e86)' },
+    { name: 'blue', value: 'var(--affine-v2-block-callout-icon-blue, #53b2ef)' },
+    {
+        name: 'purple',
+        value: 'var(--affine-v2-block-callout-icon-purple, #7c3aed)',
+    },
+    {
+        name: 'magenta',
+        value: 'var(--affine-v2-block-callout-icon-magenta, #cc4187)',
+    },
+    { name: 'grey', value: 'var(--affine-v2-block-callout-icon-grey, #cdcdcd)' },
+];
+export const DEFAULT_ICON_COLOR = ICON_COLORS[5].value;

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import type { IconPickerTab } from './types.js';
+/**
+ * A standalone emoji + icon picker, ported from upstream's React component.
+ *
+ * It is deliberately wired to nothing: it dispatches a bubbling, composed
+ * `select` event carrying an `IconData` (or `null` when the user asks to
+ * remove the current icon) and lets the host decide what that means.
+ *
+ * ```ts
+ * html`<affine-icon-picker
+ *   @select=${(e: CustomEvent<IconPickerSelectDetail>) => apply(e.detail)}
+ * ></affine-icon-picker>`
+ * ```
+ */
+export declare class AffineIconPicker extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The panel currently shown. Upstream opens on Icons; a host may set another
+     * tab up front, and clicking a tab writes back here.
+     */
+    accessor activeTab: IconPickerTab;
+    /**
+     * The tint the icon panel starts on.
+     */
+    accessor color: string;
+    /**
+     * Hides the "Remove" affordance for hosts where an icon is mandatory.
+     */
+    accessor showRemove: boolean;
+    accessor rememberRecent: boolean;
+    private readonly _remove;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'affine-icon-picker': AffineIconPicker;
+    }
+}

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

@@ -0,0 +1,233 @@
+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 { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DEFAULT_ICON_COLOR } from './icon-data.js';
+const TABS = [
+    { value: 'emoji', label: 'Emoji' },
+    { value: 'icons', label: 'Icons' },
+];
+/**
+ * A standalone emoji + icon picker, ported from upstream's React component.
+ *
+ * It is deliberately wired to nothing: it dispatches a bubbling, composed
+ * `select` event carrying an `IconData` (or `null` when the user asks to
+ * remove the current icon) and lets the host decide what that means.
+ *
+ * ```ts
+ * html`<affine-icon-picker
+ *   @select=${(e: CustomEvent<IconPickerSelectDetail>) => apply(e.detail)}
+ * ></affine-icon-picker>`
+ * ```
+ */
+let AffineIconPicker = (() => {
+    let _classSuper = LitElement;
+    let _activeTab_decorators;
+    let _activeTab_initializers = [];
+    let _activeTab_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _showRemove_decorators;
+    let _showRemove_initializers = [];
+    let _showRemove_extraInitializers = [];
+    let _rememberRecent_decorators;
+    let _rememberRecent_initializers = [];
+    let _rememberRecent_extraInitializers = [];
+    return class AffineIconPicker extends _classSuper {
+        constructor() {
+            super(...arguments);
+            this.#activeTab_accessor_storage = __runInitializers(this, _activeTab_initializers, 'icons');
+            this.#color_accessor_storage = (__runInitializers(this, _activeTab_extraInitializers), __runInitializers(this, _color_initializers, DEFAULT_ICON_COLOR));
+            this.#showRemove_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _showRemove_initializers, true));
+            this.#rememberRecent_accessor_storage = (__runInitializers(this, _showRemove_extraInitializers), __runInitializers(this, _rememberRecent_initializers, true));
+            this._remove = (__runInitializers(this, _rememberRecent_extraInitializers), () => {
+                this.dispatchEvent(new CustomEvent('select', {
+                    detail: null,
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _activeTab_decorators = [property({ attribute: false })];
+            _color_decorators = [property({ attribute: false })];
+            _showRemove_decorators = [property({ attribute: false })];
+            _rememberRecent_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _activeTab_decorators, { kind: "accessor", name: "activeTab", static: false, private: false, access: { has: obj => "activeTab" in obj, get: obj => obj.activeTab, set: (obj, value) => { obj.activeTab = value; } }, metadata: _metadata }, _activeTab_initializers, _activeTab_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, _showRemove_decorators, { kind: "accessor", name: "showRemove", static: false, private: false, access: { has: obj => "showRemove" in obj, get: obj => obj.showRemove, set: (obj, value) => { obj.showRemove = value; } }, metadata: _metadata }, _showRemove_initializers, _showRemove_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 = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 340px;
+      height: 400px;
+      border-radius: 8px;
+      border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+      background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
+      box-shadow: var(--affine-shadow-2);
+      overflow: hidden;
+      font-family: var(--affine-font-family);
+      color: ${unsafeCSSVarV2('text/primary')};
+    }
+
+    .icon-picker-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex: none;
+      padding: 10px 12px 0;
+      border-bottom: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+    }
+
+    .icon-picker-tabs {
+      display: flex;
+      gap: 12px;
+    }
+
+    .icon-picker-tabs button {
+      position: relative;
+      padding: 0 0 8px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: var(--affine-font-sm);
+      font-weight: 500;
+      color: ${unsafeCSSVarV2('text/secondary')};
+    }
+
+    .icon-picker-tabs button[data-active='true'] {
+      color: ${unsafeCSSVarV2('text/primary')};
+    }
+
+    .icon-picker-tabs button[data-active='true']::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      background: ${unsafeCSSVarV2('button/primary')};
+    }
+
+    .icon-picker-remove {
+      padding: 0 0 8px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: var(--affine-font-sm);
+      font-weight: 500;
+      color: ${unsafeCSSVarV2('text/secondary')};
+    }
+
+    .icon-picker-body {
+      flex: 1;
+      min-height: 0;
+    }
+  `; }
+        #activeTab_accessor_storage;
+        /**
+         * The panel currently shown. Upstream opens on Icons; a host may set another
+         * tab up front, and clicking a tab writes back here.
+         */
+        get activeTab() { return this.#activeTab_accessor_storage; }
+        set activeTab(value) { this.#activeTab_accessor_storage = value; }
+        #color_accessor_storage;
+        /**
+         * The tint the icon panel starts on.
+         */
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        #showRemove_accessor_storage;
+        /**
+         * Hides the "Remove" affordance for hosts where an icon is mandatory.
+         */
+        get showRemove() { return this.#showRemove_accessor_storage; }
+        set showRemove(value) { this.#showRemove_accessor_storage = value; }
+        #rememberRecent_accessor_storage;
+        get rememberRecent() { return this.#rememberRecent_accessor_storage; }
+        set rememberRecent(value) { this.#rememberRecent_accessor_storage = value; }
+        render() {
+            return html `
+      <header class="icon-picker-header">
+        <div class="icon-picker-tabs">
+          ${TABS.map(tab => html `
+              <button
+                type="button"
+                data-tab=${tab.value}
+                data-active=${this.activeTab === tab.value}
+                @click=${() => (this.activeTab = tab.value)}
+              >
+                ${tab.label}
+              </button>
+            `)}
+        </div>
+        ${this.showRemove
+                ? html `
+              <button
+                class="icon-picker-remove"
+                type="button"
+                data-testid="icon-picker-remove"
+                @click=${this._remove}
+              >
+                Remove
+              </button>
+            `
+                : null}
+      </header>
+      <main class="icon-picker-body">
+        ${this.activeTab === 'emoji'
+                ? html `<affine-emoji-picker-panel
+              .rememberRecent=${this.rememberRecent}
+            ></affine-emoji-picker-panel>`
+                : html `<affine-icon-picker-panel
+              .color=${this.color}
+              .rememberRecent=${this.rememberRecent}
+            ></affine-icon-picker-panel>`}
+      </main>
+    `;
+        }
+    };
+})();
+export { AffineIconPicker };

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

@@ -0,0 +1,8 @@
+export * from './affine-icon-picker-panel.js';
+export * from './emoji-data.js';
+export * from './emoji-picker-panel.js';
+export * from './icon-data.js';
+export * from './icon-picker.js';
+export * from './recent-store.js';
+export * from './types.js';
+export declare function effects(): void;