@scalar/components 0.32.0 → 0.33.0

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.js

@@ -1,8 +1,8 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualTextSearch.vue.script.js";
-/* empty css                                      */
+import ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualTextSearch.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                            */
 //#region src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue
-var ScalarVirtualTextSearch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-95edadbb"]]);
+var ScalarVirtualTextSearch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b843dc7d"]]);
 //#endregion
 export { ScalarVirtualTextSearch_default as default };
 

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualTextSearch.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Floating search bar for ScalarVirtualText\n *\n * Provides find-in-text functionality with match navigation (next/prev)\n * and result count display.\n *\n * @example\n * <ScalarVirtualTextSearch\n *   v-model:query=\"searchQuery\"\n *   :matchCount=\"searchMatches.length\"\n *   :activeMatchIndex=\"activeMatchIndex\"\n *   @next=\"nextMatch\"\n *   @prev=\"prevMatch\"\n *   @close=\"closeSearch\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretDown,\n  ScalarIconCaretUp,\n  ScalarIconMagnifyingGlass,\n  ScalarIconX,\n} from '@scalar/icons'\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** Current search query (v-model) */\n  query: string\n  /** Total number of matches */\n  matchCount: number\n  /** Zero-based index of the currently active match */\n  activeMatchIndex: number\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:query', value: string): void\n  (e: 'next'): void\n  (e: 'prev'): void\n  (e: 'close'): void\n}>()\n\nconst searchInputRef = ref<HTMLInputElement | null>(null)\n\nconst localQuery = ref(props.query)\n\nwatch(\n  () => props.query,\n  (val) => {\n    localQuery.value = val\n  },\n)\n\nwatch(localQuery, (val) => {\n  emit('update:query', val)\n})\n\n/** Focus the input when mounted */\nconst focus = () => {\n  void nextTick(() => searchInputRef.value?.focus())\n}\n\n/** Navigate on Enter / Shift+Enter inside the search input */\nconst handleSearchKeydown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n    if (e.shiftKey) emit('prev')\n    else emit('next')\n  }\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    emit('close')\n  }\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n  <div\n    class=\"scalar-virtual-text-search ml-auto mr-2 mt-2 flex h-fit w-fit items-center gap-1 overflow-visible rounded-lg bg-b-2 px-2 py-1 shadow-md\"\n    @click.stop>\n    <ScalarIconMagnifyingGlass\n      class=\"pointer-events-none size-3.5 shrink-0 text-c-3\" />\n    <input\n      ref=\"searchInputRef\"\n      v-model=\"localQuery\"\n      aria-label=\"Search in text\"\n      autocomplete=\"off\"\n      class=\"scalar-virtual-text-search-input min-w-0 w-36 appearance-none border-none bg-transparent px-1 py-0.5 text-xs text-c-1 outline-none\"\n      placeholder=\"Find...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      @keydown=\"handleSearchKeydown\" />\n    <span\n      v-if=\"localQuery\"\n      class=\"shrink-0 whitespace-nowrap text-xs tabular-nums text-c-3\">\n      {{\n        matchCount > 0\n          ? `${activeMatchIndex + 1} of ${matchCount}`\n          : 'No results'\n      }}\n    </span>\n    <span class=\"mx-0.5 h-3.5 w-px bg-b-3\" />\n    <button\n      aria-label=\"Previous match\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1 disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Previous match (Shift+Enter)\"\n      type=\"button\"\n      @click=\"emit('prev')\">\n      <ScalarIconCaretUp class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Next match\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1 disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Next match (Enter)\"\n      type=\"button\"\n      @click=\"emit('next')\">\n      <ScalarIconCaretDown class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Close search\"\n      class=\"flex size-5 items-center justify-center rounded text-c-3 hover:bg-b-3 hover:text-c-1\"\n      title=\"Close (Escape)\"\n      type=\"button\"\n      @click=\"emit('close')\">\n      <ScalarIconX class=\"size-3\" />\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text-search-input::-webkit-search-cancel-button {\n  display: none;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarVirtualTextSearch.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Floating search bar for ScalarVirtualText\n *\n * Provides find-in-text functionality with match navigation (next/prev)\n * and result count display.\n *\n * @example\n * <ScalarVirtualTextSearch\n *   v-model:query=\"searchQuery\"\n *   :matchCount=\"searchMatches.length\"\n *   :activeMatchIndex=\"activeMatchIndex\"\n *   @next=\"nextMatch\"\n *   @prev=\"prevMatch\"\n *   @close=\"closeSearch\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretDown,\n  ScalarIconCaretUp,\n  ScalarIconMagnifyingGlass,\n  ScalarIconX,\n} from '@scalar/icons'\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** Current search query (v-model) */\n  query: string\n  /** Total number of matches */\n  matchCount: number\n  /** Zero-based index of the currently active match */\n  activeMatchIndex: number\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:query', value: string): void\n  (e: 'next'): void\n  (e: 'prev'): void\n  (e: 'close'): void\n}>()\n\nconst searchInputRef = ref<HTMLInputElement | null>(null)\n\nconst localQuery = ref(props.query)\n\nwatch(\n  () => props.query,\n  (val) => {\n    localQuery.value = val\n  },\n)\n\nwatch(localQuery, (val) => {\n  emit('update:query', val)\n})\n\n/** Focus the input when mounted */\nconst focus = () => {\n  void nextTick(() => searchInputRef.value?.focus())\n}\n\n/** Navigate on Enter / Shift+Enter inside the search input */\nconst handleSearchKeydown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n    if (e.shiftKey) emit('prev')\n    else emit('next')\n  }\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    emit('close')\n  }\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n  <div\n    class=\"scalar-virtual-text-search bg-b-2 mt-2 mr-2 ml-auto flex h-fit w-fit items-center gap-1 overflow-visible rounded-lg px-2 py-1 shadow-md\"\n    @click.stop>\n    <ScalarIconMagnifyingGlass\n      class=\"text-c-3 pointer-events-none size-3.5 shrink-0\" />\n    <input\n      ref=\"searchInputRef\"\n      v-model=\"localQuery\"\n      aria-label=\"Search in text\"\n      autocomplete=\"off\"\n      class=\"scalar-virtual-text-search-input text-c-1 w-36 min-w-0 appearance-none border-none bg-transparent px-1 py-0.5 text-xs outline-none\"\n      placeholder=\"Find...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      @keydown=\"handleSearchKeydown\" />\n    <span\n      v-if=\"localQuery\"\n      class=\"text-c-3 shrink-0 text-xs whitespace-nowrap tabular-nums\">\n      {{\n        matchCount > 0\n          ? `${activeMatchIndex + 1} of ${matchCount}`\n          : 'No results'\n      }}\n    </span>\n    <span class=\"bg-b-3 mx-0.5 h-3.5 w-px\" />\n    <button\n      aria-label=\"Previous match\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Previous match (Shift+Enter)\"\n      type=\"button\"\n      @click=\"emit('prev')\">\n      <ScalarIconCaretUp class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Next match\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Next match (Enter)\"\n      type=\"button\"\n      @click=\"emit('next')\">\n      <ScalarIconCaretDown class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Close search\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded\"\n      title=\"Close (Escape)\"\n      type=\"button\"\n      @click=\"emit('close')\">\n      <ScalarIconX class=\"size-3\" />\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text-search-input::-webkit-search-cancel-button {\n  display: none;\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,101 @@
+import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, toDisplayString, unref, vModelText, watch, withDirectives, withModifiers } from "vue";
+import { ScalarIconCaretDown, ScalarIconCaretUp, ScalarIconMagnifyingGlass, ScalarIconX } from "@scalar/icons";
+//#region src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "text-c-3 shrink-0 text-xs whitespace-nowrap tabular-nums"
+};
+var _hoisted_2 = ["disabled"];
+var _hoisted_3 = ["disabled"];
+var ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarVirtualTextSearch",
+	props: {
+		query: {},
+		matchCount: {},
+		activeMatchIndex: {}
+	},
+	emits: [
+		"update:query",
+		"next",
+		"prev",
+		"close"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const searchInputRef = ref(null);
+		const localQuery = ref(props.query);
+		watch(() => props.query, (val) => {
+			localQuery.value = val;
+		});
+		watch(localQuery, (val) => {
+			emit("update:query", val);
+		});
+		/** Focus the input when mounted */
+		const focus = () => {
+			nextTick(() => searchInputRef.value?.focus());
+		};
+		/** Navigate on Enter / Shift+Enter inside the search input */
+		const handleSearchKeydown = (e) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				if (e.shiftKey) emit("prev");
+				else emit("next");
+			}
+			if (e.key === "Escape") {
+				e.preventDefault();
+				emit("close");
+			}
+		};
+		__expose({ focus });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "scalar-virtual-text-search bg-b-2 mt-2 mr-2 ml-auto flex h-fit w-fit items-center gap-1 overflow-visible rounded-lg px-2 py-1 shadow-md",
+				onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
+			}, [
+				createVNode(unref(ScalarIconMagnifyingGlass), { class: "text-c-3 pointer-events-none size-3.5 shrink-0" }),
+				withDirectives(createElementVNode("input", {
+					ref_key: "searchInputRef",
+					ref: searchInputRef,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localQuery.value = $event),
+					"aria-label": "Search in text",
+					autocomplete: "off",
+					class: "scalar-virtual-text-search-input text-c-1 w-36 min-w-0 appearance-none border-none bg-transparent px-1 py-0.5 text-xs outline-none",
+					placeholder: "Find...",
+					spellcheck: "false",
+					type: "search",
+					onKeydown: handleSearchKeydown
+				}, null, 544), [[vModelText, localQuery.value]]),
+				localQuery.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.matchCount > 0 ? `${__props.activeMatchIndex + 1} of ${__props.matchCount}` : "No results"), 1)) : createCommentVNode("", true),
+				_cache[5] || (_cache[5] = createElementVNode("span", { class: "bg-b-3 mx-0.5 h-3.5 w-px" }, null, -1)),
+				createElementVNode("button", {
+					"aria-label": "Previous match",
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded disabled:pointer-events-none disabled:opacity-30",
+					disabled: __props.matchCount === 0,
+					title: "Previous match (Shift+Enter)",
+					type: "button",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("prev"))
+				}, [createVNode(unref(ScalarIconCaretUp), { class: "size-3" })], 8, _hoisted_2),
+				createElementVNode("button", {
+					"aria-label": "Next match",
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded disabled:pointer-events-none disabled:opacity-30",
+					disabled: __props.matchCount === 0,
+					title: "Next match (Enter)",
+					type: "button",
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("next"))
+				}, [createVNode(unref(ScalarIconCaretDown), { class: "size-3" })], 8, _hoisted_3),
+				createElementVNode("button", {
+					"aria-label": "Close search",
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded",
+					title: "Close (Escape)",
+					type: "button",
+					onClick: _cache[3] || (_cache[3] = ($event) => emit("close"))
+				}, [createVNode(unref(ScalarIconX), { class: "size-3" })])
+			]);
+		};
+	}
+});
+//#endregion
+export { ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarVirtualTextSearch.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarVirtualText/ScalarVirtualTextSearch.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarVirtualTextSearch.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_withModifiers","_createVNode","_unref","_withDirectives","_createElementVNode","_vModelText","_toDisplayString","_createCommentVNode"],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualTextSearch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Floating search bar for ScalarVirtualText\n *\n * Provides find-in-text functionality with match navigation (next/prev)\n * and result count display.\n *\n * @example\n * <ScalarVirtualTextSearch\n *   v-model:query=\"searchQuery\"\n *   :matchCount=\"searchMatches.length\"\n *   :activeMatchIndex=\"activeMatchIndex\"\n *   @next=\"nextMatch\"\n *   @prev=\"prevMatch\"\n *   @close=\"closeSearch\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarIconCaretDown,\n  ScalarIconCaretUp,\n  ScalarIconMagnifyingGlass,\n  ScalarIconX,\n} from '@scalar/icons'\nimport { nextTick, ref, watch } from 'vue'\n\nconst props = defineProps<{\n  /** Current search query (v-model) */\n  query: string\n  /** Total number of matches */\n  matchCount: number\n  /** Zero-based index of the currently active match */\n  activeMatchIndex: number\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:query', value: string): void\n  (e: 'next'): void\n  (e: 'prev'): void\n  (e: 'close'): void\n}>()\n\nconst searchInputRef = ref<HTMLInputElement | null>(null)\n\nconst localQuery = ref(props.query)\n\nwatch(\n  () => props.query,\n  (val) => {\n    localQuery.value = val\n  },\n)\n\nwatch(localQuery, (val) => {\n  emit('update:query', val)\n})\n\n/** Focus the input when mounted */\nconst focus = () => {\n  void nextTick(() => searchInputRef.value?.focus())\n}\n\n/** Navigate on Enter / Shift+Enter inside the search input */\nconst handleSearchKeydown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n    if (e.shiftKey) emit('prev')\n    else emit('next')\n  }\n  if (e.key === 'Escape') {\n    e.preventDefault()\n    emit('close')\n  }\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n  <div\n    class=\"scalar-virtual-text-search bg-b-2 mt-2 mr-2 ml-auto flex h-fit w-fit items-center gap-1 overflow-visible rounded-lg px-2 py-1 shadow-md\"\n    @click.stop>\n    <ScalarIconMagnifyingGlass\n      class=\"text-c-3 pointer-events-none size-3.5 shrink-0\" />\n    <input\n      ref=\"searchInputRef\"\n      v-model=\"localQuery\"\n      aria-label=\"Search in text\"\n      autocomplete=\"off\"\n      class=\"scalar-virtual-text-search-input text-c-1 w-36 min-w-0 appearance-none border-none bg-transparent px-1 py-0.5 text-xs outline-none\"\n      placeholder=\"Find...\"\n      spellcheck=\"false\"\n      type=\"search\"\n      @keydown=\"handleSearchKeydown\" />\n    <span\n      v-if=\"localQuery\"\n      class=\"text-c-3 shrink-0 text-xs whitespace-nowrap tabular-nums\">\n      {{\n        matchCount > 0\n          ? `${activeMatchIndex + 1} of ${matchCount}`\n          : 'No results'\n      }}\n    </span>\n    <span class=\"bg-b-3 mx-0.5 h-3.5 w-px\" />\n    <button\n      aria-label=\"Previous match\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Previous match (Shift+Enter)\"\n      type=\"button\"\n      @click=\"emit('prev')\">\n      <ScalarIconCaretUp class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Next match\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded disabled:pointer-events-none disabled:opacity-30\"\n      :disabled=\"matchCount === 0\"\n      title=\"Next match (Enter)\"\n      type=\"button\"\n      @click=\"emit('next')\">\n      <ScalarIconCaretDown class=\"size-3\" />\n    </button>\n    <button\n      aria-label=\"Close search\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 flex size-5 items-center justify-center rounded\"\n      title=\"Close (Escape)\"\n      type=\"button\"\n      @click=\"emit('close')\">\n      <ScalarIconX class=\"size-3\" />\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text-search-input::-webkit-search-cancel-button {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EASd,MAAM,OAAO;EAOb,MAAM,iBAAiB,IAA6B,IAAI;EAExD,MAAM,aAAa,IAAI,MAAM,KAAK;EAElC,YACQ,MAAM,QACX,QAAQ;GACP,WAAW,QAAQ;EACrB,CACF;EAEA,MAAM,aAAa,QAAQ;GACzB,KAAK,gBAAgB,GAAG;EAC1B,CAAC;;EAGD,MAAM,cAAc;GAClB,eAAoB,eAAe,OAAO,MAAM,CAAC;EACnD;;EAGA,MAAM,uBAAuB,MAAqB;GAChD,IAAI,EAAE,QAAQ,SAAS;IACrB,EAAE,eAAe;IACjB,IAAI,EAAE,UAAU,KAAK,MAAM;SACtB,KAAK,MAAM;GAClB;GACA,IAAI,EAAE,QAAQ,UAAU;IACtB,EAAE,eAAe;IACjB,KAAK,OAAO;GACd;EACF;EAEA,SAAa,EAAE,MAAM,CAAC;;GAIpB,OAAAA,UAAA,GAAAC,mBAmDM,OAAA;IAlDJ,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,KAAAC,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;IACXC,YAC2DC,MAAA,yBAAA,GAAA,EAAzD,OAAM,iDAAgD,CAAA;IACxDC,eAAAC,mBASmC,SAAA;KAR7B,SAAA;KAAJ,KAAI;KACK,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;KACnB,cAAW;KACX,cAAa;KACb,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;KACJ,WAAS;I,gBAPD,CAAAC,YAAA,WAAA,KAAU,C;IASb,WAAA,SADRP,UAAA,GAAAC,mBAQO,QARP,YAQOO,gBAJH,QAAA,aAAU,IAAoB,GAAA,QAAA,mBAAgB,EAAA,MAAW,QAAA,e;IAK7D,OAAA,OAAA,OAAA,KAAAF,mBAAyC,QAAA,EAAnC,OAAM,2BAA0B,GAAA,MAAA,EAAA;IACtCA,mBAQS,UAAA;KAPP,cAAW;KACX,OAAM;KACL,UAAU,QAAA,eAAU;KACrB,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;I,IACZH,YAAoCC,MAAA,iBAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,C;IAEnCE,mBAQS,UAAA;KAPP,cAAW;KACX,OAAM;KACL,UAAU,QAAA,eAAU;KACrB,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;I,IACZH,YAAsCC,MAAA,mBAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,C;IAErCE,mBAOS,UAAA;KANP,cAAW;KACX,OAAM;KACN,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;I,IACZH,YAA8BC,MAAA,WAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,C"}

