@poveste/app 0.1.0

package/dist/bundled/components/panel/ControlsComponentPropItem.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ControlsComponentPropItem.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/ControlsComponentPropItem.vue2.js

@@ -0,0 +1,72 @@
+import { defineComponent, computed, resolveDirective, createBlock, createCommentVNode, openBlock, resolveDynamicComponent, withCtx, withDirectives, createVNode, unref, withModifiers, normalizeClass } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { HstJson, HstCheckbox, HstNumber, HstText } from "@poveste/controls";
+"use strict";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ControlsComponentPropItem",
+  props: {
+    variant: {},
+    component: {},
+    definition: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const comp = computed(() => {
+      switch (props.definition.types?.[0]) {
+        case "string":
+          return HstText;
+        case "number":
+          return HstNumber;
+        case "boolean":
+          return HstCheckbox;
+        case "object":
+        default:
+          return HstJson;
+      }
+    });
+    const model = computed({
+      get: () => {
+        return props.variant.state._hPropState[props.component.index]?.[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(() => props.variant.state?._hPropState?.[props.component.index] && props.definition.name in props.variant.state._hPropState[props.component.index]);
+    return (_ctx, _cache) => {
+      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 ? __props.definition?.default : null,
+        class: "histoire-controls-component-prop-item",
+        title: `${__props.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);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/ControlsComponentProps.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ControlsComponentProps.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/ControlsComponentProps.vue2.js

@@ -0,0 +1,45 @@
+import { defineComponent, resolveDirective, createElementBlock, openBlock, createElementVNode, withDirectives, createVNode, unref, createTextVNode, toDisplayString, Fragment, renderList, createBlock } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import "./ControlsComponentPropItem.vue.js";
+import _sfc_main$1 from "./ControlsComponentPropItem.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-controls-component-props" };
+const _hoisted_2 = { class: "htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ControlsComponentProps",
+  props: {
+    variant: {},
+    definition: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          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"]
+          ]),
+          createElementVNode("div", null, [
+            _cache[0] || (_cache[0] = createElementVNode("span", { class: "htw-opacity-30" }, "<", -1)),
+            createTextVNode(toDisplayString(__props.definition.name), 1),
+            _cache[1] || (_cache[1] = createElementVNode("span", { class: "htw-opacity-30" }, ">", -1))
+          ])
+        ]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.definition.props, (prop) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key: prop.name,
+            variant: __props.variant,
+            component: __props.definition,
+            definition: prop
+          }, null, 8, ["variant", "component", "definition"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/ControlsComponentState.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ControlsComponentState.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/ControlsComponentState.vue2.js

@@ -0,0 +1,41 @@
+import { defineComponent, computed, resolveDirective, createElementBlock, openBlock, createElementVNode, withDirectives, createVNode, unref, Fragment, renderList, createBlock } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import "./ControlsComponentStateItem.vue.js";
+import _sfc_main$1 from "./ControlsComponentStateItem.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-controls-component-init-state" };
+const _hoisted_2 = { class: "htw-p-2 htw-flex htw-items-center htw-gap-1" };
+const _sfc_main = /* @__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, [
+        createElementVNode("div", _hoisted_2, [
+          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"]
+          ]),
+          _cache[0] || (_cache[0] = createElementVNode("div", null, " State ", -1))
+        ]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(stateKeys.value, (key) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key,
+            item: key,
+            variant: __props.variant
+          }, null, 8, ["item", "variant"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/ControlsComponentStateItem.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ControlsComponentStateItem.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/ControlsComponentStateItem.vue2.js

@@ -0,0 +1,46 @@
+import { defineComponent, computed, createBlock, createCommentVNode, openBlock, resolveDynamicComponent } from "@poveste/vendors/vue";
+import { HstJson, HstCheckbox, HstNumber, HstText } from "@poveste/controls";
+"use strict";
+const _sfc_main = /* @__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 HstText;
+        case "number":
+          return HstNumber;
+        case "boolean":
+          return HstCheckbox;
+        case "object":
+        default:
+          return HstJson;
+      }
+    });
+    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);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/PaneTabs.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./PaneTabs.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/PaneTabs.vue2.js

@@ -0,0 +1,114 @@
+import { defineComponent, toRefs, computed, createBlock, openBlock, withCtx, createVNode, createTextVNode, normalizeClass, unref, createCommentVNode, toDisplayString } from "@poveste/vendors/vue";
+import { useEventsStore } from "../../stores/events.js";
+import "../base/BaseOverflowMenu.vue.js";
+import BaseOverflowTab from "../base/BaseOverflowTab.vue.js";
+import BaseTab from "../base/BaseTab.vue.js";
+import BaseTag from "../base/BaseTag.vue.js";
+import "./StoryDocs.vue.js";
+import { useStoryDoc } from "./StoryDocs.vue2.js";
+import _sfc_main$1 from "../base/BaseOverflowMenu.vue2.js";
+"use strict";
+const _sfc_main = /* @__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$1, { 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(() => [..._cache[3] || (_cache[3] = [
+              createTextVNode(" Controls ", -1)
+            ])]),
+            _: 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(() => [..._cache[4] || (_cache[4] = [
+              createTextVNode(" Docs ", -1)
+            ])]),
+            _: 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(() => [
+              _cache[5] || (_cache[5] = createTextVNode(" Events ", -1)),
+              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(() => [..._cache[0] || (_cache[0] = [
+              createTextVNode(" Controls ", -1)
+            ])]),
+            _: 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(() => [..._cache[1] || (_cache[1] = [
+              createTextVNode(" Docs ", -1)
+            ])]),
+            _: 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(() => [
+              _cache[2] || (_cache[2] = createTextVNode(" Events ", -1)),
+              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
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StatePresets.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./StatePresets.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StatePresets.vue2.js

@@ -0,0 +1,193 @@
+import { defineComponent, computed, onMounted, ref, resolveDirective, createElementBlock, openBlock, createElementVNode, withDirectives, createVNode, withKeys, unref, isRef, withCtx, createCommentVNode, toDisplayString, createBlock, withModifiers, vModelText, normalizeClass, nextTick } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { clone, omit, applyState } from "@poveste/shared";
+import { useStorage, useTimeoutFn, onClickOutside } from "@poveste/vendors/vue-use";
+import { toRawDeep } from "../../util/state.js";
+import "../base/BaseSelect.vue.js";
+import _sfc_main$1 from "../base/BaseSelect.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center" };
+const _hoisted_2 = ["onUpdate:modelValue"];
+const _hoisted_3 = {
+  key: 1,
+  class: "htw-flex htw-items-center htw-gap-2"
+};
+const _hoisted_4 = { class: "htw-flex-1 htw-truncate" };
+const _hoisted_5 = { class: "htw-flex htw-gap-2 htw-items-center" };
+const _hoisted_6 = { class: "htw-flex-1 htw-truncate" };
+const DEFAULT_ID = "default";
+const _sfc_main = /* @__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, [
+        createElementVNode("div", {
+          ref_key: "select",
+          ref: select,
+          class: "htw-flex-1 htw-min-w-0"
+        }, [
+          createVNode(_sfc_main$1, {
+            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)), [
+                [vModelText, unref(presetStates).get(unref(selectedOption)).label]
+              ]) : (openBlock(), createElementBlock("div", _hoisted_3, [
+                createElementVNode("span", _hoisted_4, 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 }) => [
+              createElementVNode("div", _hoisted_5, [
+                createElementVNode("span", _hoisted_6, 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"]
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StoryControls.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./StoryControls.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StoryControls.vue2.js

@@ -0,0 +1,87 @@
+import { defineComponent, ref, watch, computed, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, createVNode, withCtx, unref, Fragment, renderList } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import BaseEmpty from "../base/BaseEmpty.vue.js";
+import "../story/GenericRenderStory.vue.js";
+import "./ControlsComponentProps.vue.js";
+import "./ControlsComponentState.vue.js";
+import "./StatePresets.vue.js";
+import _sfc_main$1 from "./StatePresets.vue2.js";
+import _sfc_main$2 from "../story/GenericRenderStory.vue2.js";
+import _sfc_main$3 from "./ControlsComponentState.vue2.js";
+import _sfc_main$4 from "./ControlsComponentProps.vue2.js";
+"use strict";
+const _hoisted_1 = {
+  "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 = { class: "htw-h-9 htw-flex-none htw-px-2 htw-flex htw-items-center" };
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = { key: 3 };
+const _sfc_main = /* @__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) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          ready.value || !hasCustomControls.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            story: __props.story,
+            variant: __props.variant
+          }, null, 8, ["story", "variant"])) : createCommentVNode("", true)
+        ]),
+        hasCustomControls.value ? (openBlock(), createBlock(_sfc_main$2, {
+          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, [
+          createVNode(_sfc_main$3, {
+            class: "htw-flex-none htw-my-2",
+            variant: __props.variant
+          }, null, 8, ["variant"])
+        ])) : !__props.variant.state?._hPropDefs?.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"
+            }),
+            _cache[1] || (_cache[1] = createElementVNode("span", null, "No controls available for this story", -1))
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        __props.variant.state?._hPropDefs?.length ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.variant.state._hPropDefs, (def, index) => {
+            return openBlock(), createBlock(_sfc_main$4, {
+              key: index,
+              variant: __props.variant,
+              definition: def,
+              class: "htw-flex-none htw-my-2"
+            }, null, 8, ["variant", "definition"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/panel/StoryDocs.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./StoryDocs.vue2.js";
+import { useStoryDoc } from "./StoryDocs.vue2.js";
+"use strict";
+export {
+  _sfc_main as default,
+  useStoryDoc
+};