@formicoidea/labre-core 0.31.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,7 +1,12 @@
+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';
 export * from './draggable/index.js';
 export * from './edgeless-toolbar.js';
 export * from './extension/index.js';
+export * from './menu/command-menu.js';
 export * from './mixins/index.js';

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

@@ -1,7 +1,12 @@
+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';
 export * from './draggable/index.js';
 export * from './edgeless-toolbar.js';
 export * from './extension/index.js';
+export * from './menu/command-menu.js';
 export * from './mixins/index.js';

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

@@ -0,0 +1,57 @@
+import { type CommandDescriptor, type CommandOwner } from '../../std/index.js';
+import { type CSSResultGroup, LitElement } from 'lit';
+declare const EdgelessCommandMenu_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../index.js").EdgelessToolbarToolClass>;
+/**
+ * The senior button sub-menu, rendered FROM the command registry.
+ *
+ * Before PF3 each framework hand-wrote this popover with a literal button per
+ * artefact, an inline English tooltip and its own `_track()` helper — which is
+ * how Wardley's menu drifted to 13 artefacts against 7 in the shortcut
+ * manifest, and how cynefin-estuarine ended up emitting no telemetry at all.
+ * There is now exactly one renderer, and it enumerates
+ * `getCommandsForSurface(std, owner, 'senior-menu')`. A framework subclass
+ * declares its owner and its tool type, nothing else. See `docs/adr/0008`.
+ */
+export declare abstract class EdgelessCommandMenu extends EdgelessCommandMenu_base {
+    /**
+     * Typed as a group so a subclass can extend rather than replace it — the DDD
+     * palettes narrow `--labre-command-menu-gap`.
+     */
+    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;
+    /**
+     * What the button says on hover: its label, plus — when the command declares
+     * one — the sentence that tells the user what its GESTURE means.
+     *
+     * That second line is M1 of `docs/adr/0010`: a link tool whose drag decides
+     * the orientation of a persisted relation has to SAY so, or the direction it
+     * writes is a by-product rather than a statement. The library still puts no
+     * words in a framework's mouth — both halves are the framework's own keys and
+     * 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

@@ -0,0 +1,140 @@
+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.
+ *
+ * Before PF3 each framework hand-wrote this popover with a literal button per
+ * artefact, an inline English tooltip and its own `_track()` helper — which is
+ * how Wardley's menu drifted to 13 artefacts against 7 in the shortcut
+ * manifest, and how cynefin-estuarine ended up emitting no telemetry at all.
+ * There is now exactly one renderer, and it enumerates
+ * `getCommandsForSurface(std, owner, 'senior-menu')`. A framework subclass
+ * declares its owner and its tool type, nothing else. See `docs/adr/0008`.
+ */
+export class EdgelessCommandMenu extends EdgelessToolbarToolMixin(LitElement) {
+    /**
+     * Typed as a group so a subclass can extend rather than replace it — the DDD
+     * palettes narrow `--labre-command-menu-gap`.
+     */
+    static { this.styles = css `
+    :host {
+      display: flex;
+      z-index: -1;
+      justify-content: center;
+    }
+    .menu-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .button-group-container {
+      display: flex;
+      align-items: center;
+      gap: var(--labre-command-menu-gap, 14px);
+      fill: var(--affine-icon-color);
+    }
+    .button-group-container svg {
+      width: 24px;
+      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 this._selection.commands;
+    }
+    _invoke(command) {
+        // The ONE emission point: no `_track()` helper anywhere in the menus.
+        runCommand(this.edgeless.std, command, {
+            surface: 'senior-menu',
+            source: 'toolbar:general',
+        });
+    }
+    /**
+     * What the button says on hover: its label, plus — when the command declares
+     * one — the sentence that tells the user what its GESTURE means.
+     *
+     * That second line is M1 of `docs/adr/0010`: a link tool whose drag decides
+     * the orientation of a persisted relation has to SAY so, or the direction it
+     * writes is a by-product rather than a statement. The library still puts no
+     * words in a framework's mouth — both halves are the framework's own keys and
+     * fallbacks, resolved through the host's catalogue.
+     */
+    _tooltip(command) {
+        const label = translateKey(this.edgeless.std, command.labelKey, command.labelFallback);
+        const { descriptionKey, descriptionFallback } = command;
+        if (!descriptionKey && !descriptionFallback)
+            return label;
+        const hint = descriptionKey
+            ? translateKey(this.edgeless.std, descriptionKey, descriptionFallback)
+            : descriptionFallback;
+        // A key with no catalogue entry and no fallback resolves to itself — show
+        // the label alone rather than a raw i18n key under it.
+        if (!hint || hint === descriptionKey)
+            return label;
+        // Inline, not a class: the template is rendered inside the icon button's
+        // own shadow root, where this component's stylesheet does not reach.
+        return 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"
+        >${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">
+            ${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-frame-title/edgeless-frame-title-editor.js

@@ -33,6 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { FrameBlockModel } from '../affine-model/index.js';
+import { toOverlayCoord } from '../affine-shared/utils/index.js';
 import { Bound } from '../global/gfx/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { ShadowlessElement } from '../std/index.js';
@@ -152,7 +153,9 @@ let EdgelessFrameTitleEditor = (() => {
                 return nothing;
             const viewport = this.gfx.viewport;
             const bound = Bound.deserialize(this.frameModel.xywh);
-            const [x, y] = viewport.toViewCoord(bound.x, bound.y);
+            // The editor is mounted inside the container the host may have scaled, so
+            // it is placed the way the title it replaces is, not in screen pixels.
+            const [x, y] = toOverlayCoord(viewport, bound.x, bound.y);
             const isInner = this.gfx.grid.has(this.frameModel.elementBound, true, true, model => model !== this.frameModel && model instanceof FrameBlockModel);
             const frameTitleWidget = this.edgeless.std.view.getWidget(AFFINE_FRAME_TITLE_WIDGET, this.frameModel.id);
             if (!frameTitleWidget)

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

@@ -19,105 +19,105 @@ export function HeadingIcon(i) {
             return Heading1Icon();
     }
 }
-export const HighLightDuotoneIcon = (color) => html `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-  >
-    <path
-      d="M5.8291 16.441L7.91757 18.5295L6.57811 19.8689C6.53119 19.9158 6.46406 19.9364 6.3989 19.9239L3.37036 19.3412C3.21285 19.3109 3.15331 19.1168 3.26673 19.0034L5.8291 16.441Z"
-      fill="${color}"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M19.0095 3.63759C17.9526 2.58067 16.26 2.516 15.1255 3.48919L7.32135 10.1837C6.35438 11.0132 6.05275 12.3823 6.58163 13.5414L6.73501 13.8775L5.67697 14.9356C5.30169 15.3108 5.30169 15.9193 5.67697 16.2946L8.06379 18.6814C8.43907 19.0567 9.04752 19.0567 9.4228 18.6814L10.4808 17.6234L10.8171 17.7768C11.9761 18.3057 13.3452 18.0041 14.1747 17.0371L20.8692 9.23294C21.8424 8.09846 21.7778 6.40588 20.7208 5.34896L19.0095 3.63759ZM16.1021 4.62769C16.6415 4.16498 17.4463 4.19572 17.9488 4.69825L19.6602 6.40962C20.1627 6.91215 20.1935 7.7169 19.7307 8.25631L14.6424 14.188L10.1704 9.71604L16.1021 4.62769ZM9.02857 10.6955L8.29798 11.3222C7.83822 11.7166 7.6948 12.3676 7.94627 12.9187L8.29785 13.6892C8.4348 13.9893 8.37947 14.3544 8.13372 14.6001L7.11878 15.6151L8.74329 17.2396L9.75812 16.2247C10.004 15.9789 10.3691 15.9236 10.6693 16.0606L11.4398 16.4122C11.9908 16.6636 12.6418 16.5202 13.0362 16.0605L13.6629 15.3299L9.02857 10.6955Z"
-      fill="${cssVarV2('icon/primary')}"
-    />
+export const HighLightDuotoneIcon = (color) => html `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M5.8291 16.441L7.91757 18.5295L6.57811 19.8689C6.53119 19.9158 6.46406 19.9364 6.3989 19.9239L3.37036 19.3412C3.21285 19.3109 3.15331 19.1168 3.26673 19.0034L5.8291 16.441Z"
+      fill="${color}"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19.0095 3.63759C17.9526 2.58067 16.26 2.516 15.1255 3.48919L7.32135 10.1837C6.35438 11.0132 6.05275 12.3823 6.58163 13.5414L6.73501 13.8775L5.67697 14.9356C5.30169 15.3108 5.30169 15.9193 5.67697 16.2946L8.06379 18.6814C8.43907 19.0567 9.04752 19.0567 9.4228 18.6814L10.4808 17.6234L10.8171 17.7768C11.9761 18.3057 13.3452 18.0041 14.1747 17.0371L20.8692 9.23294C21.8424 8.09846 21.7778 6.40588 20.7208 5.34896L19.0095 3.63759ZM16.1021 4.62769C16.6415 4.16498 17.4463 4.19572 17.9488 4.69825L19.6602 6.40962C20.1627 6.91215 20.1935 7.7169 19.7307 8.25631L14.6424 14.188L10.1704 9.71604L16.1021 4.62769ZM9.02857 10.6955L8.29798 11.3222C7.83822 11.7166 7.6948 12.3676 7.94627 12.9187L8.29785 13.6892C8.4348 13.9893 8.37947 14.3544 8.13372 14.6001L7.11878 15.6151L8.74329 17.2396L9.75812 16.2247C10.004 15.9789 10.3691 15.9236 10.6693 16.0606L11.4398 16.4122C11.9908 16.6636 12.6418 16.5202 13.0362 16.0605L13.6629 15.3299L9.02857 10.6955Z"
+      fill="${cssVarV2('icon/primary')}"
+    />
   </svg>`;
-export const TextColorIcon = (color) => html `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.0627 6.16255C14.385 5.30291 15.2068 4.7334 16.1249 4.7334C17.043 4.7334 17.8648 5.30291 18.1872 6.16255L23.7279 20.9378C23.9219 21.455 23.6599 22.0314 23.1427 22.2253C22.6256 22.4192 22.0492 22.1572 21.8553 21.6401L20.2289 17.3031H12.021L10.3946 21.6401C10.2007 22.1572 9.62428 22.4192 9.10716 22.2253C8.59004 22.0314 8.32803 21.455 8.52195 20.9378L14.0627 6.16255ZM12.771 15.3031H19.4789L16.3146 6.8648C16.2849 6.78576 16.2094 6.7334 16.1249 6.7334C16.0405 6.7334 15.965 6.78576 15.9353 6.8648L12.771 15.3031Z"
-      fill="${cssVarV2('icon/primary')}"
-    />
-    <rect
-      x="5.45837"
-      y="24"
-      width="21.3333"
-      height="3.33333"
-      rx="1"
-      fill=${color}
-    />
+export const TextColorIcon = (color) => html `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.0627 6.16255C14.385 5.30291 15.2068 4.7334 16.1249 4.7334C17.043 4.7334 17.8648 5.30291 18.1872 6.16255L23.7279 20.9378C23.9219 21.455 23.6599 22.0314 23.1427 22.2253C22.6256 22.4192 22.0492 22.1572 21.8553 21.6401L20.2289 17.3031H12.021L10.3946 21.6401C10.2007 22.1572 9.62428 22.4192 9.10716 22.2253C8.59004 22.0314 8.32803 21.455 8.52195 20.9378L14.0627 6.16255ZM12.771 15.3031H19.4789L16.3146 6.8648C16.2849 6.78576 16.2094 6.7334 16.1249 6.7334C16.0405 6.7334 15.965 6.78576 15.9353 6.8648L12.771 15.3031Z"
+      fill="${cssVarV2('icon/primary')}"
+    />
+    <rect
+      x="5.45837"
+      y="24"
+      width="21.3333"
+      height="3.33333"
+      rx="1"
+      fill=${color}
+    />
   </svg>`;
-export const TextBackgroundDuotoneIcon = (color) => html `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4.57507 7.33336C4.57507 5.60287 5.97791 4.20003 7.70841 4.20003H25.0417C26.7722 4.20003 28.1751 5.60287 28.1751 7.33336V24.6667C28.1751 26.3972 26.7722 27.8 25.0417 27.8H7.70841C5.97791 27.8 4.57507 26.3972 4.57507 24.6667V7.33336Z"
-      fill="${color}"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4.57495 7.33333C4.57495 5.60284 5.97779 4.2 7.70828 4.2H25.0416C26.7721 4.2 28.175 5.60284 28.175 7.33333V24.6667C28.175 26.3972 26.7721 27.8 25.0416 27.8H7.70828C5.97779 27.8 4.57495 26.3972 4.57495 24.6667V7.33333ZM7.70828 5.13333C6.49326 5.13333 5.50828 6.1183 5.50828 7.33333V24.6667C5.50828 25.8817 6.49326 26.8667 7.70828 26.8667H25.0416C26.2566 26.8667 27.2416 25.8817 27.2416 24.6667V7.33333C27.2416 6.1183 26.2566 5.13333 25.0416 5.13333H7.70828Z"
-      fill="black"
-      fill-opacity="0.22"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.5379 10.0064C14.8251 9.24064 15.5571 8.73332 16.375 8.73332C17.1928 8.73332 17.9249 9.24064 18.2121 10.0064L22.6446 21.8266C22.8386 22.3438 22.5766 22.9202 22.0594 23.1141C21.5423 23.308 20.9659 23.046 20.772 22.5289L19.5196 19.1891H13.2304L11.978 22.5289C11.7841 23.046 11.2076 23.308 10.6905 23.1141C10.1734 22.9202 9.9114 22.3438 10.1053 21.8266L14.5379 10.0064ZM13.9804 17.1891H18.7696L16.375 10.8035L13.9804 17.1891Z"
-      fill="${cssVarV2('text/primary')}"
-    />
+export const TextBackgroundDuotoneIcon = (color) => html `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.57507 7.33336C4.57507 5.60287 5.97791 4.20003 7.70841 4.20003H25.0417C26.7722 4.20003 28.1751 5.60287 28.1751 7.33336V24.6667C28.1751 26.3972 26.7722 27.8 25.0417 27.8H7.70841C5.97791 27.8 4.57507 26.3972 4.57507 24.6667V7.33336Z"
+      fill="${color}"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.57495 7.33333C4.57495 5.60284 5.97779 4.2 7.70828 4.2H25.0416C26.7721 4.2 28.175 5.60284 28.175 7.33333V24.6667C28.175 26.3972 26.7721 27.8 25.0416 27.8H7.70828C5.97779 27.8 4.57495 26.3972 4.57495 24.6667V7.33333ZM7.70828 5.13333C6.49326 5.13333 5.50828 6.1183 5.50828 7.33333V24.6667C5.50828 25.8817 6.49326 26.8667 7.70828 26.8667H25.0416C26.2566 26.8667 27.2416 25.8817 27.2416 24.6667V7.33333C27.2416 6.1183 26.2566 5.13333 25.0416 5.13333H7.70828Z"
+      fill="black"
+      fill-opacity="0.22"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.5379 10.0064C14.8251 9.24064 15.5571 8.73332 16.375 8.73332C17.1928 8.73332 17.9249 9.24064 18.2121 10.0064L22.6446 21.8266C22.8386 22.3438 22.5766 22.9202 22.0594 23.1141C21.5423 23.308 20.9659 23.046 20.772 22.5289L19.5196 19.1891H13.2304L11.978 22.5289C11.7841 23.046 11.2076 23.308 10.6905 23.1141C10.1734 22.9202 9.9114 22.3438 10.1053 21.8266L14.5379 10.0064ZM13.9804 17.1891H18.7696L16.375 10.8035L13.9804 17.1891Z"
+      fill="${cssVarV2('text/primary')}"
+    />
   </svg>`;
-export const FigmaDuotoneIcon = html `<svg
-  width="32"
-  height="32"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g id="Figma_Duotone">
-    <path
-      id="Vector"
-      d="M8.41842 22.5027C10.3047 22.5027 11.8356 20.9719 11.8356 19.0856V15.6685H8.41842C6.53216 15.6685 5.00128 17.1993 5.00128 19.0856C5.00128 20.9719 6.53216 22.5027 8.41842 22.5027Z"
-      fill="#0ACF83"
-    />
-    <path
-      id="Vector_2"
-      d="M5.00128 12.2514C5.00128 10.3651 6.53216 8.83423 8.41842 8.83423H11.8356V15.6685H8.41842C6.53216 15.6685 5.00128 14.1376 5.00128 12.2514Z"
-      fill="#A259FF"
-    />
-    <path
-      id="Vector_3"
-      d="M5.00146 5.41714C5.00146 3.53088 6.53234 2 8.4186 2H11.8357V8.83428H8.4186C6.53234 8.83428 5.00146 7.3034 5.00146 5.41714Z"
-      fill="#F24E1E"
-    />
-    <path
-      id="Vector_4"
-      d="M11.8356 2H15.2527C17.139 2 18.6699 3.53088 18.6699 5.41714C18.6699 7.3034 17.139 8.83428 15.2527 8.83428H11.8356V2Z"
-      fill="#FF7262"
-    />
-    <path
-      id="Vector_5"
-      d="M18.6699 12.2514C18.6699 14.1376 17.139 15.6685 15.2527 15.6685C13.3665 15.6685 11.8356 14.1376 11.8356 12.2514C11.8356 10.3651 13.3665 8.83423 15.2527 8.83423C17.139 8.83423 18.6699 10.3651 18.6699 12.2514Z"
-      fill="#1ABCFE"
-    />
-  </g>
+export const FigmaDuotoneIcon = html `<svg
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Figma_Duotone">
+    <path
+      id="Vector"
+      d="M8.41842 22.5027C10.3047 22.5027 11.8356 20.9719 11.8356 19.0856V15.6685H8.41842C6.53216 15.6685 5.00128 17.1993 5.00128 19.0856C5.00128 20.9719 6.53216 22.5027 8.41842 22.5027Z"
+      fill="#0ACF83"
+    />
+    <path
+      id="Vector_2"
+      d="M5.00128 12.2514C5.00128 10.3651 6.53216 8.83423 8.41842 8.83423H11.8356V15.6685H8.41842C6.53216 15.6685 5.00128 14.1376 5.00128 12.2514Z"
+      fill="#A259FF"
+    />
+    <path
+      id="Vector_3"
+      d="M5.00146 5.41714C5.00146 3.53088 6.53234 2 8.4186 2H11.8357V8.83428H8.4186C6.53234 8.83428 5.00146 7.3034 5.00146 5.41714Z"
+      fill="#F24E1E"
+    />
+    <path
+      id="Vector_4"
+      d="M11.8356 2H15.2527C17.139 2 18.6699 3.53088 18.6699 5.41714C18.6699 7.3034 17.139 8.83428 15.2527 8.83428H11.8356V2Z"
+      fill="#FF7262"
+    />
+    <path
+      id="Vector_5"
+      d="M18.6699 12.2514C18.6699 14.1376 17.139 15.6685 15.2527 15.6685C13.3665 15.6685 11.8356 14.1376 11.8356 12.2514C11.8356 10.3651 13.3665 8.83423 15.2527 8.83423C17.139 8.83423 18.6699 10.3651 18.6699 12.2514Z"
+      fill="#1ABCFE"
+    />
+  </g>
 </svg> `;