@aussieljk/forkbook 0.0.1-5 → 0.0.1-7

package/dist/_browser-chunks/{chunk-K6GRZSXS.js → chunk-EQKMUQF3.js}

@@ -1,6 +1,9 @@
 import {
   applyDecorators
 } from "./chunk-WHQRNHXD.js";
+import {
+  global
+} from "./chunk-6AKCRYVX.js";
 import {
   __export
 } from "./chunk-IMSF75WX.js";
@@ -18,7 +21,6 @@ __export(entry_preview_exports, {
 });
 import * as React3 from "react";
 import { Tag } from "@aussieljk/forkbook/internal/preview-api";
-import { global as global2 } from "@storybook/global";
 import { configure } from "@aussieljk/forkbook/test";
 
 // src/react/act-compat.ts
@@ -86,7 +88,6 @@ var render = (args, context) => {
 
 // src/react/renderToCanvas.tsx
 import { Fragment, Component as ReactComponent, StrictMode } from "react";
-import { global } from "@storybook/global";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var { FRAMEWORK_OPTIONS } = global, ErrorBoundary = class extends ReactComponent {
   constructor() {
@@ -167,7 +168,7 @@ var decorators = [
     return jsx3(React3.Suspense, { children: story() });
   },
   (story, context) => {
-    if (context.tags?.includes(Tag.TEST_FN) && !global2.FEATURES?.experimentalTestSyntax)
+    if (context.tags?.includes(Tag.TEST_FN) && !global.FEATURES?.experimentalTestSyntax)
       throw new Error(
         "To use the experimental test function, you must enable the experimentalTestSyntax feature flag. See https://forkbook.ljk.dev/docs/api/main-config/main-config-features#experimentaltestsyntax"
       );

package/dist/_browser-chunks/{chunk-GU3X2J4S.js → chunk-FRAOQJDI.js}

@@ -1,6 +1,9 @@
 import {
   EVENT_ID
 } from "./chunk-N5WQGLI7.js";
+import {
+  global
+} from "./chunk-6AKCRYVX.js";
 
 // src/actions/runtime/configureActions.ts
 var config = {
@@ -13,7 +16,6 @@ var config = {
 
 // src/actions/runtime/action.ts
 import { ImplicitActionsDuringRendering } from "@aussieljk/forkbook/internal/preview-errors";
-import { global } from "@storybook/global";
 import { addons } from "@aussieljk/forkbook/preview-api";
 var findProto = (obj, callback) => {
   let proto = Object.getPrototypeOf(obj);

package/dist/_browser-chunks/{chunk-2SCZVUKW.js → chunk-H4ZHAXN3.js}

@@ -1,6 +1,6 @@
 import {
   withLinks
-} from "./chunk-52CW7FF7.js";
+} from "./chunk-YYWKZ7O3.js";
 import {
   __export
 } from "./chunk-IMSF75WX.js";

package/dist/_browser-chunks/{chunk-HOSBMS2F.js → chunk-HTL5ODCB.js}

@@ -42,7 +42,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id2}"
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id2), style.textContent = ".fb-I61SDG-syntaxHighlighter{font-size:calc(var(--fb-size-s2) - 1px);border-radius:var(--fb-app-border-radius);margin:25px 0 40px;line-height:19px;box-shadow:0 1px 3px #0000001a;& pre.fb-I61SDG-prismjs{background:inherit;padding:20px}}.fb-I61SDG-snippetWarning{z-index:1;position:absolute;top:4px;right:4px}.fb-I61SDG-sourceWrapper{position:relative}.fb-I61SDG-skeletonWrapper{background:var(--fb-background-content);border-radius:var(--fb-app-border-radius);border:1px solid var(--fb-app-border-color);margin:25px 0 40px;padding:20px 20px 20px 22px;box-shadow:0 1px 3px #0000001a}:where([data-fb-theme=dark]){& .fb-I61SDG-syntaxHighlighter,& .fb-I61SDG-skeletonWrapper{box-shadow:0 2px 5px #0003}}.fb-I61SDG-skeletonPlaceholder{background:var(--fb-app-border-color);width:60%;height:17px;margin-top:1px;animation:1.5s ease-in-out infinite fb-I61SDG-glow;&:first-child{margin:0}}@keyframes fb-I61SDG-glow{0%,to{opacity:1}50%{opacity:.4}}", document.head.appendChild(style);
 }
-var Source_default = { skeletonPlaceholder: "fb-I61SDG-skeletonPlaceholder", snippetWarning: "fb-I61SDG-snippetWarning", sourceWrapper: "fb-I61SDG-sourceWrapper", skeletonWrapper: "fb-I61SDG-skeletonWrapper", prismjs: "fb-I61SDG-prismjs", glow: "fb-I61SDG-glow", syntaxHighlighter: "fb-I61SDG-syntaxHighlighter" };
+var Source_default = { sourceWrapper: "fb-I61SDG-sourceWrapper", skeletonWrapper: "fb-I61SDG-skeletonWrapper", prismjs: "fb-I61SDG-prismjs", skeletonPlaceholder: "fb-I61SDG-skeletonPlaceholder", snippetWarning: "fb-I61SDG-snippetWarning", glow: "fb-I61SDG-glow", syntaxHighlighter: "fb-I61SDG-syntaxHighlighter" };
 
 // src/addon-docs/blocks/components/Source.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";

package/dist/_browser-chunks/{chunk-ZLWA5RIE.js → chunk-I4ATZPNZ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-GNZY6LOW.js";
 import {
   entry_preview_exports
-} from "./chunk-K6GRZSXS.js";
+} from "./chunk-EQKMUQF3.js";
 
 // src/react/preview.tsx
 import { definePreview as definePreviewBase } from "@aussieljk/forkbook/internal/csf";

package/dist/_browser-chunks/{chunk-6SHRDXGF.js → chunk-IJYLSHY7.js}

@@ -48,6 +48,9 @@ import {
   MINIMAL_VIEWPORTS,
   PARAM_KEY
 } from "./chunk-QDXFODK4.js";
+import {
+  global
+} from "./chunk-6AKCRYVX.js";
 import {
   __toESM
 } from "./chunk-IMSF75WX.js";
@@ -89,7 +92,6 @@ import {
   UPDATE_GLOBALS,
   UPDATE_STORY_ARGS
 } from "@aussieljk/forkbook/internal/core-events";
-import { global } from "@storybook/global";
 var HooksContext = class {
   constructor() {
     this.hookListsMap = void 0;
@@ -324,9 +326,6 @@ import {
 } from "@aussieljk/forkbook/internal/preview-errors";
 var import_memoizerific2 = __toESM(require_memoizerific(), 1);
 
-// src/preview-api/modules/store/ArgsStore.ts
-import { global as global2 } from "@storybook/global";
-
 // src/preview-api/modules/store/args.ts
 import { once } from "@aussieljk/forkbook/internal/client-logger";
 import { dedent } from "ts-dedent";
@@ -428,7 +427,7 @@ function groupArgsByTarget({
 function deleteUndefined(obj) {
   return Object.keys(obj).forEach((key) => obj[key] === void 0 && delete obj[key]), obj;
 }
-var argTypesForValidation = (story) => global2.FEATURES?.docgenServer ? inferArgTypes({
+var argTypesForValidation = (story) => global.FEATURES?.docgenServer ? inferArgTypes({
   id: story.id,
   argTypes: story.argTypes,
   initialArgs: story.initialArgs
@@ -644,8 +643,6 @@ import {
   includeConditionalArg
 } from "@aussieljk/forkbook/internal/csf";
 import { NoRenderFunctionError } from "@aussieljk/forkbook/internal/preview-errors";
-import { global as global3 } from "@storybook/global";
-import { global as globalThis2 } from "@storybook/global";
 
 // src/preview-api/modules/preview-web/render/mount-utils.ts
 function mountDestructured(playFunction) {
@@ -801,7 +798,7 @@ function prepareMeta(componentAnnotations, projectAnnotations, moduleExport) {
   };
 }
 function preparePartialAnnotations(storyAnnotations, componentAnnotations, projectAnnotations) {
-  let defaultTags = [Tag.DEV, Tag.TEST], extraTags = globalThis2.DOCS_OPTIONS?.autodocs === !0 ? [Tag.AUTODOCS] : [], overrideTags = storyAnnotations?.tags?.includes(Tag.TEST_FN) ? [`!${Tag.AUTODOCS}`] : [], tags = combineTags(
+  let defaultTags = [Tag.DEV, Tag.TEST], extraTags = global.DOCS_OPTIONS?.autodocs === !0 ? [Tag.AUTODOCS] : [], overrideTags = storyAnnotations?.tags?.includes(Tag.TEST_FN) ? [`!${Tag.AUTODOCS}`] : [], tags = combineTags(
     ...defaultTags,
     ...extraTags,
     ...projectAnnotations.tags ?? [],
@@ -846,7 +843,7 @@ function preparePartialAnnotations(storyAnnotations, componentAnnotations, proje
     argTypes: passedArgTypes,
     storyGlobals
   };
-  contextForEnhancers.argTypes = argTypesEnhancers.filter((enhancer) => !(global3.FEATURES?.docgenServer && enhancer.secondPass)).reduce(
+  contextForEnhancers.argTypes = argTypesEnhancers.filter((enhancer) => !(global.FEATURES?.docgenServer && enhancer.secondPass)).reduce(
     (accumulatedArgTypes, enhancer) => enhancer({ ...contextForEnhancers, argTypes: accumulatedArgTypes }),
     contextForEnhancers.argTypes
   );
@@ -870,7 +867,7 @@ function prepareContext(context) {
     allArgs: void 0,
     argsByTarget: void 0
   };
-  if (global3.FEATURES?.argTypeTargetsV7) {
+  if (global.FEATURES?.argTypeTargetsV7) {
     let argsByTarget = groupArgsByTarget(context);
     targetedContext = {
       ...context,
@@ -1495,7 +1492,6 @@ import {
   StoryIndexFetchError,
   StoryStoreAccessedBeforeInitializationError
 } from "@aussieljk/forkbook/internal/preview-errors";
-import { global as global4 } from "@storybook/global";
 
 // src/preview-api/modules/preview-web/render/StoryRender.ts
 import {
@@ -1762,7 +1758,7 @@ var StoryRender = class {
 };
 
 // src/preview-api/modules/preview-web/Preview.tsx
-var { fetch } = global4, STORY_INDEX_PATH = "./index.json", Preview = class {
+var { fetch } = global, STORY_INDEX_PATH = "./index.json", Preview = class {
   constructor(importFn, getProjectAnnotations, channel = addons.getChannel(), shouldInitialize = !0) {
     this.importFn = importFn;
     this.getProjectAnnotations = getProjectAnnotations;
@@ -2031,9 +2027,6 @@ var { fetch } = global4, STORY_INDEX_PATH = "./index.json", Preview = class {
   }
 };
 
-// src/preview-api/modules/preview-web/PreviewWeb.tsx
-import { global as global9 } from "@storybook/global";
-
 // src/preview-api/modules/preview-web/PreviewWithSelection.tsx
 import { logger as logger5 } from "@aussieljk/forkbook/internal/client-logger";
 import {
@@ -2066,28 +2059,8 @@ function isMdxEntry({ tags }) {
   return tags?.includes(Tag.UNATTACHED_MDX) || tags?.includes(Tag.ATTACHED_MDX);
 }
 
-// src/preview-api/modules/preview-web/embedMode.ts
-var shouldEmbed = ({ search }) => new URLSearchParams(search).get("embed") === "true", shouldAutoplay = ({ search }) => !shouldEmbed({ search });
-
-// src/preview-api/modules/preview-web/getEmbedResizeViewport.ts
-var getEmbedResizeViewport = (storyStore, render, reference) => {
-  if (!storyStore || !render?.story)
-    return;
-  let { globals, storyGlobals, userGlobals, parameters } = storyStore.getStoryContext(
-    render.story
-  ), viewportParameters = parameters[PARAM_KEY];
-  return toResolvedViewportDimensions(
-    resolveViewport({
-      globals,
-      storyGlobals,
-      userGlobals,
-      options: viewportParameters?.options ?? MINIMAL_VIEWPORTS,
-      disable: viewportParameters?.disable ?? !1,
-      viewMode: "story"
-    }),
-    reference
-  );
-};
+// src/preview-api/modules/preview-web/InfiniteDocs.ts
+import { DOCS_PAGE_IN_VIEW } from "@aussieljk/forkbook/internal/core-events";
 
 // src/preview-api/modules/preview-web/render/CsfDocsRender.ts
 import { DOCS_RENDERED } from "@aussieljk/forkbook/internal/core-events";
@@ -2390,8 +2363,105 @@ var MdxDocsRender = class {
   }
 };
 
-// src/preview-api/modules/preview-web/setupContentResizeBroadcast.ts
-import { global as global6 } from "@storybook/global";
+// src/preview-api/modules/preview-web/InfiniteDocs.ts
+var { document: document2, IntersectionObserver } = globalThis, docsEntriesInOrder = (entries) => {
+  let docs = Object.values(entries).filter((entry) => entry.type === "docs"), isTopLevel = (entry) => !entry.title.includes("/");
+  return [...docs.filter(isTopLevel), ...docs.filter((entry) => !isTopLevel(entry))];
+}, nextDocsEntry = (entries, id) => {
+  let docs = docsEntriesInOrder(entries), index = docs.findIndex((entry) => entry.id === id);
+  return index === -1 ? void 0 : docs[index + 1];
+}, InfiniteDocs = class {
+  constructor(channel, store, renderStoryToElement, callbacks) {
+    this.channel = channel;
+    this.store = store;
+    this.renderStoryToElement = renderStoryToElement;
+    this.callbacks = callbacks;
+    this.renders = [];
+    this.loading = !1;
+  }
+  /** Starts after the main docs page `entry` rendered into `docsRoot`. */
+  start(entry, docsRoot) {
+    if (this.stop(), typeof IntersectionObserver > "u" || typeof document2 > "u" || !docsRoot?.dataset || this.store.projectAnnotations?.parameters?.docs?.infiniteScroll === !1)
+      return;
+    this.lastId = entry.id, this.inViewId = entry.id, docsRoot.dataset.docsId = entry.id;
+    let container = document2.createElement("div");
+    container.className = "fb-infinite-docs";
+    let sentinel = document2.createElement("div");
+    sentinel.className = "fb-infinite-docs-sentinel", sentinel.style.height = "1px", container.appendChild(sentinel), docsRoot.after(container), this.container = container, this.pageObserver = new IntersectionObserver(
+      (records) => {
+        for (let record of records) {
+          let id = record.target.dataset.docsId;
+          record.isIntersecting && id && id !== this.inViewId && (this.inViewId = id, this.channel.emit(DOCS_PAGE_IN_VIEW, { storyId: id }));
+        }
+      },
+      { rootMargin: "-10% 0px -60% 0px" }
+    ), this.pageObserver.observe(docsRoot), this.sentinelObserver = new IntersectionObserver(
+      (records) => {
+        records.some((record) => record.isIntersecting) && this.loadNext();
+      },
+      { rootMargin: "0px 0px 600px 0px" }
+    ), this.sentinelObserver.observe(sentinel);
+  }
+  async loadNext() {
+    let { container, lastId } = this;
+    if (this.loading || !container || !lastId)
+      return;
+    let entry = nextDocsEntry(this.store.storyIndex.entries, lastId);
+    if (!entry) {
+      this.sentinelObserver?.disconnect();
+      return;
+    }
+    this.loading = !0, this.lastId = entry.id;
+    let element = document2.createElement("div");
+    element.className = "fb-infinite-docs-page", element.dataset.docsId = entry.id, container.insertBefore(element, container.lastChild);
+    let render = isMdxEntry(entry) ? new MdxDocsRender(this.channel, this.store, entry, this.callbacks(entry.id)) : new CsfDocsRender(this.channel, this.store, entry, this.callbacks(entry.id));
+    this.renders.push(render);
+    try {
+      if (await render.prepare(), this.container !== container)
+        return;
+      await render.renderToElement(
+        element,
+        this.renderStoryToElement
+      ), this.pageObserver?.observe(element);
+    } catch {
+      this.sentinelObserver?.disconnect();
+    } finally {
+      this.loading = !1;
+    }
+    let sentinel = container.lastElementChild;
+    sentinel && sentinel.getBoundingClientRect().top < globalThis.innerHeight + 600 && this.loadNext();
+  }
+  /** Removes the pages below the main page. */
+  stop() {
+    this.sentinelObserver?.disconnect(), this.pageObserver?.disconnect(), this.sentinelObserver = void 0, this.pageObserver = void 0;
+    for (let render of this.renders)
+      render.teardown({ viewModeChanged: !0 });
+    this.renders = [], this.container?.remove(), this.container = void 0, this.lastId = void 0, this.inViewId = void 0, this.loading = !1;
+  }
+};
+
+// src/preview-api/modules/preview-web/embedMode.ts
+var shouldEmbed = ({ search }) => new URLSearchParams(search).get("embed") === "true", shouldAutoplay = ({ search }) => !shouldEmbed({ search });
+
+// src/preview-api/modules/preview-web/getEmbedResizeViewport.ts
+var getEmbedResizeViewport = (storyStore, render, reference) => {
+  if (!storyStore || !render?.story)
+    return;
+  let { globals, storyGlobals, userGlobals, parameters } = storyStore.getStoryContext(
+    render.story
+  ), viewportParameters = parameters[PARAM_KEY];
+  return toResolvedViewportDimensions(
+    resolveViewport({
+      globals,
+      storyGlobals,
+      userGlobals,
+      options: viewportParameters?.options ?? MINIMAL_VIEWPORTS,
+      disable: viewportParameters?.disable ?? !1,
+      viewMode: "story"
+    }),
+    reference
+  );
+};
 
 // src/shared/constants/iframe-resize.ts
 var IFRAME_RESIZE_CONTEXT = "iframe.resize", IFRAME_RESIZE_REQUEST_CONTEXT = "iframe.resize.request";
@@ -2402,7 +2472,6 @@ import {
   STORY_HOT_UPDATED as STORY_HOT_UPDATED2,
   STORY_RENDER_PHASE_CHANGED as STORY_RENDER_PHASE_CHANGED2
 } from "@aussieljk/forkbook/internal/core-events";
-import { global as global5 } from "@storybook/global";
 var FREEZE_STYLE_ID = "storybook-freeze-after-finished", PRE_FREEZE_STYLE_ID = "storybook-freeze-end-frame-preload", tryReplaceProperty = (target, key, value) => {
   try {
     let descriptor = Object.getOwnPropertyDescriptor(target, key);
@@ -2523,7 +2592,7 @@ var FREEZE_STYLE_ID = "storybook-freeze-after-finished", PRE_FREEZE_STYLE_ID = "
     }
   } };
 }, setupStoryFreezer = (channel, options = {}) => {
-  let windowRef = global5.window, documentRef = global5.document;
+  let windowRef = global.window, documentRef = global.document;
   if (!windowRef || !documentRef || !shouldFreeze({ search: documentRef.location.search }))
     return !1;
   addPreFreezeStyles(documentRef);
@@ -2729,7 +2798,7 @@ var EMBED_STYLE_ID = "storybook-embed-sizing", EMBED_UI_STYLE_ID = "storybook-em
     rafId !== null && (cancelAnimationFrame(rafId), rafId = null);
   }, debounced;
 }, setupContentResizeBroadcast = (options = {}) => {
-  let { getViewport } = options, windowRef = global6.window, documentRef = global6.document;
+  let { getViewport } = options, windowRef = global.window, documentRef = global.document;
   if (!windowRef || !documentRef)
     return {};
   if (!shouldEmbed({ search: documentRef.location.search }))
@@ -2914,7 +2983,9 @@ var PreviewWithSelection = class extends Preview {
     let { selection } = this.selectionStore;
     if (!selection)
       throw new Error("Cannot call renderSelection as no selection was made");
-    let { storyId } = selection, entry;
+    let { storyId } = selection;
+    this.infiniteDocs?.stop();
+    let entry;
     try {
       entry = await this.storyStoreValue.storyIdToEntry(storyId);
     } catch (err) {
@@ -3001,15 +3072,35 @@ var PreviewWithSelection = class extends Preview {
         parameters
       });
     }
-    isStoryRender(render) ? (invariant(!!render.story), this.storyRenders.push(render), this.currentRender.renderToElement(
-      this.view.prepareForStory(render.story, {
-        scrollReset: storyIdChanged || viewModeChanged
-      })
-    )) : this.currentRender.renderToElement(
-      this.view.prepareForDocs({ scrollReset: storyIdChanged || viewModeChanged }),
-      // This argument is used for docs, which is currently only compatible with HTMLElements
-      this.renderStoryToElement.bind(this)
-    );
+    if (isStoryRender(render))
+      invariant(!!render.story), this.storyRenders.push(render), this.currentRender.renderToElement(
+        this.view.prepareForStory(render.story, {
+          scrollReset: storyIdChanged || viewModeChanged
+        })
+      );
+    else {
+      let docsRoot = this.view.prepareForDocs({ scrollReset: storyIdChanged || viewModeChanged }), docsRender = this.currentRender;
+      docsRender.renderToElement(
+        docsRoot,
+        // This argument is used for docs, which is currently only compatible with HTMLElements
+        this.renderStoryToElement.bind(this)
+      ).then(() => {
+        this.currentRender === docsRender && this.storyStoreValue && (this.infiniteDocs ??= new InfiniteDocs(
+          this.channel,
+          this.storyStoreValue,
+          this.renderStoryToElement.bind(this),
+          () => ({
+            showStoryDuringRender: () => {
+            },
+            showMain: () => {
+            },
+            showError: () => {
+            },
+            showException: (err) => logger5.error(err)
+          })
+        ), this.infiniteDocs.start(entry, docsRoot));
+      });
+    }
   }
   async teardownRender(render, {
     viewModeChanged = !1,
@@ -3048,9 +3139,6 @@ var PreviewWithSelection = class extends Preview {
   }
 };
 
-// src/preview-api/modules/preview-web/UrlStore.ts
-import { global as global7 } from "@storybook/global";
-
 // src/preview-api/modules/preview-web/parseArgsParam.ts
 import { once as once2 } from "@aussieljk/forkbook/internal/client-logger";
 import { dedent as dedent4 } from "ts-dedent";
@@ -3092,7 +3180,7 @@ var VALIDATION_REGEXP = /^[a-zA-Z0-9 _-]*$/, NUMBER_REGEXP = /^-?[0-9]+(\.[0-9]+
 };
 
 // src/preview-api/modules/preview-web/UrlStore.ts
-var { history, document: document2 } = global7, PATH_REGEX = /^\/(story|docs)\/(.+)/;
+var { history, document: document3 } = global, PATH_REGEX = /^\/(story|docs)\/(.+)/;
 function pathToId(path) {
   let match = (path || "").match(PATH_REGEX);
   if (!match)
@@ -3106,7 +3194,7 @@ var getQueryString = ({
   selection,
   extraParams
 }) => {
-  let search = document2?.location.search.slice(1), { path, selectedKind, selectedStory, ...rest } = parse(search);
+  let search = document3?.location.search.slice(1), { path, selectedKind, selectedStory, ...rest } = parse(search);
   return `?${stringify({
     ...rest,
     ...extraParams,
@@ -3115,8 +3203,8 @@ var getQueryString = ({
 }, setPath = (selection) => {
   if (!selection)
     return;
-  let query = getQueryString({ selection }), { hash = "" } = document2.location;
-  document2.title = selection.storyId, history.replaceState({}, "", `${document2.location.pathname}${query}${hash}`);
+  let query = getQueryString({ selection }), { hash = "" } = document3.location;
+  document3.title = selection.storyId, history.replaceState({}, "", `${document3.location.pathname}${query}${hash}`);
 }, isObject = (val) => val != null && typeof val == "object" && Array.isArray(val) === !1, getFirstString = (v) => {
   if (v !== void 0) {
     if (typeof v == "string")
@@ -3129,8 +3217,8 @@ var getQueryString = ({
       );
   }
 }, getSelectionSpecifierFromPath = () => {
-  if (typeof document2 < "u") {
-    let queryStr = document2.location.search.slice(1), query = parse(queryStr), args = typeof query.args == "string" ? parseArgsParam(query.args) : void 0, globals = typeof query.globals == "string" ? parseArgsParam(query.globals) : void 0, path = getFirstString(query.path), viewMode = getFirstString(query.viewMode);
+  if (typeof document3 < "u") {
+    let queryStr = document3.location.search.slice(1), query = parse(queryStr), args = typeof query.args == "string" ? parseArgsParam(query.args) : void 0, globals = typeof query.globals == "string" ? parseArgsParam(query.globals) : void 0, path = getFirstString(query.path), viewMode = getFirstString(query.viewMode);
     if (typeof viewMode != "string" || !viewMode)
       viewMode = path && pathToViewMode(path) || "story";
     else if (!viewMode.match(/docs|story/))
@@ -3148,17 +3236,16 @@ var getQueryString = ({
     this.selection = selection, setPath(this.selection);
   }
   setQueryParams(queryParams) {
-    let query = getQueryString({ extraParams: queryParams }), { hash = "" } = document2.location;
-    history.replaceState({}, "", `${document2.location.pathname}${query}${hash}`);
+    let query = getQueryString({ extraParams: queryParams }), { hash = "" } = document3.location;
+    history.replaceState({}, "", `${document3.location.pathname}${query}${hash}`);
   }
 };
 
 // src/preview-api/modules/preview-web/WebView.ts
-var import_ansi_to_html = __toESM(require_ansi_to_html(), 1);
 import { logger as logger6 } from "@aussieljk/forkbook/internal/client-logger";
-import { global as global8 } from "@storybook/global";
+var import_ansi_to_html = __toESM(require_ansi_to_html(), 1);
 import { dedent as dedent5 } from "ts-dedent";
-var { document: document3 } = global8, PREPARING_DELAY = 100, Mode = /* @__PURE__ */ ((Mode2) => (Mode2.MAIN = "MAIN", Mode2.NOPREVIEW = "NOPREVIEW", Mode2.PREPARING_STORY = "PREPARING_STORY", Mode2.PREPARING_DOCS = "PREPARING_DOCS", Mode2.ERROR = "ERROR", Mode2))(Mode || {}), classes = {
+var { document: document4 } = global, PREPARING_DELAY = 100, Mode = /* @__PURE__ */ ((Mode2) => (Mode2.MAIN = "MAIN", Mode2.NOPREVIEW = "NOPREVIEW", Mode2.PREPARING_STORY = "PREPARING_STORY", Mode2.PREPARING_DOCS = "PREPARING_DOCS", Mode2.ERROR = "ERROR", Mode2))(Mode || {}), classes = {
   PREPARING_STORY: "fb-show-preparing-story",
   PREPARING_DOCS: "fb-show-preparing-docs",
   MAIN: "fb-show-main",
@@ -3173,8 +3260,8 @@ var { document: document3 } = global8, PREPARING_DELAY = 100, Mode = /* @__PURE_
 }), WebView = class {
   constructor() {
     this.testing = !1;
-    if (typeof document3 < "u") {
-      let { __SPECIAL_TEST_PARAMETER__ } = parse(document3.location.search.slice(1));
+    if (typeof document4 < "u") {
+      let { __SPECIAL_TEST_PARAMETER__ } = parse(document4.location.search.slice(1));
       switch (__SPECIAL_TEST_PARAMETER__) {
         case "preparing-story": {
           this.showPreparingStory(), this.testing = !0;
@@ -3190,30 +3277,30 @@ var { document: document3 } = global8, PREPARING_DELAY = 100, Mode = /* @__PURE_
   }
   // Get ready to render a story, returning the element to render to
   prepareForStory(story, { scrollReset = !0 } = {}) {
-    this.showStory(), this.applyLayout(story.parameters.layout), scrollReset && (document3.documentElement.scrollTop = 0, document3.documentElement.scrollLeft = 0);
+    this.showStory(), this.applyLayout(story.parameters.layout), scrollReset && (document4.documentElement.scrollTop = 0, document4.documentElement.scrollLeft = 0);
     let storyRoot = this.storyRoot();
     return this.applyHtmlLang(storyRoot, story.parameters.htmlLang), storyRoot;
   }
   storyRoot() {
-    return document3.getElementById("storybook-root");
+    return document4.getElementById("storybook-root");
   }
   prepareForDocs({ scrollReset = !0 } = {}) {
-    return this.showMain(), this.showDocs(), this.applyLayout("fullscreen"), scrollReset && (document3.documentElement.scrollTop = 0, document3.documentElement.scrollLeft = 0), this.docsRoot();
+    return this.showMain(), this.showDocs(), this.applyLayout("fullscreen"), scrollReset && (document4.documentElement.scrollTop = 0, document4.documentElement.scrollLeft = 0), this.docsRoot();
   }
   docsRoot() {
-    return document3.getElementById("storybook-docs");
+    return document4.getElementById("storybook-docs");
   }
   scrollToAnchor(hash) {
-    document3.getElementById(decodeURIComponent(hash.substring(1)))?.scrollIntoView({ behavior: "smooth" });
+    document4.getElementById(decodeURIComponent(hash.substring(1)))?.scrollIntoView({ behavior: "smooth" });
   }
   applyLayout(layout = "padded") {
     if (layout === "none") {
-      document3.body.classList.remove(this.currentLayoutClass), this.currentLayoutClass = null;
+      document4.body.classList.remove(this.currentLayoutClass), this.currentLayoutClass = null;
       return;
     }
     this.checkIfLayoutExists(layout);
     let layoutClass = layoutClassMap[layout];
-    document3.body.classList.remove(this.currentLayoutClass), document3.body.classList.add(layoutClass), this.currentLayoutClass = layoutClass;
+    document4.body.classList.remove(this.currentLayoutClass), document4.body.classList.add(layoutClass), this.currentLayoutClass = layoutClass;
   }
   /**
    * Injects a BCP-47 lang attribute to the story root, or removes it if `lang` is null.
@@ -3231,14 +3318,14 @@ var { document: document3 } = global8, PREPARING_DELAY = 100, Mode = /* @__PURE_
   }
   showMode(mode) {
     clearTimeout(this.preparingTimeout), Object.keys(Mode).forEach((otherMode) => {
-      otherMode === mode ? document3.body.classList.add(classes[otherMode]) : document3.body.classList.remove(classes[otherMode]);
+      otherMode === mode ? document4.body.classList.add(classes[otherMode]) : document4.body.classList.remove(classes[otherMode]);
     });
   }
   showErrorDisplay({ message = "", stack = "" }) {
     let header = message, detail = stack, parts = message.split(`
 `);
     parts.length > 1 && ([header] = parts, detail = parts.slice(1).join(`
-`).replace(/^\n/, "")), document3.getElementById("error-message").innerHTML = ansiConverter.toHtml(header), document3.getElementById("error-stack").innerHTML = ansiConverter.toHtml(detail), this.showMode("ERROR" /* ERROR */);
+`).replace(/^\n/, "")), document4.getElementById("error-message").innerHTML = ansiConverter.toHtml(header), document4.getElementById("error-stack").innerHTML = ansiConverter.toHtml(detail), this.showMode("ERROR" /* ERROR */);
   }
   showNoPreview() {
     this.testing || (this.showMode("NOPREVIEW" /* NOPREVIEW */), this.storyRoot()?.setAttribute("hidden", "true"), this.docsRoot()?.setAttribute("hidden", "true"));
@@ -3262,7 +3349,7 @@ var { document: document3 } = global8, PREPARING_DELAY = 100, Mode = /* @__PURE_
     this.docsRoot().setAttribute("hidden", "true"), this.storyRoot().removeAttribute("hidden");
   }
   showStoryDuringRender() {
-    document3.body.classList.add(classes.MAIN);
+    document4.body.classList.add(classes.MAIN);
   }
 };
 
@@ -3272,13 +3359,12 @@ var PreviewWeb = class extends PreviewWithSelection {
     super(importFn, getProjectAnnotations, new UrlStore(), new WebView());
     this.importFn = importFn;
     this.getProjectAnnotations = getProjectAnnotations;
-    global9.__FORKBOOK_PREVIEW__ = this;
+    global.__FORKBOOK_PREVIEW__ = this;
   }
 };
 
 // src/preview-api/modules/preview-web/simulate-pageload.ts
-import { global as global10 } from "@storybook/global";
-var { document: document4 } = global10, runScriptTypes = [
+var { document: document5 } = global, runScriptTypes = [
   "application/javascript",
   "application/ecmascript",
   "application/x-ecmascript",
@@ -3299,12 +3385,12 @@ var { document: document4 } = global10, runScriptTypes = [
   "module"
 ], SCRIPT = "script", SCRIPTS_ROOT_ID = "scripts-root";
 function simulateDOMContentLoaded() {
-  let DOMContentLoadedEvent = document4.createEvent("Event");
-  DOMContentLoadedEvent.initEvent("DOMContentLoaded", !0, !0), document4.dispatchEvent(DOMContentLoadedEvent);
+  let DOMContentLoadedEvent = document5.createEvent("Event");
+  DOMContentLoadedEvent.initEvent("DOMContentLoaded", !0, !0), document5.dispatchEvent(DOMContentLoadedEvent);
 }
 function insertScript($script, callback, $scriptRoot) {
-  let scriptEl = document4.createElement("script");
-  scriptEl.type = $script.type === "module" ? "module" : "text/javascript", $script.src ? (scriptEl.onload = callback, scriptEl.onerror = callback, scriptEl.src = $script.src) : scriptEl.textContent = $script.innerText, $scriptRoot ? $scriptRoot.appendChild(scriptEl) : document4.head.appendChild(scriptEl), $script.parentNode.removeChild($script), $script.src || callback();
+  let scriptEl = document5.createElement("script");
+  scriptEl.type = $script.type === "module" ? "module" : "text/javascript", $script.src ? (scriptEl.onload = callback, scriptEl.onerror = callback, scriptEl.src = $script.src) : scriptEl.textContent = $script.innerText, $scriptRoot ? $scriptRoot.appendChild(scriptEl) : document5.head.appendChild(scriptEl), $script.parentNode.removeChild($script), $script.src || callback();
 }
 function insertScriptsSequentially(scriptsToExecute, callback, index = 0) {
   scriptsToExecute[index](() => {
@@ -3312,8 +3398,8 @@ function insertScriptsSequentially(scriptsToExecute, callback, index = 0) {
   });
 }
 function simulatePageLoad($container) {
-  let $scriptsRoot = document4.getElementById(SCRIPTS_ROOT_ID);
-  $scriptsRoot ? $scriptsRoot.innerHTML = "" : ($scriptsRoot = document4.createElement("div"), $scriptsRoot.id = SCRIPTS_ROOT_ID, document4.body.appendChild($scriptsRoot));
+  let $scriptsRoot = document5.getElementById(SCRIPTS_ROOT_ID);
+  $scriptsRoot ? $scriptsRoot.innerHTML = "" : ($scriptsRoot = document5.createElement("div"), $scriptsRoot.id = SCRIPTS_ROOT_ID, document5.body.appendChild($scriptsRoot));
   let $scripts = Array.from($container.querySelectorAll(SCRIPT));
   if ($scripts.length) {
     let scriptsToExecute = [];

package/dist/_browser-chunks/{chunk-SZCSXISG.js → chunk-NA4ITZTK.js}

@@ -3,6 +3,9 @@ import {
   curriedLighten$1,
   rgba
 } from "./chunk-S6TK43XQ.js";
+import {
+  global
+} from "./chunk-6AKCRYVX.js";
 
 // src/theming/base.ts
 var easing = {
@@ -67,7 +70,7 @@ var easing = {
   content: color.lightest,
   preview: color.lightest,
   gridCellSize: 10,
-  hoverable: "#E5F1FF",
+  hoverable: "#E5E5EA",
   // Notification, error, and warning backgrounds
   positive: "#EAF9EE",
   warning: "#FFF4E5",
@@ -199,7 +202,7 @@ var border = "rgba(84, 84, 88, 0.6)", theme = {
   appBg: "#000000",
   appContentBg: "#1C1C1E",
   // systemGray6
-  appHoverBg: "#0B2D52",
+  appHoverBg: "#2C2C2E",
   appPreviewBg: color.lightest,
   appBorderColor: border,
   appBorderRadius: 4,
@@ -212,7 +215,7 @@ var border = "rgba(84, 84, 88, 0.6)", theme = {
   textMutedColor: "#98989F",
   // Toolbar default and active colors
   barTextColor: "#98989F",
-  barHoverColor: "#409CFF",
+  barHoverColor: "#F2F2F7",
   barSelectedColor: "#0A84FF",
   barBg: "#1C1C1E",
   // Form colors
@@ -250,7 +253,7 @@ var theme2 = {
   textMutedColor: color.dark,
   // Toolbar default and active colors
   barTextColor: color.dark,
-  barHoverColor: "#0062CC",
+  barHoverColor: color.darkest,
   barSelectedColor: color.secondary,
   barBg: color.lightest,
   // Form colors
@@ -266,7 +269,6 @@ var theme2 = {
 
 // src/theming/utils.ts
 import { logger } from "@aussieljk/forkbook/internal/client-logger";
-import { global } from "@storybook/global";
 var { window: globalWindow } = global;
 var isColorString = (color2) => typeof color2 != "string" ? (logger.warn(
   `Color passed to theme object should be a string. Instead ${color2}(${typeof color2}) was passed.`