storybook 9.0.0-alpha.2 → 9.0.0-alpha.21

package/dist/highlight/index.cjs

@@ -0,0 +1,27 @@
+"use strict";
+var I = Object.defineProperty;
+var G = Object.getOwnPropertyDescriptor;
+var _ = Object.getOwnPropertyNames;
+var n = Object.prototype.hasOwnProperty;
+var L = (o, t) => {
+  for (var H in t)
+    I(o, H, { get: t[H], enumerable: !0 });
+}, T = (o, t, H, s) => {
+  if (t && typeof t == "object" || typeof t == "function")
+    for (let e of _(t))
+      !n.call(o, e) && e !== H && I(o, e, { get: () => t[e], enumerable: !(s = G(t, e)) || s.enumerable });
+  return o;
+};
+var c = (o) => T(I({}, "__esModule", { value: !0 }), o);
+
+// src/highlight/index.ts
+var x = {};
+L(x, {
+  HIGHLIGHT: () => i,
+  RESET_HIGHLIGHT: () => p,
+  SCROLL_INTO_VIEW: () => E
+});
+module.exports = c(x);
+
+// src/highlight/constants.ts
+var r = "storybook/highlight", i = `${r}/add`, l = `${r}/remove`, p = `${r}/reset`, E = `${r}/scroll-into-view`;

package/dist/highlight/index.d.ts

@@ -0,0 +1,61 @@
+declare const HIGHLIGHT = "storybook/highlight/add";
+declare const RESET_HIGHLIGHT = "storybook/highlight/reset";
+declare const SCROLL_INTO_VIEW = "storybook/highlight/scroll-into-view";
+
+interface HighlightParameters {
+    /**
+     * Highlight configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/highlight#parameters
+     */
+    highlight: {
+        /** Remove the addon panel and disable the addon's behavior */
+        disable?: boolean;
+    };
+}
+interface HighlightOptions {
+    /** Unique identifier for the highlight, required if you want to remove the highlight later */
+    id?: string;
+    /** HTML selectors of the elements */
+    selectors: string[];
+    /** Priority of the highlight, higher takes precedence, defaults to 0 */
+    priority?: number;
+    /** Whether the highlight is selectable (reveals the element's HTML) */
+    selectable?: boolean;
+    /** CSS styles to apply to the highlight */
+    styles: Record<string, string>;
+    /** CSS styles to apply to the highlight when it is hovered */
+    hoverStyles?: Record<string, string>;
+    /** CSS styles to apply to the highlight when it is focused or selected */
+    focusStyles?: Record<string, string>;
+    /** Keyframes required for animations */
+    keyframes?: string;
+    /** Menu items to show when the highlight is selected (implies selectable: true) */
+    menu?: {
+        /** Unique identifier for the menu item */
+        id: string;
+        /** Title of the menu item */
+        title: string;
+        /** Description of the menu item */
+        description?: string;
+        /** Name for a channel event to trigger when the menu item is clicked */
+        clickEvent?: string;
+        /** HTML selectors for which this menu item should show (subset of `selectors`) */
+        selectors?: string[];
+    }[];
+}
+interface ClickEventDetails {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    selectors: string[];
+    element: {
+        attributes: Record<string, string>;
+        localName: string;
+        tagName: string;
+        outerHTML: string;
+    };
+}
+
+export { type ClickEventDetails, HIGHLIGHT, type HighlightOptions, type HighlightParameters, RESET_HIGHLIGHT, SCROLL_INTO_VIEW };

package/dist/highlight/index.js

@@ -0,0 +1,7 @@
+// src/highlight/constants.ts
+var t = "storybook/highlight", o = `${t}/add`, r = `${t}/remove`, e = `${t}/reset`, H = `${t}/scroll-into-view`;
+export {
+  o as HIGHLIGHT,
+  e as RESET_HIGHLIGHT,
+  H as SCROLL_INTO_VIEW
+};

package/dist/highlight/preview.cjs

