nodes/packages/ui/.histoire/dist/assets/StoryView.vue-BFx-CBXY.js

import { d as defineComponent, c as computed, o as openBlock, q as createBlock, w as withCtx, f as createBaseVNode, b as createElementBlock, F as Fragment, p as renderList, aD as mergeProps, aF as renderSlot, z as createTextVNode, t as toDisplayString, e as createVNode, g as unref, I as Icon, aG as Dropdown, aH as clone, aI as omit, j as useStorage, J as onMounted, r as ref, aJ as useTimeoutFn, aK as onClickOutside, x as resolveDirective, y as withDirectives, aL as withModifiers, aM as vModelText, h as createCommentVNode, v as isRef, m as withKeys, n as normalizeClass, P as applyState, aN as nextTick, aO as Mm, aP as gm, aQ as ym, aR as wm, aE as resolveDynamicComponent, k as watch, E as reactive, aS as toRefs, aT as useRouter, a as useRoute, aC as watchEffect, i as defineStore, l as resolveComponent, aB as markRaw, aU as shallowRef, aV as unindent, aW as getHighlighter, aX as Am, A as pushScopeId, B as popScopeId, T as Transition, aY as useResizeObserver, O as h, aZ as onBeforeUnmount, u as useCssVars, G as normalizeStyle, a_ as onUnmounted, a$ as VTooltip, b0 as createStaticVNode, s as useEventListener, b1 as toRaw } from "./vendor-BCKkA27H.js";
import { u as useStoryStore } from "./story--eZPzd9h.js";
import { _ as _export_sfc, b as BaseSplitPane, u as useScrollOnActive, B as BaseListItemLink, i as isMobile, a as _sfc_main$A } from "./MobileOverlay.vue2-BRmV4xb2.js";
import { B as BaseEmpty } from "./BaseEmpty.vue-C0i8tRal.js";
import { t as toRawDeep, _ as _sfc_main$z, g as getContrastColor, b as SANDBOX_READY, E as EVENT_SEND, S as STATE_SYNC, P as PREVIEW_SETTINGS_SYNC } from "./state-BFrY_pEm.js";
import { h as histoireConfig, d as clientSupportPlugins, i as isDark, e as base } from "./GenericMountStory.vue2-BX48YWx2.js";
const _hoisted_1$t = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" };
const _hoisted_2$j = { class: "htw-flex-1 htw-truncate" };
const _hoisted_3$f = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" };
const _hoisted_4$a = ["onClick"];
const _sfc_main$y = /* @__PURE__ */ defineComponent({
  __name: "BaseSelect",
  props: {
    modelValue: {},
    options: {}
  },
  emits: ["update:modelValue", "select"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const formattedOptions = computed(() => {
      if (Array.isArray(props.options)) {
        return Object.fromEntries(props.options.map((value) => [value, value]));
      }
      return props.options;
    });
    const selectedLabel = computed(() => formattedOptions.value[props.modelValue]);
    function selectValue(value, hide) {
      emit("update:modelValue", value);
      emit("select", value);
      hide();
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Dropdown), {
        class: "histoire-base-select",
        "auto-size": "",
        "auto-boundary-max-size": ""
      }, {
        popper: withCtx(({ hide }) => [
          createBaseVNode("div", _hoisted_3$f, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(formattedOptions.value, (label, value) => {
              return openBlock(), createElementBlock("div", mergeProps({ ..._ctx.$attrs, class: null, style: null }, {
                key: label,
                class: ["htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", {
                  "htw-bg-primary-200 dark:htw-bg-primary-800": props.modelValue === value
                }],
                onClick: ($event) => selectValue(value, hide)
              }), [
                renderSlot(_ctx.$slots, "option", {
                  label,
                  value
                }, () => [
                  createTextVNode(toDisplayString(label), 1)
                ])
              ], 16, _hoisted_4$a);
            }), 128))
          ])
        ]),
        default: withCtx(() => [
          createBaseVNode("div", _hoisted_1$t, [
            createBaseVNode("div", _hoisted_2$j, [
              renderSlot(_ctx.$slots, "default", { label: selectedLabel.value }, () => [
                createTextVNode(toDisplayString(selectedLabel.value), 1)
              ])
            ]),
            createVNode(unref(Icon), {
              icon: "carbon:chevron-sort",
              class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
            })
          ])
        ]),
        _: 3
      });
    };
  }
});
const _hoisted_1$s = { class: "histoire-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center" };
const _hoisted_2$i = ["onUpdate:modelValue"];
const _hoisted_3$e = {
  key: 1,
  class: "htw-flex htw-items-center htw-gap-2"
};
const _hoisted_4$9 = { class: "htw-flex-1 htw-truncate" };
const _hoisted_5$6 = { class: "htw-flex htw-gap-2 htw-items-center" };
const _hoisted_6$4 = { class: "htw-flex-1 htw-truncate" };
const DEFAULT_ID = "default";
const _sfc_main$x = /* @__PURE__ */ defineComponent({
  __name: "StatePresets",
  props: {
    story: {},
    variant: {}
  },
  setup(__props) {
    const props = __props;
    const saveId = computed(() => `${props.story.id}:${props.variant.id}`);
    const omitKeys = ["_hPropDefs"];
    const defaultState = clone(omit(toRawDeep(props.variant.state), omitKeys));
    const selectedOption = useStorage(
      `_histoire-presets/${saveId.value}/selected`,
      DEFAULT_ID
    );
    const presetStates = useStorage(
      `_histoire-presets/${saveId.value}/states`,
      /* @__PURE__ */ new Map()
    );
    const presetsOptions = computed(() => {
      const options = { [DEFAULT_ID]: "Initial state" };
      presetStates.value.forEach((value, key) => {
        options[key] = value.label;
      });
      return options;
    });
    function resetState() {
      selectedOption.value = DEFAULT_ID;
      applyState(props.variant.state, clone(defaultState));
    }
    function applyPreset(id) {
      if (id === DEFAULT_ID) {
        resetState();
      } else if (presetStates.value.has(id)) {
        applyState(props.variant.state, clone(toRawDeep(presetStates.value.get(id).state)));
      }
    }
    onMounted(() => {
      if (selectedOption.value !== DEFAULT_ID) {
        applyPreset(selectedOption.value);
      }
    });
    const input = ref();
    const select = ref();
    const canEdit = computed(() => selectedOption.value !== DEFAULT_ID);
    const isEditing = ref(false);
    async function createPreset() {
      const id = (/* @__PURE__ */ new Date()).getTime().toString();
      presetStates.value.set(id, { state: clone(omit(toRawDeep(props.variant.state), omitKeys)), label: "New preset" });
      selectedOption.value = id;
      isEditing.value = true;
      await nextTick();
      input.value.select();
    }
    const savedNotif = ref(false);
    const savedTimeout = useTimeoutFn(() => {
      savedNotif.value = false;
    }, 1e3);
    async function savePreset() {
      if (!canEdit.value)
        return;
      const preset = presetStates.value.get(selectedOption.value);
      preset.state = clone(omit(toRawDeep(props.variant.state), omitKeys));
      savedNotif.value = true;
      savedTimeout.start();
    }
    function deletePreset(id) {
      if (!confirm("Are you sure you want to delete this preset?")) {
        return;
      }
      if (selectedOption.value === id) {
        resetState();
      }
      presetStates.value.delete(id);
    }
    async function startEditing() {
      if (!canEdit.value) {
        return;
      }
      isEditing.value = true;
      await nextTick();
      input.value.select();
    }
    function stopEditing() {
      isEditing.value = false;
    }
    onClickOutside(select, stopEditing);
    return (_ctx, _cache) => {
      const _directive_tooltip = resolveDirective("tooltip");
      return openBlock(), createElementBlock("div", _hoisted_1$s, [
        createBaseVNode("div", {
          ref_key: "select",
          ref: select,
          class: "htw-flex-1 htw-min-w-0"
        }, [
          createVNode(_sfc_main$y, {
            modelValue: unref(selectedOption),
            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(selectedOption) ? selectedOption.value = $event : null),
            options: presetsOptions.value,
            onDblclick: _cache[3] || (_cache[3] = ($event) => startEditing()),
            onKeydown: [
              _cache[4] || (_cache[4] = withKeys(($event) => stopEditing(), ["enter"])),
              _cache[5] || (_cache[5] = withKeys(($event) => stopEditing(), ["escape"]))
            ],
            onSelect: _cache[6] || (_cache[6] = (id) => applyPreset(id))
          }, {
            default: withCtx(({ label }) => [
              isEditing.value ? withDirectives((openBlock(), createElementBlock("input", {
                key: 0,
                ref_key: "input",
                ref: input,
                "onUpdate:modelValue": ($event) => unref(presetStates).get(unref(selectedOption)).label = $event,
                type: "text",
                class: "htw-text-inherit htw-bg-transparent htw-w-full htw-h-full htw-outline-none",
                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                }, ["stop", "prevent"]))
              }, null, 8, _hoisted_2$i)), [
                [vModelText, unref(presetStates).get(unref(selectedOption)).label]
              ]) : (openBlock(), createElementBlock("div", _hoisted_3$e, [
                createBaseVNode("span", _hoisted_4$9, toDisplayString(label), 1),
                canEdit.value ? withDirectives((openBlock(), createBlock(unref(Icon), {
                  key: 0,
                  icon: "carbon:edit",
                  class: "htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
                  onClick: _cache[1] || (_cache[1] = withModifiers(($event) => startEditing(), ["stop"]))
                }, null, 512)), [
                  [_directive_tooltip, "Rename this preset"]
                ]) : createCommentVNode("", true)
              ]))
            ]),
            option: withCtx(({ label, value }) => [
              createBaseVNode("div", _hoisted_5$6, [
                createBaseVNode("span", _hoisted_6$4, toDisplayString(label), 1),
                value !== DEFAULT_ID ? withDirectives((openBlock(), createBlock(unref(Icon), {
                  key: 0,
                  icon: "carbon:trash-can",
                  class: "htw-flex-none htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
                  onClick: withModifiers(($event) => deletePreset(value), ["stop"])
                }, null, 8, ["onClick"])), [
                  [_directive_tooltip, "Delete this preset"]
                ]) : createCommentVNode("", true)
              ])
            ]),
            _: 1
          }, 8, ["modelValue", "options"])
        ], 512),
        withDirectives(createVNode(unref(Icon), {
          icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
          class: normalizeClass(["htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", [
            canEdit.value ? "htw-opacity-50 hover:htw-opacity-100" : "htw-opacity-25 htw-pointer-events-none"
          ]]),
          onClick: _cache[7] || (_cache[7] = ($event) => savePreset())
        }, null, 8, ["icon", "class"]), [
          [_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]
        ]),
        withDirectives(createVNode(unref(Icon), {
          icon: "carbon:add-alt",
          class: "htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
          onClick: _cache[8] || (_cache[8] = ($event) => createPreset())
        }, null, 512), [
          [_directive_tooltip, "Create new preset"]
        ]),
        withDirectives(createVNode(unref(Icon), {
          icon: "carbon:reset",
          class: "htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
          onClick: _cache[9] || (_cache[9] = ($event) => resetState())
        }, null, 512), [
          [_directive_tooltip, "Reset to initial state"]
        ])
      ]);
    };
  }
});
const _sfc_main$w = /* @__PURE__ */ defineComponent({
  __name: "ControlsComponentPropItem",
  props: {
    variant: {},
    component: {},
    definition: {}
  },
  setup(__props) {
    const props = __props;
    const comp = computed(() => {
      var _a;
      switch ((_a = props.definition.types) == null ? void 0 : _a[0]) {
        case "string":
          return wm;
        case "number":
          return ym;
        case "boolean":
          return gm;
        case "object":
        default:
          return Mm;
      }
    });
    const model = computed({
      get: () => {
        var _a;
        return (_a = props.variant.state._hPropState[props.component.index]) == null ? void 0 : _a[props.definition.name];
      },
      set: (value) => {
        if (!props.variant.state._hPropState[props.component.index]) {
          props.variant.state._hPropState[props.component.index] = {};
        }
        props.variant.state._hPropState[props.component.index][props.definition.name] = value;
      }
    });
    function reset() {
      if (props.variant.state._hPropState[props.component.index]) {
        delete props.variant.state._hPropState[props.component.index][props.definition.name];
      }
    }
    const canReset = computed(() => {
      var _a, _b;
      return ((_b = (_a = props.variant.state) == null ? void 0 : _a._hPropState) == null ? void 0 : _b[props.component.index]) && props.definition.name in props.variant.state._hPropState[props.component.index];
    });
    return (_ctx, _cache) => {
      var _a;
      const _directive_tooltip = resolveDirective("tooltip");
      return comp.value ? (openBlock(), createBlock(resolveDynamicComponent(comp.value), {
        key: 0,
        modelValue: model.value,
        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
        placeholder: model.value === void 0 ? (_a = _ctx.definition) == null ? void 0 : _a.default : null,
        class: "histoire-controls-component-prop-item",
        title: `${_ctx.definition.name}${canReset.value ? " *" : ""}`
      }, {
        actions: withCtx(() => [
          withDirectives(createVNode(unref(Icon), {
            icon: "carbon:erase",
            class: normalizeClass(["htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100", [
              canReset.value ? "htw-opacity-50 hover:htw-opacity-100" : "htw-opacity-25 htw-pointer-events-none"
            ]]),
            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => reset(), ["stop"]))
          }, null, 8, ["class"]), [
            [_directive_tooltip, "Remove override"]
          ])
        ]),
        _: 1
      }, 8, ["modelValue", "placeholder", "title"])) : createCommentVNode("", true);
    };
  }
});
const _hoisted_1$r = { class: "histoire-controls-component-props" };
const _hoisted_2$h = { class: "htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1" };
const _hoisted_3$d = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-30" }, "<", -1);
const _hoisted_4$8 = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-30" }, ">", -1);
const _sfc_main$v = /* @__PURE__ */ defineComponent({
  __name: "ControlsComponentProps",
  props: {
    variant: {},
    definition: {}
  },
  setup(__props) {
    return (_ctx, _cache) => {
      const _directive_tooltip = resolveDirective("tooltip");
      return openBlock(), createElementBlock("div", _hoisted_1$r, [
        createBaseVNode("div", _hoisted_2$h, [
          withDirectives(createVNode(unref(Icon), {
            icon: "carbon:flash",
            class: "htw-w-4 htw-h-4 htw-text-primary-500 htw-flex-none"
          }, null, 512), [
            [_directive_tooltip, "Auto-detected props"]
          ]),
          createBaseVNode("div", null, [
            _hoisted_3$d,
            createTextVNode(toDisplayString(_ctx.definition.name), 1),
            _hoisted_4$8
          ])
        ]),
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.definition.props, (prop) => {
          return openBlock(), createBlock(_sfc_main$w, {
            key: prop.name,
            variant: _ctx.variant,
            component: _ctx.definition,
            definition: prop
          }, null, 8, ["variant", "component", "definition"]);
        }), 128))
      ]);
    };
  }
});
const _sfc_main$u = /* @__PURE__ */ defineComponent({
  __name: "ControlsComponentStateItem",
  props: {
    variant: {},
    item: {}
  },
  setup(__props) {
    const props = __props;
    const comp = computed(() => {
      switch (typeof props.variant.state[props.item]) {
        case "string":
          return wm;
        case "number":
          return ym;
        case "boolean":
          return gm;
        case "object":
        default:
          return Mm;
      }
    });
    const model = computed({
      get: () => {
        return props.variant.state[props.item];
      },
      set: (value) => {
        props.variant.state[props.item] = value;
      }
    });
    return (_ctx, _cache) => {
      return comp.value ? (openBlock(), createBlock(resolveDynamicComponent(comp.value), {
        key: 0,
        modelValue: model.value,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
        class: "histoire-controls-component-prop-item",
        title: props.item
      }, null, 8, ["modelValue", "title"])) : createCommentVNode("", true);
    };
  }
});
const _hoisted_1$q = { class: "histoire-controls-component-init-state" };
const _hoisted_2$g = { class: "htw-p-2 htw-flex htw-items-center htw-gap-1" };
const _hoisted_3$c = /* @__PURE__ */ createBaseVNode("div", null, " State ", -1);
const _sfc_main$t = /* @__PURE__ */ defineComponent({
  __name: "ControlsComponentState",
  props: {
    variant: {}
  },
  setup(__props) {
    const props = __props;
    const stateKeys = computed(() => Object.keys(props.variant.state || {}).filter((key) => !key.startsWith("_h")));
    return (_ctx, _cache) => {
      const _directive_tooltip = resolveDirective("tooltip");
      return openBlock(), createElementBlock("div", _hoisted_1$q, [
        createBaseVNode("div", _hoisted_2$g, [
          withDirectives(createVNode(unref(Icon), {
            icon: "carbon:data-vis-1",
            class: "htw-w-4 htw-h-4 htw-text-primary-500 htw-flex-none"
          }, null, 512), [
            [_directive_tooltip, "Auto-detected state"]
          ]),
          _hoisted_3$c
        ]),
        (openBlock(true), createElementBlock(Fragment, null, renderList(stateKeys.value, (key) => {
          return openBlock(), createBlock(_sfc_main$u, {
            key,
            item: key,
            variant: _ctx.variant
          }, null, 8, ["item", "variant"]);
        }), 128))
      ]);
    };
  }
});
const _hoisted_1$p = {
  "data-test-id": "story-controls",
  class: "histoire-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
};
const _hoisted_2$f = { class: "htw-h-9 htw-flex-none htw-px-2 htw-flex htw-items-center" };
const _hoisted_3$b = { key: 1 };
const _hoisted_4$7 = /* @__PURE__ */ createBaseVNode("span", null, "No controls available for this story", -1);
const _hoisted_5$5 = { key: 3 };
const _sfc_main$s = /* @__PURE__ */ defineComponent({
  __name: "StoryControls",
  props: {
    variant: {
      type: Object,
      required: true
    },
    story: {
      type: Object,
      required: true
    }
  },
  setup(__props) {
    const props = __props;
    const ready = ref(false);
    watch(() => props.variant, () => {
      ready.value = false;
    });
    const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls);
    const hasInitState = computed(() => Object.entries(props.variant.state || {}).filter(([key]) => !key.startsWith("_h")).length > 0);
    return (_ctx, _cache) => {
      var _a, _b, _c, _d;
      return openBlock(), createElementBlock("div", _hoisted_1$p, [
        createBaseVNode("div", _hoisted_2$f, [
          ready.value || !hasCustomControls.value ? (openBlock(), createBlock(_sfc_main$x, {
            key: 0,
            story: __props.story,
            variant: __props.variant
          }, null, 8, ["story", "variant"])) : createCommentVNode("", true)
        ]),
        hasCustomControls.value ? (openBlock(), createBlock(_sfc_main$z, {
          key: `${__props.story.id}-${__props.variant.id}`,
          "slot-name": "controls",
          variant: __props.variant,
          story: __props.story,
          class: "__histoire-render-custom-controls htw-flex-none",
          onReady: _cache[0] || (_cache[0] = ($event) => ready.value = true)
        }, null, 8, ["variant", "story"])) : hasInitState.value ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
          createVNode(_sfc_main$t, {
            class: "htw-flex-none htw-my-2",
            variant: __props.variant
          }, null, 8, ["variant"])
        ])) : !((_b = (_a = __props.variant.state) == null ? void 0 : _a._hPropDefs) == null ? void 0 : _b.length) ? (openBlock(), createBlock(BaseEmpty, { key: 2 }, {
          default: withCtx(() => [
            createVNode(unref(Icon), {
              icon: "carbon:audio-console",
              class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
            }),
            _hoisted_4$7
          ]),
          _: 1
        })) : createCommentVNode("", true),
        ((_d = (_c = __props.variant.state) == null ? void 0 : _c._hPropDefs) == null ? void 0 : _d.length) ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.variant.state._hPropDefs, (def, index) => {
            return openBlock(), createBlock(_sfc_main$v, {
              key: index,
              variant: __props.variant,
              definition: def,
              class: "htw-flex-none htw-my-2"
            }, null, 8, ["variant", "definition"]);
          }), 128))
        ])) : createCommentVNode("", true)
      ]);
    };
  }
});
const markdownFiles = reactive({});
const _hoisted_1$o = ["innerHTML"];
function useStoryDoc(story) {
  const renderedDoc = ref("");
  watchEffect(async () => {
    var _a;
    const mdKey = story.value.file.filePath.replace(/\.(\w*?)$/, ".md");
    if (markdownFiles[mdKey]) {
      const md = await markdownFiles[mdKey]();
      renderedDoc.value = md.html;
      return;
    }
    let comp = (_a = story.value.file) == null ? void 0 : _a.component;
    if (comp) {
      if (comp.__asyncResolved) {
        comp = comp.__asyncResolved;
      } else if (comp.__asyncLoader) {
        comp = await comp.__asyncLoader();
      } else if (typeof comp === "function") {
        try {
          comp = await comp();
        } catch (e) {
        }
      }
      if (comp == null ? void 0 : comp.default) {
        comp = comp.default;
      }
      renderedDoc.value = comp.doc;
    }
  });
  return {
    renderedDoc
  };
}
const _sfc_main$r = /* @__PURE__ */ defineComponent({
  __name: "StoryDocs",
  props: {
    story: {
      type: Object,
      required: true
    },
    standalone: {
      type: Boolean,
      default: false
    }
  },
  emits: ["scrollTop"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const { story } = toRefs(props);
    const { renderedDoc } = useStoryDoc(story);
    const router = useRouter();
    const fakeHost = `http://a.com`;
    function onClick(e) {
      const link = e.target.closest("a");
      if (link && link.getAttribute("data-route") && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && link.target !== `_blank`) {
        e.preventDefault();
        const url = new URL(link.href, fakeHost);
        const targetHref = url.pathname + url.search + url.hash;
        router.push(targetHref);
      }
    }
    function getHash() {
      const hash = location.hash;
      if (histoireConfig.routerMode === "hash") {
        const index = hash.indexOf("#", 1);
        if (index !== -1) {
          return hash.slice(index);
        } else {
          return void 0;
        }
      }
      return hash;
    }
    async function scrollToAnchor() {
      await nextTick();
      const hash = getHash();
      if (hash) {
        const anchor = document.querySelector(decodeURIComponent(hash));
        if (anchor) {
          anchor.scrollIntoView();
          return;
        }
      }
      emit("scrollTop");
    }
    watch(renderedDoc, () => {
      scrollToAnchor();
    }, {
      immediate: true
    });
    const renderedEl = ref();
    const route = useRoute();
    async function patchAnchorLinks() {
      await nextTick();
      if (histoireConfig.routerMode === "hash" && renderedEl.value) {
        const links = renderedEl.value.querySelectorAll("a.header-anchor");
        for (const link of links) {
          const href = link.getAttribute("href");
          if (href) {
            link.setAttribute("href", `#${route.path + href}`);
          }
        }
      }
    }
    watch(renderedDoc, () => {
      patchAnchorLinks();
    }, {
      immediate: true
    });
    computed(() => {
      var _a, _b;
      return ((_a = story.value.file) == null ? void 0 : _a.docsFilePath) ?? (props.standalone && ((_b = story.value.file) == null ? void 0 : _b.filePath));
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "histoire-story-docs",
        onClickCapture: onClick
      }, [
        createCommentVNode("", true),
        !unref(renderedDoc) ? (openBlock(), createBlock(BaseEmpty, { key: 1 }, {
          default: withCtx(() => [
            createVNode(unref(Icon), {
              icon: "carbon:document-unknown",
              class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
            }),
            createTextVNode(" No documentation available ")
          ]),
          _: 1
        })) : (openBlock(), createElementBlock("div", {
          key: 2,
          ref_key: "renderedEl",
          ref: renderedEl,
          class: "htw-prose dark:htw-prose-invert htw-p-4 htw-max-w-none",
          "data-test-id": "story-docs",
          innerHTML: unref(renderedDoc)
        }, null, 8, _hoisted_1$o))
      ], 32);
    };
  }
});
const useEventsStore = defineStore("events", () => {
  const storyStore = useStoryStore();
  const events = reactive([]);
  const unseen = ref(0);
  function addEvent(event) {
    events.push(event);
    unseen.value++;
  }
  function reset() {
    events.length = 0;
    unseen.value = 0;
  }
  watch(() => {
    var _a;
    return (_a = storyStore.currentVariant) == null ? void 0 : _a.id;
  }, () => {
    reset();
  });
  return {
    addEvent,
    reset,
    events,
    unseen
  };
});
const _hoisted_1$n = {
  key: 0,
  class: "htw-text-xs htw-opacity-50 htw-truncate"
};
const _hoisted_2$e = { class: "htw-overflow-auto htw-max-w-[400px] htw-max-h-[400px]" };
const _hoisted_3$a = { class: "htw-p-4" };
const _sfc_main$q = /* @__PURE__ */ defineComponent({
  __name: "StoryEvent",
  props: {
    event: {}
  },
  setup(__props) {
    const props = __props;
    const formattedArgument = computed(() => {
      switch (typeof props.event.argument) {
        case "string":
          return `"${props.event.argument}"`;
        case "object":
          return `{ ${Object.keys(props.event.argument).map((key) => `${key}: ${props.event.argument[key]}`).join(", ")} }`;
        default:
          return props.event.argument;
      }
    });
    return (_ctx, _cache) => {
      const _component_VDropdown = resolveComponent("VDropdown");
      return openBlock(), createBlock(_component_VDropdown, {
        class: "histoire-story-event htw-group",
        placement: "right",
        "data-test-id": "event-item"
      }, {
        default: withCtx(({ shown }) => [
          createBaseVNode("div", {
            class: normalizeClass(["group-hover:htw-bg-primary-100 dark:group-hover:htw-bg-primary-700 htw-cursor-pointer htw-py-2 htw-px-4 htw-flex htw-items-baseline htw-gap-1 htw-leading-normal", [
              shown ? "htw-bg-primary-50 dark:htw-bg-primary-600" : "group-odd:htw-bg-gray-100/50 dark:group-odd:htw-bg-gray-750/40"
            ]])
          }, [
            createBaseVNode("span", {
              class: normalizeClass({
                "htw-text-primary-500": shown
              })
            }, toDisplayString(_ctx.event.name), 3),
            _ctx.event.argument ? (openBlock(), createElementBlock("span", _hoisted_1$n, toDisplayString(formattedArgument.value), 1)) : createCommentVNode("", true)
          ], 2)
        ]),
        popper: withCtx(() => [
          createBaseVNode("div", _hoisted_2$e, [
            createBaseVNode("pre", _hoisted_3$a, toDisplayString(_ctx.event.argument), 1)
          ])
        ]),
        _: 1
      });
    };
  }
});
const _hoisted_1$m = { key: 1 };
const _sfc_main$p = /* @__PURE__ */ defineComponent({
  __name: "StoryEvents",
  setup(__props) {
    const eventsStore = useEventsStore();
    const hasEvents = computed(() => eventsStore.events.length);
    onMounted(resetUnseen);
    watch(() => eventsStore.unseen, resetUnseen);
    async function resetUnseen() {
      if (eventsStore.unseen > 0) {
        eventsStore.unseen = 0;
      }
      await nextTick();
      eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight });
    }
    const eventsElement = ref();
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "eventsElement",
        ref: eventsElement,
        class: "histoire-story-events"
      }, [
        !hasEvents.value ? (openBlock(), createBlock(BaseEmpty, { key: 0 }, {
          default: withCtx(() => [
            createVNode(unref(Icon), {
              icon: "carbon:event-schedule",
              class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
            }),
            createTextVNode(" No event fired ")
          ]),
          _: 1
        })) : (openBlock(), createElementBlock("div", _hoisted_1$m, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(eventsStore).events, (event, key) => {
            return openBlock(), createBlock(_sfc_main$q, {
              key,
              event
            }, null, 8, ["event"]);
          }), 128))
        ]))
      ], 512);
    };
  }
});
const _withScopeId$2 = (n) => (pushScopeId("data-v-f7d2e46a"), n = n(), popScopeId(), n);
const _hoisted_1$l = { class: "histoire-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col" };
const _hoisted_2$d = {
  key: 0,
  class: "htw-h-10 htw-flex-none htw-border-b htw-border-solid htw-border-gray-500/5 htw-px-4 htw-flex htw-items-center htw-gap-2"
};
const _hoisted_3$9 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createBaseVNode("div", { class: "htw-text-gray-900 dark:htw-text-gray-100" }, " Source ", -1));
const _hoisted_4$6 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createBaseVNode("div", { class: "htw-flex-1" }, null, -1));
const _hoisted_5$4 = { class: "htw-flex htw-flex-none htw-gap-px htw-h-full htw-py-2" };
const _hoisted_6$3 = {
  key: 1,
  class: "htw-text-red-500 htw-h-full htw-p-2 htw-overflow-auto htw-font-mono htw-text-sm"
};
const _hoisted_7$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createBaseVNode("span", null, "Not available", -1));
const _hoisted_8$2 = ["value"];
const _hoisted_9$1 = ["innerHTML"];
const _sfc_main$o = /* @__PURE__ */ defineComponent({
  __name: "StorySourceCode",
  props: {
    story: {},
    variant: {}
  },
  setup(__props) {
    const props = __props;
    const generateSourceCodeFn = ref(null);
    watchEffect(async () => {
      var _a;
      const clientPlugin = clientSupportPlugins[(_a = props.story.file) == null ? void 0 : _a.supportPluginId];
      if (clientPlugin) {
        const pluginModule = await clientPlugin();
        generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode);
      }
    });
    const highlighter = shallowRef();
    const dynamicSourceCode = ref("");
    const error = ref(null);
    watch(() => [props.variant, generateSourceCodeFn.value], async () => {
      var _a, _b, _c, _d;
      if (!generateSourceCodeFn.value)
        return;
      error.value = null;
      dynamicSourceCode.value = "";
      try {
        if (props.variant.source) {
          dynamicSourceCode.value = props.variant.source;
        } else if ((_b = (_a = props.variant).slots) == null ? void 0 : _b.call(_a).source) {
          const source = (_d = (_c = props.variant).slots) == null ? void 0 : _d.call(_c).source()[0].children;
          if (source) {
            dynamicSourceCode.value = await unindent(source);
          }
        } else {
          dynamicSourceCode.value = await generateSourceCodeFn.value(props.variant);
        }
      } catch (e) {
        console.error(e);
        error.value = e.message;
      }
      if (!dynamicSourceCode.value) {
        displayedSource.value = "static";
      }
    }, {
      deep: true,
      immediate: true
    });
    const staticSourceCode = ref("");
    watch(() => {
      var _a, _b;
      return [props.story, (_b = (_a = props.story) == null ? void 0 : _a.file) == null ? void 0 : _b.source];
    }, async () => {
      var _a;
      staticSourceCode.value = "";
      const sourceLoader = (_a = props.story.file) == null ? void 0 : _a.source;
      if (sourceLoader) {
        staticSourceCode.value = (await sourceLoader()).default;
      }
    }, {
      immediate: true
    });
    const displayedSource = ref("dynamic");
    const displayedSourceCode = computed(() => {
      if (displayedSource.value === "dynamic") {
        return dynamicSourceCode.value;
      }
      return staticSourceCode.value;
    });
    onMounted(async () => {
      highlighter.value = await getHighlighter({
        langs: [
          "html",
          "jsx"
        ],
        themes: [
          "github-light",
          "github-dark"
        ]
      });
    });
    const sourceHtml = computed(() => {
      var _a;
      return displayedSourceCode.value ? (_a = highlighter.value) == null ? void 0 : _a.codeToHtml(displayedSourceCode.value, {
        lang: "html",
        theme: isDark.value ? "github-dark" : "github-light"
      }) : "";
    });
    let lastScroll = 0;
    watch(() => props.variant, () => {
      lastScroll = 0;
    });
    const scroller = ref();
    function onScroll(event) {
      if (sourceHtml.value) {
        lastScroll = event.target.scrollTop;
      }
    }
    watch(sourceHtml, async () => {
      await nextTick();
      if (scroller.value) {
        scroller.value.scrollTop = lastScroll;
      }
    });
    return (_ctx, _cache) => {
      const _directive_tooltip = resolveDirective("tooltip");
      return openBlock(), createElementBlock("div", _hoisted_1$l, [
        !error.value ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
          _hoisted_3$9,
          _hoisted_4$6,
          createBaseVNode("div", _hoisted_5$4, [
            withDirectives((openBlock(), createElementBlock("button", {
              class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-l htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden", [
                displayedSource.value !== "dynamic" ? "htw-max-w-6 htw-opacity-70" : "htw-max-w-[82px] htw-text-primary-600 dark:htw-text-primary-400",
                dynamicSourceCode.value ? "htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50" : "htw-opacity-50"
              ]]),
              onClick: _cache[0] || (_cache[0] = ($event) => dynamicSourceCode.value && (displayedSource.value = "dynamic"))
            }, [
              createVNode(unref(Icon), {
                icon: "carbon:flash",
                class: "htw-w-4 htw-h-4 htw-flex-none"
              }),
              createBaseVNode("span", {
                class: normalizeClass(["transition-opacity duration-300", {
                  "opacity-0": displayedSource.value !== "dynamic"
                }])
              }, " Dynamic ", 2)
            ], 2)), [
              [_directive_tooltip, !dynamicSourceCode.value ? "Dynamic source code is not available" : displayedSource.value !== "dynamic" ? "Switch to dynamic source" : null]
            ]),
            withDirectives((openBlock(), createElementBlock("button", {
              class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-1 htw-bg-gray-500/10 htw-rounded-r htw-transition-all htw-ease-[cubic-bezier(0,1,.6,1)] htw-duration-300 htw-overflow-hidden", [
                displayedSource.value !== "static" ? "htw-max-w-6 htw-opacity-70" : "htw-max-w-[63px] htw-text-primary-600 dark:htw-text-primary-400",
                staticSourceCode.value ? "htw-cursor-pointer hover:htw-bg-gray-500/30 active:htw-bg-gray-600/50" : "htw-opacity-50"
              ]]),
              onClick: _cache[1] || (_cache[1] = ($event) => staticSourceCode.value && (displayedSource.value = "static"))
            }, [
              createVNode(unref(Icon), {
                icon: "carbon:document",
                class: "htw-w-4 htw-h-4 htw-flex-none"
              }),
              createBaseVNode("span", {
                class: normalizeClass(["transition-opacity duration-300", {
                  "opacity-0": displayedSource.value !== "static"
                }])
              }, " Static ", 2)
            ], 2)), [
              [_directive_tooltip, !staticSourceCode.value ? "Static source code is not available" : displayedSource.value !== "static" ? "Switch to static source" : null]
            ])
          ]),
          createVNode(unref(Am), {
            content: displayedSourceCode.value,
            class: "htw-flex-none"
          }, null, 8, ["content"])
        ])) : createCommentVNode("", true),
        error.value ? (openBlock(), createElementBlock("div", _hoisted_6$3, " Error: " + toDisplayString(error.value), 1)) : !displayedSourceCode.value ? (openBlock(), createBlock(BaseEmpty, { key: 2 }, {
          default: withCtx(() => [
            createVNode(unref(Icon), {
              icon: "carbon:code-hide",
              class: "htw-w-8 htw-h-8 htw-opacity-50 htw-mb-6"
            }),
            _hoisted_7$3
          ]),
          _: 1
        })) : !sourceHtml.value ? (openBlock(), createElementBlock("textarea", {
          key: 3,
          ref_key: "scroller",
          ref: scroller,
          class: "__histoire-code-placeholder htw-w-full htw-h-full htw-p-4 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0",
          value: displayedSourceCode.value,
          readonly: "",
          "data-test-id": "story-source-code",
          onScroll
        }, null, 40, _hoisted_8$2)) : (openBlock(), createElementBlock("div", {
          key: 4,
          ref_key: "scroller",
          ref: scroller,
          class: "htw-w-full htw-h-full htw-overflow-auto",
          "data-test-id": "story-source-code",
          onScroll
        }, [
          createBaseVNode("div", {
            class: "__histoire-code htw-p-4 htw-w-fit",
            innerHTML: sourceHtml.value
          }, null, 8, _hoisted_9$1)
        ], 544))
      ]);
    };
  }
});
const StorySourceCode = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-f7d2e46a"]]);
const _sfc_main$n = defineComponent({
  inheritAttrs: false,
  props: {
    exact: {
      type: Boolean,
      default: false
    },
    matched: {
      type: Boolean,
      default: null
    }
  }
});
const _hoisted_1$k = ["href", "onClick"];
const _hoisted_2$c = {
  key: 0,
  class: "htw-absolute htw-bottom-0 htw-left-0 htw-w-full htw-h-[2px] htw-bg-primary-500 dark:htw-bg-primary-400"
};
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_router_link = resolveComponent("router-link");
  return openBlock(), createBlock(_component_router_link, mergeProps({ class: "histoire-base-tab" }, _ctx.$attrs, { custom: "" }), {
    default: withCtx(({ isActive, isExactActive, href, navigate }) => [
      createBaseVNode("a", mergeProps(_ctx.$attrs, {
        href,
        class: ["htw-px-4 htw-h-full htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100", {
          "htw-text-primary-500 dark:htw-text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive
        }],
        onClick: navigate
      }), [
        renderSlot(_ctx.$slots, "default"),
        createVNode(Transition, { name: "__histoire-scale-x" }, {
          default: withCtx(() => [
            (_ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive) ? (openBlock(), createElementBlock("div", _hoisted_2$c)) : createCommentVNode("", true)
          ]),
          _: 2
        }, 1024)
      ], 16, _hoisted_1$k)
    ]),
    _: 3
  }, 16);
}
const BaseTab = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$4]]);
const _hoisted_1$j = {
  role: "button",
  class: "htw-cursor-pointer hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-w-8 htw-h-full htw-flex htw-items-center htw-justify-center htw-absolute htw-top-0 htw-right-0"
};
const _hoisted_2$b = { class: "htw-flex htw-flex-col htw-items-stretch" };
const overflowButtonWidth = 32;
const _sfc_main$m = /* @__PURE__ */ defineComponent({
  __name: "BaseOverflowMenu",
  setup(__props) {
    const el = ref();
    const availableWidth = ref(0);
    useResizeObserver(el, (entries) => {
      const containerWidth = entries[0].contentRect.width;
      availableWidth.value = containerWidth - overflowButtonWidth;
    });
    const children = ref(/* @__PURE__ */ new Map());
    const visibleChildrenCount = computed(() => {
      let width = 0;
      const c = [...children.value.values()].sort((a, b) => a.index - b.index);
      for (let i = 0; i < c.length; i++) {
        width += c[i].width;
        if (width > availableWidth.value) {
          return i;
        }
      }
      return c.length;
    });
    const ChildWrapper = {
      name: "ChildWrapper",
      props: ["index"],
      setup(props, { slots }) {
        const el2 = ref();
        const state = reactive({ width: 0, index: props.index });
        useResizeObserver(el2, (entries) => {
          const width = entries[0].contentRect.width;
          if (!children.value.has(el2.value)) {
            children.value.set(el2.value, state);
          }
          state.width = width;
        });
        onBeforeUnmount(() => {
          children.value.delete(el2.value);
        });
        const visible = computed(() => visibleChildrenCount.value > state.index);
        return () => h("div", { ref: el2, style: { visibility: visible.value ? "visible" : "hidden" } }, slots.default());
      }
    };
    function ChildrenRender(props, { slots }) {
      const [fragment] = slots.default();
      return fragment.children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode]));
    }
    function ChildrenSlice(props, { slots }) {
      const [fragment] = slots.default();
      return fragment.children.slice(props.start, props.end);
    }
    return (_ctx, _cache) => {
      const _component_VDropdown = resolveComponent("VDropdown");
      return openBlock(), createElementBlock("div", {
        ref_key: "el",
        ref: el,
        class: "histoire-base-overflow-menu htw-flex htw-overflow-hidden htw-relative"
      }, [
        createVNode(ChildrenRender, null, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
        }),
        visibleChildrenCount.value < children.value.size ? (openBlock(), createBlock(_component_VDropdown, { key: 0 }, {
          popper: withCtx(() => [
            createBaseVNode("div", _hoisted_2$b, [
              createVNode(ChildrenSlice, { start: visibleChildrenCount.value }, {
                default: withCtx(() => [
                  renderSlot(_ctx.$slots, "overflow")
                ]),
                _: 3
              }, 8, ["start"])
            ])
          ]),
          default: withCtx(() => [
            createBaseVNode("div", _hoisted_1$j, [
              createVNode(unref(Icon), {
                icon: "carbon:caret-down",
                class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
              })
            ])
          ]),
          _: 3
        })) : createCommentVNode("", true)
      ], 512);
    };
  }
});
const _sfc_main$l = defineComponent({
  inheritAttrs: false,
  props: {
    exact: {
      type: Boolean,
      default: false
    },
    matched: {
      type: Boolean,
      default: null
    }
  }
});
const _hoisted_1$i = ["href", "onClick"];
const _hoisted_2$a = {
  key: 0,
  class: "htw-absolute htw-top-0 htw-left-0 htw-h-full htw-w-[2px] htw-bg-primary-500 dark:htw-bg-primary-400"
};
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_router_link = resolveComponent("router-link");
  return openBlock(), createBlock(_component_router_link, mergeProps({ class: "histoire-base-overflow-tab" }, _ctx.$attrs, { custom: "" }), {
    default: withCtx(({ isActive, isExactActive, href, navigate }) => [
      createBaseVNode("a", mergeProps(_ctx.$attrs, {
        href,
        class: ["htw-px-4 htw-h-10 htw-min-w-[150px] htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100", {
          "htw-text-primary-500 dark:htw-text-primary-400": _ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive
        }],
        onClick: navigate
      }), [
        renderSlot(_ctx.$slots, "default"),
        createVNode(Transition, { name: "__histoire-scale-y" }, {
          default: withCtx(() => [
            (_ctx.matched != null ? _ctx.matched : _ctx.exact && isExactActive || !_ctx.exact && isActive) ? (openBlock(), createElementBlock("div", _hoisted_2$a)) : createCommentVNode("", true)
          ]),
          _: 2
        }, 1024)
      ], 16, _hoisted_1$i)
    ]),
    _: 3
  }, 16);
}
const BaseOverflowTab = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$3]]);
const _sfc_main$k = {};
const _hoisted_1$h = { class: "histoire-base-tag htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black" };
function _sfc_render$2(_ctx, _cache) {
  return openBlock(), createElementBlock("span", _hoisted_1$h, [
    renderSlot(_ctx.$slots, "default")
  ]);
}
const BaseTag = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$2]]);
const _sfc_main$j = /* @__PURE__ */ defineComponent({
  __name: "PaneTabs",
  props: {
    story: {},
    variant: {}
  },
  setup(__props) {
    const props = __props;
    const { story } = toRefs(props);
    const { renderedDoc } = useStoryDoc(story);
    const eventsStore = useEventsStore();
    const hasEvents = computed(() => eventsStore.events.length);
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$m, { class: "histoire-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750" }, {
        overflow: withCtx(() => [
          createVNode(BaseOverflowTab, {
            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "" } },
            matched: !_ctx.$route.query.tab
          }, {
            default: withCtx(() => [
              createTextVNode(" Controls ")
            ]),
            _: 1
          }, 8, ["to", "matched"]),
          createVNode(BaseOverflowTab, {
            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "docs" } },
            matched: _ctx.$route.query.tab === "docs",
            class: normalizeClass({
              "opacity-50": !unref(renderedDoc)
            })
          }, {
            default: withCtx(() => [
              createTextVNode(" Docs ")
            ]),
            _: 1
          }, 8, ["to", "matched", "class"]),
          createVNode(BaseOverflowTab, {
            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "events" } },
            matched: _ctx.$route.query.tab === "events",
            class: normalizeClass({
              "htw-opacity-50": !hasEvents.value
            })
          }, {
            default: withCtx(() => [
              createTextVNode(" Events "),
              unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag, { key: 0 }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(unref(eventsStore).unseen <= 99 ? unref(eventsStore).unseen : "99+"), 1)
                ]),
                _: 1
              })) : createCommentVNode("", true)
            ]),
            _: 1
          }, 8, ["to", "matched", "class"])
        ]),
        default: withCtx(() => [
          createVNode(BaseTab, {
            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "" } },
            matched: !_ctx.$route.query.tab
          }, {
            default: withCtx(() => [
              createTextVNode(" Controls ")
            ]),
            _: 1
          }, 8, ["to", "matched"]),
          createVNode(BaseTab, {
            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "docs" } },
            matched: _ctx.$route.query.tab === "docs",
            class: normalizeClass({
              "htw-opacity-50": !unref(renderedDoc)
            })
          }, {
            default: withCtx(() => [
              createTextVNode(" Docs ")
            ]),
            _: 1
          }, 8, ["to", "matched", "class"]),
          createVNode(BaseTab, {
            to: { ..._ctx.$route, query: { ..._ctx.$route.query, tab: "events" } },
            matched: _ctx.$route.query.tab === "events",
            class: normalizeClass({
              "htw-opacity-50": !hasEvents.value
            })
          }, {
            default: withCtx(() => [
              createTextVNode(" Events "),
              unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag, { key: 0 }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(unref(eventsStore).unseen <= 99 ? unref(eventsStore).unseen : "99+"), 1)
                ]),
                _: 1
              })) : createCommentVNode("", true)
            ]),
            _: 1
          }, 8, ["to", "matched", "class"])
        ]),
        _: 1
      });
    };
  }
});
const _hoisted_1$g = /* @__PURE__ */ createBaseVNode("span", null, "Select a variant", -1);
const _hoisted_2$9 = /* @__PURE__ */ createBaseVNode("span", null, "Loading...", -1);
const _hoisted_3$8 = { class: "htw-flex htw-flex-col htw-h-full" };
const _sfc_main$i = /* @__PURE__ */ defineComponent({
  __name: "StorySidePanel",
  setup(__props) {
    const storyStore = useStoryStore();
    const route = useRoute();
    const panelContentComponent = computed(() => {
      switch (route.query.tab) {
        case "docs":
          return _sfc_main$r;
        case "events":
          return _sfc_main$p;
        default:
          return _sfc_main$s;
      }
    });
    return (_ctx, _cache) => {
      return !unref(storyStore).currentVariant ? (openBlock(), createBlock(BaseEmpty, {
        key: 0,
        class: "histoire-story-side-panel histoire-selection"
      }, {
        default: withCtx(() => [
          _hoisted_1$g
        ]),
        _: 1
      })) : !unref(storyStore).currentVariant.configReady || !unref(storyStore).currentVariant.previewReady ? (openBlock(), createBlock(BaseEmpty, {
        key: 1,
        class: "histoire-story-side-panel histoire-loading"
      }, {
        default: withCtx(() => [
          _hoisted_2$9
        ]),
        _: 1
      })) : (openBlock(), createBlock(BaseSplitPane, {
        key: 2,
        "save-id": "story-sidepane",
        orientation: "portrait",
        class: "histoire-story-side-panel histoire-loaded htw-h-full",
        "data-test-id": "story-side-panel"
      }, {
        first: withCtx(() => [
          createBaseVNode("div", _hoisted_3$8, [
            createVNode(_sfc_main$j, {
              story: unref(storyStore).currentStory,
              variant: unref(storyStore).currentVariant
            }, null, 8, ["story", "variant"]),
            (openBlock(), createBlock(resolveDynamicComponent(panelContentComponent.value), {
              story: unref(storyStore).currentStory,
              variant: unref(storyStore).currentVariant,
              class: "htw-h-full htw-overflow-auto"
            }, null, 8, ["story", "variant"]))
          ])
        ]),
        last: withCtx(() => [
          createVNode(StorySourceCode, {
            story: unref(storyStore).currentStory,
            variant: unref(storyStore).currentVariant,
            class: "htw-h-full"
          }, null, 8, ["story", "variant"])
        ]),
        _: 1
      }));
    };
  }
});
function useCurrentVariantRoute(variant) {
  const route = useRoute();
  const isActive = computed(() => route.query.variantId === variant.value.id);
  const targetRoute = computed(() => ({
    ...route,
    query: {
      ...route.query,
      variantId: variant.value.id
    }
  }));
  return {
    isActive,
    targetRoute
  };
}
const _hoisted_1$f = { class: "htw-truncate" };
const _sfc_main$h = /* @__PURE__ */ defineComponent({
  __name: "StoryVariantListItem",
  props: {
    variant: {
      type: Object,
      required: true
    }
  },
  setup(__props) {
    useCssVars((_ctx) => ({
      "2762f67a": unref(variant).iconColor
    }));
    const props = __props;
    const { variant } = toRefs(props);
    const { isActive, targetRoute } = useCurrentVariantRoute(variant);
    const el = ref();
    useScrollOnActive(isActive, el);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "el",
        ref: el,
        class: "histoire-story-variant-list-item",
        "data-test-id": "story-variant-list-item"
      }, [
        createVNode(BaseListItemLink, {
          to: unref(targetRoute),
          "is-active": unref(isActive),
          class: "htw-px-2 htw-py-2 md:htw-py-1.5 htw-m-1 htw-rounded-sm htw-flex htw-items-center htw-gap-2"
        }, {
          default: withCtx(({ active }) => [
            createVNode(unref(Icon), {
              icon: unref(variant).icon ?? "carbon:cube",
              class: normalizeClass(["htw-w-5 htw-h-5 sm:htw-w-4 sm:htw-h-4 htw-flex-none", {
                "htw-text-gray-500": !active && !unref(variant).iconColor,
                "bind-icon-color": !active && unref(variant).iconColor
              }])
            }, null, 8, ["icon", "class"]),
            createBaseVNode("span", _hoisted_1$f, toDisplayString(unref(variant).title), 1)
          ]),
          _: 1
        }, 8, ["to", "is-active"])
      ], 512);
    };
  }
});
const StoryVariantListItem = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-f8e09a03"]]);
const usePreviewSettingsStore = defineStore("preview-settings", () => {
  const currentSettings = useStorage("_histoire-sandbox-settings-v3", {
    responsiveWidth: 720,
    responsiveHeight: null,
    rotate: false,
    backgroundColor: "transparent",
    checkerboard: false,
    textDirection: "ltr"
  });
  return {
    currentSettings
  };
});
const _hoisted_1$e = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
const _hoisted_2$8 = {
  width: "16",
  height: "16",
  viewBox: "0 0 24 24",
  class: "htw-relative htw-z-10"
};
const _hoisted_3$7 = ["stroke-dasharray", "stroke-dashoffset"];
const _sfc_main$g = /* @__PURE__ */ defineComponent({
  __name: "BaseCheckbox",
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  emits: {
    "update:modelValue": (_newValue) => true
  },
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    function toggle() {
      emit("update:modelValue", !props.modelValue);
      animationEnabled.value = true;
    }
    const path = ref();
    const dasharray = ref(0);
    const progress = computed(() => props.modelValue ? 1 : 0);
    const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
    const animationEnabled = ref(false);
    watch(path, () => {
      var _a, _b;
      dasharray.value = ((_b = (_a = path.value).getTotalLength) == null ? void 0 : _b.call(_a)) ?? 21.21;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        role: "checkbox",
        tabindex: "0",
        class: "histoire-base-checkbox htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700",
        onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
        onKeydown: [
          _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["enter"])),
          _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"]))
        ]
      }, [
        createBaseVNode("div", _hoisted_1$e, [
          createBaseVNode("div", {
            class: normalizeClass(["htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out", [
              __props.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
            ]])
          }, null, 2),
          (openBlock(), createElementBlock("svg", _hoisted_2$8, [
            createBaseVNode("path", {
              ref_key: "path",
              ref: path,
              d: "m 4 12 l 5 5 l 10 -10",
              fill: "none",
              class: normalizeClass(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [
                animationEnabled.value ? "htw-transition-all" : "htw-transition-none",
                {
                  "htw-delay-150": __props.modelValue
                }
              ]]),
              "stroke-dasharray": dasharray.value,
              "stroke-dashoffset": dashoffset.value
            }, null, 10, _hoisted_3$7)
          ]))
        ]),
        renderSlot(_ctx.$slots, "default")
      ], 32);
    };
  }
});
const _hoisted_1$d = { class: "htw-cursor-pointer hover:htw-text-primary-500 htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group" };
const _hoisted_2$7 = { class: "bind-preview-bg htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/50 dark:htw-border-white/50 htw-flex htw-items-center htw-justify-center htw-text-xs" };
const _hoisted_3$6 = { key: 0 };
const _hoisted_4$5 = {
  class: "htw-flex htw-flex-col htw-items-stretch",
  "data-test-id": "background-popper"
};
const _hoisted_5$3 = ["onClick"];
const _hoisted_6$2 = { class: "htw-mr-auto" };
const _hoisted_7$2 = { class: "htw-ml-auto htw-opacity-70" };
const _hoisted_8$1 = { key: 0 };
const _sfc_main$f = /* @__PURE__ */ defineComponent({
  __name: "ToolbarBackground",
  setup(__props) {
    useCssVars((_ctx) => ({
      "627bec82": unref(settings).backgroundColor,
      "35068428": contrastColor.value
    }));
    const settings = usePreviewSettingsStore().currentSettings;
    const contrastColor = computed(() => getContrastColor(settings));
    return (_ctx, _cache) => {
      const _component_VDropdown = resolveComponent("VDropdown");
      const _directive_tooltip = resolveDirective("tooltip");
      return unref(histoireConfig).backgroundPresets.length ? (openBlock(), createBlock(_component_VDropdown, {
        key: 0,
        placement: "bottom-end",
        skidding: 6,
        class: "histoire-toolbar-background htw-h-full htw-flex-none",
        "data-test-id": "toolbar-background"
      }, {
        popper: withCtx(({ hide }) => [
          createBaseVNode("div", _hoisted_4$5, [
            createVNode(_sfc_main$g, {
              modelValue: unref(settings).checkerboard,
              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).checkerboard = $event)
            }, {
              default: withCtx(() => [
                createTextVNode(" Checkerboard ")
              ]),
              _: 1
            }, 8, ["modelValue"]),
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(histoireConfig).backgroundPresets, (option, index) => {
              return openBlock(), createElementBlock("button", {
                key: index,
                class: normalizeClass(["htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-items-baseline htw-gap-4", [
                  unref(settings).backgroundColor === option.color ? "htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
                ]]),
                onClick: ($event) => {
                  unref(settings).backgroundColor = option.color;
                  hide();
                }
              }, [
                createBaseVNode("span", _hoisted_6$2, toDisplayString(option.label), 1),
                option.color !== "$checkerboard" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                  createBaseVNode("span", _hoisted_7$2, toDisplayString(option.color), 1),
                  createBaseVNode("div", {
                    class: "htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/20 dark:htw-border-white/20 htw-flex htw-items-center htw-justify-center htw-text-xs",
                    style: normalizeStyle({
                      backgroundColor: option.color,
                      color: option.contrastColor
                    })
                  }, [
                    option.contrastColor ? (openBlock(), createElementBlock("span", _hoisted_8$1, "a")) : createCommentVNode("", true)
                  ], 4)
                ], 64)) : createCommentVNode("", true)
              ], 10, _hoisted_5$3);
            }), 128))
          ])
        ]),
        default: withCtx(() => [
          withDirectives((openBlock(), createElementBlock("div", _hoisted_1$d, [
            createBaseVNode("div", _hoisted_2$7, [
              contrastColor.value ? (openBlock(), createElementBlock("span", _hoisted_3$6, "a")) : createCommentVNode("", true)
            ]),
            createVNode(unref(Icon), {
              icon: "carbon:caret-down",
              class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
            })
          ])), [
            [_directive_tooltip, "Background color"]
          ])
        ]),
        _: 1
      })) : createCommentVNode("", true);
    };
  }
});
const ToolbarBackground = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-c48fb2b2"]]);
const _sfc_main$e = /* @__PURE__ */ defineComponent({
  __name: "ToolbarTextDirection",
  setup(__props) {
    const settings = usePreviewSettingsStore().currentSettings;
    return (_ctx, _cache) => {
      const _directive_tooltip = resolveDirective("tooltip");
      return withDirectives((openBlock(), createElementBlock("a", {
        class: "histoire-toolbar-text-direction htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100",
        onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).textDirection = unref(settings).textDirection === "ltr" ? "rtl" : "ltr")
      }, [
        createVNode(unref(Icon), {
          icon: unref(settings).textDirection === "ltr" ? "fluent:text-paragraph-direction-right-16-regular" : "fluent:text-paragraph-direction-left-16-regular",
          class: "htw-w-4 htw-h-4"
        }, null, 8, ["icon"])
      ])), [
        [_directive_tooltip, `Switch to text direction ${unref(settings).textDirection === "ltr" ? "Right to Left" : "Left to Right"}`]
      ]);
    };
  }
});
async function getSourceCode(story, variant) {
  var _a, _b, _c, _d;
  if (variant.source) {
    return variant.source;
  } else if ((_a = variant.slots) == null ? void 0 : _a.call(variant).source) {
    const source = (_b = variant.slots) == null ? void 0 : _b.call(variant).source()[0].children;
    if (source) {
      return unindent(source);
    }
  } else {
    const clientPlugin = clientSupportPlugins[(_c = story.file) == null ? void 0 : _c.supportPluginId];
    if (clientPlugin) {
      const pluginModule = await clientPlugin();
      return pluginModule.generateSourceCode(variant);
    }
  }
  const sourceLoader = (_d = story.file) == null ? void 0 : _d.source;
  if (sourceLoader) {
    return (await sourceLoader()).default;
  }
}
function getSandboxUrl(story, variant) {
  const url = new URLSearchParams();
  url.append("storyId", story.id);
  url.append("variantId", variant.id);
  return `${base}__sandbox.html?${url.toString()}`;
}
const _hoisted_1$c = ["href"];
const _sfc_main$d = /* @__PURE__ */ defineComponent({
  __name: "ToolbarNewTab",
  props: {
    variant: {},
    story: {}
  },
  setup(__props) {
    const props = __props;
    const sandboxUrl = computed(() => {
      return getSandboxUrl(props.story, props.variant);
    });
    return (_ctx, _cache) => {
      const _directive_tooltip = resolveDirective("tooltip");
      return withDirectives((openBlock(), createElementBlock("a", {
        href: sandboxUrl.value,
        target: "_blank",
        class: "histoire-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
      }, [
        createVNode(unref(Icon), {
          icon: "carbon:launch",
          class: "htw-w-4 htw-h-4"
        })
      ], 8, _hoisted_1$c)), [
        [_directive_tooltip, "Open variant in new tab"]
      ]);
    };
  }
});
const _sfc_main$c = {};
const _hoisted_1$b = { fill: "none" };
const _hoisted_2$6 = /* @__PURE__ */ createBaseVNode("pattern", {
  id: "checkerboard",
  width: "64",
  height: "64",
  patternUnits: "userSpaceOnUse"
}, [
  /* @__PURE__ */ createBaseVNode("rect", {
    x: "0",
    y: "0",
    width: "32",
    height: "32",
    fill: "currentColor"
  }),
  /* @__PURE__ */ createBaseVNode("rect", {
    x: "32",
    y: "32",
    width: "32",
    height: "32",
    fill: "currentColor"
  })
], -1);
const _hoisted_3$5 = /* @__PURE__ */ createBaseVNode("rect", {
  x: "0",
  y: "0",
  width: "100%",
  height: "100%",
  fill: "url(#checkerboard)"
}, null, -1);
const _hoisted_4$4 = [
  _hoisted_2$6,
  _hoisted_3$5
];
function _sfc_render$1(_ctx, _cache) {
  return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$4);
}
const CheckerboardPattern = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$1]]);
const _withScopeId$1 = (n) => (pushScopeId("data-v-d3ab4dd6"), n = n(), popScopeId(), n);
const _hoisted_1$a = { class: "htw-flex-none htw-flex htw-items-center" };
const _hoisted_2$5 = { class: "htw-truncate htw-flex-1" };
const _hoisted_3$4 = { class: "htw-flex-none htw-ml-auto htw-hidden group-hover:htw-flex htw-items-center" };
const _hoisted_4$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createBaseVNode("div", {
  class: "htw-absolute htw-inset-0 htw-rounded bind-preview-bg",
  "data-test-id": "responsive-preview-bg"
}, null, -1));
const _sfc_main$b = /* @__PURE__ */ defineComponent({
  __name: "StoryVariantGridItem",
  props: {
    variant: {
      type: Object,
      required: true
    },
    story: {
      type: Object,
      required: true
    }
  },
  emits: {
    resize: (_width, _height) => true
  },
  setup(__props, { emit: __emit }) {
    useCssVars((_ctx) => ({
      "bd0f30ce": unref(variant).iconColor,
      "8da98e9c": unref(settings).backgroundColor
    }));
    const props = __props;
    const emit = __emit;
    const { variant } = toRefs(props);
    const { isActive, targetRoute } = useCurrentVariantRoute(variant);
    Object.assign(props.variant, {
      previewReady: false
    });
    function onReady() {
      Object.assign(props.variant, {
        previewReady: true
      });
    }
    const router = useRouter();
    function selectVariant() {
      router.push(targetRoute.value);
    }
    const el = ref();
    const { autoScroll } = useScrollOnActive(isActive, el);
    useResizeObserver(el, () => {
      if (props.variant.previewReady) {
        emit("resize", el.value.clientWidth, el.value.clientHeight);
        if (isActive.value) {
          autoScroll();
        }
      }
    });
    const settings = usePreviewSettingsStore().currentSettings;
    const contrastColor = computed(() => getContrastColor(settings));
    const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor);
    return (_ctx, _cache) => {
      const _component_RouterLink = resolveComponent("RouterLink");
      const _directive_tooltip = resolveDirective("tooltip");
      return openBlock(), createElementBlock("div", {
        ref_key: "el",
        ref: el,
        class: "histoire-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
      }, [
        createBaseVNode("div", _hoisted_1$a, [
          withDirectives((openBlock(), createBlock(_component_RouterLink, {
            to: unref(targetRoute),
            class: normalizeClass(["htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1 htw-flex-shrink", {
              "hover:htw-bg-gray-200 htw-text-gray-500 dark:hover:htw-bg-gray-800": !unref(isActive),
              "htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800 dark:htw-bg-primary-700 dark:hover:htw-bg-primary-800 dark:htw-text-primary-200": unref(isActive)
            }])
          }, {
            default: withCtx(() => [
              createVNode(unref(Icon), {
                icon: unref(variant).icon ?? "carbon:cube",
                class: normalizeClass(["htw-w-4 htw-h-4 htw-opacity-50", {
                  "htw-text-gray-500": !unref(isActive) && !unref(variant).iconColor,
                  "bind-icon-color": !unref(isActive) && unref(variant).iconColor
                }])
              }, null, 8, ["icon", "class"]),
              createBaseVNode("span", _hoisted_2$5, toDisplayString(unref(variant).title), 1)
            ]),
            _: 1
          }, 8, ["to", "class"])), [
            [_directive_tooltip, unref(variant).title]
          ]),
          createBaseVNode("div", _hoisted_3$4, [
            createVNode(unref(Am), {
              content: () => unref(getSourceCode)(__props.story, unref(variant))
            }, null, 8, ["content"]),
            createVNode(_sfc_main$d, {
              variant: unref(variant),
              story: __props.story
            }, null, 8, ["variant", "story"])
          ])
        ]),
        createBaseVNode("div", {
          class: normalizeClass(["htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded htw-flex-1 htw-p-4 htw-relative", {
            "htw-border-gray-100 dark:htw-border-gray-800": !unref(isActive),
            "htw-border-primary-200 dark:htw-border-primary-900": unref(isActive)
          }]),
          "data-test-id": "sandbox-render",
          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectVariant(), ["stop"])),
          onKeyup: _cache[1] || (_cache[1] = ($event) => selectVariant())
        }, [
          _hoisted_4$3,
          unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern, {
            key: 0,
            class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
          })) : createCommentVNode("", true),
          createBaseVNode("div", {
            class: "htw-relative htw-h-full",
            style: normalizeStyle({
              "--histoire-contrast-color": contrastColor.value,
              "color": autoApplyContrastColor.value ? contrastColor.value : void 0
            })
          }, [
            (openBlock(), createBlock(_sfc_main$z, {
              key: `${__props.story.id}-${unref(variant).id}`,
              variant: unref(variant),
              story: __props.story,
              dir: unref(settings).textDirection,
              class: normalizeClass({
                [unref(histoireConfig).theme.darkClass]: unref(isDark)
              }),
              onReady
            }, null, 8, ["variant", "story", "dir", "class"]))
          ], 4)
        ], 34)
      ], 512);
    };
  }
});
const StoryVariantGridItem = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-d3ab4dd6"]]);
const _hoisted_1$9 = { class: "histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right" };
const _hoisted_2$4 = {
  key: 0,
  class: "htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
};
const _hoisted_3$3 = { class: "htw-flex htw-w-0 htw-flex-1 htw-mx-4" };
const margin = 16;
const gap = 16;
const _sfc_main$a = /* @__PURE__ */ defineComponent({
  __name: "StoryVariantGrid",
  setup(__props) {
    const storyStore = useStoryStore();
    const gridTemplateWidth = computed(() => {
      if (storyStore.currentStory.layout.type !== "grid") {
        return;
      }
      const layoutWidth = storyStore.currentStory.layout.width;
      if (!layoutWidth) {
        return "200px";
      }
      if (typeof layoutWidth === "number") {
        return `${layoutWidth}px`;
      }
      return layoutWidth;
    });
    const itemWidth = ref(16);
    const maxItemHeight = ref(0);
    const maxCount = ref(10);
    const countPerRow = ref(0);
    const visibleRows = ref(0);
    const el = ref(null);
    useResizeObserver(el, () => {
      updateMaxCount();
      updateSize();
    });
    function updateMaxCount() {
      if (!maxItemHeight.value)
        return;
      const width = el.value.clientWidth - margin * 2;
      const height = el.value.clientHeight;
      const scrollTop = el.value.scrollTop;
      countPerRow.value = Math.floor((width + gap) / (itemWidth.value + gap));
      visibleRows.value = Math.ceil((height + scrollTop + gap) / (maxItemHeight.value + gap));
      const newMaxCount = countPerRow.value * visibleRows.value;
      if (maxCount.value < newMaxCount) {
        maxCount.value = newMaxCount;
      }
      if (storyStore.currentVariant) {
        const index = storyStore.currentStory.variants.indexOf(storyStore.currentVariant);
        if (index + 1 > maxCount.value) {
          maxCount.value = index + 1;
        }
      }
    }
    function onItemResize(w, h2) {
      itemWidth.value = w;
      if (maxItemHeight.value < h2) {
        maxItemHeight.value = h2;
        updateMaxCount();
      }
    }
    watch(() => storyStore.currentVariant, () => {
      maxItemHeight.value = 0;
      updateMaxCount();
    });
    const gridEl = ref(null);
    const gridColumnWidth = ref(1);
    const viewWidth = ref(1);
    function updateSize() {
      if (!el.value)
        return;
      viewWidth.value = el.value.clientWidth;
      if (!gridEl.value)
        return;
      if (gridTemplateWidth.value.endsWith("%")) {
        gridColumnWidth.value = viewWidth.value * Number.parseInt(gridTemplateWidth.value) / 100 - gap;
      } else {
        gridColumnWidth.value = Number.parseInt(gridTemplateWidth.value);
      }
    }
    onMounted(() => {
      updateSize();
    });
    useResizeObserver(gridEl, () => {
      updateSize();
    });
    const columnCount = computed(() => Math.min(storyStore.currentStory.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap))));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$9, [
        !unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
          createVNode(ToolbarBackground),
          createVNode(_sfc_main$e),
          createCommentVNode("", true)
        ])) : createCommentVNode("", true),
        createBaseVNode("div", {
          ref_key: "el",
          ref: el,
          class: "htw-overflow-y-auto htw-flex htw-flex-1",
          onScroll: _cache[0] || (_cache[0] = ($event) => updateMaxCount())
        }, [
          createBaseVNode("div", _hoisted_3$3, [
            createBaseVNode("div", {
              class: "htw-m-auto",
              style: normalizeStyle({
                minHeight: `${unref(storyStore).currentStory.variants.length / countPerRow.value * (maxItemHeight.value + gap) - gap}px`
              })
            }, [
              createBaseVNode("div", {
                ref_key: "gridEl",
                ref: gridEl,
                class: "htw-grid htw-gap-4 htw-my-4",
                style: normalizeStyle({
                  gridTemplateColumns: `repeat(${columnCount.value}, ${gridColumnWidth.value}px)`
                })
              }, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants.slice(0, maxCount.value), (variant, index) => {
                  return openBlock(), createBlock(StoryVariantGridItem, {
                    key: index,
                    variant,
                    story: unref(storyStore).currentStory,
                    onResize: onItemResize
                  }, null, 8, ["variant", "story"]);
                }), 128))
              ], 4)
            ], 4)
          ])
        ], 544)
      ]);
    };
  }
});
const _hoisted_1$8 = { class: "histoire-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0" };
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
  __name: "ToolbarTitle",
  props: {
    variant: {}
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$8, [
        createVNode(unref(Icon), {
          icon: _ctx.variant.icon ?? "carbon:cube",
          class: normalizeClass(["htw-w-4 htw-h-4 htw-opacity-50", [
            _ctx.variant.iconColor ? "bind-icon-color" : "htw-text-gray-500"
          ]])
        }, null, 8, ["icon", "class"]),
        createBaseVNode("span", null, toDisplayString(_ctx.variant.title), 1)
      ]);
    };
  }
});
const _hoisted_1$7 = { class: "htw-flex htw-flex-col htw-items-stretch" };
const _hoisted_2$3 = { class: "htw-flex htw-items-center htw-gap-2 htw-px-4 htw-py-3" };
const _hoisted_3$2 = /* @__PURE__ */ createBaseVNode("span", { class: "htw-opacity-50" }, "×", -1);
const _hoisted_4$2 = ["onClick"];
const _hoisted_5$2 = { class: "htw-ml-auto htw-opacity-70 htw-flex htw-gap-1" };
const _hoisted_6$1 = { key: 0 };
const _hoisted_7$1 = { key: 0 };
const _hoisted_8 = { key: 1 };
const _hoisted_9 = { key: 2 };
const _hoisted_10 = { key: 0 };
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
  __name: "ToolbarResponsiveSize",
  setup(__props) {
    const settings = usePreviewSettingsStore().currentSettings;
    return (_ctx, _cache) => {
      var _a;
      const _component_VDropdown = resolveComponent("VDropdown");
      const _directive_tooltip = resolveDirective("tooltip");
      return openBlock(), createBlock(_component_VDropdown, {
        placement: "bottom-end",
        skidding: 6,
        disabled: !((_a = unref(histoireConfig).responsivePresets) == null ? void 0 : _a.length),
        class: "histoire-toolbar-responsive-size htw-h-full htw-flex-none"
      }, {
        popper: withCtx(({ hide }) => [
          createBaseVNode("div", _hoisted_1$7, [
            createVNode(_sfc_main$g, {
              modelValue: unref(settings).rotate,
              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(settings).rotate = $event)
            }, {
              default: withCtx(() => [
                createTextVNode(" Rotate ")
              ]),
              _: 1
            }, 8, ["modelValue"]),
            createBaseVNode("div", _hoisted_2$3, [
              withDirectives(createBaseVNode("input", {
                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(settings).responsiveWidth = $event),
                type: "number",
                class: "htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0",
                step: "16",
                placeholder: "Auto"
              }, null, 512), [
                [
                  vModelText,
                  unref(settings).responsiveWidth,
                  void 0,
                  { number: true }
                ],
                [_directive_tooltip, "Responsive width (px)"]
              ]),
              _hoisted_3$2,
              withDirectives(createBaseVNode("input", {
                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(settings).responsiveHeight = $event),
                type: "number",
                class: "htw-bg-transparent htw-border htw-border-gray-200 dark:htw-border-gray-850 htw-rounded htw-w-20 htw-opacity-50 focus:htw-opacity-100 htw-flex-1 htw-min-w-0",
                step: "16",
                placeholder: "Auto"
              }, null, 512), [
                [
                  vModelText,
                  unref(settings).responsiveHeight,
                  void 0,
                  { number: true }
                ],
                [_directive_tooltip, "Responsive height (px)"]
              ])
            ]),
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(histoireConfig).responsivePresets, (preset, index) => {
              return openBlock(), createElementBlock("button", {
                key: index,
                class: normalizeClass(["htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4", [
                  unref(settings).responsiveWidth === preset.width && unref(settings).responsiveHeight === preset.height ? "htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "htw-bg-transparent hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
                ]]),
                onClick: ($event) => {
                  unref(settings).responsiveWidth = preset.width;
                  unref(settings).responsiveHeight = preset.height;
                  hide();
                }
              }, [
                createTextVNode(toDisplayString(preset.label) + " ", 1),
                createBaseVNode("span", _hoisted_5$2, [
                  preset.width ? (openBlock(), createElementBlock("span", _hoisted_6$1, [
                    createTextVNode(toDisplayString(preset.width), 1),
                    !preset.height ? (openBlock(), createElementBlock("span", _hoisted_7$1, "px")) : createCommentVNode("", true)
                  ])) : createCommentVNode("", true),
                  preset.width && preset.height ? (openBlock(), createElementBlock("span", _hoisted_8, "x")) : createCommentVNode("", true),
                  preset.height ? (openBlock(), createElementBlock("span", _hoisted_9, [
                    createTextVNode(toDisplayString(preset.height), 1),
                    !preset.width ? (openBlock(), createElementBlock("span", _hoisted_10, "px")) : createCommentVNode("", true)
                  ])) : createCommentVNode("", true)
                ])
              ], 10, _hoisted_4$2);
            }), 128))
          ])
        ]),
        default: withCtx(() => {
          var _a2;
          return [
            withDirectives((openBlock(), createElementBlock("div", {
              class: normalizeClass(["htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group", {
                "htw-cursor-pointer hover:htw-text-primary-500": (_a2 = unref(histoireConfig).responsivePresets) == null ? void 0 : _a2.length
              }])
            }, [
              createVNode(unref(Icon), {
                icon: "carbon:devices",
                class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
              }),
              createVNode(unref(Icon), {
                icon: "carbon:caret-down",
                class: "htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
              })
            ], 2)), [
              [_directive_tooltip, "Responsive sizes"]
            ])
          ];
        }),
        _: 1
      }, 8, ["disabled"]);
    };
  }
});
const _sfc_main$7 = {};
const _hoisted_1$6 = { class: "__histoire-hatched-pattern" };
function _sfc_render(_ctx, _cache) {
  return openBlock(), createElementBlock("div", _hoisted_1$6);
}
const HatchedPattern = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render], ["__scopeId", "data-v-91561117"]]);
const _withScopeId = (n) => (pushScopeId("data-v-9bc3d486"), n = n(), popScopeId(), n);
const _hoisted_1$5 = { class: "histoire-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden" };
const _hoisted_2$2 = {
  key: 0,
  class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden"
};
const _hoisted_3$1 = {
  class: "bind-preview-bg htw-rounded-lg htw-h-full",
  "data-test-id": "responsive-preview-bg"
};
const _hoisted_4$1 = { class: "htw-p-8 htw-h-full htw-relative" };
const _hoisted_5$1 = { class: "htw-w-full htw-h-full htw-relative" };
const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("div", { class: "htw-absolute htw-inset-0" }, null, -1));
const _hoisted_7 = /* @__PURE__ */ createStaticVNode('<div class="htw-absolute htw-top-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-9bc3d486></div><div class="htw-absolute htw-top-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-9bc3d486></div><div class="htw-absolute htw-bottom-5 htw-left-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-9bc3d486></div><div class="htw-absolute htw-bottom-5 htw-right-8 htw-h-2 htw-w-px htw-bg-gray-400/25" data-v-9bc3d486></div><div class="htw-absolute htw-left-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-9bc3d486></div><div class="htw-absolute htw-left-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-9bc3d486></div><div class="htw-absolute htw-right-5 htw-top-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-9bc3d486></div><div class="htw-absolute htw-right-5 htw-bottom-8 htw-w-2 htw-h-px htw-bg-gray-400/25" data-v-9bc3d486></div>', 8);
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
  __name: "StoryResponsivePreview",
  props: {
    variant: {}
  },
  setup(__props) {
    useCssVars((_ctx) => ({
      "321f9a07": unref(settings).backgroundColor
    }));
    const props = __props;
    const settings = usePreviewSettingsStore().currentSettings;
    const resizing = ref(false);
    const onUnmountedCleanupFns = [];
    onUnmounted(() => {
      onUnmountedCleanupFns.forEach((fn) => fn());
    });
    function addWindowListener(event, listener) {
      window.addEventListener(event, listener);
      const removeListener = () => window.removeEventListener(event, listener);
      onUnmountedCleanupFns.push(removeListener);
      return () => {
        removeListener();
        onUnmountedCleanupFns.splice(onUnmountedCleanupFns.indexOf(removeListener), 1);
      };
    }
    function useDragger(el, value, min, max, axis) {
      function onMouseDown(event) {
        event.preventDefault();
        event.stopPropagation();
        const start = axis === "x" ? event.clientX : event.clientY;
        const startValue = value.value ?? (axis === "x" ? previewWrapper.value.clientWidth - 67 : previewWrapper.value.clientHeight - 70);
        resizing.value = true;
        const removeListeners = [
          addWindowListener("mousemove", onMouseMove),
          addWindowListener("mouseup", onMouseUp)
        ];
        function onMouseMove(event2) {
          const snapTarget = axis === "x" ? previewWrapper.value.clientWidth : previewWrapper.value.clientHeight;
          const delta = (axis === "x" ? event2.clientX : event2.clientY) - start;
          value.value = Math.max(min, Math.min(max, startValue + delta));
          if (Math.abs(value.value - (snapTarget - 67)) < 16) {
            value.value = null;
          }
        }
        function onMouseUp() {
          removeListeners.forEach((fn) => fn());
          resizing.value = false;
        }
      }
      useEventListener(el, "mousedown", onMouseDown);
      function onTouchStart(event) {
        event.preventDefault();
        event.stopPropagation();
        const start = axis === "x" ? event.touches[0].clientX : event.touches[0].clientY;
        const startValue = value.value;
        resizing.value = true;
        const removeListeners = [
          addWindowListener("touchmove", onTouchMove),
          addWindowListener("touchend", onTouchEnd),
          addWindowListener("touchcancel", onTouchEnd)
        ];
        function onTouchMove(event2) {
          const delta = (axis === "x" ? event2.touches[0].clientX : event2.touches[0].clientY) - start;
          value.value = Math.max(min, Math.min(max, startValue + delta));
        }
        function onTouchEnd() {
          removeListeners.forEach((fn) => fn());
          resizing.value = false;
        }
      }
      useEventListener(el, "touchstart", onTouchStart);
    }
    const responsiveWidth = computed({
      get: () => settings[settings.rotate ? "responsiveHeight" : "responsiveWidth"],
      set: (value) => {
        settings[settings.rotate ? "responsiveHeight" : "responsiveWidth"] = value;
      }
    });
    const responsiveHeight = computed({
      get: () => settings[settings.rotate ? "responsiveWidth" : "responsiveHeight"],
      set: (value) => {
        settings[settings.rotate ? "responsiveWidth" : "responsiveHeight"] = value;
      }
    });
    const horizontalDragger = ref();
    const verticalDragger = ref();
    const cornerDragger = ref();
    const previewWrapper = ref();
    useDragger(horizontalDragger, responsiveWidth, 32, 2e4, "x");
    useDragger(verticalDragger, responsiveHeight, 32, 2e4, "y");
    useDragger(cornerDragger, responsiveWidth, 32, 2e4, "x");
    useDragger(cornerDragger, responsiveHeight, 32, 2e4, "y");
    const finalWidth = computed(() => settings.rotate ? settings.responsiveHeight : settings.responsiveWidth);
    const finalHeight = computed(() => settings.rotate ? settings.responsiveWidth : settings.responsiveHeight);
    const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled);
    const sizeTooltip = computed(() => `${responsiveWidth.value ?? "Auto"} × ${responsiveHeight.value ?? "Auto"}`);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$5, [
        isResponsiveEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
          createVNode(HatchedPattern, { class: "htw-w-full htw-h-full htw-text-black/[1%] dark:htw-text-white/[1%]" })
        ])) : createCommentVNode("", true),
        createBaseVNode("div", {
          ref_key: "previewWrapper",
          ref: previewWrapper,
          class: "htw-h-full htw-overflow-auto htw-relative"
        }, [
          createBaseVNode("div", {
            class: normalizeClass(["htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700 htw-rounded-lg htw-relative", isResponsiveEnabled.value ? {
              "htw-w-fit": !!finalWidth.value,
              "htw-h-fit": !!finalHeight.value,
              "htw-h-full": !finalHeight.value
            } : "htw-h-full"])
          }, [
            createBaseVNode("div", _hoisted_3$1, [
              unref(settings).checkerboard ? (openBlock(), createBlock(CheckerboardPattern, {
                key: 0,
                class: "htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
              })) : createCommentVNode("", true),
              createBaseVNode("div", _hoisted_4$1, [
                createBaseVNode("div", _hoisted_5$1, [
                  _hoisted_6,
                  renderSlot(_ctx.$slots, "default", {
                    isResponsiveEnabled: isResponsiveEnabled.value,
                    finalWidth: finalWidth.value,
                    finalHeight: finalHeight.value,
                    resizing: resizing.value
                  }, void 0, true)
                ]),
                _hoisted_7
              ]),
              isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                withDirectives((openBlock(), createElementBlock("div", {
                  ref_key: "horizontalDragger",
                  ref: horizontalDragger,
                  class: "htw-absolute htw-w-4 htw-top-0 htw-bottom-4 htw-right-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ew-resize htw-group hover:htw-text-primary-500"
                }, [
                  createVNode(unref(Icon), {
                    icon: "mdi:drag-vertical-variant",
                    class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
                  })
                ])), [
                  [
                    unref(VTooltip),
                    sizeTooltip.value,
                    void 0,
                    { right: true }
                  ]
                ]),
                withDirectives((openBlock(), createElementBlock("div", {
                  ref_key: "verticalDragger",
                  ref: verticalDragger,
                  class: "htw-absolute htw-h-4 htw-left-0 htw-right-4 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-ns-resize htw-group hover:htw-text-primary-500"
                }, [
                  createVNode(unref(Icon), {
                    icon: "mdi:drag-horizontal-variant",
                    class: "htw-w-4 htw-h-4 htw-opacity-20 group-hover:htw-opacity-90"
                  })
                ])), [
                  [
                    unref(VTooltip),
                    sizeTooltip.value,
                    void 0,
                    { bottom: true }
                  ]
                ]),
                withDirectives(createBaseVNode("div", {
                  ref_key: "cornerDragger",
                  ref: cornerDragger,
                  class: "htw-absolute htw-w-4 htw-h-4 htw-right-0 htw-bottom-0 hover:htw-bg-primary-500/30 htw-flex htw-items-center htw-justify-center htw-cursor-nwse-resize htw-group hover:htw-text-primary-500"
                }, null, 512), [
                  [
                    unref(VTooltip),
                    sizeTooltip.value,
                    void 0,
                    { bottom: true }
                  ]
                ])
              ], 64)) : createCommentVNode("", true)
            ])
          ], 2)
        ], 512)
      ]);
    };
  }
});
const StoryResponsivePreview = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-9bc3d486"]]);
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
  __name: "StoryVariantSinglePreviewNative",
  props: {
    story: {},
    variant: {}
  },
  setup(__props) {
    const props = __props;
    Object.assign(props.variant, {
      previewReady: false
    });
    function onReady() {
      Object.assign(props.variant, {
        previewReady: true
      });
    }
    const settings = usePreviewSettingsStore().currentSettings;
    const contrastColor = computed(() => getContrastColor(settings));
    const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor);
    return (_ctx, _cache) => {
      return openBlock(), createBlock(StoryResponsivePreview, {
        class: "histoire-story-variant-single-preview-native",
        variant: _ctx.variant
      }, {
        default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight }) => [
          createBaseVNode("div", {
            style: normalizeStyle([
              isResponsiveEnabled ? {
                width: finalWidth ? `${finalWidth}px` : "100%",
                height: finalHeight ? `${finalHeight}px` : "100%"
              } : { width: "100%", height: "100%" },
              {
                "--histoire-contrast-color": contrastColor.value,
                "color": autoApplyContrastColor.value ? contrastColor.value : void 0
              }
            ]),
            class: "htw-relative",
            "data-test-id": "sandbox-render"
          }, [
            (openBlock(), createBlock(_sfc_main$z, {
              key: `${_ctx.story.id}-${_ctx.variant.id}`,
              variant: _ctx.variant,
              story: _ctx.story,
              class: normalizeClass(["htw-h-full", {
                [unref(histoireConfig).sandboxDarkClass]: unref(isDark),
                // @TODO remove
                [unref(histoireConfig).theme.darkClass]: unref(isDark)
              }]),
              dir: unref(settings).textDirection,
              onReady
            }, null, 8, ["variant", "story", "class", "dir"]))
          ], 4)
        ]),
        _: 1
      }, 8, ["variant"]);
    };
  }
});
const _hoisted_1$4 = ["src"];
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
  __name: "StoryVariantSinglePreviewRemote",
  props: {
    story: {},
    variant: {}
  },
  setup(__props) {
    const props = __props;
    const settings = usePreviewSettingsStore().currentSettings;
    const iframe = ref();
    function syncState() {
      if (iframe.value && props.variant.previewReady) {
        iframe.value.contentWindow.postMessage({
          type: STATE_SYNC,
          state: toRawDeep(props.variant.state, true)
        });
      }
    }
    let synced = false;
    watch(() => props.variant.state, () => {
      if (synced) {
        synced = false;
        return;
      }
      syncState();
    }, {
      deep: true,
      immediate: true
    });
    Object.assign(props.variant, {
      previewReady: false
    });
    useEventListener(window, "message", (event) => {
      switch (event.data.type) {
        case STATE_SYNC:
          updateVariantState(event.data.state);
          break;
        case EVENT_SEND:
          logEvent(event.data.event);
          break;
        case SANDBOX_READY:
          setPreviewReady();
          break;
      }
    });
    function updateVariantState(state) {
      synced = true;
      applyState(props.variant.state, state);
    }
    function logEvent(event) {
      const eventsStore = useEventsStore();
      eventsStore.addEvent(event);
    }
    function setPreviewReady() {
      Object.assign(props.variant, {
        previewReady: true
      });
    }
    const sandboxUrl = computed(() => {
      return getSandboxUrl(props.story, props.variant);
    });
    const isIframeLoaded = ref(false);
    watch(sandboxUrl, () => {
      isIframeLoaded.value = false;
      Object.assign(props.variant, {
        previewReady: false
      });
    });
    function syncSettings() {
      if (iframe.value) {
        iframe.value.contentWindow.postMessage({
          type: PREVIEW_SETTINGS_SYNC,
          settings: toRaw(settings)
        });
      }
    }
    watch(() => settings, () => {
      syncSettings();
    }, {
      deep: true,
      immediate: true
    });
    function onIframeLoad() {
      isIframeLoaded.value = true;
      syncState();
      syncSettings();
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(StoryResponsivePreview, {
        class: "histoire-story-variant-single-preview-remote",
        variant: _ctx.variant
      }, {
        default: withCtx(({ isResponsiveEnabled, finalWidth, finalHeight, resizing }) => [
          createBaseVNode("iframe", {
            ref_key: "iframe",
            ref: iframe,
            src: sandboxUrl.value,
            class: normalizeClass(["htw-w-full htw-h-full htw-relative", {
              "htw-invisible": !isIframeLoaded.value,
              "htw-pointer-events-none": resizing
            }]),
            style: normalizeStyle(isResponsiveEnabled ? {
              width: finalWidth ? `${finalWidth}px` : null,
              height: finalHeight ? `${finalHeight}px` : null
            } : void 0),
            "data-test-id": "preview-iframe",
            onLoad: _cache[0] || (_cache[0] = ($event) => onIframeLoad())
          }, null, 46, _hoisted_1$4)
        ]),
        _: 1
      }, 8, ["variant"]);
    };
  }
});
const _hoisted_1$3 = {
  class: "histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col",
  "data-test-id": "story-variant-single-view"
};
const _hoisted_2$1 = {
  key: 0,
  class: "htw-flex-none htw-flex htw-items-center htw-h-8 -htw-mt-1"
};
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
  __name: "StoryVariantSingleView",
  props: {
    variant: {},
    story: {}
  },
  setup(__props) {
    return (_ctx, _cache) => {
      var _b;
      return openBlock(), createElementBlock("div", _hoisted_1$3, [
        !unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
          createVNode(_sfc_main$9, { variant: _ctx.variant }, null, 8, ["variant"]),
          !_ctx.variant.responsiveDisabled ? (openBlock(), createBlock(_sfc_main$8, { key: 0 })) : createCommentVNode("", true),
          createVNode(ToolbarBackground),
          createVNode(_sfc_main$e),
          createVNode(_sfc_main$d, {
            variant: _ctx.variant,
            story: _ctx.story
          }, null, 8, ["variant", "story"]),
          createCommentVNode("", true)
        ])) : createCommentVNode("", true),
        ((_b = _ctx.story.layout) == null ? void 0 : _b.iframe) === false ? (openBlock(), createBlock(_sfc_main$5, {
          key: 1,
          story: _ctx.story,
          variant: _ctx.variant
        }, null, 8, ["story", "variant"])) : (openBlock(), createBlock(_sfc_main$4, {
          key: 2,
          story: _ctx.story,
          variant: _ctx.variant
        }, null, 8, ["story", "variant"]))
      ]);
    };
  }
});
const _hoisted_1$2 = {
  key: 0,
  class: "histoire-story-variant-single htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
};
const _hoisted_2 = {
  key: 0,
  class: "htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800 htw-h-full htw-flex htw-flex-col"
};
const _hoisted_3 = {
  key: 0,
  class: "htw-p-2 htw-h-full"
};
const _hoisted_4 = { class: "htw-h-full htw-overflow-y-auto" };
const _hoisted_5 = {
  key: 0,
  class: "htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
};
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  __name: "StoryVariantSingle",
  emits: {
    openVariantMenu: () => true
  },
  setup(__props) {
    useCssVars((_ctx) => {
      var _a;
      return {
        "02b8e3da": (_a = variant.value) == null ? void 0 : _a.iconColor
      };
    });
    const storyStore = useStoryStore();
    const hasSingleVariant = computed(() => {
      var _a;
      return ((_a = storyStore.currentStory) == null ? void 0 : _a.variants.length) === 1;
    });
    const variant = computed(() => storyStore.currentVariant);
    return (_ctx, _cache) => {
      return hasSingleVariant.value && variant.value ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
        createVNode(_sfc_main$3, {
          variant: variant.value,
          story: unref(storyStore).currentStory
        }, null, 8, ["variant", "story"])
      ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
        unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [
          createBaseVNode("a", {
            class: "htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center htw-flex-none",
            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("openVariantMenu"))
          }, [
            variant.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
              createVNode(unref(Icon), {
                icon: variant.value.icon ?? "carbon:cube",
                class: normalizeClass(["htw-w-5 htw-h-5 htw-flex-none", {
                  "htw-text-gray-500": !variant.value.iconColor,
                  "bind-icon-color": variant.value.iconColor
                }])
              }, null, 8, ["icon", "class"]),
              createTextVNode(" " + toDisplayString(variant.value.title), 1)
            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
              createTextVNode(" Select a variant... ")
            ], 64)),
            createVNode(unref(Icon), {
              icon: "carbon:chevron-sort",
              class: "htw-w-5 htw-h-5 htw-shrink-0 htw-ml-auto"
            })
          ]),
          unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_3, [
            createVNode(_sfc_main$3, {
              variant: unref(storyStore).currentVariant,
              story: unref(storyStore).currentStory
            }, null, 8, ["variant", "story"])
          ])) : createCommentVNode("", true)
        ])) : (openBlock(), createBlock(BaseSplitPane, {
          key: 1,
          "save-id": "story-single-main-split",
          min: 5,
          max: 40,
          "default-split": 17
        }, {
          first: withCtx(() => [
            createBaseVNode("div", _hoisted_4, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (v, index) => {
                return openBlock(), createBlock(StoryVariantListItem, {
                  key: index,
                  variant: v
                }, null, 8, ["variant"]);
              }), 128))
            ])
          ]),
          last: withCtx(() => [
            unref(storyStore).currentVariant ? (openBlock(), createElementBlock("div", _hoisted_5, [
              createVNode(_sfc_main$3, {
                variant: unref(storyStore).currentVariant,
                story: unref(storyStore).currentStory
              }, null, 8, ["variant", "story"])
            ])) : createCommentVNode("", true)
          ]),
          _: 1
        }))
      ], 64));
    };
  }
});
const StoryVariantSingle = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-abf83c04"]]);
const _hoisted_1$1 = { class: "histoire-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750" };
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "StoryViewer",
  setup(__props) {
    useCssVars((_ctx) => {
      var _a;
      return {
        "597bf4c4": (_a = variant.value) == null ? void 0 : _a.iconColor
      };
    });
    const storyStore = useStoryStore();
    const variant = computed(() => storyStore.currentVariant);
    const isMenuOpened = ref(false);
    function closeMenu() {
      isMenuOpened.value = false;
    }
    watch(variant, () => {
      isMenuOpened.value = false;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        createBaseVNode("div", _hoisted_1$1, [
          unref(storyStore).currentStory.layout.type === "grid" ? (openBlock(), createBlock(_sfc_main$a, { key: 0 })) : unref(storyStore).currentStory.layout.type === "single" ? (openBlock(), createBlock(StoryVariantSingle, {
            key: 1,
            onOpenVariantMenu: _cache[0] || (_cache[0] = ($event) => isMenuOpened.value = true)
          })) : createCommentVNode("", true)
        ]),
        createVNode(_sfc_main$A, {
          title: "Select a variant",
          opened: isMenuOpened.value,
          onClose: closeMenu
        }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(storyStore).currentStory.variants, (v, index) => {
              return openBlock(), createBlock(StoryVariantListItem, {
                key: index,
                variant: v
              }, null, 8, ["variant"]);
            }), 128))
          ]),
          _: 1
        }, 8, ["opened"])
      ], 64);
    };
  }
});
const StoryViewer = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-a5a2e343"]]);
const _hoisted_1 = {
  key: 1,
  class: "histoire-story-view histoire-with-story htw-h-full"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "StoryView",
  setup(__props) {
    const storyStore = useStoryStore();
    const router = useRouter();
    const route = useRoute();
    watch(() => storyStore.currentVariant, (value) => {
      if (value) {
        storyStore.currentStory.lastSelectedVariant = value;
      }
    }, {
      immediate: true
    });
    watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
      var _a, _b;
      if (!storyStore.currentVariant) {
        if ((_a = storyStore.currentStory) == null ? void 0 : _a.lastSelectedVariant) {
          setVariant(storyStore.currentStory.lastSelectedVariant.id);
          return;
        }
        if (((_b = storyStore.currentStory) == null ? void 0 : _b.variants.length) === 1) {
          setVariant(storyStore.currentStory.variants[0].id);
        }
      }
    }, {
      immediate: true
    });
    function setVariant(variantId) {
      router.replace({
        ...route,
        query: {
          ...route.query,
          variantId
        }
      });
    }
    const docsOnlyScroller = ref(null);
    function scrollDocsToTop() {
      var _a;
      (_a = docsOnlyScroller.value) == null ? void 0 : _a.scrollTo(0, 0);
    }
    return (_ctx, _cache) => {
      return !unref(storyStore).currentStory ? (openBlock(), createBlock(BaseEmpty, {
        key: 0,
        class: "histoire-story-view histoire-no-story"
      }, {
        default: withCtx(() => [
          createVNode(unref(Icon), {
            icon: "carbon:software-resource-resource",
            class: "htw-w-16 htw-h-16 htw-opacity-50"
          })
        ]),
        _: 1
      })) : (openBlock(), createElementBlock("div", _hoisted_1, [
        unref(storyStore).currentStory.docsOnly ? (openBlock(), createElementBlock("div", {
          key: 0,
          ref_key: "docsOnlyScroller",
          ref: docsOnlyScroller,
          class: "htw-h-full htw-overflow-auto"
        }, [
          createVNode(_sfc_main$r, {
            story: unref(storyStore).currentStory,
            standalone: "",
            class: "md:htw-p-12 htw-w-full md:htw-max-w-[600px] lg:htw-max-w-[800px] xl:htw-max-w-[900px]",
            onScrollTop: _cache[0] || (_cache[0] = ($event) => scrollDocsToTop())
          }, null, 8, ["story"])
        ], 512)) : unref(isMobile) ? (openBlock(), createBlock(StoryViewer, { key: 1 })) : (openBlock(), createBlock(BaseSplitPane, {
          key: 2,
          "save-id": "story-main",
          min: 30,
          max: 95,
          "default-split": 75,
          class: "htw-h-full"
        }, {
          first: withCtx(() => [
            createVNode(StoryViewer)
          ]),
          last: withCtx(() => [
            createVNode(_sfc_main$i)
          ]),
          _: 1
        }))
      ]));
    };
  }
});
export {
  _sfc_main as default
};