package/dist/components/ScalarVirtualText/index.js

@@ -1,2 +1 @@
-import ScalarVirtualText_default from "./ScalarVirtualText.vue.js";
-export { ScalarVirtualText_default as ScalarVirtualText };
+export { default as ScalarVirtualText } from "./ScalarVirtualText.vue.js";

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue.js

@@ -1,4 +1,4 @@
-import ScalarWrappingText_vue_vue_type_script_setup_true_lang_default from "./ScalarWrappingText.vue.script.js";
+import ScalarWrappingText_vue_vue_type_script_setup_true_lang_default from "./ScalarWrappingText.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarWrappingText/ScalarWrappingText.vue
 var ScalarWrappingText_default = ScalarWrappingText_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.js","names":[],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr v-if=\"i !== 0\" />{{ word }}\n  </template>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarWrappingText.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr v-if=\"i !== 0\" />{{ word }}\n  </template>\n</template>\n"],"mappings":""}

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,34 @@
+import { PRESETS } from "./constants.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createTextVNode, defineComponent, openBlock, renderList, toDisplayString } from "vue";
+//#region src/components/ScalarWrappingText/ScalarWrappingText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var ScalarWrappingText_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarWrappingText",
+	props: {
+		text: { default: "" },
+		preset: { default: "path" },
+		regex: {}
+	},
+	setup(__props) {
+		/**
+		* Unicode character for zero-width non-joiner
+		*
+		* @see https://en.wikipedia.org/wiki/Zero-width_non-joiner
+		*/
+		const ZWNJ = "⁠";
+		const words = computed(() => {
+			const wrapRegex = new RegExp(__props.regex ?? PRESETS[__props.preset], "g");
+			return __props.text.replace(wrapRegex, `${ZWNJ}$&`).split(ZWNJ).filter(Boolean);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(words.value, (word, i) => {
+				return openBlock(), createElementBlock(Fragment, { key: i }, [i !== 0 ? (openBlock(), createElementBlock("wbr", _hoisted_1)) : createCommentVNode("", true), createTextVNode(toDisplayString(word), 1)], 64);
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { ScalarWrappingText_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarWrappingText.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarWrappingText.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createCommentVNode","_createTextVNode","_toDisplayString"],"sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Wrapping component\n *\n * Adds word breaks to the text to allow improved line wrapping\n *\n * Does not inherit any attributes because it returns a set of html nodes\n *\n * @example\n * <ScalarWrappingText text=\"/this/is/a/long/path/that/needs/to/be/wrapped\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { PRESETS } from './constants'\nimport type { ScalarWrappingTextProps } from './types'\n\nconst {\n  text = '',\n  preset = 'path',\n  regex,\n} = defineProps<ScalarWrappingTextProps>()\n\n/**\n * Unicode character for zero-width non-joiner\n *\n * @see https://en.wikipedia.org/wiki/Zero-width_non-joiner\n */\nconst ZWNJ = '\\u2060'\n\n// We don't want to inherit any attributes because we going to return many nodes\ndefineOptions({ inheritAttrs: false })\n\nconst words = computed<string[]>(() => {\n  const wrapRegex = new RegExp(regex ?? PRESETS[preset], 'g')\n  // Insert the marker before each delimiter\n  const marked = text.replace(wrapRegex, `${ZWNJ}$&`)\n  // Split on the marker and filter out any empty strings\n  return marked.split(ZWNJ).filter(Boolean)\n})\n</script>\n<template>\n  <template\n    v-for=\"(word, i) in words\"\n    :key=\"i\">\n    <wbr v-if=\"i !== 0\" />{{ word }}\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EAKb,MAAM,QAAQ,eAAyB;GACrC,MAAM,YAAY,IAAI,OAAO,QAAA,SAAS,QAAQ,QAAA,SAAS,GAAG;GAI1D,OAFe,QAAA,KAAK,QAAQ,WAAW,GAAG,KAAK,GAExC,CAAA,CAAO,MAAM,IAAI,CAAC,CAAC,OAAO,OAAO;EAC1C,CAAC;;GAGC,OAAAA,UAAA,IAAA,GAAAC,mBAIWC,UAAA,MAAAC,WAHW,MAAA,QAAZ,MAAM,MAAC;IACT,OAAAH,UAAA,GAAAC,mBAAAC,UAAA,EAAA,KAAA,EAAC,GAAA,CACI,MAAC,KAAZF,UAAA,GAAAC,mBAAsB,OAAA,UAAA,K,8BAAGI,gBAAAC,gBAAA,IAAI,GAAA,CAAA,C"}

package/dist/components/ScalarWrappingText/index.js

@@ -1,2 +1 @@
-import ScalarWrappingText_default from "./ScalarWrappingText.vue.js";
-export { ScalarWrappingText_default as ScalarWrappingText };
+export { default as ScalarWrappingText } from "./ScalarWrappingText.vue.js";

package/dist/helpers/index.js

@@ -1,2 +1 @@
-import { addScalarClassesToHeadless } from "./add-scalar-classes.js";
-export { addScalarClassesToHeadless };
+export { addScalarClassesToHeadless } from "./add-scalar-classes.js";

package/dist/index.js

@@ -73,7 +73,7 @@ import ScalarMenuSupport_default from "./components/ScalarMenu/ScalarMenuSupport
 import ScalarMenuTeamProfile_default from "./components/ScalarMenu/ScalarMenuTeamProfile.vue.js";
 import ScalarMenuTeamPicker_default from "./components/ScalarMenu/ScalarMenuTeamPicker.vue.js";
 import ScalarMenuWorkspacePicker_default from "./components/ScalarMenu/ScalarMenuWorkspacePicker.vue.js";
-import { useModal } from "./components/ScalarModal/ScalarModal.vue.script.js";
+import { useModal } from "./components/ScalarModal/ScalarModal.vue_vue_type_script_setup_true_lang.js";
 import ScalarModal_default from "./components/ScalarModal/ScalarModal.vue.js";
 import ScalarPopover_default from "./components/ScalarPopover/ScalarPopover.vue.js";
 import ScalarSavePrompt_default from "./components/ScalarSavePrompt/ScalarSavePrompt.vue.js";

package/dist/style.css

@@ -1031,6 +1031,10 @@
   margin-bottom: -4px;
 }
 
+.scalar-app .-mb-px {
+  margin-bottom: -1px;
+}
+
 .scalar-app .mb-0 {
   margin-bottom: 0;
 }
@@ -1218,6 +1222,10 @@
   height: 128px;
 }
 
+.scalar-app .h-60 {
+  height: 240px;
+}
+
 .scalar-app .h-border {
   height: var(--scalar-border-width);
 }
@@ -1358,6 +1366,10 @@
   width: 288px;
 }
 
+.scalar-app .w-120 {
+  width: 480px;
+}
+
 .scalar-app .w-\[38px\] {
   width: 38px;
 }
@@ -1458,6 +1470,10 @@
   flex: 1;
 }
 
+.scalar-app .flex-auto {
+  flex: auto;
+}
+
 .scalar-app .flex-shrink, .scalar-app .shrink {
   flex-shrink: 1;
 }
@@ -1692,6 +1708,10 @@
   column-gap: 16px;
 }
 