@@ -0,0 +1,535 @@
+"use strict";
+var F = Object.defineProperty;
+var ae = Object.getOwnPropertyDescriptor;
+var de = Object.getOwnPropertyNames;
+var pe = Object.prototype.hasOwnProperty;
+var l = (t, e) => F(t, "name", { value: e, configurable: !0 });
+var ge = (t, e) => {
+  for (var c in e)
+    F(t, c, { get: e[c], enumerable: !0 });
+}, ue = (t, e, c, a) => {
+  if (e && typeof e == "object" || typeof e == "function")
+    for (let i of de(e))
+      !pe.call(t, i) && i !== c && F(t, i, { get: () => e[i], enumerable: !(a = ae(e, i)) || a.enumerable });
+  return t;
+};
+var me = (t) => ue(F({}, "__esModule", { value: !0 }), t);
+
+// src/highlight/preview.ts
+var xe = {};
+ge(xe, {
+  default: () => we
+});
+module.exports = me(xe);
+var $ = require("storybook/preview-api");
+
+// src/highlight/useHighlights.ts
+var Z = require("storybook/internal/core-events");
+
+// src/highlight/constants.ts
+var _ = "storybook/highlight", X = `${_}/add`, oe = `${_}/remove`, P = `${_}/reset`, Y = `${_}/scroll-into-view`, V = 2147483647;
+
+// src/highlight/utils.ts
+var fe = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), y = /* @__PURE__ */ l((t, e, c) => {
+  let a = fe.includes(t) ? document.createElementNS("http://www.w3.org/2000/svg", t) : document.createElement(t);
+  return Object.entries(e).forEach(([i, g]) => {
+    /[A-Z]/.test(i) ? (i === "onClick" && (a.addEventListener("click", g), a.addEventListener("keydown", (p) => {
+      (p.key === "Enter" || p.key === " ") && (p.preventDefault(), g());
+    })), i === "onMouseEnter" && a.addEventListener("mouseenter", g), i === "onMouseLeave" && a.addEventListener("mouseleave", g)) : a.setAttribute(
+    i, g);
+  }), c?.forEach((i) => {
+    if (!(i == null || i === !1))
+      try {
+        a.appendChild(i);
+      } catch {
+        a.appendChild(document.createTextNode(String(i)));
+      }
+  }), a;
+}, "createElement"), ne = /* @__PURE__ */ l((t) => {
+  if ("elements" in t) {
+    let { elements: e, color: c, style: a } = t;
+    return {
+      selectors: e,
+      styles: {
+        outline: `2px ${a} ${c}`,
+        outlineOffset: "2px",
+        boxShadow: "0 0 0 6px rgba(255,255,255,0.6)"
+      }
+    };
+  }
+  return t;
+}, "convertLegacy"), he = /* @__PURE__ */ l((t) => t instanceof Function, "isFunction"), A = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(),
+I = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ l((t) => {
+  let e = Symbol();
+  return O.set(e, []), A.set(e, t), { get: /* @__PURE__ */ l(() => A.get(e), "get"), set: /* @__PURE__ */ l((p) => {
+    let u = A.get(e), m = he(p) ? p(u) : p;
+    m !== u && (A.set(e, m), O.get(e)?.forEach((x) => {
+      I.get(x)?.(), I.set(x, x(m));
+    }));
+  }, "set"), subscribe: /* @__PURE__ */ l((p) => (O.get(e)?.push(p), () => {
+    let u = O.get(e);
+    u && O.set(
+      e,
+      u.filter((m) => m !== p)
+    );
+  }), "subscribe"), teardown: /* @__PURE__ */ l(() => {
+    O.get(e)?.forEach((p) => {
+      I.get(p)?.(), I.delete(p);
+    }), O.delete(e), A.delete(e);
+  }, "teardown") };
+}, "useStore"), q = /* @__PURE__ */ l((t) => {
+  let e = document.getElementById("storybook-root"), c = /* @__PURE__ */ new Map();
+  for (let a of t) {
+    let { priority: i = 0, selectable: g = !!a.menu } = a;
+    for (let p of a.selectors)
+      for (let u of e?.querySelectorAll(p) || []) {
+        let m = c.get(u);
+        (!m || m.priority < i) && c.set(u, {
+          ...a,
+          priority: i,
+          selectors: (m?.selectors || []).concat(p),
+          selectable: g
+        });
+      }
+  }
+  return c;
+}, "mapElements"), se = /* @__PURE__ */ l((t) => Array.from(t.entries()).map(([e, { selectors: c, styles: a, hoverStyles: i, focusStyles: g,
+selectable: p, menu: u }]) => {
+  let { top: m, left: x, width: E, height: M } = e.getBoundingClientRect(), { position: v } = getComputedStyle(e);
+  return {
+    element: e,
+    selectors: c,
+    selectable: p,
+    styles: a,
+    hoverStyles: i,
+    focusStyles: g,
+    menu: u,
+    top: v === "fixed" ? m : m + window.scrollY,
+    left: v === "fixed" ? x : x + window.scrollX,
+    width: E,
+    height: M
+  };
+}).sort((e, c) => c.width * c.height - e.width * e.height), "mapBoxes"), z = /* @__PURE__ */ l((t, e) => {
+  let c = t.getBoundingClientRect(), { x: a, y: i } = e;
+  return c?.top && c?.left && a >= c.left && a <= c.left + c.width && i >= c.top && i <= c.top + c.height;
+}, "isOverMenu"), j = /* @__PURE__ */ l((t, e, c) => {
+  if (!c)
+    return !1;
+  let { left: a, top: i, width: g, height: p } = t;
+  (p === 0 || g === 0) && (a -= 10, i -= 10, g += 20, p += 20), e.style.position === "fixed" && (a += window.scrollX, i += window.scrollY);
+  let { x: u, y: m } = c;
+  return u >= a && u <= a + g && m >= i && m <= i + p;
+}, "isTargeted"), ie = /* @__PURE__ */ l((t, e, c = {}) => {
+  let { x: a, y: i } = e, { margin: g = 5, topOffset: p = 0, centered: u = !1 } = c, { scrollX: m, scrollY: x, innerHeight: E, innerWidth: M } = window,
+  v = Math.min(
+    t.style.position === "fixed" ? i - x : i,
+    E - t.clientHeight - g - p + x
+  ), w = u ? t.clientWidth / 2 : 0, H = t.style.position === "fixed" ? Math.max(Math.min(a - m, M - w - g), w + g) : Math.max(
+    Math.min(a, M - w - g + m),
+    w + g + m
+  );
+  Object.assign(t.style, {
+    ...H !== a && { left: `${H}px` },
+    ...v !== i && { top: `${v}px` }
+  });
+}, "keepInViewport"), W = /* @__PURE__ */ l((t) => {
+  window.HTMLElement.prototype.hasOwnProperty("showPopover") && t.showPopover();
+}, "showPopover"), re = /* @__PURE__ */ l((t) => {
+  window.HTMLElement.prototype.hasOwnProperty("showPopover") && t.hidePopover();
+}, "hidePopover"), le = /* @__PURE__ */ l((t) => ({
+  top: t.top,
+  left: t.left,
+  width: t.width,
+  height: t.height,
+  selectors: t.selectors,
+  element: {
+    attributes: Object.fromEntries(
+      Array.from(t.element.attributes).map((e) => [e.name, e.value])
+    ),
+    localName: t.element.localName,
+    tagName: t.element.tagName,
+    outerHTML: t.element.outerHTML
+  }
+}), "getEventDetails");
+
+// src/highlight/useHighlights.ts
+var be = /* @__PURE__ */ l(() => y(
+  "svg",
+  { width: "14", height: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg" },
+  [
+    y("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.10355 10.1464C9.29882 10.3417 9.29882 10.6583 9.10355 10.8536C8.90829 11.0488 8.59171 11.0488 8.39645 10.8536L4.89645 7.35355C4\
+.70118 7.15829 4.70118 6.84171 4.89645 6.64645L8.39645 3.14645C8.59171 2.95118 8.90829 2.95118 9.10355 3.14645C9.29882 3.34171 9.29882 3.658\
+29 9.10355 3.85355L5.95711 7L9.10355 10.1464Z",
+      fill: "currentColor"
+    })
+  ]
+), "chevronLeft"), ye = /* @__PURE__ */ l(() => y(
+  "svg",
+  { width: "14", height: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg" },
+  [
+    y("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4.89645 10.1464C4.70118 10.3417 4.70118 10.6583 4.89645 10.8536C5.09171 11.0488 5.40829 11.0488 5.60355 10.8536L9.10355 7.35355C9\
+.29882 7.15829 9.29882 6.84171 9.10355 6.64645L5.60355 3.14645C5.40829 2.95118 5.09171 2.95118 4.89645 3.14645C4.70118 3.34171 4.70118 3.658\
+29 4.89645 3.85355L8.04289 7L4.89645 10.1464Z",
+      fill: "currentColor"
+    })
+  ]
+), "chevronRight"), ce = /* @__PURE__ */ l(({
+  channel: t,
+  menuId: e = "storybook-highlights-menu",
+  rootId: c = "storybook-highlights-root",
+  storybookRootId: a = "storybook-root"
+}) => {
+  globalThis.__STORYBOOK_HIGHLIGHT_TEARDOWN?.();
+  let { document: i } = globalThis, g = T([]), p = T(/* @__PURE__ */ new Map()), u = T([]), m = T(), x = T(), E = T([]), M = T([]), v = T(),
+  w = T(), H = i.getElementById(c);
+  g.subscribe(() => {
+    H || (H = y("div", { id: c }), i.body.appendChild(H));
+  }), g.subscribe((o) => {
+    let n = i.getElementById(a);
+    if (!n)
+      return;
+    p.set(q(o));
+    let s = new MutationObserver(() => p.set(q(o)));
+    return s.observe(n, { subtree: !0, childList: !0 }), () => {
+      s.disconnect();
+    };
+  }), p.subscribe((o) => {
+    let n = /* @__PURE__ */ l(() => requestAnimationFrame(() => u.set(se(o))), "updateBoxes"), s = new ResizeObserver(n);
+    s.observe(i.body), Array.from(o.keys()).forEach((r) => s.observe(r));
+    let d = Array.from(i.body.querySelectorAll("*")).filter((r) => {
+      let { overflow: f, overflowX: h, overflowY: b } = window.getComputedStyle(r);
+      return ["auto", "scroll"].some((L) => [f, h, b].includes(L));
+    });
+    return d.forEach((r) => r.addEventListener("scroll", n)), () => {
+      s.disconnect(), d.forEach((r) => r.removeEventListener("scroll", n));
+    };
+  }), p.subscribe((o) => {
+    let n = Array.from(o.keys()).filter(({ style: d }) => d.position === "sticky"), s = /* @__PURE__ */ l(() => requestAnimationFrame(() => {
+      u.set(
+        (d) => d.map((r) => {
+          if (n.includes(r.element)) {
+            let { top: f, left: h } = r.element.getBoundingClientRect();
+            return { ...r, top: f + window.scrollY, left: h + window.scrollX };
+          }
+          return r;
+        })
+      );
+    }), "updateBoxes");
+    return i.addEventListener("scroll", s), () => i.removeEventListener("scroll", s);
+  }), p.subscribe((o) => {
+    E.set((n) => n.filter(({ element: s }) => o.has(s)));
+  }), E.subscribe((o) => {
+    o.length ? (w.set((n) => o.some((s) => s.element === n?.element) ? n : void 0), v.set((n) => o.some((s) => s.element === n?.element) ? n :
+    void 0)) : (w.set(void 0), v.set(void 0), m.set(void 0));
+  });
+  let k = new Map(/* @__PURE__ */ new Map());
+  g.subscribe((o) => {
+    o.forEach(({ keyframes: n }) => {
+      if (n) {
+        let s = k.get(n);
+        s || (s = i.createElement("style"), s.setAttribute("data-highlight", "keyframes"), k.set(n, s), i.head.appendChild(s)), s.innerHTML =
+        n;
+      }
+    }), k.forEach((n, s) => {
+      o.some((d) => d.keyframes === s) || (n.remove(), k.delete(s));
+    });
+  });
+  let C = new Map(/* @__PURE__ */ new Map());
+  u.subscribe((o) => {
+    o.forEach((n) => {
+      let s = C.get(n.element);
+      if (H && !s) {
+        let d = {
+          popover: "manual",
+          "data-highlight-dimensions": `w${n.width.toFixed(0)}h${n.height.toFixed(0)}`,
+          "data-highlight-coordinates": `x${n.left.toFixed(0)}y${n.top.toFixed(0)}`
+        };
+        s = H.appendChild(y("div", d)), C.set(n.element, s);
+      }
+    }), C.forEach((n, s) => {
+      o.some(({ element: d }) => d === s) || (n.remove(), C.delete(s));
+    });
+  }), u.subscribe((o) => {
+    let n = o.filter((d) => d.selectable);
+    if (!n.length)
+      return;
+    let s = /* @__PURE__ */ l((d) => {
+      requestAnimationFrame(() => {
+        let r = i.getElementById(e), f = { x: d.pageX, y: d.pageY };
+        if (r && !z(r, f)) {
+          let h = n.filter((b) => {
+            let L = C.get(b.element);
+            return j(b, L, f);
+          });
+          m.set(h.length ? f : void 0), E.set(h);
+        }
+      });
+    }, "onClick");
+    return i.addEventListener("click", s), () => i.removeEventListener("click", s);
+  });
+  let K = /* @__PURE__ */ l(() => {
+    let o = i.getElementById(e), n = x.get();
+    !n || o && z(o, n) || M.set((s) => {
+      let d = u.get().filter((b) => {
+        let L = C.get(b.element);
+        return j(b, L, n);
+      }), r = s.filter((b) => d.includes(b)), f = d.filter((b) => !s.includes(b)), h = s.length - r.length;
+      return f.length || h ? [...r, ...f] : s;
+    });
+  }, "updateHovered");
+  x.subscribe(K), u.subscribe(K);
+  let B = /* @__PURE__ */ l(() => {
+    let o = w.get(), n = o ? [o] : E.get(), s = n.length === 1 ? n[0] : v.get(), d = m.get() !== void 0;
+    u.get().forEach((r) => {
+      let f = C.get(r.element);
+      if (f) {
+        let h = s === r, b = d ? s ? h : n.includes(r) : M.get()?.includes(r);
+        Object.assign(f.style, {
+          animation: "none",
+          background: "transparent",
+          border: "none",
+          boxSizing: "border-box",
+          outline: "none",
+          outlineOffset: "0px",
+          ...r.styles,
+          ...b ? r.hoverStyles : {},
+          ...h ? r.focusStyles : {},
+          position: getComputedStyle(r.element).position === "fixed" ? "fixed" : "absolute",
+          zIndex: V - 10,
+          top: `${r.top}px`,
+          left: `${r.left}px`,
+          width: `${r.width}px`,
+          height: `${r.height}px`,
+          margin: 0,
+          padding: 0,
+          cursor: r.selectable ? "pointer" : "default",
+          pointerEvents: r.selectable ? "auto" : "none"
+        }), W(f);
+      }
+    });
+  }, "updateBoxStyles");
+  u.subscribe(B), E.subscribe(B), M.subscribe(B), v.subscribe(B), w.subscribe(B);
+  let J = /* @__PURE__ */ l(() => {
+    if (!H)
+      return;
+    let o = i.getElementById(e);
+    if (o)
+      o.innerHTML = "";
+    else {
+      let r = { id: e, popover: "manual" };
+      o = H.appendChild(y("div", r)), H.appendChild(
+        y("style", {}, [
+          `
+            #${e} {
+              position: absolute;
+              z-index: ${V};
+              width: 300px;
+              padding: 0px;
+              margin: 15px 0 0 0;
+              transform: translateX(-50%);
+              font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Ne\
+ue", Helvetica, Arial, sans-serif;
+              font-size: 12px;
+              background: white;
+              border: none;
+              border-radius: 6px;
+              box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1);
+              color: #2E3438;
+            }
+            #${e} ul {
+              list-style: none;
+              padding: 4px 0;
+              margin: 0;
+              max-height: 300px;
+              overflow-y: auto;
+            }
+            #${e} li {
+              padding: 0 4px;
+              margin: 0;
+            }
+            #${e} li > * {
+              display: flex;
+              padding: 8px;
+              margin: 0;
+              align-items: center;
+              gap: 8px;
+              border-radius: 4px;
+            }
+            #${e} button {
+              width: 100%;
+              border: 0;
+              background: transparent;
+              color: inherit;
+              text-align: left;
+              font-family: inherit;
+              font-size: inherit;
+            }
+            #${e} button:focus {
+              outline-color: #029CFD;
+            }
+            #${e} button:hover {
+              background: rgba(2, 156, 253, 0.07);
+              color: #029CFD;
+              cursor: pointer;
+            }
+            #${e} li code {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              line-height: 16px;
+              font-size: 11px;
+            }
+            #${e} li svg {
+              display: none;
+              flex-shrink: 0;
+              margin: 1px;
+              color: #73828C;
+            }
+            #${e} li > button:hover svg, #${e} li > button:focus svg {
+              color: #029CFD;
+            }
+            #${e} li.selectable svg, #${e} li.selected svg {
+              display: block;
+            }
+            #${e} .menu-list {
+              border-top: 1px solid rgba(38, 85, 115, 0.15);
+            }
+            #${e} .menu-list li:not(:last-child) {
+              padding-bottom: 4px;
+              margin-bottom: 4px;
+              border-bottom: 1px solid rgba(38, 85, 115, 0.15);
+            }
+            #${e} .menu-list li div {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              gap: 0;
+            }
+            #${e} .menu-list li small {
+              color: #5C6870;
+              font-size: 11px;
+            }
+          `
+        ])
+      );
+    }
+    let n = w.get(), s = n ? [n] : E.get();
+    if (s.length && (o.style.position = getComputedStyle(s[0].element).position === "fixed" ? "fixed" : "absolute", o.appendChild(
+      y(
+        "ul",
+        { class: "element-list" },
+        s.map((r) => {
+          let f = r.menu?.filter(
+            (S) => !S.selectors || S.selectors.some((R) => r.selectors.includes(R))
+          ), h = s.length > 1 && !!f?.length, b = h ? {
+            class: "selectable",
+            onClick: /* @__PURE__ */ l(() => w.set(r), "onClick"),
+            onMouseEnter: /* @__PURE__ */ l(() => v.set(r), "onMouseEnter"),
+            onMouseLeave: /* @__PURE__ */ l(() => v.set(void 0), "onMouseLeave")
+          } : n ? { class: "selected", onClick: /* @__PURE__ */ l(() => w.set(void 0), "onClick") } : {}, L = h || n;
+          return y("li", b, [
+            y(L ? "button" : "div", L ? { type: "button" } : {}, [
+              n ? be() : null,
+              y("code", {}, [r.element.outerHTML]),
+              h ? ye() : null
+            ])
+          ]);
+        })
+      )
+    )), w.get() || E.get().length === 1) {
+      let r = w.get() || E.get()[0], f = r.menu?.filter(
+        (h) => !h.selectors || h.selectors.some((b) => r.selectors.includes(b))
+      );
+      f?.length && o.appendChild(
+        y(
+          "ul",
+          { class: "menu-list" },
+          f.map(({ id: h, title: b, description: L, clickEvent: S }) => {
+            let R = S && (() => t.emit(S, h, le(r)));
+            return y("li", {}, [
+              y(
+                R ? "button" : "div",
+                R ? { type: "button", onClick: R } : {},
+                [
+                  y("div", {}, [
+                    y("strong", {}, [b]),
+                    L && y("small", {}, [L])
+                  ])
+                ]
+              )
+            ]);
+          })
+        )
+      );
+    }
+    let d = m.get();
+    d ? (Object.assign(o.style, {
+      display: "block",
+      left: `${o.style.position === "fixed" ? d.x - window.scrollX : d.x}px`,
+      top: `${o.style.position === "fixed" ? d.y - window.scrollY : d.y}px`
+    }), W(o), requestAnimationFrame(() => ie(o, d, { topOffset: 15, centered: !0 }))) : (re(o), Object.assign(o.style, { display: "none" }));
+  }, "renderMenu");
+  E.subscribe(J), w.subscribe(J);
+  let U = /* @__PURE__ */ l((o) => {
+    let n = ne(o);
+    n.selectors?.length && g.set((s) => [...s, n]);
+  }, "addHighlight"), N = /* @__PURE__ */ l((o) => {
+    g.set((n) => n.filter((s) => s.id !== o));
+  }, "removeHighlight"), D = /* @__PURE__ */ l(() => {
+    g.set([]);
+  }, "clearHighlights"), G, Q = /* @__PURE__ */ l((o, n) => {
+    let s = "scrollIntoView-highlight";
+    clearTimeout(G), N(s);
+    let d = i.querySelector(o);
+    if (!d) {
+      console.warn(`Cannot scroll into view: ${o} not found`);
+      return;
+    }
+    d.scrollIntoView({ behavior: "smooth", block: "center", ...n });
+    let r = `kf-${Math.random().toString(36).substring(2, 15)}`;
+    g.set((f) => [
+      ...f,
+      {
+        id: s,
+        priority: 1e3,
+        selectors: [o],
+        selectable: !1,
+        styles: {
+          outline: "2px solid #1EA7FD",
+          outlineOffset: "2px",
+          animation: `${r} 3s linear forwards`
+        },
+        keyframes: `@keyframes ${r} {
+          0% { outline: 2px solid #1EA7FD; }
+          20% { outline: 2px solid #1EA7FD00; }
+          40% { outline: 2px solid #1EA7FD; }
+          60% { outline: 2px solid #1EA7FD00; }
+          80% { outline: 2px solid #1EA7FD; }
+          100% { outline: 2px solid #1EA7FD00; }
+        }`
+      }
+    ]), G = setTimeout(() => N(s), 3500);
+  }, "scrollIntoView"), ee = /* @__PURE__ */ l((o) => {
+    requestAnimationFrame(() => x.set({ x: o.pageX, y: o.pageY }));
+  }, "onMouseMove");
+  i.body.addEventListener("mousemove", ee), t.on(X, U), t.on(oe, N), t.on(P, D), t.on(Z.STORY_CHANGED, D), t.on(Y, Q);
+  let te = /* @__PURE__ */ l(() => {
+    clearTimeout(G), i.body.removeEventListener("mousemove", ee), t.off(X, U), t.off(P, D), t.off(Z.STORY_CHANGED, D), t.off(Y, Q), g.teardown(),
+    p.teardown(), u.teardown(), E.teardown(), m.teardown(), x.teardown(), M.teardown(), v.teardown(), w.teardown(), k.forEach((o) => o.remove()),
+    C.forEach((o) => o.remove()), i.getElementById(e)?.remove(), i.getElementById(c)?.remove();
+  }, "teardown");
+  return globalThis.__STORYBOOK_HIGHLIGHT_TEARDOWN = te, te;
+}, "useHighlights");
+
+// src/highlight/preview.ts
+$.addons && $.addons.ready && $.addons.ready().then(() => {
+  let t = $.addons.getChannel();
+  ce({ channel: t });
+});
+var we = /* @__PURE__ */ l(() => (0, $.definePreview)({}), "default");

