@aussieljk/forkbook 0.0.0-stage → 0.0.1-2

package/dist/core-server/presets/common-manager.js

@@ -0,0 +1,4168 @@
+import {
+  ADDON_ID as ADDON_ID6,
+  DOCUMENTATION_DISCREPANCY_LINK,
+  DOCUMENTATION_PLAY_FUNCTION_LINK,
+  FORKBOOK_ADDON_TEST_CHANNEL,
+  INTERNAL_RENDER_CALL_ID,
+  PANEL_ID as PANEL_ID2,
+  PARAM_KEY as PARAM_KEY5,
+  STATUS_TYPE_ID_COMPONENT_TEST
+} from "../../_browser-chunks/chunk-MLBOOZL4.js";
+import "../../_browser-chunks/chunk-OZZPSYQR.js";
+import {
+  ArgsTable
+} from "../../_browser-chunks/chunk-JYVGARBG.js";
+import "../../_browser-chunks/chunk-PJSMZ27A.js";
+import "../../_browser-chunks/chunk-PFRNG3UC.js";
+import {
+  defineService
+} from "../../_browser-chunks/chunk-ZEHRUHTA.js";
+import {
+  announce
+} from "../../_browser-chunks/chunk-KBK7GKBN.js";
+import "../../_browser-chunks/chunk-CNED6RYH.js";
+import {
+  dequal,
+  registerService
+} from "../../_browser-chunks/chunk-JMC7AIKT.js";
+import "../../_browser-chunks/chunk-4ATQOMJB.js";
+import {
+  ADDON_ID as ADDON_ID4,
+  ADDON_ID2 as ADDON_ID5,
+  PARAM_KEY2 as PARAM_KEY4,
+  TOOL_ID as TOOL_ID2,
+  docgenServiceDef
+} from "../../_browser-chunks/chunk-NQUD4B7H.js";
+import {
+  EVENTS
+} from "../../_browser-chunks/chunk-TBJCJXK4.js";
+import {
+  require_ansi_to_html,
+  resolveViewport
+} from "../../_browser-chunks/chunk-FENFYI4X.js";
+import "../../_browser-chunks/chunk-YTIT5NA5.js";
+import "../../_browser-chunks/chunk-OD6IBQCC.js";
+import "../../_browser-chunks/chunk-QC4HFS6K.js";
+import "../../_browser-chunks/chunk-6SXYJQST.js";
+import {
+  mergeServiceArgTypes
+} from "../../_browser-chunks/chunk-ODVJ3XZJ.js";
+import "../../_browser-chunks/chunk-2JDQ35OA.js";
+import "../../_browser-chunks/chunk-IE4ULIOQ.js";
+import "../../_browser-chunks/chunk-B4AUNNU4.js";
+import "../../_browser-chunks/chunk-NZMVUW5T.js";
+import "../../_browser-chunks/chunk-JWSKPMPC.js";
+import "../../_browser-chunks/chunk-JPUOQJUI.js";
+import {
+  ADDON_ID,
+  MINIMAL_VIEWPORTS,
+  PARAM_KEY,
+  TOOL_ID
+} from "../../_browser-chunks/chunk-QDXFODK4.js";
+import "../../_browser-chunks/chunk-RSPAQWVJ.js";
+import "../../_browser-chunks/chunk-V5M7Q4HT.js";
+import "../../_browser-chunks/chunk-SC67XZST.js";
+import {
+  ADDON_ID as ADDON_ID2,
+  CLEAR_ID,
+  EVENT_ID,
+  PANEL_ID,
+  PARAM_KEY as PARAM_KEY2
+} from "../../_browser-chunks/chunk-V2G23FV7.js";
+import {
+  ADDON_ID as ADDON_ID3,
+  DEFAULT_BACKGROUNDS,
+  PARAM_KEY as PARAM_KEY3
+} from "../../_browser-chunks/chunk-LAWXTSXK.js";
+import {
+  __commonJS,
+  __toESM
+} from "../../_browser-chunks/chunk-IMSF75WX.js";
+
+// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js
+var require_extends = __commonJS({
+  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
+    function _extends6() {
+      return module.exports = _extends6 = Object.assign || function(target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source)
+            Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
+        }
+        return target;
+      }, _extends6.apply(this, arguments);
+    }
+    module.exports = _extends6;
+  }
+});
+
+// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
+var require_objectWithoutPropertiesLoose = __commonJS({
+  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
+    function _objectWithoutPropertiesLoose(source, excluded) {
+      if (source == null) return {};
+      var target = {}, sourceKeys = Object.keys(source), key, i;
+      for (i = 0; i < sourceKeys.length; i++)
+        key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
+      return target;
+    }
+    module.exports = _objectWithoutPropertiesLoose;
+  }
+});
+
+// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
+var require_objectWithoutProperties = __commonJS({
+  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports, module) {
+    var objectWithoutPropertiesLoose = require_objectWithoutPropertiesLoose();
+    function _objectWithoutProperties7(source, excluded) {
+      if (source == null) return {};
+      var target = objectWithoutPropertiesLoose(source, excluded), key, i;
+      if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for (i = 0; i < sourceSymbolKeys.length; i++)
+          key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
+      }
+      return target;
+    }
+    module.exports = _objectWithoutProperties7;
+  }
+});
+
+// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js
+var require_defineProperty = __commonJS({
+  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js"(exports, module) {
+    function _defineProperty(obj, key, value) {
+      return key in obj ? Object.defineProperty(obj, key, {
+        value,
+        enumerable: !0,
+        configurable: !0,
+        writable: !0
+      }) : obj[key] = value, obj;
+    }
+    module.exports = _defineProperty;
+  }
+});
+
+// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js
+var require_objectSpread2 = __commonJS({
+  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports, module) {
+    var defineProperty = require_defineProperty();
+    function ownKeys(object2, enumerableOnly) {
+      var keys = Object.keys(object2);
+      if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object2);
+        enumerableOnly && (symbols = symbols.filter(function(sym) {
+          return Object.getOwnPropertyDescriptor(object2, sym).enumerable;
+        })), keys.push.apply(keys, symbols);
+      }
+      return keys;
+    }
+    function _objectSpread22(target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i] != null ? arguments[i] : {};
+        i % 2 ? ownKeys(source, !0).forEach(function(key) {
+          defineProperty(target, key, source[key]);
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+      return target;
+    }
+    module.exports = _objectSpread22;
+  }
+});
+
+// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
+var require_objectWithoutPropertiesLoose2 = __commonJS({
+  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
+    function _objectWithoutPropertiesLoose(source, excluded) {
+      if (source == null) return {};
+      var target = {}, sourceKeys = Object.keys(source), key, i;
+      for (i = 0; i < sourceKeys.length; i++)
+        key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
+      return target;
+    }
+    module.exports = _objectWithoutPropertiesLoose;
+  }
+});
+
+// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
+var require_objectWithoutProperties2 = __commonJS({
+  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports, module) {
+    var objectWithoutPropertiesLoose = require_objectWithoutPropertiesLoose2();
+    function _objectWithoutProperties7(source, excluded) {
+      if (source == null) return {};
+      var target = objectWithoutPropertiesLoose(source, excluded), key, i;
+      if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for (i = 0; i < sourceSymbolKeys.length; i++)
+          key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
+      }
+      return target;
+    }
+    module.exports = _objectWithoutProperties7;
+  }
+});
+
+// ../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/extends.js
+var require_extends2 = __commonJS({
+  "../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
+    function _extends6() {
+      return module.exports = _extends6 = Object.assign || function(target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source)
+            Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
+        }
+        return target;
+      }, _extends6.apply(this, arguments);
+    }
+    module.exports = _extends6;
+  }
+});
+
+// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js
+var require_defineProperty2 = __commonJS({
+  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js"(exports, module) {
+    function _defineProperty(obj, key, value) {
+      return key in obj ? Object.defineProperty(obj, key, {
+        value,
+        enumerable: !0,
+        configurable: !0,
+        writable: !0
+      }) : obj[key] = value, obj;
+    }
+    module.exports = _defineProperty;
+  }
+});
+
+// ../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js
+var require_objectSpread22 = __commonJS({
+  "../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports, module) {
+    var defineProperty = require_defineProperty2();
+    function ownKeys(object2, enumerableOnly) {
+      var keys = Object.keys(object2);
+      if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object2);
+        enumerableOnly && (symbols = symbols.filter(function(sym) {
+          return Object.getOwnPropertyDescriptor(object2, sym).enumerable;
+        })), keys.push.apply(keys, symbols);
+      }
+      return keys;
+    }
+    function _objectSpread22(target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i] != null ? arguments[i] : {};
+        i % 2 ? ownKeys(source, !0).forEach(function(key) {
+          defineProperty(target, key, source[key]);
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(source).forEach(function(key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+      return target;
+    }
+    module.exports = _objectSpread22;
+  }
+});
+
+// ../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js
+var require_extends3 = __commonJS({
+  "../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
+    function _extends6() {
+      return module.exports = _extends6 = Object.assign || function(target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
+          for (var key in source)
+            Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
+        }
+        return target;
+      }, _extends6.apply(this, arguments);
+    }
+    module.exports = _extends6;
+  }
+});
+
+// ../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
+var require_objectWithoutPropertiesLoose3 = __commonJS({
+  "../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
+    function _objectWithoutPropertiesLoose(source, excluded) {
+      if (source == null) return {};
+      var target = {}, sourceKeys = Object.keys(source), key, i;
+      for (i = 0; i < sourceKeys.length; i++)
+        key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
+      return target;
+    }
+    module.exports = _objectWithoutPropertiesLoose;
+  }
+});
+
+// ../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js
+var require_objectWithoutProperties3 = __commonJS({
+  "../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports, module) {
+    var objectWithoutPropertiesLoose = require_objectWithoutPropertiesLoose3();
+    function _objectWithoutProperties7(source, excluded) {
+      if (source == null) return {};
+      var target = objectWithoutPropertiesLoose(source, excluded), key, i;
+      if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for (i = 0; i < sourceSymbolKeys.length; i++)
+          key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
+      }
+      return target;
+    }
+    module.exports = _objectWithoutProperties7;
+  }
+});
+
+// src/shared/open-service/services/docgen/manager.tsx
+import { addons } from "@aussieljk/forkbook/manager-api";
+var ADDON_ID7 = "core/docgen", manager_default = addons.register(ADDON_ID7, () => {
+  globalThis.FEATURES?.docgenServer && registerService(docgenServiceDef);
+});
+
+// src/shared/open-service/services/review/manager.tsx
+import { addons as addons2 } from "@aussieljk/forkbook/manager-api";
+
+// src/shared/open-service/services/review/definition.ts
+import * as v from "valibot";
+var reviewCollectionSchema = v.object({
+  title: v.pipe(v.string(), v.description("Collection title shown on the review page.")),
+  rationale: v.pipe(
+    v.string(),
+    v.description("Why this collection is relevant. Plain text, one or two sentences.")
+  ),
+  storyIds: v.pipe(v.array(v.string()), v.description("Story ids included in this collection."))
+}), reviewStateSchema = v.object({
+  title: v.pipe(v.string(), v.description("Terse review title. Plain text.")),
+  description: v.pipe(
+    v.string(),
+    v.description(
+      "Review scope and what to look for. Limited markdown: bold, italic, and inline code."
+    )
+  ),
+  collections: v.array(reviewCollectionSchema),
+  changedFiles: v.optional(
+    v.pipe(
+      v.array(v.string()),
+      v.description(
+        "Changed file paths, most central first. Pass an empty array when nothing changed."
+      )
+    )
+  ),
+  createdAt: v.optional(v.number()),
+  stale: v.optional(v.boolean())
+}), reviewNavEntrySchema = v.object({
+  storyId: v.pipe(v.string(), v.description("Story id of this navigation slot.")),
+  collectionIndex: v.pipe(
+    v.number(),
+    v.description("Index of the collection this slot belongs to.")
+  )
+}), reviewServiceDef = defineService({
+  id: "core/review",
+  internal: !0,
+  description: "Owns the current curated Forkbook review, its deferred update, and its staleness.",
+  initialState: { current: null, pending: null },
+  queries: {
+    current: {
+      description: "Returns the current review, or null when no review is active.",
+      input: v.undefined(),
+      output: v.nullable(reviewStateSchema),
+      handler: (_input, ctx) => ctx.self.state.current
+    },
+    pending: {
+      description: "Returns the deferred review update, or null when none is held.",
+      input: v.undefined(),
+      output: v.nullable(reviewStateSchema),
+      handler: (_input, ctx) => ctx.self.state.pending
+    },
+    flattenedEntries: {
+      description: "Returns the current review flattened into navigable story slots, walking collections in order (a story repeats when curated into several collections). Empty when no review is active.",
+      input: v.undefined(),
+      output: v.array(reviewNavEntrySchema),
+      handler: (_input, ctx) => (ctx.self.state.current?.collections ?? []).flatMap(
+        (collection, collectionIndex) => collection.storyIds.map((storyId) => ({ storyId, collectionIndex }))
+      )
+    },
+    bannerKind: {
+      description: "Returns which attention banner review surfaces should show: pending-update outranks stale, and once accepted the banner reflects the staleness of the accepted review; null when neither applies.",
+      input: v.undefined(),
+      output: v.nullable(v.picklist(["pending-update", "stale"])),
+      handler: (_input, ctx) => ctx.self.state.pending !== null ? "pending-update" : ctx.self.state.current?.stale ? "stale" : null
+    }
+  },
+  commands: {
+    setReview: {
+      description: "Publishes a review and assigns its server creation time. Defers to pending while any review is current. Implemented by the server.",
+      input: reviewStateSchema,
+      output: v.void()
+    },
+    acceptPending: {
+      description: "Promotes the deferred review update to current. Implemented by the server.",
+      input: v.undefined(),
+      output: v.void()
+    },
+    markStale: {
+      description: "Marks the current and pending reviews stale when the module graph changed after they were published. Implemented by the server.",
+      input: v.object({
+        changedAt: v.pipe(
+          v.number(),
+          v.description("When (unix ms) the newest module-graph change was made.")
+        )
+      }),
+      output: v.void()
+    },
+    dismissReview: {
+      description: "Clears the current review and any deferred update. Implemented by the server.",
+      input: v.undefined(),
+      output: v.void()
+    }
+  }
+});
+
+// src/shared/open-service/services/review/manager.tsx
+var ADDON_ID8 = "core/review", manager_default2 = addons2.register(ADDON_ID8, () => {
+  registerService(reviewServiceDef);
+});
+
+// src/controls/manager.tsx
+import { AddonPanel } from "@aussieljk/forkbook/internal/components";
+import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from "@aussieljk/forkbook/internal/core-events";
+import { FailedIcon, PassedIcon } from "@storybook/icons";
+import {
+  addons as addons3,
+  experimental_requestResponse,
+  getService,
+  types
+} from "@aussieljk/forkbook/manager-api";
+import { color } from "@aussieljk/forkbook/theming";
+
+// src/controls/components/ControlsPanel.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { STORY_FINISHED, STORY_PREPARED } from "@aussieljk/forkbook/internal/core-events";
+import { global } from "@storybook/global";
+import {
+  useArgTypes,
+  useArgs,
+  useChannel,
+  useGlobals,
+  useParameter,
+  useServiceQuery,
+  useStorybookApi,
+  useStorybookState
+} from "@aussieljk/forkbook/manager-api";
+
+// src/controls/constants.ts
+var ADDON_ID9 = "addon-controls", PARAM_KEY6 = "controls";
+
+// src/controls/components/SaveStory.tsx
+import React from "react";
+import { Bar, Button, Form, Modal } from "@aussieljk/forkbook/internal/components";
+import { AddIcon, CheckIcon, UndoIcon } from "@storybook/icons";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/controls/components/SaveStory.module.css
+var id = "core/src/controls/components/SaveStory.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id), style.textContent = ".sb-zEgyLq-container{z-index:1;width:100%;height:41px;position:absolute;bottom:0;overflow:hidden;container-type:size}.sb-zEgyLq-bar{--highlight-bg-color:#e0f0ff;background:var(--sb-background-bar);border-top:1px solid var(--sb-app-border-color);font-size:var(--sb-size-s2);padding-inline:4px;animation:.3s sb-zEgyLq-slideIn,2s sb-zEgyLq-highlight;@container (width<=799px){flex-direction:row;justify-content:flex-end}}:where([data-sb-theme=dark]) .sb-zEgyLq-bar{--highlight-bg-color:#153b5b}.sb-zEgyLq-info{flex:99 0 auto;align-items:center;gap:6px;margin-inline:7px 10px;display:flex}.sb-zEgyLq-actions{color:var(--sb-text-muted-color);font-size:var(--sb-size-s2);flex:1 0 0;align-items:center;gap:2px;display:flex}.sb-zEgyLq-label{@container (width<=799px){text-indent:-9999px;line-height:0;&:after{content:attr(data-short-label);line-height:initial;text-indent:0;display:block}}}.sb-zEgyLq-modalInput{&::placeholder{color:var(--sb-color-mediumdark)}&:invalid:not(:placeholder-shown){box-shadow:var(--sb-color-negative) 0 0 0 1px inset}}@keyframes sb-zEgyLq-slideIn{0%{transform:translateY(40px)}to{transform:translateY(0)}}@keyframes sb-zEgyLq-highlight{0%{background:var(--highlight-bg-color)}}", document.head.appendChild(style);
+}
+var SaveStory_default = { info: "sb-zEgyLq-info", container: "sb-zEgyLq-container", modalInput: "sb-zEgyLq-modalInput", slideIn: "sb-zEgyLq-slideIn", label: "sb-zEgyLq-label", actions: "sb-zEgyLq-actions", bar: "sb-zEgyLq-bar", highlight: "sb-zEgyLq-highlight" };
+
+// src/controls/components/SaveStory.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SaveStory = ({ saveStory, createStory, resetArgs }) => {
+  let inputRef = React.useRef(null), [saving, setSaving] = React.useState(!1), [creating, setCreating] = React.useState(!1), [storyName, setStoryName] = React.useState(""), [errorMessage, setErrorMessage] = React.useState(null), onSaveStory = async () => {
+    saving || (setSaving(!0), await saveStory().catch(() => {
+    }), setSaving(!1));
+  }, onShowForm = () => {
+    setCreating(!0), setStoryName(""), setTimeout(() => inputRef.current?.focus(), 0);
+  }, onChange = (e) => {
+    let value = e.target.value.replace(/^[^a-z]/i, "").replace(/[^a-z0-9-_ ]/gi, "").replaceAll(/([-_ ]+[a-z0-9])/gi, (match) => match.toUpperCase().replace(/[-_ ]/g, ""));
+    setStoryName(value.charAt(0).toUpperCase() + value.slice(1));
+  }, onSubmitForm = async (event) => {
+    if (event.preventDefault(), !saving)
+      try {
+        setErrorMessage(null), setSaving(!0), await createStory(storyName.replace(/^[^a-z]/i, "").replaceAll(/[^a-z0-9]/gi, "")), setCreating(!1), setSaving(!1);
+      } catch (e) {
+        setErrorMessage(e.message), setSaving(!1);
+      }
+  }, saveLabel = saving ? "Saving changes to story" : "Save changes to story", createLabel = "Create new story with these settings";
+  return jsx("div", { className: SaveStory_default.container, id: "save-from-controls", children: jsxs(
+    Bar,
+    {
+      className: SaveStory_default.bar,
+      innerStyle: {
+        flexDirection: "row-reverse",
+        justifyContent: "space-between",
+        flexWrap: "wrap"
+      },
+      children: [
+        jsxs("div", { className: SaveStory_default.actions, children: [
+          jsxs(Button, { ariaLabel: saveLabel, tooltip: saveLabel, disabled: saving, onClick: onSaveStory, children: [
+            jsx(CheckIcon, {}),
+            jsx("div", { className: SaveStory_default.label, "data-short-label": "Save", children: "Update story" })
+          ] }),
+          jsxs(Button, { ariaLabel: createLabel, tooltip: createLabel, onClick: onShowForm, children: [
+            jsx(AddIcon, {}),
+            jsx("div", { className: SaveStory_default.label, "data-short-label": "New", children: "Create new story" })
+          ] }),
+          jsxs(Button, { ariaLabel: "Reset changes", onClick: () => resetArgs(), children: [
+            jsx(UndoIcon, {}),
+            jsx("span", { children: "Reset" })
+          ] })
+        ] }),
+        jsxs(Modal, { ariaLabel: "Create new story", width: 350, open: creating, onOpenChange: setCreating, children: [
+          jsx(Form, { onSubmit: onSubmitForm, id: "create-new-story-form", children: jsxs(Modal.Content, { children: [
+            jsxs(Modal.Header, { children: [
+              jsx(Modal.Title, { children: "Create new story" }),
+              jsx(Modal.Description, { children: "This will add a new story to your existing stories file." })
+            ] }),
+            jsx(
+              Form.Input,
+              {
+                className: SaveStory_default.modalInput,
+                onChange,
+                placeholder: "Story export name",
+                readOnly: saving,
+                ref: inputRef,
+                value: storyName
+              }
+            ),
+            jsxs(Modal.Actions, { children: [
+              jsx(
+                Button,
+                {
+                  ariaLabel: !1,
+                  disabled: saving || !storyName,
+                  size: "medium",
+                  type: "submit",
+                  variant: "solid",
+                  children: "Create"
+                }
+              ),
+              jsx(Modal.Close, { asChild: !0, children: jsx(Button, { ariaLabel: !1, disabled: saving, size: "medium", type: "reset", children: "Cancel" }) })
+            ] })
+          ] }) }),
+          errorMessage && jsx(Modal.Error, { children: errorMessage })
+        ] }),
+        jsx("div", { className: SaveStory_default.info, children: jsx("div", { className: SaveStory_default.label, "data-short-label": "Unsaved changes", children: "You modified this story. Do you want to save your changes?" }) })
+      ]
+    }
+  ) });
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/controls/components/ControlsPanel.module.css
+var id2 = "core/src/controls/components/ControlsPanel.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id2}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id2), style.textContent = ".sb-yARkZG-wrapper{background-color:var(--sb-background-content);min-height:100%;padding-bottom:0;&[data-save-from-ui]{padding-bottom:41px}& table{background-color:var(--sb-background-app)}}", document.head.appendChild(style);
+}
+var ControlsPanel_default = { wrapper: "sb-yARkZG-wrapper" };
+
+// src/controls/components/ControlsPanel.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var clean = (obj) => Object.entries(obj).reduce(
+  (acc, [key, value]) => value !== void 0 ? Object.assign(acc, { [key]: value }) : acc,
+  {}
+), hasAnyControl = (rows) => Object.values(rows).some((arg) => arg?.control);
+function applyPresetColors(rows, presetColors) {
+  return Object.entries(rows).reduce((acc, [key, arg]) => {
+    let control = arg?.control;
+    return typeof control != "object" || control?.type !== "color" || control?.presetColors ? acc[key] = arg : acc[key] = { ...arg, control: { ...control, presetColors } }, acc;
+  }, {});
+}
+function ControlsPanelTable({
+  rows,
+  isLoading,
+  saveStory,
+  createStory
+}) {
+  let [args, updateArgs, resetArgs, initialArgs] = useArgs(), [globals] = useGlobals(), {
+    expanded,
+    sort,
+    presetColors,
+    disableSaveFromUI = !1
+  } = useParameter(PARAM_KEY6, {}), { path } = useStorybookState(), storyData = useStorybookApi().getCurrentStoryData(), hasControls = hasAnyControl(rows), withPresetColors = applyPresetColors(rows, presetColors), hasUpdatedArgs = useMemo(
+    () => !!args && !!initialArgs && !dequal(clean(args), clean(initialArgs)),
+    [args, initialArgs]
+  ), showSaveFromUI = hasControls && storyData.type === "story" && storyData.subtype !== "test" && hasUpdatedArgs && global.CONFIG_TYPE === "DEVELOPMENT" && disableSaveFromUI !== !0;
+  return jsxs2("div", { className: ControlsPanel_default.wrapper, "data-save-from-ui": showSaveFromUI || void 0, children: [
+    jsx2(
+      ArgsTable,
+      {
+        compact: !expanded && hasControls,
+        rows: withPresetColors,
+        args,
+        globals,
+        updateArgs,
+        resetArgs,
+        inAddonPanel: !0,
+        sort,
+        isLoading
+      },
+      path
+    ),
+    showSaveFromUI && jsx2(SaveStory, { resetArgs, saveStory, createStory })
+  ] });
+}
+function LegacyControlsPanel(props) {
+  let [isLoading, setIsLoading] = useState(!0), rows = useArgTypes(), { refs, previewInitialized } = useStorybookState(), storyData = useStorybookApi().getCurrentStoryData(), isPreviewInitialized = storyData?.refId ? !!refs[storyData.refId]?.previewInitialized : previewInitialized;
+  return useEffect(() => {
+    isPreviewInitialized && setIsLoading(!1);
+  }, [isPreviewInitialized]), jsx2(ControlsPanelTable, { ...props, rows, isLoading });
+}
+function DocgenQuery({
+  docgenService,
+  id: id13,
+  onChange
+}) {
+  let { data, isInitialLoading } = useServiceQuery(docgenService.queries.docgen, { id: id13 });
+  return useEffect(() => {
+    onChange({ payload: data, isInitialLoading });
+  }, [data, isInitialLoading, onChange]), null;
+}
+function useStoryDocgenGateReady(storyId) {
+  let isDevelopment = global.CONFIG_TYPE === "DEVELOPMENT", requestAtStoryPrepared = global.DOCGEN_STORY_PREPARED === !0, [readyStoryId, setReadyStoryId] = useState(null), ready = !isDevelopment || readyStoryId === storyId, gateEvent = requestAtStoryPrepared ? STORY_PREPARED : STORY_FINISHED;
+  return useChannel(
+    {
+      [gateEvent]: (payload) => {
+        (requestAtStoryPrepared ? payload?.id : payload?.storyId) === storyId && setReadyStoryId(storyId);
+      }
+    },
+    [storyId, requestAtStoryPrepared, gateEvent]
+  ), ready;
+}
+function ServiceControlsPanel({
+  docgenService,
+  ...props
+}) {
+  let storyData = useStorybookApi().getCurrentStoryData(), [, , , initialArgs] = useArgs(), customArgTypes = useArgTypes(), id13 = storyData.id.split("--")[0], isStory = storyData.type === "story", isStoryPrepared = !(global.CONFIG_TYPE === "DEVELOPMENT") || (isStory ? storyData.prepared : !0), gateReady = useStoryDocgenGateReady(storyData.id), queryReady = !isStory || gateReady, [docgen, setDocgen] = useState(), onDocgenChange = useCallback(
+    (state) => setDocgen({ id: id13, ...state }),
+    [id13]
+  ), current = queryReady && docgen?.id === id13 ? docgen : void 0, docgenPayload = current?.payload, docgenResolved = !!current && !current.isInitialLoading, rows = useMemo(
+    () => docgenResolved ? mergeServiceArgTypes({
+      payload: docgenPayload,
+      storyId: storyData.id,
+      parameters: storyData.parameters,
+      initialArgs,
+      customArgTypes
+    }) : customArgTypes,
+    [docgenResolved, docgenPayload, initialArgs, storyData.id, storyData.parameters, customArgTypes]
+  ), isDocgenLoading = !docgenResolved;
+  return jsxs2(Fragment, { children: [
+    queryReady && jsx2(DocgenQuery, { docgenService, id: id13, onChange: onDocgenChange }),
+    jsx2(
+      ControlsPanelTable,
+      {
+        ...props,
+        rows,
+        isLoading: !isStoryPrepared || isDocgenLoading && !hasAnyControl(rows)
+      }
+    )
+  ] });
+}
+var ControlsPanel = ({ docgenService, ...props }) => docgenService ? jsx2(ServiceControlsPanel, { ...props, docgenService }) : jsx2(LegacyControlsPanel, { ...props });
+
+// src/controls/components/Title.tsx
+import { Badge } from "@aussieljk/forkbook/internal/components";
+import { useArgTypes as useArgTypes2, useStorybookApi as useStorybookApi2 } from "@aussieljk/forkbook/manager-api";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Title() {
+  let selectedPanel = useStorybookApi2().getSelectedPanel(), rows = useArgTypes2(), controlsCount = Object.values(rows).filter(
+    (argType) => argType?.control && !argType?.table?.disable
+  ).length, suffix = controlsCount === 0 ? null : jsx3(Badge, { compact: !0, status: selectedPanel === ADDON_ID9 ? "active" : "neutral", children: controlsCount });
+  return jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    jsx3("span", { children: "Controls" }),
+    suffix
+  ] });
+}
+
+// src/manager/utils/trySelectStory.ts
+async function trySelectStory(selectStory, storyId, attempt = 1) {
+  if (attempt > 10)
+    throw new Error("We could not select the new story. Please try again.");
+  try {
+    selectStory(storyId);
+  } catch {
+    return await new Promise((resolve) => setTimeout(resolve, 500)), trySelectStory(selectStory, storyId, attempt + 1);
+  }
+}
+
+// src/controls/stringifyArgs.tsx
+var stringifyArgs = (args) => JSON.stringify(args, (_, value) => typeof value == "function" ? "__sb_empty_function_arg__" : value);
+
+// src/controls/manager.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var manager_default3 = addons3.register(ADDON_ID9, (api) => {
+  if (globalThis?.FEATURES?.controls) {
+    let channel = addons3.getChannel(), docgenService = globalThis.FEATURES?.docgenServer ? getService("core/docgen", { internal: !0 }) : void 0, saveStory = async () => {
+      let data = api.getCurrentStoryData();
+      if (data.type !== "story")
+        throw new Error("Not a story");
+      try {
+        let response = await experimental_requestResponse(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, {
+          // Only send updated args
+          args: stringifyArgs(
+            Object.entries(data.args || {}).reduce((acc, [key, value]) => (dequal(value, data.initialArgs?.[key]) || (acc[key] = value), acc), {})
+          ),
+          csfId: data.id,
+          importPath: data.importPath
+        });
+        api.addNotification({
+          id: "save-story-success",
+          icon: jsx4(PassedIcon, { color: color.positive }),
+          content: {
+            headline: "Story saved",
+            subHeadline: jsxs4(Fragment2, { children: [
+              "Updated story ",
+              jsx4("b", { children: response.sourceStoryName }),
+              "."
+            ] })
+          },
+          duration: 8e3
+        });
+      } catch (error) {
+        throw api.addNotification({
+          id: "save-story-error",
+          icon: jsx4(FailedIcon, { color: color.negative }),
+          content: {
+            headline: "Failed to save story",
+            subHeadline: error?.message || "Check the Forkbook process on the command line for more details."
+          },
+          duration: 8e3
+        }), error;
+      }
+    }, createStory = async (name) => {
+      let data = api.getCurrentStoryData();
+      if (data.type !== "story")
+        throw new Error("Not a story");
+      let response = await experimental_requestResponse(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, {
+        args: data.args && stringifyArgs(data.args),
+        csfId: data.id,
+        importPath: data.importPath,
+        name
+      });
+      api.addNotification({
+        id: "save-story-success",
+        icon: jsx4(PassedIcon, { color: color.positive }),
+        content: {
+          headline: "Story created",
+          subHeadline: jsxs4(Fragment2, { children: [
+            "Added story ",
+            jsx4("b", { children: response.newStoryName }),
+            " based on ",
+            jsx4("b", { children: response.sourceStoryName }),
+            "."
+          ] })
+        },
+        duration: 8e3,
+        onClick: ({ onDismiss }) => {
+          onDismiss(), trySelectStory(api.selectStory, response.newStoryId);
+        }
+      });
+    };
+    addons3.add(ADDON_ID9, {
+      title: Title,
+      type: types.PANEL,
+      paramKey: PARAM_KEY6,
+      render: ({ active }) => !active || !api.getCurrentStoryData() ? null : jsx4(AddonPanel, { active, hasHorizontalScrollbar: !0, hasScrollbar: !0, children: jsx4(
+        ControlsPanel,
+        {
+          saveStory,
+          createStory,
+          docgenService
+        }
+      ) })
+    }), channel.on(SAVE_STORY_RESPONSE, (data) => {
+      if (!data.success)
+        return;
+      let story = api.getCurrentStoryData();
+      story.type === "story" && (api.resetStoryArgs(story), data.payload.newStoryId && trySelectStory(api.selectStory, data.payload.newStoryId));
+    });
+  }
+});
+
+// src/actions/manager.tsx
+import { addons as addons4, types as types2 } from "@aussieljk/forkbook/manager-api";
+
+// src/actions/components/Title.tsx
+import { Badge as Badge2 } from "@aussieljk/forkbook/internal/components";
+import { STORY_CHANGED } from "@aussieljk/forkbook/internal/core-events";
+import { useAddonState, useChannel as useChannel2, useStorybookApi as useStorybookApi3 } from "@aussieljk/forkbook/manager-api";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Title2() {
+  let selectedPanel = useStorybookApi3().getSelectedPanel(), [{ count }, setCount] = useAddonState(ADDON_ID2, { count: 0 });
+  useChannel2({
+    [EVENT_ID]: () => {
+      setCount((c) => ({ ...c, count: c.count + 1 }));
+    },
+    [STORY_CHANGED]: () => {
+      setCount((c) => ({ ...c, count: 0 }));
+    },
+    [CLEAR_ID]: () => {
+      setCount((c) => ({ ...c, count: 0 }));
+    }
+  });
+  let suffix = count === 0 ? null : jsx5(Badge2, { compact: !0, status: selectedPanel === PANEL_ID ? "active" : "neutral", children: count });
+  return jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    jsx5("span", { children: "Actions" }),
+    suffix
+  ] });
+}
+
+// src/actions/containers/ActionLogger/index.tsx
+import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
+import { STORY_CHANGED as STORY_CHANGED2 } from "@aussieljk/forkbook/internal/core-events";
+import { useParameter as useParameter2 } from "@aussieljk/forkbook/manager-api";
+
+// src/actions/components/ActionLogger/index.tsx
+import { Fragment as Fragment3, useEffect as useEffect2, useRef } from "react";
+import { ActionBar, ScrollArea } from "@aussieljk/forkbook/internal/components";
+
+// ../../node_modules/react-inspector/dist/index.mjs
+import React9 from "react";
+import React3, { useContext as useContext2, useCallback as useCallback2, useLayoutEffect, useState as useState2, memo as memo2 } from "react";
+import { createContext } from "react";
+import React22, { Children, memo } from "react";
+import React4, { createContext as createContext2, useContext, useMemo as useMemo2 } from "react";
+import React7 from "react";
+import React42 from "react";
+import React6 from "react";
+import React5 from "react";
+import React8 from "react";
+import React13, { useCallback as useCallback3, useState as useState3 } from "react";
+import React10 from "react";
+import React12 from "react";
+import React11, { useCallback as useCallback22, useState as useState22 } from "react";
+import React15 from "react";
+import React14 from "react";
+import React16 from "react";
+var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __getOwnPropNames = Object.getOwnPropertyNames, __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty, __commonJS2 = (cb, mod) => function() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+}, __export = (target, all2) => {
+  for (var name in all2)
+    __defProp(target, name, { get: all2[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+}, __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target, mod)), require_is_object = __commonJS2({
+  "node_modules/is-object/index.js"(exports, module) {
+    "use strict";
+    module.exports = function(x) {
+      return typeof x == "object" && x !== null;
+    };
+  }
+}), require_is_window = __commonJS2({
+  "node_modules/is-window/index.js"(exports, module) {
+    "use strict";
+    module.exports = function(obj) {
+      if (obj == null)
+        return !1;
+      var o = Object(obj);
+      return o === o.window;
+    };
+  }
+}), require_is_dom = __commonJS2({
+  "node_modules/is-dom/index.js"(exports, module) {
+    var isObject2 = require_is_object(), isWindow = require_is_window();
+    function isNode(val) {
+      return !isObject2(val) || !isWindow(window) || typeof window.Node != "function" ? !1 : typeof val.nodeType == "number" && typeof val.nodeName == "string";
+    }
+    module.exports = isNode;
+  }
+}), themes_exports = {};
+__export(themes_exports, {
+  chromeDark: () => theme,
+  chromeLight: () => theme2
+});
+var theme = {
+  BASE_FONT_FAMILY: "Menlo, monospace",
+  BASE_FONT_SIZE: "11px",
+  BASE_LINE_HEIGHT: 1.2,
+  BASE_BACKGROUND_COLOR: "rgb(36, 36, 36)",
+  BASE_COLOR: "rgb(213, 213, 213)",
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: "rgb(227, 110, 236)",
+  OBJECT_VALUE_NULL_COLOR: "rgb(127, 127, 127)",
+  OBJECT_VALUE_UNDEFINED_COLOR: "rgb(127, 127, 127)",
+  OBJECT_VALUE_REGEXP_COLOR: "rgb(233, 63, 59)",
+  OBJECT_VALUE_STRING_COLOR: "rgb(233, 63, 59)",
+  OBJECT_VALUE_SYMBOL_COLOR: "rgb(233, 63, 59)",
+  OBJECT_VALUE_NUMBER_COLOR: "hsl(252, 100%, 75%)",
+  OBJECT_VALUE_BOOLEAN_COLOR: "hsl(252, 100%, 75%)",
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(85, 106, 242)",
+  HTML_TAG_COLOR: "rgb(93, 176, 215)",
+  HTML_TAGNAME_COLOR: "rgb(93, 176, 215)",
+  HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
+  HTML_ATTRIBUTE_NAME_COLOR: "rgb(155, 187, 220)",
+  HTML_ATTRIBUTE_VALUE_COLOR: "rgb(242, 151, 102)",
+  HTML_COMMENT_COLOR: "rgb(137, 137, 137)",
+  HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
+  ARROW_COLOR: "rgb(145, 145, 145)",
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: "0",
+  TREENODE_FONT_FAMILY: "Menlo, monospace",
+  TREENODE_FONT_SIZE: "11px",
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: "rgb(85, 85, 85)",
+  TABLE_TH_BACKGROUND_COLOR: "rgb(44, 44, 44)",
+  TABLE_TH_HOVER_COLOR: "rgb(48, 48, 48)",
+  TABLE_SORT_ICON_COLOR: "black",
+  TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))",
+  TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
+}, theme2 = {
+  BASE_FONT_FAMILY: "Menlo, monospace",
+  BASE_FONT_SIZE: "11px",
+  BASE_LINE_HEIGHT: 1.2,
+  BASE_BACKGROUND_COLOR: "white",
+  BASE_COLOR: "black",
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: "rgb(136, 19, 145)",
+  OBJECT_VALUE_NULL_COLOR: "rgb(128, 128, 128)",
+  OBJECT_VALUE_UNDEFINED_COLOR: "rgb(128, 128, 128)",
+  OBJECT_VALUE_REGEXP_COLOR: "rgb(196, 26, 22)",
+  OBJECT_VALUE_STRING_COLOR: "rgb(196, 26, 22)",
+  OBJECT_VALUE_SYMBOL_COLOR: "rgb(196, 26, 22)",
+  OBJECT_VALUE_NUMBER_COLOR: "rgb(28, 0, 207)",
+  OBJECT_VALUE_BOOLEAN_COLOR: "rgb(28, 0, 207)",
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(13, 34, 170)",
+  HTML_TAG_COLOR: "rgb(168, 148, 166)",
+  HTML_TAGNAME_COLOR: "rgb(136, 18, 128)",
+  HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
+  HTML_ATTRIBUTE_NAME_COLOR: "rgb(153, 69, 0)",
+  HTML_ATTRIBUTE_VALUE_COLOR: "rgb(26, 26, 166)",
+  HTML_COMMENT_COLOR: "rgb(35, 110, 37)",
+  HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
+  ARROW_COLOR: "#6e6e6e",
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: "0",
+  TREENODE_FONT_FAMILY: "Menlo, monospace",
+  TREENODE_FONT_SIZE: "11px",
+  TREENODE_LINE_HEIGHT: 1.2,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: "#aaa",
+  TABLE_TH_BACKGROUND_COLOR: "#eee",
+  TABLE_TH_HOVER_COLOR: "hsla(0, 0%, 90%, 1)",
+  TABLE_SORT_ICON_COLOR: "#6e6e6e",
+  TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
+  TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
+}, ExpandedPathsContext = createContext([{}, () => {
+}]), unselectable = {
+  WebkitTouchCallout: "none",
+  WebkitUserSelect: "none",
+  KhtmlUserSelect: "none",
+  MozUserSelect: "none",
+  msUserSelect: "none",
+  OUserSelect: "none",
+  userSelect: "none"
+}, createTheme = (theme3) => ({
+  DOMNodePreview: {
+    htmlOpenTag: {
+      base: {
+        color: theme3.HTML_TAG_COLOR
+      },
+      tagName: {
+        color: theme3.HTML_TAGNAME_COLOR,
+        textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
+      },
+      htmlAttributeName: {
+        color: theme3.HTML_ATTRIBUTE_NAME_COLOR
+      },
+      htmlAttributeValue: {
+        color: theme3.HTML_ATTRIBUTE_VALUE_COLOR
+      }
+    },
+    htmlCloseTag: {
+      base: {
+        color: theme3.HTML_TAG_COLOR
+      },
+      offsetLeft: {
+        marginLeft: -theme3.TREENODE_PADDING_LEFT
+      },
+      tagName: {
+        color: theme3.HTML_TAGNAME_COLOR,
+        textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
+      }
+    },
+    htmlComment: {
+      color: theme3.HTML_COMMENT_COLOR
+    },
+    htmlDoctype: {
+      color: theme3.HTML_DOCTYPE_COLOR
+    }
+  },
+  ObjectPreview: {
+    objectDescription: {
+      fontStyle: "italic"
+    },
+    preview: {
+      fontStyle: "italic"
+    },
+    arrayMaxProperties: theme3.OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES,
+    objectMaxProperties: theme3.OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES
+  },
+  ObjectName: {
+    base: {
+      color: theme3.OBJECT_NAME_COLOR
+    },
+    dimmed: {
+      opacity: 0.6
+    }
+  },
+  ObjectValue: {
+    objectValueNull: {
+      color: theme3.OBJECT_VALUE_NULL_COLOR
+    },
+    objectValueUndefined: {
+      color: theme3.OBJECT_VALUE_UNDEFINED_COLOR
+    },
+    objectValueRegExp: {
+      color: theme3.OBJECT_VALUE_REGEXP_COLOR
+    },
+    objectValueString: {
+      color: theme3.OBJECT_VALUE_STRING_COLOR
+    },
+    objectValueSymbol: {
+      color: theme3.OBJECT_VALUE_SYMBOL_COLOR
+    },
+    objectValueNumber: {
+      color: theme3.OBJECT_VALUE_NUMBER_COLOR
+    },
+    objectValueBoolean: {
+      color: theme3.OBJECT_VALUE_BOOLEAN_COLOR
+    },
+    objectValueFunctionPrefix: {
+      color: theme3.OBJECT_VALUE_FUNCTION_PREFIX_COLOR,
+      fontStyle: "italic"
+    },
+    objectValueFunctionName: {
+      fontStyle: "italic"
+    }
+  },
+  TreeView: {
+    treeViewOutline: {
+      padding: 0,
+      margin: 0,
+      listStyleType: "none"
+    }
+  },
+  TreeNode: {
+    treeNodeBase: {
+      color: theme3.BASE_COLOR,
+      backgroundColor: theme3.BASE_BACKGROUND_COLOR,
+      lineHeight: theme3.TREENODE_LINE_HEIGHT,
+      cursor: "default",
+      boxSizing: "border-box",
+      listStyle: "none",
+      fontFamily: theme3.TREENODE_FONT_FAMILY,
+      fontSize: theme3.TREENODE_FONT_SIZE
+    },
+    treeNodePreviewContainer: {},
+    treeNodePlaceholder: {
+      whiteSpace: "pre",
+      fontSize: theme3.ARROW_FONT_SIZE,
+      marginRight: theme3.ARROW_MARGIN_RIGHT,
+      ...unselectable
+    },
+    treeNodeArrow: {
+      base: {
+        color: theme3.ARROW_COLOR,
+        display: "inline-block",
+        fontSize: theme3.ARROW_FONT_SIZE,
+        marginRight: theme3.ARROW_MARGIN_RIGHT,
+        ...parseFloat(theme3.ARROW_ANIMATION_DURATION) > 0 ? {
+          transition: `transform ${theme3.ARROW_ANIMATION_DURATION} ease 0s`
+        } : {},
+        ...unselectable
+      },
+      expanded: {
+        WebkitTransform: "rotateZ(90deg)",
+        MozTransform: "rotateZ(90deg)",
+        transform: "rotateZ(90deg)"
+      },
+      collapsed: {
+        WebkitTransform: "rotateZ(0deg)",
+        MozTransform: "rotateZ(0deg)",
+        transform: "rotateZ(0deg)"
+      }
+    },
+    treeNodeChildNodesContainer: {
+      margin: 0,
+      paddingLeft: theme3.TREENODE_PADDING_LEFT
+    }
+  },
+  TableInspector: {
+    base: {
+      color: theme3.BASE_COLOR,
+      position: "relative",
+      border: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
+      fontFamily: theme3.BASE_FONT_FAMILY,
+      fontSize: theme3.BASE_FONT_SIZE,
+      lineHeight: "120%",
+      boxSizing: "border-box",
+      cursor: "default"
+    }
+  },
+  TableInspectorHeaderContainer: {
+    base: {
+      top: 0,
+      height: "17px",
+      left: 0,
+      right: 0,
+      overflowX: "hidden"
+    },
+    table: {
+      tableLayout: "fixed",
+      borderSpacing: 0,
+      borderCollapse: "separate",
+      height: "100%",
+      width: "100%",
+      margin: 0
+    }
+  },
+  TableInspectorDataContainer: {
+    tr: {
+      display: "table-row"
+    },
+    td: {
+      boxSizing: "border-box",
+      border: "none",
+      height: "16px",
+      verticalAlign: "top",
+      padding: "1px 4px",
+      WebkitUserSelect: "text",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      lineHeight: "14px"
+    },
+    div: {
+      position: "static",
+      top: "17px",
+      bottom: 0,
+      overflowY: "overlay",
+      transform: "translateZ(0)",
+      left: 0,
+      right: 0,
+      overflowX: "hidden"
+    },
+    table: {
+      positon: "static",
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      borderTop: "0 none transparent",
+      margin: 0,
+      backgroundImage: theme3.TABLE_DATA_BACKGROUND_IMAGE,
+      backgroundSize: theme3.TABLE_DATA_BACKGROUND_SIZE,
+      tableLayout: "fixed",
+      borderSpacing: 0,
+      borderCollapse: "separate",
+      width: "100%",
+      fontSize: theme3.BASE_FONT_SIZE,
+      lineHeight: "120%"
+    }
+  },
+  TableInspectorTH: {
+    base: {
+      position: "relative",
+      height: "auto",
+      textAlign: "left",
+      backgroundColor: theme3.TABLE_TH_BACKGROUND_COLOR,
+      borderBottom: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
+      fontWeight: "normal",
+      verticalAlign: "middle",
+      padding: "0 4px",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      lineHeight: "14px",
+      ":hover": {
+        backgroundColor: theme3.TABLE_TH_HOVER_COLOR
+      }
+    },
+    div: {
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      fontSize: theme3.BASE_FONT_SIZE,
+      lineHeight: "120%"
+    }
+  },
+  TableInspectorLeftBorder: {
+    none: {
+      borderLeft: "none"
+    },
+    solid: {
+      borderLeft: `1px solid ${theme3.TABLE_BORDER_COLOR}`
+    }
+  },
+  TableInspectorSortIcon: {
+    display: "block",
+    marginRight: 3,
+    width: 8,
+    height: 7,
+    marginTop: -7,
+    color: theme3.TABLE_SORT_ICON_COLOR,
+    fontSize: 12,
+    ...unselectable
+  }
+}), DEFAULT_THEME_NAME = "chromeLight", ThemeContext = createContext2(createTheme(themes_exports[DEFAULT_THEME_NAME])), useStyles = (baseStylesKey) => useContext(ThemeContext)[baseStylesKey], themeAcceptor = (WrappedComponent) => ({ theme: theme3 = DEFAULT_THEME_NAME, ...restProps }) => {
+  let themeStyles = useMemo2(() => {
+    switch (Object.prototype.toString.call(theme3)) {
+      case "[object String]":
+        return createTheme(themes_exports[theme3]);
+      case "[object Object]":
+        return createTheme(theme3);
+      default:
+        return createTheme(themes_exports[DEFAULT_THEME_NAME]);
+    }
+  }, [theme3]);
+  return React4.createElement(ThemeContext.Provider, {
+    value: themeStyles
+  }, React4.createElement(WrappedComponent, {
+    ...restProps
+  }));
+}, Arrow = ({ expanded, styles }) => React22.createElement("span", {
+  style: {
+    ...styles.base,
+    ...expanded ? styles.expanded : styles.collapsed
+  }
+}, "\u25B6"), TreeNode = memo((props) => {
+  props = {
+    expanded: !0,
+    nodeRenderer: ({ name }) => React22.createElement("span", null, name),
+    onClick: () => {
+    },
+    shouldShowArrow: !1,
+    shouldShowPlaceholder: !0,
+    ...props
+  };
+  let { expanded, onClick, children, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder } = props, styles = useStyles("TreeNode"), NodeRenderer = nodeRenderer;
+  return React22.createElement("li", {
+    "aria-expanded": expanded,
+    role: "treeitem",
+    style: styles.treeNodeBase,
+    title
+  }, React22.createElement("div", {
+    style: styles.treeNodePreviewContainer,
+    onClick
+  }, shouldShowArrow || Children.count(children) > 0 ? React22.createElement(Arrow, {
+    expanded,
+    styles: styles.treeNodeArrow
+  }) : shouldShowPlaceholder && React22.createElement("span", {
+    style: styles.treeNodePlaceholder
+  }, "\xA0"), React22.createElement(NodeRenderer, {
+    ...props
+  })), React22.createElement("ol", {
+    role: "group",
+    style: styles.treeNodeChildNodesContainer
+  }, expanded ? children : void 0));
+}), DEFAULT_ROOT_PATH = "$", WILDCARD = "*";
+function hasChildNodes(data, dataIterator) {
+  return !dataIterator(data).next().done;
+}
+var wildcardPathsFromLevel = (level) => Array.from({ length: level }, (_, i) => [DEFAULT_ROOT_PATH].concat(Array.from({ length: i }, () => "*")).join(".")), getExpandedPaths = (data, dataIterator, expandPaths, expandLevel, prevExpandedPaths) => {
+  let wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter((path) => typeof path == "string"), expandedPaths = [];
+  return wildcardPaths.forEach((wildcardPath) => {
+    let keyPaths = wildcardPath.split("."), populatePaths = (curData, curPath, depth) => {
+      if (depth === keyPaths.length) {
+        expandedPaths.push(curPath);
+        return;
+      }
+      let key = keyPaths[depth];
+      if (depth === 0)
+        hasChildNodes(curData, dataIterator) && (key === DEFAULT_ROOT_PATH || key === WILDCARD) && populatePaths(curData, DEFAULT_ROOT_PATH, depth + 1);
+      else if (key === WILDCARD)
+        for (let { name, data: data2 } of dataIterator(curData))
+          hasChildNodes(data2, dataIterator) && populatePaths(data2, `${curPath}.${name}`, depth + 1);
+      else {
+        let value = curData[key];
+        hasChildNodes(value, dataIterator) && populatePaths(value, `${curPath}.${key}`, depth + 1);
+      }
+    };
+    populatePaths(data, "", 0);
+  }), expandedPaths.reduce((obj, path) => (obj[path] = !0, obj), { ...prevExpandedPaths });
+}, ConnectedTreeNode = memo2((props) => {
+  let { data, dataIterator, path, depth, nodeRenderer } = props, [expandedPaths, setExpandedPaths] = useContext2(ExpandedPathsContext), nodeHasChildNodes = hasChildNodes(data, dataIterator), expanded = !!expandedPaths[path], handleClick = useCallback2(() => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
+    ...prevExpandedPaths,
+    [path]: !expanded
+  })), [nodeHasChildNodes, setExpandedPaths, path, expanded]);
+  return React3.createElement(TreeNode, {
+    expanded,
+    onClick: handleClick,
+    shouldShowArrow: nodeHasChildNodes,
+    shouldShowPlaceholder: depth > 0,
+    nodeRenderer,
+    ...props
+  }, expanded ? [...dataIterator(data)].map(({ name, data: data2, ...renderNodeProps }) => React3.createElement(ConnectedTreeNode, {
+    name,
+    data: data2,
+    depth: depth + 1,
+    path: `${path}.${name}`,
+    key: name,
+    dataIterator,
+    nodeRenderer,
+    ...renderNodeProps
+  })) : null);
+}), TreeView = memo2(({ name, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
+  let styles = useStyles("TreeView"), stateAndSetter = useState2({}), [, setExpandedPaths] = stateAndSetter;
+  return useLayoutEffect(() => setExpandedPaths((prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)), [data, dataIterator, expandPaths, expandLevel]), React3.createElement(ExpandedPathsContext.Provider, {
+    value: stateAndSetter
+  }, React3.createElement("ol", {
+    role: "tree",
+    style: styles.treeViewOutline
+  }, React3.createElement(ConnectedTreeNode, {
+    name,
+    data,
+    dataIterator,
+    depth: 0,
+    path: DEFAULT_ROOT_PATH,
+    nodeRenderer
+  })));
+}), ObjectName = ({ name, dimmed = !1, styles = {} }) => {
+  let themeStyles = useStyles("ObjectName"), appliedStyles = {
+    ...themeStyles.base,
+    ...dimmed ? themeStyles.dimmed : {},
+    ...styles
+  };
+  return React42.createElement("span", {
+    style: appliedStyles
+  }, name);
+}, ObjectValue = ({ object: object2, styles }) => {
+  let themeStyles = useStyles("ObjectValue"), mkStyle = (key) => ({ ...themeStyles[key], ...styles });
+  switch (typeof object2) {
+    case "bigint":
+      return React5.createElement("span", {
+        style: mkStyle("objectValueNumber")
+      }, String(object2), "n");
+    case "number":
+      return React5.createElement("span", {
+        style: mkStyle("objectValueNumber")
+      }, String(object2));
+    case "string":
+      return React5.createElement("span", {
+        style: mkStyle("objectValueString")
+      }, '"', object2, '"');
+    case "boolean":
+      return React5.createElement("span", {
+        style: mkStyle("objectValueBoolean")
+      }, String(object2));
+    case "undefined":
+      return React5.createElement("span", {
+        style: mkStyle("objectValueUndefined")
+      }, "undefined");
+    case "object":
+      return object2 === null ? React5.createElement("span", {
+        style: mkStyle("objectValueNull")
+      }, "null") : object2 instanceof Date ? React5.createElement("span", null, object2.toString()) : object2 instanceof RegExp ? React5.createElement("span", {
+        style: mkStyle("objectValueRegExp")
+      }, object2.toString()) : Array.isArray(object2) ? React5.createElement("span", null, `Array(${object2.length})`) : object2.constructor ? typeof object2.constructor.isBuffer == "function" && object2.constructor.isBuffer(object2) ? React5.createElement("span", null, `Buffer[${object2.length}]`) : React5.createElement("span", null, object2.constructor.name) : React5.createElement("span", null, "Object");
+    case "function":
+      return React5.createElement("span", null, React5.createElement("span", {
+        style: mkStyle("objectValueFunctionPrefix")
+      }, "\u0192\xA0"), React5.createElement("span", {
+        style: mkStyle("objectValueFunctionName")
+      }, object2.name, "()"));
+    case "symbol":
+      return React5.createElement("span", {
+        style: mkStyle("objectValueSymbol")
+      }, object2.toString());
+    default:
+      return React5.createElement("span", null);
+  }
+}, hasOwnProperty = Object.prototype.hasOwnProperty, propertyIsEnumerable = Object.prototype.propertyIsEnumerable;
+function getPropertyValue(object2, propertyName) {
+  let propertyDescriptor = Object.getOwnPropertyDescriptor(object2, propertyName);
+  if (propertyDescriptor.get)
+    try {
+      return propertyDescriptor.get();
+    } catch {
+      return propertyDescriptor.get;
+    }
+  return object2[propertyName];
+}
+function intersperse(arr, sep) {
+  return arr.length === 0 ? [] : arr.slice(1).reduce((xs, x) => xs.concat([sep, x]), [arr[0]]);
+}
+var ObjectPreview = ({ data }) => {
+  let styles = useStyles("ObjectPreview"), object2 = data;
+  if (typeof object2 != "object" || object2 === null || object2 instanceof Date || object2 instanceof RegExp)
+    return React6.createElement(ObjectValue, {
+      object: object2
+    });
+  if (Array.isArray(object2)) {
+    let maxProperties = styles.arrayMaxProperties, previewArray = object2.slice(0, maxProperties).map((element, index) => React6.createElement(ObjectValue, {
+      key: index,
+      object: element
+    }));
+    object2.length > maxProperties && previewArray.push(React6.createElement("span", {
+      key: "ellipsis"
+    }, "\u2026"));
+    let arrayLength = object2.length;
+    return React6.createElement(React6.Fragment, null, React6.createElement("span", {
+      style: styles.objectDescription
+    }, arrayLength === 0 ? "" : `(${arrayLength})\xA0`), React6.createElement("span", {
+      style: styles.preview
+    }, "[", intersperse(previewArray, ", "), "]"));
+  } else {
+    let maxProperties = styles.objectMaxProperties, propertyNodes = [];
+    for (let propertyName in object2)
+      if (hasOwnProperty.call(object2, propertyName)) {
+        let ellipsis;
+        propertyNodes.length === maxProperties - 1 && Object.keys(object2).length > maxProperties && (ellipsis = React6.createElement("span", {
+          key: "ellipsis"
+        }, "\u2026"));
+        let propertyValue = getPropertyValue(object2, propertyName);
+        if (propertyNodes.push(React6.createElement("span", {
+          key: propertyName
+        }, React6.createElement(ObjectName, {
+          name: propertyName || '""'
+        }), ":\xA0", React6.createElement(ObjectValue, {
+          object: propertyValue
+        }), ellipsis)), ellipsis)
+          break;
+      }
+    let objectConstructorName = object2.constructor ? object2.constructor.name : "Object";
+    return React6.createElement(React6.Fragment, null, React6.createElement("span", {
+      style: styles.objectDescription
+    }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), React6.createElement("span", {
+      style: styles.preview
+    }, "{", intersperse(propertyNodes, ", "), "}"));
+  }
+}, ObjectRootLabel = ({ name, data }) => typeof name == "string" ? React7.createElement("span", null, React7.createElement(ObjectName, {
+  name
+}), React7.createElement("span", null, ": "), React7.createElement(ObjectPreview, {
+  data
+})) : React7.createElement(ObjectPreview, {
+  data
+}), ObjectLabel = ({ name, data, isNonenumerable = !1 }) => {
+  let object2 = data;
+  return React8.createElement("span", null, typeof name == "string" ? React8.createElement(ObjectName, {
+    name,
+    dimmed: isNonenumerable
+  }) : React8.createElement(ObjectPreview, {
+    data: name
+  }), React8.createElement("span", null, ": "), React8.createElement(ObjectValue, {
+    object: object2
+  }));
+}, createIterator = (showNonenumerable, sortObjectKeys) => function* (data) {
+  if (!(typeof data == "object" && data !== null || typeof data == "function"))
+    return;
+  let dataIsArray = Array.isArray(data);
+  if (!dataIsArray && data[Symbol.iterator]) {
+    let i = 0;
+    for (let entry of data) {
+      if (Array.isArray(entry) && entry.length === 2) {
+        let [k, v2] = entry;
+        yield {
+          name: k,
+          data: v2
+        };
+      } else
+        yield {
+          name: i.toString(),
+          data: entry
+        };
+      i++;
+    }
+  } else {
+    let keys = Object.getOwnPropertyNames(data);
+    sortObjectKeys === !0 && !dataIsArray ? keys.sort() : typeof sortObjectKeys == "function" && keys.sort(sortObjectKeys);
+    for (let propertyName of keys)
+      if (propertyIsEnumerable.call(data, propertyName)) {
+        let propertyValue = getPropertyValue(data, propertyName);
+        yield {
+          name: propertyName || '""',
+          data: propertyValue
+        };
+      } else if (showNonenumerable) {
+        let propertyValue;
+        try {
+          propertyValue = getPropertyValue(data, propertyName);
+        } catch {
+        }
+        propertyValue !== void 0 && (yield {
+          name: propertyName,
+          data: propertyValue,
+          isNonenumerable: !0
+        });
+      }
+    showNonenumerable && data !== Object.prototype && (yield {
+      name: "__proto__",
+      data: Object.getPrototypeOf(data),
+      isNonenumerable: !0
+    });
+  }
+}, defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => depth === 0 ? React9.createElement(ObjectRootLabel, {
+  name,
+  data
+}) : React9.createElement(ObjectLabel, {
+  name,
+  data,
+  isNonenumerable
+}), ObjectInspector = ({ showNonenumerable = !1, sortObjectKeys, nodeRenderer, ...treeViewProps }) => {
+  let dataIterator = createIterator(showNonenumerable, sortObjectKeys), renderer = nodeRenderer || defaultNodeRenderer;
+  return React9.createElement(TreeView, {
+    nodeRenderer: renderer,
+    dataIterator,
+    ...treeViewProps
+  });
+}, themedObjectInspector = themeAcceptor(ObjectInspector);
+function getHeaders(data) {
+  if (typeof data == "object") {
+    let rowHeaders = [];
+    if (Array.isArray(data)) {
+      let nRows = data.length;
+      rowHeaders = [...Array(nRows).keys()];
+    } else data !== null && (rowHeaders = Object.keys(data));
+    let colHeaders = rowHeaders.reduce((colHeaders2, rowHeader) => {
+      let row = data[rowHeader];
+      return typeof row == "object" && row !== null && Object.keys(row).reduce((xs, x) => (xs.includes(x) || xs.push(x), xs), colHeaders2), colHeaders2;
+    }, []);
+    return {
+      rowHeaders,
+      colHeaders
+    };
+  }
+}
+var DataContainer = ({ rows, columns, rowsData }) => {
+  let styles = useStyles("TableInspectorDataContainer"), borderStyles = useStyles("TableInspectorLeftBorder");
+  return React10.createElement("div", {
+    style: styles.div
+  }, React10.createElement("table", {
+    style: styles.table
+  }, React10.createElement("colgroup", null), React10.createElement("tbody", null, rows.map((row, i) => React10.createElement("tr", {
+    key: row,
+    style: styles.tr
+  }, React10.createElement("td", {
+    style: { ...styles.td, ...borderStyles.none }
+  }, row), columns.map((column) => {
+    let rowData = rowsData[i];
+    return typeof rowData == "object" && rowData !== null && hasOwnProperty.call(rowData, column) ? React10.createElement("td", {
+      key: column,
+      style: { ...styles.td, ...borderStyles.solid }
+    }, React10.createElement(ObjectValue, {
+      object: rowData[column]
+    })) : React10.createElement("td", {
+      key: column,
+      style: { ...styles.td, ...borderStyles.solid }
+    });
+  }))))));
+}, SortIconContainer = (props) => React11.createElement("div", {
+  style: {
+    position: "absolute",
+    top: 1,
+    right: 0,
+    bottom: 1,
+    display: "flex",
+    alignItems: "center"
+  }
+}, props.children), SortIcon = ({ sortAscending }) => {
+  let styles = useStyles("TableInspectorSortIcon"), glyph = sortAscending ? "\u25B2" : "\u25BC";
+  return React11.createElement("div", {
+    style: styles
+  }, glyph);
+}, TH = ({
+  sortAscending = !1,
+  sorted = !1,
+  onClick = void 0,
+  borderStyle = {},
+  children,
+  ...thProps
+}) => {
+  let styles = useStyles("TableInspectorTH"), [hovered, setHovered] = useState22(!1), handleMouseEnter = useCallback22(() => setHovered(!0), []), handleMouseLeave = useCallback22(() => setHovered(!1), []);
+  return React11.createElement("th", {
+    ...thProps,
+    style: {
+      ...styles.base,
+      ...borderStyle,
+      ...hovered ? styles.base[":hover"] : {}
+    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick
+  }, React11.createElement("div", {
+    style: styles.div
+  }, children), sorted && React11.createElement(SortIconContainer, null, React11.createElement(SortIcon, {
+    sortAscending
+  })));
+}, HeaderContainer = ({
+  indexColumnText = "(index)",
+  columns = [],
+  sorted,
+  sortIndexColumn,
+  sortColumn,
+  sortAscending,
+  onTHClick,
+  onIndexTHClick
+}) => {
+  let styles = useStyles("TableInspectorHeaderContainer"), borderStyles = useStyles("TableInspectorLeftBorder");
+  return React12.createElement("div", {
+    style: styles.base
+  }, React12.createElement("table", {
+    style: styles.table
+  }, React12.createElement("tbody", null, React12.createElement("tr", null, React12.createElement(TH, {
+    borderStyle: borderStyles.none,
+    sorted: sorted && sortIndexColumn,
+    sortAscending,
+    onClick: onIndexTHClick
+  }, indexColumnText), columns.map((column) => React12.createElement(TH, {
+    borderStyle: borderStyles.solid,
+    key: column,
+    sorted: sorted && sortColumn === column,
+    sortAscending,
+    onClick: onTHClick.bind(null, column)
+  }, column))))));
+}, TableInspector = ({
+  data,
+  columns
+}) => {
+  let styles = useStyles("TableInspector"), [{ sorted, sortIndexColumn, sortColumn, sortAscending }, setState] = useState3({
+    sorted: !1,
+    sortIndexColumn: !1,
+    sortColumn: void 0,
+    sortAscending: !1
+  }), handleIndexTHClick = useCallback3(() => {
+    setState(({ sortIndexColumn: sortIndexColumn2, sortAscending: sortAscending2 }) => ({
+      sorted: !0,
+      sortIndexColumn: !0,
+      sortColumn: void 0,
+      sortAscending: sortIndexColumn2 ? !sortAscending2 : !0
+    }));
+  }, []), handleTHClick = useCallback3((col) => {
+    setState(({ sortColumn: sortColumn2, sortAscending: sortAscending2 }) => ({
+      sorted: !0,
+      sortIndexColumn: !1,
+      sortColumn: col,
+      sortAscending: col === sortColumn2 ? !sortAscending2 : !0
+    }));
+  }, []);
+  if (typeof data != "object" || data === null)
+    return React13.createElement("div", null);
+  let { rowHeaders, colHeaders } = getHeaders(data);
+  columns !== void 0 && (colHeaders = columns);
+  let rowsData = rowHeaders.map((rowHeader) => data[rowHeader]), columnDataWithRowIndexes;
+  if (sortColumn !== void 0 ? columnDataWithRowIndexes = rowsData.map((rowData, index) => typeof rowData == "object" && rowData !== null ? [rowData[sortColumn], index] : [void 0, index]) : sortIndexColumn && (columnDataWithRowIndexes = rowHeaders.map((rowData, index) => [rowHeaders[index], index])), columnDataWithRowIndexes !== void 0) {
+    let comparator = (mapper, ascending) => (a, b) => {
+      let v1 = mapper(a), v2 = mapper(b), type1 = typeof v1, type2 = typeof v2, lt = (v12, v22) => v12 < v22 ? -1 : v12 > v22 ? 1 : 0, result;
+      if (type1 === type2)
+        result = lt(v1, v2);
+      else {
+        let order = {
+          string: 0,
+          number: 1,
+          object: 2,
+          symbol: 3,
+          boolean: 4,
+          undefined: 5,
+          function: 6
+        };
+        result = lt(order[type1], order[type2]);
+      }
+      return ascending || (result = -result), result;
+    }, sortedRowIndexes = columnDataWithRowIndexes.sort(comparator((item) => item[0], sortAscending)).map((item) => item[1]);
+    rowHeaders = sortedRowIndexes.map((i) => rowHeaders[i]), rowsData = sortedRowIndexes.map((i) => rowsData[i]);
+  }
+  return React13.createElement("div", {
+    style: styles.base
+  }, React13.createElement(HeaderContainer, {
+    columns: colHeaders,
+    sorted,
+    sortIndexColumn,
+    sortColumn,
+    sortAscending,
+    onTHClick: handleTHClick,
+    onIndexTHClick: handleIndexTHClick
+  }), React13.createElement(DataContainer, {
+    rows: rowHeaders,
+    columns: colHeaders,
+    rowsData
+  }));
+}, themedTableInspector = themeAcceptor(TableInspector), TEXT_NODE_MAX_INLINE_CHARS = 80, shouldInline = (data) => data.childNodes.length === 0 || data.childNodes.length === 1 && data.childNodes[0].nodeType === Node.TEXT_NODE && data.textContent.length < TEXT_NODE_MAX_INLINE_CHARS, OpenTag = ({ tagName, attributes, styles }) => React14.createElement("span", {
+  style: styles.base
+}, "<", React14.createElement("span", {
+  style: styles.tagName
+}, tagName), (() => {
+  if (attributes) {
+    let attributeNodes = [];
+    for (let i = 0; i < attributes.length; i++) {
+      let attribute = attributes[i];
+      attributeNodes.push(React14.createElement("span", {
+        key: i
+      }, " ", React14.createElement("span", {
+        style: styles.htmlAttributeName
+      }, attribute.name), '="', React14.createElement("span", {
+        style: styles.htmlAttributeValue
+      }, attribute.value), '"'));
+    }
+    return attributeNodes;
+  }
+})(), ">"), CloseTag = ({ tagName, isChildNode = !1, styles }) => React14.createElement("span", {
+  style: Object.assign({}, styles.base, isChildNode && styles.offsetLeft)
+}, "</", React14.createElement("span", {
+  style: styles.tagName
+}, tagName), ">"), nameByNodeType = {
+  1: "ELEMENT_NODE",
+  3: "TEXT_NODE",
+  7: "PROCESSING_INSTRUCTION_NODE",
+  8: "COMMENT_NODE",
+  9: "DOCUMENT_NODE",
+  10: "DOCUMENT_TYPE_NODE",
+  11: "DOCUMENT_FRAGMENT_NODE"
+}, DOMNodePreview = ({ isCloseTag, data, expanded }) => {
+  let styles = useStyles("DOMNodePreview");
+  if (isCloseTag)
+    return React14.createElement(CloseTag, {
+      styles: styles.htmlCloseTag,
+      isChildNode: !0,
+      tagName: data.tagName
+    });
+  switch (data.nodeType) {
+    case Node.ELEMENT_NODE:
+      return React14.createElement("span", null, React14.createElement(OpenTag, {
+        tagName: data.tagName,
+        attributes: data.attributes,
+        styles: styles.htmlOpenTag
+      }), shouldInline(data) ? data.textContent : !expanded && "\u2026", !expanded && React14.createElement(CloseTag, {
+        tagName: data.tagName,
+        styles: styles.htmlCloseTag
+      }));
+    case Node.TEXT_NODE:
+      return React14.createElement("span", null, data.textContent);
+    case Node.CDATA_SECTION_NODE:
+      return React14.createElement("span", null, "<![CDATA[" + data.textContent + "]]>");
+    case Node.COMMENT_NODE:
+      return React14.createElement("span", {
+        style: styles.htmlComment
+      }, "<!--", data.textContent, "-->");
+    case Node.PROCESSING_INSTRUCTION_NODE:
+      return React14.createElement("span", null, data.nodeName);
+    case Node.DOCUMENT_TYPE_NODE:
+      return React14.createElement("span", {
+        style: styles.htmlDoctype
+      }, "<!DOCTYPE ", data.name, data.publicId ? ` PUBLIC "${data.publicId}"` : "", !data.publicId && data.systemId ? " SYSTEM" : "", data.systemId ? ` "${data.systemId}"` : "", ">");
+    case Node.DOCUMENT_NODE:
+      return React14.createElement("span", null, data.nodeName);
+    case Node.DOCUMENT_FRAGMENT_NODE:
+      return React14.createElement("span", null, data.nodeName);
+    default:
+      return React14.createElement("span", null, nameByNodeType[data.nodeType]);
+  }
+}, domIterator = function* (data) {
+  if (data && data.childNodes) {
+    if (shouldInline(data))
+      return;
+    for (let i = 0; i < data.childNodes.length; i++) {
+      let node = data.childNodes[i];
+      node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0 || (yield {
+        name: `${node.tagName}[${i}]`,
+        data: node
+      });
+    }
+    data.tagName && (yield {
+      name: "CLOSE_TAG",
+      data: {
+        tagName: data.tagName
+      },
+      isCloseTag: !0
+    });
+  }
+}, DOMInspector = (props) => React15.createElement(TreeView, {
+  nodeRenderer: DOMNodePreview,
+  dataIterator: domIterator,
+  ...props
+}), themedDOMInspector = themeAcceptor(DOMInspector), import_is_dom = __toESM2(require_is_dom()), Inspector = ({ table = !1, data, ...rest }) => table ? React16.createElement(themedTableInspector, {
+  data,
+  ...rest
+}) : (0, import_is_dom.default)(data) ? React16.createElement(themedDOMInspector, {
+  data,
+  ...rest
+}) : React16.createElement(themedObjectInspector, {
+  data,
+  ...rest
+});
+
+// src/actions/components/ActionLogger/index.tsx
+import { useTheme } from "@aussieljk/forkbook/theming";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/actions/components/ActionLogger/index.module.css
+var id3 = "core/src/actions/components/ActionLogger/index.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id3}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id3), style.textContent = ".sb-IaeYrG-wrapper{margin:0;padding:10px 5px 20px}.sb-IaeYrG-action{white-space:pre;border-bottom:1px solid #0000;border-left:5px solid #0000;align-items:flex-start;padding:0;transition:all .1s;display:flex}.sb-IaeYrG-counter{background-color:rgb(from var(--sb-app-border-color) r g b / calc(alpha + .5));color:var(--sb-color-inverse-text);font-size:var(--sb-size-s1);font-weight:var(--sb-weight-bold);border-radius:20px;margin:2px 0;padding:1px 5px;line-height:1}.sb-IaeYrG-inspectorContainer{flex:1;padding:0 0 0 5px}", document.head.appendChild(style);
+}
+var ActionLogger_default = { inspectorContainer: "sb-IaeYrG-inspectorContainer", counter: "sb-IaeYrG-counter", wrapper: "sb-IaeYrG-wrapper", action: "sb-IaeYrG-action" };
+
+// src/actions/components/ActionLogger/index.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var ThemedInspector = (props) => {
+  let theme3 = useTheme();
+  return jsx6(Inspector, { theme: theme3.addonActionsTheme || "chromeLight", table: !1, ...props });
+}, ActionLogger = ({ actions, expandLevel, onClear }) => {
+  let wrapperRef = useRef(null), wrapper = wrapperRef.current, wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight;
+  return useEffect2(() => {
+    wasAtBottom && (wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight);
+  }, [wasAtBottom, actions.length]), jsxs6(Fragment3, { children: [
+    jsx6(ScrollArea, { ref: wrapperRef, horizontal: !0, vertical: !0, className: ActionLogger_default.wrapper, children: actions.map((action) => jsxs6("div", { className: ActionLogger_default.action, children: [
+      action.count > 1 && jsx6("div", { className: ActionLogger_default.counter, children: action.count }),
+      jsx6("div", { className: ActionLogger_default.inspectorContainer, children: jsx6(
+        ThemedInspector,
+        {
+          sortObjectKeys: !0,
+          showNonenumerable: !1,
+          name: action.data.name,
+          data: action.data.args ?? action.data,
+          expandLevel
+        }
+      ) })
+    ] }, action.id)) }),
+    jsx6(ActionBar, { actionItems: [{ title: "Clear", onClick: onClear }] })
+  ] });
+};
+
+// src/actions/containers/ActionLogger/index.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var safeDeepEqual = (a, b) => {
+  try {
+    return dequal(a, b);
+  } catch {
+    return !1;
+  }
+};
+function ActionLogger2({ active, api }) {
+  let [actions, setActions] = useState4([]), expandLevel = useParameter2(PARAM_KEY2)?.expandLevel ?? 1, clearActions = useCallback4(() => {
+    api.emit(CLEAR_ID), setActions([]);
+  }, [api]), addAction = useCallback4((action) => {
+    setActions((prevActions) => {
+      let limit = action.options.limit ?? 50, previous = prevActions.length ? prevActions[prevActions.length - 1] : null;
+      if (previous && safeDeepEqual(previous.data, action.data)) {
+        let updated = [...prevActions];
+        return updated[updated.length - 1] = {
+          ...previous,
+          count: previous.count + 1
+        }, updated.slice(-limit);
+      } else {
+        let newAction = { ...action, count: 1 };
+        return [...prevActions, newAction].slice(-limit);
+      }
+    });
+  }, []), handleStoryChange = useCallback4(() => {
+    actions.length > 0 && actions[0].options.clearOnStoryChange && clearActions();
+  }, [actions, clearActions]);
+  useEffect3(() => (api.on(EVENT_ID, addAction), api.on(STORY_CHANGED2, handleStoryChange), () => {
+    api.off(EVENT_ID, addAction), api.off(STORY_CHANGED2, handleStoryChange);
+  }), [api, addAction, handleStoryChange]);
+  let props = useMemo3(
+    () => ({
+      actions,
+      expandLevel,
+      onClear: clearActions
+    }),
+    [actions, expandLevel, clearActions]
+  );
+  return active ? jsx7(ActionLogger, { ...props }) : null;
+}
+
+// src/actions/manager.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var manager_default4 = addons4.register(ADDON_ID2, (api) => {
+  globalThis?.FEATURES?.actions && addons4.add(PANEL_ID, {
+    title: Title2,
+    type: types2.PANEL,
+    render: ({ active }) => jsx8(ActionLogger2, { api, active: !!active }),
+    paramKey: PARAM_KEY2
+  });
+});
+
+// src/component-testing/manager.tsx
+import { AddonPanel as AddonPanel2 } from "@aussieljk/forkbook/internal/components";
+import { Consumer, addons as addons5, types as types3 } from "@aussieljk/forkbook/manager-api";
+
+// src/component-testing/components/Panel.tsx
+import { Fragment as Fragment8, memo as memo4, useEffect as useEffect10, useMemo as useMemo4, useRef as useRef2, useState as useState11 } from "react";
+import {
+  FORCE_REMOUNT,
+  PLAY_FUNCTION_THREW_EXCEPTION,
+  STORY_RENDER_PHASE_CHANGED,
+  STORY_THREW_EXCEPTION,
+  UNHANDLED_ERRORS_WHILE_PLAYING
+} from "@aussieljk/forkbook/internal/core-events";
+import { global as global2 } from "@storybook/global";
+import {
+  experimental_useStatusStore,
+  useAddonState as useAddonState2,
+  useChannel as useChannel3,
+  useParameter as useParameter3,
+  useStorybookApi as useStorybookApi6,
+  useStorybookState as useStorybookState2
+} from "@aussieljk/forkbook/manager-api";
+
+// src/component-testing/components/InteractionsPanel.tsx
+import * as React31 from "react";
+
+// src/component-testing/utils.ts
+var import_ansi_to_html = __toESM(require_ansi_to_html(), 1);
+import { useTheme as useTheme2 } from "@aussieljk/forkbook/theming";
+
+// ../../node_modules/strip-ansi/node_modules/ansi-regex/index.js
+function ansiRegex({ onlyFirst = !1 } = {}) {
+  let pattern = "(?:(?:\\u001B\\]|\\u009D)[^\\u0007\\u001B\\u009C\\u009D]*(?:\\u0007|\\u001B\\u005C|\\u009C))|[\\u001B\\u009B][[\\]()#;?]*(?:\\d{1,4}(?:[;:]\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]";
+  return new RegExp(pattern, onlyFirst ? void 0 : "g");
+}
+
+// ../../node_modules/strip-ansi/index.js
+var regex = ansiRegex();
+function stripAnsi(string2) {
+  if (typeof string2 != "string")
+    throw new TypeError(`Expected a \`string\`, got \`${typeof string2}\``);
+  return !string2.includes("\x1B") && !string2.includes("\x9B") ? string2 : string2.replace(regex, "");
+}
+
+// src/component-testing/utils.ts
+function isInteractionsDisabled(parameters) {
+  return !!parameters?.[PARAM_KEY5]?.disable;
+}
+function isTestAssertionError(error) {
+  return isChaiError(error) || isJestError(error);
+}
+function isChaiError(error) {
+  return error && typeof error == "object" && "name" in error && typeof error.name == "string" && error.name === "AssertionError";
+}
+function isJestError(error) {
+  return error && typeof error == "object" && "message" in error && typeof error.message == "string" && stripAnsi(error.message).startsWith("expect(");
+}
+function createAnsiToHtmlFilter(theme3) {
+  return new import_ansi_to_html.default({
+    escapeXML: !0,
+    fg: theme3.color.defaultText,
+    bg: theme3.background.content
+  });
+}
+function useAnsiToHtmlFilter() {
+  let theme3 = useTheme2();
+  return createAnsiToHtmlFilter(theme3);
+}
+
+// src/component-testing/components/DetachedDebuggerMessage.tsx
+import { Link } from "@aussieljk/forkbook/internal/components";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/component-testing/components/DetachedDebuggerMessage.module.css
+var id4 = "core/src/component-testing/components/DetachedDebuggerMessage.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id4}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id4), style.textContent = ".sb-McV2ua-message{text-align:start;font-size:calc(var(--sb-size-s2) - 1px);font-weight:var(--sb-weight-regular);background:var(--sb-background-app);border-bottom:1px solid var(--sb-color-border);color:var(--sb-color-default-text);background-clip:padding-box;padding:11px 15px;line-height:1rem;position:relative}", document.head.appendChild(style);
+}
+var DetachedDebuggerMessage_default = { message: "sb-McV2ua-message" };
+
+// src/component-testing/components/DetachedDebuggerMessage.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var DetachedDebuggerMessage = ({ storyUrl }) => jsxs7("div", { className: DetachedDebuggerMessage_default.message, children: [
+  "Debugger controls are not available on composed Storybooks.",
+  " ",
+  jsx9(
+    Link,
+    {
+      href: `${storyUrl}&addonPanel=${PANEL_ID2}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      withArrow: !0,
+      children: "Open in external Forkbook"
+    }
+  )
+] });
+
+// src/component-testing/components/EmptyState.tsx
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { EmptyTabContent, Link as Link2 } from "@aussieljk/forkbook/internal/components";
+import { DocumentIcon } from "@storybook/icons";
+import { useStorybookApi as useStorybookApi4 } from "@aussieljk/forkbook/manager-api";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/component-testing/components/EmptyState.module.css
+var id5 = "core/src/component-testing/components/EmptyState.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id5}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id5), style.textContent = ".sb-m4u5Jq-links{font-size:calc(var(--sb-size-s2) - 1px);gap:25px;display:flex}", document.head.appendChild(style);
+}
+var EmptyState_default = { links: "sb-m4u5Jq-links" };
+
+// src/component-testing/components/EmptyState.tsx
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var Empty = () => {
+  let [isLoading, setIsLoading] = useState5(!0), docsUrl = useStorybookApi4().getDocsUrl({
+    subpath: DOCUMENTATION_PLAY_FUNCTION_LINK,
+    versioned: !0,
+    renderer: !0
+  });
+  return useEffect4(() => {
+    let load = setTimeout(() => {
+      setIsLoading(!1);
+    }, 100);
+    return () => clearTimeout(load);
+  }, []), isLoading ? null : jsx10("div", { children: jsx10(
+    EmptyTabContent,
+    {
+      title: "Interactions",
+      description: jsx10(Fragment4, { children: "Interactions allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here." }),
+      footer: jsx10("div", { className: EmptyState_default.links, children: jsxs8(Link2, { href: docsUrl, target: "_blank", withArrow: !0, children: [
+        jsx10(DocumentIcon, {}),
+        " Read docs"
+      ] }) })
+    }
+  ) });
+};
+
+// src/component-testing/components/Interaction.tsx
+import * as React30 from "react";
+import { Button as Button2 } from "@aussieljk/forkbook/internal/components";
+import { ChevronDownIcon, ChevronUpIcon } from "@storybook/icons";
+
+// src/component-testing/components/MethodCall.tsx
+import React29, { Fragment as Fragment5 } from "react";
+import { logger } from "@aussieljk/forkbook/internal/client-logger";
+
+// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.js
+var import_extends5 = __toESM(require_extends()), import_objectWithoutProperties6 = __toESM(require_objectWithoutProperties());
+import React28, { useEffect as useEffect8, useState as useState9 } from "react";
+
+// ../../node_modules/@devtools-ds/object-inspector/node_modules/clsx/dist/clsx.m.js
+function toVal(mix) {
+  var k, y, str = "";
+  if (mix)
+    if (typeof mix == "object")
+      if (Array.isArray(mix))
+        for (k = 0; k < mix.length; k++)
+          mix[k] && (y = toVal(mix[k])) && (str && (str += " "), str += y);
+      else
+        for (k in mix)
+          mix[k] && (y = toVal(k)) && (str && (str += " "), str += y);
+    else typeof mix != "boolean" && !mix.call && (str && (str += " "), str += mix);
+  return str;
+}
+function clsx_m_default() {
+  for (var i = 0, x, str = ""; i < arguments.length; )
+    (x = toVal(arguments[i++])) && (str && (str += " "), str += x);
+  return str;
+}
+
+// ../../node_modules/@devtools-ds/object-parser/dist/esm/index.js
+var isArray = (val) => Array.isArray(val) || // Detect https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
+ArrayBuffer.isView(val) && !(val instanceof DataView), isObject = (val) => val !== null && typeof val == "object" && !isArray(val) && !(val instanceof Date) && !(val instanceof RegExp) && !(val instanceof Error) && !(val instanceof WeakMap) && !(val instanceof WeakSet), isKnownObject = (val) => isObject(val) || isArray(val) || typeof val == "function" || val instanceof Promise, getPromiseState = (promise) => {
+  let unique = /unique/;
+  return Promise.race([promise, unique]).then((result) => result === unique ? ["pending"] : ["fulfilled", result], (e) => ["rejected", e]);
+}, buildAST = async (key, value, depth, sortKeys, isPrototype, showPrototype) => {
+  let astNode = {
+    key,
+    depth,
+    value,
+    type: "value",
+    parent: void 0
+  };
+  if (value && isKnownObject(value) && depth < 100) {
+    let children = [], t = "object";
+    if (isArray(value)) {
+      for (let i = 0; i < value.length; i++)
+        children.push(async () => {
+          let child = await buildAST(i.toString(), value[i], depth + 1, sortKeys);
+          return child.parent = astNode, child;
+        });
+      t = "array";
+    } else {
+      let keys = Object.getOwnPropertyNames(value);
+      sortKeys && keys.sort();
+      for (let i = 0; i < keys.length; i++) {
+        let safeValue;
+        try {
+          safeValue = value[keys[i]];
+        } catch {
+        }
+        children.push(async () => {
+          let child = await buildAST(keys[i], safeValue, depth + 1, sortKeys);
+          return child.parent = astNode, child;
+        });
+      }
+      if (typeof value == "function" && (t = "function"), value instanceof Promise) {
+        let [status, result] = await getPromiseState(value);
+        children.push(async () => {
+          let child = await buildAST("<state>", status, depth + 1, sortKeys);
+          return child.parent = astNode, child;
+        }), status !== "pending" && children.push(async () => {
+          let child = await buildAST("<value>", result, depth + 1, sortKeys);
+          return child.parent = astNode, child;
+        }), t = "promise";
+      }
+      if (value instanceof Map) {
+        let parsedEntries = Array.from(value.entries()).map((entry) => {
+          let [entryKey, entryValue] = entry;
+          return {
+            "<key>": entryKey,
+            "<value>": entryValue
+          };
+        });
+        children.push(async () => {
+          let child = await buildAST("<entries>", parsedEntries, depth + 1, sortKeys);
+          return child.parent = astNode, child;
+        }), children.push(async () => {
+          let child = await buildAST("size", value.size, depth + 1, sortKeys);
+          return child.parent = astNode, child;
+        }), t = "map";
+      }
+      if (value instanceof Set) {
+        let parsedEntries = Array.from(value.entries()).map((entry) => entry[1]);
+        children.push(async () => {
+          let child = await buildAST("<entries>", parsedEntries, depth + 1, sortKeys);
+          return child.parent = astNode, child;
+        }), children.push(async () => {
+          let child = await buildAST("size", value.size, depth + 1, sortKeys);
+          return child.parent = astNode, child;
+        }), t = "set";
+      }
+    }
+    value !== Object.prototype && showPrototype && children.push(async () => {
+      let child = await buildAST("<prototype>", Object.getPrototypeOf(value), depth + 1, sortKeys, !0);
+      return child.parent = astNode, child;
+    }), astNode.type = t, astNode.children = children, astNode.isPrototype = isPrototype;
+  }
+  return astNode;
+}, parse = (data, sortKeys, includePrototypes) => buildAST("root", data, 0, sortKeys === !1 ? sortKeys : !0, void 0, includePrototypes === !1 ? includePrototypes : !0);
+
+// ../../node_modules/@devtools-ds/themes/dist/esm/utils.js
+var import_objectSpread2 = __toESM(require_objectSpread2()), import_objectWithoutProperties = __toESM(require_objectWithoutProperties2());
+import React20 from "react";
+
+// ../../node_modules/@devtools-ds/themes/node_modules/clsx/dist/clsx.m.js
+function toVal2(mix) {
+  var k, y, str = "";
+  if (mix)
+    if (typeof mix == "object")
+      if (Array.isArray(mix))
+        for (k = 0; k < mix.length; k++)
+          mix[k] && (y = toVal2(mix[k])) && (str && (str += " "), str += y);
+      else
+        for (k in mix)
+          mix[k] && (y = toVal2(k)) && (str && (str += " "), str += y);
+    else typeof mix != "boolean" && !mix.call && (str && (str += " "), str += mix);
+  return str;
+}
+function clsx_m_default2() {
+  for (var i = 0, x, str = ""; i < arguments.length; )
+    (x = toVal2(arguments[i++])) && (str && (str += " "), str += x);
+  return str;
+}
+
+// ../../node_modules/@devtools-ds/themes/dist/esm/utils.js
+var _excluded = ["children"];
+var ThemeContext2 = React20.createContext({
+  theme: "chrome",
+  colorScheme: "light"
+});
+var ThemeProvider = (_ref) => {
+  let {
+    children
+  } = _ref, value = (0, import_objectWithoutProperties.default)(_ref, _excluded), wrappedTheme = React20.useContext(ThemeContext2);
+  return React20.createElement(ThemeContext2.Provider, {
+    value: (0, import_objectSpread2.default)((0, import_objectSpread2.default)({}, wrappedTheme), value)
+  }, children);
+}, useTheme3 = (props, styles = {}) => {
+  let themeContext = React20.useContext(ThemeContext2), currentTheme = props.theme || themeContext.theme || "chrome", currentColorScheme = props.colorScheme || themeContext.colorScheme || "light", themeClass = clsx_m_default2(styles[currentTheme], styles[currentColorScheme]);
+  return {
+    currentColorScheme,
+    currentTheme,
+    themeClass
+  };
+};
+
+// ../../node_modules/@devtools-ds/themes/dist/esm/AutoThemeProvider.js
+var import_extends = __toESM(require_extends2()), import_objectWithoutProperties2 = __toESM(require_objectWithoutProperties2());
+import React21 from "react";
+
+// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspectorItem.js
+var import_objectSpread22 = __toESM(require_objectSpread22());
+import React27, { useEffect as useEffect7, useState as useState8 } from "react";
+
+// ../../node_modules/@devtools-ds/tree/dist/esm/index.js
+var import_extends2 = __toESM(require_extends3()), import_objectWithoutProperties3 = __toESM(require_objectWithoutProperties3());
+import React24, { useState as useState6, useEffect as useEffect5 } from "react";
+
+// ../../node_modules/@devtools-ds/tree/node_modules/clsx/dist/clsx.m.js
+function toVal3(mix) {
+  var k, y, str = "";
+  if (mix)
+    if (typeof mix == "object")
+      if (Array.isArray(mix))
+        for (k = 0; k < mix.length; k++)
+          mix[k] && (y = toVal3(mix[k])) && (str && (str += " "), str += y);
+      else
+        for (k in mix)
+          mix[k] && (y = toVal3(k)) && (str && (str += " "), str += y);
+    else typeof mix != "boolean" && !mix.call && (str && (str += " "), str += mix);
+  return str;
+}
+function clsx_m_default3() {
+  for (var i = 0, x, str = ""; i < arguments.length; )
+    (x = toVal3(arguments[i++])) && (str && (str += " "), str += x);
+  return str;
+}
+
+// ../../node_modules/@devtools-ds/tree/dist/esm/TreeContext.js
+import React23 from "react";
+var TreeContext = React23.createContext({
+  isChild: !1,
+  depth: 0,
+  hasHover: !0
+}), TreeContext_default = TreeContext;
+
+// ../../node_modules/@devtools-ds/tree/dist/esm/Tree.css.js
+var Tree_css_default = { tree: "Tree-tree-fbbbe38", item: "Tree-item-353d6f3", group: "Tree-group-d3c3d8a", label: "Tree-label-d819155", focusWhite: "Tree-focusWhite-f1e00c2", arrow: "Tree-arrow-03ab2e7", hover: "Tree-hover-3cc4e5d", open: "Tree-open-3f1a336", dark: "Tree-dark-1b4aa00", chrome: "Tree-chrome-bcbcac6", light: "Tree-light-09174ee" };
+
+// ../../node_modules/@devtools-ds/tree/dist/esm/index.js
+var _excluded2 = ["theme", "hover", "colorScheme", "children", "label", "className", "onUpdate", "onSelect", "open"], Tree = (props) => {
+  let {
+    theme: theme3,
+    hover,
+    colorScheme,
+    children,
+    label,
+    className,
+    onUpdate,
+    onSelect,
+    open
+  } = props, html = (0, import_objectWithoutProperties3.default)(props, _excluded2), {
+    themeClass,
+    currentTheme
+  } = useTheme3({
+    theme: theme3,
+    colorScheme
+  }, Tree_css_default), [isOpen, setOpen] = useState6(open);
+  useEffect5(() => {
+    setOpen(open);
+  }, [open]);
+  let updateState = (value) => {
+    setOpen(value), onUpdate && onUpdate(value);
+  }, hasChildren = React24.Children.count(children) > 0, updateFocus = (newNode, previousNode) => {
+    if (newNode.isSameNode(previousNode || null)) return;
+    let focusableNode = newNode.querySelector('[tabindex="-1"]');
+    focusableNode?.focus(), newNode.setAttribute("aria-selected", "true"), previousNode?.removeAttribute("aria-selected");
+  }, getParent = (node, role) => {
+    let parent = node;
+    for (; parent && parent.parentElement; ) {
+      if (parent.getAttribute("role") === role)
+        return parent;
+      parent = parent.parentElement;
+    }
+    return null;
+  }, getListElements = (node) => {
+    let tree = getParent(node, "tree");
+    return tree ? Array.from(tree.querySelectorAll("li")) : [];
+  }, moveBack = (node) => {
+    let group = getParent(node, "group"), toggle = group?.previousElementSibling;
+    if (toggle && toggle.getAttribute("tabindex") === "-1") {
+      let toggleParent = toggle.parentElement, nodeParent = node.parentElement;
+      updateFocus(toggleParent, nodeParent);
+    }
+  }, moveHome = (node, direction) => {
+    let elements = getListElements(node);
+    elements.forEach((element) => {
+      element.removeAttribute("aria-selected");
+    }), direction === "start" && elements[0] && updateFocus(elements[0]), direction === "end" && elements[elements.length - 1] && updateFocus(elements[elements.length - 1]);
+  }, moveFocusAdjacent = (node, direction) => {
+    let elements = getListElements(node) || [];
+    for (let i = 0; i < elements.length; i++) {
+      let currentNode = elements[i];
+      if (currentNode.getAttribute("aria-selected") === "true") {
+        direction === "up" && elements[i - 1] ? updateFocus(elements[i - 1], currentNode) : direction === "down" && elements[i + 1] && updateFocus(elements[i + 1], currentNode);
+        return;
+      }
+    }
+    updateFocus(elements[0]);
+  }, handleKeypress = (event, isChild2) => {
+    let node = event.target;
+    (event.key === "Enter" || event.key === " ") && updateState(!isOpen), event.key === "ArrowRight" && isOpen && !isChild2 ? moveFocusAdjacent(node, "down") : event.key === "ArrowRight" && updateState(!0), event.key === "ArrowLeft" && (!isOpen || isChild2) ? moveBack(node) : event.key === "ArrowLeft" && updateState(!1), event.key === "ArrowDown" && moveFocusAdjacent(node, "down"), event.key === "ArrowUp" && moveFocusAdjacent(node, "up"), event.key === "Home" && moveHome(node, "start"), event.key === "End" && moveHome(node, "end");
+  }, handleClick = (event, isChild2) => {
+    let node = event.target, parent = getParent(node, "treeitem"), elements = getListElements(node) || [], found = !1;
+    for (let i = 0; i < elements.length; i++) {
+      let currentNode = elements[i];
+      if (currentNode.getAttribute("aria-selected") === "true") {
+        parent && (found = !0, updateFocus(parent, currentNode));
+        break;
+      }
+    }
+    !found && parent && updateFocus(parent), isChild2 || updateState(!isOpen);
+  }, handleBlur = (event) => {
+    let node = event.currentTarget;
+    !node.contains(document.activeElement) && node.getAttribute("role") === "tree" && node.setAttribute("tabindex", "0");
+  }, handleFocus = (event) => {
+    let node = event.target;
+    if (node.getAttribute("role") === "tree") {
+      let selected = node.querySelector('[aria-selected="true"]');
+      selected ? updateFocus(selected) : moveFocusAdjacent(node, "down"), node.setAttribute("tabindex", "-1");
+    }
+  }, handleButtonFocus = () => {
+    onSelect?.();
+  }, getPaddingStyles = (depth2) => {
+    let space = depth2 * 0.9 + 0.3;
+    return {
+      paddingLeft: `${space}em`,
+      width: `calc(100% - ${space}em)`
+    };
+  }, {
+    isChild,
+    depth,
+    hasHover
+  } = React24.useContext(TreeContext_default), showHover = hasHover ? hover : !1;
+  if (!isChild)
+    return React24.createElement("ul", (0, import_extends2.default)({
+      role: "tree",
+      tabIndex: 0,
+      className: clsx_m_default3(Tree_css_default.tree, Tree_css_default.group, themeClass, className),
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }, html), React24.createElement(TreeContext_default.Provider, {
+      value: {
+        isChild: !0,
+        depth: 0,
+        hasHover: showHover
+      }
+    }, React24.createElement(Tree, props)));
+  if (!hasChildren)
+    return React24.createElement("li", (0, import_extends2.default)({
+      role: "treeitem",
+      className: Tree_css_default.item
+    }, html), React24.createElement("div", {
+      role: "button",
+      className: clsx_m_default3(Tree_css_default.label, {
+        [Tree_css_default.hover]: showHover,
+        [Tree_css_default.focusWhite]: currentTheme === "firefox"
+      }),
+      tabIndex: -1,
+      style: getPaddingStyles(depth),
+      onKeyDown: (e) => {
+        handleKeypress(e, isChild);
+      },
+      onClick: (e) => handleClick(e, !0),
+      onFocus: handleButtonFocus
+    }, React24.createElement("span", null, label)));
+  let arrowClass = clsx_m_default3(Tree_css_default.arrow, {
+    [Tree_css_default.open]: isOpen
+  });
+  return React24.createElement("li", {
+    role: "treeitem",
+    "aria-expanded": isOpen,
+    className: Tree_css_default.item
+  }, React24.createElement("div", {
+    role: "button",
+    tabIndex: -1,
+    className: clsx_m_default3(Tree_css_default.label, {
+      [Tree_css_default.hover]: showHover,
+      [Tree_css_default.focusWhite]: currentTheme === "firefox"
+    }),
+    style: getPaddingStyles(depth),
+    onClick: (e) => handleClick(e),
+    onKeyDown: (e) => handleKeypress(e),
+    onFocus: handleButtonFocus
+  }, React24.createElement("span", null, React24.createElement("span", {
+    "aria-hidden": !0,
+    className: arrowClass
+  }), React24.createElement("span", null, label))), React24.createElement("ul", (0, import_extends2.default)({
+    role: "group",
+    className: clsx_m_default3(className, Tree_css_default.group)
+  }, html), isOpen && React24.Children.map(children, (child) => React24.createElement(TreeContext_default.Provider, {
+    value: {
+      isChild: !0,
+      depth: depth + 1,
+      hasHover: showHover
+    }
+  }, child))));
+};
+Tree.defaultProps = {
+  open: !1,
+  hover: !0
+};
+
+// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectValue.js
+var import_extends3 = __toESM(require_extends()), import_objectWithoutProperties4 = __toESM(require_objectWithoutProperties());
+import React25, { useState as useState7, useEffect as useEffect6 } from "react";
+
+// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.css.js
+var ObjectInspector_css_default = { "object-inspector": "ObjectInspector-object-inspector-0c33e82", objectInspector: "ObjectInspector-object-inspector-0c33e82", "object-label": "ObjectInspector-object-label-b81482b", objectLabel: "ObjectInspector-object-label-b81482b", text: "ObjectInspector-text-25f57f3", key: "ObjectInspector-key-4f712bb", value: "ObjectInspector-value-f7ec2e5", string: "ObjectInspector-string-c496000", regex: "ObjectInspector-regex-59d45a3", error: "ObjectInspector-error-b818698", boolean: "ObjectInspector-boolean-2dd1642", number: "ObjectInspector-number-a6daabb", undefined: "ObjectInspector-undefined-3a68263", null: "ObjectInspector-null-74acb50", function: "ObjectInspector-function-07bbdcd", "function-decorator": "ObjectInspector-function-decorator-3d22c24", functionDecorator: "ObjectInspector-function-decorator-3d22c24", prototype: "ObjectInspector-prototype-f2449ee", dark: "ObjectInspector-dark-0c96c97", chrome: "ObjectInspector-chrome-2f3ca98", light: "ObjectInspector-light-78bef54" };
+
+// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectValue.js
+var _excluded3 = ["ast", "theme", "showKey", "colorScheme", "className"], buildValue = (key, value, valueClass, showKey, depth) => {
+  let computedKey = key.includes("-") ? `"${key}"` : key, isRoot = depth <= 0;
+  return React25.createElement("span", {
+    className: ObjectInspector_css_default.text
+  }, !isRoot && showKey && React25.createElement(React25.Fragment, null, React25.createElement("span", {
+    className: ObjectInspector_css_default.key
+  }, computedKey), React25.createElement("span", null, ":\xA0")), React25.createElement("span", {
+    className: valueClass
+  }, value));
+}, ObjectValue2 = (props) => {
+  let {
+    ast,
+    theme: theme3,
+    showKey,
+    colorScheme,
+    className
+  } = props, html = (0, import_objectWithoutProperties4.default)(props, _excluded3), {
+    themeClass
+  } = useTheme3({
+    theme: theme3,
+    colorScheme
+  }, ObjectInspector_css_default), [asyncValue, setAsyncValue] = useState7(React25.createElement("span", null)), value = React25.createElement("span", null);
+  return useEffect6(() => {
+    ast.value instanceof Promise && (async (promise) => {
+      setAsyncValue(buildValue(ast.key, `Promise { "${await getPromiseState(promise)}" }`, ObjectInspector_css_default.key, showKey, ast.depth));
+    })(ast.value);
+  }, [ast, showKey]), typeof ast.value == "number" || typeof ast.value == "bigint" ? value = buildValue(ast.key, String(ast.value), ObjectInspector_css_default.number, showKey, ast.depth) : typeof ast.value == "boolean" ? value = buildValue(ast.key, String(ast.value), ObjectInspector_css_default.boolean, showKey, ast.depth) : typeof ast.value == "string" ? value = buildValue(ast.key, `"${ast.value}"`, ObjectInspector_css_default.string, showKey, ast.depth) : typeof ast.value > "u" ? value = buildValue(ast.key, "undefined", ObjectInspector_css_default.undefined, showKey, ast.depth) : typeof ast.value == "symbol" ? value = buildValue(ast.key, ast.value.toString(), ObjectInspector_css_default.string, showKey, ast.depth) : typeof ast.value == "function" ? value = buildValue(ast.key, `${ast.value.name}()`, ObjectInspector_css_default.key, showKey, ast.depth) : typeof ast.value == "object" && (ast.value === null ? value = buildValue(ast.key, "null", ObjectInspector_css_default.null, showKey, ast.depth) : Array.isArray(ast.value) ? value = buildValue(ast.key, `Array(${ast.value.length})`, ObjectInspector_css_default.key, showKey, ast.depth) : ast.value instanceof Date ? value = buildValue(ast.key, `Date ${ast.value.toString()}`, ObjectInspector_css_default.value, showKey, ast.depth) : ast.value instanceof RegExp ? value = buildValue(ast.key, ast.value.toString(), ObjectInspector_css_default.regex, showKey, ast.depth) : ast.value instanceof Error ? value = buildValue(ast.key, ast.value.toString(), ObjectInspector_css_default.error, showKey, ast.depth) : isObject(ast.value) ? value = buildValue(ast.key, "{\u2026}", ObjectInspector_css_default.key, showKey, ast.depth) : value = buildValue(ast.key, ast.value.constructor.name, ObjectInspector_css_default.key, showKey, ast.depth)), React25.createElement("span", (0, import_extends3.default)({
+    className: clsx_m_default(themeClass, className)
+  }, html), asyncValue, value);
+};
+ObjectValue2.defaultProps = {
+  showKey: !0
+};
+var ObjectValue_default = ObjectValue2;
+
+// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectLabel.js
+var import_extends4 = __toESM(require_extends()), import_objectWithoutProperties5 = __toESM(require_objectWithoutProperties());
+import React26 from "react";
+var _excluded4 = ["ast", "theme", "previewMax", "open", "colorScheme", "className"], buildPreview = (children, previewMax, showKey) => {
+  let previews = [];
+  for (let i = 0; i < children.length; i++) {
+    let child = children[i];
+    if (child.isPrototype || (previews.push(React26.createElement(ObjectValue_default, {
+      key: child.key,
+      ast: child,
+      showKey
+    })), i < children.length - 1 ? previews.push(", ") : previews.push(" ")), child.isPrototype && i === children.length - 1 && (previews.pop(), previews.push(" ")), i === previewMax - 1 && children.length > previewMax) {
+      previews.push("\u2026 ");
+      break;
+    }
+  }
+  return previews;
+}, getArrayLabel = (ast, open, previewMax, theme3) => {
+  let l = ast.value.length;
+  return open ? React26.createElement("span", null, "Array(", l, ")") : React26.createElement(React26.Fragment, null, React26.createElement("span", null, `${theme3 === "firefox" ? "Array" : ""}(${l}) [ `), buildPreview(ast.children, previewMax, !1), React26.createElement("span", null, "]"));
+}, getObjectLabel = (ast, open, previewMax, theme3) => ast.isPrototype ? React26.createElement("span", null, `Object ${theme3 === "firefox" ? "{ \u2026 }" : ""}`) : open ? React26.createElement("span", null, "{\u2026}") : React26.createElement(React26.Fragment, null, React26.createElement("span", null, `${theme3 === "firefox" ? "Object " : ""}{ `), buildPreview(ast.children, previewMax, !0), React26.createElement("span", null, "}")), getPromiseLabel = (ast, open, previewMax) => open ? React26.createElement("span", null, `Promise { "${String(ast.children[0].value)}" }`) : React26.createElement(React26.Fragment, null, React26.createElement("span", null, "Promise { "), buildPreview(ast.children, previewMax, !0), React26.createElement("span", null, "}")), getMapLabel = (ast, open, previewMax, theme3) => {
+  let {
+    size
+  } = ast.value;
+  return open ? React26.createElement("span", null, `Map(${size})`) : React26.createElement(React26.Fragment, null, React26.createElement("span", null, `Map${theme3 === "chrome" ? `(${size})` : ""} { `), buildPreview(ast.children, previewMax, !0), React26.createElement("span", null, "}"));
+}, getSetLabel = (ast, open, previewMax) => {
+  let {
+    size
+  } = ast.value;
+  return open ? React26.createElement("span", null, "Set(", size, ")") : React26.createElement(React26.Fragment, null, React26.createElement("span", null, `Set(${ast.value.size}) {`), buildPreview(ast.children, previewMax, !0), React26.createElement("span", null, "}"));
+}, ObjectLabel2 = (props) => {
+  let {
+    ast,
+    theme: theme3,
+    previewMax,
+    open,
+    colorScheme,
+    className
+  } = props, html = (0, import_objectWithoutProperties5.default)(props, _excluded4), {
+    themeClass,
+    currentTheme
+  } = useTheme3({
+    theme: theme3,
+    colorScheme
+  }, ObjectInspector_css_default), isPrototype = ast.isPrototype || !1, classes = clsx_m_default(ObjectInspector_css_default.objectLabel, themeClass, className, {
+    [ObjectInspector_css_default.prototype]: isPrototype
+  }), isRoot = ast.depth <= 0, Key = () => React26.createElement("span", {
+    className: isPrototype ? ObjectInspector_css_default.prototype : ObjectInspector_css_default.key
+  }, isRoot ? "" : `${ast.key}: `);
+  return ast.type === "array" ? React26.createElement("span", (0, import_extends4.default)({
+    className: classes
+  }, html), React26.createElement(Key, null), getArrayLabel(ast, open, previewMax, currentTheme)) : ast.type === "function" ? React26.createElement("span", (0, import_extends4.default)({
+    className: classes
+  }, html), React26.createElement(Key, null), currentTheme === "chrome" && React26.createElement("span", {
+    className: ObjectInspector_css_default.functionDecorator
+  }, "\u0192 "), React26.createElement("span", {
+    className: clsx_m_default({
+      [ObjectInspector_css_default.function]: !isPrototype
+    })
+  }, `${ast.value.name}()`)) : ast.type === "promise" ? React26.createElement("span", (0, import_extends4.default)({
+    className: classes
+  }, html), React26.createElement(Key, null), getPromiseLabel(ast, open, previewMax)) : ast.type === "map" ? React26.createElement("span", (0, import_extends4.default)({
+    className: classes
+  }, html), React26.createElement(Key, null), getMapLabel(ast, open, previewMax, currentTheme)) : ast.type === "set" ? React26.createElement("span", (0, import_extends4.default)({
+    className: classes
+  }, html), React26.createElement(Key, null), getSetLabel(ast, open, previewMax)) : React26.createElement("span", (0, import_extends4.default)({
+    className: classes
+  }, html), React26.createElement(Key, null), getObjectLabel(ast, open, previewMax, currentTheme));
+};
+ObjectLabel2.defaultProps = {
+  previewMax: 8,
+  open: !1
+};
+var ObjectLabel_default = ObjectLabel2;
+
+// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspectorItem.js
+var ObjectInspectorItem = (props) => {
+  let {
+    ast,
+    expandLevel,
+    depth
+  } = props, [resolved, setResolved] = useState8(), [open, setOpen] = useState8(depth < expandLevel);
+  return useEffect7(() => {
+    (async () => {
+      if (ast.type !== "value") {
+        let promises = ast.children.map((f) => f()), children = await Promise.all(promises), r = (0, import_objectSpread22.default)((0, import_objectSpread22.default)({}, ast), {}, {
+          children
+        });
+        setResolved(r);
+      }
+    })();
+  }, [ast]), resolved ? React27.createElement(Tree, {
+    hover: !1,
+    open,
+    label: React27.createElement(ObjectLabel_default, {
+      open,
+      ast: resolved
+    }),
+    onSelect: () => {
+      var _props$onSelect;
+      (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, ast);
+    },
+    onUpdate: (value) => {
+      setOpen(value);
+    }
+  }, resolved.children.map((child) => React27.createElement(ObjectInspectorItem, {
+    key: child.key,
+    ast: child,
+    depth: depth + 1,
+    expandLevel,
+    onSelect: props.onSelect
+  }))) : React27.createElement(Tree, {
+    hover: !1,
+    label: React27.createElement(ObjectValue_default, {
+      ast
+    }),
+    onSelect: () => {
+      var _props$onSelect2;
+      (_props$onSelect2 = props.onSelect) === null || _props$onSelect2 === void 0 || _props$onSelect2.call(props, ast);
+    }
+  });
+};
+ObjectInspectorItem.defaultProps = {
+  expandLevel: 0,
+  depth: 0
+};
+var ObjectInspectorItem_default = ObjectInspectorItem;
+
+// ../../node_modules/@devtools-ds/object-inspector/dist/esm/ObjectInspector.js
+var _excluded5 = ["data", "expandLevel", "sortKeys", "includePrototypes", "className", "theme", "colorScheme", "onSelect"], ObjectInspector2 = (props) => {
+  let {
+    data,
+    expandLevel,
+    sortKeys,
+    includePrototypes,
+    className,
+    theme: theme3,
+    colorScheme,
+    onSelect
+  } = props, html = (0, import_objectWithoutProperties6.default)(props, _excluded5), [ast, setAST] = useState9(void 0), {
+    themeClass,
+    currentTheme,
+    currentColorScheme
+  } = useTheme3({
+    theme: theme3,
+    colorScheme
+  }, ObjectInspector_css_default);
+  return useEffect8(() => {
+    (async () => setAST(await parse(data, sortKeys, includePrototypes)))();
+  }, [data, sortKeys, includePrototypes]), React28.createElement("div", (0, import_extends5.default)({
+    className: clsx_m_default(ObjectInspector_css_default.objectInspector, className, themeClass)
+  }, html), ast && React28.createElement(ThemeProvider, {
+    theme: currentTheme,
+    colorScheme: currentColorScheme
+  }, React28.createElement(ObjectInspectorItem_default, {
+    ast,
+    expandLevel,
+    onSelect
+  })));
+};
+ObjectInspector2.defaultProps = {
+  expandLevel: 0,
+  sortKeys: !0,
+  includePrototypes: !0
+};
+
+// src/component-testing/components/MethodCall.tsx
+import { useTheme as useTheme4 } from "@aussieljk/forkbook/theming";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var colorsLight = {
+  base: "#444",
+  nullish: "#7D99AA",
+  string: "#16B242",
+  number: "#5D40D0",
+  boolean: "#f41840",
+  objectkey: "#698394",
+  instance: "#A15C20",
+  function: "#EA7509",
+  muted: "#7D99AA",
+  tag: {
+    name: "#6F2CAC",
+    suffix: "#1F99E5"
+  },
+  date: "#459D9C",
+  error: {
+    name: "#D43900",
+    message: "#444"
+  },
+  regex: {
+    source: "#A15C20",
+    flags: "#EA7509"
+  },
+  meta: "#EA7509",
+  method: "#0271B6"
+}, colorsDark = {
+  base: "#eee",
+  nullish: "#aaa",
+  string: "#5FE584",
+  number: "#6ba5ff",
+  boolean: "#ff4191",
+  objectkey: "#accfe6",
+  instance: "#E3B551",
+  function: "#E3B551",
+  muted: "#aaa",
+  tag: {
+    name: "#f57bff",
+    suffix: "#8EB5FF"
+  },
+  date: "#70D4D3",
+  error: {
+    name: "#f40",
+    message: "#eee"
+  },
+  regex: {
+    source: "#FAD483",
+    flags: "#E3B551"
+  },
+  meta: "#FAD483",
+  method: "#5EC1FF"
+}, useThemeColors = () => {
+  let { base } = useTheme4();
+  return base === "dark" ? colorsDark : colorsLight;
+}, special = /[^A-Z0-9]/i, trimEnd = /[\s.,…]+$/gm, ellipsize = (string2, maxlength) => {
+  if (string2.length <= maxlength)
+    return string2;
+  for (let i = maxlength - 1; i >= 0; i -= 1)
+    if (special.test(string2[i]) && i > 10)
+      return `${string2.slice(0, i).replace(trimEnd, "")}\u2026`;
+  return `${string2.slice(0, maxlength).replace(trimEnd, "")}\u2026`;
+}, stringify = (value) => {
+  try {
+    return JSON.stringify(value, null, 1);
+  } catch {
+    return String(value);
+  }
+}, interleave = (nodes, separator) => nodes.flatMap(
+  (node, index) => index === nodes.length - 1 ? [node] : [node, React29.cloneElement(separator, { key: `sep${index}` })]
+), Node2 = ({
+  value,
+  nested,
+  showObjectInspector,
+  callsById,
+  ...props
+}) => {
+  switch (!0) {
+    case value === null:
+      return jsx11(NullNode, { ...props });
+    case value === void 0:
+      return jsx11(UndefinedNode, { ...props });
+    case Array.isArray(value):
+      return jsx11(ArrayNode, { ...props, value, callsById });
+    case typeof value == "string":
+      return jsx11(StringNode, { ...props, value });
+    case typeof value == "number":
+      return jsx11(NumberNode, { ...props, value });
+    case typeof value == "boolean":
+      return jsx11(BooleanNode, { ...props, value });
+    case Object.prototype.hasOwnProperty.call(value, "__date__"):
+      return jsx11(DateNode, { ...props, ...value.__date__ });
+    case Object.prototype.hasOwnProperty.call(value, "__error__"):
+      return jsx11(ErrorNode, { ...props, ...value.__error__ });
+    case Object.prototype.hasOwnProperty.call(value, "__regexp__"):
+      return jsx11(RegExpNode, { ...props, ...value.__regexp__ });
+    case Object.prototype.hasOwnProperty.call(value, "__function__"):
+      return jsx11(FunctionNode, { ...props, ...value.__function__ });
+    case Object.prototype.hasOwnProperty.call(value, "__symbol__"):
+      return jsx11(SymbolNode, { ...props, ...value.__symbol__ });
+    case Object.prototype.hasOwnProperty.call(value, "__element__"):
+      return jsx11(ElementNode, { ...props, ...value.__element__ });
+    case Object.prototype.hasOwnProperty.call(value, "__class__"):
+      return jsx11(ClassNode, { ...props, ...value.__class__ });
+    case Object.prototype.hasOwnProperty.call(value, "__callId__"):
+      return jsx11(MethodCall, { call: callsById?.get(value.__callId__), callsById });
+    case Object.prototype.toString.call(value) === "[object Object]":
+      return jsx11(
+        ObjectNode,
+        {
+          value,
+          showInspector: showObjectInspector,
+          callsById,
+          ...props
+        }
+      );
+    default:
+      return jsx11(OtherNode, { value, ...props });
+  }
+}, NullNode = (props) => {
+  let colors = useThemeColors();
+  return jsx11("span", { style: { color: colors.nullish }, ...props, children: "null" });
+}, UndefinedNode = (props) => {
+  let colors = useThemeColors();
+  return jsx11("span", { style: { color: colors.nullish }, ...props, children: "undefined" });
+}, StringNode = ({ value, ...props }) => {
+  let colors = useThemeColors();
+  return jsx11("span", { style: { color: colors.string }, ...props, children: JSON.stringify(ellipsize(value, 50)) });
+}, NumberNode = ({ value, ...props }) => {
+  let colors = useThemeColors();
+  return jsx11("span", { style: { color: colors.number }, ...props, children: value });
+}, BooleanNode = ({ value, ...props }) => {
+  let colors = useThemeColors();
+  return jsx11("span", { style: { color: colors.boolean }, ...props, children: String(value) });
+}, ArrayNode = ({
+  value,
+  nested = !1,
+  callsById
+}) => {
+  let colors = useThemeColors();
+  if (nested)
+    return jsx11("span", { style: { color: colors.base }, children: "[\u2026]" });
+  let nodes = value.slice(0, 3).map((v2, index) => jsx11(Node2, { value: v2, nested: !0, callsById }, `${index}--${JSON.stringify(v2)}`)), nodelist = interleave(nodes, jsx11("span", { children: ", " }));
+  return value.length <= 3 ? jsxs9("span", { style: { color: colors.base }, children: [
+    "[",
+    nodelist,
+    "]"
+  ] }) : jsxs9("span", { style: { color: colors.base }, children: [
+    "(",
+    value.length,
+    ") [",
+    nodelist,
+    ", \u2026]"
+  ] });
+}, ObjectNode = ({
+  showInspector,
+  value,
+  callsById,
+  nested = !1
+}) => {
+  let isDarkMode = useTheme4().base === "dark", colors = useThemeColors();
+  if (showInspector)
+    return jsx11(Fragment6, { children: jsx11(
+      ObjectInspector2,
+      {
+        id: "interactions-object-inspector",
+        data: value,
+        includePrototypes: !1,
+        colorScheme: isDarkMode ? "dark" : "light"
+      }
+    ) });
+  if (nested)
+    return jsx11("span", { style: { color: colors.base }, children: "{\u2026}" });
+  let nodelist = interleave(
+    Object.entries(value).slice(0, 2).map(([k, v2]) => jsxs9(Fragment5, { children: [
+      jsxs9("span", { style: { color: colors.objectkey }, children: [
+        k,
+        ": "
+      ] }),
+      jsx11(Node2, { value: v2, callsById, nested: !0 })
+    ] }, k)),
+    jsx11("span", { children: ", " })
+  );
+  return Object.keys(value).length <= 2 ? jsxs9("span", { style: { color: colors.base }, children: [
+    "{ ",
+    nodelist,
+    " }"
+  ] }) : jsxs9("span", { style: { color: colors.base }, children: [
+    "(",
+    Object.keys(value).length,
+    ") ",
+    "{ ",
+    nodelist,
+    ", \u2026 }"
+  ] });
+}, ClassNode = ({ name }) => {
+  let colors = useThemeColors();
+  return jsx11("span", { style: { color: colors.instance }, children: name });
+}, FunctionNode = ({ name }) => {
+  let colors = useThemeColors();
+  return name ? jsx11("span", { style: { color: colors.function }, children: name }) : jsx11("span", { style: { color: colors.nullish, fontStyle: "italic" }, children: "anonymous" });
+}, ElementNode = ({
+  prefix,
+  localName,
+  id: id13,
+  classNames = [],
+  innerText
+}) => {
+  let name = prefix ? `${prefix}:${localName}` : localName, colors = useThemeColors();
+  return jsxs9("span", { style: { wordBreak: "keep-all" }, children: [
+    jsx11("span", { style: { color: colors.muted }, children: "<" }, `${name}_lt`),
+    jsx11("span", { style: { color: colors.tag.name }, children: name }, `${name}_tag`),
+    jsx11("span", { style: { color: colors.tag.suffix }, children: id13 ? `#${id13}` : classNames.reduce((acc, className) => `${acc}.${className}`, "") }, `${name}_suffix`),
+    jsx11("span", { style: { color: colors.muted }, children: ">" }, `${name}_gt`),
+    !id13 && classNames.length === 0 && innerText && jsxs9(Fragment6, { children: [
+      jsx11("span", { children: innerText }, `${name}_text`),
+      jsx11("span", { style: { color: colors.muted }, children: "<" }, `${name}_close_lt`),
+      jsxs9("span", { style: { color: colors.tag.name }, children: [
+        "/",
+        name
+      ] }, `${name}_close_tag`),
+      jsx11("span", { style: { color: colors.muted }, children: ">" }, `${name}_close_gt`)
+    ] })
+  ] });
+}, DateNode = ({ value }) => {
+  let parsed = new Date(value);
+  isNaN(Number(parsed)) && (logger.warn("Invalid date value:", value), parsed = null);
+  let colors = useThemeColors();
+  if (!parsed)
+    return jsx11("span", { style: { whiteSpace: "nowrap", color: colors.date }, children: "Invalid date" });
+  let [date, time, ms] = parsed.toISOString().split(/[T.Z]/);
+  return jsxs9("span", { style: { whiteSpace: "nowrap", color: colors.date }, children: [
+    date,
+    jsx11("span", { style: { opacity: 0.7 }, children: "T" }),
+    time === "00:00:00" ? jsx11("span", { style: { opacity: 0.7 }, children: time }) : time,
+    ms === "000" ? jsxs9("span", { style: { opacity: 0.7 }, children: [
+      ".",
+      ms
+    ] }) : `.${ms}`,
+    jsx11("span", { style: { opacity: 0.7 }, children: "Z" })
+  ] });
+}, ErrorNode = ({ name, message }) => {
+  let colors = useThemeColors();
+  return jsxs9("span", { style: { color: colors.error.name }, children: [
+    name,
+    message && ": ",
+    message && jsx11("span", { style: { color: colors.error.message }, title: message.length > 50 ? message : "", children: ellipsize(message, 50) })
+  ] });
+}, RegExpNode = ({ flags, source }) => {
+  let colors = useThemeColors();
+  return jsxs9("span", { style: { whiteSpace: "nowrap", color: colors.regex.flags }, children: [
+    "/",
+    jsx11("span", { style: { color: colors.regex.source }, children: source }),
+    "/",
+    flags
+  ] });
+}, SymbolNode = ({ description: description2 }) => {
+  let colors = useThemeColors();
+  return jsxs9("span", { style: { whiteSpace: "nowrap", color: colors.instance }, children: [
+    "Symbol(",
+    description2 && jsxs9("span", { style: { color: colors.meta }, children: [
+      '"',
+      description2,
+      '"'
+    ] }),
+    ")"
+  ] });
+}, OtherNode = ({ value }) => {
+  let colors = useThemeColors();
+  return jsx11("span", { style: { color: colors.meta }, children: stringify(value) });
+}, StepNode = ({ label }) => {
+  let colors = useThemeColors(), { typography } = useTheme4();
+  return jsx11(
+    "span",
+    {
+      style: {
+        color: colors.base,
+        fontFamily: typography.fonts.base,
+        fontSize: typography.size.s2 - 1
+      },
+      children: label
+    }
+  );
+}, MethodCall = ({
+  call,
+  callsById
+}) => {
+  if (!call)
+    return null;
+  if (call.method === "step" && call.path?.length === 0)
+    return jsx11(StepNode, { label: call.args[0] });
+  let path = call.path?.flatMap((elem, index) => {
+    let callId = elem.__callId__;
+    return [
+      callId ? jsx11(MethodCall, { call: callsById?.get(callId), callsById }, `elem${index}`) : jsx11("span", { children: elem }, `elem${index}`),
+      jsx11("wbr", {}, `wbr${index}`),
+      jsx11("span", { children: "." }, `dot${index}`)
+    ];
+  }), args = call.args?.flatMap((arg, index, array2) => {
+    let node = jsx11(Node2, { value: arg, callsById }, `node${index}`);
+    return index < array2.length - 1 ? [node, jsx11("span", { children: ",\xA0" }, `comma${index}`), jsx11("wbr", {}, `wbr${index}`)] : [node];
+  }), colors = useThemeColors();
+  return jsxs9(Fragment6, { children: [
+    jsx11("span", { style: { color: colors.base }, children: path }),
+    jsx11("span", { style: { color: colors.method }, children: call.method }),
+    jsxs9("span", { style: { color: colors.base }, children: [
+      "(",
+      jsx11("wbr", {}),
+      args,
+      jsx11("wbr", {}),
+      ")"
+    ] })
+  ] });
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/component-testing/components/MatcherResult.module.css
+var id6 = "core/src/component-testing/components/MatcherResult.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id6}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id6), style.textContent = ".sb-cs81pG-expected{color:var(--sb-color-positive-text)}.sb-cs81pG-received{color:var(--sb-color-negative-text)}:where([data-sb-theme=dark]){& .sb-cs81pG-expected{color:var(--sb-color-positive)}& .sb-cs81pG-received{color:var(--sb-color-negative)}}", document.head.appendChild(style);
+}
+var MatcherResult_default = { received: "sb-cs81pG-received", expected: "sb-cs81pG-expected" };
+
+// src/component-testing/components/MatcherResult.tsx
+import { Fragment as Fragment7, jsx as jsx12 } from "react/jsx-runtime";
+var getParams = (line, fromIndex = 0) => {
+  for (let i = fromIndex, depth = 1; i < line.length; i += 1)
+    if (line[i] === "(" ? depth += 1 : line[i] === ")" && (depth -= 1), depth === 0)
+      return line.slice(fromIndex, i);
+  return "";
+}, parseValue = (value) => {
+  try {
+    return value === "undefined" ? void 0 : JSON.parse(value);
+  } catch {
+    return value;
+  }
+}, Received = ({ value, parsed }) => parsed ? jsx12(Node2, { showObjectInspector: !0, value, style: { color: "#D43900" } }) : jsx12("span", { className: MatcherResult_default.received, children: value }), Expected = ({ value, parsed }) => parsed ? typeof value == "string" && value.startsWith("called with") ? jsx12(Fragment7, { children: value }) : jsx12(Node2, { showObjectInspector: !0, value, style: { color: "#16B242" } }) : jsx12("span", { className: MatcherResult_default.expected, children: value }), MatcherResult = ({
+  message,
+  style = {}
+}) => {
+  let filter = useAnsiToHtmlFilter(), lines = message.split(`
+`);
+  return jsx12(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "8px 10px 8px 36px",
+        fontSize: "var(--sb-size-s1)",
+        ...style
+      },
+      children: lines.flatMap((line, index) => {
+        if (line.startsWith("expect(")) {
+          let received = getParams(line, 7), remainderIndex = received ? 7 + received.length : 0, matcher = received && line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);
+          if (matcher) {
+            let expectedIndex = remainderIndex + (matcher.index ?? 0) + matcher[0].length, expected = getParams(line, expectedIndex);
+            if (expected)
+              return [
+                "expect(",
+                jsx12(Received, { value: received }, `received_${received}`),
+                line.slice(remainderIndex, expectedIndex),
+                jsx12(Expected, { value: expected }, `expected_${expected}`),
+                line.slice(expectedIndex + expected.length),
+                jsx12("br", {}, `br${index}`)
+              ];
+          }
+        }
+        if (line.match(/^\s*- /))
+          return [jsx12(Expected, { value: line }, line + index), jsx12("br", {}, `br${index}`)];
+        if (line.match(/^\s*\+ /) || line.match(/^Received: $/))
+          return [jsx12(Received, { value: line }, line + index), jsx12("br", {}, `br${index}`)];
+        let [, assertionLabel, assertionValue] = line.match(/^(Expected|Received): (.*)$/) || [];
+        if (assertionLabel && assertionValue)
+          return assertionLabel === "Expected" ? [
+            "Expected: ",
+            jsx12(Expected, { value: parseValue(assertionValue), parsed: !0 }, line + index),
+            jsx12("br", {}, `br${index}`)
+          ] : [
+            "Received: ",
+            jsx12(Received, { value: parseValue(assertionValue), parsed: !0 }, line + index),
+            jsx12("br", {}, `br${index}`)
+          ];
+        let [, prefix, numberOfCalls] = line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i) || [];
+        if (prefix && numberOfCalls)
+          return [
+            `${prefix} of calls: `,
+            jsx12(Node2, { value: Number(numberOfCalls) }, line + index),
+            jsx12("br", {}, `br${index}`)
+          ];
+        let [, receivedValue] = line.match(/^Received has value: (.+)$/) || [];
+        return receivedValue ? [
+          "Received has value: ",
+          jsx12(Node2, { value: parseValue(receivedValue) }, line + index),
+          jsx12("br", {}, `br${index}`)
+        ] : [
+          jsx12(
+            "span",
+            {
+              dangerouslySetInnerHTML: { __html: filter.toHtml(line) }
+            },
+            line + index
+          ),
+          jsx12("br", {}, `br${index}`)
+        ];
+      })
+    }
+  );
+};
+
+// src/component-testing/components/StatusIcon.tsx
+import { CheckIcon as CheckIcon2, CircleIcon, PlayIcon, StopAltIcon } from "@storybook/icons";
+import { useTheme as useTheme5 } from "@aussieljk/forkbook/theming";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var StatusIcon = ({ status }) => {
+  let theme3 = useTheme5();
+  switch (status) {
+    case "done" /* DONE */:
+      return jsx13(CheckIcon2, { color: theme3.color.positive, "data-testid": "icon-done" });
+    case "error" /* ERROR */:
+      return jsx13(StopAltIcon, { color: theme3.color.negative, "data-testid": "icon-error" });
+    case "active" /* ACTIVE */:
+      return jsx13(PlayIcon, { color: theme3.color.secondary, "data-testid": "icon-active" });
+    case "waiting" /* WAITING */:
+      return jsx13(
+        "div",
+        {
+          style: {
+            width: 14,
+            height: 14,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          "data-testid": "icon-waiting",
+          children: jsx13(CircleIcon, { color: "rgba(204, 204, 204, 0.5)", size: 6 })
+        }
+      );
+    default:
+      return null;
+  }
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/component-testing/components/Interaction.module.css
+var id7 = "core/src/component-testing/components/Interaction.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id7}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id7), style.textContent = '.sb-PYwdvq-methodCall{font-family:var(--sb-font-mono);font-size:var(--sb-size-s1);overflow-wrap:break-word;inline-size:calc(100% - 40px)}.sb-PYwdvq-row{border-bottom:1px solid var(--sb-app-border-color);font-family:var(--sb-font-base);flex-direction:column;font-size:13px;list-style:none;display:flex;position:relative;&[data-status=error]{background-color:var(--sb-background-warning)}&[data-paused]:before{content:"";z-index:1;border-top:4.5px solid #0000;border-left:7px solid var(--sb-color-warning);border-bottom:4.5px solid #0000;position:absolute;top:-5px}&[data-paused]:after{content:"";z-index:1;border-top:1.5px solid var(--sb-color-warning);width:100%;position:absolute;top:-1px}}:where([data-sb-theme=dark]) .sb-PYwdvq-row[data-status=error]{background-color:rgb(from var(--sb-color-negative) r g b / calc(alpha - .93))}.sb-PYwdvq-rowHeader{display:flex;&:not([data-navigation-disabled]):hover{background:var(--sb-background-hoverable)}}.sb-PYwdvq-rowLabel{text-align:start;cursor:pointer;background:0 0;border:0;flex:1;grid-template-columns:15px 1fr;align-items:center;min-height:40px;margin:0;padding:8px 15px;display:grid;&:disabled,&[data-status=error]{cursor:default}&:focus-visible{box-shadow:inset 3px 0 0 0 var(--sb-color-secondary);background:var(--sb-background-hoverable);outline:0}&[data-status=error]:focus-visible{box-shadow:inset 3px 0 0 0 var(--sb-color-warning);background:0 0}&[data-status=waiting]>div{opacity:.5}}.sb-PYwdvq-rowActions{align-items:center;padding:6px;display:flex}.sb-PYwdvq-button{color:var(--sb-text-muted-color);margin:0 3px}.sb-PYwdvq-rowMessage{font-size:var(--sb-size-s1);color:var(--sb-color-default-text);padding:8px 10px 8px 36px;& pre{margin:0;padding:0}}.sb-PYwdvq-errorName{color:#0271b6}.sb-PYwdvq-errorMessage{color:#444}.sb-PYwdvq-errorExplainer{color:var(--sb-color-negative-text);font-size:var(--sb-size-s2);text-wrap:balance;max-width:500px}:where([data-sb-theme=dark]){& .sb-PYwdvq-errorName{color:#5ec1ff}& .sb-PYwdvq-errorMessage{color:#eee}& .sb-PYwdvq-errorExplainer{color:var(--sb-color-negative)}}', document.head.appendChild(style);
+}
+var Interaction_default = { methodCall: "sb-PYwdvq-methodCall", rowMessage: "sb-PYwdvq-rowMessage", row: "sb-PYwdvq-row", errorMessage: "sb-PYwdvq-errorMessage", rowLabel: "sb-PYwdvq-rowLabel", errorExplainer: "sb-PYwdvq-errorExplainer", rowHeader: "sb-PYwdvq-rowHeader", button: "sb-PYwdvq-button", errorName: "sb-PYwdvq-errorName", rowActions: "sb-PYwdvq-rowActions" };
+
+// src/component-testing/components/Interaction.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var extractStepName = (call) => {
+  if (call.method === "step" && call.path?.length === 0 && typeof call.args?.[0] == "string") {
+    let label = call.args[0].trim();
+    if (label.length > 0)
+      return label;
+  }
+  return call.method;
+}, getRowAriaLabel = ({
+  isNavigationDisabled,
+  stepName,
+  statusText
+}) => `${isNavigationDisabled ? "Interaction row" : "Go to interaction row"}: ${stepName}. Status: ${statusText}.`, getExpandButtonAriaLabel = ({
+  isCollapsed,
+  stepName
+}) => `${isCollapsed ? "Expand" : "Collapse"} nested interaction steps for ${stepName}`, stepStatusTextMap = {
+  done: "passed",
+  error: "failed",
+  active: "running",
+  waiting: "pending"
+}, getInteractionStatusText = (call) => call.status ? stepStatusTextMap[call.status] : "not run", Exception = ({ exception }) => {
+  let filter = useAnsiToHtmlFilter();
+  if (!exception)
+    return null;
+  if (exception.callId === INTERNAL_RENDER_CALL_ID)
+    return jsxs10("div", { className: Interaction_default.rowMessage, children: [
+      jsxs10("pre", { children: [
+        jsxs10("span", { className: Interaction_default.errorName, children: [
+          exception.name,
+          ":"
+        ] }),
+        " ",
+        jsx14("span", { className: Interaction_default.errorMessage, children: exception.message })
+      ] }),
+      jsx14("p", { className: Interaction_default.errorExplainer, children: "The component failed to render properly. Automated component tests will not run until this is resolved. Check the full error message in Forkbook\u2019s canvas to debug." })
+    ] });
+  if (isJestError(exception))
+    return jsx14(MatcherResult, { ...exception });
+  if (isChaiError(exception))
+    return jsxs10("div", { className: Interaction_default.rowMessage, children: [
+      jsx14(
+        MatcherResult,
+        {
+          message: `${exception.message}${exception.diff ? `
+
+${exception.diff}` : ""}`,
+          style: { padding: 0 }
+        }
+      ),
+      jsx14("p", { children: "See the full stack trace in the browser console." })
+    ] });
+  let paragraphs = exception.message.split(`
+
+`), more = paragraphs.length > 1;
+  return jsxs10("div", { className: Interaction_default.rowMessage, children: [
+    jsx14("pre", { dangerouslySetInnerHTML: { __html: filter.toHtml(paragraphs[0]) } }),
+    more && jsx14("p", { children: "See the full stack trace in the browser console." })
+  ] });
+}, Interaction = ({
+  call,
+  callsById,
+  controls,
+  controlStates,
+  childCallIds,
+  isHidden,
+  isCollapsed,
+  toggleCollapsed,
+  pausedAt
+}) => {
+  let [isHovered, setIsHovered] = React30.useState(!1), isNavigationDisabled = !controlStates.goto || !call.interceptable || !!call.ancestors?.length, stepName = extractStepName(call), interactionStatus = getInteractionStatusText(call);
+  return isHidden || call.id === INTERNAL_RENDER_CALL_ID ? null : jsxs10(
+    "li",
+    {
+      className: Interaction_default.row,
+      "data-status": call.status,
+      "data-paused": pausedAt === call.id || void 0,
+      style: { paddingLeft: (call.ancestors?.length ?? 0) * 20 },
+      children: [
+        jsxs10(
+          "div",
+          {
+            className: Interaction_default.rowHeader,
+            "data-navigation-disabled": isNavigationDisabled || void 0,
+            children: [
+              jsxs10(
+                "button",
+                {
+                  className: Interaction_default.rowLabel,
+                  "data-status": call.status,
+                  "aria-label": getRowAriaLabel({
+                    isNavigationDisabled,
+                    stepName,
+                    statusText: interactionStatus
+                  }),
+                  onClick: () => controls.goto(call.id),
+                  onPointerDown: (e) => e.preventDefault(),
+                  disabled: isNavigationDisabled,
+                  onMouseEnter: () => controlStates.goto && setIsHovered(!0),
+                  onMouseLeave: () => controlStates.goto && setIsHovered(!1),
+                  children: [
+                    jsx14(StatusIcon, { status: isHovered ? "active" /* ACTIVE */ : call.status }),
+                    jsx14("div", { className: Interaction_default.methodCall, style: { marginLeft: 6, marginBottom: 1 }, children: jsx14(MethodCall, { call, callsById }) })
+                  ]
+                }
+              ),
+              jsx14("div", { className: Interaction_default.rowActions, children: (childCallIds?.length ?? 0) > 0 && jsx14(
+                Button2,
+                {
+                  className: Interaction_default.button,
+                  padding: "small",
+                  variant: "ghost",
+                  onClick: toggleCollapsed,
+                  ariaLabel: getExpandButtonAriaLabel({ isCollapsed, stepName }),
+                  "aria-expanded": !isCollapsed,
+                  children: isCollapsed ? jsx14(ChevronUpIcon, {}) : jsx14(ChevronDownIcon, {})
+                }
+              ) })
+            ]
+          }
+        ),
+        call.status === "error" /* ERROR */ && call.exception?.callId === call.id && jsx14(Exception, { exception: call.exception })
+      ]
+    }
+  );
+};
+
+// src/component-testing/components/TestDiscrepancyMessage.tsx
+import { Link as Link3 } from "@aussieljk/forkbook/internal/components";
+import { useStorybookApi as useStorybookApi5 } from "@aussieljk/forkbook/manager-api";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/component-testing/components/TestDiscrepancyMessage.module.css
+var id8 = "core/src/component-testing/components/TestDiscrepancyMessage.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id8}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id8), style.textContent = ".sb-wob9GG-message{text-align:start;font-size:calc(var(--sb-size-s2) - 1px);font-weight:var(--sb-weight-regular);background:var(--sb-background-app);border-bottom:1px solid var(--sb-color-border);color:var(--sb-color-default-text);background-clip:padding-box;padding:11px 15px;line-height:1rem;position:relative}.sb-wob9GG-message code{font-size:calc(var(--sb-size-s1) - 1px);color:inherit;background:#fffc;border-radius:2px;margin:0 .2em;padding:0 .2em;box-shadow:0 0 0 1px #0000001a}", document.head.appendChild(style);
+}
+var TestDiscrepancyMessage_default = { message: "sb-wob9GG-message" };
+
+// src/component-testing/components/TestDiscrepancyMessage.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var TestDiscrepancyMessage = ({ browserTestStatus }) => {
+  let docsUrl = useStorybookApi5().getDocsUrl({
+    subpath: DOCUMENTATION_DISCREPANCY_LINK,
+    versioned: !0,
+    renderer: !0
+  }), [passed, failed] = browserTestStatus === "error" /* ERROR */ ? ["the CLI", "this browser"] : ["this browser", "the CLI"];
+  return jsxs11("div", { className: TestDiscrepancyMessage_default.message, children: [
+    "This interaction test passed in ",
+    passed,
+    ", but the tests failed in ",
+    failed,
+    ".",
+    " ",
+    jsx15(Link3, { href: docsUrl, target: "_blank", withArrow: !0, children: "Learn what could cause this" })
+  ] });
+};
+
+// src/component-testing/components/Toolbar.tsx
+import {
+  Button as Button3,
+  P,
+  Separator,
+  Toolbar as SharedToolbar
+} from "@aussieljk/forkbook/internal/components";
+import {
+  FastForwardIcon,
+  PlayBackIcon,
+  PlayNextIcon,
+  RewindIcon,
+  SyncIcon
+} from "@storybook/icons";
+import { useTheme as useTheme6 } from "@aussieljk/forkbook/theming";
+
+// src/component-testing/components/StatusBadge.tsx
+import { TooltipNote, WithTooltip } from "@aussieljk/forkbook/internal/components";
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/component-testing/components/StatusBadge.module.css
+var id9 = "core/src/component-testing/components/StatusBadge.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id9}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id9), style.textContent = ".sb-R5-BBa-badge{color:#fff;font-family:var(--sb-font-base);text-transform:uppercase;font-size:var(--sb-size-s1);letter-spacing:3px;font-weight:var(--sb-weight-bold);text-align:center;border-radius:4px;min-width:65px;padding:4px 6px 4px 8px;display:inline-block}", document.head.appendChild(style);
+}
+var StatusBadge_default = { badge: "sb-R5-BBa-badge" };
+
+// src/component-testing/components/StatusBadge.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var StatusColorMapping = {
+  rendering: "mediumdark",
+  playing: "warning",
+  completed: "positive",
+  errored: "negative",
+  aborted: "purple"
+}, StatusTextMapping = {
+  rendering: "Wait",
+  playing: "Runs",
+  completed: "Pass",
+  errored: "Fail",
+  aborted: "Bail"
+}, StatusNoteMapping = {
+  rendering: "Story is rendering",
+  playing: "Interactions are running",
+  completed: "Story ran successfully",
+  errored: "Story failed to complete",
+  aborted: "Interactions aborted due to file changes"
+}, StatusBadge = ({ status }) => {
+  let badgeText = StatusTextMapping[status], badgeNote = StatusNoteMapping[status];
+  return jsx16(
+    WithTooltip,
+    {
+      hasChrome: !1,
+      placement: "top",
+      trigger: "hover",
+      tooltip: jsx16(TooltipNote, { note: badgeNote }),
+      children: jsx16(
+        "div",
+        {
+          className: StatusBadge_default.badge,
+          style: { backgroundColor: `var(--sb-color-${StatusColorMapping[status]})` },
+          "aria-label": `Story status: ${badgeText}`,
+          children: badgeText
+        }
+      )
+    }
+  );
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/component-testing/components/Toolbar.module.css
+var id10 = "core/src/component-testing/components/Toolbar.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id10}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id10), style.textContent = ".sb-W9rv1G-wrapper{box-shadow:var(--sb-app-border-color) 0 -1px 0 0 inset;background:var(--sb-background-app);z-index:1;position:sticky;top:0}.sb-W9rv1G-controlsGroup{flex:1;align-items:center;gap:6px;display:flex}.sb-W9rv1G-iconButton{color:var(--sb-text-muted-color)}.sb-W9rv1G-rewindButton{margin-inline-start:3px;}.sb-W9rv1G-jumpToEndButton{color:var(--sb-text-muted-color);border-radius:4px;margin-inline:3px;padding:6px;line-height:12px;&:not(:disabled):hover,&:not(:disabled):focus-visible{color:var(--sb-color-secondary)}}.sb-W9rv1G-openInEditorButton{color:var(--sb-color-secondary);font-weight:var(--sb-weight-bold);text-align:right;white-space:nowrap;justify-content:flex-end;font-size:13px;line-height:24px}.sb-W9rv1G-location{color:var(--sb-text-muted-color);cursor:default;font-weight:var(--sb-weight-regular);text-align:right;white-space:nowrap;justify-content:flex-end;margin:0;font-size:13px}", document.head.appendChild(style);
+}
+var Toolbar_default = { rewindButton: "sb-W9rv1G-rewindButton sb-W9rv1G-iconButton", openInEditorButton: "sb-W9rv1G-openInEditorButton", location: "sb-W9rv1G-location", jumpToEndButton: "sb-W9rv1G-jumpToEndButton", wrapper: "sb-W9rv1G-wrapper", controlsGroup: "sb-W9rv1G-controlsGroup", iconButton: "sb-W9rv1G-iconButton" };
+
+// src/component-testing/components/Toolbar.tsx
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var Toolbar = ({
+  controls,
+  controlStates,
+  status,
+  storyFileName,
+  onScrollToEnd,
+  importPath,
+  canOpenInEditor,
+  api
+}) => {
+  let buttonText = status === "errored" ? "Scroll to error" : "Scroll to end", theme3 = useTheme6(), preventFocusLoss = (e) => e.preventDefault();
+  return jsx17("div", { className: Toolbar_default.wrapper, children: jsxs12(
+    SharedToolbar,
+    {
+      backgroundColor: theme3.background.app,
+      innerStyle: { gap: 6, paddingInline: 15 },
+      "aria-label": "Component test playback controls",
+      children: [
+        jsxs12("div", { className: Toolbar_default.controlsGroup, children: [
+          jsx17(StatusBadge, { status }),
+          jsx17(
+            Button3,
+            {
+              className: Toolbar_default.jumpToEndButton,
+              ariaLabel: !1,
+              onClick: onScrollToEnd,
+              onPointerDown: preventFocusLoss,
+              disabled: !onScrollToEnd,
+              children: buttonText
+            }
+          ),
+          jsx17(Separator, {}),
+          jsx17(
+            Button3,
+            {
+              className: Toolbar_default.rewindButton,
+              padding: "small",
+              variant: "ghost",
+              ariaLabel: "Go to start",
+              onClick: controls.start,
+              onPointerDown: preventFocusLoss,
+              disabled: !controlStates.start,
+              children: jsx17(RewindIcon, {})
+            }
+          ),
+          jsx17(
+            Button3,
+            {
+              className: Toolbar_default.iconButton,
+              padding: "small",
+              variant: "ghost",
+              ariaLabel: "Go back",
+              onClick: controls.back,
+              onPointerDown: preventFocusLoss,
+              disabled: !controlStates.back,
+              children: jsx17(PlayBackIcon, {})
+            }
+          ),
+          jsx17(
+            Button3,
+            {
+              className: Toolbar_default.iconButton,
+              padding: "small",
+              variant: "ghost",
+              ariaLabel: "Go forward",
+              onClick: controls.next,
+              onPointerDown: preventFocusLoss,
+              disabled: !controlStates.next,
+              children: jsx17(PlayNextIcon, {})
+            }
+          ),
+          jsx17(
+            Button3,
+            {
+              className: Toolbar_default.iconButton,
+              padding: "small",
+              variant: "ghost",
+              ariaLabel: "Go to end",
+              onClick: controls.end,
+              onPointerDown: preventFocusLoss,
+              disabled: !controlStates.end,
+              children: jsx17(FastForwardIcon, {})
+            }
+          ),
+          jsx17(
+            Button3,
+            {
+              className: Toolbar_default.iconButton,
+              padding: "small",
+              variant: "ghost",
+              ariaLabel: "Rerun",
+              onClick: controls.rerun,
+              onPointerDown: preventFocusLoss,
+              children: jsx17(SyncIcon, {})
+            }
+          )
+        ] }),
+        (importPath || storyFileName) && (canOpenInEditor ? jsx17(
+          Button3,
+          {
+            className: Toolbar_default.openInEditorButton,
+            padding: "small",
+            size: "small",
+            variant: "ghost",
+            ariaLabel: "Open in editor",
+            onClick: () => {
+              api.openInEditor({
+                file: importPath
+              });
+            },
+            children: storyFileName
+          }
+        ) : jsx17(P, { className: Toolbar_default.location, children: storyFileName }))
+      ]
+    }
+  ) });
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/component-testing/components/InteractionsPanel.module.css
+var id11 = "core/src/component-testing/components/InteractionsPanel.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id11}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id11), style.textContent = ".sb-RpIDLa-container{background:var(--sb-background-content);height:100%}.sb-RpIDLa-section{position:relative}.sb-RpIDLa-heading{white-space:nowrap;clip:rect(0, 0, 0, 0);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sb-RpIDLa-list{margin:0;padding:0}.sb-RpIDLa-caughtException{border-bottom:1px solid var(--sb-app-border-color);background-color:var(--sb-background-warning);font-size:calc(var(--sb-size-s2) - 1px);padding:15px;line-height:19px}:where([data-sb-theme=dark]) .sb-RpIDLa-caughtException{background-color:rgb(from var(--sb-color-negative) r g b / calc(alpha - .93))}.sb-RpIDLa-caughtExceptionCode{font-size:calc(var(--sb-size-s1) - 1px);vertical-align:top;border:1px solid var(--sb-app-border-color);background:#0000000d;border-radius:3px;margin:0 1px;padding:3px;line-height:1}.sb-RpIDLa-caughtExceptionTitle{padding-bottom:4px;font-weight:700}.sb-RpIDLa-caughtExceptionDescription{margin:0;padding:0 0 20px}.sb-RpIDLa-caughtExceptionStack{font-size:calc(var(--sb-size-s1) - 1px);margin:0;padding:0;&:not(:last-child){padding-bottom:16px}}", document.head.appendChild(style);
+}
+var InteractionsPanel_default = { caughtExceptionCode: "sb-RpIDLa-caughtExceptionCode", caughtExceptionTitle: "sb-RpIDLa-caughtExceptionTitle", caughtException: "sb-RpIDLa-caughtException", heading: "sb-RpIDLa-heading", caughtExceptionStack: "sb-RpIDLa-caughtExceptionStack", section: "sb-RpIDLa-section", caughtExceptionDescription: "sb-RpIDLa-caughtExceptionDescription", list: "sb-RpIDLa-list", container: "sb-RpIDLa-container" };
+
+// src/component-testing/components/InteractionsPanel.tsx
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var StatusAnnouncementMapping = {
+  rendering: "Component test is rendering.",
+  playing: "Component test is running.",
+  completed: "Component test completed successfully.",
+  errored: "Component test failed.",
+  aborted: "Component test was aborted."
+}, getStatusAnnouncement = (status, hasException) => status === "completed" && hasException ? StatusAnnouncementMapping.errored : StatusAnnouncementMapping[status], InteractionsPanel = React31.memo(
+  function({
+    storyUrl,
+    status,
+    calls,
+    controls,
+    controlStates,
+    interactions,
+    fileName,
+    hasException,
+    caughtException,
+    unhandledErrors,
+    pausedAt,
+    onScrollToEnd,
+    endRef,
+    hasResultMismatch,
+    browserTestStatus,
+    importPath,
+    canOpenInEditor,
+    api
+  }) {
+    let filter = useAnsiToHtmlFilter(), hasRealInteractions = interactions.some((i) => i.id !== INTERNAL_RENDER_CALL_ID), isListBusy = status === "rendering" || status === "playing", statusAnnouncement = getStatusAnnouncement(status, hasException), isStatusAlert = status === "errored" || status === "completed" && hasException;
+    return React31.useEffect(() => {
+      announce(statusAnnouncement, isStatusAlert ? "assertive" : "polite");
+    }, [statusAnnouncement, isStatusAlert]), jsxs13("div", { className: InteractionsPanel_default.container, children: [
+      hasResultMismatch && jsx18(TestDiscrepancyMessage, { browserTestStatus }),
+      controlStates.detached && (hasRealInteractions || hasException) && jsx18(DetachedDebuggerMessage, { storyUrl }),
+      jsx18(
+        Toolbar,
+        {
+          controls,
+          controlStates,
+          status,
+          storyFileName: fileName,
+          onScrollToEnd,
+          importPath,
+          canOpenInEditor,
+          api
+        }
+      ),
+      jsxs13("section", { className: InteractionsPanel_default.section, children: [
+        jsx18("h3", { className: InteractionsPanel_default.heading, children: "Interaction steps" }),
+        jsx18("ol", { className: InteractionsPanel_default.list, "aria-busy": isListBusy, children: interactions.map((call) => jsx18(
+          Interaction,
+          {
+            call,
+            callsById: calls,
+            controls,
+            controlStates,
+            childCallIds: call.childCallIds,
+            isHidden: call.isHidden,
+            isCollapsed: call.isCollapsed,
+            toggleCollapsed: call.toggleCollapsed,
+            pausedAt
+          },
+          call.id
+        )) })
+      ] }),
+      caughtException && !isTestAssertionError(caughtException) && jsxs13("div", { className: InteractionsPanel_default.caughtException, children: [
+        jsxs13("div", { className: InteractionsPanel_default.caughtExceptionTitle, children: [
+          "Caught exception in ",
+          jsx18("code", { className: InteractionsPanel_default.caughtExceptionCode, children: "play" }),
+          " function"
+        ] }),
+        jsx18(
+          "pre",
+          {
+            className: InteractionsPanel_default.caughtExceptionStack,
+            "data-chromatic": "ignore",
+            dangerouslySetInnerHTML: {
+              __html: filter.toHtml(printSerializedError(caughtException))
+            }
+          }
+        )
+      ] }),
+      unhandledErrors && jsxs13("div", { className: InteractionsPanel_default.caughtException, children: [
+        jsx18("div", { className: InteractionsPanel_default.caughtExceptionTitle, children: "Unhandled Errors" }),
+        jsxs13("p", { className: InteractionsPanel_default.caughtExceptionDescription, children: [
+          "Found ",
+          unhandledErrors.length,
+          " unhandled error",
+          unhandledErrors.length > 1 ? "s" : "",
+          " ",
+          "while running the play function. This might cause false positive assertions. Resolve unhandled errors or ignore unhandled errors with setting the",
+          jsx18("code", { className: InteractionsPanel_default.caughtExceptionCode, children: "test.dangerouslyIgnoreUnhandledErrors" }),
+          " ",
+          "parameter to ",
+          jsx18("code", { className: InteractionsPanel_default.caughtExceptionCode, children: "true" }),
+          "."
+        ] }),
+        unhandledErrors.map((error, i) => jsx18("pre", { className: InteractionsPanel_default.caughtExceptionStack, "data-chromatic": "ignore", children: printSerializedError(error) }, i))
+      ] }),
+      jsx18("div", { ref: endRef }),
+      status === "completed" && !caughtException && !hasRealInteractions && jsx18(Empty, {})
+    ] });
+  }
+);
+function printSerializedError(error) {
+  return error.stack || `${error.name}: ${error.message}`;
+}
+
+// src/component-testing/components/Panel.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var INITIAL_CONTROL_STATES = {
+  detached: !1,
+  start: !1,
+  back: !1,
+  goto: !1,
+  next: !1,
+  end: !1
+}, playStatusMap = {
+  rendering: "rendering",
+  playing: "playing",
+  completed: "completed",
+  errored: "errored",
+  aborted: "aborted"
+}, terminalStatuses = ["completed", "errored", "aborted"], storyStatusMap = {
+  done: "status-value:success",
+  error: "status-value:error",
+  active: "status-value:pending",
+  waiting: "status-value:pending"
+}, getInteractions = ({
+  log,
+  calls,
+  collapsed,
+  setCollapsed
+}) => {
+  let callsById = /* @__PURE__ */ new Map(), childCallMap = /* @__PURE__ */ new Map();
+  return log.map(({ callId, ancestors, status }) => {
+    let isHidden = !1;
+    return ancestors.forEach((ancestor) => {
+      collapsed.has(ancestor) && (isHidden = !0), childCallMap.set(ancestor, (childCallMap.get(ancestor) || []).concat(callId));
+    }), { ...calls.get(callId), status, isHidden };
+  }).map((call) => {
+    let status = call.status === "error" /* ERROR */ && call.ancestors && callsById.get(call.ancestors.slice(-1)[0])?.status === "active" /* ACTIVE */ ? "active" /* ACTIVE */ : call.status;
+    return callsById.set(call.id, { ...call, status }), {
+      ...call,
+      status,
+      childCallIds: childCallMap.get(call.id),
+      isCollapsed: collapsed.has(call.id),
+      toggleCollapsed: () => setCollapsed((ids) => (ids.has(call.id) ? ids.delete(call.id) : ids.add(call.id), new Set(ids)))
+    };
+  });
+}, getPanelState = (state, {
+  log,
+  calls,
+  collapsed,
+  setCollapsed
+}) => getInteractions({ log, calls, collapsed, setCollapsed }).reduce(
+  (acc, interaction) => (interaction.id === INTERNAL_RENDER_CALL_ID ? acc.interactions.push(interaction) : state.status !== "rendering" && (acc.controlStates = state.controlStates, acc.interactions.push(interaction), interaction.method !== "step" && acc.interactionsCount++), acc),
+  {
+    ...state,
+    controlStates: INITIAL_CONTROL_STATES,
+    interactions: [],
+    interactionsCount: 0
+  }
+), trackRenderPhase = (tracker, event, currentStoryId) => {
+  if (event.storyId !== currentStoryId)
+    return { tracker, isCurrentRender: !1 };
+  if (tracker.storyId === event.storyId && ["preparing", "loading"].includes(event.newPhase))
+    return { tracker, isCurrentRender: !1 };
+  let renderId = tracker.storyId === event.storyId ? Math.max(tracker.renderId, event.renderId || 0) : event.renderId || 0;
+  return {
+    tracker: { storyId: event.storyId, renderId },
+    isCurrentRender: renderId === event.renderId
+  };
+}, getInternalRenderCall = (storyId, exception) => ({
+  id: INTERNAL_RENDER_CALL_ID,
+  method: "render",
+  args: [],
+  cursor: 0,
+  storyId,
+  ancestors: [],
+  path: [],
+  interceptable: !0,
+  retain: !1,
+  exception
+}), getInternalRenderLogItem = (status) => ({
+  callId: INTERNAL_RENDER_CALL_ID,
+  status,
+  ancestors: []
+}), Panel = memo4(
+  function({ refId, storyId, storyUrl }) {
+    let { statusValue, testRunId } = experimental_useStatusStore((state2) => {
+      let storyStatus = refId ? void 0 : state2[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];
+      return {
+        statusValue: storyStatus?.value,
+        testRunId: storyStatus?.data?.testRunId
+      };
+    }), state = useStorybookState2(), api = useStorybookApi6(), importPath = api.getData(state.storyId, state.refId)?.importPath, canOpenInEditor = global2.CONFIG_TYPE === "DEVELOPMENT" && !state.refId, [panelState, set] = useAddonState2(ADDON_ID6, {
+      status: "rendering",
+      controlStates: INITIAL_CONTROL_STATES,
+      interactions: [],
+      interactionsCount: 0,
+      hasException: !1,
+      pausedAt: void 0,
+      caughtException: void 0,
+      unhandledErrors: void 0
+    }), [scrollTarget, setScrollTarget] = useState11(void 0), [collapsed, setCollapsed] = useState11(/* @__PURE__ */ new Set()), [hasResultMismatch, setResultMismatch] = useState11(!1), {
+      status = "rendering",
+      controlStates = INITIAL_CONTROL_STATES,
+      interactions = [],
+      pausedAt = void 0,
+      caughtException = void 0,
+      unhandledErrors = void 0
+    } = panelState, log = useRef2([getInternalRenderLogItem("active" /* ACTIVE */)]), calls = useRef2(
+      /* @__PURE__ */ new Map([[INTERNAL_RENDER_CALL_ID, getInternalRenderCall(storyId)]])
+    ), setCall = ({ status: status2, ...call }) => calls.current.set(call.id, call), endRef = useRef2();
+    useEffect10(() => {
+      let observer;
+      return global2.IntersectionObserver && (observer = new global2.IntersectionObserver(
+        ([end]) => setScrollTarget(end.isIntersecting ? void 0 : end.target),
+        { root: global2.document.querySelector('#storybook-panel-root [role="tabpanel"]') }
+      ), endRef.current && observer.observe(endRef.current)), () => observer?.disconnect();
+    }, []);
+    let renderTracker = useRef2({ renderId: 0 }), emit = useChannel3(
+      {
+        [EVENTS.CALL]: setCall,
+        [EVENTS.SYNC]: (payload) => {
+          payload.storyId && payload.storyId !== api.getUrlState().storyId || (log.current = [getInternalRenderLogItem("done" /* DONE */), ...payload.logItems], set(
+            (state2) => getPanelState(
+              { ...state2, controlStates: payload.controlStates, pausedAt: payload.pausedAt },
+              { log: log.current, calls: calls.current, collapsed, setCollapsed }
+            )
+          ));
+        },
+        [STORY_RENDER_PHASE_CHANGED]: (event) => {
+          let { tracker, isCurrentRender } = trackRenderPhase(
+            renderTracker.current,
+            event,
+            api.getUrlState().storyId
+          );
+          renderTracker.current = tracker, isCurrentRender && (event.newPhase === "rendering" ? (log.current = [getInternalRenderLogItem("active" /* ACTIVE */)], calls.current.set(INTERNAL_RENDER_CALL_ID, getInternalRenderCall(storyId)), set({
+            status: "rendering",
+            controlStates: INITIAL_CONTROL_STATES,
+            pausedAt: void 0,
+            interactions: [],
+            interactionsCount: 0,
+            hasException: !1,
+            caughtException: void 0,
+            unhandledErrors: void 0
+          })) : set((state2) => {
+            let status2 = event.newPhase in playStatusMap && !terminalStatuses.includes(state2.status) ? playStatusMap[event.newPhase] : state2.status;
+            return getPanelState(
+              { ...state2, status: status2, pausedAt: void 0 },
+              { log: log.current, calls: calls.current, collapsed, setCollapsed }
+            );
+          }));
+        },
+        [STORY_THREW_EXCEPTION]: (e) => {
+          log.current = [getInternalRenderLogItem("error" /* ERROR */)], calls.current.set(
+            INTERNAL_RENDER_CALL_ID,
+            getInternalRenderCall(storyId, { ...e, callId: INTERNAL_RENDER_CALL_ID })
+          ), set(
+            (state2) => getPanelState(
+              {
+                ...state2,
+                hasException: !0,
+                caughtException: void 0,
+                controlStates: INITIAL_CONTROL_STATES,
+                pausedAt: void 0
+              },
+              { log: log.current, calls: calls.current, collapsed, setCollapsed }
+            )
+          );
+        },
+        [PLAY_FUNCTION_THREW_EXCEPTION]: (caughtException2) => {
+          set((state2) => ({ ...state2, caughtException: caughtException2, hasException: !0 }));
+        },
+        [UNHANDLED_ERRORS_WHILE_PLAYING]: (unhandledErrors2) => {
+          set((state2) => ({ ...state2, unhandledErrors: unhandledErrors2, hasException: !0 }));
+        }
+      },
+      [collapsed, storyId]
+    );
+    useEffect10(() => {
+      set(
+        (state2) => getPanelState(state2, { log: log.current, calls: calls.current, collapsed, setCollapsed })
+      );
+    }, [set, collapsed]);
+    let controls = useMemo4(
+      () => ({
+        start: () => emit(EVENTS.START, { storyId }),
+        back: () => emit(EVENTS.BACK, { storyId }),
+        goto: (callId) => emit(EVENTS.GOTO, { storyId, callId }),
+        next: () => emit(EVENTS.NEXT, { storyId }),
+        end: () => emit(EVENTS.END, { storyId }),
+        rerun: () => {
+          emit(FORCE_REMOUNT, { storyId });
+        }
+      }),
+      [emit, storyId]
+    ), storyFilePath = useParameter3("fileName", ""), [fileName] = storyFilePath.toString().split("/").slice(-1), scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: "smooth", block: "end" }), hasException = !!caughtException || !!unhandledErrors || interactions.some((v2) => v2.status === "error" /* ERROR */), browserTestStatus = useMemo4(() => status !== "playing" && (interactions.length > 0 || hasException) ? hasException ? "error" /* ERROR */ : "done" /* DONE */ : status === "playing" ? "active" /* ACTIVE */ : void 0, [status, interactions, hasException]);
+    return useEffect10(() => {
+      if (browserTestStatus && statusValue && statusValue !== "status-value:pending" && statusValue !== storyStatusMap[browserTestStatus]) {
+        let timeout = setTimeout(
+          () => setResultMismatch((currentValue) => (currentValue || emit(FORKBOOK_ADDON_TEST_CHANNEL, {
+            type: "test-discrepancy",
+            payload: {
+              browserStatus: browserTestStatus === "done" /* DONE */ ? "PASS" : "FAIL",
+              cliStatus: browserTestStatus === "done" /* DONE */ ? "FAIL" : "PASS",
+              storyId,
+              testRunId
+            }
+          }), !0)),
+          2e3
+        );
+        return () => clearTimeout(timeout);
+      } else
+        setResultMismatch(!1);
+    }, [emit, browserTestStatus, statusValue, storyId, testRunId]), jsx19(Fragment8, { children: jsx19(
+      InteractionsPanel,
+      {
+        storyUrl,
+        status,
+        hasResultMismatch,
+        browserTestStatus,
+        calls: calls.current,
+        controls,
+        controlStates: { ...controlStates, detached: !!refId || controlStates.detached },
+        interactions,
+        fileName,
+        hasException,
+        caughtException,
+        unhandledErrors,
+        pausedAt,
+        endRef,
+        onScrollToEnd: scrollTarget && scrollToTarget,
+        importPath,
+        canOpenInEditor,
+        api
+      }
+    ) }, "component-tests");
+  }
+);
+
+// src/component-testing/components/PanelTitle.tsx
+import { Badge as Badge3 } from "@aussieljk/forkbook/internal/components";
+import { useAddonState as useAddonState3, useStorybookApi as useStorybookApi7 } from "@aussieljk/forkbook/manager-api";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function PanelTitle() {
+  let selectedPanel = useStorybookApi7().getSelectedPanel(), [addonState = {}] = useAddonState3(ADDON_ID6), { status, hasException, interactionsCount } = addonState;
+  return jsxs14("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    jsx20("span", { children: "Interactions" }),
+    interactionsCount && status !== "errored" && !hasException ? jsx20(Badge3, { compact: !0, status: selectedPanel === PANEL_ID2 ? "active" : "neutral", children: interactionsCount }) : null,
+    status === "errored" || hasException ? jsx20(StatusIcon, { status: "error" /* ERROR */ }) : null
+  ] });
+}
+
+// src/component-testing/manager.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var manager_default5 = addons5.register(ADDON_ID6, () => {
+  if (globalThis?.FEATURES?.interactions) {
+    let filter = ({ state }) => {
+      let origin = state.refId && state.refs[state.refId]?.url || document.location.origin, { pathname, search = "" } = state.location, path = pathname + (state.refId ? search.replace(`/${state.refId}_`, "/") : search);
+      return {
+        refId: state.refId,
+        storyId: state.storyId,
+        storyUrl: origin + path
+      };
+    };
+    addons5.add(PANEL_ID2, {
+      type: types3.PANEL,
+      title: () => jsx21(PanelTitle, {}),
+      match: ({ viewMode }) => viewMode === "story",
+      disabled: isInteractionsDisabled,
+      render: ({ active }) => jsx21(AddonPanel2, { active: !!active, children: jsx21(Consumer, { filter, children: (props) => jsx21(Panel, { ...props }) }) })
+    });
+  }
+});
+
+// src/backgrounds/manager.tsx
+import { addons as addons6, types as types4 } from "@aussieljk/forkbook/manager-api";
+
+// src/backgrounds/components/Tool.tsx
+import { Fragment as Fragment9, memo as memo5, useCallback as useCallback5 } from "react";
+import { Select, ToggleButton } from "@aussieljk/forkbook/internal/components";
+import { CircleIcon as CircleIcon2, GridIcon, PhotoIcon } from "@storybook/icons";
+import { useGlobals as useGlobals2, useParameter as useParameter4 } from "@aussieljk/forkbook/manager-api";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var BackgroundTool = memo5(function() {
+  let config = useParameter4(PARAM_KEY3), [globals, updateGlobals, storyGlobals] = useGlobals2(), { options = DEFAULT_BACKGROUNDS, disable = !0 } = config || {};
+  if (disable)
+    return null;
+  let data = globals[PARAM_KEY3] || {}, backgroundName = data.value, isGridActive = data.grid || !1, item = options[backgroundName], isLocked = !!storyGlobals?.[PARAM_KEY3], length = Object.keys(options).length;
+  return jsx22(
+    Pure,
+    {
+      length,
+      backgroundMap: options,
+      item,
+      updateGlobals,
+      backgroundName,
+      isLocked,
+      isGridActive
+    }
+  );
+}), Pure = memo5(function(props) {
+  let {
+    length,
+    updateGlobals,
+    backgroundMap,
+    backgroundName,
+    isLocked,
+    isGridActive: isGrid
+  } = props, update = useCallback5(
+    (input) => {
+      updateGlobals({
+        [PARAM_KEY3]: input
+      });
+    },
+    [updateGlobals]
+  ), options = Object.entries(backgroundMap).map(([k, value]) => ({
+    value: k,
+    title: value.name,
+    icon: jsx22(CircleIcon2, { color: value?.value || "grey" })
+  }));
+  return jsxs15(Fragment9, { children: [
+    jsx22(
+      ToggleButton,
+      {
+        padding: "small",
+        variant: "ghost",
+        pressed: isGrid,
+        disabled: isLocked,
+        ariaLabel: isLocked ? "Grid set by story parameters" : "Grid visibility",
+        tooltip: isLocked ? "Grid set by story parameters" : "Toggle grid visibility",
+        onClick: () => update({ value: backgroundName, grid: !isGrid }),
+        children: jsx22(GridIcon, {})
+      },
+      "grid"
+    ),
+    length > 0 ? jsx22(
+      Select,
+      {
+        resetLabel: "Reset background",
+        onReset: () => update(void 0),
+        disabled: isLocked,
+        icon: jsx22(PhotoIcon, {}),
+        ariaLabel: isLocked ? "Background set by story parameters" : "Preview background",
+        tooltip: isLocked ? "Background set by story parameters" : "Change background",
+        defaultOptions: backgroundName,
+        options,
+        onSelect: (selected) => update({ value: selected, grid: isGrid })
+      },
+      "background"
+    ) : null
+  ] });
+});
+
+// src/backgrounds/manager.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var manager_default6 = addons6.register(ADDON_ID3, () => {
+  globalThis?.FEATURES?.backgrounds && addons6.add(ADDON_ID3, {
+    title: "Backgrounds",
+    type: types4.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => jsx23(BackgroundTool, {})
+  });
+});
+
+// src/measure/manager.tsx
+import { addons as addons7, types as types5 } from "@aussieljk/forkbook/manager-api";
+
+// src/measure/Tool.tsx
+import { useCallback as useCallback6, useEffect as useEffect11 } from "react";
+import { ToggleButton as ToggleButton2 } from "@aussieljk/forkbook/internal/components";
+import { RulerIcon } from "@storybook/icons";
+import { useGlobals as useGlobals3, useParameter as useParameter5, useStorybookApi as useStorybookApi8 } from "@aussieljk/forkbook/manager-api";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Tool = () => {
+  let isDisabled = useParameter5("measure")?.disable, [globals, updateGlobals] = useGlobals3(), { measureEnabled } = globals || {}, api = useStorybookApi8(), toggleMeasure = useCallback6(
+    () => updateGlobals({
+      measureEnabled: !measureEnabled
+    }),
+    [updateGlobals, measureEnabled]
+  );
+  return useEffect11(() => {
+    isDisabled || api.setAddonShortcut(ADDON_ID4, {
+      label: "Toggle Measure",
+      defaultShortcut: ["M"],
+      actionName: "measure",
+      showInMenu: !1,
+      action: toggleMeasure
+    });
+  }, [toggleMeasure, api, isDisabled]), isDisabled ? null : jsx24(
+    ToggleButton2,
+    {
+      pressed: measureEnabled,
+      padding: "small",
+      variant: "ghost",
+      ariaLabel: "Measure tool",
+      tooltip: "Toggle measure",
+      ariaDescription: "When enabled, this tool shows dimensions and whitespace (margin, padding, border) for the currently hovered element in the preview area. Does not work with keyboard focus.",
+      onClick: toggleMeasure,
+      children: jsx24(RulerIcon, {})
+    },
+    TOOL_ID2
+  );
+};
+
+// src/measure/manager.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var manager_default7 = addons7.register(ADDON_ID4, () => {
+  globalThis?.FEATURES?.measure && addons7.add(TOOL_ID2, {
+    type: types5.TOOL,
+    title: "Measure",
+    match: ({ viewMode }) => viewMode === "story",
+    render: () => jsx25(Tool, {})
+  });
+});
+
+// src/outline/manager.tsx
+import { addons as addons8, types as types6 } from "@aussieljk/forkbook/manager-api";
+
+// src/outline/OutlineSelector.tsx
+import { memo as memo6, useCallback as useCallback7, useEffect as useEffect12 } from "react";
+import { ToggleButton as ToggleButton3 } from "@aussieljk/forkbook/internal/components";
+import { OutlineIcon } from "@storybook/icons";
+import { useGlobals as useGlobals4, useParameter as useParameter6, useStorybookApi as useStorybookApi9 } from "@aussieljk/forkbook/manager-api";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var OutlineSelector = memo6(function() {
+  let isDisabled = useParameter6(PARAM_KEY4)?.disable, [globals, updateGlobals] = useGlobals4(), api = useStorybookApi9(), isActive = [!0, "true"].includes(globals[PARAM_KEY4]), toggleOutline = useCallback7(
+    () => updateGlobals({
+      [PARAM_KEY4]: !isActive
+    }),
+    [isActive, updateGlobals]
+  );
+  return useEffect12(() => {
+    isDisabled || api.setAddonShortcut(ADDON_ID5, {
+      label: "Toggle Outline",
+      defaultShortcut: ["alt", "O"],
+      actionName: "outline",
+      showInMenu: !1,
+      action: toggleOutline
+    });
+  }, [toggleOutline, api, isDisabled]), isDisabled ? null : jsx26(
+    ToggleButton3,
+    {
+      padding: "small",
+      variant: "ghost",
+      pressed: isActive,
+      ariaLabel: "Outline tool",
+      ariaDescription: "When enabled, this tool displays the outline of every element in the preview area, which helps understand their layout.",
+      tooltip: "Toggle outline",
+      onClick: toggleOutline,
+      children: jsx26(OutlineIcon, {})
+    },
+    "outline"
+  );
+});
+
+// src/outline/manager.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var manager_default8 = addons8.register(ADDON_ID5, () => {
+  globalThis?.FEATURES?.outline && addons8.add(ADDON_ID5, {
+    title: "Outline",
+    type: types6.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => jsx27(OutlineSelector, {})
+  });
+});
+
+// src/viewport/manager.tsx
+import { addons as addons9, types as types7 } from "@aussieljk/forkbook/manager-api";
+
+// src/viewport/components/Tool.tsx
+import { useMemo as useMemo6 } from "react";
+import { Select as Select2 } from "@aussieljk/forkbook/internal/components";
+import { GrowIcon } from "@storybook/icons";
+
+// src/viewport/useViewport.ts
+import { useCallback as useCallback8, useEffect as useEffect13, useMemo as useMemo5, useRef as useRef3 } from "react";
+import { useGlobals as useGlobals5, useParameter as useParameter7, useStorybookApi as useStorybookApi10 } from "@aussieljk/forkbook/manager-api";
+var cycle = (viewports, current, direction = 1) => {
+  let keys = Object.keys(viewports), nextIndex = (current ? keys.indexOf(current) : -1) + direction;
+  return nextIndex < 0 ? keys[keys.length - 1] : nextIndex >= keys.length ? keys[0] : keys[nextIndex];
+}, normalizeGlobal = (value, defaultIsRotated) => typeof value == "string" ? { value, isRotated: defaultIsRotated } : { value: value?.value, isRotated: value?.isRotated ?? defaultIsRotated }, useViewport = () => {
+  let api = useStorybookApi10(), { viewMode } = api.getUrlState(), lastSelectedOption = useRef3(), parameter = useParameter7(PARAM_KEY), [globals, updateGlobals, storyGlobals, userGlobals] = useGlobals5(), { options = MINIMAL_VIEWPORTS, disable = !1 } = parameter || {}, { name, type, width, height, value, option, isCustom, isDefault, isLocked, isRotated } = resolveViewport({
+    globals,
+    storyGlobals,
+    userGlobals,
+    options,
+    lastSelectedOption: lastSelectedOption.current,
+    disable,
+    viewMode
+  }), update = useCallback8(
+    (input) => updateGlobals({ [PARAM_KEY]: normalizeGlobal(input, !1) }),
+    [updateGlobals]
+  ), resize = useCallback8(
+    (width2, height2) => {
+      let w = width2.replace(/px$/, "").replace(/%$/, "pct"), h = height2.replace(/px$/, "").replace(/%$/, "pct"), value2 = isRotated ? `${h}-${w}` : `${w}-${h}`;
+      update({ value: value2, isRotated });
+    },
+    [update, isRotated]
+  );
+  return useEffect13(() => {
+    parameter && option && (Object.hasOwn(options, option) ? lastSelectedOption.current = option : (lastSelectedOption.current = void 0, PARAM_KEY in storyGlobals || update({ value: void 0, isRotated: !1 })));
+  }, [parameter, storyGlobals, options, option, update]), useEffect13(() => {
+    api.setAddonShortcut(ADDON_ID, {
+      label: "Next viewport",
+      defaultShortcut: ["alt", "V"],
+      actionName: "next",
+      action: () => update({ value: cycle(options, lastSelectedOption.current), isRotated })
+    }), api.setAddonShortcut(ADDON_ID, {
+      label: "Previous viewport",
+      defaultShortcut: ["alt", "shift", "V"],
+      actionName: "previous",
+      action: () => update({ value: cycle(options, lastSelectedOption.current, -1), isRotated })
+    }), api.setAddonShortcut(ADDON_ID, {
+      label: "Reset viewport",
+      defaultShortcut: ["alt", "control", "V"],
+      actionName: "reset",
+      action: () => update({ value: void 0, isRotated: !1 })
+    });
+  }, [api, update, options, isRotated]), useMemo5(
+    () => ({
+      name,
+      type,
+      width,
+      height,
+      value,
+      option,
+      isCustom,
+      isDefault,
+      isLocked,
+      isRotated,
+      options,
+      lastSelectedOption: lastSelectedOption.current,
+      resize,
+      reset: () => update({ value: void 0, isRotated: !1 }),
+      rotate: () => update({ value, isRotated: !isRotated }),
+      select: (value2) => update({ value: value2, isRotated })
+    }),
+    [
+      name,
+      type,
+      width,
+      height,
+      value,
+      option,
+      isCustom,
+      isDefault,
+      isRotated,
+      isLocked,
+      options,
+      resize,
+      update
+    ]
+  );
+};
+
+// src/viewport/viewportIcons.tsx
+import { BrowserIcon, DiamondIcon, MobileIcon, TabletIcon, WatchIcon } from "@storybook/icons";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var iconsMap = {
+  desktop: jsx28(BrowserIcon, {}),
+  mobile: jsx28(MobileIcon, {}),
+  tablet: jsx28(TabletIcon, {}),
+  watch: jsx28(WatchIcon, {}),
+  other: jsx28(DiamondIcon, {})
+};
+
+// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/viewport/components/Tool.module.css
+var id12 = "core/src/viewport/components/Tool.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-sb-css="${id12}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-sb-css", id12), style.textContent = ".sb-vBOFLW-dimensions{font-family:var(--sb-font-mono);font-size:calc(var(--sb-size-s1) - 1px);font-weight:var(--sb-weight-regular);color:var(--sb-text-muted-color);gap:2px;margin-left:20px;display:flex}", document.head.appendChild(style);
+}
+var Tool_default = { dimensions: "sb-vBOFLW-dimensions" };
+
+// src/viewport/components/Tool.tsx
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+var ViewportTool = () => {
+  let {
+    name,
+    value,
+    isDefault,
+    isCustom,
+    isLocked,
+    options: viewportMap,
+    reset,
+    select
+  } = useViewport(), options = useMemo6(() => {
+    let presetOptions = Object.entries(viewportMap).map(([k, value2]) => ({
+      value: k,
+      title: value2.name,
+      icon: iconsMap[value2.type],
+      right: jsxs16("div", { className: Tool_default.dimensions, children: [
+        jsx29("span", { children: value2.styles.width.replace("px", "") }),
+        jsx29("span", { children: "\xD7" }),
+        jsx29("span", { children: value2.styles.height.replace("px", "") })
+      ] })
+    }));
+    return isCustom && value ? [
+      ...presetOptions,
+      {
+        value,
+        title: name,
+        icon: iconsMap.other,
+        right: null
+      }
+    ] : presetOptions;
+  }, [viewportMap, isCustom, value, name]);
+  return jsx29(
+    Select2,
+    {
+      resetLabel: "Reset viewport",
+      onReset: reset,
+      disabled: isLocked,
+      ariaLabel: isLocked ? "Viewport size set by story parameters" : "Viewport size",
+      ariaDescription: "Select a viewport among predefined options for the preview area, or reset to the default viewport.",
+      tooltip: isLocked ? "Viewport set by story parameters" : "Change viewport",
+      defaultOptions: value,
+      options,
+      onSelect: (selected) => select(selected),
+      icon: jsx29(GrowIcon, {}),
+      children: isDefault ? null : name
+    },
+    "viewport"
+  );
+};
+
+// src/viewport/manager.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+var manager_default9 = addons9.register(ADDON_ID, () => {
+  globalThis?.FEATURES?.viewport && addons9.add(TOOL_ID, {
+    title: "viewport / media-queries",
+    type: types7.TOOL,
+    match: ({ viewMode }) => viewMode === "story",
+    render: () => jsx30(ViewportTool, {})
+  });
+});
+
+// src/core-server/presets/common-manager.ts
+var common_manager_default = [
+  manager_default,
+  manager_default2,
+  manager_default7,
+  manager_default4,
+  manager_default6,
+  manager_default5,
+  manager_default3,
+  manager_default9,
+  manager_default8
+];
+export {
+  common_manager_default as default
+};