@useinsider/guido 3.12.0-beta.841bb6a → 3.12.0-beta.86e34da

package/dist/extensions/Blocks/Recommendation/controls/main/strategy.js

@@ -0,0 +1,285 @@
+var $ = Object.defineProperty;
+var O = (g, h, t) => h in g ? $(g, h, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[h] = t;
+var u = (g, h, t) => O(g, typeof h != "symbol" ? h + "" : h, t);
+import { useTranslations as f } from "../../../../../composables/useTranslations.js";
+import { STRATEGY_PAGES as R } from "../../../../../enums/extensions/recommendationBlock.js";
+import { formatShortDate as I } from "../../../../../utils/dateUtil.js";
+import { UEAttr as b } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as L } from "../../../common-control.js";
+import { useRecommendationExtensionStore as A } from "../../store/recommendation.js";
+import { navigateToStrategyPage as w } from "../../utils/strategyNavigation.js";
+import { buildStrategySummary as H } from "../../utils/strategySummary.js";
+const D = "recommendation-strategy-control", T = {
+  CREATE_BUTTON: "strategyCreate",
+  DETAILS_BUTTON: "strategyDetails"
+}, E = "guido__btn-strategy-create", C = "guido__btn-strategy-details", s = {
+  ROOT: "data-strategy-control",
+  TRIGGER: "data-strategy-trigger",
+  VALUE: "data-strategy-value",
+  MENU: "data-strategy-menu",
+  SEARCH: "data-strategy-search",
+  LIST: "data-strategy-list",
+  OPTION_ID: "data-strategy-id",
+  CARD: "data-strategy-card",
+  VIEW_MORE: "data-strategy-view-more"
+}, _ = 8, M = 150, N = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-2a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm-1-7a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0v-4zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path></svg>', G = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.999a1.042 1.042 0 0 1-.784-.305l-5.91-5.91a1.045 1.045 0 1 1 1.478-1.478L12 13.522l5.216-5.216a1.045 1.045 0 1 1 1.478 1.478l-5.91 5.91a1.042 1.042 0 0 1-.784.305z"></path></svg>', o = (g) => g.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+class j extends L {
+  constructor() {
+    super(...arguments);
+    u(this, "store", A());
+    /**
+     * InOne's dictionary, not Stripo's. Every dotted key here
+     * (`discovery-strategy.*`, `gpt-app-builder.*`) lives in the host panel's
+     * translations, which `this.api.translate` does not read — that one is only
+     * for the plain-English control labels the rest of this panel uses.
+     */
+    u(this, "trans", f());
+    u(this, "events", null);
+    u(this, "unsubscribeStore", null);
+    u(this, "searchTerm", "");
+    u(this, "isOpen", !1);
+    u(this, "cardHideTimer", null);
+  }
+  getId() {
+    return D;
+  }
+  getTemplate() {
+    return `
+            <div class="strategy-control" ${s.ROOT}>
+                ${this._GuOneColumn([
+      this._GuLabel({ text: this.api.translate("Recommendation Strategy") }),
+      // The menu is absolutely positioned against THIS wrapper. Without
+      // it the menu is a grid item of the column container and its
+      // static position resolves to the container's top, so it opens
+      // over the label instead of under the trigger.
+      `<div class="strategy-control__field">
+                        <div class="strategy-control__row">
+                            <button type="button" class="strategy-select" ${s.TRIGGER}>
+                                <span class="strategy-select__value" ${s.VALUE}></span>
+                                <span class="strategy-select__caret">${G}</span>
+                            </button>
+                            ${this._GuIconButton({
+        name: T.DETAILS_BUTTON,
+        icon: "strategy-settings-icon",
+        className: "strategy-control__details",
+        id: C
+      })}
+                        </div>
+                        <div class="strategy-menu" ${s.MENU} hidden>
+                            <div class="strategy-menu__search">
+                                <input type="text" class="strategy-menu__search-input" ${s.SEARCH}
+                                    placeholder="${o(this.trans("discovery-strategy.search"))}">
+                            </div>
+                            <ul class="strategy-menu__list" ${s.LIST}></ul>
+                        </div>
+                    </div>`,
+      `<div class="strategy-control__create-row">
+                        ${this._GuButton({
+        name: T.CREATE_BUTTON,
+        label: this.api.translate("Create New Strategy"),
+        id: E
+      })}
+                    </div>`
+    ])}
+                <div class="strategy-card" ${s.CARD} hidden></div>
+            </div>
+        `;
+  }
+  onRender() {
+    this._setupEventListeners(), this._subscribeToStoreChanges(), this._render();
+  }
+  onDestroy() {
+    var t, e;
+    this._cancelHideCard(), (t = this.events) == null || t.abort(), this.events = null, (e = this.unsubscribeStore) == null || e.call(this), this.unsubscribeStore = null, this.isOpen = !1, this.searchTerm = "", super.onDestroy();
+  }
+  _root() {
+    var t;
+    return ((t = this.getContainer()) == null ? void 0 : t.querySelector(`[${s.ROOT}]`)) ?? null;
+  }
+  /**
+   * All listeners are delegated onto nodes that survive `innerHTML` rebuilds and
+   * are torn down together by the AbortController — the option rows themselves
+   * are replaced on every render and must never own a listener.
+   */
+  _setupEventListeners() {
+    var d, c, m, p, y, v;
+    (d = this.events) == null || d.abort(), this.events = new AbortController();
+    const { signal: t } = this.events, e = this._root();
+    if (!e)
+      return;
+    (c = e.querySelector(`[${s.TRIGGER}]`)) == null || c.addEventListener("click", () => this._toggleMenu(), { signal: t }), (m = e.querySelector(`#${C}`)) == null || m.addEventListener("click", () => this.store.openStrategyDrawer(), { signal: t }), (p = e.querySelector(`#${E}`)) == null || p.addEventListener("click", () => w(R.CREATE), { signal: t }), (y = e.querySelector(`[${s.SEARCH}]`)) == null || y.addEventListener("input", (l) => {
+      this.searchTerm = l.target.value, this._renderOptions();
+    }, { signal: t });
+    const r = e.querySelector(`[${s.LIST}]`);
+    r == null || r.addEventListener("click", (l) => {
+      const n = l.target.closest(`[${s.OPTION_ID}]`), a = n == null ? void 0 : n.getAttribute(s.OPTION_ID);
+      a && (this._closeMenu(), this.store.selectStrategy(a));
+    }, { signal: t }), r == null || r.addEventListener("mouseenter", (l) => {
+      var a, S;
+      const n = (S = (a = l.target) == null ? void 0 : a.closest) == null ? void 0 : S.call(a, `[${s.OPTION_ID}]`);
+      n && this._showCard(n);
+    }, { capture: !0, signal: t }), r == null || r.addEventListener("mouseleave", () => this._scheduleHideCard(), { signal: t });
+    const i = e.querySelector(`[${s.CARD}]`);
+    i == null || i.addEventListener("mouseenter", () => this._cancelHideCard(), { signal: t }), i == null || i.addEventListener("mouseleave", () => this._hideCard(), { signal: t }), i == null || i.addEventListener("click", (l) => {
+      const n = l.target.closest(`[${s.VIEW_MORE}]`), a = n == null ? void 0 : n.getAttribute(s.VIEW_MORE);
+      a && (this._closeMenu(), a !== this.store.recommendationConfigs.strategyId && this.store.selectStrategy(a), this.store.openStrategyDrawer());
+    }, { signal: t }), (v = this.getContainer()) == null || v.addEventListener("mousedown", (l) => {
+      var n, a;
+      this.isOpen && !((a = (n = l.target).closest) != null && a.call(n, `[${s.ROOT}]`)) && this._closeMenu();
+    }, { signal: t });
+  }
+  /**
+   * Keeps the trigger label and the gear's enabled state in step with the store.
+   *
+   * Both depend on data that arrives after the first render: the strategy listing
+   * is fetched asynchronously, and `strategyId` changes when the user picks,
+   * duplicates, or switches blocks.
+   */
+  _subscribeToStoreChanges() {
+    var e;
+    (e = this.unsubscribeStore) == null || e.call(this);
+    let t = this._stateKey();
+    this.unsubscribeStore = this.store.$subscribe(() => {
+      const r = this._stateKey();
+      r !== t && (t = r, this._render());
+    });
+  }
+  /**
+   * Fingerprint of everything the rendered markup depends on.
+   *
+   * Ids rather than a count: a refetch that renames a strategy or swaps one for
+   * another of the same length would otherwise leave the trigger and the card
+   * showing stale copy until some unrelated store change happened to repaint.
+   */
+  _stateKey() {
+    return [
+      this.store.recommendationConfigs.strategyId,
+      this.store.strategiesLoading,
+      this.store.strategies.map((t) => `${t.strategy_id}:${t.name}`).join(",")
+    ].join("|");
+  }
+  _render() {
+    this._renderTrigger(), this._renderOptions(), this.api.setUIEAttribute(
+      T.DETAILS_BUTTON,
+      b.BUTTON.disabled,
+      this.store.getSelectedStrategy ? "false" : "true"
+    );
+  }
+  _renderTrigger() {
+    var r;
+    const t = (r = this._root()) == null ? void 0 : r.querySelector(`[${s.VALUE}]`);
+    if (!t)
+      return;
+    const e = this.store.getSelectedStrategy;
+    t.textContent = (e == null ? void 0 : e.name) ?? this.trans("smart-recommender.select-recommendation-strategy"), t.classList.toggle("strategy-select__value--placeholder", !e), t.classList.toggle("strategy-select__value--missing", this.store.hasMissingStrategy);
+  }
+  _renderOptions() {
+    var i;
+    const t = (i = this._root()) == null ? void 0 : i.querySelector(`[${s.LIST}]`);
+    if (!t)
+      return;
+    if (this._hideCard(), this.store.strategiesLoading) {
+      t.innerHTML = `<li class="strategy-menu__empty">${o(
+        this.trans("newsletter.loading")
+      )}</li>`;
+      return;
+    }
+    const e = this._filteredStrategies();
+    if (!e.length) {
+      t.innerHTML = `<li class="strategy-menu__empty">${o(
+        this.trans("discovery-strategy.no-data-title-text")
+      )}</li>`;
+      return;
+    }
+    const r = this.store.recommendationConfigs.strategyId;
+    t.innerHTML = e.map((d) => {
+      const c = String(d.strategy_id);
+      return `<li class="strategy-menu__option${c === r ? " strategy-menu__option--selected" : ""}"
+                ${s.OPTION_ID}="${o(c)}">${o(d.name)}</li>`;
+    }).join("");
+  }
+  /**
+   * Client-side filtering: the listing is fetched whole and cached, so narrowing
+   * it here avoids a request per keystroke.
+   */
+  _filteredStrategies() {
+    const t = this.searchTerm.trim().toLowerCase();
+    return t ? this.store.strategies.filter((e) => e.name.toLowerCase().includes(t)) : this.store.strategies;
+  }
+  _toggleMenu() {
+    var e, r, i;
+    if (this.isOpen) {
+      this._closeMenu();
+      return;
+    }
+    this.isOpen = !0;
+    const t = this._root();
+    (e = t == null ? void 0 : t.querySelector(`[${s.MENU}]`)) == null || e.removeAttribute("hidden"), (r = t == null ? void 0 : t.querySelector(`[${s.TRIGGER}]`)) == null || r.classList.add("strategy-select--open"), this._renderOptions(), (i = t == null ? void 0 : t.querySelector(`[${s.SEARCH}]`)) == null || i.focus();
+  }
+  _closeMenu() {
+    var r, i;
+    this.isOpen = !1, this.searchTerm = "", this._hideCard();
+    const t = this._root(), e = t == null ? void 0 : t.querySelector(`[${s.SEARCH}]`);
+    e && (e.value = ""), (r = t == null ? void 0 : t.querySelector(`[${s.MENU}]`)) == null || r.setAttribute("hidden", ""), (i = t == null ? void 0 : t.querySelector(`[${s.TRIGGER}]`)) == null || i.classList.remove("strategy-select--open");
+  }
+  /**
+   * The hover card is `position: fixed`, so it can sit beside the panel instead of
+   * being clipped by it. Placed once per hover — the list cannot scroll under the
+   * pointer without the pointer leaving, so there is nothing to keep in sync.
+   */
+  _showCard(t) {
+    var y;
+    const e = (y = this._root()) == null ? void 0 : y.querySelector(`[${s.CARD}]`), r = t.getAttribute(s.OPTION_ID), i = this.store.strategies.find((v) => String(v.strategy_id) === r);
+    if (!e || !i)
+      return;
+    this._cancelHideCard(), e.innerHTML = this._buildCardHtml(i), e.removeAttribute("hidden");
+    const d = t.getBoundingClientRect(), c = e.getBoundingClientRect(), m = d.left - c.width - _ >= _ ? d.left - c.width - _ : d.right + _, p = window.innerHeight - c.height - _;
+    e.style.left = `${Math.max(_, m)}px`, e.style.top = `${Math.min(Math.max(_, d.top), Math.max(_, p))}px`;
+  }
+  /** Grace period for the pointer to cross the gap between option and card. */
+  _scheduleHideCard() {
+    this._cancelHideCard(), this.cardHideTimer = setTimeout(() => this._hideCard(), M);
+  }
+  _cancelHideCard() {
+    this.cardHideTimer && (clearTimeout(this.cardHideTimer), this.cardHideTimer = null);
+  }
+  _hideCard() {
+    var t, e;
+    this._cancelHideCard(), (e = (t = this._root()) == null ? void 0 : t.querySelector(`[${s.CARD}]`)) == null || e.setAttribute("hidden", "");
+  }
+  /**
+   * Mirrors the design system's `InInfoBox`: coloured top rule, heading +
+   * "last updated" details, content, then a divided footer holding the View
+   * More text button. The component itself cannot render here, so the markup
+   * and the CSS reproduce its structure and tokens rather than approximating
+   * them — the values in `recommendation.css` are read from its stylesheet.
+   */
+  _buildCardHtml(t) {
+    const { trans: e } = this, r = H(t, e).map((i) => `
+                <div class="strategy-card__row">
+                    <p class="strategy-card__row-title">${o(i.title)}</p>
+                    <p class="strategy-card__row-value">${o(i.value)}</p>
+                </div>
+            `).join("");
+    return `
+            <div class="strategy-card__body">
+                <p class="strategy-card__title">${o(t.name)}</p>
+                <p class="strategy-card__updated">${o(e("gpt-app-builder.strategy-last-updated", {
+      date: I(t.updated_at)
+    }))}</p>
+                <div class="strategy-card__rows">${r}</div>
+            </div>
+            <div class="strategy-card__footer">
+                <button type="button" class="strategy-card__more"
+                    ${s.VIEW_MORE}="${o(String(t.strategy_id))}">
+                    ${N}
+                    <span>${o(e("gpt-app-builder.view-more"))}</span>
+                </button>
+            </div>
+        `;
+  }
+}
+export {
+  D as STRATEGY_CONTROL_ID,
+  j as StrategyControl
+};