package/dist/highlight/preview.d.ts

@@ -0,0 +1,54 @@
+import { Renderer as Renderer$1, ProjectAnnotations as ProjectAnnotations$1, StoryIdentifier, StoryContext, PartialStoryFn, LegacyStoryFn } from 'storybook/internal/csf';
+import { NormalizedProjectAnnotations, ProjectAnnotations as ProjectAnnotations$2, ComposedStoryFn } from 'storybook/internal/types';
+
+declare global {
+	interface SymbolConstructor {
+		readonly observable: symbol;
+	}
+}
+
+interface Renderer extends Renderer$1 {
+}
+
+type MaybePromise<T> = Promise<T> | T;
+type TeardownRenderToCanvas = () => MaybePromise<void>;
+type RenderToCanvas<TRenderer extends Renderer> = (context: RenderContext<TRenderer>, element: TRenderer['canvasElement']) => MaybePromise<void | TeardownRenderToCanvas>;
+interface ProjectAnnotations<TRenderer extends Renderer> extends ProjectAnnotations$1<TRenderer> {
+    addons?: ProjectAnnotations<TRenderer>[];
+    testingLibraryRender?: (...args: never[]) => {
+        unmount: () => void;
+    };
+    renderToCanvas?: RenderToCanvas<TRenderer>;
+}
+declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
+    showMain: () => void;
+    showError: (error: {
+        title: string;
+        description: string;
+    }) => void;
+    showException: (err: Error) => void;
+    forceRemount: boolean;
+    storyContext: StoryContext<TRenderer>;
+    storyFn: PartialStoryFn<TRenderer>;
+    unboundStoryFn: LegacyStoryFn<TRenderer>;
+};
+
+declare global {
+    var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
+    var defaultProjectAnnotations: ProjectAnnotations$2<any>;
+}
+type WrappedStoryRef = {
+    __pw_type: 'jsx' | 'importRef';
+};
+type UnwrappedJSXStoryRef = {
+    __pw_type: 'jsx';
+    type: UnwrappedImportStoryRef;
+};
+type UnwrappedImportStoryRef = ComposedStoryFn;
+declare global {
+    function __pwUnwrapObject(storyRef: WrappedStoryRef): Promise<UnwrappedJSXStoryRef | UnwrappedImportStoryRef>;
+}
+
+declare const _default: () => ProjectAnnotations<Renderer>;
+
+export { _default as default };