@histoire/controls 0.17.16 → 1.0.0-alpha.1

package/.histoire/dist/assets/SearchPane.daa2675c.js

@@ -0,0 +1,426 @@
+import { _ as __vitePreload } from "./global-components.6736b2a9.js";
+import { a9 as markRaw, d as defineComponent, r as ref, ah as useFocus, w as watch, ai as refDebounced, c as computed, a as openBlock, b as createElementBlock, e as createBaseVNode, l as createVNode, i as unref, I as Icon, M as withDirectives, Z as vModelText, v as withKeys, g as withModifiers, j as createBlock, k as withCtx, F as Fragment, J as renderList, m as createCommentVNode, R as createTextVNode, aj as flexsearch, Q as useCssVars, ak as toRefs, al as useRouter, n as normalizeClass, t as toDisplayString } from "./vendor.2833ae3d.js";
+import { u as useStoryStore, _ as _export_sfc, a as useScrollOnActive, o as onKeyboardShortcut, B as BaseListItemLink } from "./bundle-main.784e5bf7.js";
+import { B as BaseEmpty } from "./BaseEmpty.d30f3079.js";
+let searchData$1 = { "index": { "reg": '{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1,"8":1,"9":1,"10":1,"11":1,"12":1,"13":1,"14":1,"15":1,"16":1,"17":1,"18":1,"19":1,"20":1,"21":1,"22":1,"23":1,"24":1,"25":1,"26":1,"27":1,"28":1,"29":1,"30":1,"31":1,"32":1,"33":1,"34":1,"35":1,"36":1,"37":1,"38":1,"39":1,"40":1,"41":1,"42":1}', "text.cfg": '{"doc":0,"opt":1}', "text.map": '[{"s":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],"st":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],"t":[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"ta":[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"tal":[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"talf":[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"talfe":[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"talfem":[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"talfemt":[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42]},{"k":[0,1,2,3,4,5,6,7,8],"ke":[0,1],"kek":[0,1],"kekp":[0,1],"kekpo":[0,1],"kekpos":[0,1],"ko":[2,3,4,5,6,7,8],"kol":[2,3,4,5,6,7,8],"kolo":[2,3,4,5,6,7,8],"kolor":[2,3,4,5,6,7,8],"t":[9,10,11,12,21,22,23,24,25],"to":[9,10,11,12],"tok":[9,10,11,12],"toke":[9,10,11,12],"tokem":[9,10,11,12],"m":[13,14,31],"mo":[13,14],"mom":[13,14],"momp":[13,14],"mompe":[13,14],"momper":[13,14],"se":[15,16,17,18,19,20],"sel":[15,16,17,18,19,20],"sele":[15,16,17,18,19,20],"selek":[15,16,17,18,19,20],"selekt":[15,16,17,18,19,20],"te":[21,22,23,24,25,28],"tes":[21,22,23,24,25,28],"test":[21,22,23,24,25,28],"testa":[21,22],"testar":[21,22],"testare":[21,22],"testarea":[21,22],"p":[27,29,30,38,39],"pa":[27,30],"pak":[27],"pakr":[27],"pakro":[27],"pakrom":[27],"pakromt":[27],"po":[29,38,39],"por":[29,38,39],"port":[29,38,39],"porte":[29,38,39],"porter":[29,38,39],"pat":[30],"pate":[30],"patem":[30],"patemk":[30],"ma":[31],"mar":[31],"mark":[31],"marke":[31],"markem":[31],"f":[32,33,34,40,42],"fo":[32,33,34,42],"fom":[32,33,34],"fomt":[32,33,34],"l":[35,36],"le":[35,36],"let":[35],"lete":[35],"leter":[35],"lem":[36],"leme":[36],"tr":[37],"tro":[37],"trop":[37],"fe":[40],"fet":[40],"e":[41],"ek":[41],"ekt":[41],"fol":[42]},{"p":[1],"pl":[1],"pla":[1],"plak":[1],"plakr":[1],"plakro":[1],"plakrom":[1],"plakromt":[1],"sa":[2,3,4,5,6,7,8,37],"sat":[2,3,4,5,6,7,8,37],"sate":[2,3,4,5,6,7,8],"sates":[2,3,4,5,6,7,8],"k":[9,10,27,28,29,42],"kr":[9,10],"kre":[9,10],"kret":[9,10],"l":[11,12],"le":[11,12],"les":[11,12],"lest":[11,12],"t":[14,16],"te":[14,16],"tef":[14,16,22,24],"tefa":[14,16,22,24],"tefao":[14,16,22,24],"tefaol":[14,16,22,24],"tefaolt":[14,16,22,24],"m":[17,25],"mo":[17,25],"o":[18,19,20],"op":[18,19,20],"opt":[18,19,20],"opte":[18,19,20],"opteo":[18,19,20],"opteom":[18,19,20],"opteoms":[18,19,20],"ko":[27,28,29,42],"kol":[27,28,29],"kolo":[27,28,29],"kolor":[27,28,29],"s":[32,35,37],"se":[32],"ses":[32],"sese":[32],"fe":[33,39],"fek":[33],"fekt":[33],"fa":[34],"fam":[34],"fame":[34],"famel":[34],"famele":[34],"sp":[35],"spa":[35],"spak":[35],"spake":[35],"spakem":[35],"spakemk":[35],"e":[36],"ek":[36],"ekt":[36],"sato":[37],"satof":[37],"r":[38],"ra":[38],"rat":[38],"rate":[38],"rateo":[38],"rateos":[38],"f":[39],"fet":[39],"kom":[42],"komf":[42],"komfe":[42],"komfek":[42]},{"t":[3,5],"te":[3,5,10,12],"tef":[3,10,12],"tefa":[3,10,12],"tefao":[3,10,12],"tefaol":[3,10,12],"tefaolt":[3,10,12],"p":[4,6],"pa":[4],"pak":[4],"pakr":[4],"pakro":[4],"pakrom":[4],"pakromt":[4],"tes":[5],"test":[5],"po":[6],"por":[6],"port":[6],"porte":[6],"porter":[6],"f":[7],"fe":[7],"fet":[7],"l":[8,17,25],"lo":[8],"lom":[8],"lomk":[8],"la":[17,25],"lap":[17,25],"lape":[17,25],"lapel":[17,25],"a":[18,19,20],"as":[18,19,20]},{"se":[7],"sea":[7],"sear":[7],"seark":[7],"m":[8],"ma":[8],"mam":[8],"mame":[8],"mames":[8],"opk":[18],"opke":[18],"opkek":[18],"opkekt":[18],"ar":[19,20],"ara":[19,20]},{"of":[19,20]},{"opk":[19],"opke":[19],"opkek":[19],"opkekt":[19],"opkekts":[19],"str":[20],"stre":[20],"strem":[20],"stremk":[20],"stremks":[20]},{},{}]', "text.ctx": "[{}]" }, "idMap": { "0": { "id": "src-components-checkbox-hstcheckbox-story-vue", "kind": "story" }, "1": { "id": "src-components-checkbox-hstcheckbox-story-vue:src-components-checkbox-hstcheckbox-story-vue-0", "kind": "variant" }, "2": { "id": "src-components-design-tokens-hstcolorshades-story-vue", "kind": "story" }, "3": { "id": "src-components-design-tokens-hstcolorshades-story-vue:src-components-design-tokens-hstcolorshades-story-vue-0", "kind": "variant" }, "4": { "id": "src-components-design-tokens-hstcolorshades-story-vue:src-components-design-tokens-hstcolorshades-story-vue-1", "kind": "variant" }, "5": { "id": "src-components-design-tokens-hstcolorshades-story-vue:src-components-design-tokens-hstcolorshades-story-vue-2", "kind": "variant" }, "6": { "id": "src-components-design-tokens-hstcolorshades-story-vue:src-components-design-tokens-hstcolorshades-story-vue-3", "kind": "variant" }, "7": { "id": "src-components-design-tokens-hstcolorshades-story-vue:src-components-design-tokens-hstcolorshades-story-vue-4", "kind": "variant" }, "8": { "id": "src-components-design-tokens-hstcolorshades-story-vue:src-components-design-tokens-hstcolorshades-story-vue-5", "kind": "variant" }, "9": { "id": "src-components-design-tokens-hsttokengrid-story-vue", "kind": "story" }, "10": { "id": "src-components-design-tokens-hsttokengrid-story-vue:src-components-design-tokens-hsttokengrid-story-vue-0", "kind": "variant" }, "11": { "id": "src-components-design-tokens-hsttokenlist-story-vue", "kind": "story" }, "12": { "id": "src-components-design-tokens-hsttokenlist-story-vue:src-components-design-tokens-hsttokenlist-story-vue-0", "kind": "variant" }, "13": { "id": "src-components-number-hstnumber-story-vue", "kind": "story" }, "14": { "id": "src-components-number-hstnumber-story-vue:src-components-number-hstnumber-story-vue-0", "kind": "variant" }, "15": { "id": "src-components-select-hstselect-story-vue", "kind": "story" }, "16": { "id": "src-components-select-hstselect-story-vue:src-components-select-hstselect-story-vue-0", "kind": "variant" }, "17": { "id": "src-components-select-hstselect-story-vue:src-components-select-hstselect-story-vue-1", "kind": "variant" }, "18": { "id": "src-components-select-hstselect-story-vue:src-components-select-hstselect-story-vue-2", "kind": "variant" }, "19": { "id": "src-components-select-hstselect-story-vue:src-components-select-hstselect-story-vue-3", "kind": "variant" }, "20": { "id": "src-components-select-hstselect-story-vue:src-components-select-hstselect-story-vue-4", "kind": "variant" }, "21": { "id": "src-components-textarea-hsttextarea-story-vue", "kind": "story" }, "22": { "id": "src-components-textarea-hsttextarea-story-vue:src-components-textarea-hsttextarea-story-vue-0", "kind": "variant" }, "23": { "id": "src-components-text-hsttext-story-vue", "kind": "story" }, "24": { "id": "src-components-text-hsttext-story-vue:src-components-text-hsttext-story-vue-0", "kind": "variant" }, "25": { "id": "src-components-text-hsttext-story-vue:src-components-text-hsttext-story-vue-1", "kind": "variant" }, "26": { "id": "tailwind", "kind": "story" }, "27": { "id": "tailwind:background-color", "kind": "variant" }, "28": { "id": "tailwind:text-color", "kind": "variant" }, "29": { "id": "tailwind:border-color", "kind": "variant" }, "30": { "id": "tailwind:padding", "kind": "variant" }, "31": { "id": "tailwind:margin", "kind": "variant" }, "32": { "id": "tailwind:font-size", "kind": "variant" }, "33": { "id": "tailwind:font-weight", "kind": "variant" }, "34": { "id": "tailwind:font-family", "kind": "variant" }, "35": { "id": "tailwind:letter-spacing", "kind": "variant" }, "36": { "id": "tailwind:line-height", "kind": "variant" }, "37": { "id": "tailwind:drop-shadow", "kind": "variant" }, "38": { "id": "tailwind:border-radius", "kind": "variant" }, "39": { "id": "tailwind:border-width", "kind": "variant" }, "40": { "id": "tailwind:width", "kind": "variant" }, "41": { "id": "tailwind:height", "kind": "variant" }, "42": { "id": "tailwind:full-config", "kind": "variant" } } };
+function pipeline(a, b, c, d) {
+  if (a && (b && (a = replace(a, b)), this.matcher && (a = replace(a, this.matcher)), this.stemmer && 1 < a.length && (a = replace(a, this.stemmer)), d && 1 < a.length && (a = collapse(a)), c || c === "")) {
+    const b2 = a.split(c);
+    return this.filter ? filter$1(b2, this.filter) : b2;
+  }
+  return a;
+}
+const regex_whitespace = /[\p{Z}\p{S}\p{P}\p{C}]+/u;
+const regex_normalize = /[\u0300-\u036f]/g;
+function normalize(a) {
+  return a.normalize && (a = a.normalize("NFD").replace(regex_normalize, "")), a;
+}
+function replace(a, b) {
+  for (let c = 0, d = b.length; c < d && (a = a.replace(b[c], b[c + 1]), !!a); c += 2)
+    ;
+  return a;
+}
+function regex(a) {
+  return new RegExp(a, "g");
+}
+function collapse(a) {
+  let b = "", c = "";
+  for (let d, e = 0, f = a.length; e < f; e++)
+    (d = a[e]) !== c && (b += c = d);
+  return b;
+}
+function filter$1(a, b) {
+  const c = a.length, d = [];
+  for (let e = 0, f = 0; e < c; e++) {
+    const c2 = a[e];
+    c2 && !b[c2] && (d[f++] = c2);
+  }
+  return d;
+}
+const regex_a = regex("[\xE0\xE1\xE2\xE3\xE4\xE5]"), regex_e = regex("[\xE8\xE9\xEA\xEB]"), regex_i = regex("[\xEC\xED\xEE\xEF]"), regex_o = regex("[\xF2\xF3\xF4\xF5\xF6\u0151]"), regex_u = regex("[\xF9\xFA\xFB\xFC\u0171]"), regex_y = regex("[\xFD\u0177\xFF]"), regex_n = regex("\xF1"), regex_c = regex("[\xE7c]"), regex_s = regex("\xDF"), regex_and = regex(" & "), pairs$1 = [regex_a, "a", regex_e, "e", regex_i, "i", regex_o, "o", regex_u, "u", regex_y, "y", regex_n, "n", regex_c, "k", regex_s, "s", regex_and, " and "];
+function encode$2(a) {
+  return a = "" + a, pipeline.call(this, normalize(a).toLowerCase(), !a.normalize && pairs$1, regex_whitespace, false);
+}
+const regex_strip = /[^a-z0-9]+/, soundex = { b: "p", v: "f", w: "f", z: "s", x: "s", \u00DF: "s", d: "t", n: "m", c: "k", g: "k", j: "k", q: "k", i: "e", y: "e", u: "o" };
+function encode$1(a) {
+  a = encode$2.call(this, a).join(" ");
+  const b = [];
+  if (a) {
+    const c = a.split(regex_strip), d = c.length;
+    for (let e, f = 0, g = 0; f < d; f++)
+      if ((a = c[f]) && (!this.filter || !this.filter[a])) {
+        e = a[0];
+        let c2 = soundex[e] || e, d2 = c2;
+        for (let b2 = 1; b2 < a.length; b2++) {
+          e = a[b2];
+          const f2 = soundex[e] || e;
+          f2 && f2 !== d2 && (c2 += f2, d2 = f2);
+        }
+        b[g++] = c2;
+      }
+  }
+  return b;
+}
+var charset = { encode, rtl: false, tokenize: "" };
+const regex_ae = regex("ae"), regex_oe = regex("oe"), regex_sh = regex("sh"), regex_th = regex("th"), regex_ph = regex("ph"), regex_pf = regex("pf"), pairs = [regex_ae, "a", regex_oe, "o", regex_sh, "s", regex_th, "t", regex_ph, "f", regex_pf, "f", regex("(?![aeo])h(?![aeo])"), "", regex("(?!^[aeo])h(?!^[aeo])"), ""];
+function encode(a, b) {
+  return a && (a = encode$1.call(this, a).join(" "), 2 < a.length && (a = replace(a, pairs)), !b && (1 < a.length && (a = collapse(a)), a && (a = a.split(" ")))), a;
+}
+const filter = ["a", "about", "above", "after", "again", "against", "all", "also", "am", "an", "and", "any", "are", "aren't", "as", "at", "be", "because", "been", "before", "being", "below", "both", "but", "by", "can", "cannot", "can't", "come", "could", "couldn't", "did", "didn't", "do", "does", "doesn't", "doing", "dont", "down", "during", "each", "even", "few", "first", "for", "from", "further", "get", "go", "had", "hadn't", "has", "hasn't", "have", "haven't", "having", "he", "hed", "her", "here", "here's", "hers", "herself", "hes", "him", "himself", "his", "how", "how's", "i", "id", "if", "ill", "im", "in", "into", "is", "isn't", "it", "it's", "itself", "i've", "just", "know", "let's", "like", "make", "me", "more", "most", "mustn't", "my", "myself", "new", "no", "nor", "not", "now", "of", "off", "on", "once", "only", "or", "other", "ought", "our", "our's", "ourselves", "out", "over", "own", "same", "say", "see", "shan't", "she", "she'd", "shell", "shes", "should", "shouldn't", "so", "some", "such", "than", "that", "that's", "the", "their", "theirs", "them", "themselves", "then", "there", "there's", "these", "they", "they'd", "they'll", "they're", "they've", "this", "those", "through", "time", "to", "too", "until", "up", "us", "very", "want", "was", "wasn't", "way", "we", "wed", "well", "were", "weren't", "we've", "what", "what's", "when", "when's", "where", "where's", "which", "while", "who", "whom", "who's", "why", "why's", "will", "with", "won't", "would", "wouldn't", "you", "you'd", "you'll", "your", "you're", "your's", "yourself", "yourselves", "you've"];
+const stemmer = { ational: "ate", iveness: "ive", fulness: "ful", ousness: "ous", ization: "ize", tional: "tion", biliti: "ble", icate: "ic", ative: "", alize: "al", iciti: "ic", entli: "ent", ousli: "ous", alism: "al", ation: "ate", aliti: "al", iviti: "ive", ement: "", enci: "ence", anci: "ance", izer: "ize", alli: "al", ator: "ate", logi: "log", ical: "ic", ance: "", ence: "", ness: "", able: "", ible: "", ment: "", eli: "e", bli: "ble", ful: "", ant: "", ent: "", ism: "", ate: "", iti: "", ous: "", ive: "", ize: "", al: "", ou: "", er: "", ic: "" };
+const matcher = {};
+var language = { filter, stemmer, matcher };
+const _hoisted_1$1 = ["data-selected"];
+const _hoisted_2$1 = { class: "htw-flex-1" };
+const _hoisted_3 = { class: "htw-flex" };
+const _hoisted_4 = { class: "htw-ml-auto htw-opacity-40" };
+const _hoisted_5 = {
+  key: 0,
+  class: "htw-flex htw-items-center htw-gap-0.5 htw-opacity-60"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  name: "SearchItem",
+  props: {
+    result: {
+      type: Object,
+      required: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    useCssVars((_ctx) => ({
+      "0e1c785e": __props.result.iconColor
+    }));
+    const el = ref();
+    const { selected } = toRefs(props);
+    useScrollOnActive(selected, el);
+    const router = useRouter();
+    onKeyboardShortcut(["enter"], () => {
+      if (!props.selected)
+        return;
+      router.push(props.result.route);
+      emit("close");
+    });
+    const defaultIcons = {
+      story: "carbon:cube",
+      variant: "carbon:cube"
+    };
+    const kindLabels = {
+      story: "Story",
+      variant: "Variant"
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el,
+        "data-test-id": "search-item",
+        "data-selected": unref(selected) ? "" : void 0
+      }, [
+        createVNode(BaseListItemLink, {
+          to: __props.result.route,
+          "is-active": unref(selected),
+          class: "htw-px-6 htw-py-4 htw-gap-4",
+          onNavigate: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+        }, {
+          default: withCtx(() => {
+            var _a, _b;
+            return [
+              createVNode(unref(Icon), {
+                icon: (_a = __props.result.icon) != null ? _a : defaultIcons[__props.result.kind],
+                class: normalizeClass(["htw-w-4 htw-h-4", [
+                  !unref(selected) ? [
+                    __props.result.iconColor ? "bind-icon-color" : {
+                      "htw-text-primary-500": __props.result.kind === "story",
+                      "htw-text-gray-500": __props.result.kind === "variant"
+                    }
+                  ] : []
+                ]])
+              }, null, 8, ["icon", "class"]),
+              createBaseVNode("div", _hoisted_2$1, [
+                createBaseVNode("div", _hoisted_3, [
+                  createTextVNode(toDisplayString(__props.result.title) + " ", 1),
+                  createBaseVNode("span", _hoisted_4, toDisplayString(kindLabels[__props.result.kind]), 1)
+                ]),
+                ((_b = __props.result.path) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.result.path, (p, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: index,
+                      class: "htw-flex htw-items-center htw-gap-0.5"
+                    }, [
+                      index > 0 ? (openBlock(), createBlock(unref(Icon), {
+                        key: 0,
+                        icon: "carbon:chevron-right",
+                        class: "htw-w-4 htw-h-4 htw-mt-0.5 htw-opacity-50"
+                      })) : createCommentVNode("", true),
+                      createBaseVNode("span", null, toDisplayString(p), 1)
+                    ]);
+                  }), 128))
+                ])) : createCommentVNode("", true)
+              ])
+            ];
+          }),
+          _: 1
+        }, 8, ["to", "is-active"])
+      ], 8, _hoisted_1$1);
+    };
+  }
+});
+var SearchItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-7856c5b0"]]);
+const searchData = markRaw(searchData$1);
+const _hoisted_1 = /* @__PURE__ */ createTextVNode(" No results ");
+const _hoisted_2 = {
+  key: 1,
+  class: "htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "SearchPane",
+  props: {
+    shown: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    close: () => true
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const DocSearchData = () => __vitePreload(() => import("./search-docs-data.b9a75539.js"), true ? ["assets/search-docs-data.b9a75539.js","assets/vendor.2833ae3d.js"] : void 0);
+    function close() {
+      emit("close");
+    }
+    const input = ref();
+    const { focused } = useFocus(input, {
+      initialValue: true
+    });
+    watch(() => props.shown, (value) => {
+      if (value) {
+        requestAnimationFrame(() => {
+          focused.value = true;
+          input.value.select();
+        });
+      }
+    });
+    const searchInputText = ref("");
+    const rateLimitedSearch = refDebounced(searchInputText, 50);
+    const storyStore = useStoryStore();
+    let titleSearchIndex;
+    let titleIdMap;
+    function createIndex() {
+      return new flexsearch.Document({
+        preset: "match",
+        document: {
+          id: "id",
+          index: [
+            "text"
+          ]
+        },
+        worker: true,
+        charset,
+        language,
+        tokenize: "forward"
+      });
+    }
+    async function loadSearchIndex(data) {
+      titleSearchIndex = createIndex();
+      for (const key of Object.keys(data.index)) {
+        await titleSearchIndex.import(key, data.index[key]);
+      }
+      titleIdMap = data.idMap;
+    }
+    loadSearchIndex(searchData);
+    let docSearchIndex;
+    let docIdMap;
+    async function loadDocSearchIndex() {
+      async function load(data) {
+        docSearchIndex = createIndex();
+        for (const key of Object.keys(data.index)) {
+          await docSearchIndex.import(key, data.index[key]);
+        }
+        docIdMap = data.idMap;
+        if (rateLimitedSearch.value) {
+          searchOnDocField(rateLimitedSearch.value);
+        }
+      }
+      const searchDataModule = await DocSearchData();
+      load(searchDataModule.searchData);
+      searchDataModule.onUpdate((searchData2) => {
+        load(searchData2);
+      });
+    }
+    loadDocSearchIndex();
+    const titleResults = ref([]);
+    watch(rateLimitedSearch, async (value) => {
+      const list = [];
+      const raw = await titleSearchIndex.search(value);
+      let rank = 0;
+      for (const field of raw) {
+        for (const id of field.result) {
+          const idMapData = titleIdMap[id];
+          if (!idMapData)
+            continue;
+          switch (idMapData.kind) {
+            case "story": {
+              list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
+              rank++;
+              break;
+            }
+            case "variant": {
+              const [storyId] = idMapData.id.split(":");
+              const story = storyStore.getStoryById(storyId);
+              const variant = storyStore.getVariantById(idMapData.id);
+              list.push(variantResultFactory(story, variant, rank));
+              rank++;
+              break;
+            }
+          }
+        }
+      }
+      titleResults.value = list;
+    });
+    const docsResults = ref([]);
+    async function searchOnDocField(query) {
+      if (docSearchIndex) {
+        const list = [];
+        const raw = await docSearchIndex.search(query);
+        let rank = 0;
+        for (const field of raw) {
+          for (const id of field.result) {
+            const idMapData = docIdMap[id];
+            if (!idMapData)
+              continue;
+            switch (idMapData.kind) {
+              case "story": {
+                list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
+                rank++;
+                break;
+              }
+            }
+          }
+        }
+        docsResults.value = list;
+      }
+    }
+    watch(rateLimitedSearch, searchOnDocField);
+    function storyResultFactory(story, rank) {
+      return {
+        kind: "story",
+        rank,
+        id: `story:${story.id}`,
+        title: story.title,
+        route: {
+          name: "story",
+          params: {
+            storyId: story.id
+          }
+        },
+        path: story.file.path.slice(0, -1),
+        icon: story.icon,
+        iconColor: story.iconColor
+      };
+    }
+    function variantResultFactory(story, variant, rank) {
+      var _a;
+      return {
+        kind: "variant",
+        rank,
+        id: `variant:${story.id}:${variant.id}`,
+        title: variant.title,
+        route: {
+          name: "story",
+          params: {
+            storyId: story.id
+          },
+          query: {
+            variantId: variant.id
+          }
+        },
+        path: [...(_a = story.file.path) != null ? _a : [], story.title],
+        icon: variant.icon,
+        iconColor: variant.iconColor
+      };
+    }
+    const results = computed(() => {
+      const list = [...titleResults.value];
+      const seen = {};
+      for (const r of titleResults.value) {
+        seen[r.id] = true;
+      }
+      for (const r of docsResults.value) {
+        if (!seen[r.id]) {
+          list.push(r);
+        }
+      }
+      return list;
+    });
+    const selectedIndex = ref(0);
+    watch(results, () => {
+      selectedIndex.value = 0;
+    });
+    function selectNext() {
+      selectedIndex.value++;
+      if (selectedIndex.value > results.value.length - 1) {
+        selectedIndex.value = 0;
+      }
+    }
+    function selectPrevious() {
+      selectedIndex.value--;
+      if (selectedIndex.value < 0) {
+        selectedIndex.value = results.value.length - 1;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", {
+          class: "htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500",
+          onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
+        }, [
+          createVNode(unref(Icon), {
+            icon: "carbon:search",
+            class: "flex-none htw-w-4 htw-h-4"
+          }),
+          withDirectives(createBaseVNode("input", {
+            ref_key: "input",
+            ref: input,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
+            placeholder: "Search for stories, variants...",
+            class: "htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none",
+            onKeydown: [
+              _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => selectNext(), ["prevent"]), ["down"])),
+              _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => selectPrevious(), ["prevent"]), ["up"])),
+              _cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"]))
+            ]
+          }, null, 544), [
+            [vModelText, searchInputText.value]
+          ])
+        ]),
+        unref(rateLimitedSearch) && !unref(results).length ? (openBlock(), createBlock(BaseEmpty, {
+          key: 0,
+          class: "no-animation"
+        }, {
+          default: withCtx(() => [
+            _hoisted_1
+          ]),
+          _: 1
+        })) : unref(results).length ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(results), (result, index) => {
+            return openBlock(), createBlock(SearchItem, {
+              key: result.id,
+              result,
+              selected: index === selectedIndex.value,
+              onClose: _cache[5] || (_cache[5] = ($event) => close())
+            }, null, 8, ["result", "selected"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export { _sfc_main as default };