@scalar/components 0.32.1 → 0.33.0

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import ScalarHotkey_default from "../ScalarHotkey/ScalarHotkey.vue.js";
+import { useTooltip } from "./useTooltip.js";
+import { computed, createElementBlock, defineComponent, h, normalizeClass, openBlock, ref, render, renderSlot } from "vue";
+var ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarHotkeyTooltip",
+	props: {
+		content: { default: "" },
+		hotkey: {},
+		modifier: {},
+		delay: { default: () => 300 },
+		placement: { default: "top" },
+		offset: { default: () => 4 }
+	},
+	setup(__props) {
+		const wrapperRef = ref(null);
+		/**
+		* Render the content and the hotkey into an HTML string
+		*/
+		const renderedContent = computed(() => {
+			if (!document) return "";
+			const el = document.createElement("div");
+			const hotKeyClass = "-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border *:rounded *:px-1 *:flex *:items-center *:justify-center";
+			if (__props.content) render(h("div", { class: "flex items-center gap-2" }, [__props.content, h(ScalarHotkey_default, {
+				class: hotKeyClass,
+				hotkey: __props.hotkey,
+				modifier: __props.modifier
+			})]), el);
+			else render(h(ScalarHotkey_default, {
+				class: hotKeyClass,
+				hotkey: __props.hotkey,
+				modifier: __props.modifier
+			}), el);
+			return el.innerHTML;
+		});
+		useTooltip({
+			content: renderedContent,
+			contentTarget: "innerHTML",
+			delay: computed(() => __props.delay),
+			placement: computed(() => __props.placement),
+			offset: computed(() => __props.offset),
+			targetRef: computed(() => wrapperRef.value?.children?.[0] || wrapperRef.value || void 0)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: normalizeClass({ contents: !!_ctx.$slots.default })
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarHotkeyTooltip.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarHotkeyTooltip.vue_vue_type_script_setup_true_lang.js","names":["$slots","ScalarHotkey","_openBlock","_createElementBlock","_normalizeClass","_renderSlot"],"sources":["../../../src/components/ScalarTooltip/ScalarHotkeyTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar hotkey tooltip component\n *\n * Adds a tooltip to an interactive element with a hotkey, if\n * you don't need to display a hotkey, use the ScalarTooltip\n * component instead\n *\n * @example\n * <ScalarHotkeyTooltip content=\"Bold\" hotkey=\"B\" modifier=\"Meta\">\n *   <ScalarButton>Make bold</ScalarButton>\n * </ScalarHotkeyTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, h, ref, render, type Ref } from 'vue'\n\nimport { ScalarHotkey } from '../ScalarHotkey'\nimport type { HotKeyModifier } from '../ScalarHotkey/types'\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipPlacement } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  hotkey,\n  modifier,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<{\n  content?: string\n  hotkey: string\n  modifier?: HotKeyModifier[]\n  delay?: number\n  placement?: ScalarTooltipPlacement\n  offset?: number\n}>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\n/**\n * Render the content and the hotkey into an HTML string\n */\nconst renderedContent = computed<string>(() => {\n  if (!document) return ''\n\n  // Temp element to render the content into\n  const el = document.createElement('div')\n\n  const hotKeyClass =\n    '-m-0.5 border-none p-0 grid grid-flow-col *:border *:h-5 *:min-w-5 *:border-border *:rounded *:px-1 *:flex *:items-center *:justify-center'\n\n  if (content) {\n    // Render the content and the hotkey\n    render(\n      h('div', { class: 'flex items-center gap-2' }, [\n        content,\n        h(ScalarHotkey, {\n          class: hotKeyClass,\n          hotkey,\n          modifier,\n        }),\n      ]),\n      el,\n    )\n  } else {\n    render(\n      h(ScalarHotkey, {\n        class: hotKeyClass,\n        hotkey,\n        modifier,\n      }),\n      el,\n    )\n  }\n\n  const html = el.innerHTML\n\n  // Return the rendered content\n  return html\n})\n\nuseTooltip({\n  content: renderedContent,\n  contentTarget: 'innerHTML',\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAwCA,MAAM,aAAsC,IAAI,IAAI;;;;EAKpD,MAAM,kBAAkB,eAAuB;GAC7C,IAAI,CAAC,UAAU,OAAO;GAGtB,MAAM,KAAK,SAAS,cAAc,KAAK;GAEvC,MAAM,cACJ;GAEF,IAAI,QAAA,SAEF,OACE,EAAE,OAAO,EAAE,OAAO,0BAA0B,GAAG,CAC7C,QAAA,SACA,EAAEC,sBAAc;IACd,OAAO;IACP,QAAK,QAAA;IACL,UAAO,QAAA;GACT,CAAC,CACH,CAAC,GACD,EACF;QAEA,OACE,EAAEA,sBAAc;IACd,OAAO;IACP,QAAK,QAAA;IACL,UAAO,QAAA;GACT,CAAC,GACD,EACF;GAMF,OAHa,GAAG;EAIlB,CAAC;EAED,WAAW;GACT,SAAS;GACT,eAAe;GACf,OAAO,eAAe,QAAA,KAAK;GAC3B,WAAW,eAAe,QAAA,SAAS;GACnC,QAAQ,eAAe,QAAA,MAAM;GAC7B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,CAC/D;EACF,CAAC;;GAGC,OAAAC,UAAA,GAAAC,mBAIM,OAAA;IAHA,SAAA;IAAJ,KAAI;IACH,OAAKC,eAAA,EAAA,UAAA,CAAA,CAAgBJ,KAAAA,OAAO,QAAO,CAAA;G,IACpCK,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarTooltip/ScalarTooltip.vue.js

@@ -1,5 +1,5 @@
-import ScalarTooltip_vue_vue_type_script_setup_true_lang_default from "./ScalarTooltip.vue.script.js";
-/* empty css                            */
+import ScalarTooltip_vue_vue_type_script_setup_true_lang_default from "./ScalarTooltip.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                  */
 //#region src/components/ScalarTooltip/ScalarTooltip.vue
 var ScalarTooltip_default = ScalarTooltip_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.js","names":[],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { type Ref, computed, ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip text-xs/4 font-normal break-words max-w-xs;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n/*\n * The hairline is spelled out: the preflight that gives `border` its theme colour only reaches\n * descendants of `.scalar-app`, and this element is the `.scalar-app` root itself, so the\n * utility alone would fall back to currentColor (black on light, white on dark).\n */\n:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarTooltip.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, ref, type Ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip max-w-xs text-xs/4 font-normal break-words;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n/*\n * The hairline is spelled out: the preflight that gives `border` its theme colour only reaches\n * descendants of `.scalar-app`, and this element is the `.scalar-app` root itself, so the\n * utility alone would fall back to currentColor (black on light, white on dark).\n */\n:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply bg-b-tooltip absolute -z-1 rounded-lg shadow backdrop-blur;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarTooltip/ScalarTooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { useTooltip } from "./useTooltip.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot } from "vue";
+var ScalarTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarTooltip",
+	props: {
+		content: { default: "" },
+		delay: { default: () => 300 },
+		placement: { default: "top" },
+		offset: { default: () => 4 }
+	},
+	setup(__props) {
+		const wrapperRef = ref(null);
+		useTooltip({
+			content: computed(() => __props.content),
+			delay: computed(() => __props.delay),
+			placement: computed(() => __props.placement),
+			offset: computed(() => __props.offset),
+			targetRef: computed(() => wrapperRef.value?.children?.[0] || wrapperRef.value || void 0)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: normalizeClass({ contents: !!_ctx.$slots.default })
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { ScalarTooltip_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarTooltip.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarTooltip.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_renderSlot"],"sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar tooltip component\n *\n * Adds a tooltip to an interactive element\n *\n * @example\n * <ScalarTooltip content=\"This is a tooltip\">\n *   <ScalarButton>Hover Me</ScalarButton>\n * </ScalarTooltip>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, ref, type Ref } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET } from './constants'\nimport type { ScalarTooltipProps } from './types'\nimport { useTooltip } from './useTooltip'\n\nconst {\n  delay = DEFAULT_DELAY,\n  content = '',\n  placement = 'top',\n  offset = DEFAULT_OFFSET,\n} = defineProps<ScalarTooltipProps>()\n\nconst wrapperRef: Ref<HTMLElement | null> = ref(null)\n\nuseTooltip({\n  content: computed(() => content),\n  delay: computed(() => delay),\n  placement: computed(() => placement),\n  offset: computed(() => offset),\n  targetRef: computed(\n    () => wrapperRef.value?.children?.[0] || wrapperRef.value || undefined,\n  ),\n})\n</script>\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :class=\"{ contents: !!$slots.default }\">\n    <slot />\n  </div>\n</template>\n<style>\n@reference \"../../style.css\";\n\n/**\n * Global styles for the tooltip\n *\n * The tooltip element normally sits directly on the body, but it moves into a <dialog>\n * opened with showModal() so it can paint above the top layer. Both parents have to be\n * matched here or the tooltip loses every one of these styles the moment it is\n * reparented, and renders as unstyled text on a transparent background.\n */\n:where(body, dialog) > .scalar-tooltip {\n  --scalar-tooltip-padding-x: 8px;\n  --scalar-tooltip-padding-y: 6px;\n\n  padding: var(--scalar-tooltip-padding-y) var(--scalar-tooltip-padding-x);\n\n  @apply z-tooltip text-c-tooltip max-w-xs text-xs/4 font-normal break-words;\n}\n\n/**\n * The offset is the gap between the target and the tooltip, so it only belongs\n * on the side facing the target (opposite the placement side). Applying it to\n * every side shifts the visible box inward on `-start` / `-end` placements,\n * where Floating UI aligns the floating element's edge with the target's edge.\n */\n:where(body, dialog) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n/*\n * The hairline is spelled out: the preflight that gives `border` its theme colour only reaches\n * descendants of `.scalar-app`, and this element is the `.scalar-app` root itself, so the\n * utility alone would fall back to currentColor (black on light, white on dark).\n */\n:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n  @apply bg-b-tooltip absolute -z-1 rounded-lg shadow backdrop-blur;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body, dialog) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body, dialog) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,IAAI;EAEpD,WAAW;GACT,SAAS,eAAe,QAAA,OAAO;GAC/B,OAAO,eAAe,QAAA,KAAK;GAC3B,WAAW,eAAe,QAAA,SAAS;GACnC,QAAQ,eAAe,QAAA,MAAM;GAC7B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,CAC/D;EACF,CAAC;;GAGC,OAAAC,UAAA,GAAAC,mBAIM,OAAA;IAHA,SAAA;IAAJ,KAAI;IACH,OAAKC,eAAA,EAAA,UAAA,CAAA,CAAgBH,KAAAA,OAAO,QAAO,CAAA;G,IACpCI,WAAQ,KAAA,QAAA,SAAA,C"}

package/dist/components/ScalarVirtualCodeBlock/ScalarVirtualCodeBlock.vue.js

@@ -1,4 +1,4 @@
-import ScalarVirtualCodeBlock_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualCodeBlock.vue.script.js";
+import ScalarVirtualCodeBlock_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualCodeBlock.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/ScalarVirtualCodeBlock/ScalarVirtualCodeBlock.vue
 var ScalarVirtualCodeBlock_default = ScalarVirtualCodeBlock_vue_vue_type_script_setup_true_lang_default;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualCodeBlock.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualCodeBlock/ScalarVirtualCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Code Block component\n *\n * Renders large blocks of code using virtualized scrolling with a copy button.\n * Used as a fallback for ScalarCodeBlock when content exceeds the performance\n * threshold for syntax highlighting.\n *\n * @example\n * <ScalarVirtualCodeBlock content=\"large json string\" lang=\"json\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarCodeBlockCopy from '../ScalarCodeBlock/ScalarCodeBlockCopy.vue'\nimport type { StandardLanguageKey } from '../ScalarCodeBlock/types'\nimport ScalarCopyBackdrop from '../ScalarCopy/ScalarCopyBackdrop.vue'\nimport ScalarVirtualText from '../ScalarVirtualText/ScalarVirtualText.vue'\n\nconst {\n  content,\n  label = 'Code sample',\n  lang = 'plaintext',\n  copy = 'hover',\n  lineHeight = 20,\n} = defineProps<{\n  /** Text content to display */\n  content: string\n  /** Accessible name of the keyboard-scrollable code region. */\n  label?: string\n  /** Language label for the copy button */\n  lang?: StandardLanguageKey | string\n  /** Copy button visibility: 'always', 'hover', or false */\n  copy?: 'always' | 'hover' | false\n  /** Height of each line in pixels */\n  lineHeight?: number\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0',\n      )\n    \">\n    <ScalarVirtualText\n      :aria-label=\"label\"\n      containerClass=\"custom-scroll overflow-auto flex flex-1 max-h-screen\"\n      contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n      :lineHeight=\"lineHeight\"\n      role=\"region\"\n      :text=\"content\" />\n    <ScalarCodeBlockCopy\n      v-if=\"copy\"\n      class=\"scalar-code-copy absolute top-2.5 right-2.5\"\n      :class=\"[{ 'opacity-100': copy === 'always' }]\"\n      :content=\"content\"\n      :lang=\"lang\"\n      :showLang=\"true\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop -right-1.5 -top-1\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ScalarVirtualCodeBlock.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarVirtualCodeBlock/ScalarVirtualCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Code Block component\n *\n * Renders large blocks of code using virtualized scrolling with a copy button.\n * Used as a fallback for ScalarCodeBlock when content exceeds the performance\n * threshold for syntax highlighting.\n *\n * @example\n * <ScalarVirtualCodeBlock content=\"large json string\" lang=\"json\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarCodeBlockCopy from '../ScalarCodeBlock/ScalarCodeBlockCopy.vue'\nimport type { StandardLanguageKey } from '../ScalarCodeBlock/types'\nimport ScalarCopyBackdrop from '../ScalarCopy/ScalarCopyBackdrop.vue'\nimport ScalarVirtualText from '../ScalarVirtualText/ScalarVirtualText.vue'\n\nconst {\n  content,\n  label = 'Code sample',\n  lang = 'plaintext',\n  copy = 'hover',\n  lineHeight = 20,\n} = defineProps<{\n  /** Text content to display */\n  content: string\n  /** Accessible name of the keyboard-scrollable code region. */\n  label?: string\n  /** Language label for the copy button */\n  lang?: StandardLanguageKey | string\n  /** Copy button visibility: 'always', 'hover', or false */\n  copy?: 'always' | 'hover' | false\n  /** Height of each line in pixels */\n  lineHeight?: number\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0',\n      )\n    \">\n    <ScalarVirtualText\n      :aria-label=\"label\"\n      containerClass=\"custom-scroll overflow-auto flex flex-1 max-h-screen\"\n      contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n      :lineHeight=\"lineHeight\"\n      role=\"region\"\n      :text=\"content\" />\n    <ScalarCodeBlockCopy\n      v-if=\"copy\"\n      class=\"scalar-code-copy absolute top-2.5 right-2.5\"\n      :class=\"[{ 'opacity-100': copy === 'always' }]\"\n      :content=\"content\"\n      :lang=\"lang\"\n      :showLang=\"true\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop -top-1 -right-1.5\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/ScalarVirtualCodeBlock/ScalarVirtualCodeBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,53 @@
+import ScalarCopyBackdrop_default from "../ScalarCopy/ScalarCopyBackdrop.vue.js";
+import ScalarCodeBlockCopy_default from "../ScalarCodeBlock/ScalarCodeBlockCopy.vue.js";
+import ScalarVirtualText_default from "../ScalarVirtualText/ScalarVirtualText.vue.js";
+import { useBindCx } from "@scalar/use-hooks/useBindCx";
+import { createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, unref, withCtx } from "vue";
+var ScalarVirtualCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "ScalarVirtualCodeBlock",
+	props: {
+		content: {},
+		label: { default: "Code sample" },
+		lang: { default: "plaintext" },
+		copy: {
+			type: [String, Boolean],
+			default: "hover"
+		},
+		lineHeight: { default: 20 }
+	},
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("scalar-code-block group/code-block flex flex-col", "relative bg-b-1 min-h-0 min-w-0"))), [createVNode(ScalarVirtualText_default, {
+				"aria-label": __props.label,
+				containerClass: "custom-scroll overflow-auto flex flex-1 max-h-screen",
+				contentClass: "language-plaintext whitespace-pre font-code text-base p-2",
+				lineHeight: __props.lineHeight,
+				role: "region",
+				text: __props.content
+			}, null, 8, [
+				"aria-label",
+				"lineHeight",
+				"text"
+			]), __props.copy ? (openBlock(), createBlock(ScalarCodeBlockCopy_default, {
+				key: 0,
+				class: normalizeClass(["scalar-code-copy absolute top-2.5 right-2.5", [{ "opacity-100": __props.copy === "always" }]]),
+				content: __props.content,
+				lang: __props.lang,
+				showLang: true
+			}, {
+				backdrop: withCtx(() => [createVNode(ScalarCopyBackdrop_default, { class: "scalar-code-copy-backdrop -top-1 -right-1.5" })]),
+				_: 1
+			}, 8, [
+				"class",
+				"content",
+				"lang"
+			])) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { ScalarVirtualCodeBlock_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarVirtualCodeBlock.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarVirtualCodeBlock.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","_createVNode","ScalarVirtualText","_createBlock","ScalarCodeBlockCopy","_normalizeClass","_withCtx","ScalarCopyBackdrop","_createCommentVNode"],"sources":["../../../src/components/ScalarVirtualCodeBlock/ScalarVirtualCodeBlock.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Code Block component\n *\n * Renders large blocks of code using virtualized scrolling with a copy button.\n * Used as a fallback for ScalarCodeBlock when content exceeds the performance\n * threshold for syntax highlighting.\n *\n * @example\n * <ScalarVirtualCodeBlock content=\"large json string\" lang=\"json\" />\n */\nexport default {}\n</script>\n<script lang=\"ts\" setup>\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport ScalarCodeBlockCopy from '../ScalarCodeBlock/ScalarCodeBlockCopy.vue'\nimport type { StandardLanguageKey } from '../ScalarCodeBlock/types'\nimport ScalarCopyBackdrop from '../ScalarCopy/ScalarCopyBackdrop.vue'\nimport ScalarVirtualText from '../ScalarVirtualText/ScalarVirtualText.vue'\n\nconst {\n  content,\n  label = 'Code sample',\n  lang = 'plaintext',\n  copy = 'hover',\n  lineHeight = 20,\n} = defineProps<{\n  /** Text content to display */\n  content: string\n  /** Accessible name of the keyboard-scrollable code region. */\n  label?: string\n  /** Language label for the copy button */\n  lang?: StandardLanguageKey | string\n  /** Copy button visibility: 'always', 'hover', or false */\n  copy?: 'always' | 'hover' | false\n  /** Height of each line in pixels */\n  lineHeight?: number\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'scalar-code-block group/code-block flex flex-col',\n        'relative bg-b-1 min-h-0 min-w-0',\n      )\n    \">\n    <ScalarVirtualText\n      :aria-label=\"label\"\n      containerClass=\"custom-scroll overflow-auto flex flex-1 max-h-screen\"\n      contentClass=\"language-plaintext whitespace-pre font-code text-base p-2\"\n      :lineHeight=\"lineHeight\"\n      role=\"region\"\n      :text=\"content\" />\n    <ScalarCodeBlockCopy\n      v-if=\"copy\"\n      class=\"scalar-code-copy absolute top-2.5 right-2.5\"\n      :class=\"[{ 'opacity-100': copy === 'always' }]\"\n      :content=\"content\"\n      :lang=\"lang\"\n      :showLang=\"true\">\n      <template #backdrop>\n        <ScalarCopyBackdrop\n          class=\"scalar-code-copy-backdrop -top-1 -right-1.5\" />\n      </template>\n    </ScalarCodeBlockCopy>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAyCA,MAAM,EAAE,OAAO,UAAU;;GAGvB,OAAAA,UAAA,GAAAC,mBA0BM,OAAAC,eAAAC,mBAzBWC,MAAA,EAAA,CAAE,C,2FAMjBC,YAMoBC,2BAAA;IALjB,cAAY,QAAA;IACb,gBAAe;IACf,cAAa;IACZ,YAAY,QAAA;IACb,MAAK;IACJ,MAAM,QAAA;;;;;G,IAED,QAAA,QADRN,UAAA,GAAAO,YAWsBC,6BAAA;;IATpB,OAAKC,eAAA,CAAC,+CAA6C,CAAA,EAAA,eACzB,QAAA,SAAI,SAAA,CAAA,CAAA,CAAA;IAC7B,SAAS,QAAA;IACT,MAAM,QAAA;IACN,UAAU;;IACA,UAAQC,cAEuC,CADxDL,YACwDM,4BAAA,EAAtD,OAAM,8CAA6C,CAAA,C"}

package/dist/components/ScalarVirtualCodeBlock/index.js

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

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

@@ -1,8 +1,8 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
-import ScalarVirtualText_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualText.vue.script.js";
-/* empty css                                */
+import ScalarVirtualText_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualText.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                      */
 //#region src/components/ScalarVirtualText/ScalarVirtualText.vue
-var ScalarVirtualText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarVirtualText_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-77b9d685"]]);
+var ScalarVirtualText_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ScalarVirtualText_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-50a0b01e"]]);
 //#endregion
 export { ScalarVirtualText_default as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualText.vue.js","names":[],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Text component\n *\n * Renders large blocks of text efficiently using virtualized scrolling.\n * Only the visible lines are rendered to the DOM. Supports in-content\n * search with match highlighting and navigation (Cmd/Ctrl+F).\n *\n * @example\n * <ScalarVirtualText text=\"line1\\nline2\\nline3\" :lineHeight=\"20\" />\n *\n * @example\n * <ScalarVirtualText text=\"lots of text\" searchable />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport ScalarVirtualTextSearch from './ScalarVirtualTextSearch.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n    /** Enable built-in search with Cmd/Ctrl+F */\n    searchable?: boolean\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n    searchable: false,\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst searchRef = ref<InstanceType<typeof ScalarVirtualTextSearch> | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\nconst searchQuery = ref('')\nconst searchOpen = ref(false)\nconst activeMatchIndex = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/** Total height of all lines combined */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\nconst BUFFER = 10\n\n/** Index of the first rendered line (clamped, shared between slice and offset) */\nconst renderStartIndex = computed(() =>\n  Math.max(0, visibleStartIndex.value - BUFFER),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const end = Math.min(lines.value.length, visibleEndIndex.value + BUFFER)\n  return lines.value.slice(renderStartIndex.value, end)\n})\n\n/** Pixel offset for the visible content slice */\nconst contentOffset = computed(() => renderStartIndex.value * props.lineHeight)\n\n// ── Search ────────────────────────────────────────────────────────────\n\ntype SearchMatch = { line: number; start: number; end: number }\n\n/** All matches across the full text, computed only when the query changes */\nconst searchMatches = computed<SearchMatch[]>(() => {\n  const query = searchQuery.value\n  if (!query) return []\n\n  const lowerQuery = query.toLowerCase()\n  const matches: SearchMatch[] = []\n\n  for (let i = 0; i < lines.value.length; i++) {\n    const line = lines.value[i]\n    if (!line) continue\n    const lowerLine = line.toLowerCase()\n    let pos = 0\n    while (pos < lowerLine.length) {\n      const idx = lowerLine.indexOf(lowerQuery, pos)\n      if (idx === -1) break\n      matches.push({ line: i, start: idx, end: idx + query.length })\n      pos = idx + lowerQuery.length\n    }\n  }\n  return matches\n})\n\n/** Set of line indices that contain at least one match, for quick lookup */\nconst matchLineSet = computed(() => {\n  const set = new Set<number>()\n  for (const m of searchMatches.value) set.add(m.line)\n  return set\n})\n\n/** Clamp active index when match count changes */\nwatch(\n  () => searchMatches.value.length,\n  (count) => {\n    if (count === 0) {\n      activeMatchIndex.value = 0\n    } else if (activeMatchIndex.value >= count) {\n      activeMatchIndex.value = count - 1\n    }\n  },\n)\n\n/** Scroll the container so the active match's line is visible */\nconst scrollToMatch = (match: SearchMatch) => {\n  if (!containerRef.value) return\n\n  const targetScroll = match.line * props.lineHeight\n  const viewTop = containerRef.value.scrollTop\n  const viewBottom = viewTop + containerRef.value.clientHeight\n\n  if (targetScroll < viewTop || targetScroll + props.lineHeight > viewBottom) {\n    containerRef.value.scrollTop =\n      targetScroll - containerRef.value.clientHeight / 2\n  }\n}\n\nconst goToMatch = (index: number) => {\n  const match = searchMatches.value[index]\n  if (!match) return\n  activeMatchIndex.value = index\n  scrollToMatch(match)\n}\n\nconst nextMatch = () => {\n  if (searchMatches.value.length === 0) return\n  goToMatch((activeMatchIndex.value + 1) % searchMatches.value.length)\n}\n\nconst prevMatch = () => {\n  if (searchMatches.value.length === 0) return\n  goToMatch(\n    (activeMatchIndex.value - 1 + searchMatches.value.length) %\n      searchMatches.value.length,\n  )\n}\n\nconst openSearch = () => {\n  searchOpen.value = true\n  void nextTick(() => searchRef.value?.focus())\n}\n\nconst closeSearch = () => {\n  searchOpen.value = false\n  searchQuery.value = ''\n  activeMatchIndex.value = 0\n}\n\n/** Intercepts Cmd/Ctrl+F when searchable and the container has focus */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!props.searchable) return\n\n  const modifier = e.metaKey || e.ctrlKey\n  if (modifier && e.key === 'f') {\n    e.preventDefault()\n    e.stopPropagation()\n    openSearch()\n  }\n  if (e.key === 'Escape' && searchOpen.value) {\n    e.preventDefault()\n    closeSearch()\n  }\n}\n\n/** Jump to the first match whenever the query changes */\nwatch(searchQuery, () => {\n  activeMatchIndex.value = 0\n  const first = searchMatches.value[0]\n  if (first) {\n    scrollToMatch(first)\n  }\n})\n\n// ── Scroll / resize ───────────────────────────────────────────────────\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\n// ── Line rendering with highlights ────────────────────────────────────\n\ntype LineSegment = { text: string; highlight: boolean; active: boolean }\n\n/**\n * For a given absolute line index, splits the line text into segments\n * with match highlighting metadata.\n */\nconst getLineSegments = (absoluteIndex: number): LineSegment[] => {\n  const lineText = lines.value[absoluteIndex] ?? ''\n  if (!searchQuery.value || !matchLineSet.value.has(absoluteIndex)) {\n    return [{ text: lineText, highlight: false, active: false }]\n  }\n\n  const lineMatches = searchMatches.value.filter(\n    (m) => m.line === absoluteIndex,\n  )\n  const segments: LineSegment[] = []\n  let cursor = 0\n\n  for (const match of lineMatches) {\n    if (match.start > cursor) {\n      segments.push({\n        text: lineText.slice(cursor, match.start),\n        highlight: false,\n        active: false,\n      })\n    }\n\n    const isActive =\n      searchMatches.value.indexOf(match) === activeMatchIndex.value\n\n    segments.push({\n      text: lineText.slice(match.start, match.end),\n      highlight: true,\n      active: isActive,\n    })\n    cursor = match.end\n  }\n\n  if (cursor < lineText.length) {\n    segments.push({\n      text: lineText.slice(cursor),\n      highlight: false,\n      active: false,\n    })\n  }\n\n  return segments\n}\n\n/**\n * Converts a relative visible-line index to the absolute line index\n * in the full text.\n */\nconst toAbsoluteIndex = (relativeIndex: number): number =>\n  renderStartIndex.value + relativeIndex\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text relative overflow-auto\"\n    :class=\"containerClass\"\n    tabindex=\"0\"\n    @keydown=\"handleKeydown\"\n    @scroll=\"handleScroll\">\n    <!-- Zero-height wrapper so the search bar does not contribute to scrollHeight -->\n    <div\n      v-if=\"searchable && searchOpen\"\n      class=\"sticky top-0 z-10 flex h-0 w-full justify-end overflow-visible\">\n      <ScalarVirtualTextSearch\n        ref=\"searchRef\"\n        v-model:query=\"searchQuery\"\n        :activeMatchIndex=\"activeMatchIndex\"\n        :matchCount=\"searchMatches.length\"\n        @close=\"closeSearch\"\n        @next=\"nextMatch\"\n        @prev=\"prevMatch\" />\n    </div>\n\n    <!-- Invisible spacer that defines the full scrollable height -->\n    <div :style=\"{ height: `${totalHeight}px` }\" />\n    <code\n      class=\"scalar-virtual-text-content absolute left-0 right-0 top-0\"\n      :class=\"contentClass\"\n      :style=\"{ transform: `translateY(${contentOffset}px)` }\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"renderStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        <template\n          v-if=\"searchQuery && matchLineSet.has(toAbsoluteIndex(index))\">\n          <template\n            v-for=\"(segment, sIdx) in getLineSegments(toAbsoluteIndex(index))\"\n            :key=\"sIdx\">\n            <mark\n              v-if=\"segment.highlight\"\n              class=\"scalar-virtual-text-highlight\"\n              :class=\"\n                segment.active ? 'scalar-virtual-text-highlight-active' : ''\n              \">\n              {{ segment.text }}\n            </mark>\n            <template v-else>{{ segment.text }}</template>\n          </template>\n        </template>\n        <template v-else>{{ line }}</template>\n      </div>\n    </code>\n  </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text:focus {\n  outline: none;\n}\n\n.scalar-virtual-text-highlight {\n  background: var(--scalar-background-accent);\n  color: inherit;\n  border-radius: var(--scalar-radius);\n  padding: 1px 0;\n}\n\n.scalar-virtual-text-highlight-active {\n  background: var(--scalar-color-accent);\n  color: var(--scalar-background-1);\n  border-radius: var(--scalar-radius);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ScalarVirtualText.vue.js","names":["_sfc_main"],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Text component\n *\n * Renders large blocks of text efficiently using virtualized scrolling.\n * Only the visible lines are rendered to the DOM. Supports in-content\n * search with match highlighting and navigation (Cmd/Ctrl+F).\n *\n * @example\n * <ScalarVirtualText text=\"line1\\nline2\\nline3\" :lineHeight=\"20\" />\n *\n * @example\n * <ScalarVirtualText text=\"lots of text\" searchable />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport ScalarVirtualTextSearch from './ScalarVirtualTextSearch.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n    /** Enable built-in search with Cmd/Ctrl+F */\n    searchable?: boolean\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n    searchable: false,\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst searchRef = ref<InstanceType<typeof ScalarVirtualTextSearch> | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\nconst searchQuery = ref('')\nconst searchOpen = ref(false)\nconst activeMatchIndex = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/** Total height of all lines combined */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\nconst BUFFER = 10\n\n/** Index of the first rendered line (clamped, shared between slice and offset) */\nconst renderStartIndex = computed(() =>\n  Math.max(0, visibleStartIndex.value - BUFFER),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const end = Math.min(lines.value.length, visibleEndIndex.value + BUFFER)\n  return lines.value.slice(renderStartIndex.value, end)\n})\n\n/** Pixel offset for the visible content slice */\nconst contentOffset = computed(() => renderStartIndex.value * props.lineHeight)\n\n// ── Search ────────────────────────────────────────────────────────────\n\ntype SearchMatch = { line: number; start: number; end: number }\n\n/** All matches across the full text, computed only when the query changes */\nconst searchMatches = computed<SearchMatch[]>(() => {\n  const query = searchQuery.value\n  if (!query) return []\n\n  const lowerQuery = query.toLowerCase()\n  const matches: SearchMatch[] = []\n\n  for (let i = 0; i < lines.value.length; i++) {\n    const line = lines.value[i]\n    if (!line) continue\n    const lowerLine = line.toLowerCase()\n    let pos = 0\n    while (pos < lowerLine.length) {\n      const idx = lowerLine.indexOf(lowerQuery, pos)\n      if (idx === -1) break\n      matches.push({ line: i, start: idx, end: idx + query.length })\n      pos = idx + lowerQuery.length\n    }\n  }\n  return matches\n})\n\n/** Set of line indices that contain at least one match, for quick lookup */\nconst matchLineSet = computed(() => {\n  const set = new Set<number>()\n  for (const m of searchMatches.value) set.add(m.line)\n  return set\n})\n\n/** Clamp active index when match count changes */\nwatch(\n  () => searchMatches.value.length,\n  (count) => {\n    if (count === 0) {\n      activeMatchIndex.value = 0\n    } else if (activeMatchIndex.value >= count) {\n      activeMatchIndex.value = count - 1\n    }\n  },\n)\n\n/** Scroll the container so the active match's line is visible */\nconst scrollToMatch = (match: SearchMatch) => {\n  if (!containerRef.value) return\n\n  const targetScroll = match.line * props.lineHeight\n  const viewTop = containerRef.value.scrollTop\n  const viewBottom = viewTop + containerRef.value.clientHeight\n\n  if (targetScroll < viewTop || targetScroll + props.lineHeight > viewBottom) {\n    containerRef.value.scrollTop =\n      targetScroll - containerRef.value.clientHeight / 2\n  }\n}\n\nconst goToMatch = (index: number) => {\n  const match = searchMatches.value[index]\n  if (!match) return\n  activeMatchIndex.value = index\n  scrollToMatch(match)\n}\n\nconst nextMatch = () => {\n  if (searchMatches.value.length === 0) return\n  goToMatch((activeMatchIndex.value + 1) % searchMatches.value.length)\n}\n\nconst prevMatch = () => {\n  if (searchMatches.value.length === 0) return\n  goToMatch(\n    (activeMatchIndex.value - 1 + searchMatches.value.length) %\n      searchMatches.value.length,\n  )\n}\n\nconst openSearch = () => {\n  searchOpen.value = true\n  void nextTick(() => searchRef.value?.focus())\n}\n\nconst closeSearch = () => {\n  searchOpen.value = false\n  searchQuery.value = ''\n  activeMatchIndex.value = 0\n}\n\n/** Intercepts Cmd/Ctrl+F when searchable and the container has focus */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!props.searchable) return\n\n  const modifier = e.metaKey || e.ctrlKey\n  if (modifier && e.key === 'f') {\n    e.preventDefault()\n    e.stopPropagation()\n    openSearch()\n  }\n  if (e.key === 'Escape' && searchOpen.value) {\n    e.preventDefault()\n    closeSearch()\n  }\n}\n\n/** Jump to the first match whenever the query changes */\nwatch(searchQuery, () => {\n  activeMatchIndex.value = 0\n  const first = searchMatches.value[0]\n  if (first) {\n    scrollToMatch(first)\n  }\n})\n\n// ── Scroll / resize ───────────────────────────────────────────────────\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\n// ── Line rendering with highlights ────────────────────────────────────\n\ntype LineSegment = { text: string; highlight: boolean; active: boolean }\n\n/**\n * For a given absolute line index, splits the line text into segments\n * with match highlighting metadata.\n */\nconst getLineSegments = (absoluteIndex: number): LineSegment[] => {\n  const lineText = lines.value[absoluteIndex] ?? ''\n  if (!searchQuery.value || !matchLineSet.value.has(absoluteIndex)) {\n    return [{ text: lineText, highlight: false, active: false }]\n  }\n\n  const lineMatches = searchMatches.value.filter(\n    (m) => m.line === absoluteIndex,\n  )\n  const segments: LineSegment[] = []\n  let cursor = 0\n\n  for (const match of lineMatches) {\n    if (match.start > cursor) {\n      segments.push({\n        text: lineText.slice(cursor, match.start),\n        highlight: false,\n        active: false,\n      })\n    }\n\n    const isActive =\n      searchMatches.value.indexOf(match) === activeMatchIndex.value\n\n    segments.push({\n      text: lineText.slice(match.start, match.end),\n      highlight: true,\n      active: isActive,\n    })\n    cursor = match.end\n  }\n\n  if (cursor < lineText.length) {\n    segments.push({\n      text: lineText.slice(cursor),\n      highlight: false,\n      active: false,\n    })\n  }\n\n  return segments\n}\n\n/**\n * Converts a relative visible-line index to the absolute line index\n * in the full text.\n */\nconst toAbsoluteIndex = (relativeIndex: number): number =>\n  renderStartIndex.value + relativeIndex\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text relative overflow-auto\"\n    :class=\"containerClass\"\n    tabindex=\"0\"\n    @keydown=\"handleKeydown\"\n    @scroll=\"handleScroll\">\n    <!-- Zero-height wrapper so the search bar does not contribute to scrollHeight -->\n    <div\n      v-if=\"searchable && searchOpen\"\n      class=\"sticky top-0 z-10 flex h-0 w-full justify-end overflow-visible\">\n      <ScalarVirtualTextSearch\n        ref=\"searchRef\"\n        v-model:query=\"searchQuery\"\n        :activeMatchIndex=\"activeMatchIndex\"\n        :matchCount=\"searchMatches.length\"\n        @close=\"closeSearch\"\n        @next=\"nextMatch\"\n        @prev=\"prevMatch\" />\n    </div>\n\n    <!-- Invisible spacer that defines the full scrollable height -->\n    <div :style=\"{ height: `${totalHeight}px` }\" />\n    <code\n      class=\"scalar-virtual-text-content absolute top-0 right-0 left-0\"\n      :class=\"contentClass\"\n      :style=\"{ transform: `translateY(${contentOffset}px)` }\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"renderStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        <template\n          v-if=\"searchQuery && matchLineSet.has(toAbsoluteIndex(index))\">\n          <template\n            v-for=\"(segment, sIdx) in getLineSegments(toAbsoluteIndex(index))\"\n            :key=\"sIdx\">\n            <mark\n              v-if=\"segment.highlight\"\n              class=\"scalar-virtual-text-highlight\"\n              :class=\"\n                segment.active ? 'scalar-virtual-text-highlight-active' : ''\n              \">\n              {{ segment.text }}\n            </mark>\n            <template v-else>{{ segment.text }}</template>\n          </template>\n        </template>\n        <template v-else>{{ line }}</template>\n      </div>\n    </code>\n  </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text:focus {\n  outline: none;\n}\n\n.scalar-virtual-text-highlight {\n  background: var(--scalar-background-accent);\n  color: inherit;\n  border-radius: var(--scalar-radius);\n  padding: 1px 0;\n}\n\n.scalar-virtual-text-highlight-active {\n  background: var(--scalar-color-accent);\n  color: var(--scalar-background-1);\n  border-radius: var(--scalar-radius);\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,229 @@
+import ScalarVirtualTextSearch_default from "./ScalarVirtualTextSearch.vue.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, watch } from "vue";
+//#region src/components/ScalarVirtualText/ScalarVirtualText.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "sticky top-0 z-10 flex h-0 w-full justify-end overflow-visible"
+};
+var ScalarVirtualText_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScalarVirtualText",
+	props: {
+		text: {},
+		lineHeight: { default: 20 },
+		containerClass: { default: "" },
+		contentClass: { default: "" },
+		lineClass: { default: "" },
+		searchable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const containerRef = ref(null);
+		const searchRef = ref(null);
+		const scrollPosition = ref(0);
+		const containerHeight = ref(0);
+		const searchQuery = ref("");
+		const searchOpen = ref(false);
+		const activeMatchIndex = ref(0);
+		/** Array of text broken into lines */
+		const lines = computed(() => props.text.split("\n"));
+		/** Total height of all lines combined */
+		const totalHeight = computed(() => lines.value.length * props.lineHeight);
+		/** Index of the first visible line */
+		const visibleStartIndex = computed(() => Math.floor(scrollPosition.value / props.lineHeight));
+		/** Index of the last visible line */
+		const visibleEndIndex = computed(() => Math.min(Math.ceil((scrollPosition.value + containerHeight.value) / props.lineHeight), lines.value.length));
+		const BUFFER = 10;
+		/** Index of the first rendered line (clamped, shared between slice and offset) */
+		const renderStartIndex = computed(() => Math.max(0, visibleStartIndex.value - BUFFER));
+		/** Array of visible lines, including buffer for smooth scrolling */
+		const visibleLines = computed(() => {
+			const end = Math.min(lines.value.length, visibleEndIndex.value + BUFFER);
+			return lines.value.slice(renderStartIndex.value, end);
+		});
+		/** Pixel offset for the visible content slice */
+		const contentOffset = computed(() => renderStartIndex.value * props.lineHeight);
+		const searchMatches = computed(() => {
+			const query = searchQuery.value;
+			if (!query) return [];
+			const lowerQuery = query.toLowerCase();
+			const matches = [];
+			for (let i = 0; i < lines.value.length; i++) {
+				const line = lines.value[i];
+				if (!line) continue;
+				const lowerLine = line.toLowerCase();
+				let pos = 0;
+				while (pos < lowerLine.length) {
+					const idx = lowerLine.indexOf(lowerQuery, pos);
+					if (idx === -1) break;
+					matches.push({
+						line: i,
+						start: idx,
+						end: idx + query.length
+					});
+					pos = idx + lowerQuery.length;
+				}
+			}
+			return matches;
+		});
+		/** Set of line indices that contain at least one match, for quick lookup */
+		const matchLineSet = computed(() => {
+			const set = /* @__PURE__ */ new Set();
+			for (const m of searchMatches.value) set.add(m.line);
+			return set;
+		});
+		/** Clamp active index when match count changes */
+		watch(() => searchMatches.value.length, (count) => {
+			if (count === 0) activeMatchIndex.value = 0;
+			else if (activeMatchIndex.value >= count) activeMatchIndex.value = count - 1;
+		});
+		/** Scroll the container so the active match's line is visible */
+		const scrollToMatch = (match) => {
+			if (!containerRef.value) return;
+			const targetScroll = match.line * props.lineHeight;
+			const viewTop = containerRef.value.scrollTop;
+			const viewBottom = viewTop + containerRef.value.clientHeight;
+			if (targetScroll < viewTop || targetScroll + props.lineHeight > viewBottom) containerRef.value.scrollTop = targetScroll - containerRef.value.clientHeight / 2;
+		};
+		const goToMatch = (index) => {
+			const match = searchMatches.value[index];
+			if (!match) return;
+			activeMatchIndex.value = index;
+			scrollToMatch(match);
+		};
+		const nextMatch = () => {
+			if (searchMatches.value.length === 0) return;
+			goToMatch((activeMatchIndex.value + 1) % searchMatches.value.length);
+		};
+		const prevMatch = () => {
+			if (searchMatches.value.length === 0) return;
+			goToMatch((activeMatchIndex.value - 1 + searchMatches.value.length) % searchMatches.value.length);
+		};
+		const openSearch = () => {
+			searchOpen.value = true;
+			nextTick(() => searchRef.value?.focus());
+		};
+		const closeSearch = () => {
+			searchOpen.value = false;
+			searchQuery.value = "";
+			activeMatchIndex.value = 0;
+		};
+		/** Intercepts Cmd/Ctrl+F when searchable and the container has focus */
+		const handleKeydown = (e) => {
+			if (!props.searchable) return;
+			if ((e.metaKey || e.ctrlKey) && e.key === "f") {
+				e.preventDefault();
+				e.stopPropagation();
+				openSearch();
+			}
+			if (e.key === "Escape" && searchOpen.value) {
+				e.preventDefault();
+				closeSearch();
+			}
+		};
+		/** Jump to the first match whenever the query changes */
+		watch(searchQuery, () => {
+			activeMatchIndex.value = 0;
+			const first = searchMatches.value[0];
+			if (first) scrollToMatch(first);
+		});
+		/** Updates the scroll position when the container is scrolled */
+		const handleScroll = () => containerRef.value && (scrollPosition.value = containerRef.value.scrollTop);
+		/** Updates the container height when the window is resized */
+		const updateContainerHeight = () => containerRef.value && (containerHeight.value = containerRef.value.clientHeight);
+		onMounted(() => {
+			updateContainerHeight();
+			window.addEventListener("resize", updateContainerHeight);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", updateContainerHeight);
+		});
+		const getLineSegments = (absoluteIndex) => {
+			const lineText = lines.value[absoluteIndex] ?? "";
+			if (!searchQuery.value || !matchLineSet.value.has(absoluteIndex)) return [{
+				text: lineText,
+				highlight: false,
+				active: false
+			}];
+			const lineMatches = searchMatches.value.filter((m) => m.line === absoluteIndex);
+			const segments = [];
+			let cursor = 0;
+			for (const match of lineMatches) {
+				if (match.start > cursor) segments.push({
+					text: lineText.slice(cursor, match.start),
+					highlight: false,
+					active: false
+				});
+				const isActive = searchMatches.value.indexOf(match) === activeMatchIndex.value;
+				segments.push({
+					text: lineText.slice(match.start, match.end),
+					highlight: true,
+					active: isActive
+				});
+				cursor = match.end;
+			}
+			if (cursor < lineText.length) segments.push({
+				text: lineText.slice(cursor),
+				highlight: false,
+				active: false
+			});
+			return segments;
+		};
+		/**
+		* Converts a relative visible-line index to the absolute line index
+		* in the full text.
+		*/
+		const toAbsoluteIndex = (relativeIndex) => renderStartIndex.value + relativeIndex;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: normalizeClass(["scalar-virtual-text relative overflow-auto", __props.containerClass]),
+				tabindex: "0",
+				onKeydown: handleKeydown,
+				onScroll: handleScroll
+			}, [
+				__props.searchable && searchOpen.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(ScalarVirtualTextSearch_default, {
+					ref_key: "searchRef",
+					ref: searchRef,
+					query: searchQuery.value,
+					"onUpdate:query": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+					activeMatchIndex: activeMatchIndex.value,
+					matchCount: searchMatches.value.length,
+					onClose: closeSearch,
+					onNext: nextMatch,
+					onPrev: prevMatch
+				}, null, 8, [
+					"query",
+					"activeMatchIndex",
+					"matchCount"
+				])])) : createCommentVNode("", true),
+				createElementVNode("div", { style: normalizeStyle({ height: `${totalHeight.value}px` }) }, null, 4),
+				createElementVNode("code", {
+					class: normalizeClass(["scalar-virtual-text-content absolute top-0 right-0 left-0", __props.contentClass]),
+					style: normalizeStyle({ transform: `translateY(${contentOffset.value}px)` })
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleLines.value, (line, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: renderStartIndex.value + index,
+						class: normalizeClass(["scalar-virtual-text-line", __props.lineClass]),
+						style: normalizeStyle({
+							height: `${props.lineHeight}px`,
+							lineHeight: `${props.lineHeight}px`
+						})
+					}, [searchQuery.value && matchLineSet.value.has(toAbsoluteIndex(index)) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(getLineSegments(toAbsoluteIndex(index)), (segment, sIdx) => {
+						return openBlock(), createElementBlock(Fragment, { key: sIdx }, [segment.highlight ? (openBlock(), createElementBlock("mark", {
+							key: 0,
+							class: normalizeClass(["scalar-virtual-text-highlight", segment.active ? "scalar-virtual-text-highlight-active" : ""])
+						}, toDisplayString(segment.text), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(segment.text), 1)], 64))], 64);
+					}), 128)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(line), 1)], 64))], 6);
+				}), 128))], 6)
+			], 34);
+		};
+	}
+});
+//#endregion
+export { ScalarVirtualText_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarVirtualText.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarVirtualText.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode","ScalarVirtualTextSearch","_createCommentVNode","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_toDisplayString","_createTextVNode"],"sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Virtual Text component\n *\n * Renders large blocks of text efficiently using virtualized scrolling.\n * Only the visible lines are rendered to the DOM. Supports in-content\n * search with match highlighting and navigation (Cmd/Ctrl+F).\n *\n * @example\n * <ScalarVirtualText text=\"line1\\nline2\\nline3\" :lineHeight=\"20\" />\n *\n * @example\n * <ScalarVirtualText text=\"lots of text\" searchable />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport ScalarVirtualTextSearch from './ScalarVirtualTextSearch.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Text to display */\n    text: string\n    /**\n     * Height of each line\n     * @default 20\n     */\n    lineHeight?: number\n    containerClass?: string\n    contentClass?: string\n    lineClass?: string\n    /** Enable built-in search with Cmd/Ctrl+F */\n    searchable?: boolean\n  }>(),\n  {\n    lineHeight: 20,\n    containerClass: '',\n    contentClass: '',\n    lineClass: '',\n    searchable: false,\n  },\n)\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst searchRef = ref<InstanceType<typeof ScalarVirtualTextSearch> | null>(null)\nconst scrollPosition = ref(0)\nconst containerHeight = ref(0)\n\nconst searchQuery = ref('')\nconst searchOpen = ref(false)\nconst activeMatchIndex = ref(0)\n\n/** Array of text broken into lines */\nconst lines = computed(() => props.text.split('\\n'))\n/** Total height of all lines combined */\nconst totalHeight = computed(() => lines.value.length * props.lineHeight)\n\n/** Index of the first visible line */\nconst visibleStartIndex = computed(() =>\n  Math.floor(scrollPosition.value / props.lineHeight),\n)\n\n/** Index of the last visible line */\nconst visibleEndIndex = computed(() =>\n  Math.min(\n    Math.ceil(\n      (scrollPosition.value + containerHeight.value) / props.lineHeight,\n    ),\n    lines.value.length,\n  ),\n)\n\nconst BUFFER = 10\n\n/** Index of the first rendered line (clamped, shared between slice and offset) */\nconst renderStartIndex = computed(() =>\n  Math.max(0, visibleStartIndex.value - BUFFER),\n)\n\n/** Array of visible lines, including buffer for smooth scrolling */\nconst visibleLines = computed(() => {\n  const end = Math.min(lines.value.length, visibleEndIndex.value + BUFFER)\n  return lines.value.slice(renderStartIndex.value, end)\n})\n\n/** Pixel offset for the visible content slice */\nconst contentOffset = computed(() => renderStartIndex.value * props.lineHeight)\n\n// ── Search ────────────────────────────────────────────────────────────\n\ntype SearchMatch = { line: number; start: number; end: number }\n\n/** All matches across the full text, computed only when the query changes */\nconst searchMatches = computed<SearchMatch[]>(() => {\n  const query = searchQuery.value\n  if (!query) return []\n\n  const lowerQuery = query.toLowerCase()\n  const matches: SearchMatch[] = []\n\n  for (let i = 0; i < lines.value.length; i++) {\n    const line = lines.value[i]\n    if (!line) continue\n    const lowerLine = line.toLowerCase()\n    let pos = 0\n    while (pos < lowerLine.length) {\n      const idx = lowerLine.indexOf(lowerQuery, pos)\n      if (idx === -1) break\n      matches.push({ line: i, start: idx, end: idx + query.length })\n      pos = idx + lowerQuery.length\n    }\n  }\n  return matches\n})\n\n/** Set of line indices that contain at least one match, for quick lookup */\nconst matchLineSet = computed(() => {\n  const set = new Set<number>()\n  for (const m of searchMatches.value) set.add(m.line)\n  return set\n})\n\n/** Clamp active index when match count changes */\nwatch(\n  () => searchMatches.value.length,\n  (count) => {\n    if (count === 0) {\n      activeMatchIndex.value = 0\n    } else if (activeMatchIndex.value >= count) {\n      activeMatchIndex.value = count - 1\n    }\n  },\n)\n\n/** Scroll the container so the active match's line is visible */\nconst scrollToMatch = (match: SearchMatch) => {\n  if (!containerRef.value) return\n\n  const targetScroll = match.line * props.lineHeight\n  const viewTop = containerRef.value.scrollTop\n  const viewBottom = viewTop + containerRef.value.clientHeight\n\n  if (targetScroll < viewTop || targetScroll + props.lineHeight > viewBottom) {\n    containerRef.value.scrollTop =\n      targetScroll - containerRef.value.clientHeight / 2\n  }\n}\n\nconst goToMatch = (index: number) => {\n  const match = searchMatches.value[index]\n  if (!match) return\n  activeMatchIndex.value = index\n  scrollToMatch(match)\n}\n\nconst nextMatch = () => {\n  if (searchMatches.value.length === 0) return\n  goToMatch((activeMatchIndex.value + 1) % searchMatches.value.length)\n}\n\nconst prevMatch = () => {\n  if (searchMatches.value.length === 0) return\n  goToMatch(\n    (activeMatchIndex.value - 1 + searchMatches.value.length) %\n      searchMatches.value.length,\n  )\n}\n\nconst openSearch = () => {\n  searchOpen.value = true\n  void nextTick(() => searchRef.value?.focus())\n}\n\nconst closeSearch = () => {\n  searchOpen.value = false\n  searchQuery.value = ''\n  activeMatchIndex.value = 0\n}\n\n/** Intercepts Cmd/Ctrl+F when searchable and the container has focus */\nconst handleKeydown = (e: KeyboardEvent) => {\n  if (!props.searchable) return\n\n  const modifier = e.metaKey || e.ctrlKey\n  if (modifier && e.key === 'f') {\n    e.preventDefault()\n    e.stopPropagation()\n    openSearch()\n  }\n  if (e.key === 'Escape' && searchOpen.value) {\n    e.preventDefault()\n    closeSearch()\n  }\n}\n\n/** Jump to the first match whenever the query changes */\nwatch(searchQuery, () => {\n  activeMatchIndex.value = 0\n  const first = searchMatches.value[0]\n  if (first) {\n    scrollToMatch(first)\n  }\n})\n\n// ── Scroll / resize ───────────────────────────────────────────────────\n\n/** Updates the scroll position when the container is scrolled */\nconst handleScroll = () =>\n  containerRef.value && (scrollPosition.value = containerRef.value.scrollTop)\n\n/** Updates the container height when the window is resized */\nconst updateContainerHeight = () =>\n  containerRef.value &&\n  (containerHeight.value = containerRef.value.clientHeight)\n\nonMounted(() => {\n  updateContainerHeight()\n  window.addEventListener('resize', updateContainerHeight)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateContainerHeight)\n})\n\n// ── Line rendering with highlights ────────────────────────────────────\n\ntype LineSegment = { text: string; highlight: boolean; active: boolean }\n\n/**\n * For a given absolute line index, splits the line text into segments\n * with match highlighting metadata.\n */\nconst getLineSegments = (absoluteIndex: number): LineSegment[] => {\n  const lineText = lines.value[absoluteIndex] ?? ''\n  if (!searchQuery.value || !matchLineSet.value.has(absoluteIndex)) {\n    return [{ text: lineText, highlight: false, active: false }]\n  }\n\n  const lineMatches = searchMatches.value.filter(\n    (m) => m.line === absoluteIndex,\n  )\n  const segments: LineSegment[] = []\n  let cursor = 0\n\n  for (const match of lineMatches) {\n    if (match.start > cursor) {\n      segments.push({\n        text: lineText.slice(cursor, match.start),\n        highlight: false,\n        active: false,\n      })\n    }\n\n    const isActive =\n      searchMatches.value.indexOf(match) === activeMatchIndex.value\n\n    segments.push({\n      text: lineText.slice(match.start, match.end),\n      highlight: true,\n      active: isActive,\n    })\n    cursor = match.end\n  }\n\n  if (cursor < lineText.length) {\n    segments.push({\n      text: lineText.slice(cursor),\n      highlight: false,\n      active: false,\n    })\n  }\n\n  return segments\n}\n\n/**\n * Converts a relative visible-line index to the absolute line index\n * in the full text.\n */\nconst toAbsoluteIndex = (relativeIndex: number): number =>\n  renderStartIndex.value + relativeIndex\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"scalar-virtual-text relative overflow-auto\"\n    :class=\"containerClass\"\n    tabindex=\"0\"\n    @keydown=\"handleKeydown\"\n    @scroll=\"handleScroll\">\n    <!-- Zero-height wrapper so the search bar does not contribute to scrollHeight -->\n    <div\n      v-if=\"searchable && searchOpen\"\n      class=\"sticky top-0 z-10 flex h-0 w-full justify-end overflow-visible\">\n      <ScalarVirtualTextSearch\n        ref=\"searchRef\"\n        v-model:query=\"searchQuery\"\n        :activeMatchIndex=\"activeMatchIndex\"\n        :matchCount=\"searchMatches.length\"\n        @close=\"closeSearch\"\n        @next=\"nextMatch\"\n        @prev=\"prevMatch\" />\n    </div>\n\n    <!-- Invisible spacer that defines the full scrollable height -->\n    <div :style=\"{ height: `${totalHeight}px` }\" />\n    <code\n      class=\"scalar-virtual-text-content absolute top-0 right-0 left-0\"\n      :class=\"contentClass\"\n      :style=\"{ transform: `translateY(${contentOffset}px)` }\">\n      <div\n        v-for=\"(line, index) in visibleLines\"\n        :key=\"renderStartIndex + index\"\n        class=\"scalar-virtual-text-line\"\n        :class=\"lineClass\"\n        :style=\"{\n          height: `${props.lineHeight}px`,\n          lineHeight: `${props.lineHeight}px`,\n        }\">\n        <template\n          v-if=\"searchQuery && matchLineSet.has(toAbsoluteIndex(index))\">\n          <template\n            v-for=\"(segment, sIdx) in getLineSegments(toAbsoluteIndex(index))\"\n            :key=\"sIdx\">\n            <mark\n              v-if=\"segment.highlight\"\n              class=\"scalar-virtual-text-highlight\"\n              :class=\"\n                segment.active ? 'scalar-virtual-text-highlight-active' : ''\n              \">\n              {{ segment.text }}\n            </mark>\n            <template v-else>{{ segment.text }}</template>\n          </template>\n        </template>\n        <template v-else>{{ line }}</template>\n      </div>\n    </code>\n  </div>\n</template>\n\n<style scoped>\n.scalar-virtual-text:focus {\n  outline: none;\n}\n\n.scalar-virtual-text-highlight {\n  background: var(--scalar-background-accent);\n  color: inherit;\n  border-radius: var(--scalar-radius);\n  padding: 1px 0;\n}\n\n.scalar-virtual-text-highlight-active {\n  background: var(--scalar-color-accent);\n  color: var(--scalar-background-1);\n  border-radius: var(--scalar-radius);\n}\n</style>\n"],"mappings":"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"}

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":""}