package/dist/extensions/Blocks/Recommendation/extension.js

@@ -1,4 +1,4 @@
-import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExtensionBuilder as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as m } from "./block.js";
 import n from "./canvasPreview.css.js";
 import { RecommendationBlockControl as i } from "./controls/main/index.js";
@@ -6,42 +6,44 @@ import "./constants/selectors.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import { NameControls as e } from "./controls/name/index.js";
-import { PriceControls as s } from "./controls/price/index.js";
-import { OldPriceControls as l } from "./controls/oldPrice/index.js";
+import { PriceControls as l } from "./controls/price/index.js";
+import { OldPriceControls as s } from "./controls/oldPrice/index.js";
 import { OmnibusPriceControls as p } from "./controls/omnibusPrice/index.js";
 import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
 import { ButtonControls as c } from "./controls/button/index.js";
-import { ImageControls as f } from "./controls/image/index.js";
-import { CustomAttributeControls as C } from "./controls/customAttribute/index.js";
+import { ImageControls as C } from "./controls/image/index.js";
+import { CustomAttributeControls as f } from "./controls/customAttribute/index.js";
 import { SpacingControl as d } from "./controls/spacing/index.js";
-import { CardBackgroundColorControl as u } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as y } from "./controls/syncInfoMessage.js";
+import { BlockBackgroundColorControl as u } from "./controls/blockBackground/index.js";
+import { CardBackgroundColorControl as g } from "./controls/cardBackground/index.js";
+import { RecommendationCardCompositionControl as y } from "./controls/cardComposition/index.js";
+import { SyncInfoMessageControl as B } from "./controls/syncInfoMessage.js";
 import { RecommendationIconsRegistry as P } from "./iconsRegistry.js";
 import R from "./recommendation.css.js";
 import { SettingsPanel as S } from "./settingsPanel.js";
