@formicoidea/labre-core 0.31.0 → 0.33.0

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

@@ -0,0 +1,15 @@
+import { AffineIconPickerPanel } from './affine-icon-picker-panel.js';
+import { AffineEmojiPickerPanel } from './emoji-picker-panel.js';
+import { AffineIconPicker } from './icon-picker.js';
+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 function effects() {
+    customElements.define('affine-icon-picker', AffineIconPicker);
+    customElements.define('affine-emoji-picker-panel', AffineEmojiPickerPanel);
+    customElements.define('affine-icon-picker-panel', AffineIconPickerPanel);
+}

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

@@ -0,0 +1,8 @@
+export declare const RECENT_EMOJIS_KEY = "affine:icon-picker:recent-emojis";
+export declare const RECENT_ICONS_KEY = "affine:icon-picker:recent-icons";
+export declare const readRecent: (key: string) => string[];
+/**
+ * Pushes `value` to the front of the recents, de-duplicating and capping the
+ * list, and returns the new list even when it could not be persisted.
+ */
+export declare const pushRecent: (key: string, value: string) => string[];

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

@@ -0,0 +1,41 @@
+export const RECENT_EMOJIS_KEY = 'affine:icon-picker:recent-emojis';
+export const RECENT_ICONS_KEY = 'affine:icon-picker:recent-icons';
+const MAX_RECENT = 10;
+/**
+ * `localStorage` throws outright in a few environments (private mode quotas,
+ * sandboxed frames, some test runners), and a picker is never important enough
+ * to take the host down with it — every access is therefore best-effort.
+ */
+const storage = () => {
+    try {
+        return globalThis.localStorage ?? null;
+    }
+    catch {
+        return null;
+    }
+};
+export const readRecent = (key) => {
+    try {
+        const raw = storage()?.getItem(key);
+        if (!raw)
+            return [];
+        return raw.split(',').filter(Boolean);
+    }
+    catch {
+        return [];
+    }
+};
+/**
+ * Pushes `value` to the front of the recents, de-duplicating and capping the
+ * list, and returns the new list even when it could not be persisted.
+ */
+export const pushRecent = (key, value) => {
+    const next = [value, ...readRecent(key).filter(item => item !== value)].slice(0, MAX_RECENT);
+    try {
+        storage()?.setItem(key, next.join(','));
+    }
+    catch {
+        // best-effort: the caller still gets the updated list for this session
+    }
+    return next;
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Layout shared by both panels: a search header, a scrollable grid of groups
+ * and — for the emoji panel — a group navigation footer.
+ */
+export declare const panelStyles: import("lit").CSSResult;

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

@@ -0,0 +1,166 @@
+import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
+import { css } from 'lit';
+/**
+ * Layout shared by both panels: a search header, a scrollable grid of groups
+ * and — for the emoji panel — a group navigation footer.
+ */
+export const panelStyles = css `
+  .picker-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    font-family: var(--affine-font-family);
+    color: ${unsafeCSSVarV2('text/primary')};
+  }
+
+  .picker-search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    flex: none;
+  }
+
+  .picker-search-input {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    height: 32px;
+    padding: 0 10px;
+    border-radius: 4px;
+    border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+    background: ${unsafeCSSVarV2('layer/background/primary')};
+  }
+
+  .picker-search-input svg {
+    flex: none;
+    font-size: 16px;
+    color: ${unsafeCSSVarV2('icon/primary')};
+  }
+
+  .picker-search-input input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: var(--affine-font-sm);
+    font-family: inherit;
+    color: inherit;
+  }
+
+  .picker-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 4px;
+    border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+    background: transparent;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  .picker-popup {
+    display: flex;
+    gap: 2px;
+    padding: 4px;
+    border-radius: 4px;
+    border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+    background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
+    box-shadow: var(--affine-shadow-2);
+  }
+
+  .picker-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0 12px 8px;
+  }
+
+  .picker-group-name {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 6px 0 4px;
+    font-size: var(--affine-font-xs);
+    font-weight: 500;
+    color: ${unsafeCSSVarV2('text/secondary')};
+    background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
+  }
+
+  .picker-group-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+    gap: 2px;
+  }
+
+  .picker-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 4px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 20px;
+    line-height: 1;
+  }
+
+  .picker-cell svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  .picker-cell:hover,
+  .picker-trigger:hover {
+    background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+  }
+
+  .picker-empty {
+    padding: 24px 0;
+    text-align: center;
+    font-size: var(--affine-font-sm);
+    color: ${unsafeCSSVarV2('text/secondary')};
+  }
+
+  .picker-footer {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex: none;
+    padding: 4px 12px 8px;
+    border-top: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+  }
+
+  .picker-footer button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+    opacity: 0.6;
+  }
+
+  .picker-footer button[data-active='true'],
+  .picker-footer button:hover {
+    opacity: 1;
+    background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+  }
+`;

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

@@ -0,0 +1,22 @@
+/**
+ * The payload a picker emits. Mirrors the shape upstream settled on for its
+ * `IconPickerService` seam, minus the `blob` variant: this picker has no
+ * upload panel, so it never produces one.
+ */
+export declare enum IconType {
+    AffineIcon = "affine-icon",
+    Emoji = "emoji"
+}
+export type IconData = {
+    type: IconType.Emoji;
+    unicode: string;
+} | {
+    type: IconType.AffineIcon;
+    name: string;
+    color: string;
+};
+/**
+ * `null` means "the user asked to remove the current icon".
+ */
+export type IconPickerSelectDetail = IconData | null;
+export type IconPickerTab = 'emoji' | 'icons';

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

@@ -0,0 +1,10 @@
+/**
+ * The payload a picker emits. Mirrors the shape upstream settled on for its
+ * `IconPickerService` seam, minus the `blob` variant: this picker has no
+ * upload panel, so it never produces one.
+ */
+export var IconType;
+(function (IconType) {
+    IconType["AffineIcon"] = "affine-icon";
+    IconType["Emoji"] = "emoji";
+})(IconType || (IconType = {}));