+.scalar-app .gap-y-1 {
+  row-gap: 4px;
+}
+
 .scalar-app .gap-y-8 {
   row-gap: 32px;
 }
@@ -2356,7 +2376,7 @@
   text-wrap: nowrap;
 }
 
-.scalar-app .break-words, .scalar-app .wrap-break-word {
+.scalar-app .wrap-break-word {
   overflow-wrap: break-word;
 }
 
@@ -3618,12 +3638,12 @@ to {
   word-break: normal;
   word-wrap: normal;
   tab-size: 4;
-  line-height: 1.4;
 }
 .scalar-app code.hljs {
   all: unset;
   font-size: inherit;
   color: var(--scalar-color-2);
+  line-height: 1.4;
   font-family: var(--scalar-font-code);
   counter-reset: linenumber;
 }
@@ -3736,7 +3756,7 @@ to {
   background-color: var(--scalar-background-3);
 }
 
-.toggle-icon-ellipse[data-v-60be8692] {
+.toggle-icon-ellipse[data-v-8f507267] {
   width: 7px;
   height: 7px;
   border-radius: 50%;
@@ -3749,7 +3769,7 @@ to {
     width 0.3s ease-in-out,
     height 0.3s ease-in-out;
 }
-.toggle-icon-moon-mask[data-v-60be8692] {
+.toggle-icon-moon-mask[data-v-8f507267] {
   width: 100%;
   height: 100%;
   border: 1px solid currentColor;
@@ -3762,7 +3782,7 @@ to {
   transition: transform 0.3s ease-in-out;
   transform: translate3d(4px, -4px, 0);
 }
-.toggle-icon-sun-ray[data-v-60be8692] {
+.toggle-icon-sun-ray[data-v-8f507267] {
   width: 12px;
   height: 1px;
   border-radius: 8px;
@@ -3770,16 +3790,16 @@ to {
   position: absolute;
   transition: transform 0.3s ease-in-out;
 }
-.toggle-icon-sun-ray[data-v-60be8692]:nth-of-type(2) {
+.toggle-icon-sun-ray[data-v-8f507267]:nth-of-type(2) {
   transform: rotate(90deg);
 }
-.toggle-icon-sun-ray[data-v-60be8692]:nth-of-type(3) {
+.toggle-icon-sun-ray[data-v-8f507267]:nth-of-type(3) {
   transform: rotate(45deg);
 }
-.toggle-icon-sun-ray[data-v-60be8692]:nth-of-type(4) {
+.toggle-icon-sun-ray[data-v-8f507267]:nth-of-type(4) {
   transform: rotate(-45deg);
 }
-.toggle-icon-dark .toggle-icon-ellipse[data-v-60be8692] {
+.toggle-icon-dark .toggle-icon-ellipse[data-v-8f507267] {
   width: 10px;
   height: 10px;
   mask-image: radial-gradient(
@@ -3788,10 +3808,10 @@ to {
     transparent 12px
   );
 }
-.toggle-icon-dark .toggle-icon-sun-ray[data-v-60be8692] {
+.toggle-icon-dark .toggle-icon-sun-ray[data-v-8f507267] {
   transform: scale(0);
 }
-.toggle-icon-dark .toggle-icon-moon-mask[data-v-60be8692] {
+.toggle-icon-dark .toggle-icon-moon-mask[data-v-8f507267] {
   transform: translate3d(0, 0, 0);
 }
 
@@ -3817,12 +3837,23 @@ to {
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;
-    line-height: 1.4;
     tab-size: 4;
 }
 code.hljs {
     all: unset;
     font-size: inherit;
+    /*
+     * On the code element, not on `:where(code.hljs) *`, because that selector
+     * reaches elements and never text nodes. A highlighter emits a token span
+     * only where it has a scope to give, so a line of entirely unscoped text —
+     * the content between two JSX tags, say — held no element and fell back to
+     * the surrounding line height, rendering a couple of pixels shorter than
+     * the lines around it. Line numbers hid this: that mode wraps every line in
+     * `span.line`, which is an element, so the same block rendered evenly with
+     * a gutter and unevenly without one. Declared here it sets the line box for
+     * every line, and the spans inherit it.
+     */
+    line-height: 1.4;
     color: var(--scalar-color-2);
     font-family: var(--scalar-font-code);
     counter-reset: linenumber;
@@ -4531,19 +4562,19 @@ ol > li::marker,
 }
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-.scalar-modal-layout[data-v-5bb1dcc2] {
-  animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
+.scalar-modal-layout[data-v-b002945c] {
+  animation: .3s ease-in-out forwards fadein-layout-b002945c;
 }
-.scalar-modal[data-v-5bb1dcc2] {
+.scalar-modal[data-v-b002945c] {
   box-shadow: var(--scalar-shadow-2);
-  animation: .3s ease-in-out .1s forwards fadein-modal-5bb1dcc2;
+  animation: .3s ease-in-out .1s forwards fadein-modal-b002945c;
   transform: translate3d(0, 10px, 0);
 }
-.scalar-modal-layout-full[data-v-5bb1dcc2] {
+.scalar-modal-layout-full[data-v-b002945c] {
   opacity: 1 !important;
   background: none !important;
 }
-.modal-content-search .modal-body[data-v-5bb1dcc2] {
+.modal-content-search .modal-body[data-v-b002945c] {
   flex-direction: column;
   max-height: 440px;
   padding: 0;
@@ -4551,12 +4582,12 @@ ol > li::marker,
   overflow: hidden;
 }
 @media (max-width: 720px) and (max-height: 480px) {
-.scalar-modal-layout .scalar-modal[data-v-5bb1dcc2] {
+.scalar-modal-layout .scalar-modal[data-v-b002945c] {
     max-height: 90svh;
     margin-top: 5svh;
 }
 }
-@keyframes fadein-layout-5bb1dcc2 {
+@keyframes fadein-layout-b002945c {
 0% {
     opacity: 0;
 }
@@ -4564,7 +4595,7 @@ ol > li::marker,
     opacity: 1;
 }
 }
-@keyframes fadein-modal-5bb1dcc2 {
+@keyframes fadein-modal-b002945c {
 0% {
     opacity: 0;
     transform: translate3d(0, 10px, 0);
@@ -4574,10 +4605,10 @@ ol > li::marker,
     transform: translate3d(0, 0, 0);
 }
 }
-.full-size-styles[data-v-5bb1dcc2] {
+.full-size-styles[data-v-b002945c] {
   margin: initial;
   border-right: var(--scalar-border-width) solid var(--scalar-border-color);
-  animation: .3s ease-in-out forwards fadein-layout-5bb1dcc2;
+  animation: .3s ease-in-out forwards fadein-layout-b002945c;
   left: 0;
   transform: translate3d(0, 0, 0);
   background-color: var(--scalar-background-1) !important;
@@ -4588,11 +4619,11 @@ ol > li::marker,
   top: 0 !important;
 }
 @media (min-width: 800px) {
-.full-size-styles[data-v-5bb1dcc2] {
+.full-size-styles[data-v-b002945c] {
     width: 50dvw !important;
 }
 }
-.full-size-styles[data-v-5bb1dcc2]:after {
+.full-size-styles[data-v-b002945c]:after {
   content: "";
   width: 50dvw;
   height: 100dvh;
@@ -4601,13 +4632,13 @@ ol > li::marker,
   right: -50dvw;
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-.group\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
+.group\/item > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-b2388a0c] {
   inset-block: -1px;
 }
-.group\/item:first-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
+.group\/item:first-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-b2388a0c] {
   top: 0;
 }
-.group\/item:last-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-3e080c68] {
+.group\/item:last-child > * > .scalar-sidebar-indent .scalar-sidebar-indent-border[data-v-b2388a0c] {
   bottom: 0;
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@@ -4837,20 +4868,20 @@ to {
   inherits: false
 }
 
-.scalar-virtual-text-search-input[data-v-95edadbb]::-webkit-search-cancel-button {
+.scalar-virtual-text-search-input[data-v-b843dc7d]::-webkit-search-cancel-button {
   display: none;
 }
 
-.scalar-virtual-text[data-v-77b9d685]:focus {
+.scalar-virtual-text[data-v-50a0b01e]:focus {
   outline: none;
 }
-.scalar-virtual-text-highlight[data-v-77b9d685] {
+.scalar-virtual-text-highlight[data-v-50a0b01e] {
   background: var(--scalar-background-accent);
   color: inherit;
   border-radius: var(--scalar-radius);
   padding: 1px 0;
 }
-.scalar-virtual-text-highlight-active[data-v-77b9d685] {
+.scalar-virtual-text-highlight-active[data-v-50a0b01e] {
   background: var(--scalar-color-accent);
   color: var(--scalar-background-1);
   border-radius: var(--scalar-radius);