@ohos-ports/histoire-app 1.0.0-beta.0

package/dist/bundled/components/command/CommandPrompts.vue2.js

@@ -0,0 +1,91 @@
+import { defineComponent, reactive, ref, onMounted, createElementBlock, openBlock, withKeys, withModifiers, createElementVNode, toDisplayString, Fragment, renderList, createBlock, resolveDynamicComponent, createVNode, withCtx, nextTick } from "@histoire/vendors/vue";
+import { getCommandContext, executeCommand } from "../../util/commands.js";
+import "../base/BaseButton.vue.js";
+import "../base/BaseKeyboardShortcut.vue.js";
+import "./PromptSelect.vue.js";
+import "./PromptText.vue.js";
+import _sfc_main$1 from "./PromptSelect.vue2.js";
+import _sfc_main$2 from "./PromptText.vue2.js";
+import _sfc_main$3 from "../base/BaseButton.vue2.js";
+import _sfc_main$4 from "../base/BaseKeyboardShortcut.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "htw-p-4 htw-opacity-70" };
+const _hoisted_2 = { class: "htw-flex htw-justify-end htw-gap-2 htw-p-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CommandPrompts",
+  props: {
+    command: {}
+  },
+  emits: ["close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const promptTypes = {
+      text: _sfc_main$2,
+      select: _sfc_main$1
+    };
+    const answers = reactive({});
+    for (const prompt of props.command.prompts) {
+      let defaultValue;
+      if (typeof prompt.defaultValue === "function") {
+        defaultValue = prompt.defaultValue(answers);
+      } else {
+        defaultValue = prompt.defaultValue;
+      }
+      answers[prompt.field] = defaultValue;
+    }
+    function submit() {
+      const params = props.command.getParams ? props.command.getParams({ ...getCommandContext(), answers }) : answers;
+      executeCommand(props.command, params);
+      emit("close");
+    }
+    const promptComps = ref([]);
+    function focusPrompt(index) {
+      nextTick(() => {
+        promptComps.value[index]?.focus?.();
+      });
+    }
+    onMounted(() => {
+      focusPrompt(0);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("form", {
+        class: "histoire-command-prompts htw-flex htw-flex-col",
+        onSubmit: _cache[0] || (_cache[0] = withModifiers(($event) => submit(), ["prevent"])),
+        onKeyup: _cache[1] || (_cache[1] = withKeys(($event) => _ctx.$emit("close"), ["escape"]))
+      }, [
+        createElementVNode("div", _hoisted_1, toDisplayString(__props.command.label), 1),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.command.prompts, (prompt, index) => {
+          return openBlock(), createBlock(resolveDynamicComponent(promptTypes[prompt.type]), {
+            key: prompt.field,
+            ref_for: true,
+            ref_key: "promptComps",
+            ref: promptComps,
+            modelValue: answers[prompt.field],
+            "onUpdate:modelValue": ($event) => answers[prompt.field] = $event,
+            prompt,
+            answers,
+            index,
+            class: "hover:htw-bg-gray-500/10 focus-within:htw-bg-gray-500/5",
+            onNext: ($event) => focusPrompt(index + 1)
+          }, null, 40, ["modelValue", "onUpdate:modelValue", "prompt", "answers", "index", "onNext"]);
+        }), 128)),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$3, {
+            type: "submit",
+            class: "htw-px-4 htw-py-2 htw-flex htw-items-start htw-gap-2"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$4, { shortcut: "Enter" }),
+              _cache[2] || (_cache[2] = createElementVNode("span", null, "Submit", -1))
+            ]),
+            _: 1
+          })
+        ])
+      ], 32);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/command/CommandPromptsModal.vue.js

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

package/dist/bundled/components/command/CommandPromptsModal.vue2.js

@@ -0,0 +1,45 @@
+import { defineComponent, defineAsyncComponent, createElementBlock, createCommentVNode, openBlock, createElementVNode, createVNode, unref } from "@histoire/vendors/vue";
+import { useCommandStore } from "../../stores/command.js";
+"use strict";
+const _hoisted_1 = {
+  key: 0,
+  class: "histoire-command-prompts-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
+};
+const _hoisted_2 = { class: "htw-bg-white dark:htw-bg-gray-900 md:htw-mt-16 md:htw-mx-auto htw-w-screen htw-max-w-[512px] htw-max-h-[80vh] htw-overflow-y-auto htw-scroll-smooth htw-shadow-xl htw-border htw-border-gray-200 dark:htw-border-gray-750 htw-rounded-lg htw-relative htw-divide-y htw-divide-gray-200 dark:htw-divide-gray-850" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CommandPromptsModal",
+  props: {
+    shown: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup(__props, { emit: __emit }) {
+    const CommandPrompts = defineAsyncComponent(() => import("./CommandPrompts.vue.js"));
+    const emit = __emit;
+    function close() {
+      emit("close");
+    }
+    const commandStore = useCommandStore();
+    return (_ctx, _cache) => {
+      return __props.shown ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: "htw-absolute htw-inset-0",
+          onClick: _cache[0] || (_cache[0] = ($event) => close())
+        }),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(CommandPrompts), {
+            command: unref(commandStore).selectedCommand,
+            onClose: _cache[1] || (_cache[1] = ($event) => close())
+          }, null, 8, ["command"])
+        ])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/command/PromptSelect.vue.js

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