-const w = [
+const k = [
   e,
-  s,
   l,
+  s,
   p,
   a,
   c,
-  f,
-  C
-], B = [
+  C,
+  f
+], w = [
   i,
   u,
-  d,
   g,
-  y
+  d,
+  y,
+  B
 ], b = [
-  ...B,
-  ...w.flatMap((o) => Object.values(o))
-], U = b.reduce(
-  (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(S)
+  ...w,
+  ...k.flatMap((o) => Object.values(o))
+], W = b.reduce(
+  (o, r) => o.addControl(r),
+  new t().addBlock(m).withSettingsPanelRegistry(S)
 ).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
 export {
-  U as default
+  W as default
 };

package/dist/extensions/Blocks/Recommendation/iconsRegistry.js

@@ -1,6 +1,6 @@
 import r from "../../../static/assets/info.svg.js";
 import { IconsRegistry as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class h extends C {
+class l extends C {
   registerIconsSvg(t) {
     t["recommendation-icon"] = `
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -74,9 +74,23 @@ class h extends C {
                 <path d="M17 2V18C17 18.5523 16.5523 19 16 19H10V1H16C16.5523 1 17 1.44772 17 2Z" stroke="currentColor"
                     stroke-width="2" fill="none"/>
             </svg>
+        `, t["strategy-settings-icon"] = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+                fill="currentColor">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M14 4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757c0
+                    .891-1.077 1.337-1.707.708l-.536-.536a1 1 0 0 0-1.414 0L4.93 6.343a1 1 0 0 0 0
+                    1.414l.535.536c.63.63.184 1.707-.707 1.707H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757c.891 0
+                    1.337 1.077.708 1.707l-.536.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414
+                    0l.536-.535c.63-.63 1.707-.184 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0
+                    1-1v-.757c0-.891 1.077-1.337 1.707-.707l.536.535a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0
+                    0-1.414l-.536-.536c-.63-.63-.183-1.707.708-1.707H20a1 1 0 0 0 1-1v-2a1 1 0 0
+                    0-1-1h-.757c-.891 0-1.337-1.077-.707-1.707l.535-.536a1 1 0 0 0
+                    0-1.414L17.657 4.93a1 1 0 0 0-1.414 0l-.536.536c-.63.63-1.707.183-1.707-.708V4zm3 8a5 5 0
+                    1 1-10 0 5 5 0 0 1 10 0zm-5 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
+            </svg>
         `, t["migration-info-icon"] = r;
   }
 }
 export {
-  h as RecommendationIconsRegistry
+  l as RecommendationIconsRegistry
 };

package/dist/extensions/Blocks/Recommendation/recommendation.css.js

@@ -289,6 +289,263 @@ ue-orderable.orderable-disabled .droppable-icon {
     font-weight: 400;
     line-height: 16px;
 }
+
+/*
+ * Recommendation Strategy picker (controls/main/strategy.ts).
+ *
+ * Lives inside the settings panel, so it scrolls with it and needs no positioning
+ * code. Only the hover card escapes the panel, via \`position: fixed\`.
+ *
+ * The values below are the design system's own, read from its stylesheets
+ * (\`combobox.css\` for the trigger, \`InInfoBox\`'s CSS for the card). The \`In*\`
+ * components themselves cannot render in this shadow root — they are styled from
+ * the host document, and copying their stylesheets across drags normalize.css and
+ * a global \`*\`/\`svg\` reset into Stripo's panel.
+ */
+
+/*
+ * Anchors the dropdown. Without a positioned wrapper the menu is a grid item of
+ * the column container, and its absolute static position resolves to that
+ * container's top — so it opens over the label instead of under the trigger.
+ */
+.strategy-control__field {
+    position: relative;
+}
+
+.strategy-control__row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/*
+ * Same tokens as \`ue-select .button\` in components/combobox.css, so the strategy
+ * trigger is indistinguishable from Recommendation Locale / Currency beside it.
+ * It cannot simply reuse that rule: the selector is scoped to \`ue-select\`, and a
+ * Stripo select cannot render this control's per-option hover card.
+ */
+.strategy-select {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+    min-height: 40px;
+    padding: 8px;
+    overflow: hidden;
+    background-color: var(--guido-color-gray-0);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    box-shadow: none;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+    text-align: left;
+}
+
+.strategy-select:hover {
+    border-color: var(--guido-color-primary-500);
+}
+
+/* Matches the focus ring Stripo paints on an open select. */
+.strategy-select--open {
+    border-color: var(--guido-color-primary-500);
+    box-shadow: 0 0 0 3px var(--guido-color-primary-200);
+}
+
+.strategy-select__value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.strategy-select__value--placeholder {
+    color: var(--guido-color-gray-700);
+}
+
+.strategy-select__value--missing {
+    color: var(--guido-color-danger-500);
+}
+
+.strategy-select__caret {
+    display: flex;
+    flex: none;
+    color: var(--guido-color-gray-800);
+}
+
+/* The gear button sits beside the trigger and must not stretch with it. */
+.strategy-control__details {
+    flex: none;
+}
+
+.strategy-menu {
+    position: absolute;
+    z-index: 5;
+    top: 100%;
+    right: 0;
+    left: 0;
+    margin-top: 4px;
+    overflow: hidden;
+    background: var(--guido-color-white);
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    box-shadow: var(--guido-box-shadow);
+}
+
+.strategy-menu[hidden] {
+    display: none;
+}
+
+.strategy-menu__search {
+    padding: 8px;
+    border-bottom: 1px solid var(--guido-color-gray-300);
+}
+
+.strategy-menu__search-input {
+    box-sizing: border-box;
+    width: 100%;
+    height: 32px;
+    padding: 4px 8px;
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    font: inherit;
+}
+
+.strategy-menu__list {
+    max-height: 240px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style: none;
+}
+
+.strategy-menu__option {
+    overflow: hidden;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.strategy-menu__option:hover {
+    background: var(--guido-color-gray-100);
+}
+
+.strategy-menu__option--selected {
+    color: var(--guido-color-primary-500);
+    background: var(--guido-color-primary-0);
+}
+
+.strategy-menu__empty {
+    padding: 12px;
+    color: var(--guido-color-gray-600);
+    font-size: 13px;
+    text-align: center;
+}
+
+.strategy-control__create-row {
+    margin-top: 8px;
+}
+
+/*
+ * \`_GuButton\` renders <ue-button> > .control-shadow-wrapper > button.button, and
+ * every level is shrink-to-fit. Stretching only the innermost one leaves the
+ * button its intrinsic width, which is why the design's full-width row needs all
+ * three.
+ */
+.strategy-control__create-row ue-button,
+.strategy-control__create-row .control-shadow-wrapper,
+.strategy-control__create-row .button {
+    display: block;
+    width: 100%;
+}
+
+/*
+ * Hover card. Reproduces the design system's \`InInfoBox\` — same 240px medium
+ * width, 4px information-blue top rule, 16px body, and a divided footer for the
+ * View More button.
+ *
+ * \`position: fixed\` so the card sits beside the narrow panel instead of being
+ * clipped by it.
+ */
+.strategy-card {
+    position: fixed;
+    z-index: 10;
+    width: 240px;
+    background: var(--guido-color-white);
+    border-top: 4px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(57, 57, 57, 0.15);
+}
+
+.strategy-card[hidden] {
+    display: none;
+}
+
+.strategy-card__body {
+    padding: 16px;
+}
+
+.strategy-card__title {
+    margin: 0;
+    color: var(--guido-color-gray-800);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    word-break: break-word;
+}
+
+.strategy-card__updated {
+    margin: 4px 0 0;
+    color: var(--guido-color-gray-600);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.strategy-card__rows {
+    margin-top: 16px;
+}
+
+.strategy-card__row + .strategy-card__row {
+    margin-top: 12px;
+}
+
+.strategy-card__row-title {
+    margin: 0;
+    color: var(--guido-color-gray-600);
+    font-size: 12px;
+    line-height: 16px;
+}
+
+.strategy-card__row-value {
+    margin: 0;
+    color: var(--guido-color-gray-800);
+    font-size: 13px;
+    line-height: 18px;
+    word-break: break-word;
+}
+
+.strategy-card__footer {
+    padding: 8px 16px;
+    border-top: 1px solid var(--guido-color-gray-300);
+}
+
+.strategy-card__more {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    color: var(--guido-color-primary-500);
+    background: none;
+    border: 0;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 16px;
+}
 `;
 export {
   n as default