package/dist/bundled/components/command/PromptSelect.vue2.js

@@ -0,0 +1,142 @@
+import { defineComponent, computed, ref, watchEffect, createElementBlock, openBlock, withDirectives, createElementVNode, vModelText, createCommentVNode, toDisplayString, createTextVNode, createVNode, withKeys, withModifiers, unref, Fragment, renderList, normalizeClass, createBlock } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { useSelection } from "../../util/select.js";
+import "../base/BaseKeyboardShortcut.vue.js";
+import _sfc_main$1 from "../base/BaseKeyboardShortcut.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-prompt-select htw-relative htw-group" };
+const _hoisted_2 = ["required"];
+const _hoisted_3 = { class: "htw-flex htw-flex-col htw-gap-2 htw-p-2" };
+const _hoisted_4 = { class: "htw-px-2 htw-flex" };
+const _hoisted_5 = {
+  key: 0,
+  class: "htw-opacity-70"
+};
+const _hoisted_6 = { class: "htw-opacity-40 htw-text-sm htw-ml-auto htw-invisible group-focus-within:htw-visible" };
+const _hoisted_7 = { class: "htw-overflow-auto max-h-[300px] htw-mb-2" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "htw-flex-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PromptSelect",
+  props: {
+    modelValue: {},
+    prompt: {},
+    answers: {}
+  },
+  emits: ["update:modelValue", "next"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = computed({
+      get: () => props.modelValue,
+      set: (value) => {
+        emit("update:modelValue", value);
+        emit("next");
+      }
+    });
+    const input = ref();
+    function focus() {
+      input.value?.focus();
+      input.value?.select();
+    }
+    __expose({
+      focus
+    });
+    const search = ref("");
+    const options = ref([]);
+    let requestId = 0;
+    watchEffect(async () => {
+      if (typeof props.prompt.options === "function") {
+        const rId = ++requestId;
+        const result = await props.prompt.options(search.value, props.answers);
+        if (rId === requestId) {
+          options.value = result;
+        }
+      } else {
+        options.value = props.prompt.options;
+      }
+    });
+    const formattedOptions = computed(() => {
+      return options.value.map((option) => {
+        if (typeof option === "string") {
+          return {
+            value: option,
+            label: option
+          };
+        } else {
+          return option;
+        }
+      });
+    });
+    const {
+      selectedIndex,
+      selectNext,
+      selectPrevious
+    } = useSelection(formattedOptions);
+    function selectIndex(index) {
+      const result = formattedOptions.value[index].value;
+      if (result) {
+        model.value = result;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        withDirectives(createElementVNode("input", {
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+          required: __props.prompt.required,
+          tabindex: "-1",
+          class: "htw-absolute htw-inset-0 htw-opacity-0 htw-pointer-events-none"
+        }, null, 8, _hoisted_2), [
+          [vModelText, model.value]
+        ]),
+        createElementVNode("label", _hoisted_3, [
+          createElementVNode("span", _hoisted_4, [
+            createElementVNode("span", null, toDisplayString(__props.prompt.label), 1),
+            __props.prompt.required ? (openBlock(), createElementBlock("span", _hoisted_5, "*")) : createCommentVNode("", true),
+            createElementVNode("span", _hoisted_6, [
+              _cache[5] || (_cache[5] = createTextVNode(" Press ", -1)),
+              createVNode(_sfc_main$1, { shortcut: "Space" }),
+              _cache[6] || (_cache[6] = createTextVNode(" to select ", -1))
+            ])
+          ]),
+          withDirectives(createElementVNode("input", {
+            ref_key: "input",
+            ref: input,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => search.value = $event),
+            class: "htw-bg-transparent htw-w-full htw-p-2 htw-border htw-border-gray-500/50 focus:htw-border-primary-500/50 htw-rounded htw-outline-none",
+            onKeydown: [
+              _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
+              _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),
+              _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => selectIndex(unref(selectedIndex)), ["prevent"]), ["space"]))
+            ]
+          }, null, 544), [
+            [vModelText, search.value]
+          ])
+        ]),
+        createElementVNode("div", _hoisted_7, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(formattedOptions.value, (option, index) => {
+            return openBlock(), createElementBlock("button", {
+              key: option.value,
+              type: "button",
+              tabindex: "-1",
+              class: normalizeClass([[
+                model.value === option.value ? "htw-bg-primary-500/20" : index === unref(selectedIndex) ? "htw-bg-primary-500/10" : "htw-bg-transparent"
+              ], "htw-w-full htw-text-left htw-px-4 htw-py-2 hover:htw-bg-primary-500/10 htw-flex htw-items-center"]),
+              onClick: ($event) => model.value = option.value
+            }, [
+              createElementVNode("span", _hoisted_9, toDisplayString(option.label), 1),
+              model.value === option.value ? (openBlock(), createBlock(unref(Icon), {
+                key: 0,
+                icon: "carbon:checkmark",
+                class: "htw-w-4 htw-h-4 htw-text-primary-500"
+              })) : createCommentVNode("", true)
+            ], 10, _hoisted_8);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/command/PromptText.vue.js

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

package/dist/bundled/components/command/PromptText.vue2.js

@@ -0,0 +1,67 @@
+import { defineComponent, computed, ref, watch, createElementBlock, openBlock, createElementVNode, withDirectives, createCommentVNode, toDisplayString, vModelText } from "@histoire/vendors/vue";
+"use strict";
+const _hoisted_1 = { class: "histoire-prompt-text" };
+const _hoisted_2 = { class: "htw-flex htw-flex-col htw-gap-2 htw-p-2" };
+const _hoisted_3 = { class: "htw-px-2" };
+const _hoisted_4 = {
+  key: 0,
+  class: "htw-opacity-70"
+};
+const _hoisted_5 = ["required"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PromptText",
+  props: {
+    modelValue: {},
+    prompt: {},
+    answers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = computed({
+      get: () => props.modelValue,
+      set: (value) => emit("update:modelValue", value)
+    });
+    const input = ref();
+    function focus() {
+      input.value?.focus();
+      input.value?.select();
+    }
+    __expose({
+      focus
+    });
+    const defaultValue = computed(() => {
+      if (typeof props.prompt.defaultValue === "function") {
+        return props.prompt.defaultValue(props.answers);
+      } else {
+        return props.prompt.defaultValue;
+      }
+    });
+    watch(defaultValue, (value) => {
+      model.value = value;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("label", _hoisted_2, [
+          createElementVNode("span", _hoisted_3, [
+            createElementVNode("span", null, toDisplayString(__props.prompt.label), 1),
+            __props.prompt.required ? (openBlock(), createElementBlock("span", _hoisted_4, "*")) : createCommentVNode("", true)
+          ]),
+          withDirectives(createElementVNode("input", {
+            ref_key: "input",
+            ref: input,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+            class: "htw-bg-transparent htw-w-full htw-p-2 htw-border htw-border-gray-500/50 focus:htw-border-primary-500/50 htw-rounded htw-outline-none",
+            required: __props.prompt.required
+          }, null, 8, _hoisted_5), [
+            [vModelText, model.value]
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/misc/CheckerboardPattern.vue.js

@@ -0,0 +1,40 @@
+import { createElementBlock, openBlock, createElementVNode } from "@histoire/vendors/vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {};
+const _hoisted_1 = { fill: "none" };
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [
+    createElementVNode("pattern", {
+      id: "checkerboard",
+      width: "64",
+      height: "64",
+      patternUnits: "userSpaceOnUse"
+    }, [
+      createElementVNode("rect", {
+        x: "0",
+        y: "0",
+        width: "32",
+        height: "32",
+        fill: "currentColor"
+      }),
+      createElementVNode("rect", {
+        x: "32",
+        y: "32",
+        width: "32",
+        height: "32",
+        fill: "currentColor"
+      })
+    ], -1),
+    createElementVNode("rect", {
+      x: "0",
+      y: "0",
+      width: "100%",
+      height: "100%",
+      fill: "url(#checkerboard)"
+    }, null, -1)
+  ])]);
+}
+const CheckerboardPattern = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  CheckerboardPattern as default
+};

package/dist/bundled/components/misc/HatchedPattern.vue.js

@@ -0,0 +1,12 @@
+import { createElementBlock, openBlock } from "@histoire/vendors/vue";
+/* empty css                    */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {};
+const _hoisted_1 = { class: "__histoire-hatched-pattern" };
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1);
+}
+const HatchedPattern = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-91561117"]]);
+export {
+  HatchedPattern as default
+};

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 "@histoire/vendors/vue";
+import { HstJson, HstCheckbox, HstNumber, HstText } from "@histoire/controls";
+import { Icon } from "@histoire/vendors/iconify";
+"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 "@histoire/vendors/vue";
+import { Icon } from "@histoire/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 "@histoire/vendors/vue";
+import { Icon } from "@histoire/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 "@histoire/vendors/vue";
+import { HstJson, HstCheckbox, HstNumber, HstText } from "@histoire/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
+};